/* ==========================================================================
   Ledger HQ -- fullthrottle.ai design system
   Palette, typography and surface tokens are taken from ft-design-system.
   Tokens are declared twice: dark on :root, light under
   :root[data-theme="light"]. app/layout.js sets data-theme="light", which is
   the palette this tool is designed around; the dark block keeps the app from
   breaking if the attribute is ever dropped or flipped.
   Rule: no raw hex/rgb in component CSS -- always var(--token), or the UI
   stops adapting when the theme flips.
   ========================================================================== */
:root {
  color-scheme: light dark;

  --bg-0:#060a12; --bg-1:#0b111a; --bg-2:#131c2a;
  --panel:rgba(13,19,28,0.72); --panel-inner:rgba(6,10,18,0.6);
  --panel-border:rgba(0,154,168,0.28); --panel-border-strong:rgba(0,184,199,0.6);
  --hairline:rgba(255,255,255,0.06); --hairline-strong:rgba(255,255,255,0.12);
  --text:#f1f6fc; --text-dim:#a8b8cc; --text-faint:#6f8094;
  --teal:#009aa8; --teal-bright:#00b8c7;
  --teal-glow:rgba(0,154,168,0.5); --teal-glow-soft:rgba(0,154,168,0.18);
  --green:#4ade80; --amber:#fbbf24; --red:#f87171; --slate:#94a3b8;

  --radius-lg:18px; --radius-md:12px; --radius-sm:8px;
  --max-w:1180px; /* 8-column ledger: platform / media / revenue all need room */
  --ease-out:cubic-bezier(0.32,0.72,0.24,1);

  /* App-local aliases. Existing markup and mockup-app.js reference --accent
     and --grey; they resolve through the brand tokens so there is still one
     source of truth. --surface is the opaque card/input fill (white on light,
     a raised panel on dark) that replaces the hardcoded #fff this file used. */
  --accent:var(--teal);
  --grey:var(--slate);
  --surface:#0d131c;
  --surface-translucent:rgba(255,255,255,0.05);
  --surface-hover:rgba(255,255,255,0.09);
  --row-hover:rgba(0,154,168,0.10);
  --scrim:rgba(3,7,12,0.62);
  --shadow-panel:0 6px 20px rgba(0,0,0,0.35);
  --shadow-modal:0 24px 60px rgba(0,0,0,0.55);
  --chart-grid:rgba(255,255,255,0.08);
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg-0:#ffffff; --bg-1:#f4f7fa; --bg-2:#e9eff5;
  --panel:rgba(255,255,255,0.82); --panel-inner:rgba(244,247,250,0.72);
  --panel-border:rgba(0,154,168,0.30); --panel-border-strong:rgba(0,154,168,0.55);
  --hairline:rgba(11,31,36,0.10); --hairline-strong:rgba(11,31,36,0.16);
  --text:#0b1f24; --text-dim:#3f5560; --text-faint:#6b7f89;
  --teal:#009aa8; --teal-bright:#00818f;
  --teal-glow:rgba(0,154,168,0.35); --teal-glow-soft:rgba(0,154,168,0.12);
  --green:#0b8043; --amber:#b45309; --red:#dc2626; --slate:#64748b;

  --surface:#ffffff;
  --surface-translucent:rgba(255,255,255,0.5);
  --surface-hover:rgba(255,255,255,0.7);
  --row-hover:rgba(0,154,168,0.05);
  --scrim:rgba(11,31,36,0.40);
  --shadow-panel:0 6px 20px rgba(11,31,36,0.05);
  --shadow-modal:0 24px 60px rgba(11,31,36,0.2);
  --chart-grid:rgba(11,31,36,0.06);
}

*{box-sizing:border-box;}
html,body{
  margin:0;padding:0;min-height:100%;
  color:var(--text);
  font-family:"helvetica-neue-lt-pro",-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
}
/* ft-design-system page ground: faint teal wash top and bottom over the
   neutral gradient, pinned so it does not scroll with long tables. */
body{
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, var(--teal-glow-soft), transparent 60%),
    radial-gradient(ellipse 60% 50% at 50% 110%, var(--teal-glow-soft), transparent 60%),
    linear-gradient(180deg,var(--bg-0) 0%,var(--bg-1) 60%,var(--bg-2) 100%);
  background-attachment:fixed;
}

