/* =========================================================================
   ATTEST — ADA Document Compliance Platform
   Design system: civic, trustworthy, calm. WCAG 2.1 AA conscious.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Brand: Navy ---- */
  --navy-950:#0A1B2A; --navy-900:#0E2438; --navy-800:#15304B; --navy-700:#1D3E5C;
  --navy-600:#2B5279; --navy-500:#3E6792; --navy-400:#5E83AA; --navy-300:#8DA7C2;
  --navy-200:#BFD0E0; --navy-100:#E2EAF1; --navy-50:#F1F5F9;

  /* ---- Accent: Gold (civic seal) ---- */
  --gold-700:#7E6320; --gold-600:#9A7A26; --gold-500:#C8A13D; --gold-400:#D8B863;
  --gold-300:#E6CD8E; --gold-200:#EEDDAE; --gold-100:#F7EFD6; --gold-50:#FBF6E9;

  /* ---- Neutral ink ---- */
  --ink-900:#14181F; --ink-800:#222936; --ink-700:#353D49; --ink-600:#4B5563;
  --ink-500:#667085; --ink-400:#8A93A2; --ink-300:#B6BDC8; --ink-200:#D6DBE2;
  --ink-150:#E3E7EC; --ink-100:#EDEFF3; --ink-50:#F6F7F9;
  --paper:#FFFFFF; --canvas:#F4F6F8;
  /* AA text-tertiary: 4.6:1 on white (was ink-400 #8A93A2 ≈ 2.9:1) */
  --ink-tertiary:#6B7585;

  /* ---- Risk dot colors (AA ≥3:1 graphical contrast on white) ---- */
  --risk-high-dot:#D92D20; /* 3.9:1 */
  --risk-med-dot:#DC6803;  /* 3.5:1 (was amber-500 #F79009 ≈ 2.3:1) */
  --risk-low-dot:#067647;  /* 5.7:1 (was green-500 #17B26A ≈ 2.8:1) */

  /* ---- Risk / status ---- */
  --red-700:#912018; --red-600:#B42318; --red-500:#D92D20; --red-100:#FEE4E2; --red-50:#FEF3F2; --red-border:#FECDCA;
  --amber-700:#93370D; --amber-600:#B54708; --amber-500:#F79009; --amber-100:#FEF0C7; --amber-50:#FFFAEB; --amber-border:#FEDF89;
  --green-700:#085D3A; --green-600:#067647; --green-500:#17B26A; --green-100:#DCFAE6; --green-50:#ECFDF3; --green-border:#ABEFC6;

  /* ---- Engine / agent (machine-proposed) — muted indigo, distinct from brand ---- */
  --engine-700:#46428A; --engine-600:#565299; --engine-500:#6E69B0; --engine-200:#CFCEE6;
  --engine-100:#E7E6F4; --engine-50:#F3F2FA; --engine-border:#C7C5E2;

  /* ---- Semantic surfaces ---- */
  --bg-page:var(--canvas);
  --bg-surface:var(--paper);
  --bg-sunken:var(--ink-50);
  --bg-inverse:var(--navy-900);
  --text-primary:var(--ink-900);
  --text-secondary:var(--ink-500);
  --text-tertiary:var(--ink-tertiary);
  --text-inverse:#FFFFFF;
  --text-brand:var(--navy-800);
  --border-subtle:var(--ink-100);
  --border-default:var(--ink-200);
  --border-strong:var(--ink-300);

  /* ---- Type ---- */
  --font-sans:'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Radii ---- */
  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:10px; --r-xl:14px; --r-2xl:18px; --r-pill:999px;

  /* ---- Shadows ---- */
  --shadow-xs:0 1px 2px rgba(16,36,56,.06);
  --shadow-sm:0 1px 3px rgba(16,36,56,.09), 0 1px 2px rgba(16,36,56,.05);
  --shadow-md:0 4px 14px rgba(16,36,56,.09), 0 2px 5px rgba(16,36,56,.05);
  --shadow-lg:0 16px 40px rgba(16,36,56,.14), 0 4px 10px rgba(16,36,56,.06);
  --shadow-focus:0 0 0 3px rgba(94,131,170,.40);

  /* ---- Motion (non-visual tokens) ---- */
  --ease:cubic-bezier(.2,.7,.3,1); /* @kind other */
  --ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
  --dur-fast:120ms; /* @kind other */
  --dur:200ms; /* @kind other */
  --dur-slow:340ms; /* @kind other */

  --sidebar-w:248px; --topbar-h:60px;
}

/* ========================= Reset / base ========================= */
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-sans);
  color:var(--text-primary);
  background:var(--bg-page);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums;
}
h1,h2,h3,h4,h5,p{margin:0;}
button{font-family:inherit;cursor:pointer;}
a{color:var(--navy-600);text-decoration:none;}
a:hover{text-decoration:underline;}
input,select,textarea,button{font-family:inherit;font-size:inherit;}
:focus-visible{outline:2px solid var(--navy-600);outline-offset:2px;border-radius:var(--r-xs);}
::selection{background:var(--gold-200);}
hr{border:none;border-top:1px solid var(--border-subtle);margin:0;}
.mono{font-family:var(--font-mono);font-feature-settings:"liga" 0;}

