/* ==================================================================
   sid.css — shared skin for the Sid documentation pages.

   Deliberately single-theme. Sid's own interface is a dark HUD with a
   cyan core, so the documents describing it are painted in the same
   voice. Every colour is set explicitly, so the pages hold up on any
   host background rather than borrowing one.

   CHART COLOURS ARE NOT THE ACCENT COLOUR, and that is on purpose.
   The cyan below is brand; the blue/amber pair is data, chosen to stay
   separable for every kind of colour blindness (worst-case ΔE 25.8) and
   validated against this exact surface rather than eyeballed.
   ================================================================== */

:root {
  --void:      #05090F;
  --ground:    #070D15;
  --raised:    #0C1520;
  --glass:     rgba(18, 32, 45, 0.55);

  --ink:       #E6F0F4;
  --ink-mid:   #9DB3BE;
  --ink-low:   #647C89;

  --cyan:      #3ED8F0;
  --cyan-deep: #17A8C4;
  --cyan-wash: rgba(62, 216, 240, 0.10);
  --violet:    #7C86FF;
  --amber:     #FFB454;
  --amber-wash:rgba(255, 180, 84, 0.11);

  --hair:      rgba(160, 200, 215, 0.13);
  --hair-lit:  rgba(62, 216, 240, 0.34);

  /* data palette — validated, do not substitute by eye */
  --series-1:  #2193E0;
  --series-2:  #C97500;
  --ramp-1:    #8FCBF2;
  --ramp-2:    #5AAEE8;
  --ramp-3:    #2193E0;
  --ramp-4:    #1272B4;

  --good:      #47A34E;
  --warn:      #C97500;

  --display: "Sora", "Helvetica Neue", Arial, sans-serif;
  --body:    "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --spine: 68ch;
  --ease:  cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

/* The ambient blobs are wider than the viewport by design. body clips them,
   but for a moment during load the document itself can be nudged sideways,
   which flashes a horizontal scrollbar. Clipping here too removes it. */
html { overflow-x: hidden; }

body {
  background: var(--void);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.68;
  margin: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- ambient depth ---------- */
.ambience { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.ambience .field { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.45; }
.ambience .f1 {
  width: 58vw; height: 58vw; top: -22vw; left: -14vw;
  background: radial-gradient(circle, rgba(23,168,196,0.28), transparent 68%);
  animation: drift1 34s ease-in-out infinite alternate;
}
.ambience .f2 {
  width: 46vw; height: 46vw; top: 46vh; right: -16vw;
  background: radial-gradient(circle, rgba(124,134,255,0.20), transparent 68%);
  animation: drift2 43s ease-in-out infinite alternate;
}
.ambience .mesh {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--hair) 1px, transparent 1px),
    linear-gradient(90deg, var(--hair) 1px, transparent 1px);
  background-size: 78px 78px;
  opacity: 0.3;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 78%);
}
@keyframes drift1 { to { transform: translate3d(9vw, 7vh, 0) scale(1.12); } }
@keyframes drift2 { to { transform: translate3d(-8vw, -9vh, 0) scale(1.1); } }

.progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--cyan-deep), var(--cyan), var(--violet));
  z-index: 90; box-shadow: 0 0 14px rgba(62,216,240,0.6);
}

.wrap { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: 0 26px 140px; }
.spine { max-width: var(--spine); }

/* ---------- site nav ---------- */
.sitenav {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 20px 26px 0;
  max-width: 1120px; margin: 0 auto;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em;
}
.sitenav a {
  color: var(--ink-low); text-decoration: none;
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid transparent;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.sitenav a:hover { color: var(--cyan); border-color: var(--hair); }
.sitenav a[aria-current="page"] {
  color: var(--cyan); border-color: var(--hair-lit); background: var(--cyan-wash);
}
.sitenav a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ---------- masthead ---------- */
.masthead { padding: 64px 0 44px; }
.eyebrow {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--cyan);
  margin: 0 0 20px; display: flex; align-items: center; gap: 11px;
}
.eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 10px var(--cyan);
  animation: blip 2.4s ease-in-out infinite;
}
@keyframes blip { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(40px, 8vw, 84px); line-height: 0.94; letter-spacing: -0.045em;
  margin: 0 0 24px;
  background: linear-gradient(102deg, #FFFFFF 8%, var(--cyan) 54%, var(--violet) 98%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-wrap: balance;
}
.standfirst { font-size: 19.5px; line-height: 1.55; color: var(--ink-mid); max-width: 56ch; margin: 0; }

/* ---------- sections ---------- */
section { margin: 0 0 96px; position: relative; }
.sec-head {
  display: flex; align-items: baseline; gap: 20px;
  margin-bottom: 30px; padding-bottom: 16px; position: relative;
}
.sec-head::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: linear-gradient(90deg, var(--hair-lit), var(--hair) 34%, transparent);
}
.sec-num {
  font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--cyan);
  letter-spacing: 0.1em; flex: 0 0 auto; padding-top: 6px; font-variant-numeric: tabular-nums;
}
h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(25px, 4vw, 35px); letter-spacing: -0.034em; line-height: 1.1;
  margin: 0; text-wrap: balance;
}
h3 {
  font-family: var(--display); font-weight: 600; font-size: 18.5px;
  letter-spacing: -0.02em; margin: 40px 0 12px; color: var(--ink);
}

