/* stance.css — Stance design system
   Single file imported by base.html.
   All screens inherit these variables. */

:root {
  /* Brand colors */
  --navy:          #0C2D5E;
  --teal:          #1D9E75;
  --teal-dark:     #0F6E56;
  --teal-light:    #E1F5EE;
  --amber:         #BA7517;
  --amber-light:   #FAEEDA;
  --orange:        #EF9F27;
  --red:           #A32D2D;
  --red-light:     #FCEBEB;
  --blue:          #185FA5;
  --blue-light:    #E6F1FB;

  /* Neutrals */
  --gray-bg:       #F5F5F3;
  --gray-line:     #E0DED8;
  --gray-text:     #888780;
  --med-text:      #5F5E5A;
  --dark-text:     #1A1A1A;
  --white:         #FFFFFF;

  /* Typography */
  --font:          'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', monospace;

  /* Layout */
  --max-width:     720px;
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     12px;
  --radius-xl:     16px;
}

/* Grade colors */
.grade-a { color: var(--teal-dark); }
.grade-b { color: var(--teal); }
.grade-c { color: var(--amber); }
.grade-d { color: var(--orange); }
.grade-f { color: var(--red); }

/* Score ring utility */
.score-ring { display: flex; justify-content: center; }

/* Progress bar */
.stance-bar-bg {
  background: var(--gray-bg);
  border-radius: 99px;
  overflow: hidden;
}
.stance-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.4s ease;
}

/* Buttons */
.btn-primary {
  background: var(--teal);
  color: var(--white);
  border: none;
  border-radius: var(--radius-md);
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font);
}
.btn-secondary {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--navy);
  border-radius: var(--radius-md);
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;
  font-family: var(--font);
}

/* Forms — shared field styling promoted from register.html's inline idiom.
   Values match the previously-inlined register fields exactly (font-family
   inherits so inputs render in --font, matching their labels). Flat pages
   (register) rely on .form-field's own 14px bottom margin; wrapped pages
   (login) use .form-group and the margin moves to the group. */
.step-eyebrow {
  font-size: 12px; color: var(--teal); font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; margin: 0 0 4px;
}
.form-group { margin-bottom: 14px; }
.form-label {
  font-size: 12px; color: var(--med-text);
  display: block; margin-bottom: 4px;
}
.form-field {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--gray-line);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 14px;
  background: var(--white);
  box-sizing: border-box;
  margin-bottom: 14px;
}
.form-group .form-field { margin-bottom: 0; }
.form-error { font-size: 13px; color: var(--red); margin: 0 0 12px; line-height: 1.5; }
.form-help  { font-size: 12px; color: var(--med-text); margin: 4px 0 0; }

/* Trust banners */
.banner-teal {
  background: var(--teal-light);
  border-left: 3px solid var(--teal);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 12px 16px;
}
.banner-amber {
  background: var(--amber-light);
  border-left: 3px solid var(--amber);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 12px 16px;
}
.banner-navy {
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  color: var(--white);
}