/* scrollbars */
*::-webkit-scrollbar{width:10px;height:10px;}
*::-webkit-scrollbar-thumb{background:var(--ink-200);border-radius:99px;border:2px solid var(--canvas);}
*::-webkit-scrollbar-thumb:hover{background:var(--ink-300);}

/* ========================= Typography utilities ========================= */
.t-display{font-size:46px;line-height:1.04;font-weight:800;letter-spacing:-.022em;color:var(--text-brand);}
.t-h1{font-size:30px;line-height:1.12;font-weight:800;letter-spacing:-.018em;}
.t-h2{font-size:23px;line-height:1.2;font-weight:700;letter-spacing:-.012em;}
.t-h3{font-size:18px;line-height:1.3;font-weight:700;letter-spacing:-.006em;}
.t-title{font-size:16px;line-height:1.35;font-weight:650;}
.t-body{font-size:15px;line-height:1.55;}
.t-sm{font-size:13.5px;line-height:1.5;}
.t-xs{font-size:12.5px;line-height:1.45;}
.t-label{font-size:11px;line-height:1.2;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-tertiary);}
.t-num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.muted{color:var(--text-secondary);}
.faint{color:var(--text-tertiary);}
.strong{font-weight:700;}
.center{text-align:center;}

/* ========================= Layout ========================= */
.app{display:flex;min-height:100vh;background:var(--bg-page);}
.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.content{flex:1;min-width:0;overflow:auto;}
.page{max-width:1240px;margin:0 auto;padding:28px 32px 64px;}
.page-wide{max-width:1480px;}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px;}
.page-head .eyebrow{margin-bottom:6px;}
.stack{display:flex;flex-direction:column;}
.row{display:flex;align-items:center;}
.between{justify-content:space-between;}
.wrap{flex-wrap:wrap;}
.grow{flex:1;min-width:0;}
.gap-4{gap:4px;}.gap-6{gap:6px;}.gap-8{gap:8px;}.gap-10{gap:10px;}.gap-12{gap:12px;}
.gap-16{gap:16px;}.gap-20{gap:20px;}.gap-24{gap:24px;}.gap-32{gap:32px;}

/* ========================= Sidebar ========================= */
.sidebar{
  width:var(--sidebar-w);flex-shrink:0;background:var(--navy-900);color:#fff;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.sidebar-brand{display:flex;align-items:center;gap:11px;padding:18px 18px 16px;}
.brand-mark{width:34px;height:34px;flex-shrink:0;}
.brand-name{font-size:19px;font-weight:800;letter-spacing:-.02em;color:#fff;}
.brand-sub{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-300);}
.entity-switch{margin:0 12px 8px;padding:9px 11px;border-radius:var(--r-md);background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.09);display:flex;align-items:center;gap:10px;cursor:pointer;transition:background var(--dur);}
.entity-switch:hover{background:rgba(255,255,255,.11);}
.entity-seal{width:26px;height:26px;border-radius:6px;flex-shrink:0;display:grid;place-items:center;
  background:var(--gold-500);color:var(--navy-900);font-weight:800;font-size:13px;}
.nav{flex:1;overflow:auto;padding:8px 10px 16px;}
.nav-section{margin-top:14px;padding:0 10px 6px;font-size:10px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--navy-400);}
.nav-item{display:flex;align-items:center;gap:11px;padding:8px 11px;border-radius:var(--r-md);color:var(--navy-200);
  font-size:14px;font-weight:550;cursor:pointer;transition:all var(--dur-fast);margin-bottom:1px;width:100%;text-align:left;border:none;background:none;}
