/* ============================================================================
 * Morpheme Lab - shared suite styling for the EN->VI analytical-mapping
 * explorer pages (/tools/morpheme-bridge, -ripple, -metrics).
 *
 * Consumes the global design tokens from site.css. Adds SUITE tokens for the
 * five-way fit taxonomy and the fit-strength bands (categorical hues that have
 * no place in the brand-restrained global palette), plus the shared chrome:
 * the sub-nav strip, the graph stage (reused from the methodology renderer),
 * the detail panel, chips, and the metrics table.
 *
 * Loaded AFTER site.css by every morpheme-* page. Page <style> blocks are only
 * for genuinely page-specific layout.
 * ========================================================================== */

:root {
  /* fit taxonomy (5-way): fit / sense_split / sibling / no_fit_native / no_fit_false_friend */
  --fit-fit:           #1f9d76;
  --fit-sense_split:   #c98a1b;
  --fit-sibling:       #5b6ee1;
  --fit-no_fit_native: #7c8597;
  --fit-no_fit_false_friend: #c0432f;

  /* fit-strength bands (edge quality): strong / moderate / weak / spurious */
  --band-strong:   #1f9d76;
  --band-moderate: #c98a1b;
  --band-weak:     #9aa0ab;
  --band-spurious: #b04a3a;

  /* suite accent (a refined indigo; harmonious with the methodology violet) */
  --tool-accent: #5b6ee1;
  --tool-accent-2: #8b5cf6;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fit-fit:           #34c79b;
    --fit-sense_split:   #e0a83a;
    --fit-sibling:       #8693f0;
    --fit-no_fit_native: #98a1b3;
    --fit-no_fit_false_friend: #e06a52;
    --band-strong:   #34c79b;
    --band-moderate: #e0a83a;
    --band-weak:     #8b92a0;
    --band-spurious: #d4624e;
    --tool-accent: #8693f0;
  }
}

/* ---- sub-nav strip (every morpheme-* page) ---------------------------- */
.mlab-subnav {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1rem;
  margin: 0 0 1.6rem; padding: 0.55rem 0.85rem;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: linear-gradient(90deg, color-mix(in srgb, var(--tool-accent) 8%, var(--surface)), var(--surface));
}
.mlab-subnav .lab-name {
  font-family: var(--font-sans); font-weight: 750; font-size: var(--text-sm);
  letter-spacing: 0.02em; color: var(--fg); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 0.45rem;
}
.mlab-subnav .lab-name::before {
  content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: var(--tool-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tool-accent) 22%, transparent);
}
.mlab-views { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.mlab-views a {
  font-size: var(--text-sm); color: var(--muted); text-decoration: none;
  padding: 0.28rem 0.7rem; border-radius: var(--r-pill);
  border: 1px solid transparent; transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.mlab-views a:hover { color: var(--fg); background: var(--surface-2); }
.mlab-views a[aria-current="page"] {
  color: var(--tool-accent); border-color: color-mix(in srgb, var(--tool-accent) 45%, var(--border));
  background: color-mix(in srgb, var(--tool-accent) 10%, transparent); font-weight: 650;
}
.mlab-subnav .spacer { flex: 1 1 auto; }
.mlab-meta {
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--faint);
  white-space: nowrap;
}
.mlab-meta b { color: var(--muted); font-weight: 600; }
.mlab-subnav .home { font-size: var(--text-sm); color: var(--muted); text-decoration: none; white-space: nowrap; }
.mlab-subnav .home:hover { color: var(--fg); }

/* ---- status (loading / error / empty) --------------------------------- */
.mlab-status {
  border: 1px dashed var(--border); border-radius: var(--r-md);
  padding: 2.5rem 1.25rem; text-align: center; color: var(--muted);
  background: var(--surface); font-size: var(--text-ui);
}
.mlab-status.error { border-color: color-mix(in srgb, var(--band-spurious) 50%, var(--border)); color: var(--band-spurious); }

/* ---- toolbar / legend ------------------------------------------------- */
.gtools { display: flex; flex-wrap: wrap; gap: 0.6rem 1.1rem; align-items: center; margin: 1.2rem 0 0.6rem; }
.gtools .spacer { flex: 1 1 auto; }
.mlab-legend { display: flex; flex-wrap: wrap; gap: 0.45rem 0.85rem; align-items: center; }
.mlab-legend .li { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--text-xs); color: var(--muted); }
.mlab-legend .sw { width: 0.7rem; height: 0.7rem; border-radius: 3px; display: inline-block; }
.mlab-legend .ln { width: 1.4rem; height: 0; border-top-width: 3px; border-top-style: solid; display: inline-block; }
.gbtn {
  font: inherit; font-size: var(--text-sm); cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 0.32rem 0.75rem; background: var(--surface); color: var(--fg);
  transition: border-color var(--ease), background var(--ease);
}
.gbtn:hover { border-color: var(--tool-accent); }
.gbtn.active { border-color: var(--tool-accent); background: color-mix(in srgb, var(--tool-accent) 12%, transparent); color: var(--tool-accent); }
.gsel {
  font: inherit; font-size: var(--text-sm); color: var(--fg); background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0.3rem 0.5rem;
}
.gsel:focus-visible { border-color: var(--tool-accent); outline: none; }
.ghint { color: var(--muted); font-size: var(--text-sm); }
label.gctl { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--text-sm); color: var(--muted); }

