@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

/* ---- design tokens ---- */
:root{
  --navy:#003A5D; --midnight:#122048; --copper:#C6671D; --copper-dark:#A85515;
  --gold:#D5A619; --steel:#7B95AF; --concrete:#808285; --slate:#4A5560; --ink:#231F20;
  --grey:#E4E7E9; --hairline:#EFF1F2; --hairline-soft:#F2F4F6;
  --cloud:#E0F1FB; --sky-border:#CEE9F9; --wash:#F2F8FC; --page-wash:#F7FAFC;
  --green:#00AA4F; --green-bg:#E9F6EE; --green-text:#0B6B36;
  --gold-bg:#F7EFD4; --gold-text:#8A6D00; --chip-grey-bg:#EEF1F3; --chip-grey-text:#5B6B7A;
  --dashed:#AFC2D2; --input-border:#D8DCE0; --focus-ring:rgba(198,103,29,.14);
  --ip-bg:#FBEEE3; --ip-text:#A34F0F; --ring:#9AAABB;
}

*{box-sizing:border-box;margin:0}
body{background:#fff}
.eff{font-family:'Montserrat',sans-serif;color:var(--navy);background:#fff;min-height:100vh}

/* ---- header ---- */
.hdr{background:var(--midnight);color:#fff}
.hdr-top{display:flex;align-items:center;justify-content:space-between;max-width:1080px;margin:0 auto;padding:18px 32px;gap:16px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px}
.logo-mark{height:28px;width:auto;display:block}
.logo-word{font-weight:800;letter-spacing:.14em;font-size:12.5px;text-transform:uppercase;color:#fff;line-height:1.1}
.hdr-rule{height:3px;background:var(--copper)}
.who{display:flex;align-items:center;gap:14px;font-size:12.5px;color:rgba(255,255,255,.75);text-align:right}
.who b{color:rgba(255,255,255,.75);font-weight:600}
.who .admin-tag{font-size:12px;color:rgba(255,255,255,.75)}
.hdr-signout{background:transparent;border:1px solid rgba(255,255,255,.3);border-radius:6px;padding:5px 12px;color:#fff;font-family:'Montserrat',sans-serif;font-weight:600;font-size:12.5px;cursor:pointer}
.hdr-signout:hover{background:rgba(255,255,255,.12)}

/* ---- text link buttons (row actions, admin) ---- */
.linkbtn{background:none;border:none;color:var(--navy);font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;text-decoration:none;padding:0}
.linkbtn:hover{color:var(--copper)}

.wrap{max-width:1080px;margin:0 auto;padding:36px 32px 72px}
.narrow{max-width:680px;margin:0 auto;padding:32px 24px 80px}
.narrow.wide{max-width:920px}
.login{max-width:480px}

/* ---- label / eyebrow style (replaces mono eyebrows) ---- */
.eyebrow{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);margin-bottom:6px}
h1{font-size:26px;font-weight:700;color:var(--navy)}
.sub{color:var(--steel);font-size:14px;margin-top:6px;line-height:1.5}
.proto{background:var(--cloud);border:1px solid #c4dff0;border-radius:8px;padding:12px 16px;font-size:13px;line-height:1.55;color:var(--navy)}
.proto a{color:var(--copper);font-weight:700}

/* ---- progress card ---- */
.progress-card{display:flex;align-items:center;gap:20px;border:1px solid var(--grey);border-radius:12px;padding:18px 22px;margin:26px 0 14px;flex-wrap:wrap}
.pnum{font-size:30px;font-weight:800;color:var(--copper);white-space:nowrap;font-variant-numeric:tabular-nums}
.pnum small{font-size:14px;color:var(--steel);font-weight:600}
.bar{flex:1;min-width:200px;height:8px;background:var(--grey);border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--copper);transition:width .4s ease}
.due{font-size:12px;color:var(--steel)}
.due b{color:var(--navy);display:block;font-size:13px}

/* ---- underline tabs ---- */
.tabs{display:flex;border-bottom:1px solid var(--grey);margin:20px 0 24px;flex-wrap:wrap}
.tab{background:none;border:none;border-bottom:2.5px solid transparent;padding:9px 2px;margin-right:28px;font-family:'Montserrat',sans-serif;font-weight:600;font-size:14px;color:var(--concrete);cursor:pointer}
.tab:hover{color:var(--midnight)}
.tab.on{font-weight:700;color:var(--midnight);border-bottom-color:var(--copper)}

/* ---- dashboard tiles ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.tile{text-align:left;border:1px solid var(--grey);border-radius:12px;padding:18px;background:#fff;cursor:pointer;font-family:inherit;transition:border-color .15s,box-shadow .15s;display:flex;flex-direction:column;gap:8px}
.tile:hover{border-color:var(--copper);box-shadow:0 2px 10px rgba(18,32,72,.05)}
/* One consistent gold focus-visible outline for every button and link (offset so it is not
   clipped). Form fields keep their copper ring (input/select/textarea :focus above). */
button:focus-visible,a:focus-visible,[role=button]:focus-visible,summary:focus-visible,
.tile:focus-visible,.btn:focus-visible,.linkbtn:focus-visible,.tab:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.tile-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.tnum{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;color:var(--steel);letter-spacing:.12em;text-transform:uppercase}
.ttitle{font-weight:700;font-size:15px;color:var(--navy)}
.tblurb{font-size:12.5px;color:var(--steel);line-height:1.45}
.b-future{cursor:default}

/* ---- status chips: one vocabulary everywhere ---- */
.chip-status{display:inline-flex;align-items:center;gap:6px;font-family:'Montserrat',sans-serif;font-weight:600;font-size:12px;border-radius:999px;padding:4px 11px;white-space:nowrap;line-height:1}
.chip-status .cdot{width:7px;height:7px;border-radius:50%;flex:none}
.chip-status.st-ns{color:var(--chip-grey-text);background:var(--chip-grey-bg)}
.chip-status.st-ns .cdot{background:transparent;border:1.5px solid var(--ring)}
.chip-status.st-ip{color:var(--ip-text);background:var(--ip-bg)}
.chip-status.st-ip .cdot{background:var(--copper)}
.chip-status.st-sub{color:var(--green-text);background:var(--green-bg)}
.chip-status.st-sub .cdot{background:var(--green)}
.chip-status.st-sched{color:var(--gold-text);background:var(--gold-bg)}
.chip-status.st-sched .cdot{background:var(--gold)}
.chip-status.st-closed{color:var(--chip-grey-text);background:var(--chip-grey-bg)}
.chip-status.st-closed .cdot{background:var(--ring)}
/* notification log: suppressed (neutral) + failed (red) */
.chip-status.st-supp{color:var(--chip-grey-text);background:var(--chip-grey-bg)}
.chip-status.st-supp .cdot{background:var(--steel)}
.chip-status.st-fail{color:#C0392B;background:#FBEAE8}
.chip-status.st-fail .cdot{background:#C0392B}

/* ---- form fields ---- */
.fld{margin-bottom:20px}
.fld.half{display:inline-block;width:calc(50% - 8px);vertical-align:top}
.fld.half+.fld.half{margin-left:16px}
label.lbl{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px;color:var(--navy)}
.req{color:var(--copper)}
.helper{font-size:12px;color:var(--steel);margin-top:5px;line-height:1.4}
/* Shared field design (44px / 8px radius). `.inp` is the reusable class for any admin/editor
   input, select, or textarea so they match the borrower form without relying on the element
   selector — add `.inp` to a control and it inherits this exactly. Compact table/grid inputs
   opt out via the more-specific `.grid-table input` rules below. */
input[type=text],input[type=email],input[type=number],input[type=date],input[type=search],
select,textarea,.inp{width:100%;padding:11px 13px;border:1px solid var(--input-border);border-radius:8px;font-family:'Montserrat',sans-serif;font-size:14px;color:var(--ink);background:#fff;min-height:44px}
textarea,textarea.inp{min-height:96px;resize:vertical}
input:focus,select:focus,textarea:focus,.inp:focus{outline:none;border-color:var(--copper);box-shadow:0 0 0 3px var(--focus-ring)}
.invalid input,.invalid select,.invalid textarea,.invalid .filebox,.invalid .inp{border-color:#C0392B}
.invalid label.lbl{color:#C0392B}

/* Native checkboxes: keep semantics, unify size/spacing/cursor/disabled + copper accent
   (covenant multiselects, schema editor, and the prominent Notifications-page toggles). */
input[type=checkbox]{width:16px;height:16px;flex:none;margin:0;cursor:pointer;accent-color:var(--copper)}
input[type=checkbox]:disabled{cursor:default;opacity:.6}

/* ---- radio chips ---- */
.radios{display:flex;gap:10px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--input-border);border-radius:8px;padding:10px 18px;font-size:14px;cursor:pointer;background:#fff;font-family:inherit;color:var(--slate);font-weight:500}
.chip .chip-check{display:none}
.chip.on{background:var(--cloud);border:1.5px solid var(--navy);color:var(--navy);font-weight:700}
.chip.on .chip-check{display:block}
.chip:disabled{cursor:default;opacity:.7}
.checks label{display:flex;align-items:center;gap:8px;font-size:14px;padding:5px 0;cursor:pointer}

/* ---- file upload ---- */
.filebox{display:block;border:1.5px dashed var(--dashed);border-radius:8px;padding:14px;text-align:center;font-size:13px;color:var(--steel);cursor:pointer;background:#fff}
.filebox.has{border-style:solid;border-color:var(--green-text);color:var(--green-text);background:var(--green-bg);font-weight:600}
.filebox.dis{cursor:default;opacity:.7}

/* ---- repeat / grid rows ---- */
.rep{border:1px solid var(--grey);border-radius:8px;padding:16px;margin-bottom:12px;position:relative;background:#FBFCFC}
.rep-n{font-size:10px;color:var(--steel);margin-bottom:10px;letter-spacing:.1em}

/* ---- buttons ---- */
/* .btn works for both <button> and <a> (Export CSV is an anchor): inline-flex + no underline +
   centered so anchors don't keep default link underline/color, and disabled controls never
   react to hover (each variant's hover is guarded with :not(:disabled)). */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;border-radius:8px;padding:12px 22px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:14px;line-height:1.2;cursor:pointer;text-decoration:none;text-align:center}
.btn:hover{text-decoration:none}
.btn:disabled,.btn[aria-disabled=true]{opacity:.6;cursor:default;pointer-events:none}
.btn-p{background:var(--copper);color:#fff;padding:12px 24px}
.btn-p:not(:disabled):hover{background:var(--copper-dark)}
.btn-ghost{background:#fff;border:1px solid var(--input-border);color:var(--navy);font-weight:600;font-size:13.5px}
.btn-ghost:not(:disabled):hover{background:var(--wash)}
.btn-add{background:var(--cloud);color:var(--navy);font-weight:600;font-size:13px;padding:9px 16px}
.btn-add:disabled{opacity:.6;cursor:default}
/* normal-flow school-remove action (replaces the absolutely-positioned .rep-x reuse) */
.school-x{border:none;background:none;color:var(--steel);font-family:'Montserrat',sans-serif;font-weight:600;font-size:12.5px;cursor:pointer;padding:4px 8px;border-radius:6px}
.school-x:not(:disabled):hover{color:#C0392B}

/* ---- section save bar ---- */
.savebar{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.96);backdrop-filter:blur(4px);border-bottom:1px solid var(--grey);padding:12px 0;margin-bottom:26px}
.back{background:none;border:none;color:var(--navy);font-family:inherit;font-weight:600;font-size:13.5px;cursor:pointer;padding:6px 8px 6px 0}
.save-chip{font-size:12.5px;display:flex;align-items:center;gap:7px;color:var(--steel)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green)}
.dot.saving{background:var(--gold);animation:pulse 1s infinite}
.dot.err{background:#C0392B}
@keyframes pulse{50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.dot.saving{animation:none}.bar i{transition:none}}

/* ---- schema heading field ---- */
.heading-row{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--copper);border-bottom:1px solid var(--grey);padding-bottom:6px;margin:26px 0 16px}

/* Display-only body prose (schema field type `static`) — a Template's own operative
   wording. Reads as the instrument's text, NOT as portal guidance, so it deliberately
   avoids the .infonote callout treatment used by section notes. */
.static-block{margin:0 0 26px;padding-bottom:20px;border-bottom:1px solid var(--grey)}
.static-title{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--navy);margin-bottom:12px}
.static-p{font-size:13px;line-height:1.65;color:var(--navy);margin:0 0 11px}
.static-p:last-child{margin-bottom:0}


/* Certificate preview affordance — a section that produces a Certificate (ADR-0012). */
.cert-preview{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:26px;padding:14px 18px;background:var(--cloud);border-radius:10px}
.cert-preview-note{font-size:13px;color:var(--navy);line-height:1.5}


/* Type-to-sign ceremony (schema field type `sign`, ADR-0012 §5). One bordered block, because
   the ceremony is one indivisible act — name, title and affirmation are not three questions. */
.sign-block{margin:26px 0 8px;padding:20px 22px;border:1px solid var(--grey);border-radius:12px;background:#fff}
.sign-block.invalid{border-color:#C0392B}
.sign-statement{font-size:13px;line-height:1.65;color:var(--navy);margin:10px 0 18px;
  padding-left:14px;border-left:3px solid var(--copper)}
.sign-grid{display:grid;grid-template-columns:1fr;gap:6px;max-width:460px}
.lbl2{font-size:12.5px;font-weight:600;color:var(--navy);margin-top:8px}
.sign-affirm{display:flex;gap:10px;align-items:flex-start;margin:18px 0 4px;font-size:13px;
  line-height:1.55;color:var(--navy);cursor:pointer}
.sign-affirm input{margin-top:3px;flex:0 0 auto}
.sign-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--grey)}
.sign-done .sign-name{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:20px;color:var(--navy)}

/* ---- notes / errors / toast ---- */
.note{background:var(--cloud);border-radius:10px;padding:12px 16px;font-size:13px;margin-bottom:22px;line-height:1.5;color:var(--navy)}
.errband{background:#FBEAE8;border:1px solid #e7b6b0;color:#C0392B;border-radius:10px;padding:12px 16px;font-size:13.5px;margin-bottom:20px;font-weight:600}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--midnight);color:#fff;border-radius:8px;padding:14px 22px;font-size:13.5px;box-shadow:0 6px 24px rgba(0,0,0,.25);z-index:20}
.foot{display:flex;justify-content:space-between;align-items:center;margin-top:48px;padding-top:20px;border-top:1px solid var(--grey);flex-wrap:wrap;gap:12px}
@media(max-width:560px){.fld.half{width:100%}.fld.half+.fld.half{margin-left:0}.wrap,.narrow{padding-left:18px;padding-right:18px}}

/* ---- grids, rail, review, history ---- */
.gridwrap{overflow-x:auto;border:1px solid var(--grey);border-radius:8px}
.grid-table{border-collapse:collapse;width:100%;font-size:13.5px}
.grid-table th{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);text-align:left;padding:9px 10px;border-bottom:2px solid var(--grey);background:var(--page-wash)}
.grid-table td{border-bottom:1px solid var(--hairline);padding:3px 6px}
.grid-table td.rowlab,.grid-table th.rowlab{padding:8px 12px;font-weight:600;color:var(--navy);white-space:nowrap;font-size:13px;width:1%}
.fieldgrid td.rowlab{min-width:170px}
.grid-table input,.grid-table select{border:1px solid transparent;border-radius:4px;min-height:34px;padding:6px 8px;font-size:13.5px;width:100%;min-width:90px;background:transparent}
.grid-table td.numcol input{text-align:right;font-variant-numeric:tabular-nums}
.grid-table input:hover,.grid-table select:hover{border-color:var(--input-border);background:#fff}
.grid-table input:focus,.grid-table select:focus{border-color:var(--copper);background:#fff;box-shadow:0 0 0 2px var(--focus-ring)}
.grid-table .cellbad input{border-color:#C0392B;background:#FBEAE8}
.grphead td{font-family:'Montserrat',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--copper);background:var(--page-wash);padding:9px 12px;border-bottom:1px solid var(--grey)}
.totrow td{background:var(--wash);font-weight:600;color:var(--navy);padding:8px 10px;border-top:1px solid var(--grey);font-variant-numeric:tabular-nums}
.totrow td.totoff{color:#C0392B}
.sumrow td{background:var(--cloud)}
.delcell{width:30px;text-align:center}
.fielderr{font-size:12px;color:#C0392B;font-weight:600;margin-top:5px}
.section-shell{position:relative}
.rail{position:fixed;left:max(12px,calc(50% - 540px - 64px));top:140px;display:flex;flex-direction:column;gap:6px;z-index:4}
.rail-dot{width:34px;height:30px;border-radius:6px;border:1px solid var(--grey);background:#fff;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;color:var(--steel);cursor:pointer;padding:0}
.rail-dot.in_progress{border-color:var(--copper);color:var(--copper);background:var(--ip-bg)}
.rail-dot.submitted{border-color:var(--green-text);color:var(--green-text);background:var(--green-bg)}
.rail-dot.cur{outline:2px solid var(--navy);color:var(--navy);font-weight:700}
@media(max-width:1240px){.rail{display:none}}
.overlay{position:fixed;inset:0;background:rgba(18,32,72,.45);display:flex;align-items:center;justify-content:center;z-index:30;padding:20px}
.overlay-card{background:#fff;border-radius:12px;max-width:640px;width:100%;max-height:85vh;overflow:auto;padding:28px 30px;box-shadow:0 18px 60px rgba(0,0,0,.3)}
.overlay-card h2{margin-bottom:14px}
.review-list{border-top:1px solid var(--grey);margin-top:8px}
.review-row{display:flex;gap:16px;padding:9px 0;border-bottom:1px solid var(--hairline);font-size:13.5px}
.review-q{flex:1;color:var(--steel);min-width:0}
.review-a{flex:1;font-weight:600;color:var(--navy);overflow-wrap:anywhere}
.review-a.blank{color:#C0392B;font-weight:600}
.ro-chip{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);border:1px solid var(--input-border);border-radius:14px;padding:5px 12px}
.dashmeta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:0 0 26px}
.pastline{font-size:13px;color:var(--steel)}
.pastlink{background:none;border:1px solid var(--grey);border-radius:14px;padding:5px 12px;font-size:11px;font-weight:600;color:var(--navy);cursor:pointer;margin-left:4px}
.pastlink:hover{border-color:var(--copper);color:var(--copper)}

/* ---- table layout fixes + carry-forward ---- */
.grid-table td+td,.grid-table th+th{border-left:1px solid var(--hairline-soft)}
.reptable td.rowlab,.reptable th.rowlab{min-width:0;width:64px;padding:6px 8px;white-space:nowrap}
.reptable .rownum{font-size:10.5px;color:var(--steel);letter-spacing:.08em;font-weight:700}
.reptable td.numcol input{min-width:64px}
.reptable td input{min-width:120px}
.reptable td.numcol{width:9%}
.cfbar{margin-bottom:14px;display:flex;align-items:center;flex-wrap:wrap;gap:4px}

/* ---- admin dashboard (full reskin deferred to Phase 3) ---- */
.admin-table{width:100%;border-collapse:collapse;font-size:13.5px}
.admin-table th{text-align:left;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--steel);padding:6px 8px;border-bottom:2px solid #E8EDF2;white-space:nowrap}
.admin-table td{padding:6px 8px;border-bottom:1px solid var(--hairline);vertical-align:middle}
.admin-table tbody tr:hover{background:#F7F9FB}
.admin-dot{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:middle}
.admin-dot.submitted{background:var(--green)}
.admin-dot.in_progress{background:var(--copper)}
.admin-dot.not_started{background:transparent;border:1.5px solid var(--ring)}
.admin-card{background:#fff;border:1px solid #E0E7EE;border-radius:8px;padding:16px;overflow-x:auto}
.admin-config{background:var(--page-wash);border:1px solid #E0E7EE;border-radius:8px;padding:12px 16px;display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.qlabel{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);margin-bottom:4px}

/* ============================================================
   Phase 2 — borrower structure
   ============================================================ */

/* header: the "OneDen" wordmark on the sign-in screen */
.hdr-portal{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.65)}

/* ---- sign-in (1a) ---- */
.signin-page{background:var(--wash);min-height:calc(100vh - 60px);padding:56px 20px 80px}
.signin-card{max-width:420px;margin:0 auto;background:#fff;border-radius:12px;padding:34px;box-shadow:0 4px 18px rgba(18,32,72,.07)}
.signin-card h1{font-size:22px;font-weight:800;color:var(--midnight)}
.signin-card .sub{color:var(--concrete);margin-top:8px}
.signin-divider{height:1px;background:var(--grey);margin:22px 0 16px}
.signin-help{font-size:13px;color:var(--concrete);line-height:1.6}
.signin-help a{color:var(--navy);font-weight:600;text-decoration:none}
.signin-foot{max-width:420px;margin:18px auto 0;text-align:center;font-size:12px;color:var(--steel)}
.btn-block{width:100%;text-align:center}

/* ---- hero / continue card (1b) ---- */
.hero{position:relative;display:flex;gap:24px;flex-wrap:wrap;justify-content:space-between;background:#fff;border:1px solid var(--grey);border-radius:12px;padding:24px 26px;box-shadow:0 2px 10px rgba(18,32,72,.05);overflow:hidden;margin-bottom:14px}
.hero::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--copper)}
.hero-main{flex:1;min-width:280px}
.hero-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);margin-bottom:8px}
.hero-h{font-size:18px;font-weight:800;color:var(--midnight);margin-bottom:6px}
.hero-line{font-size:13.5px;color:var(--slate);line-height:1.5}
.hero-line b{color:var(--midnight);font-weight:700}
.hero .bar{max-width:420px;margin-top:14px}
.hero-right{display:flex;flex-direction:column;gap:8px;align-items:stretch;min-width:210px}

/* ---- row / list cards (1b, 2a) ---- */
.rowcard{display:flex;align-items:center;gap:16px;justify-content:space-between;flex-wrap:wrap;border:1px solid var(--grey);border-radius:12px;padding:16px 20px;background:#fff;margin-bottom:14px}
.rowcard.dashed{border:1px dashed var(--dashed)}
.rowcard-main{flex:1;min-width:200px}
.rowcard-title{font-size:13.5px;font-weight:600;color:var(--navy)}
.rowcard-meta{font-size:12.5px;color:var(--steel);margin-top:3px}
.rowcard-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.listcard{border:1px solid var(--grey);border-radius:12px;background:#fff;overflow:hidden}
.listrow{display:flex;align-items:center;gap:12px;padding:12px 18px;border:0;border-top:1px solid var(--hairline);width:100%;text-align:left;background:none;font-family:inherit;cursor:pointer}
.listrow:first-child{border-top:none}
.listrow:hover{background:#F7F9FB}
.listrow-title{flex:1;font-size:13.5px;font-weight:600;color:var(--navy)}
.listrow-meta{font-size:12.5px;color:var(--steel)}
.listrow-link{font-size:12.5px;font-weight:600;color:var(--navy)}
.dash-group{margin-bottom:30px}
.dash-group>.eyebrow{margin-bottom:12px}
.icon-check-g{color:var(--green)}
.icon-file-g{color:var(--green-text)}

/* ---- report hub (2a) ---- */
.hub-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.hub-title{font-size:17px;font-weight:800;color:var(--midnight)}
.hub-due{font-size:13.5px;font-weight:700;color:var(--midnight);margin-top:2px}
.hub-progress{font-size:12.5px;color:var(--steel);margin-top:8px}
.hub-bar{max-width:100%;margin-top:8px}
.checklist{border:1px solid var(--grey);border-radius:12px;background:#fff;overflow:hidden;margin-top:16px}
.check-row{display:flex;align-items:center;gap:14px;padding:12px 20px;border-top:1px solid var(--hairline);width:100%;text-align:left;background:none;border-left:0;border-right:0;border-bottom:0;border-top-style:solid;font-family:inherit;cursor:pointer}
.check-row:first-child{border-top:none}
.check-row:hover{background:#F7F9FB}
.check-row.cur{background:var(--wash)}
.check-icon{width:16px;display:flex;justify-content:center;flex:none}
.check-num{font-size:11.5px;font-weight:700;color:var(--steel);width:18px;flex:none;font-variant-numeric:tabular-nums}
.check-title{flex:1;font-size:13.5px;font-weight:600;color:var(--navy)}
.check-right{display:flex;align-items:center;gap:12px}
.check-meta{font-size:12.5px;color:var(--steel)}
.check-action{font-size:12.5px;font-weight:600;color:var(--navy)}
.check-action.continue{color:var(--copper);font-weight:700}
.hub-foot{margin-top:14px;text-align:right;font-size:13px;color:var(--steel)}
.dot-copper{width:9px;height:9px;border-radius:50%;background:var(--copper)}
.dot-ring{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--ring);background:transparent}

/* ---- section shell (2b-2f) ---- */
.reportbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:16px;background:rgba(255,255,255,.96);backdrop-filter:blur(4px);border-bottom:1px solid var(--grey);padding:12px 0;margin-bottom:26px}
.reportbar .spacer{flex:1}
.reportbar-due{font-size:13px;font-weight:700;color:var(--midnight)}
.reportbar-div{width:1px;height:18px;background:var(--grey)}
/* Fixed-width centered shell: rail + content are left-anchored so the rail sits in the
   same place on every section regardless of the content column's width.
   same place on every section regardless of the content column's width. */
.section-shell{max-width:1240px;margin:0 auto;display:flex;align-items:flex-start;justify-content:flex-start;gap:28px;padding:0 24px}
.section-shell.ro{justify-content:center}
.section-shell>.narrow{flex:1 1 auto;min-width:0;margin:0;padding-left:0;padding-right:0}
/* Layout A of ADR-0009's 2026-07-28 addendum: a wider shell (1240 -> 1560) and no cap on the content
   column, so the worksheet flexes to fill instead of stopping at 680/920px.
   BOTH are conditional on .rp-inline-shown — set by app.js from resolvePanel().capLifted, i.e. only
   while the inline panel is genuinely beside the worksheet. Applying either unconditionally would
   change pages that have no panel: uncapping would leave a ~1250px-wide form, and the wider shell
   alone would slide the rail and worksheet leftward into dead space the moment the borrower hid the
   panel. Every panel-absent state — hidden, drawer regime, read-only — keeps today's rendering. */
.section-shell.rp-inline-shown{max-width:1560px}
.section-shell.rp-inline-shown>.narrow{max-width:none}
.rail-card{position:sticky;top:84px;width:236px;flex:none;border:1px solid var(--grey);border-radius:10px;padding:12px 10px;background:#fff;max-height:calc(100vh - 108px);overflow:auto}
.rail-hd{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);padding:2px 6px 8px}
.rail-bar{height:4px;background:var(--grey);border-radius:2px;overflow:hidden;margin:0 6px 4px}
.rail-bar i{display:block;height:100%;background:var(--copper)}
.rail-count{font-size:11px;color:var(--steel);padding:2px 6px 8px}
.rail-row{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:0;padding:7px 6px;border-radius:7px;cursor:pointer;font-family:inherit}
.rail-row:hover{background:#F7F9FB}
.rail-row.cur{background:var(--cloud)}
.rail-row.cur .rail-title{color:var(--midnight);font-weight:700}
.rail-icn{width:14px;display:flex;justify-content:center;flex:none}
.rail-n{font-size:11px;font-weight:700;color:var(--steel);width:16px;flex:none;font-variant-numeric:tabular-nums}
.rail-title{font-size:12.3px;color:var(--slate);line-height:1.3}
@media(max-width:1240px){.rail-card{display:none}.section-shell{justify-content:center}}

/* ======================================================================== */
/*  RESOURCES PANEL  (ADR-0009 + its 2026-07-28 addendum)                    */
/* ======================================================================== */
/* Read-only reference cards beside the worksheet. Two regimes: an inline third column above the
   rail's 1240px breakpoint, an off-canvas drawer at or below it. Every breakpoint here is one of the
   app's existing ones, and the values are kept textually identical to the rules they mirror
   (.rail-card's 1240 just above, the mobile 560 near the top of this file) so the panel can never
   disagree with the rail about which regime is on screen. The matching JS lives in
   frontend/resources_panel.js, which decides what the handle DOES — a thing CSS cannot express. */
.rp-panel{width:320px;flex:none;align-self:flex-start;display:flex;flex-direction:column}
.rp-inline{position:sticky;top:84px;max-height:calc(100vh - 108px)}
.rp-head{display:flex;align-items:center;gap:8px;padding:2px 4px 10px;flex:none}
.rp-head .rp-h{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.rp-head .rp-spacer{flex:1}
.rp-iconbtn{background:none;border:0;color:var(--steel);cursor:pointer;padding:4px;border-radius:6px;display:flex;align-items:center;line-height:1}
.rp-iconbtn:hover{background:var(--hairline);color:var(--navy)}
.rp-iconbtn:focus-visible{outline:none;color:var(--navy);box-shadow:0 0 0 3px var(--focus-ring)}
.rp-scroll{flex:1;min-height:0;overflow:auto;padding-right:2px;display:flex;flex-direction:column;gap:12px}

.rp-card{border:1px solid var(--grey);border-radius:10px;background:#fff;flex:none}
.rp-card-hd{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;font-family:inherit;
  text-align:left;padding:12px 13px;cursor:pointer;border-radius:10px}
.rp-card-hd:hover{background:#FAFBFC}
.rp-card-hd:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}
.rp-card-ic{color:var(--copper);display:flex;flex:none}
.rp-card-t{font-size:13px;font-weight:700;color:var(--midnight);flex:1}
.rp-chev{color:var(--steel);transition:transform .15s ease;flex:none}
.rp-card.collapsed .rp-chev{transform:rotate(-90deg)}
.rp-card-body{padding:0 14px 14px;font-size:12.5px;color:var(--slate);line-height:1.55}
.rp-card.collapsed .rp-card-body{display:none}
.rp-card-body p{margin-bottom:9px}
.rp-card-body p:last-child{margin-bottom:0}
.rp-foot{font-size:11px;color:var(--steel);margin-top:10px;line-height:1.4}

/* ---- edge handle: the way back to a panel that is away ----
   Two treatments, chosen by width alone. Above the mobile breakpoint a bordered tab, which is
   self-labelling and unmissable where there is edge to spare. At 560 and below the flush grip: the
   panel is off-canvas by default there, so the handle is the ONLY way in and must not overlap the
   content it sits on. Both are fixed to the viewport, not the shell, so neither scrolls away. */
.rp-handle{position:fixed;z-index:15;cursor:pointer;font-family:inherit;display:flex}
.rp-handle:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}
/* tab — above 560px */
.rp-handle-tab{right:0;top:50%;transform:translateY(-50%);flex-direction:column;align-items:center;gap:8px;
  background:#fff;border:1px solid var(--grey);border-right:0;border-radius:8px 0 0 8px;padding:14px 7px;
  color:var(--steel);box-shadow:-2px 0 10px rgba(18,32,72,.06)}
.rp-handle-tab:hover{color:var(--copper);border-color:var(--sky-border)}
.rp-handle-tab .rp-handle-lbl{writing-mode:vertical-rl;transform:rotate(180deg);font-size:10.5px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase}
/* grip — 560px and below */
.rp-handle-grip{right:0;top:50%;transform:translateY(-50%);align-items:center;background:none;border:0;padding:10px 6px}
.rp-handle-grip .rp-grip{width:5px;height:46px;border-radius:5px;background:var(--ring);opacity:.5;transition:opacity .15s,background .15s}
.rp-handle-grip:hover .rp-grip,.rp-handle-grip:focus-visible .rp-grip{opacity:1;background:var(--copper)}

/* ---- off-canvas drawer, at or below the rail's breakpoint ----
   Fixed to the viewport so it pins to the window and never scrolls away with the content. It floats
   OVER the worksheet and deliberately never rewidens it — nothing below reflows when it opens. */
.rp-scrim{position:fixed;inset:0;background:rgba(18,32,72,.42);z-index:24;opacity:0;pointer-events:none;transition:opacity .2s ease}
.rp-scrim.open{opacity:1;pointer-events:auto}
.rp-drawer{position:fixed;top:0;right:0;z-index:25;height:100%;width:min(360px,86%);
  background:#fff;box-shadow:-14px 0 40px rgba(18,32,72,.22);padding:16px 16px 0;
  border-left:1px solid var(--grey);transform:translateX(102%);transition:transform .24s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column}
.rp-drawer.open{transform:translateX(0)}
.rp-drawer .rp-scroll{padding-bottom:16px}
@media(prefers-reduced-motion:reduce){.rp-drawer{transition:none}.rp-scrim{transition:none}}

.sec-eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);margin-bottom:6px}
.sec-h1{font-size:20px;font-weight:800;color:var(--midnight);margin:0 0 6px}
.sec-blurb{font-size:13.5px;color:var(--concrete);line-height:1.5}
.infonote{display:flex;gap:10px;align-items:flex-start;background:var(--cloud);border-radius:10px;padding:13px 16px;font-size:13px;color:var(--navy);line-height:1.5;margin-top:18px}
.infonote svg{flex:none;color:var(--navy);margin-top:1px}
/* academic covenant panel: auto-collapse long Salesforce wording behind a Show more/less toggle */
.acad-cov-body{flex:1;min-width:0}
.acad-cov-text{white-space:pre-line}
.acad-cov-text.is-clamped{position:relative;overflow:hidden}
/* fade the clipped bottom edge into the infonote background (rgba is --cloud #E0F1FB at 0 alpha) */
.acad-cov-text.is-clamped::after{content:"";position:absolute;left:0;right:0;bottom:0;height:52px;background:linear-gradient(to bottom,rgba(224,241,251,0),var(--cloud));pointer-events:none}
.acad-cov-toggle{display:inline-flex;align-items:center;background:none;border:0;color:var(--navy);font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;padding:0;margin-top:8px}
.acad-cov-toggle:hover{color:var(--copper)}
/* small heading over the SSM result chips ("Your FY25 SSM results") */
.acad-ssm-head{font-size:13px;font-weight:700;color:var(--midnight)}
.gcard{border:1px solid var(--grey);border-radius:12px;background:#fff;padding:20px 22px;margin-bottom:16px}
.gcard-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px}
.gcard-headings{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.gcard-num{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--copper)}
.gcard-title{font-size:15px;font-weight:700;color:var(--midnight)}
.gcard-cf{font-size:12.5px;font-weight:600;color:var(--navy);background:none;border:0;cursor:pointer;font-family:inherit;padding:0;white-space:nowrap}
.gcard-cf:hover{color:var(--copper)}
.gcard .fld:last-child{margin-bottom:0}
.fld-2up{display:grid;grid-template-columns:1fr 1fr;gap:16px 14px}
.fld-2up .fld.half{width:100%;display:block;margin:0}
.fld-2up .fld.half+.fld.half{margin-left:0}
@media(max-width:560px){.fld-2up{grid-template-columns:1fr}}
.sec-foot{display:flex;justify-content:space-between;align-items:center;margin-top:40px;padding-top:20px;border-top:1px solid var(--grey);flex-wrap:wrap;gap:12px}
.sec-foot-note{font-size:13px;color:var(--concrete);max-width:60%}

/* ---- file upload (document row + drop zone) ---- */
.doc-row{display:flex;align-items:center;gap:12px;border:1px solid var(--grey);border-radius:10px;padding:12px 14px;background:#fff}
.doc-tile{width:36px;height:36px;border-radius:8px;background:var(--green-bg);display:flex;align-items:center;justify-content:center;flex:none;color:var(--green-text)}
.doc-main{flex:1;min-width:0}
.doc-name{font-size:13.5px;font-weight:700;color:var(--midnight);overflow-wrap:anywhere}
.doc-name a{color:var(--midnight);text-decoration:none}
.doc-meta{font-size:12px;color:var(--steel);margin-top:2px}
.doc-actions{display:flex;align-items:center;gap:10px;flex:none}
.doc-remove{background:none;border:0;font-size:12.5px;font-weight:600;color:var(--steel);cursor:pointer;font-family:inherit}
.doc-remove:hover{color:#C0392B}
.dropzone{border:1.5px dashed var(--dashed);border-radius:10px;background:#FBFDFE;padding:20px 16px;text-align:center;font-size:13.5px;color:var(--slate);cursor:pointer;width:100%;font-family:inherit;display:block}
.dropzone.over{border-color:var(--copper);background:var(--wash)}
.dropzone.dis,.dropzone:disabled{cursor:default;opacity:.6}
.dropzone b{color:var(--navy);font-weight:700}
.doc-limits{font-size:12.5px;color:var(--steel);margin-top:6px}

/* ---- DSCR worksheet (2c) ---- */
.ws-band{display:flex;flex-wrap:wrap;border:1px solid var(--sky-border);background:var(--wash);border-radius:10px;overflow:hidden;margin:14px 0 6px}
.ws-band-cell{flex:1;min-width:220px;padding:16px 20px;transition:background .2s}
.ws-band-cell+.ws-band-cell{border-left:1px solid var(--sky-border)}
.ws-band-cell.met{background:var(--green-bg)}
.ws-band-cell.below{background:#FBEAE8}
.ws-band-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
.ws-band-val{font-size:26px;font-weight:800;color:var(--midnight);font-variant-numeric:tabular-nums;margin-top:4px}
.ws-cov{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;padding-top:8px;border-top:1px solid rgba(0,0,0,.08);font-size:12px;color:var(--slate)}
.ws-cov b{color:var(--midnight);font-weight:700;font-variant-numeric:tabular-nums}
.ws-cov-status{font-weight:700}
.ws-cov-status.met{color:var(--green-text)}
.ws-cov-status.below{color:#C0392B}
.ws-cov-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;border-radius:999px;padding:2px 9px;background:var(--green-bg);color:var(--green-text)}
.ws-cov-chip.below{background:var(--gold-bg);color:var(--gold-text)}
.ws-caption{font-size:12.5px;color:var(--concrete);margin:8px 0 4px;line-height:1.5}
/* The covenant-met attestations, sitting under the ratio band (#159). `.fld` carries its own
   20px bottom margin, so the last child's is dropped rather than added to — otherwise the gap to
   the caption below reads as a section break and detaches the questions from the figures they are
   answered from. */
.ws-attest{margin-top:14px}
.ws-attest>.fld:last-child{margin-bottom:0}
.ws-stdchip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--navy);background:var(--cloud);border-radius:999px;padding:4px 11px}
.ws-card{border:1px solid var(--grey);border-radius:12px;background:#fff;padding:6px 20px 16px;margin-top:14px}
.ws-grouphd{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);padding:14px 0 4px}
.ws-row{display:flex;align-items:center;gap:14px;padding:7px 0;border-bottom:1px solid var(--hairline-soft)}
.ws-lbl{flex:1;min-width:0;font-size:14px;color:var(--ink)}
/* Line metadata, in both worksheets — .ws-lbl is the one-column label, .ws-glbl the grid's.
   Replaces the single .ws-note that served both provenance and optionality (ADR-0014 §6).
   `opt` stays inline with the label; `src` takes its own line beneath it (§7), because faithful
   sources roughly double the average label and the label column is only ~310px wide. */
/* Column-wise keyboard movement is invisible unless it is stated (ADR-0014 §9). Rendered inside the
   card, below the grid, in the two-column form only — see the comment at its call site. */
.ws-keyhint{font-size:11.5px;color:var(--concrete);margin:10px 0 0;text-align:right}
.ws-keyhint kbd{font:inherit;font-size:11px;font-weight:700;background:var(--chip-grey-bg);color:var(--chip-grey-text);border-radius:4px;padding:1px 5px;margin:0 1px}
.ws-opt{font-size:11.5px;color:var(--concrete);font-style:italic}
.ws-src{display:block;font-size:11.5px;color:var(--steel);line-height:1.4;margin-top:2px}
.ws-inbox{display:flex;align-items:center;background:#fff;border:1px solid var(--input-border);border-radius:7px;padding:0 10px;width:126px}
.ws-inbox:focus-within{border-color:var(--copper);box-shadow:0 0 0 3px var(--focus-ring)}
.ws-dol{color:var(--concrete);font-weight:700;font-size:13px}
.ws-input{border:0;background:transparent;text-align:right;width:100%;padding:8px 2px;font:inherit;font-weight:600;font-size:13.5px;outline:none;font-variant-numeric:tabular-nums}
.ws-val{width:126px;text-align:right;padding-right:6px;font-weight:600;font-size:13.5px;color:var(--ink);font-variant-numeric:tabular-nums}
.ws-callbl{flex:1;color:var(--concrete);font-size:14px}
.ws-sublbl{flex:1;color:var(--midnight);font-size:14px;font-weight:700}
.ws-subval{width:126px;text-align:right;padding-right:6px;font-weight:700;font-size:13.5px;color:var(--midnight);font-variant-numeric:tabular-nums}
.ws-ratio{display:flex;align-items:center;gap:14px;padding:11px 12px;background:var(--wash);border-radius:8px;margin-top:8px}
.ws-ratiolbl{flex:1;font-weight:700;color:var(--navy)}
.ws-ratioval{width:126px;text-align:right;padding-right:6px;font-weight:800;color:var(--navy);font-size:17px;font-variant-numeric:tabular-nums}
/* ---- two-scope aligned grid (ADR-0014 §8, variant A) --------------------------
   The two scopes share ONE label column with a value column each, so a line item's
   OG and Network figures sit adjacent and comparable. Replaces the two stacked
   .ws-card blocks that placed third in review.
   It is a grid rather than a stack of .ws-row because the "not required" cell spans
   the whole DCOH block, and a flexbox row cannot express a cell that spans rows.
   Retired with those cards: .ws-scope-label / ::before, which labelled each stacked
   scope. Its copper tick lives on as .ws-ginbox-og below.
   Geometry mirrors .ws-row exactly — a 1fr label, two 126px value columns, 14px
   gaps, 7px padding, the same hairline. The type/colour treatments below are lifted
   from the .ws-* flex rows; only the geometry differs, so the two must be kept
   visually identical by hand. There is no screenshot test in this repo. */
.ws-grid{display:grid;grid-template-columns:1fr 126px 126px;column-gap:14px}
.ws-gcell{display:flex;align-items:center;padding:7px 0;border-bottom:1px solid var(--hairline-soft);min-width:0}
.ws-gcell.num{justify-content:flex-end}
.ws-gspan{grid-column:1 / -1}
.ws-ghead{padding:2px 0 7px;border-bottom:2px solid var(--grey);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);display:flex;align-items:flex-end;justify-content:flex-end}
.ws-ghead.net{color:var(--steel)}
/* The Obligated Group reports coverage only, so its whole DCOH block is one spanning
   cell rather than the phrase repeated down six dead rows (ADR-0014 §1). Its
   grid-column and grid-row come from the component, which knows which scope skipped
   which block — this rule carries only the treatment. */
.ws-gna-span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:10px 4px;margin-bottom:1px;border-bottom:1px solid var(--hairline-soft);background:repeating-linear-gradient(135deg,transparent,transparent 7px,rgba(123,149,175,.07) 7px,rgba(123,149,175,.07) 14px);border-radius:8px}
.ws-gna-t{font-size:12px;font-style:italic;color:var(--steel);line-height:1.4}
/* The single-row equivalent, for the DSCR ratio the Network does not report. Same stripes as
   .ws-gna-span, because it says the same thing — "this scope does not report this" — and saying it
   in two visual languages read as two different states (#159). Centred, not right-aligned like a
   figure, since there is no figure here.
   Three things this rule needs to be, each of which it was not on a first pass:
   - QUALIFIED with .ws-gcell. A single-class rule loses `justify-content` to `.ws-gcell.num` and
     `background` to `.ws-gratiorow`, so it applied nothing at all and the cell stayed flat.
   - the wash as the LAST background layer, since a colour is only legal there. The gradient sits
     OVER .ws-gratiorow's wash rather than replacing it, so the cell still belongs to its row.
   - .10 alpha rather than .ws-gna-span's .07. The span hatches white card; this hatches the ratio
     row's blue wash, where the same grey is too faint to read as hatching at all. Matching the
     LOOK is the point, so the number that gets matched is the contrast, not the alpha. */
.ws-gcell.ws-gna-cell{justify-content:center;background:repeating-linear-gradient(135deg,transparent,transparent 7px,rgba(123,149,175,.10) 7px,rgba(123,149,175,.10) 14px),var(--wash);border-radius:8px}
.ws-gna{font-size:11.5px;color:var(--steel);font-style:italic}
.ws-glbl{font-size:14px;color:var(--ink);line-height:1.35}
.ws-gcallbl{color:var(--concrete);font-size:14px}
.ws-gsublbl{color:var(--midnight);font-size:14px;font-weight:700}
.ws-gval{font-weight:600;font-size:13.5px;color:var(--ink);font-variant-numeric:tabular-nums}
.ws-gsubval{font-weight:700;font-size:13.5px;color:var(--midnight);font-variant-numeric:tabular-nums}
.ws-gratiolbl{font-weight:700;color:var(--navy)}
.ws-gratioval{font-weight:800;color:var(--navy);font-size:17px;font-variant-numeric:tabular-nums}
.ws-gratiorow{background:var(--wash);border-radius:8px;border-bottom:0;margin-top:6px;padding:11px 12px}
.ws-ghd{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);padding:16px 0 4px;border-bottom:0}
/* Scope accent: reuse the copper tick .ws-scope-label::before gives the OG scope. */
.ws-ginbox-og{border-left:3px solid var(--copper)}
.ws-ginbox-net{border-left:3px solid var(--steel)}
@media(max-width:640px){.ws-grid{grid-template-columns:1fr 108px 108px;column-gap:8px}}

/* ---- grids (2d, 2e) ---- */
.calc-tag{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);margin-left:8px}
.pct-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;border-radius:999px;padding:4px 11px;margin-top:8px}
.pct-chip.ok{background:var(--green-bg);color:var(--green-text)}
.pct-chip.off{background:var(--gold-bg);color:var(--gold-text)}
.pct-chip .cdot{width:7px;height:7px;border-radius:50%}
.pct-chip.ok .cdot{background:var(--green)}
.pct-chip.off .cdot{background:var(--gold)}
.btn-outline{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--input-border);border-radius:8px;color:var(--navy);font-weight:600;font-size:13px;padding:8px 14px;cursor:pointer;font-family:inherit;margin-top:8px;text-decoration:none}
.btn-outline:not(:disabled):hover{border-color:var(--copper);color:var(--copper)}
.btn-outline:disabled{opacity:.6;cursor:default}
.grid-table td.xcol{width:34px;text-align:center}
.rep-xbtn{background:none;border:0;color:var(--steel);cursor:pointer;padding:4px;display:inline-flex;line-height:0}
.rep-xbtn:hover{color:#C0392B}

/* ---- quarterly (1c) ---- */
.q-head{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.96);backdrop-filter:blur(4px);border-bottom:1px solid var(--grey);padding:12px 0;margin-bottom:22px}
.q-head-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.q-chip{display:inline-flex;align-items:center;font-size:12px;font-weight:700;color:var(--navy);background:var(--cloud);border-radius:6px;padding:3px 9px}
.q-due{font-size:13.5px;font-weight:700;color:var(--midnight)}
.q-meta{font-size:12.5px;color:var(--steel)}

/* ============================================================
   Phase 3 — admin
   ============================================================ */
.admin-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.admin-title{font-size:22px;font-weight:800;color:var(--midnight);display:flex;align-items:center;gap:10px}
.admin-chip{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#8A6D00;border:1px solid rgba(242,200,121,.6);background:#FBF4DF;border-radius:5px;padding:2px 7px}
.admin-sub{color:var(--steel);font-size:13px;margin-top:2px}
.admin-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:8px 0 14px}
.admin-toolbar h3{font-size:15px;font-weight:800;color:var(--midnight);margin:0}
.admin-toolbar .count{font-size:13px;color:var(--steel);font-weight:500;margin-left:6px}
.admin-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* borrower search: 40px EFF field, leading magnifier, copper focus, accessible clear button.
   width:240px + max-width:100% keeps it responsive (shrinks/wraps on small screens). */
.search{position:relative;width:240px;max-width:100%}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--steel);pointer-events:none}
.search input[type=search]{width:100%;min-height:40px;padding:0 34px;border:1px solid var(--input-border);border-radius:8px;font-family:'Montserrat',sans-serif;font-size:14px;color:var(--ink);background:#fff;-webkit-appearance:none;appearance:none}
.search input[type=search]:focus{outline:none;border-color:var(--copper);box-shadow:0 0 0 3px var(--focus-ring)}
.search input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.search-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:none;background:none;color:var(--steel);cursor:pointer;padding:5px;line-height:0;display:flex;border-radius:6px}
.search-clear:not(:disabled):hover{color:var(--copper)}

/* segmented control — no overflow:hidden (it would clip the focus outline); the end buttons
   are rounded to match the container instead. */
.seg{display:inline-flex;border:1px solid var(--input-border);border-radius:8px}
.seg-btn{background:#fff;border:0;border-right:1px solid var(--input-border);padding:8px 14px;font-family:inherit;font-size:13px;font-weight:600;color:var(--slate);cursor:pointer;white-space:nowrap}
.seg-btn:first-child{border-radius:7px 0 0 7px}
.seg-btn:last-child{border-right:0;border-radius:0 7px 7px 0}
.seg-btn.on{background:var(--navy);color:#fff}
.seg-btn:disabled{opacity:.6;cursor:default}

/* borrowers admin: compact filter row + click-to-sort column headers.
   Native <select> arrow is kept (matches the covenant/grid selects); sized to
   sit level with the 40px search field in the toolbar area above. */
.admin-filters{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:-4px 0 14px}
.admin-filters .filter-field{display:inline-flex;align-items:center;gap:7px}
.admin-filters .filter-label{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--steel)}
.admin-filters select{width:auto;min-width:0;min-height:38px;padding:6px 30px 6px 11px;font-size:13px;font-family:'Montserrat',sans-serif;color:var(--ink);background:#fff;border:1px solid var(--input-border);border-radius:8px}
.admin-filters select:focus{outline:none;border-color:var(--copper);box-shadow:0 0 0 3px var(--focus-ring)}
.filter-clear{background:none;border:0;padding:6px 4px;font-family:'Montserrat',sans-serif;font-size:12.5px;font-weight:700;color:var(--copper);cursor:pointer}
.filter-clear:hover{color:var(--copper-dark);text-decoration:underline}
/* sortable header: a button that inherits the .admin-table th look, plus a direction caret */
.th-sort{display:inline-flex;align-items:center;gap:5px;background:none;border:0;margin:0;padding:0;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--steel);cursor:pointer}
.th-sort:hover{color:var(--midnight)}
.th-sort:focus-visible{outline:2px solid var(--copper);outline-offset:2px;border-radius:4px}
.th-sort .th-caret{color:var(--ring);flex:none}
.th-sort .th-caret.on{color:var(--copper)}

/* overflow (⋯) menu */
.ovf{position:relative;display:inline-block}
.ovf-btn{background:none;border:0;color:var(--steel);cursor:pointer;padding:4px 6px;border-radius:6px;line-height:0}
.ovf-btn:hover{background:var(--wash);color:var(--navy)}
.ovf-menu{position:absolute;right:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--grey);border-radius:8px;box-shadow:0 6px 24px rgba(18,32,72,.14);z-index:25;min-width:170px;padding:4px}
.ovf-item{display:block;width:100%;text-align:left;background:none;border:0;padding:8px 12px;font-family:inherit;font-size:13px;color:var(--navy);cursor:pointer;border-radius:6px;white-space:nowrap}
.ovf-item:hover{background:var(--wash)}
.ovf-item.danger{color:#C0392B}
.ovf-item:disabled{color:var(--steel);cursor:default;background:none}

/* mini progress bar in tables */
.minibar{display:inline-block;width:90px;height:5px;background:var(--grey);border-radius:3px;overflow:hidden;vertical-align:middle;margin-left:8px}
.minibar i{display:block;height:100%;background:var(--navy)}
.minibar.green i{background:var(--green)}
.cell-prog{display:flex;align-items:center;white-space:nowrap;font-variant-numeric:tabular-nums}

/* summary strip */
.summary-strip{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--page-wash);border:1px solid var(--grey);border-radius:8px;padding:10px 16px;font-size:13px;color:var(--slate);margin-bottom:12px}
.summary-strip b{color:var(--midnight)}

/* salesforce deep link */
.sf-link{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;color:var(--navy);text-decoration:none}
.sf-link:hover{color:var(--copper)}
.sf-none{font-size:11.5px;color:var(--steel)}

/* optional technical disclosure (nontechnical copy up top, details on demand) */
.disclosure{margin-top:8px}
.disclosure>summary{cursor:pointer;font-size:12px;font-weight:600;color:var(--steel);list-style:revert}
.disclosure>summary:hover{color:var(--navy)}

/* shared admin save feedback (useSaver / SaveNote) */
.save-note{font-size:12.5px;font-weight:600;margin:8px 0 0;line-height:1.4}
.save-note.err{color:#C0392B}
.save-note.ok{color:var(--green-text)}

/* overdue reporting-period label */
.overdue-tag{display:inline-block;margin-left:8px;font-size:11px;font-weight:700;letter-spacing:.02em;color:#C0392B;background:#FBEAE8;border-radius:6px;padding:2px 7px;white-space:nowrap}

/* row action text link — also used as an <a> (Send reminder), so reset link underline/color */
.rowlink{background:none;border:0;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--navy);cursor:pointer;padding:0;text-decoration:none}
.rowlink:not(:disabled):hover{color:var(--copper)}
.rowlink:disabled{opacity:.6;cursor:default}
.rowlink.reminder{color:var(--copper)}

/* type tag chip (Borrower / Applicant) */
.tag-chip{display:inline-flex;align-items:center;font-size:11px;font-weight:700;letter-spacing:.04em;border-radius:6px;padding:2px 8px}
.tag-chip.borrower{background:var(--cloud);color:var(--navy)}
.tag-chip.applicant{background:var(--gold-bg);color:var(--gold-text)}

/* account detail (3d) */
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:820px){.detail-grid{grid-template-columns:1fr}}
.dcard{border:1px solid var(--grey);border-radius:12px;background:#fff;padding:18px 20px}
.dcard.full{grid-column:1/-1}
.dcard-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.dcard-title{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
.kv{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px solid var(--hairline-soft);font-size:13.5px}
.kv:last-child{border-bottom:0}
.kv-k{color:var(--steel)}
.kv-v{color:var(--midnight);font-weight:600;text-align:right;overflow-wrap:anywhere}
.danger-zone{margin-top:20px;border-top:1px solid #F0E0E0;padding-top:16px}
.btn-danger{background:#fff;border:1px solid #E0B4AE;color:#C0392B;border-radius:8px;font-weight:600;font-size:13px;padding:8px 14px;cursor:pointer;font-family:inherit}
.btn-danger:not(:disabled):hover{background:#FBEAE8}
.btn-danger:disabled{opacity:.6;cursor:default}
.dialog-input{margin-top:12px}
.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}

/* ==========================================================================
   Admin filter bar — the single-line grammar shared by the Borrowers table and
   the Notifications delivery log (search · report switcher · progress · archived
   toggle · reset). Attached to the top of a flush card (border-bottom hairline).
   ========================================================================== */

/* navy primary (Sync from Salesforce) — distinct from the copper .btn-p */
.btn-sf{background:#003A5D;color:#fff;padding:11px 16px;font-size:13px}
.btn-sf:not(:disabled):hover{background:var(--midnight)}

/* a card whose children (bar, table, pager) run edge to edge */
.admin-card-flush{padding:0;overflow:hidden}

.filter-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 16px;border-bottom:1px solid var(--grey);background:#fff}
.filter-bar>svg{color:var(--steel);flex:none}
.bar-search{flex:1 1 130px;min-width:130px;height:36px;border:0;background:transparent;font-family:'Montserrat',sans-serif;font-size:13.5px;color:var(--ink)}
.bar-search:focus{outline:none}
.bar-divider{flex:none;width:1px;height:22px;background:var(--grey)}

/* report switcher — segmented pill buttons, active = midnight */
.rep-seg{display:inline-flex;gap:5px;flex-wrap:wrap}
.rep-btn{background:#fff;border:1px solid #D6DBDF;border-radius:8px;padding:7px 12px;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;color:#4A5560;cursor:pointer;white-space:nowrap}
.rep-btn:not(.on):hover{border-color:var(--copper);color:var(--copper)}
.rep-btn.on{background:var(--midnight);color:#fff;border-color:var(--midnight)}
.rep-btn:focus-visible{outline:2px solid var(--copper);outline-offset:2px}

/* labelled select (Progress / Type / Status) + copper "active" affordance */
.bar-field{display:inline-flex;align-items:center;gap:7px}
.bar-label{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--steel);white-space:nowrap}
.bar-select{min-width:130px;height:32px;border:1px solid #D6DBDF;border-radius:8px;padding:0 8px;font-family:'Montserrat',sans-serif;font-size:12.5px;font-weight:600;color:var(--ink);background:#fff;cursor:pointer}
.bar-select:focus{outline:none;border-color:var(--copper);box-shadow:0 0 0 3px var(--focus-ring)}
.bar-select.active{border-color:var(--copper);color:#9E4F13}
.bar-date{height:32px;border:1px solid #D6DBDF;border-radius:8px;padding:0 10px;font-family:'Montserrat',sans-serif;font-size:12.5px;font-weight:600;color:var(--ink);background:#fff}
.bar-date:focus{outline:none;border-color:var(--copper);box-shadow:0 0 0 3px var(--focus-ring)}

/* archived toggle — visually-hidden checkbox drives the track/knob */
.toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}
.toggle input{position:absolute;opacity:0;width:0;height:0}
.toggle-track{position:relative;flex:none;width:34px;height:20px;border-radius:999px;background:#C9D1D7;transition:background .15s}
.toggle-knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.toggle input:checked + .toggle-track{background:var(--copper)}
.toggle input:checked + .toggle-track .toggle-knob{transform:translateX(14px)}
.toggle input:focus-visible + .toggle-track{outline:2px solid var(--copper);outline-offset:2px}
.toggle-label{font-size:12.5px;font-weight:600;color:#4A5560}

.bar-reset{white-space:nowrap}
.bar-count{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--steel);white-space:nowrap}

/* dotless status pill (Borrowers progress + Notifications status) — design palette */
.pill{display:inline-flex;align-items:center;font-family:'Montserrat',sans-serif;font-size:11.5px;font-weight:700;border-radius:999px;padding:3px 10px;line-height:1;white-space:nowrap}
.pill-ns{background:#EDF0F2;color:#5B6770}
.pill-ip{background:#FBF4DF;color:#8A6D00}
.pill-done{background:#E4F1E2;color:#2F6B3A}
.pill-fail{background:#FEE2E2;color:#991B1B}
.prog-mini{display:inline-block;flex:none;width:48px;height:4px;margin-left:8px;background:#E7EBEE;border-radius:999px;overflow:hidden;vertical-align:middle}
.prog-mini i{display:block;height:100%;background:var(--gold);border-radius:999px}

/* summary-strip scoped accents */
.summary-strip .strip-complete,.summary-strip .on-yes{color:var(--green-text)}
.summary-strip .on-no{color:#991B1B}
.summary-strip .strip-due{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.summary-strip .strip-hint{color:var(--steel);font-weight:500}

/* ---- Borrowers table (fixed layout for reliable ellipsis + proportions) ---- */
.borrowers-table{table-layout:fixed}
.borrowers-table th:first-child,.borrowers-table td:first-child{padding-left:16px}
.borrowers-table th:last-child,.borrowers-table td:last-child{padding-right:16px}
.borrowers-table td{padding-top:12px;padding-bottom:12px}
.borrowers-table tbody tr{cursor:pointer}
.borrowers-table .col-school{width:29%}
.borrowers-table .col-contact{width:25%}
.borrowers-table .col-progress{width:21%}
.borrowers-table .col-activity{width:12%}
.borrowers-table .col-actions{width:13%}
.school-cell{display:flex;align-items:center;gap:8px;min-width:0}
.school-name{min-width:0;font-size:13.5px;font-weight:700;color:var(--midnight);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.archived-chip{flex:none;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;background:#FBEAE0;color:#9E4F13;border-radius:5px;padding:2px 6px}
/* Provisioning badges (ADR-0003): under-provisioned (nobody can sign in) and stale (a departed contact). */
.attn-chip{flex:none;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;border-radius:5px;padding:2px 6px;cursor:default}
.attn-chip.under{background:#FEE2E2;color:#991B1B}
.attn-chip.stale{background:#FBF4DF;color:#8A6D00}
.col-contact .contact-email{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;font-size:13px;color:#3E4C59}
.contact-more{color:#8A949D}
.borrowers-table .col-activity{font-size:12.5px;color:var(--steel);white-space:nowrap}
.row-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;color:#8A949D;padding:7px;border-radius:7px;text-decoration:none}
.icon-btn:hover{background:#EFF3F6;color:var(--copper)}
.btn-open{background:#fff;border:1px solid #D6DBDF;border-radius:7px;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;color:var(--navy);padding:6px 12px;cursor:pointer}
.btn-open:hover{border-color:var(--copper);color:var(--copper)}
.table-empty{text-align:center;padding:28px 16px;font-size:13.5px;color:#5B6770}

/* ---- Notifications log table ---- */
.notif-table{table-layout:fixed}
.notif-table th:first-child,.notif-table td:first-child{padding-left:16px}
.notif-table th:last-child,.notif-table td:last-child{padding-right:16px}
.notif-table td{padding-top:10px;padding-bottom:10px}
.notif-table .col-when{width:15%;white-space:nowrap;color:var(--steel);font-size:12.5px}
.notif-table th:nth-child(2){width:18%}
.notif-table th:nth-child(3){width:22%}
.notif-table th:nth-child(4){width:32%}
.notif-table th:nth-child(5){width:13%}
.notif-table .cell-ellip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.log-pager{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px;border-top:1px solid var(--hairline)}

/* the toolbar Sync/Export buttons collapse behind a page menu on phones */
.bar-only-sm{display:none}

/* ---- Responsive (Borrowers) — 1080 / 768 / 560 breakpoints ---- */
@media(max-width:1079px){
  /* bar splits to two rows: the first divider becomes a full-width line break so search
     sits alone on top and the switcher/progress/toggle/reset wrap below it. */
  .filter-bar .bar-divider:first-of-type{flex-basis:100%;width:100%;height:0;border:0;margin:0}
  /* drop Primary contact (data stays in the borrower detail view) */
  .borrowers-table .col-contact{display:none}
  .borrowers-table .col-school{width:40%}
  .borrowers-table .col-progress{width:30%}
  .borrowers-table .col-activity{width:18%}
  .borrowers-table .col-actions{width:12%}
}
@media(max-width:559px){
  /* page-level menu replaces the toolbar action buttons */
  .bar-hide-sm{display:none}
  .bar-only-sm{display:inline-flex}

  /* controls stack full width with 44px touch targets */
  .filter-bar{flex-direction:column;align-items:stretch;gap:10px;padding:14px 16px}
  .filter-bar>svg,.filter-bar .bar-divider{display:none}
  .bar-search{width:100%;height:44px;border:1px solid #D6DBDF;border-radius:10px;padding:0 12px}
  .rep-seg{width:100%}
  .rep-btn{flex:1;min-height:44px}
  .bar-field{width:100%;justify-content:space-between}
  .bar-select{flex:1;height:44px}
  .toggle{min-height:44px}
  .toggle .toggle-track{width:38px;height:22px}
  .toggle .toggle-knob{width:18px;height:18px}
  .toggle input:checked + .toggle-track .toggle-knob{transform:translateX(16px)}
  .bar-count{margin-left:0}

  /* rows become cards: name + progress on top, email, then a footer with activity + actions */
  .borrowers-table thead{display:none}
  .borrowers-table,.borrowers-table tbody{display:block}
  .borrowers-table tbody tr{display:grid;grid-template-columns:1fr auto;grid-template-areas:"school progress" "contact contact" "activity actions";row-gap:8px;align-items:center;border:1px solid var(--grey);border-radius:12px;padding:14px;margin-bottom:12px}
  .borrowers-table tbody tr:hover{background:none}
  .borrowers-table td{display:block;width:auto;padding:0;border:0}
  .borrowers-table .col-school{grid-area:school}
  .borrowers-table .col-contact{grid-area:contact;display:block}
  .borrowers-table .col-progress{grid-area:progress;justify-self:end}
  .borrowers-table .col-activity{grid-area:activity;border-top:1px solid var(--hairline);padding-top:10px}
  .borrowers-table .col-actions{grid-area:actions;justify-self:end;border-top:1px solid var(--hairline);padding-top:10px}
  .school-name{font-size:14.5px;white-space:normal}
  .borrowers-table tr.is-empty{display:block;border:0;padding:0}
  .borrowers-table tr.is-empty td{display:block}
}

/* ---- first-run welcome splash (reuses .overlay / .overlay-card) ---- */
.welcome-card{max-width:520px;padding:0;overflow:hidden}
.welcome-head{display:flex;align-items:center;gap:12px;background:var(--midnight);border-bottom:3px solid var(--copper);padding:20px 30px}
.welcome-mark{height:26px;width:auto;display:block}
.welcome-kicker{font-weight:800;letter-spacing:.14em;font-size:12px;text-transform:uppercase;color:rgba(255,255,255,.85)}
.welcome-body{padding:24px 30px 28px}
.welcome-body h2{font-size:21px;font-weight:800;color:var(--midnight);margin-bottom:8px}
.welcome-list{list-style:none;margin:16px 0 4px;padding:0}
.welcome-list li{position:relative;padding:6px 0 6px 22px;font-size:13.5px;color:var(--slate)}
.welcome-list li::before{content:"";position:absolute;left:2px;top:12px;width:8px;height:8px;border-radius:50%;background:var(--copper)}
.welcome-actions{display:flex;justify-content:flex-end;margin-top:22px}

/* ---- first-run tutorial overlay (one-shot coach marks; dismiss on any click / Esc) ---- */
.tour-scrim{position:fixed;inset:0;background:rgba(18,32,72,.55);z-index:40;cursor:pointer}
.tour-callout{position:absolute;z-index:41;background:#fff;border-radius:10px;padding:12px 14px;box-shadow:0 12px 36px rgba(0,0,0,.3);display:flex;flex-direction:column;gap:3px}
.tour-callout b{font-size:13.5px;font-weight:800;color:var(--midnight)}
.tour-callout span{font-size:12.5px;color:var(--slate);line-height:1.4}
.tour-arrow{position:absolute;top:-8px;width:16px;height:16px;background:#fff;transform:translateX(-50%) rotate(45deg);box-shadow:-3px -3px 8px rgba(0,0,0,.06)}
.tour-note{position:fixed;left:50%;bottom:56px;transform:translateX(-50%);z-index:41;max-width:min(420px,calc(100vw - 32px));background:var(--midnight);color:#fff;border-radius:10px;padding:12px 16px;box-shadow:0 12px 36px rgba(0,0,0,.3);display:flex;flex-direction:column;gap:3px;text-align:center}
.tour-note b{font-size:13px;font-weight:800}
.tour-note span{font-size:12.5px;color:rgba(255,255,255,.82);line-height:1.4}
.tour-hint{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:41;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.tour-tips-card{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:41;width:min(420px,calc(100vw - 32px));background:#fff;border-radius:12px;border-top:3px solid var(--copper);padding:22px 24px;box-shadow:0 18px 60px rgba(0,0,0,.3)}
.tour-tips-head{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);margin-bottom:12px}
.tour-tip-row{display:flex;flex-direction:column;gap:2px;padding:9px 0;border-top:1px solid var(--hairline)}
.tour-tip-row b{font-size:13.5px;font-weight:800;color:var(--midnight)}
.tour-tip-row span{font-size:12.5px;color:var(--slate);line-height:1.4}
.tour-dismiss{margin-top:16px;width:100%}