/* Docket component layer — hand-translated from the Docket Design System's
   React reference (components/**, ui_kits/docket_app/**) into plain CSS
   classes for server-rendered ERB views. Reads tokens only; see
   docket_tokens.css. Hover-revealed content changes opacity, never display,
   so it stays reachable by keyboard (see .dk-card-face__meta). */

html, body { height: 100%; }
body { background: var(--canvas); }

a.dk-link { border-bottom: none; }

/* ---------- app shell ---------- */

.dk-app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.dk-suite-header {
  height: var(--suite-header-height);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: 0 12px 0 10px;
  background: var(--chrome-raised);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-hairline);
}

.dk-wordmark {
  font: var(--text-wordmark);
  letter-spacing: var(--track-display);
  color: var(--text-primary);
}

.dk-spacer { flex: 1; }

.dk-body {
  flex: 1;
  display: flex;
  min-height: 0;
}

.dk-nav {
  width: var(--nav-width);
  flex: 0 0 auto;
  background: var(--chrome);
  border-right: 1px solid var(--border-hairline);
  display: flex;
  flex-direction: column;
  padding: 0 9px 14px;
  overflow-y: auto;
}

.dk-space-switcher {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 9px 14px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: inherit;
}
.dk-space-switcher__dot {
  width: 15px; height: 15px; border-radius: 4px; flex: 0 0 auto;
}
.dk-space-switcher__name {
  flex: 1;
  font: var(--weight-semibold) var(--size-title-3)/1.15 var(--font-display);
  letter-spacing: var(--track-title);
  color: var(--on-ink-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.dk-nav-section { display: grid; gap: 1px; margin-bottom: 22px; }
.dk-nav-section__label {
  display: flex; align-items: center; padding: 0 9px 7px;
  font: var(--text-eyebrow); color: var(--on-ink-quiet);
  text-transform: uppercase; letter-spacing: var(--track-caps);
}

.dk-nav-item {
  position: relative; display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 6px 9px; border: none; border-radius: var(--radius-control);
  cursor: pointer; text-align: left; background: transparent;
  color: var(--on-ink-secondary);
  font: var(--weight-regular) var(--size-small)/1.3 var(--font-ui);
  transition: var(--transition-control);
  text-decoration: none;
}
.dk-nav-item:hover { background: var(--ink-hover); }
.dk-nav-item.is-active {
  background: var(--ink-active); color: var(--on-ink-primary);
  font-weight: var(--weight-semibold);
}
.dk-nav-item__label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-nav-item__icon { color: var(--on-ink-quiet); }
/* Sized to match .dk-space-switcher__dot rather than the tiny generic
   .dk-icon-btn__badge corner dot — a normal flex child (vertically
   centred by .dk-nav-item's own align-items) instead of absolutely
   positioned, so it also lands right beside the icon when the nav is
   collapsed and the label between them disappears. Pill-shaped (not the
   swatch's rounded square) now that it carries a count, not just a
   colour — a numbered badge reads as "notification," not "decoration."
   min-width, not width, so 2-3 digit counts widen it instead of clipping. */
.dk-nav-item__badge {
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-pill); flex: 0 0 auto;
  background: var(--unread-dot);
  /* --ink-900 flips to a near-white in dark mode (right for body text, wrong
     here): --unread-dot sits at a fixed, fairly light lightness in every
     theme and mode, so the badge always needs a DARK number on it — hence a
     literal ink rather than a token that tracks the mode. */
  color: #1F1D1B;
  display: inline-flex; align-items: center; justify-content: center;
  font: var(--weight-semibold) 10px/1 var(--font-ui);
}
.dk-nav-item.is-active .dk-nav-item__icon { color: var(--marigold-400); }

.dk-main {
  /* Its own scroll container, not the document's: without this, a page
     taller than the viewport (card detail, with its stack of disclosures)
     grows .dk-app past 100vh and drags the fixed-height nav off screen
     with it instead of leaving the nav's own scroll region in place. */
  flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0;
  overflow-y: auto;
  background: var(--canvas);
}

/* ---------- appearance menu ---------- */

.dk-appearance { position: relative; display: flex; align-items: center; gap: var(--space-6); }
.dk-appearance__popover {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
  background: var(--surface-bright); border-radius: var(--radius-panel);
  box-shadow: var(--shadow-popover); padding: 11px 12px 12px;
  display: grid; gap: 9px; width: 196px;
}
.dk-appearance__popover[hidden] { display: none; }
.dk-appearance__eyebrow {
  font: var(--text-eyebrow); color: var(--text-quiet);
  text-transform: uppercase; letter-spacing: var(--track-caps);
}
.dk-appearance__swatches { display: flex; gap: 7px; }
.dk-appearance__swatch {
  width: 22px; height: 22px; padding: 0; border-radius: var(--radius-pill);
  cursor: pointer; background: var(--marigold-500); border: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.14);
}
.dk-appearance__swatch.is-active {
  box-shadow: 0 0 0 2px var(--surface-bright), 0 0 0 4px var(--text-primary);
}
.dk-colour-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.dk-colour-option { position: relative; display: inline-flex; }
.dk-colour-option__input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; cursor: pointer; }
.dk-colour-swatch { width: 22px; height: 22px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); pointer-events: none; }
.dk-colour-option__input:checked + .dk-colour-swatch { box-shadow: 0 0 0 2px var(--surface-bright), 0 0 0 4px var(--text-primary); }
.dk-colour-option__input:focus-visible + .dk-colour-swatch { box-shadow: 0 0 0 2px var(--text-primary); }
.dk-colour-swatch--none { background: var(--surface-sunken); position: relative; }
.dk-colour-swatch--none::after {
  content: ""; position: absolute; inset: 5px 1px; border-top: 1.5px solid var(--text-quiet); transform: rotate(45deg);
}

.dk-appearance__modes { display: flex; gap: 6px; }
.dk-appearance__mode {
  flex: 1; height: 24px; border-radius: var(--radius-control); cursor: pointer; border: none;
  background: var(--ink-hover); color: var(--text-tertiary);
  font: var(--weight-medium) var(--size-micro)/1 var(--font-ui);
  text-transform: capitalize;
}
.dk-appearance__mode.is-active { background: var(--ink-active); color: var(--text-primary); }

/* ---------- buttons ---------- */

.dk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  font: var(--weight-medium) var(--size-small)/1 var(--font-ui); letter-spacing: var(--track-body);
  border-radius: var(--radius-control); border: 1px solid transparent; cursor: pointer;
  white-space: nowrap; transition: var(--transition-control);
  height: var(--control-height); padding: 0 11px;
  background: transparent; color: var(--text-secondary);
}
.dk-btn:hover { background: var(--surface-hover); color: var(--text-primary); }
.dk-btn--sm { height: 26px; padding: 0 9px; font-size: var(--size-micro); }
.dk-btn--lg { height: var(--control-height-lg); padding: 0 15px; font-size: var(--size-body); }
.dk-btn--primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.dk-btn--primary:hover { background: var(--accent-hover); color: var(--accent-ink); }
.dk-btn--secondary { background: transparent; color: var(--text-primary); border-color: var(--border-default); }
.dk-btn--secondary:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.dk-btn--ghost { background: transparent; color: var(--text-secondary); border-color: transparent; }
.dk-btn--ghost:hover { background: var(--surface-hover); color: var(--text-primary); }
.dk-btn:disabled { opacity: .4; cursor: not-allowed; }

