/* home.css -- the box, Home, Queue, Search results, Activity drawer content. Owned by home.js. */


/* ------------------------------------------------------------------ box */
.box { position: relative; width: 100%; }
.box-field {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: var(--bg-raised); border: 1px solid var(--line); color: var(--text-secondary);
  transition: border-color var(--t-press) var(--ease), box-shadow var(--t-press) var(--ease);
  cursor: text;
}
.box-field:hover { border-color: var(--line-strong); }
.box-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); color: var(--text); }
.box-input { flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent; color: var(--text); }
.box-input::placeholder { color: var(--text-placeholder); }
.box-input:focus-visible { outline: none; }
.box-kbd { flex: none; }

/* hero (Home, round 5 2.2): the front door -- the box's one resting shadow */
.box-home .box-field { height: var(--box-h-hero); padding: 0 16px 0 20px; gap: 12px; border-radius: var(--r-box); box-shadow: var(--shadow-box); }
.box-home .box-field > .ico { width: 20px; height: 20px; }
.box-home .box-input { font-size: var(--fs-box); line-height: var(--lh-box); font-weight: 400; }
.box-home .box-kbd { height: 20px; min-width: 20px; font-size: 11.5px; }
.box-home.is-ask .box-field > .ico { color: var(--accent-text); }
/* at-rest quiet focus (load-time autofocus): accent border, no ring -- a real interaction clears is-quiet */
.box-home.is-quiet .box-field:focus-within { border-color: var(--accent); box-shadow: var(--shadow-box); }
.box-home .box-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-box); }

/* compact (round 5 2.3): the same instrument relocated, at working size */
.box-compact .box-field { height: var(--box-h-compact); padding: 0 10px 0 12px; border-radius: var(--r-card); gap: 10px; background: var(--bg-raised); border-color: var(--line); }
.box-compact .box-field:focus-within { background: var(--bg-raised); }
.box-compact .box-input { font-size: var(--fs-body); }
.box-compact .box-field > .ico { width: 16px; height: 16px; }
.box-compact.is-ask .box-field > .ico { color: var(--accent-text); }

.box-pop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 25; }
.box-pop[data-mode="list"] {
  background: var(--bg-raised); border: 1px solid var(--line-subtle); border-radius: var(--r-card);
  box-shadow: var(--shadow-float); padding: 6px;
  animation: menu-in var(--t-menu-in) var(--ease);
}
/* round 5 2.2/2.5: on Home the dropdown pairs with the taller box -- 8px below, --r-box corners, roomier rows */
.box-home .box-pop { top: calc(100% + 8px); }
.box-home .box-pop[data-mode="list"] { border-radius: var(--r-box); padding: 8px; }
.box-home .dd-row { min-height: 40px; }
.box-home .dd-interp { min-height: 32px; }
.box-compact .box-pop { width: 760px; max-width: calc(100vw - 32px); left: 50%; right: auto; transform: translateX(-50%); }
.box-compact .box-pop[data-mode="list"] { animation: none; }
.box-compact .box-pop[data-mode="card"] .pcard { box-shadow: var(--shadow-layer); max-width: none; }
.box-home .box-pop[data-mode="card"] { position: relative; top: 0; margin-top: 14px; }
.box-home .box-pop[data-mode="card"] .pcard { max-width: none; }

.dd-interp { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 2px 8px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line-subtle); font-size: var(--fs-meta); color: var(--text-secondary); }
/* S14.12: the one line the box says when Ask and Change are unavailable -- text colour, not a banner */
.dd-interp-off .dd-interp-text { color: var(--text); white-space: normal; }
/* S15.1: the mode word. It is the field's own label and control, so it reads as a quiet chip at the
   left of the text rather than as a button pinned to the right. It is present only once the classifier
   has something to decide about, and it stays visible at phone width -- the word is the only thing that
   says whether Enter will search, answer or write. */
