/* DUDE.AI — Board page (scream skin).
   Classes copied from design-reference/DUDE-AI-DS/ui_kits/work-os/pages/board.html
   (the mock's embedded <style> block). Requires styles.css + scream-app.css first.
   One tune vs the mock: .kanban's column count follows the visible-lane count via
   the --kanban-cols inline style var (the real board shows 7–9 lanes, not 6). */

.kanban { display: grid; grid-template-columns: repeat(var(--kanban-cols, 7), minmax(0,1fr)); gap: 12px; overflow-x: hidden; align-items: start; }
.kcol { min-width: 0; }

/* ---------- [6e0a7fee] Viewport-fitted board ----------
   The Board page pins to the workspace viewport: the page column never grows a
   vertical scrollbar from card volume — each lane's card BODY (.kbody) is the
   one vertical scroller instead, with the column header staying put above it.
   The chain that makes it work: every flex ancestor between the shell and the
   scroller carries min-height:0 (otherwise content min-sizing wins and the
   page grows), and .kanban.kfit stretches lanes to equal full height so empty
   lanes stay aligned with occupied ones. */
.boardfit { display: flex; flex-direction: column; min-height: 0; height: calc(100vh - var(--shell-topbar-h)); }
.boardfit-head { flex: 0 0 auto; }
.boardfit-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.kanban.kfit { flex: 1 1 auto; min-height: 0; align-items: stretch; overflow-y: hidden; padding-bottom: 10px; }
.kanban.kfit .kcol { display: flex; flex-direction: column; min-height: 0; }
.kanban.kfit .khead { flex: 0 0 auto; }
.kbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 5px 0 1px; }
/* Keyboard reachability: the lane scroller is focusable; SCREAM focus ring. */
.kbody:focus-visible { outline: 2.5px solid var(--scream-yellow); outline-offset: -2.5px; }

/* ---------- [6e0a7fee] SCREAM scrollbars ----------
   Component-scoped scrollbar tokens derived from the SCREAM palette; applied
   to BOTH the vertical lane scrollers and the board's narrow-width horizontal
   rail so no default browser scrollbar ever shows on the Board.
   Firefox: scrollbar-width/scrollbar-color (single-state by platform design —
   the tokened colors apply); WebKit/Blink: full track/thumb/hover/active. */
.kanban, .kbody {
  --sb-track: var(--scream-ink);
  --sb-thumb: var(--cream-dim);
  --sb-thumb-hover: var(--scream-yellow);
  --sb-thumb-active: var(--scream-red);
  --sb-border: rgba(234,224,203,0.18);
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb) var(--sb-track);
}
.kanban::-webkit-scrollbar, .kbody::-webkit-scrollbar { width: 10px; height: 10px; }
.kanban::-webkit-scrollbar-track, .kbody::-webkit-scrollbar-track { background: var(--sb-track); border: 1px solid var(--sb-border); }
.kanban::-webkit-scrollbar-thumb, .kbody::-webkit-scrollbar-thumb { background: var(--sb-thumb); border: 2px solid var(--sb-track); box-shadow: 1px 1px 0 rgba(0,0,0,0.6); }
.kanban::-webkit-scrollbar-thumb:hover, .kbody::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-hover); }
.kanban::-webkit-scrollbar-thumb:active, .kbody::-webkit-scrollbar-thumb:active { background: var(--sb-thumb-active); }
.kanban::-webkit-scrollbar-corner, .kbody::-webkit-scrollbar-corner { background: var(--sb-track); }
@media (forced-colors: active) {
  .kanban, .kbody { scrollbar-color: ButtonText Canvas; }
  .kbody:focus-visible { outline-color: Highlight; }
}

