/* wittsend-corp — shared styles (illuminated-manuscript typographic pass).
   Self-hosted EB Garamond (body + headings) + Cinzel (wordmark + rubricated
   section marks) + IBM Plex Mono (terminal), served from /fonts/.
   Design intent: a written page — parchment-white leaf, black ink, the unhurried
   air of scrollwork and calligraphy. Near-white paper ground, near-black ink text,
   a single rubrication-red accent (the medieval scribe's emphasis color). Code and
   terminal sit as dark ink-blocks inset on the paper. Light by design — the
   parchment look holds in any OS theme. Mobile-first, no framework. */

/* ── Font faces (self-hosted, served from /fonts/) ────────────────────────
   EB Garamond — display + body · Cinzel — wordmark + section marks              */
@font-face {
    font-family: "EB Garamond";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/eb-garamond-v32-latin_latin-ext-regular.woff2") format("woff2");
}
@font-face {
    font-family: "EB Garamond";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/eb-garamond-v32-latin_latin-ext-italic.woff2") format("woff2");
}
@font-face {
    font-family: "EB Garamond";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/eb-garamond-v32-latin_latin-ext-500.woff2") format("woff2");
}
@font-face {
    font-family: "EB Garamond";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/eb-garamond-v32-latin_latin-ext-600.woff2") format("woff2");
}
@font-face {
    font-family: "EB Garamond";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/eb-garamond-v32-latin_latin-ext-700.woff2") format("woff2");
}

/* Cinzel — inscriptional capitals: wordmark + section marks (latin + latin-ext) */
@font-face {
    font-family: "Cinzel";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/cinzel-v26-latin_latin-ext-regular.woff2") format("woff2");
}
@font-face {
    font-family: "Cinzel";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/cinzel-v26-latin_latin-ext-600.woff2") format("woff2");
}
@font-face {
    font-family: "Cinzel";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/cinzel-v26-latin_latin-ext-700.woff2") format("woff2");
}

/* IBM Plex Mono — terminal / code / mono (latin + latin-ext subsets) */
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/ibm-plex-mono-v20-latin_latin-ext-regular.woff2") format("woff2");
}
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/ibm-plex-mono-v20-latin_latin-ext-600.woff2") format("woff2");
}

:root {
    --bg:           #f7f4ec;
    --bg-elev:     #f1ebdf;
    --bg-deep:     #211e18;
    --bg-deep-2:   #2b2721;
    --fg:          #1a1712;
    --fg-soft:     #36302a;
    --fg-mute:     #6f685b;
    --fg-inv:      #f3efe6;
    --fg-inv-soft: #c8c0b0;
    --line:        #e3dccc;
    --line-deep:   #3a352c;
    --accent:      #8a2f2f;
    --accent-soft: #efe6d5;
    --accent-deep: #5f1d1d;
    --warn:        #8a5a16;
    --bad:         #9b3b2a;
    --ok:          #4f6f33;
    --code-bg:     #211e18;
    --code-fg:     #f3efe6;
    --code-key:    #d8b56a;
    --code-str:    #a9b87f;
    --code-com:    #9b9384;

    /* crisper corners */
    --radius:    3px;
    --radius-lg: 4px;

    /* add display/serif/mono font tokens; keep sans as non-latin/UI fallback */
    --font-display: "EB Garamond", Georgia, "Times New Roman", serif;
    --font-serif:   "EB Garamond", Georgia, "Times New Roman", serif;
    --font-title:   "Cinzel", "EB Garamond", Georgia, serif;
    --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --maxw:    1100px;
    --gutter:  24px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    background: var(--bg);
    color: var(--fg);
    /* body → EB Garamond serif, literary sizing */
    font-family: var(--font-serif);
    font-size: 18px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code, pre {
    font-family: var(--font-mono);
    font-size: 0.92em;
}

pre {
    background: var(--code-bg);
    color: var(--code-fg);
    padding: 16px 18px;
    border-radius: var(--radius);
    overflow-x: auto;
    line-height: 1.5;
}

code {
    background: var(--bg-elev);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--line);
}

