/* site.css — the monorepo's shared look (design/README.md), part 3: the product sites' own variant. The same
   palette and font (tokens.css), pushed into a loud, high-contrast brutalism (inspired by, not copied from, the
   bold editorial look of business magazines): 4 px rules, square corners, deep flat shadows, huge tight
   headings in capitals, a dark header with a ticker strip, the hero on full teal-soft, and the parts of the page
   in turn: a light pastel, a solid dark block, full lime, a dark block.
   For the sites only (the extensions' own pages stay on 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 {
  --site-line: 4px;           /* every outline and rule */
  --site-r: 2px;              /* buttons, panels, cells: all but square */
  --site-lift: 8px;           /* a button's flat shadow */
  --site-drop: 12px;          /* a panel's */
  --site-hero: 14px;          /* a hero picture's */
  /* Light grounds: no cream (the owner's call, 2026-10-18). The palette's colours mixed with white into light
     pastels by day, with the night shadow into dark shades by night. */
  --site-base: #fff;
  --site-pct: 30%;
  --site-1: color-mix(in srgb, var(--fire-teal-soft) var(--site-pct), var(--site-base));
  --site-2: color-mix(in srgb, var(--fire-lime) var(--site-pct), var(--site-base));
  --site-3: color-mix(in srgb, var(--fire-teal) calc(var(--site-pct) - 8%), var(--site-base));
  --site-4: color-mix(in srgb, var(--fire-green) var(--site-pct), var(--site-base));
  --site-card: color-mix(in srgb, var(--fire-teal-soft) 10%, var(--site-base));  /* cards, panels, cells */
  --site-pick: color-mix(in srgb, var(--fire-lime) 50%, var(--site-base));       /* the one to point at */
  /* The loud blocks: dark teal with cream text and lime headings by day; by night the other way round, teal-soft
     with dark text. Cards on them get lime shadows by day. */
  --site-loud: var(--fire-deep);
  --site-loud-ink: var(--fire-cream);
  --site-loud-head: var(--fire-lime);
  --site-loud-muted: #c9d8d3;
  --site-loud-shadow: var(--fire-lime);
  /* Full-strength grounds: the hero on teal-soft and every fourth part of the page on lime, by day; by night
     their dark shades. Text on them is always the dark teal (5.5:1 and 7.8:1). */
  --site-top: var(--fire-teal-soft);
  --site-bright: var(--fire-lime);
  /* Text roles kept here so a card inside a loud block can take them back. */
  --site-ink: var(--fire-deep);
  --site-muted: #465e62;      /* secondary text, darker than the token's: ≥ 4.5:1 on every pastel */
  --site-accent: #006f84;
  --site-shadow: var(--fire-deep);
  --fire-muted: var(--site-muted);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --site-base: #061416; --site-pct: 22%;
    --site-card: color-mix(in srgb, var(--fire-teal-soft) 12%, #061416); --site-pick: color-mix(in srgb, var(--fire-lime) 30%, #061416);
    --site-loud: var(--fire-teal-soft); --site-loud-ink: var(--fire-deep); --site-loud-head: var(--fire-deep); --site-loud-muted: #17363a; --site-loud-shadow: #061416;
    --site-top: var(--site-1); --site-bright: var(--site-2);
    --site-ink: var(--fire-cream); --site-muted: #a7bfbc; --site-accent: var(--fire-teal-soft); --site-shadow: #061416;
  }
}
:root[data-theme="dark"] {
  --site-base: #061416; --site-pct: 22%;
  --site-card: color-mix(in srgb, var(--fire-teal-soft) 12%, #061416); --site-pick: color-mix(in srgb, var(--fire-lime) 30%, #061416);
  --site-loud: var(--fire-teal-soft); --site-loud-ink: var(--fire-deep); --site-loud-head: var(--fire-deep); --site-loud-muted: #17363a; --site-loud-shadow: #061416;
  --site-top: var(--site-1); --site-bright: var(--site-2);
  --site-ink: var(--fire-cream); --site-muted: #a7bfbc; --site-accent: var(--fire-teal-soft); --site-shadow: #061416;
}

/* ── Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--site-1); color: var(--fire-ink); font: 17px/1.6 var(--fire-body); }
img, svg { max-width: 100%; }
a { color: var(--fire-accent); text-underline-offset: 3px; text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--fire-teal); outline-offset: 3px; }
[id] { scroll-margin-top: 16px; }
.wrap { max-width: 74rem; margin: 0 auto; padding-inline: 20px; }
.prose { max-width: 42rem; }
h1, h2, h3 { font-family: var(--fire-display); text-wrap: balance; }
h1 { font-weight: 800; font-size: clamp(2.9rem, 8vw, 6rem); line-height: .9; letter-spacing: -.045em; margin: 0 0 26px; }
h2 { font-weight: 800; font-size: clamp(2rem, 5vw, 3.6rem); line-height: .95; letter-spacing: -.02em; text-transform: uppercase; margin: 0 0 20px; }
h3 { font-weight: 800; font-size: 1.3rem; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 8px; }
.lede { font-size: 1.3rem; line-height: 1.45; margin: 0 0 30px; max-width: 34rem; }
.intro { font-size: 1.15rem; max-width: 40rem; margin: 0 0 40px; }
.note { font: 600 13px/1.5 var(--fire-mono); letter-spacing: .03em; color: var(--fire-muted); margin: 20px 0 0; }

/* ── Header: a bar ruled off below, navigation in boxes ─ */
.top { background: var(--site-loud); color: var(--site-loud-ink); border-bottom: var(--site-line) solid var(--fire-edge); --fire-ink: var(--site-loud-ink); --site-rule: color-mix(in srgb, var(--site-loud-ink) 30%, transparent); }
.top nav { display: flex; align-items: stretch; min-height: 66px; }
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; padding-block: 12px; color: inherit; text-decoration: none; font: 800 1.45rem/1 var(--fire-display); letter-spacing: -.03em; }
.brand img, .brand svg { width: 34px; height: 34px; flex: none; }
.top nav a:not(.brand) { display: flex; align-items: center; padding: 0 18px; border-left: var(--site-line) solid var(--site-rule); color: var(--fire-ink); 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: var(--site-line) solid var(--site-rule); }
.top nav a:not(.brand):hover { background: var(--site-loud-head); color: var(--site-loud); }

