/* =====================================================================
   uswds-lite.css — a self-contained, U.S. Web Design System-inspired
   design foundation. No external CDN, no build step. Section 508 /
   WCAG 2.1 AA focused: visible focus, color-contrast-safe tokens,
   reduced-motion support, dark-mode aware.
   ===================================================================== */

:root {
  /* Federal palette (contrast-checked against white/ink) */
  --sfs-blue:        #005ea2; /* primary */
  --sfs-blue-dark:   #1a4480; /* primary-dark */
  --sfs-blue-darker: #162e51; /* primary-darker / headers */
  --sfs-blue-light:  #d9e8f6;
  --sfs-blue-vivid:  #0050d8;
  --sfs-red:         #b50909; /* error / secondary */
  --sfs-red-dark:    #8b0a03;
  --sfs-gold:        #ffbe2e; /* accent-warm */
  --sfs-green:       #00a91c; /* success */
  --sfs-green-dark:  #4d8055;
  --sfs-mint:        #04c585;

  --sfs-ink:         #1b1b1b;
  --sfs-ink-soft:    #3d4551;
  --sfs-gray-90:     #171716;
  --sfs-gray-60:     #565c65;
  --sfs-gray-40:     #a9aeb1;
  --sfs-gray-20:     #dfe1e2;
  --sfs-gray-10:     #e6e6e6;
  --sfs-gray-5:      #f0f0f0;
  --sfs-gray-2:      #fafafa;
  --sfs-white:       #ffffff;

  --sfs-bg:          #ffffff;
  --sfs-bg-alt:      #f0f4f8;
  --sfs-surface:     #ffffff;
  --sfs-border:      #dfe1e2;
  --sfs-text:        #1b1b1b;
  --sfs-text-muted:  #565c65;
  --sfs-link:        #005ea2;
  --sfs-link-visited:#54278f;

  /* Type — system fonts that echo Public Sans / Source Sans */
  --sfs-font-sans: "Public Sans", "Source Sans Pro", -apple-system,
                   BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
                   Arial, sans-serif;
  --sfs-font-mono: "SFMono-Regular", "Cascadia Mono", Consolas,
                   "Liberation Mono", Menlo, monospace;

  --sfs-radius: 4px;
  --sfs-radius-lg: 8px;
  --sfs-shadow-1: 0 1px 2px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.06);
  --sfs-shadow-2: 0 4px 12px rgba(0,0,0,.10);
  --sfs-maxw: 1160px;

  --sfs-space-1: .25rem;
  --sfs-space-2: .5rem;
  --sfs-space-3: 1rem;
  --sfs-space-4: 1.5rem;
  --sfs-space-5: 2rem;
  --sfs-space-6: 3rem;
  --sfs-space-7: 4rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sfs-bg:         #16181d;
    --sfs-bg-alt:     #1f232b;
    --sfs-surface:    #21262e;
    --sfs-border:     #3a414b;
    --sfs-text:       #eef1f4;
    --sfs-text-muted: #b3bcc7;
    --sfs-link:       #79aee0;
    --sfs-link-visited:#c6a8f6;
    --sfs-blue-light: #24435f;
    --sfs-gray-5:     #262b33;
    --sfs-gray-2:     #1b1f26;
  }
}

/* ---------- reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sfs-font-sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--sfs-text);
  background: var(--sfs-bg);
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

img { max-width: 100%; height: auto; }
h1, h2, h3, h4 { line-height: 1.2; color: var(--sfs-text); margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: 2.25rem; letter-spacing: -.01em; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.25rem; }
p  { margin: 0 0 1rem; }
a  { color: var(--sfs-link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--sfs-blue-dark); }
ul, ol { padding-left: 1.25rem; }
hr { border: 0; border-top: 1px solid var(--sfs-border); margin: var(--sfs-space-5) 0; }

/* ---------- accessibility: focus + skip link ---------- */
:focus-visible {
  outline: 4px solid var(--sfs-blue-vivid);
  outline-offset: 2px;
  border-radius: 2px;
}
.sfs-skiplink {
  position: absolute; left: -999px; top: 0; z-index: 1000;
  background: var(--sfs-blue-darker); color: #fff; padding: .75rem 1rem;
  border-radius: 0 0 var(--sfs-radius) 0; text-decoration: none; font-weight: 700;
}
.sfs-skiplink:focus { left: 0; }
.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;
}