.box .box-mode {
  height: var(--hit-min); padding: 0 8px; margin-right: -2px; cursor: pointer;
  font-size: var(--fs-caption); line-height: 16px; font-weight: 500; vertical-align: baseline;
}
.box .box-mode:hover:not(:disabled) { background: var(--bg-hover); }
.box .box-mode[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-soft); }
.box .box-mode:disabled { cursor: default; opacity: 1; color: var(--text-secondary); }
.box-home .box-mode { height: 26px; }
.dd-interp-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-back { display: inline-flex; align-items: center; gap: 4px; }
.dd-group { padding: 8px 8px 4px; }
.dd-sep { height: 1px; background: var(--line-subtle); margin: 4px 0; }
.dd-row {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; column-gap: 8px;
  min-height: var(--row-h); padding: 4px 8px; border-radius: var(--r-control); cursor: pointer;
  font-size: var(--fs-body);
}
.dd-entity { grid-template-columns: 18px minmax(0, 1fr) auto auto; }
.dd-row.active { background: var(--bg-hover); }
.dd-glyph { display: inline-flex; color: var(--text-secondary); }
.dd-main { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; }
.dd-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.dd-more .dd-main span { overflow: hidden; text-overflow: ellipsis; }
.dd-subrow { padding-left: 30px; }
.dd-sub { font-size: var(--fs-caption); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; }
.dd-initials { color: var(--text-secondary); font-size: var(--fs-caption); }
.dd-fact { display: inline-flex; align-items: center; white-space: nowrap; }
.dd-org { max-width: 220px; overflow: hidden; text-overflow: ellipsis; display: inline-block; }
.fact-lbl { font-size: var(--fs-meta); color: var(--text-secondary); margin-left: 6px; }
.dd-hint { display: none; align-items: center; gap: 4px; font-size: var(--fs-caption); color: var(--text-secondary); white-space: nowrap; margin-left: 8px; }
.dd-row.active .dd-hint, .dd-hint-on { display: inline-flex; }
.dd-entity.active .dd-fact { display: none; }

.box-preview {
  position: absolute; top: calc(100% + 6px); left: calc(100% + 8px); z-index: 25; width: 272px;
  padding: 12px 14px; background: var(--bg-raised); border: 1px solid var(--line-subtle); border-radius: var(--r-card); box-shadow: var(--shadow-float);
}
.box-compact .box-preview { left: calc(50% + 388px); }
.box-preview .section-label { margin-bottom: 6px; }
.pv-row { display: grid; grid-template-columns: 72px 1fr; gap: 8px; padding: 4px 0; font-size: var(--fs-meta); line-height: var(--lh-meta); border-top: 1px solid var(--line-subtle); }
.pv-k { color: var(--text-secondary); font-size: var(--fs-caption); }
.pv-act { display: block; }
.pv-clip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pv-act + .pv-act { margin-top: 4px; }

/* ------------------------------------------------------------------ home */
.home { min-height: 100%; display: flex; justify-content: center; padding: 0 var(--s3); }
.home-stack { width: 720px; max-width: 100%; padding: max(96px, 24vh) 0 64px; }
.home-tour { text-align: center; margin: 14px 0 0; }
.recents { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 4px; margin-top: 16px; }
.recent { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: var(--r-control); font-size: var(--fs-meta); color: var(--text-secondary); white-space: nowrap; }
.recent:hover { background: var(--bg-hover); color: var(--text); text-decoration: none; }
.needs { margin-top: 64px; }
.needs-head { display: flex; align-items: center; justify-content: space-between; padding: 0 8px; margin-bottom: 4px; min-height: 24px; }
.needs-keys { display: inline-flex; align-items: center; gap: 4px; }
.needs-keys kbd + kbd { margin-left: 0; }
.needs-keys kbd:not(:first-child) { margin-left: 8px; }

