/* Vision-Aid CSR Application - Phase 1
   ------------------------------------------------------------------------------
   Design system taken from the Vision-Aid AI Academy (aitutor.visionaid.org):
   the same navy/gold/blue palette, the same DM Sans + DM Serif Display pairing,
   the same radii, shadows and header treatment, so the two internal applications
   read as one family.

   Responsive across desktop, laptop, tablet and phone (PRD 3.1).
   Breakpoints at 1280 / 1024 / 768 / 480 px.

   Fonts load from Google Fonts when the network allows and fall back to the
   system stack otherwise - this application runs on an internal network that may
   have no outbound access, so no part of the layout depends on a webfont.
   ---------------------------------------------------------------------------- */

:root {
  /* brand */
  --va-navy: #0D2137;
  --va-navy-mid: #152D45;
  --va-blue: #1A6FB5;
  --va-blue-light: #2B8FD4;
  --va-teal: #17A2B8;
  --va-gold: #E8A838;
  --va-gold-light: #F5C563;
  --va-green: #16A34A;
  --va-red: #DC2626;
  --va-orange: #D97706;

  /* surfaces */
  --bg: #F7F9FC;
  --bg-warm: #FAFBFE;
  --surface: #FFFFFF;
  --surface-hover: #F0F4FA;
  --surface-alt: #EDF2F7;

  /* type */
  --text: #1A202C;
  --text-secondary: #4A5568;
  --text-muted: #64748B;
  --text-on-dark: #F7FAFC;
  --text-on-brand: #FFFFFF;

  --border: #E2E8F0;
  --border-strong: #CBD5E0;
  /* 4.19:1 on the page background - WCAG 1.4.11 needs 3:1 for a focus ring. */
  --focus-ring: #A96A00;
  --focus-bg: rgba(214, 158, 46, .12);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;

  --shadow-sm: 0 1px 3px rgba(13, 33, 55, .06), 0 1px 2px rgba(13, 33, 55, .04);
  --shadow-md: 0 4px 12px rgba(13, 33, 55, .08), 0 2px 4px rgba(13, 33, 55, .04);
  --shadow-lg: 0 12px 32px rgba(13, 33, 55, .12), 0 4px 8px rgba(13, 33, 55, .06);

  --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --mono: ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace;

  --ease: cubic-bezier(.4, 0, .2, 1);
  --t-fast: 150ms;

  /* semantic tints used by pills, tiles and banners */
  --ok-bg: #E7F6EE;
  --warn-bg: #FDF3E0;
  --bad-bg: #FDECEB;
  --info-bg: #EAF1FA;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--va-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.25;
  color: var(--va-navy);
  margin: 0 0 .4rem;
}
h1 { font-size: 1.75rem; letter-spacing: .2px; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; color: var(--va-blue); }
p { margin: .3rem 0 .8rem; }
small, .small { font-size: .8rem; color: var(--text-muted); line-height: 1.45; }
.mono { font-family: var(--mono); font-size: .85em; }

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ------------------------------------------------------------------ header */
header.site-header {
  background: var(--va-navy);
  color: var(--text-on-dark);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .15);
}
.header-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 24px;
  height: 72px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-logo {
  height: 48px;
  width: 48px;
  border-radius: 50%;
  padding: 3px;
  background: rgba(255, 255, 255, .1);
  flex: 0 0 auto;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: .3px;
  color: #fff;
}
.brand-sub {
  font-size: 12px;
  font-weight: 500;
  color: var(--va-gold-light);
  letter-spacing: .5px;
  text-transform: uppercase;
  white-space: nowrap;
}
.header-inner .spacer { flex: 1 1 auto; }
.whoami { font-size: .8rem; color: rgba(255, 255, 255, .75); text-align: right;
  line-height: 1.35; }
.whoami b { color: #fff; display: block; font-weight: 600; }
a.nav-link {
  color: rgba(255, 255, 255, .85);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, .2);
  transition: all var(--t-fast) var(--ease);
  white-space: nowrap;
}
a.nav-link:hover {
  background: rgba(255, 255, 255, .1);
  color: #fff;
  border-color: rgba(255, 255, 255, .35);
  text-decoration: none;
}