/* ---------- layout ---------- */
.sfs-container { max-width: var(--sfs-maxw); margin: 0 auto; padding: 0 1.25rem; }
.sfs-grid { display: grid; gap: var(--sfs-space-4); }
.sfs-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.sfs-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.sfs-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .sfs-grid.cols-3, .sfs-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .sfs-grid.cols-2, .sfs-grid.cols-3, .sfs-grid.cols-4 { grid-template-columns: 1fr; }
  h1 { font-size: 1.8rem; }
}
.section { padding: var(--sfs-space-6) 0; }
.section.alt { background: var(--sfs-bg-alt); }
.measure { max-width: 42rem; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem; justify-content: center;
  font: inherit; font-weight: 700; cursor: pointer;
  padding: .75rem 1.35rem; border-radius: var(--sfs-radius);
  border: 2px solid transparent; text-decoration: none; line-height: 1;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary { background: var(--sfs-blue); color: #fff; }
.btn-primary:hover { background: var(--sfs-blue-dark); color: #fff; }
.btn-outline { background: transparent; color: var(--sfs-blue); border-color: var(--sfs-blue); }
.btn-outline:hover { background: var(--sfs-blue-light); color: var(--sfs-blue-darker); }
.btn-inverse { background: #fff; color: var(--sfs-blue-darker); }
.btn-inverse:hover { background: var(--sfs-blue-light); }
.btn-ghost { background: transparent; color: var(--sfs-text); border-color: var(--sfs-border); }
.btn-ghost:hover { background: var(--sfs-gray-5); }
.btn-danger { background: var(--sfs-red); color: #fff; }
.btn-danger:hover { background: var(--sfs-red-dark); }
.btn-sm { padding: .45rem .85rem; font-size: .9rem; }
.btn-lg { padding: .95rem 1.75rem; font-size: 1.1rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- cards ---------- */
.card {
  background: var(--sfs-surface); border: 1px solid var(--sfs-border);
  border-radius: var(--sfs-radius-lg); padding: var(--sfs-space-4);
  box-shadow: var(--sfs-shadow-1);
}
.card.hover:hover { box-shadow: var(--sfs-shadow-2); transform: translateY(-2px); transition: .15s ease; }

/* ---------- badges / tags ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  padding: .2rem .5rem; border-radius: 999px; line-height: 1.4;
}
.badge-blue  { background: var(--sfs-blue-light); color: var(--sfs-blue-darker); }
.badge-green { background: #ecf3ec; color: #2e5030; }
.badge-gold  { background: #faf3d1; color: #6b5c14; }
.badge-gray  { background: var(--sfs-gray-5); color: var(--sfs-gray-60); }
.badge-red   { background: #f8e1de; color: var(--sfs-red-dark); }

/* ---------- alerts ---------- */
.alert {
  border-left: 6px solid var(--sfs-blue); background: var(--sfs-blue-light);
  padding: 1rem 1.25rem; border-radius: var(--sfs-radius); color: var(--sfs-ink);
}
.alert-info    { border-color: var(--sfs-blue);  background: #e7f2fb; }
.alert-success { border-color: var(--sfs-green); background: #ecf3ec; }
.alert-warning { border-color: var(--sfs-gold);  background: #faf3d1; }
.alert-error   { border-color: var(--sfs-red);   background: #f8e1de; }
@media (prefers-color-scheme: dark) {
  .alert, .alert-info, .alert-success, .alert-warning, .alert-error {
    background: var(--sfs-surface); color: var(--sfs-text);
  }
}

/* ---------- forms ---------- */
label { display: block; font-weight: 700; margin: 0 0 .35rem; }
.hint { font-weight: 400; color: var(--sfs-text-muted); font-size: .9rem; }
input, select, textarea {
  font: inherit; width: 100%; padding: .65rem .75rem; color: var(--sfs-text);
  background: var(--sfs-surface);
  border: 1px solid var(--sfs-gray-60); border-radius: var(--sfs-radius);
}
input:focus, select:focus, textarea:focus { outline: 4px solid var(--sfs-blue-vivid); outline-offset: 1px; }
.field { margin-bottom: 1.1rem; }
.required::after { content: " *"; color: var(--sfs-red); }

/* ---------- tables ---------- */
table.sfs-table { width: 100%; border-collapse: collapse; }
.sfs-table th, .sfs-table td { text-align: left; padding: .7rem .75rem; border-bottom: 1px solid var(--sfs-border); }
.sfs-table th { background: var(--sfs-gray-5); font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; }
.sfs-table tbody tr:hover { background: var(--sfs-gray-2); }

/* ---------- utility ---------- */
.text-muted { color: var(--sfs-text-muted); }
.text-center { text-align: center; }
.mono { font-family: var(--sfs-font-mono); }
.nowrap { white-space: nowrap; }
.flex { display: flex; }
.flex.wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: .5rem; } .gap-2 { gap: 1rem; } .gap-3 { gap: 1.5rem; }
.mt-0{margin-top:0}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}
.pill-row{display:flex;flex-wrap:wrap;gap:.4rem}
.stack > * + * { margin-top: 1rem; }