/* mdx-search.css — the full-page SEARCH RESULTS overlay (lazy-loaded on first 🔍 open).
   The nav-mode textbox/mobile-bar CSS lives in site-nav.css (synchronous → no FOUC); this file is
   only fetched when the user first opens search, so it must not carry anything the nav needs at paint.
   Card families: .rl-card (asset, rail.css) + .fcard (news, feed.css) reused NATIVE; .coll-card
   (theme/country/sector) defined here, aligned to the same tokens. See docs/product + /search proof. */

/* ============ full-page results overlay — slides down from the top; the page behind blurs (gaussian) ============ */
.mdxs-panel{position:fixed;left:0;right:0;top:0;bottom:0;z-index:850;overflow-y:auto;overscroll-behavior:contain;
  background:rgba(247,246,242,.82);                                   /* translucent cream OVER the blurred page */
  backdrop-filter:blur(0px) saturate(1);-webkit-backdrop-filter:blur(0px) saturate(1);
  opacity:0;visibility:hidden;
  transition:opacity .26s ease,backdrop-filter .3s ease,-webkit-backdrop-filter .3s ease,visibility 0s linear .3s}
.mdxs-panel.open{opacity:1;visibility:visible;
  backdrop-filter:blur(20px) saturate(1.02);-webkit-backdrop-filter:blur(20px) saturate(1.02);
  transition:opacity .24s ease,backdrop-filter .34s ease,-webkit-backdrop-filter .34s ease,visibility 0s}
/* the content itself slides DOWN from above as the blur ramps in (and up + un-blur on close) */
.mdxs-wrap{max-width:1140px;margin:0 auto;padding:96px 22px 90px;transform:translateY(-26px);opacity:.4;
  transition:transform .32s cubic-bezier(.22,.61,.36,1),opacity .26s ease}
.mdxs-panel.open .mdxs-wrap{transform:translateY(0);opacity:1}
@media(prefers-reduced-motion:reduce){.mdxs-wrap,.mdxs-panel{transition-duration:.01s}}

.mdxs-meta{display:flex;align-items:center;gap:12px;padding:2px 4px 6px}
.mdxs-meta .n{font-size:13px;color:var(--muted)}
.mdxs-empty{padding:60px 10px;text-align:center;color:var(--muted)}
.mdxs-empty b{color:var(--dark-warm)}
/* rate-limit notice (demo proxy 429) — amber, so a throttled search never reads as "nothing found" */
.mdxs-empty.mdxs-rl{color:#b45309}
.mdxs-meta .mdxs-rl{color:#b45309;font-weight:600}
/* inline "searching…" spinner (in the meta line) */
.mdxs-spin{display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid var(--card-border-color);border-top-color:var(--muted);animation:ns-spin .6s linear infinite;vertical-align:-1px;margin-left:5px}
/* skeleton placeholders while assets/news load — shimmer over a card-shaped block */
.mdxs-sk{position:relative;overflow:hidden;background:#fff;border:1px solid var(--card-border-color);border-radius:var(--radius-sm)}
.mdxs-sk::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(0,0,0,.045),transparent);transform:translateX(-100%);animation:mdxs-shim 1.15s infinite}
.mdxs-sk-card{height:96px}          /* == the real rail asset card (icon+name+sub+metric) → no height jump */
.mdxs-sk-news{height:168px}         /* == a real feed news card (was 82 → big jump when the card rendered) */
@keyframes mdxs-shim{100%{transform:translateX(100%)}}

.mdxs-sec{margin-top:26px}
.mdxs-sec-h{display:flex;align-items:baseline;gap:9px;margin:0 3px 12px}
.mdxs-sec-t{font-size:12px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:var(--dim)}
.mdxs-sec-n{font-size:12px;color:var(--dim)}
.mdxs-sec-all{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--success);text-decoration:none}

.mdxs-coll{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:13px}
.mdxs-assets{display:grid;grid-template-columns:repeat(auto-fill,minmax(226px,1fr));gap:12px}
.mdxs-news{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}   /* 2 columns (magazine) */