pre code {
    background: transparent;
    padding: 0;
    border: 0;
}

/* headings use EB Garamond display face */
h1, h2, h3, h4 {
    margin: 0 0 0.5em 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
    font-family: var(--font-display);
}

/* h1 tightened line-height for display size */
h1 { font-size: 2.5rem; font-weight: 700; line-height: 1.08; letter-spacing: -0.01em; }
h2 { font-size: 1.75rem; font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 600; }
h4 { font-size: 1.0rem; font-weight: 600; }

p { margin: 0 0 1em 0; color: var(--fg-soft); }

ul, ol { padding-left: 1.25em; }
li { margin-bottom: 0.25em; }

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

/* ── Layout ────────────────────────────────────────────────────────────── */

.container {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

section {
    padding: 72px 0;
    border-top: 1px solid var(--line);
}
section:first-of-type { border-top: 0; }

@media (max-width: 720px) {
    section { padding: 48px 0; }
    h1 { font-size: 2.0rem; }
    h2 { font-size: 1.45rem; }
}

/* ── Nav ───────────────────────────────────────────────────────────────── */

.nav {
    position: sticky; top: 0; z-index: 50;
    /* solid opaque parchment — no frosted glass */
    background: var(--bg);
    border-bottom: 1px solid var(--line);
}

.nav-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 14px var(--gutter);
    display: flex; align-items: center; gap: 24px;
}

/* brand uses Cinzel display face */
.brand {
    font-weight: 700; font-size: 1.05rem; letter-spacing: 0.02em;
    color: var(--fg);
    font-family: var(--font-title);
}
.brand span { color: var(--accent); }

.nav-links {
    display: flex; gap: 20px; margin-left: auto; align-items: center;
}
.nav-links a {
    color: var(--fg-soft);
    font-size: 0.94rem;
    font-weight: 500;
}
.nav-links a:hover { color: var(--accent); text-decoration: none; }

.lang-picker {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--fg-soft);
    padding: 5px 8px;
    border-radius: var(--radius);
    font-size: 0.85rem;
    cursor: pointer;
}

/* Responsive: nav wraps cleanly on phones — wordmark stays on row 1, links wrap below */
@media (max-width: 720px) {
    .nav-inner { flex-wrap: wrap; gap: 8px 16px; }
    .nav-links { width: 100%; margin-left: 0; gap: 10px 18px; flex-wrap: wrap; justify-content: flex-start; }
}

/* ── Hero ──────────────────────────────────────────────────────────────── */

.hero {
    background: var(--bg-elev);
    color: var(--fg);
    border-top: 0;
    border-bottom: 1px solid var(--line);
    padding: 96px 0 80px 0;
}
.hero h1 {
    color: var(--fg);
    font-size: 3.0rem; max-width: 14ch; margin-bottom: 0.3em;
}
.hero .tag {
    color: var(--fg-soft);
    font-size: 1.2rem; max-width: 56ch; margin-bottom: 1.6em;
}
.hero .cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 720px) {
    .hero { padding: 64px 0 56px 0; }
    .hero h1 { font-size: 2.2rem; }
    .hero .tag { font-size: 1.05rem; }
}

/* rubrication — kicker as manuscript capitulum mark */
.kicker {
    display: inline-block;
    color: var(--accent);
    font-weight: 600;
    font-size: 0.85rem;
    /* small-caps serif title face, no uppercase lozenge */
    text-transform: none;
    letter-spacing: 0.04em;
    font-family: var(--font-title);
    font-variant: normal;
    margin-bottom: 12px;
}
/* decorative capitulum glyph — presentational, i18n-exempt */
.kicker::before {
    content: "\2761\00A0\00A0";
    color: var(--accent);
    font-variant: normal;
    font-family: var(--font-serif);
}
.hero .kicker { color: var(--accent); }

