/*! megatrend-valuechain.css — styles for MegatrendValueChain. Everything scoped under `.mvc`.
    Default = self-theming dark panel (drop into any page). Add class `mvc--paper` for the warm-ivory
    "taste" theme (flat, Space Grotesk, colour quarantined to the data marks — dots/rails/node numbers).
    All theme-dependent values are CSS custom properties, so a host page can also override tokens directly. */
.mvc {
  /* ---- theme tokens (dark defaults; override per theme) ---- */
  --mvc-tx:#e9eef8; --mvc-mut:#8b97ad; --mvc-dim:#5d6b82;
  --mvc-bd:rgba(255,255,255,.08); --mvc-bd2:rgba(255,255,255,.14);
  --mvc-panel-bg:linear-gradient(180deg,#111830,#0b1020); --mvc-panel-bd:1px solid var(--mvc-bd);
  --mvc-surface:rgba(255,255,255,.025); --mvc-surface-2:rgba(255,255,255,.02); --mvc-surface-hover:rgba(255,255,255,.06);
  --mvc-node-ink:#0a0e1a; --mvc-node-ring:#0b1020; --mvc-node-glow:0 2px 8px rgba(0,0,0,.5);
  --mvc-nid-bg:rgba(10,14,26,.55);
  --mvc-tip-bg:#e9eef8; --mvc-tip-tx:#0b1020;
  --mvc-font:'Space Grotesk',Inter,system-ui,-apple-system,sans-serif;
  --mvc-radius:16px;

  font-family:var(--mvc-font); color:var(--mvc-tx); line-height:1.45; text-align:left;
  background:var(--mvc-panel-bg); border:var(--mvc-panel-bd);
  border-radius:var(--mvc-radius); padding:20px clamp(14px,3vw,26px); -webkit-font-smoothing:antialiased;
}
.mvc *{ box-sizing:border-box; }

/* ---- paper theme: warm ivory, flat, colour only on the data marks (taste-poc) ---- */
.mvc.mvc--paper{
  --mvc-tx:#2A2521; --mvc-mut:#76726C; --mvc-dim:#ABA298;
  --mvc-bd:rgba(42,37,33,.12); --mvc-bd2:rgba(42,37,33,.30);
  --mvc-panel-bg:transparent; --mvc-panel-bd:0;
  --mvc-surface:#F0EEE9; --mvc-surface-2:#F0EEE9; --mvc-surface-hover:#EAE6DE;
  --mvc-node-ink:#2A2521; --mvc-node-ring:#F7F6F2; --mvc-node-glow:0 0 0 0 transparent;
  --mvc-nid-bg:rgba(42,37,33,.06);
  --mvc-tip-bg:#2A2521; --mvc-tip-tx:#F7F6F2;
  --mvc-surface-hover:#DBD4C7;
  padding:0; border-radius:0;
}
.mvc.mvc--paper .node{ box-shadow:0 0 0 4px var(--mvc-node-ring); }   /* flat — depth spent elsewhere */
.mvc.mvc--paper .stage-label{ color:var(--mvc-mut); }                 /* neutral chrome type; colour stays on the dot/rail */
.mvc.mvc--paper .mvc-card{ border-radius:20px; }
.mvc.mvc--paper .subgroup{ border-radius:16px; }
/* alternating surfaces by nesting depth → white ⇄ warm-neutral zebra (like the feed card ladder).
   l1 sits at the depths the eye reads as "cards" (ชั้น 1/3) → pure white; l0 (the frame + ชั้น 2) →
   the soft warm neutral, one gentle step off white so every box still reads as its own box. */
.mvc.mvc--paper .mvc-l1{ --mvc-surface:#fff; --mvc-surface-2:#fff; --mvc-surface-hover:#F5F3EE; }
.mvc.mvc--paper .mvc-l0{ --mvc-surface:#EFEBE3; --mvc-surface-2:#EFEBE3; }

.mvc-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin:0 0 16px; padding-bottom:12px; border-bottom:1px solid var(--mvc-bd); }
.mvc-name{ font-family:var(--mvc-font); font-weight:700; font-size:clamp(17px,2.4vw,22px); letter-spacing:-.01em; }
.mvc-meta{ display:flex; align-items:center; gap:10px; }
.mvc-badge{ font:600 10px/1 ui-monospace,monospace; letter-spacing:.05em; text-transform:uppercase; color:var(--mvc-mut);
  border:1px solid var(--mvc-bd); border-radius:7px; padding:5px 8px; background:var(--mvc-surface-2); white-space:nowrap; }
.mvc-badge.lg{ font-size:11px; }
/* chain-root = one timeline panel */
.mvc-panel{ }
/* group-root = grid of tier-2 cards */
.mvc-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); align-items:start; }
.mvc-card{ position:relative; border:1px solid var(--mvc-bd); border-radius:14px; padding:14px; background:var(--mvc-surface);
  transition:border-color .2s,transform .2s; }
