/* THE GOD TERMINAL — settings window (js/settings.js).
 * Window chrome comes from windows.css; this styles the controls inside it.
 * Swatches show their own palette's colours through --sw-* variables set from
 * GT.palettes; everything else follows the live palette tokens. */

.st {
  container-type: inline-size;
  display: grid;
  gap: 1.15rem;
}
.st-h { margin: 0 0 0.6rem; }

/* ───────── switch tiles ───────── */
.st-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}
.st-tile {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  min-height: 3.75rem;
  padding: 0.55rem 0.7rem 0.55rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel-strong) 55%, transparent);
  color: var(--text);
  font: 700 0.9rem/1.2 var(--font-mono);
  text-align: left;
  cursor: pointer;
  transition: transform 150ms cubic-bezier(.2, 1.6, .4, 1), border-color 220ms, background-color 220ms, color 220ms, box-shadow 220ms;
}
.st-tile:hover { border-color: var(--line-bright); color: var(--text-bright); }
.st-tile:focus-visible { outline: 2px solid var(--line-bright); outline-offset: 2px; }
.st-tile.is-pressed { transform: scale(1.045); }
.st-tile[aria-checked="true"] {
  color: var(--text-bright);
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent 75%),
    color-mix(in srgb, var(--panel-strong) 70%, transparent);
  box-shadow:
    0 0 calc(18px * var(--glow-k)) calc(-7px * var(--glow-k)) var(--accent),
    inset 0 1px 0 color-mix(in srgb, var(--accent) 22%, transparent);
}
.st-ico {
  display: block;
  width: 1.65rem; height: 1.65rem;
  color: var(--dim);
  transition: color 220ms, filter 220ms;
}
.st-ico svg { display: block; width: 100%; height: 100%; }
.st-tile:hover .st-ico { color: var(--text); }
.st-tile[aria-checked="true"] .st-ico {
  color: var(--accent);
  filter: drop-shadow(0 0 calc(6px * var(--glow-k)) var(--accent));
}
.st-name { min-width: 0; text-shadow: none; transition: text-shadow 220ms; }
.st-tile[aria-checked="true"] .st-name { text-shadow: var(--text-glow); }

/* The switch: knob position is CSS; the squash-and-stretch is a WAAPI flourish on top. */
.st-switch {
  --w: 3.3rem;
  --h: 1.9rem;
  --pad: 0.24rem;
  --k: calc(var(--h) - 2 * var(--pad) - 2px);
  position: relative;
  flex: none;
  width: var(--w); height: var(--h);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 75%, transparent);
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.65);
  transition: background-color 240ms, border-color 240ms, box-shadow 240ms;
}
.st-knob {
  position: absolute;
  top: var(--pad); left: var(--pad);
  width: var(--k); height: var(--k);
  border-radius: 50%;
  /* Off reads as an unlit, ringed knob; on is a glowing white one. */
  background: color-mix(in srgb, var(--dim) 30%, var(--bg));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--dim) 85%, transparent), 0 1px 3px rgba(0, 0, 0, 0.7);
  transition: background-color 240ms, box-shadow 240ms;
}
[aria-checked="true"] > .st-switch {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 42%, var(--bg));
  box-shadow:
    0 0 calc(14px * var(--glow-k)) calc(-2px * var(--glow-k)) var(--accent),
    inset 0 0 8px color-mix(in srgb, var(--accent) 45%, transparent);
}
[aria-checked="true"] > .st-switch .st-knob {
  transform: translateX(calc(var(--w) - var(--k) - 2 * var(--pad) - 2px));
  background: radial-gradient(circle at 38% 32%, #fff, var(--text-bright) 55%, color-mix(in srgb, var(--accent) 50%, var(--text-bright)));
  box-shadow: 0 0 10px var(--accent), 0 1px 3px rgba(0, 0, 0, 0.5);
}
.st-sheen {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
}

/* ───────── speed slider ───────── */
.st-speed {
  padding: 0.8rem 0.95rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel-strong) 45%, transparent);
  transition: border-color 240ms, box-shadow 240ms;
}
/* Lit while auto-typing runs, so the speed reads as live. */
html[data-auto="on"] .st-speed {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: 0 0 calc(18px * var(--glow-k)) calc(-8px * var(--glow-k)) var(--accent);
}
.st-speed-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.st-speed-head .st-h { margin: 0; }
.st-speed-val {
  display: inline-flex; align-items: baseline; gap: 0.3rem;
  color: var(--text-bright);
  text-shadow: var(--text-glow);
}
.st-speed-num {
  display: inline-block;
  min-width: 2.2ch;
  font: 800 1.75rem/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  transform-origin: 70% 60%;
}
.st-speed-val small { font-size: 0.875rem; font-weight: 700; color: var(--dim); text-shadow: none; }
.st-range-row { display: flex; align-items: center; gap: 0.8rem; }
.st-range-end {
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text);
}

