:root{
  --bg:#0a0d10;
  --panel:#12171c;
  --panel-2:#161d23;
  --panel-3:#1b232a;   /* selected table row */
  --border:#2a333b;
  --border-soft:#1d252c;
  --text:#f3f5f7;
  --text-dim:#b3bdc6;
  --text-faint:#8b96a0;
  --accent:#ff7a30;
  --accent-soft:#ff7a3026;
  --accent2:#3fe3cf;
  --accent2-soft:#3fe3cf26;
  --warn:#ffc25c;
  --err:#ff6b6b;
  --err-soft:#ff6b6b1f;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --radius:8px;

  /* Impulse-class spectrum, cold to hot. Each letter is a doubling of total
     impulse, so the scale is ordered and the ramp reads as energy. Lifted at the
     cold end (A-D) to stay legible on the dark panel. */
  --c-A:#6b8fc7;   --c-B:#5f9ccb;   --c-C:#52a9c9;   --c-D:#46b5b4;   --c-E:#4cc298;
  --c-F:#66cb7d;   --c-G:#8ed268;   --c-H:#b5d757;   --c-I:#d6d24e;   --c-J:#efc247;
  --c-K:#f9a83e;   --c-L:#fd8c39;   --c-M:#fb6f38;   --c-N:#f4523c;   --c-O:#e83a52;

  /* Chart ink. The thrust-curve SVGs are built as strings in JS and used to carry
     these as literal hex, which meant they stayed dark no matter what the rest of
     the page did. They reference these tokens now, so a theme change repaints an
     already-rendered chart with no re-render. */
  --chart-bg:#0e1318;
  --chart-grid:#1d252c;
  --chart-axis:#8b96a0;
  --chart-band:#3fe3cf1f;   /* initial-thrust window */
  --chart-ring:#0a0d10;     /* outline that lifts the peak marker off the curve */
  --chart-tip-bg:#161d23;
  --chart-tip-border:#2a333b;

  /* Up to five overlaid curves in compare / combine. */
  --cmp-1:#ff7a30; --cmp-2:#3fe3cf; --cmp-3:#c792ea; --cmp-4:#7ad3ff; --cmp-5:#ffd166;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:15px;
  -webkit-font-smoothing:antialiased;
  height:100vh;
  overflow:hidden;
}
::selection{background:var(--accent-soft); color:var(--text);}

/* App shell: the page itself does not scroll — the table does. Every ancestor of
   the scroll area needs min-height:0, or a flex item refuses to shrink below its
   content and pushes the table footer off screen. */
/* The cap was 1380px, but the default column set needs 1621px — so the table
   scrolled sideways at every screen size, including a 3440px display with 2060px
   of empty margin either side. The cap now rises with the viewport; only the
   table spends the extra width. Hero copy stays at a readable measure. */
.wrap{
  max-width:2600px; margin:0 auto; padding:0 22px 14px;
  height:100vh; display:flex; flex-direction:column;
}
.hero-text{max-width:1380px;}
.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;
}

/* ---------- topbar: nav + guide/version chips on one line ---------- */
.topbar{
  display:flex; align-items:center; gap:14px; flex:0 0 auto; flex-wrap:wrap;
  padding:7px 0; border-bottom:1px solid var(--border-soft);
}
.topbar-tools{display:flex; align-items:center; gap:7px; margin-left:auto;}
.chip-btn{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--mono); font-size:11px; letter-spacing:.04em;
  background:var(--panel); border:1px solid var(--border); color:var(--text-faint);
  border-radius:6px; padding:5px 10px; cursor:pointer; white-space:nowrap;
  transition:border-color .15s, color .15s;
}
.chip-btn:hover{border-color:var(--accent2); color:var(--text-dim);}
.chip-btn .vdot{width:6px; height:6px; border-radius:50%; background:var(--accent2); flex-shrink:0;}

/* ---------- hero ---------- */
.hero{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  flex:0 0 auto; padding:13px 0 12px; border-bottom:1px solid var(--border);
}
.hero-text{min-width:0;}
.brand-eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin:0 0 5px; font-weight:600;
}
h1{
  font-family:var(--sans); font-weight:800; font-size:27px; letter-spacing:-0.01em;
  margin:0; color:var(--text);
}
.hero-sub{
  color:var(--text-faint); font-size:12.5px; margin:6px 0 0; line-height:1.5;
  font-family:var(--mono);
}
.hero-sub a{color:var(--accent2); text-decoration:none; border-bottom:1px solid transparent;}
.hero-sub a:hover{border-bottom-color:var(--accent2);}
.refresh-icon{
  background:none; border:1px solid var(--border); color:var(--text-faint); cursor:pointer;
  width:22px; height:22px; border-radius:5px; font-size:12px; line-height:1; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  vertical-align:-6px; margin-left:6px;
}
.refresh-icon:hover{border-color:var(--accent2); color:var(--accent2);}
.refresh-icon:disabled{opacity:.5; cursor:default;}
.refresh-icon .ricon{display:inline-block;}
.refresh-icon.spinning .ricon{animation:spin .9s linear infinite;}
/* ---------- impulse spectrum ----------
   The whole database by class. Doubles as a filter: clicking a bar writes to
   state.filters.classes, the same Set the Class dropdown uses, so the two stay
   in sync and Clear filters resets both. */
.spectrum{display:flex; flex-direction:column; gap:5px; flex-shrink:0;}
.spectrum-head{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  font-family:var(--mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-faint);
}
.spectrum-readout{text-transform:none; letter-spacing:.02em; color:var(--text-dim); white-space:nowrap;}
.spectrum-bars{display:flex; align-items:flex-end; gap:4px; height:52px;}
.sbar{
  width:26px; border:none; padding:0; background:none; cursor:pointer;
  display:flex; flex-direction:column; justify-content:flex-end; height:100%;
}
.sbar i{
  display:block; width:100%; border-radius:2px 2px 0 0; background:var(--sc);
  opacity:.85; transition:opacity .15s, transform .15s; transform-origin:bottom;
}
.sbar:hover i{opacity:1; transform:scaleY(1.06);}
.sbar[aria-pressed="true"] i{opacity:1; box-shadow:0 0 0 1.5px var(--sc), 0 0 12px -2px var(--sc);}
.sbar.dim i{opacity:.2;}
.spectrum-axis{display:flex; gap:4px;}
.spectrum-axis span{
  width:26px; text-align:center; font-family:var(--mono); font-size:10px;
  font-weight:600; color:var(--text-faint); transition:color .15s;
}
.spectrum-axis span.on{color:var(--text);}