/* Round 7 (design 4.5): the row is an instruction. Action first at working size, the matter second in
   secondary weight so repeated case names never dominate, then at most one state word, then the owner.

   R2 (Fable review 1): the columns belong to the LIST, not to the row. Each row used to be its own grid
   with an auto state track, so the matter started at a different x on every line (688-886 px down one
   tab) and a long instruction was ellipsized to make room. One grid per list, with the rows subgridded
   into it, gives the matter one left edge and the owner one right edge per list, sizes the state track
   to the widest state in that list, and leaves the instruction free to wrap instead of being cut. */
.needs-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, 210px) auto; column-gap: 16px; }
.needs-list > .need-row, .needs-list > .q-item { grid-column: 1 / -1; }
.needs-list > .q-item { display: grid; grid-template-columns: subgrid; }
.q-item > .need-row { grid-column: 1 / -1; }
.q-item > .q-card { grid-column: 1 / -1; }
/* on the Queue the grid belongs to the whole tab, not to one band: the reader scans past three band
   titles and the case name has to stay in the same place across all of them */
.q-bands { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, 210px) auto minmax(28px, auto); column-gap: 16px; }
.q-bands > .q-band { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.q-band > .region-title, .q-band > .needs-list { grid-column: 1 / -1; }
.queue-page .q-bands .needs-list { grid-template-columns: subgrid; }
.need-row {
  display: grid; grid-template-columns: subgrid; align-items: center; column-gap: 16px;
  min-height: var(--row-h); padding: 4px 10px; border-radius: var(--r-control); cursor: pointer;
  transition: background-color var(--t-press) var(--ease);
}
.need-row:hover { background: var(--bg-hover); }
/* focus is an outline; selection (an open row) is fill plus a bar -- never the same mark (S1.6, S16.2) */
.need-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; background: transparent; box-shadow: none; }
/* the instruction is the one element S6.1 exists to protect: it wraps to a second line, never ellipsizes */
.need-action { font-weight: 500; min-width: 0; overflow-wrap: break-word; }
.need-subj { color: var(--text-secondary); min-width: 0; overflow-wrap: break-word; }
/* R3: the state cell is one line of inline text, so a separator between two state spans is a real
   character with spaces around it and not a flex gap that reads as "Back this afternoondeadline Sep 17" */
.need-when { display: block; text-align: right; white-space: nowrap; font-size: var(--fs-meta); }
.need-when:empty { display: none; }
.need-plain { color: var(--text-secondary); }
.need-sep { color: var(--text-placeholder); }
/* the deferred row is the one state cell that carries two things (the return word and the deadline it
   does not move); its first part flows as inline text so the dot between them is a real separator in
   the text and not a gap between two flex boxes */
.need-when .need-inline { display: inline; }
.need-when .need-inline .ico { margin-right: 4px; vertical-align: -2px; }
.need-owner { display: flex; justify-content: flex-end; }
.needs-more { display: block; width: fit-content; margin: 6px 8px 0 auto; font-size: var(--fs-meta); }
.needs-empty { padding: 8px; }
.recents .section-label { width: 100%; text-align: center; margin-bottom: 2px; }