.mvc-card:hover{ border-color:var(--mvc-bd2); transform:translateY(-3px); }
.mvc-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:12px; }
.mvc-card-name{ font-family:var(--mvc-font); font-weight:600; font-size:15px; letter-spacing:-.01em; line-height:1.2; }
/* chain (vertical timeline) */
.mvc .chain{ position:relative; padding-left:4px; }
.mvc .rail{ position:absolute; left:10px; top:13px; bottom:13px; width:2px; border-radius:2px; }
.mvc .stage{ position:relative; display:flex; gap:14px; padding:7px 0; align-items:flex-start; }
.mvc .node{ position:relative; z-index:1; flex-shrink:0; width:14px; height:14px; margin-top:3px; border-radius:50%;
  box-shadow:0 0 0 4px var(--mvc-node-ring),var(--mvc-node-glow); }
.mvc .scard{ position:relative; flex:1; min-width:0; border:1px solid var(--mvc-bd); border-left:2.5px solid var(--sc,var(--mvc-mut));
  border-radius:10px; padding:9px 12px; background:var(--mvc-surface-2); transition:background .18s; }
.mvc .stage:hover>.scard{ background:var(--mvc-surface-hover); }
.mvc .sname{ font-weight:500; font-size:14px; letter-spacing:-.005em; }
.mvc .stage-label{ font:700 10px/1 ui-monospace,monospace; letter-spacing:.13em; text-transform:uppercase; margin-bottom:8px; color:var(--sc,var(--mvc-mut)); }
/* group (HORIZONTAL peers) — grid tiles leaf peers into columns (auto-fit) so a group reads across,
   NOT down like a chain. A nested subgroup (its own chain/group) spans the full row for breathing room. */
.mvc .group{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:9px; align-items:stretch; }   /* stretch → peers in a row share the tallest one's height (subgroups span full-width, so they don't drag leaf pills) */
.mvc .group>.subgroup{ grid-column:1 / -1; }
.mvc .scard .group,.mvc .subgroup .group{ margin-top:11px; }
/* the ROOT group card: its own member chips (.mvc-chips) sit above the sub-group grid (.group). Line 75
   only spaces a .group nested in .scard/.subgroup — the top-level .mvc-card was missed → the ticker row
   touched the boxes below. Give the root card's group a clear top gap. */
.mvc-card.mvc-has-chips>.group{ margin-top:16px; }
.mvc .peer{ position:relative; display:flex; align-items:center; gap:9px; border:1px solid var(--mvc-bd); border-radius:11px;
  padding:9px 12px; background:var(--mvc-surface); min-width:0;
  transition:background .18s,transform .18s,border-color .18s; }
