/* * Lineage landing site (www.lineagent.ai) * * Structure modeled on toltec-dev.org (sticky-sidebar + single-column main, * single-page anchor nav, dense text-first layout, no hero billboards). * * Visual identity differs: * - Brand color: mint #00DF9A (Lineage canonical, see crates/lineage/src/tui/theme.rs) * Toltec uses warm amber #e09e53. We swap for Lineage's color and * keep the rest of the type/spacing system close to Toltec's * calm-readable defaults. * - Typography: sans-serif body (system stack) + monospace for code, * ASCII brand mark, and product/binary-name chips. Reinforces the * CLI-native identity without making prose hard to read. * - Borderless aesthetic: per Lineage TUI rule (no bordered/boxed * widgets — see CLAUDE.md memory feedback_no_borders), boxes here * are differentiated by background tint and spacing rather than * stroke. Code blocks and the sidebar use bg tint, never borders. */ *, *::before, *::after { box-sizing: border-box; } /* ── Trilingual gating ────────────────────────────────────────────── * Per-element `lang` attribute is the single switch. The active * language is set on `` at runtime by the JS in * index.html (URL hash → localStorage → navigator.language → "en"). * * Rule: hide any element with a `lang` attribute that doesn't match * the document language. The lang switcher buttons themselves are * exempt (`.lang-switcher [lang]`) so all three buttons stay visible. * Element types that carry literal language content but no translation * (e.g. , 
 in command examples) deliberately omit `lang=`,
 * so they show in every mode.
 */
:root[lang="en"] [lang]:not([lang="en"]):not(.lang-switcher *):not(.lang-switcher) { display: none; }
:root[lang="zh"] [lang]:not([lang="zh"]):not(.lang-switcher *):not(.lang-switcher) { display: none; }
:root[lang="ja"] [lang]:not([lang="ja"]):not(.lang-switcher *):not(.lang-switcher) { display: none; }

:root {
    /* ── Scaling ───────────────────────────────────────────────────
     * Toltec's trick: the entire page can scale up on big monitors
     * via media queries at the bottom of this file. Default 1.
     */
    --scaling: 1;

    /* ── Fonts ──────────────────────────────────────────────────────
     * Sans stack includes CJK fallbacks AFTER the Latin choices so
     * mixed-language content (e.g. an English paragraph that mentions
     * 谱系) picks Latin font for ASCII glyphs and an OS-native CJK
     * font for the kanji/hangul/kana glyphs. The CJK fallbacks listed
     * are the system defaults on each platform — no web-font load
     * required. Hiragino on macOS, "Microsoft YaHei" on Windows-via-
     * WSL, "Noto Sans CJK SC/JP" on Linux.
     *
     * Mono stack stays Latin-first; CJK in code blocks is rare and
     * the default mono has acceptable CJK glyphs in modern OS builds.
     */
    --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont,
        "Inter", "Helvetica Neue", system-ui,
        "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC",
        "Microsoft YaHei", "Hiragino Kaku Gothic ProN",
        "Noto Sans CJK JP", "Yu Gothic UI", sans-serif;
    --font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo,
        Monaco, "Cascadia Code", "Source Code Pro", monospace;

    /* ── Brand (light mode) ─────────────────────────────────────────
     * Brand primary is fixed across modes — it's the canonical
     * Lineage mark color, mirrored from
     * crates/lineage/src/tui/theme.rs::ACCENT_BRAND = RGB(0, 223, 154).
     * `-strong` darkens for AA contrast on light bg (used for links).
     * `-soft` is a 95%-tint for subtle highlight backgrounds.
     */
    --brand: #00DF9A;
    --brand-strong: #00B27A;        /* link color on light bg, hover for dark bg */
    --brand-soft: #E6FBF4;          /* light tint for callout backgrounds */

    /* ── Neutrals (light mode default) ─────────────────────────────
     * Cool grays — keeps the mint accent crisp without
     * the warm-cream interaction Toltec gets with amber.
     */
    --bg: #FBFBFC;                  /* page background */
    --bg-dim: #F2F4F5;              /* sidebar background, code chip background */
    --bg-inv: #0F1115;              /* code-block background (near-black, slight blue) */

    --fg: #11161A;                  /* body text */
    --fg-dim: #5F6B72;              /* secondary / metadata text */
    --fg-inv: #FBFBFC;              /* text on dark bg */

    --border: transparent;          /* per no-borders policy; keep as token for opt-in usage */
    --hairline: rgba(17, 22, 26, 0.08); /* used only for the rare necessary divider */

    /* ── Semantic ───────────────────────────────────────────────── */
    --link: var(--brand-strong);
    --link-hover: #008F61;
    --code-fg: var(--fg);
    --code-bg: var(--bg-dim);

    /* ── Type scale ─────────────────────────────────────────────── */
    --text-size: calc(var(--scaling) * 17px);
    --text-height: calc(var(--scaling) * 26px);
    --h3-size: calc(var(--scaling) * 19px);
    --h3-height: calc(var(--scaling) * 26px);
    --h2-size: calc(var(--scaling) * 24px);
    --h2-height: calc(var(--scaling) * 32px);
    --h1-size: calc(var(--scaling) * 32px);
    --h1-height: calc(var(--scaling) * 40px);
    --small-size: calc(var(--scaling) * 14px);

    /* ── Layout ─────────────────────────────────────────────────────
     * Match Toltec exactly: 1024 page width, 260 sidebar, 40 spacing.
     * Content width = 1024 - 260 - 4*40 = 604px. */
    --page-width: calc(var(--scaling) * 1024px);
    --sidebar-width: calc(var(--scaling) * 260px);
    --page-spacing: calc(var(--scaling) * 40px);
    --content-width: calc(var(--page-width)
        - var(--sidebar-width) - 4 * var(--page-spacing));

    /* Used by the html-level split-background gradient (sidebar tint
     * extends to the page edge on wide screens, like Toltec). */
    --sidebar-seam: calc(50% - var(--page-width) / 2
        + var(--sidebar-width) + 2 * var(--page-spacing));

    --transition: 0.15s ease-out;
    --radius: calc(var(--scaling) * 4px);
}

