/* ===== Catppuccin Latte (only mode) =====
 * Surface scale uses brand-tuned cool grays. Accent hues are Catppuccin Latte.
 * Dark + Mocha variants removed 2026-05-25 — Latte is the only theme. */
:root {
    --ctp-base: #f8fafb;
    --ctp-mantle: #f0f4f6;
    --ctp-crust: #e8edf0;
    --ctp-surface0: #ffffff;
    --ctp-surface1: #e2e8ed;
    --ctp-surface2: #cbd5dc;
    --ctp-overlay0: #8b9baa;
    --ctp-overlay1: #6b7d8d;
    --ctp-overlay2: #5c6e7e;
    --ctp-subtext0: #4d5f6e;
    --ctp-subtext1: #3e505f;
    --ctp-text: #2d3f4e;
    --ctp-lavender: #7287fd;
    --ctp-blue: #1e66f5;
    --ctp-sapphire: #209fb5;
    --ctp-sky: #04a5e5;
    --ctp-teal: #179299;
    --ctp-green: #40a02b;
    --ctp-yellow: #df8e1d;
    --ctp-peach: #fe640b;
    --ctp-maroon: #e64553;
    --ctp-red: #d20f39;
    --ctp-mauve: #8839ef;
    --ctp-pink: #ea76cb;
    --ctp-flamingo: #dd7878;
    --ctp-rosewater: #dc8a78;

    /* RGB triplets of the palette above — REQUIRED by tailwind.config.js
     * (`rgb(var(--ctp-X-rgb) / <alpha-value>)`) so opacity utilities like
     * bg-ctp-green/10 actually compile. Keep in sync with the hex values. */
    --ctp-base-rgb: 248 250 251;
    --ctp-mantle-rgb: 240 244 246;
    --ctp-crust-rgb: 232 237 240;
    --ctp-surface0-rgb: 255 255 255;
    --ctp-surface1-rgb: 226 232 237;
    --ctp-surface2-rgb: 203 213 220;
    --ctp-overlay0-rgb: 139 155 170;
    --ctp-overlay1-rgb: 107 125 141;
    --ctp-overlay2-rgb: 92 110 126;
    --ctp-subtext0-rgb: 77 95 110;
    --ctp-subtext1-rgb: 62 80 95;
    --ctp-text-rgb: 45 63 78;
    --ctp-lavender-rgb: 114 135 253;
    --ctp-blue-rgb: 30 102 245;
    --ctp-sapphire-rgb: 32 159 181;
    --ctp-sky-rgb: 4 165 229;
    --ctp-teal-rgb: 23 146 153;
    --ctp-green-rgb: 64 160 43;
    --ctp-yellow-rgb: 223 142 29;
    --ctp-peach-rgb: 254 100 11;
    --ctp-maroon-rgb: 230 69 83;
    --ctp-red-rgb: 210 15 57;
    --ctp-mauve-rgb: 136 57 239;
    --ctp-pink-rgb: 234 118 203;
    --ctp-flamingo-rgb: 221 120 120;
    --ctp-rosewater-rgb: 220 138 120;

    /* --- Design System Tokens --- */
    /* Elevation */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);

    /* Glass / Blur */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(0, 0, 0, 0.06);
    --glass-blur: 12px;

    /* Surface interactions */
    --surface-hover: rgba(0, 0, 0, 0.03);
    --surface-active: rgba(0, 0, 0, 0.06);

    /* Glow accents — track --ctp-blue / --ctp-green */
    --glow-blue: 0 0 20px rgba(30, 102, 245, 0.15);
    --glow-green: 0 0 20px rgba(64, 160, 43, 0.15);

    /* Border radius scale */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;

    /* Transitions */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;

    /* Typography */
    --font-ui: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: var(--font-ui);
    --font-data: var(--font-ui);
    --font-code: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
    --font-mono: var(--font-data);
    --text-xs: 0.6875rem;
    --text-sm: 0.8125rem;
    --text-base: 0.875rem;
    --text-lg: 1rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
}

[v-cloak] { display: none; }

/* Tooltip */
[data-tip] { position: relative; }
[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) scale(0.95);
    background: var(--ctp-surface0);
    color: var(--ctp-text);
    border: 1px solid var(--ctp-surface1);
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s, transform 0.15s;
    z-index: 50;
}
[data-tip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}
html,
body,
#app {
    font-family: var(--font-ui);
    font-feature-settings: 'cv02' 1, 'cv03' 1, 'cv04' 1, 'cv11' 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