::selection{background:var(--teal-glow);color:#fff;}
::-moz-selection{background:var(--teal-glow);color:#fff;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--teal-glow-soft);border-radius:6px;border:2px solid transparent;background-clip:padding-box;}
::-webkit-scrollbar-thumb:hover{background:var(--teal-glow);border:2px solid transparent;background-clip:padding-box;}

.wrap{max-width:var(--max-w);margin:0 auto;padding:24px 20px 56px;}
.bhq-topbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding-bottom:16px;}

/* Header lockup: canonical fullthrottle.ai wordmark, always visible, with the
   product name set off by a hairline rule. The mark is inlined (see
   lib/ftLogo.js) so the glyph keeps its teal and the wordmark tracks --text. */
.bhq-logo-wrap{display:flex;align-items:center;gap:12px;min-height:34px;}
.bhq-logo-slot{flex:0 0 auto;display:block;width:146px;}
.ft-logo{width:100%;height:auto;display:block;color:var(--text);}
.bhq-logo-rule{flex:0 0 auto;width:1px;height:20px;background:var(--hairline-strong);}
.bhq-h1{margin:0;font-size:15px;font-weight:700;color:var(--text);letter-spacing:-0.01em;}
@media (max-width:420px){ .bhq-logo-slot{width:120px;} }

.bhq-ops-btn{background:var(--panel-inner);color:var(--text-dim);border:1px solid var(--hairline-strong);border-radius:999px;padding:7px 14px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;font-family:inherit;transition:border-color 160ms var(--ease-out),color 160ms var(--ease-out);}
.bhq-ops-btn:hover{border-color:var(--panel-border-strong);color:var(--teal-bright);}

.bhq-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px;}
.bhq-tab{
  background:var(--surface-translucent);backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);
  border:1px solid var(--hairline-strong);border-radius:999px;padding:9px 18px;font-size:12.5px;font-weight:700;
  color:var(--text-dim);cursor:pointer;font-family:inherit;transition:all 160ms var(--ease-out);box-shadow:0 1px 2px var(--hairline);
}
.bhq-tab:hover{border-color:var(--tab-accent);color:var(--text);background:var(--surface-hover);}
.bhq-tab.is-active{
  background:linear-gradient(135deg, color-mix(in srgb, var(--tab-accent) 22%, var(--surface)) 0%, color-mix(in srgb, var(--tab-accent) 10%, var(--surface)) 100%);
  border-color:var(--tab-accent);color:var(--tab-accent);box-shadow:0 4px 14px color-mix(in srgb, var(--tab-accent) 30%, transparent), inset 0 1px 0 var(--hairline-strong);
}
.bhq-cycle{font-size:11.5px;color:var(--text-faint);margin:6px 0 14px;}

.bhq-panel{background:var(--panel);border:1px solid var(--hairline-strong);border-radius:var(--radius-md);padding:18px 20px;display:flex;flex-direction:column;gap:14px;margin-top:16px;box-shadow:var(--shadow-panel);}
.bhq-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.bhq-panel-title{margin:0;font-size:14px;font-weight:700;}
.bhq-panel-meta{font-size:11.5px;color:var(--text-faint);}

.bhq-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:640px){ .bhq-stat-grid{grid-template-columns:1fr;} }
.bhq-stat-card{background:var(--panel-inner);border:1px solid var(--hairline);border-top:3px solid var(--accent);border-radius:var(--radius-md);padding:16px 18px;display:flex;flex-direction:column;gap:10px;}
.bhq-stat-label{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);}
.bhq-stat-value{font-size:26px;font-weight:700;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;}
.bhq-stat-trend{display:flex;gap:14px;font-size:11.5px;color:var(--text-faint);font-variant-numeric:tabular-nums;}
.bhq-stat-trend b{color:var(--text-dim);font-weight:700;}
.bhq-stat-sub{display:flex;flex-direction:column;gap:4px;margin-top:2px;padding-top:10px;border-top:1px solid var(--hairline);}
.bhq-stat-sub-row{display:flex;justify-content:space-between;font-size:12px;color:var(--text-dim);font-variant-numeric:tabular-nums;}
.bhq-stat-triplet{display:flex;gap:18px;}
.bhq-stat-mini{display:flex;flex-direction:column;gap:1px;}
.bhq-stat-mini-label{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);}
.bhq-stat-mini-value{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;}
.bhq-chart-wrap{height:190px;margin-top:2px;position:relative;}

