/* Ask Statum CU: the Ask Statum house chrome, not a look of its own.
   tokens.css, chrome.css and statum-areas.css are copied VERBATIM from the production Ask Statum site
   (Amberoon/statum-q2-staging-site-backup, branch production, 4 Oct 2026). This file only adds what the
   credit union pages need on top, using the same tokens. A rule that changes the house look belongs upstream, not here. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700;9..144,800&family=Inter:wght@300;400;500;600;700;800&display=swap');
@import url('tokens.css');
@import url('chrome.css');
@import url('statum-areas.css');
:root{
  --band:rgba(11,61,145,.12); --you:var(--navy); --peer:var(--gold2);
  --sev3:var(--bad); --sev2:var(--purple); --sev1:var(--gold); --sev0:var(--good); --sevn:var(--gray);
  --soft:#faf8f2;
}
a{color:var(--navy)}
:where(a,button,input,select,summary,[tabindex]):focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--gray)}
h1,h2,h3,h4{text-wrap:balance}
p{margin:0}

/* ---- the logo chip, top right on every dashboard (statum-header.css, section A) ---- */
#statumHome{position:absolute;top:42px;right:14px;z-index:9500;display:inline-flex;align-items:center;padding:6px 12px;background:#fff;
  border:1px solid rgba(0,0,0,.12);border-radius:10px;box-shadow:0 1px 6px rgba(0,0,0,.18);text-decoration:none}
