/* Dark instrument: a near-black ground under the traces, a slate chassis around it.
   *
   * minHold and maxHold swap their lightness against a light theme. On paper the minHold
   * is the darkest ink because it carries the reading that matters — the quiet floor —
   * and here it has to be the brightest line for the same reason. */
  :root {
    --page: #14181c;
    --card: #1b2026;
    --paper: #0b0e11;
    --chip: #232a32;
    --chip-hi: #2d353f;
    --rule: #2b323a;
    --hair: #232931;
    --grid: #232931;
    --ink: #e3e8ee;
    --muted: #8b959f;
    --avg: #5b8dff;
    --min: #cfd6dd;
    --max: #4a545f;
    --band: #121826;
    --band-edge: #2f4a7a;
    --alarm: #ff6b6b;
    --font: "Segoe UI", Arial, Helvetica, system-ui, sans-serif;
    --font-data: "Segoe UI", Arial, Helvetica, system-ui, sans-serif;
  }

  * { box-sizing: border-box; }

  [hidden] { display: none !important; }

  body {
    /* checkboxes, number spinners and the select arrow are drawn by the browser, and
     * without this they stay white against everything else */
    color-scheme: dark;
  }

  /* the instrument keeps its own dense scale; the page around it keeps the site's */
  .tool {
    background: var(--page);
    color: var(--ink);
    font-family: var(--font);
    font-size: 13px;
  }

  .eyebrow {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
  }

  .eyebrow.as-typed { font-weight: 400; color: var(--muted); }

  /* ---------- shell ---------- */

  .bar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 10px 16px;
    border-bottom: 1px solid var(--rule);
    background: var(--card);
  }

  .bar .bar-title { margin: 0; font-size: 15px; font-weight: 600; }

  .bar .sub { color: var(--muted); font-size: 12px; }

  .bar .spacer { flex: 1 1 auto; }

  .filebtn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    padding: 6px 13px;
    border: 1px solid var(--rule);
    border-radius: 2px;
    background: var(--chip);
    font-size: 12px;
    cursor: pointer;
  }

  .filebtn:hover { background: var(--chip-hi); }

  .filebtn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

  .filebtn:focus-within { outline: 2px solid var(--avg); outline-offset: 2px; }

  .modeswitch { display: flex; border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; }

  .modeswitch button {
    padding: 6px 12px;
    border: 0;
    background: var(--chip);
    color: var(--muted);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
  }

  .modeswitch button.on { background: var(--avg); color: var(--paper); }

  .bar button.utility {
    padding: 6px 10px;
    border: 1px solid var(--rule);
    border-radius: 2px;
    background: var(--chip);
    color: var(--ink);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
  }

  .bar button.utility:hover { background: var(--chip-hi); }

  .tabs { display: flex; gap: 2px; }
  .tabs button { padding: 6px 10px; border: 1px solid var(--rule); background: var(--chip); color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
  .tabs button.on { background: #24314a; color: var(--ink); }

  /* ---------- empty state ---------- */

  .empty { display: grid; place-items: center; padding: 8vh 20px; text-align: center; }

  .empty-card {
    max-width: 620px;
    padding: 44px 36px;
    border: 1px solid var(--rule);
    background: var(--card);
  }

  .empty-card h2 { margin: 0 0 10px; font-size: 19px; font-weight: 600; }

  .empty-card p { margin: 0 0 8px; color: var(--muted); line-height: 1.6; }

  .empty-card .files { margin-top: 18px; font-size: 12px; color: var(--ink); }

  body.dragging .empty-card { border-color: var(--avg); background: #1c2637; }

  .error {
    margin: 12px 16px;
    padding: 10px 14px;
    border-left: 3px solid var(--alarm);
    background: #2a1719;
    color: #ff9d9d;
    font-size: 12.5px;
  }

  /* ---------- layout ---------- */

  .work {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 268px;
    gap: 12px;
    align-items: start;
    padding: 12px;
  }

  .work > * { min-width: 0; }

  .work > aside { position: sticky; top: 58px; max-height: calc(100vh - 70px); overflow-y: auto; }

  .panel { padding: 12px 14px; border: 1px solid var(--rule); background: var(--card); }

  .panel + .panel { margin-top: 12px; }

  .workspace-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
    padding: 10px 14px;
    border: 1px solid #2f4a7a;
    background: #172131;
  }

  .workspace-summary b { color: var(--avg); font-size: 16px; font-variant-numeric: tabular-nums; }
  .workspace-summary p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }

  .col-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 8px;
  }

  section.block { margin-bottom: 16px; }

  section.block:last-child { margin-bottom: 0; }

  /* ---------- file details ---------- */

  dl.kv { margin: 0; }

  dl.kv > div {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 8px;
    padding: 3px 0;
  }

  dl.kv dt { color: var(--muted); font-size: 12px; }

  dl.kv dd {
    margin: 0;
    overflow-wrap: anywhere;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
  }

  /* ---------- loaded captures ---------- */

  .captures { max-height: 34vh; overflow-y: auto; }

  .cap-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 14px 14px;
    align-items: center;
    gap: 6px;
    padding: 1px 2px 1px 0;
    border-bottom: 1px solid var(--hair);
  }

  .cap-row:hover { background: var(--chip); }

  .cap-row.on { background: #24314a; }

  .cap-row .pick {
    display: grid;
    grid-template-columns: 9px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    padding: 4px 2px;
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
  }

  .cap-row .swatch { width: 9px; height: 9px; border-radius: 50%; }

  .cap-row .tag { overflow: hidden; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }

  .cap-row.on .tag { font-weight: 600; }

  .cap-row .lvl { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--muted); }

  .cap-row input { margin: 0; cursor: pointer; }

  .cap-row .drop-one {
    padding: 0;
    border: 0;
    background: none;
    color: #5f6a75;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
  }

  .cap-row .drop-one:hover { color: var(--alarm); }

  /* ---------- one screen per capture ---------- */

  .wall { display: grid; gap: 16px; }

  .sector-group { min-width: 0; padding: 10px; border: 1px solid var(--rule); background: #171c21; }
  .sector-title { margin: 0 0 8px; color: var(--ink); font-size: 12px; font-weight: 600; }
  .sector-title span { margin-left: 6px; color: var(--muted); font-weight: 400; }
  .sector-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }
  .wall.cols-2 .sector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wall.cols-3 .sector-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wall.cols-4 .sector-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .tile { padding: 5px 6px; border: 1px solid var(--rule); background: var(--card); cursor: crosshair; }

  .tile.on { border-color: var(--avg); box-shadow: 0 0 0 1px var(--avg) inset; }

  .tile .head {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
  }

  .tile .head .swatch { width: 8px; height: 8px; border-radius: 50%; }

  .tile .head .tag {
    overflow: hidden;
    font-size: 11px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tile .head .at { font-size: 10px; color: var(--muted); }

  .tile canvas { height: 96px; }

  .tile .foot {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    margin-top: 2px;
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
  }

  .tile .foot .spur { color: var(--alarm); }

  .backlink {
    margin-bottom: 10px;
    padding: 4px 10px;
    border: 1px solid var(--rule);
    background: var(--chip);
    color: var(--ink);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
  }

  .backlink:hover { background: var(--chip-hi); }

  /* ---------- charts ---------- */

  canvas { display: block; width: 100%; touch-action: none; }

  #spectrum { height: 42vh; min-height: 280px; cursor: crosshair; }

  .compare-panel { margin-top: 12px; }
  .compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .compare-card { padding: 8px; border: 1px solid var(--hair); background: var(--paper); }
  .compare-card .compare-name { margin-bottom: 5px; font-size: 11.5px; font-weight: 600; }
  .compare-card canvas { height: 250px; cursor: crosshair; }

  .tool-credit { padding: 10px 18px 14px; color: var(--muted); font-size: 10px; text-align: right; }

  canvas[id^="campaignBeforeCanvas"], canvas[id^="campaignAfterCanvas"] { height: 250px; }
  canvas[id^="campaignBeforeWaterfall"], canvas[id^="campaignAfterWaterfall"] { height: 220px; margin-top: 10px; }
  .campaign-pair-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .campaign-pair-grid canvas[id^="campaignBeforeCanvas"], .campaign-pair-grid canvas[id^="campaignAfterCanvas"] { height: 300px; }
  .campaign-pair-grid canvas[id^="campaignBeforeWaterfall"], .campaign-pair-grid canvas[id^="campaignAfterWaterfall"] { height: 240px; }
  .campaign-summary { margin: 0 0 10px; color: var(--muted); font-size: 12px; }
  .campaign-row { cursor: pointer; }
  .campaign-row:hover td, .campaign-row.on td { background: #24314a; }
  .campaign-exec { display:flex; gap:10px; flex-wrap:wrap; margin:10px 0; }
  .campaign-exec .stat { padding:8px 12px; border:1px solid var(--rule); background:var(--chip); min-width:96px; }
  .campaign-exec b { font-size:18px; display:block; }
  #campaignTable { width: auto; min-width: 620px; table-layout: fixed; }
  #campaignTable th, #campaignTable td { padding: 7px 10px; white-space: nowrap; }
  #campaignTable th:nth-child(1), #campaignTable td:nth-child(1) { width: 118px; }
  #campaignTable th:nth-child(2), #campaignTable td:nth-child(2) { width: 78px; }
  #campaignTable th:nth-child(3), #campaignTable td:nth-child(3) { width: 66px; }
  #campaignTable th:nth-child(4), #campaignTable td:nth-child(4) { width: 142px; }
  #campaignTable th:nth-child(5), #campaignTable td:nth-child(5) { width: 100px; }
  .trend { display: inline-block; min-width: 86px; padding: 3px 7px; border-radius: 10px; font-weight: 600; text-align: center; }
  .trend-up { background: #3a1f24; color: var(--alarm); }
  .trend-down { background: #173628; color: #4ade80; }
  .trend-flat { background: var(--chip); color: var(--muted); }
  button.inline-action { padding: 5px 9px; border: 1px solid var(--rule); background: var(--chip); color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; }
  button.inline-action:hover { background: var(--chip-hi); }
  .verdict-better { color: #4ade80; font-weight: 600; }
  .verdict-worse { color: var(--alarm); font-weight: 600; }
  .verdict-stable { color: var(--muted); }

  .wf-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 58px; gap: 6px; align-items: stretch; }

  #waterfall { height: 220px; }

  .cbar { display: grid; grid-template-columns: 18px auto; gap: 4px; align-items: stretch; padding: 6px 0 26px; }

  .cbar .ramp { border: 1px solid var(--rule); }

  .cbar .ticks {
    position: relative;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
  }

  .cbar .ticks span { position: absolute; left: 0; transform: translateY(-50%); white-space: nowrap; }

  .trace-legend {
    display: flex;
    justify-content: center;
    gap: 18px;
    padding: 4px 0 2px;
    font-size: 11.5px;
    color: var(--muted);
  }

  .trace-legend label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }

  .trace-legend .trace-dot { width: 9px; height: 9px; border-radius: 50%; }

  .readout {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    padding: 6px 0 2px;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
  }

  .readout b { color: var(--ink); font-weight: 600; }

  /* ---------- band plate ---------- */

  .plate { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--hair); }

  .plate-strip {
    position: relative;
    height: 44px;
    border-left: 1px solid var(--rule);
    border-right: 1px solid var(--rule);
  }

  .plate-band {
    position: absolute;
    top: 12px;
    height: 15px;
    background: var(--chip);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }

  .plate-carrier {
    position: absolute;
    top: 8px;
    height: 23px;
    background: var(--band);
    border: 1px solid var(--avg);
  }

  .plate-carrier b {
    position: absolute;
    left: 50%;
    top: 1px;
    transform: translateX(-50%);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--avg);
    white-space: nowrap;
  }

  .plate-window {
    position: absolute;
    top: 2px;
    height: 35px;
    border: 1px dashed var(--band-edge);
    border-bottom-width: 0;
  }

  .plate-tick { position: absolute; bottom: 0; width: 1px; height: 5px; background: var(--rule); }

  .plate-tick i {
    position: absolute;
    left: 0;
    top: 7px;
    transform: translateX(-50%);
    font-size: 10px;
    font-style: normal;
    color: var(--muted);
    white-space: nowrap;
  }

  .plate-legend { display: flex; gap: 16px; margin-top: 20px; font-size: 11px; color: var(--muted); }

  .plate-legend span::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 0;
    margin-right: 5px;
    vertical-align: 3px;
  }

  .plate-legend .lg-band::before { border-top: 3px solid var(--rule); }
  .plate-legend .lg-carrier::before { border-top: 3px solid var(--avg); }
  .plate-legend .lg-window::before { border-top: 3px dashed var(--band-edge); }

  /* ---------- controls ---------- */

  .ctrls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 9px 10px; }

  .ctrl { display: flex; min-width: 0; flex-direction: column; gap: 3px; }

  .ctrl label { font-size: 11px; color: var(--muted); }

  .ctrl select, .ctrl input {
    width: 100%;
    min-width: 0;
    padding: 4px 5px;
    border: 1px solid var(--rule);
    background: var(--chip);
    color: var(--ink);
    font-family: inherit;
    font-size: 12px;
  }

  .ctrl select:focus-visible, .ctrl input:focus-visible, button:focus-visible {
    outline: 2px solid var(--avg);
    outline-offset: 1px;
  }

  .toggles { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--muted); }

  .toggles label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

  button.action {
    width: 100%;
    margin-top: 10px;
    padding: 6px;
    border: 1px solid var(--rule);
    background: var(--chip);
    color: var(--ink);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
  }

  button.action:hover { background: var(--chip-hi); }

  /* ---------- tables ---------- */

  table.data { width: 100%; border-collapse: collapse; font-size: 11.5px; }

  table.data th {
    padding: 3px 0;
    border-bottom: 1px solid var(--rule);
    font-size: 11px;
    font-weight: 600;
    text-align: right;
    color: var(--muted);
  }

  table.data th:first-child, table.data td:first-child { text-align: left; }

  table.data td {
    padding: 3px 0;
    border-bottom: 1px solid var(--hair);
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  table.data tr.hot td { color: var(--alarm); }

  .scroller { overflow-x: auto; }

  table.data td.best { font-weight: 600; color: var(--alarm); }

  table.data td.quiet { color: #59636d; }

  table.data td.im { color: var(--avg); font-weight: 600; }

  table.data .verdict-ok { color: #4ade80; }

  table.data .verdict-high { color: var(--alarm); font-weight: 600; }

  .note { margin: 8px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); }

  details.raw { margin-top: 12px; }

  details.settings { border-top: 1px solid var(--hair); }
  details.settings summary { padding: 10px 0 0; cursor: pointer; color: var(--ink); font-size: 12px; font-weight: 600; }
  details.settings[open] summary { margin-bottom: 10px; }

  .shortcut-note { margin: 0; padding: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }

  details.raw summary { cursor: pointer; font-size: 11.5px; color: var(--muted); }

  details.raw pre {
    max-height: 240px;
    overflow: auto;
    margin: 8px 0 0;
    padding: 8px;
    border: 1px solid var(--rule);
    background: var(--paper);
    font-family: Consolas, "Cascadia Mono", monospace;
    font-size: 11px;
    line-height: 1.5;
    color: var(--muted);
  }

  @media (max-width: 1100px) {
    .work { grid-template-columns: minmax(0, 1fr); }
    .work > aside { position: static; max-height: none; overflow: visible; }
    .wall.cols-3 .sector-grid, .wall.cols-4 .sector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .compare-grid { grid-template-columns: minmax(0, 1fr); }
  }


  /* ======================================================================
     Landing and prose, drawn with the site's own tokens so this page sits
     inside GSM Field Suite rather than beside it. The instrument above keeps
     its darker instrument ground on purpose: it is a screen, not a document.
     ====================================================================== */

  .rfs-hero {
    padding: 60px 0 48px;
    border-bottom: 1px solid var(--line-soft);
    background:
      radial-gradient(900px 340px at 50% -120px, color-mix(in srgb, var(--signal) 9%, transparent) 0%, transparent 70%),
      var(--bg);
  }

  .rfs-hero-inner { max-width: 760px; margin: 0 auto; padding: 0 28px; text-align: center; }

  .rfs-hero-eyebrow {
    margin: 0 0 12px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--signal);
  }

  .rfs-hero h1 {
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-size: clamp(32px, 5vw, 46px);
    line-height: 1.08;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--text);
  }

  .rfs-hero-lead { margin: 0 0 22px; font-size: 19px; line-height: 1.5; color: var(--text-dim); }

  .rfs-hero-claims {
    display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 0 0 28px;
  }

  .rfs-hero-claims span {
    padding: 5px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-dim);
  }

  .rfs-hero-cta {
    padding: 14px 32px;
    border: 1px solid var(--signal);
    border-radius: var(--radius);
    background: var(--signal);
    color: #06281d;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 650;
    cursor: pointer;
  }

  .rfs-hero-cta:hover { background: color-mix(in srgb, var(--signal) 82%, white); }
  .rfs-hero-cta:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

  .rfs-hero-privacy {
    margin: 22px auto 0; max-width: 460px;
    font-size: 15px; line-height: 1.6; color: var(--text-dim);
  }
  .rfs-hero-privacy b { color: var(--text); }

  .rfs-hero-sub {
    margin: 24px auto 0; max-width: 560px;
    font-size: 15px; line-height: 1.6; color: var(--text-mute);
  }

  .tool { border-bottom: 1px solid var(--line-soft); }

  /* ---------- prose ---------- */

  .prose { max-width: 800px; margin: 0 auto; padding: 56px 28px 8px; }

  .prose section { margin-bottom: 48px; }

  .prose h2 {
    margin: 0 0 16px;
    font-family: var(--font-display);
    font-size: 26px; font-weight: 650; letter-spacing: -0.01em; color: var(--text);
  }

  .prose h3 { margin: 26px 0 8px; font-size: 17px; font-weight: 650; color: var(--text); }

  .prose p { margin: 0 0 16px; color: var(--text-dim); }
  .prose b { color: var(--text); }

  .prose code {
    padding: 1px 6px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--text);
  }

  .feature-list, .steps { margin: 0; padding-left: 22px; color: var(--text-dim); }
  .feature-list li, .steps li { margin-bottom: 10px; }

  /* ---------- cross-links ---------- */

  .rfs-tool-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

  .rfs-tool-card {
    display: block;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
  }

  .rfs-tool-card:hover { border-color: var(--signal-dim); background: var(--surface-2); }
  .rfs-tool-card h3 { margin: 0 0 8px; font-size: 17px; font-weight: 650; color: var(--text); }
  .rfs-tool-card p { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: var(--text-dim); }
  .rfs-tool-card-go { font-family: var(--font-mono); font-size: 13px; color: var(--signal); }

  /* ---------- disclaimer ---------- */

  .rfs-disclaimer-bar {
    max-width: 800px;
    margin: 24px auto 40px;
    padding: 0 28px;
  }

  .rfs-disclaimer-bar .disclaimer {
    padding: 14px 18px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: var(--bg-alt);
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-mute);
  }

  .calibration-note b { color: var(--ink); }

  @media (max-width: 720px) {
    .rfs-hero { padding: 40px 0 34px; }
    .rfs-hero-lead { font-size: 17px; }
    .prose { padding: 40px 20px 8px; }
    .prose h2 { font-size: 22px; }
    .rfs-tool-cards { grid-template-columns: 1fr; }
    .rfs-disclaimer-bar { padding: 0 20px; }
  }