/* PRESENT-BUILD-260910 - design tokens carried over verbatim from
   4_PRESENT/core_index_builder/Core_Index_Builder_POC.html (briefing
   section 3: "the dashboard should look like the POC's grown-up sibling").
   Structural chrome (header/login/flash) follows 2_PROCESS/verify's app
   shape. */
:root{
  --navy:#1F3864; --blue:#2E75B6; --blue-soft:#EAF1F8;
  --paper:#F7F8FA; --panel:#FFFFFF; --line:#E2E6EC; --line-strong:#CBD3DD;
  --ink:#22272E; --muted:#5A6472; --faint:#8A94A1;
  --cheap:#2E7D32; --cheap-bg:#EAF5EC;
  --mid:#5A6472;
  --rich:#B7791F; --rich-bg:#FBF3E3;
  --fail:#C0392B; --fail-bg:#FBEBE9;
  --ok:#2E7D32;
  --sans:Calibri,"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"SFMono-Regular",ui-monospace,"Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:15px; line-height:1.5}
a{color:inherit}
code{font-family:var(--mono); font-size:12.5px; background:var(--blue-soft); padding:1px 5px; border-radius:4px}

header.top{background:var(--navy); color:#fff; margin-bottom:22px; border-bottom:3px solid var(--blue)}
.top-inner{max-width:1180px; margin:0 auto; padding:20px 20px 22px; display:flex; flex-wrap:wrap;
  align-items:flex-end; justify-content:space-between; gap:14px}
.eyebrow{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#A9C4E4; font-weight:700; margin:0 0 4px}
.top h1{margin:0; font-size:24px; font-weight:700; letter-spacing:-.01em}
.top h1 a{color:#fff; text-decoration:none}
.top .sub{margin:6px 0 0; color:#C9D8EA; font-size:13.5px}
.topnav{display:flex; align-items:center; gap:16px}
.topnav a{color:#DCE7F4; font-size:13px; text-decoration:none}
.topnav a:hover{text-decoration:underline}
.logout{color:#DCE7F4; font-size:13px; text-decoration:none}
.logout:hover{text-decoration:underline}

/* In-page sub-navigation on the admin screens (admin_index/admin_activity/
   admin_feedback) - distinct from .topnav above, which is only legible on
   the dark navy header it was designed for. Local-test fix, 13 Oct 2026:
   reusing .topnav on the white panel background made these links nearly
   invisible (#DCE7F4 on #FFFFFF). */
.subnav{display:flex; align-items:center; gap:16px; margin-bottom:14px}
.subnav a{color:var(--blue); font-size:13px; font-weight:600; text-decoration:none}
.subnav a:hover{color:var(--navy); text-decoration:underline}

.verdict-banner{display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:9px;
  font-size:14px; font-weight:600; margin-bottom:16px; border:1px solid var(--line)}
.verdict-banner.match{background:#F6FBF7; border-color:#CFE6D2; color:var(--ok)}
.verdict-banner.mismatch{background:var(--fail-bg); border-color:#E9C3BD; color:var(--fail)}
.verdict-banner.mixed{background:var(--rich-bg); border-color:#E8D3A6; color:var(--rich)}
.verdict-banner .ic{flex:0 0 22px; width:22px; height:22px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-size:13px; font-weight:800; color:#fff}
.verdict-banner.match .ic{background:var(--ok)}
.verdict-banner.mismatch .ic{background:var(--fail)}
.verdict-banner.mixed .ic{background:var(--rich)}

.zone-label{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--blue);
  font-weight:800; margin:0 0 4px}

.pill{display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px}
.pill.match{background:#EAF5EC; color:var(--ok)}
.pill.mismatch{background:var(--fail-bg); color:var(--fail)}
.pill.no_reference, .pill.no_data{background:#EEF1F5; color:var(--mid)}

.wrap{max-width:1180px; margin:0 auto; padding:0 20px 64px}

.flash{background:var(--rich-bg); border:1px solid #E5CE9E; color:#6f4407; padding:10px 14px;
  margin:0 0 16px; list-style:none; border-radius:8px; font-size:13.5px}

.panel{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:18px 18px 16px;
  margin-bottom:18px; box-shadow:0 1px 2px rgba(31,56,100,.04)}
.panel > h2{margin:0 0 12px; font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--navy); font-weight:700; display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.panel > h2 .tag{font-weight:600; letter-spacing:0; text-transform:none; font-size:11.5px; color:var(--faint)}
.panel h3{font-size:14px; color:var(--navy); margin:0 0 6px}

.hint{font-size:12.5px; color:var(--faint); margin:6px 0 0}

.prov-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px 20px}
.prov-grid > div{display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding:4px 0}
.prov-grid .k{font-size:12.5px; color:var(--muted)}
.prov-grid .v{font-family:var(--mono); font-weight:600; color:var(--navy)}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.card{border:1px solid var(--line); border-radius:9px; padding:12px 13px; background:#fff}
.card.hero{background:linear-gradient(180deg,#fff, #F4F8FC); border-color:#D4E2F0}
.card .k{font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); font-weight:700; margin:0 0 6px}
.card .v{font-family:var(--mono); font-size:28px; font-weight:600; color:var(--navy); line-height:1}
.card .v.pending{color:var(--faint); font-size:22px}
.card .v.partial{color:var(--rich)}
.card .v small{font-size:14px; color:var(--muted); font-weight:500}
.card .note{margin:6px 0 0; font-size:11.5px; color:var(--faint)}
.delta{font-family:var(--mono); font-size:12.5px; font-weight:600; margin-left:8px}
.delta.dn{color:var(--cheap)} .delta.upx{color:var(--rich)}

/* A real value built from too thin a sample (e.g. 7 of 30 stocks) looks as
   authoritative as a full run unless flagged loudly - local-test fix,
   13 Oct 2026 (index_messages.coverage_status). */
.coverage-flag{margin:6px 0 0; font-size:12.5px; font-weight:600; color:var(--rich)}
.partial-badge{display:inline-block; margin-left:6px; padding:2px 8px; border-radius:999px;
  background:var(--rich-bg); color:var(--rich); font-size:11px; font-weight:700; letter-spacing:.02em}

.tbl-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:9px}
table{border-collapse:collapse; width:100%; min-width:760px; font-size:13.5px}
thead th{background:var(--navy); color:#fff; font-weight:600; text-align:right; padding:9px 8px;
  font-size:11.5px; letter-spacing:.02em; white-space:nowrap}
thead th.l{text-align:left}
tbody td{padding:7px 9px; border-bottom:1px solid var(--line); text-align:right; font-family:var(--mono)}
tbody td.l{text-align:left; font-family:var(--sans)}
tbody tr:nth-child(even){background:#FAFBFC}
tbody tr:hover{background:var(--blue-soft)}
td.tick{text-align:left; font-weight:700; color:var(--navy); font-family:var(--mono); letter-spacing:.02em}
td.tick .sub{display:block; font-weight:400; font-family:var(--sans); color:var(--faint); font-size:11.5px}
td.calc{color:var(--ink)}
td.pct{font-weight:700}
td.pending{color:var(--faint); font-style:italic; font-family:var(--sans)}
/* "As of" columns were wrapping onto two lines and truncating on screen
   and in print (local-test fix, 13 Oct 2026) - dates never wrap. */
.date-cell{white-space:nowrap}
.band{display:inline-block; min-width:74px; text-align:center; padding:3px 7px; border-radius:5px;
  font-size:11px; font-weight:700; letter-spacing:.02em}
.band.cheap{background:var(--cheap-bg); color:var(--cheap)}
.band.mid{background:#EEF1F5; color:var(--mid)}
.band.rich{background:var(--rich-bg); color:var(--rich)}

.wl-tier{margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--line)}
.wl-tier:last-child{border-bottom:0; margin-bottom:0; padding-bottom:0}
.wl-tier .count{color:var(--faint); font-weight:400; font-size:12.5px}
.chips{margin:6px 0 0; display:flex; flex-wrap:wrap; gap:6px}
.chip{display:inline-block; font-size:12px; padding:3px 9px; border-radius:999px; background:var(--blue-soft);
  color:var(--navy); font-weight:600; font-family:var(--mono)}
.chip.warn{background:var(--fail-bg); color:var(--fail)}

.qc-list{display:flex; flex-direction:column; gap:8px}
.qc{display:flex; gap:11px; align-items:flex-start; padding:10px 12px; border:1px solid var(--line);
  border-radius:8px; background:#fff; font-size:13.5px}
.qc .ic{flex:0 0 20px; width:20px; height:20px; border-radius:50%; margin-top:1px; display:flex;
  align-items:center; justify-content:center; font-size:12px; font-weight:800; color:#fff}
.qc.pass{border-color:#CFE6D2; background:#F6FBF7} .qc.pass .ic{background:var(--ok)}
.qc.warn{border-color:#E8D3A6; background:var(--rich-bg)} .qc.warn .ic{background:var(--rich)}
.qc.fail{border-color:#E9C3BD; background:var(--fail-bg)} .qc.fail .ic{background:var(--fail)}
.qc .body b{color:var(--ink)}
.qc .body .det{display:block; color:var(--muted); font-size:12.5px; margin-top:2px}

.prose{background:#FCFCFD; border:1px solid var(--line); border-radius:8px; padding:16px 18px;
  font-size:14px; line-height:1.62; color:#2A2F36}
.prose p{margin:0 0 11px} .prose p:last-child{margin-bottom:0} .prose b{color:var(--navy)}

.footnote{font-size:11.5px; color:var(--faint); text-align:center; margin-top:26px;
  border-top:1px solid var(--line); padding-top:14px}

.login-box{max-width:360px; margin:4rem auto; text-align:center}
.login-box label{display:block; margin:14px 0}
.login-box input[type=password]{font:inherit; padding:8px 10px; border:1px solid var(--line-strong);
  border-radius:6px; width:100%}
button, .login-box button{font-family:var(--sans); cursor:pointer; border-radius:7px; font-size:13px;
  padding:8px 13px; border:1px solid var(--line-strong); background:#fff; color:var(--navy); font-weight:600}
button.primary, .login-box button{background:var(--navy); color:#fff; border-color:var(--navy)}
button.primary:hover, .login-box button:hover{background:#16284a}

@media (max-width:860px){
  .cards{grid-template-columns:repeat(1,1fr)}
  .prov-grid{grid-template-columns:repeat(1,1fr)}
  .top h1{font-size:20px}
}

/* Local-test fix, 13 Oct 2026: a printed page can't be scrolled, so the
   screen's horizontal-scroll table (min-width:760px inside an
   overflow-x:auto wrapper) was getting clipped at the page edge instead -
   the exact "As of" truncation Jack saw in print. Let tables shrink to fit
   the printed page instead of forcing their screen-only minimum width. */
@media print{
  .tbl-scroll{overflow-x:visible}
  table{min-width:0}
}