/* ============================================================================
   exotic — css/app/detail.css · Asset + Thesis drill-in pages
   ----------------------------------------------------------------------------
   Both pages share one skeleton on purpose: content column left, the
   trade/invest widget pinned right in a 380px rail (.dt-grid below; the Lobby's
   own .hero rail is 326px — these are NOT the same number), so the
   CTA is always visible and the two surfaces feel like one product.
   Requires tokens.css + ../base.css + lobby.css + shell.css.
   ========================================================================== */

/* detail pages sit on the same 1400px rails as every other page (lobby.css) */

.dt-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;align-items:start}
/* one soft prism aura behind the rail — on the grid so the rail can scroll */
.dt-grid::before{content:"";position:absolute;z-index:-1;right:-40px;top:-30px;width:250px;height:220px;
  background:var(--grad);filter:blur(52px);opacity:.15;border-radius:50%;pointer-events:none}
body.theme-dark .dt-grid::before{opacity:.12}
.dt-main{min-width:0;display:flex;flex-direction:column;gap:26px}
/* no max-height/inner scroll: capping the rail at 100vh with a hidden
   scrollbar CLIPPED its last card with zero affordance (the edu-card's
   third sentence was unreachable — QA 2026-07-16). Un-capped, sticky
   simply releases at the grid's end and the tail is reachable by the
   page's own scroll. */
.dt-rail{position:sticky;top:16px;display:flex;flex-direction:column;gap:14px}
/* mounts with nothing in them (e.g. no open position) must not eat a flex
   gap — otherwise the widget starts one gap lower than the chart card */
.dt-rail>*:empty{display:none}
/* everything in the rail shares one width and one radius */
.dt-rail .tw{width:100%;border-radius:var(--rad-4)}
.dt-rail .card,.dt-rail .edu-card{border-radius:var(--rad-4)}

/* ============================================================================
   Detail header — ONE element for both pages: identity left, price right.
   Assets use a logo; theses use the ✦ tile. Apple Stocks-style.
   ========================================================================== */
/* everything hangs from ONE top line: identity left, tools + price right.
   flex-start (not center) — the dek makes the left cluster tall, and center
   alignment floats the tools and price into the middle void. */
.as-head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;position:relative;z-index:5}
.as-head .as-tools{margin-top:7px}   /* optical align with the 25px title line */
.as-head .tile{width:46px;height:46px;flex:0 0 auto;display:grid;place-items:center;border-radius:var(--rad-2);
  background:var(--grad);color:var(--ink-on-grad);font-size:20px;box-shadow:var(--crisp)}
.as-head .logo{width:46px;height:46px;font-size:19px}
.as-id{min-width:0;flex:1}
.as-id h1{margin:0;font-size:26px;font-weight:600;letter-spacing:-0.02em;display:flex;align-items:center;gap:10px}
.as-id .sub{margin-top:4px;font-family:var(--font-num);font-size:12px;color:var(--muted)}
.as-id .dek{margin:7px 0 0;font-size:14px;line-height:1.5;color:var(--ink-2);max-width:56ch;text-wrap:pretty}
.as-px{text-align:right}
.as-px .v{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:30px;font-weight:500;letter-spacing:-0.02em}
.as-px .d{display:flex;justify-content:flex-end;align-items:baseline;gap:9px;margin-top:3px}
.as-px .d .chip{font-family:var(--font-num);font-size:12px;font-weight:600;border-radius:var(--rad-1);padding:3px 8px}
.as-px .d .abs{font-family:var(--font-num);font-size:12px;color:var(--muted)}

/* ============================================================================
   Price card — chart + volume + optional order book
   ========================================================================== */
.px-card{padding:18px 20px 12px;display:flex;flex-direction:column}
.px-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.px-top .rhs{display:flex;align-items:center;gap:10px}
.px-tools{display:flex;align-items:center;gap:8px}
.tv-btn{padding:5px 9px}
.tv-btn svg{display:block}
/* ---- the pro chart (TradingView) — mounts on request, replaces the house
   chart while on; the range seg yields to TV's own toolbar.
   display is gated by .tv-on, NOT the hidden attribute — any css display
   value silently overrides [hidden] and the empty box reserves its 460px ---- */
/* height = the native stack it replaces (chart 300 + volume + date row,
   measured 367px) so toggling charts never moves the page below */
.px-tv{display:none;position:relative;height:367px;margin:6px 0 0}
.px-hero.tv-on .px-tv{display:flex;flex-direction:column}
/* no box, no shadow — the chart sits on the page like the old trade.html
   stage; its background is sampled from the page at mount */
.px-tv .tradingview-widget-container{flex:1;min-height:0;overflow:hidden}
/* TV paints a 1px frame inside its iframe that no config removes — grow the
   iframe 2px past every edge and clip, so the frame falls off the paper
   (!important: the embed script sets inline width/height) */
.px-tv iframe{border:0;width:calc(100% + 4px) !important;height:calc(100% + 4px) !important;margin:-2px}
.px-hero.tv-on .px-chart,.px-hero.tv-on .px-vol,.px-hero.tv-on .px-x{display:none}
/* one pill row for both charts — TV mode reveals the extra windows */
.px-top .seg .tv-only{display:none}
.px-hero.tv-on .px-top .seg .tv-only{display:block}
.bk-toggle{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-num);font-size:11px;color:var(--muted);white-space:nowrap;
  background:transparent;border:1px solid var(--hairline-2);border-radius:var(--rad-pill);padding:6px 12px;cursor:pointer;
  transition:color var(--t1),border-color var(--t1)}
