/* ============ FONTS ============
 * Satoshi (display: the name, headings, figures) and Inter (text), both served from /fonts/.
 * Satoshi is the file Fontshare distributes, unmodified (ITF Free Font License 2.0: self-hosting and
 * app embedding allowed, no subsetting or conversion). Inter is the OFL build in Google's latin and
 * latin-ext subsets (latin-ext carries the dotted letters of transliterated Arabic). */
@font-face{font-family:"Satoshi";src:url("/fonts/Satoshi-Variable.woff2") format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/Inter-Variable-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";src:url("/fonts/Inter-Variable-latin-ext.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ============ TOKENS ============
 * Nisabify brand (2026-10-04): deep teal #0F5C5C, soft gold #C9A86A, ivory #F4F1EA.
 * Gold is a shape or a button with dark ink on it (6.7:1), never text on teal (3.4:1).
 * Contrast (WCAG 2.2 AA), measured: light  ink 14.4 · ink2 7.9 · muted 4.9 · brand 7.4 on bg; white on brand 7.8
 *                                   dark   ink 15.6 · ink2 10.5 · muted 6.6 · brand 7.9 on bg; on-brand ink on brand 7.9 */
:root{
  color-scheme: light;
  --bg:#FBFAF6; --surface:#FFFFFF; --surface2:#F4F1EA;
  --ink:#0B2B2B; --ink2:#3A5350; --muted:#5F726F;
  --grid:#E6E1D5; --axis:#C4BEAF; --border:rgba(11,43,43,.10);
  --brand:#0F5C5C; --brand-deep:#0A4545; --brand-soft:#DCE9E7; --brand-line:#B5D0CC;
  --gold:#C9A86A; --gold-ink:#7A5B1E; --gold-soft:#F5EEDF;
  --on-brand:#fff; --logo-q:#0F5C5C; --logo-qa:.6; --logo-c:#C9A86A;
  --critical-text:#d03b3b;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:"Satoshi","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --good:#0ca30c; --good-text:#006300; --warn:#fab219; --serious:#ec835a; --critical:#d03b3b;
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100; --s5:#e87ba4; --s6:#008300;
  --seq:#2a78d6; --seq-track:#cde2fb; --seq-deep:#1c5cab;
  --shadow:0 1px 2px rgba(11,11,11,.05),0 8px 24px -12px rgba(11,11,11,.12);
  --shadow-lg:0 12px 40px -12px rgba(11,11,11,.25);
  --radius:14px;
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#071C1C; --surface:#0E2828; --surface2:#153434;
  --ink:#F4F1EA; --ink2:#BCCBC8; --muted:#8DA3A0;
  --grid:#1D3B3B; --axis:#2B4A4A; --border:rgba(244,241,234,.10);
  --brand:#5FBDB4; --brand-deep:#7FD0C8; --brand-soft:#0F3535; --brand-line:#1F4F4F;
  --gold:#D6BA82; --gold-ink:#E2CA98; --gold-soft:#2B2416;
  --on-brand:#06201F; --logo-q:#7FD0C8; --logo-qa:.5;
  --critical-text:#f4807f;
  --good:#0ca30c; --good-text:#0ca30c; --warn:#fab219; --serious:#ec835a; --critical:#d03b3b;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181; --s6:#008300;
  --seq:#3987e5; --seq-track:#184f95; --seq-deep:#86b6ef;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.5);
  --shadow-lg:0 12px 40px -12px rgba(0,0,0,.6);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  background:var(--bg); color:var(--ink); font-size:15px; line-height:1.45;
  min-height:100vh;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font:inherit;color:var(--ink)}
a{color:var(--brand)}
::selection{background:var(--brand);color:var(--on-brand)}
h1,h2,h3,h4{line-height:1.2;font-weight:700;font-family:var(--font-display);letter-spacing:-.01em}
svg{display:block}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* ============ APP SHELL ============ */
.app{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
.side{
  position:sticky;top:0;height:100vh;overflow-y:auto;
  background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;padding:18px 12px 12px;
}
.logo{display:flex;align-items:center;gap:10px;padding:4px 10px 16px}
.logo-mark{width:36px;height:36px;display:grid;place-items:center;flex:none}
/* The mark: four circles and a gold centre. The dark theme swaps teal circles for ivory ones. */
.nb-mark{width:100%;height:100%}
.nb-mark .nb-q{fill:var(--logo-q);fill-opacity:var(--logo-qa)}
.nb-mark .nb-c{fill:var(--logo-c)}
.logo-name{font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.logo-sub{font-size:11px;color:var(--muted);margin-top:1px}
.nav{display:flex;flex-direction:column;gap:2px}
.navitem{
  display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;
  color:var(--ink2);font-weight:500;text-align:left;width:100%;
  transition:background .15s,color .15s;
}
.navitem,.tab{text-decoration:none}
.navitem{min-height:48px}
.navitem svg{width:20px;height:20px;flex:none}
.navitem:hover{background:var(--surface2);color:var(--ink)}
.navitem.on{background:var(--brand-soft);color:var(--brand-deep);font-weight:600}
:root[data-theme="dark"] .navitem.on{color:var(--brand)}
.navitem .navbadge{margin-left:auto;background:var(--critical);color:#fff;font-size:10.5px;font-weight:700;border-radius:99px;padding:1px 7px}
.side-foot{margin-top:auto;padding:12px 10px 4px;font-size:11.5px;color:var(--muted);line-height:1.5}
.side-foot b{color:var(--ink2)}

.main{min-width:0;display:flex;flex-direction:column}
.top{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:10px;
  padding:12px 22px;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.top-title{font-size:18px;font-weight:700;margin-right:2px}
.top-logo{display:none;align-items:center;gap:8px}
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:99px;
  background:var(--surface);border:1px solid var(--border);font-size:12.5px;color:var(--ink2);
  white-space:nowrap;
}
.chip b{color:var(--ink);font-weight:600}
.chip .dot{width:7px;height:7px;border-radius:50%;flex:none}
.top-spacer{flex:1}
.iconbtn{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:var(--surface);border:1px solid var(--border);color:var(--ink2);position:relative;
  transition:background .15s;
}
.iconbtn:hover{background:var(--surface2);color:var(--ink)}
.iconbtn .bubble{
  position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;border-radius:99px;
  background:var(--critical);color:#fff;font-size:10px;font-weight:700;
  display:grid;place-items:center;padding:0 4px;border:2px solid var(--bg);
}
.pages{flex:1;padding:20px 22px 110px;max-width:1180px;width:100%;margin:0 auto}
.page{display:none;animation:fadein .18s ease}
.page.on{display:block}
.more-link{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:18px 0;border-bottom:1px solid var(--border);text-decoration:none;text-align:left;color:var(--ink);font-weight:600;min-height:48px}
.more-link:last-child{border-bottom:0}
.more-link>.grow{flex:1;min-width:0}
.more-link span{font-size:12px;font-weight:400;color:var(--muted)}
.more-link:disabled{cursor:default;color:var(--muted)}
.account-identity{margin:12px 0 4px;overflow-wrap:anywhere;font-weight:600}
.app .pages{max-width:920px}
.app .page.on{gap:20px}
.app .card{border-radius:18px;box-shadow:none}
.app .hero{background:var(--brand);color:var(--on-brand);border-radius:22px;padding:28px;box-shadow:var(--shadow)}
.app .hero .pattern{display:none}
.app .hero-label{text-transform:none;letter-spacing:0;opacity:1;font-size:16px}
.app .hero-value{font-family:var(--font-display);font-size:clamp(36px,6vw,56px);margin:12px 0;overflow-wrap:anywhere}
.app .hero-sub{font-size:15px;line-height:1.6;opacity:1}
.app .hero .ruling-stamp{color:inherit;opacity:1}
.app .hero .hbtn{color:inherit;border-color:currentColor;min-height:44px}
.app .hero .hbtn.solid{background:var(--on-brand);color:var(--brand)}
.app .hero :where(a,button,[tabindex]):focus-visible{outline-color:currentColor;box-shadow:none}
.app summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.app .hero summary:focus-visible{outline-color:currentColor}
.screen-date{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:13px}
.year-ring{display:grid;grid-template-columns:112px minmax(0,1fr);gap:24px;align-items:center;margin-top:24px}
.year-ring svg{width:112px;height:112px}
.year-track{stroke:currentColor;opacity:.25}
.year-arc{stroke:currentColor}
.year-centre{fill:currentColor;opacity:.12}
.year-start{fill:var(--gold)}
.year-copy h2{font-size:28px}
.year-copy p{margin-top:8px;font-size:15px}
.year-copy .year-terms{font-size:12px;line-height:1.6}
.year-start-date summary{cursor:pointer;min-height:44px;padding-top:12px}
.year-copy .linkbtn{color:inherit;margin-top:12px;min-height:44px;text-decoration:underline}
.stage-note{margin:20px 0 12px}
.estimate-note{font-size:12px;color:var(--muted);line-height:1.6}
.wealth-today .meter{background:var(--brand-soft)}
.wealth-today .meter i{background:var(--brand)}
.recent-activity .card-sub{margin-bottom:12px}
.comparison summary,.wealth-charts summary{cursor:pointer;font-weight:600;min-height:44px;padding:12px 0;color:var(--brand)}
.comparison .card-sub{margin:8px 0 14px}
.school-comparison{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--brand-line);border-radius:16px;overflow:hidden}
.school-amount{padding:12px 6px;text-align:center;min-width:0}
.school-amount h3{font-family:var(--font-body);font-size:13px;font-weight:500}
.school-amount strong{display:block;font-family:var(--font-display);font-size:clamp(12px,3vw,21px);margin-top:6px;overflow-wrap:anywhere}
.school-amount span{display:block;font-size:11px;margin-top:4px}
.school-amount.selected{background:var(--brand);color:var(--on-brand)}
.calculation-line{padding:14px 0;border-bottom:1px solid var(--border)}
.calculation-line:last-child{border-bottom:0}
.calculation-line .srow{padding-top:0;border:0}
.calculation-line .card-sub{margin:0}
.calculation-line .amt{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.gross-value{color:var(--muted);font-size:13px}
.app .disc .linkbtn{min-height:44px;text-decoration:underline}
.app .disc-body{background:var(--surface2);border-radius:12px;padding:14px;line-height:1.65}
.app .disc-body p+p{margin-top:10px}
.calculation-section .btn{margin-top:14px}
.wealth-charts .card{margin-top:16px}
.screen-actions{display:flex;justify-content:flex-end;gap:12px}
.holding-group{padding:16px 0;border-top:1px solid var(--border)}
.holding-group:first-of-type{border-top:0}
.group-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:8px}
.group-heading h3{font-size:14px;color:var(--muted);font-family:var(--font-body);font-weight:500}
.group-heading span{font-size:14px;color:var(--muted)}
.wealth-debts>.card-sub{margin-bottom:12px}
.debt-summary{margin-top:14px}
.update-scope{margin-top:12px;font-size:12px}
.app .link-inst-acts{display:flex;flex-wrap:wrap;gap:8px}
.app .link-inst-acts .btn{min-height:44px}
.app .link-kinds .link-kind{min-height:56px}
.app .link-kinds .link-kind svg{width:24px;height:24px}
.action-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.action-row :is(a,button){min-height:44px;display:inline-flex;align-items:center}
.partner-slot .btn{margin-top:14px}
.partner-slot .btn:disabled{color:var(--muted);background:var(--surface2);cursor:default}
.direct-giving>h2{font-size:20px;margin-bottom:16px}
.charity-card+.charity-card{margin-top:16px}
.charity-card h3{font-size:18px;margin-bottom:8px}
.charity-card .card-sub+.card-sub{margin-top:10px}
.charity-tags{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.gift-row .linkbtn{min-height:44px;text-decoration:underline}
.app .srow .t1{overflow-wrap:anywhere}
.app .rowline :is(.editb,.xbtn){min-width:44px;min-height:44px;display:grid;place-items:center}
.records-totals .srow{padding:18px 0}
.records-totals .amt{font-size:22px;font-family:var(--font-display)}
.screen-actions label{color:var(--muted);align-self:center}
#recordsYear{width:auto;min-width:100px}
@media (max-width:640px){
  .app .link-inst-acts{width:100%}
}
@media (max-width:860px){
  .app .rowline:not(.link-inst){grid-template-columns:38px minmax(0,1fr) 44px 44px;grid-template-areas:"av name name name" ". amt edit remove"}
  .app .rowline>.editb{grid-area:edit}
  .app .rowline>.xbtn{grid-area:remove}
  .app .rowline>.amt{min-width:0;overflow-wrap:anywhere;white-space:normal}
}
@media (max-width:480px){
  .app .hero{padding:22px}
  .year-ring{grid-template-columns:88px minmax(0,1fr);gap:16px}
  .year-ring svg{width:88px;height:88px}
  .year-copy h2{font-size:23px}
  .year-copy p{font-size:13px}
  .app .top-title{font-size:14px}
}
@keyframes fadein{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}

/* demo banner */
.banner{
  display:flex;align-items:center;gap:10px;margin:14px 22px 0;padding:9px 14px;
  background:var(--gold-soft);border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);
  border-radius:12px;font-size:13px;color:var(--gold-ink);
  max-width:1136px;
}
.banner .grow{flex:1}
.banner button{font-weight:600;color:var(--gold-ink);text-decoration:underline}

/* ============ TAB BAR (mobile) ============ */
.tabbar{display:none}
.fab{
  position:fixed;right:18px;bottom:24px;z-index:60;width:54px;height:54px;border-radius:18px;
  background:var(--brand);color:var(--on-brand);box-shadow:var(--shadow-lg);display:grid;place-items:center;
  transition:transform .15s;
}
.fab:hover{transform:scale(1.05)}
.fab svg{width:26px;height:26px}

/* ============ GRID & CARDS ============ */
.grid{display:grid;gap:14px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g23{grid-template-columns:2fr 1.1fr}
.g32{grid-template-columns:1.1fr 2fr}
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow);min-width:0;
}
.card.pad0{padding:0;overflow:hidden}
.card-head{display:flex;align-items:baseline;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.card-title{font-size:14.5px;font-weight:700}
.card-sub{font-size:12.5px;color:var(--muted)}
.card-head .tools{margin-left:auto;display:flex;gap:6px;align-items:center}
.minibtn{
  font-size:12px;font-weight:600;color:var(--ink2);padding:4px 10px;border-radius:8px;
  border:1px solid var(--border);background:var(--surface);
  display:inline-flex;align-items:center;gap:5px;
}
.minibtn svg{width:14px;height:14px;flex:none}
.xbtn svg,.editb svg{width:17px;height:17px}
.minibtn:hover{background:var(--surface2)}
.minibtn.on{background:var(--brand-soft);color:var(--brand-deep);border-color:var(--brand-line)}
.sectionh{display:flex;align-items:center;gap:10px;margin:22px 0 12px;flex-wrap:wrap}
.sectionh h2{font-size:16px}
.sectionh .tools{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* ============ HERO & STATS ============ */
.hero{
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-deep) 100%);
  color:#fff;border-radius:18px;padding:22px 24px;position:relative;overflow:hidden;
  box-shadow:var(--shadow);
}
:root[data-theme="dark"] .hero{background:linear-gradient(135deg,#0F5C5C 0%,#0A4343 100%)}
.hero .pattern{position:absolute;inset:0;opacity:.12;pointer-events:none}
.hero-label{font-size:13px;font-weight:600;opacity:.85;display:flex;align-items:center;gap:8px}
.hero-label svg{width:17px;height:17px;flex:none}
.hero-value{font-size:46px;font-weight:700;letter-spacing:-.5px;margin:4px 0 2px}
.hero-sub{font-size:13.5px;opacity:.85}
.hero-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;position:relative}
.hero .hbtn{
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);color:#fff;
  padding:8px 15px;border-radius:11px;font-weight:600;font-size:13.5px;backdrop-filter:blur(4px);
}
.hero .hbtn:hover{background:rgba(255,255,255,.24)}
.hero .hbtn.solid{background:#fff;color:var(--brand-deep);border-color:#fff}
.stat{display:flex;flex-direction:column;gap:2px}
.stat-label{font-size:12.5px;color:var(--muted);font-weight:600}
.stat-value{font-size:24px;font-weight:700;letter-spacing:-.2px}
.stat-delta{font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.up{color:var(--good-text)} .down{color:var(--critical)}
.stat-note{font-size:12px;color:var(--muted)}
.statrow{display:flex;align-items:flex-end;gap:10px;justify-content:space-between;flex-wrap:wrap}
.sparkw svg{max-width:100%}

/* ============ METER ============ */
.meter{height:10px;border-radius:99px;background:var(--seq-track);overflow:hidden;position:relative}
.meter>i{display:block;height:100%;border-radius:99px;background:var(--seq);transition:width .5s ease}
.meter-marker{position:absolute;top:0;bottom:0;width:2px;background:var(--ink)}
.meter.gold{background:color-mix(in srgb,var(--gold) 25%,var(--surface2))}
.meter.gold>i{background:var(--gold)}
.meter-row{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:6px}
.meter-row b{color:var(--ink2)}

/* ============ BADGES / TAGS / STATUS ============ */
.tag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:2.5px 9px;border-radius:99px;background:var(--surface2);color:var(--ink2);white-space:nowrap}
.tag.brand{background:var(--brand-soft);color:var(--brand-deep)}
:root[data-theme="dark"] .tag.brand{color:var(--brand)}
.tag.goldt{background:var(--gold-soft);color:var(--gold-ink)}
.tag.okay{background:color-mix(in srgb,var(--good) 14%,var(--surface));color:var(--good-text)}
.tag.crit{background:color-mix(in srgb,var(--critical) 12%,var(--surface));color:var(--critical)}
.tag.warnt{background:color-mix(in srgb,var(--warn) 18%,var(--surface));color:#7a5600}
:root[data-theme="dark"] .tag.warnt{color:var(--warn)}
.status-ic{width:14px;height:14px;flex:none}

/* ============ ALERTS ============ */
.alert{display:flex;gap:11px;padding:12px 14px;border-radius:12px;font-size:13.5px;align-items:flex-start;border:1px solid}
.alert svg{width:18px;height:18px;flex:none;margin-top:1px}
.alert.info{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand-deep)}
:root[data-theme="dark"] .alert.info{color:var(--ink2)}
.alert.due{background:color-mix(in srgb,var(--critical) 8%,var(--surface));border-color:color-mix(in srgb,var(--critical) 35%,transparent);color:var(--ink)}
.alert.warn{background:color-mix(in srgb,var(--warn) 12%,var(--surface));border-color:color-mix(in srgb,var(--warn) 40%,transparent);color:var(--ink)}
.alert b{font-weight:700}
.alert .grow{flex:1}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 16px;border-radius:11px;font-weight:600;font-size:14px;
  border:1px solid var(--border);background:var(--surface);color:var(--ink);
  transition:filter .15s,background .15s;white-space:nowrap;
}
.btn:hover{background:var(--surface2)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.btn.primary:hover{filter:brightness(1.08);background:var(--brand)}
.btn.goldb{background:var(--gold);border-color:var(--gold);color:#0B2B2B}
.btn.goldb:hover{filter:brightness(1.05)}
.btn.danger{color:var(--critical-text);border-color:color-mix(in srgb,var(--critical) 40%,transparent)}
.btn.sm{padding:6px 12px;font-size:13px;border-radius:9px}
.btn.block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn svg{width:16px;height:16px}

/* ============ FORMS ============ */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:13px;min-width:0}
.field label{font-size:12.5px;font-weight:600;color:var(--ink2)}
.field .hint{font-size:11.5px;color:var(--muted)}
.input,select.input,textarea.input{
  width:100%;padding:9px 12px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface);font-size:14px;outline:none;
}
.input:focus{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.seg{display:inline-flex;background:var(--surface2);border-radius:11px;padding:3px;gap:2px;border:1px solid var(--border);flex-wrap:wrap}
.seg button{padding:6px 13px;border-radius:8px;font-size:13px;font-weight:600;color:var(--ink2)}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.switch{position:relative;width:40px;height:24px;border-radius:99px;background:var(--axis);transition:background .2s;flex:none}
.switch.on{background:var(--brand)}
.switch i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.switch.on i{left:19px}
.setrow{display:flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid var(--border)}
.setrow:last-child{border-bottom:none}
.setrow .grow{flex:1;min-width:0}
.setrow .st{font-weight:600;font-size:14px}
.setrow .sd{font-size:12.5px;color:var(--muted);margin-top:1px}

/* ============ TABLES / LISTS ============ */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700;text-align:left;padding:8px 10px;border-bottom:1px solid var(--border)}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tbl th.num{text-align:right}
.tbl tbody tr:hover{background:var(--surface2)}
.rowline{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid var(--border)}
.rowline:last-child{border-bottom:none}
.rowline .grow{flex:1;min-width:0}
.rowline .t1{font-weight:600;font-size:14px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.rowline .t2{font-size:12.5px;color:var(--muted);margin-top:1px}
.rowline .amt{font-weight:700;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.rowline .amt small{display:block;font-weight:500;color:var(--muted);font-size:11.5px}
.avat{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;font-weight:700;font-size:14px;color:#fff}
.avat svg{width:19px;height:19px}
.avat.soft{background:var(--surface2);color:var(--ink2)}
.xbtn{color:var(--muted);padding:5px;border-radius:7px}
.xbtn:hover{color:var(--critical);background:var(--surface2)}
.editb{color:var(--muted);padding:5px;border-radius:7px}
.editb:hover{color:var(--brand);background:var(--surface2)}
.empty{padding:32px 16px;text-align:center;color:var(--muted);font-size:13.5px}
.empty .big{font-size:28px;margin-bottom:6px}

/* ============ CHARTS ============ */
.viz{position:relative}
.viz svg{width:100%;height:auto}
.viz text{font-family:var(--font-body)}
.viz .axis-t{fill:var(--muted);font-size:11px}
.viz .lbl-t{fill:var(--ink2);font-size:11.5px;font-weight:600}
.viz .lbl-b{fill:var(--ink);font-size:11.5px;font-weight:700}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:12.5px;color:var(--ink2)}
.legend .li{display:inline-flex;align-items:center;gap:6px}
.legend .sw{width:10px;height:10px;border-radius:3px;flex:none}
.legend .lv{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.viz-tip{
  position:fixed;z-index:200;pointer-events:none;display:none;
  background:var(--ink);color:var(--bg);padding:7px 11px;border-radius:9px;
  font-size:12.5px;box-shadow:var(--shadow-lg);max-width:240px;line-height:1.4;
}
:root[data-theme="dark"] .viz-tip{background:#f3f2ee;color:#0b0b0b}
.viz-tip b{font-weight:700}
.viz-tip .tt-sub{opacity:.75;font-size:11.5px}
.tblview{max-height:260px;overflow:auto;border:1px solid var(--border);border-radius:10px}
.sparkw{margin-top:6px}

/* ============ NGO CARDS ============ */
.ngo{display:flex;flex-direction:column;gap:9px}
.ngo-head{display:flex;gap:11px;align-items:center}
.ngo-name{font-weight:700;font-size:14.5px}
.ngo-loc{font-size:12px;color:var(--muted)}
.ngo-desc{font-size:13px;color:var(--ink2);line-height:1.5}
.ngo-tags{display:flex;gap:6px;flex-wrap:wrap}
.ngo-foot{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:4px;flex-wrap:wrap}
.ngo-foot a{font-size:12.5px;font-weight:600;text-decoration:none;overflow-wrap:anywhere;min-width:0}
.alloc-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}
.alloc-row:last-child{border-bottom:none}
.alloc-row .nm{flex:1;font-weight:600;font-size:13.5px;min-width:0}
.alloc-row input[type=range]{flex:2;accent-color:var(--brand);min-width:80px}
.alloc-row .pv{width:86px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;font-size:13px}

/* ============ MODALS & SHEETS ============ */
.modalwrap{position:fixed;inset:0;z-index:100;display:none}
.modalwrap.on{display:block}
.scrim{position:absolute;inset:0;background:rgba(8,10,9,.5);backdrop-filter:blur(3px);animation:fadein .15s}
.modal{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(520px,calc(100vw - 28px));max-height:min(86vh,760px);overflow-y:auto;
  background:var(--surface);border-radius:18px;box-shadow:var(--shadow-lg);
  padding:20px 22px;animation:pop .18s ease;border:1px solid var(--border);
}
@keyframes pop{from{opacity:0;transform:translate(-50%,-48%) scale(.98)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.modal-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.modal-head h3{font-size:17px;flex:1}
.modal-foot{display:flex;gap:9px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
.notifwrap{position:fixed;inset:0;z-index:90;display:none}
.notifwrap.on{display:block}
.notif-drawer{
  position:absolute;top:64px;right:18px;width:min(390px,calc(100vw - 24px));max-height:70vh;overflow-y:auto;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lg);
  animation:pop2 .16s ease;
}
@keyframes pop2{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.notif-head{display:flex;align-items:center;padding:13px 16px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface);z-index:1}
.notif-head b{flex:1;font-size:14.5px}
.notif-item{display:flex;gap:11px;padding:12px 16px;border-bottom:1px solid var(--border);align-items:flex-start}
.notif-item:last-child{border-bottom:none}
.notif-item.unread{background:color-mix(in srgb,var(--brand) 5%,var(--surface))}
.notif-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none}
.notif-ic svg{width:17px;height:17px}
.notif-t{font-weight:600;font-size:13.5px}
.notif-b{font-size:12.5px;color:var(--ink2);margin-top:1px;line-height:1.45}
.notif-d{font-size:11px;color:var(--muted);margin-top:3px}
.toastwrap{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{
  background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:12px;font-size:13.5px;font-weight:600;
  box-shadow:var(--shadow-lg);animation:toastin .25s ease;max-width:min(420px,90vw);text-align:center;
}
:root[data-theme="dark"] .toast{background:#f3f2ee;color:#0b0b0b}
@keyframes toastin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ============ ADVISOR CHAT ============ */
.chat{display:flex;flex-direction:column;height:min(58vh,560px)}
.chat-log{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:4px 2px 12px}
.msg{max-width:86%;padding:10px 14px;border-radius:15px;font-size:13.8px;line-height:1.5;white-space:pre-wrap}
.msg.user{align-self:flex-end;background:var(--brand);color:var(--on-brand);border-bottom-right-radius:5px}
.msg.bot{align-self:flex-start;background:var(--surface2);border-bottom-left-radius:5px}
.msg.bot b{font-weight:700}
.chat-chips{display:flex;gap:7px;flex-wrap:wrap;padding:8px 0}
.chat-chip{font-size:12px;font-weight:600;padding:6px 11px;border-radius:99px;background:var(--brand-soft);color:var(--brand-deep);border:1px solid var(--brand-line)}
:root[data-theme="dark"] .chat-chip{color:var(--brand)}
.chat-in{display:flex;gap:8px;padding-top:8px;border-top:1px solid var(--border)}
.chat-in input{flex:1}
.insight{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--border)}
.insight:last-child{border-bottom:none}
.insight .ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none;background:var(--brand-soft);color:var(--brand-deep)}
:root[data-theme="dark"] .insight .ic{color:var(--brand)}
.insight .ic svg{width:16px;height:16px}
.insight .t{font-weight:600;font-size:13.5px}
.insight .b{font-size:12.8px;color:var(--ink2);margin-top:1px;line-height:1.45}

/* ============ PLAID SIM ============ */
.plaid-bank{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--border);border-radius:12px;width:100%;text-align:left;margin-bottom:8px;transition:background .15s}
.plaid-bank:hover{background:var(--surface2)}
.plaid-bank .bn{font-weight:600;font-size:14px}
.plaid-bank .bs{font-size:12px;color:var(--muted)}
.plaid-shield{text-align:center;padding:6px 4px 12px;color:var(--muted);font-size:12px;line-height:1.5}
.spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--surface2);border-top-color:var(--brand);animation:spin .8s linear infinite;margin:22px auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============ MADHHAB PICKER ============ */
.mdh{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mdh button{
  border:1.5px solid var(--border);border-radius:13px;padding:12px 13px;text-align:left;
  background:var(--surface);transition:border-color .15s,background .15s;
}
.mdh button.on{border-color:var(--brand);background:var(--brand-soft)}
.mdh .mn{font-weight:700;font-size:14.5px}
.mdh .md{font-size:11.8px;color:var(--muted);margin-top:2px;line-height:1.4}

/* ============ PRINT ============ */
.printonly{display:none}
@media print{
  body>*{display:none!important}
  body>#printArea{display:block!important}
  .printonly{display:block;font-size:12px;color:#000}
  #printArea h1{font-size:20px;margin-bottom:2px}
  #printArea h2{font-size:14px;margin:16px 0 6px}
  #printArea table{width:100%;border-collapse:collapse;font-size:11.5px}
  #printArea th,#printArea td{border:1px solid #999;padding:5px 8px;text-align:left}
  #printArea .pmuted{color:#555}
}

/* ============ RESPONSIVE ============ */
@media (max-width:1020px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
  .g23,.g32{grid-template-columns:1fr}
}
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .side{display:none}
  /* .setrow is a two-column flex row; below 860px the control column crushes the
     description to ~50px and the row grows past 390px. Stack it. */
  .setrow{flex-direction:column;align-items:stretch;gap:10px}
  .setrow .grow{min-width:0}
  .seg{width:100%}
  .seg button{flex:1}
  .top{padding:10px 14px}
  .top-logo{display:flex}
  .top-title{display:block}
  .pages{padding:16px 14px 130px}
  .banner{margin:12px 14px 0}
  .hero-value{font-size:38px}
  .tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:color-mix(in srgb,var(--surface) 92%,transparent);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-top:1px solid var(--border);
    padding:6px 8px calc(8px + env(safe-area-inset-bottom));
  }
  .tabbar .tab{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    font-size:12px;font-weight:600;color:var(--muted);padding:5px 2px;border-radius:10px;min-height:48px;
  }
  .tabbar .tab svg{width:21px;height:21px}
  .tabbar .tab.on{color:var(--brand-deep)}
  :root[data-theme="dark"] .tabbar .tab.on{color:var(--brand)}
  .fab{bottom:calc(74px + env(safe-area-inset-bottom));width:50px;height:50px;border-radius:16px}
  .g2{grid-template-columns:1fr}
  .frow{grid-template-columns:1fr}
  .stat-value{font-size:21px}
  .g3{grid-template-columns:1fr}
  .chip.hide-m{display:none}
  .notif-drawer{right:12px;top:58px}
  .mdh{grid-template-columns:1fr}
}
@media (max-width:400px){
  .g4{grid-template-columns:1fr 1fr}
  .hero-value{font-size:33px}
}

/* ============ ACCESSIBILITY FIXES (added in the port) ============ */
/* The prototype had no visible focus ring and several controls were pointer-only. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--brand); outline-offset:2px; border-radius:6px;
}
/* An emerald ring on the emerald hero measured 1.0:1 — invisible on the one CTA that
   matters most. Inside the hero, invert it: white ring, dark halo, legible on both. */
.hero :where(a,button,[tabindex]):focus-visible{
  outline:2px solid #fff; outline-offset:2px;
  box-shadow:0 0 0 4px rgba(7,64,47,.65);
}
.chip[role="switch"]{cursor:pointer}
.draft-banner{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--gold-soft);border:1px solid var(--gold);color:var(--gold-ink);
  padding:11px 14px;border-radius:10px;margin-bottom:16px;font-size:13px;line-height:1.5;
}
.draft-banner b{color:var(--gold-ink)}
.draft-banner svg{width:18px;height:18px;flex:none;margin-top:1px}
.navitem svg,.tab svg,.iconbtn svg,.btn svg{width:18px;height:18px;flex:none}
.hero{background:linear-gradient(160deg,var(--brand-deep),var(--brand));color:#fff;
  border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow)}
.hero-label{font-size:12px;opacity:.82;letter-spacing:.04em;text-transform:uppercase}
.hero-value{font-size:clamp(34px,5vw,46px);font-weight:700;line-height:1.05;margin:6px 0 4px;
  font-variant-numeric:tabular-nums}
.hero-sub{font-size:13.5px;opacity:.88}
.hero .ruling-stamp{color:rgba(255,255,255,.72)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.grid2{grid-template-columns:1fr}}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}
.btn.danger{color:var(--critical-text);border-color:var(--critical)}
.tag.brand{background:var(--brand-soft);color:var(--brand);border-color:var(--brand-line)}
.ruling-stamp{
  font-size:11.5px;color:var(--muted);margin-top:10px;
  font-variant-numeric:tabular-nums;
}
.srow{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.srow:last-child{border-bottom:0}
.srow .grow{flex:1;min-width:0}
.tnum{font-variant-numeric:tabular-nums}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* Author display rules outranked the UA [hidden] rule, so el.hidden did nothing. */
[hidden]{display:none!important}

/* Measured 170 characters per line on Methodology at 1440px — 2.3x the readable
   guideline. Cap the measure and loosen the leading on explanatory prose. */
.card-sub{max-width:60ch;line-height:1.55}
.ruling-stamp{max-width:60ch}

/* .top-title became the document's <h1>; keep the visual size it had as a div. */
h1.top-title{font-size:17px;font-weight:700;margin:0;line-height:1.2}

/* ============ ONBOARDING ============ */
.ob-scrim{position:fixed;inset:0;background:rgba(11,11,11,.55);z-index:60}
.ob{
  position:fixed;inset:0;z-index:61;display:grid;place-items:center;
  padding:24px;overflow-y:auto;
}
.ob-inner{
  background:var(--surface);border:1px solid var(--border);border-radius:18px;
  box-shadow:var(--shadow-lg);padding:30px 32px;max-width:620px;width:100%;
  max-height:calc(100dvh - 48px);overflow-y:auto;
}
.ob-inner h2{font-size:24px;margin:14px 0 8px;letter-spacing:-.02em}
.ob-lead{font-size:15px;color:var(--ink2);line-height:1.6;margin-bottom:18px;max-width:56ch}
.ob-hint{
  font-size:13px;color:var(--muted);line-height:1.6;margin-top:14px;max-width:60ch;
  padding-top:12px;border-top:1px solid var(--border);
}
.ob-progress{display:flex;gap:6px;align-items:center}
.ob-dot{width:26px;height:4px;border-radius:99px;background:var(--surface2)}
.ob-dot.on{background:var(--brand)}
.ob-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap}
.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;
}
@media (max-width:560px){
  .ob{padding:0}
  .ob-inner{border-radius:0;min-height:100dvh;max-height:none;padding:24px 20px 32px}
  .ob-actions{position:sticky;bottom:0;background:var(--surface);padding:14px 0 0;margin-top:24px}
  .ob-actions .btn{flex:1}
}

