/* Board view: projects as frames, chats as cards, inside the Work shell.
 * Layout and component geometry only. Colour, type and motion come from the
 * brand + workspace roles; status is the only colour. */

.board-view { padding-bottom: 0; }
.board-head { padding-bottom: 8px; }
.board-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.board-new { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--sv-emphasis-surface); color: var(--sv-emphasis-ink); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.board-new:hover { opacity: .85; }
.board-new .icon { width: 16px; height: 16px; }
.board-search { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: var(--sv-hairline-w) solid var(--sv-hairline); border-radius: 10px; background: var(--sv-surface-raised); color: var(--sv-ink-tertiary); }
.board-search .icon { width: 16px; height: 16px; }
.board-search input { width: 200px; border: 0; outline: none; background: transparent; color: var(--sv-ink); font: inherit; font-size: 14px; }
.board-search input::placeholder { color: var(--sv-ink-tertiary); }
.board-search:focus-within { border-color: var(--sv-ink-secondary); }
.board-filters, .board-zoom { display: flex; gap: 2px; padding: 3px; border: var(--sv-hairline-w) solid var(--sv-hairline); border-radius: 10px; background: var(--sv-surface-raised); }
.board-zoom { margin-left: auto; align-items: center; }
.board-zoom-pct { min-width: 4ch; text-align: center; font-size: 12px; color: var(--sv-ink-tertiary); }
.board-chip { height: 28px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--sv-ink-secondary); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.board-chip:hover { background: var(--workspace-hover); color: var(--sv-ink); }
.board-chip.active { background: var(--workspace-selected); color: var(--sv-ink); }

/* the stage is the rest of the column, full bleed, and owns its own scroll */
.board-stage { position: relative; flex: 1; min-height: max(60vh, 560px); width: 100%; overflow: hidden; cursor: grab; touch-action: none; border-top: var(--sv-hairline-w) solid var(--sv-hairline); background: var(--sv-surface); }
.board-stage.panning { cursor: grabbing; }
.board-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; background-image: radial-gradient(var(--sv-hairline) 1px, transparent 1px); background-size: 24px 24px; }
.board-canvas.animate { transition: transform var(--sv-dur-slow) var(--sv-ease-out); }
.board-empty { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); color: var(--sv-ink-tertiary); white-space: nowrap; }

.board-frame { position: absolute; border-radius: 14px; border: var(--sv-hairline-w) solid var(--sv-hairline); background: color-mix(in srgb, var(--sv-surface-raised) 62%, transparent); transition: opacity var(--sv-dur-fast); }
.board-frame.category { border-style: dashed; border-color: var(--sv-hairline-strong); background: color-mix(in srgb, var(--sv-surface-sunken) 40%, transparent); border-radius: 18px; }
.board-frame.dim, .board-card.dim, .board-stack-frame.dim { opacity: .18; }
.board-frame-label { position: absolute; left: 10px; top: -32px; display: flex; align-items: baseline; gap: 8px; height: 28px; padding: 0 8px; border: 0; border-radius: var(--sv-radius); background: transparent; color: var(--sv-ink); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.board-frame-label:hover { background: var(--workspace-hover); }
.board-frame.category > .board-frame-label { top: -34px; color: var(--sv-ink-secondary); }
.board-frame-label small { color: var(--sv-ink-tertiary); font-weight: 400; font-size: 13px; }
.board-frame-repo { font-family: var(--sv-font-mono); font-size: 11.5px; color: var(--sv-ink-tertiary); font-weight: 400; }
.board-frame-people { position: absolute; right: 12px; top: -27px; }
.board-new-chat { position: absolute; right: 12px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: var(--sv-hairline-w) dashed var(--sv-hairline-strong); border-radius: var(--sv-radius); background: transparent; color: var(--sv-ink-secondary); font: inherit; font-size: 13px; cursor: pointer; opacity: 0; transition: opacity var(--sv-dur-fast); }
.board-new-chat .icon { width: 16px; height: 16px; }
.board-frame:hover > .board-new-chat, .board-new-chat:focus-visible { opacity: 1; }
.board-new-chat:hover { background: var(--sv-surface-sunken); color: var(--sv-ink); }
.board-canvas.far .board-frame-label { font-size: 24px; top: -42px; height: 38px; }
.board-canvas.far .board-frame.category > .board-frame-label { font-size: 30px; top: -52px; height: 46px; }
.board-canvas.far .board-frame-people, .board-canvas.far .board-new-chat { display: none; }

.board-card { position: absolute; width: 272px; height: 196px; box-sizing: border-box; padding: 12px 14px 10px; display: flex; flex-direction: column; gap: 2px; background: var(--sv-surface-raised); border: var(--sv-hairline-w) solid var(--sv-hairline); border-radius: 12px; cursor: pointer; user-select: none; overflow: hidden; color: var(--sv-ink); transition: background-color var(--sv-dur-fast), border-color var(--sv-dur-fast), opacity var(--sv-dur-fast); }
.board-card:hover, .board-card:focus-visible { background: var(--sv-surface-sunken); border-color: var(--sv-hairline-strong); outline: none; }
.board-card:focus-visible { outline: 2px solid var(--sv-ink); outline-offset: 2px; }
.board-card.dragging { box-shadow: var(--workspace-panel-shadow); transition: none; z-index: 5; }
.board-card.needs-you { border-color: color-mix(in srgb, var(--sv-attention) 55%, var(--sv-hairline)); }
/* Compact card type in px on purpose: the shell's text roles are all 1rem, and a card is a
 * summary tile, not reading text. Same sizes the standalone prototype settled on. */
.board-card h3 { margin: 0; padding: 0; font-size: 14px; font-weight: 500; line-height: 1.35; max-height: calc(2 * 1.35em); letter-spacing: 0; text-transform: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.board-summary { margin: 0; color: var(--sv-ink-secondary); font-size: 13px; line-height: 1.45; max-height: calc(3 * 1.45em); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.board-progress { margin: 2px 0 0; font-size: 12.5px; color: var(--sv-ink-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-progress[data-tone="stalled"], .board-progress[data-tone="error"] { color: var(--sv-attention); }
.board-doing, .board-ask { margin: 4px 0 0; font-size: 13px; display: flex; gap: 8px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-doing::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--workspace-working); flex: none; }
.board-ask { color: var(--sv-attention); }
.board-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 6px; }
.board-meta { color: var(--sv-ink-tertiary); font-size: 12px; white-space: nowrap; }
.board-canvas.far .board-summary, .board-canvas.far .board-doing, .board-canvas.far .board-ask, .board-canvas.far .board-progress, .board-canvas.far .board-status { display: none; }
.board-canvas.far .board-card h3 { font-size: 21px; max-height: calc(3 * 1.35em); -webkit-line-clamp: 3; }
.board-canvas.far .board-faces .board-face { width: 32px; height: 32px; font-size: 12px; }

.board-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--sv-ink-tertiary); margin-bottom: 2px; }
.board-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sv-hairline-strong); flex: none; }
.board-status.running { color: var(--workspace-working-ink); } .board-status.running::before { background: var(--workspace-working); }
.board-status.needs-you { color: var(--sv-attention); } .board-status.needs-you::before { background: var(--sv-attention); }
.board-status.done::before { background: var(--sv-ink); }
.board-status.scheduled::before { background: var(--sv-ink-secondary); }

