/* CISD Hub — Sophistication & Trust. Tokens mirror .interface-design/system.md */
:root {
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
  --r-sm:6px; --r-md:10px; --r-lg:16px;

  --ink:#14181f; --ink-2:#4a5563; --ink-3:#8a94a3;
  --bg:#f7f8fa; --surface:#fff; --surface-2:#eef1f5;
  --line:#e2e6ec; --line-2:#cdd4de;
  --brand:#1f3a5f; --brand-700:#16293f; --brand-50:#eef2f7;

  --c-meetings:#3b5b8c; --c-finance:#2f7d6b; --c-books:#a4562f; --c-policy:#5a4b8a; --c-performance:#2c6e5d; --c-staff:#7c4010;
  --warn:#b4690e; --good:#2f7d6b; --bad:#b3261e;

  --font: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --shadow-hover: 0 1px 3px rgba(20,24,31,.06), 0 8px 24px rgba(20,24,31,.06);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { max-width:100%; overflow-x:hidden; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
/* padding shorthand on .wrap only sets horizontal — vertical is handled per-element */
.wrap { max-width:1080px; margin:0 auto; padding-left:var(--sp-5); padding-right:var(--sp-5); }
a { color:var(--brand); }

.skip-link {
  position:absolute; left:-9999px; top:0; background:var(--brand); color:#fff;
  padding:var(--sp-2) var(--sp-4); border-radius:0 0 var(--r-sm) 0; z-index:10;
}
.skip-link:focus { left:0; }

/* Hero */
.hero {
  background:
    linear-gradient(135deg, rgba(14,24,42,.84) 0%, rgba(31,58,95,.72) 100%),
    url('images/boardroom.jpg') center center / cover no-repeat;
  border-bottom: none;
  padding: var(--sp-8) 0 var(--sp-6);
}
.eyebrow {
  margin:0 0 var(--sp-3); font-size:13px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(180,208,255,.9);
}
.hero h1 {
  margin:0 0 var(--sp-4); font-size:clamp(26px,3.4vw,36px); line-height:1.15;
  font-weight:700; letter-spacing:-.015em; color:#fff;
}
.lede { margin:0; max-width:60ch; color:rgba(255,255,255,.80); font-size:clamp(15px,1.6vw,17px); line-height:1.55; }

/* Layout */
main { padding:var(--sp-6) 0 var(--sp-6); display:grid; gap:var(--sp-5); }
.grid-3 { display:grid; gap:var(--sp-5); grid-template-columns:repeat(3,1fr); }
@media (max-width:820px){ .grid-3 { grid-template-columns:1fr; } }
.grid-4 { display:grid; gap:var(--sp-5); grid-template-columns:repeat(4,1fr); }
@media (max-width:1040px){ .grid-4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px) { .grid-4 { grid-template-columns:1fr; } }

/* Card */
.card {
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:var(--sp-5);
  transition:box-shadow .15s ease, border-color .15s ease;
}
.card::before {
  content:""; position:absolute; left:0; top:var(--sp-4); bottom:var(--sp-4);
  width:3px; border-radius:3px; background:var(--accent,var(--brand));
}
.card:hover { box-shadow:var(--shadow-hover); border-color:var(--line-2); }
.card[data-accent="meetings"]    { --accent:var(--c-meetings); }
.card[data-accent="performance"] { --accent:var(--c-performance); }
.card[data-accent="finance"]     { --accent:var(--c-finance); }
.card[data-accent="policy"]      { --accent:var(--c-policy); }
.card[data-accent="books"]       { --accent:var(--c-books); }
.card[data-accent="staff"]       { --accent:var(--c-staff); }

.card__head { display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-5); }
.card__icon { font-size:18px; line-height:1; }
.card__head h2 { margin:0; font-size:18px; font-weight:600; letter-spacing:-.01em; flex:1; }
.card__open {
  font-size:13px; font-weight:600; text-decoration:none; color:var(--accent,var(--brand));
  padding:var(--sp-1) var(--sp-2); border-radius:var(--r-sm); white-space:nowrap;
}
.card__open:hover { background:var(--surface-2); }

/* Report-period label in the card head (e.g. "April 2026") */
.card__period {
  font-size:11px; font-weight:500; color:var(--ink-3);
  background:var(--surface-2); border-radius:var(--r-sm);
  padding:2px 6px; white-space:nowrap; margin-left:auto;
}
/* Push the Open ↗ link after the period badge */
.card__period + .card__open { margin-left:var(--sp-2); }

/* Metrics 2x2 (default) */
.metrics { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3) var(--sp-4); }

/* Finance card: 2×2 on mobile → single row of 4 on wider screens */
@media (min-width:640px) {
  .metrics--four-wide { grid-template-columns:repeat(4,1fr); gap:var(--sp-3); }
}

/* Pending state: mute all metric values */
.metrics--pending .metric__val { color:var(--ink-3); font-size:13px; font-weight:500; }