/* ── Dark mode ──────────────────────────────────────────────────── */
:root[data-theme="dark"] {
    --bg: #0F1115;
        --bg-dim: #15181D;          /* sidebar, slightly lighter than page */
        --bg-inv: #FBFBFC;

        --fg: #E1E5E8;
        --fg-dim: #8A9298;
        --fg-inv: #11161A;

        --hairline: rgba(225, 229, 232, 0.08);

        --code-fg: var(--fg);
        --code-bg: #1A1E24;          /* slightly raised from sidebar */

        /* Brand pops on dark bg — use full saturation, not -strong */
        --link: var(--brand);
        --link-hover: #5DEABF;
}

/* ── Reset / base ───────────────────────────────────────────────── */
html {
    font-size: var(--text-size);
    line-height: var(--text-height);
    font-family: var(--font-sans);
    color: var(--fg);
    scroll-behavior: smooth;

    /* Toltec-style split background: sidebar tint extends to page edge
     * on wide screens. On narrow screens we revert to a single bg
     * (see @media at bottom). */
    background: linear-gradient(
        to right,
        var(--bg-dim) 0,
        var(--bg-dim) var(--sidebar-seam),
        var(--bg) var(--sidebar-seam),
        var(--bg) 100%
    );
    background-attachment: fixed;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    margin: 0;
    display: flex;
    width: var(--page-width);
    margin: 0 auto;
    padding: calc(2 * var(--page-spacing)) 0;
    flex-direction: row;
    justify-content: center;
}

main {
    flex: 1;
    min-width: 0;
    margin: 0 var(--page-spacing);
    max-width: var(--content-width);
}

/* ── Sidebar ────────────────────────────────────────────────────── */
.sidebar {
    position: sticky;
    top: var(--page-spacing);
    align-self: flex-start;
    flex: 0 0 var(--sidebar-width);
    margin: 0 var(--page-spacing);
}

/* Sidebar header — flex row matching Toltec's `[logo] [sitename]`
 * shape exactly. Mark (5×11 ASCII pixel art) + sitename align on
 * the vertical center; the bilingual tagline drops to its own line
 * underneath the row.
 *
 * Sizes target the same visual weight as Toltec's 56px square logo
 * + 28px h1-size sitename. Our mark is 11 wide × 5 tall so it
 * naturally renders as a horizontal rectangle; we choose the
 * font-size such that 5 rows × line-height ≈ 40px (close to
 * Toltec's 56px but accounting for the ASCII mark's wider footprint
 * than a square SVG would have). */