p { margin: 0 0 18px; color: var(--ink-mid); }
.spine p, .spine ul, .spine ol { max-width: var(--spine); }
strong { color: var(--ink); font-weight: 600; }
em { color: var(--ink); font-style: italic; }

a { color: var(--cyan); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #8AE9F8; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 3px; }

code {
  font-family: var(--mono); font-size: 0.85em;
  background: rgba(62,216,240,0.09); border: 1px solid rgba(62,216,240,0.18);
  color: #A8E8F5; padding: 1px 6px; border-radius: 4px;
}
ul, ol { padding-left: 22px; margin: 0 0 18px; color: var(--ink-mid); }
li { margin-bottom: 9px; }
li::marker { color: var(--cyan-deep); }

pre.flow {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.78;
  background: var(--void); border: 1px solid var(--hair); border-left: 2px solid var(--cyan);
  border-radius: 10px; padding: 20px 22px; margin: 26px 0; overflow-x: auto; color: #B9D3DC;
}

/* ---------- stat tiles ---------- */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--hair); border: 1px solid var(--hair);
  border-radius: 14px; overflow: hidden; margin: 40px 0 64px;
}
.stat {
  background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: 22px 20px; transition: background 0.45s var(--ease);
}
.stat:hover { background: rgba(30, 52, 70, 0.6); }
.stat b {
  display: block; font-family: var(--display); font-weight: 700; font-size: 32px;
  letter-spacing: -0.035em; line-height: 1; margin-bottom: 8px;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.stat b .unit { font-size: 15px; font-weight: 600; color: var(--ink-mid); letter-spacing: 0; }
.stat span {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-low);
}

/* ---------- panels ---------- */
.panel {
  margin: 34px 0 42px; border: 1px solid var(--hair); border-radius: 14px;
  background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  overflow: hidden; position: relative;
}
.panel::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--hair-lit) 42%, var(--violet), transparent);
}
.panel-bar {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 15px 20px; border-bottom: 1px solid var(--hair);
}
.panel-bar h4 {
  font-family: var(--display); font-size: 15.5px; font-weight: 600;
  margin: 0; letter-spacing: -0.015em; color: var(--ink);
}
.panel-bar .note {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-low);
}
.panel-body { padding: 24px 20px; }

/* ---------- tables ---------- */
.table-scroll { overflow-x: auto; margin: 26px 0; border: 1px solid var(--hair); border-radius: 12px; }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; min-width: 480px; }
th {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase;
  text-align: left; color: var(--ink-low); font-weight: 500; padding: 14px 18px;
  background: rgba(8,16,24,0.6); border-bottom: 1px solid var(--hair);
}
td { padding: 13px 18px; border-bottom: 1px solid var(--hair); vertical-align: top; line-height: 1.5; color: var(--ink-mid); }
tr:last-child td { border-bottom: 0; }
tbody tr { transition: background 0.3s var(--ease); }
tbody tr:hover { background: rgba(62,216,240,0.05); }
td:first-child { font-family: var(--mono); font-size: 12.5px; color: var(--ink); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 12.5px; }

/* ---------- notes ---------- */
.callout {
  border: 1px solid rgba(62,216,240,0.26); border-left: 2px solid var(--cyan);
  background: linear-gradient(100deg, rgba(62,216,240,0.09), rgba(62,216,240,0.02));
  border-radius: 10px; padding: 18px 22px; margin: 28px 0; max-width: var(--spine);
}
.callout p { margin: 0; color: var(--ink); }
.callout.warn {
  border-color: rgba(255,180,84,0.28); border-left-color: var(--amber);
  background: linear-gradient(100deg, rgba(255,180,84,0.10), rgba(255,180,84,0.02));
}
.callout-label {
  display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--cyan); margin-bottom: 8px;
}
.callout.warn .callout-label { color: var(--amber); }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.rise { opacity: 0; transform: translateY(20px); animation: rise 0.9s var(--ease) forwards; }
.d1 { animation-delay: 0.1s; } .d2 { animation-delay: 0.24s; } .d3 { animation-delay: 0.38s; }
@keyframes rise { to { opacity: 1; transform: none; } }

.colophon {
  border-top: 1px solid var(--hair); padding-top: 26px; margin-top: 56px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--ink-low);
  display: flex; flex-wrap: wrap; gap: 12px 28px;
}

@media (max-width: 680px) {
  body { font-size: 16px; }
  .wrap { padding: 0 18px 90px; }
  .sitenav { padding: 14px 18px 0; }
  section { margin-bottom: 68px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .rise { opacity: 1; transform: none; }
}