/* ============================================================================
   Shared shell for the /info/* pages.
   ----------------------------------------------------------------------------
   index.html is deliberately self-contained (it must render with no API and no
   bundle behind it), so it inlines its fonts and CSS. The info pages are the
   opposite trade: there are eight of them and they exist to be crawled, so
   they share one cached stylesheet and one set of cached woff2 files rather
   than each shipping ~350kB of inlined copies.

   The tokens are the landing page's, by the same rules:
     - role-named, never colour-named, so --ink/--bg invert between themes and
       every background:var(--ink);color:var(--bg) control flips for free
     - dark is the default and the OS preference is NEVER consulted - light is
       opt-in only, via the toggle writing localStorage.yk_theme
     - --accent darkens in light mode (#ee6b3c is 2.5:1 on paper and fails).
       Reaching for --accent-fill as a text colour is the mistake the split
       exists to prevent.
     - --line is borders and rules only; --ink-faint is decorative glyphs only.
       Putting a word on either is how the page becomes unreadable.
   ========================================================================== */

@font-face{
  font-family:'Pixel Sans';
  font-weight:400 700;
  size-adjust:100%;
  font-display:swap;
  src:url('data:font/woff2;base64,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') format('woff2');
}
:root{
  /* Light palette values, defined once and assigned by the single
     [data-theme="light"] selector below so the two cannot drift. */
  --lt-bg:#e8e6e0;
  --lt-bg-raised:rgba(232,230,224,.86);
  --lt-tint:rgba(20,19,18,.04);
  --lt-ink:#141312;                     /* 14.9:1 */
  --lt-ink-dim:rgba(20,19,18,.82);      /*  9.2:1 */
  --lt-ink-faint:rgba(20,19,18,.5);     /*  3.2:1 - glyphs only */
  --lt-line:rgba(20,19,18,.34);         /*  2.1:1 - rules only */
  --lt-accent:#a8330a;                  /*  5.4:1 - the text orange, darkened */
  --lt-accent-line:rgba(168,51,10,.45);
  --lt-accent-wash:rgba(168,51,10,.07);

  /* Dark, the default. */
  color-scheme:dark;
  --bg:#0a0a0a;
  --bg-raised:rgba(10,10,10,.78);
  --tint:rgba(232,230,224,.02);
  --ink:#e8e6e0;                        /* 15.9:1 */
  --ink-dim:rgba(232,230,224,.72);      /*  8.3:1 */
  --ink-faint:rgba(232,230,224,.45);    /*  3.8:1 - glyphs only */
  --line:rgba(232,230,224,.30);         /*  2.3:1 - rules only */
  --accent:#ee6b3c;                     /*  6.4:1 as text on this surface */
  --accent-fill:#ee6b3c;                /* never flips - it is the brand orange */
  --on-accent:#0a0a0a;                  /*  6.4:1 on that fill, both themes */
  --accent-line:rgba(238,107,60,.42);
  --accent-wash:rgba(238,107,60,.06);

  --pix:'Pixel Sans', monospace;
  --mono:'IBM Plex Mono', monospace;
}

:root[data-theme="light"]{
  color-scheme:light;
  --bg:var(--lt-bg);
  --bg-raised:var(--lt-bg-raised);
  --tint:var(--lt-tint);
  --ink:var(--lt-ink);
  --ink-dim:var(--lt-ink-dim);
  --ink-faint:var(--lt-ink-faint);
  --line:var(--lt-line);
  --accent:var(--lt-accent);
  --accent-line:var(--lt-accent-line);
  --accent-wash:var(--lt-accent-wash);
}

*{box-sizing:border-box}

/* No -webkit-font-smoothing:antialiased - it thins light-on-dark strokes,
   which is the wrong trade on a dark page with small type. */
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--mono);
  font-size:13px;
  line-height:1.7;
  -webkit-text-size-adjust:100%;
}

.wrap{max-width:760px;margin:0 auto;padding:0 20px}

/* ---- top bar ------------------------------------------------------------ */
.top{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;gap:14px;
  padding:10px 20px;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.top .brand{display:flex;align-items:center;line-height:0;margin-right:auto}
.top .brand img{
  height:22px;width:auto;display:block;
  filter:grayscale(1) contrast(1.1);
}
@media(min-width:700px){.top .brand img{height:26px}}
.top a.nav{
  font-family:var(--pix);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-dim);text-decoration:none;
}
.top a.nav:hover{color:var(--ink)}
.top .cta{
  font-family:var(--pix);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  background:var(--accent-fill);color:var(--on-accent);
  text-decoration:none;padding:6px 11px;border:0;
}
.theme-btn{
  font-family:var(--pix);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  background:none;border:1px solid var(--line);color:var(--ink-dim);
  padding:5px 9px;cursor:pointer;
}
.theme-btn:hover{color:var(--ink);border-color:var(--ink-dim)}