/* ---- graph stage (reused idiom from methodology renderer) ------------- */
.graph-stage:fullscreen { background: var(--bg); padding: 1rem 1.25rem 1.25rem; display: flex; flex-direction: column; }
.graph-stage:fullscreen .gscroll { max-height: none; flex: 1 1 auto; min-height: 0; }
.graph-stage.expanded { position: fixed; inset: 0; z-index: 80; background: var(--bg); padding: 1rem 1.25rem 1.25rem; display: flex; flex-direction: column; overflow: hidden; }
.graph-stage.expanded .gscroll { max-height: none; flex: 1 1 auto; min-height: 0; }

.gscroll {
  border: 1px solid var(--border); border-radius: var(--r-lg); overflow: auto;
  max-height: 78vh;
  background:
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--tool-accent) 6%, transparent), transparent 60%),
    var(--bg);
}
svg.graph { display: block; font-family: inherit; }
.lane-band { fill: color-mix(in srgb, var(--fg) 3%, transparent); stroke: var(--border); }
.lane-title { font-weight: 700; fill: var(--muted); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }

/* edges coloured by fit band, opacity by evidence */
.edge { fill: none; stroke-width: 1.5px; opacity: 0.55; transition: opacity 0.15s ease; }
.edge.band-strong   { stroke: var(--band-strong); }
.edge.band-moderate { stroke: var(--band-moderate); }
.edge.band-weak     { stroke: var(--band-weak); }
.edge.band-spurious { stroke: var(--band-spurious); stroke-dasharray: 5 4; }
.edge.null-target   { stroke-dasharray: 2 4; }
svg.graph.focus .edge:not(.hot) { opacity: 0.06; }
.edge.hot { opacity: 0.98; }
.edge.dim { display: none; }
.mk-strong   { fill: var(--band-strong); }
.mk-moderate { fill: var(--band-moderate); }
.mk-weak     { fill: var(--band-weak); }
.mk-spurious { fill: var(--band-spurious); }

/* nodes (foreignObject divs) */
.gnode {
  box-sizing: border-box; height: 100%; width: 100%;
  border: 1px solid var(--border); border-left: 4px solid var(--muted);
  border-radius: 9px; background: var(--bg);
  padding: 5px 9px; cursor: pointer; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; line-height: 1.18;
  transition: opacity 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.gnode .lab { font-size: 13px; font-weight: 700; color: var(--fg); display: flex; align-items: baseline; gap: 0.35rem; }
.gnode .han { font-family: var(--font-serif); font-weight: 600; color: var(--muted); font-size: 12px; }
.gnode .sub { font-size: 10.5px; color: var(--muted); margin-top: 1px; display: flex; align-items: center; gap: 0.3rem; }
.gnode.en { border-left-color: var(--tool-accent); }
.gnode.vi { border-left-color: var(--fit-fit); }
.gnode.null-target { border-left-style: dashed; border-left-color: var(--fit-no_fit_native); background: color-mix(in srgb, var(--fit-no_fit_native) 7%, var(--bg)); }
.gnode:hover { box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--fg) 50%, transparent); transform: translateY(-1px); }
svg.graph.focus .gnode:not(.hot):not(.sel) { opacity: 0.16; }
.gnode.sel { border-color: var(--tool-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tool-accent) 35%, transparent); }
.gnode.hot { border-color: color-mix(in srgb, var(--tool-accent) 45%, var(--border)); }
.gnode.dim { display: none; }

/* mini support bar inside a node */
.nbar { height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--tool-accent) 30%, var(--surface-2)); margin-top: 3px; overflow: hidden; }
.nbar > i { display: block; height: 100%; background: var(--tool-accent); }

