/* ============================================================================
   BOARDLINE — CONTROL-ROOM DESIGN SYSTEM
   ----------------------------------------------------------------------------
   Composed in the Sony DSS / SAT-B2 layout language: a near-black field with
   framed "device" consoles floating on it (dialog gravity), each with a
   titlebar, content, and a persistent hint bar. Grid-literate numbered tiles,
   quiet uppercase label system, condensed display type, snappy 80ms states,
   a constant gold accent. Four broadcast colorways via data-site-theme.

   This styles the CONTROL ROOM (website + operator console) only. It never
   touches the ScrollCast renderer / board output.
   ============================================================================ */

/* ---------------------------------------------------------------- 1. Tokens */
:root {
  /* Ground (near-black field the consoles float on) */
  --field:          #090c11;
  --field-2:        #0b0f16;
  --bg-glow:        #12233a;

  /* Device interior surfaces */
  --bg-primary:     #0b1524;
  --bg-surface:     #15263c;
  --bg-surface-alt: #101f33;
  --bg-inset:       #081019;
  --bg-titlebar:    #1c3c62;
  --bg-titlebar-2:  #11263e;
  --bg-highlight:   #275e97;

  /* Identity + status */
  --accent:         #e6c34d;
  --accent-dim:     #c2a33f;
  --info:           #2f6f9e;
  --info-deep:      #204d70;
  --caution:        #8ab830;
  --on-caution:     #141a06;
  --alert:          #c86a6a;

  /* Text */
  --text:           #d7e3f1;
  --text-dim:       #9db4cd;
  --text-muted:     #6f89a4;
  --text-heading:   #f4f8fd;
  --text-on-accent: #171307;

  /* Lines */
  --line:           #2f4b6b;
  --line-soft:      #1c3148;
  --line-strong:    #446a92;

  /* Radius — minimal; this is equipment */
  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 5px;

  /* Spacing */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;
  --s-5: 22px; --s-6: 32px; --s-7: 44px;

  /* Type — condensed DSS voice */
  --font-display: "Arial Narrow", "Roboto Condensed", "Oswald", "Franklin Gothic Medium", sans-serif;
  --font-ui:      "Arial Narrow", Arial, sans-serif;
  --font-body:    -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    "Courier New", Courier, monospace;

  --dur: 80ms;
  color-scheme: dark;
}

/* ------------------------------------------------------ 1b. Website themes */
html[data-site-theme="broadcast"] { color-scheme: dark; }

html[data-site-theme="dss-blue"] {
  color-scheme: dark;
  --field:#0a141f; --field-2:#0c1826; --bg-glow:#1d3a5f;
  --bg-primary:#1a2a3a; --bg-surface:#1e3a5f; --bg-surface-alt:#162d4a; --bg-inset:#112035;
  --bg-titlebar:#2a5298; --bg-titlebar-2:#1c3a6a; --bg-highlight:#3a62a8;
  --accent:#e8c840; --accent-dim:#c9ab3a;
  --info:#2f6f9e; --info-deep:#21507a; --caution:#8ab830; --alert:#c86a6a;
  --text:#d0e8ff; --text-dim:#a6c4e0; --text-muted:#7aaabb;
  --text-heading:#ffffff; --text-on-accent:#1a1a1a;
  --line:#3a6090; --line-soft:#28486e; --line-strong:#4a72a0;
}

html[data-site-theme="dss-green"] {
  color-scheme: dark;
  --field:#07110b; --field-2:#0a160e; --bg-glow:#163a22;
  --bg-primary:#0e1e14; --bg-surface:#163a22; --bg-surface-alt:#102a18; --bg-inset:#0a1c10;
  --bg-titlebar:#1e6632; --bg-titlebar-2:#134a24; --bg-highlight:#267035;
  --accent:#e8c840; --accent-dim:#c9ab3a;
  --info:#1e6632; --info-deep:#124b22; --caution:#8ab830; --alert:#d07a5a;
  --text:#c8ecd4; --text-dim:#9fceb0; --text-muted:#70aa80;
  --text-heading:#ffffff; --text-on-accent:#1a1a1a;
  --line:#2a6040; --line-soft:#1d4a2e; --line-strong:#357a4c;
}