.dk-icon-btn {
  position: relative; width: 30px; height: 30px; display: inline-flex; align-items: center;
  justify-content: center; border-radius: var(--radius-control); border: 1px solid transparent;
  background: transparent; color: var(--text-tertiary); cursor: pointer; transition: var(--transition-control);
  padding: 0;
}
.dk-icon-btn:hover { background: var(--surface-hover); color: var(--text-primary); }
.dk-icon-btn--sm { width: 24px; height: 24px; }
.dk-icon-btn--lg { width: 36px; height: 36px; }
.dk-icon-btn--on-ink { color: var(--on-ink-tertiary); }
.dk-icon-btn--on-ink:hover { background: var(--ink-hover); color: var(--on-ink-primary); }
.dk-icon-btn.is-active { background: var(--surface-active); color: var(--text-primary); }
.dk-icon-btn--on-ink.is-active { background: var(--ink-active); color: var(--on-ink-primary); }
.dk-icon-btn svg { width: 17px; height: 17px; }
.dk-icon-btn--sm svg { width: 15px; height: 15px; }
.dk-icon-btn--lg svg { width: 19px; height: 19px; }
.dk-icon-btn__badge {
  position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: var(--radius-pill);
  background: var(--unread-dot); box-shadow: 0 0 0 2px var(--surface);
}
.dk-icon-btn--on-ink .dk-icon-btn__badge { box-shadow: 0 0 0 2px var(--chrome); }

/* ---------- avatar / tag / badge / ref-id / space-badge ---------- */

.dk-avatar {
  width: 22px; height: 22px; flex: 0 0 auto; border-radius: var(--radius-pill);
  overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in oklab, var(--space-slate) 14%, var(--paper-0));
  color: color-mix(in oklab, var(--space-slate) 88%, var(--ink-900));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--space-slate) 22%, transparent);
  font: var(--weight-semibold) 9px/1 var(--font-ui);
}
.dk-avatar--sm { width: 19px; height: 19px; font-size: 8px; }
.dk-avatar--lg { width: 26px; height: 26px; font-size: 11px; }
.dk-avatar--azure { background: color-mix(in oklab, var(--space-azure) 14%, var(--paper-0)); color: color-mix(in oklab, var(--space-azure) 88%, var(--ink-900)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--space-azure) 22%, transparent); }
.dk-avatar--lilac { background: color-mix(in oklab, var(--space-lilac) 14%, var(--paper-0)); color: color-mix(in oklab, var(--space-lilac) 88%, var(--ink-900)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--space-lilac) 22%, transparent); }
.dk-avatar--clay { background: color-mix(in oklab, var(--space-clay) 14%, var(--paper-0)); color: color-mix(in oklab, var(--space-clay) 88%, var(--ink-900)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--space-clay) 22%, transparent); }
.dk-avatar--moss { background: color-mix(in oklab, var(--space-moss) 14%, var(--paper-0)); color: color-mix(in oklab, var(--space-moss) 88%, var(--ink-900)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--space-moss) 22%, transparent); }
.dk-avatar--teal { background: color-mix(in oklab, var(--space-teal) 14%, var(--paper-0)); color: color-mix(in oklab, var(--space-teal) 88%, var(--ink-900)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--space-teal) 22%, transparent); }
.dk-avatar--rose { background: color-mix(in oklab, var(--space-rose) 14%, var(--paper-0)); color: color-mix(in oklab, var(--space-rose) 88%, var(--ink-900)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--space-rose) 22%, transparent); }
.dk-avatar--sand { background: color-mix(in oklab, var(--space-sand) 14%, var(--paper-0)); color: color-mix(in oklab, var(--space-sand) 88%, var(--ink-900)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--space-sand) 22%, transparent); }
.dk-avatar--slate { background: color-mix(in oklab, var(--space-slate) 14%, var(--paper-0)); color: color-mix(in oklab, var(--space-slate) 88%, var(--ink-900)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--space-slate) 22%, transparent); }

.dk-ref-id {
  display: inline-flex; align-items: center;
  font: var(--weight-regular) var(--size-mono-id)/1 var(--font-mono);
  letter-spacing: var(--track-mono); color: var(--text-quiet);
}

.dk-space-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font: var(--weight-medium) var(--size-micro)/1 var(--font-ui);
  color: var(--text-secondary);
}
.dk-space-badge--on-ink { color: var(--on-ink-secondary); }
.dk-space-badge__dot { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 3px; }
.dk-space-badge--sm .dk-space-badge__dot { width: 8px; height: 8px; }

.dk-private-mark {
  display: inline-flex; align-items: center; gap: 5px; height: 19px; padding: 0 7px;
  border-radius: var(--radius-pill); background: var(--private-bg); color: var(--private-fg);
  background-image: repeating-linear-gradient(135deg, transparent 0 3px, var(--private-hatch) 3px 4px);
  font: var(--weight-medium) var(--size-micro)/1 var(--font-ui);
}
.dk-private-mark svg { width: 11px; height: 11px; }

/* ---------- board header ---------- */

.dk-board-header { flex: 0 0 auto; display: grid; gap: 10px; padding: 16px 14px 14px 22px; min-width: 0; }
.dk-board-header__row { display: flex; align-items: center; gap: 16px; min-width: 0; }
.dk-board-header__title-group { display: flex; align-items: baseline; gap: 10px; flex: 0 0 auto; }
.dk-board-header__title {
  font: var(--text-board-title); letter-spacing: var(--track-title); color: var(--text-primary); white-space: nowrap;
}
.dk-hairline-v { width: 1px; height: 18px; background: var(--border-default); }

.dk-board-header__description {
  width: 100%; max-width: 640px; resize: vertical; border: 1px solid transparent; border-radius: var(--radius-control);
  background: none; padding: 3px 6px; margin: 0 0 0 -6px;
  font: var(--weight-regular) var(--size-small)/1.45 var(--font-ui); color: var(--text-secondary);
}
.dk-board-header__description:hover { background: var(--ink-hover); }
.dk-board-header__description:focus { border-color: var(--border-default); background: var(--surface-bright); outline: none; }
.dk-board-header__description[readonly] { cursor: default; }
.dk-board-header__description[readonly]:hover { background: none; }

.dk-board-header__links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dk-board-header__links .dk-btn svg { width: 12px; height: 12px; }

/* ---------- columns ---------- */

.dk-board-columns {
  flex: 1; display: flex; gap: var(--space-9); padding: 6px 22px 18px;
  overflow-x: auto; overflow-y: hidden; min-height: 0; align-items: flex-start;
}

.dk-column { width: var(--column-width); flex: 0 0 auto; display: flex; flex-direction: column; max-height: 100%; }

.dk-column-header {
  display: flex; align-items: center; gap: var(--space-5); padding: 0 4px 10px 2px;
}
.dk-column-header:hover .dk-column-header__add { opacity: 1; }
.dk-column-header__name {
  font: var(--weight-bold) var(--size-title-3)/1.2 var(--font-display); letter-spacing: var(--track-title);
  color: var(--text-primary);
}
.dk-column-header__count { font: var(--text-eyebrow); color: var(--text-quiet); }
.dk-column-header__hidden {
  font: var(--weight-medium) var(--size-micro)/1 var(--font-ui); color: var(--text-quiet);
  text-decoration: underline dotted; text-underline-offset: 2px;
}
.dk-column-header__hidden:hover { color: var(--text-secondary); }
.dk-column-header__auto-send {
  display: inline-flex; align-items: center; gap: 3px;
  font: var(--weight-medium) var(--size-micro)/1 var(--font-ui); color: var(--text-quiet);
}
.dk-column-header__auto-send svg { width: 11px; height: 11px; }
.dk-column-header svg { width: 12px; height: 12px; color: var(--text-quiet); }
.dk-column-header__add { opacity: 0; transition: opacity var(--dur-fast) var(--ease-standard); margin-left: auto; }

