/* SEP Tracker — shell + component styles */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--page-plane);
  color: var(--ink-primary);
  line-height: 1.5;
  font-size: var(--font-size-base);
}
a { color: var(--cat-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; margin: 0 0 var(--space-2); overflow-wrap: break-word; }
p { margin: 0 0 var(--space-3); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap;
}

/* ---------- shell: header ---------- */
.site-header {
  border-bottom: 1px solid var(--border-hairline);
  background: var(--surface-1);
  position: sticky; top: 0; z-index: 20;
}
.site-header__bar {
  max-width: 1120px; margin: 0 auto;
  padding: var(--space-3) var(--space-5);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
  flex-wrap: wrap;
}
.site-header__brand { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.site-header__name { font-size: var(--font-size-lg); font-weight: 700; letter-spacing: -0.01em; }
.site-header__tagline { font-size: var(--font-size-sm); color: var(--ink-secondary); }
.site-header__disclaimer {
  font-size: var(--font-size-xs); color: var(--ink-muted);
  max-width: 1120px; margin: 0 auto; padding: 0 var(--space-5) var(--space-2);
}
.site-nav { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-5); }
.site-nav ul {
  list-style: none; display: flex; gap: var(--space-5); margin: 0; padding: var(--space-2) 0 0;
  border-top: 1px solid var(--border-hairline); flex-wrap: wrap;
}
.site-nav a {
  color: var(--ink-secondary); font-size: var(--font-size-sm); font-weight: 500;
  padding: var(--space-2) 0; display: inline-block; border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--ink-primary); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--ink-primary); border-bottom-color: var(--cat-blue); }
.site-nav a.is-stub { color: var(--ink-muted); }
.site-nav a.is-stub::after { content: " (soon)"; font-size: 0.7em; }

/* ---------- shell: footer ---------- */
.site-footer {
  border-top: 1px solid var(--border-hairline);
  background: var(--surface-1);
  margin-top: var(--space-7);
  padding: var(--space-5);
  font-size: var(--font-size-sm);
  color: var(--ink-secondary);
}
.site-footer__inner { max-width: 1120px; margin: 0 auto; display: grid; gap: var(--space-4); grid-template-columns: 2fr 1fr; }
@media (max-width: 720px) { .site-footer__inner { grid-template-columns: 1fr; } }
.tier-legend { display: flex; flex-direction: column; gap: var(--space-2); }
.tier-legend__title { font-weight: 600; color: var(--ink-primary); font-size: var(--font-size-sm); margin-bottom: var(--space-1); }
.tier-legend__row { display: flex; align-items: center; gap: var(--space-2); }
.footer-links { display: flex; flex-direction: column; gap: var(--space-1); }
.footer-meta { font-size: var(--font-size-xs); color: var(--ink-muted); margin-top: var(--space-3); }

/* ---------- layout ---------- */
.page { max-width: 1120px; margin: 0 auto; padding: var(--space-6) var(--space-5); }
.page--narrow { max-width: 760px; }

/* ---------- citation tier badges ---------- */
.cite {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--font-size-xs); font-weight: 600;
  padding: 1px 7px; border-radius: 999px; cursor: help;
  vertical-align: middle; line-height: 1.6;
  position: relative;
}
.cite--tier1 { background: var(--tier-1-sep); color: #fff; border: 1px solid transparent; }
.cite--tier2 { background: var(--tier-2-progress); color: #fff; border: 1px solid transparent; }
.cite--tier3 { background: transparent; color: var(--tier-3-external); border: 1.5px solid var(--tier-3-external); }
.cite--tier4 { background: transparent; color: var(--tier-4-unconfirmed); border: 1.5px dashed var(--tier-4-unconfirmed); font-style: italic; }
.cite__icon { font-size: 0.9em; }

/* citation popover */
.cite-pop, .term-pop {
  display: none;
  position: absolute; z-index: 50; top: calc(100% + 6px); left: 0;
  width: max-content; max-width: 320px;
  background: var(--surface-raised); color: var(--ink-primary);
  border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  padding: var(--space-3); font-size: var(--font-size-sm); font-weight: 400;
  text-align: left; line-height: 1.4; cursor: auto;
}
.cite-pop.is-open, .term-pop.is-open { display: block; }
.cite-pop__tier { font-weight: 700; font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--space-1); }
.cite-pop__title { font-weight: 600; margin-bottom: 2px; }
.cite-pop__meta { color: var(--ink-secondary); margin-bottom: var(--space-1); }
.cite-pop__note { color: var(--ink-muted); font-size: var(--font-size-xs); margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--gridline); }
.cite-pop a { font-size: var(--font-size-xs); }