.st-range {
  --p: 0.6;
  --track: color-mix(in srgb, var(--line) 85%, transparent);
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  min-width: 0;
  height: 2.75rem;
  margin: 0;
  background: transparent;
  cursor: pointer;
  touch-action: none;
}
.st-range:focus { outline: none; }
.st-range::-webkit-slider-runnable-track {
  height: 0.5rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent)) 0 0 / calc(var(--p) * 100%) 100% no-repeat, var(--track);
  box-shadow: 0 0 calc(12px * var(--glow-k)) calc(-3px * var(--glow-k)) var(--accent);
}
.st-range::-moz-range-track { height: 0.5rem; border-radius: 999px; background: var(--track); }
.st-range::-moz-range-progress {
  height: 0.5rem; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  box-shadow: 0 0 calc(12px * var(--glow-k)) calc(-3px * var(--glow-k)) var(--accent);
}
.st-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.65rem; height: 1.65rem;
  margin-top: calc(0.25rem - 0.825rem);
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff, var(--text-bright) 45%, color-mix(in srgb, var(--accent) 60%, var(--text-bright)));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 20%, transparent), 0 0 16px var(--accent);
  transition: transform 150ms cubic-bezier(.2, 1.6, .4, 1), box-shadow 150ms;
}
.st-range::-moz-range-thumb {
  width: 1.65rem; height: 1.65rem;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff, var(--text-bright) 45%, color-mix(in srgb, var(--accent) 60%, var(--text-bright)));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 20%, transparent), 0 0 16px var(--accent);
  transition: transform 150ms cubic-bezier(.2, 1.6, .4, 1), box-shadow 150ms;
}
.st-range:hover::-webkit-slider-thumb { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 24%, transparent), 0 0 20px var(--accent); }
.st-range:active::-webkit-slider-thumb { transform: scale(1.3, 1.15); box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 26%, transparent), 0 0 26px var(--accent); }
.st-range:active::-moz-range-thumb { transform: scale(1.3, 1.15); }
.st-range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--line-bright); outline-offset: 3px; }

/* ───────── palette swatches ───────── */
.st-swatches {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
}
.st-swatch {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 0.4rem;
  padding: 0.35rem 0.35rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel-strong) 50%, transparent);
  color: var(--text);
  font: 700 0.75rem/1.15 var(--font-mono);
  text-align: center;
  cursor: pointer;
  transition: transform 150ms cubic-bezier(.2, 1.6, .4, 1), border-color 220ms, box-shadow 220ms, color 220ms;
}
.st-swatch:hover { border-color: var(--sw-line); color: var(--text-bright); transform: translateY(-2px); }
.st-swatch:focus-visible { outline: 2px solid var(--line-bright); outline-offset: 2px; }
.st-swatch.is-pressed { transform: scale(1.08); }
.st-swatch[aria-pressed="true"] {
  border-color: var(--sw-line);
  color: var(--text-bright);
  box-shadow: 0 0 18px -5px var(--sw-glow), 0 0 0 1px var(--sw-line), inset 0 0 14px -6px var(--sw-glow);
}
/* Check badge on the current palette: pops in with overshoot as the selection moves. */
.st-sw-check {
  position: absolute; top: -0.45rem; right: -0.45rem;
  width: 1.3rem; height: 1.3rem;
  border-radius: 50%;
  background: var(--sw-cursor);
  box-shadow: 0 0 10px var(--sw-cursor), 0 0 0 2px var(--sw-bg);
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 140ms, transform 300ms cubic-bezier(.2, 1.7, .4, 1);
}
.st-sw-check::before {
  content: '';
  position: absolute; left: 50%; top: 46%;
  width: 0.3rem; height: 0.58rem;
  border: solid var(--sw-bg);
  border-width: 0 2.5px 2.5px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}
.st-swatch[aria-pressed="true"] .st-sw-check { opacity: 1; transform: none; }

.st-sw-screen {
  position: relative;
  display: grid;
  align-content: center;
  gap: 0.25rem;
  height: 2.75rem;
  padding: 0 0.4rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--sw-line) 55%, transparent);
  border-radius: 6px;
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, var(--sw-bg2), var(--sw-bg));
  box-shadow: inset 0 0 12px -3px var(--sw-glow);
}
.st-sw-line { display: flex; align-items: center; gap: 0.2rem; height: 0.25rem; }
.st-sw-indent { padding-left: 0.5rem; }
.st-sw-line i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--c);
  box-shadow: 0 0 5px var(--c);
}
.st-sw-line .w2 { width: 16%; }
.st-sw-line .w3 { width: 24%; }
.st-sw-line .w4 { width: 32%; }
.st-sw-line .w5 { width: 44%; }
.st-sw-line .w6 { width: 62%; }
.st-sw-line .st-sw-cursor {
  width: 0.3rem; height: 0.55rem;
  background: var(--sw-cursor);
  box-shadow: 0 0 6px var(--sw-cursor);
}
.st-swatch[aria-pressed="true"] .st-sw-cursor { animation: st-blink 1s steps(1) infinite; }

.st-sw-name { display: grid; justify-items: center; gap: 0.25rem; }
/* Every name gets a two-line slot, so the key caps above them stay level. */
.st-sw-name > span { display: grid; place-items: center; min-height: 2.3em; }
.st-sw-name kbd { font-size: 0.75rem; min-width: 1.5rem; padding: 0 0.3rem; }
.st-swatch[aria-pressed="true"] .st-sw-name kbd { border-color: var(--sw-line); color: var(--sw-text); }

/* ───────── shortcut reference ───────── */
.st-keys {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem 1.4rem;
  margin: 0;
}
.st-key { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.st-key dt { display: flex; gap: 0.2rem; flex: none; min-width: 5.4rem; margin: 0; }
.st-key kbd { font-size: 0.8125rem; padding: 0.1em 0.45em; }
.st-key kbd.is-glyph { font-size: 1rem; line-height: 1.15; }
.st-key dd { margin: 0; min-width: 0; font-size: 0.9375rem; color: var(--text); }

@keyframes st-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ───────── narrow windows (phones) ───────── */
@container (max-width: 470px) {
  .st { gap: 1rem; }
  .st-grid { gap: 0.45rem; }
  .st-tile {
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    justify-content: space-between;
    align-items: center;
    row-gap: 0.55rem;
    min-height: 5.4rem;
    padding: 0.7rem 0.7rem 0.75rem;
  }
  .st-name { grid-column: 1 / -1; grid-row: 2; align-self: end; }
  .st-swatch { flex: 0 0 calc((100% - 3 * 0.45rem) / 4); }
  .st-keys { grid-template-columns: 1fr; }
}
/* No keyboard to speak of: skip the shortcut list on touch-only devices. */
@media (hover: none) and (pointer: coarse) {
  .st-keys-sec { display: none; }
}