/* Landscape item category badges */
.badge-program    { background: var(--blue-light); color: var(--blue); }
.badge-benefit    { background: var(--teal-light); color: var(--teal-dark); }
.badge-policy     { background: #EEEDFE; color: #26215C; }
.badge-rate       { background: var(--amber-light); color: var(--amber); }
.badge-alert      { background: var(--red-light); color: var(--red); }

/* ════════════════════════════════════════════════════════════════════
   COMPONENT LAYER · appended (Stance app UI elevation)
   Everything above is unchanged. Additive only — existing tokens and
   utility classes are untouched. CSP-safe: no external assets.
   ════════════════════════════════════════════════════════════════════ */

body { background: var(--gray-bg); font-family: var(--font); margin: 0; color: var(--dark-text); -webkit-font-smoothing: antialiased; }

/* ---- nav ---- */
.app-nav { background: var(--white); border-bottom: 1px solid var(--gray-line); padding: 0 24px; position: sticky; top: 0; z-index: 40; }
.app-nav-in { max-width: var(--max-width); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 58px; }
.app-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.app-brand-mark { height: 26px; width: auto; display: block; }
.app-brand-text { display: flex; flex-direction: column; line-height: 1; }
.app-brand-name { font-size: 15px; font-weight: 600; color: var(--navy); }
.app-brand-sub { font-size: 9px; color: var(--teal); font-weight: 500; letter-spacing: 0.04em; margin-top: 2px; }
.app-nav-right { display: flex; align-items: center; gap: 16px; }
.app-nav-user { font-size: 12px; color: var(--med-text); }
.app-nav-link { font-size: 12px; color: var(--med-text); text-decoration: none; }
.app-nav-link:hover { color: var(--navy); }
.app-nav-link-teal { color: var(--teal); }
.app-nav-link-teal:hover { color: var(--teal-dark); }

/* ---- main ---- */
.app-main { max-width: var(--max-width); margin: 0 auto; padding: 24px 16px; }

/* ---- flash ---- */
.app-flash { background: var(--amber-light); border-left: 3px solid var(--amber); padding: 10px 14px; border-radius: 0 var(--radius-md) var(--radius-md) 0; margin-bottom: 16px; font-size: 13px; color: var(--amber); }

/* ---- footer ---- */
.app-footer { border-top: 1px solid var(--gray-line); padding: 24px; text-align: center; margin-top: 48px; }
.app-footer-logo { height: 26px; width: auto; opacity: 0.8; margin-bottom: 10px; }
.app-footer-tag { font-size: 11px; color: var(--gray-text); margin-bottom: 6px; }
.app-footer-links { font-size: 11px; color: var(--gray-text); }
.app-footer-links a { color: var(--gray-text); text-decoration: none; }
.app-footer-links a:hover { color: var(--teal); text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════════
   SCORE PAGE COMPONENTS · appended
   ════════════════════════════════════════════════════════════════════ */
.score-wrap { max-width: 560px; margin: 8px auto; }
.score-step { font-size: 12px; color: var(--teal); font-weight: 600; letter-spacing: .05em; margin: 0 0 4px; text-align: center; }
.score-head { font-size: 26px; font-weight: 600; color: var(--navy); margin: 0 0 22px; text-align: center; }

/* Score ring (SVG) */
.ring-wrap { display: flex; justify-content: center; margin-bottom: 6px; }
.ring { position: relative; width: 200px; height: 200px; }
.ring svg { transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--gray-line); stroke-width: 12; }
.ring-arc { fill: none; stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset .8s ease; }
.ring-arc.grade-a { stroke: var(--teal-dark); }
.ring-arc.grade-b { stroke: var(--teal); }
.ring-arc.grade-c { stroke: var(--amber); }
.ring-arc.grade-d { stroke: var(--orange); }
.ring-arc.grade-f { stroke: var(--red); }
.ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-num { font-size: 50px; font-weight: 700; line-height: 1; }
.ring-grade { font-size: 15px; font-weight: 600; margin-top: 2px; }
.ring-label { font-size: 10px; color: var(--gray-text); margin-top: 6px; letter-spacing: .08em; }
.score-band { text-align: center; font-size: 13px; color: var(--med-text); margin: 2px 0 0; }

/* Sub-score cards */
.subs { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 22px 0; }
.sub { border: 1px solid var(--gray-line); border-radius: var(--radius-md); padding: 14px; text-align: center; background: var(--white); }
.sub-l { font-size: 11px; color: var(--gray-text); text-transform: uppercase; letter-spacing: .04em; }
.sub-v { font-size: 26px; font-weight: 700; margin-top: 4px; }
.sub-g { font-size: 12px; font-weight: 600; }

/* Generic section */
.score-sec { margin: 26px 0; }
.score-sec h2 { font-size: 18px; font-weight: 600; color: var(--navy); margin: 0 0 10px; }
.score-sec .sec-sub { font-size: 13px; color: var(--med-text); margin: 0 0 12px; }
.score-p { font-size: 14px; color: var(--med-text); line-height: 1.7; margin: 0 0 12px; }

/* Retirement projection */
.retire { background: var(--navy); border-radius: var(--radius-lg); padding: 20px 24px; color: var(--white); }
.retire h2 { color: #fff; font-size: 16px; font-weight: 600; margin: 0 0 14px; }
.retire-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.retire-stat .rs-l { font-size: 11px; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .05em; }
.retire-stat .rs-v { font-size: 26px; font-weight: 700; color: #7FE0C0; margin-top: 4px; line-height: 1.1; }
.retire-stat .rs-sub { font-size: 11px; color: rgba(255,255,255,.5); margin-top: 3px; }
.retire-pending { display: flex; gap: 12px; align-items: flex-start; }
.retire-pending .rp-icon { font-size: 20px; flex-shrink: 0; }
.retire-pending p { font-size: 13.5px; color: rgba(255,255,255,.82); line-height: 1.6; margin: 0; }
.retire-pending a { color: #7FE0C0; font-weight: 600; text-decoration: none; }

/* Narrative / rapid-win placeholder */
.placeholder { border: 1px dashed var(--gray-line); border-radius: var(--radius-md); padding: 18px; text-align: center; background: var(--white); }
.placeholder p { font-size: 13px; color: var(--gray-text); margin: 0; line-height: 1.6; }

/* Rapid win cards */
.win { margin-bottom: 10px; }
.win-top { display: flex; justify-content: space-between; gap: 10px; }
.win-action { color: var(--teal-dark); font-size: 14px; font-weight: 600; }
.win-impact { font-size: 12px; color: var(--teal); white-space: nowrap; }
.win-why { font-size: 13px; color: var(--med-text); margin: 6px 0 0; }
.win-meta { font-size: 11px; color: var(--gray-text); margin: 6px 0 0; }
.win-raw { white-space: pre-wrap; font-family: var(--font-mono); font-size: 12px; color: var(--med-text); background: var(--white); border: 1px solid var(--gray-line); border-radius: var(--radius-md); padding: 12px; }

/* Landscape items */
.land { border: 1px solid var(--gray-line); border-radius: var(--radius-md); padding: 14px; margin-bottom: 10px; background: var(--white); }
.land-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.land-badge { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 99px; letter-spacing: .04em; }
.land-src { font-size: 11px; color: var(--gray-text); }
.land-title { font-size: 14px; font-weight: 600; color: var(--navy); }
.land-sum { font-size: 13px; color: var(--med-text); margin: 6px 0 0; line-height: 1.6; }
.land-link { font-size: 12px; color: var(--teal); text-decoration: none; }

/* Completeness footer */
.complete ul { font-size: 12px; color: var(--med-text); margin: 8px 0 0; padding-left: 18px; line-height: 1.6; }

/* CTA */
.score-cta { text-align: center; margin: 26px 0; }
/* M-3 (F-5): the no-score states on the score page */
.score-state { text-align: left; }
.score-state-head { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--navy); }
.score-state-text { margin: 0; font-size: 13px; color: var(--med-text); line-height: 1.5; }
.score-state-actions { margin: 10px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }
.score-state-actions .btn-secondary { text-decoration: none; display: inline-block; }

/* ════════════════════════════════════════════════════════════════════
   DASHBOARD COMPONENTS · appended
   ════════════════════════════════════════════════════════════════════ */
.dash-wrap { max-width: 560px; margin: 8px auto; }
.dash-head { font-size: 24px; font-weight: 600; color: var(--navy); margin: 0 0 18px; }
.dash-score-card { display: flex; align-items: center; gap: 20px; border: 1px solid var(--gray-line); border-radius: var(--radius-lg); padding: 18px 20px; background: var(--white); margin-bottom: 18px; }
/* small ring (reuses ring-arc grade colors) */
.ring-sm { position: relative; width: 96px; height: 96px; flex-shrink: 0; }
.ring-sm svg { transform: rotate(-90deg); }
.ring-sm .ring-track { stroke-width: 8; }
.ring-sm .ring-arc { stroke-width: 8; }
.ring-sm .ring-center .ring-num { font-size: 28px; }
.ring-sm .ring-center .ring-grade { font-size: 10px; margin-top: 0; }
.dash-score-meta .dsm-l { font-size: 11px; color: var(--gray-text); text-transform: uppercase; letter-spacing: .05em; }
.dash-score-meta .dsm-subs { font-size: 13px; color: var(--med-text); margin-top: 6px; line-height: 1.7; }
.dash-score-meta .dsm-subs strong { color: var(--navy); }
.dash-score-meta a { font-size: 12px; color: var(--teal); text-decoration: none; }
.dash-score-meta a:hover { text-decoration: underline; }
.dash-sec { margin: 18px 0; }
.dash-sec h2 { font-size: 16px; font-weight: 600; color: var(--navy); margin: 0 0 10px; }
.dash-complete { font-size: 12px; color: var(--gray-text); margin-top: 18px; }
.dash-complete a { color: var(--teal); text-decoration: none; }

/* ════════════════════════════════════════════════════════════════════
   PERIOD / STALE-FLAG COMPONENTS · appended
   ════════════════════════════════════════════════════════════════════ */
.period-label { text-align: center; font-size: 12px; color: var(--gray-text); margin: 0 0 14px; letter-spacing: .02em; }
.period-label strong { color: var(--med-text); font-weight: 600; }
.stale-flag { display: flex; align-items: flex-start; gap: 10px; background: var(--amber-light); border-left: 3px solid var(--amber); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 11px 14px; margin: 0 0 16px; }
.stale-flag .sf-icon { font-size: 15px; line-height: 1.3; flex-shrink: 0; }
.stale-flag p { font-size: 12.5px; color: #7a4d0a; line-height: 1.55; margin: 0; }
.stale-flag strong { color: var(--amber); font-weight: 600; }
/* dashboard period sits inline in the score card meta */
.dsm-period { font-size: 11px; color: var(--gray-text); margin-top: 4px; }

/* ════════════════════════════════════════════════════════════════════
   SAVINGS & RESERVES + DEFICIT + RING-PERIOD · appended (Step A)
   ════════════════════════════════════════════════════════════════════ */
/* period label directly under the ring grade */
.ring-period { text-align: center; font-size: 12px; color: var(--gray-text); margin: 4px 0 0; letter-spacing: .02em; }

/* deficit note under a zero budget sub-score */
.sub-deficit { font-size: 10px; color: var(--orange); font-weight: 600; margin-top: 3px; line-height: 1.2; }

/* Savings & reserves section */
.reserves { border: 1px solid var(--gray-line); border-radius: var(--radius-lg); background: var(--white); padding: 18px 20px; }
.reserves-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.reserves-cover .rc-v { font-size: 28px; font-weight: 700; color: var(--navy); line-height: 1; }
.reserves-cover .rc-v .rc-unit { font-size: 14px; font-weight: 600; color: var(--med-text); }
.reserves-cover .rc-l { font-size: 12px; color: var(--gray-text); margin-top: 4px; }
.reserves-bench { font-size: 11px; color: var(--gray-text); text-align: right; white-space: nowrap; }
/* progress toward 6-month benchmark */
.reserves-bar { height: 7px; background: var(--gray-bg); border-radius: 99px; overflow: hidden; margin: 12px 0 4px; }
.reserves-bar-fill { height: 100%; border-radius: 99px; background: var(--teal); transition: width .5s ease; }
.reserves-bar-fill.under { background: var(--orange); }
.reserves-bench-label { font-size: 10.5px; color: var(--gray-text); text-align: right; }
/* the actionable "save $X/mo more" callout */
.reserves-action { display: flex; align-items: flex-start; gap: 9px; background: var(--teal-light); border-radius: var(--radius-md); padding: 11px 13px; margin-top: 14px; }
.reserves-action .ra-icon { font-size: 14px; flex-shrink: 0; line-height: 1.3; }
.reserves-action p { font-size: 13px; color: var(--teal-dark); margin: 0; line-height: 1.5; }
.reserves-action strong { font-weight: 700; }
/* liquid-reserve trend (nmgr_liq, annualized, gentle) */
.reserves-trend { display: flex; align-items: center; gap: 8px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--gray-line); }
.reserves-trend .rt-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.reserves-trend .rt-dot.up { background: var(--teal); }
.reserves-trend .rt-dot.down { background: var(--orange); }
.reserves-trend .rt-text { font-size: 12.5px; color: var(--med-text); line-height: 1.4; }
.reserves-trend .rt-text strong { color: var(--navy); }

/* ════════════════════════════════════════════════════════════════════
   SAVINGS & RESERVES · refinements (rate row, goal pill, funded state)
   ════════════════════════════════════════════════════════════════════ */
/* reserve goal pill next to coverage */
.rc-pill { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 2px 9px; border-radius: 99px; margin-top: 6px; letter-spacing: .02em; }
.rc-pill.under-min { background: var(--red-light); color: var(--red); }
.rc-pill.building  { background: var(--amber-light); color: var(--amber); }
.rc-pill.met       { background: var(--teal-light); color: var(--teal-dark); }
/* savings rate row (actual vs target) */
.sav-rate { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--gray-line); }
.sav-rate .sr-block .sr-l { font-size: 11px; color: var(--gray-text); text-transform: uppercase; letter-spacing: .04em; }
.sav-rate .sr-block .sr-v { font-size: 19px; font-weight: 700; color: var(--navy); margin-top: 2px; line-height: 1; }
.sav-rate .sr-block .sr-v.tgt { color: var(--med-text); }
.sav-rate .sr-arrow { align-self: center; font-size: 13px; color: var(--gray-text); }
/* funded confirmation (incr == 0) */
.reserves-funded { display: flex; align-items: center; gap: 8px; background: var(--teal-light); border-radius: var(--radius-md); padding: 11px 13px; margin-top: 14px; }
.reserves-funded .rf-check { color: var(--teal-dark); font-weight: 700; font-size: 14px; }
.reserves-funded p { font-size: 13px; color: var(--teal-dark); margin: 0; font-weight: 600; }

/* ════════════════════════════════════════════════════════════════════
   DASHBOARD TIER 1 · financial clarity surface
   ════════════════════════════════════════════════════════════════════ */
.dt-wrap { max-width: 600px; margin: 8px auto; }
.dt-head { font-size: 24px; font-weight: 600; color: var(--navy); margin: 0 0 4px; }
.dt-sub { font-size: 13px; color: var(--gray-text); margin: 0 0 20px; }

/* net position header — the calm overview */
.np { background: var(--navy); border-radius: var(--radius-lg); padding: 22px 24px; color: #fff; margin-bottom: 18px; }
.np-net-l { font-size: 11px; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .06em; }
.np-net-v { font-size: 38px; font-weight: 700; line-height: 1.05; margin: 4px 0 2px; }
.np-net-v.pos { color: #7FE0C0; }
.np-net-v.neg { color: #F2B8B8; }
.np-net-v.np-empty { color: rgba(255,255,255,.55); }   /* F-8: blank, not $0 */
.mio-v.mio-empty { color: var(--med-text); }
.mio-sub { font-size: 11px; color: var(--gray-text); margin-top: 2px; }   /* M-4a */
.np-asof { font-size: 11px; color: rgba(255,255,255,.5); }
.np-split { display: flex; gap: 28px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); }
.np-side .nps-l { font-size: 10.5px; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .05em; }
.np-side .nps-v { font-size: 19px; font-weight: 600; margin-top: 3px; }
.np-side .nps-v.have { color: #fff; }
.np-side .nps-v.owe { color: rgba(255,255,255,.85); }

/* section heading shared */
.dt-sec { margin: 22px 0; }
.dt-sec-h { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 12px; }
.dt-sec-h h2 { font-size: 16px; font-weight: 600; color: var(--navy); margin: 0; }
.dt-sec-h .dt-sec-meta { font-size: 11px; color: var(--gray-text); }

/* data-confidence panel */
.dc { display: flex; flex-direction: column; gap: 8px; }
.dc-row { display: flex; align-items: flex-start; gap: 11px; border: 1px solid var(--gray-line); border-radius: var(--radius-md); padding: 12px 14px; background: var(--white); }
.dc-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }
.dc-dot.current { background: var(--teal); }
.dc-dot.stale { background: var(--orange); }
.dc-dot.disconnected { background: var(--red); }
.dc-body { flex: 1; min-width: 0; }
.dc-label { font-size: 13px; font-weight: 600; color: var(--navy); }
.dc-msg { font-size: 12.5px; color: var(--med-text); margin-top: 1px; line-height: 1.45; }
.dc-time { font-size: 11px; color: var(--gray-text); white-space: nowrap; flex-shrink: 0; margin-top: 2px; }
.dc-note { font-size: 12px; color: var(--med-text); background: var(--amber-light); border-radius: var(--radius-md); padding: 10px 13px; margin-top: 2px; line-height: 1.5; }
.dc-blind { font-size: 12px; color: var(--med-text); margin-top: 8px; line-height: 1.6; }
.dc-blind strong { color: var(--amber); }

/* money in / out */
.mio { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mio-card { border: 1px solid var(--gray-line); border-radius: var(--radius-md); padding: 15px 16px; background: var(--white); }
.mio-l { font-size: 11px; color: var(--gray-text); text-transform: uppercase; letter-spacing: .04em; }
.mio-v { font-size: 22px; font-weight: 700; margin-top: 3px; line-height: 1; }
.mio-v.in { color: var(--teal-dark); }
.mio-v.out { color: var(--navy); }
.mio-net { text-align: center; font-size: 12.5px; color: var(--med-text); margin-top: 12px; }
.mio-net strong.surplus { color: var(--teal-dark); }
.mio-net strong.deficit { color: var(--orange); }
/* category bars */
.cats { margin-top: 14px; }
.cat-row { margin-bottom: 11px; }
.cat-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; margin-bottom: 4px; }
.cat-name { color: var(--dark-text); font-weight: 500; }
.cat-name .cat-count { color: var(--gray-text); font-weight: 400; font-size: 11px; margin-left: 5px; }
.cat-amt { color: var(--navy); font-weight: 600; }
.cat-bar { height: 6px; background: var(--gray-bg); border-radius: 99px; overflow: hidden; }
.cat-bar-fill { height: 100%; border-radius: 99px; background: var(--blue); }

/* accounts */
.acct-group { margin-bottom: 16px; }
.acct-group-h { font-size: 12px; font-weight: 600; color: var(--med-text); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 8px; display: flex; justify-content: space-between; }
.acct-group-h .agh-tot { color: var(--navy); }
.acct { display: flex; align-items: center; gap: 12px; border: 1px solid var(--gray-line); border-radius: var(--radius-md); padding: 12px 14px; background: var(--white); margin-bottom: 8px; }
.acct.flagged { border-color: var(--amber); background: var(--amber-light); }
.acct-main { flex: 1; min-width: 0; }
.acct-inst { font-size: 13.5px; font-weight: 600; color: var(--navy); }
.acct-meta { font-size: 11.5px; color: var(--gray-text); margin-top: 1px; }
.acct-cls { display: inline-block; font-size: 9.5px; font-weight: 700; color: var(--blue); background: var(--blue-light); padding: 1px 6px; border-radius: 99px; margin-left: 6px; letter-spacing: .03em; }
.acct-right { text-align: right; flex-shrink: 0; }
.acct-bal { font-size: 15px; font-weight: 700; color: var(--navy); }
.acct-bal.owe { color: var(--med-text); }
.acct-apr { font-size: 11px; color: var(--gray-text); margin-top: 1px; }
.acct-flag-msg { font-size: 11.5px; color: var(--amber); margin-top: 2px; font-weight: 500; }
.acct-na { font-size: 13px; color: var(--gray-text); font-style: italic; }

/* key factors compact grid */
.kf { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kf-card { border: 1px solid var(--gray-line); border-radius: var(--radius-md); padding: 13px 15px; background: var(--white); }
.kf-l { font-size: 11px; color: var(--gray-text); text-transform: uppercase; letter-spacing: .03em; }
.kf-v { font-size: 19px; font-weight: 700; color: var(--navy); margin-top: 3px; line-height: 1.1; }
.kf-sub { font-size: 11px; color: var(--gray-text); margin-top: 2px; }

/* ════════════════════════════════════════════════════════════════════
   SCORE PAGE · TRIAD + METRICS PANEL + ROLLOVERS + TOGGLE
   ════════════════════════════════════════════════════════════════════ */
/* view toggle (CSP-safe pure-CSS radio) */
.tgl { display: flex; gap: 0; background: var(--gray-bg); border-radius: 99px; padding: 3px; margin: 0 auto 20px; width: fit-content; }
.tgl input { position: absolute; opacity: 0; pointer-events: none; }
.tgl label { font-size: 12.5px; font-weight: 600; color: var(--med-text); padding: 6px 16px; border-radius: 99px; cursor: pointer; transition: all .15s ease; white-space: nowrap; }
.tgl label.disabled { color: var(--gray-line); cursor: not-allowed; }
.tgl input:checked + label { background: var(--white); color: var(--navy); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* triad + metrics layout */
.triad-block { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; margin-bottom: 8px; }
@media (max-width: 560px) { .triad-block { grid-template-columns: 1fr; gap: 8px; } }

/* the triad svg */
.triad { width: 100%; max-width: 320px; margin: 0 auto; display: block; }
.triad-node-box { rx: 8; }
.triad-line { stroke: var(--gray-line); stroke-width: 2; }
.triad-node-label { font-size: 10px; font-weight: 600; fill: var(--white); text-transform: uppercase; letter-spacing: .03em; }
.triad-node-score { font-size: 19px; font-weight: 700; fill: var(--white); }
.triad-node-grade-chip { font-size: 9px; font-weight: 700; }
.triad-center-score { font-size: 30px; font-weight: 700; }
.triad-center-label { font-size: 9px; fill: var(--gray-text); text-transform: uppercase; letter-spacing: .06em; }
.triad-meaning { font-size: 9px; fill: var(--gray-text); font-style: italic; }

/* metrics panel */
.metrics { display: flex; flex-direction: column; gap: 7px; }
.metric { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--gray-line); border-radius: var(--radius-md); padding: 9px 12px; background: var(--white); position: relative; }
.metric-l { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--med-text); }
.metric-info { width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--gray-line); color: var(--gray-text); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; line-height: 1; }
.metric-info:hover { border-color: var(--teal); color: var(--teal); }
.metric-vals { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.metric-v { font-size: 14px; font-weight: 700; color: var(--navy); }
.metric-tgt { font-size: 11px; color: var(--gray-text); }
.metric-v.muted { color: var(--gray-text); font-weight: 600; font-style: italic; font-size: 12px; }
/* rollover (tap-to-reveal via hidden checkbox) */
.metric-pop { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; background: var(--navy); color: #fff; font-size: 11.5px; line-height: 1.5; padding: 10px 12px; border-radius: var(--radius-md); z-index: 20; box-shadow: 0 4px 14px rgba(0,0,0,.18); display: none; }
.metric-pop-toggle { position: absolute; opacity: 0; pointer-events: none; }
.metric-pop-toggle:checked ~ .metric-pop { display: block; }

/* personal inflation / coming-soon metric */
.metric.soon { border-style: dashed; }
.metric.soon .metric-v { color: var(--gray-line); }

/* interest-by-class mini row */
.intcls { display: flex; gap: 8px; margin-top: 12px; }
.intcls-card { flex: 1; border: 1px solid var(--gray-line); border-radius: var(--radius-md); padding: 9px 10px; background: var(--white); text-align: center; }
.intcls-l { font-size: 9.5px; color: var(--gray-text); text-transform: uppercase; letter-spacing: .03em; }
.intcls-cls { font-size: 9px; font-weight: 700; color: var(--blue); }
.intcls-v { font-size: 15px; font-weight: 700; color: var(--navy); margin-top: 2px; }
.intcls-sub { font-size: 9.5px; color: var(--gray-text); }

/* ════════════════════════════════════════════════════════════════════
   TRIAD · 2D balance (top-down, gauge-ring hub) — replaces old triangle
   ════════════════════════════════════════════════════════════════════ */
.triad-hero { display: flex; justify-content: center; margin: 8px 0 4px; }
.triad-svg { width: 100%; max-width: 420px; display: block; }
/* weight node text */
.tw-l { font: 600 8px var(--font); fill: #fff; fill-opacity: .9; letter-spacing: .3px; }
.tw-v { font: 800 19px var(--font); fill: #fff; }
.tw-g { font: 700 8px var(--font); fill: #fff; fill-opacity: .85; }
.tw-mean { font: italic 10px var(--font); fill: var(--gray-text); }
/* hub */
.th-score { font: 800 34px var(--font); letter-spacing: -1.5px; }
.th-grade { font: 700 9px var(--font); letter-spacing: .5px; }
/* key-numbers header with toggle */
.kn-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; flex-wrap: wrap; }
.kn-head h2 { margin: 0; }
.tgl-sm label { font-size: 11px; padding: 5px 12px; }
.metrics-full { max-width: 100%; }

/* Processing screen — spinner animation
   (moved from processing.html <style>
    block for CSP compliance) */
@keyframes spin { to { transform: rotate(360deg); } }

/* ── W-2: insufficient-data states (RAA 2026-09-21) ───────────────────────────
   A figure we cannot stand behind renders greyed, with what is missing, in the
   place it would have occupied. It is never hidden and never filled in with a
   placeholder — the participant can see that we do not know, and why. */
.sub-insufficient,
.metric-insufficient .metric-note,
.score-insufficient {
  color: var(--muted, #8A8A85);
  font-weight: 500;
  font-size: 11.5px;
  line-height: 1.4;
}
.sub-insufficient { margin-top: 3px; }
.metric-insufficient { opacity: .72; }
.metric-insufficient .metric-v { color: var(--muted, #8A8A85); }
.metric-insufficient .metric-note { margin: 2px 0 0; }
.score-insufficient { font-size: 13px; }

/* W-3: an Argyle connection that needs the participant. */
.connect-status-action { color: var(--orange, #EF9F27); font-weight: 600; font-size: 12px; }
.connect-row-sub-item { padding-left: 16px; }

/* W-8(c): payroll is linked but no paystubs have arrived. Amber, not red — the
   link is real and the absence is not the participant's error. */
.connect-status-pending {
  color: var(--amber, #BA7517);
  font-weight: 600;
  font-size: 12px;
}

/* W-8(i): the three markers on the living-within-means bar sit at data-driven
   positions and their labels collided whenever two positions were close. Each
   label now has its own row, and a label near either end anchors to that end
   instead of overflowing the card. */
.stance-dash .mkbar.tall { margin-top: 64px; }
.stance-dash .mk .ml { max-width: 92px; }
.stance-dash .mk .ml.row2 { bottom: 48px; }
.stance-dash .mk .ml.below2 { top: 48px; }
.stance-dash .mk[data-anchor="start"] .ml { left: 0; transform: none; text-align: left; }
.stance-dash .mk[data-anchor="end"] .ml { left: auto; right: 0; transform: none; text-align: right; }

/* W-10b: the month the score stands on, and the month still running. */
.score-period { font-size: 12.5px; color: var(--muted, #8A8A85); margin: 4px 0 0; }
.score-mtd { font-size: 12.5px; color: var(--amber, #BA7517); font-weight: 600; margin: 2px 0 0; }

/* ---------------------------------------------------------------------------
   P1 view-as banner. MOVED HERE from static/css/stance.css, unchanged.

   The rules were written into a NEW file at static/css/stance.css by 96ae35d, and nothing
   ever loaded it: base.html links static/stance.css, so the banner has been unstyled since
   view-as was built. Every OTHER stylesheet in this repo lives under static/css/ --
   connect.css, prep.css, processing.css, makeup.css -- and the shared one is the single
   exception at the static/ root, so a change that followed the convention landed beside the
   real file instead of in it. The stray file is deleted; there is no second <link>.
   --------------------------------------------------------------------------- */
/* P1 view-as banner — persistent, unmissable, and never mistaken for content.
   Amber rather than red: an admin viewing a participant is a normal, sanctioned
   act, not an error state. */
.view-as-banner{position:sticky;top:0;z-index:9999;display:flex;align-items:center;
  justify-content:center;gap:16px;padding:9px 16px;background:#8A6100;color:#fff;
  font-size:13.5px;font-weight:700;letter-spacing:.01em;}
.view-as-banner-exit{color:#fff;text-decoration:underline;font-weight:600;}