*{margin:0;padding:0;box-sizing:border-box;}
:root{
  /* Bloomberg Terminal × Porsche Concours palette */
  --bg:#000000;                                 /* true black canvas */
  --s0:#0E1115;                                 /* lifted panel */
  --s1:#12161B;                                 /* alt row surface */
  --s2:#161A20;                                 /* input surface */
  --s3:#1B2027;                                 /* hover surface */
  --well:#070A0D;                               /* recessed data ground — the
                                                   near-black under every table
                                                   and chart on the index pages,
                                                   named here 2026-08-21 */
  --b0:rgba(255,255,255,0.05);                  /* 1px hairline */
  --b1:rgba(255,255,255,0.10);                  /* emphasized hairline */
  --b2:rgba(255,255,255,0.18);                  /* focus hairline */
  --text:#DCE1E6;                               /* primary text */
  --textSec:#A8AFB6;                            /* secondary text */
  --textMut:#8A9199;                            /* muted text */
  --textDim:#9AA1A9;                            /* dim labels */
  --accent:#1FB088;                             /* desaturated emerald */
  --accentD:rgba(31,176,136,0.10);
  --gold:#C99D4A;                               /* warm amber link accent */
  --goldD:rgba(201,157,74,0.14);
  --neg:#D14E4E;                                /* flag red */
  --negD:rgba(209,78,78,0.12);
  --blue:#4A7FC7;                               /* desaturated blue for charts */
  --grossLine:#596673;
  --grid:rgba(255,255,255,0.04);
  /* ─── Machined-panel card recipe ──────────────────────────────────────
     Cards sit on a true-black canvas (--bg is #000), so a translucent fill
     has nothing behind it to show through and would only read as a flatter
     rectangle. Depth comes from edge lighting instead: a top-lit surface
     wash plus a 1px inset lip, the way an anodized instrument panel catches
     light along its upper edge. Applied through tokens so every card family
     (.card / .avq-panel / .avq-tile / .stat-pill) stays in lockstep. */
  --cardWash:linear-gradient(180deg,rgba(255,255,255,0.024),rgba(255,255,255,0) 44%);
  --cardWashSoft:linear-gradient(180deg,rgba(255,255,255,0.016),rgba(255,255,255,0) 52%);
  --cardLip:inset 0 1px 0 rgba(255,255,255,0.055);
  --cardLipHi:inset 0 1px 0 rgba(255,255,255,0.10);
  --cardR:2px;                                  /* softened, not rounded */
}
body{background:var(--bg);color:var(--text);font-family:'IBM Plex Sans','Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;min-height:100vh;min-width:1064px;font-feature-settings:"ss01","cv11";font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.mono{font-family:'IBM Plex Mono','SF Mono','Menlo','Consolas',monospace;font-variant-numeric:tabular-nums;}
input,select{width:100%;padding:8px 11px;border:1px solid var(--b2);border-radius:0;font-size:12px;outline:none;box-sizing:border-box;background:var(--s2);color:var(--text);caret-color:var(--accent);font-family:'IBM Plex Mono','SF Mono',monospace;letter-spacing:0.02em;transition:border-color 0.15s;}
input:focus,select:focus{border-color:var(--accent);}
select{cursor:pointer;}
table{width:100%;border-collapse:collapse;}
tr.striped:nth-child(even){background:rgba(255,255,255,0.015);}
button{font-family:'IBM Plex Sans',sans-serif;font-variant-numeric:tabular-nums;}
a{color:var(--gold);text-decoration:none;transition:color 0.15s;}
a:hover{color:#E0B562;}
::-webkit-scrollbar{width:7px;height:7px;}
::-webkit-scrollbar-track{background:var(--s0);}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.08);border-radius:0;}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.14);}
.card{background:var(--cardWash),var(--s0);border:1px solid var(--b0);border-radius:var(--cardR);padding:16px;
  box-shadow:var(--cardLip);transition:border-color 0.15s ease,box-shadow 0.15s ease;}
.card:hover{border-color:var(--b1);box-shadow:var(--cardLipHi);}
/* ─── Asset Valuation "Quant-Slate" redesign (stitch variant 1) ───
   Glass panels over the terminal canvas, tonal metric tiles, 4px radius,
   IBM Plex Sans with tabular figures throughout. Scoped to .av-page so the
   rest of the terminal stays sharp-edged. */
.avq-panel{background:var(--cardWash),var(--s0);border:1px solid var(--b0);border-radius:4px;padding:20px;
  box-shadow:var(--cardLip);transition:border-color 0.15s ease,box-shadow 0.15s ease;}
.avq-panel:hover{border-color:var(--b1);box-shadow:var(--cardLipHi);}
/* Nested inside .avq-panel, so it takes the softer wash — a full-strength
   lip on a tile sitting on an already-lit panel reads as a double edge. */
.avq-tile{background:var(--cardWashSoft),var(--s1);border:1px solid var(--b0);border-radius:4px;padding:12px;
  box-shadow:var(--cardLip);}
