/* ════════════════════════════════════════════════════════════════════════
   Mind Climate — funding overlay (W5, Priority-Gap)
   Behavioural, signal-agnostic classes for the lens menu, captions, the
   Explore-Priority-Gap entry, ranked tables, the risk×funding scatter, and the
   overview/detail hub content. Consumes W1 --mc-* tokens; quadrant/lens hex come
   inline from funding_metadata.js (single source of truth), never hardcoded here.
   Theme: text/borders use --mc-* tokens (auto-adapt); brand hex are intentionally
   theme-stable (a priority-gap is red in both themes).
   ════════════════════════════════════════════════════════════════════════ */

/* ── "More views ▾" lens menu (sits under the toggle float) ──────────────── */
.mc-lens          { margin-top: var(--mc-space-2); display: flex; flex-direction: column;
                    align-items: center; gap: var(--mc-space-2); }
.mc-lens__details { background: var(--mc-surface); border: 1px solid var(--mc-hairline);
                    border-radius: var(--mc-radius); box-shadow: var(--mc-shadow-1);
                    font-size: 0.76rem; max-width: 260px; }
.mc-lens__summary { list-style: none; cursor: pointer; padding: 6px 12px; font-weight: 600;
                    color: var(--mc-ink); white-space: nowrap; }
.mc-lens__summary::-webkit-details-marker { display: none; }
.mc-lens__list    { display: flex; flex-direction: column; padding: 4px; border-top: 1px solid var(--mc-hairline); }
.mc-lens__item    { text-align: left; font-size: 0.76rem; color: var(--mc-ink-2);
                    background: none; border: none; border-radius: var(--mc-radius-sm);
                    padding: 7px 10px; cursor: pointer; }
.mc-lens__item:hover    { background: var(--mc-panel); }
.mc-lens__item.is-active { background: var(--mc-primary-soft); color: var(--mc-ink); font-weight: 600; }
.mc-lens__sub     { margin-top: 2px; }
.mc-lens__sub button.is-active { background: var(--mc-surface); color: var(--mc-ink); box-shadow: var(--mc-shadow-1); }

/* ── Lens caption + Explore entry (near the legend float) ───────────────── */
.mc-lens-caption  { margin-top: var(--mc-space-2); max-width: 220px; font-size: 0.7rem;
                    line-height: 1.4; color: var(--mc-muted); font-style: italic; }
.mc-explore       { margin-top: var(--mc-space-2); font-family: var(--mc-font-sans);
                    font-size: 0.78rem; font-weight: 600; color: var(--mc-primary-ink);
                    background: var(--mc-primary); border: none; border-radius: var(--mc-radius);
                    padding: 8px 14px; cursor: pointer; box-shadow: var(--mc-shadow-1); }
.mc-explore:hover { filter: brightness(1.06); }

/* ── Continuous-lens legend extras (gradient bar / note) ─────────────────── */
.mc-legend__bar      { height: 12px; border-radius: 3px; margin: 4px 0 2px;
                       border: 1px solid rgba(0,0,0,.08); }
.mc-legend__bar-ends { display: flex; justify-content: space-between; font-size: 0.62rem; color: var(--mc-muted); }
.mc-legend__note     { font-size: 0.62rem; color: var(--mc-muted); margin-top: 4px; font-style: italic; }