html[data-site-theme="dss-mauve"] {
  color-scheme: dark;
  --field:#120b18; --field-2:#170f20; --bg-glow:#3a2458;
  --bg-primary:#1e1228; --bg-surface:#3a2458; --bg-surface-alt:#2a1a42; --bg-inset:#1c1030;
  --bg-titlebar:#5a3a7a; --bg-titlebar-2:#42285e; --bg-highlight:#6a4a8a;
  --accent:#e8c840; --accent-dim:#c9ab3a;
  --info:#5a3a7a; --info-deep:#3f2758; --caution:#8ab830; --alert:#cf6f8f;
  --text:#e0d0f0; --text-dim:#c3aede; --text-muted:#9a80b8;
  --text-heading:#ffffff; --text-on-accent:#1a1a1a;
  --line:#6040a0; --line-soft:#472e78; --line-strong:#7a55b0;
}

/* ------------------------------------------------------------------ 2. Base */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background:
    radial-gradient(1100px 520px at 50% -160px, var(--bg-glow) 0%, transparent 68%),
    linear-gradient(180deg, var(--field) 0%, var(--field-2) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

a { color: color-mix(in srgb, var(--info) 55%, #cfe0f2); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.site-shell { max-width: 1180px; margin: 0 auto; padding: 18px clamp(14px,4vw,32px) 48px; }

.cx { font-family: var(--font-display); font-stretch: condensed; text-transform: uppercase; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -999px; top: 8px; z-index: 30;
  background: var(--accent); color: var(--text-on-accent);
  padding: 8px 12px; font: 700 13px/1 var(--font-ui);
  letter-spacing: .06em; text-transform: uppercase;
}
.skip-link:focus { left: 8px; }

/* --------------------------------------------------------- 3. Brand bar */
.topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 8px 4px 18px;
  border-bottom: 1px solid #16202e;
  margin-bottom: 20px;
}
.brand {
  display: inline-block;
  text-decoration: none;
  font: 700 28px/.9 var(--font-display);
  font-stretch: condensed;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 1px 1px 0 #000;
}

.topnav { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.topnav a {
  display: flex; align-items: center;
  padding: 8px 12px;
  color: var(--text-dim);
  text-decoration: none;
  font: 700 11.5px/1 var(--font-ui);
  letter-spacing: .10em; text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  transition: background var(--dur) ease, color var(--dur) ease, border-color var(--dur) ease;
}
.topnav a:hover { color: var(--text-heading); background: rgba(120,150,190,.1); }
.topnav a[aria-current="page"] {
  color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
  border-radius: 0;
}
.topnav a.nav-cta {
  color: var(--text-heading);
  background: linear-gradient(180deg, var(--info), var(--info-deep));
  border-color: var(--line-strong);
}
.topnav a.nav-cta:hover { filter: brightness(1.14); }

.theme-select { display: flex; align-items: center; margin-left: 6px; }
.theme-select select {
  width: auto;
  padding: 7px 26px 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background-color: var(--bg-surface-alt);
  color: var(--text-dim);
  font: 700 11px/1 var(--font-ui);
  letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
    linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position: calc(100% - 15px) center, calc(100% - 10px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.theme-select select:hover { border-color: var(--line-strong); background-color: var(--bg-highlight); color: var(--text-heading); }
.theme-select select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.theme-select option { text-transform: none; background: var(--bg-surface); color: var(--text); }

/* -------------------------------------------------------- 4. Device console */
.device {
  background: var(--bg-primary);
  border: 1px solid #000;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 10px 44px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.02);
  margin-bottom: 18px;
}
.titlebar {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 11px 18px;
  background: linear-gradient(180deg, var(--bg-titlebar), var(--bg-titlebar-2));
  border-bottom: 1px solid #000;
}
.titlebar .t {
  display: flex; align-items: baseline; gap: 11px;
  font: 700 clamp(18px,2.2vw,22px)/1 var(--font-display);
  font-stretch: condensed;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-heading);
}
.titlebar .t .div { color: var(--accent); font-size: .8em; }
.titlebar .t .scr { color: var(--text-dim); }
.titlebar .meta {
  font: 600 12px/1 var(--font-ui);
  letter-spacing: .06em;
  color: #cfe0f2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-transform: uppercase;
}
.subtitle {
  padding: 9px 18px;
  background: var(--bg-titlebar-2);
  font-size: 13px; color: var(--text-dim); letter-spacing: .02em;
  border-bottom: 1px solid #000;
}
.content { padding: 18px; background: var(--bg-surface); }
.hintbar {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 18px;
  background: var(--bg-primary);
  border-top: 1px solid #000;
  font: 600 12.5px/1.35 var(--font-ui);
  letter-spacing: .03em; color: var(--accent);
}
.hintbar::before { content: "\25B8"; color: var(--text-muted); }

.sec + .sec { margin-top: 22px; }
.sec-label {
  margin: 0 0 9px;
  font: 700 10px/1.2 var(--font-ui);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-muted);
}
.sec-lead { margin: -2px 0 14px; max-width: 64ch; color: var(--text-dim); }

.console-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; align-items: start; }

/* ------------------------------------------------------------- 5. Tiles */
.tilegrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.use-grid, .example-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.mode-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }

.tile,
.use-grid article, .mode-grid article, .example-grid article {
  position: relative;
  display: flex; flex-direction: column; gap: 5px;
  text-align: left; text-decoration: none;
  background: var(--bg-surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 15px 14px 20px;
  min-height: 72px;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: background var(--dur) ease, border-color var(--dur) ease;
}
.tile .lbl,
.use-grid h3, .mode-grid h3, .example-grid h3 {
  margin: 0;
  font: 700 clamp(15px,1.6vw,18px)/1.05 var(--font-display);
  font-stretch: condensed;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-heading);
}
.tile .desc,
.use-grid p, .mode-grid p, .example-grid p {
  margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--text-dim);
}
.tile .num {
  position: absolute; bottom: 6px; right: 10px;
  font: 700 12px/1 var(--font-ui); color: var(--text-muted);
}
.tile:hover, .tile:focus-visible,
.use-grid article:hover, .mode-grid article:hover, .example-grid article:hover {
  background: var(--bg-highlight);
  border-color: var(--line-strong);
  outline: none;
}
.tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tile:hover .num, .tile:focus-visible .num { color: #dbe8f6; }

.tile.checked { background: var(--accent); border-color: var(--accent); }
.tile.checked .lbl, .tile.checked .desc, .tile.checked .num { color: var(--text-on-accent); }
.tile.checked .desc { opacity: .82; }
.tile.checked::after {
  content: "\2713"; position: absolute; top: 12px; right: 12px;
  color: var(--text-on-accent); font-weight: 700;
}
.tile.empty {
  background: var(--bg-surface-alt);
  border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--line-soft);
  cursor: default;
}
.tile.empty:hover { background: var(--bg-surface-alt); }