/* avatars: the shell's plate sizes; a person is neutral, an agent keeps a quiet hue, the lead wears the mark */
.board-faces { display: inline-flex; cursor: default; }
.board-face { width: 22px; height: 22px; margin-left: -5px; display: inline-grid; place-items: center; font-weight: 600; font-size: 10px; line-height: 1; flex: none; border-radius: 6px; border: 2px solid var(--sv-surface-raised); box-sizing: content-box; }
.board-face:first-child { margin-left: 0; }
.board-face.person { border-radius: 50%; color: var(--sv-ink); background: var(--sv-surface-dim); }
.board-face.agent { color: #fff; background: hsl(var(--hue) 42% 44%); }
.theme-dark .board-face.agent { background: hsl(var(--hue) 36% 50%); }
.board-face.brand { background: var(--sv-inverse-surface); }
.board-face.brand i { display: block; width: 64%; height: 64%; background: var(--sv-inverse-ink); -webkit-mask: url(/brand-symbol.svg) center / contain no-repeat; mask: url(/brand-symbol.svg) center / contain no-repeat; }

.board-peek { position: fixed; z-index: var(--sv-z-overlay); min-width: 230px; max-width: 300px; padding: 10px 12px; background: var(--sv-surface-raised); border: var(--sv-hairline-w) solid var(--sv-hairline); border-radius: 12px; box-shadow: var(--workspace-panel-shadow); font-size: 13.5px; color: var(--sv-ink); pointer-events: none; }
.board-peek h5 { margin: 0 0 4px; font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--sv-ink-tertiary); }
.board-peek h5 + h5, .board-who + h5 { margin-top: 10px; }
.board-who { position: relative; display: flex; align-items: center; gap: 10px; padding: 3px 0; padding-left: calc(var(--d, 0) * 20px); }
.board-who .board-face { margin: 0; border: 0; }
.board-who small { margin-left: auto; padding-left: 8px; color: var(--sv-ink-tertiary); font-size: 12px; white-space: nowrap; }
.board-who[data-depth]:not([data-depth="0"])::before { content: ""; position: absolute; left: calc(var(--d) * 20px - 12px); top: -10px; width: 9px; height: 24px; border-left: var(--sv-hairline-w) solid var(--sv-hairline-strong); border-bottom: var(--sv-hairline-w) solid var(--sv-hairline-strong); border-radius: 0 0 0 6px; }
.board-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sv-hairline-strong); flex: none; }
.board-dot.running { background: var(--workspace-working); } .board-dot.done { background: var(--sv-ink); } .board-dot.waiting { background: var(--sv-attention); }

/* phone: the frames stack, cards in a grid, no pan */
.board-stage.stacked { cursor: default; touch-action: auto; overflow: auto; min-height: 0; }
.board-stage.stacked .board-canvas { position: static; background: none; transform: none !important; padding: 8px 0 24px; }
.board-stack-frame { margin: 8px 12px 14px; padding: 12px; border: var(--sv-hairline-w) solid var(--sv-hairline); border-radius: 14px; background: color-mix(in srgb, var(--sv-surface-raised) 62%, transparent); }
.board-stack-frame.category { border-style: dashed; border-color: var(--sv-hairline-strong); background: color-mix(in srgb, var(--sv-surface-sunken) 40%, transparent); border-radius: 18px; }
.board-stack-frame .board-frame-label { position: static; height: auto; padding: 0 0 10px; display: flex; flex-wrap: wrap; white-space: normal; cursor: default; }
.board-stack-frame .board-frame-label:hover { background: transparent; }
.board-stack-frame.category > .board-frame-label { color: var(--sv-ink-secondary); }
.board-stack-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.board-stack-grid .board-card { position: static; width: auto; height: 196px; padding: 10px 12px 8px; }
.board-stack-grid .board-summary { -webkit-line-clamp: 2; }
@media (max-width: 760px) {
  .board-bar { gap: 6px; }
  .board-search input { width: 130px; }
  .board-zoom { display: none; }
}
@media (prefers-reduced-motion: reduce) { .board-canvas.animate { transition: none; } }