/* ============================================================
   The Hugging Face Attack — shared stylesheet
   Hand-written CSS, no build step. Linked by every page:
   <link rel="stylesheet" href="site.css">   (subpages) or
   <link rel="stylesheet" href="site.css">   (index.html, same folder)
   Sections below are ordered; keep new rules inside their section.
   ============================================================ */

/* ---------- 1. Reset & box model ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, p, dl, dd, dt, figure, ol, ul { margin: 0; }
img, svg { max-width: 100%; }
ul[class], ol[class] { list-style: none; padding: 0; }
a { color: inherit; }

/* ---------- 2. Design tokens (light = default) ---------- */
:root {
  --bg:           #f5f7fa;
  --surface:      #ffffff;
  --surface-alt:  #eaeef3;
  --text:         #161b22;
  --text-muted:   #4b5563;
  --border:       #d7dce3;

  --accent:       #1d4ed8;  /* links, current-page marker, diagram accent */
  --accent-soft:  #dce6fb;
  --accent-ink:   #12318a;

  --warn:         #7a4a05;  /* "unconfirmed" / disagreement colour */
  --warn-soft:    #fbecc8;
  --warn-border:  #c2790a;

  --header-bg:    #0f1a2e;  /* fixed dark band, same in both schemes */
  --header-text:  #eef2fb;
  --header-muted: #aebcdb;
  --header-link:  #9fc0ff;

  --focus-ring:   #1d4ed8;
  --code-bg:      #eef1f5;
}

/* waggle standard (WAGGLE-PAGE-STANDARDS.md §1): dark always, not device-dependent */
@media all {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:           #0d1117;
    --surface:      #151b23;
    --surface-alt:  #1b222c;
    --text:         #e6e9ef;
    --text-muted:   #aab2bf;
    --border:       #2b333e;

    --accent:       #7aa2f7;
    --accent-soft:  #1c2c4d;
    --accent-ink:   #bfd2fb;

    --warn:         #f3c66b;
    --warn-soft:    #3a2c11;
    --warn-border:  #caa14a;

    --header-muted: #b7c3dd;
    --header-link:  #9fc0ff;

    --focus-ring:   #7aa2f7;
    --code-bg:      #1b222c;
  }
}

/* ---------- 3. Base typography ---------- */
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 1rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { line-height: 1.25; font-weight: 700; }
h1 { font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.05rem); margin: 0.6rem 0 0.25rem; }
h2 { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.45rem); margin: 2rem 0 0.75rem; }
h3 { font-size: 1.05rem; margin: 1.5rem 0 0.5rem; }
p, dl, ol, ul { margin: 0.9rem 0; }
main :is(h2, h3):first-child { margin-top: 0; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 700; }
code {
  background: var(--code-bg);
  border-radius: 0.25rem;
  padding: 0.1em 0.35em;
  font-size: 0.9em;
}

/* ---------- 4. Layout / container ---------- */
.wrap {
  max-width: 70ch;
  margin-inline: auto;
  padding-inline: 1rem; /* 16px gutters on phones */
}
main { display: block; padding-bottom: 3rem; }

/* ---------- 5. Skip link & focus ---------- */
.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -3rem;
  background: var(--accent);
  color: #ffffff;
  padding: 0.6rem 1rem;
  border-radius: 0 0 0.4rem 0.4rem;
  z-index: 100;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; }
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---------- 6. Header: site title + breadcrumb ---------- */
.site-header { background: var(--header-bg); color: var(--header-text); }
.header-top { padding-block: 1rem 0.75rem; }
.site-title { font-size: 1.15rem; font-weight: 800; margin: 0 0 0.4rem; }
.site-title a { color: var(--header-text); text-decoration: none; }
.site-title a:hover { text-decoration: underline; }
.breadcrumb {
  font-size: 0.85rem;
  color: var(--header-muted);
  overflow-wrap: anywhere;
}
.breadcrumb a { color: var(--header-link); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--header-text); font-weight: 600; }

/* ---------- 7. Navigation (plain wrapped link lists, no JS) ---------- */
.nav-main { background: var(--header-bg); border-top: 1px solid rgba(255,255,255,0.12); }
.nav-main ul, .nav-sub ul {
  list-style: none;
  margin: 0;
  padding-inline: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  padding-block: 0.6rem;
}
.nav-main a {
  display: inline-block;
  color: var(--header-link);
  text-decoration: none;
  padding: 0.3rem 0.6rem;
  border-radius: 0.3rem;
  font-size: 0.92rem;
}
.nav-main a:hover { background: rgba(255,255,255,0.08); }
.nav-main a[aria-current="page"] {
  background: var(--accent);
  color: #ffffff;
  font-weight: 600;
}
.nav-sub { background: var(--surface-alt); border-bottom: 1px solid var(--border); }
.nav-sub-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0.6rem 0 0;
}
.nav-sub a {
  display: inline-block;
  color: var(--text);
  text-decoration: none;
  padding: 0.2rem 0.55rem;
  border-radius: 0.3rem;
  font-size: 0.82rem;
  background: var(--surface);
  border: 1px solid var(--border);
}
.nav-sub a:hover { border-color: var(--accent); }
.nav-sub a[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-color: var(--accent);
  font-weight: 600;
}