/* ── Drop-cap (illuminated initial) ────────────────────────────────────── */

/* manuscript initial letter on .dropcap paragraphs */
.dropcap::first-letter {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--accent);
    float: left;
    font-size: 3.4em;
    line-height: 0.82;
    padding: 0.02em 0.10em 0 0;
}

/* RTL safety: float the initial letter to the right in RTL */
[dir="rtl"] .dropcap::first-letter {
    float: right;
    padding: 0.02em 0 0 0.10em;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.btn {
    display: inline-block;
    padding: 12px 22px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.98rem;
    border: 1px solid transparent;
    cursor: pointer;
    /* no lift on hover — remove transform from transition */
    transition: background-color 120ms ease;
    text-decoration: none;
}
/* no translateY lift on hover */
.btn:hover { text-decoration: none; }

.btn-primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

.btn-ghost {
    background: transparent;
    color: var(--fg);
    border-color: var(--fg-mute);
}
.btn-ghost:hover { border-color: var(--fg); color: var(--fg); }

.btn-secondary {
    background: var(--bg-elev);
    color: var(--fg);
    border-color: var(--line);
}
.btn-secondary:hover { background: var(--line); }

/* ── Cards / Grid ──────────────────────────────────────────────────────── */

.grid {
    display: grid; gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.card {
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 24px;
    /* flat — no drop shadow */
}
.card h3 { margin-bottom: 8px; }
.card p { margin-bottom: 0; }

/* Feature blocks — flat, no borders, more breathing room */
.features {
    display: grid;
    gap: 32px 40px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.feature h3 { font-size: 1.05rem; }
/* feature icon — rubricated hanging mark */
.feature .icon {
    display: inline-block;
    color: var(--accent);
    font-family: var(--font-display);
    font-size: 1.6rem;
    line-height: 1;
    margin-bottom: 8px;
}

/* ── Games grid (corp-specific) ────────────────────────────────────────── */

.games-grid {
    display: grid; gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    margin-top: 24px;
}

.game-card {
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.game-card h3 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    margin-bottom: 4px;
}

.game-card .game-strap {
    color: var(--fg-mute);
    font-style: italic;
    font-size: 1.0rem;
    margin: 0;
}

.game-card .game-meta {
    font-size: 0.82rem;
    color: var(--fg-mute);
    margin: 0;
}

.game-card a {
    margin-top: auto;
    padding-top: 12px;
    font-size: 0.95rem;
}

/* ── Pricing ───────────────────────────────────────────────────────────── */

.pricing {
    display: grid; gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.tier {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 28px 26px;
    display: flex; flex-direction: column;
}
.tier.featured {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    position: relative;
}
/* square the featured pill — 3px radius */
.tier.featured::before {
    content: attr(data-featured-label);
    position: absolute;
    top: -10px; left: 24px;
    background: var(--accent); color: #fff;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 10px; border-radius: 3px;
}

.tier h3 { font-size: 1.25rem; margin-bottom: 2px; }
.tier .price {
    font-size: 2.2rem; font-weight: 700; margin: 10px 0 4px 0;
    letter-spacing: -0.02em; color: var(--fg);
    font-family: var(--font-display);
}
.tier .price small {
    font-size: 0.55em; font-weight: 500; color: var(--fg-mute);
    margin-left: 6px;
    font-family: var(--font-serif);
}
.tier .subtitle {
    color: var(--fg-mute); font-size: 0.92rem; margin-bottom: 18px;
}
.tier ul { margin: 0 0 20px 0; padding-left: 0; list-style: none; }
.tier li {
    padding: 6px 0 6px 22px;
    position: relative;
    color: var(--fg-soft);
    font-size: 0.94rem;
}
.tier li::before {
    content: "✓"; color: var(--accent);
    position: absolute; left: 0; top: 6px;
    font-weight: 700;
}
.tier li.no::before { content: "—"; color: var(--fg-mute); }
.tier .cta { margin-top: auto; }

/* ── Footer ────────────────────────────────────────────────────────────── */

.footer {
    background: var(--bg-elev);
    border-top: 1px solid var(--line);
    padding: 56px 0 40px 0;
    color: var(--fg-mute);
    font-size: 0.92rem;
}
.footer-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 32px 48px;
    align-items: flex-start;
}
.footer-inner > div { flex: 1 1 150px; }
.footer-inner > div:first-child { flex: 2 1 240px; }
.footer h4 {
    color: var(--fg);
    font-size: 0.9rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    margin-bottom: 12px;
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 8px; }
.footer a { color: var(--fg-soft); }
.footer .legal {
    flex: 0 0 100%;
    width: 100%;
    border-top: 1px solid var(--line);
    padding-top: 24px;
    color: var(--fg-mute);
    font-size: 0.85rem;
}

/* ── Code samples (terminal style) ─────────────────────────────────────── */

.terminal {
    background: var(--bg-deep-2);
    color: var(--code-fg);
    border: 1px solid var(--line-deep);
    border-radius: var(--radius);
    overflow: hidden;
    /* flat on the page — no floating shadow */
}
.terminal-bar {
    background: var(--bg-deep);
    padding: 8px 14px;
    color: var(--fg-inv-soft);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    border-bottom: 1px solid var(--line-deep);
}
.terminal pre {
    margin: 0; background: transparent; border-radius: 0;
    padding: 16px 18px;
    font-size: 0.86rem;
}
.tok-key { color: var(--code-key); }
.tok-str { color: var(--code-str); }
.tok-com { color: var(--code-com); }

/* ── Docs ─────────────────────────────────────────────────────────────── */

.doc-layout {
    display: grid; gap: 40px;
    grid-template-columns: 220px 1fr;
}
@media (max-width: 820px) {
    .doc-layout { grid-template-columns: 1fr; }
    .doc-sidebar { position: static; }
}
.doc-sidebar {
    position: sticky; top: 70px;
    align-self: start;
    font-size: 0.92rem;
}
.doc-sidebar h4 {
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    color: var(--fg-mute);
    margin-top: 18px;
}
.doc-sidebar ul { list-style: none; padding-left: 0; }
.doc-sidebar li { margin-bottom: 4px; }
.doc-sidebar a {
    color: var(--fg-soft);
    display: block;
    padding: 4px 8px;
    border-radius: 4px;
}
.doc-sidebar a:hover,
.doc-sidebar a.active {
    background: var(--accent-soft);
    color: var(--accent-deep);
    text-decoration: none;
}

.doc-body { min-width: 0; }
.doc-body h2 { margin-top: 1.5em; }
.doc-body h3 { margin-top: 1.5em; }
.doc-body pre { margin: 1em 0 1.5em 0; }

.alert {
    border-left: 4px solid var(--accent);
    background: var(--accent-soft);
    color: var(--fg);
    padding: 12px 16px;
    border-radius: 0 var(--radius) var(--radius) 0;
    margin: 1.4em 0;
}
.alert.warn { border-left-color: var(--warn); background: #f6ecd2; }
.alert.bad  { border-left-color: var(--bad);  background: #f4e2d8; }

/* ── Tool catalog ─────────────────────────────────────────────────────── */

.catalog-controls {
    display: flex; flex-wrap: wrap; gap: 12px;
    margin: 18px 0 24px 0;
    align-items: center;
}
.catalog-search {
    flex: 2 1 280px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--fg);
    font-size: 0.95rem;
    font-family: var(--font-mono);
}
.catalog-search:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.filter-pills {
    display: flex; flex-wrap: wrap; gap: 6px;
}
/* square the pills — 3px radius */
.pill {
    padding: 5px 12px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--bg);
    color: var(--fg-soft);
    font-size: 0.84rem;
    cursor: pointer;
    user-select: none;
}
.pill.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.pill .count {
    margin-left: 6px;
    color: var(--fg-mute);
    font-size: 0.8em;
}
.pill.active .count { color: rgba(255,255,255,0.7); }

.catalog-results {
    border-top: 1px solid var(--line);
}
.tool-row {
    border-bottom: 1px solid var(--line);
    padding: 14px 0;
    display: grid;
    gap: 6px 16px;
    grid-template-columns: 1fr auto;
}
.tool-row .name {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    color: var(--fg);
    font-weight: 600;
}
.tool-row .name .cat {
    color: var(--fg-mute);
    font-weight: 400;
    margin-right: 6px;
    font-size: 0.85em;
}
.tool-row .desc {
    color: var(--fg-soft);
    font-size: 0.92rem;
    grid-column: 1 / -1;
}
.tool-row .classes {
    display: flex; gap: 4px;
}
/* square the class-chip pills — 3px radius */
.cls {
    font-size: 0.7rem; font-weight: 700;
    padding: 2px 8px; border-radius: 3px;
    letter-spacing: 0.05em; text-transform: uppercase;
}
.cls-Read        { background: #e3efe2; color: #2c5a2c; }
.cls-Write       { background: #e7e9ef; color: #2f3a72; }
.cls-Destructive { background: #f4e2dc; color: #8a2f2f; }
.cls-Expensive   { background: #f3e9d2; color: #7a5410; }

.empty {
    text-align: center;
    color: var(--fg-mute);
    padding: 60px 20px;
}

/* ── Utility ──────────────────────────────────────────────────────────── */

.muted { color: var(--fg-mute); }
.center { text-align: center; }
.mt-2 { margin-top: 16px; }
.mt-4 { margin-top: 32px; }
.mb-2 { margin-bottom: 16px; }
.mb-4 { margin-bottom: 32px; }

.badges { display: flex; gap: 8px; flex-wrap: wrap; }
/* square the badges — 3px radius */
.badge {
    background: var(--bg-elev);
    border: 1px solid var(--line);
    color: var(--fg-soft);
    padding: 3px 10px;
    border-radius: 3px;
    font-size: 0.8rem;
}

/* ── Right-to-left overrides ──────────────────────────────────────────────
   Fires only when i18n.js sets dir="rtl" on <html> for ar/fa/he/ur.
   Flex rows and grid areas mirror automatically; we only override
   explicit left:/right: positioning, border-inline-start/end, margin-left/right,
   and text-align: left/right that do not flip on their own. ── */

/* Nav: push links to start (right in RTL) instead of margin-left:auto */
[dir="rtl"] .nav-links {
    margin-left: 0;
    margin-right: auto;
}

/* Hero text: align to the inline start (right in RTL) */
[dir="rtl"] .hero h1,
[dir="rtl"] .hero .tag,
[dir="rtl"] .hero .kicker {
    text-align: start;
}

/* Pricing tier: checkmark bullets are positioned absolute left:0;
   in RTL they should sit on the right. Also mirror the featured badge. */
[dir="rtl"] .tier li {
    padding-inline-start: 22px;
    padding-inline-end: 0;
}
[dir="rtl"] .tier li::before {
    left: auto;
    right: 0;
    inset-inline-start: 0;
}
[dir="rtl"] .tier .price small {
    margin-left: 0;
    margin-right: 6px;
}
[dir="rtl"] .tier.featured::before {
    left: auto;
    right: 24px;
}

/* Alert: accent stripe moves from left to right */
[dir="rtl"] .alert {
    border-left: none;
    border-right: 4px solid var(--accent);
    border-radius: var(--radius) 0 0 var(--radius);
}
[dir="rtl"] .alert.warn {
    border-left: none;
    border-right: 4px solid var(--warn);
}
[dir="rtl"] .alert.bad {
    border-left: none;
    border-right: 4px solid var(--bad);
}

/* Docs layout: sidebar column order. Grid auto-mirrors columns in RTL
   so the 220px column appears on the right — correct behavior.
   Only the sidebar nav link padding needs manual mirroring. */
[dir="rtl"] .doc-sidebar a {
    padding-inline-start: 8px;
    padding-inline-end: 8px;
}

/* Tool catalog: category prefix has margin-right in LTR; flip to margin-left */
[dir="rtl"] .tool-row .name .cat {
    margin-right: 0;
    margin-left: 6px;
}

/* Pill count badge: margin-left flips */
[dir="rtl"] .pill .count {
    margin-left: 0;
    margin-right: 6px;
}

/* Drop-cap RTL: float right (rule already declared above near .dropcap) */

/* Footer: .footer-inner is flex with flex-wrap; RTL browser flips the
   row direction automatically — no overrides needed. */

/* Empty state: center alignment is direction-neutral */

/* ── Dark mode — "Inkwell" ──────────────────────────────────────────────
   The flipside of the parchment palette: the page drops into the ink
   (--fg family), text becomes the parchment (--fg-inv), code blocks sink
   to the deepest well, and the rubrication red is lifted so it stays
   legible by candlelight. Opt-in via [data-theme="dark"] on <html> —
   toggle in the nav, persisted in localStorage["wei-theme"]; the
   pre-paint bootstrap lives inline in each page <head>. Light remains
   the default. */

.theme-toggle {
    background: transparent;
    color: var(--fg-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1;
    padding: 5px 9px;
    cursor: pointer;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }

[data-theme="dark"] {
    color-scheme: dark;

    --bg:           #17140f;   /* the inkwell — the page is the ink        */
    --bg-elev:      #211e18;   /* cards rise into light-mode's ink-block   */
    --bg-deep:      #100e0a;   /* code/terminal sinks to the deepest well  */
    --bg-deep-2:    #1b1812;
    --fg:           #f3efe6;   /* parchment becomes the ink — the flip     */
    --fg-soft:      #ddd6c5;
    --fg-mute:      #9b9384;
    --line:         #39332a;
    --line-deep:    #4a4438;
    --accent:       #c96456;   /* rubrication, candle-lit (AA on --bg)     */
    --accent-soft:  #33211c;   /* the pale red wash inverts to red-umber   */
    --accent-deep:  #a8453c;
    --warn:         #d9a44e;
    --bad:          #d4705c;
    --ok:           #94b36b;
    --cls-external-bg: #2b2638;
    --cls-external-fg: #c5b9e4;
    --code-bg:      #100e0a;
    /* --fg-inv / --fg-inv-soft / --code-fg / --code-key / --code-str /
       --code-com stay as-is — they were designed for dark surfaces and
       still sit on them. */
}

/* Hardcoded light washes (not tokenized) get dark equivalents */
[data-theme="dark"] .alert.warn { background: #2e2515; }
[data-theme="dark"] .alert.bad  { background: #321a14; }
[data-theme="dark"] .cls-Read        { background: #1d2a1d; color: #a9cba9; }
[data-theme="dark"] .cls-Write       { background: #1f2336; color: #aab5e6; }
[data-theme="dark"] .cls-Destructive { background: #361a14; color: #e2937f; }
[data-theme="dark"] .cls-Expensive   { background: #322712; color: #dab460; }
[data-theme="dark"] .license-result.ok  { background: #1b2615; }
[data-theme="dark"] .license-result.bad { background: #321a17; }

/* ── Link garden (links page) ───────────────────────────────────────────
   The commonplace-book list: hairline margin rule per entry, name in
   rubrication, one-line annotation. Tokens only — Inkwell inherits. */
.link-list { list-style: none; margin: 8px 0 0; padding: 0; }
.link-list li { margin: 0 0 14px; padding-left: 16px; border-left: 2px solid var(--line); }
.link-list a { font-weight: 600; }
.link-list a::after { content: " ↗"; font-size: 0.85em; color: var(--fg-mute); }
.link-list .desc { color: var(--fg-soft); }
[dir="rtl"] .link-list li { padding-left: 0; padding-right: 16px; border-left: 0; border-right: 2px solid var(--line); }