.nav-item:hover{background:rgba(255,255,255,.07);color:#fff;}
.nav-item.active{background:var(--navy-700);color:#fff;}
.nav-item.active .nav-ico{color:var(--gold-400);}
.nav-ico{width:18px;height:18px;flex-shrink:0;color:var(--navy-300);}
.nav-item .count{margin-left:auto;font-size:11px;font-weight:700;padding:1px 7px;border-radius:99px;
  background:rgba(255,255,255,.12);color:#fff;font-family:var(--font-mono);}
.nav-item .count.alert{background:var(--gold-500);color:var(--navy-900);}
.sidebar-foot{padding:12px;border-top:1px solid rgba(255,255,255,.08);}

/* ========================= Topbar ========================= */
.topbar{height:var(--topbar-h);background:var(--paper);border-bottom:1px solid var(--border-default);
  display:flex;align-items:center;gap:14px;padding:0 24px;position:sticky;top:0;z-index:30;}
.topbar .crumb{font-size:13.5px;color:var(--text-secondary);}
.topbar .crumb b{color:var(--text-primary);font-weight:700;}
.searchbox{display:flex;align-items:center;gap:8px;background:var(--ink-50);border:1px solid var(--border-default);
  border-radius:var(--r-pill);padding:7px 14px;min-width:240px;color:var(--text-secondary);}
.searchbox input{border:none;background:none;outline:none;width:100%;color:var(--text-primary);font-size:13.5px;}
.role-switch{display:flex;align-items:center;gap:8px;padding:5px 6px 5px 11px;border-radius:var(--r-pill);
  border:1px solid var(--border-default);background:var(--paper);cursor:pointer;transition:all var(--dur);}
.role-switch:hover{border-color:var(--border-strong);box-shadow:var(--shadow-xs);}

/* ========================= Buttons ========================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r-md);
  font-weight:650;font-size:14px;padding:9px 15px;border:1px solid transparent;transition:all var(--dur-fast);
  white-space:nowrap;line-height:1;}
.btn:active{transform:translateY(.5px);}
.btn svg{width:17px;height:17px;}
.btn-primary{background:var(--navy-800);color:#fff;}
.btn-primary:hover{background:var(--navy-700);}
.btn-gold{background:var(--gold-500);color:var(--navy-950);}
.btn-gold:hover{background:var(--gold-400);}
.btn-secondary{background:var(--paper);color:var(--text-primary);border-color:var(--border-default);box-shadow:var(--shadow-xs);}
.btn-secondary:hover{background:var(--ink-50);border-color:var(--border-strong);}
.btn-ghost{background:transparent;color:var(--text-secondary);}
.btn-ghost:hover{background:var(--ink-100);color:var(--text-primary);}
.btn-danger{background:var(--red-600);color:#fff;}
.btn-danger:hover{background:var(--red-700);}
.btn-success{background:var(--green-600);color:#fff;}
.btn-success:hover{background:var(--green-700);}
.btn-sm{padding:6px 11px;font-size:13px;border-radius:var(--r-sm);}
.btn-sm svg{width:15px;height:15px;}
.btn-lg{padding:12px 22px;font-size:15.5px;}
.btn-block{width:100%;}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--r-md);
  border:1px solid transparent;background:transparent;color:var(--text-secondary);transition:all var(--dur-fast);}
.icon-btn:hover{background:var(--ink-100);color:var(--text-primary);}
.icon-btn svg{width:18px;height:18px;}

/* ========================= Cards ========================= */
.card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--r-lg);box-shadow:var(--shadow-xs);}
.card-pad{padding:20px;}
.card-hd{padding:16px 20px;border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between;gap:12px;}
.card-bd{padding:20px;}
.tile{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow-xs);}
.tile .tile-label{font-size:12.5px;font-weight:600;color:var(--text-secondary);margin-bottom:7px;display:flex;align-items:center;gap:7px;}
.tile .tile-value{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;}
.tile .tile-sub{font-size:12.5px;color:var(--text-tertiary);margin-top:8px;}

/* ========================= Badges / pills ========================= */
.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:var(--r-pill);
  font-size:12px;font-weight:650;line-height:1.5;border:1px solid transparent;white-space:nowrap;}
.badge svg{width:13px;height:13px;}
.badge-neutral{background:var(--ink-100);color:var(--ink-700);border-color:var(--ink-150);}
.badge-navy{background:var(--navy-50);color:var(--navy-700);border-color:var(--navy-100);}
.badge-gold{background:var(--gold-50);color:var(--gold-700);border-color:var(--gold-200);}
.badge-red{background:var(--red-50);color:var(--red-700);border-color:var(--red-border);}
.badge-amber{background:var(--amber-50);color:var(--amber-700);border-color:var(--amber-border);}
.badge-green{background:var(--green-50);color:var(--green-700);border-color:var(--green-border);}
.badge-engine{background:var(--engine-50);color:var(--engine-700);border-color:var(--engine-border);}
.badge-dot{width:7px;height:7px;border-radius:99px;flex-shrink:0;}

/* risk pill with dot (no color-only meaning: dot + label) */
.riskpill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:650;white-space:nowrap;}
.riskpill .badge-dot{box-shadow:0 0 0 2px rgba(0,0,0,.04);}

/* estimate mark (honest uncertainty) */
.est{color:var(--text-tertiary);font-style:normal;}
.est-mark{display:inline-flex;align-items:center;gap:3px;color:var(--amber-700);font-weight:650;}