.bk-toggle:hover{color:var(--ink);border-color:var(--hairline)}
.bk-toggle.on{color:var(--ink);background:var(--surface-2);border-color:var(--hairline)}
/* ============================================================================
   THE HERO (Lightyear read) — the chart lives ON THE PAGE, no card. Identity,
   price and tools float over its upper reaches; the range picker and extras
   sit under it. Everything below stays carded — the naked hero is the point.
   ========================================================================== */
.px-hero{position:relative;isolation:isolate;padding:2px 0 0}
/* soft daylight wash — falls from the VERY TOP of the page (behind the
   search bar too), full-bleed, no rounded edges: light on the paper, not a
   ghost card around the hero */
.lb-main{position:relative}
.lb-main:has(.px-hero)::before{content:"";position:absolute;z-index:-1;
  top:calc(-1*env(safe-area-inset-top,0px));left:0;right:0;
  height:calc(460px + env(safe-area-inset-top,0px));pointer-events:none;
  background:
    radial-gradient(120% 84% at 14% 0%, color-mix(in oklab,var(--g3) 11%,transparent), transparent 58%),
    radial-gradient(90% 66% at 74% 0%, color-mix(in oklab,var(--g5) 8%,transparent), transparent 62%);
  -webkit-mask-image:linear-gradient(180deg,#000 42%,transparent);mask-image:linear-gradient(180deg,#000 42%,transparent)}
/* dark paper amplifies the same mix — run the light at half strength */
body.theme-dark .lb-main:has(.px-hero)::before{background:
    radial-gradient(120% 84% at 14% 0%, color-mix(in oklab,var(--g3) 5%,transparent), transparent 58%),
    radial-gradient(90% 66% at 74% 0%, color-mix(in oklab,var(--g5) 4%,transparent), transparent 62%)}
/* identity + price float ON TOP of the chart; only their controls take clicks
   so the crosshair keeps working right up to the text */
.px-hero .as-head{position:relative;z-index:6;pointer-events:none}
.px-hero .px-num{position:relative;z-index:2;pointer-events:none}
.px-hero .as-head :is(a,button,[data-explain]),.px-hero .as-head .mkt-panel,.px-hero .px-num [data-explain]{pointer-events:auto}
.px-hero .px-num{margin-top:8px}
.px-hero .px-num .v{font-size:38px;letter-spacing:-0.025em}
/* the plot starts BELOW the price row — markers and their labels can reach
   the chart's top edge without ever crossing the price or the title. The
   "on the page" feel comes from the wash and the missing card, not overlap. */
.px-hero .px-chart{z-index:1;height:300px;margin:6px 0 0}
/* markers rest quiet and wake with the pointer — one voice at the top */
.px-hero .px-chart .oline{opacity:.45;transition:opacity var(--t2)}
.px-hero .px-chart .ol-lb,.px-hero .px-chart .hl-lb{opacity:.72;transition:opacity var(--t2)}
.px-hero .px-chart:hover .oline,.px-hero .px-chart .oline.live{opacity:.85}
.px-hero .px-chart:hover .ol-lb,.px-hero .px-chart:hover .hl-lb{opacity:1}
.px-hero .px-vol{margin:6px 0 0}
/* controls move BELOW the chart: range left, book toggle / legend right */
.px-hero .px-top{margin-top:10px}
/* the opened order book gets its own surface again (the hero has none) */
.px-hero .obook{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--rad-3);padding:8px 10px 6px;margin:12px 0 4px}

/* (sticky mini head styles live in css/app/shell.css — shared with the Lobby) */

/* the price row — the Lobby's .bal-num read, inside the chart card:
   label row above, big number + chip here, the chart it explains below */
.px-num{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:10px}
.px-num .v{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:32px;font-weight:500;letter-spacing:-0.02em}
.px-num .d{display:inline-flex;align-items:baseline;gap:9px}
.px-num .chip{font-family:var(--font-num);font-size:12px;font-weight:600;border-radius:var(--rad-1);padding:3px 8px}
.px-num .abs{font-family:var(--font-num);font-size:12px;color:var(--muted)}
/* the chart's chrome (svg, gutter labels, crosshair, tip, x axis, bars)
   lives in css/app/lobby.css — the ONE authoritative block for the one engine
   (D22; lobby.css rides every app page). Here: sizing, plus the drill-in
   extras only these pages use — volume strip, order lines, trade markers,
   hi/lo labels, the drag ghosts. */
.px-chart{height:264px}
.px-vol{height:44px;margin:6px -6px 0}
.px-vol svg{width:calc(100% - 46px);height:100%;display:block}
.px-vol svg rect{fill:var(--ink-2);opacity:.22}

/* period high/low labels at the data points */
.px-chart .hl-lb{position:absolute;transform:translate(-50%,-150%);pointer-events:none;z-index:1;white-space:nowrap;
  font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:9.5px;color:var(--ink-2);
  background:color-mix(in oklab,var(--surface) 82%,transparent);border-radius:var(--rad-pill);padding:1px 7px}
.px-chart .hl-lb.lo{transform:translate(-50%,55%)}

/* watch + alert (header tools) */
.as-tools{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.wa-btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-num);font-size:11px;color:var(--muted);white-space:nowrap;
  background:var(--surface);border:1px solid var(--hairline-2);border-radius:var(--rad-pill);padding:7px 13px;cursor:pointer;
  box-shadow:var(--crisp);transition:color var(--t1),border-color var(--t1)}
