/* ============================================================================
   exotic — css/app/explore.css · the post-login discovery surface
   ----------------------------------------------------------------------------
   Requires tokens.css + ../base.css + lobby.css + shell.css + thememap.css.
   The theme map is the centerpiece (js/kit/thememap.js + css/kit/thememap.css, given a logged-in
   home); trending theses + today's movers moved here from the Lobby.
   The chips/card styles below are lifted from the letter so this page
   doesn't need letter.css.
   ========================================================================== */

/* ---- shared tag chips (from letter.css) ---- */
.mkt-chips{display:flex;flex-wrap:wrap;gap:8px}
.mkt-chips button{font-family:var(--font-num);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  padding:9px 16px;border:1px solid var(--line);border-radius:999px;background:var(--card);
  color:var(--muted);cursor:pointer;transition:.15s;white-space:nowrap}
.mkt-chips button:hover{color:var(--ink);border-color:var(--ink)}
.mkt-chips button[aria-pressed="true"]{background:var(--card);border-color:var(--hairline-2);color:var(--ink);box-shadow:var(--crisp)}
.mkt-chips .pc{font-family:var(--font-num);font-size:10px;margin-left:7px}
.mkt-chips .pc.up{color:var(--up)} .mkt-chips .pc.down{color:var(--down)}
.mkt-chips button[aria-pressed="true"] .pc.up{color:var(--up)}
.mkt-chips button[aria-pressed="true"] .pc.down{color:var(--down)}

/* ---- market cards (card view · from letter.css) ---- */
.mcard{flex:0 0 auto;display:flex;flex-direction:column;align-items:stretch;gap:8px;
  text-align:left;border:1px solid var(--line);border-radius:16px;background:var(--card);cursor:pointer;
  font-family:inherit;color:inherit;padding:16px;transition:border-color .15s,box-shadow .15s,transform .15s}
