/* Complia — 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:#2563eb;--accent-dark:#1d4ed8;--accent-soft:#e6efff;--on-accent:#ffffff;--accent-ink:var(--on-accent)}
html[data-theme="dark"]{--accent:#60a5fa;--accent-dark:#93c5fd;--accent-soft:#16233f;--on-accent:#050c1a;--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}

/* ── complaint stages (the kit knows none of these words) ──────────────── */
.pill.received{background:var(--infobg);color:var(--info)}
.pill.acknowledged{background:var(--warnbg);color:var(--warn)}
.pill.investigating{background:var(--accent-soft);color:var(--accent)}
.pill.ack_overdue{background:var(--badbg);color:var(--bad)}
.pill.resolved{background:var(--okbg);color:var(--ok)}
.pill.rejected{background:var(--chip);color:var(--sub)}

/* ── the hero: the register, with the statutory clock in every row ─────── */
.reg-row .who{font-weight:600}
.reg-row .who span{display:block;font-size:.8rem;color:var(--faint);font-weight:400}
.reg-row .subj{max-width:34ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reg-row .stage{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.reg-row .advance{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap;opacity:.6;transition:opacity .15s}
tr:hover .reg-row .advance,.reg-row:hover .advance{opacity:1}
tr.is-overdue td{background:color-mix(in srgb,var(--bad) 6%,var(--card))}
tr.is-duesoon td{background:color-mix(in srgb,var(--warn) 7%,var(--card))}

/* The clock in a register row. Deliberately NOT display:flex on the <td> itself: that takes the
   cell out of table layout, so it stops stretching to the row height and the row's tint ends in a
   white band under it. The chip is already inline-flex and .when is a block — they stack anyway. */
.clock-cell{min-width:0}
.clock-cell .when{display:block;margin-top:2px;font-size:.78rem;color:var(--faint);white-space:nowrap}

/* ── investigation log ─────────────────────────────────────────────────── */
/* This app ships its own .tl-dot, so the kit's rail-and-bullet decoration is turned off rather
   than drawn on top of it (two dots per entry, one of them floating outside the card). */
.timeline{list-style:none;padding:0;margin:0;border-left:0}
.timeline li::before{display:none}
.timeline li{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line2)}
.timeline li:last-child{border-bottom:none}
.timeline .tl-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);margin-top:5px;flex-shrink:0}
.timeline .tl-body{flex:1;min-width:0}
.timeline .tl-action{font-weight:600;font-size:.9rem}
.timeline .tl-at{font-size:.78rem;color:var(--sub)}

/* ── deadline badges (kept: the digest and detail screens drive these) ─── */
.deadline-badge{display:inline-flex;align-items:center;gap:6px;border-radius:8px;padding:5px 12px;font-size:.85rem;font-weight:600;white-space:nowrap}
.deadline-badge.ok{background:var(--okbg);color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 30%,transparent)}
.deadline-badge.warn{background:var(--warnbg);color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 35%,transparent)}
.deadline-badge.danger{background:var(--badbg);color:var(--bad);border:1px solid color-mix(in srgb,var(--bad) 35%,transparent)}

.topbar .t .sub{max-width:78ch}

/* ── phone (app layer loads after the kit) ─────────────────────────────── */
@media(max-width:700px){
  .reg-row .advance{opacity:1;justify-content:flex-start}
  /* The table scrolls sideways on a phone (kit rule); letting the subject wrap instead makes
     every row four lines tall for no gain. Keep one line and let the scroll do its job. */
  .reg-row .subj{max-width:26ch}
  .topbar .t h1{white-space:normal!important;max-width:100%!important}
}

@media print{
  /* The register print-out is the regulator's evidence pack — paper is always light, so reset the
     tokens or a dark-theme user prints pale grey ink on white. */
  html[data-theme="dark"]{
    --ink:#0f172a; --sub:#5b6470; --faint:#7b8794; --line:#e5e7eb; --line2:#eef0f4; --bg:#fff; --card:#fff;
    --field-bg:#fff; --hover-bg:#fff; --chip:#eef1f6;
    --accent:#2563eb; --accent-dark:#1d4ed8; --accent-soft:#e6efff;
    --ok:#15803d; --okbg:#dcfce7; --warn:#b45309; --warnbg:#fef3c7; --bad:#b91c1c; --badbg:#fee2e2;
    --info:#1d4ed8; --infobg:#e8efff;
  }
  .reg-row .advance{display:none}
}

/* v3.1 — the complainant's own opt-ins on the public form. Deliberately plain: a checkbox that
   asks permission should look like a checkbox, not like a promotion. */
.pub .optin{display:flex;gap:9px;align-items:flex-start;margin:0 0 16px;font-size:.9rem;color:var(--sub);
  padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--chip)}
.pub .optin input{width:auto;flex:0 0 auto;margin-top:2px}
.pub .optin .sub{display:block;color:var(--faint);font-size:.82rem;margin-top:2px}
.pub .files{margin:0 0 16px}
.pub .files .hint{display:block;color:var(--faint);font-size:.82rem;margin-top:4px}
/* 3.2.0 leadership report: label / value lists */
.meta-list{list-style:none;margin:0;padding:0}
.meta-list li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line)}
.meta-list li:last-child{border-bottom:0}
.meta-list .k{color:var(--sub)}