/* @spine-kit parametric/params-panel.css · v1
   Canonical source: spine/kits/parametric/params-panel.css
   Paste-verbatim. Fix the spine, then re-vendor — do not edit this copy in place. */

/* ── token choice, on purpose ──────────────────────────────────────
   Every color and radius below reads a CANONICAL Context-A (Night
   Shift) token — --text, --muted, --border, --surface, --accent,
   --r-card, --r-chip, --r-badge, --font-sans, --font-mono — rather
   than a Context-D Rainbow --tp-* token or a site-local derived alias
   like AMANECER's --ink-72/--line. Per the tokens kit's own CONTEXTS.md:
   "a spine stack that is not one of the two [rebuilt outward] sites
   defaults to Context A alone" — which is every casa-* stack this
   spine currently serves. Context A is also guaranteed present in any
   stack that has vendored the tokens kit at all, where Context D is
   opt-in and a site-local alias is never guaranteed. This is what
   keeps this file correct standing alone, on a dark OR a light ground.
   A stack that promotes Context D to its site canvas (AMANECER/PUERTAS-
   style, per the 2026-07-22 scope amendment) and wants the warmer
   Rainbow accent instead should override the one custom property below
   in ITS OWN stylesheet — never edit this vendored copy:
     .params { --_params-accent: var(--tp-ember-deep); }
   (a *-deep token, per CONTEXTS.md's computed rule 2 — raw warm hues
   are decorative-only on light ground; this override only ever reaches
   borders/fills/focus rings here, never body text, so either would in
   fact be compliant, but -deep is the more obviously-correct default.)
   Every selector here is scoped under .params so it only ever touches
   this panel, never the rest of the page. */
.params {
  --_params-accent: var(--accent);
}

.params-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-chip, 999px);
  color: var(--text);
  font: 13.5px var(--font-mono, monospace);
  letter-spacing: 0.08em;
  padding: 10px 20px;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.params-toggle:hover {
  border-color: var(--_params-accent);
  background: color-mix(in srgb, var(--_params-accent) 12%, transparent);
}
.params-toggle[aria-expanded="true"] {
  border-style: solid;
  border-color: var(--_params-accent);
}
.params-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--_params-accent);
}

.params-panel {
  display: block;
  margin-top: 18px;
  max-width: 560px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card, 16px);
  padding: 24px;
}
/* Belt-and-suspenders: some resets set `display` on every div, which
   can fight the UA [hidden] rule. This selector is more specific than
   the bare .params-panel rule above regardless of source order, so it
   always wins once a stack's boot script adds the attribute. */
.params-panel[hidden] { display: none; }

.params-note {
  font: 12.5px/1.5 var(--font-sans, sans-serif);
  color: var(--muted);
  margin: 0 0 12px;
  letter-spacing: 0.01em;
}

.param-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(96px, 150px) 56px;
  align-items: center;
  gap: 14px;
  padding-block: 10px;
}
.param-row + .param-row { border-top: 1px dashed var(--border); }
.param-row label,
.param-row .param-label {
  font: 13px var(--font-sans, sans-serif);
  color: var(--muted);
}
.param-out {
  font: 13px var(--font-mono, monospace);
  color: var(--text);
  text-align: right;
}
.param-row input[type="range"] {
  width: 100%;
  accent-color: var(--_params-accent);
}
.param-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--_params-accent);
  justify-self: start;
}

.btn-seed {
  background: color-mix(in srgb, var(--_params-accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--_params-accent) 45%, transparent);
  color: var(--text);
  font: 12.5px var(--font-mono, monospace);
  padding: 8px 12px;
  border-radius: var(--r-badge, 6px);
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.btn-seed:hover {
  background: color-mix(in srgb, var(--_params-accent) 26%, transparent);
  border-color: var(--_params-accent);
}

/* ── focus + motion: correct even if the page has no rules of its own ─ */
.params :focus-visible {
  outline: 3px solid var(--_params-accent);
  outline-offset: 3px;
  border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .params, .params * { transition-duration: 0.01ms !important; }
}

/* ── responsive: stack to one column, never overflow ─────────────── */
@media (max-width: 480px) {
  .param-row { grid-template-columns: 1fr; gap: 8px; }
  .param-out { text-align: left; }
}