.dk-column-body {
  /* overflow-y: auto computes overflow-x to auto too (can't mix visible
     with non-visible on one axis), which clips a focused quick-capture
     card's accent ring flush against this edge without some horizontal
     padding to give it room. */
  /* flex: 1, not just the height of its cards — otherwise the droppable
     area stops where the last card does, and dragging into the empty
     space below it (very much "this column" to the eye) hits nothing. */
  /* grid-auto-rows defaults to `auto`, which in a scrolling grid nested in
     a flex column resolves ambiguously — Chromium ends up compressing every
     row to match the shortest card instead of sizing each to its own
     content (that's what was clipping any card whose cover image made it
     taller than a plain title-only one). `max-content` sizes each row to
     its own card, letting the column scroll past however tall that makes it. */
  flex: 1; display: grid; grid-auto-rows: max-content; gap: var(--column-gap); overflow-y: auto; padding: 2px 3px 8px; align-content: start;
}

.dk-add-column {
  width: 150px; flex: 0 0 auto; align-self: flex-start; padding: 5px 4px; margin-top: 2px;
  background: none; border: none; color: var(--on-ink-quiet); color: var(--text-quiet); cursor: pointer;
  font: var(--weight-medium) var(--size-small)/1 var(--font-ui);
  display: flex; align-items: center; gap: 7px;
}
.dk-add-column:hover { color: var(--text-secondary); }
.dk-add-column svg { width: 14px; height: 14px; }

/* ---------- card face ---------- */

.dk-card-face {
  position: relative; display: block; width: 100%; text-align: left;
  background: var(--surface); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: var(--transition-surface), background-color var(--dur-fast) var(--ease-standard);
  cursor: pointer; overflow: hidden; color: var(--text-primary);
  border: none; padding: 0; text-decoration: none; font: inherit;
}
.dk-card-face:hover, .dk-card-face:focus-visible {
  background: var(--surface-bright); box-shadow: var(--shadow-card-hover);
}
.dk-card-face:focus-visible { outline: none; box-shadow: var(--shadow-card-hover), var(--shadow-focus-paper); }
.dk-card-face__cover { height: 104px; background: var(--paper-300); overflow: hidden; }
.dk-card-face__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dk-card-face__body { padding: 11px 13px 12px; display: grid; gap: 8px; }
.dk-card-face__title { font: var(--text-card-title); color: var(--text-primary); text-wrap: pretty; }
.dk-card-face__labels { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.dk-card-face:hover .dk-card-face__labels, .dk-card-face:focus-within .dk-card-face__labels { gap: 5px; }
.dk-label-bar { display: inline-block; width: var(--label-bar-width); height: var(--label-bar-height); border-radius: var(--radius-pill); }

.dk-card-face__footer { display: flex; align-items: center; gap: var(--space-6); min-height: 19px; }
.dk-card-face__meta-group { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; flex: 1; }
.dk-meta {
  display: inline-flex; align-items: center; gap: 4px;
  font: var(--weight-medium) var(--size-micro)/1 var(--font-ui); color: var(--text-tertiary);
}
.dk-meta svg { width: 12px; height: 12px; }
.dk-meta--danger { color: var(--danger-fg); }
.dk-meta--dependency { color: var(--dependency-fg); }

/* Revealed on hover/focus, per HANDOFF.md: opacity only, stays in the DOM
   so keyboard and screen-reader users still reach it. */
.dk-card-face__meta--reveal { opacity: 0; transition: opacity var(--dur-fast) var(--ease-standard); }
.dk-card-face:hover .dk-card-face__meta--reveal,
.dk-card-face:focus-within .dk-card-face__meta--reveal { opacity: 1; }

.dk-card-face--blocked { box-shadow: var(--shadow-card), inset 0 0 0 1px var(--dependency-edge); }
.dk-card-face--blocked:hover { box-shadow: var(--shadow-card-hover), inset 0 0 0 1px var(--dependency-edge); }

/* --card-accent is set inline (style="--card-accent:var(--space-X)") so
   this stays one rule for all 8 hues rather than a class per colour. A
   tint (not a solid fill) keeps --text-primary readable without any
   per-colour text-colour math — see the card colour picker's own note. */
.dk-card-face--coloured {
  background: color-mix(in oklab, var(--card-accent) 20%, var(--surface));
  box-shadow: var(--shadow-card), inset 3px 0 0 0 var(--card-accent);
}
.dk-card-face--coloured:hover, .dk-card-face--coloured:focus-visible {
  background: color-mix(in oklab, var(--card-accent) 30%, var(--surface));
  box-shadow: var(--shadow-card-hover), inset 3px 0 0 0 var(--card-accent);
}
/* Both a blocked-dependency edge and a colour accent at once — keep both
   visible rather than letting whichever rule is later in the file win
   outright. */
.dk-card-face--blocked.dk-card-face--coloured {
  box-shadow: var(--shadow-card), inset 3px 0 0 0 var(--card-accent), inset 0 0 0 1px var(--dependency-edge);
}
.dk-card-face--blocked.dk-card-face--coloured:hover {
  box-shadow: var(--shadow-card-hover), inset 3px 0 0 0 var(--card-accent), inset 0 0 0 1px var(--dependency-edge);
}

.dk-placement-thread {
  display: inline-flex; align-items: center; gap: 2px;
  font: var(--weight-medium) var(--size-micro)/1 var(--font-ui); color: var(--text-quiet);
}
.dk-placement-thread svg { width: 12px; height: 12px; }

/* ---------- tag ---------- */

/* --tag-accent set inline (style="--tag-accent:var(--space-X)") — one
   rule for all 8 hues. Full-hue text on a tint of that same hue reads
   clearly as "this label's colour" without needing per-colour contrast
   overrides (the tint and the full hue are always far enough apart). */
.dk-tag {
  display: inline-flex; align-items: center; height: 23px; padding: 0 10px;
  border-radius: var(--radius-pill); white-space: nowrap;
  background: color-mix(in oklab, var(--tag-accent) 30%, var(--surface-sunken));
  color: var(--tag-accent);
  font: var(--weight-semibold) var(--size-small)/1 var(--font-ui);
}
.dk-tag__dot { width: 7px; height: 7px; border-radius: var(--radius-pill); }

/* ---------- quick capture ---------- */

.dk-quick-capture {
  background: var(--surface-bright); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); padding: 11px 13px 12px; display: grid; gap: 8px;
  transition: box-shadow var(--dur-fast) var(--ease-standard); color: var(--text-primary);
}
.dk-quick-capture[hidden] { display: none; }
.dk-quick-capture:focus-within { box-shadow: 0 0 0 2px var(--accent), var(--shadow-card-hover); }
.dk-quick-capture__input {
  border: none; outline: none; background: transparent; width: 100%; padding: 0;
  font: var(--text-card-title); color: var(--text-primary);
  resize: none; overflow: hidden;
}
/* The global `:focus-visible` rule (docket_tokens.css) puts its own
   box-shadow ring on every focused control, textarea included — since the
   textarea has no border-radius, that ring rendered as a second, sharp-
   cornered box sitting inside the rounded one .dk-quick-capture:focus-within
   already draws. One ring (the container's) is enough. */
