/* Demo control panel. Merges the three dialects found in the estate:
   the hermes/kybernetes floated .val label, the aegis grid of
   label | slider | output triples and the symbole flex .ctl column.
   Pick the markup you like; all three render correctly from this sheet. */

.panel {
  background: var(--panel, #13131c);
  border: 1px solid var(--line, #23232f);
  border-radius: 12px;
  padding: 16px;
}
.panel h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--muted, #8a8a9c);
  margin: 0 0 12px;
  font-weight: 600;
}

.row { display: flex; gap: 8px; }

.panel button, .controls button {
  cursor: pointer;
  border: 1px solid var(--line, #23232f);
  background: #1c1c28;
  color: var(--ink, #e7e7ef);
  font: inherit;
  font-size: 13px;
  padding: 9px 10px;
  border-radius: 8px;
  transition: 0.12s;
}
.row button { flex: 1; }
button.primary {
  background: var(--accent, #7cc4ff);
  color: var(--accent-ink, #06121f);
  border-color: transparent;
  font-weight: 600;
}
button:disabled { opacity: 0.45; cursor: default; }

/* dialect 1: block label with a floated readout span */
.panel label { display: block; margin-top: 14px; font-size: 12px; color: var(--muted, #8a8a9c); }
.panel label .val { float: right; color: var(--ink, #e7e7ef); font-family: var(--mono, ui-monospace, monospace); }

input[type="range"] { width: 100%; margin-top: 7px; accent-color: var(--accent, #7cc4ff); }

/* Visible focus for keyboard users (WCAG 2.4.7, 1.4.11). The fallback ring
   is about 9.8:1 against the panel; if you set --focus or --accent, keep it
   at 3:1 or better against your panel and ground. */
input[type="range"]:focus-visible,
.panel button:focus-visible,
.controls button:focus-visible,
.seg button:focus-visible {
  outline: 2px solid var(--focus, var(--accent, #7cc4ff));
  outline-offset: 3px;
  border-radius: 4px;
}

/* dialect 2: grid of label | slider | output triples */
.controls.grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 9px 12px;
  align-items: center;
  margin-top: 12px;
  max-width: 520px;
}
.controls.grid label { color: var(--muted, #8a8a9c); font-size: 12.5px; font-family: var(--mono, ui-monospace, monospace); margin: 0; }
.controls.grid output { font-family: var(--mono, ui-monospace, monospace); color: var(--ink, #e7e7ef); min-width: 56px; text-align: right; font-size: 12.5px; }
.controls.grid input[type="range"] { margin-top: 0; }

/* dialect 3: flex row of .ctl columns */
.controls.flex { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; }
.ctl { display: flex; flex-direction: column; gap: 4px; min-width: 180px; }
.ctl label { font-size: 0.82rem; color: var(--muted, #8a8a9c); letter-spacing: 0.04em; margin: 0; }
.ctl output { font-variant-numeric: tabular-nums; color: var(--ink, #e7e7ef); font-size: 0.9rem; }
.ctl input[type="range"] { width: 180px; margin-top: 0; }

/* segmented button group (controls.js seg()) */
.seg { display: inline-flex; gap: 6px; margin-top: 8px; }
.seg button { padding: 6px 10px; }
.seg button.active,
.seg button[aria-pressed="true"] {
  background: var(--accent, #7cc4ff);
  color: var(--accent-ink, #06121f);
  border-color: transparent;
  font-weight: 600;
}

.readout { color: var(--muted, #8a8a9c); font-size: 0.9rem; }
.readout b { color: var(--ink, #e7e7ef); font-variant-numeric: tabular-nums; }
.hint { color: var(--muted, #8a8a9c); font-size: 11.5px; margin-top: 12px; line-height: 1.5; }

/* Entity sliders (bindSlider { ent }). TAXIS R1: the slider is drawn in its
   entity's colour so prose can say "the orange slider". The colour is
   currentColor, which registry's linkageCSS sets per [data-ent]; pass
   bindSlider { colour } or set --ent-colour to use one without the registry.
   The filled part of the track is a gradient bindSlider keeps current in
   --ent-track, drawn on the track pseudo-element in every engine (WebKit,
   Blink and Gecko), with accent-color as the fallback where those pseudo
   elements are ignored. The input is 40px tall so the hit area meets R15
   while the visible track stays thin. */
input[type="range"].ent-range {
  -webkit-appearance: none;
  appearance: none;
  color: var(--ent-colour, currentColor);
  accent-color: currentColor;
  background: transparent;
  height: var(--ent-hit, 40px);
  margin-top: 0;
  cursor: pointer;
}
input[type="range"].ent-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: var(--ent-track, var(--ent-rest, #34344a));
}
input[type="range"].ent-range::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--ent-track, var(--ent-rest, #34344a));
}
input[type="range"].ent-range::-moz-range-progress { background: transparent; }
/* The thumb carries a ring in the panel colour so it stays distinct from
   the filled track, which is the same hue. P4: the entity colour itself
   clears 3:1 on the ground (palette/check.js gates that). */
input[type="range"].ent-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--ent-thumb, 18px);
  height: var(--ent-thumb, 18px);
  margin-top: calc((6px - var(--ent-thumb, 18px)) / 2);
  border-radius: 50%;
  background: currentColor;
  border: 3px solid var(--panel, #13131c);
  box-shadow: 0 0 0 1px currentColor;
}
input[type="range"].ent-range::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--ent-thumb, 18px);
  height: var(--ent-thumb, 18px);
  border-radius: 50%;
  background: currentColor;
  border: 3px solid var(--panel, #13131c);
  box-shadow: 0 0 0 1px currentColor;
}
input[type="range"].ent-range:hover::-webkit-slider-thumb,
input[type="range"].ent-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px currentColor, 0 0 8px currentColor; }
input[type="range"].ent-range:hover::-moz-range-thumb,
input[type="range"].ent-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 1px currentColor, 0 0 8px currentColor; }

/* Reduced motion (STYLE.md): keep the state change, drop the transition,
   even when this sheet is used without theme.css. */
@media (prefers-reduced-motion: reduce) {
  .panel *, .controls *, .seg * { transition: none !important; }
}