/* ---- detail panel ----------------------------------------------------- */
.gdetail {
  border: 1px solid var(--border); border-left: 4px solid var(--tool-accent);
  border-radius: 12px; padding: 0.9rem 1.1rem; margin: 0.5rem 0 1rem;
  background: var(--surface); min-height: 3.4rem;
}
.gdetail .dk { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.gdetail .dt { font-weight: 750; font-size: 1.1rem; margin: 0.15rem 0 0.4rem; letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.gdetail .dt .han { font-family: var(--font-serif); color: var(--muted); font-weight: 600; font-size: 1rem; }
.gdetail .dd { color: var(--fg); font-size: 0.9rem; margin: 0 0 0.5rem; }
.gdetail .stats { display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; margin: 0.3rem 0 0.5rem; }
.gdetail .row { color: var(--muted); font-size: 0.82rem; margin: 0.15rem 0; }
.gdetail .row b { color: var(--fg); font-weight: 600; }

/* metric pill: label over value */
.mpill {
  display: inline-flex; flex-direction: column; gap: 1px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 0.28rem 0.55rem; background: var(--bg); min-width: 3.5rem;
}
.mpill .k { font-size: 0.6rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); }
.mpill .v { font-size: 0.92rem; font-weight: 700; color: var(--fg); font-family: var(--font-mono); }
.mpill.accent .v { color: var(--tool-accent); }

/* ---- chips (fit taxonomy + bands) ------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.72rem; font-weight: 600; line-height: 1;
  padding: 0.22rem 0.5rem; border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--chip-c, var(--muted)) 45%, var(--border));
  color: var(--chip-c, var(--fg));
  background: color-mix(in srgb, var(--chip-c, var(--muted)) 12%, transparent);
  white-space: nowrap;
}
.chip::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--chip-c, var(--muted)); }
.chip.fit { --chip-c: var(--fit-fit); }
.chip.sense_split { --chip-c: var(--fit-sense_split); }
.chip.sibling { --chip-c: var(--fit-sibling); }
.chip.no_fit_native { --chip-c: var(--fit-no_fit_native); }
.chip.no_fit_false_friend { --chip-c: var(--fit-no_fit_false_friend); }
.chip.band-strong { --chip-c: var(--band-strong); }
.chip.band-moderate { --chip-c: var(--band-moderate); }
.chip.band-weak { --chip-c: var(--band-weak); }
.chip.band-spurious { --chip-c: var(--band-spurious); }
.chip.plain { --chip-c: var(--muted); }

/* ---- provenance / reading note ---------------------------------------- */
.mlab-note {
  margin: 2.2rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--border);
  color: var(--muted); font-size: 0.85rem; max-width: 54rem;
}
.mlab-note b { color: var(--fg); font-weight: 600; }
.mlab-note a { border-bottom: 1px solid color-mix(in srgb, var(--tool-accent) 40%, transparent); color: var(--tool-accent); }
.mlab-note a:hover { border-bottom-color: var(--tool-accent); }

/* ---- metrics table ---------------------------------------------------- */
.mtable-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); }
table.mtable { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
table.mtable th, table.mtable td { padding: 0.5rem 0.7rem; text-align: right; white-space: nowrap; }
table.mtable th:first-child, table.mtable td:first-child,
table.mtable th.l, table.mtable td.l { text-align: left; }
table.mtable thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-2); color: var(--muted);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  cursor: pointer; user-select: none; border-bottom: 1px solid var(--border);
}
table.mtable thead th:hover { color: var(--fg); }
table.mtable thead th[aria-sort] { color: var(--tool-accent); }
table.mtable tbody tr { border-top: 1px solid var(--border-soft); }
table.mtable tbody tr:hover { background: color-mix(in srgb, var(--tool-accent) 6%, transparent); }
table.mtable td.num { font-family: var(--font-mono); }
table.mtable .em { color: var(--fg); font-weight: 600; }
table.mtable .han { font-family: var(--font-serif); color: var(--muted); }
/* inline mini-bar inside a numeric cell */
.cbar { position: relative; min-width: 4rem; }
.cbar > span { position: relative; z-index: 1; }
.cbar::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  height: 60%; width: calc(var(--w, 0) * 100%); border-radius: 3px;
  background: color-mix(in srgb, var(--cbar-c, var(--tool-accent)) 22%, transparent);
}