.bhq-field{display:flex;flex-direction:column;gap:5px;}
.bhq-field label{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);}
.bhq-field select, .bhq-field input{font-size:13px;padding:8px 12px;border:1px solid var(--hairline-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);min-width:170px;font-family:inherit;}
.bhq-field select:focus-visible, .bhq-field input:focus-visible,
.bhq-modal input:focus-visible, .bhq-modal textarea:focus-visible, .bhq-modal select:focus-visible{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal);}
.bhq-field.grow{flex:1;}
.bhq-field.grow input{min-width:220px;width:100%;}
table{width:100%;border-collapse:collapse;font-size:13px;}
thead th{text-align:left;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);padding:9px 14px;border-bottom:1px solid var(--hairline);white-space:nowrap;}
tbody td{padding:11px 14px;border-bottom:1px solid var(--hairline);vertical-align:middle;font-variant-numeric:tabular-nums;}
tbody tr:last-child td{border-bottom:none;}
tbody tr.bhq-adv-row:hover td, tbody tr.bhq-req-row:hover td{background:var(--row-hover);}
td.wrap{white-space:normal;max-width:220px;font-variant-numeric:normal;}
/* Three money columns sit side by side, so they are ranked rather than all
   shouting: the platform fee is the one this tool exists to change (green),
   media is supporting detail (dim), total revenue is the anchor (dark, large). */
td.fee{font-weight:700;color:var(--green);text-align:right;font-size:15px;white-space:nowrap;}
td.fee--media{font-weight:700;color:var(--text-dim);}
td.fee--revenue{color:var(--text);font-size:17px;}

/* The edit control sits with the figure it edits rather than in a far-right
   actions column. Every fee cell reserves the same icon slot whether or not
   the icon is interactive, so the numbers still line up down the column. */
.fee-cell{display:inline-flex;align-items:center;justify-content:flex-end;gap:8px;}
.fee-val{font-variant-numeric:tabular-nums;}
.bhq-edit{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;padding:0;border-radius:var(--radius-sm);
  background:transparent;border:1px solid transparent;color:var(--text-faint);
  cursor:pointer;font-family:inherit;
  transition:color 140ms var(--ease-out),background 140ms var(--ease-out),border-color 140ms var(--ease-out);
}
.bhq-edit:hover{color:var(--teal-bright);border-color:var(--panel-border);background:var(--teal-glow-soft);}
.bhq-edit:focus-visible{outline:2px solid var(--teal);outline-offset:1px;}
.bhq-edit.is-locked{color:var(--text-faint);cursor:not-allowed;}
.bhq-edit.is-locked svg{opacity:.45;}
.bhq-edit.is-locked:hover{color:var(--text-faint);background:transparent;border-color:transparent;}

/* Tooltip lives on <body>, not on the control. A CSS ::after inside a table
   cell cannot be lifted above neighbouring rows or the sticky header -- table
   rows paint as their own layers -- and it would be clipped by the horizontal
   scroll container on narrow screens. Positioned by script from data-tip; the
   same text is on aria-label, so nothing is announced twice. */