/* ============ AUDIT FIXES — layout, contrast, type ============ */

/* B5.1 — the Zakat screen stacked six blocks with 0px between every one, and Wealth mixed
   0px and 14px on the same page. One rhythm, applied by the page container. */
.pages{display:flex;flex-direction:column;gap:14px}
.page{display:none}
.page.on{display:flex;flex-direction:column;gap:14px}
.page.on>*{margin-top:0!important}

/* B5.3 — the ḥawl meter's two date captions collided with no gutter at every phone width. */
.meter-row{gap:12px;align-items:flex-start}
@media (max-width:480px){
  .meter-row{flex-direction:column;gap:4px}
  .meter-row>span:last-child{text-align:left}
}

/* B5.5 — modal actions sat below the viewport on any screen under ~506px tall. */
.modal{max-height:min(86dvh,760px);overflow-y:auto}
.modal-actions{
  position:sticky;bottom:-20px;background:var(--surface);
  padding-block:12px;margin-top:12px;z-index:1;
}

/* B5.2 — .rowline name text painted outside its box and under the amount column on phones. */
.rowline .t1{overflow-wrap:anywhere}
.rowline .amt small{white-space:normal}
@media (max-width:860px){
  .rowline{
    display:grid;grid-template-columns:38px 1fr auto;
    grid-template-areas:"av name name" ". amt btns";
    row-gap:6px;column-gap:10px;align-items:center;
  }
  .rowline>.avat{grid-area:av}
  .rowline>.grow{grid-area:name;min-width:0}
  .rowline>.amt{grid-area:amt;text-align:left}
  .rowline>button{grid-area:btns}
}