.dk-quick-capture__input:focus-visible { box-shadow: none; }
.dk-quick-capture__input::placeholder { color: var(--text-quiet); }
.dk-quick-capture__hint {
  display: flex; align-items: center; gap: var(--space-5);
  font: var(--text-meta); color: var(--text-quiet);
}
.dk-quick-capture__hint svg { width: 11px; height: 11px; }
.dk-quick-capture__error { color: var(--danger-fg); }

/* ---------- empty state ---------- */

.dk-empty-state {
  display: grid; justify-items: center; gap: var(--space-6);
  padding: var(--space-10) var(--space-8); text-align: center;
}
.dk-empty-state__icon {
  width: 30px; height: 30px; border-radius: var(--radius-card); display: inline-flex;
  align-items: center; justify-content: center; background: var(--surface-sunken); color: var(--text-quiet);
}
.dk-empty-state__icon svg { width: 16px; height: 16px; }
.dk-empty-state__title { font: var(--weight-semibold) var(--size-small)/1.3 var(--font-ui); color: var(--text-primary); }
.dk-empty-state__body { font: var(--weight-regular) var(--size-small)/1.5 var(--font-ui); color: var(--text-quiet); max-width: 280px; }

.dk-empty-column {
  border: 1px dashed var(--border-strong); border-radius: var(--radius-card);
  background: transparent; cursor: pointer; padding: 0; width: 100%;
}
.dk-empty-column:hover { border-color: var(--border-strong); background: var(--ink-hover); }

/* Column-body empty states sit among card faces (~70-90px tall) — the
   generic .dk-empty-state is sized for a full page and reads as an error
   splash screen at that scale, so scale it down to match its neighbours. */
.dk-empty-column .dk-empty-state, .dk-column-body > .dk-empty-state {
  padding: var(--space-6) var(--space-6); gap: var(--space-2);
}
.dk-empty-column .dk-empty-state__icon, .dk-column-body > .dk-empty-state .dk-empty-state__icon {
  width: 22px; height: 22px;
}
.dk-empty-column .dk-empty-state__icon svg, .dk-column-body > .dk-empty-state .dk-empty-state__icon svg {
  width: 13px; height: 13px;
}
.dk-empty-column .dk-empty-state__title, .dk-column-body > .dk-empty-state .dk-empty-state__title {
  font: var(--weight-medium) var(--size-micro)/1.3 var(--font-ui);
}
.dk-empty-column .dk-empty-state__body, .dk-column-body > .dk-empty-state .dk-empty-state__body {
  font: var(--text-meta); max-width: 200px;
}

/* ---------- forms ---------- */

.dk-field { display: grid; gap: 6px; }
.dk-field[hidden] { display: none; }
.dk-label {
  font: var(--text-eyebrow); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--text-quiet);
}
.dk-input, .dk-select {
  height: var(--control-height); border-radius: var(--radius-control); border: 1px solid var(--border-default);
  background: var(--surface-bright); color: var(--text-primary); padding: 0 10px;
  font: var(--weight-regular) var(--size-small)/1 var(--font-ui);
}
.dk-input:focus, .dk-select:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--shadow-focus-paper); }
.dk-checkbox-row { display: flex; align-items: center; gap: 8px; font: var(--weight-regular) var(--size-small)/1 var(--font-ui); color: var(--text-secondary); }
.dk-error { color: var(--danger-fg); font: var(--weight-medium) var(--size-small)/1.4 var(--font-ui); }

/* ---------- login ---------- */

.dk-login-page {
  min-height: 100vh; display: grid; place-items: center; background: var(--canvas);
}
.dk-login-card {
  width: 340px; background: var(--surface-bright); border-radius: var(--radius-panel);
  box-shadow: var(--shadow-popover); padding: 28px 26px 24px; display: grid; gap: 18px;
}
.dk-login-card form { display: grid; gap: 14px; }

/* ---------- scrollbars ---------- */

.dk-scroll::-webkit-scrollbar, .dk-board-columns::-webkit-scrollbar { width: 10px; height: 10px; }
.dk-scroll::-webkit-scrollbar-thumb, .dk-board-columns::-webkit-scrollbar-thumb {
  background: var(--paper-400); border-radius: var(--radius-pill); border: 3px solid transparent; background-clip: padding-box;
}
.dk-scroll::-webkit-scrollbar-track, .dk-board-columns::-webkit-scrollbar-track { background: transparent; }

/* ---------- drag and drop ---------- */

.dk-card-face.is-dragging { opacity: .5; }
.dk-column-body.is-drop-target { background: var(--surface-selected); border-radius: var(--radius-card); }

/* --column-accent is set inline the same way --card-accent is (see the
   card face rules) — one rule for all 8 hues. A tint across the whole
   body, plus a coloured underline on the name, so a column reads as
   "coloured" at a glance even while empty. */
.dk-column--coloured .dk-column-body {
  background: color-mix(in oklab, var(--column-accent) 9%, transparent);
  border-radius: var(--radius-card);
}
.dk-column--coloured .dk-column-header__name {
  box-shadow: inset 0 -2px 0 0 var(--column-accent);
  padding-bottom: 2px;
}

/* ---------- card detail ---------- */

.dk-card-detail {
  max-width: var(--card-detail-width); margin: 24px auto 60px; background: var(--surface);
  border-radius: var(--radius-panel); box-shadow: var(--shadow-panel); padding-bottom: 28px; color: var(--text-primary);
}
.dk-card-detail__top { padding: 20px 30px 0; display: grid; gap: 12px; }
.dk-card-detail__meta-row { display: flex; align-items: center; gap: 10px; }
.dk-card-detail__title {
  display: block; width: 100%; border: none; outline: none; background: transparent; padding: 2px 0;
  font: var(--weight-medium) var(--size-title-1)/1.28 var(--font-ui); letter-spacing: var(--track-title);
  color: var(--text-primary); text-wrap: pretty; border-radius: var(--radius-control);
}
.dk-card-detail__title:hover { background: var(--surface-hover); }
.dk-card-detail__title:focus { background: var(--surface-hover); box-shadow: var(--shadow-focus-paper); }

.dk-card-detail__placement-line { display: flex; align-items: center; gap: 10px; margin-top: 2px; }

/* Title, labels and the placement line stay full-width above this — the
   2/3 (description + everything else) / 1/3 (comments + history) split
   the design calls for starts here. */
.dk-card-detail__split {
  padding: 18px 30px 0; display: grid; grid-template-columns: 2fr 1fr; gap: 36px; align-items: start;
}
.dk-card-detail__main-col { display: grid; gap: 0; min-width: 0; }
.dk-card-detail__side-col {
  display: grid; gap: 24px; min-width: 0; border-left: 1px solid var(--border-hairline); padding-left: 24px;
}
.dk-card-detail__side-section { display: grid; gap: 8px; }
.dk-card-detail__side-title { font: var(--text-section); color: var(--text-primary); }

.dk-activity-feed { display: grid; gap: 10px; }
.dk-activity-feed__row {
  display: flex; align-items: baseline; gap: 7px; font: var(--weight-regular) var(--size-micro)/1.4 var(--font-ui);
  color: var(--text-secondary);
}
.dk-activity-feed__icon { flex: 0 0 auto; color: var(--text-quiet); position: relative; top: 1px; }
.dk-activity-feed__time { margin-left: auto; flex: 0 0 auto; color: var(--text-quiet); white-space: nowrap; }

