/* site.css — the monorepo's shared look (design/README.md), part 3: the product sites. The structure the owner
   settled on, round by round, on 2026-10-19 (the codes are theirs, from the variant pages):
     one ground, light cards, no outlines, large hard shadows, one loud block per page (G1 K2 S1 C2 D1 P1);
     every heading in capitals, 20 px corners, outlined labels, a loud header without a ticker, a large title,
     no rules between parts (T3 R4 L3 N2 H1 O2);
     usual spacing, the display face for all text at 18 px, pill buttons, a 64 rem column, words and a picture
     side by side in the hero, step numbers on cards that are steps (Z1 F4 B2 W1 E1 I2).
   The colours: the Miaka palette (tokens.css), the owner's arrangement C of the same day — a deep teal ground
   with pale yellow text, pale yellow cards, near-black shadows, a coral header and block, turquoise buttons,
   a near-black footer. Night: a near-black ground, deep teal cards.
   For the sites only (the extensions' own pages use fire.css). Link it after tokens.css (and fire.css, where a page
   uses it) and before the site's own style.css, which adds only that site's idea.
   Canonical here; sites get a copy through `bun design/sync.js`. Edit this file, never a copy. */

:root {
  /* Miaka (design/tokens.css), arrangement C. */
  --site-g: #13747D;            /* the ground: deep teal */
  --site-ink: #FCF7C5;          /* text on the ground (5.1:1) */
  --site-muted: #FCF7C5;
  --site-card: #FCF7C5;         /* cards and panels: pale yellow */
  --site-card-ink: #29221F;
  --site-card-muted: #5a4d46;
  --site-pick: #0ABFBC;         /* the one to point at */
  --site-sh: #29221F;           /* hard shadows */
  --site-dark: #FC354C; --site-dark-ink: #29221F; --site-dark-head: #29221F; --site-dark-muted: #29221F; --site-dark-sh: #29221F;   /* the loud block and the header: coral */
  --site-foot: #29221F; --site-foot-ink: #FCF7C5;
  --site-button: #0ABFBC;       /* the main action */
  --site-line: 0px;             /* no outlines: a site style written with outlines draws none */
  --site-r: 20px;
  --site-r-s: 4px;
  --site-lift: 8px;
  --site-drop: 14px;
  --site-hero: 14px;
  --site-gap: 22px;
  --site-text: 18px;
  --fire-ink: var(--site-ink); --fire-muted: var(--site-muted); --fire-accent: var(--site-ink); --fire-shadow: var(--site-sh);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --site-g: #29221F; --site-card: #13747D; --site-card-ink: #FCF7C5; --site-card-muted: #e3dcb8; --site-sh: #0f0b0a; --site-dark-sh: #0f0b0a; --site-foot: #0f0b0a;
  }
}
:root[data-theme="dark"] {
  --site-g: #29221F; --site-card: #13747D; --site-card-ink: #FCF7C5; --site-card-muted: #e3dcb8; --site-sh: #0f0b0a; --site-dark-sh: #0f0b0a; --site-foot: #0f0b0a;
}

/* ── Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--site-g); color: var(--site-ink); font: var(--site-text)/1.55 var(--fire-display); }
img, svg { max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--site-ink); outline-offset: 3px; }
[id] { scroll-margin-top: 16px; }
.wrap { max-width: 64rem; margin: 0 auto; padding-inline: 20px; }
.prose { max-width: 42rem; }
h1, h2, h3 { font-family: var(--fire-display); font-weight: 800; text-transform: uppercase; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 6.4vw, 4.6rem); line-height: .92; letter-spacing: -.02em; margin: 0 0 24px; }
h2 { font-size: clamp(1.8rem, 4.2vw, 2.8rem); line-height: .95; letter-spacing: -.02em; margin: 0 0 18px; }
h3 { font-size: 1.15rem; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 8px; }
.lede { font-size: 1.2rem; line-height: 1.45; margin: 0 0 30px; max-width: 34rem; }
.intro { max-width: 40rem; margin: 0 0 36px; }
.note { font: 600 13px/1.5 var(--fire-mono); letter-spacing: .03em; margin: 20px 0 0; }

/* ── Header: a dark bar (N2), navigation ruled apart ─ */
.top { background: var(--site-dark); color: var(--site-dark-ink); --fire-ink: var(--site-dark-ink); }
.top nav { display: flex; align-items: stretch; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; padding-block: 12px; color: inherit; text-decoration: none; font: 800 1.35rem/1 var(--fire-display); letter-spacing: -.02em; text-transform: uppercase; }
.brand img, .brand svg { width: 32px; height: 32px; flex: none; }
.top nav a:not(.brand) { display: flex; align-items: center; padding: 0 18px; border-left: 2px solid rgb(41 34 31 / .3); color: inherit; text-decoration: none; font: 700 13px/1 var(--fire-mono); letter-spacing: .08em; text-transform: uppercase; }
.top nav a:not(.brand):last-child { border-right: 2px solid rgb(41 34 31 / .3); }
.top nav a:not(.brand):hover { background: #29221F; color: #FCF7C5; }
.ticker { display: none; }

/* ── The hero: on the ground ─────────────────────────── */
.hero { background: var(--site-g); }

/* ── Buttons: lime pills (B2) with a hard shadow that stays put while the button moves ─ */
.actions { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.button { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 28px; border: 0; border-radius: 999px; font: 800 17px/1 var(--fire-display); text-transform: uppercase; letter-spacing: .01em; text-decoration: none; color: #29221F; background: var(--site-card); box-shadow: var(--site-lift) var(--site-lift) 0 var(--fire-shadow); transition: transform .12s, box-shadow .12s; }
/* The shadow's offset changes by the opposite of the button's move, with the same timing: only the button moves. */
.button:hover { transform: translate(-3px, -3px); box-shadow: calc(var(--site-lift) + 3px) calc(var(--site-lift) + 3px) 0 var(--fire-shadow); }
.button:active { transform: translate(var(--site-lift), var(--site-lift)); box-shadow: 0 0 0 var(--fire-shadow); }
.button.primary { background: var(--site-button); color: #29221F; }
.button.ghost { color: var(--fire-ink); background: transparent; box-shadow: inset 0 0 0 3px currentColor; }
.button.ghost:hover { transform: translate(-1px, -1px); box-shadow: inset 0 0 0 3px currentColor; }
.button.ghost:active { transform: translate(1px, 1px); box-shadow: inset 0 0 0 3px currentColor; }
.button svg { width: 22px; height: 22px; flex: none; }
/* Shown, not pressable (an install button before the store listing is public). */
.button[aria-disabled="true"] { cursor: default; }
.button[aria-disabled="true"]:hover, .button[aria-disabled="true"]:active { transform: none; box-shadow: var(--site-lift) var(--site-lift) 0 var(--fire-shadow); }

/* ── Parts of the page: one ground, no rules (O2); the second part is the dark block (D1) ─ */
section { padding-block: 64px 68px; }
main > :nth-child(2):not(:only-child) {
  background: var(--site-dark); color: var(--site-dark-ink);
  --fire-ink: var(--site-dark-ink); --fire-muted: var(--site-dark-muted); --fire-accent: var(--site-dark-ink); --fire-shadow: var(--site-dark-sh);
}
footer { background: var(--site-foot); color: var(--site-foot-ink); --fire-ink: var(--site-foot-ink); --fire-muted: var(--site-foot-ink); --fire-accent: var(--site-foot-ink); }
main > :nth-child(2):not(:only-child) h2 { color: var(--site-dark-head); }
/* Cards on the dark block keep their own text colours. */
/* Cards keep their own text colours wherever they are. */
:is(.cells > *, .faq, .post, .end, .demo, .pile .screen) { --fire-ink: var(--site-card-ink); --fire-muted: var(--site-card-muted); --fire-accent: var(--site-card-ink); }

/* A section's label: outlined mono capitals (L3). */
.label { display: inline-block; font: 700 13px/1 var(--fire-mono); letter-spacing: .12em; text-transform: uppercase; color: inherit; background: transparent; box-shadow: inset 0 0 0 2px currentColor; border-radius: var(--site-r-s); padding: 8px 12px; margin: 0 0 22px; }

/* Cards: separate, light lime, no outline, a hard shadow. */
.cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--site-gap) + 6px); list-style: none; margin: 0; padding: 0 var(--site-drop) var(--site-drop) 0; }
.cells.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cells > * { background: var(--site-card); color: var(--site-card-ink); border-radius: var(--site-r); box-shadow: var(--site-drop) var(--site-drop) 0 var(--fire-shadow); padding: 24px 26px; }
.cells p { margin: 0; color: var(--site-card-muted); }
/* Cards that are steps carry their number (I2). */
.cells.steps { counter-reset: step; }
.cells.steps > * { counter-increment: step; }
.cells.steps > *::before { content: counter(step, decimal-leading-zero); display: block; margin-bottom: 12px; font: 800 2rem/1 var(--fire-display); letter-spacing: -.02em; }

/* Questions: one card, the answers ruled apart; the open one's question on the dark teal. */
.faq { max-width: 54rem; margin-right: var(--site-drop); background: var(--site-card); color: var(--site-card-ink); border-radius: var(--site-r); box-shadow: var(--site-drop) var(--site-drop) 0 var(--fire-shadow); overflow: hidden; }
.faq details + details { border-top: 2px solid rgb(41 34 31 / .14); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 18px 24px; font: 800 1.05rem/1.3 var(--fire-display); text-transform: uppercase; letter-spacing: .01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font: 800 1.5rem/1 var(--fire-mono); }
.faq summary:hover { background: rgb(41 34 31 / .07); }
.faq details[open] summary { background: #29221F; color: #0ABFBC; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0; padding: 16px 24px 0; color: var(--site-card-muted); }
.faq details p:last-child { padding-bottom: 20px; }

/* ── The "Support me" pill (Ko-fi): a plain link, no widget script ─ */
.kofi { display: inline-flex; align-items: center; gap: 8px; padding: 5px 18px 5px 6px; border-radius: 999px; background: #FC354C; color: #29221F; border: 0; box-shadow: 5px 5px 0 var(--fire-shadow); font: 800 15px/1 var(--fire-display); text-transform: uppercase; letter-spacing: .02em; text-decoration: none; transition: transform .12s, box-shadow .12s; }
.kofi:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--fire-shadow); }
.kofi:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--fire-shadow); }
.kofi svg { width: 30px; height: 30px; flex: none; }