/* ── collection card (theme · country · sector) ── */
.coll-card{display:flex;flex-direction:column;gap:9px;background:#fff;border:1px solid var(--card-border-color);border-radius:var(--radius-sm);padding:15px 17px 14px;text-decoration:none;transition:border-color .15s,box-shadow .15s;cursor:pointer}
.coll-card:hover,.coll-card.on{border-color:var(--card-border-hover);box-shadow:var(--card-shadow-hover)}
.coll-top{display:flex;align-items:center;gap:9px}
.coll-ic{width:28px;height:28px;border-radius:9px;overflow:hidden;flex:none;display:flex;align-items:center;justify-content:center;color:#fff}
.coll-ic img{width:100%;height:100%;object-fit:cover;display:block}
.coll-ic svg{width:58%;height:58%}   /* GicsMeta sector chip svg (viewBox 24×24, no intrinsic size) → constrain so it doesn't overflow the disc */
.coll-kind{font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--dim)}
.coll-over{font-size:11px;font-weight:600;line-height:1.2;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:-6px}   /* GICS parent chain — small+muted above the sector name (mirrors the console follow label) */
.coll-nm{font-size:15.5px;font-weight:700;line-height:1.22;color:var(--dark-warm)}
.coll-meta{display:flex;flex-wrap:wrap;gap:3px 14px;font-size:12px;color:var(--muted)}
.coll-meta b{color:var(--dark-warm);font-weight:700}
.coll-idx{display:flex;align-items:center;gap:10px;margin-top:3px}
.coll-idx .spark{flex:1;min-width:0}
.coll-idx .spark svg{width:100%;height:auto;display:block}
.coll-ret{font-size:12.5px;font-weight:700;font-family:var(--font-mono);flex:none}
.coll-ret.up{color:#1f9d57}
.coll-ret.down{color:#d23b3b}
.coll-cons{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.coll-chip{display:inline-flex;align-items:center;gap:5px;background:#F4F2ED;border:1px solid var(--card-border-color);border-radius:8px;padding:3px 8px;font-size:11.5px;font-weight:600;color:var(--dark-warm)}
.coll-chip .d{width:14px;height:14px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:8px;color:#fff;font-family:var(--font-mono)}

/* letter-tile fallback (used until a real logo lands) */
.mdxs-lt{display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:700;font-size:12px;color:#fff}

/* keyboard-highlighted asset card */
.mdxs-assets .rl-card.on{border-color:var(--card-border-hover);box-shadow:var(--card-shadow-hover)}

/* recent searches (empty state) — DARK pills (black bg, white text), like the feed/notes tabs */
.mdxs-recent{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.mdxs-recent a{display:inline-flex;align-items:center;gap:7px;background:var(--dark-warm);border:1px solid var(--dark-warm);border-radius:9999px;padding:7px 15px;font-size:13.5px;font-weight:600;color:#fff;text-decoration:none;transition:opacity .15s}
.mdxs-recent a:hover{opacity:.82}
.mdxs-recent .rc-x{opacity:.5}

@media(max-width:760px){
  .mdxs-wrap{padding:132px 12px 60px}   /* clear the TALLER mobile nav (active search bar bottom ≈119px) — else the meta/first row sits under it */
  /* assets AND theme/gics/country cards → 2 columns; minmax(0,1fr) keeps tracks ≤ half so the card shrinks
     (name ellipsis) instead of overflowing. */
  .mdxs-coll{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .mdxs-assets{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .mdxs-news{grid-template-columns:1fr}   /* news back to single column on phones */
  .coll-card{padding:14px 15px 13px}
  .mdxs-sk-card{height:145px}   /* == the taller mobile asset card (2× sparkline + stacked price row) → no jump */
  /* FIX the card height outright (don't chase the internal pixel sum) + push the metric to the BOTTOM so the
     sparkline+price line up across cards even when a theme name wraps to 2 lines (1-line names get the slack
     above the chart, not a chart at a different height). asset name is 1-line (ellipsis) → 145; theme fits 2. */
  .mdxs-assets .rl-card{height:145px}
  .mdxs-coll .coll-card:has(.rl-metric){height:186px}   /* ONLY theme cards (with the index sparkline) — NOT GICS/country cards, which have no chart */
  .mdxs-assets .rl-card .rl-metric,.mdxs-coll .coll-card .rl-metric{margin-top:auto}
  /* the metric skeleton's price bars must match the REAL price-row height (≈14px) — else the card grows a
     few px when the sparkline+price hydrate (skeleton looked shorter than the real card). */
  .mdxs-assets .rl-metric .rl-px-skel,.mdxs-assets .rl-metric .rl-chg-skel,
  .mdxs-coll .rl-metric .rl-px-skel,.mdxs-coll .rl-metric .rl-chg-skel{height:14px}
  /* asset + theme card on phones: STACK price + %chg UNDER a TALLER (2×) sparkline; card shrinks → 2-col fits.
     Skeleton height matches the real spark so there's no jump. Gap sparkline↔price ≈ 8px. */
  .mdxs-assets .rl-metric,.mdxs-coll .rl-metric{flex-direction:column;align-items:stretch;gap:8px}
  .mdxs-assets .rl-metric .rl-spark,.mdxs-coll .rl-metric .rl-spark{min-width:0;width:100%;height:44px}
  .mdxs-assets .rl-metric .rl-spark.rl-skel,.mdxs-coll .rl-metric .rl-spark.rl-skel{height:44px}
  /* pin the price-row to a FIXED height (don't rely on font metrics — iOS renders the price text a touch
     taller than Chrome, so the skeleton looked shorter than the real card only on device). 18px fits the
     ~15px price on every browser; the skeleton bars sit centered in the same 18px. */
  .mdxs-assets .rl-metric .rl-pxrow,.mdxs-coll .rl-metric .rl-pxrow{width:auto;justify-content:flex-start;gap:8px;height:18px;align-items:center}
  .mdxs-assets .rl-metric .rl-pxrow .rl-px,.mdxs-coll .rl-metric .rl-pxrow .rl-px,
  .mdxs-assets .rl-metric .rl-pxrow .rl-up,.mdxs-assets .rl-metric .rl-pxrow .rl-dn,
  .mdxs-coll .rl-metric .rl-pxrow .rl-up,.mdxs-coll .rl-metric .rl-pxrow .rl-dn{line-height:18px}
  /* SCROLL PERF: drop the backdrop blur on mobile — re-sampling a 20px blur under a scrolling container
     is what made scroll laggy / fight-back. Use an opaque cream bg instead (visually fine on a phone). */
  .mdxs-panel,.mdxs-panel.open{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:#F5F3EE}
  /* and DON'T slide the content down on open — a translateY(-26→0) that runs as you flick DOWN reads as
     "scroll goes the wrong way / won't catch until it settles". Fade only; no transform to fight the scroll. */
  .mdxs-wrap,.mdxs-panel.open .mdxs-wrap{transform:none;transition:opacity .18s ease}
  .mdxs-panel{-webkit-overflow-scrolling:touch}   /* momentum scroll on iOS */
}