.sidebar-header > a {
    display: flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
    margin-bottom: calc(1.5 * var(--text-height));
    flex-wrap: wrap;            /* tagline drops to row 2 below */
    column-gap: calc(0.666 * var(--text-size));
}

/* Brand mark — the 5×11 ASCII pixel art from
 * crates/lineage/src/tui/theme.rs::LOGO_ROWS. Rendered as 
 so
 * column alignment survives whatever monospace font the OS picks.
 * Background transparent (override the global 
 dark bg rule).
 * Padding zeroed: this is a glyph, not a code listing. */
.sidebar-mark {
    font-family: var(--font-mono);
    color: var(--brand);
    background: transparent;
    font-weight: bold;
    font-size: calc(var(--scaling) * 8px);
    line-height: calc(var(--scaling) * 8px);
    letter-spacing: 0;
    margin: 0;
    padding: 0;
    border-radius: 0;
    overflow: visible;
    white-space: pre;
    user-select: none;
    flex: 0 0 auto;
}

.sidebar-sitename {
    font-family: var(--font-mono);
    font-size: var(--h1-size);
    line-height: calc(5 * var(--scaling) * 8px);   /* match mark height */
    font-weight: bold;
    letter-spacing: 0;
    color: var(--fg);
    flex: 0 0 auto;
}

/* Tagline drops to its own row via `flex-basis: 100%`. Spans the
 * full sidebar width so the trilingual signature reads cleanly. */
.sidebar-tagline {
    display: block;
    flex-basis: 100%;
    font-size: var(--small-size);
    color: var(--fg-dim);
    margin-top: calc(0.4 * var(--text-height));
    line-height: 1.4;
}

/* Sidebar nav — Toltec style: body-sized sans-serif text, classical
 * underlined links, no chrome. Each item on its own line with
 * line-height = text-height so spacing matches the rest of the
 * page's vertical rhythm. */
.sidebar-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-nav li {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-size);
    line-height: var(--text-height);
}

.sidebar-nav a {
    color: var(--fg);
    text-decoration: underline;
    text-decoration-thickness: 0.05rem;
    text-underline-offset: 0.18rem;
    transition: text-decoration-thickness var(--transition);
}

.sidebar-nav a:hover {
    text-decoration-thickness: 0.1rem;
    color: var(--fg);
}

.sidebar-footer {
    margin-top: calc(2.5 * var(--text-height));
    font-size: var(--small-size);
    color: var(--fg-dim);
}

.sidebar-footer p { margin: calc(0.3 * var(--text-height)) 0; }

/* ── Headings ───────────────────────────────────────────────────── */
h1, h2, h3 {
    font-family: var(--font-sans);
    font-weight: bold;
    color: var(--fg);
    letter-spacing: 0;
}

h1 {
    font-size: var(--h1-size);
    line-height: var(--h1-height);
    margin: 0 0 var(--h1-height) 0;
}

h2 {
    font-size: var(--h2-size);
    line-height: var(--h2-height);
    margin: calc(2 * var(--h2-height)) 0 calc(0.6 * var(--h2-height)) 0;
}

h3 {
    font-size: var(--h3-size);
    line-height: var(--h3-height);
    margin: calc(1.6 * var(--h3-height)) 0 calc(0.4 * var(--h3-height)) 0;
}

/* Anchor link icon — Toltec pattern. Hidden by default, revealed
 * on hover. */
.headerlink {
    margin-left: 0.5em;
    color: var(--fg-dim);
    text-decoration: none;
    opacity: 0;
    transition: opacity var(--transition);
}
h1:hover .headerlink, h2:hover .headerlink, h3:hover .headerlink {
    opacity: 1;
}

/* ── Body text ──────────────────────────────────────────────────── */
p { margin: 0 0 var(--text-height) 0; }

a {
    color: var(--link);
    text-decoration-thickness: 0.05rem;
    text-underline-offset: 0.18rem;
    transition: color var(--transition);
}