.mcard:hover{border-color:var(--ink);transform:translateY(-2px)}
.mcard.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.mc-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mc-tag{font-family:var(--font-num);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);border:1px solid var(--line);border-radius:999px;padding:3px 9px}
.mc-logo{width:30px;height:30px;border-radius:var(--rad-1);background:var(--paper-2);display:grid;place-items:center;overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line-2)}
.mc-logo img{width:100%;height:100%;object-fit:contain;padding:15%}
.mc-logo span{font-family:var(--font-num);font-size:11px;font-weight:600;color:var(--ink-2)}
.mc-val{font-family:var(--font-num);font-size:12.5px;font-weight:600}
.mc-val.up{color:var(--up)} .mc-val.down{color:var(--down)}
.mc-name{font-size:14.5px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.mc-sym{font-family:var(--font-num);font-size:10.5px;color:var(--muted)}
.mc-dek{font-size:12px;color:var(--ink-2);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mc-foot{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:auto;
  font-family:var(--font-num);font-size:11px;color:var(--muted)}
.mc-foot span{white-space:nowrap}
.mc-go{color:var(--ink);opacity:0;transition:opacity .15s}
.mcard:hover .mc-go,.mcard.on .mc-go{opacity:1}

/* ---- the map IS the page: one column, the canvas takes the viewport ---- */
.xp-map .tm-layout{grid-template-columns:minmax(0,1fr);gap:0;margin-top:10px}
.xp-map .tm-canvas{height:calc(100svh - 248px);min-height:500px;max-height:980px}
.tm-count{flex:0 0 auto;font-family:var(--font-num);font-size:10.5px;color:var(--muted);
  white-space:nowrap;align-self:center;margin-left:auto;margin-right:2px}
.xp-map .tm-tagrow .tm-tags{flex:0 1 auto}

/* ---- clickability reads at rest and lights on approach: the change chip
   is always on, hover lifts the tile and draws the ink ring the selected
   state already speaks ---- */
.xp-map .tm-t .tv{opacity:1}
/* hover affordance is the shared feel layer now (js/kit/thememap-hover.js:
   lift + painted edge) — no ink border commit; the header tint stays */
.xp-map .tm-gh:hover, .xp-map .tm-gh.hovlit{background:oklch(0 0 0/.045)}
body.theme-dark .xp-map .tm-gh:hover, body.theme-dark .xp-map .tm-gh.hovlit{background:oklch(1 0 0/.07)}

/* ---- the hover card — floats beside whatever the cursor is on; it informs,
   the tile stays the button (pointer-events off) ---- */
.tm-hover{position:absolute;z-index:6;pointer-events:none;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:13px 15px;
  box-shadow:var(--shadow-pop);
  opacity:0;transform:scale(.965);
  transition:opacity .15s ease-out,transform .18s var(--ease-emph)}
.tm-hover.on{opacity:1;transform:none}
.tm-hover[hidden]{display:none}
.hv-head{display:flex;align-items:center;gap:10px;min-width:0}
.hv-head .nm{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.hv-head .nm b{font-size:13.5px;font-weight:600;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hv-head .nm i{font-style:normal;font-family:var(--font-num);font-size:10px;color:var(--muted)}
.hv-head .px{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.hv-head .px b{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:13.5px;font-weight:500}
.hv-head .px i{font-style:normal;font-family:var(--font-num);font-size:11px;font-weight:600}
.hv-dek{margin:9px 0 0;font-size:12px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.hv-rows{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--hairline-2);
  margin-top:10px;padding-top:9px}
.hv-rows .kv{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.hv-rows .kv>span:first-child{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hv-rows .kv .v{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:11.5px;flex:0 0 auto}
.hv-rows .kv .v.up{color:var(--up)} .hv-rows .kv .v.down{color:var(--down)}
.hv-th{margin-top:9px;font-size:11px;line-height:1.45;color:var(--ink-2)}
.hv-hint{margin-top:10px;padding-top:8px;border-top:1px solid var(--hairline-2);
  font-family:var(--font-num);font-size:10px;letter-spacing:.05em;color:var(--muted)}

/* ---- the sheet — a leaf click turns the canvas into that ticker's page;
   the map doesn't just dim, it RECEDES (fade + slight sink) while the
   card flies up to full size. The transform transition lives ONLY on the
   detail state — the zoom system owns the world's transform otherwise. ---- */
.tm-canvas .tm-world{transition:opacity .28s ease}
.tm-canvas.detail-on .tm-world{opacity:.1;transform:scale(.982);transform-origin:50% 50%;
  transition:opacity .32s ease,transform .32s var(--ease-emph)}
@media (prefers-reduced-motion: reduce){
  .tm-canvas.detail-on .tm-world{transform:none;transition:opacity .2s ease}
}
.tm-detail{position:absolute;inset:0;z-index:7;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:clamp(16px,2.4vw,28px);overflow:auto;overscroll-behavior:contain;
  opacity:0;transform:scale(.985);
  transition:opacity .22s ease-out,transform .38s var(--ease-emph)}
.tm-detail.on{opacity:1;transform:none}
.tm-detail[hidden]{display:none}
/* the frame carries the tile→sheet flight; the content joins a beat later
   so the non-uniform stretch never shows on text */
.tm-detail .td-head,.tm-detail .td-grid{opacity:0;transition:opacity .16s ease-out}
.tm-detail.on .td-head,.tm-detail.on .td-grid{opacity:1;transition:opacity .3s ease-out .13s}
.td-x{position:absolute;top:14px;right:16px;z-index:2;display:flex;align-items:center;gap:7px;
  font-family:var(--font-num);font-size:11px;color:var(--muted);background:var(--surface-2);
  border:1px solid var(--hairline-2);border-radius:999px;padding:7px 13px;cursor:pointer;transition:.15s}
.td-x:hover{color:var(--ink);border-color:var(--ink)}
/* position + z: the head carries a view-transition-name (own stacking
   context, z auto) — without a z-index the later chart card paints over
   the head's dropdown panel */
.td-head{display:flex;align-items:center;gap:14px;min-width:0;padding-right:92px;
  position:relative;z-index:5}
.td-head .td-mono{font-size:15px}
.td-head .nm{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.td-head .nm .t{font-size:clamp(18px,2.2vw,23px);font-weight:600;letter-spacing:-.015em;line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.td-head .nm .sy{font-family:var(--font-num);font-size:11px;color:var(--muted)}
.td-head .nm .sy .pv{font-weight:600;color:var(--ink-2)}
.td-head .px{flex:0 0 auto;display:flex;align-items:baseline;gap:10px}
.td-head .px .v{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:clamp(19px,2.2vw,24px);font-weight:500;letter-spacing:-.01em}
.td-head .px .chip{font-family:var(--font-num);font-size:11.5px;font-weight:600;border-radius:var(--rad-1);padding:3px 8px}
.td-head .px .chip.up{color:var(--up);background:var(--up-bg)}
.td-head .px .chip.down{color:var(--down);background:var(--down-bg)}
.td-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;margin-top:18px}
.td-chartcard{min-width:0}
.td-seg{width:max-content;margin-bottom:10px}
#tdChart{height:clamp(220px,34vh,330px)}
.td-chartcard .px-x{margin-right:46px}
.td-rail{display:flex;flex-direction:column;gap:16px;min-width:0}
.td-facts{display:flex;flex-direction:column;gap:9px}
.td-facts .kv{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.td-facts .kv>span:first-child{font-size:12px;color:var(--muted)}
.td-facts .kv .v{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--ink);text-align:right}
.td-facts .kv .v.up{color:var(--up)} .td-facts .kv .v.down{color:var(--down)}
.td-ctawrap{display:flex;flex-direction:column;gap:10px}
.td-soon{font-size:12px;line-height:1.5;color:var(--muted);
  border:1px dashed var(--line);border-radius:10px;padding:10px 12px}
.td-below{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px;border-top:1px solid var(--hairline-2);padding-top:16px;margin-top:2px}
.td-col h3{margin:0 0 8px;font-size:13px;font-weight:600;letter-spacing:-.01em}
.td-col p{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink-2);max-width:64ch;text-wrap:pretty}
.td-thchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.td-thchips a{display:inline-flex;align-items:baseline;gap:6px;border:1px solid var(--line);border-radius:999px;
  padding:6px 12px;font-size:11.5px;text-decoration:none;color:var(--ink);transition:border-color .15s}
.td-thchips a:hover{border-color:var(--ink)}
.td-thchips a b{font-family:var(--font-num);font-weight:600}
.td-news{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  border-top:1px solid var(--hairline-2);margin-top:9px;padding-top:9px;font-size:12px}
.td-news i{font-style:normal;font-family:var(--font-num);font-size:10.5px;color:var(--muted);white-space:nowrap}
.td-mono{display:grid;place-items:center;border-radius:50%;background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--hairline-2);
  font-family:var(--font-num);font-size:12px;font-weight:600;color:var(--ink-2);flex:0 0 auto}
@media (max-width:900px){
  .td-grid{grid-template-columns:minmax(0,1fr)}
  .td-head{padding-right:80px}
}
/* phones: the head stacks — name row first, price row under it, both full
   width; nothing gets strangled into a one-word column */
@media (max-width:640px){
  .td-head{flex-wrap:wrap;gap:10px 12px;padding-right:70px}
  .td-head .nm{flex:1 1 calc(100% - 130px);min-width:0}
  .td-head .nm .t{white-space:normal}
  .td-head .px{flex:1 1 100%;order:3;margin-top:-2px}
  .tm-detail{padding:16px 14px 18px}
}
@media (prefers-reduced-motion: reduce){
  .tm-hover,.tm-detail{transition:opacity .15s ease-out;transform:none}
  .xp-map .tm-t:hover,.xp-map .tm-t.hovlit{transform:none}
}

/* ---- continuity with the Asset page: while the sheet is open, its head,
   chart and CTA are the same objects the trade page shows — navigation
   morphs them into place instead of cutting (names pair with detail.css) ---- */
.tm-canvas.detail-on .td-head{view-transition-name:tik-head}
.tm-canvas.detail-on .td-chartcard{view-transition-name:tik-chart}
.tm-canvas.detail-on .td-ctawrap .sc-cta{view-transition-name:tik-cta}
/* lit-horizon CTA (see .btn-grad): ink body, meridian on the top edge —
   border-box gradient under a transparent top border follows the radius */
.sc-cta{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;gap:10px;margin-top:13px;text-decoration:none;color:var(--bg);
  background:linear-gradient(var(--ink),var(--ink)) padding-box,var(--grad) border-box;
  border:0;border-top:2px solid transparent;border-radius:var(--rad-2);
  box-shadow:0 2px 6px -2px oklch(0.30 0.02 260/.35);padding:10px 14px 12px;
  font-size:13px;font-weight:600;transition:box-shadow var(--t1),transform var(--t1)}
.sc-cta::after{content:"";position:absolute;inset:0;background:var(--grad);opacity:.14;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 62%);mask-image:linear-gradient(180deg,#000,transparent 62%)}
.sc-cta:hover{transform:translateY(-1px);box-shadow:0 4px 12px -4px oklch(0.30 0.02 260/.4),var(--meridian-glow)}
body.theme-dark .sc-cta{color:var(--bg);
  background:linear-gradient(var(--ink-btn-dark),var(--ink-btn-dark)) padding-box,var(--grad) border-box}
.sc-cta .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-cta .ar{margin-left:auto}

/* ---- density: the discover row can breathe less here ---- */
.xp-disc{margin-top:2px}

/* ---- narrow screens: the canvas keeps most of the viewport ---- */
@media (max-width:640px){
  .xp-map .tm-canvas{height:clamp(380px,64svh,600px);min-height:380px}
  .tm-count{display:none}
}

/* ---- phone app treatment (design/phone-app-feel) ---- */
@media (max-width:640px){
  /* list rows take the app-list rhythm — near the card edge, thumb-high */
  .list-card .lc-head{padding:12px 14px 8px}
  .th-row,.mv-row{min-height:44px;padding:12px 14px}
  /* cards clip their own excess — the page never scrolls sideways */
  .list-card,.scout{overflow-x:hidden}
  /* chips + view toggle: tap height from padding, the type stays calm */
  .mkt-chips button{min-height:40px}
  .tm-view button{min-height:40px;min-width:44px}

  /* ---- trending + movers: the vertical lists become one thumb row of
     cards each — browsing goes sideways, the page stays a straight scroll.
     Same right-fade grammar as the Activity filters. ---- */
  #thRows,#mvRows{display:flex;gap:10px;padding:6px 14px 14px;
    margin:0 -14px;   /* bleed to the page edge — cards never clip mid-card at a hard inset */
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;scroll-padding-left:14px;
    scrollbar-width:none;
}
  #thRows.fade-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent)}
  #thRows.fade-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 30px);mask-image:linear-gradient(90deg,transparent,#000 30px)}
  #thRows.fade-l.fade-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 30px,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(90deg,transparent,#000 30px,#000 calc(100% - 30px),transparent)}
  #mvRows.fade-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent)}
  #mvRows.fade-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 30px);mask-image:linear-gradient(90deg,transparent,#000 30px)}
  #mvRows.fade-l.fade-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 30px,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(90deg,transparent,#000 30px,#000 calc(100% - 30px),transparent)}
  #thRows::-webkit-scrollbar,#mvRows::-webkit-scrollbar{display:none}
  #thRows .th-row,#mvRows .mv-row{flex:0 0 250px;scroll-snap-align:start;
    display:flex;flex-direction:column;align-items:stretch;gap:10px;
    padding:13px 14px 12px;border:1px solid var(--hairline-2);border-radius:14px}
  #thRows .th-row .nm .s{white-space:normal}
  #thRows .th-row .ret{display:flex;align-items:baseline;gap:7px;text-align:left;margin-top:auto}
  #thRows .th-row .ret .v{background:var(--up-bg);border-radius:var(--rad-1);padding:2px 7px}
  #mvRows .mv-row .rhs{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
    text-align:left;margin-top:auto}
  #mvRows .mv-row .ch{margin-top:0}

  /* ---- find-your-market chips: one thumb row beside the view toggle —
     the Activity filter pattern, not four wrapped rows ---- */
  .tm-tagrow{align-items:center}
  .mkt-chips.tm-tags{flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 0;
}
  .mkt-chips.fade-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent)}
  .mkt-chips.fade-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 30px);mask-image:linear-gradient(90deg,transparent,#000 30px)}
  .mkt-chips.fade-l.fade-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 30px,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(90deg,transparent,#000 30px,#000 calc(100% - 30px),transparent)}
  .mkt-chips.tm-tags::-webkit-scrollbar{display:none}
  .mkt-chips.tm-tags button{flex:0 0 auto}
}

/* ---- design-review round 3: one dialect for prices and active states ---- */
@media (max-width:640px){
  /* the card's primary datum reads like a datum — target the FIRST span:
     the last child is the hover-only "Trade →" (invisible on touch), so
     the ink styling landed on a ghost and the price stayed muted grey */
  .mc-foot{font-size:12px}
  .mc-foot span:first-child{font-size:14px;color:var(--ink);font-weight:500}
  .mc-go{display:none}   /* hover affordance has no hover here; the card is the button */
}
body.theme-dark .mc-logo{background:var(--surface-2)}

/* phone: no cards inside cards — section titles sit on the paper and the
   snap-rows breathe full-bleed */
@media (max-width:640px){
  .disc .card.list-card{background:none;border:0;box-shadow:none;padding:0;border-radius:0;overflow:visible}
  .disc .lc-head{padding:0 2px 10px}
  .disc .lc-head .t{font-size:16.5px;font-weight:600;letter-spacing:-0.01em}
}

/* ---- phone density pass: the page header already says "tap anything" —
   the map's own sub-sentence repeated it two lines lower, in two wrapped
   lines. The chips read as filters without an instruction. ---- */
@media (max-width:640px){
  .xp-map .sec-head .sub{display:none}
}