/* B6.1 — every text input was 14px, which forces an iOS Safari zoom on focus. */
input,select,textarea,.input{font-size:16px}
@media (min-width:861px){input,select,textarea,.input{font-size:15px}}

/* B6.3 — the focus rule's border-radius:6px overrode every control's own corner radius. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{border-radius:inherit}

/* B6.5 — the tab bar signalled the active tab with colour alone. */
.tabbar .tab.on{font-weight:700;position:relative}
.tabbar .tab.on::before{
  content:"";position:absolute;top:0;left:22%;right:22%;height:2px;
  background:var(--brand);border-radius:0 0 2px 2px;
}
.tabbar .tab:not(.on){color:var(--ink2)}

/* B7.2 — non-text contrast: card and input borders were 1.24:1, the switch off-state 1.75:1. */
:root{--border:rgba(11,43,43,.22)}
:root[data-theme="dark"]{--border:rgba(244,241,234,.24)}
.switch{background:var(--axis)}
.switch.on{background:var(--brand)}

/* B7.4 — font-weight 650 and 550 exist only on macOS; elsewhere the ladder collapsed to 400/700. */
h1,h2,h3,h4{font-weight:700}
.navitem,.tab,.t1,.card-title{font-weight:600}

/* B7.5 — numeric surfaces that were missing tabular alignment. */
.amt,.stat-value,.hero-value,.lv,.tbl .num,.meter-row b{font-variant-numeric:tabular-nums}