/* ========================= Engine / human accountability grammar ========================= */
.proposed{position:relative;border:1.5px dashed var(--engine-border);background:
  repeating-linear-gradient(135deg,var(--engine-50),var(--engine-50) 10px,#fff 10px,#fff 20px);}
.engine-tag{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:var(--r-sm);
  background:var(--engine-100);color:var(--engine-700);font-size:11.5px;font-weight:700;border:1px solid var(--engine-border);}
.engine-tag svg{width:13px;height:13px;}
.conf{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;}
.conf-bars{display:inline-flex;gap:2px;align-items:flex-end;height:12px;}
.conf-bars i{width:3.5px;border-radius:1px;background:var(--ink-200);display:block;}
.conf-bars i.on{background:currentColor;}
.conf-high{color:var(--green-600);} .conf-med{color:var(--amber-600);} .conf-low{color:var(--red-600);}
.signer{display:inline-flex;align-items:center;gap:8px;padding:6px 11px;border-radius:var(--r-md);
  background:var(--gold-50);border:1px solid var(--gold-200);}
.signer .av{width:26px;height:26px;border-radius:99px;flex-shrink:0;}
.decided{border-left:3px solid var(--gold-500);}

/* ========================= Avatars ========================= */
.av{display:inline-grid;place-items:center;border-radius:99px;background:var(--navy-600);color:#fff;
  font-weight:700;font-size:12px;flex-shrink:0;overflow:hidden;}
.av-sm{width:26px;height:26px;font-size:11px;}
.av-md{width:34px;height:34px;font-size:13px;}
.av-lg{width:44px;height:44px;font-size:16px;}
.av-stack{display:flex;}
.av-stack .av{border:2px solid var(--paper);margin-left:-8px;}
.av-stack .av:first-child{margin-left:0;}

/* ========================= Tables ========================= */
.tbl-wrap{overflow:auto;border:1px solid var(--border-subtle);border-radius:var(--r-lg);background:var(--paper);}
table.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px;}
table.tbl th{position:sticky;top:0;background:var(--ink-50);text-align:left;font-size:11.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--text-secondary);padding:10px 14px;
  border-bottom:1px solid var(--border-default);white-space:nowrap;z-index:1;}