a:hover {
    color: var(--link-hover);
    text-decoration-thickness: 0.1rem;
}

ul, ol { margin: 0 0 var(--text-height) 1.4em; padding: 0; }
li { margin: 0.3em 0; }

dl { margin: 0 0 var(--text-height) 0; }
dt { font-weight: bold; margin-top: var(--text-height); }
dd { margin: 0 0 calc(0.5 * var(--text-height)) 0; }

/* ── Code ───────────────────────────────────────────────────────── */
code {
    font-family: var(--font-mono);
    font-size: 0.92em;
    background: var(--code-bg);
    color: var(--code-fg);
    padding: 0.12em 0.36em;
    border-radius: var(--radius);
}

pre {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    line-height: 1.55;
    background: var(--bg-inv);
    color: var(--fg-inv);
    padding: var(--text-height);
    margin: var(--text-height) 0;
    border-radius: var(--radius);
    overflow-x: auto;
    /* Ensure code inside 
 doesn't get the inline chip background. */
}

pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
}

/* ── Hero block ─────────────────────────────────────────────────────
 * Order: tagline (h1) first, then the brand mark below, then the
 * supporting prose paragraphs. Title-first ordering matches the
 * Toltec pattern (their h1 reads "Home" before the logo image
 * appears in-section). */
.hero {
    margin: 0 0 calc(2 * var(--text-height)) 0;
}

.hero-tagline {
    font-size: var(--h1-size);
    line-height: var(--h1-height);
    color: var(--fg);
    margin: 0 0 var(--text-height) 0;
    font-weight: bold;
    letter-spacing: 0;
}

/* The 5×11 ASCII brand mark, sized so 5 rows have similar visual
 * weight to a Toltec-equivalent SVG logo (~120-140px tall). Sits
 * directly under the tagline. White-space: pre + monospace +
 * letter-spacing 0 preserves the pixel-grid alignment.
 *
 * Background transparent (override the global 
 dark bg rule).
 * Padding zeroed: glyph, not a code listing. */
.hero-mark {
    font-family: var(--font-mono);
    color: var(--brand);
    background: transparent;
    font-weight: bold;
    font-size: calc(var(--scaling) * 24px);
    line-height: calc(var(--scaling) * 24px);
    letter-spacing: 0;
    margin: 0 0 calc(1.4 * var(--text-height)) 0;
    padding: 0;
    border-radius: 0;
    overflow: visible;
    white-space: pre;
    user-select: none;
}

.hero-sub {
    color: var(--fg-dim);
    margin-bottom: var(--text-height);
    line-height: 1.55;
}

/* ── Install command bar (one-line copy-paste) ─────────────────── */
.install-line {
    display: flex;
    align-items: stretch;
    background: var(--bg-inv);
    border-radius: var(--radius);
    overflow: hidden;
    margin: var(--text-height) 0;
}

.install-line code {
    flex: 1;
    background: transparent;
    color: var(--fg-inv);
    padding: 14px 16px;
    font-size: 0.95rem;
    user-select: all;
    overflow-x: auto;
}

.install-line .copy-btn {
    background: transparent;
    color: var(--fg-inv);
    border: 0;
    padding: 0 16px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--transition);
}

.install-line .copy-btn:hover { opacity: 1; }

/* ── Buttons ────────────────────────────────────────────────────── */
.button {
    display: inline-block;
    background: var(--brand);
    color: #00362A;                /* dark-mint text on bright-mint bg for AA contrast */
    text-decoration: none;
    padding: 0.6rem 1.2rem;
    border-radius: var(--radius);
    font-weight: 600;
    transition: background var(--transition);
}

.button:hover {
    background: var(--brand-strong);
    color: #FBFBFC;
}

.button--ghost {
    background: transparent;
    color: var(--fg);
    box-shadow: inset 0 0 0 1px var(--hairline);
}

.button--ghost:hover {
    background: var(--bg-dim);
    color: var(--fg);
}

/* ── Concept grid (Strain / Agent / Genome / Evolution) ──────── */
.concept-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(1.2 * var(--text-height));
    margin: var(--text-height) 0;
}

.concept-grid h3 {
    margin-top: 0;
    margin-bottom: 0.4em;
    color: var(--brand-strong);
}

