/* VALOR readability + finish layer — loaded AFTER the accepted style.css,
   which stays byte-for-byte. Refines typography, contrast, elevation and
   adds the restrained cyan/violet illumination. Preserves the accepted
   information hierarchy and Midnight/Cyan identity. */

:root { --valor-cyan: #37D6EA; --valor-violet: #8F7CFF; }

/* Subtle, non-distracting background illumination */
body {
  background:
    radial-gradient(900px 480px at 88% -8%, rgba(55, 214, 234, 0.08), transparent 60%),
    radial-gradient(760px 420px at -6% 8%, rgba(143, 124, 255, 0.07), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
}

/* Typography scale (Inter) */
h1 { font-size: 30px; font-weight: 800; }
h2 { font-size: 19px; font-weight: 700; letter-spacing: -.2px; }
h3 { font-size: 14px; font-weight: 700; }
p { font-size: 14px; }
.stat-num { font-size: 36px; font-weight: 800; letter-spacing: -1px; font-family: Inter, Arial, system-ui; }
.sub, .srccap { font-size: 12px; }
small, td small { font-size: 12px; }
td { font-size: 14px; }
th { font-size: 12px; letter-spacing: .6px; color: #44576b; }
.badge { font-size: 12px; }
.navbtn { font-size: 13.5px; }
.stat-label { font-size: 12.5px; color: #44576b; }
.stat-note { font-size: 12px; }

/* Card elevation + hover/focus finish */
.card, .stat, .tile {
  box-shadow: 0 1px 2px rgba(7, 11, 22, .04), 0 8px 24px rgba(7, 11, 22, .05);
  border-color: rgba(7, 11, 22, .07);
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.stat[role="button"] { cursor: pointer; }
.stat[role="button"]:hover, .tile:hover {
  box-shadow: 0 2px 4px rgba(7, 11, 22, .06), 0 14px 34px rgba(7, 11, 22, .09);
  transform: translateY(-1px);
  border-color: rgba(55, 214, 234, .45);
}
.stat[role="button"]:focus-visible { outline: 2px solid var(--cyan-ink); outline-offset: 3px; }
.navbtn:hover { background: #16233b; }

/* KPI cards: a hairline cyan accent on top */
.stats .stat { position: relative; overflow: hidden; }
.stats .stat::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--valor-cyan), var(--valor-violet));
  opacity: .9;
}

/* Source caption line under widgets */
.srccap {
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgba(7, 11, 22, .10);
  color: #6a7b8c; letter-spacing: .1px;
}

/* Mini stats inside the historical card */
.ministat { background: #f7fbfc; border: 1px solid var(--line); border-radius: 9px; padding: 14px 16px; text-align: left; }
.ministat .stat-label { margin-top: 4px; }

/* Competency ghost rows (awaiting evidence) */
.barrow.ghost { opacity: .55; }
.barrow.ghost .bar { background: repeating-linear-gradient(90deg, #e9eef1, #e9eef1 6px, #f4f7f8 6px, #f4f7f8 12px); }

/* Standards summary list */
.stdlist { margin: 6px 0 2px; padding-left: 18px; }
.stdlist li { font-size: 14px; margin: 7px 0; color: var(--ink); }

/* Topbar cohort select */
.topright #cohort { font-size: 13px; padding: 8px 10px; border-radius: 7px; }

/* Crisp chart labels */
.chart text { font: 11px Inter, Arial; fill: #52647a; }

/* Login card inputs full width */
.logincard label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 2px; }
.logincard input { width: 100%; margin: 6px 0 14px; }
.logincard form button { margin-top: 4px; }

/* Keep the drill-down KPI note legible */
.stat-note { color: var(--cyan-ink); }

/* Login screen */
body.login-mode { background: #070B16; }
.loginwrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.logincard { width: min(420px, 94vw); }

/* Unavailable (never shown as zero) */
.unavail { font-size: 17px; font-weight: 700; color: var(--error); letter-spacing: -.2px; }

/* Historical: data-retrieved vs source-record-updated, kept distinct */
.srctimes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.srctimes > div { background: #f7fbfc; border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px; }
.srctimes strong { display: block; font-size: 14px; margin-top: 4px; color: var(--ink); }

/* Small-text readability + accessible expandable provenance */
.srccap { font-size: 12.5px; color: #52647a; }
.sub { font-size: 12.5px; }
.provdetails { margin-top: 12px; border-top: 1px dashed rgba(7,11,22,.10); padding-top: 4px; }
.provdetails > summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--cyan-ink);
  list-style: none; padding: 8px 0; user-select: none;
}
.provdetails > summary::-webkit-details-marker { display: none; }
.provdetails > summary::before { content: '▸'; display: inline-block; margin-right: 7px; transition: transform .12s ease; }
.provdetails[open] > summary::before { transform: rotate(90deg); }
.provdetails > summary:focus-visible { outline: 2px solid var(--cyan-ink); outline-offset: 3px; border-radius: 4px; }
.provbody { padding: 2px 0 4px; }
.provbody .sub { line-height: 1.65; color: #44576b; }
.provbody .srccap { margin-top: 8px; }