.bhq-tip{
  position:fixed;z-index:400;pointer-events:none;
  padding:6px 9px;border-radius:var(--radius-sm);
  background:var(--text);color:var(--bg-0);
  font-size:11.5px;font-weight:700;line-height:1.35;
  max-width:200px;text-align:left;
  opacity:0;transition:opacity 120ms var(--ease-out);
}
.bhq-tip.is-on{opacity:1;}
@media (prefers-reduced-motion: reduce){ .bhq-tip{transition:none;} }
.bhq-fee-current{color:var(--text-faint);font-weight:400;}
.bhq-fee-new{color:var(--text);font-weight:700;}
td.change{font-weight:700;}
.bhq-link{background:none;border:none;padding:0;color:var(--text);font-weight:700;font-family:inherit;font-size:13px;cursor:pointer;text-align:left;}
.bhq-link:hover{color:var(--accent);text-decoration:underline;}
.bhq-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:linear-gradient(135deg, var(--accent) 0%, var(--teal-bright) 100%);border:none;border-radius:999px;color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.02em;font-family:inherit;cursor:pointer;white-space:nowrap;transition:filter 160ms var(--ease-out),box-shadow 160ms var(--ease-out);}
.bhq-btn:hover{filter:brightness(1.06);box-shadow:0 4px 14px var(--teal-glow-soft);}
.bhq-btn--sm{padding:6px 12px;font-size:11px;}
.bhq-btn--outline{background:var(--surface);color:var(--accent);border:1px solid var(--accent);}
.bhq-btn--teal{background:linear-gradient(135deg,var(--teal) 0%,var(--teal-bright) 100%);}
.bhq-btn:disabled{opacity:.4;cursor:not-allowed;}
.bhq-ghost{background:transparent;border:1px solid var(--hairline-strong);color:var(--text-dim);border-radius:999px;padding:6px 12px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;}
.bhq-ghost:hover{border-color:var(--panel-border-strong);color:var(--text);}
.bhq-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.bhq-pill{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 10px;border-radius:999px;white-space:nowrap;}
.bhq-pill--pending{color:var(--amber);background:color-mix(in srgb, var(--amber) 14%, transparent);}
.bhq-pill--complete{color:var(--green);background:color-mix(in srgb, var(--green) 14%, transparent);}
.bhq-pill--cancelled{color:var(--text-faint);background:color-mix(in srgb, var(--slate) 16%, transparent);}
.bhq-pill--managed{color:var(--teal-bright);background:var(--teal-glow-soft);}
.bhq-pill--selfserve{color:var(--text-dim);background:color-mix(in srgb, var(--text-dim) 10%, transparent);}
.bhq-empty{color:var(--text-faint);font-size:12.5px;padding:14px 4px;}
/* Fixed, not absolute: anchored to #stage the backdrop centred the dialog
   against the full scrolled height of the advertiser table, which puts it
   hundreds of pixels below the fold. Fixed centres it in the viewport. */
.bhq-modal-backdrop{position:fixed;inset:0;background:var(--scrim);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px;overflow:auto;}
.bhq-modal{width:100%;max-width:460px;background:var(--surface);border:1px solid var(--hairline-strong);border-radius:var(--radius-lg);padding:22px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-modal);max-height:80vh;overflow:auto;}
.bhq-modal h3{margin:0;font-size:15px;}
.bhq-modal p{margin:0;font-size:12px;color:var(--text-faint);}
.bhq-modal input, .bhq-modal textarea, .bhq-modal select{font-size:13px;padding:8px 10px;border:1px solid var(--hairline-strong);border-radius:var(--radius-sm);width:100%;font-family:inherit;background:var(--surface);color:var(--text);}
.stage{position:relative;}
.bhq-modal-status{min-height:16px;font-size:12px;color:var(--green);}

.bhq-count-btn{width:26px;height:26px;border-radius:999px;border:1px solid var(--hairline-strong);background:var(--surface);color:var(--text-faint);font-size:12px;font-weight:700;font-family:inherit;cursor:pointer;}
.bhq-count-btn.has-open{background:var(--accent);border-color:var(--accent);color:#fff;}
.bhq-i-btn{width:22px;height:22px;border-radius:999px;border:1px solid var(--hairline-strong);background:var(--surface);color:var(--text-faint);font-size:11px;font-weight:700;font-family:inherit;font-style:italic;cursor:pointer;line-height:1;}
.bhq-i-btn:hover{border-color:var(--teal);color:var(--teal-bright);}

.bhq-expand-row td{padding:0;border-bottom:1px solid var(--hairline);background:var(--panel-inner);}
.bhq-expand-inner{padding:14px 18px 16px;display:flex;flex-direction:column;gap:14px;}
.bhq-expand-section-title{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);margin:0 0 6px;}
.bhq-req-line{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:12.5px;}
.bhq-req-line:last-child{border-bottom:none;}
.bhq-req-meta{color:var(--text-faint);font-size:11px;}
.bhq-detail-inner{padding:10px 18px;font-size:12.5px;color:var(--text-dim);display:flex;flex-direction:column;gap:3px;}
.bhq-detail-inner b{color:var(--text);}