.wa-btn:hover{color:var(--ink);border-color:var(--hairline)}
.wa-btn.on{color:var(--ink);background:var(--surface-2);border-color:var(--hairline)}
.wa-btn.on svg{fill:var(--g5);stroke:var(--g5)}

/* personal notes — the research journal card in the rail */
.notes-card{padding:14px 16px 12px;display:flex;flex-direction:column;gap:9px}
.notes-card .nc-head{display:flex;align-items:baseline;justify-content:space-between}
.notes-card .nc-s{font-family:var(--font-num);font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--up)}
.notes-card .nc-t{width:100%;min-height:74px;resize:vertical;border:0;outline:none;background:transparent;
  font-family:var(--font-display);font-size:13px;line-height:1.55;color:var(--ink)}
.notes-card .nc-t::placeholder{color:var(--muted)}

/* resting-order / entry markers on the chart (lines drawn by px-chart.js) */
.ol-lb{position:absolute;left:8px;transform:translateY(-120%);pointer-events:none;z-index:1;
  font-family:var(--font-num);font-size:9.5px;letter-spacing:.02em;white-space:nowrap;color:var(--ink-2);
  background:color-mix(in oklab,var(--surface) 85%,transparent);border:1px solid var(--hairline-2);
  border-radius:var(--rad-pill);padding:2px 8px}
.ol-lb.buy,.ol-lb.tp{color:var(--up);border-color:color-mix(in oklab,var(--up) 32%,transparent)}
.ol-lb.sell,.ol-lb.sl,.ol-lb.liq{color:var(--down);border-color:color-mix(in oklab,var(--down) 32%,transparent)}
.ol-lb.draggable{pointer-events:auto;cursor:ns-resize;touch-action:none}
/* focus mode — while setting or dragging a value, everything else steps back */
.px-chart.setting .ol-lb:not(.live):not(.dragging){opacity:.22}
.px-chart.setting svg .oline:not(.live){opacity:.18}
.px-chart.setting .hl-lb,.px-chart.setting .px-mk{opacity:.18}
.px-chart.setting .ol-lb,.px-chart.setting svg .oline,.px-chart.setting .hl-lb,.px-chart.setting .px-mk{transition:opacity .18s var(--ease, ease)}
.ol-lb.pinned{left:auto;right:54px;transform:translateY(-120%)}   /* off-scale labels keep right, clear of in-view pills */
.ol-lb.pin-hi{transform:translateY(20%)}   /* an above-the-range pin HANGS from the top edge — lifted, it collided with the floating hero price */
.ol-dragline{position:absolute;left:0;width:calc(100% - 46px);height:0;pointer-events:none;z-index:2;
  border-top:1.5px dashed var(--ink-2)}
.ol-dragline.liq,.ol-dragline.sl,.ol-dragline.sell{border-top-color:var(--down)}
.ol-dragline.tp,.ol-dragline.buy{border-top-color:var(--up)}
.ol-lb.draggable:hover,.ol-lb.dragging{box-shadow:var(--elev-1);color:var(--ink)}
.ol-lb.dragging{z-index:3}

/* the position card wears the ticket's draft: now → after arrows on its
   own numbers — old value muted, new value bold */
.pos-card s{text-decoration:none;color:var(--muted);font-weight:400}
.pos-card i{font-style:normal;color:var(--muted);padding:0 4px}
.pos-card b{font-weight:650;color:var(--ink)}
.pos-card .pc-grid .v.down b{color:var(--down)}

/* "last here" touch marker — when the price last traded at the level you're
   moving a line to (liquidation, TP, SL) */
.lt-wrap{position:absolute;inset:0;pointer-events:none}
.lt-dot{position:absolute;width:9px;height:9px;border-radius:50%;transform:translate(-50%,-50%);z-index:2;pointer-events:none;
  background:var(--down);border:2px solid var(--surface);box-shadow:0 0 0 3px color-mix(in oklab,var(--down) 25%,transparent)}
.lt-lb{position:absolute;transform:translate(-50%,10px);z-index:2;pointer-events:none;white-space:nowrap;
  font-family:var(--font-num);font-size:9.5px;color:var(--down);
  background:color-mix(in oklab,var(--surface) 85%,transparent);border:1px solid color-mix(in oklab,var(--down) 30%,transparent);
  border-radius:var(--rad-pill);padding:1px 7px}

/* trade markers — where you opened / closed. The label answers "what is
   this dot?" the instant you touch it, styled, not the browser's slow title */
.px-mk{position:absolute;width:9px;height:9px;border-radius:50%;transform:translate(-50%,-50%);z-index:1;
  border:2px solid var(--surface);box-shadow:var(--elev-1);cursor:help}
.px-mk.buy{background:var(--up)} .px-mk.sell{background:var(--down)}
.px-mk::after{content:attr(data-lb);position:absolute;left:50%;bottom:9px;transform:translate(-50%,0);
  font-family:var(--font-num);font-size:9.5px;white-space:nowrap;color:var(--ink);
  background:var(--surface);border:1px solid var(--hairline-2);border-radius:var(--rad-pill);
  padding:2px 8px;box-shadow:var(--elev-1);opacity:0;transition:opacity .12s var(--ease, ease)}