.dk-card-detail__description {
  width: 100%; border: none; outline: none; background: transparent; resize: vertical; padding: 4px 0;
  font: var(--weight-regular) var(--size-body)/1.62 var(--font-ui); color: var(--text-secondary); border-radius: var(--radius-control);
  min-height: 44px;
}
.dk-card-detail__description:hover { background: var(--surface-hover); }
.dk-card-detail__description:focus { background: var(--surface-hover); box-shadow: var(--shadow-focus-paper); }
.dk-card-detail__description::placeholder { color: var(--text-quiet); }

.dk-card-detail__footer {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border-hairline);
  display: flex; justify-content: flex-end;
}

.dk-rail { display: grid; gap: 16px; padding-top: 2px; }
.dk-rail-field { display: grid; gap: 6px; }
.dk-rail-field__label {
  font: var(--text-eyebrow); color: var(--text-quiet); text-transform: uppercase; letter-spacing: var(--track-caps);
}
.dk-rail-field__value { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

.dk-section { padding: 22px 30px 0; display: grid; }

/* ---------- disclosure ---------- */

.dk-disclosure { box-shadow: inset 0 -1px 0 var(--border-hairline); }
.dk-disclosure--flush { box-shadow: none; }
.dk-disclosure__trigger {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 2px; border: none;
  background: none; cursor: pointer; text-align: left;
}
.dk-disclosure__chevron { color: var(--text-quiet); transition: transform var(--dur-fast) var(--ease-standard); }
.dk-disclosure[open] .dk-disclosure__chevron { transform: rotate(90deg); }
.dk-disclosure__title { font: var(--text-section); color: var(--text-primary); }
.dk-disclosure__summary { font: var(--text-meta); color: var(--text-quiet); }
.dk-disclosure__body { padding: 0 2px 18px 24px; display: grid; gap: 10px; }
.dk-disclosure__trigger::-webkit-details-marker { display: none; }
.dk-disclosure > summary { list-style: none; }

/* ---------- board section ---------- */

.dk-board-section {
  border: 1px solid var(--border-hairline); border-radius: var(--radius-card); background: var(--surface-sunken);
  overflow: hidden; transition: background-color var(--dur-fast) var(--ease-standard);
}
.dk-board-section[open] { background: var(--surface); }
.dk-board-section__trigger {
  display: flex; align-items: center; gap: var(--space-5); width: 100%; padding: 9px 10px;
  background: none; border: none; cursor: pointer; text-align: left; list-style: none;
}
.dk-board-section__trigger::-webkit-details-marker { display: none; }
.dk-board-section__name { font: var(--weight-medium) var(--size-small)/1.2 var(--font-ui); color: var(--text-primary); }
.dk-board-section__empty { font: var(--text-meta); color: var(--text-quiet); margin-left: auto; }
.dk-board-section__body { padding: 2px 10px 12px 32px; display: grid; gap: var(--space-6); }

.dk-hidden-line {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--surface-sunken); border-radius: var(--radius-control);
}

.dk-held-by { display: grid; gap: 6px; margin-bottom: 10px; }

/* ---------- coarse stage ---------- */

.dk-coarse-stage {
  display: inline-flex; align-items: center; gap: 6px; height: 21px; padding: 0 9px 0 7px;
  border-radius: var(--radius-pill); font: var(--weight-medium) var(--size-micro)/1 var(--font-ui); white-space: nowrap;
}
.dk-coarse-stage svg { width: 12px; height: 12px; }
.dk-coarse-stage--not_started { background: var(--stage-not-started-bg); color: var(--stage-not-started-fg); }
.dk-coarse-stage--in_progress { background: var(--stage-in-progress-bg); color: var(--stage-in-progress-fg); }
.dk-coarse-stage--done { background: var(--stage-done-bg); color: var(--stage-done-fg); }
.dk-coarse-stage__since { opacity: .7; font: var(--text-eyebrow); }

.dk-coarse-dot { width: 7px; height: 7px; border-radius: var(--radius-pill); flex: 0 0 auto; display: inline-block; }
.dk-coarse-dot--not_started { background: var(--stage-not-started-fg); }
.dk-coarse-dot--in_progress { background: var(--stage-in-progress-fg); }
.dk-coarse-dot--done { background: var(--stage-done-fg); }

.dk-coarse-line { display: inline-flex; align-items: center; gap: var(--space-4); font: var(--weight-regular) var(--size-small)/1.3 var(--font-ui); color: var(--text-secondary); }
.dk-coarse-line__person { font-weight: var(--weight-semibold); color: var(--text-primary); }
.dk-coarse-line__since { color: var(--text-quiet); }
.dk-coarse-line--not_started .dk-coarse-line__stage { color: var(--stage-not-started-fg); font-weight: var(--weight-medium); }
.dk-coarse-line--in_progress .dk-coarse-line__stage { color: var(--stage-in-progress-fg); font-weight: var(--weight-medium); }
.dk-coarse-line--done .dk-coarse-line__stage { color: var(--stage-done-fg); font-weight: var(--weight-medium); }

/* ---------- subtask row / dependency row ---------- */

.dk-subtask-row {
  display: flex; align-items: center; gap: var(--space-5); padding: 7px 9px;
  border-radius: var(--radius-control); text-decoration: none; color: inherit;
}
.dk-subtask-row:hover { background: var(--surface-hover); }
.dk-subtask-row__title { flex: 1; font: var(--weight-regular) var(--size-small)/1.35 var(--font-ui); color: var(--text-primary); }
.dk-subtask-row.is-done .dk-subtask-row__title { color: var(--text-tertiary); }
.dk-subtask-row__refid { opacity: 0; transition: opacity var(--dur-fast) var(--ease-standard); }
.dk-subtask-row:hover .dk-subtask-row__refid { opacity: 1; }

.dk-dependency-row {
  display: flex; align-items: center; gap: var(--space-5); padding: 6px 8px; border-radius: var(--radius-control);
  background: var(--surface-sunken); text-decoration: none; color: inherit;
}
.dk-dependency-row--blocked { background: var(--dependency-bg); }
.dk-dependency-row__icon { color: var(--text-quiet); }
.dk-dependency-row--blocked .dk-dependency-row__icon { color: var(--dependency-fg); }
.dk-dependency-row__direction { font: var(--text-meta); color: var(--text-tertiary); white-space: nowrap; }
.dk-dependency-row--blocked .dk-dependency-row__direction { color: var(--dependency-fg); }
.dk-dependency-row__title { flex: 1; font: var(--weight-regular) var(--size-small)/1.35 var(--font-ui); color: var(--text-primary); }
.dk-dependency-row__remove { opacity: 0; transition: opacity var(--dur-fast) var(--ease-standard); }
.dk-dependency-row:hover .dk-dependency-row__remove { opacity: 1; }

/* ---------- checklist ---------- */

.dk-checklist { display: grid; gap: var(--space-4); }
.dk-checklist__header { display: flex; align-items: center; gap: var(--space-6); }
.dk-checklist__name { font: var(--text-section); color: var(--text-primary); }
.dk-checklist__bar { height: 3px; border-radius: var(--radius-pill); background: var(--paper-300); overflow: hidden; }
.dk-checklist__bar-fill { height: 100%; background: var(--accent); transition: width var(--dur-base) var(--ease-out); }
.dk-checklist__bar-fill.is-complete { background: var(--stage-done-fg); }
.dk-checklist__items { display: grid; gap: 2px; padding-top: 2px; }

