/* ============================================================================
   ui/rows.css — "The whole board (Columns), made quieter" (2026-09-19 clarity
   review). Overrides ui/board.css with selectors specific enough to win; never
   a raw colour, only the names ui/theme.css already defines (AGENTS.md).
   ============================================================================ */

/* ---------- one main action at rest, the rest behind "···" (item 1) ---------- */
/* board.css dims .row-actions to .6 opacity until the card is hovered/focused — a
   row's one main action (and its quiet "···") must read at rest instead, since this
   row repeats thirty times and a person is scanning, not hovering. #columns beats
   the plain class with no !important. */
#columns .row-actions { opacity: 1; }

.row-actions .row-menu-btn {
  line-height: 1;
}
.row-actions .row-menu-btn[aria-expanded="true"] {
  border-color: var(--ink); color: var(--ink); background: var(--surface);
}

/* The menu itself is appended to <body> and positioned in fixed viewport
   coordinates (ui/board.js) precisely so a column's or a card's own layout can
   never clip it — see the build's own note above. */
.row-menu {
  position: fixed; /* ui/board.js sets left/top in fixed viewport coordinates; this is what makes them apply */
  display: flex; flex-direction: column; gap: .1rem; min-width: 9.5rem; width: max-content;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: .3rem; box-shadow: var(--shadow-panel); z-index: 21;
}
.row-menu button {
  display: block; width: 100%; text-align: left; background: transparent; border: 0;
  border-radius: var(--radius); padding: .38rem .55rem; font-size: var(--text-sm);
  color: var(--ink); cursor: pointer;
}
.row-menu button:hover, .row-menu button:focus-visible { background: var(--sunk); outline: none; }
.row-menu button.danger { color: var(--graphite); }
.row-menu button.danger:hover, .row-menu button.danger:focus-visible { color: var(--ink); }
@media (pointer: coarse) {
  .row-menu button { min-height: 40px; padding: .5rem .7rem; }
}

/* ---------- Filter behind one control (item 3) ---------- */
.filters .filter-toggle[aria-expanded="true"] {
  background: var(--ink); border-color: var(--ink); color: var(--on-ink);
}
.filters .filter-clear { color: var(--graphite); }
.filters .filter-clear:hover { color: var(--ink); border-color: var(--ink); }
/* The open panel takes its own line under the toggle/clear row (the same
   flex-basis trick ui/board.css already uses for .mission-fold-row). */
.filters .filter-panel {
  flex-basis: 100%; display: flex; flex-direction: column; gap: .35rem; margin-top: .3rem;
}
.filters .filter-panel .filter-clear { align-self: flex-start; }

/* ---------- what is live comes first on a narrow screen (item 4) ---------- */
/* Matches ui/board.css's own breakpoint for when .columns stops laying its
   states side by side (@media (min-width: 980px)) — below that, order them so
   the day's live work leads: Working, Check, Ready, Open, then the demo. Wide
   screens are untouched: no `order` applies at or above 980px. */
@media (max-width: 979.98px) {
  .columns .col[data-state="working"] { order: 1; }
  .columns .col[data-state="check"]   { order: 2; }
  .columns .col[data-state="ready"]   { order: 3; }
  .columns .col[data-state="open"]    { order: 4; }
  .columns .col[data-state="in-demo"] { order: 5; }

  /* An empty column collapses to its heading only — no "Nothing here" box, on a
     screen where every column is already stacked and visible at a glance. */
  .columns .col > .empty { display: none; }
}

/* The row's main action is LIGHT: an outline, not a fill. It repeats on thirty cards, and thirty filled
   buttons are thirty signals (research R46: normal operation carries no signal). The filled style stays
   for the one row that really asks for something: Answer, on a card that asks a person. */
.task .row-actions .row-main {
  background: transparent; color: var(--ink); border: 1px solid var(--ink); font-weight: 600;
}
.task .row-actions .row-main:hover, .task .row-actions .row-main:focus-visible { background: var(--ink); color: var(--paper); }

