/* ==========================================================================
   OSCAL Foundation Pattern Library — site shell

   The chrome around three areas: the pattern examples, the analysis efforts,
   and the recommendations that come out of them. Each analysis under
   analysis/ carries its own stylesheet and owns its own look; this file
   styles only the pages that sit above them.

   Tokens are the Foundation's brand, and the two accents are the same
   contrast-corrected pair the 2026-08 analysis uses, so a reader moving
   between the shell and an analysis does not cross a seam.

   No build step, no external request, no font beyond the system stack.
   ========================================================================== */

:root {
  --brand:          #4E79D8;   /* the Foundation's primary. Identity only:
                                  4.16:1 on --bg, which a logotype may take
                                  and body text may not. */
  --brand-deep:     #223152;   /* 12.89:1 on --bg */

  --bg:             #FFFFFF;
  --bg-subtle:      #F6F7F9;
  --bg-inset:       #EEF1F4;
  --text:           #12161C;
  --text-muted:     #4A5462;
  --border:         #D5DAE1;
  --border-strong:  #848C99;
  --accent:         #2958BC;   /* 6.53:1 on --bg */
  --accent-fg:      #FFFFFF;

  --status-active:  #146C2E;   /* 6.53:1 on --bg */
  --status-idle:    #4A5462;   /* 7.60:1 on --bg */

  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4rem;
  --radius: 6px;
  --measure: 42rem;
}

/* The shell follows the system preference rather than carrying a toggle. An
   analysis keeps its own toggle and its own stored choice, so crossing from
   one to the other can change the theme; that is the cost of letting each
   analysis own its look and be frozen with it. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:             #12161C;
    --bg-subtle:      #1A1F27;
    --bg-inset:       #222833;
    --text:           #E8ECF1;
    --text-muted:     #A3AEBC;
    --border:         #2E3742;
    --border-strong:  #606D7C;
    --accent:         #96B0E8;   /* 8.36:1 on --bg */
    --accent-fg:      #0B1017;
    --status-active:  #4AC26B;   /* 7.97:1 on --bg */
    --status-idle:    #A3AEBC;   /* 8.14:1 on --bg */
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); text-underline-offset: 2px; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px;
}

.skip-link {
  position: absolute; left: var(--s4); top: -3rem; z-index: 30;
  background: var(--bg); color: var(--text);
  padding: var(--s2) var(--s4); border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}
.skip-link:focus { top: var(--s2); }

/* --- header --------------------------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.site-header__inner {
  max-width: 68rem; margin: 0 auto; padding: var(--s3) var(--s5);
  display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap;
}
.site-title { margin: 0; font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; }
.site-title a {
  color: inherit; text-decoration: none;
  display: flex; align-items: center; gap: var(--s3);
}

/* Two files rather than one: the Foundation ships a reversed mark for dark
   grounds. Both are declared and the media query picks one, so no script is
   needed to get the right mark before first paint. */
.site-logo { display: block; flex: none; height: 2.25rem; width: auto; }
.site-logo--dark { display: none; }
@media (prefers-color-scheme: dark) {
  .site-logo--light { display: none; }
  .site-logo--dark { display: block; }
}

.site-nav ul {
  display: flex; flex-wrap: wrap; gap: var(--s1);
  list-style: none; margin: 0; padding: 0;
}
.site-nav a {
  display: block; padding: var(--s1) var(--s3);
  font-size: 0.8125rem; color: var(--text-muted);
  text-decoration: none; border-radius: 4px;
}
.site-nav a:hover { background: var(--bg-inset); color: var(--text); }
.site-nav a[aria-current="page"] {
  color: var(--text); font-weight: 620;
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* --- layout --------------------------------------------------------------- */

main { max-width: 68rem; margin: 0 auto; padding: var(--s7) var(--s5) var(--s8); }
main > * { max-width: var(--measure); }
main > .cards, main > .models { max-width: none; }

h1 { font-size: 2.25rem; line-height: 1.2; margin: 0 0 var(--s4); letter-spacing: -0.02em; }
h2 { font-size: 1.5rem; line-height: 1.25; margin: var(--s7) 0 var(--s4); letter-spacing: -0.01em; }
h3 { font-size: 1.125rem; margin: 0 0 var(--s2); }
.lede { font-size: 1.125rem; color: var(--text-muted); margin: 0 0 var(--s6); }

/* --- cards ---------------------------------------------------------------- */

.cards {
  display: grid; gap: var(--s5); padding: 0; margin: var(--s6) 0 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.card {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-subtle);
  padding: var(--s5);
  display: flex; flex-direction: column; gap: var(--s2);
}
.card h3 { margin: 0; }
.card h3 a { text-decoration: none; }
.card h3 a:hover { text-decoration: underline; }
.card p { margin: 0; color: var(--text-muted); }
.card__meta {
  margin-top: auto; padding-top: var(--s3);
  font-size: 0.8125rem; color: var(--text-muted);
  display: flex; flex-wrap: wrap; gap: var(--s3);
}
.card__count { font-variant-numeric: tabular-nums; }

/* A status is a word first. The colour is a second channel, never the only
   one, and the two live states differ in weight as well as hue. */
.status { font-weight: 620; }
.status--active     { color: var(--status-active); }
.status--concluded,
.status--superseded { color: var(--status-idle); }

/* --- the empty state ------------------------------------------------------ */

/* An area with nothing in it says so, and says what would put something
   there. A blank page cannot be told from a broken one. */
.empty {
  border: 1px dashed var(--border-strong); border-radius: var(--radius);
  padding: var(--s6); margin: var(--s6) 0 0;
  color: var(--text-muted);
}
.empty p { margin: 0 0 var(--s3); }
.empty p:last-child { margin-bottom: 0; }

/* --- the model table ------------------------------------------------------ */

.models { width: 100%; border-collapse: collapse; margin: var(--s6) 0 0; }
.models th, .models td {
  text-align: left; padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--border); vertical-align: top;
}
.models th { font-size: 0.8125rem; color: var(--text-muted); font-weight: 620; }
.models td code { font-family: var(--font-mono); font-size: 0.8125rem; }
.models tr:last-child td { border-bottom: 0; }
.models .is-pending { color: var(--text-muted); }

/* --- footer --------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--border);
  margin-top: var(--s8);
  color: var(--text-muted); font-size: 0.8125rem;
}
.site-footer__inner { max-width: 68rem; margin: 0 auto; padding: var(--s5); }
.site-footer p { margin: 0; }

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