table.tbl td{padding:11px 14px;border-bottom:1px solid var(--border-subtle);vertical-align:middle;}
table.tbl tbody tr{transition:background var(--dur-fast);cursor:pointer;}
table.tbl tbody tr:hover{background:var(--navy-50);}
table.tbl tbody tr.sel{background:var(--navy-100);}
table.tbl tbody tr:last-child td{border-bottom:none;}
.cell-strong{font-weight:650;color:var(--text-primary);}
.cell-2{display:flex;flex-direction:column;gap:1px;}
.docname{display:flex;align-items:center;gap:9px;min-width:0;}
.ext{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:var(--r-sm);font-size:9.5px;
  font-weight:800;color:#fff;flex-shrink:0;letter-spacing:.02em;}
.ext-pdf{background:#C0362C;} .ext-doc{background:#2B5797;} .ext-xls{background:#1E7145;}
.ext-ppt{background:#C5471E;} .ext-html{background:var(--navy-600);} .ext-other{background:var(--ink-400);}

/* ========================= Forms ========================= */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.field label{font-size:13px;font-weight:650;color:var(--text-primary);}
.field .hint{font-size:12px;color:var(--text-tertiary);}
.input,.select,.textarea{width:100%;padding:9px 12px;border:1px solid var(--border-default);border-radius:var(--r-md);
  background:var(--paper);color:var(--text-primary);font-size:14px;transition:all var(--dur-fast);outline:none;}
.input:focus,.select:focus,.textarea:focus{border-color:var(--navy-500);box-shadow:var(--shadow-focus);}
.input::placeholder{color:var(--text-tertiary);}
.textarea{resize:vertical;min-height:78px;line-height:1.5;}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;padding-right:34px;}
.checkbox{appearance:none;width:18px;height:18px;border:1.5px solid var(--border-strong);border-radius:5px;
  background:var(--paper);display:inline-grid;place-items:center;cursor:pointer;transition:all var(--dur-fast);flex-shrink:0;}
.checkbox:checked{background:var(--navy-700);border-color:var(--navy-700);}
.checkbox:checked::after{content:"";width:10px;height:10px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;}
.switch{position:relative;width:38px;height:22px;border-radius:99px;background:var(--ink-300);border:none;transition:background var(--dur);flex-shrink:0;cursor:pointer;}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:99px;background:#fff;box-shadow:var(--shadow-xs);transition:transform var(--dur) var(--ease);}
.switch[aria-checked="true"]{background:var(--green-600);}
.switch[aria-checked="true"]::after{transform:translateX(16px);}
.segmented{display:inline-flex;background:var(--ink-100);border-radius:var(--r-md);padding:3px;gap:2px;}
.segmented button{border:none;background:none;padding:6px 13px;border-radius:var(--r-sm);font-size:13px;font-weight:600;color:var(--text-secondary);transition:all var(--dur-fast);}
.segmented button.on{background:var(--paper);color:var(--text-primary);box-shadow:var(--shadow-xs);}

/* ========================= Progress ========================= */
.bar{height:8px;border-radius:99px;background:var(--ink-150);overflow:hidden;}
.bar > i{display:block;height:100%;border-radius:99px;background:var(--navy-600);transition:width var(--dur-slow) var(--ease);}
.bar.gold > i{background:var(--gold-500);}
.bar.green > i{background:var(--green-500);}
.bar.thin{height:5px;}
.seg-bar{display:flex;height:10px;border-radius:99px;overflow:hidden;background:var(--ink-150);}
.seg-bar > span{display:block;height:100%;}

/* ========================= Phase stepper / journey ========================= */
.journey{display:flex;align-items:stretch;gap:0;background:var(--paper);border:1px solid var(--border-subtle);
  border-radius:var(--r-xl);padding:6px;box-shadow:var(--shadow-xs);}
.phase{flex:1;display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:var(--r-md);position:relative;transition:background var(--dur);}
.phase + .phase{margin-left:2px;}
.phase.cur{background:var(--navy-50);}
.phase.done .ph-ico{background:var(--green-600);color:#fff;border-color:var(--green-600);}
.phase.cur .ph-ico{background:var(--navy-800);color:#fff;border-color:var(--navy-800);}
.ph-top{display:flex;align-items:center;gap:9px;}
.ph-ico{width:26px;height:26px;border-radius:99px;border:1.5px solid var(--border-strong);display:grid;place-items:center;
  font-size:12px;font-weight:800;color:var(--text-tertiary);background:var(--paper);flex-shrink:0;}
.ph-ico svg{width:14px;height:14px;}
.ph-name{font-size:13.5px;font-weight:700;}
.ph-sub{font-size:12px;color:var(--text-secondary);}

/* ========================= Drawer / modal ========================= */
.scrim{position:fixed;inset:0;background:rgba(10,27,42,.45);backdrop-filter:blur(2px);z-index:80;
  animation:fade var(--dur) var(--ease);}
.drawer{position:fixed;top:0;right:0;height:100vh;width:560px;max-width:94vw;background:var(--paper);z-index:81;
  box-shadow:var(--shadow-lg);display:flex;flex-direction:column;animation:slidein var(--dur-slow) var(--ease-out);}
.drawer-hd{padding:18px 22px;border-bottom:1px solid var(--border-subtle);display:flex;align-items:flex-start;justify-content:space-between;gap:14px;}
.drawer-bd{flex:1;overflow:auto;padding:22px;}
.drawer-ft{padding:14px 22px;border-top:1px solid var(--border-subtle);display:flex;gap:10px;justify-content:flex-end;background:var(--ink-50);}
.modal{position:fixed;inset:0;display:grid;place-items:center;z-index:81;padding:24px;animation:fade var(--dur) var(--ease);}
.modal-box{background:var(--paper);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);width:100%;max-width:660px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;animation:pop var(--dur-slow) var(--ease-out);}
.modal-hd{padding:20px 24px;border-bottom:1px solid var(--border-subtle);}
.modal-bd{padding:24px;overflow:auto;}
.modal-ft{padding:16px 24px;border-top:1px solid var(--border-subtle);display:flex;gap:10px;justify-content:flex-end;background:var(--ink-50);}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
@keyframes slidein{from{transform:translateX(28px);opacity:.4;}to{transform:none;opacity:1;}}
@keyframes pop{from{transform:scale(.97) translateY(8px);opacity:0;}to{transform:none;opacity:1;}}

/* ========================= Misc ========================= */
.divider{height:1px;background:var(--border-subtle);margin:16px 0;}
.kv{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--border-subtle);font-size:13.5px;}
.kv:last-child{border-bottom:none;}
.kv .k{color:var(--text-secondary);}
.kv .v{font-weight:600;text-align:right;}
.callout{display:flex;gap:11px;padding:13px 15px;border-radius:var(--r-md);font-size:13.5px;line-height:1.5;}
.callout svg{width:18px;height:18px;flex-shrink:0;margin-top:1px;}
.callout-navy{background:var(--navy-50);border:1px solid var(--navy-100);color:var(--navy-800);}
.callout-gold{background:var(--gold-50);border:1px solid var(--gold-200);color:var(--gold-700);}
.callout-amber{background:var(--amber-50);border:1px solid var(--amber-border);color:var(--amber-700);}
.callout-engine{background:var(--engine-50);border:1px solid var(--engine-border);color:var(--engine-700);}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--r-pill);font-size:12.5px;font-weight:600;
  background:var(--paper);border:1px solid var(--border-default);color:var(--text-secondary);cursor:pointer;transition:all var(--dur-fast);}