a.metric--link {
  display:block; text-decoration:none; color:inherit;
  border-radius:var(--r-sm); padding:var(--sp-2); margin:-var(--sp-2);
  transition:background .12s ease;
}
a.metric--link:hover { background:var(--surface-2); }

/* Context box (Box 1 — Budget Year Progress): subtle background distinction */
.metric--context {
  background:var(--surface-2);
  border-radius:var(--r-sm);
  padding:var(--sp-2);
  margin:-var(--sp-2);
}
a.metric--link.metric--context:hover { background:var(--line); }

.metric__val {
  font-size:22px; font-weight:700; line-height:1.15; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums; color:var(--ink);
  /* Allow text values ("Month 8 of 12") to wrap without overflow */
  overflow-wrap:break-word; word-break:break-word;
}
@media (min-width:640px) {
  /* Restore larger size on wider screens where each box has more room */
  .metrics--four-wide .metric__val { font-size:18px; }
}
.metric__label {
  margin-top:2px; font-size:12px; font-weight:600; letter-spacing:.03em;
  text-transform:uppercase; color:var(--ink-3);
}
.metric__sub { font-size:12px; color:var(--ink-3); }

/* Meetings feature */
.meetings { display:grid; gap:var(--sp-4); grid-template-columns:1fr 1fr; }
@media (max-width:680px){ .meetings { grid-template-columns:1fr; } }
.hl { background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; }
.hl__btn {
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  padding:var(--sp-4); display:flex; align-items:flex-start; gap:var(--sp-3); font:inherit; color:inherit;
}
.hl__btn:hover { background:#e8ecf2; }
.hl__meta { flex:1; }
.hl__kicker { font-size:15px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--c-meetings); }
.hl__title { margin-top:2px; font-size:20px; font-weight:700; }
.hl__date-row { display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-2); }
.hl__date {
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:700; letter-spacing:.01em; color:#fff;
  background:var(--accent, var(--c-meetings)); padding:4px 11px var(--sp-1);
  border-radius:999px; line-height:1.3;
}
.hl__date-icon { font-size:12px; line-height:1; }
.hl__addcal {
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:700; letter-spacing:.01em; text-decoration:none;
  color:#a3281e; background:#fdeceb; border:1px solid #f4c6c2;
  padding:4px 11px var(--sp-1); border-radius:999px; line-height:1.3;
  transition:background .12s ease, border-color .12s ease;
}
.hl__addcal:hover { background:#fbdcd9; border-color:#eaa8a2; }
.hl__addcal:focus-visible { outline:2px solid #a3281e; outline-offset:2px; }
.hl__when { margin-top:var(--sp-1); font-size:14px; color:var(--ink-2); }
.hl__breakdown { display:inline-block; margin-top:var(--sp-2); font-size:13px; font-weight:600; }
.hl__chev { transition:transform .2s ease; color:var(--ink-3); margin-top:var(--sp-1); flex:none; }
.hl__btn[aria-expanded="true"] .hl__chev { transform:rotate(180deg); }
.hl__body {
  max-height:0; overflow:hidden; transition:max-height .25s ease;
  padding:0 var(--sp-4);
}
.hl__btn[aria-expanded="true"] + .hl__body { max-height:6000px; padding-bottom:var(--sp-4); }
.hl__body ul { margin:0; padding-left:1.1em; }
.hl__body li { margin:0 0 var(--sp-2); color:var(--ink-2); font-size:14px; }
.hl__body li:last-child { margin-bottom:0; }
.hl__hint { font-size:12px; color:var(--ink-3); padding:0 var(--sp-4) var(--sp-3); }
.meetings__hint { grid-column:1 / -1; margin:0; font-size:12px; color:var(--ink-3); }
.meetings__hint--nonext { margin-bottom:var(--sp-2); }

/* ── About strip ────────────────────────────────────────────── */
.about {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden;
}
.about__bar {
  width: 100%; display: flex; align-items: center; gap: var(--sp-3);
  padding: 7px var(--sp-4); background: none; border: none; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
  transition: background .12s ease;
}
.about__bar:hover { background: var(--surface-2); }
.about__label {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--brand); white-space: nowrap; flex: none;
}
.about__stats {
  flex: 1; font-size: 12px; font-weight: 500; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.about__chev {
  flex: none; font-size: 9px; color: var(--ink-3);
  transition: transform .2s ease;
}
.about__bar[aria-expanded="true"] .about__chev { transform: rotate(180deg); }

.about__body {
  max-height: 0; overflow: hidden;
  transition: max-height .28s ease;
}
.about__bar[aria-expanded="true"] + .about__body { max-height: 600px; }
.about__content {
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  border-top: 1px solid var(--line);
}
.about__intro {
  margin: 0 0 var(--sp-4); font-size: 14px; line-height: 1.6; color: var(--ink-2);
  max-width: 72ch;
}
.about__cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-6);
}
@media (max-width: 520px) { .about__cols { grid-template-columns: 1fr; } }
.about__section-label {
  margin: 0 0 var(--sp-2); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}