.px-mk:hover{z-index:6}
.px-mk:hover::after{opacity:1}

/* (the crosshair tip — value · date · %, plus your P&L when holding —
   is styled in the shared chart block, css/app/lobby.css) */

/* the order book slides in only for traders who ask for it */
/* the book expands as .xp (grid rows) — the easing reaches the eye both ways */
.obook{margin:12px 0 6px;border-top:1px solid var(--hairline-2);padding-top:4px;
  font-family:var(--font-num);font-variant-numeric:tabular-nums}
.obook .head{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:8px 8px;
  font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.obook .head span:nth-child(2),.obook .head span:nth-child(3){text-align:right}
.obook .row{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:3.5px 8px;font-size:12px}
.obook .row span{position:relative;z-index:1}
.obook .row span:nth-child(2),.obook .row span:nth-child(3){text-align:right;color:var(--ink-2)}
.obook .row .depth{position:absolute;top:1px;bottom:1px;right:0;z-index:0;border-radius:2px 0 0 2px}
.obook .row.ask span:first-child{color:var(--down)}
.obook .row.ask .depth{background:color-mix(in oklab,var(--down) 12%,transparent)}
.obook .row.bid span:first-child{color:var(--up)}
.obook .row.bid .depth{background:color-mix(in oklab,var(--up) 12%,transparent)}
.obook .spread{display:flex;align-items:center;justify-content:space-between;padding:8px;margin:2px 0;
  font-size:11px;color:var(--muted);background:var(--bg-sunken);border-radius:var(--rad-1)}

/* ============================================================================
   Key metrics — max six, every label explains itself in plain language
   ========================================================================== */
/* six metrics → always a clean 3×2 (or 6×1 on very wide, 2×3 on phones) —
   never a ragged 4+2 wrap */
.mets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--hairline-2);
  border:1px solid var(--hairline);border-radius:var(--rad-3);overflow:hidden;box-shadow:var(--elev-1)}
@media (min-width:1560px){.mets{grid-template-columns:repeat(6,minmax(0,1fr))}}
.met{background:var(--surface);padding:15px 18px 13px}
.met .k{font-family:var(--font-num);font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);display:inline-block}
.met .v{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:16px;font-weight:500;letter-spacing:-0.01em;margin-top:7px;color:var(--ink)}
.met .v.up{color:var(--up)} .met .v.down{color:var(--down)}
.met .s{font-family:var(--font-num);font-size:10.5px;color:var(--muted);margin-top:3px}

/* ============================================================================
   Tabs — Overview · News · Earnings
   ========================================================================== */
.dt-tabs{display:flex;gap:2px;border-bottom:1px solid var(--hairline);padding:0 2px}
.dt-tabs button{font-family:var(--font-display);font-size:14px;font-weight:500;color:var(--muted);
  background:transparent;border:0;border-bottom:2px solid transparent;padding:10px 14px;margin-bottom:-1px;cursor:pointer;
  transition:color var(--t1),border-color var(--t1)}
.dt-tabs button:hover{color:var(--ink)}
.dt-tabs button.on{color:var(--ink);border-color:var(--ink)}
.dt-pane{display:none;padding-top:16px}
.dt-pane.on{display:block;animation:lbIn .18s var(--ease-emph)}

.about-tx{font-size:14.5px;line-height:1.65;color:var(--ink);max-width:64ch;margin:0;text-wrap:pretty}
.about-note{display:flex;gap:10px;align-items:flex-start;margin-top:14px;max-width:64ch;
  font-size:12.5px;line-height:1.55;color:var(--ink-2);background:var(--bg-sunken);
  border:1px solid var(--hairline-2);border-radius:var(--rad-2);padding:11px 14px}
.about-note .gi{color:var(--muted);flex:0 0 auto}

.ai-sum{position:relative;font-size:14.5px;line-height:1.6;color:var(--ink);max-width:64ch;margin:0 0 6px;
  padding:14px 16px;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--rad-3);box-shadow:var(--elev-1);text-wrap:pretty}
.ai-sum .lbl{display:flex;align-items:center;gap:8px;font-family:var(--font-num);font-size:9.5px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:8px}
.ai-sum .lbl .spark{color:var(--g3);font-size:12px}
.nrow{display:flex;align-items:baseline;gap:14px;padding:12px 4px;border-bottom:1px solid var(--hairline-2);text-decoration:none;color:inherit}
.nrow:last-child{border-bottom:0}
.nrow .hd{flex:1;font-size:13.5px;font-weight:500;color:var(--ink);line-height:1.4;text-wrap:pretty}
.nrow .src{font-family:var(--font-num);font-size:10.5px;color:var(--muted);white-space:nowrap}

.erow{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:11px 4px;border-bottom:1px solid var(--hairline-2)}
.erow:last-child{border-bottom:0}
.erow .k{font-size:13px;color:var(--ink-2);flex:0 0 auto}
.erow .v{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:13px;color:var(--ink);text-align:right;line-height:1.5;text-wrap:pretty}
.e-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.e-q{font-family:var(--font-num);font-size:11px;color:var(--muted)}
.e-next{font-family:var(--font-num);font-size:10.5px;color:var(--ink-2);background:var(--surface-2);
  border:1px solid var(--hairline-2);border-radius:var(--rad-pill);padding:4px 10px;margin-left:auto}

/* ============================================================================
   Theses holding this name — cards into the thesis pages
   ========================================================================== */
.tcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.tcard{display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--hairline);
  border-radius:var(--rad-3);box-shadow:var(--elev-1);padding:15px 17px;text-decoration:none;color:inherit;
  transition:transform var(--t2) var(--ease),box-shadow var(--t2)}
.tcard:hover{transform:translateY(-3px);box-shadow:var(--elev-2)}
.tcard .top{display:flex;align-items:center;gap:9px}
.tcard .tile{width:26px;height:26px;display:grid;place-items:center;border-radius:var(--rad-1);
  background:var(--grad);color:var(--ink-on-grad);font-size:12px;box-shadow:var(--crisp);flex:0 0 auto}
.tcard .ret{margin-left:auto;font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:600;color:var(--up)}
.tcard .nm{font-size:14px;font-weight:600;letter-spacing:-0.01em}
.tcard .dk{font-size:12.5px;color:var(--ink-2);line-height:1.45;flex:1}
.tcard .mt{font-family:var(--font-num);font-size:10.5px;color:var(--muted)}
.tcard .w{color:var(--ink-2)}

/* ============================================================================
   Thesis page — argument + distribution (header/metrics/tabs shared above)
   ========================================================================== */
.th-args{max-width:66ch;display:flex;flex-direction:column;gap:14px}
.th-args p{margin:0;font-size:15px;line-height:1.7;color:var(--ink);text-wrap:pretty}
.th-args p:first-child::first-letter{font-weight:600}

/* overview = the argument beside the wheel — the two things that ARE the thesis */
.ov-grid{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:34px;align-items:start}
.ov-wheel{display:flex;flex-direction:column;align-items:center;gap:11px;padding-top:6px}
.ov-wheel .wheel{width:190px;height:190px}
.ov-cap{font-family:var(--font-num);font-size:10.5px;color:var(--muted);text-align:center}
.ov-link{background:none;border:0;cursor:pointer;font-family:var(--font-num);font-size:11px;color:var(--ink-2);
  padding:2px 6px;border-radius:var(--rad-1);transition:color var(--t1)}
.ov-link:hover{color:var(--ink)}
@media (max-width:700px){.ov-grid{grid-template-columns:1fr}}

/* legs tab — the full list, expandable rows */
.legs-card{padding:12px 16px}

/* allocation wheel + legs — hover a slice, the leg lights up (and back) */
.wheel-card{padding:20px 22px;display:grid;grid-template-columns:220px minmax(0,1fr);gap:26px;align-items:center}
.wheel{position:relative;width:200px;height:200px;margin:0 auto}
.wheel svg{width:100%;height:100%;display:block;transform:rotate(-90deg)}
.wheel path{cursor:pointer;transition:opacity var(--t1)}
.wheel.dim path:not(.hot){opacity:.25}
.wheel-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;text-align:center}
.wheel-c .v{font-family:var(--font-num);font-size:17px;font-weight:600;letter-spacing:-0.01em}
.wheel-c .k{font-family:var(--font-num);font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-top:3px;max-width:110px}
.legs-list{min-width:0}
.legrow{display:grid;grid-template-columns:10px minmax(0,1.5fr) 64px 60px 18px;gap:12px;align-items:center;
  padding:9px 8px;border-radius:var(--rad-1);text-decoration:none;color:inherit;cursor:pointer;transition:background var(--t1),opacity var(--t1)}