.avq-head{font-family:'IBM Plex Sans',sans-serif;font-size:11px;font-weight:600;letter-spacing:0.15em;text-transform:uppercase;color:var(--text);opacity:0.9;margin:0;}
.avq-sub{font-family:'IBM Plex Sans',sans-serif;font-size:8px;letter-spacing:0.1em;text-transform:uppercase;color:#99907c;opacity:0.6;margin:4px 0 0;}
.avq-label{font-family:'IBM Plex Sans',sans-serif;font-size:10px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:#99907c;opacity:0.85;margin-bottom:6px;}
.avq-tlabel{font-family:'IBM Plex Sans',sans-serif;font-size:9px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:#99907c;margin:0 0 4px;}
.avq-tlabel span{opacity:0.45;font-size:8px;}
.avq-metric{font-family:'IBM Plex Sans',sans-serif;font-weight:500;font-variant-numeric:tabular-nums;line-height:1.3;margin:0;}
.av-page input,.av-page select{border-radius:4px;padding:10px 11px;font-family:'IBM Plex Sans',sans-serif;font-size:13px;letter-spacing:0;}
.av-page input:focus,.av-page select:focus{border-color:rgba(242,202,80,0.7);}
.avq-divider{height:1px;background:var(--b0);margin:18px 0 14px;}
.avq-ghost{padding:6px 12px;background:var(--s1);border:1px solid var(--b1);border-radius:4px;font-family:'IBM Plex Sans',sans-serif;font-size:9px;font-weight:600;letter-spacing:0.15em;text-transform:uppercase;color:var(--text);cursor:pointer;transition:background 0.15s;}
.avq-ghost:hover{background:rgba(255,255,255,0.05);}
.section-header{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:var(--textDim);margin-bottom:14px;}
/* Market Data page accent: green section titles. */
#market-sub-body .section-header{color:var(--accent);}
/* Hide the default disclosure triangle on <summary> across browsers — used by
   the explainer popover inside the stat-analysis pairwise drilldown AND the
   Analyst Note card on the Asset Detail page. */
.no-marker summary{list-style:none;}
.no-marker summary::-webkit-details-marker{display:none;}
.no-marker summary::marker{display:none;}
/* Rotate the manual chevron inside the Analyst Note summary when the
   <details> element is open. The chevron is `▸` (closed) → 90° (open = ▾). */
details[open] > summary .analyst-chevron{transform:rotate(90deg);}
/* Analyst Note — standard card at rest; on hover a light sheen sweeps the
   bar, the card lifts on an accent glow, the chevron nudges toward the title
   and the expand cue brightens and tracks out. Stills under reduced motion. */
.qd-anote{transition:box-shadow .3s ease,transform .3s ease}
.qd-anote>summary{position:relative}
.qd-anote:not([open]):hover{transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(31,176,136,.45),0 10px 30px rgba(0,0,0,.45),0 0 26px rgba(31,176,136,.12)}
.qd-anote .analyst-chevron{transition:transform .25s ease}
.qd-anote:not([open]):hover>summary .analyst-chevron{transform:translateX(3px)}
/* The collapsed note stands apart from the page and BREATHES as one card
   (2026-08-30, owner's call — grew from a breathing cue chip to the whole
   card): an accent capline, an accent-washed ground, a border a shade above
   every neighbouring card, and a slow whole-card glow cycle. Hover pauses
   the breath and holds the lift; open goes calm and reads as a standard
   card. The cue chip keeps the accent look but no longer pulses on its own —
   one breathing thing, not two. */
.qd-anote:not([open]){position:relative;border-color:rgba(31,176,136,.35);
  background:linear-gradient(180deg,rgba(31,176,136,.06),rgba(31,176,136,.015) 55%,transparent),var(--cardWash),var(--s0);
  animation:qd-anote-card-breathe 3.2s ease-in-out infinite}
.qd-anote:not([open])::before{content:'';position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,#1FB088,rgba(31,176,136,.25) 45%,transparent 80%);pointer-events:none}
@keyframes qd-anote-card-breathe{
  0%,100%{box-shadow:0 0 0 rgba(31,176,136,0)}
  50%{box-shadow:0 0 0 1px rgba(31,176,136,.30),0 0 22px rgba(31,176,136,.16)}}
.qd-anote:not([open]):hover{animation-play-state:paused}
.qd-anote .qd-anote-cue{font-family:'IBM Plex Mono',monospace;font-size:8.5px;font-weight:700;
  letter-spacing:0.14em;text-transform:uppercase;white-space:nowrap;padding:4px 11px;
  color:#1FB088;border:1px solid #1FB088;transition:background .15s ease}
.qd-anote:not([open]):hover .qd-anote-cue{background:rgba(31,176,136,.14)}
.qd-anote[open] .qd-anote-cue{display:none}
@media (prefers-reduced-motion:reduce){
  .qd-anote,.qd-anote .analyst-chevron,.qd-anote .qd-anote-cue{transition:none}
  .qd-anote .qd-anote-cue{animation:none}
  .qd-anote:not([open]){animation:none;box-shadow:0 0 0 1px rgba(31,176,136,.25)}
  .qd-anote:not([open]):hover{transform:none}
  .qd-anote:not([open]):hover>summary::after{animation:none}
}
/* (The Market Commentary <details> and its .mc-toggle/.mkt-commentary rules
   were removed 2026-08-25 with the State of the Market card — the Season
   Brief's expand/collapse chrome is state-driven in JS, not CSS.) */
/* Season Brief body. It comes from the shared briefCard() wrapper (also used by
   the per-event auction briefs, so the module stays untouched), which draws its
   own bordered box and repeats the title — inside the Season Brief card shell
   that reads as a box in a box. Flatten the wrapper and drop its title row so
   the shell alone supplies the chrome, matching State of the Market. */
.sb-flat > div{background:transparent!important;border:none!important;padding:0!important;}
.sb-flat > div > div:first-child{display:none;}
.label{font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:400;letter-spacing:0.18em;text-transform:uppercase;color:var(--textDim);margin-bottom:6px;}
.divider{height:1px;background:var(--b0);margin:14px 0;}
.tier-badge{display:inline-flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;padding:3px 9px;border-radius:0;}
.tier-badge .dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;}
/* Model Index scroller — bounded-height table with a pinned header. The
   sticky must live on the th (not thead) and carry its own background, and
   the border moves to a box-shadow because borders scroll away under
   position:sticky. */
.mi-scroll thead th{position:sticky;top:0;z-index:2;background:var(--s1);box-shadow:0 1px 0 var(--b1);}
/* Inset by the 7px styled scrollbar gutters so the fade never paints over the
   scroller's own scrollbars; gradient ends on --s0 (the table surface), not
   --bg, so it reads as the surface fading out rather than a darker band. */
.mi-fade{position:absolute;top:0;right:7px;bottom:7px;width:56px;pointer-events:none;background:linear-gradient(to right,transparent,rgba(14,17,21,0.92));opacity:0;transition:opacity 0.15s;z-index:3;}
.filter-pill{padding:6px 14px;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:500;cursor:pointer;border:1px solid var(--b0);border-radius:0;background:transparent;color:var(--textSec);transition:all 0.15s ease;letter-spacing:0.14em;text-transform:uppercase;}
.filter-pill:hover{border-color:var(--b1);color:var(--text);}
.filter-pill.active{border-color:var(--accent);background:var(--accentD);color:var(--accent);}
.stat-pill{background:var(--cardWash),var(--s0);border:1px solid var(--b0);border-radius:var(--cardR);padding:9px 14px;
  box-shadow:var(--cardLip);transition:border-color 0.15s ease,box-shadow 0.15s ease;}
.stat-pill:hover{border-color:var(--b1);box-shadow:var(--cardLipHi);}
.stat-pill .sl{font-family:'IBM Plex Mono',monospace;font-size:8px;font-weight:500;text-transform:uppercase;letter-spacing:0.18em;color:var(--textDim);margin-bottom:3px;}
.stat-pill .sv{font-size:14px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;}
.sort-th{padding:9px 12px;text-align:left;cursor:pointer;user-select:none;font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:var(--textDim);border-bottom:1px solid var(--b0);white-space:nowrap;transition:color 0.15s;}
.sort-th:hover{color:var(--text);}
.sort-th.active{color:var(--accent);}
/* Inactive-column sort affordance: faint at rest, brightens on header hover. */
.sort-th .sort-hint{color:var(--textMut);opacity:0.45;transition:opacity 0.15s;}
.sort-th:hover .sort-hint{opacity:1;}
/* Model Directory header sits white and semibold rather than the shared dim
   default — the table is dense enough that a dim header read as a caption. The
   hover and active states are re-stated here because this selector outranks
   the plain .sort-th ones; without them the sort affordance would be lost. */
.mi-scroll thead th.sort-th{color:var(--text);font-weight:600;}
.mi-scroll thead th.sort-th:hover{color:var(--gold);}
.mi-scroll thead th.sort-th.active{color:var(--accent);}
.detail-overlay{position:fixed;inset:0;z-index:900;background:var(--bg);overflow-y:auto;display:none;}
.detail-overlay.open{display:block;}
canvas{max-width:100%;}

/* Live ticker strip */
.ticker-wrap{background:#000;border-bottom:1px solid var(--b0);overflow:hidden;position:relative;}
.ticker-track{display:flex;gap:32px;padding:7px 0;white-space:nowrap;animation:ticker-scroll 144s linear infinite;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.08em;font-variant-numeric:tabular-nums;}
.ticker-wrap:hover .ticker-track{animation-play-state:paused;}
.ticker-item{display:inline-flex;align-items:center;gap:8px;color:var(--textSec);flex-shrink:0;}
.ticker-item .sym{color:var(--text);font-weight:600;letter-spacing:0.14em;}
.ticker-item .px{color:var(--text);}
.ticker-item .chg.up{color:var(--accent);}
.ticker-item .chg.down{color:var(--neg);}
.ticker-item .dot-sep{color:var(--textMut);}
@keyframes ticker-scroll{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}

/* Status badges */
.status-sold{color:var(--accent);font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;}
.status-rnm{color:var(--neg);font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;}

/* Chart bg flat */
.chart-container{background:var(--s0);}

/* Sharp-edge buttons */
button.btn-primary{padding:9px 22px;font-size:10px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;cursor:pointer;border:1px solid var(--accent);border-radius:0;background:var(--accentD);color:var(--accent);font-family:'IBM Plex Mono',monospace;transition:all 0.15s;}
button.btn-primary:hover{background:var(--accent);color:var(--bg);}
button.btn-gold{padding:9px 22px;font-size:10px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;cursor:pointer;border:1px solid var(--gold);border-radius:0;background:var(--goldD);color:var(--gold);font-family:'IBM Plex Mono',monospace;transition:all 0.15s;}
button.btn-gold:hover{background:var(--gold);color:var(--bg);}
.btn-secondary{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;padding:9px 18px;background:transparent;color:#aaa;border:1px solid #333;cursor:pointer;transition:all 0.15s;border-radius:0}
.btn-secondary:hover{border-color:#daa520;color:#daa520}
.btn-text{background:none;border:none;color:#aaa;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;cursor:pointer;padding:2px 4px;transition:color 0.12s}
.btn-text:hover{color:#daa520}

/* Portfolio drawer */
.portfolio-drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.72);z-index:998}
/* Terminal panel, not a grey sheet (2026-08-08, with the auth modal): opaque
   token fills, hairline edges, and the green capline that marks a primary
   surface. The capline is a border-image-less ::before so the drawer keeps
   overflow:hidden for its slide. */
.portfolio-drawer{position:fixed;top:0;right:0;width:560px;max-width:100vw;height:100vh;background:#0E1115;border-left:1px solid rgba(255,255,255,0.10);z-index:999;display:flex;flex-direction:column;transform:translateX(100%);transition:transform 0.2s ease-out;overflow:hidden}
.portfolio-drawer::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:1;background:linear-gradient(90deg,#1FB088,rgba(31,176,136,0.33) 55%,transparent)}
.portfolio-drawer.open{transform:translateX(0)}
.portfolio-drawer-header{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:1px solid rgba(255,255,255,0.08)}
.drawer-close{background:none;border:none;color:#8A9199;font-size:22px;cursor:pointer;padding:0;width:32px;height:32px;line-height:1}
.drawer-close:hover{color:#DCE1E6}
.portfolio-drawer-body{flex:1;overflow-y:auto;padding:18px 22px}
.form-section{margin-bottom:18px}
.form-section-title{font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:600;letter-spacing:0.24em;text-transform:uppercase;color:#8A9199;margin-bottom:12px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,0.06)}
/* Numbered register marks — same idiom as the My Desk panel headers. */
.form-section-title .idx,.form-fold summary .idx{color:rgba(31,176,136,0.75);margin-right:9px;letter-spacing:0.18em}
/* Two-column field grid — pairs short fields to halve the form's height.
   .full spans both columns (selects, VIN+decode, notes). align-items:end
   keeps inputs bottom-aligned when adjacent labels wrap to different heights. */
.form-fields{display:grid;grid-template-columns:1fr 1fr;gap:11px 14px;align-items:end}
.form-row{display:flex;flex-direction:column;gap:4px;min-width:0}
.form-row.full{grid-column:1 / -1}
.form-row span{font-family:'IBM Plex Mono',monospace;font-size:9.5px;color:#9a9a9a;letter-spacing:0.09em}
.form-row input,.form-row select,.portfolio-drawer-body textarea{width:100%;box-sizing:border-box;font-family:'IBM Plex Mono',monospace;font-size:12px;background:#12161B;color:#DCE1E6;border:1px solid rgba(255,255,255,0.10);padding:7px 9px;outline:none;border-radius:2px}
.form-row input:focus,.form-row select:focus,.portfolio-drawer-body textarea:focus{border-color:#C99D4A}
.form-row.checkbox{grid-column:1 / -1;flex-direction:row;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:10px;color:#aaa}
.form-row.checkbox input{width:auto}
.portfolio-drawer-footer{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:18px 24px;border-top:1px solid rgba(255,255,255,0.08);background:#0B0E12}

/* ── Dual-thumb range (My Feed price band, 2026-08-08) ──────────────────────
   Two full-width <input type=range> stacked over one track. The inputs take
   pointer-events:none and only the thumbs re-enable it, so both thumbs stay
   grabbable anywhere along the bar instead of the upper input swallowing every
   click. The track is inset by half a thumb because a browser places the thumb
   CENTRE at pct of (width − thumb) + thumb/2 — without the inset, the fill and
   the thumbs disagree by up to 7px at the ends. */
.qd-range{position:relative;height:30px;margin-top:6px}
.qd-range-track{position:absolute;top:14px;left:7px;right:7px;height:3px;background:#1B2027;border:1px solid rgba(255,255,255,0.06)}
.qd-range-fill{position:absolute;top:0;bottom:0;background:#1FB088}
.qd-range-in{position:absolute;top:6px;left:0;width:100%;height:18px;margin:0;padding:0;background:none;border:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.qd-range-in:focus{outline:none}
.qd-range-in::-webkit-slider-runnable-track{background:none;border:none;height:18px}
.qd-range-in::-moz-range-track{background:none;border:none;height:18px}
.qd-range-in::-webkit-slider-thumb{pointer-events:auto;-webkit-appearance:none;width:14px;height:14px;margin-top:2px;border-radius:50%;background:#0E1115;border:2px solid #1FB088;cursor:grab;box-shadow:0 0 0 3px rgba(31,176,136,0.10);transition:box-shadow 0.15s}
.qd-range-in::-moz-range-thumb{pointer-events:auto;width:14px;height:14px;border-radius:50%;background:#0E1115;border:2px solid #1FB088;cursor:grab;box-shadow:0 0 0 3px rgba(31,176,136,0.10)}
.qd-range-in:hover::-webkit-slider-thumb,.qd-range-in:focus::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(31,176,136,0.22)}
.qd-range-in:hover::-moz-range-thumb,.qd-range-in:focus::-moz-range-thumb{box-shadow:0 0 0 5px rgba(31,176,136,0.22)}
.qd-range-in:active::-webkit-slider-thumb{cursor:grabbing}

/* ── Add/Edit Holding: folds + live valuation preview (2026-08-08) ──────────
   Folds are native <details> — no JS state, and typing in the drawer never
   re-renders, so open/closed survives the whole entry. */
.form-fold{margin-bottom:18px}
.form-fold summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:600;letter-spacing:0.24em;text-transform:uppercase;color:#8A9199;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,0.06);transition:color .15s}
.form-fold summary::-webkit-details-marker{display:none}
.form-fold summary:hover{color:#DCE1E6}
.form-fold .fold-cue{margin-left:auto;color:#5a6169;font-size:11px;letter-spacing:0}
.form-fold .fold-cue::before{content:'+'}
.form-fold[open] .fold-cue::before{content:'−'}
.form-fold[open] summary{color:#DCE1E6}
.form-fold>.form-fields{margin-top:12px}

/* Preview strip: three read-only cells the drawer keeps current while the
   form is typed. Panel-stat idiom, one step darker than the fields. */
.hp-strip{display:flex;gap:0;margin:0 0 18px;border:1px solid rgba(255,255,255,0.08);border-left:2px solid #1FB088;background:#0B0E12;border-radius:2px;overflow:hidden}
.hp-cell{flex:1;min-width:0;padding:10px 14px}
.hp-cell+.hp-cell{border-left:1px solid rgba(255,255,255,0.06)}
.hp-cell .l{display:block;font-family:'IBM Plex Mono',monospace;font-size:8px;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:#8A9199;margin-bottom:4px}
.hp-cell .v{display:block;font-family:'IBM Plex Mono',monospace;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-empty{display:block;width:100%;padding:11px 14px;font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:#5a6169}
.hp-foot{margin-right:auto;display:inline-flex;align-items:baseline;gap:9px;font-family:'IBM Plex Mono',monospace;min-width:0}
.hp-foot .l{font-size:8px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:#8A9199}
.hp-foot .v{font-size:12px;font-weight:700;white-space:nowrap}

/* ── Auction Hub (design handoff 2026-07-16) ─────────────────────────────── */
.hub-grid{display:grid;grid-template-columns:minmax(0,1fr) 780px;gap:0}
@media (max-width:1240px){.hub-grid{grid-template-columns:360px minmax(0,1fr)}}
@media (max-width:900px){.hub-grid{grid-template-columns:1fr}.hub-grid>div:first-child{border-right:none !important;border-bottom:1px solid rgba(255,255,255,.06)}}
.hub-sc::-webkit-scrollbar{width:8px;height:8px}
.hub-sc::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:4px}
.hub-sc::-webkit-scrollbar-track{background:transparent}
.hub-node{transition:border-left-width .12s ease, background .12s ease}
.hub-node:hover{border-left-width:5px !important;background:#12161B !important}
.hub-row:hover{background:#12161B}
/* Drillable month cells in the Auction Hub tracked-asset grid. */
.hub-cell:hover{background:rgba(31,176,136,0.10);outline:1px solid rgba(31,176,136,0.35);outline-offset:-1px}

/* ── Primary nav tab strip (prominence pass 2026-07-22) ──────────────────── */
/* Seven tabs plus the profile chip can exceed a narrow window. Never wrap or
   squeeze the labels — scroll the strip instead, with the scrollbar hidden so
   the bar keeps its clean edge (tabs stay reachable by trackpad/drag). */
.nav-tabs{display:flex;overflow:visible}
.nav-tabs::-webkit-scrollbar{display:none}

/* ── Factory exterior colour swatches ────────────────────────────────────── */
/* Hovering a swatch names the paint (name · OEM code). This replaces the
   native title tooltip, which was ~1s delayed, drawn in OS chrome that clashed
   with the terminal, and gave no hover affordance — so it read as absent.
   aria-label carries the same string for assistive tech. */
.swatch{position:relative;display:inline-block;border-radius:3px;cursor:help;transition:border-color .12s ease,box-shadow .12s ease}
.swatch:hover{border-color:var(--accent) !important;box-shadow:0 0 0 2px rgba(31,176,136,0.35)}
.swatch::after{
  content:attr(data-tip);
  position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);
  background:var(--s2);color:var(--text);border:1px solid var(--b1);
  font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:0.1em;text-transform:uppercase;
  white-space:nowrap;padding:4px 7px;border-radius:2px;
  opacity:0;visibility:hidden;transition:opacity .12s ease;pointer-events:none;z-index:7;
}
.swatch:hover::after{opacity:1;visibility:visible}

/* ── Asset Detail floating side nav ──────────────────────────────────────────
   Fixed rail on the right edge of the detail overlay. Collapsed to a dot
   column; hovering (or keyboard focus) slides the section labels out. The
   active section's dot glows via the scroll-spy in renderDetail. Hidden
   below 1100px, where the detail page runs single-column and the rail
   would sit on content. */
.ad-sidenav{position:fixed;left:18px;top:64px;z-index:950;
  display:flex;flex-direction:column;gap:2px;padding:5px;
  background:rgba(10,13,16,0.88);backdrop-filter:blur(8px);
  border:1px solid rgba(201,157,74,0.45);box-shadow:0 18px 44px -18px rgba(0,0,0,0.8);
  max-height:82vh;overflow-y:auto;scrollbar-width:none;}
.ad-sidenav::-webkit-scrollbar{display:none;}
/* Collapsed state: a lone gold list glyph. Hover (or keyboard focus) swaps
   the icon for the full section menu. */
.ad-sidenav .sn-icon{display:flex;align-items:center;justify-content:center;width:30px;height:30px;
  color:var(--gold);font-family:'IBM Plex Mono',monospace;font-size:14px;line-height:1;cursor:pointer;}
.ad-sidenav:not(:hover):not(:focus-within) .sn-title,
.ad-sidenav:not(:hover):not(:focus-within) .sn-sep,
.ad-sidenav:not(:hover):not(:focus-within) .sn-item{display:none;}
.ad-sidenav:hover,.ad-sidenav:focus-within{padding:10px 8px;border-color:var(--b1);}
.ad-sidenav:hover .sn-icon,.ad-sidenav:focus-within .sn-icon{display:none;}
.ad-sidenav .sn-title{font:700 8px 'IBM Plex Mono',monospace;letter-spacing:.24em;color:var(--textMut);
  text-transform:uppercase;padding:2px 6px 8px;border-bottom:1px solid var(--b0);margin-bottom:6px;text-align:left;}
.ad-sidenav .sn-item{display:flex;align-items:center;justify-content:flex-end;flex-direction:row-reverse;gap:9px;
  padding:5px 6px;cursor:pointer;border:none;background:none;width:100%;text-align:left;
  color:var(--textMut);font:500 9px 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;
  transition:color .15s;}
.ad-sidenav .sn-item .lbl{opacity:0;transform:translateX(-6px);transition:opacity .18s,transform .18s;
  white-space:nowrap;max-width:0;overflow:hidden;}
.ad-sidenav:hover .sn-item .lbl,.ad-sidenav:focus-within .sn-item .lbl{opacity:1;transform:none;max-width:200px;}
.ad-sidenav .sn-item .dot{width:6px;height:6px;border-radius:50%;background:var(--b1);flex:none;
  transition:background .15s,box-shadow .15s;}
.ad-sidenav .sn-item:hover{color:var(--textSec);}
.ad-sidenav .sn-item.active{color:var(--accent);}
.ad-sidenav .sn-item.active .dot{background:var(--accent);box-shadow:0 0 8px rgba(31,176,136,0.7);}
.ad-sidenav .sn-item.sn-gold.active{color:var(--gold);}
.ad-sidenav .sn-item.sn-gold.active .dot{background:var(--gold);box-shadow:0 0 8px rgba(201,157,74,0.7);}
.ad-sidenav .sn-sep{height:1px;background:var(--b0);margin:5px 4px;}
.ad-sidenav .sn-top{margin-top:6px;border-top:1px solid var(--b0);padding-top:8px;color:var(--textDim);}
@media(max-width:1100px){.ad-sidenav{display:none;}}

/* Basis-toggle info tooltip: a small ⓘ next to every NOMINAL/REAL control.
   Pure CSS hover/focus reveal — survives full render() repaints because the
   markup is emitted inline with each toggle (basisInfoHTML in app.js). */
.basis-info{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;border:1px solid var(--b1);border-radius:50%;cursor:help;flex:none;
  color:var(--textMut);font:600 9px 'IBM Plex Mono',monospace;transition:color .15s,border-color .15s;}
.basis-info:hover,.basis-info:focus{color:var(--gold);border-color:var(--gold);outline:none;}
.basis-info .basis-tip{position:absolute;top:calc(100% + 9px);right:-8px;z-index:60;width:264px;
  padding:11px 13px;background:var(--s1);border:1px solid var(--b1);border-radius:4px;
  box-shadow:0 10px 28px rgba(0,0,0,0.55);text-align:left;text-transform:none;cursor:default;
  font:400 10px/1.65 'IBM Plex Sans',sans-serif;letter-spacing:0.01em;color:var(--textSec);
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s,transform .15s,visibility .15s;}
.basis-info:hover .basis-tip,.basis-info:focus .basis-tip{opacity:1;visibility:visible;transform:none;}
.basis-info .basis-tip b{display:block;font:600 8.5px 'IBM Plex Mono',monospace;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--text);margin:0 0 2px;}
.basis-info .basis-tip b + span{display:block;margin-bottom:8px;}
.basis-info .basis-tip b:last-of-type + span{margin-bottom:0;}

/* Tier pill pulse on the QDV record header (Model Valuation design port). */
@keyframes pulse-dot{0%,100%{opacity:1;}50%{opacity:0.35;}}

/* Dual-thumb price-range slider (Live Listings search bar). Two native range
   inputs overlap on one track: the track itself is drawn by the sibling
   fill/track divs, the inputs are transparent and only their thumbs take
   pointer events, so both thumbs stay draggable. */
.qd-price-slider input[type="range"]{
  position:absolute;left:0;top:0;width:100%;height:16px;margin:0;
  -webkit-appearance:none;appearance:none;background:transparent;
  pointer-events:none;outline:none;border:none;padding:0;
}
.qd-price-slider input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;pointer-events:auto;
  width:12px;height:12px;border-radius:50%;cursor:grab;
  background:#0E1115;border:2px solid #1FB088;margin-top:0;
}
.qd-price-slider input[type="range"]::-webkit-slider-thumb:active{cursor:grabbing;background:#1FB088;}
.qd-price-slider input[type="range"]::-moz-range-thumb{
  pointer-events:auto;width:10px;height:10px;border-radius:50%;cursor:grab;
  background:#0E1115;border:2px solid #1FB088;
}
.qd-price-slider input[type="range"]::-moz-range-track{background:transparent;}

/* Primary nav-tab hover motion (2026-08-03). The active tab keeps its inline
   accent wash + 3px rule; hover on inactive tabs animates a hairline sweep
   from the left edge, a soft rising wash, and the type warming to accent.
   The sweep sits at the same baseline as the active rule so hover literally
   previews the selected state. */
/* Nav hover, tuned for the black bar (2026-08-05): the old rising green wash
   read muddy on #000, so the fill is now a soft bottom-lit glow that blooms
   under the label while a center-out underline draws in — light emerging from
   the rule, not paint sliding over it. Text lifts to a bright mint rather
   than mid-green, which holds contrast against pure black. */
.nav-tab{position:relative;overflow:hidden;transition:color .22s ease,text-shadow .22s ease;}
.nav-tab::before{ /* bottom-lit glow */
  content:'';position:absolute;inset:0;
  background:radial-gradient(70% 110% at 50% 100%,rgba(31,176,136,0.18),transparent 70%);
  opacity:0;
  transition:opacity .28s ease;
  pointer-events:none;
}
.nav-tab::after{ /* center-out underline */
  content:'';position:absolute;left:12px;right:12px;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,#1FB088 18%,#35D6AC 50%,#1FB088 82%,transparent);
  box-shadow:0 0 10px rgba(31,176,136,0.7),0 0 22px rgba(31,176,136,0.25);
  transform:scaleX(0);transform-origin:center;
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
}
.nav-tab:hover{color:#BFF5E4 !important;text-shadow:0 0 12px rgba(31,176,136,0.45);}
.nav-tab:hover::before{opacity:1;}
.nav-tab:hover::after{transform:scaleX(1);}
.nav-tab:active::after{transition-duration:.12s;}
/* Selected tab: inline styles already paint the state — suppress the motion
   layers so hover doesn't double-draw over the 3px accent rule. */
.nav-tab-on::before,.nav-tab-on::after{display:none;}
@media (prefers-reduced-motion:reduce){
  .nav-tab,.nav-tab::before,.nav-tab::after{transition:none;}
}

/* My Desk collapsed row summaries — one clamped line until the row is clicked */
.qd-clamp{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.qd-clamp.open{display:block;-webkit-line-clamp:unset;overflow:visible}

/* ── My Desk dashboard (ported from docs/mockups/my-desk-dashboard-mockup.html) ── */
/* My Desk chrome re-tokened 2026-08-19 to the terminal's system vocabulary —
   the page ran its own dialect (10px-rounded gradient panels, pill chips,
   0.07/0.13 hairlines, hard-coded hex) while every other page sits on
   .card's anatomy: cardWash over --s0, --b0 hairlines, --cardR corners,
   the cardLip inset. Values below reference the tokens so the desk can
   never drift again on a palette change. */
.qd-deskbar{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:4px 2px 14px;border-bottom:1px solid var(--b1);flex-wrap:wrap}
.qd-deskbar .lhs{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.qd-deskbar .eyebrow{font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:600;letter-spacing:.3em;color:var(--accent);text-transform:uppercase}
.qd-deskbar h1{font-family:'IBM Plex Sans',sans-serif;font-size:20px;font-weight:500;margin:0;color:var(--text)}
.qd-deskbar h1 em{font-style:normal;color:var(--gold)}
.qd-deskbar .sub{font-family:'IBM Plex Mono',monospace;font-size:8.5px;font-weight:500;letter-spacing:.14em;color:var(--textMut);text-transform:uppercase}
/* My Desk live clock — Orbitron (nearest Google-Fonts stand-in for HK Modular,
   which has no webfont license we can serve), so it shares the nav wordmark's
   face. Tabular digits keep the ticking seconds from jittering the line width.
   Accent green, kept from its 2026-08-09 spell in the nav strip; back in the
   deskbar (right of the greeting) the same day because its 264px width was the
   nav's left flank and shoved the centred tabs at laptop widths. The deskbar
   has no such constraint, so the sub-1240px responsive shrink went with the
   move. */
.qd-clock{font-family:'Orbitron','IBM Plex Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.16em;color:var(--accent);text-transform:uppercase;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Holdings-row actions dropdown (kebab menu) */
.qd-rowmenu-item{display:block;width:100%;text-align:left;background:transparent;border:none;cursor:pointer;padding:6px 12px;border-radius:var(--cardR);font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text)}
.qd-rowmenu-item:hover{background:var(--goldD);color:var(--gold)}
/* QD Blue Chip era tables — shared constituent/score cells assume left-aligned
   tables; qd-pbody defaults td to right-aligned, so re-anchor the name and
   desirability columns. */
.qd-bluechip-table td:nth-child(2){text-align:left;width:100%}
.qd-bluechip-table td:nth-child(8){text-align:left}
.qd-dash{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
/* Portfolio (880px table) and Model Watchlist (1240px) run the full 12 at every
   width — at span 6 they were 622px and scrolled horizontally by 260px and
   631px. Anything wider than 6 forces them onto their own rows anyway (8+8 > 12),
   so full width is the only option that both stacks cleanly and lets the tables
   breathe. .qd-span6 is kept: nothing uses it today, but the panel helper still
   takes a span argument. */
.qd-span12{grid-column:span 12}.qd-span8{grid-column:span 8}.qd-span7{grid-column:span 7}.qd-span6{grid-column:span 6}.qd-span5{grid-column:span 5}.qd-span4{grid-column:span 4}
@media(max-width:800px){.qd-span8{grid-column:span 12}.qd-span7{grid-column:span 12}.qd-span6{grid-column:span 12}.qd-span5{grid-column:span 12}.qd-span4{grid-column:span 12}}
@media(max-width:800px){.qd-span4{grid-column:span 12}}
/* ── My Desk index rail ────────────────────────────────────────────────────
   Hugs its content instead of filling its grid row. Grid items stretch by
   default, and the ledger beside it is 700px+ tall against the rail's ~400px
   of rows — stretched, the card ran on for 750px of empty gradient below its
   own footnote and read as a panel that had failed to load the rest of itself.
   Six figures are all this is; it should end where they do.

   No row span is needed to keep the feed out of the space underneath: sparse
   auto-placement never backtracks a span-8 item into a 4-column gap, so the
   feed takes the next row on its own regardless. */
.qd-deskrail{align-self:start}
/* No inner scroller. .qd-pbody caps every desk panel at 378px because those
   panels hold long, growing tables that must not run the page off the bottom;
   this one holds a fixed eight rows and a footnote, and the 378px cap put the
   spread and the vintage note below an internal scrollbar — a summary card you
   have to scroll has stopped summarising. The rail is short enough to show
   whole, and align-self:start already keeps it from stretching. */
.qd-deskrail .qd-pbody{max-height:none;overflow:visible}
/* A rail panel that should FILL its grid row instead of sizing to content.
   The grid already stretches the section to the row height (the Tracked
   ledger opposite sets it); these three rules just hand that height down to
   the panel's own scroller, so the tape inside runs to the row's bottom
   rather than stopping at a hard-coded cap. min-height:0 at each flex level
   or the content refuses to shrink and the scroller never engages. */
/* --fill overrides .qd-deskrail's align-self:start — start-alignment is what
   lets rail panels hug their content, and is exactly what a fill panel must
   not do: it stretches to the row height its neighbour sets. */
.qd-panel--fill{display:flex;flex-direction:column;align-self:stretch}
.qd-panel--fill .qd-pbody{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
/* The scroller is absolutely positioned inside its wrap so its content adds
   ZERO intrinsic height — otherwise a 300-line tape would set the grid row's
   height instead of filling the height the ledger opposite already set. */
.qd-fill-wrap{flex:1;min-height:0;position:relative}
.qd-panel--fill .qd-fill-scroll{position:absolute;inset:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#141922 transparent}
/* Desk panel resize grips + hand-sized mode removed 2026-08-19 with the
   two-panel desk — qdDeskPanel no longer emits .qd-rsz/.qd-rszh/--sized. */
/* Rows are index pages behind the click; give them the affordance. */
.qd-idxrow[role="button"]:hover{background:rgba(255,255,255,.03)}
.qd-idxrow[role="button"]:focus-visible{outline:1px solid var(--accent);outline-offset:-1px}
/* The panel is a .card in everything but padding: same wash-over-surface,
   same hairline, same 2px corner, same lip and the same hover lift — the 10px
   radius and private gradient it carried until 2026-08-19 were the loudest
   tell that this page was built apart from the rest of the terminal. */
/* 2026-08-21 — the desk goes dark, finishing what the note above started.
   Measured before the change: My Desk was 1,601 units of --s0 plus 301 of
   --cardWash, where the Auctions page is 1,704 units of true black. The page
   read light for one structural reason — three full-width lifted slabs tile
   the whole viewport, so the surface the rest of the terminal uses SPARINGLY,
   for small raised chrome, was here the entire page.

   The panel is now three planes rather than one slab, which is the same
   relationship every table on the index pages already has:

     frame   --bg     #000000   the panel itself, held by a hairline
     chrome  --s0     #0E1115   the title bar and the stat strip, raised
     well    --well   #070A0D   the data, recessed

   The cardWash gradient and the cardLip inset both go. That white top lip is
   what made a panel read as a slab catching light from above; on a black
   frame it is the one detail that would keep it looking lifted. */
.qd-panel{background:var(--bg);border:1px solid var(--b0);
  border-radius:var(--cardR);
  transition:border-color .15s ease;
  overflow:hidden;display:flex;flex-direction:column;min-width:0}
.qd-panel:hover{border-color:var(--b1)}
.qd-phead{display:flex;align-items:baseline;justify-content:space-between;padding:12px 15px 10px;
  background:var(--s0);border-bottom:1px solid var(--b0);flex:0 0 auto}
.qd-phead .t{display:flex;align-items:baseline;gap:9px}
.qd-phead .idx{font-family:'IBM Plex Mono',monospace;font-size:8px;font-weight:700;color:var(--textDim)}
.qd-phead .name{font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:600;letter-spacing:.2em;color:var(--text);text-transform:uppercase}
.qd-phead .name b{color:var(--accent);font-weight:600}
.qd-phead .meta{font-family:'IBM Plex Mono',monospace;font-size:8px;font-weight:500;letter-spacing:.12em;color:var(--textMut);text-transform:uppercase}
/* .qd-pchev survives for the deck component's whole-deck collapse; the
   panel-level .qd-phead--btn collapse header came off 2026-08-19. */
.qd-pchev{font-size:8px;color:#6E767E;transition:transform .18s ease,color .18s ease;display:inline-block;line-height:1}
.qd-pchev[data-shut="true"]{transform:rotate(-90deg)}
@media (prefers-reduced-motion: reduce){.qd-pchev{transition:none}}
/* ── Era section headers (QD Blue Chip register) ───────────────────────────
   Scoped with .qd-era rather than restyling .qd-phead directly: that class is
   also the header of every My Desk panel, and doubling those titles is not
   what this asks for.

   The header becomes its own black title bar rather than sitting on the
   panel's gradient — at this type size it needs to read as a divider between
   eras, not as a caption inside one. The span/count moves up beside the title
   (flex-start, not space-between) because it qualifies the era; parked at the
   far right it was a stray figure with nothing to attach itself to. */
.qd-era .qd-phead{background:#000;justify-content:flex-start;gap:16px;padding:16px 18px 14px}
.qd-era .qd-phead .idx{font-size:13px}
/* Doubled, 9.5px → 19px. Tracking comes DOWN as the size goes up: .2em is set
   for 9px chrome and turns a 19px mono line into a picket fence. */
.qd-era .qd-phead .name{font-size:19px;letter-spacing:.08em}
/* Gold, and up from 7.5px to 11px — it is now a subtitle to the era rather
   than a footnote in the corner. */
.qd-era .qd-phead .meta{font-size:11px;letter-spacing:.1em;color:var(--gold)}
/* The trailing word ("… ERA", "… CARS") is emitted in a <b> and inherits the
   green the My Desk panels use to accent the second half of their titles. On
   an era header it is not a second half — it is the last word of one name, and
   colouring it green split "ANALOG SUPERCAR ERA" into two things. `inherit`
   rather than a literal white so it tracks .name exactly and the heading can
   never end up two shades. My Desk keeps the green accent. */
.qd-era .qd-phead .name b{color:inherit}
.qd-pstats{display:flex;background:var(--s0);border-bottom:1px solid var(--b0);flex:0 0 auto}
.qd-pstat{flex:1;padding:9px 14px;border-left:1px solid var(--b0);min-width:0}
.qd-pstat:first-child{border-left:none}
/* Label dim, value bright — the stat idiom every other page uses (the QDV
   metric tiles, the hub stat bands). Both ran full white here. */
.qd-pstat .l{font-family:'IBM Plex Mono',monospace;font-size:8.5px;font-weight:600;letter-spacing:.15em;color:var(--textDim);text-transform:uppercase;white-space:nowrap}
.qd-pstat .v{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:700;margin-top:4px;white-space:nowrap;color:var(--text)}
.qd-pbody{background:var(--well);overflow-y:auto;overflow-x:auto;max-height:378px;scrollbar-width:thin;scrollbar-color:#141922 transparent}
.qd-pbody table{width:100%;border-collapse:collapse}
.qd-pbody th{font-family:'IBM Plex Mono',monospace;font-size:8.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--textSec);
  text-align:right;padding:8px 13px;border-bottom:1px solid var(--b1);position:sticky;top:0;background:var(--s0);z-index:1}
.qd-pbody th:first-child,.qd-pbody th.l{text-align:left}
.qd-pbody td{padding:9px 13px;border-bottom:1px solid rgba(255,255,255,.035);font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:500;
  text-align:right;white-space:nowrap;vertical-align:middle}
.qd-pbody td:first-child,.qd-pbody td.l{text-align:left}
.qd-pbody tbody tr{transition:background .12s}
.qd-pbody tbody tr:hover{background:rgba(31,176,136,.045)}
/* ── The tracked ledger — one table for live listings, upcoming lots, watched
   models and chassis dossiers (2026-08-14, replacing four separate panels).
   Everything here is scoped to classes the ledger owns; the row chrome itself
   rides .qd-pbody's existing table styling. ── */
/* The filter bar is how 54 tracked rows get sliced into the four kinds of thing
   you follow — the primary control on this page, and it was the quietest
   element on it: 8px grey type on transparent, lighter than the column heads
   directly beneath it and easy to read as a caption rather than a row of
   buttons. Sized up, given a real surface, and the selected chip now FILLS
   instead of tinting, so which slice you are looking at is legible at a glance
   from across the desk.

   Each chip fills in the colour of the type it selects, passed in as --chip —
   the same colours the LIVE / LOT / MDL / VIN marks carry in column one, so the
   control and the rows it produces are visibly one system. Near-black on all
   four clears AA; the worst case is the model blue at 4.7:1. */
.qd-dchips{display:flex;gap:8px;flex-wrap:wrap;padding:12px 13px;
  background:rgba(255,255,255,.014);border-bottom:1px solid var(--b0)}
/* Squared to the terminal's control idiom (2026-08-19): every other button
   and filter in the system is a sharp rectangle at --cardR — the 999px pills
   were this page's invention. The type-colour fill on the selected chip is
   the part worth keeping, and it survives unchanged. */
.qd-dchip{--chip:var(--accent);
  display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:var(--cardR);cursor:pointer;
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  background:var(--s1);border:1px solid var(--b1);color:var(--textSec);
  transition:color .15s,border-color .15s,background .15s,box-shadow .15s}
/* The count is a badge, not a trailing word: it is a different kind of thing
   from the label and gets read on its own. */
.qd-dchip span{display:inline-block;min-width:15px;text-align:center;padding:2px 6px;border-radius:var(--cardR);
  font-size:9px;line-height:1;background:rgba(255,255,255,.07);color:var(--textMut)}
.qd-dchip:hover{color:var(--text);background:var(--s2);border-color:var(--chip)}
.qd-dchip:hover span{color:var(--text)}
/* Styled tooltip (data-tip) — instant, terminal-idiom, replacing the easy-to-
   miss native title. Anchored under the chip; the chips row sits at the top
   of a tall panel so a below-tooltip can never leave the card. */
.qd-dchip{position:relative}
.qd-dchip[data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 9px);left:0;
  width:290px;max-width:70vw;padding:10px 12px;border-radius:3px;z-index:80;
  background:#0E1115;border:1px solid var(--chip);box-shadow:0 12px 34px rgba(0,0,0,.65);
  font-family:'IBM Plex Sans',sans-serif;font-size:11px;font-weight:400;line-height:1.6;
  letter-spacing:0;text-transform:none;color:#DCE1E6;text-align:left;white-space:normal;
  opacity:0;visibility:hidden;transform:translateY(-3px);pointer-events:none;
  transition:opacity .14s ease,transform .14s ease,visibility 0s linear .14s}
.qd-dchip[data-tip]:hover::after{opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity .14s ease .1s,transform .14s ease .1s,visibility 0s linear .1s}
/* Last chips anchor right so a 290px tooltip can't overflow narrow screens. */
.qd-dchips .qd-dchip:nth-last-child(-n+2)[data-tip]::after{left:auto;right:0}
@media (prefers-reduced-motion:reduce){.qd-dchip[data-tip]::after{transition:none}}
.qd-dchip:focus-visible{outline:2px solid var(--chip);outline-offset:2px}
/* Generic styled tooltip for standalone controls (same look as the chip
   tooltips, right-anchored, neutral border — no --chip dependency). */
.qd-tip{position:relative}
.qd-tip[data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 9px);right:0;
  width:250px;max-width:70vw;padding:10px 12px;border-radius:3px;z-index:80;
  background:#0E1115;border:1px solid #3A414B;box-shadow:0 12px 34px rgba(0,0,0,.65);
  font-family:'IBM Plex Sans',sans-serif;font-size:11px;font-weight:400;line-height:1.6;
  letter-spacing:0;text-transform:none;color:#DCE1E6;text-align:left;white-space:normal;
  opacity:0;visibility:hidden;transform:translateY(-3px);pointer-events:none;
  transition:opacity .14s ease,transform .14s ease,visibility 0s linear .14s}
.qd-tip[data-tip]:hover::after{opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity .14s ease .1s,transform .14s ease .1s,visibility 0s linear .1s}
@media (prefers-reduced-motion:reduce){.qd-tip[data-tip]::after{transition:none}}
.qd-dchip[data-on="true"]{background:var(--chip);border-color:var(--chip);color:#06100D;
  box-shadow:0 2px 14px -5px var(--chip)}
.qd-dchip[data-on="true"] span{background:rgba(0,0,0,.24);color:#06100D}
@media (prefers-reduced-motion:reduce){.qd-dchip{transition:none}}
/* Type code (LIVE/LOT/MDL/VIN) and per-row tag (end time, tier, liquidity).
   Both take their colour inline — the type's from QD_DESK_TYPES, the tag's
   from whatever it is reporting. */
.qd-dmark,.qd-dtag{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:7.5px;font-weight:700;
  letter-spacing:.11em;line-height:1;padding:3px 5px;border:1px solid;border-radius:2px;white-space:nowrap}
.qd-dtag{text-transform:uppercase}
/* The caption under every figure. Mark and Signal mean different things per
   row type, so each cell says which one it is rather than the column head. */
.qd-dcap{font-family:'IBM Plex Mono',monospace;font-size:7.5px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:#6E767E;margin-top:2px}
/* Group headers and empty states are rows in the same table, so they need to
   beat .qd-pbody td's padding/right-alignment defaults. */
.qd-dgrp{padding:9px 12px 6px!important;text-align:left!important;background:#0A0D10;
  border-bottom:1px solid rgba(255,255,255,.07)!important;
  font-family:'IBM Plex Mono',monospace;font-size:8px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:#8A9199}
.qd-dgrp span{font-size:6px;vertical-align:2px;margin-right:5px}
.qd-dgrp b{color:#6E767E;font-weight:700;margin-left:7px}
.qd-dempty{padding:20px 12px!important;text-align:center!important;line-height:1.7;
  font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:#8A9199}
/* Neither is a record, so neither takes the row hover. */
.qd-pbody tbody tr.qd-dgrprow:hover{background:transparent}
/* The ledger is the page's primary surface now and carries four groups; the
   378px default showed about seven rows of it. */
.qd-panel--tall .qd-pbody{max-height:620px}

.qd-asset{font-family:'IBM Plex Sans',sans-serif;font-size:11.5px;font-weight:600;color:#DCE1E6}
.qd-assetsub{font-family:'IBM Plex Mono',monospace;font-size:8px;font-weight:500;letter-spacing:.09em;color:#6E767E;text-transform:uppercase;margin-top:3px;display:flex;gap:6px;align-items:center}
.qd-chip{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:8px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:3px 7px;border-radius:999px;border:1px solid rgba(255,255,255,.13);color:#A8AFB6}
.qd-chip.today{color:#C99D4A;border-color:rgba(201,157,74,.4);background:rgba(201,157,74,.08)}
.qd-chip.live{color:#1FB088;border-color:rgba(31,176,136,.4);background:rgba(31,176,136,.10)}
.qd-x{background:transparent;border:none;color:#9AA1A9;font-size:13px;line-height:1;cursor:pointer;padding:0 2px}
.qd-x:hover{color:#D14E4E}

/* ── Sub-tab hover motion (Auctions / Data Hub / Portfolio strips) ──────────
   Companion to the .nav-tab treatment: a center-out underline sweep with a
   soft glow and a faint rising wash. The active tab holds a full-width solid
   underline and opts out of the hover layers. */
.qd-subtab{position:relative;padding:10px 18px;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:500;cursor:pointer;background:transparent;border:none;outline:none;margin-bottom:-1px;letter-spacing:0.18em;text-transform:uppercase;color:#A8AFB6;transition:color .22s ease,text-shadow .22s ease;}
.qd-subtab::after{content:'';position:absolute;left:16px;right:16px;bottom:0;height:2px;background:#1FB088;border-radius:1px;transform:scaleX(0);transform-origin:center;opacity:.7;box-shadow:0 0 8px rgba(31,176,136,.5);transition:transform .28s cubic-bezier(.22,.61,.36,1),opacity .28s ease,left .28s ease,right .28s ease;}
.qd-subtab::before{content:'';position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(180deg,transparent,rgba(31,176,136,.07));opacity:0;pointer-events:none;transition:opacity .25s ease;}
.qd-subtab:hover{color:#1FB088;text-shadow:0 0 14px rgba(31,176,136,.4);}
.qd-subtab:hover::after{transform:scaleX(1);}
.qd-subtab:hover::before{opacity:1;}
.qd-subtab.on{color:#1FB088;text-shadow:none;}
.qd-subtab.on::after{transform:scaleX(1);opacity:1;left:0;right:0;box-shadow:none;}
.qd-subtab.on::before{opacity:0;}
@media (prefers-reduced-motion:reduce){.qd-subtab,.qd-subtab::before,.qd-subtab::after{transition:none;}}

/* Deck-tile expand affordance: a corner glyph on every collapsed carousel
   tile (Notable Upcoming Lots / Featured Sales); the label slides out on
   tile hover so tiles read as expandable without permanent clutter. */
.deck-expand-chip{position:absolute;top:8px;right:8px;z-index:2;display:flex;align-items:center;gap:0;
  padding:3px 7px;background:rgba(10,13,16,0.72);border:1px solid rgba(255,255,255,0.16);border-radius:999px;
  color:var(--textSec);pointer-events:none;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.deck-expand-chip .dx-ico{font-size:11px;line-height:1;}
.deck-expand-chip .dx-lbl{font:600 7.5px 'IBM Plex Mono',monospace;letter-spacing:0.16em;text-transform:uppercase;
  max-width:0;overflow:hidden;white-space:nowrap;opacity:0;transition:max-width .25s ease,opacity .2s ease,margin .25s ease;}
.deck-tile:hover .deck-expand-chip{color:var(--gold);border-color:var(--gold);}
.deck-tile:hover .deck-expand-chip .dx-lbl{max-width:110px;opacity:1;margin-right:5px;}

/* ─── Asset Detail: section rail, performance ribbon, body grid ───────────
   The body grid's chart track is minmax(0,1fr) rather than 1fr on purpose:
   a Chart.js canvas reports an intrinsic width, and a bare 1fr track has an
   auto (min-content) floor, so the column grows on resize but never shrinks
   — the chart card then overhangs and falls out of alignment with the
   Reference card beside it. minmax(0,…) lets the track shrink freely, and
   min-width:0 on both children keeps their contents from re-inflating it. */
.ad-rail{display:flex;gap:0;overflow-x:auto;background:var(--s0);
  border-bottom:1px solid var(--b0);padding:0 24px;position:sticky;top:33px;z-index:9;scrollbar-width:none;}
.ad-rail::-webkit-scrollbar{display:none;}
/* ─── Growth-chart legend: two bands on one 4-column rhythm ──────────────
   The chips used to ragged-wrap in a single flex row, so nothing lined up
   and the grouping was whatever the wrap happened to produce. Both bands
   now share one grid and every chip is a single column, so all six are
   the same size and their swatches, names and values align in the same
   columns straight down the block. The column count is FIXED per
   breakpoint rather than auto-fit: auto-fit resolves per grid, so the
   2-chip Index band and the 4-chip Reference band would settle on
   different track widths and the chips would stop matching. Breakpoints
   are set from the widest chip's measured need at 12px (412px — "AVG
   CONSTITUENT (EQUAL-WEIGHTED)" + its HIDDEN value), so no label
   ellipsizes at any step. Each chip is itself a grid
   (swatch / name / value) with the value right-aligned and tabular, which
   is what makes the numbers read as a column rather than as trailing text.
   Reference rates are ordered ceiling → floor by annual rate. */
/* 2026-08-08 — the whole legend was set at 12px: caption, hint, chip name and
   value all the same size, so nothing led and the block read as a wall. Type
   now steps 9 / 8 / 10 / 10, in line with the terminal's other mono chrome
   (section titles 9px, table headers 8.5px), and the chips lost ~25% of their
   box. Everything below is that one pass. */
/* ── Chart legend — instrument rail (2026-08-08 redesign) ──────────────────
   Replaced a grid of bordered pills. The pills gave every series a border, a
   fill, a swatch and two numbers, four rows deep above the chart they were
   meant to annotate — eleven boxed objects competing with the data. This is
   the same information with the chrome removed.

   Three ideas carry it. The series COLOUR is the only affordance an item
   needs, so nothing is boxed. A hairline RULE running out from each group
   label does the work the caption rows used to, and ties the label to that
   group's controls. And the numbers sit in their own tabular column instead
   of inside the label, so the eye can read down a rate or a delta without
   parsing a sentence each time.

   Type is deliberately mixed: names in Plex Sans, figures in Plex Mono with
   tabular numerals. The old block set everything in uppercase mono, which is
   what made it read as a wall rather than as a list. */
.qd-lg{display:flex;flex-direction:column;gap:14px;}
.qd-lg-grp{display:flex;flex-direction:column;gap:6px;transition:opacity .18s;}
/* A group with nothing showing dims as a whole — state legible at the group
   level, before you read a single item. */
.qd-lg-grp[data-off="1"]{opacity:.55;}
.qd-lg-hd{display:flex;align-items:center;gap:11px;}
.qd-lg-ttl{font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--textSec);white-space:nowrap;}
/* The qualifier is prose, not a label — Sans and sentence case, so it reads as
   an aside to the title rather than as a second title. */
.qd-lg-sub{font-family:'IBM Plex Sans',sans-serif;font-size:10.5px;color:var(--textDim);
  white-space:nowrap;}
.qd-lg-rule{flex:1 1 auto;min-width:14px;height:1px;background:var(--b0);}
.qd-lg-all{font-family:'IBM Plex Mono',monospace;font-size:8.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--textDim);background:none;border:none;padding:2px 0;
  cursor:pointer;white-space:nowrap;transition:color .13s;}
.qd-lg-all:hover{color:var(--accent);}
.qd-lg-all:focus-visible{outline:1px solid var(--accent);outline-offset:3px;}
/* 26px column gap, 0 row gap: wide enough that neighbouring items never read as
   one phrase, tight enough that a group still scans as a single band. */
.qd-lg-sec{display:flex;flex-direction:column;gap:8px;}
.qd-lg-sec-hd{display:flex;align-items:baseline;gap:11px;padding-bottom:5px;border-bottom:1px solid var(--b1);}
.qd-lg-sec-ttl{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent);}
.qd-lg-sec-bd{display:flex;flex-direction:column;gap:11px;padding-left:14px;border-left:2px solid var(--b1);}
.qd-lg-row{display:flex;flex-wrap:wrap;gap:0 26px;}
.qd-lg-it{display:inline-flex;align-items:center;gap:9px;padding:3px 0;background:none;border:none;
  border-bottom:1px solid transparent;cursor:pointer;text-align:left;transition:border-color .13s;}
.qd-lg-it:hover{border-bottom-color:var(--b2);}
.qd-lg-it:focus-visible{outline:1px solid var(--accent);outline-offset:3px;}
/* The swatch is the line itself — same colour, same dash. Off, it shortens and
   fades rather than the label being struck through: a strike reads as an error
   state, and at 10px it also made the name genuinely hard to read. */
.qd-lg-sw{flex:0 0 auto;display:inline-block;width:16px;height:0;border-top-width:2px;
  transition:opacity .18s,width .18s;}
.qd-lg-it[data-on="0"] .qd-lg-sw{opacity:.32;width:9px;}
.qd-lg-nm{font-family:'IBM Plex Sans',sans-serif;font-size:12px;font-weight:500;color:var(--text);
  white-space:nowrap;transition:color .13s;}
.qd-lg-it[data-on="0"] .qd-lg-nm{color:var(--textMut);font-weight:400;}
.qd-lg-it:hover .qd-lg-nm{color:#fff;}
.qd-lg-rt{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--textDim);
  font-variant-numeric:tabular-nums;white-space:nowrap;}
.qd-lg-dl{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:700;
  font-variant-numeric:tabular-nums;white-space:nowrap;}
.qd-lg-it[data-on="0"] .qd-lg-rt{opacity:.45;}

/* ─── Section-rail hover: one travelling filament ────────────────────────
   No tab owns an underline. A single indicator glides between them —
   hovering borrows it, leaving the rail springs it back to the active
   section — on an overshoot easing, so it settles like an instrument
   needle rather than sliding linearly. The tab itself lights from its
   bottom edge: that glow is a background-size animation (bottom-anchored,
   0% → 100% height) rather than a pseudo-element, so the wash paints
   behind the label instead of tinting it, and needs no stacking context.
   .ad-rail is position:sticky, which already makes it the containing
   block for the absolutely-positioned filament. */
.ad-rail-i{font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--textMut);border:none;border-bottom:2px solid transparent;
  background:linear-gradient(180deg,rgba(31,176,136,0),rgba(31,176,136,0.13)) no-repeat bottom/100% 0%;
  padding:9px 14px;white-space:nowrap;cursor:pointer;
  transition:color .22s ease,background-size .34s cubic-bezier(.22,.61,.36,1);}
.ad-rail-i:hover{color:var(--text);background-size:100% 100%;}
.ad-rail-i.on{color:var(--accent);border-bottom-color:var(--accent);}
/* The static underline above is the no-JS fallback; once the filament is
   live it owns the active marker, so the per-tab border stands down. */
.ad-rail.has-ind .ad-rail-i.on{border-bottom-color:transparent;}
.ad-rail-ind{position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--accent);
  box-shadow:0 0 9px rgba(31,176,136,0.45),0 0 2px rgba(31,176,136,0.9);
  opacity:0;pointer-events:none;will-change:transform,width;
  transition:transform .44s cubic-bezier(.34,1.18,.4,1),width .44s cubic-bezier(.34,1.18,.4,1),
             opacity .22s ease,box-shadow .25s ease;}
/* Opacity is driven by classes, never by an inline style: the filament's
   position/width are set inline by JS, and an inline opacity would outrank
   the .previewing rule below and silently kill the dim state. */
.ad-rail.ready .ad-rail-ind{opacity:1;}
/* Previewing another tab: the filament dims — it is pointing at where you
   might go, not where you are. */
.ad-rail.ready.previewing .ad-rail-ind{opacity:.55;box-shadow:0 0 5px rgba(31,176,136,0.25);}
@media (prefers-reduced-motion:reduce){
  .ad-rail-i{background-image:none;transition:color .12s ease;}
  .ad-rail-ind{transition:opacity .12s ease;}
}

.ad-ribbon{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--b0);}

/* align-items:stretch (not start) so the Reference card and the Price
   History card share one bottom edge — under `start` each sized to its own
   content and the two borders ended at different heights. */
.ad-body{display:grid;grid-template-columns:340px minmax(0,1fr);gap:14px;align-items:stretch;margin-bottom:14px;
  transition:grid-template-columns .5s cubic-bezier(.4,0,.2,1),column-gap .5s cubic-bezier(.4,0,.2,1);}
/* Expanded chart: the Reference column animates to zero width and the chart
   grows leftward over it (grid-template-columns transitions in every current
   engine). qdPhExpandToggle flips the class in place — a setState re-render
   would rebuild the DOM in its final state and kill the animation. */
.ad-body-wide{grid-template-columns:0px minmax(0,1fr);column-gap:0;}
/* The Reference card clips rather than reflows while its track collapses:
   min-width pins the content at its full-column layout (340px track − 2px
   borders, border-box) and the card fades out under the advancing chart. */
.ad-refcard{min-width:0;overflow:hidden;transition:opacity .35s ease,visibility 0s linear 0s;}
.ad-refcard>div{min-width:338px;}
.ad-body-wide .ad-refcard{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .5s;}
@media (max-width:1180px){
  .ad-ribbon{grid-template-columns:repeat(3,minmax(0,1fr));}
}
/* Reference + Price History stay side by side well past laptop widths (the
   chart column just gets narrower); they only stack once the chart would
   drop below a readable width. */
@media (max-width:900px){
  .ad-body{grid-template-columns:minmax(0,1fr);}
  /* Single-column layout: a zero-width track makes no sense — the expanded
     state simply removes the Reference row. */
  .ad-body-wide .ad-refcard{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .ad-body,.ad-refcard,.ad-body-wide .ad-refcard{transition:none;}
}
@media (max-width:620px){.ad-ribbon{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* Primary CTA "breath" — the auth modal's Request Access / Sign In button.
   A slow halo swell rather than a scale or a fade: at full width a scale wobbles
   the layout, and a fade reads as the button disabling itself. 3.6s is roughly a
   resting breath rate; anything faster reads as an alert, not an invitation.
   Pauses on hover so the state you are about to click is steady, and the busy
   state drops the class entirely (a pulsing "Working…" is a contradiction). */
@keyframes qd-breathe{
  0%,100%{box-shadow:0 0 0 0 rgba(31,176,136,0);filter:brightness(1);}
  50%{box-shadow:0 0 18px 1px rgba(31,176,136,0.38);filter:brightness(1.07);}
}
.qd-breathe{animation:qd-breathe 3.6s ease-in-out infinite;}
.qd-breathe:hover{animation-play-state:paused;}
@media (prefers-reduced-motion:reduce){.qd-breathe{animation:none;}}

/* ── FACTOR LAB console (2026-08-09 redesign) ───────────────────────────────
   Rail of five instruments + one stage. Designed in
   docs/mockups/factor-lab-console-2026-08.html; classes are fl- to stay clear
   of the qd- desk chrome. The rail is the page's KPI strip and its nav at
   once — each card is a reading you can act on without opening the panel. */
.fl-console{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;align-items:start}
@media(max-width:980px){.fl-console{grid-template-columns:1fr}.fl-rail{position:static}}
.fl-rail{display:flex;flex-direction:column;gap:10px;position:sticky;top:18px}
.fl-inst{background:linear-gradient(160deg,#12161B,#0E1115);border:1px solid rgba(255,255,255,.10);
  padding:13px 15px 11px;cursor:pointer;position:relative;text-align:left;width:100%;color:inherit;font:inherit;
  transition:border-color .2s,background .2s}
.fl-inst:hover{border-color:rgba(255,255,255,.18)}
.fl-inst.on{border-color:rgba(31,176,136,.55);background:linear-gradient(160deg,#12191b,#0e1310)}
.fl-inst.on::before{content:'';position:absolute;left:-1px;top:-1px;bottom:-1px;width:2px;background:#1FB088}
.fl-inst .no{font-family:'IBM Plex Mono',monospace;font-size:8px;color:#6E767E;letter-spacing:.2em}
.fl-inst .nm{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#A8AFB6;margin:3px 0 8px}
.fl-inst.on .nm{color:#DCE1E6}
.fl-inst .rd{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.fl-inst .val{font-family:'IBM Plex Mono',monospace;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.fl-inst .qual{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:#6E767E;text-align:right;line-height:1.6}
.fl-meter{margin-top:9px;height:3px;background:#1B2027;position:relative;overflow:hidden}
.fl-meter i{position:absolute;top:0;bottom:0;background:#1FB088}
.fl-method{border:1px dashed rgba(255,255,255,.10);padding:12px 15px;font-family:'IBM Plex Mono',monospace;font-size:8px;line-height:1.9;letter-spacing:.1em;text-transform:uppercase;color:#6E767E}
.fl-method b{color:#A8AFB6;font-weight:600}
.fl-stage{background:#0E1115;border:1px solid rgba(255,255,255,.10);min-height:520px}
.fl-shead{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:20px 24px 0;flex-wrap:wrap}
.fl-ord{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;font-size:42px;color:rgba(201,157,74,.4);line-height:.8;flex-shrink:0}
.fl-hgroup{flex:1;min-width:220px}
.fl-shead h2{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#DCE1E6;margin:0}
.fl-q{font-family:'IBM Plex Sans',sans-serif;font-size:12.5px;color:#8A9199;margin-top:6px;max-width:520px;line-height:1.6}
.fl-bigread{text-align:right;flex-shrink:0}
.fl-bigread .v{font-family:'IBM Plex Mono',monospace;font-size:32px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.fl-bigread .l{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:#6E767E;margin-top:6px;line-height:1.7}
.fl-spread{padding:18px 24px 4px}
.fl-cap{font-family:'IBM Plex Mono',monospace;font-size:8.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#A8AFB6;margin-bottom:11px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.fl-cap span{color:#6E767E;font-weight:400;letter-spacing:.1em}
.fl-srow{display:grid;grid-template-columns:170px minmax(0,1fr) 84px;gap:12px;align-items:center;padding:4px 0}
.fl-srow .m{font-family:'IBM Plex Sans',sans-serif;font-size:11px;font-weight:600;color:#DCE1E6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
.fl-srow .m small{display:block;font-family:'IBM Plex Mono',monospace;font-size:8px;font-weight:400;color:#6E767E;letter-spacing:.08em;text-transform:uppercase}
.fl-srow .v{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.fl-track{position:relative;height:14px}
.fl-track::before{content:'';position:absolute;left:50%;top:-4px;bottom:-4px;width:1px;background:rgba(255,255,255,.18)}
.fl-track i{position:absolute;top:2px;bottom:2px}
.fl-track i.pos{left:50%;background:linear-gradient(90deg,rgba(31,176,136,.9),rgba(31,176,136,.35))}
.fl-track i.neg{right:50%;background:linear-gradient(270deg,rgba(209,78,78,.9),rgba(209,78,78,.35))}
/* unipolar variant (sell-through): full-width scale, dashed tick at the median */
.fl-uni .fl-track::before{left:var(--fl-med,75%);width:0;background:none;border-left:1px dashed rgba(201,157,74,.55)}
.fl-uni .fl-track i.pos{left:0;background:linear-gradient(90deg,rgba(31,176,136,.35),rgba(31,176,136,.9))}
.fl-uni .fl-track i.low{left:0;background:linear-gradient(90deg,rgba(209,78,78,.35),rgba(209,78,78,.9))}
/* dumbbell variant (reserve): dot pair per venue */
.fl-dumb .fl-srow{grid-template-columns:170px minmax(0,1fr) 118px}
.fl-dumb .fl-track::before{display:none}
.fl-dumb .fl-line{position:absolute;top:50%;height:1px;background:rgba(255,255,255,.18)}
.fl-dumb .fl-dot{position:absolute;top:50%;width:9px;height:9px;border-radius:50%;transform:translate(-50%,-50%)}
.fl-dumb .fl-dot.res{background:#C99D4A;box-shadow:0 0 6px rgba(201,157,74,.5)}
.fl-dumb .fl-dot.nr{background:#1FB088;box-shadow:0 0 6px rgba(31,176,136,.5)}
.fl-legend{display:flex;gap:16px;font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:#6E767E}
.fl-legend i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px}
.fl-legend .r i{background:#C99D4A}.fl-legend .n i{background:#1FB088}
.fl-tblk{margin:16px 18px 20px;border:1px solid rgba(255,255,255,.05);background:#12161B}
.fl-tbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:9px 13px;border-bottom:1px solid rgba(255,255,255,.05)}
.fl-foot{padding:0 24px 20px;font-family:'IBM Plex Mono',monospace;font-size:8px;line-height:1.9;letter-spacing:.1em;text-transform:uppercase;color:#6E767E}
.fl-foot em{font-style:normal;color:#C99D4A}

/* FAQ & Guide picker rail — even rows always: 6-up, folding to 3-up then 2-up. */
.qd-guide-rail{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:26px;padding:8px;background:#12161B;border:1px solid rgba(255,255,255,.07);border-radius:6px}
@media(max-width:1180px){.qd-guide-rail{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.qd-guide-rail{grid-template-columns:repeat(2,1fr)}}

/* Nav wordmark — steps down before it can overlap the centered nav tabs
   (tabs ~697px wide; full 11px wordmark collides below ~1230px viewport). */
/* Nav logo — the wordmark collapses to the Q monogram as the window narrows.
   Both marks live in overflow-hidden wrappers whose max-width + opacity
   animate across the 1080px swap (a display toggle can't transition), and the
   wordmark's 11px→8px step at 1280px eases too. */
.qd-navlogo .wordmark{display:block;overflow:hidden;max-width:360px;opacity:1;transition:max-width .35s ease,opacity .2s ease .1s;}
.qd-navlogo .wordmark img{display:block;height:11px;transition:height .25s ease;}
.qd-navlogo .qwrap{display:block;overflow:hidden;max-width:0;opacity:0;transition:max-width .35s ease,opacity .2s ease;}
.qd-navlogo img.q{display:block;height:42px;width:auto;}
@media (max-width:1280px){.qd-navlogo .wordmark img{height:8px;}}
/* Too narrow for the wordmark: glide to the Q monogram rather than going
   brandless (the whole button used to display:none here). */
@media (max-width:1080px){
  .qd-navlogo .wordmark{max-width:0;opacity:0;transition:max-width .35s ease,opacity .2s ease;}
  .qd-navlogo .qwrap{max-width:60px;opacity:1;transition:max-width .35s ease,opacity .2s ease .1s;}
}
@media (prefers-reduced-motion:reduce){
  .qd-navlogo .wordmark,.qd-navlogo .qwrap,.qd-navlogo .wordmark img{transition:none;}
}

/* Nav hover menus — a tab owning 2+ sub-views reveals them on hover. The menu
   hangs flush under the strip (no gap, so the pointer never falls through),
   fades/drops in over 120ms, and dies with the hover. */
.qd-navtab{position:relative;display:inline-flex;}
.qd-navmenu{position:absolute;top:100%;left:0;min-width:200px;z-index:960;background:#0B0E12;border:1px solid var(--b1,rgba(255,255,255,0.10));border-top:2px solid #1FB088;box-shadow:0 16px 40px rgba(0,0,0,0.55);padding:6px 0;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .12s ease,transform .12s ease,visibility .12s;}
.qd-navtab:hover .qd-navmenu,.qd-navtab:focus-within .qd-navmenu{opacity:1;visibility:visible;transform:translateY(0);}
.qd-navmenu-it{display:block;width:100%;text-align:left;background:transparent;border:none;outline:none;cursor:pointer;padding:9px 16px;font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:#A8AFB6;white-space:nowrap;transition:background .1s,color .1s;}
.qd-navmenu-it:hover{background:rgba(31,176,136,0.08);color:#1FB088;}
.qd-navmenu-it.on{color:#1FB088;box-shadow:inset 2px 0 0 #1FB088;}

/* Auth modal typewriter placeholder caret (qdAuthTwInit) */
@keyframes qdTwBlink{50%{opacity:0}}
@media (prefers-reduced-motion: reduce){.qd-tw-c{animation:none!important}}

/* ── Terminal hint (qdTermHint) ───────────────────────────────────────────
   The auth modal's blinking block caret on an ordinary search input — static
   hint text, no typewriter loop. The overlay replaces the native placeholder
   because a caret cannot be drawn at the end of one: the placeholder is a
   single text run the page cannot append an element to.
   Visibility is CSS-only where CSS can know (:focus-within); a prefilled or
   typed value is marked by the input's own oninput toggling data-filled on
   the wrapper, since :placeholder-shown is off the table without a native
   placeholder. */
.qd-hintwrap{position:relative}
.qd-hint{position:absolute;left:13px;right:12px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;pointer-events:none;white-space:nowrap;overflow:hidden;
  font-family:'IBM Plex Mono',monospace;color:#7A828B;letter-spacing:0.04em}
.qd-hint-c{display:inline-block;width:7px;flex:0 0 auto;margin-left:4px;background:#1FB088;
  box-shadow:0 0 8px rgba(31,176,136,0.6);animation:qdTwBlink 1s steps(1) infinite}
.qd-hintwrap:focus-within .qd-hint,
.qd-hintwrap[data-filled] .qd-hint{display:none}
@media (prefers-reduced-motion: reduce){.qd-hint-c{animation:none!important}}

/* ── Auth modal: terminal treatment ───────────────────────────────────────── */
.qd-term{position:relative;background:#000000;border:1px solid rgba(31,176,136,0.26);border-radius:0;
  box-shadow:0 24px 70px rgba(0,0,0,0.80),0 0 50px rgba(31,176,136,0.05);}
.qd-term::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,0.016) 0 1px,transparent 1px 3px);}
.qd-term-c{position:absolute;width:8px;height:8px;border:1px solid #1FB088;pointer-events:none;z-index:3;opacity:.8}
.qd-term-c.tl{top:-1px;left:-1px;border-right:0;border-bottom:0}
.qd-term-c.tr{top:-1px;right:-1px;border-left:0;border-bottom:0}
.qd-term-c.bl{bottom:-1px;left:-1px;border-right:0;border-top:0}
.qd-term-c.br{bottom:-1px;right:-1px;border-left:0;border-top:0}
.qd-term-in{width:100%;box-sizing:border-box;padding:10px 12px;background:#0A0D10;
  border:1px solid rgba(255,255,255,0.10);border-radius:0;color:#DCE1E6;
  font-family:'IBM Plex Mono',monospace;font-size:13px;outline:none;
  transition:border-color .15s,box-shadow .15s}
.qd-term-in:focus{border-color:#1FB088;box-shadow:inset 0 0 0 1px rgba(31,176,136,0.22),0 0 16px rgba(31,176,136,0.10)}
.qd-term-cb{appearance:none;-webkit-appearance:none;width:14px;height:14px;flex:0 0 auto;margin:2px 0 0;
  border:1px solid rgba(255,255,255,0.22);background:#0A0D10;border-radius:0;cursor:pointer;position:relative;
  transition:border-color .12s}
.qd-term-cb:hover{border-color:rgba(31,176,136,0.60)}
.qd-term-cb:checked{border-color:#1FB088}
.qd-term-cb:checked::after{content:'';position:absolute;inset:3px;background:#1FB088;box-shadow:0 0 7px rgba(31,176,136,0.70)}
.qd-term-cb:focus-visible{outline:1px solid #1FB088;outline-offset:2px}

/* ── Era-attribution waterfall (qdEraWaterfall) ───────────────────────────── */
@keyframes qdWfGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes qdWfFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){
  [style*="qdWfGrow"],[style*="qdWfFade"]{animation:none!important}
}

/* ── Success flash (qdSuccessFlash) ───────────────────────────────────────── */
@keyframes qdSfIn{from{opacity:0;transform:translateX(-50%) translateY(10px) scale(.96)}
                  to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
@keyframes qdSfRing{to{stroke-dashoffset:0}}
@keyframes qdSfCheck{to{stroke-dashoffset:0}}
@keyframes qdSfPulse{0%{opacity:.55;transform:scale(1);transform-origin:center}
                     100%{opacity:0;transform:scale(1.55);transform-origin:center}}

/* ── Account menu on the header chip (qdUserMenuHTML) ─────────────────────── */
/* Same hover/focus-within model as .qd-navtab so the header behaves as one
   thing, but right-aligned and with a staggered item entrance. */
.qd-usertab{position:relative;display:inline-flex;margin-right:14px;}
.qd-usermenu{position:absolute;top:calc(100% + 6px);right:0;min-width:236px;z-index:960;
  background:#0B0E12;border:1px solid rgba(255,255,255,0.10);border-top:2px solid #1FB088;
  box-shadow:0 16px 44px rgba(0,0,0,0.60);padding:0 0 6px;opacity:0;visibility:hidden;
  transform:translateY(-4px);transition:opacity .12s ease,transform .12s ease,visibility .12s;}
.qd-usertab:hover .qd-usermenu,.qd-usertab:focus-within .qd-usermenu{opacity:1;visibility:visible;transform:translateY(0);}
.qd-usermenu-it{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;
  border:none;outline:none;cursor:pointer;padding:9px 16px;font-family:'IBM Plex Mono',monospace;font-size:9.5px;
  font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:#A8AFB6;white-space:nowrap;
  transition:background .1s,color .1s;}
.qd-usertab:hover .qd-usermenu-it,.qd-usertab:focus-within .qd-usermenu-it{animation:qdUmIn .18s ease both;}
.qd-usermenu-it:hover{background:rgba(31,176,136,0.08);color:#1FB088;}
.qd-usermenu-it:focus-visible{background:rgba(31,176,136,0.10);color:#1FB088;}
.qd-usermenu-it.danger:hover{background:rgba(209,78,78,0.10);color:#D14E4E;}
.qd-usermenu-sep{height:1px;background:rgba(255,255,255,0.06);margin:6px 0;}
@keyframes qdUmIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .qd-usermenu,.qd-usermenu-it{transition:none!important;animation:none!important}
}

/* ── Chart tooltip (external HTML) ────────────────────────────────────────
   Replaces Chart.js's canvas-painted tooltip so it can spring in, carry a
   per-series accent rail and point a real arrow at the datum. Positioned by
   qdChartTooltip() in js/app.js via a transform on a fixed element, so it is
   never clipped by a card's overflow. --qd-c is the lead series colour,
   --qd-ax the arrow's offset from the panel's left edge. */
.qd-cht{
  position:fixed;top:0;left:0;z-index:9000;pointer-events:none;
  min-width:132px;max-width:280px;
  padding:9px 11px 8px;border-radius:9px;
  background:rgba(14,17,21,0.94);
  border:1px solid rgba(255,255,255,0.10);
  border-left:2px solid var(--qd-c,#1FB088);
  box-shadow:0 10px 28px rgba(0,0,0,0.55),0 0 0 1px rgba(0,0,0,0.35);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  opacity:0;
  /* transform is set inline for position; scale rides on a separate property
     so the two never fight over the same declaration */
  scale:.9;translate:0 4px;
  transform-origin:center bottom;
  transition:opacity .16s ease,scale .26s cubic-bezier(.2,1.5,.4,1),translate .26s cubic-bezier(.2,1.5,.4,1);
}
.qd-cht-on{opacity:1;scale:1;translate:0 0}
.qd-cht-below{transform-origin:center top}

.qd-cht-t{
  font-family:'IBM Plex Mono',monospace;font-size:8.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:#8A9199;
  margin-bottom:6px;padding-bottom:5px;
  border-bottom:1px solid rgba(255,255,255,0.07);
}
.qd-cht-row{display:flex;align-items:baseline;gap:7px;padding:1.5px 0}
.qd-cht-dot{
  width:7px;height:7px;border-radius:50%;flex:0 0 auto;
  background:var(--qd-c,#1FB088);align-self:center;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--qd-c,#1FB088) 22%,transparent);
}
.qd-cht-k{
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.06em;
  color:#A8AFB6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.qd-cht-v{
  margin-left:auto;font-family:'IBM Plex Mono',monospace;
  font-size:12.5px;font-weight:600;color:#DCE1E6;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.qd-cht-v-wide{margin-left:0;font-size:11.5px;font-weight:500;white-space:normal;line-height:1.35}
/* Detail lines from callbacks that return an array — indented under their row
   so a multi-line tooltip still reads as one grouped item. */
.qd-cht-sub{
  display:flex;gap:10px;align-items:baseline;
  margin:1px 0 2px 14px;font-family:'IBM Plex Mono',monospace;font-size:9.5px;
  line-height:1.4;color:#8A9199;font-variant-numeric:tabular-nums;
}
.qd-cht-sk{flex:0 0 auto;letter-spacing:.04em}
.qd-cht-sv{margin-left:auto;color:#A8AFB6;white-space:nowrap}
.qd-cht-foot{
  margin-top:6px;padding-top:5px;border-top:1px solid rgba(255,255,255,0.07);
  font-family:'IBM Plex Mono',monospace;font-size:9px;color:#8A9199;
}
.qd-cht-arw{
  position:absolute;top:100%;left:var(--qd-ax,50%);transform:translateX(-50%);
  border:6px solid transparent;border-top-color:rgba(14,17,21,0.94);
  filter:drop-shadow(0 1px 0 rgba(255,255,255,0.08));
}
.qd-cht-below .qd-cht-arw{
  top:auto;bottom:100%;
  border-top-color:transparent;border-bottom-color:rgba(14,17,21,0.94);
  filter:drop-shadow(0 -1px 0 rgba(255,255,255,0.08));
}
@media (prefers-reduced-motion: reduce){
  .qd-cht{transition:opacity .1s ease!important;scale:1!important;translate:0 0!important}
}

/* ── QDV adjustments: thumbwheel ──────────────────────────────────────────
   A machined vernier scale rather than a rubber wheel. Two tick layers — tall
   for whole points, short for halves — anchored to the well centre, so the
   tick sitting under the index IS the value. Edges dissolve with mask-image
   instead of a dark overlay, and the numeral lives in its own column so
   nothing is ever painted on top of the scale. Pitch is locked to
   QD_TW_PPS in js/app.js: one short tick = one 0.5 step. */
.qd-tw{
  --qd-tw-a:#1FB088;
  --qd-tw-tick:rgba(220,225,230,0.34);
  position:relative;
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;
  column-gap:11px;height:36px;padding:0 2px 7px;
  cursor:ew-resize;outline:none;user-select:none;touch-action:none;
}

.qd-tw-val{
  font-family:'IBM Plex Mono',monospace;font-size:19px;font-weight:400;
  letter-spacing:-.02em;line-height:1;color:#DCE1E6;
  font-variant-numeric:tabular-nums;transition:color .18s;
}
.qd-tw:hover .qd-tw-val,.qd-tw.qd-tw-live .qd-tw-val{color:#fff}
.qd-tw-tick .qd-tw-val{animation:qdTwFlashVal .42s ease-out}

.qd-tw-scale{position:relative;height:22px;overflow:hidden;
  /* the scale fades out rather than being darkened by an overlay */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
}
.qd-tw-half,.qd-tw-whole{
  position:absolute;left:0;right:0;bottom:5px;
  background-repeat:repeat-x;transition:none;
}
.qd-tw-half{
  height:5px;
  background-image:repeating-linear-gradient(90deg,
    var(--qd-tw-tick) 0 1px, transparent 1px 13px);
}
.qd-tw-whole{
  height:11px;
  background-image:repeating-linear-gradient(90deg,
    rgba(220,225,230,0.60) 0 1px, transparent 1px 26px);
}
/* centre index — one hairline and a small caret, in the accent */
.qd-tw-idx{
  position:absolute;left:50%;bottom:3px;width:1px;height:16px;margin-left:-.5px;
  background:var(--qd-tw-a);pointer-events:none;
  transition:box-shadow .2s,height .2s;
}
.qd-tw-idx::before{
  content:'';position:absolute;left:50%;top:-4px;transform:translateX(-50%);
  border-left:3px solid transparent;border-right:3px solid transparent;
  border-top:4px solid var(--qd-tw-a);
}
.qd-tw-tick .qd-tw-idx{animation:qdTwFlashIdx .42s ease-out}
@keyframes qdTwFlashVal{0%{color:var(--qd-tw-a)}100%{color:#DCE1E6}}
@keyframes qdTwFlashIdx{
  0%{box-shadow:0 0 10px 1px rgba(31,176,136,.75);height:20px}
  100%{box-shadow:0 0 0 0 rgba(31,176,136,0);height:16px}
}
/* One hairline doing two jobs: it underlines the field the way the other
   inputs' borders do, and its filled portion is the position within 0–10.
   A separate border-bottom would sit a few pixels away and read as a slip. */
.qd-tw-rail{
  position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,
    var(--qd-tw-a) 0, var(--qd-tw-a) var(--qd-f,0%),
    rgba(255,255,255,0.10) var(--qd-f,0%), rgba(255,255,255,0.10) 100%);
  transition:background .14s linear,box-shadow .18s;
}
.qd-tw:hover .qd-tw-rail{box-shadow:0 0 7px rgba(31,176,136,.28)}
.qd-tw:focus-visible .qd-tw-rail,.qd-tw.qd-tw-live .qd-tw-rail{
  box-shadow:0 0 9px rgba(31,176,136,.45);
}
.qd-tw.qd-tw-live .qd-tw-rail{transition:none}

/* segmented two-state switch — authored premia, so the ON state is gold */
.qd-seg{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;height:36px;
  background:rgba(255,255,255,0.10);border:1px solid rgba(255,255,255,0.10);
  border-radius:4px;overflow:hidden;
}
.qd-seg-b{
  appearance:none;border:0;cursor:pointer;background:#12161B;color:#8A9199;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:background .16s,color .16s;
}
.qd-seg-b span{font-size:9px;font-weight:500;opacity:.6;letter-spacing:.06em}
.qd-seg-b:hover{background:#1B2027;color:#DCE1E6}
.qd-seg-b.on{background:rgba(31,176,136,0.14);color:#1FB088}
.qd-seg-b.on span{opacity:.85}
/* a premium that is actually applied reads gold, matching the ADJUSTED chip */
.qd-seg-b.on:last-child{background:rgba(201,157,74,0.16);color:#C99D4A}
.qd-seg-b:focus-visible{outline:2px solid #1FB088;outline-offset:-2px}
@media (prefers-reduced-motion: reduce){
  /* names updated with the vernier rebuild — the old .qd-tw-fill/.qd-tw-mark/
     .qd-tw-well selectors no longer exist and matched nothing. */
  .qd-tw,.qd-tw-val,.qd-tw-idx,.qd-tw-rail,.qd-seg-b{transition:none!important}
  .qd-tw-val,.qd-tw-idx{animation:none!important}
}

/* ── QDV mileage slider ───────────────────────────────────────────────────
   Native <input type=range> so keyboard, touch and AT behaviour are free.
   Styled to sit beside the thumbwheels: mono readout, hairline track, the
   accent reserved for the live value. Log-mapped in js/app.js because these
   distributions run 100 → 400,000 miles and all the price sensitivity is at
   the bottom of that range. */
.qd-mil{display:flex;flex-direction:column;gap:5px;padding-top:1px}
.qd-mil-head{
  display:flex;align-items:baseline;gap:8px;
  font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;
}
.qd-mil-mi{font-size:15px;font-weight:600;color:#DCE1E6;letter-spacing:-.01em}
.qd-mil-pct{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#8A9199}
.qd-mil-f{margin-left:auto;font-size:12px;font-weight:600;letter-spacing:.02em}
.qd-mil-r{
  -webkit-appearance:none;appearance:none;width:100%;height:14px;
  background:transparent;cursor:ew-resize;outline:none;display:block;margin:0;
}
.qd-mil-r::-webkit-slider-runnable-track{
  height:2px;border-radius:2px;background:rgba(255,255,255,0.10);
}
.qd-mil-r::-moz-range-track{height:2px;border-radius:2px;background:rgba(255,255,255,0.10)}
.qd-mil-r::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:3px;height:14px;margin-top:-6px;
  border:0;border-radius:1px;background:#1FB088;
  box-shadow:0 0 8px rgba(31,176,136,.55);transition:box-shadow .16s,height .16s;
}
.qd-mil-r::-moz-range-thumb{
  width:3px;height:14px;border:0;border-radius:1px;background:#1FB088;
  box-shadow:0 0 8px rgba(31,176,136,.55);
}
.qd-mil-r:hover::-webkit-slider-thumb,
.qd-mil-r:focus-visible::-webkit-slider-thumb{height:18px;margin-top:-8px;box-shadow:0 0 12px rgba(31,176,136,.8)}
.qd-mil-foot{
  display:flex;justify-content:space-between;gap:8px;
  font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:.1em;
  text-transform:uppercase;color:#5A554C;
}
.qd-mil-basis{color:#8A9199;text-align:center;flex:1}
@media (prefers-reduced-motion: reduce){
  .qd-mil-r::-webkit-slider-thumb{transition:none!important}
}

/* three-way variant of the segmented switch, plus its programme tooltip */
.qd-seg-3{grid-template-columns:repeat(3,1fr)}
.qd-seg-3 .qd-seg-b{font-size:9.5px;letter-spacing:.08em;gap:4px}
.qd-seg-3 .qd-seg-b span{font-size:8.5px}
/* the gold ON state is reserved for the last cell on two-way switches; on the
   three-way control any priced tier is a real premium, so both earn it */
.qd-seg-3 .qd-seg-b.on:not(:first-child){background:rgba(201,157,74,0.16);color:#C99D4A}
.qd-seg-mute{opacity:.45;pointer-events:none}
.qd-seg-b[data-tip]{position:relative}
.qd-seg-b[data-tip]::after{
  content:attr(data-tip);
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:#161A20;color:#DCE1E6;border:1px solid rgba(255,255,255,0.18);
  font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.08em;
  text-transform:none;white-space:nowrap;padding:5px 8px;border-radius:3px;
  box-shadow:0 6px 18px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transition:opacity .12s ease;pointer-events:none;z-index:9;
}
.qd-seg-b[data-tip]:hover::after,.qd-seg-b[data-tip]:focus-visible::after{opacity:1;visibility:visible}

/* numeric override field — shows the model's assumption as placeholder until
   the user types their own, then goes gold with a clear-to-restore control */
.qd-ovr{
  display:flex;align-items:center;gap:0;height:36px;
  background:#12161B;border:1px solid rgba(255,255,255,0.10);border-radius:4px;
  padding:0 4px 0 11px;transition:border-color .15s;
}
.qd-ovr:focus-within{border-color:#1FB088}
.qd-ovr-on{border-color:rgba(201,157,74,0.55)}
.qd-ovr input{
  flex:1;min-width:0;background:transparent;border:0;outline:none;
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:#DCE1E6;
  font-variant-numeric:tabular-nums;padding:0;
}
.qd-ovr input::placeholder{color:#5A554C}
.qd-ovr-on input{color:#C99D4A}
.qd-ovr-u{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.1em;color:#8A9199;padding:0 4px}
.qd-ovr-x{
  appearance:none;border:0;background:transparent;cursor:pointer;color:#8A9199;
  font-size:15px;line-height:1;padding:0 6px;transition:color .15s;
}
.qd-ovr-x:hover{color:#C99D4A}
/* tooltip on the bespoke group (the whole control, not a single tier) */
.qd-seg[data-tip]{position:relative}
.qd-seg[data-tip]::after{
  content:attr(data-tip);
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:#161A20;color:#DCE1E6;border:1px solid rgba(255,255,255,0.18);
  font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.06em;
  white-space:nowrap;padding:5px 8px;border-radius:3px;
  box-shadow:0 6px 18px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transition:opacity .12s ease;pointer-events:none;z-index:9;
}
.qd-seg[data-tip]:hover::after{opacity:1;visibility:visible}

/* ═══ TERMINAL ENTRY ═══════════════════════════════════════════════════════
   The nav page that "Access the Terminal" lands on (js/entry.js, route
   state.activeTab === 'entry'). Everything is scoped under #qd-entry AND
   prefixed qe-, because the mockup's original class names — .top, .index,
   .mod, .ico, .subs — are generic enough to collide with the terminal's own
   styles. The palette is re-declared on #qd-entry rather than :root for the
   same reason. Design notes live in
   docs/mockups/terminal-nav-2026-08.html, which is the source mockup. */
#qd-entry{
  --qe-s1:#0E1115; --qe-s2:#141920;
  --qe-text:#DCE1E6; --qe-text2:#A8AFB6; --qe-mute:#7E868E; --qe-dim:#575E66;
  --qe-live:#1FB088; --qe-gold:#C99D4A; --qe-gold-dim:rgba(201,157,74,.24);
  --qe-rule:rgba(255,255,255,.09); --qe-rule2:rgba(255,255,255,.045);
  --qe-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --qe-sans:'IBM Plex Sans',system-ui,sans-serif;
  --qe-ease:cubic-bezier(.22,.68,.24,1);
  position:relative;min-height:100vh;background:#000;color:var(--qe-text);
  font-family:var(--qe-sans);overflow-x:hidden;
  background-image:
    radial-gradient(70% 44% at 50% 0%,rgba(31,176,136,.07),transparent 66%),
    radial-gradient(50% 38% at 90% 98%,rgba(201,157,74,.045),transparent 70%);
}
#qd-entry::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);
  background-size:44px 44px}
#qd-entry .qe-wrap{position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:0 30px 60px}

@keyframes qe-scan{0%{transform:translateY(-2px) scaleX(0);opacity:0}12%{opacity:1}
  55%{transform:translateY(-2px) scaleX(1);opacity:1}100%{transform:translateY(56vh) scaleX(1);opacity:0}}
@keyframes qe-rise{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
@keyframes qe-slide{from{opacity:0;transform:translateX(-7px)}to{opacity:1;transform:none}}
@keyframes qe-drawx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes qe-fade{from{opacity:0}to{opacity:1}}
@keyframes qe-pulse{70%{box-shadow:0 0 0 8px rgba(31,176,136,0)}100%{box-shadow:0 0 0 0 rgba(31,176,136,0)}}
@keyframes qe-spin{to{transform:rotate(360deg)}}
@keyframes qe-ping{0%{opacity:.5;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.5)}}

#qd-entry .qe-scanline{position:fixed;left:0;right:0;top:0;height:1px;z-index:60;pointer-events:none;
  transform-origin:left center;background:linear-gradient(90deg,transparent,var(--qe-live),transparent);
  box-shadow:0 0 22px rgba(31,176,136,.8);animation:qe-scan 1.15s var(--qe-ease) both}

#qd-entry .qe-top{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;flex-wrap:wrap;
  padding:42px 0 17px;border-bottom:1px solid var(--qe-rule);
  animation:qe-rise .6s var(--qe-ease) both;animation-delay:.18s}
#qd-entry .qe-brand{display:flex;flex-direction:column;gap:10px}
#qd-entry .qe-eyebrow{font-family:var(--qe-mono);font-size:9px;font-weight:600;letter-spacing:.34em;
  text-transform:uppercase;color:var(--qe-live)}
#qd-entry .qe-who{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding-bottom:6px;
  font-family:var(--qe-mono);font-size:9px;letter-spacing:.17em;text-transform:uppercase;color:var(--qe-mute)}
#qd-entry .qe-who b{display:block;color:var(--qe-text);font-weight:500;margin-top:5px;letter-spacing:.1em}
#qd-entry .qe-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--qe-live);
  margin-right:7px;box-shadow:0 0 0 0 rgba(31,176,136,.7);animation:qe-pulse 2.6s infinite}
#qd-entry .qe-lede{font-family:var(--qe-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--qe-mute);margin:20px 0 16px;animation:qe-fade .7s var(--qe-ease) both;animation-delay:.3s}

#qd-entry .qe-index{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;list-style:none;margin:0;padding:0}
#qd-entry .qe-mod{position:relative;background:var(--qe-s1);border:1px solid var(--qe-rule2);
  padding:20px 22px 18px;display:flex;flex-direction:column;min-width:0;
  animation:qe-rise .6s var(--qe-ease) both;animation-delay:var(--d);
  transition:background .3s var(--qe-ease),border-color .3s var(--qe-ease)}
#qd-entry .qe-mod::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--qe-gold-dim);transform-origin:left center;
  animation:qe-drawx .7s var(--qe-ease) both;animation-delay:calc(var(--d) + .12s);
  transition:background .3s var(--qe-ease)}
#qd-entry .qe-mod:hover,#qd-entry .qe-mod:focus-within{background:var(--qe-s2);border-color:var(--qe-rule)}
#qd-entry .qe-mod:hover::before,#qd-entry .qe-mod:focus-within::before{
  background:var(--qe-live);box-shadow:0 0 15px rgba(31,176,136,.55)}

#qd-entry .qe-hd{display:flex;align-items:baseline;gap:11px;margin-bottom:5px;min-height:38px}
#qd-entry .qe-n{font-family:var(--qe-mono);font-size:9.5px;font-weight:600;letter-spacing:.14em;color:var(--qe-mute)}
#qd-entry .qe-mod h2{font-family:var(--qe-mono);font-weight:500;font-size:21px;line-height:1.12;
  letter-spacing:.005em;margin:0;color:var(--qe-live);white-space:nowrap}
#qd-entry .qe-mod h2 span{display:inline-block;width:1ch;text-align:center}
#qd-entry .qe-mod h2 span.rng{color:var(--qe-mute)}
#qd-entry .qe-mod h2 span.lock{color:var(--qe-live)}
#qd-entry .qe-mod p{font-family:var(--qe-sans);font-size:12.5px;font-weight:300;line-height:1.6;
  color:var(--qe-text2);margin:0 0 14px}

#qd-entry .qe-subs{list-style:none;margin:0 0 2px;padding:0;border-top:1px solid var(--qe-rule2)}
#qd-entry .qe-subs li{animation:qe-slide .45s var(--qe-ease) both;
  animation-delay:calc(var(--d) + .26s + var(--i)*.045s)}
#qd-entry .qe-subs button{display:flex;align-items:baseline;gap:10px;padding:8px 0;width:100%;
  border:0;border-bottom:1px solid var(--qe-rule2);background:transparent;cursor:pointer;text-align:left;
  font-family:var(--qe-mono);font-size:11px;letter-spacing:.06em;color:var(--qe-text2);
  transition:color .2s var(--qe-ease),padding-left .25s var(--qe-ease)}
#qd-entry .qe-subs li:last-child button{border-bottom:0}
#qd-entry .qe-subs button::before{content:'';flex:none;width:5px;height:1px;background:var(--qe-dim);
  transform:translateY(-3px);transition:width .25s var(--qe-ease),background .2s var(--qe-ease)}
#qd-entry .qe-subs button:hover,#qd-entry .qe-subs button:focus-visible{
  color:var(--qe-live);padding-left:5px;outline:none}
#qd-entry .qe-subs button:hover::before,#qd-entry .qe-subs button:focus-visible::before{
  width:11px;background:var(--qe-live)}

#qd-entry .qe-ico{--sz:38px;display:inline-grid;place-items:center;width:var(--sz);height:var(--sz);
  flex:none;margin-left:auto;align-self:flex-start;padding:0;border:0;background:transparent;cursor:pointer;
  color:var(--qe-live);transition:filter .3s var(--qe-ease)}
#qd-entry .qe-ico svg{display:block;width:var(--sz);height:var(--sz);overflow:visible}
#qd-entry .qe-ico circle,#qd-entry .qe-ico path{fill:none;stroke:currentColor;stroke-linecap:square}
#qd-entry .qe-ico .ring,#qd-entry .qe-ico .ping{transform-box:fill-box;transform-origin:center}
#qd-entry .qe-ico .ring{stroke-width:1.1;opacity:.38;stroke-dasharray:19 7;transition:opacity .3s var(--qe-ease)}
#qd-entry .qe-ico .ping{stroke-width:1;opacity:0}
#qd-entry .qe-ico .arr{stroke-width:1.5;transition:transform .35s var(--qe-ease)}
#qd-entry .qe-ico:hover,#qd-entry .qe-ico:focus-visible{outline:none;
  filter:drop-shadow(0 0 9px rgba(31,176,136,.5))}
#qd-entry .qe-ico:hover .ring,#qd-entry .qe-ico:focus-visible .ring{opacity:1;animation:qe-spin 3.2s linear infinite}
#qd-entry .qe-ico:hover .arr,#qd-entry .qe-ico:focus-visible .arr{transform:translateX(3px)}
#qd-entry .qe-ico:hover .ping,#qd-entry .qe-ico:focus-visible .ping{animation:qe-ping 1.5s var(--qe-ease) infinite}

#qd-entry .qe-wide{grid-column:1/-1;flex-direction:row;align-items:baseline;gap:14px 28px;flex-wrap:wrap}
#qd-entry .qe-wide .qe-hd{margin-bottom:0;flex:0 0 auto;min-height:0}
#qd-entry .qe-wide p{margin:0;flex:1 1 260px;max-width:52ch}
#qd-entry .qe-wide .qe-subs{border-top:0;display:flex;gap:0 24px;margin:0;flex:0 0 auto}
#qd-entry .qe-wide .qe-subs button{border-bottom:0;padding:5px 0;width:auto}

#qd-entry .qe-rail{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  margin-top:18px;padding-top:15px;border-top:1px solid var(--qe-rule);
  font-family:var(--qe-mono);font-size:9px;letter-spacing:.17em;text-transform:uppercase;color:var(--qe-mute);
  animation:qe-fade .8s var(--qe-ease) both;animation-delay:1.15s}
#qd-entry .qe-rail b{color:var(--qe-text2);font-weight:400}
#qd-entry .qe-skip{color:var(--qe-gold);background:none;border:0;cursor:pointer;padding:8px 0 6px;
  font:inherit;border-bottom:1px solid var(--qe-gold-dim)}
#qd-entry .qe-skip:hover,#qd-entry .qe-skip:focus-visible{color:var(--qe-text);outline:none}

@media(max-width:1000px){#qd-entry .qe-index{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  #qd-entry .qe-wrap{padding:0 18px 44px}
  #qd-entry .qe-index{grid-template-columns:1fr;gap:10px}
  #qd-entry .qe-top{padding-top:30px}
  #qd-entry .qe-mod{padding:18px 17px 16px}
  #qd-entry .qe-mod h2{font-size:19px;white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  #qd-entry *{animation-duration:.001ms!important;animation-delay:0ms!important;transition-duration:.001ms!important}
  #qd-entry .qe-scanline{display:none}
}

/* ── Analyst Note plates ────────────────────────────────────────────────────
   Each analyst section is a thin-bordered plate with its label cut into the
   top border, fieldset-style, laid on a two-column grid. Section numbers are
   CSS counters, so they stay sequential no matter which builders return ""
   for a data-thin model. Mockup: docs/mockups/analyst-note-restyle.html. */
.an-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;counter-reset:ansec;padding-top:8px}
.an-sec{position:relative;border:1px solid rgba(255,255,255,.07);border-radius:6px;
  padding:20px 18px 16px;background:rgba(255,255,255,.008);counter-increment:ansec;min-width:0;transition:border-color .15s}
.an-sec:hover{border-color:rgba(255,255,255,.12)}
.an-lbl{position:absolute;top:-7px;left:12px;background:#0E1216;padding:0 8px;
  font-family:'IBM Plex Mono',monospace;font-size:8.5px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:#6E767E;white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis}
.an-lbl::before{content:"\00a7" counter(ansec,decimal-leading-zero) "\00a0\00a0";color:#1FB088}
.an-span2{grid-column:span 2}
.an-strat{border-left:3px solid #C99D4A;background:rgba(201,157,74,.025)}
.an-strat .an-lbl{color:#C99D4A}
@media(max-width:800px){.an-grid{grid-template-columns:1fr}.an-span2{grid-column:span 1}}

/* stat-chip strip inside a plate */
.an-chips{display:flex;flex-wrap:wrap;margin:0 0 12px;border:1px solid rgba(255,255,255,.07);border-radius:4px;overflow:hidden}
.an-chip{flex:1;min-width:90px;padding:8px 12px;border-right:1px solid rgba(255,255,255,.07)}
.an-chip:last-child{border-right:none}
.an-chip .l{font-family:'IBM Plex Mono',monospace;font-size:7.5px;letter-spacing:.18em;color:#4A5158;text-transform:uppercase;margin-bottom:3px}
.an-chip .v{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;color:#DCE1E6}
.an-chip .v.au{color:#C99D4A}.an-chip .v.up{color:#1FB088}.an-chip .v.dn{color:#D06A5A}

/* price-history rows: date · house+title · proportional bar · price · vs-median */
.an-ph{display:flex;flex-direction:column}
.an-phrow{display:grid;grid-template-columns:60px 1fr 140px 78px 52px;gap:12px;align-items:center;
  padding:7px 0;border-bottom:1px solid rgba(255,255,255,.035);font-size:12px}
.an-phrow:last-child{border-bottom:none}
.an-phrow .d{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.08em;color:#6E767E;text-transform:uppercase}
.an-phrow .n{color:#A8AFB6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:'IBM Plex Sans',sans-serif}
.an-phrow .bar{height:4px;background:rgba(255,255,255,.05);border-radius:2px;overflow:hidden}
.an-phrow .bar i{display:block;height:100%;background:#1FB088;border-radius:2px}
.an-phrow .bar i.cold{background:#4A5158}
.an-phrow .p{font-family:'IBM Plex Mono',monospace;font-weight:600;color:#DCE1E6;text-align:right;white-space:nowrap}
.an-phrow .p.au{color:#C99D4A}
.an-phrow .vs{font-family:'IBM Plex Mono',monospace;font-size:10px;text-align:right;white-space:nowrap}
.an-phrow .vs.up{color:#1FB088}.an-phrow .vs.dn{color:#D06A5A}
@media(max-width:800px){.an-phrow{grid-template-columns:56px 1fr 74px 50px}.an-phrow .bar{display:none}}
/* Sold Feed on the Auction Hub: a fixed-height home so the panel's fill-mode
   scroller (absolute inside .qd-fill-wrap) has a height to fill; collapses to
   content height when the panel is shut. */
/* Left edge tracks the spine CARDS above, not the column: the spine keeps a
   118px gutter for its date chips (renderHubSpine pads left by 118), and its
   scroller reserves 8px on the right — the feed matches both so the two
   surfaces read as one aligned stack. */
.hub-soldfeed{margin:26px 16px 0 118px;display:flex;flex-direction:column}
.hub-soldfeed .qd-panel--fill{height:520px}

/* ── AUCTION HUB — timeline layout (2026-08-17, from
   docs/mockups/auction-hub-timeline.html). The page is one temporal axis:
   Still to Come above a TODAY divider, Completed below it, the settled tape
   and the marketplace month-card in a sticky rail. ── */
.hubtl-mast{border-bottom:2px solid #1FB088;padding:22px 30px 16px;display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap}
.hubtl-mast .issue{font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:.22em;color:#4A5158;text-transform:uppercase}
.hubtl-kpis{display:flex;gap:24px;align-items:baseline;flex-wrap:wrap}
.hubtl-kpi{text-align:right}
.hubtl-kpi .l{font-family:'IBM Plex Mono',monospace;font-size:7.5px;letter-spacing:.2em;color:#4A5158;text-transform:uppercase;margin-bottom:3px}
.hubtl-kpi .v{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:700;color:#DCE1E6}
.hubtl-kpi .v.au{color:#C99D4A}.hubtl-kpi .v.up{color:#1FB088}

.hubtl-cols{display:grid;grid-template-columns:1fr 340px;gap:26px;padding:24px 30px 30px}
/* Two-column season (2026-08-19): Still to Come | Completed, equal tracks,
   each column carrying its own timeline axis. TODAY spans above both. */
.hubtl-cols--split{grid-template-columns:1fr 1fr;padding-top:10px}
.hubtl-col{min-width:0;display:flex;flex-direction:column;gap:20px}
.hubtl-todayband{padding:22px 30px 0}
.hubtl-todayband .hubtl-today{margin:0}
.hubtl-rail{position:sticky;top:16px;align-self:start;display:flex;flex-direction:column;gap:16px;min-width:0}
.hubtl-rail .hub-soldfeed{margin:0}

.hubtl-axis{position:relative;padding-left:92px;min-width:0}
.hubtl-axis::before{content:"";position:absolute;left:62px;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,rgba(201,157,74,.4),rgba(255,255,255,.1) 38%,rgba(31,176,136,.5))}
.hubtl-zone{font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:#C99D4A;margin:4px 0 14px}
.hubtl-zone.past{color:#A8AFB6}
.hubtl-mon{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:.26em;color:#4A5158;text-transform:uppercase;margin:14px 0 10px;display:flex;align-items:center;gap:10px}
.hubtl-mon::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.05)}
/* Far-calendar fold: one full-width row where the collapsed months would be. */
.hubtl-far{display:flex;align-items:center;gap:9px;width:100%;margin:6px 0 10px;padding:9px 12px;cursor:pointer;
  background:rgba(255,255,255,.014);border:1px dashed rgba(255,255,255,.13);border-radius:4px;text-align:left;
  font-family:'IBM Plex Mono',monospace;font-size:8.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#8A9199;
  transition:color .15s,border-color .15s}
.hubtl-far:hover{color:#C99D4A;border-color:rgba(201,157,74,.5)}

.hubtl-ev{position:relative;margin-bottom:10px}
.hubtl-chip{position:absolute;left:-92px;width:48px;text-align:center;border:1px solid rgba(201,157,74,.35);padding:4px 0;top:7px;background:#0A0D10}
.hubtl-chip .m{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:.14em;color:#C99D4A;text-transform:uppercase}
.hubtl-chip .d{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:700;line-height:1;margin-top:1px;color:#DCE1E6}
.hubtl-ev.past .hubtl-chip{border-color:rgba(255,255,255,.13)}
.hubtl-ev.past .hubtl-chip .m{color:#4A5158}
.hubtl-dot{position:absolute;left:-34px;top:15px;width:7px;height:7px;border-radius:50%;background:#3a4048;transform:translateX(-50%)}
.hubtl-ev.hit .hubtl-dot{background:#1FB088;box-shadow:0 0 8px #1FB088}

.hubtl-card{background:linear-gradient(180deg,#0F1318,#0A0D10);border:1px solid rgba(255,255,255,.07);border-left:2px solid transparent;
  border-radius:6px;padding:9px 14px;display:flex;justify-content:space-between;gap:16px;align-items:center;transition:border-color .15s;cursor:pointer;min-height:44px}
.hubtl-card:hover{border-color:rgba(255,255,255,.13);border-left-color:#C99D4A}
.hubtl-ev.past .hubtl-card:hover{border-left-color:#1FB088}
.hubtl-card .main{min-width:0;flex:1}
.hubtl-card .line1{display:flex;align-items:baseline;gap:10px;min-width:0}
.hubtl-card .house{font-family:'Cormorant Garamond',serif;font-size:15.5px;font-weight:600;line-height:1;white-space:nowrap;color:#DCE1E6}
.hubtl-card .sub{font-family:'IBM Plex Mono',monospace;font-size:7.5px;color:#6E767E;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hubtl-card .note{font-size:9px;color:#4A5158;font-style:italic;margin-top:2px;font-family:'IBM Plex Sans',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hubtl-card .right{display:flex;gap:15px;align-items:baseline;flex:none}
.hubtl-sv{font-family:'IBM Plex Mono',monospace;font-size:7px;letter-spacing:.16em;color:#4A5158;text-transform:uppercase;white-space:nowrap}
.hubtl-sv b{font-size:12px;font-weight:700;letter-spacing:0;margin-left:5px}
.hubtl-sv .trk{color:#1FB088}.hubtl-sv .money{color:#C99D4A}.hubtl-sv .ghost{color:#6E767E}
.hubtl-card .go{color:#4A5158;font-size:13px}
.hubtl-preview{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:7px;font-weight:700;letter-spacing:.14em;color:#1FB088;
  border:1px solid rgba(31,176,136,.35);padding:2px 7px;border-radius:3px;text-transform:uppercase;white-space:nowrap}

.hubtl-today{position:relative;margin:18px 0;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hubtl-today .line{flex:1;min-width:60px;height:2px;background:#1FB088;box-shadow:0 0 12px rgba(31,176,136,.5)}
.hubtl-today .tag{font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.3em;color:#1FB088;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.hubtl-today .tag::before{content:"";width:7px;height:7px;border-radius:50%;background:#1FB088;box-shadow:0 0 10px #1FB088;animation:hubtl-pulse 2s infinite}
@keyframes hubtl-pulse{50%{opacity:.4}}
.hubtl-today .live{font-family:'IBM Plex Mono',monospace;font-size:8.5px;color:#A8AFB6;letter-spacing:.1em}
.hubtl-today .live b{color:#C99D4A}

.hubtl-mkt{background:linear-gradient(180deg,#0F1318,#0A0D10);border:1px solid rgba(255,255,255,.07);border-radius:10px;overflow:hidden;flex:none}
.hubtl-mkt .hd{padding:12px 15px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.hubtl-mkt .hd .t{font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#DCE1E6}
.hubtl-mkt .hd .t b{color:#C99D4A;font-weight:600}
.hubtl-mkt .hd .n{font-family:'IBM Plex Mono',monospace;font-size:7.5px;color:#4A5158;letter-spacing:.14em;text-transform:uppercase;text-align:right}
.hubtl-mkt .sub{font-family:'IBM Plex Mono',monospace;font-size:7.5px;letter-spacing:.18em;text-transform:uppercase;color:#6E767E;padding:9px 15px 4px}
.hubtl-mrow{display:flex;align-items:baseline;gap:10px;padding:7px 15px;border-bottom:1px solid rgba(255,255,255,.045);cursor:pointer;width:100%;background:transparent;border-left:none;border-right:none;border-top:none;text-align:left}
.hubtl-mrow:hover{background:#161A20}
.hubtl-mrow:last-child{border-bottom:none}
.hubtl-mrow .mo{font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.14em;color:#DCE1E6;text-transform:uppercase;width:56px;flex:none}
.hubtl-mrow .mo i{font-style:normal;font-size:7px;color:#1FB088;letter-spacing:.1em}
.hubtl-mrow .vv{font-family:'IBM Plex Mono',monospace;font-size:8.5px;color:#A8AFB6;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hubtl-mrow .vv b{color:#DCE1E6;font-weight:700}
.hubtl-mrow .g{font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:700;color:#C99D4A;flex:none;font-variant-numeric:tabular-nums}
.hubtl-mrow .go{color:#4A5158;font-size:12px;flex:none}
/* Consolidated month rows (2026-08-19): headline line + a venue-mix stacked
   bar. Bar width scales to the busiest month in view; segments keep the
   fixed SOURCE_CHART_COLORS venue hues. */
.hubtl-mrow--bar{flex-wrap:wrap;row-gap:6px;padding:9px 15px}
.hubtl-mrow--bar .tot{font-family:'IBM Plex Mono',monospace;font-size:8.5px;color:#6E767E;flex:1;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hubtl-mrow--bar .tot b{color:#DCE1E6;font-weight:700;font-size:10.5px;letter-spacing:0;font-variant-numeric:tabular-nums}
.hubtl-mbarw{flex-basis:100%;display:block;min-width:0}
.hubtl-mbar{height:5px;display:flex;gap:2px;min-width:0;transition:width .3s ease}
.hubtl-mbar .seg{border-radius:1.5px;min-width:2px;opacity:.85;transition:opacity .15s}
.hubtl-mrow--bar:hover .hubtl-mbar .seg{opacity:1}
/* Legend dots in the card header — same hues as the bars. */
.hubtl-lgd{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.hubtl-lgd .lg{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.hubtl-lgd .lg i{width:6px;height:6px;border-radius:50%;display:inline-block}

.hubtl-foot{border-top:1px solid rgba(255,255,255,.07);margin:0 30px;padding:12px 0 18px;font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:.14em;color:#4A5158;text-transform:uppercase}
@media(max-width:1000px){.hubtl-cols{grid-template-columns:1fr}.hubtl-rail{position:static}.hubtl-axis{padding-left:70px}.hubtl-axis::before{left:48px}.hubtl-chip{left:-70px;width:40px}.hubtl-dot{left:-24px}}

/* ── Manufacturer Index viz (2026-08-17, from docs/mockups/manufacturer-index-viz.html) ── */
.mono{font-variant-numeric:tabular-nums}
.mfrsm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mfrsm{border:1px solid rgba(255,255,255,.07);border-radius:6px;padding:12px 14px 10px;transition:border-color .15s}
.mfrsm:hover{border-color:rgba(255,255,255,.13)}
.mfrsm .nm{font-family:'IBM Plex Mono',monospace;font-size:8.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#A8AFB6}
.mfrsm .fig{font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:700;margin-top:2px}
.mfrsm .cap{font-family:'IBM Plex Mono',monospace;font-size:7px;color:#4A5158;letter-spacing:.12em;text-transform:uppercase;margin-top:1px;text-align:right}
.mfrsm svg{display:block;width:100%;margin-top:8px}
@media(max-width:1100px){.mfrsm-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.mfrsm-grid{grid-template-columns:1fr}}

/* ── Live Auctions: board + BaT wire rail ─────────────────────────────────
   The board table and the rss.app carousel share a row on wide screens; the
   rail sticks while the table scrolls. Below 1100px the rail stacks under
   the table at a readable width. */
.qd-live-wrap{display:flex;gap:14px;align-items:flex-start}
.qd-live-main{flex:1;min-width:0}
.qd-live-rail{flex:0 0 380px;position:sticky;top:14px}
@media (max-width:1100px){
  .qd-live-wrap{flex-direction:column}
  .qd-live-rail{position:static;flex:none;width:100%;max-width:430px;margin:0 auto}
}

/* My Desk: dash grid + listings-wire rail (same idiom as the live board). */
.qd-desk-wrap{display:flex;gap:16px;align-items:flex-start}
.qd-desk-rail{flex:0 0 380px;position:sticky;top:14px}
@media (max-width:1100px){
  .qd-desk-wrap{flex-direction:column}
  .qd-desk-rail{position:static;flex:none;width:100%;max-width:430px;margin:0 auto}
}
/* Consolidated marque-performance chart (2026-08-19) — hovering one marque's
   line isolates it; nothing dims until a line is actually under the pointer. */
.mfrcl .mfrcl-g{transition:opacity .15s ease}
.mfrcl:has(.mfrcl-g:hover) .mfrcl-g:not(:hover){opacity:.22}

/* ── THE WIRE (2026-08-21) ────────────────────────────────────────────────
   The track only carries the scroll behaviour and its own ground; the cards
   are the shared frosted deck tile (QD_DECK_FROST + C.wireCard), restored
   2026-08-21 after a Notes-style hairline variant was tried and dropped.

   Three grounds, deliberately close: the panel is #0E1115, the track is
   recessed to #090B0E and the cards raised to #151A21. Before this the card
   and the panel were both #0E1115, so the strip read as one flat field with
   text floating on it. */
.qd-wire{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:14px 14px 16px;scrollbar-width:thin;scrollbar-color:#1a1f27 transparent;
  border-top:1px solid var(--b0);border-bottom:1px solid var(--b0)}
.qd-wire::-webkit-scrollbar{height:8px}
.qd-wire::-webkit-scrollbar-track{background:transparent}
.qd-wire::-webkit-scrollbar-thumb{background:#1a1f27;border-radius:4px}

/* Slide-in for right-hand drawers (profile panel, 2026-08-25). One-shot on
   mount; reduced-motion users get an instant panel. */
@keyframes qdDrawerIn{from{transform:translateX(28px);opacity:0}to{transform:none;opacity:1}}
.qd-drawer-in{animation:qdDrawerIn .22s ease}
@media (prefers-reduced-motion:reduce){.qd-drawer-in{animation:none}}

/* ── Skeleton loading states (2026-08-29) ─────────────────────────────────
   One shimmer for every "data is on its way" moment, in the terminal's own
   idiom: thin muted bars, no spinners. .qd-skel is the animated bar; width
   and height come from the call site so a skeleton row can mimic the table
   it stands in for. Respect reduced-motion: the bar simply holds still. */
.qd-skel{display:inline-block;height:10px;border-radius:2px;background:linear-gradient(90deg,rgba(255,255,255,0.05) 25%,rgba(255,255,255,0.11) 50%,rgba(255,255,255,0.05) 75%);background-size:200% 100%;animation:qdSkelShimmer 1.4s ease-in-out infinite}
.qd-skel--block{display:block}
@keyframes qdSkelShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.qd-skel{animation:none}}

/* Region tag on comp rows (regional capture 2026-08-30) — only non-NA prints
   wear one; hover carries the full region name + ISO country when stored. */
.an-region{display:inline-block;padding:0 4px;font-family:'IBM Plex Mono',monospace;font-size:7.5px;font-weight:800;letter-spacing:0.1em;color:#8b9bb4;border:1px solid rgba(139,155,180,0.4);vertical-align:1px;cursor:default}

/* Condition chips (damage/modified filter 2026-08-30). DMG rows stay VISIBLE
   in history — the record is the record — but are excluded from every mark;
   the chip + tooltip says so. MOD is disclosure only. */
.an-flag{display:inline-block;padding:0 4px;font-family:'IBM Plex Mono',monospace;font-size:7.5px;font-weight:800;letter-spacing:0.1em;vertical-align:1px;cursor:default}
.an-flag.dmg{color:#e05252;border:1px solid rgba(224,82,82,0.45)}
.an-flag.mod{color:#c9a86a;border:1px solid rgba(201,168,106,0.4)}

/* Price History expand control (2026-08-30) — promoted to the card's title
   row and given the gold treatment so the terminal's one hidden power tool
   reads as one. Breathes softly while collapsed (the invitation); goes calm
   and solid once armed. Same chip geometry as every other control. */
.ph-expand-btn{font-family:'IBM Plex Mono',monospace;font-size:8.5px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;padding:3px 10px;cursor:pointer;background:transparent;border:1px solid #C99D4A;color:#C99D4A;transition:background .15s ease,box-shadow .15s ease;animation:ph-expand-breathe 2.8s ease-in-out infinite;}
.ph-expand-btn:hover{background:rgba(201,157,74,0.14);animation-play-state:paused;box-shadow:0 0 10px rgba(201,157,74,0.35);}
.ph-expand-btn.on{background:rgba(201,157,74,0.16);animation:none;box-shadow:none;}
@keyframes ph-expand-breathe{0%,100%{box-shadow:0 0 0 rgba(201,157,74,0);}50%{box-shadow:0 0 9px rgba(201,157,74,0.4);}}
@media (prefers-reduced-motion:reduce){.ph-expand-btn{animation:none;}}

/* ── Price History instrument cluster (2026-08-30, from the approved mockup).
   Controls grouped by concern with eyebrow labels; a chip's ON state is a lit
   lamp in the color of the line it draws; the basis strip states what the
   numbers mean; the legend below the plot is a click-to-ghost venue filter. */
.ph-deck{display:flex;align-items:stretch;padding:0 2px;margin-bottom:6px;background:#12161B;border:1px solid rgba(255,255,255,0.05);overflow-x:auto}
.ph-grp{display:flex;flex-direction:column;padding:6px 11px 7px;position:relative}
.ph-grp+.ph-grp::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:1px;background:rgba(255,255,255,0.05)}
.ph-lbl{font-family:'IBM Plex Mono',monospace;font-size:7px;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;color:#6B7178;margin-bottom:5px}
.ph-row{display:flex;gap:5px}
.ph-grp.ph-right{margin-left:auto;justify-content:center}
.ph-chip{font-family:'IBM Plex Mono',monospace;font-size:8.5px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;padding:3px 9px;cursor:pointer;background:transparent;border:1px solid rgba(255,255,255,0.10);color:#A8AFB6;transition:all .12s;white-space:nowrap}
.ph-chip:hover{color:#DCE1E6;border-color:rgba(255,255,255,0.2)}
.ph-chip .lamp{display:inline-block;width:4px;height:4px;border-radius:50%;background:#6B7178;margin-right:6px;vertical-align:1px;transition:all .15s}
.ph-chip.on{color:var(--c,#C99D4A);border-color:var(--c,#C99D4A);background:color-mix(in srgb,var(--c,#C99D4A) 9%,transparent)}
.ph-chip.on .lamp{background:var(--c,#C99D4A);box-shadow:0 0 5px var(--c,#C99D4A)}
.ph-seg{display:flex;border:1px solid rgba(255,255,255,0.10)}
.ph-seg .ph-chip{border:none;border-right:1px solid rgba(255,255,255,0.05)}
.ph-seg .ph-chip:last-child{border-right:none}
.ph-seg .ph-chip.seg-on{background:color-mix(in srgb,#1FB088 12%,transparent);color:#1FB088}
.ph-reset{font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:0.12em;text-transform:uppercase;padding:3px 9px;cursor:pointer;background:transparent;border:1px solid rgba(255,255,255,0.10);color:#8A9199}
.ph-reset:hover{color:#A8AFB6}
.ph-basis{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:5px 2px 7px;font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:0.1em;color:#6B7178}
.ph-basis .live{color:#C99D4A}
.ph-basis .sep{opacity:.4}
.ph-legend{display:flex;flex-wrap:wrap;gap:3px 10px;padding:8px 2px 0}
.ph-lg{display:flex;align-items:center;gap:5px;font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:0.08em;color:#A8AFB6;cursor:pointer;padding:2px 4px;border:1px solid transparent;transition:all .12s}
.ph-lg i{width:9px;height:9px;border-radius:2px;display:inline-block}
.ph-lg:hover{color:#DCE1E6}
.ph-lg.dim{opacity:.32}
.ph-lg .n{color:#6B7178;font-size:8px}

/* Track-button toggle pop (2026-08-30): the buttons re-render on toggle, so
   a transition can't carry the state change — instead the freshly rendered
   node plays a one-shot settle-pop with an expanding accent ring. */
.qd-track-pop{animation:qd-track-pop .55s cubic-bezier(.34,1.56,.64,1)}
@keyframes qd-track-pop{
  0%{transform:scale(.85);box-shadow:0 0 0 0 rgba(31,176,136,.55)}
  45%{transform:scale(1.09)}
  100%{transform:scale(1);box-shadow:0 0 0 14px rgba(31,176,136,0)}}
@media (prefers-reduced-motion:reduce){.qd-track-pop{animation:none}}

/* Tape-statistics panels (2026-08-30): each viz sits on its own machined
   plate — lifted ground, hairline frame, accent capline — instead of
   floating loose on the card. Equal heights via the grid's stretch. */
.ph-panel{min-width:0;background:#0B0E12;border:1px solid rgba(255,255,255,0.05);padding:10px 12px 9px;position:relative;display:flex;flex-direction:column}
.ph-panel::before{content:'';position:absolute;inset:0 auto auto 0;width:34px;height:2px;background:#1FB088;opacity:.55}