/* asset.css — /asset/{ticker}. Reuses explore.css for the dark hero + tabs + price chart; only the
   ticker badge under the name is asset-specific. */

/* ticker badge row — sits between the company name and the price quote (like a stock header) */
.as-ticker { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 12px 0 0; }
.as-ticker:empty { display: none; }
.as-ticker .as-tk { font-size: 14px; font-weight: 700; letter-spacing: .6px; color: var(--fg, var(--ivory));
  background: rgba(var(--surf), .12); border-radius: 7px; padding: 4px 11px; }
.as-ticker .as-tk-ex { font-size: 12px; font-weight: 700; letter-spacing: .5px; color: var(--fg, var(--ivory)); text-transform: uppercase; }

/* ── on the brand-tinted asset hero, promote the dim tier to the PRIMARY font colour so back-link,
   currency and row labels all read at full strength against the brand bg. Asset-scoped (asset.css
   loads only here) → explore/country heroes keep their original dim tier. Logo gets a 2px ring in
   the same font colour. ── */
.ex-hero .ex-back { color: var(--fg, var(--ivory)); }
.ex-quote .q-core { color: var(--fg, var(--ivory)); }
.ex-hero-main .ex-desc { color: var(--fg, var(--ivory)); }
.ex-hero-logo img { border: 2px solid var(--fg, var(--ivory)); box-sizing: border-box; }

/* the hero itself carries NO fill — the brand colour coats the page's bg.jpeg wave pattern (set on <body>
   by asset.js), and the transparent hero reads straight through to it. */
.ex-hero { background: transparent; }

/* the price sheet: full-width already → a plain 62%-white bg reaches both edges. */
.ex-index-wrap { background: rgba(255, 255, 255, .62); }
/* the content section has a max-width (centered), so a plain bg leaves the wide-screen sides bare. Paint a
   FULL-BLEED 62%-white band BEHIND it via a pseudo that stretches to the viewport edges — no HTML change.
   `inset: 0 calc(50% - 50vw)` = flush top/bottom, left/right out to each viewport edge (0 on narrow screens). */
.ex-content { position: relative; }
.ex-content::before { content: ''; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1;
  background: rgba(255, 255, 255, .62); }

/* the brand colour is computed in JS AFTER the header data loads, so the hero first paints in the default
   dark tone then updates → fade the bg / text / logo-ring change instead of hard-jumping. (chips + back
   already carry their own .15s colour transition, so they fade on their own — left untouched here.) */
.ex-hero { transition: background-color .5s ease; }
.ex-hero .ex-title, .ex-hero .ex-desc, .ex-hero .as-lbl, .ex-hero .as-val-text,
.ex-hero .ex-quote .q-idx, .ex-hero .ex-quote .q-core, .ex-hero .ex-quote .q-chg,
.ex-hero .as-tk-ex { transition: color .5s ease; }
.ex-hero .as-tk { transition: color .5s ease, background-color .5s ease; }
.ex-hero-logo img { transition: border-color .5s ease; }

/* Real logos are TV-normalized tiles that already carry their own framing/margin,
   so they FILL the circle (no padding → no thick white ring). object-fit:cover on
   the square PNG fills the round clip; the mark is centred by the normalizer. */
#asLogo { object-fit: cover; padding: 0; }
/* the fallback MDX mark is transparent line-art → small inset so it nearly fills the circle (was 26px = tiny) */
#asLogo.as-logo-fallback { object-fit: contain; padding: 12px; }

/* cross-country bond spread (IT-DE-10Y): two circle-flags split on the 45° anti-diagonal inside the
   same hero slot as #asLogo — subject upper-left, benchmark lower-right. Mirrors the img's sizing
   (128px, 148px ≤720px) so it drops into .ex-hero-logo identically. */