.mvc .peer:hover{ background:var(--mvc-surface-hover); transform:translateY(-2px); border-color:var(--mvc-bd2); }
.mvc .pdot{ width:11px; height:11px; border-radius:50%; flex-shrink:0; }
.mvc .pname{ font-weight:500; font-size:12.5px; line-height:1.25; }
/* group members that are themselves chains/groups sit SIDE-BY-SIDE (columns) → a group reads horizontal vs a chain's vertical timeline */
.mvc .subgroup{ position:relative; flex:1 1 260px; border:1px solid var(--mvc-bd); border-radius:12px; padding:11px 12px; background:var(--mvc-surface-2); }
.mvc .sub-name{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:13px; margin-bottom:10px; }
/* node-id badge (top-right of every real node; a stage label carries NO id) */
.mvc .nid{ position:absolute; top:7px; right:8px; font:600 9px/1 ui-monospace,monospace; color:var(--mvc-dim);
  background:var(--mvc-nid-bg); padding:2px 5px; border-radius:5px; letter-spacing:.02em; }
.mvc-card>.nid{ top:12px; right:13px; }
/* clickable nodes (host wires opts.onNode) */
.mvc-clickable{ cursor:pointer; }
.mvc-clickable:hover>.sname,.mvc-clickable:hover>.pname,.mvc-clickable:hover>.mvc-card-head>.mvc-card-name{
  text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }
/* (?) info affordance — pinned to the box's TOP-RIGHT corner (absolute); hover/focus (desktop) or tap (mobile) → tooltip */
.mvc-q{ position:absolute; top:7px; right:7px; z-index:4; display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:50%; border:1px solid var(--mvc-bd2); color:var(--mvc-mut);
  background:var(--mvc-surface); font:700 10px/1 var(--mvc-font); cursor:help; user-select:none; transition:color .15s,border-color .15s,background .15s; }
.mvc-q:hover,.mvc-q:focus-visible{ color:var(--mvc-tx); border-color:var(--mvc-tx); background:var(--mvc-surface-hover); outline:none; }
/* reserve room on the first line so the name never runs under the corner icon */
.mvc-has-q>.sname,.mvc-has-q>.sub-name,.mvc-has-q .pname,.mvc-has-q>.mvc-card-head{ padding-right:20px; }
/* touch devices → bigger tap target (no hover) */
@media (hover:none){ .mvc-q{ width:22px; height:22px; top:5px; right:5px; font-size:11px; } .mvc-has-q>.sname,.mvc-has-q>.sub-name,.mvc-has-q .pname,.mvc-has-q>.mvc-card-head{ padding-right:26px; } }
.mvc-nowrap{ white-space:nowrap; }
/* floating tooltip — appended to <body> by the JS (position:fixed), so it clears every card's stacking context.
   NOT scoped under .mvc (it lives on body); dark warm chip reads on both the paper + dark themes. */
.mvc-tip{ position:fixed; display:none; z-index:2147483000; width:min(272px,86vw); white-space:normal; text-align:left;
  background:#2A2521; color:#F7F6F2; font:500 12px/1.55 'Space Grotesk',Inter,system-ui,-apple-system,sans-serif;
  padding:11px 13px; border-radius:12px; box-shadow:0 12px 34px rgba(0,0,0,.30); pointer-events:none; }