:root[data-theme="dark"] .concept-grid h3 {
    color: var(--brand);
}

.concept-grid p {
    margin: 0;
    color: var(--fg-dim);
    font-size: var(--small-size);
    line-height: 1.55;
}

/* ── Callouts (notice / warning) ────────────────────────────────
 * Per no-borders rule: differentiate via background tint + a single
 * left-edge accent line (4px wide, full container height — earlier
 * inset-bar variant looked stunted, see review round). overflow:hidden
 * lets the bar sit flush against the rounded container corners
 * without poking through them.
 */
.callout {
    background: var(--brand-soft);
    padding: calc(0.7 * var(--text-height)) var(--text-height);
    margin: var(--text-height) 0;
    border-radius: var(--radius);
    position: relative;
    padding-left: calc(0.8 * var(--text-height));
    overflow: hidden;
}

.callout::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--brand);
}

:root[data-theme="dark"] .callout {
    background: rgba(0, 223, 154, 0.08);
        color: var(--fg);
}

.callout p:last-child { margin-bottom: 0; }

.callout--warn {
    background: rgba(245, 158, 11, 0.10);
}
.callout--warn::before { background: #F59E0B; }

/* ── ASCII architecture diagram ──────────────────────────────────────
 * Used in the "What is Lineage?" subsystem diagram. Rendered as
 * 
 for monospace + box-drawing-char alignment, but transparent
 * background + zero padding so it reads as a diagram, not a code
 * block. Smaller font-size than the global pre so the box-drawing
 * characters stay crisp at the page width. */
.arch-diagram {
    font-family: var(--font-mono);
    background: transparent;
    color: var(--fg);
    font-size: calc(var(--scaling) * 11px);
    line-height: 1.35;
    padding: 0;
    margin: var(--text-height) 0;
    border-radius: 0;
    overflow-x: auto;
    white-space: pre;
}

/* The subsystem name lines render slightly bolder so the boxes
 * stand out from the connector lines. Uses currentColor + no
 * extra weight to stay subtle. */
:root[data-theme="dark"] .arch-diagram {
    color: var(--fg);
}

/* ── SVG architecture diagram ───────────────────────────────────────
 * Vertical-stack layered diagram for the four subsystems. Style
 * modeled on the user-supplied reference (rounded pastel layer
 * containers, sub-boxes inside, vertical arrows between layers).
 * Per-layer hue + fg/bg fill set via class so dark mode can override.
 */
.arch-svg {
    display: block;
    width: 100%;
    height: auto;
    margin: var(--text-height) 0;
}

/* Light-mode layer fills (pastel) and sub-box treatment. */
.arch-svg .layer--control    { fill: #E0E7FF; }
.arch-svg .layer--execution  { fill: #DCFCE7; }
.arch-svg .layer--capability { fill: #FEF3C7; }
.arch-svg .layer--evolution  { fill: #EDE9FE; }

.arch-svg .sub--control    { fill: #FFFFFF; stroke: #C7D2FE; }
.arch-svg .sub--execution  { fill: #FFFFFF; stroke: #BBF7D0; }
.arch-svg .sub--capability { fill: #FFFFFF; stroke: #FDE68A; }
.arch-svg .sub--evolution  { fill: #FFFFFF; stroke: #DDD6FE; }

.arch-svg .title--control    { fill: #1E1B4B; }
.arch-svg .title--execution  { fill: #14532D; }
.arch-svg .title--capability { fill: #78350F; }
.arch-svg .title--evolution  { fill: #4C1D95; }

.arch-svg .sub-title--control    { fill: #1E1B4B; }
.arch-svg .sub-title--execution  { fill: #14532D; }
.arch-svg .sub-title--capability { fill: #78350F; }
.arch-svg .sub-title--evolution  { fill: #4C1D95; }

.arch-svg .desc--control    { fill: #4338CA; }
.arch-svg .desc--execution  { fill: #15803D; }
.arch-svg .desc--capability { fill: #B45309; }
.arch-svg .desc--evolution  { fill: #6D28D9; }

.arch-svg .arrow-line { stroke: #94A3B8; stroke-width: 2; fill: none; }
.arch-svg .arrow-head { fill: #94A3B8; }

/* Dark-mode counterparts: deeper layer fills, lighter text. */
:root[data-theme="dark"] .arch-svg .layer--control {
    fill: #1E1B4B;
}

:root[data-theme="dark"] .arch-svg .layer--execution {
    fill: #14321E;
}

:root[data-theme="dark"] .arch-svg .layer--capability {
    fill: #3B2406;
}

:root[data-theme="dark"] .arch-svg .layer--evolution {
    fill: #2A1854;
}

:root[data-theme="dark"] .arch-svg .sub--control {
    fill: #312E81; stroke: #4338CA;
}

:root[data-theme="dark"] .arch-svg .sub--execution {
    fill: #14532D; stroke: #15803D;
}

:root[data-theme="dark"] .arch-svg .sub--capability {
    fill: #5C2E04; stroke: #B45309;
}

:root[data-theme="dark"] .arch-svg .sub--evolution {
    fill: #4C1D95; stroke: #6D28D9;
}

:root[data-theme="dark"] .arch-svg .title--control {
    fill: #C7D2FE;
}

:root[data-theme="dark"] .arch-svg .title--execution {
    fill: #BBF7D0;
}

:root[data-theme="dark"] .arch-svg .title--capability {
    fill: #FDE68A;
}

:root[data-theme="dark"] .arch-svg .title--evolution {
    fill: #DDD6FE;
}

:root[data-theme="dark"] .arch-svg .sub-title--control {
    fill: #E0E7FF;
}

:root[data-theme="dark"] .arch-svg .sub-title--execution {
    fill: #DCFCE7;
}

:root[data-theme="dark"] .arch-svg .sub-title--capability {
    fill: #FEF3C7;
}

:root[data-theme="dark"] .arch-svg .sub-title--evolution {
    fill: #EDE9FE;
}

:root[data-theme="dark"] .arch-svg .desc--control {
    fill: #A5B4FC;
}

:root[data-theme="dark"] .arch-svg .desc--execution {
    fill: #86EFAC;
}

:root[data-theme="dark"] .arch-svg .desc--capability {
    fill: #FCD34D;
}

:root[data-theme="dark"] .arch-svg .desc--evolution {
    fill: #C4B5FD;
}

:root[data-theme="dark"] .arch-svg .arrow-line {
    stroke: #64748B;
}

:root[data-theme="dark"] .arch-svg .arrow-head {
    fill: #64748B;
}

/* ── Provider + strain definition lists ──────────────────────────────
 * Used in the Models & Strains section. Compact dt/dd pairing with
 * the dt rendered as a code chip (model prefix or strain id) and
 * the dd as a 1-2-line description in fg-dim. Two-column layout on
 * wide viewports; stacked on narrow. */
.provider-list, .strain-list {
    display: grid;
    grid-template-columns: minmax(140px, 0.4fr) 1fr;
    column-gap: var(--text-height);
    row-gap: calc(0.5 * var(--text-height));
    margin: var(--text-height) 0;
}

.provider-list dt, .strain-list dt {
    margin: 0;
    font-weight: normal;
    line-height: var(--text-height);
}

.provider-list dt code, .strain-list dt code {
    font-size: 0.95em;
    background: var(--code-bg);
    color: var(--code-fg);
    padding: 0.12em 0.36em;
    border-radius: var(--radius);
    white-space: nowrap;
}

.provider-list dd, .strain-list dd {
    margin: 0;
    color: var(--fg-dim);
    font-size: var(--small-size);
    line-height: 1.55;
}

.strain-group {
    margin: calc(1.4 * var(--text-height)) 0 calc(0.4 * var(--text-height)) 0;
    text-transform: uppercase;
    letter-spacing: 0;
    font-size: 12px;
    color: var(--fg-dim);
}

@media (max-width: 1024px) {
    .provider-list, .strain-list {
        grid-template-columns: 1fr;
        row-gap: calc(0.3 * var(--text-height));
    }
    .provider-list dt, .strain-list dt {
        margin-top: calc(0.4 * var(--text-height));
    }
}

/* ── FAQ ────────────────────────────────────────────────────────── */
.faq dt {
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: var(--text-size);
    line-height: var(--text-height);
}

.faq dt::before {
    content: "Q. ";
    color: var(--brand-strong);
    font-weight: bold;
}

.faq dd {
    color: var(--fg-dim);
    margin-left: 1.5em;
    margin-top: 0.3em;
}

:root[data-theme="dark"] .faq dt::before {
    color: var(--brand);
}

/* ── Footer ─────────────────────────────────────────────────────── */
footer.page-footer {
    margin-top: calc(3 * var(--text-height));
    padding-top: var(--text-height);
    border-top: 1px solid var(--hairline);
    color: var(--fg-dim);
    font-size: var(--small-size);
    line-height: 1.55;
}

footer.page-footer p { margin: 0.4em 0; }

/* ── Responsive: small screens (stack sidebar, single-column) ─── */
@media (max-width: 1024px) {
    html {
        background: var(--bg);
    }

    body {
        flex-direction: column;
        margin: 0;
        width: 100%;
        padding: 0;
    }

    .sidebar {
        background: var(--bg-dim);
        position: static;
        margin: 0;
        width: 100%;
        padding: var(--page-spacing);
    }

    main {
        margin: 0 auto;
        padding: var(--page-spacing);
        width: 100%;
        max-width: calc(var(--content-width) + 2 * var(--page-spacing));
    }

    .concept-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Responsive: large screens upscale the whole page ─────────── */
@media (min-width: 1696px) { :root { --scaling: 1.20; } }
@media (min-width: 1952px) { :root { --scaling: 1.40; } }
@media (min-width: 2208px) { :root { --scaling: 1.60; } }
@media (min-width: 2464px) { :root { --scaling: 1.80; } }
@media (min-width: 2720px) { :root { --scaling: 2.00; } }

/* ── Selection ─────────────────────────────────────────────────── */
::selection {
    background: var(--brand);
    color: #00362A;
}

:root[data-theme="dark"] ::selection {
    background: var(--brand);
        color: #00362A;
}



/* ── Sidebar dropdowns: language + theme ──────────────────────────
 * Two pill-shaped triggers in a row. Each pill opens a small menu
 * with icon + label rows. Active row shows brand color + a small
 * brand-color dot at the right (dot = the "currently selected"
 * affordance from the reference design). Replaces the earlier
 * inline two-row .lang-switcher + .theme-switcher pattern. */
.dropdown-row {
    display: flex;
    gap: 8px;
    margin: 0 0 calc(1.2 * var(--text-height)) 0;
}

.dropdown {
    position: relative;
}

.dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg);
    color: var(--fg-dim);
    border: 0;
    border-radius: 999px;       /* full pill */
    padding: 6px 12px;
    cursor: pointer;
    font-family: inherit;
    transition: background var(--transition), color var(--transition);
    line-height: 1;
}

:root[data-theme="dark"] .dropdown-trigger { background: var(--bg-inv); }

.dropdown-trigger:hover { color: var(--fg); }

.dropdown-trigger .icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.dropdown-trigger .chevron {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    transition: transform var(--transition);
}

.dropdown-trigger[aria-expanded="true"] .chevron {
    transform: rotate(180deg);
}

/* Trigger icon swap: show only the active theme's icon. */
.dropdown-trigger .icon-theme-light,
.dropdown-trigger .icon-theme-dark,
.dropdown-trigger .icon-theme-auto {
    display: none;
}
:root[data-theme-choice="light"] .dropdown-trigger .icon-theme-light { display: inline-block; }
:root[data-theme-choice="dark"]  .dropdown-trigger .icon-theme-dark  { display: inline-block; }
:root[data-theme-choice="auto"]  .dropdown-trigger .icon-theme-auto  { display: inline-block; }

.dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: var(--bg);
    color: var(--fg);
    border-radius: 12px;
    padding: 6px;
    margin: 0;
    list-style: none;
    min-width: 180px;
    z-index: 100;
    box-shadow: 0 6px 20px rgba(17, 22, 26, 0.08),
                0 1px 2px rgba(17, 22, 26, 0.04);
    display: none;
}

:root[data-theme="dark"] .dropdown-menu {
    background: var(--bg-dim);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.40),
                0 1px 2px rgba(0, 0, 0, 0.20);
}

.dropdown[data-open="true"] .dropdown-menu { display: block; }

.dropdown-menu li { margin: 0; }

/* Selectors target both