/* ----------------------------------------------------------------- pages */
.page { max-width: 880px; margin: 0 auto; padding: 28px var(--s5) 64px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.page-head .meta { margin-top: 2px; }
.seg a.seg-btn { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.seg-count { color: var(--text-secondary); font-weight: 400; }
.queue-page { max-width: 960px; }
/* R5: the title and the filters are one row of their own and the head sentence sits beneath them, so a
   longer sentence on "Waiting on you" or "Updates" can no longer push the page's first control (and the
   first band with it) 48 px down the page. */
.queue-page .page-head { display: block; }
.q-headrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.queue-page .q-sentence { margin-top: 6px; }
/* the whose-filter is the page's first control, so it sits at working size, not label size */
.queue-page .seg-btn { height: 28px; font-size: var(--fs-body); }
/* four columns, and the owner is pinned to the last one. A row with no state word leaves .need-when
   out of the flow (:empty above), and without the pin the disc auto-placed into the third column --
   44 px left of every other row's disc, in the column that answers "whose". The last track grows for
   the "Unassigned" word and is otherwise the width of a disc; because it is a track of the list and
   not of the row, it grows once for the whole list and every disc keeps the same right edge (R3: at
   1280 px and up it used to be a hard 28 px, so "Unassigned" painted leftwards across the state). */
.queue-page .need-owner { grid-column: 4; }
/* selection: an open row is filled and barred; focus (above) is an outline, so the two never read alike */
.q-item.open > .need-row { background: var(--bg-raised); box-shadow: inset 3px 0 0 var(--accent); }
.q-item.is-done > .need-row { color: var(--text-secondary); }
.q-item.is-done > .need-row .need-action, .q-item.is-done > .need-row .need-subj { text-decoration: line-through; }
.q-band + .q-band { margin-top: var(--region-gap); }
.q-band > .region-title { padding: 0 10px; margin-bottom: 2px; }
/* the Later band carries its count and its promise beside the title, at every width (S7.7, S7.8) */
.q-later-note { margin-left: 8px; font-weight: 400; font-size: var(--fs-meta); color: var(--text-secondary); }
.q-sentence .disc { margin-left: 4px; }
.q-refresh-slot { display: inline-flex; }
.q-card { padding: 8px 10px 20px 10px; }
.q-card .pcard { max-width: none; }
.q-foot { margin-top: 28px; padding: 0 8px; }

/* the expansion: what the item is, in the five words S7.1 asks for */
.q-facts { display: grid; gap: 2px; margin: 0 0 12px; }
.q-fact { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: 12px; align-items: baseline; }
.q-fact dt { color: var(--text-secondary); font-size: var(--fs-caption); font-weight: 500; }
.q-fact dd { margin: 0; font-size: var(--fs-meta); line-height: var(--lh-meta); }
.q-fact dd .meta { display: block; margin-top: 2px; }
.q-sep { color: var(--text-placeholder); }
.q-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.q-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; border-radius: var(--r-card); background: var(--bg-pane); }
.q-ask .meta { flex: 0 0 auto; }
.q-ask > p.meta { flex: 1 0 100%; margin: 0; }
.q-reasons { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; flex: 1 0 100%; }
.q-reasons li { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: center; column-gap: 12px; }
.q-reasons .meta { font-size: var(--fs-meta); }
.q-reassign { margin-bottom: 12px; }
.q-cardslot:not(:empty) { margin-bottom: 12px; }
/* R1, audit 3: the row owns the item's Later and Dismiss. A card built for a row is rendered without
   them (core.js, placement 'queue'), but the Hollis offer card is one element shared with the Demand
   room -- rendered there, where its own Later and Dismiss belong -- and the Queue borrows the element
   rather than a copy so that recording the offer in either place is one state. For that one card the
   row takes the two buttons away by context: display:none keeps them off the screen, out of the tab
   order and out of the accessibility tree while the card sits in a row, and gives them back unchanged
   when the room takes the element home. core.js turns the L key off by the same test. */
.q-cardslot .pcard .pactions [data-act="later"],
.q-cardslot .pcard .pactions [data-act="dismiss"] { display: none; }
/* a grouped row's children: each keeps its own action, matter and date (S6.14) */
.q-kids { margin-bottom: 12px; }
.q-kids .section-label { margin-bottom: 4px; }
.q-kids > .meta { margin-top: 6px; }
.q-kidlist { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.q-kid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, 180px) auto; align-items: center; column-gap: 12px; min-height: 32px; padding: 0 10px; border-radius: var(--r-control); background: var(--bg-pane); font-size: var(--fs-meta); }
.q-kid-action { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-kid-subj, .q-kid-when { white-space: nowrap; text-align: right; }
.q-kid-why { grid-column: 1 / -1; padding-bottom: 4px; }
.q-updates { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.q-upd { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 12px; min-height: var(--row-h); padding: 0 10px; border-radius: var(--r-control); }
.q-upd-text { min-width: 0; }
.q-upd-when { white-space: nowrap; }
/* R2: Home's needs list is the same instruction at the same size as the Queue's, so it gets the width
   it needs rather than the width of the search box above it -- the box stays 720/800 px and centred. */
@media (min-width: 1040px) {
  .needs { margin-inline: -80px; }
}
@media (min-width: 1280px) {
  .home-stack { width: 800px; }
  .q-bands { grid-template-columns: minmax(0, 1fr) 220px auto minmax(28px, auto); }
  /* the Queue is a column of instructions and three fixed columns beside them; on a full-width screen
     it takes the width that keeps the instruction on one line rather than wrapping into empty margin */
  .queue-page { max-width: 1080px; }
}
/* n-bills: one row per matter with counts */
.q-bills { display: grid; gap: 8px; padding: 4px 0; }
.q-bills-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.q-bills-row { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto; align-items: center; column-gap: 12px; min-height: var(--row-h); padding: 2px 8px; border-radius: var(--r-control); background: var(--bg-pane); }
.q-bills-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-bills-count { font-size: var(--fs-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- search */
/* round 7 (S15.1): the interpretation row is gone from this page. The mode word now sits in the box in
   Row A, beside the words it describes, so repeating "Search / prior strain" under it was the same
   sentence twice -- two text elements and a chip spent saying what the field already said. */
.search-page .state-empty { margin-top: 4px; }
.ev-row.row-selected { border-radius: var(--r-control); }
.sr-ask {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; column-gap: 10px;
  min-height: 44px; padding: 8px 12px; margin-bottom: 16px; border-radius: var(--r-card);
  background: var(--bg-pane); color: var(--text); text-decoration: none;
  transition: background-color var(--t-press) var(--ease);
}
.sr-ask:hover { background: var(--bg-hover); text-decoration: none; }
.sr-ask:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr-ask-glyph { display: inline-flex; color: var(--accent-text); }
.sr-ask-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-ask-sub { color: var(--text-secondary); }
.sr-ask-hint { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ent-strip { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 16px; padding-bottom: 2px; }
.ent { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; min-width: 190px; padding: 10px 12px; border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--line-subtle); color: var(--text); }
.ent:hover { background: var(--bg-hover); text-decoration: none; }
.ent-name { font-weight: 500; }
.ent-fact { display: flex; align-items: center; }
.filters { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px 6px; overflow: visible; padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--line-subtle); }
.fchip { height: 26px; padding: 0 10px; border: 0; border-radius: var(--r-control); background: transparent; box-shadow: inset 0 0 0 1px var(--line-subtle); color: var(--text-secondary); font-size: var(--fs-caption); transition: background-color var(--t-press) var(--ease), color var(--t-press) var(--ease); }
.fchip:hover { color: var(--text); background: var(--bg-hover); }
.fchip.on { background: var(--accent-soft); color: var(--accent-text); box-shadow: none; }
.ev-count { margin: 12px 8px 6px; }
.ev-group { margin-bottom: 12px; }
.ev-ghead { display: flex; align-items: center; gap: 8px; padding: 6px 8px 2px; }
.ev-ghead a { color: var(--text); }
.ev-row {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; column-gap: 10px; align-items: start;
  width: 100%; padding: 8px; border: 0; border-radius: var(--r-control); background: transparent; text-align: left;
  transition: background-color var(--t-press) var(--ease);
}
.ev-row:hover { background: var(--bg-hover); }
.ev-glyph { display: inline-flex; color: var(--text-secondary); padding-top: 3px; }
.ev-main { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.ev-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-snip { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-secondary); }
.ev-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: var(--fs-caption); color: var(--text-secondary); white-space: nowrap; }
.ev-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* deposition and exhibit lines */
/* round 6 3.12: the result eyebrow is a 12 px UI label in sentence case, not tracked mono caps */
.ev-lmeta { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0; font-family: var(--font-ui); font-size: var(--fs-caption); line-height: 16px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.ev-sep { display: inline-block; width: 3px; height: 3px; margin: 0 7px; border-radius: 50%; background: currentColor; opacity: 0.6; }
.ev-quote { margin-top: 3px; padding-left: 10px; box-shadow: inset 2px 0 0 var(--line); font-family: var(--font-doc); font-size: 14px; line-height: 21px; color: var(--text); }
.ev-quote mark, .ev-snip mark { border-radius: 2px; }
.ev-morelines { padding-top: 2px; padding-bottom: 6px; }
.ev-morelbl { font-size: var(--fs-meta); color: var(--accent-text); }
.ev-morelines:hover .ev-morelbl { text-decoration: underline; }
.ev-slot { min-height: 60px; }
.ev-skel { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; padding: 8px; }
.ev-skel .ev-main { gap: 6px; }
.ev-none { padding: 8px; display: flex; align-items: center; gap: 6px; }
/* person-confirmed finding rows (round 3) */
.ev-finding .ev-title { margin-top: 2px; white-space: normal; }
.ev-finding .ev-glyph { color: var(--text); }
.ev-vs { margin-top: 4px; font-size: var(--fs-caption); line-height: 16px; color: var(--text-secondary); }

/* -------------------------------------------------------------- activity */
.act-sec + .act-sec { margin-top: 24px; }
.act-sec > .section-label { margin-bottom: 6px; }
.act-run { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-subtle); }
.act-run-main { display: flex; flex-direction: column; min-width: 0; }
.run-state { flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 6px; border-radius: 4px; font-size: var(--fs-caption); font-weight: 500; white-space: nowrap; background: var(--bg-hover); color: var(--text-secondary); margin-top: 1px; }
.run-waiting { background: var(--accent-soft); color: var(--accent-text); }
.run-error { background: var(--urgency-3); color: var(--urgency-3-text); }
.act-receipt { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: var(--fs-meta); border-bottom: 1px solid var(--line-subtle); }
.act-rtext { flex: 1; min-width: 0; }
.act-receipt.undone .act-rtext { color: var(--text-secondary); text-decoration: line-through; }
.act-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line-subtle); font-size: var(--fs-meta); line-height: var(--lh-meta); }
.act-time { color: var(--text-secondary); font-size: var(--fs-caption); line-height: var(--lh-meta); }
.act-row.sys .w500 { color: var(--text-secondary); }
.act-row.err .w500::after { content: " !"; color: var(--text); }
.run-detail { display: grid; grid-template-columns: 92px 1fr; gap: 2px 10px; margin-top: 6px; padding: 8px 10px; background: var(--bg-pane); border-radius: var(--r-control); font-size: var(--fs-caption); line-height: var(--lh-caption); }
.run-detail dt { color: var(--text-secondary); }

