/* ============================================================================
   Design system - shared tokens and primitives for the control panel and app.
   Loaded before the page-specific stylesheet so pages can override.

   Everything here is on a 4px spatial grid and a 6-step type scale. If you find
   yourself reaching for a raw px value in a page stylesheet, add a token here
   instead - that's how the ad-hoc 12.5px/10px/16px sprawl got started.
   ========================================================================= */

:root {
  /* ---- Neutral ramp (cool-cast dark) -------------------------------------
     surface-0 is the page, 1 is a panel, 2 is an inset control, 3 is hover. */
  --surface-0: #0b0d11;
  --surface-1: #13161c;
  --surface-2: #1a1e26;
  --surface-3: #222732;
  --surface-4: #2b3140;

  --line-subtle: rgba(255, 255, 255, 0.06);
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.16);

  --ink: #e9ecf2;
  --ink-2: #a2abbb;
  --ink-3: #6b7486;

  /* ---- Brand + semantic -------------------------------------------------- */
  --accent: #f1c40f;
  --accent-ink: #1a1400;
  --accent-dim: rgba(241, 196, 15, 0.14);

  --info: #4c8dff;
  --info-dim: rgba(76, 141, 255, 0.14);
  --ok: #34d399;
  --ok-dim: rgba(52, 211, 153, 0.14);
  --warn: #fbbf24;
  --danger: #f87171;
  --danger-dim: rgba(248, 113, 113, 0.14);

  /* ---- Type -------------------------------------------------------------- */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 15px;
  --fs-lg: 20px;
  --fs-xl: 28px;

  --lh-tight: 1.25;
  --lh-base: 1.5;

  /* ---- Space (4px grid) --------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* ---- Radius ------------------------------------------------------------- */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-full: 999px;

  /* ---- Elevation ---------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.45);

  /* ---- Motion ------------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0, 0.15, 1);
  --dur-1: 100ms;
  --dur-2: 160ms;

  /* ---- Focus -------------------------------------------------------------- */
  --focus-ring: 0 0 0 2px var(--surface-0), 0 0 0 4px var(--info);

  /* Width of the label gutter in a settings row. One number so every label in
     the app lines up on the same axis - the old layout let each row wrap
     independently, which is why nothing aligned. */
  --label-col: 132px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
   Base
   ========================================================================= */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--surface-0);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Every focusable thing gets the same ring. :focus-visible so mouse users
   don't see it, keyboard users always do. */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-sm);
}

/* Numeric readouts shouldn't jitter as digits change. */
.tabular { font-variant-numeric: tabular-nums; }

/* ============================================================================
   Primitives - buttons
   ========================================================================= */

.btn,
button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 30px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease);
}

.btn:hover:not(:disabled) {
  background: var(--surface-3);
  border-color: var(--line-strong);
}

.btn:active:not(:disabled) { background: var(--surface-2); }

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
.btn-primary:hover:not(:disabled) {
  background: #ffd633;
  border-color: #ffd633;
}

.btn-danger {
  background: transparent;
  border-color: var(--line);
  color: var(--danger);
}
.btn-danger:hover:not(:disabled) {
  background: var(--danger-dim);
  border-color: var(--danger);
}

/* Quiet button - for tertiary actions that shouldn't compete. */
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink-2);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--surface-2);
  color: var(--ink);
}

.btn-sm {
  height: 24px;
  padding: 0 var(--sp-2);
  font-size: var(--fs-xs);
}

/* ============================================================================
   Primitives - segmented control
   Replaces the loose rows of toggle buttons (theme/size/shape/direction).
   ========================================================================= */

.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  padding: 3px;
  border: 1px solid var(--line-subtle);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}

.segmented button {
  height: 26px;
  padding: 0 var(--sp-3);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ink-2);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease);
}

.segmented button:hover {
  background: var(--surface-3);
  color: var(--ink);
}

/* updateButtonGroup() in control.js toggles `.selected` - that's the hook.
   `.active` is accepted too so hand-written markup can use either. */
.segmented button.selected,
.segmented button.active {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

/* ============================================================================
   Primitives - form controls
   ========================================================================= */

input[type="text"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
  height: 30px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-base);
  transition: border-color var(--dur-1) var(--ease),
              background var(--dur-1) var(--ease);
}

input[type="text"]:hover,
input[type="number"]:hover,
select:hover { border-color: var(--line-strong); }

input::placeholder { color: var(--ink-3); }

select {
  padding-right: var(--sp-5);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236b7486' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-2) center;
}

/* ---- Checkbox ------------------------------------------------------------
   Native checkboxes render grey-on-grey in dark UI. Custom-drawn so the
   checked state actually reads. */
input[type="checkbox"] {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  cursor: pointer;
  appearance: none;
  transition: background var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease);
}

input[type="checkbox"]:hover { border-color: var(--ink-3); }

input[type="checkbox"]:checked {
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath fill='none' stroke='%231a1400' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 4l2.5 2.5L9 1'/%3E%3C/svg%3E") center no-repeat;
  border-color: var(--accent);
}

/* ---- Range ---------------------------------------------------------------
   Thumb is 16px so it's an easy grab target; track is thin so the thumb reads
   as the primary element. */
input[type="range"] {
  height: 16px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--r-full);
  background: var(--surface-4);
}
input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: var(--r-full);
  background: var(--surface-4);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border: none;
  border-radius: var(--r-full);
  background: var(--ink);
  box-shadow: var(--shadow-1);
  cursor: grab;
  transition: transform var(--dur-1) var(--ease),
              background var(--dur-1) var(--ease);
}
input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: none;
  border-radius: var(--r-full);
  background: var(--ink);
  box-shadow: var(--shadow-1);
  cursor: grab;
}

input[type="range"]:hover::-webkit-slider-thumb { background: #fff; }
input[type="range"]:active::-webkit-slider-thumb {
  cursor: grabbing;
  transform: scale(1.15);
  background: var(--accent);
}
input[type="range"]:active::-moz-range-thumb {
  cursor: grabbing;
  background: var(--accent);
}

/* ============================================================================
   Primitives - layout + text
   ========================================================================= */

.panel {
  border: 1px solid var(--line-subtle);
  border-radius: var(--r-xl);
  background: var(--surface-1);
  box-shadow: var(--shadow-1);
}

.eyebrow {
  margin: 0;
  color: var(--ink-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hint {
  margin: 0;
  color: var(--ink-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}

code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

kbd {
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink-2);
}

/* Status pill - replaces bare coloured text for state readouts. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 22px;
  padding: 0 var(--sp-2) 0 var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: 500;
}

.pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: currentColor;
}

.pill-ok     { background: var(--ok-dim);     border-color: transparent; color: var(--ok); }
.pill-warn   { background: var(--accent-dim); border-color: transparent; color: var(--warn); }
.pill-danger { background: var(--danger-dim); border-color: transparent; color: var(--danger); }
.pill-muted::before { background: var(--ink-3); }

/* Utility - visually hidden but available to screen readers. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}