/* growchronicle.com — the shared stylesheet for every page that is not the homepage:
 * /faq.html, /privacy.html, /terms.html, /known-issues.html, /404.html and the generated
 * /help/ set (scripts/build-site-help.mjs links it). The homepage has its own
 * landing.css; this file uses the same tokens, the same Manrope, and the same header
 * and footer chrome, so the site reads as one product.
 *
 * ⚠ The header/footer MARKUP is repeated in each hand-written page and in the help
 * generator's shell. Change it in all six places, or the pages drift.
 *
 * ⚠ theme.js styles its toggle with --soft / --ink / --green / --ring; they are mapped
 * onto the tokens below. Dark is the default (data-theme="dark" is in every page's
 * markup); an explicit light choice comes from theme.js via html[data-theme="light"].
 */
@font-face { font-family: Manrope; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/assets/manrope-latin.woff2") format("woff2"); }

:root {
  --gc-ground:#0a1410; --gc-surface:#111f18; --gc-raised:#182a20;
  --gc-line:#2b3c32; --gc-ink:#f1f5ee; --gc-muted:#b6c3b8;
  --gc-accent:#c8f58c; --gc-on-accent:#13210d; --gc-subtle:#d7e6d3;
  --soft: var(--gc-surface); --ink: var(--gc-ink); --ring: var(--gc-line); --green: var(--gc-accent);
  color-scheme: dark;
}
html[data-theme="light"] {
  --gc-ground:#f6f8f2; --gc-surface:#edf1e8; --gc-raised:#e2eadd;
  --gc-line:#cbd6c7; --gc-ink:#16291d; --gc-muted:#4f6253;
  --gc-accent:#346516; --gc-on-accent:#ffffff; --gc-subtle:#335039;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--gc-ground); color: var(--gc-ink);
  font-family: Manrope, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px; line-height: 1.65; overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
:is(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--gc-accent); outline-offset: 3px; }

/* ── Chrome: the same header and footer as the homepage ─────────────────────── */
.gc-width { max-width: 1184px; margin-inline: auto; padding-inline: 40px; }
.gc-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; padding-block: 27px; border-bottom: 1px solid var(--gc-line); }
.gc-brand { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 1.17rem; font-weight: 800; letter-spacing: -.055em; color: inherit; text-decoration: none; }
.gc-brand img { width: 34px; height: 34px; border-radius: 9px; }
.gc-brand sup { font-size: .75rem; font-weight: 500; align-self: flex-start; line-height: 1; margin-top: 4px; margin-left: -5px; letter-spacing: 0; }
.gc-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 27px; margin-left: auto; font-size: .875rem; font-weight: 500; color: var(--gc-muted); }
.gc-nav a { padding-block: 10px; color: inherit; text-decoration: none; }
.gc-nav a[aria-current="page"] { color: var(--gc-ink); }
.gc-nav a:hover, .gc-footer a:hover { color: var(--gc-accent); }
.gc-footer { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; padding-block: 38px 32px; border-top: 1px solid var(--gc-line); font-size: .8125rem; color: var(--gc-muted); }
.gc-footer-name { font-weight: 600; font-size: .875rem; color: var(--gc-ink); margin-bottom: 4px; }
.gc-footer-legal { margin: 6px 0 0; max-width: 52ch; }
.gc-footer-links { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 7px 23px; max-width: 480px; }
.gc-footer-links a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 7px; color: inherit; text-decoration: none; }

