/* Agency Doc — prototype styles */
:root{
  --red:#b3261e; --red-dark:#8c1c17; --ink:#1c2530; --slate:#5a6b7b;
  --line:#e2e6ea; --bg:#f4f6f8; --panel:#ffffff; --accent:#0b5cad;
  --ok:#1f7a4d; --warn:#a9730a; --ins-bg:#d8f2e0; --ins-fg:#0f6b3a;
  --del-bg:#fbdcda; --del-fg:#9a1c14; --shadow:0 1px 3px rgba(20,30,40,.08),0 4px 12px rgba(20,30,40,.06);
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);font-size:14px;line-height:1.5}
h1,h2,h3,h4{margin:.2em 0 .5em;line-height:1.25}
a{color:var(--accent);text-decoration:none}
code{background:#eef1f4;padding:1px 5px;border-radius:4px;font-size:.9em}
.muted{color:var(--slate)}
.btn{border:1px solid var(--line);background:#fff;padding:8px 14px;border-radius:7px;cursor:pointer;font-size:14px;font-weight:600}
.btn:hover{background:#f0f2f5}
.btn-primary{background:var(--red);border-color:var(--red);color:#fff}
.btn-primary:hover{background:var(--red-dark)}
.btn-ghost{background:transparent}
.btn-danger{color:var(--del-fg);border-color:#f0c4bf}
.btn-danger:hover{background:#fbe9e8}
.btn-block{width:100%}

/* ---------- login ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1c2530,#33424f)}
.login-card{background:#fff;padding:32px;border-radius:14px;width:380px;box-shadow:var(--shadow)}
.brand-lg{font-size:28px;font-weight:800;letter-spacing:-.5px;color:var(--ink)}
.brand-mark{color:var(--red)}
.tagline{color:var(--slate);margin-top:2px;margin-bottom:20px}
.login-card label{display:block;font-size:12px;font-weight:700;color:var(--slate);text-transform:uppercase;letter-spacing:.03em;margin-top:12px}
.login-card input,.login-card select{width:100%;padding:10px;margin-top:4px;border:1px solid var(--line);border-radius:8px;font-size:14px}
#lg-go{margin-top:20px}
.login-note{font-size:11px;color:var(--slate);margin-top:14px;line-height:1.4}
.login-msg{font-size:12.5px;color:var(--red-dark);margin:8px 0 0;min-height:0;font-weight:600}

/* The Public Safety Training & Development maker's mark. It sits once, quietly,
   at the foot of the sign-in card — the department's OWN logo is the one that
   belongs on the top bar and on exported documents, so PST never appears there.
   The image is a data: URI on purpose: the app has to run offline from file://
   and /assets is behind the site gate, so a separate image request could fail. */
/* ACCESSIBILITY — this used to carry opacity:.7, which faded the caption to an
   effective #8c97a3 on white: 2.97:1, well under the 4.5:1 minimum (WCAG 1.4.3).
   Opacity is the trap here — the base colour looked fine on its own, and the
   contrast checker measures what is actually RENDERED. So the fade is gone and the
   muted look now comes from an explicitly chosen colour that measures 5.25:1. */
.pst-mark{display:flex;align-items:center;gap:9px;margin-top:18px;padding-top:14px;
          border-top:1px solid var(--line)}
.pst-mark img{width:46px;height:auto;display:block;flex:none}
.pst-mark span{font-size:10.5px;line-height:1.35;color:#656d75}

/* ---------- top bar ---------- */
.topbar{display:flex;align-items:center;gap:20px;background:var(--ink);color:#fff;padding:10px 18px}
.brand{font-size:20px;font-weight:800;letter-spacing:-.4px}
.agency-info{display:flex;flex-direction:column;line-height:1.2}
.agency-info .muted{color:#a9b6c2;font-size:12px}
.topbar-controls{margin-left:auto;display:flex;align-items:center;gap:14px}
.state-picker{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#a9b6c2;display:flex;flex-direction:column;gap:3px}
.state-picker select{padding:6px 8px;border-radius:6px;border:none;font-size:13px;min-width:190px}
.fl-badge{background:#e6f0e9;color:#1f7a4d;font-size:11px;font-weight:800;padding:3px 9px;border-radius:20px;letter-spacing:.02em}
.topbar .btn-ghost{color:#fff;border-color:#4a5866}

/* ---------- layout ---------- */
.layout{display:flex;height:calc(100vh - 52px)}
.sidebar{width:340px;background:var(--panel);border-right:1px solid var(--line);overflow-y:auto;padding:12px}
.sidebar #search{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;margin-bottom:10px;font-size:13px}
.content{flex:1;overflow-y:auto;padding:26px 34px}

/* ---------- nav ---------- */
.nav-home{display:block;padding:8px 10px;border-radius:7px;font-weight:600;color:var(--ink)}
.nav-home:hover,.nav-home.active{background:#eef4fb;color:var(--accent)}
.nav-group-title{font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--slate);text-transform:uppercase;margin:16px 4px 6px;display:flex;align-items:center;gap:8px}
.fmt-badge{background:#eef1f4;color:var(--slate);border-radius:20px;padding:1px 8px;font-size:10px;letter-spacing:0}
details{margin-bottom:2px}
summary{cursor:pointer;padding:6px 8px;font-weight:700;font-size:12.5px;color:var(--ink);border-radius:6px;list-style-position:inside}
summary:hover{background:#f2f4f6}
.nav-count{float:right;background:#eef1f4;color:var(--slate);border-radius:20px;padding:0 7px;font-size:10px;font-weight:800;margin-left:6px}
.nav-item{display:flex;align-items:center;gap:7px;padding:5px 8px 5px 20px;border-radius:6px;color:var(--ink);font-size:13px}
.nav-item:hover{background:#f2f4f6}
.nav-item.active{background:#fbe9e8;color:var(--red-dark)}
.nav-id{font-variant-numeric:tabular-nums;font-weight:700;font-size:12px;color:var(--slate);min-width:60px}
.nav-item.active .nav-id{color:var(--red-dark)}
.nav-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.type-tag{font-size:9.5px;font-weight:800;padding:2px 5px;border-radius:4px;letter-spacing:.03em}
.type-tag.SOP{background:#e3edf9;color:#0b5cad}
.type-tag.SOG{background:#eae6f7;color:#5b3aa8}
.type-tag.POL{background:#fbe4dd;color:#a3341f}
.dot-update{width:8px;height:8px;border-radius:50%;background:var(--warn);display:inline-block;box-shadow:0 0 0 3px rgba(169,115,10,.18)}

/* ---------- dashboard ---------- */
.dash-actions{display:flex;gap:8px;margin:4px 0 14px;flex-wrap:wrap}
.dash-sub{margin:10px 0 0}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:14px 0 8px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:var(--shadow)}
.tile-num{font-size:30px;font-weight:800;color:var(--ink)}
.tile-lbl{font-size:12px;color:var(--slate);margin-top:2px}
.tile-alert{border-color:var(--warn);background:#fff9ef}
.tile-alert .tile-num{color:var(--warn)}
.callout{background:#eef4fb;border:1px solid #cfe0f2;border-radius:10px;padding:12px 14px;margin:12px 0}
.callout-info{background:#fff9ef;border-color:#eddfbf}
.stat-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;box-shadow:var(--shadow);margin-bottom:20px}
.stat-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ver{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px}
.ver.ok{background:#e0f2e7;color:var(--ok)}
.ver.todo{background:#fdeede;color:var(--warn)}
.osha-line{background:#f4f6f8;border-radius:8px;padding:8px 10px}
.stat-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:8px 0}
.stat-cols ul{margin:4px 0;padding-left:18px}
.stat-cols li{margin:3px 0}
.mandate-tbl{width:100%;border-collapse:collapse;margin-top:6px}
.mandate-tbl th,.mandate-tbl td{text-align:left;padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
.mandate-tbl th{font-size:11px;text-transform:uppercase;color:var(--slate);letter-spacing:.04em}
.note{color:var(--warn);font-size:12px}
.chip{display:inline-block;background:#eef4fb;border:1px solid #cfe0f2;border-radius:20px;padding:1px 9px;font-size:12px;font-weight:700;margin:1px 0}
.disclaimer{background:#fdeee9;border:1px solid #f2c9bf;border-radius:8px;padding:9px 12px;font-size:12px;color:#8c1c17;margin-top:12px}
.legend{display:flex;flex-direction:column;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:var(--shadow)}

/* ---------- document ---------- */
.doc{max-width:900px}
.doc-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid var(--line);padding-bottom:12px}
.doc-id{font-size:13px;font-weight:800;color:var(--brand-color,var(--red));letter-spacing:.05em}
.doc-head h1{font-family:var(--doc-heading-font,inherit)}
.doc-meta{display:flex;align-items:center;gap:10px;margin-top:4px}
.fmt-note{font-size:12px;color:var(--slate)}
.status-pill{background:#e0f2e7;color:var(--ok);font-weight:700;font-size:12px;padding:5px 12px;border-radius:20px}
.doc-basis{margin:12px 0}
.doc-metabar{display:flex;gap:20px;flex-wrap:wrap;font-size:12.5px;color:var(--slate);background:#f4f6f8;border-radius:8px;padding:8px 12px;margin:8px 0}
.ed-metarow{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.ed-metarow .ed-lbl{flex:1;min-width:150px;margin-top:0}
.ed-metarow input{width:100%;margin-top:5px;padding:8px;border:1px solid var(--line);border-radius:8px;font:inherit}
.basis-label{font-size:12px;font-weight:700;color:var(--slate);text-transform:uppercase}
.basis-chip{display:inline-block;background:#eef1f4;border-radius:6px;padding:2px 8px;font-size:12px;margin:2px 3px}
.overlay{background:#fff9ef;border:1px solid #eddfbf;border-radius:10px;padding:10px 14px;margin:10px 0}
.overlay ul{margin:6px 0 0;padding-left:18px}
.doc-body{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px;box-shadow:var(--shadow);margin-top:8px;font-family:var(--doc-body-font,inherit);font-size:var(--doc-size,14px);line-height:var(--doc-line,1.65)}

/* ---------- diff panel ---------- */
.diff-panel{margin-top:22px;border:1px solid #eddfbf;border-radius:12px;padding:18px;background:#fffdf8}
.rationale{background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:12px}
.diff-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.diff-col{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.diff-col-head{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:8px 12px;color:#fff}
.diff-col-head.current{background:var(--slate)}
.diff-col-head.proposed{background:var(--accent)}
.diff-col-head.inline{background:var(--ink);border-radius:10px 10px 0 0;margin-top:16px;display:flex;justify-content:space-between;align-items:center}
.legend-inline{font-weight:600}
.legend-inline ins,.legend-inline del{padding:1px 6px;border-radius:4px}
.diff-text{padding:14px;line-height:1.65;white-space:normal}
.diff-inline{border:1px solid var(--line);border-top:none;border-radius:0 0 10px 10px;background:#fff}
ins{background:var(--ins-bg);color:var(--ins-fg);text-decoration:none;padding:0 2px;border-radius:3px}
del{background:var(--del-bg);color:var(--del-fg);padding:0 2px;border-radius:3px}
.diff-actions{margin-top:16px;display:flex;gap:10px}
.pend-banner{margin-top:14px}

/* ---------- archive ---------- */
.archive{margin-top:28px;border-top:1px solid var(--line);padding-top:16px}
.arch-list{list-style:none;padding:0;margin:8px 0}
.arch-list li{padding:6px 0;border-bottom:1px dashed var(--line)}
.link{background:none;border:none;color:var(--accent);cursor:pointer;font-weight:600;font-size:13px;padding:0}
.arch-doc{margin-top:12px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.arch-doc-head{background:#f4f6f8;padding:8px 12px;font-size:12px;font-weight:700;color:var(--slate)}

/* ---------- login divider ---------- */
.login-divider{margin:20px 0 4px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--slate);text-align:center;position:relative}
.login-divider::before,.login-divider::after{content:"";position:absolute;top:50%;width:28%;height:1px;background:var(--line)}
.login-divider::before{left:0}.login-divider::after{right:0}

/* ---------- small button ---------- */
.btn-sm{padding:5px 10px;font-size:12px}

/* ---------- structured document sections ---------- */
.summary-note{font-size:12px;color:var(--warn);font-style:italic;margin:0 0 8px}
.sec{margin-bottom:18px}
.sec-h{font-size:var(--doc-h-size,13px);text-transform:var(--doc-h-transform,uppercase);letter-spacing:.05em;font-weight:var(--doc-h-weight,700);text-decoration:var(--doc-h-decoration,none);color:var(--doc-h-color,var(--brand-color,var(--red)));border-bottom:1px solid var(--line);padding-bottom:4px;margin:0 0 8px;font-family:var(--doc-heading-font,inherit)}
.sec p{margin:0}
.sec-list{margin:4px 0;padding-left:22px}
.sec-list li{margin:6px 0;line-height:1.6}
.rev-tbl{width:100%;border-collapse:collapse;font-size:13px}
.rev-tbl th,.rev-tbl td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
.rev-tbl th{font-size:11px;text-transform:uppercase;color:var(--slate)}

/* ---------- acknowledgement bar ---------- */
.ackbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;background:#eef4fb;border:1px solid #cfe0f2;border-radius:10px;padding:12px 16px;font-size:13px}
.ackbar.acked{background:#e0f2e7;border-color:#bfe3cd;color:var(--ok);font-weight:600;justify-content:flex-start}

@media(max-width:1000px){.tiles{grid-template-columns:repeat(2,1fr)}.diff-cols,.stat-cols{grid-template-columns:1fr}.sidebar{width:280px}}

/* ---------- in-app editor ---------- */
/* Same amber-on-cream pair as .imp-tag.upd — fixed here too so the failure isn't
   latent on screens the audit didn't happen to open. See WCAG note above. */
.edited-pill{background:#fdeede;color:#865b08;font-weight:700;font-size:12px;padding:5px 10px;border-radius:20px}
.editor{max-width:900px}
.ed-head{border-bottom:2px solid var(--line);padding-bottom:10px;margin-bottom:8px}
.ed-note{background:#eef4fb;border:1px solid #cfe0f2;border-radius:8px;padding:10px 12px;font-size:13px}
.ed-lbl{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--slate);margin-top:14px}
.ed-lbl textarea{width:100%;margin-top:5px;padding:10px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:14px;line-height:1.55;resize:vertical;background:#fff}
.ed-actions{margin-top:18px;display:flex;gap:10px}

/* ---------- shared-editing status line ---------- */
.sync-status{font-size:11px;line-height:1.3;min-height:0;color:#cfe3cf}
.sync-status.ok{color:#b7e4c7}
.sync-status.warn{color:#ffd9a0}

/* ---------- editor find & replace ---------- */
.ed-fr{margin-top:14px;border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:#fbfcfd}
.ed-fr-title{font-size:13px;font-weight:700;margin-bottom:8px}
.ed-fr-title .muted{font-weight:400}
.ed-fr-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.ed-fr-row .ed-lbl{margin-top:0;flex:1;min-width:180px}
.ed-fr-row .ed-lbl input{width:100%;margin-top:5px;padding:8px;border:1px solid var(--line);border-radius:8px;font:inherit}
.ed-fr-opts{margin-top:10px;align-items:center}
.ed-chk{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--slate)}
.ed-chk input{margin:0}
.ed-fr-msg{font-size:13px;font-weight:600;color:var(--slate)}

/* ---------- logo ---------- */
.agency-info{flex-direction:row !important;align-items:center;gap:10px}
.agency-text{display:flex;flex-direction:column;line-height:1.2}
.topbar-logo{max-height:36px;max-width:120px;background:#fff;border-radius:5px;padding:2px 4px}

/* ---------- import ---------- */
.import-view{max-width:820px}
.import-lead{color:var(--slate);max-width:640px}
.dropzone{border:2px dashed #c3ccd4;border-radius:14px;padding:26px;text-align:center;background:#fafbfc;transition:.15s}
.dropzone.drag{border-color:var(--red);background:#fdf3f2}
.dz-icon{font-size:30px}
.paste-box{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:13px;line-height:1.5;resize:vertical}
.import-actions{margin-top:12px}
.import-note{margin-top:18px;font-size:12px;color:var(--slate);background:#f4f6f8;border-radius:8px;padding:10px 12px}
.analysis-card{margin-top:16px;border:1px solid #cfe0f2;background:#f4f9ff;border-radius:12px;padding:16px;max-width:560px}
.an-lbl{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--slate);margin-top:12px}
.an-lbl select,.an-lbl input{width:100%;margin-top:5px;padding:9px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:14px;background:#fff}
.an-check{display:flex;align-items:center;gap:8px;margin:14px 0;font-size:13px}
.nav-imported{font-size:9px;font-weight:800;color:#5b3aa8;background:#eae6f7;padding:1px 4px;border-radius:4px}

/* ---------- branding & style ---------- */
.branding{max-width:900px}
.brand-grid{display:grid;grid-template-columns:280px 1fr;gap:22px;align-items:start}
.brand-controls .an-lbl{margin-top:14px}
.brand-controls input[type=color]{width:100%;height:38px;padding:2px;border:1px solid var(--line);border-radius:8px;margin-top:5px;background:#fff}
.brand-logo-row{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
.brand-logo-prev{max-height:34px;max-width:110px;border:1px solid var(--line);border-radius:5px;padding:2px;background:#fff}
.brand-preview-wrap{position:sticky;top:0}
.brand-preview{max-height:none}
.brand-hstyle{display:flex;gap:14px;flex-wrap:wrap;font-weight:400;font-size:13px;margin-top:6px}
.brand-hstyle label,.brand-hcolor label{display:flex;align-items:center;gap:5px;font-weight:400;font-size:13px;margin:0}
.brand-hcolor{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px}
.brand-hcolor input[type=color]{width:52px;height:34px;margin-top:0}
.brand-approve{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.new-kind{display:flex;flex-direction:column;gap:8px;margin-top:12px;max-width:560px}
.new-kind label{display:flex;align-items:center;gap:8px;font-size:14px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;cursor:pointer;background:#fff}
.new-place{display:grid;grid-template-columns:1fr 170px 1fr;gap:14px;align-items:start}
.new-preview{margin-top:14px;max-height:540px;overflow:auto;border:1px solid var(--line)}
@media(max-width:820px){.new-place{grid-template-columns:1fr}}
/* Test Generator */
.job-aibox{border:1px solid #cfe0f2;background:#f4f9ff;border-radius:12px;padding:14px 16px;margin-top:14px;max-width:720px}
.job-aibox .an-lbl{margin-top:8px}
.exam-srcbox{border:1px solid var(--line);border-radius:8px;padding:8px 10px;max-height:260px;overflow:auto;background:#fff;max-width:720px}
.exam-src{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:13px;cursor:pointer}
.exam-src .nav-id{min-width:70px;font-weight:700;color:var(--slate)}
.exq{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:10px 0;background:#fff}
.exq-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.exq textarea,.exq input{width:100%;padding:8px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:13.5px;margin:3px 0}
.exq-row{display:flex;gap:12px;flex-wrap:wrap}
.exam-choices{margin:4px 0 4px 4px}
.exam-choices li.correct{font-weight:700;color:var(--ins-fg)}
.exam-ref{font-size:12.5px;color:var(--slate);margin:4px 0 0}
@media print{
  body.exam-mode #app{display:none !important}
  body.exam-mode #exam-print{display:block !important}
  #exam-print{display:none;color:#111;font-family:var(--doc-body-font,inherit);padding:0 1in}
  #exam-print .ex-print-head{display:flex;align-items:center;gap:12px;border-bottom:2px solid #333;padding-bottom:8px;margin-bottom:14px}
  #exam-print .ex-brand{font-weight:800;font-size:16px}
  #exam-print .ex-title{font-size:13px;color:#333}
  #exam-print .ex-q{margin:0 0 14px;page-break-inside:avoid}
  #exam-print .ex-choices{margin:4px 0 0 6px}
  #exam-print .ex-choices li{margin:3px 0}
  #exam-print .ex-choices li.ex-correct{font-weight:700}
  #exam-print .ex-ref{font-size:11px;color:#555;margin:4px 0 0}
  #exam-print .ex-tbl{width:100%;border-collapse:collapse;font-size:11.5px}
  #exam-print .ex-tbl th,#exam-print .ex-tbl td{border:1px solid #bbb;padding:5px 7px;text-align:left;vertical-align:top}
}
@media(max-width:820px){.brand-grid{grid-template-columns:1fr}}

/* ---------- import summary ---------- */
.imp-actions{display:flex;gap:10px;margin:6px 0 14px}
.imp-tbl{width:100%;border-collapse:collapse;font-size:13px}
.imp-tbl th,.imp-tbl td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.imp-tbl th{font-size:11px;text-transform:uppercase;color:var(--slate);letter-spacing:.04em}
.imp-tag{display:inline-block;font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:5px}
.imp-tag.new{background:#e3edf9;color:#0b5cad}
/* WCAG 1.4.3: #a9730a on #fdeede is 3.59:1, under the 4.5:1 minimum.
   #865b08 measures 5.25:1 on the same background. The amber reads the same. */
.imp-tag.upd{background:#fdeede;color:#865b08}
.imp-tag.warn{background:#fbdcda;color:#9a1c14}
/* Role dropdown in Manage Users and the owner console's People & roles panel.
   Sized to sit inside a table cell without stretching the row. */
.ro-sel{font:inherit;font-size:12.5px;padding:4px 6px;border:1px solid var(--line);border-radius:7px;background:#fff;max-width:230px}
.ro-sel:disabled{opacity:.6;cursor:progress}
/* AI Usage — share-of-total bar. A number tells you 41%; the bar tells you at a
   glance which row is the outlier, which is the whole point of the screen. */
.use-bar{background:#eef1f4;border-radius:5px;height:9px;min-width:70px;overflow:hidden}
.use-bar span{display:block;height:100%;background:var(--brand-color,var(--red));border-radius:5px}

/* The way out of "Build from my docs" — highlighted so it is never hunted for. */
.nav-restore{background:#fdeede;color:#865b08;font-weight:700;border-radius:6px}
.nav-restore:hover{background:#fbe3cc}

/* ---------- Section headers editor ---------- */
.struct-in{width:100%;padding:6px 9px;border:1px solid var(--line);border-radius:6px;font:inherit;color:var(--ink);background:var(--panel)}
.struct-in:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}

/* ---------- Agency Documents (CBA & reference) ---------- */
.agency-docs{max-width:860px}
.ad-uploader{display:flex;flex-direction:column;gap:12px;margin:16px 0 26px}
.ad-group{margin-bottom:22px}
.ad-group h3{border-bottom:2px solid var(--line);padding-bottom:6px;color:var(--ink)}
.ad-row{display:flex;align-items:center;gap:12px;padding:9px 10px;border:1px solid var(--line);border-radius:9px;margin:7px 0;background:var(--panel)}
.ad-icon{font-size:20px}
.ad-name{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ad-meta{font-size:12px;color:var(--slate);white-space:nowrap}
.ad-read{font-size:11.5px;font-weight:700;white-space:nowrap;padding:2px 8px;border-radius:20px;border:1px solid var(--line);color:var(--slate);background:#f4f6f8}
.ad-read.ok{color:var(--ins-fg);background:var(--ins-bg);border-color:#bfe3cd}
.ad-read.no{color:var(--del-fg);background:var(--del-bg);border-color:#f0cdc9}

/* ---------- Contract Desk (grievance review + contract questions) ---------- */
.cba-desk{margin-top:34px;padding-top:24px;border-top:3px solid var(--line)}
.cba-desk h2{margin:0 0 4px}
.cba-tabs{display:flex;gap:8px;margin:14px 0}
.cba-desk textarea{width:100%;font:inherit;font-size:14px;padding:10px;border:1px solid var(--line);border-radius:9px;resize:vertical}
.cba-result{margin-top:20px;border:1px solid var(--line);border-radius:12px;padding:18px;background:var(--panel)}
.cba-review h4{margin:18px 0 6px;font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--slate)}
.cba-det{font-weight:800;font-size:16px;padding:12px 14px;border-radius:10px;border:2px solid;margin-bottom:12px}
.cba-det.is-yes{background:#fff6e6;border-color:#e0ab3d;color:#7a4e05}
.cba-det.is-no{background:var(--ins-bg);border-color:#8fcaa6;color:var(--ins-fg)}
.cba-det.is-unclear{background:#f4f6f8;border-color:#c3ccd4;color:var(--slate)}
.cba-det.is-info{background:#eef4fb;border-color:#a9c6e6;color:#1c4a7a}
.cba-conf{font-weight:600;font-size:12px;opacity:.75;margin-left:6px}
.cba-headline{margin:8px 0 6px;font-size:17px}
.cba-summary{white-space:normal;line-height:1.6}
.cba-steps{margin:0;padding-left:20px;line-height:1.6}
.cba-steps li{margin:6px 0}
.cba-mark{display:inline-block;width:1.2em;font-weight:800}
.cba-mark.yes{color:var(--ins-fg)}
.cba-mark.no{color:var(--del-fg)}
.cba-cite{margin:10px 0;padding:10px 14px;border-left:4px solid #c3ccd4;background:#f9fafb;border-radius:0 8px 8px 0}
.cba-cite.ok{border-left-color:#3f9c69}
.cba-cite.bad{border-left-color:#c0392b;background:var(--del-bg)}
.cba-cite-head{font-size:13px;margin-bottom:4px}
.cba-vtag{font-size:11px;font-weight:700;padding:1px 7px;border-radius:20px;margin-left:6px;background:#e9edf1;color:var(--slate)}
.cba-vtag.ok{background:var(--ins-bg);color:var(--ins-fg)}
.cba-vtag.bad{background:#fff;color:var(--del-fg);border:1px solid #e2a9a3}
.cba-quote{margin:4px 0;font-style:italic;line-height:1.55}
.cba-why{margin:4px 0 0;font-size:13px;color:var(--slate)}
.cba-gaps li{color:#7a4e05}
.cba-foot{margin-top:16px;padding-top:10px;border-top:1px solid var(--line);font-size:12px;color:var(--slate)}
.cba-saved{margin-top:28px}
.cba-orig{margin:8px 0 14px}
.cba-orig pre{white-space:pre-wrap;font:inherit;font-size:13px;background:#f9fafb;border:1px solid var(--line);border-radius:8px;padding:10px;max-height:280px;overflow:auto}
/* Printing a determination should produce the determination — not the file
   cabinet it was standing in. Set by the Contract Desk's print button only. */
@media print{
  body.cba-print .agency-docs > :not(.cba-desk){display:none !important}
  body.cba-print .cba-desk > h2,
  body.cba-print .cba-desk > p,
  body.cba-print .cba-desk > .cba-tabs,
  body.cba-print .cba-desk > .dropzone,
  body.cba-print .cba-desk > label,
  body.cba-print .cba-desk > .callout,
  body.cba-print .cba-saved > h3,
  body.cba-print .cba-saved > table,
  body.cba-print .import-actions{display:none !important}
  body.cba-print .cba-result{border:none;padding:0;background:#fff}
  .cba-cite{break-inside:avoid}

  /* ONE-INCH MARGINS, LIKE A WORD DOCUMENT.
     `@page` further down sets `margin:1in 0` — an inch top and bottom but ZERO
     left and right — and every other print surface makes up the difference with
     its own `padding:0 1in` (.doc, #manual-print, #exam-print). This path never
     did, so a printed determination or discipline matter sat hard against the
     edge of the paper with no side margin at all.
     Also drop the screen-only divider: .cba-desk carries a 3px border-top and a
     34px margin to separate it from the page above it, which on paper is just a
     stray rule across the top of a formal document. */
  body.cba-print .cba-desk{margin-top:0;padding:0 1in;border-top:none}
}

/* ---------- Discipline Desk ----------
   Deliberately reuses the Contract Desk's shell (.cba-desk, .cba-result,
   .cba-cite) so the two grounded-answer screens look like one another and the
   print rules already written for one cover the other. Only what is genuinely
   different gets its own rule. */
.disc-desk-page .ad-uploader{margin-bottom:12px}
.disc-desk textarea{min-height:130px}
.disc-h{margin:16px 0 5px;font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--ink)}
.disc-facts{background:#f5f8fa;border-left:3px solid var(--line);padding:8px 12px;margin:10px 0;border-radius:0 8px 8px 0}
.disc-list{margin:0;padding-left:20px}
.disc-list li{margin:5px 0;line-height:1.5}
/* The steps are the answer to the question that was asked, so they read as a
   checklist rather than another bulleted paragraph. */
.disc-steps{list-style:decimal;padding-left:22px}
.disc-steps li{margin:7px 0;font-weight:600}
.disc-caution li{color:var(--del-fg)}
.disc-gap li{color:var(--slate);font-style:italic}
.disc-saved{margin-top:26px}

/* ---------- signature page (adoption block at the end of a document) ----------
   The handwriting face is a stack of web-safe scripts, NOT a downloaded font.
   Nothing here may depend on a file the printer has to fetch: an export is
   often produced on a machine that is offline or behind an agency proxy, and a
   signature that silently falls back to Arial looks like it was typed. */
.doc-sig{margin:34px 0 6px;padding:18px 20px 16px;border:1px solid var(--line);border-radius:12px;background:#fcfdfe;max-width:520px;break-inside:avoid;page-break-inside:avoid}
.sig-title{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);margin-bottom:10px}
/* Revised after adoption: the signature is withheld and this stands in its place,
   on the page AND in the printed booklet. Amber, not red — nothing is broken, an
   approval is simply out of date. */
.doc-sig-stale{background:#fffbeb;border-color:#f0d089}
.doc-sig-stale .sig-title{color:#8a5a00}
.sig-stale-note{font-size:13px;line-height:1.5;color:#6b4a12}
.sig-mark{min-height:54px;display:flex;align-items:flex-end;padding-bottom:2px}
.sig-typed{font-family:"Segoe Script","Bradley Hand","Lucida Handwriting","Apple Chancery",cursive;font-size:30px;line-height:1.1;color:#10233a}
.sig-drawn{max-height:64px;max-width:100%;width:auto;object-fit:contain;display:block}
.sig-rule{border-bottom:1px solid #56606b;margin:0 0 7px}
.sig-name{font-weight:700;font-size:14.5px}
.sig-rank{font-size:13px;color:var(--slate)}
.sig-agency{font-size:12.5px;color:var(--slate)}
.sig-dates{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:13px;padding-top:11px;border-top:1px dashed var(--line)}
.sig-date{font-size:12px}
.sig-date-l{display:block;font-weight:700;color:var(--slate);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase}
.sig-date-v{display:block;margin-top:1px}

/* the signature editor inside the document editor */
.ed-sig{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:16px 0 4px;background:#fafbfc}
.ed-sig-modes{display:flex;gap:8px;margin:8px 0 12px}
.ed-sig-pane{margin-bottom:6px}
.sig-canvas{border:1px dashed #c3ccd4;border-radius:10px;background:#fff;width:100%;max-width:600px;height:150px;touch-action:none;cursor:crosshair;display:block}

/* ---------- AI assistant ---------- */
.assistant{position:fixed;right:22px;bottom:22px;z-index:60}
.asst-toggle{width:56px;height:56px;border-radius:50%;border:none;background:var(--red);color:#fff;font-size:26px;cursor:pointer;box-shadow:0 4px 16px rgba(20,30,40,.28);transition:transform .1s}
.asst-toggle:hover{transform:scale(1.06)}
.asst-panel{position:absolute;right:0;bottom:70px;width:350px;max-width:88vw;height:70vh;max-height:520px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 40px rgba(20,30,40,.25);display:none;flex-direction:column;overflow:hidden}
.assistant.open .asst-panel{display:flex}
.asst-head{background:var(--ink);color:#fff;padding:12px 16px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.asst-head button{background:none;border:none;color:#fff;font-size:22px;cursor:pointer;line-height:1;padding:0}
.asst-log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:9px;background:#f7f9fb}
.asst-msg{padding:9px 12px;border-radius:14px;max-width:86%;line-height:1.45;font-size:13.5px;word-wrap:break-word}
.asst-msg.user{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.asst-msg.bot{align-self:flex-start;background:#fff;border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:4px}
.asst-form{display:flex;gap:7px;padding:11px;border-top:1px solid var(--line);background:#fff}
.asst-form input{flex:1;padding:10px;border:1px solid var(--line);border-radius:9px;font:inherit;font-size:14px}
.asst-form button{background:var(--red);color:#fff;border:none;border-radius:9px;padding:0 16px;cursor:pointer;font-weight:700}
.asst-form button:hover{background:var(--red-dark)}
@media print{.assistant{display:none !important}}

/* ---------- full-manual booklet (screen-hidden; shown only when printing) ---------- */
#manual-print{display:none}
#exam-print{display:none}
.print-only{display:none}

/* ---------- print / save as PDF ---------- */
@media print{
  .topbar,.sidebar,.doc-actions,.ackbar,.diff-panel,.pend-banner,.archive,.no-print{display:none !important}
  .layout{display:block;height:auto}
  .content{overflow:visible;padding:0}
  body{background:#fff}
  .doc{max-width:100%;padding:0 1in}
  .doc-body{box-shadow:none;border:none;padding:0}
  a{color:var(--ink);text-decoration:none}
  .print-only{display:block}
  .doc-print-head{display:flex;align-items:center;gap:10px;font-size:11px;color:#666;border-bottom:1px solid #ccc;padding-bottom:6px;margin-bottom:10px}
  .print-logo{max-height:46px;max-width:150px;width:auto;height:auto;object-fit:contain}
  /* The signature closes the document, so it must never be split across two
     pages — half a signature block on a filed SOP looks like a printing fault.
     The editor's own copy of the box is screen-only and never prints. */
  .ed-sig{display:none !important}
  .doc-sig{background:#fff;break-inside:avoid;page-break-inside:avoid;margin-top:30px}

  /* The Basis chips are a working note, not part of the adopted document — an
     imported policy's basis reads "Imported document — pending review", which
     must never appear on a printed manual. Kept on screen, dropped on paper.
     This covers printing ONE document from its own page; the full booklet drops
     it in buildManualHtml() instead, because there the class is shared with the
     Effective/Next review/Approved by line that has to keep printing. */
  .doc-basis{display:none !important}

  /* full manual booklet */
  body.manual-mode #app{display:none !important}
  body.manual-mode #manual-print{display:block !important}
  @page{margin:1in 0}
  #manual-print .m-runhead{position:fixed;top:0;left:1in;right:1in;text-align:center;font-size:9px;color:#999;letter-spacing:.02em}
  #manual-print .m-runfoot{position:fixed;bottom:0;left:1in;right:1in;text-align:center;font-size:9px;color:#999;border-top:1px solid #ddd;padding-top:3px}
  #manual-print .m-cover .m-runhead,#manual-print .m-cover .m-runfoot{display:none}
  #manual-print{color:#111;font-size:12px;line-height:1.55;font-family:var(--doc-body-font,inherit);padding:0 1in}
  #manual-print h1,#manual-print h2{font-family:var(--doc-heading-font,inherit)}
  #manual-print .m-cover{min-height:88vh;display:flex;flex-direction:column;justify-content:center;text-align:center;page-break-after:always}
  #manual-print .m-logo{max-height:130px;max-width:300px;width:auto;height:auto;object-fit:contain;margin:0 auto 14px;display:block}
  #manual-print .m-brand{font-size:24px;font-weight:800;color:var(--brand-color,var(--red))}
  #manual-print .m-cover h1{font-size:30px;margin:14px 0}
  #manual-print .m-agency{font-size:20px;font-weight:700}
  #manual-print .m-sub{margin-top:16px;color:#333;line-height:1.8}
  #manual-print .m-disc{margin:34px auto 0;font-size:10.5px;color:#666;max-width:520px}
  #manual-print .m-toc{page-break-after:always}
  #manual-print .m-toc-group{font-weight:800;margin:16px 0 6px;border-bottom:1px solid #ccc;padding-bottom:3px}
  #manual-print .m-toc-row{display:flex;gap:12px;padding:2px 0;font-size:11.5px}
  #manual-print .m-toc-id{min-width:78px;font-weight:700}
  #manual-print .m-doc{page-break-before:always;padding-top:4px}
  #manual-print .m-doc-head{display:flex;gap:10px;font-size:11px;font-weight:800;color:var(--brand-color,var(--red));letter-spacing:.03em}
  #manual-print .m-basis{font-size:10.5px;color:#555;margin:4px 0 10px}
  #manual-print h2{font-size:17px;margin:2px 0 4px}
  #manual-print .sec-h{color:var(--doc-h-color,#111);border-color:#ccc}
  #manual-print .sec-list li{margin:4px 0}
  #manual-print .doc-sig{max-width:440px;margin:26px 0 0;padding:14px 16px 12px;font-size:11.5px}
  #manual-print .sig-typed{font-size:26px}
  #manual-print .sig-drawn{max-height:56px}
}

/* ===== TOKEN GAUGE — AI fuel remaining ==================================
   The dial reads like a fuel gauge: needle on F when the tank is full, falling
   toward E as AI is used. Colours carry meaning, so each state also carries
   words ("20% left", "Out of AI fuel") — colour alone is unreadable to anyone
   with a colour-vision deficiency, and these screens get printed in mono. */
.callout-warn{background:#fdf0ef;border-color:#f0cdc9}

.meter-card{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-left:5px solid #12915b;
  border-radius:10px;padding:16px 18px;margin:16px 0}
.meter-card.meter-low{border-left-color:#c2740a}
.meter-card.meter-empty{border-left-color:#b91c1c}
.meter-card.meter-unl{border-left-color:#2563eb}
.meter-dial{flex:0 0 190px;text-align:center}
.meter-body{flex:1 1 320px;min-width:280px}
.meter-body h3{margin:2px 0 6px;font-size:16px}
.meter-body p{margin:4px 0}
.gauge{width:100%;max-width:190px;height:auto;display:block;margin:0 auto}
.gauge-ef{font-size:11px;fill:#6b7280;font-weight:700}
.meter-pct{font-size:22px;font-weight:800;margin-top:-6px;letter-spacing:-.02em}
.meter-ok   .meter-pct{color:#12915b}
.meter-low  .meter-pct{color:#c2740a}
.meter-empty .meter-pct{color:#b91c1c}
.meter-unl  .meter-pct{color:#2563eb}

/* Row-sized gauge for the owner console table */
.mini-meter{display:flex;align-items:center;gap:7px;min-width:132px}
.mini-track{flex:1 1 auto;height:8px;background:#e5e7eb;border-radius:99px;overflow:hidden;min-width:56px}
.mini-fill{height:100%;border-radius:99px;background:#12915b;transition:width .3s ease}
.mini-low   .mini-fill{background:#c2740a}
.mini-empty .mini-fill{background:#b91c1c}
.mini-lbl{font-size:11.5px;font-weight:700;white-space:nowrap;color:#374151}
.mini-empty .mini-lbl{color:#b91c1c}
.mini-low   .mini-lbl{color:#c2740a}

.oa-limit{white-space:nowrap}
.oa-limit input{width:96px;padding:4px 6px;font-size:12.5px;
  border:1px solid var(--line);border-radius:6px;margin-right:5px}

/* ===== ALLOWANCE: TOKENS AND WHAT THEY COST =============================
   Two boxes side by side holding the same number in two currencies, with the
   forecast underneath. The boxes are labelled because "1000000" and "12.40"
   in bare inputs are indistinguishable at a glance, and setting the wrong one
   by a factor of a million is not a mistake you notice until the invoice. */
.oa-boxes{display:flex;gap:8px;margin-bottom:5px}
.oa-box{display:flex;flex-direction:column;gap:2px;font-size:10px;
  text-transform:uppercase;letter-spacing:.04em;color:var(--slate);font-weight:700}
.oa-box input{margin-right:0;font-weight:400;text-transform:none;letter-spacing:0}
.oa-forecast{font-size:11.5px;line-height:1.35;color:var(--slate);
  margin-bottom:6px;max-width:230px;white-space:normal}
.oa-forecast strong{color:var(--ink);font-size:12.5px}
/* WCAG 1.4.3: #6b7280 sits on the #f4f6f8 panel at 4.46:1 — a near miss under the
   4.5:1 minimum. #606773 measures 5.26:1 there (5.7:1 on plain white). */
.oa-fc-basis{display:block;color:#606773;font-size:10.5px}
/* Unlimited is not an error, but it IS the one setting that can run up a bill
   with nothing to stop it — it should catch the eye on the way past. */
.oa-fc-warn{color:#c2740a;font-weight:600}

/* ===== LOCKED JURISDICTION / AGENCY TYPE ================================
   Shown instead of the pickers once an agency is established. Reads as a
   stated fact, not a disabled control — a greyed-out dropdown invites
   "why can't I change this?", a plain label with a lock does not. */
.state-locked{display:flex;flex-direction:column;gap:1px;font-size:12px;line-height:1.25;
  padding:2px 10px 2px 0;cursor:help}
/* ACCESSIBILITY — WCAG 1.4.3 (contrast). These labels sit on the dark top bar
   (#1c2530). At #6b7280 they measured 3.2:1 against it; the minimum for normal
   text is 4.5:1. #9197a1 measures 5.27:1, chosen with margin so antialiasing
   cannot push it back under. Do not darken this again without re-measuring. */
.state-locked .sl-lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:#9197a1}
.state-locked .sl-val{font-weight:700;white-space:nowrap}

/* ===== AI-DRAFTING NOTICE (first run) ===================================
   Rendered in place of the app, not over it — see renderApp(). */
.disc-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:28px 20px;background:#f6f7f9}
.disc-card{background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);max-width:680px;width:100%;padding:30px 32px}
.disc-card h1{font-size:24px;margin:0 0 6px}
.disc-lead{color:#374151;margin:0 0 18px;font-size:15px;line-height:1.55}
.disc-list{margin:0 0 18px;padding-left:20px}
.disc-list li{margin:0 0 11px;line-height:1.6}
.disc-note{background:#fff9ef;border:1px solid #eddfbf;border-radius:8px;
  padding:11px 13px;font-size:13px;color:#4b5563;margin:0 0 20px}
/* The consent tick. Given its own box and a little weight so it reads as a
   deliberate act rather than fine print someone scrolled past. */
.disc-check{display:flex;gap:10px;align-items:flex-start;margin:0 0 16px;
  padding:13px 14px;border:1px solid var(--line);border-radius:9px;background:#f8fafc;
  font-size:13.5px;line-height:1.5;color:#374151;cursor:pointer}
.disc-check input{margin:2px 0 0;width:17px;height:17px;flex:none;cursor:pointer}
.disc-check:hover{border-color:#c8d2dc;background:#f3f6f9}
.disc-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.disc-actions .btn[disabled]{opacity:.5;cursor:not-allowed}
.disc-rec{font-size:12px;color:#6b7280;margin:14px 0 0}
@media (max-width:520px){ .disc-card{padding:22px 18px} .disc-card h1{font-size:20px} }

/* ==========================================================================
   ACCESSIBILITY — WCAG 2.1 AA / Section 508          added 2026-08-12
   --------------------------------------------------------------------------
   Every colour here was MEASURED with a relative-luminance calculator against
   the actual surface it sits on, not eyeballed; the ratio is written beside it.

   This block sits at the END of the file ON PURPOSE. Several of these fixes
   have to beat an existing rule of equal specificity (.btn, .btn-danger,
   .login-card input), and for equal specificity the last declaration wins.
   Keeping them in one commented place is easier to review than scattering
   them through 600 lines — but it does mean ORDER MATTERS: do not move this
   block, and add to the bottom of it rather than the middle.
   ========================================================================== */

:root{
  /* Ring colour. The ONLY value tested that clears 3:1 on both surfaces the
     app actually uses: 4.13:1 on the white page, 3.99:1 on the navy top bar,
     3.81:1 on the sidebar panel. */
  --focus:#2b7fd4;
  /* Boundary colour for INTERACTIVE controls (WCAG 1.4.11 needs 3:1).
     Deliberately separate from --line (#e2e6ea), which stays as-is for
     decorative dividers and panel edges — those are exempt, and darkening
     them everywhere would make the whole UI look heavy for no conformance
     gain. #878b91 measures 3.42:1 on white, 3.16:1 on the page background,
     3.27:1 on soft cards and 3.05:1 on the button hover fill. */
  --field-line:#878b91;
}

/* --- 2.4.7 Focus Visible (AA) --------------------------------------------
   The app previously defined NO focus indicator of its own — one rule, for
   one input class — so every control fell back to the browser default. On the
   dark navy top bar that default computes to rgb(16,16,16) against #16202a =
   1.15:1, which is no indicator at all.

   outline-offset is what makes one ring colour work everywhere: the ring is
   drawn OUTSIDE the control, on the page background, so a control with a
   strong fill of its own still gets a contrasting ring. Against the red
   primary button's own fill the blue would measure only 1.70:1; offset two
   pixels it sits on white at 4.13:1.

   :focus-visible rather than :focus, so clicking a button with the mouse does
   not leave a ring behind it. */
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@supports not selector(:focus-visible){
  a:focus,button:focus,input:focus,select:focus,textarea:focus,summary:focus,[tabindex]:focus{
    outline:3px solid var(--focus);outline-offset:2px}
}

/* --- 2.4.1 Bypass Blocks (A) ---------------------------------------------
   The sidebar carries the whole policy manual — around 300 links — and it
   comes before <main> in the DOM. Without this a keyboard user tabs through
   every policy in the department to reach the page content. Hidden until
   focused, which is the standard pattern. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:#fff;color:var(--accent);
           padding:11px 18px;font-weight:700;border:2px solid var(--focus);border-radius:0 0 8px 0;
           text-decoration:underline}
.skip-link:focus{left:0}

/* Visually hidden but available to assistive technology. Used for live-region
   announcements and for names on controls whose visible label is an icon.
   NOT display:none — that would remove it from the accessibility tree, which
   is the whole point of it existing. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
         clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* --- 2.3.3 / 2.2.2 respect a reduced-motion preference ------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
                       transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* --- 1.4.11 Non-text Contrast (AA): control boundaries ------------------- */
/* Catch-all by element type, so a control added later inherits the fix. */
input:not([type=checkbox]):not([type=radio]),select,textarea{border-color:var(--field-line)}
/* The class-scoped rules earlier in this file out-specify the catch-all, so
   they are named explicitly. Each measured 1.12-1.25:1 before this. */
.login-card input,.login-card select,.sidebar #search,.ed-metarow input,.ed-lbl textarea,
.ed-fr-row .ed-lbl input,.an-lbl select,.an-lbl input,.brand-controls input[type=color],
.exq textarea,.exq input,.cba-desk textarea,.asst-form input,.disc-check,
.btn{border-color:var(--field-line)}
/* Re-assert the two buttons whose border is part of their identity — the .btn
   rule above would otherwise grey them out, because it comes later. */
.btn-primary{border-color:var(--red)}
.btn-danger{border-color:#bf7a70}            /* was #f0c4bf = 1.57:1; now 3.37:1 on white */
.topbar .btn-ghost{border-color:#5d6b79}     /* was #4a5866 = 2.26:1 on navy; now 3.02:1 */

/* --- 1.4.10 Reflow (AA): usable at 320px with no two-dimensional scrolling
   The app was a fixed two-column flex layout — a 340px sidebar next to the
   content — with no breakpoint below 1000px, so at 320px the page measured
   807px wide and scrolled in both directions. Below 860px the columns stack:
   the sidebar becomes a bounded, scrollable band above the content rather
   than a column beside it. The skip link above is what keeps that usable. */
@media (max-width:860px){
  .topbar{flex-wrap:wrap;gap:10px 16px;padding:10px 14px}
  .topbar-controls{margin-left:0;width:100%;flex-wrap:wrap;gap:8px}
  .state-picker{flex:1 1 140px}
  .state-picker select{min-width:0;width:100%}
  .layout{display:block;height:auto}
  .sidebar{width:auto;max-height:44vh;border-right:none;border-bottom:1px solid var(--line)}
  /* One-direction scrolling for genuinely wide content (data tables) is
     allowed by 1.4.10; two-dimensional scrolling of the PAGE is not. */
  .content{padding:18px 14px;overflow-x:auto}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .brand-grid,.new-place,.diff-cols,.stat-cols,.ed-metarow{grid-template-columns:1fr}
  .meter-body{flex:1 1 auto;min-width:0}
  .mini-meter{min-width:0}
  .dash-actions,.imp-actions,.disc-actions,.doc-actions{flex-wrap:wrap}
}
@media (max-width:520px){
  .tiles{grid-template-columns:1fr}
  .content{padding:14px 11px}
}

/* --- 1.4.11 (cont.): drop zones and the signature pad ---------------------
   These are controls whose entire boundary IS the dashed border — there is no
   fill and no label box. #c3ccd4 measured 1.57:1 on the drop zone's #fafbfc
   and 1.63:1 on the canvas's white. #828a94 measures 3.37:1 and 3.49:1. */
.dropzone{border-color:#828a94}
.sig-canvas{border-color:#828a94}

/* --- 1.4.1 Use of Colour (A): tracked changes ----------------------------
   <del> keeps the browser's default strikethrough, so a deletion is still a
   deletion with colour removed. <ins> explicitly set text-decoration:none,
   which left a green background as the ONLY signal — invisible to anyone who
   cannot distinguish it, and gone entirely on a monochrome printout of a diff.
   The underline is the conventional non-colour marker for an insertion. */
ins{text-decoration:underline}

/* --- 1.4.11 (cont.): meter and gauge tracks ------------------------------
   A progress track carries meaning only if you can see where the fill stops.
   #eef1f4 / #e5e7eb against white measured 1.13:1 and 1.24:1 — the track was
   effectively invisible, so the bar communicated nothing without colour
   perception. A 3:1 outline gives the track a definite extent. The numeric
   value is also now given in text next to every bar (see app.js). */
.use-bar,.mini-track{box-shadow:inset 0 0 0 1px #878b91}

/* --- 2.5.8 target size: the assistant close button ------------------------ */
.asst-head button{min-width:32px;min-height:32px;line-height:1;font-size:20px;
                  background:transparent;border:none;cursor:pointer;border-radius:6px}
.asst-head button:hover{background:#eef1f4}

/* Share column: the bar keeps its width, the number sits beside it, so the
   value no longer depends on judging bar length (1.1.1 / 1.4.1). */
.use-cell{display:flex;align-items:center;gap:8px}
.use-cell .use-bar{flex:1 1 auto}
.use-pct{font-variant-numeric:tabular-nums;font-size:12px;color:var(--slate);min-width:38px;text-align:right}

/* --- 2.2.1 session warning dialog ---------------------------------------
   A real modal: it dims the page, traps focus while open, and is dismissed
   with Escape. The backdrop is deliberately dark enough to read the card
   against on both the light page and the dark top bar. */
.sess-backdrop{position:fixed;inset:0;z-index:300;background:rgba(12,18,25,.55);
               display:flex;align-items:center;justify-content:center;padding:20px}
.sess-card{background:#fff;border-radius:14px;max-width:33em;width:100%;
           padding:24px 26px;box-shadow:0 18px 60px rgba(10,16,22,.4)}
.sess-card h2{margin:0 0 8px;font-size:20px}
.sess-card p{margin:0 0 18px;line-height:1.55}
.sess-actions{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:520px){ .sess-card{padding:20px 17px} .sess-actions .btn{flex:1 1 100%} }

/* Change-password dialog. Rides on .sess-backdrop / .sess-card (the session
   warning), so only the form rows need styling here. */
.pw-lbl{display:block;margin-top:12px;font-size:13.5px;font-weight:700;color:var(--ink)}
.pw-lbl input{display:block;width:100%;margin-top:5px;padding:9px 11px;font-size:15px;
  border:1px solid #c7ced6;border-radius:8px;background:#fff;color:var(--ink)}
.pw-lbl input:focus-visible{outline:3px solid var(--brand-color,#b3261e);outline-offset:1px}