/* ── The ticker: a strip of short facts in mono capitals, running sideways (decorative: every fact is also on the
   page; still under reduced motion). The facts are written twice so the loop has no seam. ─ */
.ticker { overflow: hidden; background: var(--site-loud); border-top: 2px solid color-mix(in srgb, var(--site-loud-ink) 30%, transparent); color: var(--site-loud-ink); border-bottom: var(--site-line) solid var(--fire-edge); }
.ticker p { display: flex; width: max-content; margin: 0; animation: ticker 40s linear infinite; }
.ticker span { padding: 9px 22px; font: 700 13px/1 var(--fire-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; border-right: 2px solid color-mix(in srgb, var(--site-loud-ink) 35%, transparent); }
.ticker b { color: var(--site-loud-head); font-weight: 700; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ── The hero: on a full-strength ground ─────────────── */
.hero { background: var(--site-top); --fire-muted: var(--site-ink); --fire-accent: var(--site-ink); }

/* ── Buttons: a heavy outline and a deep shadow; they press all the way in ─ */
.actions { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.button { display: inline-flex; align-items: center; gap: 10px; min-height: 58px; padding: 0 28px; border-radius: var(--site-r); font: 800 17px/1 var(--fire-body); text-decoration: none; color: var(--fire-deep); background: var(--site-card); border: var(--site-line) solid var(--fire-edge); box-shadow: var(--site-lift) var(--site-lift) 0 var(--fire-shadow); transition: transform .12s, box-shadow .12s; }
.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(--fire-lime); }
.button.ghost { color: var(--fire-ink); background: transparent; }
.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); }

/* ── Sections: light and loud in turn ───────────────── */
section { padding-block: 88px; border-top: var(--site-line) solid var(--fire-edge); }
main > :nth-child(4n+1) { background: var(--site-2); }
main > :nth-child(4n+3) { background: var(--site-bright); --fire-muted: var(--site-ink); --fire-accent: var(--site-ink); }
main > :nth-child(4n+3) .label { background: var(--fire-deep); color: var(--fire-lime); }
/* Every second part of the page is a loud block. */
main > :nth-child(even), footer {
  background: var(--site-loud); color: var(--site-loud-ink);
  --fire-ink: var(--site-loud-ink); --fire-muted: var(--site-loud-muted); --fire-accent: var(--site-loud-head); --fire-shadow: var(--site-loud-shadow);
}
main > :nth-child(even) h2 { color: var(--site-loud-head); }
/* Cards on a loud block take the light roles back (their shadow stays the block's). */
main > :nth-child(even) :is(.cells, .faq, .post, .end, .demo, .button.ghost) { --fire-ink: var(--site-ink); --fire-muted: var(--site-muted); --fire-accent: var(--site-accent); }