.legrow:hover,.legrow.hot{background:var(--surface-2)}
.legs-list.dim .legrow:not(.hot){opacity:.4}
.legrow .dot{width:9px;height:9px;border-radius:3px}
.legrow .nm{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.legrow .nm .sy{font-family:var(--font-num);font-size:10px;color:var(--muted);font-weight:400;margin-left:7px}
.legrow .w{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:12px;color:var(--ink);text-align:right}
.legrow .dir{font-family:var(--font-num);font-size:9px;text-transform:uppercase;letter-spacing:.06em;border-radius:var(--rad-1);padding:3px 0;text-align:center}
.legrow .dir.long{color:var(--up);background:var(--up-bg)} .legrow .dir.short{color:var(--down);background:var(--down-bg)}
.legrow .chev{font-size:11px;color:var(--muted);transition:transform var(--t1)}
.legrow.open .chev{transform:rotate(90deg)}
.legrow>.xp{grid-column:1/-1}
.leg-x{display:flex;flex-wrap:wrap;gap:22px;padding:2px 0 6px 22px;font-family:var(--font-num);font-size:11px;color:var(--muted)}
.leg-x b{color:var(--ink-2);font-weight:500}
.leg-x .go{margin-left:auto;color:var(--ink-2)}
.leg-x .go:hover{color:var(--ink)}

/* performance legend under the shared chart */
.px-card .perf-key{margin:12px 2px 6px}
.perf-key{display:flex;flex-wrap:wrap;gap:6px 18px;font-family:var(--font-num);font-size:10.5px;color:var(--muted)}
.perf-key .k{display:inline-flex;align-items:center;gap:7px}
.perf-key .sw{width:16px;height:0;border-top:2.4px solid var(--g3);border-radius:2px}
.perf-key .sw.b{border-top:2px dashed var(--muted)}

/* what happens when I invest — three calm sentences near the CTA */
.edu-card{background:var(--bg-sunken);border:1px solid var(--hairline-2);border-radius:var(--rad-2);padding:11px 13px}
.edu-card .t{font-family:var(--font-num);font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:9px}
.edu-card p{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.edu-card p+p{margin-top:8px}
.edu-card b{color:var(--ink);font-weight:600}

/* ============================================================================
   Your position — shared rail card (asset + thesis), sits under the widget.
   Calm by default: P&L, size/value, the safety line. Depth behind “Details”.
   ========================================================================== */
.pos-card{padding:15px 18px 13px;display:flex;flex-direction:column;gap:11px}
.pc-head{display:flex;align-items:center;justify-content:space-between}
.pc-main{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.pc-pnl .v{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:21px;font-weight:600;letter-spacing:-0.02em}
.pc-pnl .v.up{color:var(--up)} .pc-pnl .v.down{color:var(--down)}
.pc-pnl .k,.pc-val .k{display:block;font-family:var(--font-num);font-size:10.5px;color:var(--muted);margin-top:3px}
.pc-val{text-align:right}
.pc-val .v{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:14px;font-weight:500}
.pc-liq{font-size:12px;line-height:1.5;color:var(--down);background:var(--down-bg);border-radius:var(--rad-2);padding:9px 12px;text-wrap:pretty}
.pc-liq.calm{color:var(--ink-2);background:var(--bg-sunken);border:1px solid var(--hairline-2)}

/* tp/sl chips on the position — cancel inline, add more any time */
.pc-tpsl{display:flex;flex-wrap:wrap;gap:6px}
.pc-ord{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-num);font-size:10.5px;
  border-radius:var(--rad-pill);padding:4px 9px}
.pc-ord.tp{color:var(--up);background:var(--up-bg)}
.pc-ord.sl{color:var(--down);background:var(--down-bg)}
.pc-ord button{border:0;background:none;color:inherit;font-size:12px;line-height:1;cursor:pointer;padding:0;opacity:.7}
.pc-ord button:hover{opacity:1}
.pc-ord.add{color:var(--ink-2);background:var(--surface);border:1px dashed var(--hairline);cursor:pointer;
  transition:color var(--t1),border-color var(--t1)}
.pc-ord.add:hover{color:var(--ink);border-color:var(--ink-2)}

/* actions row — Close and +TP/SL side by side, Details on the right */
.pc-acts{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-top:1px solid var(--hairline-2);padding-top:11px;margin-top:1px}
.pc-acts-l{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.pc-more{display:flex;align-items:center;gap:6px;background:none;border:0;padding:2px;cursor:pointer;
  font-family:var(--font-num);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  transition:color var(--t1)}
.pc-more:hover{color:var(--ink)}
.pc-more .chev{font-size:13px;transition:transform var(--t1)}
.pos-card.open .pc-more .chev{transform:rotate(90deg)}
/* details grid — stacked label-over-value cells (the metrics vocabulary),
   so long labels and long values never collide */
.pc-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px 22px;padding:10px 0 2px}
.pc-grid .kv{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.pc-grid .kv>span:first-child{font-family:var(--font-num);font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.pc-grid .kv .v{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--ink);white-space:normal;line-height:1.45;text-wrap:pretty}
.pc-close{align-self:flex-start}

/* partial TP/SL form on the position card */
.pc-form{display:flex;flex-direction:column;gap:9px;background:var(--bg-sunken);border:1px solid var(--hairline-2);
  border-radius:var(--rad-2);padding:12px 13px}
.pc-form[hidden]{display:none}
.pcf-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pcf-row .k{font-family:var(--font-num);font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);flex:0 0 auto;min-width:26px;text-align:center;border-radius:6px;padding:4px 2px}
.pcf-row .k.up{color:var(--up);background:var(--up-bg)}
.pcf-row .k.down{color:var(--down);background:var(--down-bg)}
.pc-form .tin{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--hairline-2);background:var(--surface);
  border-radius:9px;padding:0 8px;flex:1 1 84px;min-width:0}
.pc-form .tin input{width:100%;min-width:0;border:0;background:transparent;outline:none;font-family:var(--font-num);
  font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--ink);padding:7px 0}
.pc-form .tin .sfx{font-family:var(--font-num);font-size:8.5px;color:var(--muted)}
.pcf-chips{display:flex;gap:5px;flex:0 0 auto}
.pcf-chips button{font-family:var(--font-num);font-size:10px;color:var(--ink-2);background:var(--surface);
  border:1px solid var(--hairline-2);border-radius:var(--rad-pill);padding:5px 9px;cursor:pointer;transition:color var(--t1)}
.pcf-chips button:hover{color:var(--ink)}
.pcf-note{font-family:var(--font-num);font-size:10.5px;color:var(--muted);line-height:1.5;text-wrap:pretty}
.pcf-note.bad{color:var(--down)}
.pcf-set{align-self:flex-start}

/* ============================================================================
   History — this instrument's slice of the Activity stream
   ========================================================================== */
.hist-row{display:flex;align-items:baseline;gap:14px;padding:11px 4px;border-bottom:1px solid var(--hairline-2)}
.hist-row:last-of-type{border-bottom:0}
.hist-row .d{font-family:var(--font-num);font-size:10.5px;color:var(--muted);width:52px;flex:0 0 auto}
.hist-row .t{flex:1;font-size:13px;font-weight:500;min-width:0}
.hist-row .a{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--ink);white-space:nowrap}
.hist-row .a.up{color:var(--up)} .hist-row .a.down{color:var(--down)} .hist-row .a.mut{color:var(--muted)}
.hist-empty{font-size:13px;color:var(--muted);padding:8px 0}