/* ---------- live work carries one quiet line (round two, item 3) ---------- */
/* The card's own "done looks like" line, cut to one line with an ellipsis — the full text
   is on the element's title attribute (a hover or a long press). Working, Check and Ready
   only; ui/board.js never builds this node for Open or In the demo, so there is nothing
   here to hide for them. Named apart from board.css's own (unused) ".task .done" so the
   two never fight over the same selector. */
.task .done-line {
  font-size: var(--text-sm); color: var(--graphite);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The lane's name, plain muted text beside the owner — not a chip, because a lane is
   where the card lives, not a tag on it. Same three live states as the line above. */
.task .lane-name { font-size: var(--text-xs); color: var(--graphite); }

/* ---------- the opened panel leads with the row's own main action (round two, item 4) --- */
.panel-detail > .panel-main { margin-bottom: 0; }

/* Pause and Blocked on, folded behind one "Can't move right now" — board.css's own
   .fold/.editor draw this exact shape (a chevron that rotates open); repeated here under
   a name this file owns, since board.css is not this build's to touch. */
.panel-detail > .pause-blocked { border-top: 1px solid var(--hairline); }
.panel-detail > .pause-blocked > summary {
  cursor: pointer; padding: var(--s3) 0; color: var(--graphite); list-style: none;
  display: flex; align-items: center; gap: .5rem; font-size: var(--text-xs);
  font-weight: 700; letter-spacing: var(--label-track); text-transform: uppercase;
}
.panel-detail > .pause-blocked > summary::-webkit-details-marker { display: none; }
.panel-detail > .pause-blocked > summary::before {
  content: "\203a"; font-size: 1rem; line-height: 1; transition: transform .12s ease;
}
.panel-detail > .pause-blocked[open] > summary::before { transform: rotate(90deg); }
.panel-detail > .pause-blocked > summary:hover { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .panel-detail > .pause-blocked > summary::before { transition: none; }
}

/* ---------- state and priority become first-class (2026-09-19, card-state redesign) ---------- */
/* State (asks a person / blocked / waiting) shows once, in a full-width strip at the top of the
   card, instead of split across a left border, a chip and a mono tick. Priority (high/critical)
   multiplies the state instead of sitting beside it as its own quiet mark: a heavier ink frame,
   sorted first, and the strip goes solid instead of tinted (R46 §6: colour marks a state to act
   on, never a category — the fewer things compete for it the faster any one of them pops).
   ui/board.css keeps the base .task layout; this file owns everything specific to that mark. */
.task .strip {
  grid-column: 1 / -1;
  margin: -.55rem -.6rem .45rem -.4rem;
  padding: .32rem .6rem;
  display: flex; align-items: center; gap: .35rem;
  font-size: var(--text-sm); font-weight: 600; line-height: 1.25;
  border-radius: var(--radius) var(--radius) 0 0;
}
.task .strip .txt {
  min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  line-clamp: 2; overflow-wrap: anywhere; line-height: 1.3;
}
.task .strip .strip-glyph { flex: 0 0 auto; width: .9rem; height: .9rem; }
.task .strip .strip-glyph svg { display: block; width: 100%; height: 100%; }
/* The tint is kept light enough to still read as "quiet" (R46: pale, not alarmed) but dark
   enough to clear 4.5:1 for its own text in both schemes — 10%, tuned by measuring, not eyeballing:
   18% failed 4.5:1 in light mode (4.16). */
.task .strip.k-asks:not(.solid) { background: color-mix(in srgb, var(--decide) 10%, var(--surface)); color: var(--decide); }
.task .strip.k-asks.solid { background: var(--decide); color: var(--on-ink); }
/* "On hold" (Package H): the same quiet-tint pattern as asks/blocked above, using --info — a
   person's own stop, not an alarm, so it borrows the "worth knowing" colour rather than --broken's
   "act now" or --decide's "a person must choose". */
.task .strip.k-held:not(.solid) { background: color-mix(in srgb, var(--info) 10%, var(--surface)); color: var(--info); }
.task .strip.k-held.solid { background: var(--info); color: var(--on-ink); }
.task .strip.k-blocked:not(.solid) { background: color-mix(in srgb, var(--broken) 10%, var(--surface)); color: var(--broken); }
.task .strip.k-blocked.solid { background: var(--broken); color: var(--on-ink); }
.task .strip.k-plain.solid { background: var(--ink); color: var(--paper); }
/* Waiting carries no hue at all — a plain line in graphite, not a tinted band — unless priority
   pushes it up (below): then it earns the same weight as any other high-priority strip. */
.task .strip.k-waiting { background: none; color: var(--graphite); margin-bottom: 0; padding: .3rem .6rem .32rem; border-bottom: 1px dashed var(--hairline); }
.task .strip.k-waiting.solid { background: var(--graphite); color: var(--on-ink); border-bottom: 0; margin-bottom: .45rem; }

/* High/critical priority: a heavier ink frame instead of a small arrow chip, so it is visibly a
   different weight of object from across the column (Alex, 2026-09-19: "high priority should
   show up louder than blocked or [a question]"). */
.task.pri-high, .task.pri-critical { border: 2px solid var(--ink); padding: .5rem .55rem .45rem .35rem; }
.task.pri-high .strip, .task.pri-critical .strip { margin: -.5rem -.55rem .45rem -.35rem; }

/* A waiting card steps back: dashed, dimmed, sitting quietly rather than inviting a click —
   its forward buttons are gone too (ui/board.js's mainActionFor and card()). */
.task.waiting { border-style: dashed; background: var(--paper); }
.task.waiting .title { color: var(--graphite); }
.task.waiting.pri-high, .task.waiting.pri-critical { border-style: dashed; }

.wait-divider { font-size: var(--text-xs); color: var(--graphite); border-top: 1px solid var(--hairline); padding-top: .5rem; margin-top: .1rem; }

/* ---------- B: priority shows on the Home the way it now shows on the board ---------- */
/* A small ink label before the title, on a Home step row (ui/home.js's homeStepRow) and a band
   row (ui/attention.js's attentionRow) whose card is high or critical — one class, both places
   (ui/board.js's priorityBadge). No new colours: the same ink/paper pair the board's own solid
   strip already uses. */
.priority-badge {
  display: inline-block; background: var(--ink); color: var(--paper);
  font-size: var(--text-xs); font-weight: 700; line-height: 1.3;
  padding: .05rem .35rem; border-radius: var(--radius); margin-right: .3rem;
  vertical-align: middle; white-space: nowrap;
}

/* ---------- a card's ID, on every face of it (Alex, 2026-10-06) ---------- */
/* Agents and Claude name a card by its ID ("CBD-7"); the board used to show it nowhere. One small, muted, mono mark, the same on
   the row, Home's lines and the opened card (ui/core.js cardIdMark; the project page draws the same class in ui/project.css).
   Smaller and quieter than the title: --text-xs in --graphite, the same tone as the lane name and the meta line. Selectable, so it
   can be copied; align-self keeps it the width of its text, so selecting it never takes the blank space beside it. */
.card-id {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; line-height: 1.2; letter-spacing: 0;
  color: var(--graphite); white-space: nowrap; -webkit-user-select: text; user-select: text;
}
.task .card-id { align-self: flex-start; }
/* the opened card: the ID, then its link, on one quiet line right under the title */
.panel-idline { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem var(--s3); margin-top: calc(-1 * var(--s1)); }
.panel .card-id { font-size: var(--text-sm); }
/* a linked card's row, marked for about three seconds (ui/views.js showLinkedCard removes the class) */
.link-hit { outline: 3px solid var(--ring); outline-offset: 2px; }
/* a decision's or alert's row in the "needs a person" bands (ui/attention.js): the ID above the line, like a card's */
.att-main > .card-id { display: block; margin-bottom: .1rem; }