@media (max-width: 720px) {
  /* round 5 2.7: Row A is taller now, so the hero needs less top air; touch sizes for both variants */
  .home-stack { padding-top: 40px; }
  /* the hero and the compact box say the same sentence now, and the hero says it at 16 px so that
     taking the field on a phone does not zoom the page. At 360 that sentence was 5 px wider than the
     field's text area, and a placeholder cut mid-word is the truncation the checklist is about, so the
     field gives back the air instead: 12/10 px of side padding rather than 20/16, and a 10 px gap. */
  .box-home .box-field { height: 56px; padding: 0 10px 0 12px; gap: 10px; }
  .box-home .box-field > .ico { width: 18px; height: 18px; }
  .box-home .box-input { font-size: 16px; }
  .box-compact .box-field { height: 40px; }
  .box-home .box-kbd, .box-compact .box-kbd { display: none; }
  .box-home .dd-row, .box-compact .dd-row { min-height: 44px; }
  /* phone: the row wraps to whole lines. A max-height here sliced the second line of names in half
     ("Marcus Whitfield (lead)" cut through the middle), which is the truncation rule the checklist
     names: a clipped name hides the part that identifies it. Chips are 28px and wrap; the hero grows
     by one line rather than showing half of one. */
  .recents { max-height: none; }
  /* phone: three lines -- the instruction, then the matter on its own line so the identifying part of
     the case name is never cut ("Estate of Whi..."), then the state word and the owner (R2) */
  .needs { margin-inline: 0; }
  .needs-list, .q-bands, .q-bands > .q-band, .needs-list > .q-item { display: block; }
  .need-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; padding: 8px; }
  /* the owner keeps a column on a phone too: dropping it left an unowned row carrying neither an owner
     nor a state word, which is the one question the column exists to answer */
  .queue-page .need-row { grid-template-columns: minmax(0, 1fr) auto minmax(28px, auto); }
  /* explicit rows, so a row with no state word keeps the owner beside the matter instead of leaving the
     disc alone on a line of its own */
  .need-action { grid-column: 1 / -1; grid-row: 1; }
  .need-subj { grid-column: 1 / 3; grid-row: 2; white-space: normal; }
  .need-when { grid-column: 1 / 3; grid-row: 3; text-align: left; white-space: normal; }
  .queue-page .need-owner { grid-column: 3; grid-row: 2; }
  .q-fact { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .q-reasons li { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .q-upd { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; padding: 8px; }
  .q-upd-text { grid-column: 1 / 3; }
  .q-kid { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; padding: 4px 8px; }
  .q-kid-action { grid-column: 1 / 3; white-space: normal; }
  .q-kid-subj { text-align: left; }
  /* the five filters do not fit a phone in one line, so they wrap onto two: every filter stays on
     screen and reachable, which a sideways-scrolling strip would not give */
  .queue-page .q-headrow { flex-direction: column; align-items: stretch; gap: 8px; }
  .queue-page .seg { flex-wrap: wrap; row-gap: 2px; justify-content: flex-start; }
  .queue-page .seg-btn { font-size: var(--fs-meta); }
  /* round 6 3.12 asks for one filter row; on a phone the row wraps rather than running off the side */
  .filters { flex-wrap: wrap; }
  .box-compact .box-pop { width: auto; left: 0; right: 0; transform: none; }
  /* base.css hides .box-mode under 720 px because it was an Ask toggle; as the mode word it stays,
     because at this width it is the only thing on screen that says what Enter is about to do */
  .box .box-mode { display: inline-flex; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; }
  .box-preview { display: none !important; }
  .dd-entity { grid-template-columns: 18px minmax(0, 1fr) auto; }
  .dd-entity .dd-hint { display: none !important; }
  /* round 7 (S15.1): the interpretation sentence wraps rather than ending in an ellipsis -- at 400 px
     "nothing is written until you confi..." is the half of the sentence that carries the promise */
  .dd-interp { min-height: 0; padding-bottom: 6px; }
  .dd-interp-text { white-space: normal; overflow: visible; text-overflow: clip; }
  /* round 7 (S15.1): at 400 px the command row's "Enter review card" hint pushed the verb into an
     ellipsis -- "Recor..." -- so the row named neither the act nor the matter. The hint goes the way
     the entity row's already had; the verb, the subject chip and the change count stay. */
  .dd-command .dd-hint { display: none !important; }
  .dd-entity.active .dd-fact { display: inline-flex; }
  .page { padding: 20px 16px 48px; }
  .ev-row { grid-template-columns: 18px minmax(0, 1fr); }
  .ev-meta { grid-column: 2; flex-direction: row; gap: 8px; align-items: center; }
  .ev-line .ev-meta:empty, .ev-morelines .ev-meta { display: none; }
  .sr-ask { grid-template-columns: 18px minmax(0, 1fr); }
  .sr-ask-text { white-space: normal; }
  .sr-ask-hint { display: none; }
  .q-card { padding-left: 0; }
}