.chip:hover{border-color:var(--border-strong);}
.chip.on{background:var(--navy-800);color:#fff;border-color:var(--navy-800);}
.dot{width:8px;height:8px;border-radius:99px;display:inline-block;}
.skel{background:linear-gradient(90deg,var(--ink-100),var(--ink-50),var(--ink-100));background-size:200% 100%;animation:shimmer 1.3s infinite;border-radius:var(--r-sm);}
@keyframes shimmer{from{background-position:200% 0;}to{background-position:-200% 0;}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* Entrance: base state is fully visible; animate transform only so content
   can never be stuck invisible (paused clocks, print, reduced motion). */
.fade-up{transform:none;}
@media (prefers-reduced-motion:no-preference){
  .fade-up{animation:fadeUp var(--dur-slow) var(--ease-out);}
}
@keyframes fadeUp{from{transform:translateY(10px);}to{transform:none;}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important;}}

.grid{display:grid;gap:18px;}

/* ========================= Plan gate ========================= */
.plan-gate{position:relative;display:inline-flex;}
.plan-gate.inline{display:inline-flex;}
.plan-gate-inner{pointer-events:none;opacity:.5;filter:grayscale(.4);}
.plan-lock{position:absolute;top:-9px;right:-9px;display:inline-flex;align-items:center;gap:3px;
  font-size:10px;font-weight:700;padding:2px 7px;border-radius:99px;background:var(--navy-800);color:#fff;
  box-shadow:var(--shadow-sm);white-space:nowrap;}
.plan-lock svg{width:11px;height:11px;}

/* marketing */
.mk-section{max-width:1120px;margin:0 auto;padding:0 28px;}
.mk-grid-bg{background-image:linear-gradient(var(--navy-100) 1px,transparent 1px),linear-gradient(90deg,var(--navy-100) 1px,transparent 1px);background-size:34px 34px;}
.kbd{font-family:var(--font-mono);font-weight:700;font-size:11px;padding:1px 6px;border:1px solid var(--border-default);border-radius:5px;background:var(--ink-50);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:1100px){.grid-4{grid-template-columns:repeat(2,1fr);}.grid-3{grid-template-columns:1fr 1fr;}}

/* ---------- Live-auth additions ---------- */
.callout-red{background:var(--red-50);border:1px solid var(--red-200);color:var(--red-700);}

/* ---- Guided Plan (Phase A) ---- */
.t-md { font-size: 15px; line-height: 1.5; }
.avatar-lg { width: 52px; height: 52px; border-radius: 999px; display: flex; align-items: center; justify-content: center; }
.center { display: block; }

.plan-rail { position: relative; display: flex; justify-content: space-between; align-items: flex-start; }
.plan-rail-line { position: absolute; top: 14px; left: 8.3%; right: 8.3%; height: 2px; background: var(--border-subtle); z-index: 0; }
.plan-node-wrap { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.plan-node { width: 28px; height: 28px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; background: var(--paper); border: 2px solid var(--border-subtle); color: var(--text-secondary); }
.plan-node-done { background: var(--green-500); border-color: var(--green-500); color: #fff; }
.plan-node-cur { background: var(--gold-500); border: 2px solid var(--gold-600); box-shadow: 0 0 0 4px var(--gold-100); color: var(--navy-900, #0E2438); }
.plan-node-label { font-size: 11.5px; color: var(--text-secondary); text-align: center; }
.plan-node-label.is-cur { font-weight: 750; color: var(--navy-700, #1D3E5C); }

.gantt { position: relative; }
.gantt-axis { position: relative; height: 18px; margin-left: 150px; }
.gantt-tick { position: absolute; transform: translateX(-50%); font-size: 10.5px; color: var(--text-secondary); font-family: var(--font-mono, monospace); }
.gantt-tick.is-deadline { color: var(--gold-700, #7E6320); font-weight: 700; }
.gantt-body { position: relative; }
.gantt-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--navy-700, #1D3E5C); z-index: 3; }
.gantt-today span { position: absolute; top: -2px; left: 4px; font-size: 9.5px; font-weight: 700; color: var(--navy-700, #1D3E5C); white-space: nowrap; }
.gantt-deadline { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed var(--gold-500); z-index: 2; }
.gantt-row { display: flex; align-items: center; height: 30px; }
.gantt-rowlabel { width: 150px; flex: 0 0 150px; font-size: 12px; color: var(--text-secondary); }
.gantt-track { position: relative; flex: 1; height: 100%; }
.gantt-bar { position: absolute; top: 6px; height: 18px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 800; color: #fff; }
.gantt-bar-done { background: var(--green-500); }
.gantt-bar-cur { background: var(--gold-500); color: var(--navy-900, #0E2438); }
.gantt-bar-future { background: var(--navy-300); }

/* ---- Guided Plan: recommendation option cards (Phase B) ---- */
.opt-card { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; padding: 11px 13px; border: 1.5px solid var(--border-subtle); border-radius: 8px; background: var(--paper); cursor: pointer; font: inherit; transition: border-color .12s ease, background .12s ease; }
.opt-card:hover { border-color: var(--navy-300); }
.opt-card.is-sel { border-color: var(--navy-600); background: #F1F5F9; }
.opt-radio { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 999px; border: 2px solid var(--border-subtle); margin-top: 2px; }
.opt-radio.is-sel { border-color: var(--navy-600); box-shadow: inset 0 0 0 3px var(--navy-600); }

/* ---- Accessibility: skip link + visible keyboard focus ---- */
.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 200;
  background: var(--navy-700); color: #fff;
  padding: 10px 16px; border-radius: 8px; font-weight: 600; font-size: 14px;
  text-decoration: none; transition: top .15s ease;
}
.skip-link:focus { top: 8px; }
:focus-visible { outline: 3px solid var(--gold-400); outline-offset: 2px; border-radius: 4px; }
.content:focus, .content:focus-visible { outline: none; } /* skip-link target shouldn't ring the whole region */

/* ---- Legal pages (Terms of Service, Privacy Policy) ---- */
.legal-wrap { max-width: 760px; margin: 0 auto; padding: 0 24px 64px; }
.legal-head { padding: 24px 0; }
.legal-home { font-weight: 700; color: var(--navy-700); text-decoration: none; font-size: 15px; }
.legal-home:hover { text-decoration: underline; }
.legal-page h1 { font-size: 30px; font-weight: 800; color: var(--text-primary); margin: 8px 0 4px; letter-spacing: -.01em; }
.legal-page h2 { font-size: 18px; font-weight: 700; color: var(--text-primary); margin: 32px 0 8px; }
.legal-page p, .legal-page li { font-size: 15px; line-height: 1.7; color: var(--text-secondary); }
.legal-page ul { padding-left: 22px; margin: 8px 0; }
.legal-page li { margin: 6px 0; }
.legal-page a { color: var(--navy-700); }
.legal-meta { color: var(--text-tertiary); font-size: 13px; margin-bottom: 20px; }
.legal-foot { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--border-subtle); font-size: 13px; color: var(--text-tertiary); }
.legal-foot a { color: var(--text-secondary); text-decoration: none; }
.legal-foot a:hover { text-decoration: underline; }

/* ===== Dashboard (six-surface) — adapted from the approved Design mockup, scoped
   under .dashboard, using existing tokens. No new fonts/CDN; Public Sans already loads. */
.dashboard{max-width:1000px;margin:0 auto;padding:8px 4px 48px;}
.dashboard .dhero{text-align:center;max-width:680px;margin:6px auto 22px;}
.dashboard .dhero h1{font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:1.14;margin:0 0 10px;color:var(--ink-900);}
.dashboard .dhero p{font-size:15.5px;color:var(--ink-600);line-height:1.6;margin:0;}
.dashboard .dhero p b{color:var(--ink-900);}
.dashboard .sectitle{display:flex;align-items:baseline;gap:10px;margin:8px 0 4px;flex-wrap:wrap;}
.dashboard .sectitle h2{font-size:17px;font-weight:800;letter-spacing:-.01em;margin:0;}
.dashboard .sectitle .sub{font-size:13px;color:var(--ink-tertiary);}
.dashboard .modekey{display:flex;gap:16px;margin:12px 0 16px;flex-wrap:wrap;}
.dashboard .modekey span{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-600);font-weight:600;}
.dashboard .modekey .kd{width:9px;height:9px;border-radius:99px;flex:none;}

.dashboard .grid6{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.dashboard .scard{position:relative;background:var(--paper);border:1px solid var(--ink-150);border-radius:var(--r-xl);box-shadow:var(--shadow-xs);padding:18px 18px 14px;display:flex;flex-direction:column;min-height:190px;border-top:3px solid var(--mode);}
.dashboard .scard.dim{opacity:.6;}
.dashboard .scard .sh{display:flex;flex-direction:column;align-items:flex-start;gap:11px;margin-bottom:12px;padding-right:84px;}
.dashboard .scard .sico{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;flex:none;background:var(--mode-soft);color:var(--mode-ink);}
.dashboard .scard h3{font-size:15.5px;font-weight:700;line-height:1.2;margin:0;}
.dashboard .scard .chip{position:absolute;top:15px;right:16px;font-size:10px;font-weight:700;letter-spacing:.02em;padding:3px 9px;border-radius:var(--r-pill);background:var(--mode-soft);color:var(--mode-ink);white-space:nowrap;}
.dashboard .scard .big{display:flex;align-items:baseline;gap:7px;margin-bottom:4px;}
.dashboard .scard .big .n{font-size:27px;font-weight:800;letter-spacing:-.02em;font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums;}
.dashboard .scard .big .u{font-size:12px;color:var(--ink-500);font-weight:600;}
.dashboard .scard .desc{font-size:12.5px;color:var(--ink-600);line-height:1.45;flex:1;}
.dashboard .scard .foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;padding-top:11px;border-top:1px solid var(--ink-100);}
.dashboard .scard .status{font-size:11.5px;font-weight:700;color:var(--mode-ink);display:inline-flex;align-items:center;gap:6px;}
.dashboard .scard .link{font-size:12.5px;font-weight:700;color:var(--navy-700);background:none;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:4px;padding:0;}
.dashboard .scard .xs{margin-top:10px;}
.dashboard .scard .xlink{font-size:11px;font-weight:600;color:var(--ink-400);background:none;border:none;cursor:pointer;padding:0;}
.dashboard .scard .xlink:hover{color:var(--ink-600);text-decoration:underline;}
.dashboard .scard .reason{margin-top:10px;display:flex;flex-direction:column;gap:7px;border-top:1px dashed var(--ink-200);padding-top:10px;}

.dashboard .m-measured{--mode:var(--navy-700);--mode-soft:var(--navy-50);--mode-ink:var(--navy-700);}
.dashboard .m-disc{--mode:var(--amber-500);--mode-soft:var(--amber-50);--mode-ink:var(--amber-700);}
.dashboard .m-reg{--mode:var(--ink-300);--mode-soft:var(--ink-50);--mode-ink:var(--ink-600);}

.dashboard .reco{margin:26px 0 0;background:linear-gradient(110deg,var(--navy-900),var(--navy-800));border-radius:18px;box-shadow:var(--shadow-md);padding:22px 26px;color:#fff;display:flex;align-items:center;gap:22px;position:relative;overflow:hidden;}
.dashboard .reco::after{content:"";position:absolute;right:-40px;top:-30px;width:230px;height:230px;background:radial-gradient(circle,rgba(216,184,99,.22),transparent 68%);}
.dashboard .reco .ricon{width:56px;height:56px;border-radius:15px;background:var(--gold-500);color:var(--navy-950);display:grid;place-items:center;flex:none;box-shadow:0 6px 18px rgba(216,184,99,.32);position:relative;z-index:1;}
.dashboard .reco .rbody{flex:1;min-width:0;position:relative;z-index:1;}
.dashboard .reco .rk{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-300);margin-bottom:6px;}
.dashboard .reco .rt{font-size:19px;font-weight:800;letter-spacing:-.01em;margin-bottom:6px;}
.dashboard .reco .rs{font-size:13.5px;color:var(--navy-200);line-height:1.5;max-width:580px;}
.dashboard .reco .rs b{color:#fff;}
.dashboard .reco .ract{position:relative;z-index:1;flex:none;}
.dashboard .upsell{margin-top:20px;background:var(--gold-50);border:1px solid var(--gold-300);border-radius:var(--r-xl);padding:18px 22px;display:flex;align-items:center;gap:18px;box-shadow:var(--shadow-xs);}
.dashboard .upsell .ul{width:44px;height:44px;border-radius:12px;background:var(--gold-500);color:var(--navy-950);display:grid;place-items:center;flex:none;}
.dashboard .upsell .ub{flex:1;min-width:0;}
.dashboard .upsell .ut{font-size:15px;font-weight:800;margin-bottom:3px;}
.dashboard .upsell .ut b{color:var(--gold-700);}
.dashboard .upsell .us{font-size:12.5px;color:var(--ink-700);line-height:1.5;}
.dashboard .footnote{margin-top:18px;font-size:11.5px;color:var(--ink-tertiary);display:flex;gap:8px;align-items:flex-start;line-height:1.5;}
@media (max-width:820px){ .dashboard .grid6{grid-template-columns:1fr 1fr;} .dashboard .reco{flex-direction:column;align-items:flex-start;} }
@media (max-width:560px){ .dashboard .grid6{grid-template-columns:1fr;} }


/* ADA Beacon — navigation redesign additions for web/styles.css
 * Append these rules to web/styles.css (right after the existing .sidebar-foot
 * rule, ~line 163). They style the new expandable "Accessibility surfaces"
 * parent + its child rows. Everything else (.nav, .nav-item, .nav-section,
 * .count) is unchanged and already in the stylesheet. */

/* expandable parent caret */
.nav-item .caret{margin-left:auto;color:var(--navy-300);display:flex;transition:transform var(--dur-fast);}
.nav-item.open .caret{transform:rotate(90deg);}

/* child group wrapper (kept simple; add a max-height transition if you want
   the expand/collapse animated — honor prefers-reduced-motion if you do) */
.nav-children{overflow:hidden;}

/* child rows — indented under the parent, with a small dot marker */
.nav-child{display:flex;align-items:center;gap:10px;padding:6px 11px 6px 40px;border-radius:var(--r-md);
  color:var(--navy-300);font-size:13px;font-weight:500;cursor:pointer;width:100%;text-align:left;
  border:none;background:none;transition:all var(--dur-fast);position:relative;}
.nav-child:hover{background:rgba(255,255,255,.06);color:#fff;}
.nav-child.active{color:#fff;}
.nav-child .cd{width:5px;height:5px;border-radius:99px;background:var(--navy-500);flex-shrink:0;margin-left:-15px;}
.nav-child.active::before{content:"";position:absolute;left:24px;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:99px;background:var(--gold-400);}