.diagram {
  font-family: var(--font-mono);
  color: #bcd0e6; font-size: 12.5px; letter-spacing: .04em;
  margin: 2px 0 4px !important;
  padding: 7px 9px;
  background: var(--bg-inset);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
}

/* ------------------------------------------------------------- 6. List menu */
.listmenu { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.lm-item {
  display: flex; align-items: center; min-height: 40px;
  background: var(--bg-surface); text-decoration: none; color: var(--text);
}
.lm-item:nth-child(even) { background: var(--bg-surface-alt); }
.lm-item.sel { background: var(--bg-highlight); }
a.lm-item:hover { background: var(--bg-highlight); }
.lm-ico {
  width: 38px; align-self: stretch;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 12px;
}
.lm-item.sel .lm-ico { background: var(--accent); color: var(--text-on-accent); }
.lm-lbl { padding: 6px 12px; font-size: 13.5px; letter-spacing: .02em; }
.lm-lbl b {
  font-family: var(--font-ui); text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-heading); font-weight: 700;
}

/* ------------------------------------------------------------- 7. Caution */
.caution {
  background: var(--caution); color: var(--on-caution);
  border-radius: var(--r-lg); padding: 11px 14px;
  font-size: 13px; line-height: 1.45;
}

/* ------------------------------------------------------- 8. Status rail */
.rail { display: flex; flex-direction: column; gap: 14px; }
.railpanel { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-surface-alt); overflow: hidden; }
.railpanel h3 {
  margin: 0; padding: 9px 12px;
  font: 700 10px/1.2 var(--font-ui); letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); background: var(--bg-titlebar-2);
  border-bottom: 1px solid var(--line);
}
.railpanel .rp-body { padding: 12px; }
.statusrow { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.statusrow .badge {
  min-width: 64px; text-align: center;
  font: 700 10px/1.4 var(--font-ui); letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--r-sm);
  background: var(--bg-surface); color: var(--text-dim); border: 1px solid var(--line);
}
.statusrow .badge.on { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); }
.statusrow .txt { font-size: 12.5px; color: var(--text-dim); }