#statumHome img{height:35px;width:auto;display:block}
@media(max-width:640px){#statumHome{top:40px;right:10px;padding:4px 8px}#statumHome img{height:18px}}
.hdr{padding:20px 170px 20px 28px;position:relative}
.hdr .tt{color:#fff}
@media(max-width:640px){.hdr{padding:16px 96px 16px 16px}.hdr .tt{font-size:20px}}
.intro{margin-top:16px}

/* ---- rail: picker ---- */
.picker{position:relative}
.picker ul{position:absolute;left:0;right:0;top:100%;margin:4px 0 0;padding:4px;list-style:none;background:#fff;border:1px solid var(--line);
  border-radius:8px;box-shadow:var(--shadow-lg);max-height:340px;overflow:auto;z-index:60}
.picker li{padding:7px 9px;border-radius:6px;cursor:pointer;font-size:13px}
.picker li small{display:block;color:var(--gray);font-size:11.5px}
.picker li[aria-selected="true"],.picker li:hover{background:#fff8e6}
.picker .note{color:var(--gray);cursor:default;font-size:12px}
.myinfo b{color:var(--ink)}
.dashlinks{display:flex;flex-direction:column;gap:2px}
.dashlinks a{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;font-size:13px;font-weight:600;color:var(--ink);text-decoration:none}
.dashlinks a i{width:10px;height:10px;border-radius:3px;background:var(--a-line,var(--gold));flex:none}
.dashlinks a:hover{background:#fff8e6}
.dashlinks a[aria-current="page"]{background:#fff8e6;box-shadow:inset 3px 0 0 var(--gold)}

/* ---- results ---- */
.results h1.cuname{font-family:var(--font-serif);font-size:28px;font-weight:600;line-height:1.15;margin:0}
.results .cumeta{font-size:13px;color:var(--gray);margin-top:4px}
.results h2{font-family:var(--font-serif);font-size:20px;font-weight:600;margin:4px 0 10px}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.kpi{background:#fdfcf8;border:1px solid var(--line);border-radius:12px;padding:13px 15px;min-width:0;display:flex;flex-direction:column;gap:4px}
.kpi .l{font-size:10.5px;font-weight:700;color:var(--gray);text-transform:uppercase;letter-spacing:.4px}
.kpi .v{font-family:var(--font-serif);font-size:26px;font-weight:800;color:var(--navy);line-height:1.1}
.kpi .d{font-size:12px}
.kpi .s{font-size:11.5px;color:var(--gray);line-height:1.35}
.card>p+p{margin-top:8px}
.card .sub{font-size:12.5px;color:var(--gray);margin:-6px 0 12px}
.pctbar{position:relative;height:6px;background:#efece3;border-radius:3px;margin-top:4px}
.pctbar i{position:absolute;top:-3px;width:3px;height:12px;background:var(--navy);border-radius:2px}
.tbl{overflow-x:auto}
.tbl table{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.tbl th{font-size:10.5px;text-transform:uppercase;color:var(--gray);letter-spacing:.3px;text-align:left;padding:8px;border-bottom:2px solid var(--ink);white-space:nowrap;font-weight:700}
.tbl td{padding:8px;border-bottom:1px solid #f0f0ee;vertical-align:top}
.tbl td.r,.tbl th.r{text-align:right}
.tbl tr.you td:first-child,.tbl tr.me td:first-child{font-weight:800;box-shadow:inset 4px 0 0 var(--gold)}
.tbl tr.med td{border-top:2px solid var(--line);color:var(--gray);font-weight:700;background:#faf8f2}
.gap{display:inline-block;font-size:11.5px;color:var(--gray);background:#faf8f2;border:1px dashed var(--line);border-radius:4px;padding:1px 6px}
a.src{display:none}
.srcnum{cursor:pointer}.srcnum:hover{text-decoration:underline dotted;text-underline-offset:3px}
.sev{display:inline-block;font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:999px;color:#fff;white-space:nowrap}
.sev3{background:var(--sev3)}.sev2{background:var(--sev2)}.sev1{background:var(--sev1);color:var(--ink)}.sev0{background:var(--sev0)}.sevn{background:var(--sevn)}
.chartbox{position:relative;height:240px}
.empty{padding:26px;text-align:center;color:var(--gray)}
.stand{background:linear-gradient(90deg,#fffaf0,#fff);border-left:5px solid var(--gold)}
.stand ul{margin:0;padding-left:18px;display:grid;gap:7px}
.stand li{font-size:14.5px;line-height:1.5}
.stand li b{color:var(--navy)}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px}
.legend b{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.sortbtn{all:unset;cursor:pointer}.sortbtn:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
th[aria-sort="ascending"] .sortbtn::after{content:" \25B2";font-size:9px}th[aria-sort="descending"] .sortbtn::after{content:" \25BC";font-size:9px}
.foot img{height:34px;width:auto;display:block;margin:0 auto 8px;mix-blend-mode:multiply}
@media(max-width:640px){.kpi .v{font-size:22px}.results h1.cuname{font-size:23px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* chrome.css uses .num for the gold step circle; here .num is also every figure. The circle applies only in a rail label. */
.num{display:inline;width:auto;height:auto;border-radius:0;background:none;color:inherit;font-weight:inherit;font-size:inherit;margin:0;justify-content:normal}
.lbl .stepn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--gold);color:var(--ink);font-weight:800;font-size:12px;margin-right:9px}
.stand p a,.stand li a{white-space:nowrap}
.stand p{margin-top:10px}
.smgrid>*{min-width:0}.smpanel .chartbox{height:200px}
.cmp2 th{white-space:normal;min-width:84px;vertical-align:bottom}
/* second-level choices inside a tab (which ranking, which view): pills, like the toolbar buttons */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 10px}
.tabs button{font:inherit;font-size:12.5px;font-weight:700;padding:6px 12px;border:1.5px solid var(--line);border-radius:999px;background:#fff;color:var(--gray);cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.tabpane section{margin:0 0 14px}
.tabpane .note{text-align:left}
.tabpane section>*+*,.tabpane>*+*{margin-top:12px}
.mtbl td:first-child{white-space:nowrap}
/* phones: the picker first, then the answer, then the rest of the rail (the house layout puts the whole rail first) */
@media(max-width:880px){.controls{display:contents}.controls>.ctl:first-child{order:0}.results{order:1}.controls>#railx,.controls>.ctl:last-child{order:2}}

/* ---- the site menu: slim strip above every dashboard, a header on every product page ---- */
.sx-strip,.sx-links{display:flex;align-items:center;gap:2px;flex-wrap:nowrap}
.sx-strip{justify-content:flex-end;padding:6px 14px;background:#fdfcf8;border-bottom:1px solid var(--line);min-height:32px}
.sx-strip a,.sx-links a{font-size:12.5px;color:var(--gray);text-decoration:none;padding:5px 9px;border-radius:999px;white-space:nowrap}
.sx-strip a:hover,.sx-links a:hover{color:var(--ink)}
.sx-links a[aria-current="page"]{color:var(--ink);font-weight:600}
.sx-strip a.sx-signin,.sx-links a.sx-signin{font-weight:600;color:var(--ink);background:#fff;border:1px solid var(--line);margin-left:4px}
.sx-strip a.sx-signin:hover,.sx-links a.sx-signin:hover{background:var(--amber);border-color:var(--amber)}
.sx{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;max-width:1080px;margin:0 auto;padding:16px 24px}
.sx-logo img{height:30px;width:auto;display:block;mix-blend-mode:multiply}
@media(max-width:640px){.sx-strip{padding:6px 8px}.sx-strip a,.sx-links a{font-size:12px;padding:5px 6px}.sx{padding:12px 16px}.sx-links{margin-left:-6px}}
@media(max-width:380px){.sx-strip a,.sx-links a{font-size:11.5px;padding:5px 4px}}

/* ---- the Statum GPA (18-month forecast): badge, spider, six component grades ---- */
.gpacard .gpa-top{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:18px;align-items:center}
.gpa-badge{background:var(--navy);color:#fff;border-radius:14px;padding:16px 14px;text-align:center;min-width:0}
.gpa-badge .k{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;opacity:.85}
.gpa-badge .big{font-family:var(--font-serif);font-size:58px;font-weight:700;line-height:1.05;margin:4px 0 0}
.gpa-badge .tier{display:inline-block;margin-top:6px;background:var(--gold);color:#1c2430;font-weight:800;font-size:18px;border-radius:999px;padding:2px 16px}
.gpa-line{font-size:14.5px;margin:12px 0 4px;line-height:1.45}
.gpa-spider{position:relative;height:290px;min-width:0}
.gpa-grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));margin-top:14px}
.gpa-comp{border:1px solid var(--line);border-radius:10px;padding:9px 12px;display:flex;align-items:center;gap:10px;min-width:0;background:#fdfcf8}
.gpa-comp .gl{flex:1;min-width:0;font-size:13px;line-height:1.3}
.gpa-comp .gl b{display:block;font-size:13.5px}
.gpa-comp .gl span{color:var(--gray);font-size:12.5px}
.gpa-chip{flex:none;width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;color:#1c2430;font-variant-numeric:tabular-nums}
.gpa-pos{font-size:14px;margin-top:12px}
.gpa-notes{display:grid;gap:8px;margin-bottom:12px}
.nofc{font-size:15px;font-weight:600;color:var(--ink);background:#faf8f2;border:1px dashed var(--line);border-radius:10px;padding:12px 14px}
.gv{font-variant-numeric:tabular-nums}
.tier{font-weight:700}
.tierbar{display:grid;grid-template-columns:3.2em minmax(0,1fr) 4.5em;gap:8px;align-items:center;font-size:14px;margin:5px 0}
.tierbar .t{height:14px;background:var(--soft);border-radius:4px;overflow:hidden}
.tierbar .t i{display:block;height:100%;background:var(--navy);border-radius:4px}
@media(max-width:640px){.gpacard .gpa-top{grid-template-columns:minmax(0,1fr)}.gpa-badge .big{font-size:48px}.gpa-spider{height:270px}}
/* ---- the trial panel (visitors without an active plan) ---- */
.gate{max-width:520px;margin:48px auto;padding:30px 26px;text-align:center;background:#fff;border:1px solid var(--line);border-radius:14px}
.gate h3{font-family:var(--font-serif);font-weight:500;font-size:26px;margin:0 0 8px;color:#111}
.gate p{color:var(--gray);margin:0 auto 18px;max-width:420px}
.gate .grow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.gb{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 24px;border-radius:999px;background:#111;color:#fff;font:600 15px var(--font-sans);text-decoration:none;border:1px solid #111;cursor:pointer}
.gb:hover{background:var(--amber);border-color:var(--amber);color:#111}
.gb.ghost{background:#fff;color:#111;border-color:var(--line)}
.gb:disabled{opacity:.5;cursor:default}
.gmsg{min-height:20px;margin-top:12px;font-size:14px;color:var(--bad)}
.gate h3{text-transform:none;letter-spacing:-.01em;padding:0;display:block}
.gate h3::before,.gate h3::after{display:none}

/* ======================= R2C (Release 2 part C): HMDA section, PDF button, tour, help page, support form ======================= */
.hmda h3{margin:0 0 10px}
.hmdatbl{width:100%;border-collapse:collapse;font-size:14px}
.hmdatbl th,.hmdatbl td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left}
.hmdatbl thead th{font-size:12px;color:var(--gray);font-weight:600;text-transform:none}
.hmdatbl th.r,.hmdatbl td.r{text-align:right}
.hmdatbl tbody th{font-weight:600;color:var(--ink)}
@media(max-width:640px){.hmdatbl th,.hmdatbl td{padding:7px 6px;font-size:13px}.hmdatbl tbody th{white-space:normal}}
.pdfmsg{font-size:12.5px;color:var(--bad,#b8340a);margin-top:6px}
.pdfmsg:empty{display:none}
.tour-ring{position:fixed;z-index:9990;display:none;border-radius:10px;box-shadow:0 0 0 9999px rgba(15,34,56,.55),0 0 0 3px #FEC71E;pointer-events:none}
.tour-pop{position:fixed;z-index:9991;width:min(340px,calc(100vw - 16px));background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:0 18px 40px rgba(15,34,56,.28);font-size:14.5px;line-height:1.5;color:var(--ink)}
.tour-pop h3{margin:2px 0 6px;font-size:18px}
.tour-pop p{margin:0 0 10px}
.tour-n{font-size:12px;color:var(--gray);font-weight:600}
.tour-gone{color:var(--gray);font-size:13px}
.tour-x{position:absolute;top:6px;right:8px;border:0;background:none;font-size:24px;line-height:1;color:var(--gray);cursor:pointer;min-width:36px;min-height:36px}
.tour-b{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tour-b button,.tour-offer button{font:inherit;font-size:14px;font-weight:600;border-radius:999px;padding:0 16px;min-height:38px;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink)}
.tour-b .tour-next,.tour-offer .tour-yes{background:#111;color:#fff;border-color:#111}
.tour-b .tour-skip{border:0;background:none;color:var(--gray);text-decoration:underline}
.tour-offer{position:fixed;z-index:9980;left:16px;bottom:16px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;max-width:calc(100vw - 32px);background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 14px;box-shadow:0 10px 28px rgba(15,34,56,.2);font-size:14px}
.tour-offer .tour-no{border:0;background:none;color:var(--gray);text-decoration:underline}
/* the menu gained a seventh item (Help): on a phone it wraps instead of scrolling the page sideways */
@media(max-width:640px){.sx{flex-wrap:wrap;gap:6px}.sx-links,.sx-strip{flex-wrap:wrap;justify-content:flex-end}.sx-links{margin-left:0}}
/* ===== BEGIN r2-risk additions (risk depth, directory, watchlist, search). Appended block: other releases add theirs below, not inside it. */
.nc{display:block;font-size:11.5px;color:var(--gray);margin-top:2px}
.mgr{display:inline-block;font-size:11.5px;font-weight:600;color:var(--amber-ink,#92400e);background:#fff8e6;border:1px solid #fcd9a6;border-radius:4px;padding:1px 6px}
.rview{margin:0 0 12px}
.prios{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.prio{display:flex;gap:12px;padding:14px 16px;align-items:flex-start;min-width:0}
.prio .rank{flex:none;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
.prio .pbody{min-width:0;flex:1}
.prio h4{margin:2px 0 0;font-size:14.5px}
.prio .big{font-family:var(--font-serif);font-size:24px;font-weight:800;color:var(--navy);margin:4px 0}
.prio .pline{font-size:13px}
.prio .meta{font-size:12px;color:var(--gray)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.chip{font:inherit;font-size:12.5px;font-weight:600;padding:6px 11px;border:1.5px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);cursor:pointer}
.chip.w{border-color:var(--sev2)}
.chip b{font-variant-numeric:tabular-nums;color:var(--gray);margin-left:3px}
.rarea{margin-top:12px;scroll-margin-top:12px}
.rarea .rhead{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap}
.rarea h3{margin:0}
.rarea .rread{font-size:14px;line-height:1.5;margin:8px 0 10px}
.rtbl td{vertical-align:top}
.rtbl .pctbar{max-width:160px}
@media(max-width:640px){
  .rtbl,.rtbl tbody,.rtbl tr,.rtbl td{display:block;width:100%}
  .rtbl thead{position:absolute;left:-9999px}
  .rtbl tr{border-bottom:1px solid var(--line);padding:8px 0}
  .rtbl td{border:0;padding:3px 0;text-align:left!important}
  .rtbl td:nth-child(2)::before,.rtbl td:nth-child(3)::before,.rtbl td:nth-child(4)::before{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--gray);margin-top:3px}
  .rtbl td:nth-child(2)::before{content:"Value"}.rtbl td:nth-child(3)::before{content:"Against a year earlier"}.rtbl td:nth-child(4)::before{content:"Against peers"}
}
/* seven menu items no longer fit one line at phone width: they wrap */
@media(max-width:640px){.sx-strip,.sx-links{flex-wrap:wrap;row-gap:0}.sx-links{margin-left:0}}
/* ===== END r2-risk additions (risk) */