.board-page { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.board-header {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 20px 0; background: var(--surface); border-bottom: 1px solid var(--border);
}

.board-header__title {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  h1 { font-size: 18px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

.star {
  &[aria-pressed="true"] { color: var(--brand); .icon { fill: currentColor; } }
}

.board-tabs { display: flex; align-items: center; gap: 4px; }
.board-tabs__list { display: flex; gap: 4px; min-width: 0; overflow-x: auto; }
.board-tabs__add {
  position: relative; flex: none;
  &[open] summary { background: var(--surface-2); color: var(--text); }
}
.board-tabs__form { left: 0; display: flex; gap: 6px; width: 300px; padding: 8px; }
.board-tabs__tab {
  padding: 8px 12px; border-bottom: 2px solid transparent; color: var(--text-2); white-space: nowrap;
  &:hover { color: var(--text); }
  &[aria-current="page"] { color: var(--text); font-weight: 500; border-color: var(--brand); }
}

.toolbar {
  display: flex; align-items: center; gap: 8px; flex: none; padding: 8px 20px; overflow-x: auto;
  background: var(--surface); border-bottom: 1px solid var(--border);
  .input { height: 32px; }
}
.toolbar__search { width: 220px; flex: none; }
.toolbar__select { width: auto; flex: none; }
.toolbar__clear { flex: none; font-size: 13px; color: var(--brand-strong); }
.toolbar__spacer { flex: 1; }

.board-layout { display: flex; flex: 1; min-height: 0; }
.panel-frame { width: clamp(var(--panel-min), var(--panel-w), var(--panel-max)); }

.board {
  display: flex; align-items: flex-start; gap: 12px; flex: 1; min-width: 0;
  padding: 16px 20px; overflow: auto;
}

.column {
  display: flex; flex-direction: column; flex: none;
  width: var(--column-w); max-height: 100%;
  border-radius: var(--radius-lg); background: var(--column);

  --dot: var(--text-muted);
  &[data-category="in_progress"] { --dot: var(--accent); }
  &[data-category="done"] { --dot: var(--success); }
}

.column__header { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px; }
.column__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }
.column__name { flex: 1; font-size: 13px; font-weight: 500; }
.column__count { font-size: 12px; color: var(--text-muted); &.is-over { color: var(--brand-strong); font-weight: 700; } }
.column__cards { display: flex; flex-direction: column; gap: 8px; min-height: 40px; padding: 0 8px 8px; overflow-y: auto; }

.card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  transition: box-shadow 0.15s, translate 0.15s;

  &[data-kind="bug"] { --kind: var(--danger); }
  &[data-kind="feature"] { --kind: var(--accent); }
  &[data-kind="task"] { --kind: var(--success); }
  &:hover { box-shadow: var(--shadow); translate: 0 -1px; }
}

.card__cover { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; background: var(--surface-2); }

li.is-dragging { opacity: 0.4; }

.card__body { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; }
.card__kind { display: inline-flex; color: var(--kind); .icon { width: 14px; height: 14px; } }

.card__top, .card__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card__top .key { flex: 1; }
.card__title { font-weight: 500; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 599px) {
  .board-header { padding: 12px 16px 0; }
  .toolbar { padding: 8px 16px; }
  .board { gap: 8px; padding: 12px 16px; scroll-snap-type: x mandatory; scroll-padding: 16px; }
  .column { width: calc(100vw - 48px); scroll-snap-align: start; }
}

.composer { padding: 0 8px 8px; }
.composer__toggle {
  padding: 8px; border-radius: var(--radius); color: var(--text-muted);
  &:hover { color: var(--text); background: var(--surface); }
}
.composer[open] .composer__toggle { display: none; }
.composer__form { display: flex; flex-direction: column; gap: 8px; }
.composer__form textarea { height: auto; min-height: 60px; padding: 10px 12px; resize: none; field-sizing: content; font-weight: 500; }
.composer__actions { display: flex; align-items: center; gap: 6px; .hint { margin-left: auto; } }