/* ============================================================================
   Responsive
   ========================================================================== */
@media (max-width:1120px){
  /* minmax(0,…): a bare 1fr keeps an auto min-content floor, and the widest
     nowrap row would hold the whole column at ~430px on phones */
  .dt-grid{grid-template-columns:minmax(0,1fr)}
  .dt-grid::before{display:none}
  .dt-rail{position:static;max-width:440px;width:100%;max-height:none;overflow:visible}
  .wheel-card{grid-template-columns:1fr}
}
@media (max-width:700px){
  .mets{grid-template-columns:1fr 1fr}
  .as-px{text-align:left}
  .as-px .d{justify-content:flex-start}
}
/* ---- phones: header stacks, price line wraps, nothing exceeds the edge ---- */
@media (max-width:640px){
  .as-head{gap:12px}
  .as-head .as-tools{flex:1 1 100%;order:3}
  .as-id h1{font-size:21px}
  .px-num{flex-wrap:wrap}
  .px-num .d{flex-wrap:wrap;justify-content:flex-start}
  .px-card{padding:14px 14px 10px}
  .px-chart{height:220px}
  .px-tv{height:287px}   /* the phone-native stack (220 chart) — no toggle jump */
  .met{padding:12px 13px 11px}
  .pc-grid{grid-template-columns:1fr 1fr}
  .dt-tabs{overflow-x:auto;scrollbar-width:none}
  .dt-tabs::-webkit-scrollbar{display:none}
  .dt-tabs button{white-space:nowrap}
  /* ---- hero footer, compact: the strip under the chart drops its chrome.
     Dates live in the touch readout (same law as the y-axis: noAxis());
     the range row is bare text — the active disc is the only surface —
     and Show book is a quiet text toggle. ~60px returned to content. ---- */
  .px-hero .px-x{display:none}
  .px-hero .px-vol{height:32px}
  .px-hero .px-vol svg{width:100%}
  .px-top .rhs{min-width:0;flex-wrap:wrap}
  .px-hero .seg{background:none;border:0;padding:0;gap:0}
  .px-card .seg button{padding:8px 10px;min-height:38px}
  .px-top .bk-toggle{min-height:38px;padding:8px 4px;border:0;background:none}
  .px-top .bk-toggle.on{background:none;color:var(--ink)}
  /* section heads: the title never breaks — the sub drops below instead */
  .sec-head{flex-wrap:wrap}
  .sec-head h2{white-space:nowrap}

  /* ---- hero, compacted: Watch/Alert live in the FIXED top bar (js moves
     them there) — the heading owns the full width; copy stays short ---- */
  .as-head{gap:12px}
  /* +2px right margin lands the circles on the same 14px gutter the back
     chevron's glyph sits on; 9px between two 40px circles so they read as
     two buttons, not one lozenge */
  .as-tools.in-bar{margin-left:auto;display:flex;gap:9px;margin-top:0;margin-right:2px}
  /* 37px: two 40px circles crowded the bar once the identity moved in —
     these are secondary actions, they can sit lighter than the content */
  .as-tools .wa-btn{width:37px;height:37px;padding:0;justify-content:center;border-radius:50%;pointer-events:auto}
  .as-tools .wa-btn span{display:none}
  /* crisp identity tile: paper face, the ramp as its border light */
  .as-head .tile{width:36px;height:36px;font-size:15px;color:var(--ink);
    background:linear-gradient(var(--card),var(--card)) padding-box,
      linear-gradient(120deg,var(--g1),var(--g3),var(--g5)) border-box;
    border:1.5px solid transparent;box-shadow:var(--crisp)}
  .as-head .logo{width:36px;height:36px;font-size:15px}
  .as-id h1{font-size:20px;gap:8px}
  .as-id .sub{margin-top:2px}
  .as-id .dek{margin-top:4px;font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  /* price row carries the movement; the echo line below it goes */
  .px-hero .px-num .d .abs{display:none}
  /* legend: one quiet row that scrolls rather than clipping its numbers */
  .perf-key{flex-wrap:nowrap;gap:14px;overflow-x:auto;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
  .perf-key::-webkit-scrollbar{display:none}
  .perf-key .k{white-space:nowrap;flex:0 0 auto}
  /* notes: one calm line that grows when you're actually writing */
  .notes-card .nc-t{min-height:44px;height:44px;transition:height .25s var(--ease-emph)}
  .notes-card .nc-t:focus{height:120px}
  /* the page IS this asset — order rows keep the name, drop the ticker echo */
  #ordRows .asset .fn{display:none}
  /* the hero chart runs edge to edge — card padding AND page gutter; the
     date labels keep the text gutter */
  .px-hero .px-chart,.px-hero .px-vol{margin-left:-28px;margin-right:-28px}
  .px-hero .px-x{margin-left:-14px;margin-right:-14px}
  .px-hero .px-chart{height:240px}
}

/* ============================================================================
   continuity + the way back · Explore ⇄ Asset
   ========================================================================== */
/* the morph pairs (names match explore.css's open sheet) */
.as-head{view-transition-name:tik-head}
.px-hero{view-transition-name:tik-chart}
#twMount{view-transition-name:tik-cta}

/* the ticker is the switcher: the name itself drops the market panel */
.mkt-name{display:inline-flex;align-items:center;gap:8px;margin:0;padding:2px 8px 2px 2px;border:0;
  background:none;font:inherit;color:inherit;letter-spacing:inherit;cursor:pointer;border-radius:10px;
  transition:background .15s}
.mkt-name:hover,.mkt-name[aria-expanded="true"]{background:var(--surface-2)}
.mkt-name .caret{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--surface-2);color:var(--muted)}
.mkt-name:hover .caret,.mkt-name[aria-expanded="true"] .caret{color:var(--ink)}
.mkt-name .caret svg{width:10px;height:10px;stroke:currentColor;stroke-width:1.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .18s var(--ease-emph)}
.mkt-name[aria-expanded="true"] .caret svg{transform:rotate(180deg)}

/* the panel: mode seg (Trading ⇄ Chart & map), search, every market */
.mkt-panel{position:absolute;z-index:30;top:calc(100% + 6px);left:56px;width:min(380px, calc(100vw - 48px));
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px;
  box-shadow:0 24px 56px -24px oklch(0.3 0.02 260/.55);
  opacity:0;transform:scale(.975);transform-origin:top left;
  transition:opacity .15s ease-out,transform .18s var(--ease-emph)}
.mkt-panel.on{opacity:1;transform:none}
.mkt-panel[hidden]{display:none}
.mp-mode{display:flex;gap:3px;padding:3px;border:1px solid var(--hairline-2);border-radius:999px;
  background:var(--surface-2);margin-bottom:8px}
.mp-mode .cell{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 10px;border-radius:999px;font-size:12.5px;font-weight:600;letter-spacing:-0.01em;
  color:var(--muted);text-decoration:none;transition:color .15s}
.mp-mode .cell.on{background:var(--surface);color:var(--ink);box-shadow:var(--crisp)}
.mp-mode a.cell:hover{color:var(--ink)}
.mp-q{display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--line);
  border-radius:11px;background:var(--surface);margin-bottom:8px}
