/* Typist site — one stylesheet, no JS, no web fonts, no third-party anything.
   Tokens are copied from the extension's styles.css so the site and the side
   panel read as one product. Dark is the base and light is the override, in
   that order, to match the extension exactly. */

:root {
  --bg:      #14120f;
  --panel:   #1e1b16;
  --sunk:    #100e0c;
  --line:    #2e2a23;
  --fg:      #ede8df;
  --muted:   #8b8378;
  --faint:   #5c554c;
  --accent:  #e0a03c;
  --accent-d:#c4862a;

  /* Text on an amber fill is pinned to the dark ink in BOTH schemes. The panel
     puts white on amber in its light scheme, which is fine for a 10px control
     but falls under 4.5:1 at the sizes used here. */
  --on-accent: #14120f;

  --measure: 62ch;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:      #faf8f4;
    --panel:   #ffffff;
    --sunk:    #f0ece4;
    --line:    #e2ddd2;
    --fg:      #2a251e;
    /* A shade darker than the panel's #7a7368: secondary text here is body
       size, not 10px chrome, so it has to clear 4.5:1 on its own. */
    --muted:   #6f685d;
    --faint:   #a8a094;
    --accent:  #c07f1e;
    --accent-d:#a06a14;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.65 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── skip link ────────────────────────────────────────────── */
.skip {
  position: absolute; left: -9999px; top: 0;
  padding: 8px 12px; z-index: 10;
  color: var(--on-accent); background: var(--accent);
  border-radius: 0 0 6px 0; text-decoration: none; font-weight: 700;
}
.skip:focus { left: 0; }

/* ── frame ────────────────────────────────────────────────── */
/* The hairline echoes the side panel's progress rail. */
.rail { height: 2px; background: linear-gradient(90deg, var(--accent-d), var(--accent)); }

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 22px;
}

.site-head { border-bottom: 1px solid var(--line); }

.head-row {
  display: flex; align-items: baseline; gap: 16px;
  padding-top: 18px; padding-bottom: 16px;
}

.brand {
  font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em;
  color: var(--fg); text-decoration: none;
}
.brand::after { content: "."; color: var(--accent); }

.head-nav { margin-left: auto; display: flex; gap: 18px; font-size: 0.92rem; }

main { padding-top: 40px; }

/* ── type ─────────────────────────────────────────────────── */
h1 {
  margin: 0 0 0.5em;
  font-size: clamp(1.8rem, 1.3rem + 2vw, 2.4rem);
  line-height: 1.12; letter-spacing: -0.025em; font-weight: 700;
}

h2 {
  margin: 2.8rem 0 0.65rem;
  font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.012em;
}

h3 { margin: 1.8rem 0 0.4rem; font-size: 1rem; }

p, ul, ol, dl { margin: 0 0 1rem; }

.kicker {
  margin: 0 0 0.6rem;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--faint);
}

.lede { font-size: 1.1rem; line-height: 1.55; }

.note, .small { font-size: 0.9rem; color: var(--muted); }

.updated { font-size: 0.9rem; color: var(--muted); margin-bottom: 2rem; }

/* Links stay foreground-coloured with an amber underline: amber-on-parchment
   is a 3:1 pair, too thin for body text. */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--accent); text-decoration-thickness: 2px; }

strong { font-weight: 700; }

/* ── placeholder markers ──────────────────────────────────── */
/* Every one of these is a decision the owner still has to make. They are meant
   to be impossible to miss in the rendered page, not just in the source. */
.ph {
  display: inline-block;
  padding: 0.05em 0.42em;
  font: 0.84em/1.5 ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  color: var(--fg); background: var(--sunk);
  border: 1px dashed var(--accent);
  border-radius: 4px;
}

.ph-block {
  display: block;
  margin: 1rem 0;
  padding: 0.7rem 0.85rem;
  font: 0.9rem/1.55 ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  color: var(--fg); background: var(--sunk);
  border: 1px dashed var(--accent);
  border-radius: 6px;
}

/* ── buttons ──────────────────────────────────────────────── */
.cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 1.6rem 0 0.6rem;
}

.btn {
  display: inline-block;
  padding: 11px 20px;
  font-size: 1rem; font-weight: 700; letter-spacing: 0.01em;
  color: var(--on-accent); background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px; text-decoration: none;
}
.btn:hover { color: var(--on-accent); background: var(--accent-d); border-color: var(--accent-d); }

/* Dashed + unfilled, so nobody mistakes an unwired link for a live store button. */
.btn--ph {
  color: var(--fg); background: none;
  border-style: dashed;
}
.btn--ph:hover { color: var(--fg); background: var(--sunk); border-color: var(--accent); }

.cta-note { margin: 0 0 1.4rem; font-size: 0.9rem; color: var(--muted); }

/* ── lists ────────────────────────────────────────────────── */
.bullets { list-style: none; margin: 0 0 1rem; padding: 0; }
.bullets li {
  position: relative;
  margin-top: 0.8rem;
  padding-left: 1.1rem;
}
.bullets li::before {
  content: "";
  position: absolute; left: 0; top: 0.72em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
}

.steps { counter-reset: step; list-style: none; margin: 1.2rem 0; padding: 0; }
.steps li {
  counter-increment: step;
  position: relative;
  margin-top: 1.1rem;
  padding-left: 2.6rem;
}
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0.1em;
  display: flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem;
  font: 700 0.82rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--accent); background: var(--sunk);
  border: 1px solid var(--line); border-radius: 50%;
}

.facts { margin: 1.2rem 0 0; }
.facts dt { margin-top: 1.2rem; font-weight: 700; }
.facts dd { margin: 0.25rem 0 0; }

/* ── plan table ───────────────────────────────────────────── */
.table-wrap { overflow-x: auto; margin: 1.2rem 0 0.8rem; }

.plans {
  width: 100%; min-width: 34ch;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.plans th, .plans td {
  padding: 0.62rem 0.7rem;
  text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.plans thead th {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--faint);
  border-bottom-color: var(--accent-d);
}
.plans thead .pro { color: var(--accent); }
.plans tbody th { font-weight: 600; }
.plans td { font-variant-numeric: tabular-nums; }
.plans .pro { background: var(--sunk); }
.plans tr:last-child th, .plans tr:last-child td { border-bottom: 0; }
.plans caption {
  caption-side: bottom;
  padding-top: 0.8rem;
  font-size: 0.85rem; color: var(--muted); text-align: left;
}

/* ── callout ──────────────────────────────────────────────── */
.callout {
  margin: 1.6rem 0;
  padding: 0.95rem 1.05rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  font-size: 0.95rem;
}
.callout > :last-child { margin-bottom: 0; }
.callout .kicker { margin-bottom: 0.45rem; }

/* ── footer ───────────────────────────────────────────────── */
.site-foot {
  margin-top: 4.5rem;
  padding: 1.6rem 0 3.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.9rem; color: var(--muted);
}
.foot-nav {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem;
  margin: 0 0 0.9rem; padding: 0; list-style: none;
}
.foot-nav a { color: var(--fg); }
.foot-line { margin: 0; }