/* plain-language glossary term */
.term {
  position: relative; cursor: help;
  border-bottom: 1.5px dotted var(--ink-secondary);
  text-decoration: none;
}
.term:hover, .term:focus { border-bottom-color: var(--ink-primary); outline: none; }

/* plain-language page summary — sitewide (not account-page-scoped), so it works on every
   page including about.html/start-here.html which don't load accountability.css. */
.plain-summary {
  border-left: 4px solid var(--cat-aqua);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-4) 0 var(--space-5);
  background: color-mix(in srgb, var(--cat-aqua) 8%, var(--surface-1));
  max-width: 70ch;
}
.plain-summary__label {
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: var(--font-size-xs); font-weight: 800;
  color: var(--cat-aqua); display: block; margin-bottom: var(--space-2);
}
.plain-summary p { margin: 0; line-height: 1.5; }

/* ---------- status badges ---------- */
.status-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--font-size-sm); font-weight: 600;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid transparent;
}
.status-badge__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.status-badge--complete { background: color-mix(in srgb, var(--status-good) 14%, transparent); color: var(--status-good); }
.status-badge--complete .status-badge__dot { background: var(--status-good); }
.status-badge--active { background: color-mix(in srgb, var(--status-info) 14%, transparent); color: var(--status-info); }
.status-badge--active .status-badge__dot { background: var(--status-info); }
.status-badge--initiated { background: color-mix(in srgb, var(--status-warning) 18%, transparent); color: var(--status-warning); }
.status-badge--initiated .status-badge__dot { background: var(--status-warning); }
.status-badge--realigned { background: color-mix(in srgb, var(--status-serious) 16%, transparent); color: var(--status-serious); }
.status-badge--realigned .status-badge__dot { background: var(--status-serious); }
.status-badge--reported-plain { background: color-mix(in srgb, var(--status-neutral) 12%, transparent); color: var(--status-neutral); }
.status-badge--reported-plain .status-badge__dot { background: var(--status-neutral); }
.status-badge--not-reported {
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--status-critical) 10%, transparent), color-mix(in srgb, var(--status-critical) 10%, transparent) 4px, transparent 4px, transparent 8px);
  color: var(--status-critical); border-color: color-mix(in srgb, var(--status-critical) 40%, transparent);
}
.status-badge--not-reported .status-badge__dot { background: var(--status-critical); }
.status-badge--deprioritized {
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--status-muted) 12%, transparent), color-mix(in srgb, var(--status-muted) 12%, transparent) 4px, transparent 4px, transparent 8px);
  color: var(--status-muted); border-color: color-mix(in srgb, var(--status-muted) 35%, transparent);
}
.status-badge--deprioritized .status-badge__dot { background: var(--status-muted); }
.status-badge--mixed { background: color-mix(in srgb, var(--cat-violet) 14%, transparent); color: var(--cat-violet); }
.status-badge--mixed .status-badge__dot { background: var(--cat-violet); }
/* wentSilent (goals) / stalled (recommendations): reported for 2+ years then went quiet, or
   plateaued at "Initiated" for 2+ years — a distinct finding from not-reported (never mentioned)
   or deprioritized (SEP itself dropped it). Same critical-red family as not-reported (it is a
   reporting-gap finding), vertical-stripe pattern (vs. not-reported's diagonal) keeps it
   visually distinguishable rather than color-coded as a brand-new hue. */
.status-badge--flagged {
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--status-critical) 16%, transparent), color-mix(in srgb, var(--status-critical) 16%, transparent) 3px, transparent 3px, transparent 9px);
  color: var(--status-critical); border-color: color-mix(in srgb, var(--status-critical) 45%, transparent);
}
.status-badge--flagged .status-badge__dot { background: var(--status-critical); }

/* status-history trajectory chips — compact year-by-year strip shown above a goal/rec's status text */
.goal__status-history { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: var(--space-3); font-size: var(--font-size-sm); color: var(--ink-secondary); }
.status-history__chip { display: inline-flex; align-items: center; gap: 4px; }
.status-history__chip--gap { color: var(--status-critical); font-weight: 600; }
.status-history__arrow { color: var(--ink-muted); }