/* ── Imputed annotation (amber italic — concierge #b45309) ───────────────── */
.imputed-flag     { color: #b45309; font-style: italic; font-size: 0.92em; }
[data-theme="dark"] .imputed-flag { color: #e0a23c; }

/* ── Country snapshot (docked W5 slot) ───────────────────────────────────── */
.fund-snap        { display: flex; flex-direction: column; gap: var(--mc-space-2);
                    background: var(--mc-panel); border: 1px solid var(--mc-hairline);
                    border-radius: var(--mc-radius); padding: var(--mc-space-3); }
.fund-snap__head  { display: flex; align-items: center; flex-wrap: wrap; gap: var(--mc-space-2); }
.fund-snap__metrics { display: flex; flex-wrap: wrap; gap: var(--mc-space-3);
                    font-size: 0.78rem; color: var(--mc-ink-2); font-variant-numeric: tabular-nums; }
.fund-empty       { font-size: 0.8rem; color: var(--mc-muted); margin: 6px 0 0; line-height: 1.45; }

/* Quadrant chip (white ink on the brand colour fill) */
.quad-chip        { display: inline-flex; align-items: center; gap: 6px; font-size: 0.62rem;
                    font-weight: 700; letter-spacing: 0.03em; color: #fff; padding: 3px 9px;
                    border-radius: 20px; border: none; cursor: pointer; }
.quad-chip--none  { background: var(--mc-panel); color: var(--mc-muted); border: 1px solid var(--mc-hairline); }
.quad-chip__dot   { width: 8px; height: 8px; border-radius: 50%; }

/* ── Country detail (expanded W5 slot) ───────────────────────────────────── */
.fund-detail      { display: flex; flex-direction: column; gap: var(--mc-space-2); }
.fund-detail p    { font-size: 0.84rem; line-height: 1.5; color: var(--mc-ink-2); margin: 0; }
.fund-detail__back { align-self: flex-start; }
.fund-dual        { background: var(--mc-panel); border-left: 2px solid var(--mc-primary);
                    border-radius: var(--mc-radius-sm); padding: var(--mc-space-2) var(--mc-space-3); }
.gap-arith        { background: var(--mc-primary-soft); border-radius: var(--mc-radius-sm);
                    padding: var(--mc-space-2) var(--mc-space-3); }

/* ── Overview mode ───────────────────────────────────────────────────────── */
/* The hub's expanded body is a 360px+1fr grid (for country detail); the overview
   is one wide child, so override to full width and centre the content. */
.mc-hub.is-expanded .mc-hub__body--overview { display: block; }
.fund-overview          { display: flex; flex-direction: column; gap: var(--mc-space-4);
                          max-width: 1320px; margin: 0 auto; }

/* Header: thesis (left) + the compact 2-wide spotlight (right) — keeps the data
   band below free of the spotlight, so table + scatter both get full width. */
.fund-overview__header  { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
                          gap: var(--mc-space-5); align-items: start; }
.fund-overview__thesis  { display: flex; flex-direction: column; gap: var(--mc-space-2); }
.fund-overview__thesis p { color: var(--mc-ink-2); font-size: 0.92rem; margin: 0; max-width: 64ch; }
.fund-overview__thesis em { color: var(--mc-primary); font-style: normal; }
.fund-overview__spotlight-col { min-width: 0; }
.beta-badge       { align-self: flex-start; background: var(--mc-amber); color: var(--mc-amber-ink); }
.fund-coverage    { font-size: 0.78rem; color: var(--mc-muted); font-variant-numeric: tabular-nums; }

.fund-overview__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mc-space-3); }
.fund-quad-chips  { display: flex; flex-wrap: wrap; gap: var(--mc-space-2); }
.fund-quad-chips .quad-chip { background: var(--mc-panel); color: var(--mc-ink-2); border: 1px solid var(--mc-hairline); }
.fund-quad-chips .quad-chip.is-active { background: var(--mc-primary-soft); color: var(--mc-ink); border-color: var(--mc-primary); }
.fund-quad-chips .quad-chip span { color: var(--mc-muted); font-weight: 600; }
.fund-clean       { display: flex; align-items: center; gap: var(--mc-space-2); }
.fund-clean .mc-btn.is-active { background: var(--mc-primary-soft); }
.fund-clean__info { display: inline-flex; align-items: center; justify-content: center;
                    width: 18px; height: 18px; font-size: 0.78rem; color: var(--mc-muted);
                    cursor: help; border-radius: 50%; }
.fund-clean__info:hover, .fund-clean__info:focus-visible { color: var(--mc-primary); background: var(--mc-primary-soft); }

/* Data band: full-width ranked table beside the larger, sticky scatter. Both get
   room; they sit adjacent so the dot→row hover-link reads naturally and the chart
   stays in view while you scan the list. */
.fund-overview__band    { display: grid;
                          grid-template-columns: minmax(0, 1fr) minmax(360px, 580px);
                          gap: var(--mc-space-5); align-items: start; }
.fund-overview__table   { min-width: 0; overflow: auto; max-height: 64vh; }
.fund-overview__scatter { min-width: 0; position: sticky; top: 0; align-self: start; }

/* Ranked table (extends .mc-table) — tighter cells so all 8 columns read without
   a wide horizontal scroll. */
.rank-table       { white-space: nowrap; font-size: 0.82rem; }
.rank-table caption { caption-side: top; text-align: left; font-size: 0.72rem; color: var(--mc-muted);
                    padding: 0 0 var(--mc-space-2); white-space: normal; }
.rank-table th    { padding: 6px 8px; }
.rank-table td    { padding: 6px 8px; }
.rank-table td:nth-child(n+3), .rank-table th:nth-child(n+3) { text-align: right; }
.rank-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--mc-panel) 45%, transparent); }
.rank-table tbody tr.hot, .rank-table tbody tr:hover { background: var(--mc-primary-soft); cursor: pointer; }

/* Risk×funding scatter (inline SVG) — fills its column (up to 580px). */
.quadrant-scatter { width: 100%; height: auto; max-width: 580px; display: block; }
.qs-axis          { stroke: var(--mc-ink-2); stroke-width: 1; }
.quadrant-line    { stroke: var(--mc-muted); stroke-dasharray: 4 4; }
.qs-axis-label    { fill: var(--mc-muted); font-size: 12px; }
.qs-quad          { font-size: 12px; opacity: 0.9; }
.qs-dot           { cursor: pointer; transition: r var(--mc-motion-fast); }
.qs-dot--hot      { stroke: var(--mc-ink); stroke-width: 2; r: 8; }

