/* White + blue theme, orange buttons. Light only. */
:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f5f6fa;
  --ink: #13213d;
  --ink-2: #3c4a66;
  --muted: #6a7690;
  --line: #d9dde8;
  --line-2: #eceef4;
  --blue: #1b2f5e;
  --blue-dark: #0f1e3d;
  --blue-soft: #eceff6;
  --blue-tint: #d3d9e8;
  --orange: #d35400;
  --orange-hover: #b94a00;
  --orange-ink: #ffffff;
  --orange-soft: #fff1e6;
  --select: #dfe4f0;
  --select-line: #1b2f5e;
  --warn: #a14600;
  --error: #b42318;
  --error-soft: #fdecea;
  --notice-soft: #f3f4f8;
  --c-green-bg: #d4efdf; --c-green-ink: #0d5a32;
  --c-yg-bg: #e8f3c6;    --c-yg-ink: #4b5d07;
  --c-amber-bg: #fde3b4; --c-amber-ink: #7a4300;
  --c-red-bg: #f9d3cf;   --c-red-ink: #8f1d12;
  --radius: 10px;
  --table-w: 1560px;
  --page-w: calc(var(--table-w) + 80px);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.45 var(--font);
  font-variant-numeric: tabular-nums;
}
a { color: var(--blue); }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.offscreen { position: fixed; left: -9999px; top: 0; }

/* ---------- top bar with browser-style tabs ---------- */
.top {
  background: var(--blue-dark);
  color: #fff;
  position: sticky; top: 0; z-index: 5;
}
.top-inner {
  max-width: var(--page-w); margin: 0 auto;
  padding: 8px 16px 0;
  display: flex; align-items: flex-end; gap: 18px;
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: .01em; padding-bottom: 11px; }
.logo { width: 24px; height: 24px; flex: none; }

.tabs { display: flex; align-items: flex-end; gap: 2px; align-self: flex-end; }
.tab {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 150px; padding: 9px 18px 10px;
  border-radius: 10px 10px 0 0;
  background: rgba(255, 255, 255, .12);
  color: #d5dbea; text-decoration: none;
  font-size: 14px; font-weight: 600;
  transition: background .12s;
}
.tab:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.tab.active { background: var(--bg); color: var(--blue-dark); }
/* curved "feet" so the active tab flows into the page, like a browser tab */
.tab.active::before, .tab.active::after {
  content: ""; position: absolute; bottom: 0; width: 10px; height: 10px; pointer-events: none;
}
.tab.active::before { left: -10px; background: radial-gradient(circle at 0 0, transparent 10px, var(--bg) 10.5px); }
.tab.active::after { right: -10px; background: radial-gradient(circle at 100% 0, transparent 10px, var(--bg) 10.5px); }
.tab-icon { width: 15px; height: 15px; flex: none; }
.tab:focus-visible { outline: 2px solid #ffd2b0; outline-offset: -3px; }

.authbar { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 14px; padding-bottom: 8px; }
.authbar .muted { color: #c3cbdd; }
.authbar .btn.ghost { border-color: rgba(255, 255, 255, .55); color: #fff; background: transparent; }
.authbar .btn.ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

main { padding: 12px 16px 32px; max-width: var(--page-w); margin: 0 auto; }

.sheet { padding: 0 4px 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }

/* A framed scan. The Pre Scan tab can hold several of these, stacked. */
.scan-frame {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(15, 30, 61, .08);
  overflow: hidden;
}
.scan-frame-head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px;
  padding: 8px 18px;
  background: var(--blue-soft);
  border-bottom: 1px solid var(--line);
  border-top: 4px solid var(--blue);
}
.scan-frame-head h1, .scan-frame-head h2 { font-size: 15px; margin: 0; }
.scan-frame-body { padding: 0 18px 14px; }
/* CSP frame: table sized to its columns (risk note ~390px), frame hugs the table. */
#scan-csp { --table-w: 1340px; max-width: calc(var(--table-w) + 40px); }
/* DIY table: same fitted columns, Expiry 40px wider for the weekly tag. */
#panel-diy { --table-w: 1340px; }
#scan-diy { max-width: calc(var(--table-w) + 40px); }
#panel-diy .table-wrap, #panel-diy .toolbar, #panel-diy .msgs { max-width: calc(var(--table-w) + 2px); }
.sheet-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; }
h1 { font-size: 26px; line-height: 1.2; margin: 0; letter-spacing: -.01em; color: var(--blue-dark); }
h2 { font-size: 22px; margin: 0 0 4px; color: var(--blue-dark); }
h3 { font-size: 17px; margin: 0 0 4px; color: var(--blue-dark); }
.stamp { margin: 0; color: var(--ink-2); font-size: 14px; }

.conditions {
  margin: 14px 0 12px;
  padding: 10px 12px;
  background: var(--blue-soft);
  border-left: 3px solid var(--blue);
  border-radius: 6px;
  font-size: 13.5px;
  color: var(--ink-2);
  user-select: text;
  cursor: help;
}

.status { margin: 6px 0; padding: 7px 12px; border-radius: 6px; background: var(--blue-soft); font-size: 14px; }
.status.error { background: var(--error-soft); color: var(--error); }

/* ---------- toolbar + buttons (orange) ---------- */
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 6px 0; font-size: 14px; }
.spacer { flex: 1; }
.legend { display: inline-flex; gap: 4px; }
.chip { padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }

.btn {
  font: inherit; font-size: 14px; font-weight: 700;
  padding: 7px 15px; border-radius: 7px;
  border: 1px solid var(--orange); background: var(--orange); color: var(--orange-ink);
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { background: var(--orange-hover); border-color: var(--orange-hover); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.ghost { background: var(--surface); color: var(--orange); }
.btn.ghost:hover:not(:disabled) { background: var(--orange-soft); color: var(--orange-hover); }
.btn.done { background: #1d7a46; border-color: #1d7a46; color: #fff; }
.btn:focus-visible, .seg-btn:focus-visible, input:focus-visible, tr.row:focus-visible, button.sort:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 2px;
}

.seg { display: inline-flex; border: 1px solid var(--orange); border-radius: 8px; overflow: hidden; }
.seg-btn {
  font: inherit; font-size: 13.5px; font-weight: 700; padding: 6px 12px;
  border: 0; background: var(--surface); color: var(--orange); cursor: pointer;
}
.seg-btn + .seg-btn { border-left: 1px solid var(--orange); }
.seg-btn:hover:not(.on) { background: var(--orange-soft); }
.seg-btn.on { background: var(--orange); color: var(--orange-ink); }

/* ---------- table ---------- */
.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
/* header stays visible while the rows scroll inside the frame */
table.scan thead th { position: sticky; top: 0; z-index: 1; }
/* Table fills the frame; the 16px of slack is room for a vertical scrollbar (10-row cap) so it
   never forces a sideways scroll. Narrow screens still scroll sideways past min-width. */
.table-frame { width: 100%; min-width: calc(var(--table-w) - 16px); }
table.scan { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; }
table.scan th {
  background: var(--blue); text-align: left; font-weight: 600; font-size: 13px; color: #fff;
  padding: 0; white-space: nowrap;
}
table.scan th.num { text-align: right; }
button.sort {
  all: unset; box-sizing: border-box; width: 100%; padding: 7px 10px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
th.num button.sort { justify-content: flex-end; }
button.sort:hover { background: var(--blue-dark); }
.arrow { font-size: 10px; opacity: .55; }
button.sort.active .arrow { opacity: 1; color: #ffc59a; }
button.sort:focus-visible { outline-color: #ffc59a; outline-offset: -2px; }

table.scan td { padding: 4px 10px; line-height: 1.35; border-bottom: 1px solid var(--line-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.scan td.num { text-align: right; }
table.scan td:last-child { white-space: normal; font-size: 13.5px; color: var(--ink-2); }
table.scan tbody tr.row:nth-child(even) td { background: #fafbfd; }
tr.row { cursor: pointer; }
table.scan tbody tr.row:hover td { background: var(--blue-soft); }
table.scan tbody tr.row.selected td { background: var(--select); }
tr.row.selected td:first-child { box-shadow: inset 4px 0 0 var(--select-line); }
tr.group td {
  background: var(--blue-tint); color: var(--blue-dark); font-weight: 700; font-size: 13.5px; padding: 3px 10px;
  border-bottom: 1px solid var(--line);
}
tr.empty td { text-align: center; color: var(--muted); padding: 28px; }
table.scan tbody td.cush { font-weight: 700; }
table.scan tbody td.cush-green, .chip.cush-green { background: var(--c-green-bg); color: var(--c-green-ink); }
table.scan tbody td.cush-yg, .chip.cush-yg       { background: var(--c-yg-bg);    color: var(--c-yg-ink); }
table.scan tbody td.cush-amber, .chip.cush-amber { background: var(--c-amber-bg); color: var(--c-amber-ink); }
table.scan tbody td.cush-red, .chip.cush-red     { background: var(--c-red-bg);   color: var(--c-red-ink); }
tr.row.selected td.cush { box-shadow: inset 0 0 0 2px var(--select-line); }
.warn { font-weight: 600; }
.tag { font-size: 11px; padding: 0 6px; border-radius: 4px; border: 1px solid var(--line); color: var(--ink-2); }

/* ---------- order boxes: Copy on the left, ~2/3 of table width ---------- */
/* order boxes span the table's full width; Copy at the right end */
.orders { width: 100%; max-width: calc(var(--table-w) + 2px); margin-top: 12px; display: grid; gap: 8px; }
.order-line { display: flex; align-items: stretch; gap: 10px; }
.order-line .btn { width: 104px; justify-content: center; }
.order-field { flex: 1; display: flex; align-items: center; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); overflow: hidden; }
.order-label { padding: 0 10px; font-size: 12px; font-weight: 700; color: var(--blue-dark); background: var(--blue-soft); text-transform: uppercase; letter-spacing: .04em; min-width: 112px; border-right: 1px solid var(--line); align-self: stretch; display: flex; align-items: center; }
.order-field input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: 14.5px var(--mono); padding: 9px 10px; }
.order-field input:focus { outline: none; }
.order-field:focus-within { border-color: var(--blue); }

.skipped { margin-top: 12px; font-size: 13.5px; }
.skipped:empty { display: none; } /* only data-source warnings land here; no empty gap otherwise */
.skipped summary { cursor: pointer; color: var(--blue); }
.skips { columns: 3 280px; margin: 10px 0 0; padding-left: 18px; color: var(--ink-2); }
.skips li { break-inside: avoid; margin-bottom: 3px; }
.notice { padding: 6px 10px; background: var(--notice-soft); border-radius: 6px; }

/* ---------- DIY ---------- */
.scan-frame .intro { margin: 8px 0 8px; font-size: 14px; }
/* Controls span the full table width; the 10 filters sit in one row when there is room. */
.diy-controls { width: 100%; max-width: calc(var(--table-w) + 2px); margin-bottom: 6px; }
.filter-actions { width: 104px; }
.filters-main { display: grid; gap: 5px; flex: 1; min-width: 0; }
.filters .tickers-field input { font-size: 14.5px; padding: 4px 10px; }
.filters { border: 1px solid var(--line); border-radius: 8px; padding: 0 12px 8px; margin: 0; background: var(--surface-2); max-width: 100%; }
.filters legend { font-weight: 700; font-size: 13px; padding: 0 6px; color: var(--blue-dark); }
.filters-body { display: flex; align-items: flex-start; gap: 16px; }
.filter-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px 10px; }
@media (max-width: 1300px) { .filter-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.filters .field { font-size: 11.5px; gap: 1px; }
.filters .field input { padding: 3px 8px; font-size: 13.5px; }
.field { display: grid; gap: 4px; font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.field input {
  font: 14.5px var(--font); padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); color: var(--ink); width: 100%;
}
.filter-actions { display: grid; gap: 6px; align-content: start; padding-top: 17px; font-size: 12px; }
.filter-actions .btn { justify-content: center; }
.filter-actions .guard { text-align: center; white-space: nowrap; font-size: 11.5px; }
@media (max-width: 900px) {
  .filters-body { flex-direction: column; }
  .filter-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); width: 100%; }
  .filter-actions { grid-auto-flow: column; padding-top: 0; align-items: center; width: auto; }
}
.msgs { list-style: none; padding: 0; margin: 0 0 4px; display: grid; gap: 6px; font-size: 14px; max-width: 1040px; }
.msgs li.error { padding: 6px 10px; border-radius: 6px; background: var(--error-soft); color: var(--error); }
.msgs:empty { display: none; }

/* ---------- sign-in popup ---------- */
.auth-dialog {
  width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; padding: 22px 22px 20px; border: 0; border-radius: 12px;
  border-top: 4px solid var(--blue); box-shadow: 0 18px 50px rgba(15, 30, 61, .35); color: var(--ink);
}
.auth-dialog::backdrop { background: rgba(15, 30, 61, .45); }
.auth-dialog h3 { margin: 0 0 4px; font-size: 20px; }
.auth-dialog > p { margin: 0 0 14px; font-size: 13.5px; }
.auth-close {
  position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; border: 0; border-radius: 6px;
  background: transparent; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer;
}
.auth-close:hover { background: var(--surface-2); color: var(--ink); }
.auth-tabs { display: flex; }
.auth-tabs .seg-btn { flex: 1; }
.auth-providers { display: grid; gap: 8px; margin-top: 14px; }
.auth-form { display: grid; gap: 12px; margin-top: 14px; }
.auth-form .btn { justify-content: center; }

/* DIY tab, signed out */
.card.locked { max-width: 520px; margin-top: 4px; padding: 18px 20px; border: 1px dashed #c3c9d6; border-radius: 10px; background: var(--surface-2); }
.card.locked p { margin: 4px 0 14px; font-size: 14px; }
.locked-actions { display: flex; gap: 10px; }
.error { color: var(--error); margin: 0; font-size: 14px; }

.foot { font-size: 12.5px; text-align: center; padding: 8px 0 0; border-top: 1px solid var(--line-2); margin-top: 8px; }

@media (max-width: 720px) {
  .top-inner { flex-wrap: wrap; gap: 6px 12px; padding-top: 6px; }
  .brand { padding-bottom: 0; }
  .authbar { padding-bottom: 0; }
  .tabs { order: 3; width: 100%; }
  .tab { min-width: 0; flex: 1; justify-content: center; padding: 8px 10px 9px; }
  .tab.active::before, .tab.active::after { display: none; }
  h1 { font-size: 22px; }
  .order-label { min-width: 0; }
}

/* ---------- hover card (Risk note guide) ---------- */
.hovercard {
  position: fixed; z-index: 50; width: 470px; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); overflow: auto;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-top: 3px solid var(--blue);
  border-radius: 8px; box-shadow: 0 8px 28px rgba(15, 30, 61, .18);
  padding: 10px 12px; font-size: 13px; line-height: 1.35;
  pointer-events: none;
}
.guide-title { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--blue-dark); margin-bottom: 6px; }
.guide-title .lvl { margin-left: auto; font-size: 12px; padding: 2px 9px; }
.g-row { display: grid; grid-template-columns: 62px 58px 58px 1fr; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid var(--line-2); }
.g-name { font-weight: 700; color: var(--blue-dark); }
.g-val { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-text { color: var(--ink-2); }
.lvl { justify-self: start; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.g-row.legend { grid-template-columns: 62px 1fr; }
.lvl-low  { background: var(--c-green-bg); color: var(--c-green-ink); }
.lvl-mid  { background: var(--c-amber-bg); color: var(--c-amber-ink); }
.lvl-high { background: var(--c-red-bg);   color: var(--c-red-ink); }
.guide-foot { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid var(--line-2); color: var(--ink); font-weight: 600; font-size: 12.5px; }
table.scan td:last-child { cursor: help; }

/* ---------- toggle switch ---------- */
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--ink); user-select: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { position: relative; width: 38px; height: 22px; border-radius: 999px; background: #c3c9d6; transition: background .15s; flex: none; }
.switch-thumb { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.switch input:checked + .switch-track { background: var(--orange); }
.switch input:checked + .switch-track .switch-thumb { transform: translateX(16px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---------- Pre Scan preset filters (read-only, grayed out) ---------- */
.filters.readonly { background: #eef0f4; border-style: dashed; }
.filters.readonly legend, .filters.readonly .field { color: var(--muted); }
.filters.readonly .field input { background: #f5f6f8; color: #5d6678; border-color: #dcdfe6; cursor: not-allowed; -webkit-text-fill-color: #5d6678; opacity: 1; }
.filters.readonly .guard { white-space: normal; line-height: 1.3; }
.auth-providers .btn { justify-content: center; }
.auth-or { text-align: center; font-size: 12px; color: var(--muted); }
/* DIY tab when signed out: header and tabs stay, the page below is blank, popup centered */
body.auth-gated main { visibility: hidden; }
.auth-dialog.gate { position: fixed; inset: 0; margin: auto; height: fit-content; z-index: 20; }
/* Create Account extras + Google button */
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.provider { display: flex; align-items: center; justify-content: center; gap: 10px; height: 40px; border: 1px solid #c9ced8; border-radius: 7px;
  background: #fff; color: #1f1f1f; font-weight: 600; font-size: 14px; text-decoration: none; }
.provider:hover { background: #f6f8fc; border-color: #a9b0bd; }
.provider svg { width: 18px; height: 18px; }

/* ---------- the word "Cushion" + the Cushion % column ---------- */
.brandword { font-weight: 700; color: var(--orange); }
.brand .brandword { color: #ff9a4d; font-size: 22px; line-height: 1; }
table.scan th.hl { background: var(--orange); }
table.scan th.hl .brandword, table.scan th.hl .arrow { color: #fff; }
table.scan th.hl button.sort:hover { background: var(--orange-hover); }
table.scan tbody tr.row td.hl, table.scan tbody tr.row:nth-child(even) td.hl { background: #fff1e6; color: #9a3d00; font-weight: 700; box-shadow: inset 1px 0 0 #f6c9a5, inset -1px 0 0 #f6c9a5; }
table.scan tbody tr.row:hover td.hl { background: #ffe3cc; }
table.scan tbody tr.row.selected td.hl { background: #ffd9bb; box-shadow: inset 0 0 0 2px var(--orange); }

/* ---------- Pre Scan: re-scan in progress ---------- */
.filters.readonly { position: relative; }
.scan-overlay {
  position: absolute; inset: 0; z-index: 2; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: rgba(238, 240, 244, .88); border-radius: 8px;
}
.filters.scanning .scan-overlay { display: flex; }
.scan-progress { font-weight: 700; font-size: 13px; color: var(--blue-dark); font-variant-numeric: tabular-nums; }
.bounce-logo { width: 56px; height: 56px; overflow: visible; }
.bl-band { transform-box: fill-box; transform-origin: 50% 100%; animation: cushion-squash 1.1s ease-in-out infinite; }
.bl-line { animation: cushion-drop 1.1s ease-in-out infinite; }
@keyframes cushion-squash { 0%, 100% { transform: scaleY(1); } 45% { transform: scaleY(.55); } 62% { transform: scaleY(1.12); } }
@keyframes cushion-drop { 0%, 100% { transform: translateY(-3px); } 45% { transform: translateY(3px); } 62% { transform: translateY(-1px); } }
@media (prefers-reduced-motion: reduce) {
  .bl-band, .bl-line { animation: cushion-pulse 2s ease-in-out infinite; }
  @keyframes cushion-pulse { 50% { opacity: .55; } }
}
.filter-actions .btn { padding-top: 5px; padding-bottom: 5px; }

/* ---------- collapsible filter panels ---------- */
.filters legend { display: flex; align-items: center; gap: 10px; max-width: calc(100% - 24px); }
.fold { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--blue-dark); white-space: nowrap; }
.fold:hover { color: var(--blue); }
.fold:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 3px; }
.fold-icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; flex: none;
  background: var(--orange); color: #fff; transition: background .15s; }
.fold-icon svg { width: 14px; height: 14px; transition: transform .2s; }
.fold:hover .fold-icon { background: var(--orange-hover); }
.fold[aria-expanded="true"] .fold-icon svg { transform: rotate(180deg); }
.fold-summary { font-weight: 500; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filters.collapsed .filter-grid, .filters.collapsed .universe-field { display: none; }
.filters.collapsed .filter-actions .guard { display: none; }
/* Pre Scan collapsed: just the Re-Scan button on the right of a slim bar */
.filters.readonly.collapsed .filter-actions { padding-top: 0; }
.filters.readonly.collapsed .filters-main { display: none; }
.filters.readonly.collapsed .filters-body { justify-content: flex-end; margin-top: -6px; }
.filters.readonly.collapsed { padding-bottom: 5px; } /* with the -6px above: Re-Scan sits mid-box */
.filters.readonly.collapsed legend { max-width: calc(100% - 130px); } /* leave room for Re-Scan on the same line */
/* re-scan animation in the slim bar: logo and progress side by side */
.filters.collapsed .scan-overlay { flex-direction: row; gap: 12px; }
.filters.collapsed .bounce-logo { width: 30px; height: 30px; }
/* DIY collapsed: Run and Reset side by side, level with the Tickers box */
.filters:not(.readonly).collapsed .filter-actions { width: auto; grid-auto-flow: column; }
/* Pre Scan: Re-Scan and Copy Table are the same size and share a right edge
   (Copy Table is pulled in by the preset panel's border + padding, 13px). */
#pre-rescan, #pre-copy { width: 104px; padding: 5px 15px; justify-content: center; } /* 104x32, same as DIY */
.filters.readonly .filter-actions { width: 104px; }
#scan-csp .toolbar { padding-right: 13px; }

/* ---------- collapsible scan frame ---------- */
.scan-frame-head { cursor: pointer; user-select: none; align-items: center; flex-wrap: nowrap; gap: 10px; }
.scan-frame-head .frame-fold { margin-right: 2px; }
.frame-summary { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.scan-frame.collapsed .scan-frame-body { display: none; }
.scan-frame.collapsed .scan-frame-head { border-bottom: 0; }
.guide .gi-text { margin: 4px 0 0; }
/* DIY: Run, Reset and Copy Table are the same size (104x32) and share a right edge
   (Copy Table pulled in by the filter panel's border + padding, 13px) */
#scan-diy .filter-actions .btn, #scan-diy .toolbar .btn { width: 104px; justify-content: center; padding-top: 5px; padding-bottom: 5px; }
#scan-diy .toolbar { padding-right: 13px; }
/* Order boxes: Copy buttons match the action buttons above them and share their right edge
   (13px in from the table, like Re-Scan / Run). Each box is as tall as its button. */
.orders { padding-right: 13px; }
.order-line .btn { padding-top: 0; padding-bottom: 0; }
.order-field input { padding-top: 0; padding-bottom: 0; align-self: stretch; }
#scan-csp .order-line { height: 32px; }
#scan-diy .order-line { height: 32px; }

/* ---------- "N without a setup" link + popup ---------- */
.linkish { all: unset; cursor: pointer; color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.linkish:hover { color: var(--orange); }
.linkish:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 2px; }
.popcard {
  position: fixed; z-index: 60; width: 520px; max-width: calc(100vw - 24px); max-height: min(420px, calc(100vh - 24px)); overflow: auto;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-top: 3px solid var(--blue);
  border-radius: 8px; box-shadow: 0 8px 28px rgba(15, 30, 61, .18); padding: 10px 12px 12px; font-size: 13px;
}
.popcard .guide-title { justify-content: space-between; }
.pop-close { all: unset; cursor: pointer; font-size: 18px; line-height: 1; color: var(--muted); padding: 0 4px; }
.pop-close:hover { color: var(--ink); }
.pop-group { padding: 6px 0; border-top: 1px solid var(--line-2); }
.pop-reason { font-weight: 700; color: var(--ink-2); margin-bottom: 4px; }
.pop-syms { display: flex; flex-wrap: wrap; gap: 3px 10px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pop-syms span { cursor: default; }