.bhq-dot-row{display:flex;align-items:baseline;gap:6px;font-size:12.5px;cursor:pointer;padding:4px 0;}
.bhq-dot-name{flex:0 0 auto;font-weight:700;}
.bhq-dot-leader{flex:1;border-bottom:1px dotted var(--hairline-strong);margin-bottom:3px;min-width:16px;}
.bhq-dot-value{flex:0 0 auto;font-variant-numeric:tabular-nums;font-weight:700;}
.bhq-cat-dot-row{display:flex;align-items:baseline;gap:6px;font-size:12px;padding:2px 0;}
.bhq-cat-dot-row .bhq-dot-name{font-weight:500;color:var(--text-dim);}
.bhq-cat-dot-row .bhq-dot-value{font-weight:700;}
.bhq-cat-detail{font-size:11px;color:var(--text-faint);margin:2px 0 4px 0;}
.bhq-subitem-row{display:flex;align-items:baseline;gap:6px;font-size:11px;color:var(--text-faint);padding:2px 0 2px 16px;}
.bhq-subitem-name{font-weight:500;}
.bhq-subitem-value{font-weight:700;color:var(--text-dim);}
.bhq-modal-current{display:flex;flex-direction:column;gap:2px;background:var(--panel-inner);border:1px solid var(--hairline);border-radius:var(--radius-sm);padding:10px 14px;}
.bhq-modal-current-label{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-faint);}
.bhq-modal-current-value{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;}
.bhq-modal-delta{font-size:12px;font-weight:700;min-height:16px;margin:2px 0 0;}
.bhq-modal-delta.up{color:var(--green);}
.bhq-modal-delta.down{color:var(--red);}
.bhq-modal-footnote{font-size:11px;color:var(--text-faint);margin:0;}
.bhq-month-block{border-bottom:1px solid var(--hairline);padding-bottom:8px;margin-bottom:4px;}
.bhq-month-block:last-child{border-bottom:none;}
.bhq-month-body{display:none;padding:4px 0 4px 6px;}
.bhq-billing-center{max-width:380px;margin:0 auto;}
.bhq-trend-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;}
.bhq-trend-dot--up{background:var(--green);}
.bhq-trend-dot--down{background:var(--red);}
.bhq-note{font-size:12px;color:var(--text-faint);margin:0;}
.bhq-note code{background:var(--panel-inner);padding:1px 5px;border-radius:4px;font-size:11px;}
.bhq-upload-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.bhq-upload-row input[type=file]{font-size:12px;max-width:230px;color:var(--text-dim);}
.bhq-back{background:none;border:none;color:var(--teal-bright);font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;padding:0;margin-bottom:14px;}
.bhq-collapse-toggle{background:none;border:none;padding:0;display:flex;align-items:center;gap:8px;cursor:pointer;font-family:inherit;}
.bhq-collapse-chevron{transition:transform 160ms var(--ease-out);color:var(--text-faint);}
.bhq-collapse-chevron.is-open{transform:rotate(90deg);}
.bhq-pay-toggle{display:flex;gap:6px;margin:2px 0 2px;}
.bhq-pay-btn{background:var(--surface);border:1px solid var(--hairline-strong);border-radius:999px;padding:6px 14px;font-size:11.5px;font-weight:700;color:var(--text-dim);cursor:pointer;font-family:inherit;}
.bhq-pay-btn:hover{border-color:var(--accent);color:var(--accent);}
.bhq-pay-btn.is-active{background:var(--accent);border-color:var(--accent);color:#fff;}
.bhq-tri-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;}
@media (max-width:760px){ .bhq-tri-grid{grid-template-columns:1fr;} }
.bhq-export-card{background:var(--panel-inner);border:1px solid var(--hairline);border-top:3px solid var(--accent);border-radius:var(--radius-md);padding:16px 18px;display:flex;flex-direction:column;gap:10px;}

/* ==========================================================================
   Ledger -- sortable column headers and the result-set total row
   ========================================================================== */
.bhq-th-sort{padding:0;}
.bhq-th--right{text-align:right;}
.bhq-th--center{text-align:center;}
.bhq-sort{
  display:inline-flex;align-items:center;gap:5px;width:100%;
  background:none;border:none;cursor:pointer;font-family:inherit;
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-faint);padding:9px 14px;border-radius:var(--radius-sm);
  transition:color 140ms var(--ease-out),background 140ms var(--ease-out);
}
.bhq-th--right .bhq-sort{justify-content:flex-end;}
.bhq-th--center .bhq-sort{justify-content:center;}
.bhq-sort:hover{color:var(--text);background:var(--row-hover);}
.bhq-sort:focus-visible{outline:2px solid var(--teal);outline-offset:-2px;}
.bhq-sort.is-active{color:var(--teal-bright);}
/* Inactive columns show a dimmed both-ways caret so it is discoverable that
   the header sorts at all, without competing with the active column. */
