
/* ══════════════════════════════════════════════════════════════════════════
   BASKETS REVAMP (2026-07) — "Rotation Map" design layer.
   Ports the macro.html language: state-tinted aurora, mono numerals, glass
   cards, gbtn toggles, draw-on-reveal + breathing. All classes prefixed rvx-
   and tokens --rvx-* so nothing collides with the retained tape/table/chart
   styles above. Signature = the Rotation Map (strength × momentum quadrant).
   ════════════════════════════════════════════════════════════════════════ */
:root{
  --rvx-num: ui-monospace,"SF Mono",SFMono-Regular,"Cascadia Mono",Menlo,Consolas,monospace;
  --rvx-hair: color-mix(in srgb,var(--text) 9%,transparent);
  --rvx-hair2: color-mix(in srgb,var(--text) 15%,transparent);
  --rvx-lead:#3da564; --rvx-weak:#e0a030; --rvx-improve:#4f86e0; --rvx-lag:#d15656;
  --rvx-lead-t: color-mix(in srgb,var(--rvx-lead) 16%,transparent);
  --rvx-weak-t: color-mix(in srgb,var(--rvx-weak) 15%,transparent);
  --rvx-improve-t: color-mix(in srgb,var(--rvx-improve) 15%,transparent);
  --rvx-lag-t: color-mix(in srgb,var(--rvx-lag) 14%,transparent);
}
.rvx-num{font-family:var(--rvx-num);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.rvx-up{color:var(--ink-up, var(--up))} .rvx-dn{color:var(--ink-down, var(--down))} .rvx-mut{color:var(--muted)}

/* aurora backdrop — fixed radial blooms, state-tinted (cool leaving → warm arriving) */
.rvx-aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.rvx-aurora b{position:absolute;border-radius:50%;filter:blur(90px);opacity:.42;animation:rvxDrift 26s ease-in-out infinite}
.rvx-aurora .a1{width:600px;height:600px;left:-150px;top:-160px;background:radial-gradient(circle,#1c3a63 0%,transparent 68%)}
.rvx-aurora .a2{width:540px;height:540px;right:-120px;top:-70px;background:radial-gradient(circle,#4a3a1a 0%,transparent 66%);opacity:.36;animation-delay:-9s}
.rvx-aurora .a3{width:680px;height:520px;left:34%;bottom:-280px;background:radial-gradient(circle,#22304d 0%,transparent 70%);opacity:.34;animation-delay:-15s}
html[data-theme="light"] .rvx-aurora b{opacity:.22}
@keyframes rvxDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(24px,20px) scale(1.06)}}

.rvx-card{background:color-mix(in srgb,var(--panel) 82%,transparent);border:1px solid var(--rvx-hair);border-radius:16px;box-shadow:var(--card-shadow);backdrop-filter:blur(6px)}
.rvx-reveal{opacity:0;transform:translateY(12px);animation:rvxReveal .7s cubic-bezier(.2,.7,.2,1) forwards}
.rvx-sec{margin-top:32px}
.rvx-sec-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 4px}
.rvx-sec-h h2{font-size:19px;font-weight:750;margin:0;letter-spacing:-.01em;border:0;padding:0}
.rvx-sec-h .q{font-size:13px;color:var(--muted)}
.rvx-sec-h .r{margin-left:auto;font-size:12px;color:var(--muted);text-decoration:none}
.rvx-sec-h .r:hover{color:var(--ink-link, var(--link))}
.rvx-sec-sub{font-size:13px;color:var(--muted);margin:0 0 15px;max-width:80ch}

/* ── VERDICT HERO ── */
.rvx-hero{margin-top:16px;padding:24px 26px;position:relative;overflow:hidden;border-radius:20px;border:1px solid var(--rvx-hair2);
  background:radial-gradient(120% 140% at 8% 0%,var(--rvx-hero-a,color-mix(in srgb,var(--info) 12%,transparent)) 0%,transparent 42%),
    radial-gradient(120% 160% at 100% 20%,var(--rvx-hero-b,color-mix(in srgb,var(--warn) 10%,transparent)) 0%,transparent 46%),
    color-mix(in srgb,var(--panel) 80%,transparent);
  box-shadow:0 30px 80px -42px rgba(0,0,0,.7),inset 0 1px 0 color-mix(in srgb,#fff 6%,transparent);backdrop-filter:blur(10px)}
.rvx-hero.strain{--rvx-hero-a:color-mix(in srgb,var(--down) 13%,transparent)}
.rvx-hero.steady{--rvx-hero-a:color-mix(in srgb,var(--up) 12%,transparent)}
.rvx-eyebrow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:700}
.rvx-eyebrow .as-of{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:500}
.rvx-hgrid{display:grid;grid-template-columns:1.4fr .95fr;gap:24px;margin-top:13px;align-items:center}
.rvx-vword{font-size:38px;line-height:1.05;font-weight:800;letter-spacing:-.02em;margin:2px 0 8px}
.rvx-vword .ac{background:linear-gradient(90deg,var(--warn),var(--up));-webkit-background-clip:text;background-clip:text;color:transparent}
.rvx-hero.strain .rvx-vword .ac{background:linear-gradient(90deg,var(--warn),var(--down));-webkit-background-clip:text;background-clip:text}
.rvx-vsub{font-size:15px;color:color-mix(in srgb,var(--text) 88%,transparent);max-width:48ch}
.rvx-vsub b{color:var(--text)}
.rvx-stance{display:inline-flex;align-items:center;gap:8px;margin-top:15px;padding:7px 13px;border-radius:999px;
  background:color-mix(in srgb,var(--warn) 14%,transparent);border:1px solid color-mix(in srgb,var(--warn) 34%,transparent);font-weight:700;font-size:13px}
.rvx-hero.steady .rvx-stance{background:color-mix(in srgb,var(--up) 13%,transparent);border-color:color-mix(in srgb,var(--up) 32%,transparent)}
.rvx-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;align-items:center}
.rvx-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;border:1px solid var(--rvx-hair2);background:color-mix(in srgb,var(--panel2) 40%,transparent);text-decoration:none;color:var(--text)}
.rvx-chip.sz{color:var(--ink-warn, var(--warn));border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
/* handoff */
.rvx-hocard{border:1px solid var(--rvx-hair2);border-radius:14px;overflow:hidden;background:color-mix(in srgb,var(--panel2) 32%,transparent)}
.rvx-hocard .cap{font-size:10px;letter-spacing:.06em;color:var(--muted);padding:9px 16px 0;font-weight:700}
.rvx-handoff{display:flex;align-items:stretch}
.rvx-hocol{flex:1;padding:12px 15px;min-width:0}
.rvx-hocol .lbl{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
.rvx-hocol .nm{font-size:15px;font-weight:750;margin:4px 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rvx-hocol .meta{font-size:11.5px;color:var(--muted)}
.rvx-hocol.out .nm{color:var(--rvx-weak)} .rvx-hocol.in .nm{color:var(--rvx-lead)}
.rvx-hoarrow{flex:none;width:46px;display:grid;place-items:center}
.rvx-hoarrow svg{width:46px;height:28px;overflow:visible}
.rvx-hoarrow path.ln{stroke:url(#rvxHo);stroke-width:2;fill:none;stroke-linecap:round;stroke-dasharray:58;stroke-dashoffset:58;animation:rvxHoDraw 1.1s ease-out .5s forwards}
.rvx-hoarrow path.hd{fill:var(--rvx-lead);opacity:0;animation:rvxHoHead .3s ease-out 1.5s forwards}
@keyframes rvxReveal{to{opacity:1;transform:none}}
@keyframes rvxHoDraw{to{stroke-dashoffset:0}} @keyframes rvxHoHead{to{opacity:1}}

/* ── ACT BOARD ── */
.rvx-lanes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.rvx-lane{padding:14px;border-radius:14px;border:1px solid var(--rvx-hair);background:color-mix(in srgb,var(--panel) 70%,transparent)}
.rvx-lane-h{display:flex;align-items:center;gap:8px;font-weight:750;font-size:13.5px;margin-bottom:3px}
.rvx-lane-h .ic{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;font-size:11px;flex:none}
.rvx-lane-h .ct{margin-left:auto;font-family:var(--rvx-num);font-size:12px;color:var(--muted)}
.rvx-lane-desc{font-size:11.5px;color:var(--muted);margin-bottom:10px;min-height:30px}
.rvx-lane.buy{border-color:color-mix(in srgb,var(--rvx-lead) 30%,transparent)} .rvx-lane.buy .ic{background:color-mix(in srgb,var(--rvx-lead) 22%,transparent);color:var(--rvx-lead)}
.rvx-lane.wait .ic{background:color-mix(in srgb,var(--rvx-improve) 22%,transparent);color:var(--rvx-improve)}
.rvx-lane.trim .ic{background:color-mix(in srgb,var(--rvx-weak) 22%,transparent);color:var(--rvx-weak)}
.rvx-lane.avoid .ic{background:color-mix(in srgb,var(--rvx-lag) 20%,transparent);color:var(--rvx-lag)}
/* W-A bottoming watch — the "weak but turning up" quadrant ink, reused (no new
   token). Spans the full row UNDER the existing four so their 4-col geometry is
   untouched at every breakpoint. */
.rvx-lane.bottom{grid-column:1/-1}
.rvx-lane.bottom .ic{background:color-mix(in srgb,var(--rvx-improve) 22%,transparent);color:var(--rvx-improve)}
.rvx-lane.bottom .rvx-lane-desc{min-height:0}
.rvx-trow{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--rvx-hair);text-decoration:none;color:var(--text);transition:padding-left .15s ease}
.rvx-trow:hover{padding-left:4px}
.rvx-trow .tnm{font-weight:600;font-size:12.5px;flex:1;min-width:0}
.rvx-trow .tnm .rsn{display:block;font-size:10.5px;color:var(--muted);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rvx-trow .tret{font-family:var(--rvx-num);font-size:12px;font-weight:600}
.rvx-trow .tick{color:var(--rvx-lead);font-size:11px}
.rvx-trow .ern{color:var(--ink-warn, var(--warn));font-weight:600}
.rvx-trow .tnm .mlcchip{display:inline-block;margin-left:6px;padding:0 5px;font-size:9.5px;line-height:15px;font-weight:700;letter-spacing:.02em;color:var(--ink-warn, var(--warn));border:1px solid var(--warn);border-radius:5px;opacity:.85;vertical-align:1px;white-space:nowrap}
.rvx-actfoot{font-size:11px;color:var(--muted);margin:8px 2px 0}
.rvx-actfoot:empty{display:none}
.rvx-lane .more{display:block;padding-top:8px;border-top:1px solid var(--rvx-hair);font-size:11.5px;color:var(--muted);text-decoration:none}

/* ── ROTATION MAP ── */
.rvx-map-wrap{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:20px;align-items:start}
.rvx-map-card{padding:16px 16px 8px;position:relative}
.rvx-rmap{width:100%;height:auto;display:block;overflow:visible;touch-action:none}
.rvx-rmap .qfill{transition:opacity .2s} .rvx-rmap .axis{stroke:var(--rvx-hair2);stroke-width:1}
.rvx-rmap .axlab{fill:var(--muted);font-size:9px;font-family:var(--font-ui);letter-spacing:.04em}
.rvx-rmap .qlab{font-family:var(--font-ui);font-weight:800;font-size:11px;letter-spacing:.03em;text-transform:uppercase}
.rvx-rmap .qsub{font-family:var(--font-ui);font-size:8px;fill:var(--muted)}
.rvx-rmap .dot{cursor:pointer} .rvx-rmap .dot circle{stroke:var(--bg);stroke-width:1.4}
.rvx-rmap .dot text{font-family:var(--font-ui);font-size:8px;fill:color-mix(in srgb,var(--text) 78%,transparent);pointer-events:none}
.rvx-rmap .dot:hover circle{stroke:#fff;stroke-width:2} .rvx-rmap .dot.dim{opacity:.14}
.rvx-rmap .lead-ring{fill:none;stroke:var(--rvx-lead);stroke-width:1.5;opacity:.5;transform-box:fill-box;transform-origin:center;animation:rvxRing 2.8s ease-out infinite}
@keyframes rvxRing{0%{transform:scale(1);opacity:.55}70%{transform:scale(2.6);opacity:0}100%{opacity:0}}
.rvx-legend{display:flex;flex-wrap:wrap;gap:11px;margin-top:6px;font-size:11px;color:var(--muted);padding:0 4px 8px}
.rvx-legend span{display:inline-flex;align-items:center;gap:5px} .rvx-legend i{width:9px;height:9px;border-radius:50%;display:inline-block}
.rvx-rtip{position:absolute;pointer-events:none;z-index:20;min-width:170px;padding:10px 12px;border-radius:11px;background:var(--glass-bg);border:1px solid var(--glass-brd);box-shadow:var(--glass-shadow);backdrop-filter:var(--glass-blur);font-size:12px;opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s}
.rvx-rtip.on{opacity:1;transform:none}
.rvx-rtip .rt-nm{font-weight:750;font-size:13px} .rvx-rtip .rt-cat{font-size:10.5px;color:var(--muted);margin-bottom:6px}
.rvx-rtip .rt-row{display:flex;justify-content:space-between;gap:14px;margin:2px 0} .rvx-rtip .rt-row span:last-child{font-family:var(--rvx-num);font-weight:600}
.rvx-rtip .rt-stance{margin-top:7px;font-weight:700;font-size:11.5px}
/* linked board */
.rvx-board-card{padding:14px 16px}
.rvx-filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.rvx-fbtn{font:inherit;font-size:12px;padding:5px 11px;border-radius:9px;cursor:pointer;color:var(--muted);background:var(--gbtn-bg);border:1px solid var(--gbtn-brd);box-shadow:inset 0 1px 0 var(--gbtn-sheen);transition:.15s}
.rvx-fbtn:hover{background:var(--gbtn-bg-hover);color:var(--text)}
.rvx-fbtn.on{color:var(--text);border-color:var(--gbtn-brd-hover);background:color-mix(in srgb,var(--info) 16%,var(--gbtn-bg))}
.rvx-fbtn .fc{font-family:var(--rvx-num);opacity:.7;margin-left:4px}
.rvx-brow{display:grid;grid-template-columns:22px minmax(0,1.6fr) 54px 48px 60px 50px 32px;gap:9px;align-items:center;padding:9px 6px;border-top:1px solid var(--rvx-hair);text-decoration:none;color:var(--text);border-radius:8px;animation:rvxRowPop .4s ease both}
@keyframes rvxRowPop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.rvx-brow:hover{background:color-mix(in srgb,var(--panel2) 50%,transparent)}
.rvx-brow .rk{font-family:var(--rvx-num);font-size:11px;color:var(--muted);text-align:right}
.rvx-brow .bnm{font-weight:600;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rvx-brow .bnm .cat{font-size:10px;color:var(--muted);font-weight:400}
.rvx-scorebar{height:7px;border-radius:4px;background:color-mix(in srgb,var(--text) 8%,transparent);overflow:hidden;position:relative}
.rvx-scorebar i{position:absolute;inset:0 auto 0 0;border-radius:4px}
.rvx-stag{font-size:10px;font-weight:700;padding:2px 6px;border-radius:6px;text-align:center;white-space:nowrap;
  background:color-mix(in srgb,currentColor 15%,transparent)}
.rvx-brow .mv{font-family:var(--rvx-num);font-size:12px;font-weight:600;text-align:right}
.rvx-brow .spark{height:24px} .rvx-vel{font-family:var(--rvx-num);font-size:11px;text-align:right;font-weight:600}
.rvx-qdot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:5px;vertical-align:middle;flex:none}

/* ── INTERNALS ── */
.rvx-internals{display:grid;grid-template-columns:1.2fr repeat(4,minmax(0,1fr));gap:13px}
.rvx-gcard{padding:14px;border-radius:13px;border:1px solid var(--rvx-hair);background:color-mix(in srgb,var(--panel) 68%,transparent);text-align:center}
.rvx-gcard .gl{font-size:11px;color:var(--muted);letter-spacing:.03em}
.rvx-gcard .gv{font-family:var(--rvx-num);font-size:22px;font-weight:700;margin:5px 0 2px}
.rvx-gcard .gm{font-size:10.5px;color:var(--muted)}
.rvx-gcard.verdict{text-align:left;display:flex;flex-direction:column;justify-content:center}
.rvx-gcard.verdict .gbig{font-size:19px;font-weight:750;color:var(--ink-warn, var(--warn))}
.rvx-minibar{height:6px;border-radius:3px;background:color-mix(in srgb,var(--text) 8%,transparent);margin-top:8px;overflow:hidden;position:relative}
.rvx-minibar i{position:absolute;inset:0 auto 0 0;border-radius:3px}

@media (prefers-reduced-motion:reduce){
  .rvx-aurora b,.rvx-reveal,.rvx-brow,.rvx-hoarrow path,.rvx-rmap .lead-ring{animation:none!important}
  .rvx-reveal{opacity:1;transform:none} .rvx-hoarrow path.ln{stroke-dashoffset:0} .rvx-hoarrow path.hd{opacity:1}
}
@media (max-width:900px){
  .rvx-hgrid{grid-template-columns:1fr} .rvx-vword{font-size:30px}
  .rvx-lanes{grid-template-columns:1fr 1fr} .rvx-map-wrap{grid-template-columns:1fr}
  .rvx-internals{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){ .rvx-lanes{grid-template-columns:1fr} }