/* A section's label: mono capitals on a lime block. */
.label { display: inline-block; font: 700 13px/1 var(--fire-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fire-deep); background: var(--fire-lime); border: var(--site-line) solid var(--fire-edge); border-radius: 0; padding: 8px 12px; margin: 0 0 24px; }
main > :nth-child(even) .label { border-color: var(--fire-lime); }

/* Cells: a panel cut into a grid whose cells share their lines (the gap shows the outline colour). */
.cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--site-line); background: var(--fire-edge); border: var(--site-line) solid var(--fire-edge); border-radius: var(--site-r); box-shadow: var(--site-drop) var(--site-drop) 0 var(--fire-shadow); overflow: hidden; list-style: none; margin: 0; padding: 0; color: var(--fire-ink); }
.cells.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cells > * { background: var(--site-card); padding: 28px 30px; }
.cells p { margin: 0; color: var(--fire-muted); }
/* Numbered cells: the number on a lime block. */
.cells.steps { counter-reset: step; }
.cells.steps > * { counter-increment: step; }
.cells.steps > *::before { content: counter(step, decimal-leading-zero); display: inline-grid; place-items: center; min-width: 58px; height: 58px; padding-inline: 8px; margin-bottom: 18px; background: var(--fire-lime); color: var(--fire-deep); border: var(--site-line) solid var(--fire-edge); border-radius: 0; font: 800 1.6rem/1 var(--fire-display); }

/* Questions: one panel, the answers ruled apart; the open one's question on lime. */
.faq { max-width: 54rem; background: var(--site-card); border: var(--site-line) solid var(--fire-edge); border-radius: var(--site-r); box-shadow: var(--site-drop) var(--site-drop) 0 var(--fire-shadow); overflow: hidden; color: var(--fire-ink); }
.faq details + details { border-top: var(--site-line) solid var(--fire-edge); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 18px 22px; font: 800 1.15rem/1.3 var(--fire-display); }
.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: var(--site-pick); }
.faq details[open] summary { background: var(--fire-lime); color: var(--fire-deep); border-bottom: var(--site-line) solid var(--fire-edge); }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0; padding: 16px 22px 0; color: var(--fire-muted); }
.faq details p:last-child { padding-bottom: 20px; }

/* ── The "Support me" pill (Ko-fi), heavier: a plain link, no widget script ─ */
.kofi { display: inline-flex; align-items: center; gap: 8px; padding: 4px 16px 4px 6px; border-radius: 999px; background: var(--fire-teal-soft); color: var(--fire-deep); border: var(--site-line) solid var(--fire-edge); box-shadow: 5px 5px 0 var(--fire-shadow); font: 800 15px/1 var(--fire-body); 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: a loud block ───────────────────────────── */
footer { padding-block: 44px 60px; font-size: 15px; border-top: var(--site-line) solid var(--fire-edge); }
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.3rem, 6.5vw, 4rem); line-height: .95; margin: 0 0 14px; }
.doc .date { margin: 0 0 36px; color: var(--fire-muted); font: 600 13px/1.4 var(--fire-mono); letter-spacing: .06em; text-transform: uppercase; }
.doc h2 { font-size: 1.5rem; line-height: 1.1; margin: 48px 0 12px; padding-top: 16px; border-top: var(--site-line) solid var(--fire-edge); }
.doc li { margin: 6px 0; }
.doc li::marker { color: var(--fire-accent); }
.doc table { border-collapse: collapse; width: 100%; font-size: 15.5px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 2px solid var(--fire-line); }
.doc th { border-bottom: var(--site-line) solid var(--fire-edge); }
.doc code { font: .9em var(--fire-mono); background: var(--site-card); border: 2px solid var(--fire-line); padding: 1px 5px; border-radius: 0; }

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

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