.ex-hero-logo .as-splitflag { position: relative; width: 128px; height: 128px; border-radius: 50%;
  overflow: hidden; display: block; background: #fff; border: 2px solid var(--fg, var(--ivory)); box-sizing: border-box; }
.as-splitflag .as-half { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.as-splitflag .as-half.ll { clip-path: polygon(0 0, 100% 100%, 0 100%); }   /* lower-left triangle = benchmark (keeps the most of its top-left canton, e.g. US stars) */
.as-splitflag .as-half.ur { clip-path: polygon(0 0, 100% 0, 100% 100%); }   /* upper-right triangle = subject */
/* hairline ON the clip boundary — the main diagonal "\" from top-left(0 0) to bottom-right(100 100),
   matching the .ll/.ur triangles. rotate(45deg) aligns the bar to that line (rotate(-45deg) would draw
   the opposite "/" and miss the seam). */
.as-splitflag::after { content: ''; position: absolute; top: 50%; left: 50%; width: 142%; height: 2px;
  background: rgba(255, 255, 255, .85); transform: translate(-50%, -50%) rotate(45deg); }
@media (max-width: 720px) { .ex-hero-logo .as-splitflag { width: 148px; height: 148px; } }
/* commodity hero mark now uses the SHARED .ex-logo-disc (explore.css: 128/148px circle, svg 56%) — the same
   disc gics/theme use. Asset's hero marks wear a ring in the brand text colour (like #asLogo) instead of the
   disc's shadow; the DESCENDANT selector hits only asset's chip (gics/theme put both classes on one element). */
.ex-hero-logo .ex-logo-disc { border: 2px solid var(--fg, var(--ivory)); box-shadow: none; box-sizing: border-box; }

/* the price chart svg needs the same explicit size as the theme's #exChart (id-specific rule) */
#asChart { width: 100%; height: 270px; display: block; overflow: visible; }
@media (max-width: 900px) { #asChart { height: 220px; } }

/* ticker badge + ♥️ save-to-playlist on one row (the heart sits at the end of the ticker line) */
.as-tk-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.as-tk-row .as-ticker { flex: 0 1 auto; }

/* the company description is a full paragraph → clamp to 3 lines in the hero (unlike the theme deck).
   click to toggle full ↔ clamp (JS adds .as-clamp only when it actually overflows → pointer + handler). */
#asDesc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#asDesc.as-clamp { cursor: pointer; }
#asDesc.exp { -webkit-line-clamp: unset; overflow: visible; }

/* meta line: country (bold) · GICS (dim) · theme(s) (accent) */
.ex-hero .ex-meta .as-theme { color: #cbb8e6; font-weight: 600; }

@media (max-width: 720px) {
  .as-ticker { justify-content: center; }
}

/* ── classification chips — country · sector (GICS) · themes (core) · also-in (secondary). Lives
   INSIDE the hero's main column (see asset.html), so it inherits the dark slab and the hero owns the
   bottom spacing — no background/padding of its own. Here we only set the gap below the description
   and stack the label→chips rows. Chips align under the description automatically (same column). ── */
.as-class { margin-top: 22px; display: flex; flex-direction: column; gap: 9px; }
.as-row { display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: start; gap: 16px; }
.as-row[hidden] { display: none; }  /* the grid display above beats [hidden]'s UA display:none → restore it */
.as-lbl { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--fg, var(--ivory)); padding-top: 7px; }
.as-val { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; min-width: 0; }
.as-val-text { color: var(--fg, var(--ivory)); font-size: 14px; font-weight: 600; padding-top: 5px; }

/* header chips (.as-chip / .as-more) — now the SHARED tone-adaptive component in /explore/css/explore.css
   (.gk-chip, .as-chip together), driven by --surf/--fg so asset·theme·gics·country all read identically.
   Only the flag glyph inside an asset chip stays here (asset-specific markup). */
.as-flag { width: 15px; height: 15px; border-radius: 50%; object-fit: cover; margin-right: -1px; }

@media (max-width: 720px) {
  .as-row { grid-template-columns: 1fr; gap: 3px; }
  .as-lbl { padding-top: 2px; }
  .as-val-text { padding-top: 0; }
}

/* Notes tab head — lead count + direct/indirect scope toggle on one row */
.as-notes-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.as-notes-head .ex-notes-lead { margin: 0; }
.as-notes-head #asNotesSeg { flex: 0 0 auto; }

/* ── relationship-rail styles (.rl-*) live in /css/rail.css (injected by site-nav.js, loaded AFTER
   this file → authoritative on the asset page too). Edit rail.css, not here — a stale fork here was
   silently overridden. Only the asset-specific surface overrides below remain. ── */

/* ── unified flat surfaces: WHITE bg + the standard --shadow-std, NO borders (matches the nav chrome).
   Asset-scoped (asset.css loads only here) so explore / feed / theme pages keep their own look. ── */
/* 2 · content tabs — inactive turns white, active stays black; both carry the shadow. */
/* tabs (.ex-tabs .tab) — white+shadow now lives in the SHARED /explore/css/explore.css so all 4 pages match. */
/* 3 · news-feed cards — drop the hairline border, white bg, standard shadow (kept on hover/expanded too). */
.fcard { background: #fff; border: none; box-shadow: var(--shadow-std); }
.fcard:not(.exp):hover, .fcard.exp { border-color: transparent; box-shadow: var(--shadow-std); }
/* 4 · related-asset cards (.rl-card / .rl-tab) — styled in /css/rail.css now (see breadcrumb above). */
/* 5 · at-a-glance box — the white + shadow treatment now lives in the SHARED /explore/css/explore.css
   (.fd-glance there), so asset · country · theme · gics all match. Nothing to override here. */
/* 6 · chart time-range segment — white+shadow now in the SHARED explore.css (.seg.ex-range), matching
   theme/country #exRange. The .on button stays black (from taste.css .seg button.on). */
/* price chart: dark grid lines + dark axis labels (readable on the light sheet). */
#asChart .ex-gridline { stroke: rgba(0, 0, 0, .18); }
#asChart .ex-axis-lbl { fill: rgba(0, 0, 0, .65); }

/* ── chart interaction layer (window.ChartInteract) — price-alert crosshair + 🔔 (docs/frontend/alert.md) ── */
:root { --ci-alert: #c8891f; --ci-day: #2563eb; }   /* amber = "alert set"; blue = "that day's close" (both distinct from the gain/loss price line) */
/* crosshair (hover): dashed neutral. set-line: solid amber. pending: faint dashed amber. day-line: solid blue. All in #asChart's <g>. */
#asChart .ci-xline, #asChart .ci-yline { stroke: var(--black, #1a1512); stroke-width: 1; opacity: .42; stroke-dasharray: 4 4; pointer-events: none; }
#asChart .ci-dayline { stroke: var(--ci-day); stroke-width: 1.4; opacity: .5; pointer-events: none; }   /* semi-transparent so it doesn't hide the price line */
#asChart .ci-setline { stroke: var(--ci-alert); stroke-width: 1.4; opacity: .92; pointer-events: none; }
#asChart .ci-pendline { stroke: var(--ci-alert); stroke-width: 1.4; opacity: .45; stroke-dasharray: 4 4; pointer-events: none; }

/* overlay layer over .ex-index-body: transparent, click-through; only the bells catch the pointer. */
.ci-layer { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 6; }

/* price number — at the END of the horizontal line (right edge anchored to the plot's right edge). label only. */
/* ALL price tags are semi-transparent (opacity .5) so they don't hide the price line behind them — incl. the
   amber set/drag tag you see while moving an alert on touch. */
.ci-px-tag { position: absolute; transform: translateY(-50%); padding: 1px 6px; border-radius: 6px; font-size: 11.5px;
  font-weight: 700; line-height: 1.5; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.14); opacity: .5; }
.ci-px-tag.hover   { background: var(--black, #1a1512); color: var(--ivory, #fff); }
.ci-px-tag.set     { background: var(--ci-alert); color: #fff; }
.ci-px-tag.pending { background: var(--ci-alert); color: #fff; }
.ci-px-tag.day     { background: var(--ci-day); color: #fff; }   /* that day's close (left end of ci-dayline) */

/* date tag — at the BOTTOM of the vertical crosshair line (x under the cursor → its date), centered on it. */
.ci-date-tag { position: absolute; transform: translate(-50%, 2px); padding: 1px 6px; border-radius: 6px;
  font-size: 11.5px; font-weight: 700; line-height: 1.5; white-space: nowrap; pointer-events: none;
  background: var(--black, #1a1512); color: var(--ivory, #fff); box-shadow: 0 2px 8px rgba(0,0,0,.14); }

/* bell — a clean inline SVG button, in the far-right column (to the RIGHT of the y-axis numbers). */
.ci-bell-btn { position: absolute; right: 3px; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; pointer-events: auto;
  background: #fff; border: 1px solid transparent; box-shadow: 0 2px 8px rgba(0,0,0,.18);
  transition: transform .08s ease, box-shadow .12s ease, background .12s ease; }
.ci-bell-btn:hover  { box-shadow: 0 4px 12px rgba(0,0,0,.26); }
.ci-bell-btn:active { transform: translateY(-50%) scale(.9); }
.ci-bell-ic { width: 14px; height: 14px; display: block; }
/* add (hover) = outline bell with a "+" in its centre (no corner badge). */
.ci-bell-btn.add .ci-bell-ic { fill: none; stroke: var(--black, #1a1512); stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
/* set = filled amber bell (drag to move · click removes). */
.ci-bell-btn.set { background: var(--ci-alert); border-color: var(--ci-alert); cursor: grab; touch-action: none; }
.ci-bell-btn.set .ci-bell-ic { fill: #fff; stroke: none; }
.ci-bell-btn.set:hover { background: #b37916; }
.ci-bell-btn.set.dragging { cursor: grabbing; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
/* pending = spinner (create/delete in flight) — NOT interactive (no cancel / no double-submit). */
.ci-bell-btn.pending { cursor: default; pointer-events: none; }

/* ── mobile fullscreen editor (re-parents .ex-index; see asset.js openFullscreen / docs/frontend/alert.md §7) ── */
html.ci-fs-open, body.ci-fs-open { overflow: hidden; }
.ci-fs { position: fixed; inset: 0; z-index: 10000; background: var(--bg, #fff); display: flex; flex-direction: column;
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
.ci-fs .ex-index { max-width: none; width: 100%; height: 100%; margin: 0; padding: 8px 6px; display: flex; flex-direction: column; }
.ci-fs .ex-index-body { flex: 1 1 auto; touch-action: none; }   /* touch-drag sets price, doesn't scroll */
.ci-fs #asChart { height: 100%; min-height: 60vh; }
.ci-fs .sx-rail { display: none; }   /* fullscreen = the chart + setting an alert only; the summary rail is no use there */
.ci-fs-close { position: absolute; top: 8px; right: 8px; z-index: 2; width: 44px; height: 44px; border-radius: 50%;
  border: none; background: rgba(0,0,0,.06); color: var(--black, #1a1512); font-size: 20px; line-height: 1; cursor: pointer; }
.ci-fs-close:hover { background: rgba(0,0,0,.12); }
/* fullscreen: the ✕ and the phone range menu (☰, js/mdx-range.js) are ONE design — the same 40px white round button,
   side by side in the top-right corner (✕ outermost) */
.ci-fs .ex-index-head { padding-right: 100px; }
.ci-fs .ex-index-ctrl .rg-menu { top: -10px; right: 48px; }
.ci-fs .ci-fs-close { top: 8px; right: 8px; width: 40px; height: 40px; background: #fff; box-shadow: var(--shadow-std, 0 16px 12px -12px rgba(0,0,0,.2));
  font-size: 18px; display: grid; place-items: center; }
.ci-fs .ci-fs-close:hover { background: var(--black, #1a1512); color: #fff; }
/* touch mode = bigger hit areas (≥ comfortable touch target). */
.ci-touch .ci-bell-btn { width: 34px; height: 34px; }
.ci-touch .ci-bell-ic { width: 18px; height: 18px; }
.ci-touch .ci-px-tag, .ci-touch .ci-date-tag { font-size: 13px; padding: 2px 8px; }
.ci-bell-btn.pending .ci-bell-ic { visibility: hidden; }
.ci-bell-btn.pending::before { content: ''; position: absolute; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(0,0,0,.16); border-top-color: var(--ci-alert); animation: ci-spin .7s linear infinite; }
@keyframes ci-spin { to { transform: rotate(360deg); } }