* { font-family: inherit; }
h1, h2, h3, h4, h5, h6, label, .font-display, .font-sans { font-family: var(--font-display) !important; }
.font-mono {
    font-family: var(--font-data) !important;
    font-variant-numeric: tabular-nums;
}
pre,
code,
kbd,
samp,
pre *,
code * {
    font-family: var(--font-code) !important;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ctp-mantle); }
::-webkit-scrollbar-thumb { background: var(--ctp-surface1); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--ctp-surface2); }

/* Gradient text - Auctopus accent */
.gradient-text {
    background: linear-gradient(135deg, var(--ctp-blue), var(--ctp-mauve));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Selection highlight */
::selection {
    background: var(--ctp-surface2);
    color: var(--ctp-text);
}

/* Custom input/select styling */
input, select {
    font-feature-settings: 'calt' 1, 'liga' 1;
}

/* Style optgroup labels */
select optgroup {
    font-weight: 600;
    color: var(--ctp-blue);
    background: var(--ctp-surface0);
    padding: 4px 0;
}
select optgroup option {
    font-weight: 400;
    color: var(--ctp-text);
    background: var(--ctp-surface1);
    padding-left: 12px;
}

/* Subtle glow effect on hover — tracks --ctp-blue per-theme */
.glow-hover:hover {
    box-shadow: 0 0 20px color-mix(in oklab, var(--ctp-blue) 30%, transparent);
}

/* Hitlist indeterminate progress bar */
@keyframes indeterminate {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(200%); }
    100% { transform: translateX(-100%); }
}

/* ── Sitewide legibility pass (2026-07-08) ──────────────────────────────
   Inter was declared in --font-ui but never actually loaded (no @font-face,
   no font files) — every browser silently fell back to system-ui. Ship it
   for real, raise the tiny-text floor, and give table headers honest weight.
   These load AFTER tailwind.css, so same-specificity overrides win by order. */