/* ---------- 8. Date line ---------- */
.asof {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0.25rem 0 1.25rem;
}

/* ---------- 9. Lede intro paragraph ---------- */
.lede {
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--text);
  margin: 1rem 0 1.5rem;
}

/* ---------- 10. Diagram figure + inline SVG ---------- */
figure.diagram {
  margin: 1.75rem 0;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
}
figure.diagram svg { display: block; width: 100%; height: auto; max-width: 560px; margin-inline: auto; }
@media (max-width: 480px) { figure.diagram { padding: 0.5rem; margin-inline: -8px; } }
figure.diagram figcaption {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}
/* SVG parts use currentColor / tokens so they work in both schemes */
.d-box       { fill: var(--surface); stroke: var(--border); stroke-width: 2; }
.d-box-accent{ fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; }
.d-box-warn  { fill: var(--warn-soft); stroke: var(--warn-border); stroke-width: 2; }
.d-line      { stroke: var(--text-muted); stroke-width: 2; fill: none; }
.d-arrow     { fill: var(--text-muted); }
.d-label     { fill: var(--text); font-size: 16px; font-family: inherit; }
.d-small     { fill: var(--text-muted); font-size: 13px; font-family: inherit; }

/* ---------- 11. Unconfirmed badge ---------- */
.unconfirmed {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--warn);
  background: var(--warn-soft);
  border: 1px solid var(--warn-border);
  border-radius: 999px;
  padding: 0.08rem 0.55rem;
  line-height: 1.5;
}

/* ---------- 12. Callouts ---------- */
.callout {
  margin: 1.25rem 0;
  padding: 0.9rem 1rem;
  background: var(--accent-soft);
  border-left: 4px solid var(--accent);
  border-radius: 0.3rem;
}
.callout p:first-child { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--accent-ink); }
.callout.warn {
  background: var(--warn-soft);
  border-left-color: var(--warn-border);
}
.callout.warn strong { color: var(--warn); }

/* ---------- 13. Key facts grid ---------- */
.keyfacts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin: 1.5rem 0;
}
@media (min-width: 560px) {
  .keyfacts { grid-template-columns: 1fr 1fr; }
}
.keyfacts div {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.75rem 0.9rem;
}
.keyfacts dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin: 0 0 0.25rem;
}
.keyfacts dd { margin: 0; font-weight: 600; }

/* ---------- 14. Responsive tables ---------- */
.table-wrap {
  overflow-x: auto;
  margin: 1.25rem 0;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
}
table { border-collapse: collapse; width: 100%; min-width: 0; font-size: 0.92rem; }
th, td { padding: 0.5rem 0.7rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
thead th { background: var(--surface-alt); white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }

/* ---------- 15. "Read next" block ---------- */
.next {
  margin: 2.5rem 0 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.next h2 { margin-top: 0; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); }
.next ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0.5rem 0 0; }
.next a { font-weight: 600; text-decoration: none; }
.next a:hover { text-decoration: underline; }

/* ---------- 16. Sources ---------- */
section.sources { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
section.sources h2 { margin-top: 0; }
section.sources ol { padding-left: 1.3rem; margin-top: 0.75rem; }
section.sources li { margin-bottom: 0.85rem; overflow-wrap: anywhere; }
section.sources a { overflow-wrap: anywhere; }

/* ---------- 17. Footer ---------- */
.site-footer {
  background: var(--surface-alt);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 2.5rem;
}
.site-footer .wrap { padding-block: 1.25rem; }
.site-footer p { margin: 0.35rem 0; }
.site-footer a { color: var(--accent); }

/* ---------- 18. Print ---------- */
@media print {
  .skip-link, .nav-main, .nav-sub { display: none; }
  .site-header { background: none; color: #000; }
  .site-title a, .breadcrumb a, .breadcrumb [aria-current="page"] { color: #000; }
  a { color: #000; text-decoration: underline; }
}

/* ---------- Waggle backlink (WAGGLE-PAGE-STANDARDS.md §2) ---------- */
.backlink {
  display: inline-block;
  margin: 10px 16px 0;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
}
.backlink:hover { color: var(--accent-ink); border-bottom-color: var(--accent); }
@media (min-width: 760px) { .backlink { margin-left: max(16px, calc((100vw - 70ch) / 2)); } }
/* current nav pill: dark text on the light dark-mode accent for contrast */
.nav-main a[aria-current="page"] { color: #0b1220; }
@media print { .backlink { display: none; } }