/* node-metric cards (EN / VI) */
.mcards { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); margin: 0.5rem 0 0; }
.mcard { border: 1px solid var(--border); border-left: 4px solid var(--tool-accent); border-radius: var(--r-md); padding: 0.8rem 0.95rem; background: var(--surface); }
.mcard.vi { border-left-color: var(--fit-fit); }
.mcard .ttl { font-weight: 750; font-size: 1rem; display: flex; align-items: baseline; gap: 0.4rem; }
.mcard .ttl .han { font-family: var(--font-serif); color: var(--muted); font-weight: 600; }
.mcard .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem 0.7rem; margin-top: 0.5rem; font-size: 0.8rem; }
.mcard .grid .k { color: var(--muted); }
.mcard .grid .v { color: var(--fg); font-weight: 650; font-family: var(--font-mono); text-align: right; }

/* a slim meter */
.meter { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; margin-top: 4px; }
.meter > i { display: block; height: 100%; }

/* ============================ Explorer =================================== */
.xpl-search-wrap { position: relative; margin: 1.1rem 0 0.4rem; max-width: 34rem; }
.xpl-search {
  width: 100%; font: inherit; font-size: var(--text-md);
  padding: 0.6rem 0.9rem 0.6rem 2.2rem; color: var(--fg); background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--r-md); transition: border-color var(--ease), box-shadow var(--ease);
}
.xpl-search:focus-visible { border-color: var(--tool-accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--tool-accent) 18%, transparent); }
.xpl-search-wrap::before {
  content: ""; position: absolute; left: 0.8rem; top: 50%; width: 0.9rem; height: 0.9rem; transform: translateY(-50%);
  background: var(--faint); -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>');
}
.xpl-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-2); max-height: 18rem; overflow: auto; display: none;
}
.xpl-results.open { display: block; }
.xpl-results .r {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.8rem; cursor: pointer; font-size: var(--text-ui);
  border-bottom: 1px solid var(--border-soft);
}
.xpl-results .r:hover, .xpl-results .r.active { background: color-mix(in srgb, var(--tool-accent) 10%, transparent); }
.xpl-results .r .tag { font-size: var(--text-xs); color: var(--faint); margin-left: auto; text-transform: uppercase; letter-spacing: 0.04em; }
.xpl-results .r .han { font-family: var(--font-serif); color: var(--muted); }
.xpl-results .r .dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; flex: none; }

.xpl-layout { display: grid; grid-template-columns: 15rem 1fr 19rem; gap: 0.9rem; margin: 0.8rem 0 0; align-items: start; }
@media (max-width: 1080px) { .xpl-layout { grid-template-columns: 1fr; } }

.xpl-rail { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; display: flex; flex-direction: column; max-height: 72vh; }
.xpl-rail .tabs { display: flex; border-bottom: 1px solid var(--border); }
.xpl-rail .tabs button { flex: 1; font: inherit; font-size: var(--text-sm); font-weight: 650; padding: 0.5rem; background: transparent; border: 0; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; }
.xpl-rail .tabs button[aria-selected="true"] { color: var(--tool-accent); border-bottom-color: var(--tool-accent); }
.xpl-rail .list { overflow: auto; padding: 0.35rem; }
.xpl-rail .item { display: flex; align-items: center; gap: 0.45rem; width: 100%; text-align: left; font: inherit; font-size: var(--text-sm); padding: 0.4rem 0.55rem; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--fg); cursor: pointer; }
.xpl-rail .item:hover { background: var(--surface-2); }
.xpl-rail .item[aria-current="true"] { border-color: color-mix(in srgb, var(--tool-accent) 45%, var(--border)); background: color-mix(in srgb, var(--tool-accent) 10%, transparent); }
.xpl-rail .item .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: none; }
.xpl-rail .item .k { font-weight: 650; }
.xpl-rail .item .han { font-family: var(--font-serif); color: var(--muted); font-size: 0.9em; }
.xpl-rail .item .deg { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--faint); }