/* Custom scatter tooltip (appended to body; positioned in JS) */
.fund-scatter-tip { background: var(--mc-surface); border: 1px solid var(--mc-hairline);
                    border-radius: var(--mc-radius-sm); box-shadow: var(--mc-shadow-2);
                    padding: 6px 9px; font-size: 0.74rem; color: var(--mc-ink-2);
                    max-width: 220px; line-height: 1.4; }

/* ── Spotlight (header, beside the thesis): a 2-wide grid of compact cards (top 6
      = 3 rows × 2) so the rail stays short and never out-tall the thesis. ─────── */
.fund-strip__label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em;
                    text-transform: uppercase; color: var(--mc-muted); margin-bottom: var(--mc-space-2); }
.fund-spotlight__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fund-spot-card   { display: grid; grid-template-columns: 1fr auto; align-items: baseline;
                    column-gap: var(--mc-space-2); text-align: left;
                    background: var(--mc-surface); border: 1px solid var(--mc-hairline);
                    border-left: 3px solid #dc2626; border-radius: var(--mc-radius-sm);
                    padding: 5px var(--mc-space-3); cursor: pointer; }
.fund-spot-card:hover { border-color: var(--mc-primary); }
.fund-spot-card__name { font-weight: 600; color: var(--mc-ink); font-size: 0.82rem; }
.fund-spot-card__gap  { font-size: 0.76rem; color: #b91c1c; font-variant-numeric: tabular-nums;
                        text-align: right; font-weight: 600; }
.fund-spot-card__pc   { grid-column: 1; font-size: 0.66rem; color: var(--mc-muted);
                        font-variant-numeric: tabular-nums; }

/* ── Movers strip ────────────────────────────────────────────────────────── */
.fund-movers__list { display: flex; flex-wrap: wrap; gap: var(--mc-space-2); }
.fund-mover       { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem;
                    color: var(--mc-ink-2); background: var(--mc-panel); border: 1px solid var(--mc-hairline);
                    border-radius: 20px; padding: 5px 11px; cursor: pointer; }
.fund-mover:hover { border-color: var(--mc-primary); }
.fund-mover span  { color: var(--mc-muted); font-variant-numeric: tabular-nums; }

/* ── Callout + disclosure (from the verbatim concierge HTML) ─────────────── */
.callout          { background: var(--mc-primary-soft); border: 1px solid var(--mc-hairline);
                    border-left: 3px solid var(--mc-primary); border-radius: var(--mc-radius);
                    padding: var(--mc-space-4); }
.callout h3       { font-family: var(--mc-font-display); font-size: 1rem; color: var(--mc-ink); margin: 0 0 var(--mc-space-2); }
.callout p        { font-size: 0.84rem; color: var(--mc-ink-2); margin: 0; line-height: 1.5; }
.disclosure       { background: var(--mc-panel); border: 1px solid var(--mc-hairline);
                    border-radius: var(--mc-radius); padding: var(--mc-space-4); }
.disclosure h2    { font-family: var(--mc-font-display); font-size: 1.05rem; color: var(--mc-ink); margin: 0 0 var(--mc-space-2); }
.disclosure p     { font-size: 0.82rem; color: var(--mc-ink-2); margin: 0 0 var(--mc-space-2); line-height: 1.55; }
.callout em, .disclosure em { color: var(--mc-primary); font-style: italic; }

/* ── Hatch swatch (legend) — map uses the injected SVG <pattern> ─────────── */
.is-hatched       { background: repeating-linear-gradient(45deg, #e5e7eb 0 3px, #9ca3af 3px 4px); }

/* ── Mobile: keep the lens menu, caption + Explore reachable (mc-shell hides
      the legend float < 700px). Un-hide the float but drop the swatches so the
      map stays uncluttered; an empty float is invisible (no card chrome). ──── */
@media (max-width: 700px) {
  .mc-float--legend            { display: block; }
  .mc-float--legend .mc-legend { display: none; }
  .mc-lens, .mc-lens__details  { max-width: min(86vw, 280px); }
  /* Header + band both collapse to a single column. In the stacked band the
     quadrant (scatter) goes ABOVE the table — the chart reads first, list follows. */
  .fund-overview__header       { grid-template-columns: 1fr; }
  .fund-overview__band         { grid-template-columns: 1fr; }
  .fund-overview__scatter      { position: static; order: -1; }
  .fund-overview__table        { -webkit-overflow-scrolling: touch; }
}

/* Mid widths: the hub isn't always wide enough for thesis|spotlight side-by-side
   even above 700px — let the spotlight drop under the thesis before then. */
@media (max-width: 1100px) {
  .fund-overview__header       { grid-template-columns: 1fr; }
}