/* ---- page furniture ----------------------------------------------------- */
.page{padding:34px 0 10px}

/* Breadcrumb. Short all-caps chips keep the looser tracking; this is not
   sentence-shaped copy. */
.crumb{
  font-family:var(--pix);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-dim);margin:0 0 22px;
}
.crumb a{color:var(--ink-dim);text-decoration:none;border-bottom:1px solid var(--line)}
.crumb a:hover{color:var(--ink)}
.crumb .sep{color:var(--ink-faint);margin:0 7px}

.kicker{
  font-family:var(--pix);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);margin:0 0 12px;
}

h1{
  font-family:var(--pix);font-weight:700;
  font-size:clamp(25px,5.4vw,40px);line-height:1.15;letter-spacing:.01em;
  margin:0 0 18px;
}
h2{
  font-family:var(--pix);font-weight:700;
  font-size:clamp(18px,3vw,24px);line-height:1.25;
  margin:42px 0 12px;
}
h3{
  font-family:var(--pix);font-weight:700;
  font-size:15px;line-height:1.3;
  margin:28px 0 8px;
}

p{margin:0 0 15px;color:var(--ink-dim)}
.lede{font-size:15px;line-height:1.65;color:var(--ink)}

a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-line)}
a:hover{border-bottom-color:var(--accent)}

ul{margin:0 0 15px;padding-left:0;list-style:none}
li{
  position:relative;padding-left:18px;margin-bottom:8px;color:var(--ink-dim);
}
/* Decorative glyph, never a word - which is what --ink-faint is for. */
li::before{content:"\25c7";position:absolute;left:0;color:var(--ink-faint)}
li b,li strong{color:var(--ink)}

strong,b{color:var(--ink);font-weight:700}

hr{margin:40px 0;border:0;border-top:1px solid var(--line)}

/* ---- tables ------------------------------------------------------------- */
.t-scroll{overflow-x:auto;margin:0 0 18px}
table{border-collapse:collapse;width:100%;font-size:12px}
th,td{
  text-align:left;padding:8px 12px;
  border-bottom:1px solid var(--line);vertical-align:top;
}
th{
  font-family:var(--pix);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink);white-space:nowrap;
}
td{color:var(--ink-dim)}
td b{color:var(--ink)}

/* ---- callout ------------------------------------------------------------ */
.note{
  margin:0 0 18px;padding:13px 15px;
  background:var(--accent-wash);
  border-left:2px solid var(--accent-line);
}
.note p:last-child{margin-bottom:0}

/* ---- card grids (hub page + related links) ------------------------------ */
.cards{
  display:grid;gap:10px;margin:0 0 18px;
  grid-template-columns:1fr;
}
@media(min-width:640px){.cards{grid-template-columns:1fr 1fr}}
.card{
  display:block;padding:15px 16px;
  background:var(--tint);border:1px solid var(--line);
  text-decoration:none;
}
.card:hover{border-color:var(--accent-line)}
.card .ct{
  display:block;
  font-family:var(--pix);font-size:13px;letter-spacing:.02em;
  color:var(--ink);margin-bottom:5px;
}
.card .cd{display:block;font-size:12px;line-height:1.55;color:var(--ink-dim)}

/* ---- footer ------------------------------------------------------------- */
.foot{
  margin-top:56px;padding:26px 0 44px;
  border-top:1px solid var(--line);
}
.foot h2{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-dim);margin:0 0 12px;
}
.foot-links{
  display:flex;flex-wrap:wrap;gap:7px 16px;margin:0 0 20px;
  padding:0;list-style:none;
}
.foot-links li{padding-left:0;margin:0}
.foot-links li::before{content:none}
.foot-links a{
  font-family:var(--pix);font-size:11px;letter-spacing:.06em;
  color:var(--ink-dim);border-bottom:1px solid var(--line);
}
.foot-links a:hover{color:var(--ink);border-bottom-color:var(--ink-dim)}
.foot .fine{font-size:11px;letter-spacing:.02em;color:var(--ink-dim);margin: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;
}