/* ===== HyperCars 2026 OS — shared design system ===== */
:root{
  --bg:#040505; --bg-side:#08090B;
  --green:#12C72C; --green-br:#3BEA5C; --amber:#F39444; --red:#FF4438;
  --ink:#F4F5F4; --muted:#B4BABC; --faint:#828A8C;
  --glass:rgba(9,11,12,0.55); --glass-2:rgba(16,19,20,0.62);
  --hair:rgba(255,255,255,0.09); --hair-2:rgba(255,255,255,0.055);
  --tile:rgba(255,255,255,0.04); --tile-b:rgba(255,255,255,0.045);
  --r:18px; --r-sm:12px; --blur:blur(22px) saturate(125%);
  --ease:cubic-bezier(0.22,1,0.36,1);
  --z-nav:20; --z-palette:120;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg); color:var(--ink);
  font-family:"HC Grotesk","Helvetica Neue",Helvetica,"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden}
::selection{background:rgba(18,199,44,.28)}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid var(--green-br); outline-offset:2px; border-radius:6px}

.screen{position:fixed; inset:0; overflow:hidden}
@media(max-width:900px){ .screen{position:relative; min-height:100vh; overflow:visible} }

/* backgrounds */
.hero{position:absolute; inset:0; z-index:0}
.hero img{width:100%; height:100%; object-fit:cover; object-position:52% 46%; filter:brightness(.80) contrast(1.03) saturate(1.02)}
.scrim-v{position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(4,5,5,.78) 0%,rgba(4,5,5,.20) 20%,rgba(4,5,5,.12) 55%,rgba(4,5,5,.55) 78%,rgba(4,5,5,.92) 100%)}
.scrim-h{position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(4,5,5,.66) 0%,rgba(4,5,5,.05) 28%,transparent 50%,rgba(4,5,5,.10) 72%,rgba(4,5,5,.60) 100%)}
.bgglow{position:absolute; inset:0; z-index:0; background:radial-gradient(60% 45% at 18% 0%, rgba(18,199,44,.11), transparent 60%),radial-gradient(50% 50% at 100% 100%, rgba(18,199,44,.06), transparent 60%),#040505}
.vig{position:absolute; inset:0; z-index:1; background:radial-gradient(120% 100% at 50% 40%, transparent 60%, rgba(0,0,0,.5) 100%)}

.ui{position:relative; z-index:3; height:100%; display:flex; flex-direction:column; padding:18px 20px 20px; gap:14px}
@media(max-width:900px){ .ui{height:auto} }

/* ===== Nav ===== */
.nav{display:flex; align-items:center; gap:20px; flex-wrap:wrap; position:relative; z-index:var(--z-nav)}
.brand{display:flex; align-items:center; gap:11px}
.mono{width:34px; height:34px; border-radius:9px; background:var(--green); display:grid; place-items:center; box-shadow:0 6px 20px rgba(18,199,44,.34)}
.mono span{display:block; width:15px; height:2px; background:#041206; box-shadow:0 4px 0 #041206,0 -4px 0 #041206; transform:skewX(-18deg)}
.brand b{font-size:0.9375rem; font-weight:600; letter-spacing:.02em}
.brandlogo{height:22px; width:auto; display:block; transition:opacity .15s var(--ease)}
.brand:hover .brandlogo{opacity:.82}
.tabs{display:flex; align-items:center; gap:3px; margin-left:8px; flex-wrap:wrap}
.tabs a{font-size:0.8125rem; font-weight:400; color:var(--muted); padding:8px 14px; border-radius:9px; cursor:pointer; transition:color .15s var(--ease), background .15s var(--ease)}
.tabs a:hover{color:var(--ink); background:rgba(255,255,255,.04)}
.tabs a.on{color:var(--ink); background:var(--glass-2); border:1px solid var(--hair); font-weight:500}
.nav-r{margin-left:auto; display:flex; align-items:center; gap:12px}
.search{display:flex; align-items:center; gap:8px; font-size:0.78125rem; color:var(--faint); background:var(--glass); border:1px solid var(--hair); border-radius:10px; padding:8px 12px; cursor:pointer; transition:border-color .15s var(--ease), color .15s var(--ease)}
.search:hover{border-color:rgba(255,255,255,.18); color:var(--muted)}
.search kbd{font:inherit; font-size:0.6875rem; color:var(--muted); border:1px solid var(--hair); border-radius:5px; padding:1px 5px}
.rangep{display:flex; background:var(--glass); border:1px solid var(--hair); border-radius:10px; padding:3px}
.rangep button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:0.75rem;font-weight:500;padding:6px 12px;border-radius:7px;cursor:pointer;transition:.15s var(--ease)}
.rangep button:hover{color:var(--ink)}
.rangep button.on{background:var(--green);color:#041206;font-weight:600}
.livep{display:flex; align-items:center; gap:7px; font-size:0.6875rem; font-weight:600; letter-spacing:.12em; color:var(--green-br); background:rgba(18,199,44,.1); border:1px solid rgba(18,199,44,.28); border-radius:20px; padding:7px 12px}
.livep i{width:7px; height:7px; border-radius:50%; background:var(--green-br); box-shadow:0 0 0 3px rgba(18,199,44,.2); animation:pulse 2.6s var(--ease) infinite}
/* opacity is compositable — the old box-shadow pulse forced paint every frame */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.iconb{width:36px; height:36px; border-radius:10px; background:var(--glass); border:1px solid var(--hair); display:grid; place-items:center; color:var(--muted); cursor:pointer; transition:.15s var(--ease)}
.iconb:hover{color:var(--ink); border-color:rgba(255,255,255,.18)}
.iconb svg{width:17px;height:17px;stroke-width:1.7}
.av{width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#2b2f36,#0d0f13); border:1px solid var(--hair); display:grid; place-items:center; font-size:0.75rem; font-weight:600; color:var(--muted); flex-shrink:0}
/* small screens: brand + controls share the top row; tabs become one
   swipeable row (all 6 pages stay one flick away); search collapses to
   icon-only so the palette stays reachable on touch */
@media(max-width:720px){
  .livep,.rangep{display:none}
  .search .s-lbl,.search kbd{display:none}
  .search{padding:9px}
  .nav{gap:10px 14px}
  .tabs{flex-basis:100%; order:2; margin-left:0; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs a{white-space:nowrap; flex-shrink:0}
}

/* ===== Stage / panels ===== */
.stage{flex:1; display:grid; gap:14px; min-height:0}
.stage.s3{grid-template-columns:326px 1fr 312px}
.stage.s3n{grid-template-columns:300px 1fr 300px}
.stage.s2l{grid-template-columns:300px 1fr}
@media(max-width:1180px){ .stage.s3,.stage.s3n{grid-template-columns:280px 1fr 280px} }
@media(max-width:980px){ .stage.s3,.stage.s3n,.stage.s2l{grid-template-columns:1fr} .center{grid-column:auto!important} }
.panel{background:var(--glass); border:1px solid var(--hair); border-radius:var(--r); box-shadow:0 24px 60px rgba(0,0,0,.5)}
/* Glass blur is scoped to hero surfaces: on Overview every rail floats over the
   full-bleed photograph, so blur reads. The other 5 pages sit on the near-flat
   .bgglow gradient where blur(22px) is an invisible effect that still costs a
   composited GPU layer per element — there the same translucent fill composites
   to an identical color without it. Modal scrims (.pal-back/.cd-back) and
   .cd-close keep blur: they sit over real page content / the car photo. */
[data-page="overview"] .panel,
[data-page="overview"] .tabs a.on,
[data-page="overview"] .search,
[data-page="overview"] .rangep,
[data-page="overview"] .iconb,
[data-page="analytics"] .panel,
[data-page="analytics"] .tabs a.on,
[data-page="analytics"] .search,
[data-page="analytics"] .rangep,
[data-page="analytics"] .iconb{backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur)}
/* phones: blur(22px) re-samples panel-sized regions of the fixed hero photo on
   every scrolled frame (the photo shifts relative to the panels) — the single
   biggest scroll-jank source on mid-range devices. Kill the blur ≤900px and
   compensate with denser glass; desktop keeps the full effect. Between
   901-980px .screen is still fixed/overflow:hidden (no scrolling), so 900 is
   the correct boundary. */
@media(max-width:900px){
  body[data-page="overview"],body[data-page="analytics"]{--glass:rgba(9,11,12,.84); --glass-2:rgba(16,19,20,.88)}
  [data-page="overview"] .panel, [data-page="overview"] .tabs a.on,
  [data-page="overview"] .search, [data-page="overview"] .rangep,
  [data-page="overview"] .iconb, [data-page="overview"] .spec,
  [data-page="overview"] .bpanel,
  [data-page="analytics"] .panel, [data-page="analytics"] .tabs a.on,
  [data-page="analytics"] .search, [data-page="analytics"] .rangep,
  [data-page="analytics"] .iconb{backdrop-filter:none; -webkit-backdrop-filter:none}
}
.blocklab{font-size:0.6875rem; letter-spacing:.03em; color:var(--faint); text-transform:uppercase; margin-bottom:2px}
.scrollable{overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.14) transparent}
.scrollable::-webkit-scrollbar{width:8px}
.scrollable::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12); border-radius:8px}