/* ---------- status / error banners ---------- */
.banner{
  display:flex; align-items:center; gap:12px;
  border:1px solid var(--border); background:var(--panel);
  border-radius:var(--radius); padding:13px 16px; margin-bottom:16px;
  font-size:14px; color:var(--text-dim);
}
.banner.err{border-color:#6b2c2c; background:var(--err-soft); color:#ffc6c6;}
.banner .dot{width:8px; height:8px; border-radius:50%; background:var(--accent2); flex-shrink:0;}
.banner.err .dot{background:var(--err);}
.spin{
  width:14px;height:14px;border-radius:50%;
  border:2px solid var(--border-soft); border-top-color:var(--accent2);
  animation:spin .8s linear infinite; flex-shrink:0;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- toolbar: narrows the result set ---------- */
.toolbar{
  display:flex; align-items:flex-end; gap:12px; flex:0 0 auto; flex-wrap:wrap;
  padding:11px 0 12px;
}

/* ---------- AI search ---------- */
.ai-search{flex:1 1 330px; min-width:250px; max-width:520px;}
.ai-row{display:flex; gap:0;}
.ai-row input[type=text]{
  flex:1; min-width:0; background:var(--panel); border:1px solid var(--border);
  border-right:none; border-radius:8px 0 0 8px;
  color:var(--text); font-family:var(--sans); font-size:14px; padding:9px 13px; transition:border-color .15s;
}
.ai-row input[type=text]::placeholder{color:var(--text-faint);}
.ai-row input[type=text]:focus{border-color:var(--accent2);}
.ai-row button{
  font-family:var(--sans); font-weight:600; font-size:13.5px; letter-spacing:.01em;
  background:var(--accent2-soft); color:#c8f5ee; border:1px solid #2a6b62;
  border-radius:0 8px 8px 0; padding:0 17px; cursor:pointer;
  transition:background .15s, transform .05s;
  display:flex; align-items:center; gap:8px; white-space:nowrap;
}
.ai-row button:hover{background:#1e4f49;}
.ai-row button:active{transform:translateY(1px);}
.ai-row button:disabled{opacity:.55; cursor:default;}
.ai-result{
  margin:0 0 12px; padding:11px 13px; border-radius:7px;
  background:var(--accent2-soft); border:1px solid #2a6b62; font-size:13.5px; color:#d3f7f1;
  display:flex; align-items:flex-start; gap:10px;
}
.ai-result button{
  background:transparent; border:1px solid #357d72; color:#d3f7f1; border-radius:6px;
  font-size:12px; padding:5px 10px; cursor:pointer; font-family:var(--sans); margin-left:auto; flex-shrink:0;
}
.ai-result button:hover{background:#214f48;}
.ai-fallback{background:#3a2a0d40; border-color:#5c4419; color:#ffd9a0;}
.ai-fallback button{border-color:#6b5226; color:#ffd9a0;}
.ai-fallback button:hover{background:#5c441940;}

/* ---------- structured filters ---------- */
.filters{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; margin:0;
}
.filters .field{display:flex; flex-direction:column; gap:5px; position:relative;}
.filters label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-faint); font-family:var(--mono);}

/* ---------- action strip: operates on the current result set ---------- */
.table-strip{
  display:flex; align-items:center; gap:10px; flex:0 0 auto; flex-wrap:wrap;
  padding:8px 12px; background:var(--panel-2);
  border:1px solid var(--border); border-bottom:none; border-radius:12px 12px 0 0;
}
.strip-tools{display:flex; align-items:center; gap:8px; margin-left:auto; flex-wrap:wrap;}
.tool-btn{
  background:var(--panel); border:1px solid var(--border); color:var(--text-dim);
  border-radius:7px; padding:6px 11px; font-size:12.5px; cursor:pointer; font-family:var(--sans);
  display:flex; align-items:center; gap:6px; white-space:nowrap;
  transition:border-color .15s, color .15s;
}
.tool-btn:hover:not(:disabled){border-color:var(--accent2); color:var(--text);}
.tool-btn:disabled{opacity:.45; cursor:default;}
.clear-btn{
  background:none; border:1px solid var(--border); color:var(--text-dim);
  border-radius:7px; padding:6px 11px; font-size:12.5px; cursor:pointer; font-family:var(--sans);
  white-space:nowrap;
}
.clear-btn:hover{border-color:var(--err); color:#ffc6c6;}
.export-btn:disabled{opacity:.45; cursor:default;}

/* ---------- column picker ---------- */
.col-picker-wrap{position:relative;}
/* visual styling comes from .tool-btn; only the open state is special here */
.col-picker-btn.open{border-color:var(--accent2); color:var(--text);}
.col-picker-panel{
  position:absolute; top:calc(100% + 6px); right:0; z-index:200;
  background:var(--panel-2); border:1px solid var(--border); border-radius:10px;
  box-shadow:0 8px 28px rgba(0,0,0,.55); width:320px; max-height:min(560px, 72vh);
  overflow-y:auto; padding:6px 0 10px;
}
.col-picker-panel[hidden]{display:none;}
.col-group-label{
  font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--text-faint); padding:11px 14px 4px; border-top:1px solid var(--border-soft);
  margin-top:4px;
}
.col-group-label:first-child{border-top:none; margin-top:0; padding-top:6px;}
.col-group-label.pinned{color:var(--accent2);}
.col-group-hint{text-transform:none; letter-spacing:.02em; font-size:10px; opacity:.75;}
.col-picker-item{
  display:flex; align-items:center; gap:3px;
  padding:2px 9px 2px 7px; margin:0 4px; border-radius:6px; transition:background .1s;
}
.col-picker-item:hover{background:var(--panel);}
/* a locked column is always visible, but it can still be pinned/unpinned and moved,
   so only the checkbox is dimmed — not the whole row */
.col-picker-item.locked .col-picker-label-wrap{opacity:.6;}
.col-picker-item.fixed{opacity:.55; padding-left:30px;}
.col-picker-empty{padding:5px 14px 7px 30px; font-size:12px; color:var(--text-faint);}
.col-picker-label-wrap{
  display:flex; align-items:center; gap:9px; flex:1; min-width:0;
  cursor:pointer; padding:4px 0 4px 4px;
}
.col-picker-item.locked .col-picker-label-wrap{cursor:default;}
.col-picker-item input[type=checkbox]{
  width:14px; height:14px; accent-color:var(--accent2); cursor:pointer; flex-shrink:0;
}
/* the picker sits inside .filters, whose `label` rule sets uppercase/mono/tracking.
   Those inherit into the item text, so reset them explicitly here. */
.col-picker-item-label{
  font-size:13px; color:var(--text-dim); line-height:1.3;
  font-family:var(--sans); text-transform:none; letter-spacing:normal;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.col-picker-item:not(.locked):hover .col-picker-item-label{color:var(--text);}
.col-move{
  background:none; border:none; color:var(--text-faint); cursor:pointer;
  width:18px; height:18px; border-radius:4px; font-size:9px; line-height:1; padding:0;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.col-move:hover:not(:disabled){background:var(--panel-2); color:var(--accent2);}
.col-move:disabled{opacity:.22; cursor:default;}
.col-move-spacer{width:39px; flex-shrink:0;}
.col-pin{
  background:none; border:1px solid transparent; color:var(--text-faint); cursor:pointer;
  width:24px; height:24px; border-radius:5px; padding:0; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.col-pin svg{width:12px; height:12px; display:block;}
.col-pin:hover{border-color:var(--border); color:var(--text);}
.col-pin.on{color:var(--accent2); background:var(--accent2-soft); border-color:#2a6b62;}
.col-picker-footer{
  display:flex; justify-content:space-between; align-items:center; gap:8px; padding:9px 13px 0;
  border-top:1px solid var(--border-soft); margin-top:8px;
}
.col-picker-frozen{font-family:var(--mono); font-size:10.5px; color:var(--text-faint);}
.col-picker-reset{
  font-family:var(--sans); font-size:12px; color:var(--text-faint);
  background:none; border:1px solid var(--border); border-radius:5px;
  padding:4px 10px; cursor:pointer; transition:color .15s, border-color .15s;
}
.col-picker-reset:hover{color:var(--text); border-color:var(--accent2);}

.result-count{
  font-family:var(--mono); font-size:12px; color:var(--text-faint); white-space:nowrap;
}
.result-count b{color:var(--text);}

/* ---------- production-status toggle ---------- */
.toggle-switch{
  display:flex; align-items:center; gap:9px; background:var(--panel); border:1px solid var(--border);
  border-radius:8px; padding:8px 12px; cursor:pointer; font-family:var(--sans); font-size:13.5px; color:var(--text-dim);
  height:38px; box-sizing:border-box;
}
.toggle-switch:hover{border-color:var(--accent2);}
.toggle-switch[aria-pressed="true"]{color:var(--text); border-color:#2a6b62;}
.toggle-track{
  width:34px; height:18px; border-radius:10px; background:var(--border); position:relative; flex-shrink:0; transition:background .15s;
}
.toggle-switch[aria-pressed="true"] .toggle-track{background:var(--accent2);}
.toggle-thumb{
  position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:var(--text);
  transition:transform .15s;
}
.toggle-switch[aria-pressed="true"] .toggle-thumb{transform:translateX(16px); background:#04211d;}

/* ---------- sparky indicator ---------- */
.sparky-badge{
  display:inline-flex; align-items:center; justify-content:center; margin-left:4px; font-size:11px;
  color:var(--warn); background:#3a2a0d; border:1px solid #5c4419; border-radius:5px; padding:2px 5px;
  cursor:help; line-height:1;
}
.sparky-yes{color:var(--warn); font-weight:700;}

/* ---------- multi-select checkbox dropdown ---------- */
.msel-control{position:relative;}
.msel-btn{
  background:var(--panel); border:1px solid var(--border); color:var(--text);
  border-radius:7px; padding:9px 11px; font-family:var(--sans); font-size:14px;
  min-width:150px; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px;
  text-align:left;
}
.msel-btn:hover{border-color:var(--accent2);}
.msel-btn-label{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:230px;}
.msel-caret{color:var(--text-faint); font-size:10px; flex-shrink:0;}
.msel-panel{
  position:absolute; top:calc(100% + 6px); left:0; z-index:20; min-width:230px; max-width:310px;
  background:var(--panel-2); border:1px solid var(--border); border-radius:9px; padding:9px;
  box-shadow:0 14px 32px rgba(0,0,0,.5);
}
.msel-search{margin-bottom:7px;}
.msel-search input{
  width:100%; background:var(--bg); border:1px solid var(--border); border-radius:6px; color:var(--text);
  font-family:var(--sans); font-size:13.5px; padding:7px 10px;
}
.msel-search input:focus{border-color:var(--accent2);}
.msel-actions{display:flex; gap:8px; margin-bottom:7px;}
.msel-actions button{
  background:none; border:1px solid var(--border); color:var(--text-dim); border-radius:6px;
  font-size:12px; padding:5px 10px; cursor:pointer; font-family:var(--sans);
}
.msel-actions button:hover{border-color:var(--accent2); color:var(--text);}
.msel-list{max-height:240px; overflow-y:auto;}
.msel-item{
  display:flex; align-items:center; gap:9px; padding:7px 6px; border-radius:5px; cursor:pointer; font-size:14px;
}
.msel-item:hover{background:var(--panel);}
.msel-item input{accent-color:var(--accent2); width:15px; height:15px; flex-shrink:0; cursor:pointer;}
.msel-item span:first-of-type{flex:1; color:var(--text);}
.msel-count{color:var(--text-faint); font-family:var(--mono); font-size:11.5px;}
.msel-empty{padding:12px; color:var(--text-faint); font-size:13px; text-align:center;}

/* ---------- table ---------- */
.table-shell{flex:1 1 auto; min-height:0; display:flex; flex-direction:column;}
/* table and detail pane share the remaining height */
.work{flex:1 1 auto; min-height:0; display:flex;}
.table-panel{
  flex:1 1 auto; min-width:0; min-height:0; display:flex; flex-direction:column;
  border:1px solid var(--border); border-radius:0 0 0 12px;
  overflow:hidden; background:var(--panel);
}
/* no pane showing — the table takes the full width and both corners back */
body.pane-off .table-panel,
.detail-pane[hidden] + .table-panel{border-radius:0 0 12px 12px;}
.table-scroll{flex:1 1 auto; min-height:0; overflow-x:auto; overflow-y:auto;}
table{width:100%; border-collapse:collapse; font-size:14.5px;}
thead th{
  position:sticky; top:0; background:var(--panel-2); z-index:2;
  text-align:left; padding:12px 14px; font-family:var(--mono); font-size:12px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--text-dim);
  border-bottom:1px solid var(--border); white-space:nowrap; cursor:pointer; user-select:none;
}
thead th:hover{color:var(--text);}
/* sortable header label — a real button, styled to read as plain header text */
.th-sort{
  background:none; border:none; padding:0; margin:0; font:inherit; color:inherit;
  letter-spacing:inherit; text-transform:inherit; cursor:pointer;
  display:inline-flex; align-items:center; white-space:nowrap;
}
th.num .th-sort{width:100%; justify-content:flex-end;}
thead th .arrow{display:inline-block; width:10px; margin-left:3px; color:var(--accent);}
thead th.num, td.num{text-align:right;}
thead th .info{
  display:inline-block; margin-left:5px; color:var(--text-faint); cursor:help; font-family:var(--sans);
  border:1px solid var(--text-faint); border-radius:50%; width:14px; height:14px; line-height:12px;
  text-align:center; font-size:10px;
}
tbody td{
  padding:11px 14px; border-bottom:1px solid var(--border-soft); white-space:nowrap; color:var(--text);
}
tbody td.num, tbody td.mono{font-family:var(--mono); font-variant-numeric:tabular-nums;}
tbody tr{transition:background .1s;}
tbody tr:hover{background:var(--panel-2);}
tbody tr:last-child td{border-bottom:none;}
.secondary-cell{color:var(--text-dim); font-size:13.5px; max-width:160px; overflow:hidden; text-overflow:ellipsis;}
.designation{font-weight:600; font-family:var(--mono); cursor:help;}
/* Impulse class carries its own colour from the spectrum ramp. Class is the single
   most important discriminator in the table and was previously rendered identically
   for every letter, so a D and an O looked the same.

   Written out per class rather than with color-mix() so it works on older browsers.
   Regenerate from the --c-* values above if the ramp changes. */
.class-badge{
  display:inline-block; font-family:var(--mono); font-size:11.5px; font-weight:700;
  color:var(--accent); background:var(--accent-soft); border-radius:5px; padding:3px 7px;
  border:1px solid transparent;
}
.class-badge[data-cls="A"]{color:#6b8fc7; background:rgba(107,143,199,.15); border-color:rgba(107,143,199,.34);}
.class-badge[data-cls="B"]{color:#5f9ccb; background:rgba(95,156,203,.15); border-color:rgba(95,156,203,.34);}
.class-badge[data-cls="C"]{color:#52a9c9; background:rgba(82,169,201,.15); border-color:rgba(82,169,201,.34);}
.class-badge[data-cls="D"]{color:#46b5b4; background:rgba(70,181,180,.15); border-color:rgba(70,181,180,.34);}
.class-badge[data-cls="E"]{color:#4cc298; background:rgba(76,194,152,.15); border-color:rgba(76,194,152,.34);}
.class-badge[data-cls="F"]{color:#66cb7d; background:rgba(102,203,125,.15); border-color:rgba(102,203,125,.34);}
.class-badge[data-cls="G"]{color:#8ed268; background:rgba(142,210,104,.15); border-color:rgba(142,210,104,.34);}
.class-badge[data-cls="H"]{color:#b5d757; background:rgba(181,215,87,.15); border-color:rgba(181,215,87,.34);}
.class-badge[data-cls="I"]{color:#d6d24e; background:rgba(214,210,78,.15); border-color:rgba(214,210,78,.34);}
.class-badge[data-cls="J"]{color:#efc247; background:rgba(239,194,71,.15); border-color:rgba(239,194,71,.34);}
.class-badge[data-cls="K"]{color:#f9a83e; background:rgba(249,168,62,.15); border-color:rgba(249,168,62,.34);}
.class-badge[data-cls="L"]{color:#fd8c39; background:rgba(253,140,57,.15); border-color:rgba(253,140,57,.34);}
.class-badge[data-cls="M"]{color:#fb6f38; background:rgba(251,111,56,.15); border-color:rgba(251,111,56,.34);}
.class-badge[data-cls="N"]{color:#f4523c; background:rgba(244,82,60,.15); border-color:rgba(244,82,60,.34);}
.class-badge[data-cls="O"]{color:#e83a52; background:rgba(232,58,82,.15); border-color:rgba(232,58,82,.34);}

/* Row rail: the leftmost cell carries the class colour, so scrolling the table
   shows the class distribution as a continuous gradient down the edge. */
/* Written against the --c-* tokens rather than repeating their hex, so a theme
   that re-points the ramp (see the sunlight block at the end of this file) moves
   the rail with it. */
td.compare-cell{border-left:3px solid transparent;}
td.compare-cell[data-cls="A"]{border-left-color:var(--c-A);}
td.compare-cell[data-cls="B"]{border-left-color:var(--c-B);}
td.compare-cell[data-cls="C"]{border-left-color:var(--c-C);}
td.compare-cell[data-cls="D"]{border-left-color:var(--c-D);}
td.compare-cell[data-cls="E"]{border-left-color:var(--c-E);}
td.compare-cell[data-cls="F"]{border-left-color:var(--c-F);}
td.compare-cell[data-cls="G"]{border-left-color:var(--c-G);}
td.compare-cell[data-cls="H"]{border-left-color:var(--c-H);}
td.compare-cell[data-cls="I"]{border-left-color:var(--c-I);}
td.compare-cell[data-cls="J"]{border-left-color:var(--c-J);}
td.compare-cell[data-cls="K"]{border-left-color:var(--c-K);}
td.compare-cell[data-cls="L"]{border-left-color:var(--c-L);}
td.compare-cell[data-cls="M"]{border-left-color:var(--c-M);}
td.compare-cell[data-cls="N"]{border-left-color:var(--c-N);}
td.compare-cell[data-cls="O"]{border-left-color:var(--c-O);}
.it-pending{color:var(--text-faint); font-style:italic; font-size:13px;}
.it-na{color:var(--text-faint);}
.delays{color:var(--text-dim);}
.empty-state{padding:50px 20px; text-align:center; color:var(--text-dim);}
.empty-state .big{font-family:var(--mono); font-size:13.5px; color:var(--text-faint); margin-top:7px;}

/* ---------- pinned (frozen) columns ----------
   Driven by a class, not by nth-child: which columns are frozen is a user setting
   now, so position cannot be baked into the selector. The `left` offsets are set
   in JS (applyPins in table.js) from the measured header widths.

   Do NOT add `position:relative` to any cell that can be pinned — it has the same
   specificity as `td.pin` and, declared later, would silently cancel the sticky
   positioning these rules depend on. */
.table-scroll table th.pin, .table-scroll table td.pin{ position:sticky; }
.table-scroll table th.pin{ z-index:3; background:var(--panel-2); }
.table-scroll table td.pin{ z-index:1; background:var(--panel); }
tbody tr:hover td.pin{ background:var(--panel-2); }
.table-scroll table th.pin-last, .table-scroll table td.pin-last{
  box-shadow:6px 0 10px -6px rgba(0,0,0,.55);
}
/* keep the frozen region bounded no matter what gets pinned */
.table-scroll table th.pin:not(.compare-th), .table-scroll table td.pin:not(.compare-cell){
  max-width:210px; overflow:hidden; text-overflow:ellipsis;
}
.table-scroll table th.compare-th, .table-scroll table td.compare-cell{
  width:40px; min-width:40px; max-width:40px; box-sizing:border-box;
}

/* ---------- table scrollbar ----------
   One styled native scrollbar, replacing the pair of custom range sliders that
   used to sit above and below the table alongside it. */
.table-scroll::-webkit-scrollbar{width:11px; height:11px;}
.table-scroll::-webkit-scrollbar-track{background:var(--panel-2);}
.table-scroll::-webkit-scrollbar-thumb{
  background:#38434d; border-radius:6px; border:2px solid var(--panel-2);
}
.table-scroll::-webkit-scrollbar-thumb:hover{background:#4a5761;}
.table-scroll::-webkit-scrollbar-corner{background:var(--panel-2);}
.table-scroll{scrollbar-color:#38434d var(--panel-2); scrollbar-width:thin;}

/* ---------- footer / pagination ---------- */
.table-footer{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 16px; border-top:1px solid var(--border); background:var(--panel-2);
  flex-wrap:wrap;
}
.page-ctl{display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:13px; color:var(--text-dim);}
.page-ctl button{
  background:var(--panel); border:1px solid var(--border); color:var(--text);
  border-radius:6px; width:29px; height:29px; cursor:pointer; font-family:var(--sans); font-size:14px;
}
.page-ctl button:disabled{opacity:.35; cursor:default;}
.page-ctl button:not(:disabled):hover{border-color:var(--accent2);}
.page-size select{
  background:var(--panel); border:1px solid var(--border); color:var(--text);
  border-radius:6px; padding:6px 9px; font-size:13px; font-family:var(--mono);
}
.it-progress{display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:12.5px; color:var(--text-dim);}
.it-bar{width:120px; height:5px; border-radius:3px; background:var(--border); overflow:hidden;}
.it-bar-fill{height:100%; background:var(--accent2); width:0%; transition:width .25s;}

/* ---------- clickable designation ---------- */
/* the <td> is the click target; the <button> inside carries keyboard focus */
.designation.clickable{cursor:pointer; padding:0;}
.desig-btn{
  background:none; border:none; padding:11px 14px; margin:0; width:100%;
  font:inherit; color:inherit; text-align:left; cursor:pointer;
  text-underline-offset:2px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.desig-btn:hover{color:var(--accent2); text-decoration:underline;}

/* ---------- motor detail modal ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(4,6,8,.74); backdrop-filter:blur(3px);
  display:flex; align-items:flex-start; justify-content:center; z-index:100;
  padding:5vh 18px 5vh; overflow-y:auto;
}
.modal-overlay[hidden]{display:none;}
.modal-card{
  background:var(--panel); border:1px solid var(--border); border-radius:16px;
  max-width:780px; width:100%; position:relative; box-shadow:0 30px 80px rgba(0,0,0,.6);
  animation:modal-in .16s ease-out;
}
@keyframes modal-in{from{opacity:0; transform:translateY(10px) scale(.98);} to{opacity:1; transform:none;}}
.modal-close{
  position:absolute; top:16px; right:16px; background:var(--panel-2); border:1px solid var(--border);
  color:var(--text-dim); width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:15px;
  display:flex; align-items:center; justify-content:center; z-index:3; line-height:1;
}
.modal-close:hover{color:var(--text); border-color:var(--accent2);}
.modal-header{padding:28px 60px 18px 28px; border-bottom:1px solid var(--border);}
.modal-eyebrow{font-family:var(--mono); color:var(--accent); font-size:12px; letter-spacing:.12em; text-transform:uppercase; margin:0 0 8px;}
.modal-title{font-size:27px; font-weight:800; font-family:var(--mono); margin:0; display:flex; align-items:center; gap:10px; color:var(--text); flex-wrap:wrap;}
.modal-sub{color:var(--text-dim); font-size:14px; margin:8px 0 0;}
.modal-link{font-size:12.5px; color:var(--accent2); margin-top:12px; display:inline-block; text-decoration:none; border-bottom:1px solid transparent;}
.modal-link:hover{border-bottom-color:var(--accent2);}
.modal-chart-wrap{padding:22px 28px 4px;}
.chart-loading, .chart-empty{
  display:flex; align-items:center; justify-content:center; gap:10px; height:200px;
  color:var(--text-faint); font-size:13.5px; border:1px dashed var(--border); border-radius:10px;
}
.chart-card svg{width:100%; height:auto; display:block;}
.chart-legend{display:flex; flex-wrap:wrap; gap:14px 20px; padding:10px 4px 0; font-size:12px; color:var(--text-dim); font-family:var(--mono);}
.chart-legend span{display:inline-flex; align-items:center; gap:6px;}
.chart-legend .sw{width:14px; height:3px; border-radius:2px; display:inline-block;}
.chart-legend .sw.dash{background:repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px);}
.chart-source{font-family:var(--mono); font-size:11px; color:var(--text-faint); padding:6px 4px 0; text-align:right;}
.modal-stats-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:16px 18px;
  padding:22px 28px 6px;
}
.stat-item{display:flex; flex-direction:column; gap:4px;}
.stat-label{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);}
.stat-value{font-family:var(--mono); font-size:16.5px; font-weight:600; color:var(--text);}
.modal-footnote{font-size:12px; color:var(--text-faint); padding:14px 28px 26px; margin:0; line-height:1.6;}

/* ---------- compare selection ---------- */
thead th.compare-th{padding-left:14px; padding-right:6px;}
td.compare-cell{padding:11px 6px 11px 14px;}
.compare-checkbox{width:16px; height:16px; accent-color:var(--accent2); cursor:pointer;}

/* Selections live inline in the action strip. They used to sit in a fixed bar
   pinned to the bottom of the viewport, which covered the rows you were reading
   at exactly the moment you were choosing between them. */
.compare-bar{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding-left:10px; border-left:1px solid var(--border);
}
.compare-bar[hidden]{display:none;}
.compare-bar-label{font-family:var(--mono); font-size:11.5px; color:var(--text-faint); white-space:nowrap; transition:color .15s;}
.compare-bar-label.warn{color:var(--err);}
.compare-chips{display:flex; flex-wrap:wrap; gap:6px;}
.compare-chip{
  display:flex; align-items:center; gap:5px; background:var(--panel); border:1px solid var(--border);
  border-radius:6px; padding:3px 5px 3px 9px; font-size:11.5px; font-family:var(--mono); color:var(--text);
}
.compare-chip button{
  background:none; border:none; color:var(--text-faint); cursor:pointer; font-size:11px; width:16px; height:16px;
  border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0;
}
.compare-chip button:hover{color:#ffc6c6; background:var(--err-soft);}
.compare-bar-clear{
  background:none; border:1px solid var(--border); color:var(--text-dim); border-radius:7px; padding:5px 10px;
  font-size:12px; cursor:pointer; font-family:var(--sans); white-space:nowrap;
}
.compare-bar-clear:hover{border-color:var(--err); color:#ffc6c6;}
/* teal, not orange: orange is reserved for data (class, thrust, sort state) */
.compare-bar-btn{
  background:var(--accent2); color:#04211d; border:1px solid var(--accent2); border-radius:7px; padding:6px 14px;
  font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap; font-family:var(--sans);
}
.compare-bar-btn:disabled{opacity:.45; cursor:default;}
.compare-bar-btn:not(:disabled):hover{filter:brightness(1.09);}

/* ---------- compare modal ---------- */
.compare-card{max-width:1100px;}
.compare-table-wrap{overflow-x:auto; padding:0 28px 8px;}
table.compare-table{width:100%; border-collapse:collapse; margin-top:4px;}
.compare-table th, .compare-table td{padding:10px 18px; border-bottom:1px solid var(--border-soft); font-size:13.5px; white-space:nowrap;}
.compare-row-label{
  font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint);
  text-align:left; position:sticky; left:0; background:var(--panel); z-index:1;
}
.compare-col-head{text-align:center; position:relative; padding-top:20px !important; vertical-align:top;}
.compare-remove{
  position:absolute; top:6px; right:10px; background:var(--panel); border:1px solid var(--border); color:var(--text-faint);
  width:22px; height:22px; border-radius:50%; cursor:pointer; font-size:11px; display:flex; align-items:center; justify-content:center;
}
.compare-remove:hover{color:#ffc6c6; border-color:var(--err);}
.compare-desig{font-family:var(--mono); font-weight:700; font-size:14.5px; color:var(--text); margin-top:6px;}
.compare-mfr{font-size:11.5px; color:var(--text-dim); margin-top:2px;}
.compare-table td{text-align:center; font-family:var(--mono); color:var(--text);}
.compare-table td.compare-hi{color:var(--accent2); font-weight:700; background:var(--accent2-soft); border-radius:6px;}

/* ---------- combine motors tool ---------- */
.combine-card{max-width:880px;}
.stepper{display:inline-flex; align-items:center; gap:0; border:1px solid var(--border); border-radius:8px; overflow:hidden;}
.stepper button{
  background:var(--panel); border:none; color:var(--text); width:30px; height:30px; cursor:pointer;
  font-size:15px; font-family:var(--sans); display:flex; align-items:center; justify-content:center;
}
.stepper button:hover{background:var(--panel-2); color:var(--accent2);}
.stepper button:disabled{opacity:.35; cursor:default;}
.stepper span{
  min-width:34px; text-align:center; font-family:var(--mono); font-size:13px; color:var(--text);
  border-left:1px solid var(--border); border-right:1px solid var(--border); padding:0 4px; line-height:30px;
}
.combine-top-row{display:flex; align-items:center; gap:12px; padding:0 28px 20px; flex-wrap:wrap;}
.combine-top-row label{font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);}
.combine-reset-btn{
  margin-left:auto; background:none; border:1px solid var(--border); color:var(--text-dim); border-radius:7px;
  padding:8px 13px; font-size:12.5px; cursor:pointer; font-family:var(--sans);
}
.combine-reset-btn:hover{border-color:var(--err); color:#ffc6c6;}
.combine-body{padding:0 28px 8px;}
.stage-card{
  border:1px solid var(--border); border-radius:12px; padding:16px 18px; margin-bottom:14px; background:var(--panel-2);
}
.stage-card-head{display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap;}
.stage-card-title{font-family:var(--mono); font-weight:700; font-size:14px; color:var(--text);}
.stage-card-desig{
  font-family:var(--mono); font-weight:700; font-size:13px; color:var(--accent); background:var(--accent-soft);
  border-radius:6px; padding:3px 9px;
}
.stage-card-stat{font-family:var(--mono); font-size:12px; color:var(--text-dim);}
.stage-entries{display:flex; flex-direction:column; gap:7px; margin-bottom:12px;}
.stage-entry-empty{color:var(--text-faint); font-size:13px; padding:6px 2px;}
.stage-entry-row{
  display:flex; align-items:center; gap:10px; background:var(--panel); border:1px solid var(--border);
  border-radius:8px; padding:7px 10px;
}
.stage-entry-desig{font-family:var(--mono); font-weight:600; font-size:13.5px; color:var(--text); flex:1;}
.stage-entry-mfr{font-size:11.5px; color:var(--text-faint);}
.stage-entry-remove{
  background:none; border:none; color:var(--text-faint); cursor:pointer; width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:12px;
}
.stage-entry-remove:hover{color:#ffc6c6; background:var(--err-soft);}
.combine-search-wrap{position:relative;}
.combine-search-input{
  width:100%; background:var(--panel); border:1px solid var(--border); border-radius:8px; color:var(--text);
  font-family:var(--sans); font-size:13.5px; padding:9px 12px;
}
.combine-search-input:focus{border-color:var(--accent2);}
.combine-suggestions{
  position:absolute; top:calc(100% + 5px); left:0; right:0; z-index:15; max-height:240px; overflow-y:auto;
  background:var(--panel-2); border:1px solid var(--border); border-radius:9px; box-shadow:0 14px 32px rgba(0,0,0,.5);
}
.combine-suggestions:empty{display:none;}
.combine-suggestion{
  display:flex; align-items:center; gap:9px; padding:9px 12px; cursor:pointer; font-size:13.5px;
}
.combine-suggestion:hover{background:var(--panel);}
.combine-suggest-desig{font-family:var(--mono); font-weight:600; color:var(--text);}
.combine-suggest-mfr{color:var(--text-faint); font-size:12px; margin-left:auto;}
.combine-suggest-empty{padding:10px 12px; color:var(--text-faint); font-size:12.5px;}
.combine-approx-note{font-size:11.5px; color:var(--warn); margin-top:8px;}
.coast-row{display:flex; align-items:center; justify-content:center; gap:10px; padding:2px 0 14px; font-family:var(--mono); font-size:12px; color:var(--text-faint);}
.whole-rocket-section{border-top:1px solid var(--border); margin-top:6px;}
.whole-rocket-title{font-family:var(--mono); font-size:13px; color:var(--accent); text-transform:uppercase; letter-spacing:.08em; padding:20px 28px 4px;}


/* ---------- guide / changelog modals ---------- */
.doc-card{max-width:940px;}
.doc-title{font-family:var(--sans); font-size:23px;}
.doc-body{padding:18px 28px 26px;}

/* ---------- user guide ---------- */
.guide-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:12px;
}
.guide-card{
  background:var(--panel-2); border:1px solid var(--border);
  border-radius:9px; padding:14px 16px;
}
.guide-card-head{
  display:flex; align-items:center; gap:9px;
  font-weight:700; font-size:13.5px; color:var(--text); margin-bottom:9px;
}
.guide-card-icon{
  width:30px; height:30px; border-radius:7px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:15px;
  background:var(--accent-soft);
}
.guide-card-icon.teal{background:var(--accent2-soft);}
.guide-card-icon.warn{background:#3a2a0d;}
.guide-card ul{
  margin:0; padding:0 0 0 18px; color:var(--text-dim); font-size:13px; line-height:1.7;
}
.guide-card ul li{margin-bottom:2px;}
.guide-card p{margin:0; color:var(--text-dim); font-size:13px; line-height:1.65;}
.guide-tip{
  display:flex; align-items:flex-start; gap:9px;
  background:#3a2a0d40; border:1px solid #5c4419;
  border-radius:8px; padding:10px 13px; margin-top:12px;
  font-size:13px; color:#ffd9a0; line-height:1.6;
}
.guide-tip .tip-icon{flex-shrink:0; font-size:15px; line-height:1.3;}
.guide-kbd{
  display:inline-block; font-family:var(--mono); font-size:11.5px;
  background:var(--panel); border:1px solid var(--border);
  border-radius:4px; padding:1px 6px; color:var(--text-dim);
  vertical-align:baseline; line-height:1.5;
}

/* ---------- changelog ---------- */
.changelog-list{display:flex; flex-direction:column; gap:0;}
.changelog-entry{
  display:grid; grid-template-columns:auto 1fr;
  gap:0 18px; padding:14px 0;
  border-bottom:1px solid var(--border-soft);
}
.changelog-entry:last-child{border-bottom:none;}
.changelog-ver{
  font-family:var(--mono); font-size:12px; color:var(--accent2);
  font-weight:700; white-space:nowrap; padding-top:2px;
  letter-spacing:.04em;
}
.changelog-date{
  font-family:var(--mono); font-size:11px; color:var(--text-faint);
  margin-top:3px; white-space:nowrap;
}
.changelog-tag{
  display:inline-block; font-family:var(--mono); font-size:10.5px; font-weight:700;
  border-radius:4px; padding:1px 6px; margin-right:5px; vertical-align:middle;
  text-transform:uppercase; letter-spacing:.05em; line-height:1.6;
}
.tag-new{background:#1a3a1a; color:#6fe06f; border:1px solid #2a5c2a;}
.tag-fix{background:#1a1a3a; color:#7a9ef5; border:1px solid #2a2a5c;}
.tag-change{background:#3a2a0d; color:#ffc25c; border:1px solid #5c4419;}
.changelog-items{
  margin:0; padding:0; list-style:none;
  color:var(--text-dim); font-size:13px; line-height:1.7;
}
.changelog-items li{margin-bottom:2px;}
.changelog-version-left{display:flex; flex-direction:column; align-items:flex-start;}

/* ---------- site nav ---------- */
nav.site-nav{
  display:flex; flex-wrap:wrap; align-items:center; gap:2px; margin:0; min-width:0;
}
nav.site-nav a{
  font-family:var(--sans); font-size:13px; font-weight:500; color:var(--text-faint);
  text-decoration:none; padding:5px 10px; border-radius:6px; border:1px solid transparent;
  transition:color .15s, border-color .15s, background .15s;
}
nav.site-nav a:hover{color:var(--text); border-color:var(--border); background:var(--panel);}

/* Below this width the fixed-height shell has no room left for the table, so the
   page reverts to normal document scrolling and the table gets a bounded height. */
@media (max-width:900px){
  body{height:auto; overflow:auto;}
  .wrap{height:auto; display:block; padding-bottom:40px;}
  .table-shell{display:block;}
  .table-panel{display:block;}
  .table-scroll{max-height:60vh; min-height:220px;}
  .hero{flex-direction:column; align-items:flex-start; gap:10px;}
  .strip-tools{margin-left:0; width:100%;}
  .compare-bar{border-left:none; padding-left:0; width:100%;}
  .ai-search{max-width:none;}
}
@media (max-width:760px){
  nav.site-nav a{padding:5px 8px; font-size:12.5px;}
  /* the spectrum is the widest fixed element on the page; let it shrink rather
     than force the whole layout into a horizontal scroll */
  .spectrum{width:100%;}
  .spectrum-bars, .spectrum-axis{width:100%;}
  .sbar, .spectrum-axis span{width:auto; flex:1 1 0;}
  .spectrum-head{flex-wrap:wrap; gap:2px 12px;}
  .spectrum-readout{white-space:normal;}
}

/* Portrait phone. Landscape (roughly 640px+) is already comfortable, so this is
   scoped tight enough not to touch it.

   At 390px the pinned columns were taking 237px — 63% of the scroll area —
   leaving room for exactly one data column at a time. Three things reclaim it:
   tighter cell padding, a hard cap on pinned column width, and letting the long
   header labels wrap instead of forcing their column to the width of
   "TOTAL IMPULSE (NS)". */
@media (max-width:600px){
  table{font-size:13px;}
  thead th{
    font-size:9.5px; letter-spacing:.04em; padding:8px 8px;
    white-space:normal; vertical-align:bottom;
    /* single long words like "Manufacturer" cannot wrap at a space and were
       setting their column's width on their own; hyphenate them instead */
    hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word;
  }
  .th-sort{white-space:normal; text-align:left;}
  th.num .th-sort{text-align:right;}
  tbody td{padding:8px; }
  .desig-btn{padding:8px;}

  /* the compare rail: still tappable, but not 40px of a 390px screen */
  .table-scroll table th.compare-th,
  .table-scroll table td.compare-cell{
    width:30px; min-width:30px; max-width:30px; padding-left:5px; padding-right:0;
  }
  /* a pinned data column may not exceed this, so the frozen region stays bounded */
  .table-scroll table th.pin:not(.compare-th),
  .table-scroll table td.pin:not(.compare-cell){max-width:104px;}
  /* keep scrolling columns readable rather than letting them collapse to nothing */
  .table-scroll table th:not(.pin){min-width:58px;}
  .secondary-cell{max-width:110px;}
  /* The class column holds a one- or two-character badge. Hinted by sort key
     rather than position, since which column sits where is a user setting. */
  .table-scroll table th[data-sort="impulseClass"]{width:46px; min-width:46px;}
  /* The sparky badge sets the class column's floor, since it cannot wrap. Keep
     it — it is safety information — but make it cost less width. */
  .sparky-badge{margin-left:2px; font-size:9px; padding:1px 3px;}
}

@media (max-width:560px){
  .wrap{padding:0 12px 32px;}
  .topbar{gap:8px;}
  .topbar-tools{margin-left:0;}
  h1{font-size:22px;}
  .hero-sub{font-size:11.5px;}
  /* dropdown panels are fixed-width and would overflow a narrow screen */
  .msel-panel, .col-picker-panel{
    max-width:calc(100vw - 28px); min-width:0; width:auto;
  }
  .msel-btn{min-width:0; width:100%;}
  .filters .field{flex:1 1 140px; min-width:0;}
  .table-strip{gap:8px; padding:8px;}
  .result-count{width:100%;}
  .modal-overlay{padding:3vh 10px;}
  .modal-header{padding:20px 48px 14px 18px;}
  .modal-chart-wrap, .modal-stats-grid, .doc-body,
  .compare-table-wrap, .combine-body, .combine-top-row{padding-left:16px; padding-right:16px;}
  .modal-footnote{padding:12px 16px 20px;}
  .modal-title{font-size:21px;}
}

/* ================================================================
   Quality floor: keyboard focus and reduced motion
   ================================================================ */

/* One visible focus ring for everything reachable by keyboard. :focus-visible
   rather than :focus, so a mouse click does not leave a ring behind. This block
   sits last so it wins against the component rules above. */
:focus-visible{
  outline:2px solid var(--accent2);
  outline-offset:2px;
  border-radius:4px;
}
/* Inside the table the ring would be clipped: pinned cells and the scroll
   container both use overflow:hidden, so draw it inside the element instead. */
.table-scroll :focus-visible,
.col-picker-panel :focus-visible,
.msel-panel :focus-visible{
  outline-offset:-2px;
}
/* Text inputs already signal focus with a border colour; keep the ring tight
   so it does not sit outside the joined input/button pair. */
.ai-row input[type=text]:focus-visible{outline-offset:-1px;}

/* Spectrum bars are the full height of the plot but only the coloured part is
   visible, so ring the bar itself rather than its empty upper half. */
.sbar:focus-visible{outline-offset:1px; border-radius:3px;}

/* Respect a reduced-motion preference. Nothing here is load-bearing: the spinner
   still indicates activity through its presence, and the modal still appears. */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .refresh-icon.spinning .ricon,
  .spin{animation:none !important;}
  .sbar:hover i{transform:none;}
}

/* ================================================================
   Detail pane — the quick look beside the table
   ================================================================ */
.detail-pane{
  flex:0 0 400px; display:flex; flex-direction:column; min-height:0;
  border:1px solid var(--border); border-left:none; border-radius:0 0 12px 0;
  background:var(--panel-2); overflow:hidden;
}
/* 1900px was too high a bar: a 1920 monitor reports about 1836px of viewport
   once browser chrome is taken off, so the pane and even its toggle were hidden
   on the single most common desktop size. The threshold is 1700px, and between
   there and 1900px the pane gives back 20px. The table may scroll a little with
   the pane open at those widths — the pinned columns keep identity visible, and
   the toggle reclaims the width in one click. */
@media (min-width:1701px) and (max-width:1900px){
  .detail-pane{flex-basis:380px;}
}
@media (max-width:1700px){
  .detail-pane{display:none;}
  .table-panel{border-radius:0 0 12px 12px;}
  .pane-toggle{display:none;}
}
body.pane-off .detail-pane{display:none;}

.pane-body{flex:1; overflow-y:auto; min-height:0;}
.pane-empty{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:30px; text-align:center; color:var(--text-faint); height:100%;
}
.pane-empty p{margin:0; font-size:13px; line-height:1.6; max-width:230px;}
.pane-empty-keys{font-size:11.5px !important;}
.pane-empty kbd, .pane-foot kbd{
  font-family:var(--mono); font-size:10.5px; background:var(--panel);
  border:1px solid var(--border); border-radius:4px; padding:1px 5px; color:var(--text-dim);
}

.pane-head{
  padding:16px 18px 14px; border-bottom:1px solid var(--border);
  border-left:3px solid var(--pane-c, var(--accent));
}
.pane-desig{
  font-family:var(--mono); font-size:23px; font-weight:700; letter-spacing:-.02em;
  margin:7px 0 3px; color:var(--text); word-break:break-word;
}
.pane-sub{font-size:12.5px; color:var(--text-dim); margin:0;}
.pane-sub b{color:var(--text); font-weight:600;}

/* certification and hazard first — what a range safety officer reaches for */
.pane-tags{display:flex; flex-wrap:wrap; gap:7px; padding:11px 18px; border-bottom:1px solid var(--border-soft);}
.pane-tag{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  border-radius:5px; padding:3px 8px; border:1px solid var(--border);
  color:var(--text-dim); background:var(--panel);
}
.pane-tag.cert{color:#c8f5ee; border-color:#2a6b62; background:var(--accent2-soft);}
.pane-tag.uncert{color:#ffc6c6; border-color:#6b2c2c; background:var(--err-soft); font-weight:700;}
.pane-tag.sparky{color:#0a0d10; background:var(--warn); border-color:var(--warn); font-weight:700;}

.pane-chart{padding:14px 14px 6px;}
.pane-chart svg{width:100%; height:auto; display:block;}
.pane-chart-note{font-family:var(--mono); font-size:10px; color:var(--text-faint); text-align:right; padding:2px 4px 0;}
.pane-chart-empty{
  display:flex; align-items:center; justify-content:center; height:120px;
  border:1px dashed var(--border); border-radius:9px;
  color:var(--text-faint); font-size:12.5px;
}

/* headline numbers get hierarchy instead of a flat grid of equals */
.pane-headline{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border-soft);
  border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft);
}
.pane-headline .hl{background:var(--panel-2); padding:12px 14px; min-width:0;}
.hl-label{font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint);}
.hl-value{font-family:var(--mono); font-size:19px; font-weight:700; color:var(--text); margin-top:3px; line-height:1.1;}
.hl-value small{font-size:11px; font-weight:500; color:var(--text-faint); margin-left:3px;}

.pane-specs{padding:14px 18px 4px;}
.pane-specs dl{margin:0;}
.pane-group{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-faint); margin:14px 0 7px; padding-bottom:5px; border-bottom:1px solid var(--border-soft);
}
.pane-group:first-child{margin-top:0;}
.pane-spec{display:flex; justify-content:space-between; gap:14px; padding:4px 0; font-size:12.5px;}
.pane-spec dt{color:var(--text-faint); margin:0;}
.pane-spec dd{margin:0; font-family:var(--mono); color:var(--text); text-align:right; word-break:break-word;}
.pane-spec dd.na{color:var(--text-faint);}

/* escalation: pane is the glance, modal is the full record */
.pane-actions{display:flex; gap:7px; padding:14px 18px 4px;}
.pane-act{
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  background:var(--panel); border:1px solid var(--border); color:var(--text-dim);
  border-radius:7px; padding:8px 10px; font-size:12.5px; cursor:pointer;
  font-family:var(--sans); text-decoration:none; white-space:nowrap;
}
.pane-act:hover{border-color:var(--accent2); color:var(--text);}
.pane-act.primary{background:var(--accent2-soft); border-color:#2a6b62; color:#c8f5ee; font-weight:600;}
.pane-foot{font-size:11px; color:var(--text-faint); line-height:1.55; padding:12px 18px 18px; margin:0;}

.pane-toggle.on{border-color:#2a6b62; background:var(--accent2-soft); color:#c8f5ee;}

/* selected row — ties to the pane's coloured header edge */
tbody tr.row-sel td{background:var(--panel-3, #1b232a);}
tbody tr.row-sel td.pin{background:var(--panel-3, #1b232a);}
tbody tr.row-sel td.compare-cell{box-shadow:inset 3px 0 0 currentColor;}

/* ================================================================
   Sunlight mode — high contrast for a phone on the flight line
   ================================================================

   This is a light theme on purpose. Under direct sun a phone screen is a mirror:
   reflected daylight adds a fixed amount of light to every pixel, so the darkest
   black the panel can show is roughly as bright as the reflection. A dark UI has
   its whole range squeezed into that reflection and disappears; a white one still
   has the backlight on top of it and keeps most of its separation. Inverting to
   near-white with near-black text is what buys legibility outdoors — raising the
   contrast of the dark theme alone would not.

   Everything below is either a re-pointed token or an override of a rule that had
   its colour written out in hex. Nothing here changes layout, so switching modes
   cannot reflow the table. Scoped to :root[data-contrast="high"], which beats the
   plain :root token block and every single-class component rule.

   Contrast ratios against the white background are 6:1 or better throughout,
   including the impulse ramp — the dark theme's ramp is far too pale to survive
   on white and is replaced rather than reused. */
:root[data-contrast="high"]{
  --bg:#ffffff;
  --panel:#ffffff;
  --panel-2:#eaeef1;
  --panel-3:#ffdf9e;        /* selected row — has to read at arm's length in sun */
  --border:#3c454e;
  --border-soft:#98a2ab;
  --text:#000000;
  --text-dim:#131a20;
  --text-faint:#3a434b;
  --accent:#a83400;
  --accent-soft:#ffe3d5;
  --accent2:#00564c;
  --accent2-soft:#d2e9e5;
  --warn:#6b4400;
  --warn-soft:#ffeccc;
  --err:#a10014;
  --err-soft:#ffe0e3;

  /* Same cold-to-hot order, re-darkened for a white background. */
  --c-A:#1a4f9e;   --c-B:#15568f;   --c-C:#0e5c80;   --c-D:#0a6070;   --c-E:#0a6355;
  --c-F:#146538;   --c-G:#2d6318;   --c-H:#4b5c0a;   --c-I:#63550a;   --c-J:#74490a;
  --c-K:#7f3d09;   --c-L:#8a3208;   --c-M:#93250a;   --c-N:#9c1414;   --c-O:#a3103a;

  --chart-bg:#ffffff;
  --chart-grid:#b6bfc7;
  --chart-axis:#2a323a;
  --chart-band:#c9e6e1;
  --chart-ring:#ffffff;
  --chart-tip-bg:#ffffff;
  --chart-tip-border:#3c454e;

  /* Five curves that stay apart from each other *and* off white. */
  --cmp-1:#a83400; --cmp-2:#00564c; --cmp-3:#6b2ea8; --cmp-4:#0b4f9c; --cmp-5:#6b4400;
}

/* --- rules whose colours were written out in hex --------------------------- */

:root[data-contrast="high"] .banner.err{border-color:var(--err); color:#5c000c;}
:root[data-contrast="high"] .ai-row button{background:var(--accent2); color:#fff; border-color:var(--accent2);}
:root[data-contrast="high"] .ai-row button:hover{background:#003a33;}
:root[data-contrast="high"] .ai-result{border-color:var(--accent2); color:#003a33;}
:root[data-contrast="high"] .ai-result button{border-color:var(--accent2); color:#003a33;}
:root[data-contrast="high"] .ai-result button:hover{background:#bcdcd6;}
:root[data-contrast="high"] .ai-fallback{background:var(--warn-soft); border-color:var(--warn); color:#4a2f00;}
:root[data-contrast="high"] .ai-fallback button{border-color:var(--warn); color:#4a2f00;}
:root[data-contrast="high"] .ai-fallback button:hover{background:#ffdca8;}

:root[data-contrast="high"] .clear-btn:hover,
:root[data-contrast="high"] .compare-bar-clear:hover,
:root[data-contrast="high"] .combine-reset-btn:hover,
:root[data-contrast="high"] .compare-remove:hover,
:root[data-contrast="high"] .compare-chip button:hover,
:root[data-contrast="high"] .stage-entry-remove:hover{color:var(--err); border-color:var(--err);}

:root[data-contrast="high"] .col-pin.on,
:root[data-contrast="high"] .toggle-switch[aria-pressed="true"],
:root[data-contrast="high"] .pane-act.primary,
:root[data-contrast="high"] .pane-toggle.on,
:root[data-contrast="high"] .contrast-btn.on{border-color:var(--accent2); color:#003a33;}
/* The switch and the progress bar both read their "empty" half from --border,
   which is dark in either theme. On white that put a near-black knob on a
   near-black track and a dark-teal fill on a dark-grey bar — two controls whose
   whole job is to show a state at a glance. Empty goes light; the filled half
   keeps the accent, and the knob inverts on top of it.

   Written against :not([aria-pressed="true"]) rather than .toggle-track alone:
   the plain form ties on specificity with the rule that fills the track teal
   when the switch is on, and — declared later — silently won, leaving the switch
   looking identical in both states. */
:root[data-contrast="high"] .toggle-switch:not([aria-pressed="true"]) .toggle-track,
:root[data-contrast="high"] .it-bar{background:#c3cbd2;}
:root[data-contrast="high"] .toggle-switch[aria-pressed="true"] .toggle-thumb{background:#fff;}
:root[data-contrast="high"] .compare-bar-btn{color:#fff;}

:root[data-contrast="high"] .sparky-badge{background:var(--warn-soft); border-color:var(--warn); color:#4a2f00;}
:root[data-contrast="high"] .pane-tag.cert{color:#003a33; border-color:var(--accent2);}
:root[data-contrast="high"] .pane-tag.uncert{color:#5c000c; border-color:var(--err); background:var(--err-soft);}
:root[data-contrast="high"] .pane-tag.sparky{color:#fff; background:var(--warn); border-color:var(--warn);}

:root[data-contrast="high"] .guide-card-icon.warn{background:var(--warn-soft);}
:root[data-contrast="high"] .guide-tip{background:var(--warn-soft); border-color:var(--warn); color:#4a2f00;}
:root[data-contrast="high"] .tag-new{background:#dff0dc; color:#14561a; border-color:#14561a;}
:root[data-contrast="high"] .tag-fix{background:#dde5f7; color:#12386e; border-color:#12386e;}
:root[data-contrast="high"] .tag-change{background:var(--warn-soft); color:#4a2f00; border-color:var(--warn);}

:root[data-contrast="high"] .table-scroll::-webkit-scrollbar-thumb{background:#5c6873;}
:root[data-contrast="high"] .table-scroll::-webkit-scrollbar-thumb:hover{background:#3c454e;}
:root[data-contrast="high"] .table-scroll{scrollbar-color:#5c6873 var(--panel-2);}

/* Class badge: a solid block of the class colour rather than a tinted outline.
   A filled chip survives glare and a smeared screen far better than 11px type in
   a colour, and white on these values clears 6:1. */
:root[data-contrast="high"] .class-badge[data-cls]{
  background:var(--cb, var(--accent)); color:#fff;
  border-color:rgba(0,0,0,.45); font-weight:700;
}
:root[data-contrast="high"] .class-badge[data-cls="A"]{--cb:var(--c-A);}
:root[data-contrast="high"] .class-badge[data-cls="B"]{--cb:var(--c-B);}
:root[data-contrast="high"] .class-badge[data-cls="C"]{--cb:var(--c-C);}
:root[data-contrast="high"] .class-badge[data-cls="D"]{--cb:var(--c-D);}
:root[data-contrast="high"] .class-badge[data-cls="E"]{--cb:var(--c-E);}
:root[data-contrast="high"] .class-badge[data-cls="F"]{--cb:var(--c-F);}
:root[data-contrast="high"] .class-badge[data-cls="G"]{--cb:var(--c-G);}
:root[data-contrast="high"] .class-badge[data-cls="H"]{--cb:var(--c-H);}
:root[data-contrast="high"] .class-badge[data-cls="I"]{--cb:var(--c-I);}
:root[data-contrast="high"] .class-badge[data-cls="J"]{--cb:var(--c-J);}
:root[data-contrast="high"] .class-badge[data-cls="K"]{--cb:var(--c-K);}
:root[data-contrast="high"] .class-badge[data-cls="L"]{--cb:var(--c-L);}
:root[data-contrast="high"] .class-badge[data-cls="M"]{--cb:var(--c-M);}
:root[data-contrast="high"] .class-badge[data-cls="N"]{--cb:var(--c-N);}
:root[data-contrast="high"] .class-badge[data-cls="O"]{--cb:var(--c-O);}

/* --- legibility, beyond colour -------------------------------------------- */

/* Small mono type set in the faint colour is the first thing to go outdoors.
   Weight is added only outside the table: thead cells are white-space:nowrap, so
   bolder headings there would widen columns and could reintroduce the sideways
   scroll fixed in 1.7. */
:root[data-contrast="high"] .hero-sub,
:root[data-contrast="high"] .result-count,
:root[data-contrast="high"] .spectrum-head,
:root[data-contrast="high"] .stat-label,
:root[data-contrast="high"] .hl-label,
:root[data-contrast="high"] .pane-group,
:root[data-contrast="high"] .filters label,
:root[data-contrast="high"] .page-ctl,
:root[data-contrast="high"] .it-progress{font-weight:600;}

/* The class rail is the fastest read in the table; give it a little more edge. */
:root[data-contrast="high"] td.compare-cell{border-left-width:4px;}
/* Row separators carried the dark theme's near-invisible soft border. */
:root[data-contrast="high"] tbody td{border-bottom-color:#c3cbd2;}
:root[data-contrast="high"] tbody tr:hover{background:#dde4ea;}
:root[data-contrast="high"] tbody tr:hover td.pin{background:#dde4ea;}
/* Panel shadows tuned for a dark page are muddy smears on a white one. */
:root[data-contrast="high"] .col-picker-panel,
:root[data-contrast="high"] .msel-panel,
:root[data-contrast="high"] .combine-suggestions{box-shadow:0 10px 26px rgba(0,0,0,.22);}
:root[data-contrast="high"] .modal-card{box-shadow:0 24px 60px rgba(0,0,0,.35);}
:root[data-contrast="high"] .table-scroll table th.pin-last,
:root[data-contrast="high"] .table-scroll table td.pin-last{box-shadow:6px 0 8px -6px rgba(0,0,0,.4);}
/* A focus ring in the accent teal is hard to see against a white field. */
:root[data-contrast="high"] :focus-visible{outline-color:#000; outline-width:3px;}

/* --- the switch itself ----------------------------------------------------- */
.contrast-btn .sun{font-size:12px; line-height:1;}
.contrast-btn.on{border-color:#2a6b62; background:var(--accent2-soft); color:#c8f5ee; font-weight:600;}