.xstage { position: relative; height: clamp(440px, 64vh, 760px); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--tool-accent) 6%, transparent), transparent 60%), var(--bg); }
.xstage:fullscreen, .xstage.expanded { height: 100%; }
.xstage.expanded { position: fixed; inset: 0; z-index: 80; border-radius: 0; }
svg.xgraph { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
svg.xgraph.panning { cursor: grabbing; }
.xoverlay { position: absolute; left: 0.6rem; top: 0.6rem; right: 0.6rem; z-index: 5; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; pointer-events: none; }
.xoverlay > * { pointer-events: auto; }
.xoverlay .gbtn { background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(4px); }
.xoverlay .grow { flex: 1 1 auto; }
.xhint { position: absolute; left: 0.7rem; bottom: 0.6rem; z-index: 5; color: var(--faint); font-size: var(--text-xs); pointer-events: none; background: color-mix(in srgb, var(--bg) 70%, transparent); padding: 0.1rem 0.4rem; border-radius: var(--r-sm); }
.zoombtn { width: 1.8rem; height: 1.8rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; }

.xedge { fill: none; transition: opacity 0.15s ease; }
svg.xgraph.focusing .xedge:not(.hot) { opacity: 0.12; }
.xnode { cursor: pointer; }
.xnode circle { stroke-width: 1.5px; transition: stroke-width 0.12s ease; }
.xnode.en circle { fill: color-mix(in srgb, var(--tool-accent) 24%, var(--bg)); stroke: var(--tool-accent); }
.xnode.vi circle { fill: color-mix(in srgb, var(--fit-fit) 22%, var(--bg)); stroke: var(--fit-fit); }
.xnode.null circle { fill: color-mix(in srgb, var(--fit-no_fit_native) 20%, var(--bg)); stroke: var(--fit-no_fit_native); stroke-dasharray: 3 3; }
.xnode.focus circle { stroke-width: 3.5px; }
.xnode.focus .ring { fill: none; stroke: var(--tool-accent); opacity: 0.5; }
.xnode text { font-size: 11px; font-weight: 600; fill: var(--fg); pointer-events: none; paint-order: stroke; stroke: var(--bg); stroke-width: 3.2px; stroke-linejoin: round; }
.xnode text.han { fill: var(--muted); font-family: var(--font-serif); }
svg.xgraph.focusing .xnode:not(.hot):not(.focus) { opacity: 0.22; }
.xnode.dragging circle { stroke-width: 3.5px; }
.xnode text.meta { font-size: 9.5px; fill: var(--muted); }
.xnode.super { cursor: pointer; }
.xnode.super circle { stroke-width: 2px; }
.xnode.super text.key { font-size: 12.5px; font-weight: 750; fill: var(--fg); }

/* cluster hulls (graph mode) */
.xhull { fill: color-mix(in srgb, var(--tool-accent) 5%, transparent); stroke: color-mix(in srgb, var(--tool-accent) 22%, var(--border)); stroke-dasharray: 4 5; stroke-width: 1.2px; }
.xhull-label { font-size: 12px; font-weight: 700; fill: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; }

/* semantic zoom: reveal detail as you zoom in, summarise as you zoom out */
.xgraph .xnode text.meta { display: none; }
.xgraph.lod-near .xnode text.meta { display: block; }
.xgraph.lod-far .xnode:not(.super) text { display: none; }
.xgraph.lod-far .xhull { stroke-dasharray: none; fill: color-mix(in srgb, var(--tool-accent) 8%, transparent); }
.xgraph.lod-far .xhull-label { font-size: 14px; fill: var(--fg); }
.xgraph.lod-near .xhull-label { opacity: 0.5; }

.xpl-detail { border: 1px solid var(--border); border-left: 4px solid var(--tool-accent); border-radius: var(--r-lg); background: var(--surface); padding: 0.9rem 1rem; max-height: 72vh; overflow: auto; }
.xpl-detail .dk { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.xpl-detail .dt { font-weight: 750; font-size: 1.15rem; margin: 0.15rem 0 0.5rem; display: flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap; }
.xpl-detail .dt .han { font-family: var(--font-serif); color: var(--muted); font-weight: 600; font-size: 0.95rem; }
.xpl-detail .sub { color: var(--muted); font-size: 0.82rem; margin: 0 0 0.6rem; }
.xpl-detail .stats { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.7rem; }
.xpl-detail h4 { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0.8rem 0 0.4rem; }
.xpl-detail .nb { display: flex; align-items: center; gap: 0.4rem; width: 100%; text-align: left; font: inherit; font-size: var(--text-sm); padding: 0.35rem 0.5rem; border: 1px solid var(--border-soft); border-radius: var(--r-sm); background: var(--bg); color: var(--fg); cursor: pointer; margin: 0.2rem 0; }
.xpl-detail .nb:hover { border-color: var(--tool-accent); }
.xpl-detail .nb .k { font-weight: 650; }
.xpl-detail .nb .han { font-family: var(--font-serif); color: var(--muted); }
.xpl-detail .nb .met { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--faint); }
.xpl-detail .links { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.7rem; }
.xpl-detail .links a { font-size: var(--text-sm); }
.xpl-detail .empty { color: var(--muted); font-size: var(--text-sm); }

@media (max-width: 640px) {
  .gscroll { max-height: 68vh; }
  .mlab-subnav .mlab-meta { display: none; }
  .xstage { height: clamp(380px, 56vh, 560px); }
}