/* ─────────────────────────────────────────────────────────────────────────
   chrome.css — everything EVERY page shares: theme tokens, the nav, the
   theme toggle, the ad slot and the footer.

   It exists because index.html had its own copy of all of this and the two
   had already drifted: different nav class, different footer markup,
   different link text. One file is the only way they stay identical.

   Deliberately contains NO reset, NO body typography and NO prose styles.
   index.html is an app with its own layout; loading document styles into
   it would fight with them. Those live in docs.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Theme ────────────────────────────────────────────────────────────
   Dark is the brand default, so it lives on bare :root. Light is applied
   when the OS asks for it (unless dark was explicitly chosen) and when the
   toggle sets it explicitly. Every colour is declared here first, so no
   value exists only inside a media query.

   Contrast was measured, not eyeballed. The old --text-faint was 2.38:1 on
   the background, well under the 4.5:1 minimum, and it was used for every
   nav link, eyebrow, label and the footer. That was the "hard to read"
   complaint. Both grey steps were lifted while keeping three distinct
   levels, because raising one alone collapses the hierarchy into two.
   Dark:  text 15.9 · dim 7.5 · faint 5.0
   Light: text 16.8 · dim 7.5 · faint 5.0
   ──────────────────────────────────────────────────────────────────── */
:root {
  --bg:         #0e0f11;
  --surface:    #16181d;
  --surface-hi: #1e2028;
  --border:     #2a2d35;
  --border-hi:  #3a3e4a;
  --text:       #e8eaf0;
  --text-dim:   #9ba2b3;
  --text-faint: #7e828e;
  --claude:     #d4f060;
  --gemini:     #6cb4ff;
  --openai:     #19c37d;
  --warn:       #f0a030;
  /* Chip backgrounds keep the vivid brand colours in both themes: they are
     backgrounds with dark ink on top, not text, so they do not need the
     contrast-safe variants above. */
  --chip-claude: #d4f060;
  --chip-gemini: #6cb4ff;
  --chip-openai: #19c37d;
  --chip-ink:    #0e0f11;
  --noise-opacity: .4;
  --hatch:      rgba(255,255,255,.012);
  --radius-sm:  6px;
  --radius:     10px;
  --radius-lg:  16px;
}

/* Light values, defined once and applied from two places. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:         #f5f6f8;
    --surface:    #ffffff;
    --surface-hi: #eef0f4;
    --border:     #dfe3e9;
    --border-hi:  #c3c9d2;
    --text:       #14161a;
    --text-dim:   #49505c;
    --text-faint: #626b76;
    --claude:     #68762f;
    --gemini:     #4573a3;
    --openai:     #108052;
    --warn:       #8a5a00;
    --noise-opacity: .14;
    --hatch:      rgba(0,0,0,.02);
  }
}
:root[data-theme="light"] {
  --bg:         #f5f6f8;
  --surface:    #ffffff;
  --surface-hi: #eef0f4;
  --border:     #dfe3e9;
  --border-hi:  #c3c9d2;
  --text:       #14161a;
  --text-dim:   #49505c;
  --text-faint: #626b76;
  --claude:     #68762f;
  --gemini:     #4573a3;
  --openai:     #108052;
  --warn:       #8a5a00;
  --noise-opacity: .14;
  --hatch:      rgba(0,0,0,.02);
}


/* Shared page texture. */
body::after {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 999; opacity: var(--noise-opacity);
}

/* ── Nav ─────────────────────────────────────────────────────────────── */
.nav {
  /* index.html body is a centring column flexbox (that is what centres .wrap).
     It makes the nav a flex item, and align-items:center shrink-wraps it to its
     own content width, so on that one page the bar and its bottom border stopped
     short of the page edges while every other page looked right. align-self:
     stretch restores full width there and is inert where the parent is not a
     flexbox. Same reason for the footer rule below. */
  align-self: stretch;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 100;
}
.nav-inner {
  max-width: 900px; margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
.nav-brand {
  font-family: 'DM Serif Display', serif;
  font-size: 1rem; color: var(--text); text-decoration: none; margin-right: auto;
}
.nav-brand span { color: var(--claude); }
.nav a.nav-link {
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-faint); text-decoration: none; transition: color .15s;
}
.nav a.nav-link:hover { color: var(--text-dim); }
.nav a.nav-link[aria-current="page"] { color: var(--claude); }

/* ── Ad slot ─────────────────────────────────────────────────────────── */
/* One unit per page, placed after the content it sits below. The wrapper
   reserves height so the page does not jump when the ad loads, which is a
   real Core Web Vitals cost otherwise. */
.ad-slot {
  margin: 14px auto; max-width: 728px;
  min-height: 90px; display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--border-hi); border-radius: var(--radius);
  background: repeating-linear-gradient(45deg, transparent, transparent 10px, var(--hatch) 10px, var(--hatch) 20px);
}
.ad-slot .ad-label {
  font-size: .56rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--text-faint); text-align: center; line-height: 2;
}
.ad-slot .ad-dims { display: block; color: var(--border-hi); letter-spacing: .1em; }
/* Once ads.js swaps the placeholder for a real unit, the dashed box and the
   hatching come off: the reserved height stays, the scaffolding goes. */
.ad-slot.is-live { border: 0; background: none; min-height: 0; padding: 0; }

/* ── Footer ──────────────────────────────────────────────────────────── */
.site-footer {
  align-self: stretch;
  border-top: 1px solid var(--border); margin-top: 60px;
  padding: 28px 20px 40px; text-align: center;
  font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-faint); line-height: 2.1;
}
.site-footer a { color: var(--text-faint); text-decoration: none; border-bottom: 1px solid var(--border); }
.site-footer a:hover { color: var(--text-dim); border-color: var(--border-hi); }
.query-counter { font-size: .6rem; color: var(--text-faint); letter-spacing: .1em; }
.query-counter span { color: var(--text-dim); font-weight: 500; }


@media (max-width: 600px) {
  .nav-inner { gap: 14px; padding: 12px 16px; }
  .nav-brand { font-size: .88rem; width: 100%; margin-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}
/* -- Theme toggle ------------------------------------------------- */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-hi); border: 1px solid var(--border);
  border-radius: 100px; padding: 5px 11px; cursor: pointer;
  font-family: 'DM Mono', monospace; font-size: .58rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim);
  transition: color .15s, border-color .15s, background .15s;
}
.theme-toggle:hover { color: var(--text); border-color: var(--border-hi); }
.theme-toggle:focus-visible { outline: 2px solid var(--border-hi); outline-offset: 2px; }
.theme-toggle svg { width: 12px; height: 12px; flex-shrink: 0; }
/* Show the icon for the theme you would switch TO, the usual convention. */
.theme-toggle .i-sun  { display: none; }
.theme-toggle .i-moon { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-toggle .i-sun  { display: block; }
  :root:not([data-theme="dark"]) .theme-toggle .i-moon { display: none; }
}
:root[data-theme="light"] .theme-toggle .i-sun  { display: block; }
:root[data-theme="light"] .theme-toggle .i-moon { display: none; }
:root[data-theme="dark"]  .theme-toggle .i-sun  { display: none; }
:root[data-theme="dark"]  .theme-toggle .i-moon { display: block; }