/* Feature strip / included list */
.incl, .feature-strip ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.feature-strip ul { display: grid; grid-template-columns: repeat(4, 1fr); }
.incl li, .feature-strip li {
  display: flex; gap: 9px; align-items: center;
  font: 700 12px/1.2 var(--font-ui); letter-spacing: .04em; text-transform: uppercase;
  color: var(--text);
}
.feature-strip li {
  border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  background: var(--bg-surface-alt); padding: 11px 12px;
}
.incl li::before, .feature-strip li::before {
  content: ""; flex: 0 0 auto;
  width: 7px; height: 7px; background: var(--accent); transform: rotate(45deg);
  box-shadow: 0 0 5px rgba(230,195,77,.4);
}

/* --------------------------------------------------------------- 9. Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; text-transform: uppercase; letter-spacing: .08em;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 11px 18px;
  font: 700 13px/1 var(--font-ui);
  color: var(--text); background: var(--bg-surface-alt);
  cursor: pointer;
  transition: background var(--dur) ease, border-color var(--dur) ease, color var(--dur) ease, filter var(--dur) ease;
}
.btn:hover { background: var(--bg-highlight); color: var(--text-heading); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: linear-gradient(180deg, var(--info), var(--info-deep)); border-color: var(--line-strong); color: #eaf2f9; }
.btn-primary:hover { filter: brightness(1.14); color: #fff; }
.btn-accent { background: linear-gradient(180deg, var(--accent), var(--accent-dim)); border-color: var(--accent-dim); color: var(--text-on-accent); }
.btn-accent:hover { filter: brightness(1.08); color: var(--text-on-accent); }
.btn-secondary { background: var(--bg-surface); }
.btn[disabled], .btn.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }

.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* ------------------------------------------- 10. ScrollCast preview (mock) */
/* Static website depiction of the broadcast. site.js drives #siteClock +
   #siteRowTrack only. All sim-* names preserved. */