/* left rail shared */
.lrail{display:flex; flex-direction:column; gap:12px; padding:16px; overflow:hidden}
.chips{display:flex; gap:7px; flex-wrap:wrap}
.chip{flex:1; min-width:fit-content; text-align:center; font-size:0.75rem; font-weight:500; color:var(--muted); background:var(--tile); border:1px solid var(--hair-2); border-radius:9px; padding:8px 10px; cursor:pointer; transition:.15s var(--ease); white-space:nowrap}
.chip:hover{color:var(--ink); border-color:rgba(255,255,255,.14)}
.chip.on{color:#041206; background:var(--green); border-color:transparent; font-weight:600}
.stwrap{display:flex; gap:10px}
.sttile{flex:1; background:var(--tile); border:1px solid var(--hair-2); border-radius:12px; padding:12px 13px; display:flex; align-items:center; justify-content:space-between}
.sttile .l{display:flex; align-items:center; gap:8px; font-size:0.75rem; color:var(--muted)}
.sttile .l i{width:8px;height:8px;border-radius:50%}
.sttile .v{font-size:1.625rem; font-weight:200; letter-spacing:-.01em}

/* generic bits reused across pages */
.big-num{font-weight:200; letter-spacing:-.02em; line-height:.9}
.hair-top{border-top:1px solid var(--hair-2); padding-top:14px}

/* mini bar chart (reels/production by month) */
.mbars{display:flex; align-items:flex-end; gap:7px; height:58px; margin-top:9px}
.mcol{flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; height:100%; justify-content:flex-end}
.mcol .mv{font-size:0.5625rem; color:var(--faint)}
.mbar{width:100%; max-width:18px; border-radius:4px 4px 2px 2px; background:rgba(255,255,255,.09); transition:height .5s var(--ease)}
.mbar.hot{background:var(--green); box-shadow:0 3px 12px rgba(18,199,44,.3)}
.mcol .mc{font-size:0.5625rem; color:var(--faint)}

/* ===== ⌘K command palette ===== */
.pal-back{position:fixed; inset:0; z-index:var(--z-palette); background:rgba(4,5,5,.6); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:none; align-items:flex-start; justify-content:center; padding-top:12vh}
.pal-back.open{display:flex; animation:palfade .18s var(--ease)}
@keyframes palfade{from{opacity:0}to{opacity:1}}
.pal{width:min(560px,92vw); max-height:70vh; background:#0c0e10; border:1px solid var(--hair); border-radius:16px; box-shadow:0 40px 120px rgba(0,0,0,.7); overflow:hidden; display:flex; flex-direction:column}
.pal-in{display:flex; align-items:center; gap:10px; padding:15px 17px; border-bottom:1px solid var(--hair-2)}
.pal-in svg{width:17px;height:17px;stroke:var(--faint);stroke-width:1.8;fill:none;flex-shrink:0}
.pal-in input{flex:1; background:transparent; border:0; outline:0; color:var(--ink); font:inherit; font-size:0.9375rem}
.pal-in input::placeholder{color:var(--faint)}
.pal-list{overflow-y:auto; padding:7px}
.pal-sec{font-size:0.625rem; letter-spacing:.09em; text-transform:uppercase; color:var(--faint); padding:9px 11px 4px}
.pal-item{display:flex; align-items:center; gap:12px; padding:10px 11px; border-radius:10px; cursor:pointer}
.pal-item.sel,.pal-item:hover{background:rgba(255,255,255,.05)}
.pal-item .pi-ic{width:30px; height:30px; border-radius:8px; background:var(--tile); border:1px solid var(--hair-2); display:grid; place-items:center; font-size:0.75rem; color:var(--muted); flex-shrink:0; overflow:hidden}
.pal-item .pi-ic img{width:100%;height:100%;object-fit:cover}
.pal-item .pi-t{flex:1; min-width:0}
.pal-item .pi-t b{font-size:0.84375rem; font-weight:500; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pal-item .pi-t span{font-size:0.71875rem; color:var(--faint)}
.pal-item .pi-k{font-size:0.65625rem; color:var(--faint); border:1px solid var(--hair-2); border-radius:5px; padding:2px 6px}
.pal-empty{padding:26px; text-align:center; color:var(--faint); font-size:0.8125rem}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important; transition-duration:.001ms!important}
}

/* ===== analytics / reach shared components ===== */
.kpi{border-bottom:1px solid var(--hair-2); padding-bottom:13px}
.kpi:last-of-type{border-bottom:0; padding-bottom:0}
.kpi .l{font-size:0.71875rem; color:var(--faint)}
.kpi .v{font-size:2.125rem; font-weight:200; letter-spacing:-.02em; line-height:1; margin-top:6px}
.kpi .s{font-size:0.71875rem; color:var(--muted); margin-top:6px}
.kpi .s b{color:var(--green-br); font-weight:500}
.split{display:flex; height:9px; border-radius:6px; overflow:hidden; margin-top:9px}
.split .ig{background:var(--green)} .split .fb{background:rgba(255,255,255,.16)}
.splitl{display:flex; justify-content:space-between; font-size:0.6875rem; color:var(--muted); margin-top:7px}
.erbars{display:flex; align-items:flex-end; gap:6px; height:48px; margin-top:9px}
.ercol{flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; height:100%; justify-content:flex-end}
.erbar{width:100%; max-width:16px; border-radius:3px 3px 1px 1px; background:rgba(255,255,255,.09)}
.erbar.hot{background:var(--green)}
.ercol .c{font-size:0.53125rem; color:var(--faint)}
.mapPanel{position:relative; overflow:hidden; padding:0; min-height:230px}
.mapPanel .head{position:absolute; top:15px; left:18px; z-index:2}
.mapPanel .head .t{font-size:0.9375rem; font-weight:500}
.mapPanel .head .s{font-size:0.71875rem; color:var(--faint); margin-top:3px}
.mapPanel svg.map{position:absolute; inset:16px 12px 44px; width:calc(100% - 24px); height:calc(100% - 60px)}
/* dot-matrix US map (OS.usmap) */
.map .ud{fill:rgba(255,255,255,.13)}
.map .arc{fill:none; stroke:rgba(18,199,44,.28); stroke-width:1.1; stroke-dasharray:1; stroke-dashoffset:1; animation:hc-arcdraw 1.2s var(--ease) both}
@keyframes hc-arcdraw{to{stroke-dashoffset:0}}
.mapPanel::after{content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit; background:radial-gradient(115% 95% at 50% 42%, transparent 62%, rgba(4,5,5,.42) 100%)}
.map .pin-core{fill:var(--green-br); filter:drop-shadow(0 0 7px rgba(18,199,44,.7))}
.map .pin-dot{fill:#c9cfd1}
.map .pin-eye{fill:#eafff0; pointer-events:none}
.map .pin-hit{fill:transparent; cursor:pointer; outline:none}
.map .pin-hit:focus-visible{outline:none}
.map .pin-g:hover .pin-core,.map .pin-g:hover .pin-dot{filter:drop-shadow(0 0 11px rgba(18,199,44,.95))}
.map .pin-lead{stroke:rgba(18,199,44,.4); stroke-width:1}
.map .home-ring{fill:none; stroke:rgba(18,199,44,.45); stroke-width:1; stroke-dasharray:3 4}
.map .home-lbl{font-size:10px; letter-spacing:.22em; fill:var(--green-br); font-weight:600}
.map .clab{font-size:15px; font-weight:500; fill:#EAEDEC; paint-order:stroke; stroke:rgba(4,5,5,.6); stroke-width:3px}
.map .clabv{fill:var(--green-br); stroke:none; font-weight:600}
.map-tip{position:absolute; z-index:6; min-width:170px; max-width:230px; background:#0c0e10; border:1px solid var(--hair); border-top:2px solid var(--green-br); border-radius:11px; padding:11px 13px; box-shadow:0 16px 44px rgba(0,0,0,.6); opacity:0; transform:translateY(6px); transition:opacity .18s var(--ease), transform .2s var(--ease); pointer-events:none}
.map-tip.on{opacity:1; transform:none}
.map-tip .mtc{font-size:0.71875rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; display:flex; align-items:center; gap:7px}
.map-tip .mth-home{font-size:0.59375rem; letter-spacing:.14em; color:var(--green-br); border:1px solid rgba(18,199,44,.3); background:rgba(18,199,44,.1); border-radius:20px; padding:1px 7px}
.map-tip .mtp{font-size:1.75rem; font-weight:200; letter-spacing:-.02em; margin-top:5px}
.map-tip .mtp small{font-size:0.875rem; color:var(--muted)}
.map-tip .mts{font-size:0.65625rem; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin-top:4px}
.map-tip .mtn{font-size:0.71875rem; line-height:1.5; color:var(--muted); margin-top:7px}
.map-strip{position:absolute; left:18px; right:18px; bottom:12px; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.map-strip .ms-note{font-size:0.78125rem; color:var(--muted)}
.map-strip .ms-note b{color:var(--green-br); font-weight:600}
.map-strip .ms-leg{display:flex; gap:14px}
.map-strip .ms-leg span{display:flex; align-items:center; gap:6px; font-size:0.65625rem; letter-spacing:.08em; text-transform:uppercase; color:var(--faint)}
.map-strip .lg-pin{width:8px; height:8px; border-radius:50%; background:var(--green-br); box-shadow:0 0 7px rgba(18,199,44,.6)}
.map-strip .lg-ring{width:11px; height:11px; border-radius:50%; border:1px dashed var(--green-br)}
.trendPanel{padding:15px 17px; position:relative; display:flex; flex-direction:column; min-height:170px}
.tp-head{display:flex; align-items:center; justify-content:space-between}
.tp-head .t{font-size:0.875rem; font-weight:500}
.legend{display:flex; gap:14px}
.legend span{display:flex; align-items:center; gap:6px; font-size:0.6875rem; color:var(--muted)}
.legend i{width:9px;height:9px;border-radius:2px}
.tchart{flex:1; margin-top:8px; position:relative; min-height:0}
.tchart svg{width:100%; height:100%; display:block}
.tax{display:flex; justify-content:space-between; color:var(--faint); font-size:0.625rem; margin-top:4px}
.rr-t{font-size:0.8125rem; font-weight:600; display:flex; align-items:center; gap:8px}
.rr-t i{width:7px;height:7px;border-radius:50%;background:var(--green-br);box-shadow:0 0 0 3px rgba(18,199,44,.16)}
.mkt{display:flex; flex-direction:column; gap:10px}
.mrow{display:flex; align-items:center; gap:10px}
.mrow .nm{font-size:0.75rem; width:112px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--muted)}
.mrow .track{flex:1; height:5px; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden}
.mrow .track i{display:block; height:100%; border-radius:3px; background:var(--green); transition:width .6s var(--ease)}
.mrow:first-child .track i{background:linear-gradient(90deg,var(--green),var(--green-br))}
.mrow .v{font-size:0.6875rem; color:var(--muted); width:34px; text-align:right; font-weight:500}
.ctry{border-top:1px solid var(--hair-2); padding-top:13px}
.ctry .big{display:flex; align-items:baseline; gap:8px}
.ctry .big .n{font-size:2rem; font-weight:200; letter-spacing:-.02em}
.ctry .big .l{font-size:0.75rem; color:var(--muted)}
.ctry .list{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.ctry .pill{font-size:0.6875rem; color:var(--muted); background:var(--tile); border:1px solid var(--hair-2); border-radius:20px; padding:4px 10px}

/* ===== schedule / timeline ===== */
.slate{display:flex; flex-direction:column; gap:9px; overflow-y:auto}
.srow{display:flex; align-items:center; gap:13px; background:var(--tile); border:1px solid var(--hair-2); border-radius:12px; padding:11px 13px; transition:border-color .15s var(--ease)}
.srow:hover{border-color:rgba(255,255,255,.14)}
.srow.past{opacity:.5; transition:border-color .15s var(--ease), opacity .15s var(--ease)}
.srow.past:hover,.srow.past:focus-visible{opacity:.85}
.srow .date{width:58px; flex-shrink:0; text-align:center}
.srow .date .dow{font-size:0.625rem; color:var(--faint); text-transform:uppercase; letter-spacing:.05em}
.srow .date .dd{font-size:1.25rem; font-weight:200; line-height:1}
.srow .thumb{width:56px; height:42px; border-radius:8px; object-fit:cover; flex-shrink:0; background:#141414}
.srow .info{flex:1; min-width:0}
.srow .info .nm{font-size:0.8125rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.srow .info .mt{font-size:0.6875rem; color:var(--faint); margin-top:3px}
.srow .st{font-size:0.625rem; font-weight:600; letter-spacing:.03em; padding:4px 9px; border-radius:20px; flex-shrink:0}
.st.sched{color:var(--green-br); background:rgba(18,199,44,.1); border:1px solid rgba(18,199,44,.28)}
.st.prod{color:var(--amber); background:rgba(243,148,68,.1); border:1px solid rgba(243,148,68,.28)}
.timeline{display:flex; flex-direction:column; gap:0; overflow-y:auto; position:relative}
.titem{display:flex; gap:13px; padding:2px 0 15px; position:relative}
.titem::before{content:''; position:absolute; left:5px; top:14px; bottom:-4px; width:1px; background:var(--hair)}
.titem:last-child::before{display:none}
.titem .dot{width:11px; height:11px; border-radius:50%; background:var(--green-br); border:2px solid #0a0c0d; margin-top:3px; flex-shrink:0; z-index:1; box-shadow:0 0 0 3px rgba(18,199,44,.14)}
.titem.dim .dot{background:var(--faint); box-shadow:none}
.titem .tc{flex:1; min-width:0}
.titem .tc .td{font-size:0.65625rem; color:var(--faint); letter-spacing:.02em}
.titem .tc .tt{font-size:0.78125rem; color:var(--ink); margin-top:3px; line-height:1.4}
.growth svg{width:100%; height:100%; display:block}

/* ===== layout polish: rails size to content (no empty stretched panels) ===== */
.lrail, .rrail{align-self:start; max-height:calc(100vh - 96px)}
.lrail{overflow-y:auto}
.lrail::-webkit-scrollbar,.rrail::-webkit-scrollbar{width:7px}
.lrail::-webkit-scrollbar-thumb,.rrail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:7px}
[data-car]{cursor:pointer}

/* ===== car detail drawer ===== */
.cd-back{position:fixed; inset:0; z-index:130; background:rgba(4,5,5,.66); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); display:none; align-items:center; justify-content:center; padding:20px}
.cd-back.open{display:flex; animation:palfade .2s var(--ease)}
.cd{width:min(460px,94vw); max-height:90vh; overflow-y:auto; background:#0c0e10; border:1px solid var(--hair); border-radius:20px; box-shadow:0 40px 120px rgba(0,0,0,.7); scrollbar-width:thin}
.cd::-webkit-scrollbar{width:8px}.cd::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:8px}
.cd-hero{position:relative; aspect-ratio:16/10; background:linear-gradient(135deg,#16181b,#0d0f11); overflow:hidden}
.cd-hero img{width:100%;height:100%;object-fit:cover}
.cd-hero .grad{position:absolute; inset:0; background:linear-gradient(0deg,rgba(4,5,5,.55),transparent 45%)}
.cd-hero .cd-badges{position:absolute; top:13px; left:13px; display:flex; gap:6px; z-index:2}
.cd-close{position:absolute; top:13px; right:13px; width:32px;height:32px;border-radius:50%; background:rgba(9,11,12,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid var(--hair); display:grid;place-items:center; cursor:pointer; color:var(--ink); z-index:2; transition:.15s var(--ease)}
.cd-close:hover{background:rgba(9,11,12,.85)}
.cd-close svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none}
.cd-body{padding:18px 20px 20px}
.cd-body h3{font-size:1.375rem; font-weight:400; letter-spacing:-.01em; line-height:1.15}
.cd-code{font-size:0.75rem; color:var(--faint); margin-top:6px; letter-spacing:.03em}
.cd-specs{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:17px}
.cd-spec{background:var(--tile); border:1px solid var(--hair-2); border-radius:11px; padding:11px 13px}
.cd-spec .k{font-size:0.625rem; color:var(--faint); text-transform:uppercase; letter-spacing:.05em}
.cd-spec .v{font-size:1rem; font-weight:500; margin-top:5px; letter-spacing:-.01em}
.cd-spec .v.acc{color:var(--green-br)}
.cd-actions{display:flex; flex-direction:column; gap:8px; margin-top:16px}
.cd-btn{display:flex; align-items:center; justify-content:space-between; padding:12px 15px; border-radius:11px; font-size:0.8125rem; font-weight:500; cursor:pointer; transition:.15s var(--ease); border:1px solid transparent}
.cd-btn svg{width:15px;height:15px}
.cd-btn.primary{background:var(--green); color:#041206}
.cd-btn.primary:hover{background:var(--green-br)}
.cd-btn.ghost{background:var(--tile); border-color:var(--hair); color:var(--ink)}
.cd-btn.ghost:hover{border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.05)}

/* ===== interactive chart ===== */
.chart{position:relative; width:100%; height:100%; cursor:crosshair}
.chart svg{display:block; width:100%; height:100%}
.chart-cross{position:absolute; width:1px; background:linear-gradient(180deg,transparent,rgba(255,255,255,.28),transparent); pointer-events:none; opacity:0; transition:opacity .12s var(--ease)}
.chart-cross.on{opacity:1}
.chart-tip{position:absolute; pointer-events:none; z-index:5; background:#0c0e10; border:1px solid var(--hair); border-radius:10px; padding:8px 11px; box-shadow:0 12px 34px rgba(0,0,0,.6); transform:translate(-50%,calc(-100% - 12px)); white-space:nowrap; opacity:0; transition:opacity .1s var(--ease)}
.chart-tip.on{opacity:1}
.chart-tip .tl{color:var(--faint); font-size:0.625rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px}
.chart-tip .tv{display:flex; align-items:center; gap:7px; font-size:0.78125rem; color:var(--muted); line-height:1.5}
.chart-tip .tv i{width:8px;height:8px;border-radius:2px; flex-shrink:0}
.chart-tip .tv b{color:var(--ink); font-weight:600}

/* ===== month drill-down drawer ===== */
.cd.cd-month{width:min(680px,94vw)}
.mo-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:18px 20px 14px}
.mo-t{font-size:1.4375rem; font-weight:400; letter-spacing:-.01em}
.mo-t .mo-live{font-size:0.625rem; font-weight:700; letter-spacing:.08em; color:var(--green-br); background:rgba(18,199,44,.12); border:1px solid rgba(18,199,44,.3); border-radius:20px; padding:3px 8px; vertical-align:middle; margin-left:8px}
.mo-s{font-size:0.75rem; color:var(--muted); margin-top:6px}
.mo-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:9px; padding:0 20px 15px}
.mo-stat{background:var(--tile); border:1px solid var(--hair-2); border-radius:11px; padding:11px 8px; text-align:center}
.mo-stat b{display:block; font-size:1.4375rem; font-weight:200; letter-spacing:-.02em}
.mo-stat span{font-size:0.625rem; color:var(--faint); text-transform:uppercase; letter-spacing:.04em}
/* month recap strips (social + reels live that month) */
.mo-soc{display:grid; grid-template-columns:repeat(5,1fr); gap:9px; padding:0 20px 8px}
.mo-soc .c{background:var(--tile); border:1px solid var(--hair-2); border-radius:11px; padding:10px 8px; text-align:center; min-width:0}
.mo-soc .c b{display:block; font-size:1.1875rem; font-weight:300; letter-spacing:-.01em; white-space:nowrap}
.mo-soc .c b.acc{color:var(--green-br)}
.mo-soc .c span{font-size:0.578125rem; color:var(--faint); text-transform:uppercase; letter-spacing:.05em}
.mo-note{font-size:0.65625rem; color:var(--faint); padding:0 20px 8px}
.mo-reels{display:flex; flex-direction:column; gap:8px; padding:0 20px 6px}
.mo-reel{display:flex; align-items:center; gap:11px; background:var(--tile); border:1px solid var(--hair-2); border-radius:11px; padding:8px 11px; transition:border-color .15s var(--ease)}
.mo-reel:hover,.mo-reel:focus-visible{border-color:rgba(18,199,44,.4)}
.mo-reel img{width:38px; height:60px; border-radius:7px; object-fit:cover; background:#101214; flex-shrink:0}
.mo-reel .in{flex:1; min-width:0}
.mo-reel .nm{font-size:0.78125rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mo-reel .st{font-size:0.65625rem; color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mo-reel .go{color:var(--green-br); font-size:0.8125rem; flex-shrink:0}
@media(max-width:640px){ .mo-soc{grid-template-columns:repeat(3,1fr)} }
.mo-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:9px; padding:2px 20px 20px; max-height:48vh; overflow-y:auto; scrollbar-width:thin}
.mo-grid::-webkit-scrollbar{width:8px}.mo-grid::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:8px}
.mcard{display:flex; align-items:center; gap:10px; background:var(--tile); border:1px solid var(--hair-2); border-radius:11px; padding:8px 10px; cursor:pointer; text-align:left; color:var(--ink); font:inherit; transition:transform .15s var(--ease), border-color .15s var(--ease)}
.mcard:hover{border-color:rgba(18,199,44,.45); transform:translateY(-2px)}
.mth{width:46px; height:34px; border-radius:7px; overflow:hidden; flex-shrink:0; background:#141414}
.mth img{width:100%;height:100%;object-fit:cover}
.mci{min-width:0; display:flex; flex-direction:column}
.mnm{font-size:0.75rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mmt{font-size:0.65625rem; color:var(--faint); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ===== skip link (a11y) ===== */
.skip{position:fixed; top:-60px; left:14px; z-index:200; background:var(--green); color:#041206; font-weight:600; font-size:0.8125rem; padding:9px 14px; border-radius:9px; transition:top .18s var(--ease)}
.skip:focus{top:14px}

/* ===== touch targets (a11y) — desktop keeps its density; coarse pointers get ≥44px =====
   On touch devices (tablet/phone) every interactive control expands to the 44px WCAG
   target. Fine-pointer (mouse) users keep the tighter, more elegant desktop layout. */
@media (pointer: coarse){
  .tabs a, .rangep button, .chip, .cd-btn, .pal-item, .ctry .pill, .search,
  .sig, .bcol, .mcard, .srow, .shoot, .fcard, .fcard.link,
  [role="button"], [data-car], [data-mk], [data-at]{
    min-height:44px;
  }
  .tabs a, .rangep button, .chip, .ctry .pill{
    display:inline-flex; align-items:center; justify-content:center;
  }
  .iconb, .cd-close{ width:44px; height:44px; }
  .cd-close svg{ width:17px; height:17px; }
}