@font-face {
  font-family: 'Inter';
  src: url('/static/fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Raise the smallest utility sizes — 9-10px muted text was the top
   readability complaint. Chips/badges grow ~1px; layouts absorb it. */
.text-\[8px\]  { font-size: 10.5px; }
.text-\[9px\]  { font-size: 10.5px; }
.text-\[10px\] { font-size: 11px; }
.text-\[11px\] { font-size: 11.5px; }
.text-\[12px\] { font-size: 0.78125rem; } /* merge into the text-xs rung */
.text-\[13px\] { font-size: 13.5px; }
.text-xs      { font-size: 0.78125rem; line-height: 1.4; } /* 12px → 12.5px */

/* Table headers stay readable regardless of the row's muted color class. */
thead th { font-weight: 600; }

/* ── Tag chips — Oasis brand hues (approved 2026-07-09, "curated brand hues").
 * One shape everywhere a topic tag renders: tinted pill, 1px border, capitalized.
 * Hues are a fixed on-brand family anchored on the logo indigo/violet — never
 * the old random 10-color hash. Pair .tag-chip with a .tag-hue-* from
 * v2TagClass() (topics-v2.js). Sidebar niche dots reuse the hues via .tag-dot. */
.tag-chip {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 3px 8px; border-radius: 999px;
  font-weight: 600; line-height: 1.1; text-transform: capitalize;
  border: 1px solid transparent; white-space: nowrap;
}
.tag-hue-indigo  { background: rgba(91, 91, 214, .10);  color: #5B5BD6; border-color: rgba(91, 91, 214, .30); }
.tag-hue-violet  { background: rgba(124, 58, 237, .10); color: #7C3AED; border-color: rgba(124, 58, 237, .30); }
.tag-hue-teal    { background: rgba(14, 152, 136, .10); color: #0e9888; border-color: rgba(14, 152, 136, .30); }
.tag-hue-blue    { background: rgba(30, 102, 245, .10); color: #1e66f5; border-color: rgba(30, 102, 245, .30); }
.tag-hue-amber   { background: rgba(217, 119, 6, .10);  color: #d97706; border-color: rgba(217, 119, 6, .30); }
.tag-hue-magenta { background: rgba(192, 38, 211, .10); color: #c026d3; border-color: rgba(192, 38, 211, .30); }
.tag-hue-neutral { background: rgba(76, 79, 105, .06);  color: var(--ctp-overlay1); border-color: rgba(76, 79, 105, .18); }
/* Solid swatch variant for the sidebar niche dots. */
.tag-dot.tag-hue-indigo  { background: #5B5BD6; }
.tag-dot.tag-hue-violet  { background: #7C3AED; }
.tag-dot.tag-hue-teal    { background: #0e9888; }
.tag-dot.tag-hue-blue    { background: #1e66f5; }
.tag-dot.tag-hue-amber   { background: #d97706; }
.tag-dot.tag-hue-magenta { background: #c026d3; }
.tag-dot.tag-hue-neutral { background: var(--ctp-overlay0); }

/* ── Topic Map styles (?map=1&mapstyle=) — cards | bubbles | treemap ──
   Same hub→spoke data, four renderings. All colors ride the ctp vars so both
   themes work; hub family hues are inline (data-driven) with alpha tints. */
/* The selected style has to be OBVIOUS (Mark 2026-07-31: "can u highlight which
   on ure on … its hard to tell") — a teal word on a near-white pill inside a
   near-white track read as two inactive buttons. The track is now recessed and
   the selected pill is teal-tinted with a teal border, so the pair reads as
   one-of-two at a glance. Tinted rather than solid teal because the icons are
   two-tone stickers that would disappear on a saturated fill. */
.v2map-styleseg { display: inline-flex; align-items: center; gap: 2px; background: var(--ctp-crust); border: 1px solid var(--ctp-surface1); border-radius: 8px; padding: 2px; }
.v2map-stylebtn { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 6px; border: 0; background: transparent; font-size: 11px; font-weight: 600; color: var(--ctp-overlay1); cursor: pointer; transition: color .12s, background .12s; }
.v2map-stylebtn:hover { color: var(--ctp-text); }
.v2map-stylebtn.on { background: rgb(var(--ctp-teal-rgb) / .14); color: var(--ctp-teal); font-weight: 800;
  box-shadow: inset 0 0 0 1px rgb(var(--ctp-teal-rgb) / .55); }
.v2map-stylebtn.on:hover { color: var(--ctp-teal); }
.v2map-stylelbl { display: none; }
@media (min-width: 900px) { .v2map-stylelbl { display: inline; } }

/* shared drag states */
.v2map-dragsrc { opacity: .45; }
.v2map-droptgt { outline: 2.5px solid var(--ctp-lavender) !important; outline-offset: 2px; box-shadow: 0 0 0 7px rgb(114 135 253 / .14) !important; }

/* map shell + board (rebuilt 2026-07-30) — every SELECTED market, not just the first.
   Mobile-first: one row per niche, content-height, so a 1-topic niche is one line. */
.v2map-wrap { border: 1px solid var(--ctp-surface1); border-radius: 12px; background: var(--ctp-base); padding: 12px; }
.v2map-top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; padding-bottom: 9px; margin-bottom: 10px;
  border-bottom: 1px solid var(--ctp-surface1); }
.v2map-top-t { font-size: 12.5px; font-weight: 800; color: var(--ctp-text); display: inline-flex; align-items: baseline; gap: 5px; }
.v2map-top-dot { color: var(--ctp-teal); }
.v2map-top-s { font-size: 11px; color: var(--ctp-overlay1); }
.v2map-top-n { margin-left: auto; font-size: 10.5px; color: var(--ctp-overlay1); font-variant-numeric: tabular-nums; }
.v2map-top-n b { color: var(--ctp-text); font-weight: 750; }
.v2map-empty { padding: 40px 12px; text-align: center; font-size: 12px; color: var(--ctp-overlay1); }
.v2map-board { display: flex; flex-direction: column; gap: 7px; }
.v2map-brow { position: relative; border: 1px solid var(--ctp-surface1); border-radius: 10px;
  padding: 8px 10px 8px 13px; background: rgb(var(--ctp-surface0-rgb) / .6); overflow: hidden; }
/* the niche's own colour as a left rail — a long list still reads as groups */
.v2map-brow::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3.5px;
  background: var(--nhue, var(--ctp-surface2)); opacity: .8; }
.v2map-brow:hover { border-color: var(--ctp-surface2); }
.v2map-brow-on { border-color: var(--ctp-surface2); background: rgb(var(--ctp-surface0-rgb) / .95);
  box-shadow: 0 2px 10px rgb(var(--ctp-crust-rgb) / .7); }
/* the whole header line is the open/close button */
.v2map-bhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; text-align: left; }
.v2map-bico { width: 17px; height: 17px; object-fit: contain; flex: 0 0 auto; }
.v2map-bname { flex: 0 0 auto; max-width: 44vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 800; font-size: 12.5px; letter-spacing: -.01em; color: var(--ctp-text); }
.v2map-brow-clk:hover .v2map-bname { color: var(--ctp-lavender); }
.v2map-bcar { color: var(--ctp-surface2); font-size: 13px; line-height: 1; flex: 0 0 auto; }
.v2map-brow-clk:hover .v2map-bcar { color: var(--ctp-lavender); }
/* the row IS the button: pressable, keyboard-reachable, with a visible focus ring */
.v2map-brow-clk { cursor: pointer; transition: box-shadow .13s, border-color .13s; }
.v2map-brow-clk:hover { border-color: var(--ctp-surface2); box-shadow: 0 4px 14px rgb(var(--ctp-crust-rgb) / .8); }
.v2map-brow-clk:focus-visible { outline: 2px solid var(--ctp-lavender); outline-offset: 2px; }
.v2map-brow-clk:hover .v2map-bmore { border-color: var(--ctp-lavender); color: var(--ctp-lavender); }
/* the "all N" cue is a span now — it must not look clickable on its own */
span.v2map-bmore { cursor: inherit; }
.v2map-bmk { color: var(--ctp-sapphire); font-weight: 700; }
/* open niche: every topic as its own button row */
.v2map-blist { display: flex; flex-direction: column; gap: 2px; margin-top: 7px;
  max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; }
.v2map-brow-t { display: flex; align-items: center; gap: 7px; width: 100%; padding: 5px 7px;
  border: 1px solid transparent; border-radius: 7px; background: none; cursor: pointer; text-align: left; }
.v2map-brow-t:hover { background: rgb(var(--ctp-lavender-rgb) / .1); border-color: var(--ctp-lavender); }
.v2map-brow-flag { width: 15px; height: 11px; object-fit: cover; border-radius: 2px; flex: 0 0 auto; }
.v2map-brow-kw { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11.5px; color: var(--ctp-subtext1); }
.v2map-brow-bar { flex: 0 0 62px; height: 4px; border-radius: 99px; background: var(--ctp-mantle); overflow: hidden; }
.v2map-brow-bar i { display: block; height: 100%; border-radius: 99px; opacity: .65; }
.v2map-brow-vol { font-variant-numeric: tabular-nums; font-weight: 750; font-size: 10.5px; color: var(--ctp-text);
  min-width: 40px; text-align: right; }
.v2map-brow-pct { font-variant-numeric: tabular-nums; font-size: 9.5px; color: var(--ctp-overlay1);
  min-width: 34px; text-align: right; }
.v2map-bchip-flag { width: 14px; height: 10px; object-fit: cover; border-radius: 2px; flex: 0 0 auto; }
.v2map-bbar { flex: 1 1 90px; min-width: 60px; height: 6px; background: var(--ctp-mantle);
  border-radius: 99px; overflow: hidden; }
.v2map-bbar i { display: block; height: 100%; border-radius: 99px; opacity: .7; }
.v2map-bvol { font-variant-numeric: tabular-nums; font-weight: 750; font-size: 11.5px; color: var(--ctp-text); }
.v2map-bvol em { font-style: normal; font-size: 9px; font-weight: 650; color: var(--ctp-overlay0); margin-left: 1px; }
.v2map-bpct { font-variant-numeric: tabular-nums; font-size: 10px; color: var(--ctp-overlay1);
  min-width: 30px; text-align: right; }
.v2map-bstats { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 4px;
  font-size: 10px; color: var(--ctp-overlay1); font-variant-numeric: tabular-nums; }
.v2map-bhot { color: var(--ctp-peach); font-weight: 700; }
.v2map-bplan { color: var(--ctp-green); font-weight: 700; }
.v2map-bgap { color: var(--ctp-overlay0); }
.v2map-bopen { margin-left: auto; font-size: 9.5px; color: var(--ctp-overlay0); background: none;
  border: 0; padding: 0; cursor: pointer; }
.v2map-bopen:hover { color: var(--ctp-lavender); }
.v2map-bchips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.v2map-bchip { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; background: rgb(var(--ctp-base-rgb) / .7);
  border: 1px solid var(--ctp-surface1); border-radius: 6px; padding: 2px 7px; font-size: 10.5px;
  color: var(--ctp-subtext0); cursor: pointer; }
.v2map-bchip:hover { color: var(--ctp-lavender); border-color: var(--ctp-lavender); }
.v2map-bchip b { font-weight: 750; color: var(--ctp-text); font-variant-numeric: tabular-nums; }
.v2map-bchip-pct { font-style: normal; font-size: 9px; font-weight: 700; color: var(--ctp-overlay0);
  font-variant-numeric: tabular-nums; }
.v2map-bchip-star { color: #f0a10a; font-size: 9px; }
.v2map-bmore { background: transparent; border-style: dashed; color: var(--ctp-overlay1); }

/* cards */
/* align-items:start — grid rows stretch by default, so a 1-topic card grew to match
   the tallest card in its row and the Map read as mostly empty boxes. */
/* Column flow, not a grid: cards pack down each column so a 1-topic card tucks
   under another short one. A grid ROW is as tall as its tallest card, which is
   what left the holes. break-inside keeps each card whole. */
.v2map-grid { column-width: 290px; column-gap: 12px; }
.v2map-card { break-inside: avoid; margin: 0 0 12px; }
.v2map-card-id { flex: 1 1 auto; min-width: 0; }
/* the card IS the button: it has to look pressable, and its focus ring has to be
   visible for the keyboard path */
.v2map-card-clk { cursor: pointer; transition: box-shadow .13s, transform .13s, border-color .13s; }
.v2map-card-clk:hover { border-color: var(--ctp-surface2); transform: translateY(-1px);
  box-shadow: 0 6px 18px rgb(var(--ctp-crust-rgb) / .85); }
.v2map-card-clk:focus-visible { outline: 2px solid var(--ctp-lavender); outline-offset: 2px; }
.v2map-card-clk .v2map-card-title { cursor: pointer; }
.v2map-card-clk:hover .v2map-more { color: var(--ctp-lavender); }
/* a topic row inside the card keeps its own hover so it reads as the finer target */
.v2map-card-clk .v2map-sp-kw:hover { color: var(--ctp-lavender); text-decoration: underline; }
/* the header banner — the niche's own hue at low strength, so a card reads as
   "heading, then topics" instead of one undifferentiated list */
.v2map-cardtop { background: color-mix(in oklab, var(--nhue, var(--ctp-surface2)) 11%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--nhue, var(--ctp-surface1)) 26%, transparent);
  padding-bottom: 8px; }
.v2map-cardtop .v2map-volbar { margin: 0 12px; background: rgb(var(--ctp-base-rgb) / .75); }
.v2map-spl { padding-top: 8px; }
/* a planned topic is marked wherever it appears, collapsed list included */
.v2map-sp-kw .v2map-bchip-star { margin-right: 3px; }
/* the two signals worth a glance, top-right, never drawn as a zero */
.v2map-cbadges { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.v2map-cb { font-size: 9.5px; font-weight: 800; padding: 1.5px 6px; border-radius: 99px;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.v2map-cb-hot { color: var(--ctp-peach); background: rgb(var(--ctp-peach-rgb) / .14); }
.v2map-cb-plan { color: var(--ctp-green); background: rgb(var(--ctp-green-rgb) / .14); }
.v2map-card-on { box-shadow: 0 2px 12px rgb(var(--ctp-crust-rgb) / .8); }
/* niche modal — "all N" opens this instead of growing the card, and it is the only
   place two tags are compared (side by side, one full list each) */
.v2map-nmodal { width: min(980px, 96vw); }
.v2map-nmhead { display: flex; align-items: flex-start; gap: 9px; padding: 13px 14px 11px;
  border-bottom: 1px solid var(--ctp-surface1); background: rgb(var(--ctp-teal-rgb) / .07); }
.v2map-nmhead > .min-w-0 { flex: 1 1 auto; min-width: 0; }
.v2map-nmvs { margin: 0 7px; font-size: 11px; font-weight: 700; color: var(--ctp-overlay1);
  text-transform: uppercase; letter-spacing: .06em; }
.v2map-nmx { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--ctp-surface1);
  background: var(--ctp-surface0); color: var(--ctp-overlay1); font-size: 11px; cursor: pointer; flex: 0 0 auto; }
.v2map-nmx:hover { color: var(--ctp-text); border-color: var(--ctp-surface2); }
.v2map-nmcmp { position: relative; flex: 0 0 auto; }
.v2map-nmcmp-btn { height: 26px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--ctp-surface1);
  background: var(--ctp-surface0); color: var(--ctp-overlay1); font-size: 10.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.v2map-nmcmp-btn:hover { color: var(--ctp-text); border-color: var(--ctp-surface2); }
.v2map-nmcmp-btn.on { color: var(--ctp-teal); border-color: rgb(var(--ctp-teal-rgb) / .5); background: rgb(var(--ctp-teal-rgb) / .12); }
.v2map-nmcmp-pop { position: absolute; right: 0; top: calc(100% + 5px); z-index: 5; width: 240px;
  max-height: 320px; overflow-y: auto; padding: 4px; border: 1px solid var(--ctp-surface1);
  border-radius: 9px; background: var(--ctp-base); box-shadow: 0 14px 34px rgb(var(--ctp-crust-rgb) / .9); }
.v2map-nmcmp-opt { display: flex; align-items: center; gap: 6px; width: 100%; padding: 5px 7px;
  border: 0; border-radius: 6px; background: none; cursor: pointer; font-size: 11px; color: var(--ctp-subtext1); text-align: left; }
.v2map-nmcmp-opt:hover { background: rgb(var(--ctp-lavender-rgb) / .12); color: var(--ctp-text); }
.v2map-nmcmp-opt.sel { color: var(--ctp-teal); font-weight: 700; }
.v2map-nmcmp-clear { color: var(--ctp-red); font-weight: 700; border-bottom: 1px solid var(--ctp-surface1); border-radius: 6px 6px 0 0; }
.v2map-nmcmp-ico { width: 15px; height: 15px; object-fit: contain; flex: 0 0 auto; }
.v2map-nmcmp-nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2map-nmcmp-v { font-variant-numeric: tabular-nums; font-size: 10px; color: var(--ctp-overlay1); }
.v2map-nmbody { display: grid; grid-template-columns: 1fr; min-height: 0; flex: 1; }
.v2map-nmbody-2 { grid-template-columns: 1fr 1fr; }
.v2map-nmcol { min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.v2map-nmbody-2 .v2map-nmcol + .v2map-nmcol { border-left: 1px solid var(--ctp-surface1); }
.v2map-nmcolh { display: flex; align-items: center; gap: 6px; padding: 7px 10px; font-size: 11px;
  font-weight: 800; color: var(--ctp-text); border-bottom: 1px solid var(--ctp-surface0);
  background: rgb(var(--ctp-surface0-rgb) / .7); }
.v2map-nmcolh-n { font-weight: 600; font-size: 10px; color: var(--ctp-overlay1); font-variant-numeric: tabular-nums; }
.v2map-nmlist { max-height: 62vh; padding: 6px 8px; margin-top: 0; }
.v2map-nmfoot { padding: 8px 12px; border-top: 1px solid var(--ctp-surface1); font-size: 10px;
  color: var(--ctp-overlay1); text-align: center; }
@media (max-width: 700px) { .v2map-nmbody-2 { grid-template-columns: 1fr; }
  .v2map-nmbody-2 .v2map-nmcol + .v2map-nmcol { border-left: 0; border-top: 1px solid var(--ctp-surface1); }
  .v2map-nmlist { max-height: 34vh; } }
.v2map-card-foot .v2map-more { margin-left: auto; }
.v2map-card { background: rgb(var(--ctp-surface0-rgb) / .85); border: 1px solid var(--ctp-surface1); border-radius: 11px; overflow: hidden; box-shadow: 0 1px 3px rgb(var(--ctp-crust-rgb) / .5); transition: box-shadow .15s, transform .15s; }
.v2map-card:hover { box-shadow: 0 8px 22px rgb(var(--ctp-crust-rgb) / .9); transform: translateY(-1px); }
.v2map-card-head { display: flex; align-items: flex-start; gap: 7px; padding: 11px 12px 8px; }
.v2map-handle { color: var(--ctp-surface2); font-size: 13px; cursor: grab; margin-top: 1px; user-select: none; }
.v2map-card-title { display: block; font-weight: 800; font-size: 13px; line-height: 1.2; color: var(--ctp-text); letter-spacing: -.01em; }
.v2map-card-title:hover { color: var(--ctp-lavender); }
.v2map-card-meta { font-size: 10px; color: var(--ctp-overlay1); margin-top: 2px; font-variant-numeric: tabular-nums; }
.v2map-pb { margin-left: auto; font-size: 9px; font-weight: 800; padding: 1px 7px; border-radius: 99px; border: 1px solid var(--ctp-surface1); }
.v2map-volbar { height: 4px; background: var(--ctp-mantle); margin: 0 12px; border-radius: 99px; overflow: hidden; }
.v2map-volbar i { display: block; height: 100%; border-radius: 99px; opacity: .65; }
.v2map-spl { list-style: none; padding: 7px 12px 5px; margin: 0; }
.v2map-spl li { display: flex; align-items: center; gap: 7px; padding: 3.5px 0; border-bottom: 1px dashed var(--ctp-mantle); }
.v2map-spl li:last-child { border-bottom: 0; }
.v2map-sp-kw { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--ctp-subtext0); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.v2map-sp-kw:hover { color: var(--ctp-lavender); }
.v2map-sp-mini { height: 3px; border-radius: 99px; background: var(--ctp-lavender); opacity: .45; flex: 0 0 auto; max-width: 56px; }
.v2map-sp-v { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ctp-text); font-size: 10px; min-width: 34px; text-align: right; }
.v2map-card-foot { display: flex; align-items: center; padding: 7px 12px; border-top: 1px solid var(--ctp-mantle); }
.v2map-more { font-size: 10px; font-weight: 700; color: var(--ctp-lavender); background: none; border: 0; padding: 0; cursor: pointer; }
.v2map-open { margin-left: auto; font-size: 9.5px; color: var(--ctp-overlay0); background: none; border: 0; padding: 0; cursor: pointer; }
.v2map-open:hover { color: var(--ctp-lavender); }

/* skeletons */
.v2map-skel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.v2map-skel-card { border: 1px solid var(--ctp-surface1); border-radius: 11px; padding: 12px; background: rgb(var(--ctp-surface0-rgb) / .5); }

/* map v2 round: overlap links, in-bubble keywords, legend */
ii
/* focus circle — click-to-expand for any map node */
.v2map-focus { position: fixed; inset: 0; z-index: 90; background: rgb(var(--ctp-crust-rgb) / .55); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 18px; }
to { transform: scale(1); opacity: 1; } }
@media (max-width: 640px) { }
.v2map-focus-x { position: absolute; top: 9%; right: 13%; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--ctp-surface1); background: var(--ctp-surface0); color: var(--ctp-overlay1); font-size: 11px; cursor: pointer; }
.v2map-focus-x:hover { color: var(--ctp-text); }
.v2map-focus-title { font-size: 17px; font-weight: 800; color: var(--ctp-text); letter-spacing: -.01em; line-height: 1.15; }
.v2map-focus-meta { font-size: 10.5px; color: var(--ctp-overlay1); margin-top: 3px; font-variant-numeric: tabular-nums; }
.v2map-focus-open { margin-top: 14px; background: var(--ctp-lavender); color: #fff; border: 0; border-radius: 9px; padding: 7px 16px; font-size: 12px; font-weight: 700; cursor: pointer; box-shadow: 0 3px 10px rgb(114 135 253 / .4); }

/* map round 5: badges, market share, overlap partners in focus */
.v2map-focus-ovl { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; align-items: center; margin-top: 12px; max-width: 380px; }
.v2map-focus-ovl-t { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ctp-overlay1); width: 100%; }
.v2map-focus-ovl button { border-radius: 99px; padding: 2.5px 9px; font-size: 10px; cursor: pointer; border: 1px solid; background: rgb(var(--ctp-surface0-rgb) / .9); }
.v2map-focus-ovl button b { font-weight: 800; }
.v2map-focus-ovl .ovl-same { color: #2e7d1f; border-color: rgb(var(--ctp-green-rgb) / .5); background: rgb(var(--ctp-green-rgb) / .1); }
.v2map-focus-ovl .ovl-lean { color: #8a6013; border-color: rgb(var(--ctp-yellow-rgb) / .5); background: rgb(var(--ctp-yellow-rgb) / .12); }

/* focus TABLE panel (replaces the circle) */
.v2map-focus { position: fixed; inset: 0; z-index: 90; background: rgb(var(--ctp-crust-rgb) / .55); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 16px; }
.v2map-focus-panel { width: min(760px, 94vw); max-height: 84vh; display: flex; flex-direction: column; background: var(--ctp-base); border: 1px solid var(--ctp-surface1); border-top: 3px solid; border-radius: 13px; box-shadow: 0 28px 70px rgb(var(--ctp-crust-rgb) / .9); animation: v2mapfocuspop .15s ease-out; overflow: hidden; }
@keyframes v2mapfocuspop { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.v2map-focus-head { display: flex; align-items: flex-start; gap: 10px; padding: 13px 16px 10px; border-bottom: 1px solid var(--ctp-surface0); }
.v2map-focus-title { font-size: 15px; font-weight: 800; color: var(--ctp-text); letter-spacing: -.01em; line-height: 1.15; }
.v2map-focus-meta { font-size: 10.5px; color: var(--ctp-overlay1); margin-top: 2px; font-variant-numeric: tabular-nums; }
.v2map-focus-open { margin-left: auto; background: var(--ctp-lavender); color: #fff; border: 0; border-radius: 8px; padding: 6px 12px; font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; box-shadow: 0 3px 10px rgb(114 135 253 / .4); flex: 0 0 auto; }
.v2map-focus-x { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--ctp-surface1); background: var(--ctp-surface0); color: var(--ctp-overlay1); font-size: 11px; cursor: pointer; flex: 0 0 auto; }
.v2map-focus-x:hover { color: var(--ctp-text); }
.v2map-focus-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; min-height: 0; flex: 1; }
/* One column, full width: a tag panel has no keyword list beside it. The rows get
   the whole card, so a long head keyword stops truncating at half width. */
.v2map-focus-1col { grid-template-columns: 1fr; }
.v2map-focus-1col .v2map-ftab-wrap { max-height: 62vh; }
.v2map-focus-col { min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.v2map-focus-col + .v2map-focus-col { border-left: 1px solid var(--ctp-surface0); }
.v2map-focus-colh { font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--ctp-overlay0); font-weight: 700; padding: 9px 14px 5px; }
.v2map-focus-colh b { color: var(--ctp-overlay1); font-weight: 800; margin-left: 3px; }
.v2map-ftab-wrap { overflow-y: auto; overscroll-behavior: contain; padding: 0 14px 10px; min-height: 0; max-height: 46vh; }
.v2map-ftab { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.v2map-ftab td { padding: 3.5px 0; border-bottom: 1px dashed rgb(var(--ctp-surface1-rgb) / .55); vertical-align: middle; }
.v2map-ftab tr:last-child td { border-bottom: 0; }
.v2map-ftab .fk { color: var(--ctp-subtext1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 0; width: 100%; padding-right: 8px; }
.v2map-ftab .fb { width: 60px; } .v2map-ftab .fb i { display: block; height: 3px; border-radius: 99px; opacity: .5; max-width: 58px; }
.v2map-ftab .fv { text-align: right; font-weight: 700; color: var(--ctp-text); font-variant-numeric: tabular-nums; font-size: 10.5px; white-space: nowrap; padding-left: 8px; }
.v2map-ftab .frow { cursor: pointer; } .v2map-ftab .frow:hover .fk { color: var(--ctp-lavender); }
/* Sub-topic rows read as BUTTONS — they are the way into a tag, and a plain list
   gave no hint they were clickable at all. */
.v2map-ftab .fp { text-align: right; font-variant-numeric: tabular-nums; font-size: 10px;
  color: var(--ctp-overlay1); white-space: nowrap; padding-left: 7px; width: 38px; }
.v2map-ftab .fgo { width: 14px; text-align: right; color: var(--ctp-surface2); font-size: 13px; line-height: 1; }
.v2map-ftab .fstar { color: #f0a10a; font-size: 9px; margin-right: 3px; }
.v2map-ftab .fprio { margin-left: 5px; font-size: 8.5px; font-weight: 800; padding: 0 4px;
  border-radius: 99px; border: 1px solid var(--ctp-surface1); }
.v2map-ftab-btn { border-collapse: separate; border-spacing: 0 3px; }
.v2map-ftab-btn td { border-bottom: 0; padding: 5px 0; background: rgb(var(--ctp-surface0-rgb) / .55);
  border-top: 1px solid var(--ctp-surface1); border-bottom: 1px solid var(--ctp-surface1); }
.v2map-ftab-btn .fk { padding-left: 8px; border-left: 1px solid var(--ctp-surface1);
  border-radius: 7px 0 0 7px; }
.v2map-ftab-btn .fgo { padding-right: 7px; border-right: 1px solid var(--ctp-surface1);
  border-radius: 0 7px 7px 0; }
.v2map-ftab-btn .frow:hover td { background: rgb(var(--ctp-lavender-rgb) / .12); border-color: var(--ctp-lavender); }
.v2map-ftab-btn .frow:hover .fgo { color: var(--ctp-lavender); }
.v2map-colh-hint { margin-left: 6px; font-size: 9px; font-weight: 600; text-transform: none;
  letter-spacing: 0; color: var(--ctp-overlay0); font-style: italic; }
.fempty { color: var(--ctp-overlay0); font-style: italic; font-size: 11px; padding: 10px 0; }
.v2map-focus-ovl { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; padding: 10px 16px 13px; border-top: 1px solid var(--ctp-surface0); }
@media (max-width: 640px) { .v2map-focus-grid { grid-template-columns: 1fr; } .v2map-focus-col + .v2map-focus-col { border-left: 0; border-top: 1px solid var(--ctp-surface0); } .v2map-ftab-wrap { max-height: 30vh; } }