/* ── Article column ──────────────────────────────────────────────────────────── */
.gc-article { max-width: 760px; padding-block: 44px 72px; }
.gc-article h1 { font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 600; letter-spacing: -.045em; line-height: 1.12; margin: 0 0 8px; }
.gc-article h2 { font-size: 1.35rem; font-weight: 600; letter-spacing: -.03em; line-height: 1.3; margin: 2.2em 0 .55em; }
.gc-article h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; margin: 1.7em 0 .4em; }
.gc-article p, .gc-article li { color: var(--gc-subtle); }
.gc-article p { margin: 0 0 1em; }
.gc-article a { color: var(--gc-accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--gc-accent) 45%, transparent); text-underline-offset: 3px; }
.gc-article a:hover { text-decoration-color: var(--gc-accent); }
.gc-article strong, .gc-article b { color: var(--gc-ink); }
.gc-article em { color: var(--gc-ink); font-style: normal; font-weight: 600; }
.date { color: var(--gc-muted); font-size: .9rem; margin: 0 0 2em; }
.card { background: var(--gc-surface); border: 1px solid var(--gc-line); border-radius: 12px; padding: 16px 20px; margin: 1.2em 0; }
.card p { margin: 0; }
.toc { columns: 2; column-gap: 28px; padding-left: 20px; margin: 0 0 1em; }
.toc li { margin: .3em 0; break-inside: avoid; }
ol.steps { padding-left: 22px; } ol.steps li { margin: .4em 0; }
.what { margin: .2em 0; } .what b { color: var(--gc-ink); }
.langs { margin: 2.5em 0 0; padding-top: 1.2em; border-top: 1px solid var(--gc-line); font-size: .9rem; }
.langs a { margin-right: .9em; display: inline-block; }
.langs strong { margin-right: .9em; display: inline-block; color: var(--gc-muted); }
table { border-collapse: collapse; width: 100%; margin: 1.2em 0; font-size: .95rem; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--gc-line); vertical-align: top; }
th { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gc-muted); font-weight: 500; }
pre { background: var(--gc-surface); border: 1px solid var(--gc-line); border-radius: 10px; padding: 12px; overflow: auto; font-size: .8rem; margin-top: 10px; color: var(--gc-ink); }

/* ── Forms (the FAQ contact form) ─────────────────────────────────────────────── */
label { display: block; font-weight: 600; font-size: .9rem; margin: 14px 0 6px; color: var(--gc-ink); }
select, textarea { width: 100%; padding: 12px 14px; border-radius: 7px; border: 1px solid var(--gc-line); background: var(--gc-surface); color: var(--gc-ink); font: inherit; font-size: .95rem; }
textarea { min-height: 120px; resize: vertical; }
textarea::placeholder { color: var(--gc-muted); opacity: 1; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 14px; padding: 12px 18px; border-radius: 7px; border: 1px solid transparent; background: var(--gc-accent); color: var(--gc-on-accent); font: inherit; font-size: .875rem; font-weight: 700; cursor: pointer; text-decoration: none; transition: transform .18s, filter .18s; }
.btn:hover { filter: brightness(1.06); transform: translateY(-2px); }
.btn.sec { background: transparent; color: var(--gc-ink); border-color: var(--gc-line); margin-left: 8px; }
.hint { color: var(--gc-muted); font-size: .85rem; margin-top: 12px; }

/* ── 404 ───────────────────────────────────────────────────────────────────────── */
.gc-article .back { display: inline-block; margin-bottom: 8px; font-size: .875rem; }
.gc-article ul { padding-left: 20px; } .gc-article ul li { margin: 6px 0; }

/* ── Widths ────────────────────────────────────────────────────────────────────── */
@media (max-width: 920px) { .gc-width { padding-inline: 28px; } .gc-nav { gap: 4px 20px; } }
@media (max-width: 680px) {
  .gc-width { padding-inline: 23px; }
  .gc-header { padding-block: 20px; gap: 12px 14px; }
  .gc-brand { font-size: 1.1rem; } .gc-brand img { width: 30px; height: 30px; }
  .gc-article { padding-block: 32px 56px; }
  .toc { columns: 1; }
  .gc-footer { flex-direction: column; gap: 16px; padding-block: 28px; }
  .gc-footer-links { justify-content: flex-start; gap: 3px 22px; }
}
@media (max-width: 370px) { .gc-width { padding-inline: 18px; } .gc-brand { font-size: .96rem; gap: 7px; } .gc-brand img { width: 27px; height: 27px; } .gc-brand sup { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }