/* ═══════════════════════════════════════════════════════════════════════════
   STARKIT — the family control kit (operator-ruled 2026-07-23)
   "custom styles for all these… nice custom toggles with squares or diamonds.
    build a set of starstyle/starkit components we can then reuse everywhere."

   LAW (CANON.md Scoped rulings 2026-07-23):
   · pixelflame is the DEFAULT register for every agent-built HTML surface —
     apply another brand via [data-register="starpunk|mainstar|dragons"].
   · Phosphor icons are the DEFAULT icon set everywhere:
     <script src="https://unpkg.com/@phosphor-icons/web"></script> then <i class="ph ph-*">.
   · Diamonds are perfect squares rotated 45° (L1); NEVER a dark border on a
     diamond — none, or lighter yellow-orange (#F0A050 tier) only.
   · ZERO-RADIUS CORNERS EVERYWHERE (operator ruling 2026-07-23): every corner in
     every agent-built surface is SQUARE. Enforced globally below — importing this
     file guarantees it; never re-introduce border-radius per page.
   IMPORT this file (L6): <link rel="stylesheet" href="/brands/visual-language/starkit/starkit.css">
   — never copy or re-create it per page.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CANON: zero-radius corners everywhere (operator ruling 2026-07-23) ───────
   Not a per-page choice — enforced here so every surface importing starkit is
   square-cornered. Overrides any stray border-radius an agent page declares. */
*, *::before, *::after { border-radius: 0 !important; }

/* ── Register tokens — pixelflame default ─────────────────────────────────── */
:root, [data-register="pixelflame"] {
  --sk-signal: #FF6A1A;          /* identity orange (family center) */
  --sk-signal-soft: #F0A050;     /* the lighter yellow-orange — diamond borders live here */
  --sk-signal-deep: #D93408;
  --sk-ground: #171310;          /* warm void (dark face) */
  --sk-ground-2: #211D18;
  --sk-paper: #F1EBDF;           /* bond cream (light face) */
  --sk-paper-2: #E7DFCD;
  --sk-ink: #191512;
  --sk-soft: #A99E91;
  --sk-line: #49423A;
  --sk-line-light: #C6B9A2;
  --sk-cool: #85B8C9;
  --sk-mono: "IBM Plex Mono", ui-monospace, monospace;
  --sk-serif: "Source Serif 4", Georgia, serif;
  /* face-dependent aliases (dark face default; [data-face="light"] flips) */
  --sk-bg: var(--sk-ground);
  --sk-bg-2: var(--sk-ground-2);
  --sk-fg: var(--sk-paper);
  --sk-fg-soft: var(--sk-soft);
  --sk-edge: var(--sk-line);
}
[data-face="light"] {
  --sk-bg: var(--sk-paper);
  --sk-bg-2: var(--sk-paper-2);
  --sk-fg: var(--sk-ink);
  --sk-fg-soft: #6F6557;
  --sk-edge: var(--sk-line-light);
}
[data-register="starpunk"] {
  --sk-signal: #ED8531;          /* starport screen cadmium */
  --sk-signal-soft: #F2A65E;
  --sk-signal-deep: #C9541F;
  --sk-cool: #2E6E68;
}
[data-register="mainstar"] {
  --sk-signal: #DD5A2A;          /* world cadmium — fire never enters the world */
  --sk-signal-soft: #F0A050;
  --sk-signal-deep: #9A5330;
  --sk-cool: #2E6E68;
}
[data-register="dragons"] {
  --sk-signal: oklch(0.64 0.26 34);        /* --flame */
  --sk-signal-soft: oklch(0.72 0.17 56);   /* --heat */
  --sk-signal-deep: oklch(0.54 0.25 28);   /* --ember */
  --sk-cool: oklch(0.6 0.13 242);
}

/* ── Base field furniture ─────────────────────────────────────────────────── */
.sk-field { margin: 0 0 17px; }
.sk-field > label, .sk-legend {
  display: flex;
  justify-content: space-between;
  margin: 0 0 7px;
  color: var(--sk-fg-soft);
  font: 600 10px/1.2 var(--sk-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.sk-field output { color: var(--sk-signal); }

/* ── Select ───────────────────────────────────────────────────────────────── */
.sk-select {
  appearance: none;
  width: 100%;
  min-height: 38px;
  padding: 9px 13px 9px 11px;
  border: 1px solid var(--sk-edge);
  border-radius: 0;
  color: var(--sk-fg);
  background:
    linear-gradient(45deg, transparent 49%, var(--sk-signal) 50%) calc(100% - 14px) 55% / 7px 7px no-repeat,
    linear-gradient(-45deg, transparent 49%, var(--sk-signal) 50%) calc(100% - 7px) 55% / 7px 7px no-repeat,
    var(--sk-bg-2);
  font: 500 13px/1.35 var(--sk-mono);
  cursor: pointer;
}
.sk-select:focus-visible { outline: 2px solid var(--sk-cool); outline-offset: 2px; }
/* open dropdown list — customizable select (Chromium 135+) + option fallback */
@supports (appearance: base-select) {
  .sk-select, .sk-select::picker(select) { appearance: base-select; }
  .sk-select { background: var(--sk-bg-2); }
  .sk-select::picker(select) {
    border: 1px solid var(--sk-edge);
    border-radius: 0;
    background: var(--sk-bg-2);
    padding: 4px;
  }
}
.sk-select option {
  padding: 9px 11px;
  border-radius: 0;
  color: var(--sk-fg);
  background: var(--sk-bg-2);
  font: 500 13px/1.35 var(--sk-mono);
}
.sk-select option:hover, .sk-select option:focus { background: var(--sk-signal); color: var(--sk-ground); }
/* checked row: never signal-on-signal (invisible-text bug 2026-07-23) —
   solid signal bar with ground text, hovered or not */
.sk-select option:checked { background: var(--sk-signal); color: var(--sk-ground); }
@supports (appearance: base-select) {
  .sk-select option:checked::checkmark { content: "◆ "; color: var(--sk-signal); }
}

/* ── Range slider — square track, DIAMOND thumb (borderless per ruling).
   The filled-track needs --sk-fill kept in sync with value: include starkit.js
   (same dir) once per page — it wires every .sk-range automatically.          */
.sk-range {
  appearance: none;
  width: 100%;
  height: 26px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.sk-range::-webkit-slider-runnable-track {
  height: 4px;
  background: linear-gradient(90deg, var(--sk-signal) var(--sk-fill, 50%), var(--sk-edge) var(--sk-fill, 50%));
}
.sk-range::-moz-range-track { height: 4px; background: var(--sk-edge); }
.sk-range::-moz-range-progress { height: 4px; background: var(--sk-signal); }
.sk-range::-webkit-slider-thumb {
  appearance: none;
  width: 15px;
  height: 15px;
  margin-top: -5.5px;
  background: var(--sk-signal);
  border: none;
  border-radius: 0;
  transform: rotate(45deg);        /* the diamond IS the square, rotated — L1 */
  transition: transform 120ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.sk-range::-moz-range-thumb {
  width: 15px;
  height: 15px;
  background: var(--sk-signal);
  border: none;
  border-radius: 0;
  transform: rotate(45deg);
}
.sk-range:active::-webkit-slider-thumb { transform: rotate(45deg) scale(1.18); }
.sk-range:focus-visible { outline: 2px solid var(--sk-cool); outline-offset: 4px; }
[data-shape="square"] .sk-range::-webkit-slider-thumb { transform: none; }
[data-shape="square"] .sk-range:active::-webkit-slider-thumb { transform: scale(1.18); }
[data-shape="square"] .sk-range::-moz-range-thumb { transform: none; }
[data-shape="square"] .sk-diamond { transform: none; }

/* ── Shape sets (operator, 2026-07-23: "make the borders on the side of the
   diamond be angled like the diamond… and make a version set with square
   instead of diamonds") ───────────────────────────────────────────────────────
   DEFAULT set = diamonds: containers take diamond-parallel 45° edges (chamfered
   checkbox, pointed switch rail), marks/knobs/thumbs are diamonds.
   [data-shape="square"] set: straight containers, square marks/knobs/thumbs.  */

/* ── Checkbox — chamfered box (edges parallel to the diamond), diamond mark ── */
.sk-check {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--sk-fg);
  font: 500 12px/1.4 var(--sk-mono);
  cursor: pointer;
}
.sk-check input {
  /* a plain square FRAME so it reads as a checkbox (operator 2026-07-23);
     the mark inside stays the borderless diamond (LAW) */
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid var(--sk-edge);
  border-radius: 0;
  background: var(--sk-bg-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: none;
  transition: border-color 130ms;
}
.sk-check input::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--sk-signal);
  transform: rotate(45deg) scale(0);
  transition: transform 140ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.sk-check input:checked::before { transform: rotate(45deg) scale(1); }
.sk-check input:checked { border-color: var(--sk-signal); }
.sk-check input:focus-visible { outline: 2px solid var(--sk-cool); outline-offset: 2px; }
[data-shape="square"] .sk-check input::before { transform: scale(0); }
[data-shape="square"] .sk-check input:checked::before { transform: scale(1); }

/* ── Switch — square rail, diamond knob ───────────────────────────────────── */
.sk-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--sk-fg);
  font: 500 12px/1.4 var(--sk-mono);
  cursor: pointer;
}
.sk-switch input {
  appearance: none;
  width: 34px;
  height: 15px;
  margin: 0;
  border: none;
  border-radius: 0;
  background: linear-gradient(var(--sk-edge), var(--sk-edge)) 50% 50% / calc(100% - 6px) 2px no-repeat;
  position: relative;
  cursor: pointer;
  flex: none;
}
.sk-switch input::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 10px;
  height: 10px;
  background: var(--sk-fg-soft);
  transform: translateY(-50%) rotate(45deg);
  transition: left 160ms cubic-bezier(0.22, 0.61, 0.36, 1), background 160ms;
}
.sk-switch input:checked {
  background: linear-gradient(var(--sk-signal), var(--sk-signal)) 50% 50% / calc(100% - 6px) 2px no-repeat;
}
.sk-switch input:checked::after { left: 24px; background: var(--sk-signal); }
.sk-switch input:focus-visible { outline: 2px solid var(--sk-cool); outline-offset: 3px; }
[data-shape="square"] .sk-switch input::after { transform: translateY(-50%); }

/* ── File input — the "Choose File" default is dead ───────────────────────── */
.sk-file {
  width: 100%;
  color: var(--sk-fg-soft);
  font: 500 11px/1.4 var(--sk-mono);
}
.sk-file::file-selector-button {
  margin-right: 12px;
  padding: 9px 14px;
  border: 1px solid var(--sk-signal);
  border-radius: 0;
  color: var(--sk-signal);
  background: transparent;
  font: 600 10px/1 var(--sk-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 140ms, color 140ms;
}
.sk-file::file-selector-button:hover { background: var(--sk-signal); color: var(--sk-bg); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.sk-btn {
  min-height: 38px;
  padding: 9px 16px;
  border: 1px solid var(--sk-edge);
  border-radius: 0;
  color: var(--sk-fg);
  background: transparent;
  font: 600 10px/1 var(--sk-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.sk-btn.primary { border-color: var(--sk-signal); background: var(--sk-signal); color: var(--sk-ground); }
.sk-btn.quiet:hover, .sk-btn:not(.primary):hover { border-color: var(--sk-signal-soft); }
.sk-btn:focus-visible { outline: 2px solid var(--sk-cool); outline-offset: 2px; }

/* ── Color input ──────────────────────────────────────────────────────────── */
.sk-color {
  appearance: none;
  width: 100%;
  height: 30px;
  padding: 3px;
  border: 1px solid var(--sk-edge);
  border-radius: 0;
  background: var(--sk-bg-2);
  cursor: pointer;
  box-sizing: border-box;
}
.sk-color::-webkit-color-swatch-wrapper { padding: 0; }
.sk-color::-webkit-color-swatch { border: none; border-radius: 0; }
.sk-color::-moz-color-swatch { border: none; border-radius: 0; }

/* ── Diamond glyph — LAW (operator, 2026-07-23): "no, kill it. no border as law."
   A diamond glyph is ALWAYS borderless. (The glow-ring experiment is dead.)      */
.sk-diamond {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--sk-signal);
  border: none;
  transform: rotate(45deg);
  vertical-align: -1px;
}

/* ── Segmented group ──────────────────────────────────────────────────────── */
.sk-segmented { display: grid; grid-auto-flow: column; border: 1px solid var(--sk-edge); }
.sk-segmented button {
  min-height: 34px;
  padding: 5px 10px;
  color: var(--sk-fg-soft);
  border: 0;
  border-right: 1px solid var(--sk-edge);
  border-radius: 0;
  background: transparent;
  font: 600 10px/1 var(--sk-mono);
  cursor: pointer;
}
.sk-segmented button:last-child { border-right: 0; }
.sk-segmented button[aria-pressed="true"] { color: var(--sk-bg); background: var(--sk-fg); }

/* ── Face toggle — light ⇄ dark (operator ruling 2026-07-24: "always make them
   both light mode / dark mode with toggle"). The ONE canonical light/dark control;
   every agent-built HTML surface includes it. Pairs with starkit.js (auto-wires
   [data-face], persists to localStorage, honors prefers-color-scheme on first load). */
.sk-face-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 13px;
  border: 1px solid var(--sk-edge);
  border-radius: 0;
  color: var(--sk-fg);
  background: transparent;
  font: 600 10px/1 var(--sk-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 140ms, color 140ms;
}
.sk-face-toggle:hover { border-color: var(--sk-signal-soft); color: var(--sk-signal); }
.sk-face-toggle:focus-visible { outline: 2px solid var(--sk-cool); outline-offset: 2px; }
.sk-face-toggle i { font-size: 15px; color: var(--sk-signal); }
/* show the icon/label for the face you'd switch TO (dark face → offer "light", and vice-versa) */
.sk-face-toggle .sk-face-to-light,
[data-face="light"] .sk-face-toggle .sk-face-to-dark { display: inline-flex; align-items: center; gap: 7px; }
.sk-face-toggle .sk-face-to-dark,
[data-face="light"] .sk-face-toggle .sk-face-to-light { display: none; }