/* ── Composer base ─────────────────────────────────────────────────
   One source of truth for the composer TOOLS (haiku, sonnet, sestina).
   Loaded once via layouts/toys/list.html when a toy sets `composer: true`
   in front matter. Poems do NOT load this — they keep bespoke styles and
   only share the top-bar from shared-styles.css.

   Refined-manuscript palette: cooler paper (less tan), white cards, ink
   reserved warm-black. Serif is for the POEM TEXT; mono is the machinery
   (counts, labels, kickers). Functional colour only — green lands, orange
   overshoots, red is off. ─────────────────────────────────────────── */

:root {
  /* Surfaces — cooler than the old beige; cards lift gently off the page. */
  --bg-page: #f3f2ef;
  --bg-card: #fafaf9;
  --bg-card-hit: #ffffff;

  /* Ink */
  --ink: #1a1714;
  --ink-soft: rgba(26, 23, 20, 0.7);
  --ink-mute: rgba(26, 23, 20, 0.5);
  --ink-faint: rgba(26, 23, 20, 0.32);

  /* Hairlines */
  --line: rgba(26, 23, 20, 0.12);
  --line-strong: rgba(26, 23, 20, 0.18);

  /* Functional state — the only colour these tools use. */
  --ok: rgba(42, 77, 51, 1);
  --ok-line: rgba(53, 94, 59, 0.45);
  --ok-wash: rgba(53, 94, 59, 0.06);
  --over: rgba(150, 78, 22, 1);
  --over-line: rgba(192, 100, 30, 0.45);
  --off: rgba(159, 47, 47, 0.92);

  /* Type */
  --font-serif: 'EB Garamond', 'Iowan Old Style', Georgia, serif;
  --font-mono: 'Space Mono', 'IBM Plex Mono', monospace;

  /* A restrained type scale for the shared chrome. */
  --fs-h1: 2.2rem;
  --fs-note: 0.95rem;
  --fs-label: 0.66rem;      /* kicker / mono labels, dialed back */

  --radius: 3px;
}

body {
  background: var(--bg-page);
  color: var(--ink);
  font-family: var(--font-serif);
}

/* ── Top bar — light override of the shared dark default ───────────── */
.toy-top-bar {
  background: rgba(243, 242, 239, 0.92);
  border-bottom-color: var(--line);
  color: var(--ink);
}
.toy-top-bar .back-button {
  color: #4a453e;
  background: rgba(26, 23, 20, 0.04);
  border-color: var(--line-strong);
}
.toy-top-bar .back-button:hover {
  background: rgba(26, 23, 20, 0.08);
  color: var(--ink);
}
.toy-top-bar .toy-name { color: var(--ink); }
.toy-top-bar .bar-about,
.toy-top-bar .bar-share { color: #4a453e; }
/* Light bg: hover darkens, not lightens (shared default assumes dark). */
.toy-top-bar .bar-about:hover,
.toy-top-bar .bar-compose:hover,
.toy-top-bar .bar-share:hover {
  background: rgba(26, 23, 20, 0.08);
  border-color: rgba(26, 23, 20, 0.28);
  color: var(--ink);
}

/* ── Header block ──────────────────────────────────────────────────── */
.compose-head {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.compose-head h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h1);
  letter-spacing: -0.5px;
  margin-bottom: 8px;
}

/* Kicker — the little // label. Dialed back: smaller, quieter, still a
   clickable reroll. Min-width keeps the header from shifting on reroll. */
.section-kicker {
  display: inline-block;
  min-width: 10ch;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 10px;
}
.section-kicker--reroll {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color 140ms ease;
}
.section-kicker--reroll:hover { color: var(--ink-mute); }

.section-note {
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: var(--fs-note);
  line-height: 1.55;
  max-width: 56ch;
}
.section-note strong { font-weight: 600; color: var(--ink); }
.section-note--quiet {
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--ink-mute);
}