.dk-checkbox-item { display: inline-flex; align-items: center; gap: var(--space-4); cursor: pointer; padding: 3px 0; }
.dk-checkbox-item input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.dk-checkbox-item__box {
  width: 15px; height: 15px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sharp); border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text-inverse); transition: var(--transition-control);
}
.dk-checkbox-item input:checked ~ .dk-checkbox-item__box { border-color: var(--accent); background: var(--accent); }
.dk-checkbox-item__box svg { width: 11px; height: 11px; display: none; }
.dk-checkbox-item input:checked ~ .dk-checkbox-item__box svg { display: block; }
.dk-checkbox-item__label { font: var(--weight-regular) var(--size-small)/1.4 var(--font-ui); color: var(--text-primary); }
.dk-checkbox-item input:checked ~ .dk-checkbox-item__label { color: var(--text-tertiary); text-decoration: line-through; }

.dk-progress-meter { display: inline-flex; align-items: center; gap: 4px; font: var(--weight-medium) var(--size-micro)/1 var(--font-ui); color: var(--text-tertiary); }
.dk-progress-meter.is-complete { color: var(--stage-done-fg); }
.dk-progress-meter svg { width: 12px; height: 12px; }

.dk-placement-thread-dots { display: inline-flex; align-items: center; gap: 2px; }
.dk-placement-thread-dots__dot { width: 5px; height: 5px; border-radius: var(--radius-pill); background: var(--paper-500); }
.dk-placement-thread-dots__dot:first-child { background: var(--ink-500); }

/* ---------- card detail page chrome ---------- */

.dk-page-header { padding: 16px 22px 0; display: flex; align-items: center; gap: 10px; }
.dk-tag-picker { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dk-tag-toggle {
  display: inline-flex; align-items: center; gap: 5px; height: 21px; padding: 0 8px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-default); background: var(--surface); cursor: pointer;
  font: var(--weight-medium) var(--size-micro)/1 var(--font-ui); color: var(--text-secondary);
}
.dk-tag-toggle.is-active { border-color: transparent; }

/* ---------- files ---------- */

.dk-files-header { display: flex; align-items: center; gap: 9px; }
.dk-files-count { font: var(--text-meta); color: var(--text-quiet); }
.dk-files-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 9px; }

.dk-file-thumb {
  position: relative; height: 78px; padding: 0; border: none; border-radius: var(--radius-card);
  overflow: hidden; cursor: pointer; background: var(--surface-sunken); display: block; text-decoration: none;
  box-shadow: var(--shadow-card); transition: var(--transition-surface);
}
.dk-file-thumb:hover { box-shadow: var(--shadow-card-hover); }
.dk-file-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dk-file-thumb--doc {
  display: flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--surface-sunken); box-shadow: none;
}
.dk-file-thumb--doc:hover { background: var(--surface-hover); }
.dk-file-thumb--doc span {
  font: var(--weight-medium) var(--size-micro)/1.3 var(--font-ui); color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dk-file-thumb__cover-badge {
  position: absolute; bottom: 5px; left: 5px; display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: var(--radius-pill); background: var(--surface); box-shadow: var(--shadow-card);
  font: var(--text-eyebrow); color: var(--text-secondary);
}
.dk-file-grid-item { position: relative; }
.dk-file-actions {
  position: absolute; top: 5px; right: 5px; display: flex; gap: 3px; opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-standard);
}
.dk-file-grid-item:hover .dk-file-actions,
.dk-file-grid-item:focus-within .dk-file-actions { opacity: 1; }
.dk-file-actions form { display: contents; }
.dk-file-action-btn {
  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-control); border: none; background: var(--surface); box-shadow: var(--shadow-card);
  color: var(--text-secondary); cursor: pointer;
}
.dk-file-action-btn:hover { background: var(--surface-hover); color: var(--text-primary); }
.dk-file-action-btn svg { width: 12px; height: 12px; }

.dk-upload-row { display: flex; align-items: center; gap: 9px; }
.dk-file-input-label {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  border-radius: var(--radius-control); border: 1px dashed var(--border-strong); cursor: pointer;
  font: var(--weight-medium) var(--size-micro)/1 var(--font-ui); color: var(--text-secondary);
}
.dk-file-input-label:hover { background: var(--surface-hover); }
.dk-file-input-name { font: var(--text-meta); color: var(--text-quiet); }

/* ---------- flash ---------- */

.dk-flash {
  margin: 14px 22px 0; padding: 10px 14px; border-radius: var(--radius-control);
  background: var(--stage-done-bg); color: var(--stage-done-fg);
  font: var(--weight-medium) var(--size-small)/1.4 var(--font-ui);
}
.dk-flash--alert { background: var(--danger-bg); color: var(--danger-fg); }

/* ---------- side panel ---------- */

.dk-board-body { flex: 1; display: flex; min-width: 0; min-height: 0; }
.dk-board-body .dk-board-columns { flex: 1; }

.dk-side-panel {
  width: var(--panel-width); flex: 0 0 auto; display: flex; flex-direction: column;
  border-left: 1px solid var(--border-hairline); background: var(--surface); min-height: 0;
}
.dk-side-panel[hidden] { display: none; }
.dk-side-panel__tabs { display: flex; border-bottom: 1px solid var(--border-hairline); flex: 0 0 auto; }
.dk-side-panel__tab {
  flex: 1; text-align: center; padding: 12px 4px; font: var(--weight-medium) var(--size-small)/1 var(--font-ui);
  color: var(--text-tertiary); text-decoration: none; border-bottom: 2px solid transparent; cursor: pointer;
}
.dk-side-panel__tab:hover { color: var(--text-primary); }
.dk-side-panel__tab.is-active { color: var(--text-primary); border-bottom-color: var(--accent); }
.dk-side-panel__body { flex: 1; overflow-y: auto; display: block; padding: 4px 0; }

.dk-panel-item { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border-hairline); }
.dk-panel-item:hover { background: var(--surface-hover); }
.dk-panel-item__body { flex: 1; min-width: 0; display: grid; gap: 3px; }
.dk-panel-item__text { font: var(--weight-regular) var(--size-small)/1.4 var(--font-ui); color: var(--text-primary); }
.dk-panel-item__meta { font: var(--text-meta); color: var(--text-quiet); display: flex; align-items: center; gap: 6px; }
.dk-panel-item.is-unread { background: color-mix(in oklab, var(--accent) 6%, transparent); }
.dk-unread-dot { width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--unread-dot); flex: 0 0 auto; margin-top: 5px; }
.dk-ack-dot { width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--acknowledge-dot); flex: 0 0 auto; margin-top: 5px; }

.dk-chat-message { display: flex; gap: 9px; padding: 8px 14px; }
.dk-chat-message__body { display: grid; gap: 2px; min-width: 0; }
.dk-chat-message__meta { font: var(--text-meta); color: var(--text-quiet); }
.dk-chat-message__text { font: var(--weight-regular) var(--size-small)/1.5 var(--font-ui); color: var(--text-primary); word-wrap: break-word; }
.dk-mention-chip {
  display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: var(--radius-pill);
  background: var(--accent-quiet-bg); color: var(--text-brand); font-weight: var(--weight-medium); text-decoration: none;
}

.dk-composer { display: flex; gap: 8px; align-items: flex-start; padding: 10px 14px; border-top: 1px solid var(--border-hairline); }
.dk-composer textarea {
  flex: 1; border: 1px solid var(--border-default); border-radius: var(--radius-control); background: var(--surface-bright);
  padding: 7px 9px; font: var(--weight-regular) var(--size-small)/1.4 var(--font-ui); color: var(--text-primary);
  resize: none; min-height: 34px;
}
.dk-composer textarea:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--shadow-focus-paper); }

.dk-comment { display: flex; gap: 9px; padding: 10px 0; }
.dk-comment--reply { margin-left: 30px; }
.dk-comment__body { flex: 1; min-width: 0; display: grid; gap: 4px; }
.dk-comment__meta { display: flex; align-items: center; gap: 7px; font: var(--text-meta); color: var(--text-quiet); }
.dk-comment__author { font-weight: var(--weight-semibold); color: var(--text-primary); }
.dk-comment__text { font: var(--weight-regular) var(--size-small)/1.5 var(--font-ui); color: var(--text-primary); white-space: pre-wrap; word-wrap: break-word; }
.dk-comment__actions { display: flex; gap: 10px; }
.dk-comment__action { font: var(--weight-medium) var(--size-micro)/1 var(--font-ui); color: var(--text-quiet); background: none; border: none; cursor: pointer; padding: 0; }
.dk-comment__action:hover { color: var(--text-primary); text-decoration: underline; }
.dk-comment__backlink {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font: var(--text-meta); color: var(--text-brand); text-decoration: none;
}

/* ---------- badge ---------- */

.dk-badge {
  display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 6px;
  border-radius: var(--radius-sharp); background: var(--surface-sunken); color: var(--text-secondary);
  border: 1px solid var(--border-hairline);
  font: var(--weight-medium) var(--size-micro)/1 var(--font-ui); white-space: nowrap;
}
.dk-badge svg { width: 11px; height: 11px; }
.dk-badge--brand { background: var(--accent-quiet-bg); color: var(--text-brand); border-color: var(--accent-quiet-border); }
.dk-badge--neutral { background: var(--surface-sunken); color: var(--text-secondary); border-color: var(--border-hairline); }

/* ---------- filter bar ---------- */

.dk-filter-bar {
  display: flex; align-items: center; gap: var(--space-5); padding: 5px 6px 5px 10px;
  background: var(--accent-quiet-bg); border-radius: var(--radius-pill); border: 1px solid var(--accent-quiet-border);
  width: fit-content; flex-wrap: wrap; color: var(--text-brand);
}
.dk-filter-bar svg { width: 12px; height: 12px; flex: 0 0 auto; }
.dk-tag__remove {
  border: none; background: none; padding: 0; margin-left: 1px; cursor: pointer; color: inherit; opacity: .6;
  font: inherit; line-height: 1; text-decoration: none !important;
}
.dk-tag__remove:hover { opacity: 1; }

.dk-filter-trigger { position: relative; }
.dk-filter-trigger > summary { list-style: none; }
.dk-filter-trigger > summary::-webkit-details-marker { display: none; }
.dk-filter-trigger__panel {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: 300px;
  background: var(--surface-bright); border-radius: var(--radius-panel); box-shadow: var(--shadow-popover);
  padding: 14px; display: grid; gap: 14px;
}
/* For a trigger near the left edge of its row (e.g. the board header's
   "add a link" +), right:0 would push the panel further left, off the
   edge of the content column and behind the nav — open it from the left
   of the trigger instead. */
.dk-filter-trigger--align-left > .dk-filter-trigger__panel { left: 0; right: auto; }

/* ---------- drawers (inbox) ---------- */

.dk-drawer-backdrop {
  position: fixed; inset: 0; background: var(--drawer-scrim); z-index: 40;
}
.dk-drawer-backdrop[hidden] { display: none; }

/* A flex sibling of .dk-nav/.dk-main inside .dk-body, styled like the
   board's own side panel — opening it pushes the board over like another
   list, rather than floating over it, so a card stays draggable straight
   across into a column while the drawer is open. */
.dk-inbox-drawer {
  width: var(--drawer-width); max-width: 92vw; flex: 0 0 auto;
  background: var(--surface); border-right: 1px solid var(--border-hairline);
  display: flex; flex-direction: column; min-height: 0;
}
.dk-inbox-drawer[hidden] { display: none; }
.dk-inbox-drawer__header {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 16px 10px 14px 18px; border-bottom: 1px solid var(--border-hairline);
}
.dk-inbox-drawer__title { font: var(--text-board-title); color: var(--text-primary); }
.dk-inbox-drawer__body { flex: 1; overflow-y: auto; padding: 10px 14px 24px; }

.dk-inbox-group { display: grid; gap: 8px; margin-bottom: 18px; }
.dk-inbox-group__label { font: var(--text-eyebrow); color: var(--text-quiet); text-transform: uppercase; letter-spacing: var(--track-caps); padding: 0 2px; }

.dk-inbox-item {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-6); padding: 12px 12px 13px 14px;
  background: var(--surface); border-radius: var(--radius-docket-tab); box-shadow: var(--shadow-card);
  cursor: grab; transition: var(--transition-surface); position: relative; color: var(--text-primary);
  margin-bottom: 8px;
}
.dk-inbox-item:hover, .dk-inbox-item:focus-within { background: var(--surface-bright); box-shadow: var(--shadow-card-hover); }
.dk-inbox-item.is-dragging { opacity: .5; }
/* Off-screen (not display:none — the browser needs to actually render an
   element to snapshot it for setDragImage) card-sized stand-in for the
   drag ghost, built and removed per-drag by board_controller.js. */
.dk-inbox-drag-ghost {
  position: fixed; top: -1000px; left: -1000px; z-index: -1; max-width: 200px;
  padding: 8px 12px; border-radius: var(--radius-card); background: var(--surface-bright);
  box-shadow: var(--shadow-card-hover); font: var(--text-card-title); color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dk-inbox-item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--paper-400);
  border-radius: var(--radius-docket-tab) 0 0 var(--radius-docket-tab);
}
.dk-inbox-item--assigned::before { background: var(--accent); }
.dk-inbox-item__body { flex: 1; min-width: 0; display: grid; gap: 6px; }
.dk-inbox-item__title { font: var(--text-card-title); color: var(--text-primary); text-decoration: none; text-wrap: pretty; }
.dk-inbox-item__title:hover { text-decoration: underline; }
.dk-inbox-item__meta { display: flex; align-items: center; gap: var(--space-6); }
.dk-inbox-item__refid { opacity: 0; transition: opacity var(--dur-fast) var(--ease-standard); font: var(--text-ref-id); color: var(--text-quiet); }
.dk-inbox-item:hover .dk-inbox-item__refid, .dk-inbox-item:focus-within .dk-inbox-item__refid { opacity: 1; }

.dk-inbox-item__picker { flex: 0 0 auto; }
.dk-inbox-item__picker > summary { list-style: none; cursor: pointer; }
.dk-inbox-item__picker > summary::-webkit-details-marker { display: none; }
.dk-inbox-item__picker[open] { flex-basis: 100%; }
.dk-inbox-item__picker-panel {
  /* Inline, not absolutely-positioned: the drawer's own overflow-y:auto
     would clip a floating popover before it ever gets the chance to show. */
  width: 100%; margin-top: 10px; background: var(--surface-sunken); border-radius: var(--radius-control);
  padding: 10px; display: grid; gap: 8px;
}

/* ---------- lens boards ---------- */

.dk-lens-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--column-width), 1fr)); gap: var(--column-gap); }

/* ---------- board resources ---------- */

.dk-resource-row { display: flex; align-items: flex-start; gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--border-hairline); }
.dk-resource-row svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 2px; color: var(--text-quiet); }
.dk-resource-row__body { flex: 1; min-width: 0; display: grid; gap: 3px; }
.dk-resource-row__title { font: var(--weight-medium) var(--size-small)/1.4 var(--font-ui); color: var(--text-primary); }
.dk-resource-row__body-text { font: var(--weight-regular) var(--size-small)/1.5 var(--font-ui); color: var(--text-secondary); white-space: pre-wrap; }
.dk-board-section__resources { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--border-hairline); border-bottom: 1px solid var(--border-hairline); }