/* --------------------------------------------------------------- tab strip */
nav.tabs {
  background: var(--va-navy-mid);
  padding: 0 16px;
  display: flex;
  gap: 2px;
  overflow-x: auto;
  position: sticky;
  top: 72px;
  z-index: 99;
  scrollbar-width: thin;
  box-shadow: var(--shadow-sm);
}
nav.tabs a {
  color: rgba(255, 255, 255, .8);
  padding: .7rem .95rem;
  font-size: .875rem;
  font-weight: 500;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: all var(--t-fast) var(--ease);
}
nav.tabs a:hover {
  background: rgba(255, 255, 255, .08);
  color: #fff;
  text-decoration: none;
}
nav.tabs a.on {
  color: #fff;
  font-weight: 700;
  border-bottom-color: var(--va-gold);
  background: rgba(255, 255, 255, .06);
}

main { padding: 1.5rem; max-width: 1600px; margin: 0 auto; }
.page-head { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.1rem; }
.page-head .spacer { flex: 1 1 auto; }
footer {
  padding: 1.5rem 1rem 2.5rem;
  color: var(--text-muted);
  font-size: .78rem;
  text-align: center;
  border-top: 1px solid var(--border);
  margin-top: 1.5rem;
}

/* ------------------------------------------------------------------- cards */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.card-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin-bottom: .7rem; }
.card-head .spacer { flex: 1 1 auto; }

/* --------------------------------------------------------- screen layouts */
/* Two shared column grids, so a screen template never carries inline grid CSS.
   Both collapse to a single column on a narrow viewport by themselves. */
.card-columns { display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grant-columns { display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
/* The stacked right-hand column of the grant screen. */
.grant-side { display: grid; gap: 1rem; align-content: start; }

/* ------------------------------------------------------------------- tiles */
.tiles { display: grid; gap: .9rem; margin-bottom: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--va-navy);
  border-radius: var(--r-md);
  padding: .85rem 1rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.tile:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.tile .label {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); font-weight: 700;
}
.tile .value {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--va-navy);
  margin-top: .2rem;
  letter-spacing: -.01em;
  line-height: 1.15;
}
.tile .sub { font-size: .74rem; color: var(--text-muted); margin-top: .2rem;
  line-height: 1.4; }
.tile.ok { border-left-color: var(--va-green); } .tile.ok .value { color: var(--va-green); }
.tile.warn { border-left-color: var(--va-gold); } .tile.warn .value { color: var(--va-orange); }
.tile.bad { border-left-color: var(--va-red); } .tile.bad .value { color: var(--va-red); }
.tile.teal { border-left-color: var(--va-teal); } .tile.teal .value { color: var(--va-teal); }

/* ------------------------------------------------------------------ tables */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
table { border-collapse: collapse; width: 100%; font-size: .85rem; }
thead th {
  background: var(--va-navy);
  color: #fff;
  text-align: left;
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .02em;
  padding: .6rem .7rem;
  white-space: nowrap;
  position: sticky;
  top: 0;
}
tbody td { padding: .5rem .7rem; border-top: 1px solid var(--border);
  vertical-align: top; }
tbody tr:nth-child(even) { background: var(--bg-warm); }
tbody tr:hover { background: var(--surface-hover); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums;
  white-space: nowrap; }