.khead { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 2.5px solid rgba(234,224,203,0.25); margin-bottom: 12px; }
.khead .n { font-family: var(--font-display); font-size: 1.125rem; color: var(--cream-dim); }
/* [f1c5f2cb · c_carddens] Card density: one scale for BOTH type and rhythm.
 *
 * The measured regression was not "cards got loose" — it was that 157ce386 converted card TYPE to rem
 * (so it tracks the responsive root, clamp(15px,.347vw+11px,23px)) while every padding, gap and
 * margin stayed FIXED px. Type therefore grew with the viewport and spacing did not, so the vertical
 * rhythm drifted apart from the text it was built around. At 1440 nothing changed (0.8125rem = 13px,
 * exactly the 8d4c2971 baseline); at 2560 the title is 16.2px against unchanged 12px padding, and at
 * 3840 it is 18.7px.
 *
 * Two deliberate choices:
 *
 *   --kcard-scale bounds the CARD's own growth more tightly than the page root. 157ce386 exists
 *   because a native-4K user could not read the UI, so shrinking absolute type at 1440 would re-break
 *   the reason that work was done. Instead the card grows, just gently — ~13px at 1440 as before, and
 *   ~15px rather than ~18.7px at 3840.
 *
 *   Spacing is expressed in the SAME unit as the type it separates, so the rhythm the baseline
 *   established is preserved proportionally at every width instead of only at 1440.
 *
 * The size is set on .kcard ITSELF, not on a title selector. Measuring the rendered React board showed
 * why: its card title is a <Link> that declares no font-size and INHERITS, and the card carried no
 * font-size either, so titles were picking up the scaling page root directly. The board.css rules that
 * do name a title (.kcard .t and friends) match nothing on the React board -- they belong to the
 * classic Hono board, which still uses them and is unaffected by a container size it already overrides.
 * Setting it on the container is therefore the one change that reaches both boards without touching JSX.
 *
 * Colors, borders, shadows, tokens, hierarchy and information architecture are untouched throughout.
 */
:root {
  /* ~13px at 1440 (matching the 8d4c2971 baseline), ~15px at 3840 instead of ~18.7px. */
  --kcard-type: clamp(12.5px, 0.104vw + 11.5px, 15px);
  /* Rhythm derived from the type size, not a fixed px constant that drifts away from it. */
  --kcard-pad: calc(var(--kcard-type) * 0.85);
  --kcard-gap: calc(var(--kcard-type) * 0.62);
  --kcard-row: calc(var(--kcard-type) * 0.62);
}

.kcard { box-sizing: border-box; min-width: 0; overflow: hidden; border: 1.5px solid rgba(234,224,203,0.22); background: var(--scream-panel); box-shadow: 3px 3px 0 rgba(0,0,0,0.7); padding: var(--kcard-pad); margin-bottom: 10px; font-size: var(--kcard-type); line-height: 1.4; }
.kcard-title {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  color: var(--cream);
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
  overflow-wrap: anywhere;
  word-break: break-word;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}
.kcard-title:hover { color: var(--scream-yellow); }
.kcard .t { font-family: var(--font-mono); font-size: var(--kcard-type); font-weight: 700; color: var(--cream); line-height: 1.45; }
.kcard .m { display: flex; align-items: center; gap: var(--kcard-gap); margin-top: var(--kcard-row); font-family: var(--font-mono); font-size: calc(var(--kcard-type) * 0.85); font-weight: 800; letter-spacing: 0.08em; color: var(--cream-dim); text-transform: uppercase; }
.kcard .av { width: calc(var(--kcard-type) * 1.38); height: calc(var(--kcard-type) * 1.38); background: #2A2118; color: var(--scream-yellow); display: grid; place-items: center; font-family: var(--font-display); font-size: calc(var(--kcard-type) * 0.85); }

/* [a902660a] Board-card-SCOPED compact metadata badges (workflow, active node, status, Work
 * Package, risk, join, branches) — the operator report was that these badges read too large and
 * competed with the task title. Sized proportionally off --kcard-type (not a fixed px), matching
 * the rhythm .kcard .m already uses, so it holds the same compact relationship at any viewport
 * instead of drifting at 4K or 390px. Scoped to .board-badge specifically — the shared .tag class
 * these badges also carry (for border/color variants like .tag.yellow) is UNCHANGED, so every
 * other .tag consumer (Work Packages list, Tasks list, lane headers) is unaffected. */
.board-badge {
  font-size: calc(var(--kcard-type) * 0.62);
  padding: 2px 6px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0.04em;
  overflow: hidden;
}
.empty { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; color: rgba(234,224,203,0.3); text-transform: uppercase; border: 1.5px dashed rgba(234,224,203,0.2); padding: 18px 10px; text-align: center; }

/* Card-action foot (mirrors the Hono card's mt-2 pt-2 border-t action row). */
.kacts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(234,224,203,0.15); }