.about__facts {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 5px;
}
.about__facts li { font-size: 13px; color: var(--ink-2); }
.about__fact-val {
  font-size: 13px; font-weight: 700; color: var(--ink);
  display: inline-block; min-width: 3.2em;
}
.about__source {
  margin: var(--sp-4) 0 0; font-size: 11px; color: var(--ink-3);
  border-top: 1px solid var(--line); padding-top: var(--sp-3);
}

/* Footer */
.foot { border-top:1px solid var(--line); margin-top:var(--sp-6); padding:var(--sp-5) 0 var(--sp-7); }
.foot__note { margin:0; font-size:12px; color:var(--ink-3); text-align:center; }
.foot__note + .foot__note { margin-top:var(--sp-1); }

/* Alert signup — subtle, sits at the bottom of the meetings card */
.alert-signup {
  grid-column:1 / -1; border-top:1px solid var(--line);
  margin-top:var(--sp-2); padding-top:var(--sp-3);
}
.alert-signup__label {
  display:block; font-size:12px; font-weight:600; letter-spacing:.03em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:var(--sp-2);
}
.alert-signup__row { display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.alert-signup__input {
  flex:1; min-width:160px; padding:var(--sp-1) var(--sp-3);
  font:inherit; font-size:13px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--r-sm); outline:none;
  transition:border-color .12s ease;
}
.alert-signup__input:focus { border-color:var(--c-meetings); }
.alert-signup__btn {
  padding:var(--sp-1) var(--sp-4); font:inherit; font-size:13px; font-weight:600;
  color:var(--c-meetings); background:var(--brand-50);
  border:1px solid var(--c-meetings); border-radius:var(--r-sm);
  cursor:pointer; white-space:nowrap; transition:background .12s ease;
}
.alert-signup__btn:hover:not(:disabled) { background:#dce6f4; }
.alert-signup__btn:disabled { opacity:.5; cursor:default; }
.alert-signup__msg { font-size:12px; color:var(--ink-3); align-self:center; }
.alert-signup__msg--ok  { color:var(--good); }
.alert-signup__msg--err { color:var(--bad); }

.loading { color:var(--ink-3); font-size:14px; margin:0; }
.err { color:var(--bad); font-size:13px; margin:0; }

/* ── Performance card ───────────────────────────────────────── */
.perf-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3);
}
@media (min-width:680px) { .perf-grid { grid-template-columns:repeat(3,1fr); } }

.perf-tile {
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:var(--sp-3) var(--sp-4);
}
.perf-tile--grade { border-color:var(--c-performance); }

.perf-grade {
  font-size:36px; font-weight:800; line-height:1; letter-spacing:-.03em;
  margin-bottom:var(--sp-1);
}
.grade-ltr--A { color:var(--good); }
.grade-ltr--B { color:var(--c-performance); }
.grade-ltr--C { color:var(--warn); }
.grade-ltr--D,.grade-ltr--F { color:var(--bad); }

.perf-tile__val {
  font-size:26px; font-weight:700; line-height:1.1; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; color:var(--ink);
}
.perf-tile__label {
  margin-top:3px; font-size:12px; font-weight:600; letter-spacing:.03em;
  text-transform:uppercase; color:var(--ink-3);
}
.perf-tile__sub { font-size:11px; color:var(--ink-3); margin-top:1px; }
.perf-tile__trend {
  display:inline-flex; align-items:center; gap:2px;
  font-size:11px; font-weight:600; margin-top:var(--sp-1);
}
.perf-tile__trend--up   { color:var(--good); }
.perf-tile__trend--down { color:var(--bad); }
.perf-tile__trend--neutral { color:var(--ink-3); }

/* ── Site navigation chips ──────────────────────────────────── */
.sitenav { margin:var(--sp-5) 0 0; }

.sitenav__tog, .sitenav__chip {
  display:inline-flex; align-items:center;
  padding:5px var(--sp-3); border-radius:999px;
  font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  white-space:nowrap; cursor:pointer;
  color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18);
  transition:background .12s, color .12s, border-color .12s;
}
.sitenav__chip { text-decoration:none; }
.sitenav__tog:hover, .sitenav__chip:hover {
  background:rgba(255,255,255,.23); color:#fff; border-color:rgba(255,255,255,.38);
}
.sitenav__chip[aria-current="page"] {
  background:rgba(255,255,255,.25); color:#fff;
  border-color:rgba(255,255,255,.55); cursor:default;
}

/* Desktop — toggle hidden, all chips in a flex row */
.sitenav__tog { display:none; }
.sitenav__chips {
  display:flex; flex-wrap:wrap; gap:var(--sp-2);
}

/* Mobile — chips hidden behind a toggle button */
@media (max-width:600px) {
  .sitenav__tog { display:inline-flex; }
  .sitenav__chips { display:none; margin-top:var(--sp-2); }
  .sitenav[data-open] .sitenav__chips {
    display:grid; grid-template-columns:1fr 1fr;
  }
  .sitenav[data-open] .sitenav__chip { justify-content:center; padding:9px var(--sp-3); font-size:13px; }
}

@media (prefers-reduced-motion: reduce){
  * { transition:none !important; }
}