/* funding badge */
.funding-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--font-size-xs); font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
}
.funding-badge--yes { background: color-mix(in srgb, var(--status-good) 14%, transparent); color: var(--status-good); }
.funding-badge--no { background: var(--gridline); color: var(--ink-muted); }
.funding-badge--external { background: color-mix(in srgb, var(--tier-3-external) 14%, transparent); color: var(--tier-3-external); }

/* ---------- cards / sections ---------- */
.card {
  background: var(--surface-1); border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md); padding: var(--space-5);
}
.section-title {
  font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-muted); font-weight: 700; margin-bottom: var(--space-3);
}

/* dept header */
.dept-header { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-5); }
.dept-header h1 { font-size: var(--font-size-hero); margin-bottom: var(--space-1); }
.dept-header__meta { color: var(--ink-secondary); font-size: var(--font-size-sm); }
.dept-stats { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.dept-stat { min-width: 180px; }
.dept-stat__label { font-size: var(--font-size-xs); color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }
.dept-stat__value { font-size: var(--font-size-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.dept-stat__delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--font-size-sm); font-weight: 700; margin-left: var(--space-2); }
.dept-stat__delta--off-track { color: var(--status-critical); }
.dept-stat__delta--on-track { color: var(--status-good); }

/* goal card */
.goal {
  border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
  margin-bottom: var(--space-4); overflow: hidden; background: var(--surface-1);
  scroll-margin-top: 90px;
}
.goal:target { border-color: var(--cat-blue); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cat-blue) 25%, transparent); }
.rec-card, .action-row { scroll-margin-top: 90px; }
.rec-card:target { border-color: var(--cat-blue); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cat-blue) 25%, transparent); }
.goal__head { padding: var(--space-4) var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; align-items: flex-start; }
.goal__title { font-size: var(--font-size-lg); font-weight: 700; margin-bottom: 4px; }
.goal__eval { font-size: var(--font-size-sm); color: var(--ink-secondary); }
.goal__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.goal__body { padding: 0 var(--space-5) var(--space-4); }
.goal__status-text { font-size: var(--font-size-sm); color: var(--ink-secondary); margin-top: var(--space-2); }

.callout {
  border: 1px solid color-mix(in srgb, var(--tier-3-external) 45%, transparent);
  background: color-mix(in srgb, var(--tier-3-external) 6%, transparent);
  border-radius: var(--radius-md); padding: var(--space-4); margin-top: var(--space-3);
}
.callout__title { font-weight: 700; font-size: var(--font-size-sm); color: var(--tier-3-external); margin-bottom: var(--space-1); display: flex; align-items: center; gap: 6px; }
.callout p { font-size: var(--font-size-sm); margin-bottom: var(--space-2); }
.callout p:last-child { margin-bottom: 0; }

details.strategy { border-top: 1px solid var(--gridline); padding: var(--space-3) 0; }
details.strategy summary { cursor: pointer; font-weight: 600; font-size: var(--font-size-sm); list-style: none; display: flex; align-items: center; gap: var(--space-2); }
details.strategy summary::-webkit-details-marker { display: none; }
details.strategy summary::before { content: "▸"; color: var(--ink-muted); transition: transform 0.15s; }
details.strategy[open] summary::before { transform: rotate(90deg); }
.strategy__actions { list-style: none; margin: var(--space-2) 0 0; padding: 0 0 0 var(--space-5); display: flex; flex-direction: column; gap: 6px; }
.strategy__actions li { font-size: var(--font-size-sm); color: var(--ink-secondary); position: relative; padding-left: var(--space-4); }
.strategy__actions li::before { content: "–"; position: absolute; left: 0; color: var(--ink-muted); }

/* trend chart */
.chart-card { padding: var(--space-5); }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-3); font-size: var(--font-size-xs); color: var(--ink-secondary); }
.chart-legend__item { display: flex; align-items: center; gap: 6px; }
.chart-legend__swatch { width: 18px; height: 3px; border-radius: 2px; }
.chart-annotation-box {
  margin-top: var(--space-3); padding: var(--space-3); border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--status-warning) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--status-warning) 35%, transparent);
  font-size: var(--font-size-xs); color: var(--ink-secondary);
}

@media (max-width: 640px) {
  .dept-header h1 { font-size: 2rem; }
  .goal__head { flex-direction: column; }
}