/* statements.css - the Statements tab's own styles (wave 3; app/statements.js).
   Tokens only (DESIGN.md: --paper --surface --surface2 --line --line2 --ink
   --ink2 --ink3 --accent --accent-ink --good --warn --crit --r); the panels,
   kickers, chips and buttons come from board.css and system.css. Status
   always carries a word beside its colour. */

.stmts .stmts-sub { margin-top: 2px; }
.stmts .lfb-panel + .lfb-panel, .stmts .stmts-queue, .stmts .stmts-acts, .stmts .stmts-summary { margin-top: 14px; }
.stmts .lfb-muted { color: var(--ink3); font-size: 12.5px; }
.stmts .n { font-family: var(--mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; }

/* coverage grid: scrolls sideways on a phone, never wraps the page */
.stmts-gridwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.stmts-grid { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 13px; }
.stmts-grid th, .stmts-grid td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.stmts-grid thead th { font-family: var(--mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); font-weight: 500; }
.stmts-grid th.n, .stmts-grid td.n { text-align: center; }
.stmts-grid tbody th { font-weight: 600; color: var(--ink); }
.stmts-cell { color: var(--ink3); min-width: 34px; }
.stmts-cell.has { color: var(--ink2); }
.stmts-cell.adopted { color: var(--good); font-weight: 700; }
.stmts-legend { margin-top: 8px; }
.stmts-level[data-level="late"] { color: var(--crit); border-color: var(--crit); }
.stmts-level[data-level="due"] { color: var(--warn); border-color: var(--warn); }
.stmts-level[data-level="current"] { color: var(--good); border-color: var(--good); }
.stmts-ent { margin-left: 4px; }

/* drop zone */
.stmts-drop { border: 1px dashed var(--line2, var(--line)); border-radius: var(--r); padding: 18px; display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; cursor: pointer; background: var(--surface); }
.stmts-drop.over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.stmts-drop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.stmts-dropin { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.stmts-dropin b { color: var(--ink); }
.stmts-dropin span { color: var(--ink3); }
.stmts-pick { position: relative; overflow: hidden; display: inline-flex; align-items: center; }
.stmts-pick input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.stmts-drophint { max-width: 62ch; }

/* statement cards */
.stmts-queue { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
/* the cards sit in one grid row, top edges level (the panel-after-panel gap is the grid's own) */
.stmts .stmts-queue .lfb-panel { margin-top: 0; }
/* a card's kicker holds up to three pieces (the account, its company, the reader and the period): they wrap, never overlap */
.stmts-card .lfb-kicker { flex-wrap: wrap; justify-content: flex-start; gap: 4px 10px; }
.stmts-card .lfb-kicker .stmts-ent { flex: none; margin-left: 0; }
.stmts-card.stmts-bad { border-color: var(--crit); }
.stmts-facts { display: flex; gap: 12px 18px; flex-wrap: wrap; font-size: 13px; color: var(--ink2); margin: 6px 0 8px; }
.stmts-checks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.stmts-check { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.stmts-check .stmts-ckstate { font-family: var(--mono, ui-monospace, monospace); font-size: 11.5px; letter-spacing: .04em; }
.stmts-check.ok .stmts-tick, .stmts-check.ok .stmts-ckstate { color: var(--good); }
.stmts-check.fail .stmts-tick, .stmts-check.fail .stmts-ckstate { color: var(--crit); font-weight: 700; }
.stmts-verdict { margin-top: 10px; font-size: 13.5px; color: var(--ink); }
/* the verdict line: a mark (the coverage grid's tick and dot), the word on the tag, the sentence. Good = the book holds it. */
.stmts-mark { display: inline-block; min-width: 1.1em; font-weight: 700; color: var(--good); }
.stmts-verdict[data-kind="filed"] .tag, .stmts-verdict[data-kind="adopted"] .tag, .stmts-verdict[data-kind="another_copy"] .tag, .stmts-verdict[data-kind="replaced"] .tag { color: var(--good); border-color: var(--good); }
.stmts-verdict[data-kind="unbalanced"] .tag, .stmts-verdict[data-kind="differs"] .tag, .stmts-verdict[data-kind="adopt_differs"] .tag, .stmts-verdict[data-kind="error"] .tag,
.stmts-verdict[data-kind="offline"] .tag, .stmts-verdict[data-kind="unknown_account"] .tag, .stmts-verdict[data-kind="inactive_account"] .tag,
.stmts-verdict[data-kind="label_taken"] .tag, .stmts-verdict[data-kind="replace_refused"] .tag, .stmts-verdict[data-kind="bad_request"] .tag,
.stmts-verdict[data-kind="handed_back"] .tag { color: var(--crit); border-color: var(--crit); }
.stmts-verdict[data-kind="pending"] .tag, .stmts-verdict[data-kind="new"] .tag, .stmts-verdict[data-kind="adopt_first"] .tag, .stmts-verdict[data-kind="not_allowed"] .tag,
.stmts-verdict[data-kind="no_legacy"] .tag, .stmts-verdict[data-kind="nothing_to_replace"] .tag, .stmts-verdict[data-kind="gone"] .tag { color: var(--warn); border-color: var(--warn); }
.stmts-warns { margin: 6px 0 0; padding-left: 18px; color: var(--warn); font-size: 12.5px; }
.stmts-cardacts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.stmts-acts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.stmts-summary { padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); }
.stmts-summary.ok { border-color: var(--good); }
.stmts-summary.fail { border-color: var(--crit); }
.stmts-byhand { margin-top: 6px; }

/* needs a home */
.stmts-group + .stmts-group { margin-top: 10px; }
.stmts-need { padding: 8px 0; border-bottom: 1px solid var(--line); }
.stmts-needtop { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 12px; align-items: baseline; }
.stmts-date { font-family: var(--mono, ui-monospace, monospace); font-size: 12px; color: var(--ink2); white-space: nowrap; }
.stmts-desc { color: var(--ink); overflow-wrap: anywhere; }
.stmts-detail { margin-top: 2px; }
.stmts-amt.in { color: var(--good); }
.stmts-amt.out { color: var(--ink); }
.stmts-needform, .stmts-rule { display: flex; gap: 8px 10px; flex-wrap: wrap; align-items: flex-end; margin-top: 8px; }
.stmts-rule { padding: 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface2, var(--surface)); }
.stmts-needform label, .stmts-rule label { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink3); min-width: 0; }
.stmts-needform select, .stmts-needform input, .stmts-rule select, .stmts-rule input { min-height: 36px; font-size: 13.5px; text-transform: none; letter-spacing: 0; }
.stmts-rule .lfb-muted { flex-basis: 100%; }
.stmts-inline { flex-direction: row !important; align-items: center !important; gap: 6px !important; text-transform: none !important; }

/* rules and registry */
.stmts-rulerow, .stmts-reg, .stmts-acct { padding: 8px 0; border-bottom: 1px solid var(--line); }
.stmts-rulerow.off .stmts-rulewhat, .stmts-rulerow.off .stmts-rulecat, .stmts-acct.off .stmts-accttop b { color: var(--ink3); text-decoration: line-through; }
.stmts-ruletop, .stmts-accttop { display: flex; gap: 8px 14px; flex-wrap: wrap; align-items: baseline; }
.stmts-rulewhat { color: var(--ink); overflow-wrap: anywhere; }
.stmts-rulecat { font-weight: 600; }
.stmts-ruleacts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.stmts-danger { color: var(--crit); }
.stmts-reg, .stmts-edit { display: flex; gap: 8px 14px; flex-wrap: wrap; align-items: center; }
.stmts-edit { padding: 8px 0; border-bottom: 1px solid var(--line); }
.stmts-editcats { color: var(--ink); }
.stmts-regwhen { color: var(--ink); min-width: 170px; }
.stmts-reg .tag[data-state="adopted"] { color: var(--good); border-color: var(--good); }
.stmts-reg .tag[data-state="loaded"] { color: var(--warn); border-color: var(--warn); }

/* a phone: 44 px targets, one column of cards, the grid scrolls */
@media (max-width: 760px) {
  .stmts .btn, .stmts .fchip, .stmts select, .stmts input:not([type="checkbox"]), .stmts .lfd-seg button { min-height: 44px; }
  .stmts input[type="checkbox"] { width: 24px; height: 24px; }
  .stmts-queue { grid-template-columns: 1fr; }
  .stmts-needtop { grid-template-columns: minmax(0, 1fr) auto; }
  .stmts-needtop .stmts-date { grid-column: 1 / -1; }
  .stmts-needform label, .stmts-rule label { flex: 1 1 140px; }
  .stmts-needform .btn, .stmts-rule .btn { flex: 1 1 140px; }
}