/* Ontario CourtBuddy — Occurrence Chronicle styles.
   All classes are prefixed cb-chr- to avoid collisions with app.css.
   Theme-aware: uses the same CSS variables (--accent, --danger, etc.) as
   the rest of the app. Screen-reader-first: every visual has a text
   equivalent in the markup. */

/* visually hidden but available to screen readers */
.cb-chr-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}

/* severity heat badges: 1 green -> 5 red, with text label for SR */
.cb-chr-badge{display:inline-grid;place-items:center;min-width:28px;height:28px;
  padding:0 6px;border-radius:999px;font-weight:800;font-size:13px;color:#fff;vertical-align:middle}
.cb-chr-sev1{background:#2e7d32}
.cb-chr-sev2{background:#7cb342}
.cb-chr-sev3{background:#c9a227;color:#1a1a1a}
.cb-chr-sev4{background:#e8710a}
.cb-chr-sev5{background:#c81e2b}

/* toolbar second row + filters */
.cb-chr-toolbar2{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;margin-top:4px}
.cb-chr-toolbar2 label{margin:0}
.cb-chr-filters{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:14px 0 0}
.cb-chr-filters legend{padding:0 8px}
.cb-chr-filters .calcgrid label{margin:8px 0}
.cb-chr-checkrow{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:8px}
.cb-chr-checkrow .check{border:0;padding:6px 0;margin:0}

/* incident cards */
.cb-chr-cardhead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.cb-chr-nar{margin:10px 0;line-height:1.55}
.cb-chr-meta{margin:6px 0}
.cb-chr-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* detail modal rows */
.cb-chr-detail{display:grid;gap:0;margin:10px 0}
.cb-chr-drow{display:grid;grid-template-columns:130px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.cb-chr-drow dt{font-weight:700;color:var(--text-soft);font-size:13px}
.cb-chr-drow dd{margin:0;line-height:1.5}

/* editor form */
.cb-chr-form{max-height:62vh;overflow-y:auto;padding-right:4px}
.cb-chr-fieldset{border:1px solid var(--line);border-radius:12px;padding:12px;margin:16px 0}
.cb-chr-fieldset legend{padding:0 8px;font-weight:700;font-size:14px}
.cb-chr-row{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin:8px 0;align-items:center}
.cb-chr-row.cbchr_wit{grid-template-columns:1fr 1fr 1fr auto}
.cb-chr-row.cbchr_ev{grid-template-columns:1.2fr 1fr 1fr auto}
.cb-chr-row.cbchr_fu{grid-template-columns:1.4fr 1fr auto auto}
.cb-chr-row.cbchr_cf{grid-template-columns:1fr 1fr auto}
.cb-chr-row button{padding:8px 12px}
.cb-chr-row input,.cb-chr-row select{margin-top:0}
.cb-chr-addrow{display:flex;gap:8px;margin:10px 0}
.cb-chr-addrow input{margin-top:0;flex:1}
.cb-chr-chips{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 10px}
.cb-chr-chips button{padding:6px 12px;font-size:12px;border-radius:999px}
.cb-chr-modal{max-width:640px;width:100%}
.cb-chr-copybox{background:var(--card2);border:1px solid var(--line);border-radius:10px;
  padding:12px;max-height:220px;overflow-y:auto;font-size:13px;line-height:1.6;margin:10px 0}

/* timeline */
.cb-chr-zooms{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.cb-chr-tlwrap{position:relative;overflow-x:auto;border:1px solid var(--line);
  border-radius:12px;background:var(--panel);padding:8px;max-width:100%}
.cb-chr-svg{display:block}
.cb-chr-lane{stroke:var(--line2);stroke-width:1;stroke-dasharray:4 4}
.cb-chr-lanelabel{fill:var(--muted);font-size:12px;font-weight:700}
.cb-chr-tick{stroke:var(--line2);stroke-width:1}
.cb-chr-ticklabel{fill:var(--muted);font-size:10px}
.cb-chr-dot{cursor:pointer}
.cb-chr-dot circle{stroke:#fff;stroke-width:2}
.cb-chr-dot:hover circle,.cb-chr-dot:focus circle{stroke:var(--accent);stroke-width:3}
.cb-chr-dot:focus{outline:2px solid var(--accent);outline-offset:2px}
.cb-chr-density{margin:12px 0 4px}
.cb-chr-densitybar{fill:var(--card2);stroke:var(--line)}
.cb-chr-popover{position:absolute;z-index:20;background:var(--panel);border:2px solid var(--accent);
  border-radius:12px;padding:14px;width:230px;box-shadow:var(--shadow)}
.cb-chr-popclose{position:absolute;top:6px;right:6px;padding:4px 10px}

/* escalation notice */
.cb-chr-escalation{margin:0 0 14px}

/* print panel */
.cb-chr-singlerow{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;margin-top:10px}

/* ---------------- print outputs (via #printArea) ---------------- */
.cb-chr-print{font:12px/1.6 system-ui,sans-serif;color:#000;max-width:100%}
/* Brand mark: exactly once, at the top of the document flow = page 1 only.
   It cannot repeat on later pages because it exists only once in the DOM.
   (Browsers expose no JS API for true per-page headers; Chrome does not
   support CSS running headers, so top-of-flow placement is the honest way.) */
.cb-chr-printmark{font-size:10px;color:#666;margin:0 0 2px}
.cb-chr-stamp{font-size:10px;color:#666;margin:0 0 8px}
.cb-chr-caption{margin:10px 0}
.cb-chr-para{margin:0 0 10px;text-align:justify}
.cb-chr-sig{margin-top:26px}
.cb-chr-sig p{margin:22px 0 0}
.cb-chr-disclaimer{margin-top:18px;border:1px solid #999;padding:8px;font-size:11px}

/* ---------------- narrow screens: vertical timeline ---------------- */
@media(max-width:480px){
  .cb-chr-drow{grid-template-columns:1fr}
  .cb-chr-drow dt{margin-bottom:2px}
  .cb-chr-row.cbchr_wit,.cb-chr-row.cbchr_ev,.cb-chr-row.cbchr_fu,.cb-chr-row.cbchr_cf{grid-template-columns:1fr}
  .cb-chr-toolbar2{flex-direction:column;align-items:stretch}
  .cb-chr-toolbar2 label{min-width:0}
  .cb-chr-form{max-height:56vh}
}

/* ---------------- print: hide chrome, show only #printArea ---------------- */
@media print{
  .cb-chr-modalback{display:none!important}
  .cb-chr-tlwrap,.cb-chr-density,.cb-chr-zooms{display:none!important}
  #printArea .cb-chr-printmark{font-size:9px}
  #printArea .cb-chr-stamp{font-size:9px}
  #printArea .cb-chr-para{font-size:12px}
}