/* ============ AUDIT MINORS ============ */

/* Status pills were computed against their own mixed fills and three fail AA at 11.5px/600:
   .tag.crit 3.95 light / 3.29 dark, .tag.okay 4.39 dark, .tag.goldt 4.28 light.
   Each now gets an ink picked against its own fill rather than reusing the base token. */
.tag.crit{color:#9c2020}
:root[data-theme="dark"] .tag.crit{color:#f4807f}
.tag.goldt{color:#7a5f0f}
:root[data-theme="dark"] .tag.okay{color:#3fd13f}

/* .alert.okay had no rule at all, and bare .alert sets `border:1px solid` with no colour — so
   border-color fell back to currentColor and an okay alert rendered as a hard black hairline box. */
.alert{border-color:transparent}
.alert.okay{
  background:color-mix(in srgb,var(--good) 12%,var(--surface));
  border-color:color-mix(in srgb,var(--good) 35%,transparent);
  color:var(--ink);
}

/* The brokerage intent chip is a real button but inherited .tag's 2.5px padding, measuring
   95x22px — under the WCAG 2.2 SC 2.5.8 minimum. Only the interactive variant changes. */
button.tag{min-height:24px;padding-top:4px;padding-bottom:4px}

/* .sectionh is the prototype's BETWEEN-card heading (22px top margin). The port uses it inside
   cards that already have 16px padding, giving 38px of dead space above every title — which is
   why five `margin:-6px` hacks exist in app.js to claw it back. */
.card>.sectionh:first-child{margin-top:0}
.card>.sectionh{margin-bottom:8px}

/* ============ SIGN-IN WALL, AGE QUESTION, CONSENT ============ */

/* Signed out, the sign-in card is the whole page. Also used by the /auth/ pages. */
.auth{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px 16px}
.auth-card{width:100%;max-width:420px;padding:24px 24px 22px;display:flex;flex-direction:column;gap:14px}
.auth-logo{padding:0}
.auth-title{font-size:22px;letter-spacing:-.01em;outline:none}
.auth-intro,.auth-legacy{max-width:none}
.auth-boot{text-align:center;padding:12px 0}
.auth-methods{display:flex;flex-direction:column;gap:12px}
.auth-form .field:last-of-type{margin-bottom:16px}
.auth-links{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.auth-row{display:flex;gap:8px;flex-wrap:wrap}
.auth-legacy{padding-top:12px;border-top:1px solid var(--border)}
.auth-or{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--border)}
/* A button that reads as a link: an action on this page, not a navigation. 24px tall at least
   (WCAG 2.2 SC 2.5.8) even though it sits in running text. */
.linkbtn{
  color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:2px;
  padding:2px 0;min-height:24px;display:inline-flex;align-items:center;
}
:root[data-theme="dark"] .linkbtn{color:var(--brand-deep)}
.linkbtn:focus-visible,.auth-title:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}

.ob-consent{margin-top:16px}
.ob-check{display:flex;gap:10px;align-items:flex-start;margin-top:12px;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer}
.ob-check input{width:18px;height:18px;margin-top:1px;flex:none;accent-color:var(--brand)}
.form-error{margin-top:8px;font-size:13px;font-weight:600;color:var(--critical)}
:root[data-theme="dark"] .form-error{color:#f4807f}
.auth-card section{display:flex;flex-direction:column;gap:10px}
.auth-links>.linkbtn{font-size:13px}
/* Real navigations to the legal pages, so plain links; padded to the same 24px target as .linkbtn. */
.auth-legal a{color:var(--brand);text-decoration:underline;text-underline-offset:2px;display:inline-block;padding:3px 0}
:root[data-theme="dark"] .auth-legal a{color:var(--brand-deep)}

/* ============ BETA REVIEW, 2026-09-27 ============ */

/* Setup's Continue and Skip sat under the tab bar on a phone and could not be tapped: the overlay
   was z-index 61 and the tab bar, fixed to the same bottom edge, is 70. Setup is a dialog over the
   whole app, so it goes above the bar (and stays below the modal at 100 and the toast at 300).
   The bottom padding keeps the buttons clear of the home indicator. */
.ob-scrim{z-index:80}
.ob{z-index:81}
@media (max-width:560px){
  /* .ob-inner kept `overflow-y:auto` from the desktop card, which made it the scroll container of
     its own sticky footer and so cancelled it: on a long step the buttons were below the fold.
     .ob is what scrolls on a phone, and with this the buttons stay at the bottom of the screen. */
  .ob-inner{overflow:visible;padding-bottom:0}
  .ob-actions{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
}

/* The date field ran past the right edge in iOS Safari, which gives a date input an intrinsic
   width that `width:100%` does not override. Without its native appearance it obeys the box like
   any other input; the min-height is because an empty one then collapses to its padding. */
input[type="date"].input{
  display:block;min-width:0;max-width:100%;min-height:42px;
  -webkit-appearance:none;appearance:none;text-align:left;
}
input[type="date"].input::-webkit-date-and-time-value{text-align:left;margin:0}

/* "Learn more": one plain line by default, the detail behind a link (ui/controls.js disclosure). */
.disc{margin-top:6px}
.disc>.linkbtn{font-size:13px}
.disc-body{margin-top:6px}
.disc-body>:first-child{margin-top:0}
.alert .disc-body p{margin:0}
.mdh+.disc{margin-top:10px}
/* .linkbtn is brand green, which is the info alert's own background tint in the light theme. */
.alert .linkbtn{color:inherit}

/* A row opens its editor when tapped anywhere on it (ui/rows.js rowTap). */
.rowline.tappable{cursor:pointer}
@media (hover:hover){.rowline.tappable:hover{background:var(--surface2)}}
.linkbtn:disabled{opacity:.5;cursor:not-allowed}

/* Connecting accounts (ui/link.js): the two choices, the consent list, an institution's buttons. */
.link-kinds{display:flex;flex-direction:column;gap:10px}
.link-kind{
  display:flex;flex-direction:column;gap:3px;text-align:left;width:100%;padding:13px 14px;
  border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--ink);
}
.link-kind b{font-size:14.5px}
.link-kind span{font-size:12.5px;color:var(--muted)}
.link-kind:hover{background:var(--surface2)}
.link-kind:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.link-consent{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:7px}
/* Focused when their sheet opens so it starts at the top (ui/link.js CONSENT_FOCUS); they are
   text, not controls, so they take no focus ring. */
.link-consent:focus,.link-test:focus{outline:none}
.link-inst-acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
/* The test-mode notice (ui/link.js testSheet). The warning is ink on the gold tint, never gold
   text; the sample sign-in is set apart so it can be read off and typed on Plaid's page. */
.link-test{display:flex;flex-direction:column;gap:10px}
.link-test p{margin:0}
.link-test-warn{
  padding:10px 12px;border-radius:10px;font-size:13.5px;
  background:var(--gold-soft);border:1px solid var(--gold);color:var(--ink);
}
.link-test-signin{
  margin:0;padding:10px 12px;border-radius:10px;display:flex;flex-direction:column;gap:6px;
  background:var(--surface2);border:1px solid var(--border);font-size:13px;
}
.link-test-signin>div{display:flex;gap:10px;align-items:baseline}
.link-test-signin dt{flex:0 0 78px;color:var(--muted);font-weight:600}
.link-test-signin dd{margin:0}
.link-test-signin code{font:600 13.5px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink);user-select:all}
/* Below 860px a .rowline is a grid (B5.2) with no place named for this block, so it fell into the
   38px icon column and its two buttons stacked. It takes the second row, under the name. */
@media (max-width:860px){
  .link-inst>.link-inst-acts{grid-column:2 / -1;justify-content:flex-start}
}
/* "needs reconnecting" and the trading-intent chip: the ink picked for the light gold tint
   (AUDIT MINORS, above) is about 2.5:1 on the dark one. The dark theme uses its own gold ink. */
:root[data-theme="dark"] .tag.goldt{color:var(--gold-ink)}