/* ============================================================================
   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(/fonts/woff2/pixel-sans-variable.woff2) format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/woff2/ibm-plex-mono-400.woff2) format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;font-weight:500;font-display:swap;
  src:url(/fonts/woff2/ibm-plex-mono-500.woff2) format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;font-weight:700;font-display:swap;
  src:url(/fonts/woff2/ibm-plex-mono-700.woff2) 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;
}