/* ── Footer: dark ───────────────────────────────────── */
footer { padding-block: 40px 56px; font-size: 15px; }
footer .wrap { display: flex; gap: 20px; flex-wrap: wrap; justify-content: space-between; }
footer a { color: inherit; }
footer .links { display: flex; gap: 22px; flex-wrap: wrap; }

/* ── A reading page (privacy policy, not found) ─────── */
.doc { padding-block: 52px 92px; }
.doc h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: .95; margin: 0 0 14px; }
.doc .date { margin: 0 0 36px; font: 600 13px/1.4 var(--fire-mono); letter-spacing: .06em; text-transform: uppercase; }
.doc h2 { font-size: 1.45rem; line-height: 1.1; margin: 48px 0 12px; }
.doc li { margin: 6px 0; }
.doc table { border-collapse: collapse; width: 100%; font-size: 16px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 2px solid rgb(252 247 197 / .22); }
.doc code { font: .88em var(--fire-mono); background: var(--site-card); color: var(--site-card-ink); padding: 1px 6px; border-radius: var(--site-r-s); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button, .kofi { transition: none; }
}

/* ── Narrow screens ─────────────────────────────────── */
@media (max-width: 860px) {
  .cells, .cells.c3 { grid-template-columns: minmax(0, 1fr); }
  section { padding-block: 52px 56px; }
}
@media (max-width: 560px) {
  .top nav a.hide-narrow { display: none; }
  .top nav a:not(.brand) { padding: 0 12px; }
  .button { padding: 0 22px; }
  :root { --site-drop: 10px; --site-hero: 10px; --site-lift: 6px; }
}