tfoot td {
  padding: .6rem .7rem;
  border-top: 2px solid var(--va-navy);
  font-weight: 700;
  background: var(--surface-alt);
  color: var(--va-navy);
}
tfoot td.num { text-align: right; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.empty { padding: 2rem; text-align: center; color: var(--text-muted);
  font-size: .9rem; }

/* ------------------------------------------------------------------- pills */
.pill {
  display: inline-block; padding: .15rem .55rem; border-radius: 999px;
  font-size: .72rem; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent;
}
.pill.grey { background: var(--surface-alt); color: var(--text-secondary);
  border-color: var(--border-strong); }
.pill.blue { background: var(--info-bg); color: var(--va-blue);
  border-color: #C3D5EC; }
.pill.green { background: var(--ok-bg); color: #12703A; border-color: #BFE3CE; }
.pill.amber { background: var(--warn-bg); color: #8A5504; border-color: #F0DCB4; }
.pill.red { background: var(--bad-bg); color: #A81E1E; border-color: #F2C6C3; }
.pill.teal { background: #E4F4F6; color: #0E7C8C; border-color: #BDE0E6; }
.pill.gold { background: #FDF3E0; color: #8A5504; border-color: var(--va-gold-light); }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: .55rem 1.1rem;
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 700;
  border: none;
  background: var(--va-blue);
  color: #fff;
  cursor: pointer;
  text-align: center;
  line-height: 1.35;
  box-shadow: 0 2px 8px rgba(26, 111, 181, .25);
  transition: all var(--t-fast) var(--ease);
}
.btn:hover {
  background: #1862A0;
  box-shadow: 0 4px 16px rgba(26, 111, 181, .35);
  transform: translateY(-1px);
  color: #fff;
  text-decoration: none;
}
.btn:active { transform: translateY(0); }
.btn.sec {
  background: var(--surface); color: var(--va-navy);
  border: 1px solid var(--border-strong); box-shadow: none;
}
.btn.sec:hover { background: var(--surface-hover); box-shadow: var(--shadow-sm); }
.btn.gold { background: var(--va-gold); color: #3B2A05;
  box-shadow: 0 2px 8px rgba(232, 168, 56, .3); }
.btn.gold:hover { background: #D99A28; color: #3B2A05; }
.btn.sm { padding: .32rem .65rem; font-size: .78rem; border-radius: var(--r-sm); }
.btn.danger { background: var(--va-red); box-shadow: 0 2px 8px rgba(220, 38, 38, .25); }
.btn.danger:hover { background: #B91C1C; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.btn-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* ------------------------------------------------------------------- forms */
form .grid { display: grid; gap: .8rem 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
label { display: block; font-size: .78rem; font-weight: 600;
  color: var(--text-secondary); margin-bottom: .25rem; }
label .req { color: var(--va-red); }
input[type=text], input[type=date], input[type=number], input[type=email],
input[type=password], input[type=file], select, textarea {
  width: 100%;
  padding: .5rem .65rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: .875rem;
  background: #fff;
  color: var(--text);
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
input:focus, select:focus, textarea:focus {
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
  border-color: var(--va-blue);
  background: var(--focus-bg);
}
input[readonly], input[disabled], .derived {
  background: var(--surface-alt); color: var(--text-muted); cursor: not-allowed;
}
textarea { min-height: 66px; resize: vertical; }
.checkline { display: flex; align-items: center; gap: .45rem; font-size: .85rem;
  margin-top: 1.1rem; }
.checkline input { width: auto; }
.field-note { font-size: .72rem; color: var(--text-muted); margin-top: .2rem;
  line-height: 1.4; }
fieldset {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: .8rem 1rem 1.1rem;
  margin: 0 0 1.1rem;
  background: var(--bg-warm);
}
legend { font-family: var(--font-display); font-size: 1rem; color: var(--va-navy);
  padding: 0 .4rem; }

.filters { display: flex; gap: .7rem; flex-wrap: wrap; align-items: flex-end; }
.filters > div { min-width: 145px; }
.filters .grow { flex: 1 1 220px; }

/* ------------------------------------------------------------------ banners */
.banner {
  padding: .7rem .95rem; border-radius: var(--r-md); margin-bottom: 1.1rem;
  font-size: .87rem; border: 1px solid; display: flex; gap: .5rem;
  box-shadow: var(--shadow-sm);
}
.banner.ok { background: var(--ok-bg); border-color: #BFE3CE; color: #12703A; }
.banner.err { background: var(--bad-bg); border-color: #F2C6C3; color: #A81E1E; }
.banner.info { background: var(--info-bg); border-color: #C3D5EC; color: var(--va-navy); }
.banner.warn { background: var(--warn-bg); border-color: var(--va-gold-light);
  color: #8A5504; }
.banner b { font-weight: 700; }

/* ------------------------------------------------------------------- login */
.login-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
  background: linear-gradient(155deg, #0D2137 0%, #152D45 45%, #1A6FB5 100%);
}
.login-card {
  background: #fff; border-radius: var(--r-xl); padding: 2rem 1.85rem;
  width: 100%; max-width: 420px; box-shadow: 0 20px 48px rgba(13, 33, 55, .35);
}
.login-brand { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.3rem; }
.login-brand img { height: 56px; width: 56px; border-radius: 50%;
  background: var(--surface-alt); padding: 4px; }
.login-brand .brand-name { color: var(--va-navy); font-size: 21px; }
.login-brand .brand-sub { color: var(--va-blue); }
.login-card h1 { font-size: 1.2rem; margin-bottom: .15rem; }
.login-card .sub { font-size: .82rem; color: var(--text-muted); margin-bottom: 1.2rem; }
.login-card .btn { width: 100%; padding: .75rem; margin-top: .4rem; font-size: .95rem; }
.login-card .field { margin-bottom: .9rem; }
.creds {
  margin-top: 1.3rem; padding-top: .9rem; border-top: 1px solid var(--border);
  font-size: .75rem; color: var(--text-muted); line-height: 1.7;
}
.creds code {
  background: var(--surface-alt); padding: .1rem .35rem; border-radius: 4px;
  font-family: var(--mono); color: var(--va-navy); font-size: .95em;
}

/* ---------------------------------------------------------------- timeline */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 36px 1fr; gap: .7rem;
  padding: .6rem 0; border-top: 1px solid var(--border); }
.timeline li:first-child { border-top: 0; }
.timeline .seq {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-size: .76rem; font-weight: 700; background: var(--surface-alt);
  color: var(--text-muted); border: 1px solid var(--border-strong);
}
.timeline li.done .seq { background: var(--ok-bg); color: #12703A;
  border-color: #BFE3CE; }
.timeline li.late .seq { background: var(--bad-bg); color: #A81E1E;
  border-color: #F2C6C3; }
.timeline li.part .seq { background: var(--warn-bg); color: #8A5504;
  border-color: var(--va-gold-light); }
.timeline .row1 { display: flex; gap: .55rem; align-items: baseline;
  flex-wrap: wrap; }
.timeline .amt { font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--va-navy); }

/* ----------------------------------------------------------------- bar viz */
.bars { display: grid; gap: .4rem; }
.bar-line { display: grid; grid-template-columns: minmax(95px, 1fr) 2.2fr auto;
  gap: .6rem; align-items: center; font-size: .8rem; }
.bar-track { background: var(--surface-alt); border-radius: 5px; height: 16px;
  overflow: hidden; }
.bar-fill { background: var(--va-blue); height: 100%; border-radius: 5px;
  min-width: 3px; }
.bar-line .v { font-variant-numeric: tabular-nums; font-weight: 600;
  white-space: nowrap; color: var(--va-navy); }

.kv { display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem;
  font-size: .85rem; }
.kv dt { color: var(--text-muted); font-weight: 600; font-size: .78rem; }
.kv dd { margin: 0; }

details.inline { margin-top: .55rem; }
details.inline > summary {
  cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--va-blue);
  padding: .3rem 0; list-style: none;
}
details.inline > summary::marker { content: ''; }
details.inline > summary::before { content: '\25B8  '; color: var(--va-gold); }
details.inline[open] > summary::before { content: '\25BE  '; }
details.inline > summary:hover { text-decoration: underline; }
details.inline[open] > summary { margin-bottom: .55rem; }

/* -------------------------------------------------------------- responsive */
@media (max-width: 1024px) {
  main { padding: 1rem; }
  .header-inner { padding: 0 16px; }
  .tile .value { font-size: 1.4rem; }
}
@media (max-width: 768px) {
  .header-inner { height: 60px; }
  .brand-logo { height: 40px; width: 40px; }
  .brand-name { font-size: 18px; }
  .brand-sub { font-size: 10px; }
  nav.tabs { top: 60px; padding: 0 8px; }
  nav.tabs a { padding: .6rem .7rem; font-size: .82rem; }
  h1 { font-size: 1.35rem; }
  .tiles { grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: .6rem; }
  .tile { padding: .6rem .7rem; }
  .tile .value { font-size: 1.2rem; }
  table { font-size: .8rem; }
  thead th, tbody td { padding: .45rem .5rem; }
  /* de-prioritised columns collapse on narrow screens (PRD 3.1) */
  .col-lo { display: none; }
  .bar-line { grid-template-columns: minmax(75px, 1fr) 1.4fr auto; font-size: .75rem; }
}
@media (max-width: 480px) {
  .whoami { display: none; }
  .brand-text { display: none; }
  .col-md { display: none; }
  form .grid { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .btn-row .btn { width: auto; flex: 1 1 auto; }
  .page-head { gap: .5rem; }
  .login-card { padding: 1.4rem 1.1rem; }
}

@media print {
  header.site-header, nav.tabs, footer, .no-print { display: none !important; }
  body { background: #fff; }
  .card, .table-wrap { box-shadow: none; border-color: #999; break-inside: avoid; }
  .tile { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .btn:hover, .tile:hover { transform: none; }
}

/* ---------------------------------------------------------------- reminder bell */
.bell {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  background: rgba(255, 255, 255, .08); transition: background .15s ease;
}
.bell:hover { background: rgba(255, 255, 255, .18); }
.bell svg { width: 20px; height: 20px; fill: rgba(255, 255, 255, .82); }
.bell.has-unread svg { fill: #fff; }
.bell-count {
  position: absolute; top: -2px; right: -3px; min-width: 18px; height: 18px;
  padding: 0 4px; border-radius: 9px; background: var(--va-red); color: #fff;
  font-size: .66rem; font-weight: 700; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--va-navy);
}
.tab-badge {
  display: inline-block; min-width: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--va-red); color: #fff; font-size: .66rem; font-weight: 700;
  line-height: 17px; text-align: center; vertical-align: 1px;
}

/* ------------------------------------------------------------ reminder list rows */
.notice-list { list-style: none; margin: 0; padding: 0; }
.notice {
  display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap;
  padding: .8rem .2rem; border-top: 1px solid var(--border);
  border-left: 3px solid transparent;
}
.notice:first-child { border-top: 0; }
.notice.warn { border-left-color: var(--va-gold); }
.notice.bad { border-left-color: var(--va-red); }
.notice.unread { background: var(--info-bg); }
.notice.closed { opacity: .62; }
.notice-main { flex: 1 1 320px; padding-left: .7rem; }
.notice-main .row1 {
  display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap;
  margin-bottom: .2rem;
}
.notice-side {
  display: flex; flex-direction: column; align-items: flex-end; gap: .4rem;
  flex: 0 0 auto;
}
.notice-side .amt {
  font-weight: 700; font-variant-numeric: tabular-nums; color: var(--va-navy);
}
.notice .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--va-blue);
  display: inline-block; flex: 0 0 auto;
}
.muted { color: var(--text-muted); }

/* --------------------------------------------- inline single-field forms in a row */
.inline-form {
  display: flex; gap: .4rem; align-items: center; flex-wrap: wrap;
  margin-top: .45rem;
}
.inline-form input[type="date"] { width: auto; min-width: 145px; }
.inline-label {
  display: inline; margin: 0; font-size: .72rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .03em;
}
details.inline { margin-top: .45rem; }
details.inline > summary {
  cursor: pointer; font-size: .78rem; font-weight: 600; color: var(--va-blue);
  padding: .15rem 0;
}
details.inline > summary:hover { text-decoration: underline; }
.btn.sec.on { background: var(--va-navy); color: #fff; border-color: var(--va-navy); }
ul.plain { list-style: none; margin: .2rem 0 .8rem; padding: 0; font-size: .86rem; }
ul.plain li { padding: .25rem 0; border-bottom: 1px solid var(--border); }
ul.plain li:last-child { border-bottom: 0; }

/* ------------------------------------------------------------------ accessibility */
/* WCAG 2.4.1. Off-screen until focused, then pinned top-left over the header. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: .7rem 1.1rem; background: #FFFFFF; color: #0D2137;
  font-weight: 700; border-radius: 0 0 var(--r-sm) 0;
  box-shadow: 0 2px 10px rgba(13, 33, 55, .35);
}
.skip-link:focus {
  left: 0; outline: 3px solid #FFC24A; outline-offset: 2px;
  text-decoration: none;
}

/* Text for screen readers only - visually hidden but still announced. */
.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;
}

/* An empty live region must not reserve vertical space. */
.banner-slot:empty { display: none; }

/* The base :focus-visible ring (--focus-ring) is defined near the top of this file.
   On the navy header it needs to be brighter to keep 3:1 against the background
   (WCAG 1.4.11 non-text contrast). */
.site-header :focus-visible,
.tabs :focus-visible,
.skip-link:focus { outline-color: #FFC24A; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .tile:hover { transform: none; }
}

/* Windows high-contrast / forced-colours mode: keep the semantic borders. */
@media (forced-colors: active) {
  .pill, .tile, .card, .btn { border: 1px solid CanvasText; }
  .bell-count { border: 1px solid CanvasText; }
}

/* ------------------------------------------------- summary table and mini charts */
/* The dashboard summary used to be a grid of styled divs. It is a real table now, so
   it keeps the visual weight through type rather than through boxes. */
.summary-table th[scope="row"] {
  font-size: .82rem; font-weight: 600; color: var(--text-secondary);
  white-space: nowrap;
}
.summary-table td.num {
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 600;
  color: var(--va-navy); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.summary-table tr.row-bad td.num { color: var(--va-red); }
.summary-table tr.row-warn td.num { color: var(--va-orange); }
.summary-table tr:hover { background: var(--surface-alt); }

/* Collection-progress bar. Decorative: the figcaption carries the numbers. */
.chart-figure { margin: 1rem 0 .2rem; }
.chart-figure figcaption {
  font-size: .84rem; color: var(--text-secondary); line-height: 1.5;
  margin-bottom: .6rem;
}
.progress-track {
  height: 22px; border-radius: var(--r-sm); background: var(--surface-alt);
  border: 1px solid var(--border); overflow: hidden;
}
.progress-fill {
  height: 100%; background: var(--va-green);
  transition: width .3s ease;
}
.chart-legend {
  list-style: none; display: flex; gap: 1.1rem; flex-wrap: wrap;
  margin: .5rem 0 0; padding: 0; font-size: .78rem; color: var(--text-secondary);
}
.chart-legend li { display: flex; align-items: center; gap: .35rem; }
.swatch {
  width: 11px; height: 11px; border-radius: 2px; display: inline-block;
  border: 1px solid rgba(0, 0, 0, .18);
}
.swatch.ok { background: var(--va-green); }
.swatch.grey { background: var(--surface-alt); }

/* In-cell share bar for the grant-type table. */
.inline-bar {
  display: inline-block; vertical-align: middle; width: 54px; height: 8px;
  margin-left: .4rem; background: var(--surface-alt); border-radius: 4px;
  overflow: hidden;
}
.inline-bar-fill { display: block; height: 100%; background: var(--va-blue); }

/* Date-range filter grouping. */
fieldset.range {
  display: flex; gap: .4rem; align-items: center; flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: .3rem .6rem .5rem; margin: 0;
}
fieldset.range legend {
  font-family: var(--font-body); font-size: .72rem; font-weight: 600;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em;
  padding: 0 .3rem;
}
fieldset.range label {
  display: inline; margin: 0; font-size: .72rem; color: var(--text-muted);
}
fieldset.range input[type="date"] { width: auto; min-width: 140px; }

@media (prefers-reduced-motion: reduce) {
  .progress-fill { transition: none; }
}
@media (forced-colors: active) {
  .progress-fill, .inline-bar-fill { background: Highlight; }
  .swatch { border: 1px solid CanvasText; }
}