/* ============================================================================
   toys.css — toy-specific styles shared by the FOUR Westhaven toy pages only:
     westhaven/audit.html · violation.html · thermostat.html · bells.html

   These pages link three stylesheets, in order:
     theme.css       (design tokens + shared components)   — read-only
     westhaven.css   (the municipal CHROME: header, ribbon, footer, seal, nav)  — read-only
     toys.css        (this file: only the toy primitives)

   The chrome is NOT redefined here — it comes from westhaven.css so the toy
   pages match the rest of the town site exactly. Everything below is scoped to
   the toy- / sharecard / gate namespaces to avoid colliding with either shared
   sheet. Page-unique layout stays inline in each page's own <style>.
   ========================================================================== */

/* page heading block (kept off the wh- namespace to avoid the chrome's .wh-hero) */
.toy-head { margin-bottom: var(--space-6); }
.toy-head h1 { font-size: var(--fs-900); margin-top: var(--space-2); }
.toy-head .lede { margin-top: var(--space-3); }

/* a plain municipal callout strip (deadpan officialdom) */
.toy-strip {
  display: block;
  border: 1px solid var(--line-soft); border-left: 3px solid var(--moss);
  background: var(--cream-06); border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-200); color: var(--ink-soft);
  max-width: none;
}
.toy-strip .green-led { margin-right: 0.4em; }

/* placeholder markers — the copy team swaps anything tagged [data-placeholder].
   Kept faint so a demo still reads clean; grep-able via the attribute. */
[data-placeholder] {
  text-decoration-line: underline; text-decoration-style: dotted;
  text-decoration-color: var(--cream-20); text-underline-offset: 3px;
}
[data-placeholder]:hover { text-decoration-color: var(--gold-glow); }

/* select — no default-look controls allowed */
.toy-select {
  appearance: none; -webkit-appearance: none;
  width: 100%;
  background: var(--navy-deep);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.8em 2.4em 0.8em 1em;
  color: var(--ink); font-family: var(--font-body);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: right 1.05em top 52%, right 0.75em top 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
.toy-select:focus-visible { outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-glow); }
.toy-select option { background: var(--navy-deep); color: var(--ink); }

/* labelled form field (stacked) */
.toy-formrow { display: flex; flex-direction: column; gap: 0.4rem; }
.toy-label {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: var(--tracking-mid); font-size: var(--fs-200);
  color: var(--ink-soft);
}

/* number stepper (touch-friendly; used by bells) */
.toy-stepper { display: inline-flex; align-items: stretch;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--navy-deep); }
.toy-stepper button {
  width: 3rem; font-size: var(--fs-700); color: var(--ink-soft);
  background: var(--surface); transition: background var(--dur-1), color var(--dur-1); }
.toy-stepper button:hover { background: var(--surface-2); color: var(--cream); }
.toy-stepper input {
  width: 5rem; text-align: center; background: transparent; border: none;
  color: var(--ink); font-family: var(--font-display); font-size: var(--fs-700);
  -moz-appearance: textfield; }
.toy-stepper input::-webkit-outer-spin-button,
.toy-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.toy-stepper input:focus-visible { outline: none; }

/* ---- shared SHARE-CARD block (the reader-about keepsake, canvas-rendered) --- */
.sharecard { margin-top: var(--space-5); }
.sharecard__stage {
  display: flex; justify-content: center;
  background: repeating-linear-gradient(45deg, #0a111c 0 12px, #0b1320 12px 24px);
  border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  padding: var(--space-5); overflow: hidden;
}
.sharecard__canvas { max-width: 100%; height: auto; border-radius: var(--radius-sm); box-shadow: var(--shadow-2); }
.sharecard__actions { display: flex; flex-wrap: wrap; gap: var(--space-3);
  align-items: center; justify-content: center; margin-top: var(--space-4); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.seg button {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: var(--tracking-mid); font-size: var(--fs-200);
  color: var(--ink-soft); padding: 0.6em 1em;
  transition: background var(--dur-1), color var(--dur-1); }
.seg button[aria-pressed="true"] { background: var(--surface-2); color: var(--cream); }

/* ---- gate (email capture at the RESULT, not the start) ---- */
.gate { max-width: 34rem; }
.gate__byline { margin-top: var(--space-3); font-size: var(--fs-200); color: var(--ink-faint); }
.gate__note { font-size: var(--fs-200); color: var(--ink-faint); }

/* small utilities */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }
.stack-4 > * + * { margin-top: var(--space-4); }
.stack-3 > * + * { margin-top: var(--space-3); }