/* Cyresora — app layer on the Ownware UI kit (assets/ui/ownware-ui.css). Accent + app-specific rules only; generic rules come from the kit. */
:root{--accent:#b91c1c;--accent-dark:#991b1b;--accent-soft:#fee2e2;--on-accent:#ffffff;--accent-ink:var(--on-accent)}
html[data-theme="dark"]{--accent:#fca5a5;--accent-dark:#fecaca;--accent-soft:#3f1414;--on-accent:#1a0606;--accent-ink:var(--on-accent)}

/* A long nav in a flex column shrinks its own brand row to nothing without this. */
.side .brand{flex:0 0 auto}

/* ── the questionnaire's option rows ──────────────────────────────────────
   The kit styles single checkboxes inside .field, but the classification screen is a LIST of
   them, each carrying a full sentence of the Regulation. They need to read as prose with a box
   beside it, not as a cramped form control. */
.check{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line2);font-size:.92rem;line-height:1.45;cursor:pointer}
.check:last-of-type{border-bottom:0}
.check input[type=checkbox]{width:auto;flex:0 0 auto;margin:3px 0 0;accent-color:var(--accent)}
.check span{min-width:0}
.check strong{white-space:nowrap}
.check:hover{color:var(--ink)}

/* ── the live verdict rail ────────────────────────────────────────────────
   It updates while you type, so it must not jump the page around as it grows. */
#verdict{position:sticky;top:14px}
#verdict .pill{font-size:.85rem;padding:5px 12px}
#verdict ul.timeline{margin:10px 0 0}
#verdict ul.timeline li{font-size:.85rem;line-height:1.45}
#verdict ul.list li{padding:8px 0}
@media(max-width:900px){#verdict{position:static}}

/* ── risk tiers ───────────────────────────────────────────────────────────
   Mapped onto the kit's own semantic tones in AiAct::classTone(); these only tighten the
   prohibited case, which should look like a stop sign rather than another status. */
.pill.bad.tier{font-weight:700;letter-spacing:.01em}

/* ── the register table carries long sentences in its Basis column ───────── */
.tbl td .basis{display:inline-block;max-width:34ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
@media(max-width:640px){.tbl td .basis{max-width:100%;white-space:normal}}

/* ── the Article 113 timeline on the dashboard ────────────────────────────── */
.list li .s{overflow-wrap:anywhere}

/* ── evidence thumbnails on a system's file ───────────────────────────────── */
.evidence{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.evidence a{display:flex;gap:8px;align-items:center;padding:8px 11px;border:1px solid var(--line);border-radius:9px;font-size:.85rem;background:var(--card)}
.evidence a:hover{border-color:var(--accent);text-decoration:none}
.evidence .b{color:var(--faint);font-variant-numeric:tabular-nums}

/* ── the literacy matrix ──────────────────────────────────────────────────── */
.matrix td.gap{background:var(--badbg);color:var(--bad);font-weight:600}
.matrix td.ok{color:var(--ok)}

/* ── obligations in the rail ──────────────────────────────────────────────
   The kit's `.list li` is a horizontal flex row (t / s / r). At rail width its spans collapse to
   slivers and a sentence wraps one character per line. Obligations are stacked blocks instead. */
.obl{border-top:1px solid var(--line2);padding:10px 0}
.obl:first-of-type{border-top:0}
.obl .oh{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:4px}
.obl .oh strong{font-size:.86rem}
.obl .who{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--sub);
  background:var(--chip);border-radius:999px;padding:2px 8px;white-space:nowrap}
.obl p{margin:0;font-size:.85rem;line-height:1.5;color:var(--sub)}
.obl p.from{margin-top:4px;font-size:.76rem;color:var(--faint);font-variant-numeric:tabular-nums}

/* The kit capitalises pill text. Multi-word tier labels are written to read correctly under it. */
.check .pill{text-transform:none}

/* ── the ladder ───────────────────────────────────────────────────────────
   A reporting deadline is read in HOURS, so the row leads with the clock and the numbers are
   tabular — a column of times that jitters as it counts down is hard to scan under pressure. */
.ladder{list-style:none;margin:0;padding:0}
.ladder li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;align-items:start;
  padding:11px 0;border-bottom:1px solid var(--line2)}
.ladder li:last-child{border-bottom:0}
.ladder .st{font-weight:600;font-size:.93rem}
.ladder .cite{color:var(--faint);font-size:.76rem;margin-left:6px;font-weight:400}
.ladder .note{grid-column:1/-1;color:var(--sub);font-size:.82rem;line-height:1.5;margin:0}
.ladder .when{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;font-size:.85rem}
.ladder .when .due{display:block;color:var(--faint);font-size:.76rem}
.ladder .left{font-weight:700;font-variant-numeric:tabular-nums}
.ladder .left.bad{color:var(--bad)} .ladder .left.warn{color:var(--warn)} .ladder .left.ok{color:var(--ok)}
@media(max-width:640px){.ladder li{grid-template-columns:1fr}.ladder .when{text-align:left}}

/* A deadline that lands at a weekend is the thing a buyer assumes cannot happen. */
.wknd{color:var(--warn);font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;font-weight:700}

/* ── severity ─────────────────────────────────────────────────────────────── */
.pill.critical{background:var(--badbg);color:var(--bad);font-weight:700}
.pill.high{background:var(--warnbg);color:var(--warn)}
.pill.medium{background:var(--chip);color:var(--sub)}
.pill.low{background:var(--chip);color:var(--faint)}

/* The countdown on the board, big enough to read across a room during an incident. */
.bigclock{font-family:var(--display);font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.bigclock.bad{color:var(--bad)} .bigclock.warn{color:var(--warn)}