/* ---------- public board ---------- */

.dk-public-board { min-height: 100vh; background: var(--canvas); }
.dk-public-board__header { padding: 56px 48px 34px; background: var(--surface); }
.dk-public-board__header-inner { max-width: 1180px; margin: 0 auto; display: grid; gap: 12px; }
.dk-public-board__title { font: var(--text-display); letter-spacing: var(--track-display); color: var(--text-primary); }
.dk-public-board__lede { font: var(--weight-regular) var(--size-body)/1.55 var(--font-ui); color: var(--text-secondary); max-width: 560px; }
.dk-public-board__main { max-width: 1180px; margin: 0 auto; padding: 32px 48px 64px; display: grid; gap: 34px; }
.dk-public-board__column { display: grid; gap: 14px; }
.dk-public-board__column-header {
  display: flex; align-items: baseline; gap: 10px; padding-bottom: 8px; box-shadow: inset 0 -1px 0 var(--border-default);
}
.dk-public-board__column-header h2 { font: var(--weight-semibold) var(--size-title-2)/1.2 var(--font-display); letter-spacing: var(--track-title); color: var(--text-primary); }
.dk-public-board__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.dk-public-card {
  background: var(--surface); border-radius: var(--radius-docket-tab); box-shadow: var(--shadow-card);
  overflow: hidden; display: grid; gap: 8px;
}
.dk-public-card__cover { height: 130px; background: var(--paper-300); }
.dk-public-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dk-public-card > *:not(.dk-public-card__cover) { margin-left: 14px; margin-right: 14px; }
.dk-public-card > *:last-child { margin-bottom: 14px; }
.dk-public-card__title { font: var(--weight-medium) var(--size-title-3)/1.32 var(--font-ui); letter-spacing: var(--track-title); color: var(--text-primary); text-wrap: pretty; }
.dk-public-card__description { font: var(--weight-regular) var(--size-small)/1.55 var(--font-ui); color: var(--text-secondary); text-wrap: pretty; }
.dk-public-card__assignee { display: inline-flex; align-items: center; gap: 5px; font: var(--text-meta); color: var(--text-quiet); }
.dk-public-card__assignee svg { width: 12px; height: 12px; }
.dk-public-board__footer {
  border-top: 1px solid var(--border-hairline); background: var(--surface); padding: 26px 48px;
}
.dk-public-board__footer-inner { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 10px; }

/* ---------- quick capture: note + global overlay ---------- */

.dk-quick-capture__note { font: var(--text-meta); color: var(--text-brand); }

.dk-global-capture {
  position: fixed; top: 18vh; left: 50%; transform: translateX(-50%); z-index: 51; width: 520px; max-width: 92vw;
  background: var(--surface-bright); border-radius: var(--radius-docket-tab); box-shadow: var(--shadow-popover);
  padding: 16px 18px 14px; display: grid; gap: 8px;
}
.dk-global-capture[hidden] { display: none; }
/* Same story as .dk-quick-capture: the panel gets one rounded ring on
   focus, matching the design elsewhere, instead of the global
   `:focus-visible` rule's sharp-cornered one landing on the input itself. */
.dk-global-capture:focus-within { box-shadow: 0 0 0 2px var(--accent), var(--shadow-popover); }
.dk-global-capture__input {
  border: none; outline: none; background: transparent; width: 100%;
  font: var(--text-board-title); color: var(--text-primary);
}
.dk-global-capture__input:focus-visible { box-shadow: none; }
.dk-global-capture__hint { display: flex; align-items: center; gap: var(--space-5); font: var(--text-meta); color: var(--text-quiet); }
.dk-global-capture__hint svg { width: 11px; height: 11px; }
.dk-global-capture__note { color: var(--text-brand); }

/* ---------- mention picker ---------- */

.dk-mention-menu {
  position: absolute; z-index: 25; left: 0; right: 0; top: 100%; margin-top: 4px; max-height: 220px; overflow-y: auto;
  background: var(--surface-bright); border-radius: var(--radius-panel); box-shadow: var(--shadow-popover); padding: 6px;
}
.dk-mention-menu[hidden] { display: none; }
.dk-mention-menu__label {
  padding: 6px 8px 4px; font: var(--text-eyebrow); color: var(--text-quiet); text-transform: uppercase; letter-spacing: var(--track-caps);
}
.dk-mention-menu__option {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 7px 8px;
  border: none; background: none; border-radius: var(--radius-control); cursor: pointer;
  font: var(--weight-regular) var(--size-small)/1.3 var(--font-ui); color: var(--text-primary);
}
.dk-mention-menu__option:hover, .dk-mention-menu__option.is-active { background: var(--surface-hover); }
.dk-mention-menu__create { border-top: 1px solid var(--border-hairline); margin-top: 4px; padding-top: 4px; }

/* ---------- space switcher popover ---------- */

.dk-space-switcher__wrap { position: relative; }
.dk-space-switcher { border-radius: var(--radius-control); }
.dk-space-switcher:hover { background: var(--ink-hover); }
.dk-space-switcher__popover {
  position: absolute; top: 100%; left: 9px; right: 9px; z-index: 30; margin-top: 2px;
  background: var(--chrome-raised); border-radius: var(--radius-panel); box-shadow: var(--shadow-popover);
  padding: 6px; display: grid; gap: 1px;
}
.dk-space-switcher__popover[hidden] { display: none; }
.dk-space-switcher__divider { height: 1px; background: var(--border-on-ink); margin: 5px 2px; }

/* ---------- collapsible nav ---------- */

.dk-nav { transition: width var(--dur-base) var(--ease-standard); position: relative; }
.dk-nav[data-collapsed="true"] { width: var(--nav-width-collapsed); padding-left: 6px; padding-right: 6px; }
.dk-nav[data-collapsed="true"] .dk-nav-section__label,
.dk-nav[data-collapsed="true"] .dk-nav-item__label,
.dk-nav[data-collapsed="true"] .dk-space-switcher__name {
  display: none;
}
/* lucide sets display:inline-flex as an inline style on the <svg> it
   renders in place of the <i>, which beats a plain class selector — this
   is the one icon in the nav that needs hiding rather than just losing
   its label, so it needs to win that fight. */
.dk-nav[data-collapsed="true"] .dk-space-switcher svg:last-child {
  display: none !important;
}
.dk-nav[data-collapsed="true"] .dk-nav-item,
.dk-nav[data-collapsed="true"] .dk-space-switcher {
  justify-content: center;
}
/* Top corner of the nav, mirroring the side panel's own toggle sitting in
   the top corner of the board header — the two collapse affordances read
   as a matched pair instead of one floating at the bottom on its own. */
.dk-nav-top { display: flex; justify-content: flex-end; padding: 8px 5px 4px; }
.dk-nav[data-collapsed="true"] .dk-nav-top { justify-content: center; }

/* ---------- card modal ---------- */

turbo-frame#modal:not(:empty) { position: fixed; inset: 0; z-index: 70; }
.dk-modal-backdrop {
  position: fixed; inset: 0; background: var(--overlay-scrim);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 20px; overflow-y: auto;
}
.dk-modal-panel { width: 100%; max-width: var(--card-detail-width); }
.dk-modal-panel .dk-card-detail { margin: 0; }