/* tooltip stack order: [name] → [sparkline] → [description] */
.mvc-tip-nm{ font:700 13px/1.3 'Space Grotesk',Inter,sans-serif; color:#FFFDF9; letter-spacing:-.01em; }
.mvc-tip-spark{ margin-top:9px; }
.mvc-tip-cap{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:5px;
  font:600 9.5px/1 'Space Grotesk',Inter,sans-serif; letter-spacing:.06em; text-transform:uppercase; color:#a8a29a; }
.mvc-tip-ret{ font-weight:700; letter-spacing:0; text-transform:none; font-size:11.5px; }
.mvc-tip-txt{ margin-top:9px; padding-top:9px; border-top:1px solid rgba(255,255,255,.14); color:#e7e3db; font-size:11.5px; }
/* mobile bottom SHEET — mirrors the swarm's #lane-sheet: slides up from the bottom edge on (?) tap,
   grip handle, dim backdrop (tap to close), swipe-down to dismiss. Content = the same [name]/[spark]/[desc] blocks. */
.mvc-sheet-backdrop{ position:fixed; inset:0; z-index:2147483000; background:rgba(20,17,14,.34); opacity:0; pointer-events:none; transition:opacity .25s ease; }
.mvc-sheet-backdrop.open{ opacity:1; pointer-events:auto; }
.mvc-sheet{ position:fixed; left:0; right:0; bottom:0; z-index:2147483001; background:#FFFDF9; border-radius:18px 18px 0 0;
  padding:8px 20px calc(22px + env(safe-area-inset-bottom)); box-shadow:0 -8px 30px rgba(42,37,33,.22);
  transform:translateY(101%); transition:transform .28s cubic-bezier(.22,1,.36,1); max-height:72vh; overflow-y:auto; touch-action:pan-y; }
.mvc-sheet.open{ transform:translateY(0); }
.mvc-sheet-grip{ width:38px; height:4px; border-radius:2px; background:#D8D3CB; margin:4px auto 14px; }
.mvc-sheet .mvc-tip-nm{ color:#2A2521; font-size:17px; }
.mvc-sheet .mvc-tip-cap{ color:#8a8478; }
.mvc-sheet .mvc-tip-spark{ margin-top:13px; }
.mvc-sheet .mvc-tip-txt{ color:#5B554D; border-top-color:rgba(42,37,33,.12); font-size:14px; margin-top:13px; padding-top:13px; }
/* sheet CTA — the only navigation out of the sheet ("read details →"); dark pill on the ivory surface */
.mvc-sheet-read{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:16px;
  padding:13px 18px; border:0; border-radius:13px; background:#2A2521; color:#FFFDF9; cursor:pointer;
  font:600 14px/1 'Space Grotesk',Inter,sans-serif; letter-spacing:.01em; -webkit-tap-highlight-color:transparent; }
.mvc-sheet-read:active{ background:#0f0d0b; }
/* states */
.mvc-loading,.mvc-err{ padding:18px; color:var(--mvc-mut); font:500 13px/1.4 var(--mvc-font); }
.mvc-err{ color:#f0729a; }

/* ── related-company stock chips (via chipsFor → MDXFeed.stockChip = .fc-tk) — SELF-CONTAINED so the
   chips look identical on /explore (no feed.css) and /explore/theme.html (has feed.css). ── */
.mvc-has-chips{ flex-wrap:wrap; }                              /* let the chip row drop below the name */
.mvc-has-chips .pname{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }  /* bullet+name one line, … if long */
.mvc .group:has(> .subgroup) > .peer{ grid-column:1 / -1; }   /* orphaned leaf beside a full-width subgroup → span the row */
.mvc-chips{ flex-basis:100%; width:100%; display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.mvc-chips .fc-tk{ display:inline-flex; align-items:center; font-size:11px; font-weight:700; letter-spacing:.3px;
  border-radius:6px; padding:3px 8px; background:#fff; border:1px solid var(--mvc-bd); color:var(--mvc-mut); }
.mvc-chip-more{ font-size:11px; font-weight:700; color:var(--mvc-mut); align-self:center; }
.mvc-chip-skel{ display:inline-block; height:22px; border-radius:6px; border:1px solid var(--mvc-bd);
  background:linear-gradient(90deg,#ece8df 25%,#f5f2eb 37%,#ece8df 63%); background-size:400% 100%;
  animation:mvc-chip-sk 1.15s ease-in-out infinite; }
@keyframes mvc-chip-sk{ 0%{ background-position:100% 50%; } 100%{ background-position:0 50%; } }

/* SSR crawlable fallback — a flat node→company-links list web-ssr injects into the (hidden) #supplychain
   panel so Googlebot can reach the /asset/{ticker} pages. Users NEVER see it: it stays display:none, and
   the client (MegatrendVC) replaces #supplychain with the styled interactive diagram on tab-open. Without
   this it flashed as unstyled HTML for a moment when the Supply-chain tab was first opened. */
.mvc-ssr{ display:none; }