.mp-q:focus-within{border-color:color-mix(in oklab,var(--g3) 55%,var(--hairline));box-shadow:var(--focus-ring)}
.mp-q .gl{color:var(--muted);font-size:14px}
.mp-q input{flex:1;border:0;background:none;font-family:var(--font-sans);font-size:13px;color:var(--ink);outline:none}
.mp-q input::placeholder{color:var(--muted)}
.mp-k{display:flex;align-items:baseline;gap:6px;padding:4px 10px 6px;
  font-family:var(--font-num);font-size:10px;letter-spacing:.05em;color:var(--muted)}
.mp-list{max-height:min(46vh, 420px);overflow:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:1px;margin:0 -4px;padding:0 4px}
.mp-r{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:11px;
  text-decoration:none;color:var(--ink);min-width:0}
.mp-r:hover{background:var(--surface-2)}
.mp-r.sel{background:var(--surface-2)}
.mp-r.cur{background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.mp-r[hidden]{display:none}
.mp-r .nm{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.mp-r .nm b{font-size:13px;font-weight:600;letter-spacing:-0.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-r .nm i{font-style:normal;font-family:var(--font-num);font-size:10px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-r .px{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:12.5px;flex:0 0 auto}
.mp-r .ch{font-family:var(--font-num);font-size:11px;font-weight:600;flex:0 0 auto;min-width:52px;text-align:right}
.mp-r .ch.up{color:var(--up)} .mp-r .ch.down{color:var(--down)}
@media (max-width:640px){ .mkt-panel{left:0} }
@media (prefers-reduced-motion:reduce){
  .dt-pane.on{animation:none} .mkt-panel{transition:opacity .15s ease-out;transform:none} }

/* ============================ guest mode ============================
   The logged-out read of the same Asset/Thesis pages (js/app/guest-mode.js).
   Chrome is rewired by js/app/shell.js; these are the only new surfaces. */
/* guest furniture in the rail's own gutter: no rail element, but the
   content keeps its --side-w offset and the two controls sit fixed where
   the rail's brand + first nav item live — one geometry, logged in or out.
   The circle wears the search pill's material (surface, hairline, crisp);
   the mark is the collapsed rail's read (28px, no wordmark). */
.gt-side{position:fixed;left:0;top:0;width:var(--side-w,66px);z-index:90;
  display:flex;flex-direction:column;align-items:center;gap:16px;padding-top:22px}
.gt-brand{display:block;flex:0 0 auto;text-decoration:none}
.gt-brand .markbox{width:28px;height:28px;display:block}
.gt-back{width:40px;height:40px;flex:0 0 auto;display:grid;place-items:center;cursor:pointer;
  color:var(--ink-2);background:var(--surface);border:1px solid var(--hairline-2);
  border-radius:50%;box-shadow:var(--crisp);padding:0;
  transition:color var(--t1),border-color var(--t1)}
.gt-back:hover{color:var(--ink);border-color:var(--hairline)}
.gt-back svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
/* phones keep their own chrome (the phone layer's back chevron), same as .side */
@media (max-width:640px){ .gt-side{display:none} }
/* the join sheet's ticket recap — the sized trade riding along */
.md-ticket{background:var(--surface-2);border:1px solid var(--hairline);border-radius:var(--rad-2);padding:10px 12px}
.md-ticket .gi{color:var(--ink)}
.md-ticket b{font-family:var(--font-num);font-variant-numeric:tabular-nums}
/* guests keep the full-width main column calm: no position/orders chrome
   exists, so the rail is just ticket + education */