.preview { border: 1px solid #000; background: #04070f; padding: 7px; position: relative; }
.preview::before {
  content: "PREVIEW \00B7 SCROLLCAST OUTPUT"; position: absolute; z-index: 3;
  top: 13px; left: 14px; font: 700 8px/1 var(--font-ui); letter-spacing: .24em;
  color: rgba(126,199,255,.5);
}
.sim-screen {
  position: relative; overflow: hidden; background: #02071f;
  min-height: 300px; display: flex; flex-direction: column;
  box-shadow: inset 0 0 50px #000;
}
.sim-screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.03), rgba(255,255,255,.03) 1px, transparent 1px, transparent 4px);
}
.sim-top { display: grid; grid-template-columns: 1fr 1fr; flex: 0 0 46%; border-bottom: 1px solid #2f4b6b; min-height: 0; }
.sim-media { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: #04070b; }
.sim-media-label { font: 9px var(--font-mono); letter-spacing: .24em; color: rgba(126,199,255,.72); }
.sim-media-title { border: 1px solid rgba(126,199,255,.35); padding: 7px 10px; font: 11px var(--font-mono); color: rgba(170,222,255,.86); background: rgba(2,7,31,.7); }
.sim-meta {
  border-left: 1px solid #2f4b6b; padding: 16px 16px 18px;
  background: radial-gradient(circle at 50% 6%, #3a7da8, #1676bd 40%, #02071f 100%);
  display: flex; flex-direction: column; justify-content: space-between; min-height: 0;
}
.sim-meta-label { margin: 0 0 4px; font: 9px var(--font-ui); letter-spacing: .12em; color: var(--accent); text-shadow: 1px 1px 0 #000; }
.sim-meta-title { margin: 0; font: 700 clamp(22px,2.6vw,30px)/.9 var(--font-display); font-stretch: condensed; text-transform: uppercase; color: #fff; text-shadow: 2px 2px 0 #000; }
.sim-meta-sub { margin: 4px 0 0; font-size: 12px; color: #d6dfe8; text-shadow: 1px 1px 0 #000; }
.sim-up-next { margin-top: 14px; }
.sim-ticker {
  flex: 0 0 26px; display: flex; align-items: center; overflow: hidden;
  border-top: 1px solid rgba(232,232,221,.18);
  background: linear-gradient(to bottom, rgba(22,118,189,.28), rgba(2,7,31,.82));
}
.sim-ticker span { white-space: nowrap; padding-left: 100%; font-size: 12px; color: #c2ddec; animation: site-crawl 18s linear infinite; }
@keyframes site-crawl { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.sim-guide { flex: 1 1 auto; display: grid; grid-template-rows: 34px 1fr; min-height: 0; }
.sim-timebar, .sim-row { display: grid; grid-template-columns: 96px repeat(4, 1fr); }
.sim-timecell { display: flex; align-items: center; justify-content: center; border-right: 1px solid #2f4b6b; background: linear-gradient(180deg, #5593bc, #1676bd 55%, #02071f); color: var(--accent); font: 700 13px/1 var(--font-display); font-stretch: condensed; text-transform: uppercase; text-shadow: 1px 1px 0 #000; }
.sim-rows { overflow: hidden; position: relative; }
.sim-row-track { position: absolute; inset: 0; transition: transform 5.2s linear; }
.sim-row { min-height: 32px; border-bottom: 1px solid #2f4b6b; background: linear-gradient(90deg, #02071f, #123957); }
.sim-row-featured { background: linear-gradient(90deg, #02071f, #1676bd); }
.sim-row-caution { background: linear-gradient(90deg, #14160e, #7c6416); }
.sim-source, .sim-cell { display: flex; align-items: center; padding: 5px 8px; border-right: 1px solid #2f4b6b; font-size: 12px; color: #dce5ee; text-shadow: 1px 1px 0 #000; overflow: hidden; white-space: nowrap; }
.sim-source { justify-content: center; color: var(--accent); font-weight: 700; }
.sim-status-clock, .sim-gear { display: none; } /* clock now lives in the titlebar */

/* ======================================================================
   11. OPERATOR CONSOLE (Create / Edit)
   The broadcast configuration console. Every control, name, ID, JS hook,
   and script order preserved — presentation only.
   ====================================================================== */
.console-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; margin-bottom: 16px;
  background: linear-gradient(180deg, var(--bg-titlebar), var(--bg-titlebar-2));
  border: 1px solid #000; border-radius: var(--r-lg);
  box-shadow: 0 6px 26px rgba(0,0,0,.4);
}
.console-head h1 {
  margin: 0;
  font: 700 clamp(24px,3.4vw,32px)/1 var(--font-display); font-stretch: condensed;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-heading); text-shadow: 1px 1px 0 #000;
}
.console-sub {
  margin: 5px 0 0;
  font: 600 12px/1.3 var(--font-ui); letter-spacing: .06em; text-transform: uppercase;
  color: #cfe0f2;
}
.console-head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.link-block { margin-bottom: 10px; }
.link-block:last-child { margin-bottom: 0; }
.link-block .link-label {
  display: block; margin-bottom: 4px;
  font: 700 11px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted);
}

/* Result / notice banners */
.success, .error, .ok {
  border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  padding: 14px 16px; margin-bottom: 16px; font-size: 14px;
}
.success { background: var(--bg-surface-alt); border-left: 3px solid var(--accent); }
.success strong, .ok strong { color: var(--accent); }
.success a, .ok a { color: #bcd8f4; word-break: break-all; }
.ok { background: color-mix(in srgb, var(--info) 16%, transparent); border-left: 3px solid var(--info); color: var(--text); }
.error { background: color-mix(in srgb, var(--alert) 16%, transparent); border-left: 3px solid var(--alert); color: #ecc9c9; }
.error strong { color: #e79a9a; }

/* Fieldset = device dialog with titlebar legend */
fieldset.form-card {
  border: 1px solid #000; background: var(--bg-surface);
  border-radius: var(--r-lg); overflow: hidden;
  padding: 0 18px 18px; margin: 0 0 16px;
  box-shadow: 0 6px 26px rgba(0,0,0,.4);
}
fieldset.form-card > legend {
  float: none; width: calc(100% + 36px); box-sizing: border-box;
  margin: 0 -18px 4px; padding: 11px 18px;
  background: linear-gradient(180deg, var(--bg-titlebar), var(--bg-titlebar-2));
  border-bottom: 1px solid #000;
  color: var(--text-heading);
  font: 700 15px/1 var(--font-display); font-stretch: condensed;
  letter-spacing: .1em; text-transform: uppercase;
}
fieldset.form-card > legend::before { content: "\25B8  "; color: var(--accent); }
fieldset.form-card > .content-block:first-of-type { margin-top: 4px; }

.section-note { font-size: 13px; color: var(--text-dim); margin: 14px 0 12px; line-height: 1.5; max-width: 72ch; }

.content-block { border-top: 1px solid var(--line-soft); margin-top: 16px; padding-top: 16px; }
.content-block:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.content-block h2 {
  margin: 0 0 10px;
  font: 700 13px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
}

/* Form controls — flat instrument fields */
label {
  display: block; margin: 12px 0 5px;
  font: 700 12px/1.2 var(--font-ui); letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent);
}
input, select, textarea {
  width: 100%; box-sizing: border-box; padding: 10px 11px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--bg-inset); color: var(--text-heading);
  font: 400 14px/1.4 var(--font-body);
  transition: border-color var(--dur) ease, box-shadow var(--dur) ease, background var(--dur) ease;
}
textarea { font-family: var(--font-mono); font-size: 13px; line-height: 1.55; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--text-muted); }
input:hover, select:hover, textarea:hover { border-color: var(--line-strong); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--bg-inset) 82%, var(--bg-surface)); }
select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
    linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position: calc(100% - 16px) center, calc(100% - 11px) center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-right: 30px;
}

/* Checkbox rows as selectable lines */
label:has(> input[type="checkbox"]) {
  display: flex; align-items: center; gap: 9px;
  color: var(--text); text-transform: none; letter-spacing: .02em;
  font: 700 14px/1.3 var(--font-ui);
  padding: 9px 11px; margin: 8px 0 0;
  border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  background: var(--bg-surface-alt); cursor: pointer;
  transition: background var(--dur) ease, border-color var(--dur) ease;
}
label:has(> input[type="checkbox"]:checked) { border-color: var(--accent-dim); background: rgba(230,195,77,.08); color: var(--text-heading); }
label:has(> input[type="checkbox"]):hover { border-color: var(--line-strong); }
input[type="checkbox"] { width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--accent); cursor: pointer; }

/* Matrix row grid (template preserved) */
.row-grid { display: grid; grid-template-columns: 150px 1.2fr repeat(4, 1fr); gap: 6px; margin-bottom: 6px; align-items: center; }
.row-grid input { padding: 8px 9px; font-family: var(--font-body); font-size: 13px; }
.row-emphasis-select {
  padding-left: 30px; font: 700 12px/1 var(--font-ui); letter-spacing: .03em; text-transform: uppercase;
  background-image: linear-gradient(var(--chip, #cfd5db), var(--chip, #cfd5db));
  background-repeat: no-repeat; background-size: 11px 11px; background-position: 11px 50%;
}
.row-emphasis-select[data-emphasis="default"]  { --chip: #cfd5db; }
.row-emphasis-select[data-emphasis="featured"]  { --chip: #4f8fd1; }
.row-emphasis-select[data-emphasis="caution"]   { --chip: #c9a63b; }
.row-emphasis-select[data-emphasis="alert"]     { --chip: #b65252; }

/* Progressive-disclosure subsections */
.subsection {
  margin-top: 12px; padding: 0 14px 12px;
  border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  background: var(--bg-surface-alt); transition: opacity var(--dur) ease;
}
.subsection > summary {
  cursor: pointer; list-style: none;
  width: calc(100% + 28px); box-sizing: border-box;
  margin: 0 -14px 4px; padding: 11px 14px;
  color: var(--accent);
  font: 700 12px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase;
  background: var(--bg-titlebar-2); border-bottom: 1px solid var(--line-soft);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  display: flex; align-items: center; gap: 9px;
}
.subsection > summary::-webkit-details-marker { display: none; }
.subsection > summary::before { content: "\25B8"; color: var(--text-muted); transition: transform var(--dur) ease; }
.subsection[open] > summary::before { transform: rotate(90deg); }
.subsection.is-disabled { opacity: .5; }
.subsection .small { margin-top: 10px; }

.state-tabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 14px 0;
}
.state-tab {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  background: var(--bg-surface-alt); color: var(--text);
  padding: 9px 11px;
  font: 700 12px/1 var(--font-ui);
  letter-spacing: .06em; text-transform: uppercase;
}
.state-tab:hover { border-color: var(--line-strong); color: var(--text-heading); text-decoration: none; }
.state-tab.is-active {
  border-color: var(--accent-dim);
  background: rgba(230,195,77,.08);
  color: var(--text-heading);
}
.state-actions {
  border-top: 1px solid var(--line-soft);
  margin-top: 12px; padding-top: 12px;
}
.state-action-form {
  display: grid; grid-template-columns: minmax(220px, 1fr) auto;
  gap: 8px; align-items: end;
}
.state-action-form label { grid-column: 1 / -1; }
.state-button-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 10px;
}
.editor-context {
  border: 1px solid var(--line-soft);
  background: var(--bg-surface-alt);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  margin: -4px 0 16px;
  padding: 11px 14px;
}
.editor-context span {
  display: block;
  color: var(--text-dim);
  font: 700 11px/1 var(--font-ui);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.editor-context strong {
  display: block;
  margin-top: 5px;
  color: var(--text-heading);
  font: 700 18px/1.1 var(--font-display);
  letter-spacing: .04em;
}

.sponsor-entry { border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: var(--bg-inset); padding: 12px 14px; margin-top: 12px; }
.sponsor-entry:first-child { margin-top: 12px; }
#sponsor-entries { margin-top: 4px; }

.small { font-size: 13px; color: var(--text-dim); line-height: 1.5; }

#add-row, #add-sponsor, #import-to-rows { margin-top: 10px; background: var(--bg-surface-alt); border-style: dashed; }
#add-row:hover, #add-sponsor:hover, #import-to-rows:hover { background: var(--bg-highlight); border-style: solid; }

.console-submit {
  position: sticky; bottom: 0; margin-top: 4px; padding: 14px 0 4px;
  background: linear-gradient(180deg, rgba(9,12,17,0) 0%, var(--field-2) 45%);
}
.console-submit .btn { font-size: 14px; padding: 13px 26px; }

/* ------------------------------------------------- 12. Single-column pages */
.prose { max-width: 760px; }
.prose h1 {
  margin: 0 0 6px;
  font: 700 clamp(26px,3.6vw,34px)/1 var(--font-display); font-stretch: condensed;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-heading);
}
.prose > p:first-of-type { color: var(--text); }
.prose h2 {
  margin: 24px 0 8px;
  font: 700 14px/1.2 var(--font-ui); letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);
}
.prose p { color: var(--text-dim); line-height: 1.6; }
.prose a { color: color-mix(in srgb, var(--info) 55%, #cfe0f2); }
.status-panel {
  border: 1px solid var(--line-soft); border-left: 3px solid var(--accent);
  background: var(--bg-surface-alt); padding: 14px 16px; margin: 18px 0; border-radius: var(--r-sm);
}
.status-panel p { margin: 0 0 9px; color: var(--text); font-size: 14px; }
.status-panel p:last-child { margin-bottom: 0; }
.status-panel strong { color: var(--accent); font-weight: 700; }

/* -------------------------------------------------------- 13. Footer */
.footer-links {
  margin-top: 20px;
  border-top: 1px solid #16202e;
  padding: 14px 4px 4px;
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
.footer-links .footer-tag {
  margin-right: auto;
  font: 700 11px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted);
}
.footer-links a {
  color: var(--text-dim); text-decoration: none;
  padding: 6px 10px; border-radius: var(--r-sm);
  font: 600 12px/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase;
  transition: background var(--dur) ease, color var(--dur) ease;
}
.footer-links a:hover { background: rgba(120,150,190,.1); color: var(--text-heading); }

@media (min-resolution: 2dppx) {
  .device, fieldset.form-card, .tile, .use-grid article, .mode-grid article, .example-grid article { border-width: 1px; }
}

/* ---------------------------------------------------------- 14. Responsive */
@media (max-width: 900px) {
  .console-split { grid-template-columns: 1fr; }
  .use-grid, .example-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-strip ul { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .site-shell { padding: 12px 14px 32px; }
  .topbar { flex-direction: column; align-items: stretch; gap: 12px; }
  .brand { justify-content: center; }
  .topnav { margin-left: 0; justify-content: center; }
  .topnav a { flex: 1 1 auto; justify-content: center; }
  .theme-select { margin-left: 0; justify-content: center; }
  .theme-select select { flex: 1 1 auto; }
  .tilegrid, .use-grid, .mode-grid, .example-grid, .feature-strip ul { grid-template-columns: 1fr; }
  .sim-top { grid-template-columns: 1fr; }
  .sim-meta { display: none; }
  .sim-timebar, .sim-row { grid-template-columns: 84px repeat(2, 1fr); }
  .sim-timebar .sim-timecell:nth-child(n+4), .sim-row .sim-cell:nth-child(n+4) { display: none; }
  .row-grid { grid-template-columns: 1fr 1fr; }
  .row-grid .row-emphasis-select { grid-column: 1 / -1; }
  .titlebar { flex-wrap: wrap; gap: 6px; }
}

/* --------------------------------------------------- 15. Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .sim-row-track { transition: none !important; }
}