.bhq-sort-caret{font-size:8px;line-height:1;letter-spacing:-0.18em;opacity:.45;}
.bhq-sort.is-active .bhq-sort-caret{opacity:1;letter-spacing:normal;font-size:9px;}

/* The Nexstar Non Paying list is 612 rows / ~50,000px tall, so a header at
   the top and a total at the bottom are both off-screen for 70-odd screens
   of scrolling. Pinning them keeps the sort controls reachable and the
   totals in view wherever you are in the list. Backgrounds must be opaque
   here -- the translucent panel tokens would let rows show through. */
.bhq-ledger thead th{
  position:sticky;top:0;z-index:2;
  background:var(--surface);
  box-shadow:inset 0 -1px 0 var(--hairline);
}
.bhq-total-row td{
  position:sticky;bottom:0;z-index:2;
  border-top:2px solid var(--hairline-strong);border-bottom:none;
  padding:12px 14px;font-variant-numeric:tabular-nums;
  background:var(--surface);
  box-shadow:0 -6px 16px color-mix(in srgb, var(--text) 7%, transparent);
}
.bhq-total-label{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);}
.bhq-total-sub{display:block;margin-top:3px;font-size:12px;color:var(--text-faint);}
.bhq-total-sub b{color:var(--text);font-weight:700;}
.bhq-total-fee{text-align:right;font-size:15px;font-weight:700;color:var(--text-dim);vertical-align:middle;white-space:nowrap;}
.bhq-total-revenue{font-size:18px;color:var(--text);}
.bhq-total-open{text-align:center;font-weight:700;color:var(--text-dim);vertical-align:middle;}

/* Above 900px the wrapper has no overflow, which is what lets the sticky
   header and total row position against the viewport. Below it, horizontal
   scrolling matters more than stickiness, so the wrapper becomes a scroll
   container and the table keeps a usable minimum width. */
@media (max-width:900px){
  .bhq-ledger-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .bhq-ledger{min-width:860px;}
}

/* Announced to screen readers on every search; visually it doubles as the
   result count, so it is not hidden. */
.bhq-result-status{margin:-4px 0 0;font-size:11.5px;color:var(--text-faint);min-height:15px;}

/* Idle warning: a notice, not a modal. It must not block the page, because
   the whole point is to let you carry on with what you were doing. */
.bhq-idle-warn{
  position:fixed;right:20px;bottom:20px;z-index:300;max-width:min(340px,calc(100vw - 40px));
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 16px;border-radius:var(--radius-md);
  background:var(--surface);border:1px solid var(--panel-border-strong);
  box-shadow:var(--shadow-modal);
}
.bhq-idle-warn-body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:150px;}
.bhq-idle-warn b{font-size:13px;font-weight:700;color:var(--text);}
.bhq-idle-warn span{font-size:12px;color:var(--text-faint);font-variant-numeric:tabular-nums;}
@media (prefers-reduced-motion: no-preference){
  .bhq-idle-warn{animation:bhq-idle-in 200ms var(--ease-out);}
  @keyframes bhq-idle-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
}

/* ==========================================================================
   Sign-in -- ft-design-system hero pattern (logo, tagline, headline, blurb)
   ========================================================================== */
.bhq-auth-gate{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;overflow:auto;}
.bhq-auth-shell{width:100%;max-width:400px;display:flex;flex-direction:column;gap:18px;}
.hero{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;}
.hero-logo{width:180px;}
.tagline{margin:4px 0 0;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-bright);}
.login-heading{margin:0;font-size:22px;font-weight:700;letter-spacing:-0.02em;color:var(--text);}
.hero-blurb{margin:0;font-size:12.5px;line-height:1.5;color:var(--text-faint);max-width:34ch;}

/* The modal's own gap only spaces its direct children, so the intro copy,
   field and status inside a step were butting together. */
#authStepEmail, #authStepCode{display:flex;flex-direction:column;gap:12px;}