/* Small button variant for per-card actions. */
.btn-scream.sm { padding: 6px 10px; font-size: 0.6875rem; }

/* [S8 operator-review fix / 94f06c1a] Output/proof thumbnails on completed cards */
.kcard .kthumbs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--kcard-row); }
.kcard .kthumbs img { width: 36px; height: 36px; object-fit: cover; border: 1.5px solid rgba(63, 185, 80, 0.45); background: #0A0807; cursor: zoom-in; }
.kcard .kthumbs img:hover { opacity: 0.8; }

/* [S8] Subtask parent-context chip — the Hono board's "↗ {parent}" block link
   above the card body (truncated single line, brightens on hover). */
.kcard .kparent-crumb {
  display: block;
  font-size: 0.6875rem;
  color: var(--cream-dim, #8a8578);
  text-decoration: none;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kcard .kparent-crumb:hover { color: var(--scream-yellow, #ffd60a); }

/* [B3] Parent-rollup chip — the Hono "{done}/{total} complete · N in_progress ·
   N in_review" progress line under the title (pill goes green when all done). */
.kcard .krollup { display: flex; align-items: center; gap: var(--kcard-gap); flex-wrap: wrap; margin-top: var(--kcard-row); font-family: var(--font-mono); font-size: calc(var(--kcard-type) * 0.85); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream-dim); }
.kcard .krollup .kroll-count { border: 1.5px solid rgba(234,224,203,0.22); padding: 1px 5px; white-space: nowrap; }
.kcard .krollup .kroll-count.done { border-color: var(--ok); color: var(--ok); }
.kcard .krollup .kroll-inprogress { color: var(--scream-yellow); opacity: 0.85; }
.kcard .krollup .kroll-inreview { color: #79B8FF; opacity: 0.85; }

/* [B7] "↩ returned for rework" marker + [B2] 🛑 block reason + [B4] 🚫 cancel
   reason chip — the Hono card's per-status context lines under the title. */
.kcard .kmark-returned { margin-top: var(--kcard-row); font-family: var(--font-mono); font-size: calc(var(--kcard-type) * 0.85); font-weight: 700; color: var(--scream-red); opacity: 0.85; }
.kcard .kblock-reason { margin-top: var(--kcard-row); font-family: var(--font-mono); font-size: calc(var(--kcard-type) * 0.85); font-weight: 700; color: #E8923B; opacity: 0.9; line-height: 1.5; overflow-wrap: anywhere; }
.kcard .kcancel-info { margin-top: var(--kcard-row); font-family: var(--font-mono); font-size: calc(var(--kcard-type) * 0.85); font-weight: 700; color: var(--cream-dim); line-height: 1.6; overflow-wrap: anywhere; }
.kcard .kcancel-info .kcancel-reason { border: 1.5px solid rgba(234,224,203,0.22); padding: 1px 5px; font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(234,224,203,0.8); white-space: nowrap; }
.kcard .kcancel-info .kcancel-body { margin-left: 6px; opacity: 0.8; }

/* [B1] Schedule meta on Recurring/Evolving template cards: ⏱ cadence line +
   one state line (Schedule cancelled / Invalid schedule / ⚠ overdue / ↪ next). */
.kcard .kschedule { margin-top: var(--kcard-row); font-family: var(--font-mono); font-size: calc(var(--kcard-type) * 0.85); font-weight: 700; line-height: 1.6; color: var(--cream-dim); }
.kcard .kschedule .ksched-cancelled { opacity: 0.6; }
.kcard .kschedule .ksched-invalid { color: var(--scream-red); opacity: 0.85; }
.kcard .kschedule .ksched-overdue { color: #E8923B; opacity: 0.9; }
.kcard .kschedule .ksched-next { color: var(--cream-dim); }

/* [B6] Reliability headline beside agent assignees ("0.84 ↑ +0.03"). */
.kcard .m .krel { font-variant-numeric: tabular-nums; white-space: nowrap; text-transform: none; }

/* [B8] Completed-lane truncation footer (100-row cap + active date filter). */
.kcol .kcap-note { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 700; color: var(--cream-dim); border-top: 1px solid rgba(234,224,203,0.15); padding-top: 10px; margin: 2px 0 0; }

/* [B9] "Cancellations by reason: …" archive rollup — reason keys pop cream. */
.kreason-breakdown .r { color: var(--cream); }