/* ===== Research surfaces — shared styles =====
   Extracted from the inlined <style> blocks of research_hub.html,
   focus_area_research.html and market_research_search.html so the
   rules are cached and manifest-hashed. Class namespaces are
   disjoint (hub: research-*/sector-*, focus area: kpi-*/startup-
   research-*, search: mr-*). */

/* ── from research_hub.html ─────────────────────────────── */
/* ── Research hub — cascading Sector › Category › Focus Area ─────────────
   Self-contained styling; only depends on the global CSS variables from
   style.css (--bg-*, --text-*, --accent-*). */

.research-shell {
    --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    position: relative;
    padding: 3.5rem 0 5rem;
    background:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(139,92,246,0.12), transparent 60%),
        radial-gradient(ellipse 60% 40% at 90% 10%, rgba(59,130,246,0.08), transparent 60%),
        var(--bg-primary);
    overflow: hidden;
}
.research-shell::before {
    content: '';
    position: absolute; inset: 0;
    background-image: var(--grain);
    opacity: 0.35;
    mix-blend-mode: overlay;
    pointer-events: none;
}
.research-shell > .container { position: relative; z-index: 1; }

.research-hero { text-align: center; margin-bottom: 2.5rem; }
.research-hero .eyebrow {
    display: inline-block;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-purple);
    background: linear-gradient(90deg, transparent, rgba(139,92,246,0.18), transparent);
    padding: 0.35rem 1rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}
.research-hero h1 {
    font-size: clamp(2rem, 4vw, 2.75rem);
    margin: 0 0 0.6rem;
    letter-spacing: -0.025em;
    background: var(--heading-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.research-hero p {
    color: var(--text-secondary);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.6;
}

.research-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin: 0 0 2.5rem;
}
.research-kpi {
    position: relative;
    background: linear-gradient(160deg, var(--ink-04) 0%, var(--ink-01) 100%), var(--bg-card);
    border: 1px solid var(--ink-06);
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    box-shadow: inset 0 1px 0 var(--gloss), 0 8px 24px var(--shade-20);
}
.research-kpi .label {
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.research-kpi .value {
    margin-top: 0.4rem;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

/* ── Sector card ─────────────────────────────────────────────────────── */
.sector-stack { display: flex; flex-direction: column; gap: 1.1rem; }

.sector-card {
    --sc: var(--accent-purple);
    position: relative;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--sc) 22%, var(--ink-04));
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--sc) 14%, transparent) 0%, transparent 55%),
        linear-gradient(180deg, var(--ink-03), rgba(255,255,255,0)),
        var(--bg-card);
    box-shadow:
        inset 0 1px 0 var(--gloss),
        0 1px 0 var(--shade-40),
        0 16px 40px -16px var(--shade-50);
    overflow: hidden;
    transition: transform 280ms cubic-bezier(.2,.7,.2,1),
                box-shadow 280ms ease,
                border-color 280ms ease;
}
.sector-card::after {
    content: '';
    position: absolute; inset: 0;
    background-image: var(--grain);
    opacity: 0.18;
    mix-blend-mode: overlay;
    pointer-events: none;
}
.sector-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--sc) 45%, transparent);
    box-shadow:
        inset 0 1px 0 var(--gloss),
        0 18px 48px -12px color-mix(in srgb, var(--sc) 35%, var(--shade-60));
}

.sector-head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    color: inherit;
    font: inherit;
    position: relative;
    z-index: 1;
}
.sector-head:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--sc) 60%, white);
    outline-offset: -2px;
    border-radius: 18px;
}
.sector-head .title-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}
.sector-head .swatch {
    width: 38px; height: 38px;
    border-radius: 12px;
    background:
        radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--sc) 70%, white) 0%, var(--sc) 60%, color-mix(in srgb, var(--sc) 70%, black) 100%);
    box-shadow:
        inset 0 1px 0 var(--gloss),
        inset 0 -6px 10px var(--shade-20),
        0 6px 16px -4px color-mix(in srgb, var(--sc) 55%, transparent);
    flex-shrink: 0;
}
.sector-head h2 {
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.015em;
    color: var(--text-primary);
}
.sector-head .eyebrow {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--sc) 70%, var(--text-primary));
    margin-bottom: 0.15rem;
}
.sector-meta {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.sector-meta .stat {
    text-align: right;
}
.sector-meta .stat .v {
    display: block;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.sector-meta .stat .l {
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.sector-meta .chev {
    width: 28px; height: 28px;
    border-radius: 8px;
    display: grid; place-items: center;
    background: var(--ink-04);
    color: color-mix(in srgb, var(--sc) 80%, var(--text-primary));
    transition: transform 320ms cubic-bezier(.2,.7,.2,1), background 220ms ease;
}
.sector-card.is-open .sector-meta .chev {
    transform: rotate(180deg);
    background: color-mix(in srgb, var(--sc) 25%, transparent);
}

/* ── Collapse mechanic — grid-rows trick for smooth height anim ─────── */
.collapse {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 380ms cubic-bezier(.2,.7,.2,1);
}
.collapse > .collapse-inner { overflow: hidden; }
.collapse.is-open { grid-template-rows: 1fr; }

/* ── Category cascade (indented under sector) ───────────────────────── */
.category-cascade {
    padding: 0.25rem 1.25rem 1.25rem 4.25rem;
    position: relative;
    z-index: 1;
}
.category-cascade::before {
    content: '';
    position: absolute;
    left: 2.4rem; top: 0; bottom: 1.4rem;
    width: 1px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--sc) 50%, transparent), transparent);
}
.category-row { position: relative; }
.category-row + .category-row { margin-top: 0.65rem; }

.category-head {
    width: 100%;
    background: linear-gradient(180deg, var(--ink-04), var(--ink-01));
    border: 1px solid var(--ink-06);
    border-left: 3px solid color-mix(in srgb, var(--sc) 60%, transparent);
    border-radius: 12px;
    color: inherit;
    text-align: left;
    padding: 0.85rem 1rem 0.85rem 1.05rem;
    cursor: pointer;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1rem;
    font: inherit;
    position: relative;
    transition: transform 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}
.category-head::before {
    /* tick mark connecting to the cascade rail */
    content: '';
    position: absolute;
    left: -1.85rem; top: 50%;
    width: 1.6rem; height: 1px;
    background: color-mix(in srgb, var(--sc) 45%, transparent);
}
.category-head:hover {
    transform: translateX(2px);
    border-color: color-mix(in srgb, var(--sc) 45%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--sc) 10%, transparent), var(--ink-01));
    box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--sc) 40%, transparent);
}
.category-head h3 {
    font-size: 1.02rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.category-head .sub {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.1rem;
}
.category-head .right {
    display: flex; align-items: center; gap: 0.85rem;
    color: var(--text-secondary);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}
.category-head .right .tam {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.category-head .chev {
    width: 22px; height: 22px;
    border-radius: 6px;
    display: grid; place-items: center;
    background: var(--ink-04);
    color: color-mix(in srgb, var(--sc) 75%, var(--text-primary));
    transition: transform 300ms cubic-bezier(.2,.7,.2,1);
}
.category-row.is-open .category-head .chev { transform: rotate(180deg); }

/* Mobile: hide right-side stats on tighter rows but keep TAM */
@media (max-width: 640px) {
    .sector-meta .stat:not(.primary) { display: none; }
    .category-head .right .meta { display: none; }
    .category-cascade { padding-left: 2.5rem; }
    .category-cascade::before { left: 1rem; }
    .category-head::before { left: -1.45rem; width: 1.2rem; }
}

/* ── SSR directory fallback ─────────────────────────────────────────── */
.ssr-directory { margin-top: 2rem; }
.ssr-directory ul { padding-left: 1.25rem; }
.ssr-directory a { color: var(--accent-purple); }

/* Reduced motion: drop the height transition so collapse is instant. */
@media (prefers-reduced-motion: reduce) {
    .collapse { transition: none; }
    .sector-card, .category-head,
    .sector-meta .chev, .category-head .chev { transition: none; }
}

/* ── from focus_area_research.html ─────────────────────────────── */
.research-breadcrumb {
    color: var(--text-secondary, #8b949e);
    font-size: 0.9rem;
    margin: 2rem 0 0.5rem;
}
.research-breadcrumb a { color: var(--accent-purple-text); }
.research-headline {
    padding: 0 0 1.5rem;
}
.research-headline h1 {
    font-size: 2.25rem;
    margin: 0.25rem 0 0.5rem;
    letter-spacing: -0.02em;
}
.research-headline .lede {
    color: var(--text-secondary, #8b949e);
    max-width: 720px;
}
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0 2.5rem;
}
.kpi-card {
    background: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(20,20,28,0.6));
    border: 1px solid rgba(139,92,246,0.18);
    padding: 1.25rem;
    border-radius: 14px;
}
.kpi-card .label {
    color: #8b949e;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.kpi-card .value {
    font-size: 1.85rem;
    font-weight: 600;
    margin-top: 0.3rem;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.kpi-card .sublabel {
    color: #8b949e;
    font-size: 0.8rem;
    margin-top: 0.3rem;
}

.top-sources-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0 0 2.5rem;
}
.source-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    text-decoration: none;
    transition: transform 150ms ease, filter 150ms ease;
    line-height: 1.2;
}
.source-pill:hover { transform: translateY(-1px); filter: brightness(1.15); }
.source-pill[data-tier="1"] { background: #1f6feb; color: #fff; }
.source-pill[data-tier="2"] { background: #388bfd; color: #fff; }
.source-pill[data-tier="3"] { background: #30363d; color: var(--text-secondary); }
.source-pill[data-tier="4"] { background: #21262d; color: #8b949e; }
.source-pill .tier-dot {
    width: 6px; height: 6px; border-radius: 50%; background: currentColor;
    opacity: 0.65;
}

.startup-research-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 1.1rem;
    margin-bottom: 3rem;
}
.startup-research-card {
    background: rgba(20,20,28,0.55);
    border: 1px solid var(--ink-06);
    border-radius: 14px;
    padding: 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.startup-research-card .name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.startup-research-card .name a { color: inherit; text-decoration: none; }
.startup-research-card .name a:hover { color: var(--accent-purple-text); }
.startup-research-card .figure-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.startup-research-card .figure-row .label { color: #8b949e; font-size: 0.78rem; }
.startup-research-card .figure-row .value {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
.startup-research-card .field-sources {
    display: inline-flex;
    gap: 0.3rem;
    margin-left: 0.5rem;
}
.startup-research-card .empty {
    color: #6e7681;
    font-style: italic;
    font-size: 0.85rem;
}
.startup-research-card .sectors-list {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--text-secondary);
    font-size: 0.82rem;
}
.research-pending {
    text-align: center;
    padding: 3rem 1rem;
    background: var(--ink-02);
    border: 1px dashed var(--ink-10);
    border-radius: 14px;
    color: #8b949e;
}
.methodology-note {
    font-size: 0.78rem;
    color: #6e7681;
    margin-top: 0.75rem;
}

/* ── from market_research_search.html ─────────────────────────────── */
.mr-page { padding: 32px 0; }
  .mr-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-color); margin-bottom: 24px; }
  .mr-tab { padding: 10px 18px; background: transparent; color: #aaa; border: 0; border-bottom: 2px solid transparent; font-size: 14px; cursor: pointer; font-weight: 600; }
  .mr-tab:hover { color: var(--text-secondary); }
  .mr-tab.active { color: var(--text-primary); border-bottom-color: #6366f1; }
  .mr-tab-panel { display: none; }
  .mr-tab-panel.active { display: block; }

  /* Breadcrumb */
  .mr-crumb { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 16px; font-size: 14px; }
  .mr-crumb a, .mr-crumb span.crumb-current { color: var(--text-secondary); padding: 4px 10px; border-radius: 6px; text-decoration: none; }
  .mr-crumb a { background: var(--bg-elevated); cursor: pointer; }
  .mr-crumb a:hover { background: var(--border-color); }
  .mr-crumb span.crumb-current { background: #6366f1; color: #fff; }
  .mr-crumb .sep { color: #555; }

  /* Stats tiles — area-weighted by TAM, color-tinted by researched ratio */
  .mr-grid { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
  .mr-stat-card {
    /* --weight controls flex-grow so larger TAM tiles claim more horizontal area */
    /* --tile-h sets minimum tile height in px, scaled by sqrt of TAM weight */
    /* --hue / --sat / --light feed the gradient and ring */
    flex: var(--weight, 1) 1 220px;
    min-height: var(--tile-h, 130px);
    position: relative;
    border-radius: 12px;
    padding: 18px 20px;
    cursor: pointer;
    overflow: hidden;
    color: var(--text-primary);
    background:
      radial-gradient(ellipse at top left, hsla(var(--hue,220), var(--sat,40%), var(--light,55%), 0.55), transparent 60%),
      linear-gradient(135deg, hsla(var(--hue,220), var(--sat,40%), 22%, 1) 0%, hsla(var(--hue,220), var(--sat,40%), 12%, 1) 100%);
    border: 1px solid hsla(var(--hue,220), var(--sat,40%), var(--light,55%), 0.35);
    box-shadow: 0 1px 0 hsla(var(--hue,220), var(--sat,40%), 70%, 0.05) inset, 0 8px 24px var(--shade-20);
    transform-origin: center;
    animation: tile-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    animation-delay: calc(var(--idx, 0) * 35ms);
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s, border-color 0.2s;
  }
  .mr-stat-card::before {
    /* Glow ring intensity scales with researched coverage */
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: 0 0 0 1px hsla(var(--hue,220), 90%, 70%, calc(var(--coverage,0) * 0.8)) inset,
                0 0 28px hsla(var(--hue,220), 90%, 60%, calc(var(--coverage,0) * 0.18));
    opacity: 0.9;
    transition: box-shadow 0.3s, opacity 0.3s;
  }
  .mr-stat-card:hover { transform: translateY(-3px) scale(1.015); }
  .mr-stat-card:hover::before { opacity: 1; box-shadow: 0 0 0 1.5px hsla(var(--hue,220), 95%, 75%, 0.9) inset, 0 0 36px hsla(var(--hue,220), 95%, 65%, 0.32); }
  .mr-stat-card h4 { margin: 0 0 10px; font-size: 16px; color: var(--text-primary); letter-spacing: -0.01em; position: relative; z-index: 1; }
  .mr-stat-card .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 14px; font-size: 13px; position: relative; z-index: 1; }
  .mr-stat-card .stat-label { color: hsla(var(--hue,220), 30%, 80%, 0.65); text-transform: uppercase; font-size: 10px; letter-spacing: 0.06em; }
  .mr-stat-card .stat-value { color: var(--text-primary); font-weight: 600; font-size: 15px; }
  .mr-stat-card .progress { margin-top: 14px; height: 5px; background: hsla(var(--hue,220), 30%, 8%, 0.6); border-radius: 3px; overflow: hidden; position: relative; z-index: 1; }
  .mr-stat-card .progress-bar {
    height: 100%;
    background: linear-gradient(90deg,
      hsl(var(--hue,220), 80%, 55%),
      hsl(calc(var(--hue,220) + 30), 85%, 65%));
    width: 0%;
    animation: bar-grow 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: calc(var(--idx, 0) * 35ms + 0.15s);
  }
  @keyframes tile-in {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
  }
  @keyframes bar-grow {
    to { width: var(--bar-fill, 0%); }
  }

  /* Color-scale legend */
  .mr-legend { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 0.06em; }
  .mr-legend .ramp { flex: 0 0 220px; height: 8px; border-radius: 4px;
    background: linear-gradient(90deg,
      hsl(0, 65%, 45%) 0%,
      hsl(40, 80%, 55%) 35%,
      hsl(140, 70%, 50%) 70%,
      hsl(190, 90%, 55%) 100%); }
  .mr-legend .ramp-labels { display: flex; justify-content: space-between; flex: 0 0 220px; margin-top: 2px; font-size: 10px; }
  .mr-legend .swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: middle; }

  /* Search form */
  .mr-form { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: end; margin-bottom: 24px; }
  .mr-form label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: #888; margin-bottom: 4px; }
  .mr-form input, .mr-form select { width: 100%; padding: 8px 10px; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary); border-radius: 6px; font-size: 14px; }
  .mr-form button { padding: 9px 18px; background: #6366f1; color: #fff; border: 0; border-radius: 6px; font-weight: 600; cursor: pointer; }
  .mr-form button.secondary { background: var(--border-color); }

  .mr-meta { color: #888; font-size: 13px; margin-bottom: 16px; }
  .mr-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 10px; padding: 18px 22px; margin-bottom: 14px; cursor: pointer; transition: border-color 0.15s; }
  .mr-card:hover { border-color: #6366f1; }
  .mr-card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
  .mr-card-head h3 { margin: 0; font-size: 18px; }
  .mr-card-head .meta { color: #888; font-size: 13px; }
  .mr-tag { display: inline-block; padding: 2px 8px; border-radius: 4px; background: var(--border-color); color: var(--text-secondary); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; margin-right: 6px; }
  .mr-tag.high { background: #f43f5e; color: #fff; }
  .mr-tag.medium { background: #f59e0b; color: #111; }
  .mr-tag.low { background: #10b981; color: #fff; }
  .mr-row { display: grid; grid-template-columns: 140px 1fr; gap: 10px 18px; margin-top: 8px; }
  .mr-row dt { color: #888; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
  .mr-row dd { margin: 0; color: var(--text-secondary); font-size: 14px; }
  .mr-pills { margin-top: 6px; }
  .mr-pill { display: inline-block; padding: 4px 10px; margin: 0 6px 6px 0; background: var(--bg-elevated); border: 1px solid var(--border-color); border-radius: 999px; font-size: 12px; color: var(--text-secondary); }
  .mr-empty { padding: 32px; text-align: center; color: var(--text-muted); border: 1px dashed var(--border-color); border-radius: 10px; }
  .mr-startup-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 8px; cursor: pointer; transition: border-color 0.15s; }
  .mr-startup-row:hover { border-color: #6366f1; }
  .mr-startup-row .name { font-weight: 600; color: var(--text-primary); font-size: 15px; }
  .mr-startup-row .sub { color: #888; font-size: 12px; margin-top: 2px; }
  .mr-startup-row .right { text-align: right; }
  .mr-startup-row .right .label { color: #888; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
  .mr-startup-row .right .value { color: var(--text-secondary); font-weight: 600; font-size: 14px; }
  .mr-startup-row .no-research { color: #f59e0b; font-size: 11px; }

  /* Modal */
  /* Inline expanded detail panel (replaces modal) */
  .mr-startup-block { margin-bottom: 8px; }
  .mr-startup-block.open .mr-startup-row { border-color: #6366f1; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .mr-startup-block.open .mr-startup-row .chev { transform: rotate(90deg); }
  .mr-startup-row .chev { display: inline-block; transition: transform 0.2s; color: #888; margin-left: 8px; }
  .mr-detail { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.35s cubic-bezier(0.2,0.8,0.2,1), opacity 0.25s ease 0.05s; background: var(--bg-primary); border: 1px solid var(--border-color); border-top: 0; border-radius: 0 0 8px 8px; }
  .mr-startup-block.open .mr-detail { max-height: 1400px; opacity: 1; }
  .mr-detail-inner { padding: 18px 22px 22px; }
  .mr-detail h4 { margin: 0 0 6px; font-size: 18px; color: var(--text-primary); }
  .mr-back-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; margin-top: 14px; background: var(--bg-elevated); border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-secondary); text-decoration: none; font-size: 13px; transition: border-color 0.15s, background 0.15s; }
  .mr-back-link:hover { background: var(--bg-elevated-hover); border-color: #6366f1; color: var(--text-primary); }
  .mr-back-link .arrow { font-size: 15px; line-height: 1; }

/* ── Motion: research hero choreography + card polish ─────────────── */
.research-hero .eyebrow { animation: mm-fade-up var(--dur-slow) var(--ease-out) both; }
.research-hero h1      { animation: mm-blur-in 700ms var(--ease-out) 120ms both; }
.research-hero p       { animation: mm-fade-up var(--dur-slow) var(--ease-out) 260ms both; }

/* Search results (mr-*) stagger in on every render — CSS only, so the
   client-side re-render needs no extra JS hooks. */
.mr-row, .mr-card {
    animation: mm-fade-up 360ms var(--ease-out) both;
}
.mr-row:nth-child(1), .mr-card:nth-child(1) { animation-delay: 0ms; }
.mr-row:nth-child(2), .mr-card:nth-child(2) { animation-delay: 40ms; }
.mr-row:nth-child(3), .mr-card:nth-child(3) { animation-delay: 80ms; }
.mr-row:nth-child(4), .mr-card:nth-child(4) { animation-delay: 120ms; }
.mr-row:nth-child(5), .mr-card:nth-child(5) { animation-delay: 160ms; }
.mr-row:nth-child(n+6), .mr-card:nth-child(n+6) { animation-delay: 200ms; }

/* ===== Research search panel ===== */
.rs-wrap { max-width: 940px; margin: 0 auto; }

.rs-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin-bottom: 26px;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, var(--ink-03), var(--ink-01)),
        var(--bg-card);
    box-shadow: inset 0 1px 0 var(--gloss), var(--shadow-1);
}
.rs-field { display: flex; flex-direction: column; }
.rs-field--wide { grid-column: 1 / -1; }
.rs-field label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 5px;
}
.rs-field input,
.rs-field select {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.rs-field input:focus,
.rs-field select:focus {
    outline: none;
    border-color: var(--accent-purple);
    box-shadow: 0 0 0 3px var(--accent-purple-dim);
}
.rs-actions {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    grid-column: 1 / -1;
}
.rs-btn {
    padding: 10px 20px;
    border: 0;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-med) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.rs-btn--go { background: var(--gradient-brand); color: #fff; box-shadow: var(--shadow-1); }
.rs-btn--go:hover { transform: translateY(-1px); box-shadow: var(--shadow-2), var(--glow-purple); }
.rs-btn--reset { background: var(--bg-elevated); color: var(--text-secondary); border: 1px solid var(--border-color); }
.rs-btn--reset:hover { color: var(--text-primary); border-color: var(--text-muted); }

/* Result groups */
.rs-group { margin-bottom: 26px; }
.rs-group-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-subtle);
}
.rs-group-title {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}
.rs-group-sub, .rs-count { font-size: 0.75rem; color: var(--text-muted); }
.rs-count { display: block; margin-bottom: 12px; }

.rs-list { display: flex; flex-direction: column; gap: 10px; }

/* Result card */
.rs-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 15px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-med) var(--ease-out);
}
.rs-card:hover {
    border-color: color-mix(in srgb, var(--accent-purple) 55%, transparent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-2), 0 0 30px -12px rgba(139,92,246,0.5);
}
.rs-card-main { flex: 1; min-width: 0; }
.rs-card-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rs-card-name { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--text-primary); }
.rs-card-cat { font-size: 0.72rem; color: var(--text-muted); }
.rs-card-desc {
    margin: 4px 0 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.rs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.rs-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-size: 0.72rem;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    max-width: 240px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rs-chip-k {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9a8fd0;
}
.rs-card-metrics { display: flex; flex-direction: column; gap: 4px; text-align: right; flex-shrink: 0; }
.rs-metric { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.rs-metric-k {
    display: block;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.rs-card-go { color: var(--text-muted); font-size: 1.1rem; flex-shrink: 0; transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.rs-card:hover .rs-card-go { color: var(--accent-purple); transform: translateX(3px); }

/* Loading / hint / empty states */
.rs-loading, .rs-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 2.5rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}
.rs-spinner {
    width: 16px; height: 16px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-purple);
    border-radius: 50%;
    animation: rs-spin 0.7s linear infinite;
}
@keyframes rs-spin { to { transform: rotate(360deg); } }

.rs-empty {
    text-align: center;
    padding: 3rem 2rem;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--ink-01);
}
.rs-empty svg { color: var(--text-muted); margin-bottom: 12px; }
.rs-empty h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--text-primary);
    margin: 0 0 8px;
}
.rs-empty p {
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.6;
    max-width: 460px;
    margin: 0 auto;
}
.rs-empty--error h3 { color: #f87171; }

@media (prefers-reduced-motion: reduce) {
    .rs-spinner { animation-duration: 0.01ms; }
}

/* ── Aggregate bars — portions of the parent TAM ────────────────────────
   Replaces the focus-area bubbles. One horizontal bar per parent: each
   child is a segment whose width is its share of the raw sum of sized
   children, tinted from the sector colour and stepping lighter by index.
   Unsized children keep a hairline sliver so nothing disappears. A legend
   underneath carries the numbers the bar only implies. */
.agg-bar-wrap { padding: 0.9rem 0.25rem 0.5rem 1.5rem; }
.agg-bar-wrap--sector { padding: 0.25rem 1.25rem 0.75rem 4.25rem; position: relative; z-index: 1; }
.agg-bar-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.agg-bar-head strong { color: var(--text-primary); letter-spacing: 0; text-transform: none; font-size: 0.85rem; }
.agg-bar {
    display: flex;
    gap: 2px;
    height: 36px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--ink-04);
    box-shadow: inset 0 0 0 1px var(--ink-06);
}
.agg-seg {
    --i: 0;
    --w: 1;
    flex: var(--w) 1 0;
    min-width: 6px;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 8px;
    container-type: inline-size;
    background: var(--sc);
    background: color-mix(in srgb, var(--sc) calc(88% - var(--i) * 9%), var(--bg-elevated));
    color: #fff;
    text-decoration: none;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 1px rgba(0,0,0,0.35);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
    transition: flex-grow 320ms cubic-bezier(.2,.7,.2,1), filter 200ms ease, transform 200ms ease;
}
.agg-seg:hover { filter: brightness(1.12) saturate(1.1); flex-grow: calc(var(--w) * 1.35 + 0.6); z-index: 1; }
.agg-seg:focus-visible { outline: 2px solid var(--text-primary); outline-offset: -2px; }
.agg-seg.dim {
    background: var(--ink-08);
    color: var(--text-muted);
    text-shadow: none;
    box-shadow: none;
}
.agg-seg-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@container (max-width: 64px) { .agg-seg-label { display: none; } }
.agg-legend {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 4px 18px;
}
.agg-legend-item {
    --i: 0;
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    font-size: 0.8rem;
    transition: background 160ms ease;
}
.agg-legend-item:hover { background: var(--ink-04); }
.agg-legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--sc);
    background: color-mix(in srgb, var(--sc) calc(88% - var(--i) * 9%), var(--bg-elevated));
}
.agg-legend-item.dim .agg-legend-swatch { background: var(--ink-12); }
.agg-legend-name {
    color: var(--text-primary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.agg-legend-item.dim .agg-legend-name { color: var(--text-secondary); }
.agg-legend-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    font-size: 0.74rem;
    white-space: nowrap;
}
.agg-legend-num strong { color: var(--text-primary); font-weight: 600; margin-right: 6px; }

/* Tabs + aggregate-method toggle (were inline styles with fixed whites). */
.research-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--ink-10);
    flex-wrap: wrap;
}
.research-tab {
    padding: 12px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: color 160ms ease, border-color 160ms ease;
}
.research-tab:hover { color: var(--text-primary); }
.research-tab.is-active { color: var(--text-primary); border-bottom-color: var(--accent-purple); }
.agg-method { display: flex; align-items: center; gap: 10px; margin: 4px 0 20px; flex-wrap: wrap; }
.agg-method-label { font-size: 0.8rem; color: var(--text-secondary); }
.agg-method-note { font-size: 0.75rem; color: var(--text-muted); }
.agg-method-toggle { display: inline-flex; border: 1px solid var(--ink-15); border-radius: 999px; overflow: hidden; }
.agg-method-toggle a {
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--text-secondary);
    transition: background 160ms ease, color 160ms ease;
}
.agg-method-toggle a:hover { color: var(--text-primary); }
.agg-method-toggle a.is-on { background: var(--accent-purple); color: var(--text-on-accent); }

@media (max-width: 640px) {
    .agg-bar-wrap { padding-left: 0.5rem; }
    .agg-bar-wrap--sector { padding: 0.25rem 1rem 0.75rem 1rem; }
    .agg-bar { height: 30px; }
    .agg-legend { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .agg-seg { transition: none; }
}

/* ── Descriptions + key drivers (2026-09-18) ────────────────────────────
   Every node says what it is (description from the taxonomy tables) and why
   it moves (highest-magnitude MarketTrend rows from committed IndustryFrames
   beneath it). Heads carry a clamped description; open bodies carry the full
   text, the driver list, the portion bar and a table of children. */
.node-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-top: 0.3rem;
    max-width: 70ch;
    font-size: 0.84rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--text-secondary);
}
.category-head .node-desc { -webkit-line-clamp: 1; font-size: 0.8rem; margin-top: 0.2rem; }
.sector-card.is-open .sector-head .node-desc,
.category-row.is-open .category-head .node-desc { display: none; }   /* full text shows in the body */
.sector-head { align-items: flex-start; }
.sector-head .title-row { align-items: flex-start; }
.sector-meta { flex-shrink: 0; padding-top: 0.2rem; }

.driver-strip { padding: 0.25rem 1.25rem 0.9rem 4.25rem; position: relative; z-index: 1; }
.category-row .driver-strip { padding: 1rem 0.25rem 0.25rem 1.5rem; }
.driver-desc {
    margin: 0 0 0.9rem;
    max-width: 78ch;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-secondary);
}
.driver-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.driver-growth {
    margin-left: auto;
    padding: 3px 9px;
    border-radius: 999px;
    letter-spacing: 0.02em;
    text-transform: none;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--emerald-text);
    background: var(--accent-emerald-dim);
    font-variant-numeric: tabular-nums;
}
.driver-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 8px;
}
.driver {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 10px 12px;
    border: 1px solid var(--ink-06);
    border-radius: 10px;
    background: var(--ink-02);
}
.driver-icon {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    font-size: 0.6rem;
    color: var(--emerald-text);
    background: var(--accent-emerald-dim);
}
.driver--threat .driver-icon { color: var(--red-text); background: rgba(244, 63, 94, 0.14); }
.driver-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.driver-text { font-size: 0.84rem; line-height: 1.45; color: var(--text-primary); }
.driver-meta { font-size: 0.7rem; color: var(--text-muted); }
.driver-empty { margin: 0; font-size: 0.8rem; color: var(--text-muted); }

/* Focus-area table — replaces the legend. */
.fa-table { list-style: none; margin: 14px 0 0; padding: 0; border: 1px solid var(--ink-06); border-radius: 12px; overflow: hidden; }
.fa-row {
    --i: 0;
    display: grid;
    grid-template-columns: 10px minmax(170px, 1.35fr) minmax(200px, 1.75fr) 112px 64px 56px 52px 72px 44px;
    gap: 14px;
    align-items: center;
    padding: 11px 14px;
    color: inherit;
    text-decoration: none;
    font-size: 0.8rem;
    border-top: 1px solid var(--ink-05);
    transition: background 160ms ease;
}
.fa-table > li:first-child .fa-row { border-top: 0; }
a.fa-row:hover { background: var(--ink-04); }
.fa-row--head {
    padding-block: 8px;
    background: var(--ink-03);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.fa-row-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fa-row-name { font-weight: 600; color: var(--text-primary); font-size: 0.86rem; }
.fa-row.dim .fa-row-name { color: var(--text-secondary); }
.fa-row-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--text-secondary);
}
.fa-row-driver {
    min-width: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 0.76rem;
    line-height: 1.45;
    color: var(--text-secondary);
}
.fa-row-driver .driver-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--accent-emerald);
    vertical-align: 1px;
}
.fa-row-driver .driver-dot--threat { background: #f43f5e; }
.fa-row-muted { color: var(--text-muted); }
.fa-row-stat { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-secondary); white-space: nowrap; }
.fa-row-stat strong { color: var(--text-primary); font-weight: 600; }
.fa-row--head .fa-row-stat { color: var(--text-muted); }

/* KPI strip: three cards become one bar. */
.research-kpis {
    gap: 0 !important;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--bg-card);
    box-shadow: var(--shadow-1), inset 0 1px 0 var(--gloss);
    overflow: hidden;
}
.research-kpis .research-kpi {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.research-kpis .research-kpi + .research-kpi { border-left: 1px solid var(--border-subtle); }

@media (max-width: 900px) {
    .fa-row {
        grid-template-columns: 10px minmax(0, 1fr);
        gap: 6px 10px;
        align-items: start;
        padding: 12px;
    }
    .fa-row--head { display: none; }
    .fa-row > .agg-legend-swatch { margin-top: 5px; }
    .fa-row-driver, .fa-row-stats-wrap { grid-column: 2; }
    .fa-row-stat { text-align: left; display: inline-flex; gap: 5px; align-items: baseline; }
    .fa-row-stat::before {
        content: attr(data-label);
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-muted);
    }
    .fa-row-stat { grid-column: 2; }
}
@media (max-width: 640px) {
    .driver-strip { padding: 0.25rem 1rem 0.9rem 1rem; }
    .category-row .driver-strip { padding-left: 0.5rem; }
    .research-kpis { grid-template-columns: 1fr !important; }
    .research-kpis .research-kpi + .research-kpi { border-left: 0; border-top: 1px solid var(--border-subtle); }
}

/* Stats share the row grid on desktop and wrap as labelled chips on mobile. */
.fa-row-stats { display: contents; }
@media (max-width: 900px) {
    .fa-row-stats { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px 14px; }
    .fa-row-stat { grid-column: auto; }
}


/* ── Market structure insight map (2026-10-13) ─────────────────────────────
   The shape of a market on the focus-area research page and the company
   strategy page: the competition ↔ monopoly spectrum, the five determinants,
   the suppliers → sellers → buyers map, the forces read against it, the
   demand/cost curves, the product classification and each company's control
   over price. Theme-aware: every colour is a token or an alpha over the
   accent so light and dark both read. */
.structure-map .structure-block-lede {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 78ch;
    margin: 6px 0 14px;
}
.structure-flag-count {
    color: var(--amber-text);
    font-weight: 600;
}
.structure-pending { margin: 1.5rem 0 2.5rem; }
.structure-pending a { color: var(--accent-purple-text); }

/* Headline: verdict + spectrum */
.structure-headline {
    margin-top: 20px;
    padding: 22px 24px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
}
.structure-verdict {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-bottom: 16px;
}
.structure-type {
    display: inline-block;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
}
.structure-type--sm { font-size: 0.72rem; font-weight: 600; padding: 3px 10px; }
.structure-type--perfect_competition      { background: var(--accent-emerald-dim); color: var(--emerald-text); border-color: rgba(16,185,129,0.35); }
.structure-type--monopolistic_competition { background: var(--accent-blue-dim);    color: var(--blue-text);    border-color: rgba(59,130,246,0.35); }
.structure-type--oligopoly                { background: var(--accent-amber-dim);   color: var(--amber-text);   border-color: rgba(245,158,11,0.35); }
.structure-type--monopoly                 { background: rgba(239,68,68,0.14);      color: var(--red-text);     border-color: rgba(239,68,68,0.35); }
.structure-score {
    font-size: 0.95rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.structure-score strong { font-size: 1.3rem; color: var(--text-primary); }
.structure-score .denom { color: var(--text-muted); }
.structure-score-label { font-size: 0.78rem; margin-left: 4px; }
.structure-regime {
    font-size: 0.78rem;
    color: var(--text-secondary);
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px dashed var(--border-color);
}
.structure-asserted {
    font-size: 0.72rem;
    color: var(--amber-text);
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--accent-amber-dim);
}

.structure-spectrum { margin: 4px 0 14px; }
.spectrum-track {
    position: relative;
    height: 34px;
    display: flex;
    border-radius: 8px;
    overflow: visible;
}
.spectrum-band {
    position: relative;
    flex: 0 0 calc(var(--w) * 1%);
    min-width: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
    background: var(--ink-05);
    border-right: 1px solid var(--bg-card);
    transition: background 180ms ease, color 180ms ease;
}
.spectrum-band:first-child { border-radius: 8px 0 0 8px; }
.spectrum-band:last-child  { border-radius: 0 8px 8px 0; border-right: 0; }
.spectrum-band-label { padding: 0 6px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) {
    /* Four labels do not fit a phone-width track; the verdict chip above and
       the highlighted band carry the reading, the ends carry the axis. */
    .spectrum-band-label { display: none; }
    .spectrum-track { height: 16px; }
}
.spectrum-band.is-active { color: var(--text-primary); }
.spectrum-band--perfect_competition.is-active      { background: var(--accent-emerald-dim); }
.spectrum-band--monopolistic_competition.is-active { background: var(--accent-blue-dim); }
.spectrum-band--oligopoly.is-active                { background: var(--accent-amber-dim); }
.spectrum-band--monopoly.is-active                 { background: rgba(239,68,68,0.16); }
.spectrum-marker {
    position: absolute;
    top: -6px;
    bottom: -6px;
    left: calc(var(--pos) * 1%);
    width: 2px;
    background: var(--text-primary);
    transform: translateX(-1px);
    border-radius: 2px;
}
.spectrum-marker-dot {
    position: absolute;
    top: -5px;
    left: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--text-primary);
    border: 2px solid var(--bg-card);
    transform: translateX(-50%);
    box-shadow: 0 0 0 3px var(--ink-10);
}
.spectrum-ends {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    font-size: 0.68rem;
    color: var(--text-muted);
}
.structure-definition {
    font-size: 0.92rem;
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0 0 8px;
}
.structure-geo {
    font-size: 0.72rem;
    color: var(--text-secondary);
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--ink-06);
    margin-left: 6px;
    vertical-align: middle;
}

/* Determinants */
.determinant-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin-top: 14px;
}
.determinant-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 16px;
}
.determinant-card.is-unrated { opacity: 0.7; border-style: dashed; }
.determinant-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}
.determinant-label { font-size: 0.84rem; font-weight: 700; }
.determinant-notes {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 8px 0 0;
}
.chip-unrated {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px dashed var(--border-color);
    color: var(--text-muted);
    flex-shrink: 0;
}
/* Count-band chips (one/few/many/very_many) and control chips (none/low/moderate/high) */
.band-one       { background: rgba(239,68,68,0.14);      color: var(--red-text);     border-color: rgba(239,68,68,0.35); }
.band-few       { background: var(--accent-amber-dim);   color: var(--amber-text);   border-color: rgba(245,158,11,0.35); }
.band-many      { background: var(--accent-blue-dim);    color: var(--blue-text);    border-color: rgba(59,130,246,0.35); }
.band-very_many { background: var(--accent-emerald-dim); color: var(--emerald-text); border-color: rgba(16,185,129,0.35); }
.ctl-chip {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    white-space: nowrap;
}
.ctl-none, .ctl-unrated { background: var(--bg-secondary);       color: var(--text-muted); }
.ctl-low                { background: var(--accent-emerald-dim); color: var(--emerald-text); border-color: rgba(16,185,129,0.35); }
.ctl-moderate           { background: var(--accent-amber-dim);   color: var(--amber-text);   border-color: rgba(245,158,11,0.35); }
.ctl-high               { background: rgba(239,68,68,0.14);      color: var(--red-text);     border-color: rgba(239,68,68,0.35); }
.ctl-unrated            { border-style: dashed; }

/* The shape: suppliers → sellers → buyers */
.shape-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr) auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin-top: 8px;
}
.shape-column {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px;
    min-width: 0;
}
.shape-column--sellers { border-color: rgba(139,92,246,0.35); box-shadow: 0 0 0 1px var(--accent-purple-dim); }
.shape-column-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 10px;
}
.shape-column-title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.shape-column--sellers .shape-column-title { color: var(--accent-purple-text); }
.shape-column-sub { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.5; }
.shape-column-sub strong { color: var(--text-primary); }
.shape-column-notes {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0 0 10px;
}
.shape-arrow {
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--text-muted);
    font-size: 1.1rem;
    padding: 0 2px;
}
.shape-arrow span { font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; }
.shape-row {
    padding: 10px 0;
    border-top: 1px solid var(--border-subtle);
}
.shape-row:first-of-type { border-top: 0; }
.shape-row.is-highlight {
    margin: 0 -8px;
    padding-left: 8px;
    padding-right: 8px;
    background: var(--accent-purple-dim);
    border-radius: 8px;
    border-top-color: transparent;
}
.shape-row-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.shape-row-name { font-size: 0.86rem; font-weight: 600; color: var(--text-primary); min-width: 0; }
.shape-row-name a { color: inherit; text-decoration: none; }
.shape-row-name a:hover { color: var(--accent-purple-text); }
.shape-row-figures {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    display: inline-flex;
    gap: 6px;
    align-items: baseline;
}
.shape-row-figures strong { color: var(--text-primary); }
.shape-row-rev { font-size: 0.72rem; color: var(--text-muted); }
.shape-row-detail {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-top: 4px;
}
.shape-k {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-right: 4px;
}
.shape-row-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.shape-row-notes {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 5px 0 0;
}
.shape-empty { font-size: 0.8rem; color: var(--text-muted); font-style: italic; margin: 6px 0; }
.tracked-pill {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--accent-purple-dim);
    color: var(--accent-purple-text);
    margin-left: 6px;
    vertical-align: middle;
}
.share-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--ink-06);
    margin-top: 6px;
    overflow: hidden;
}
.share-bar-fill {
    display: block;
    height: 100%;
    width: calc(var(--w) * 1%);
    min-width: 2px;
    border-radius: 999px;
    background: var(--accent-purple);
    transition: width 600ms cubic-bezier(.2,.8,.2,1);
}
.share-bar-fill.size-global_leader { background: var(--accent-purple); }
.share-bar-fill.size-niche_power   { background: var(--accent-amber); }
.share-bar-fill.size-limited       { background: var(--accent-blue); }
.share-bar-fill.size-entrant       { background: var(--accent-emerald); }
.size-chip, .kind-chip {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
}
.size-chip.size-global_leader { background: var(--accent-purple-dim);  color: var(--accent-purple-text); border-color: rgba(139,92,246,0.35); }
.size-chip.size-niche_power   { background: var(--accent-amber-dim);   color: var(--amber-text);         border-color: rgba(245,158,11,0.35); }
.size-chip.size-limited       { background: var(--accent-blue-dim);    color: var(--blue-text);          border-color: rgba(59,130,246,0.35); }
.size-chip.size-entrant       { background: var(--accent-emerald-dim); color: var(--emerald-text);       border-color: rgba(16,185,129,0.35); }
@media (max-width: 980px) {
    .shape-grid { grid-template-columns: minmax(0, 1fr); }
    .shape-arrow { flex-direction: row; transform: rotate(90deg); justify-self: center; padding: 2px 0; }
}

/* Forces read from the shape */
.forces-map-table td:nth-child(3) { max-width: 36ch; }
.align-chip {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    white-space: nowrap;
}
.align-aligned { background: var(--accent-emerald-dim); color: var(--emerald-text); border-color: rgba(16,185,129,0.35); }
.align-tension { background: var(--accent-amber-dim);   color: var(--amber-text);   border-color: rgba(245,158,11,0.35); }
.align-unrated { background: var(--bg-secondary);       color: var(--text-muted);   border-style: dashed; }

/* Demand and cost curves */
.curve-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.curve-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 16px;
}
.curve-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.curve-title { font-size: 0.84rem; font-weight: 700; }
.curve-chip { background: var(--accent-blue-dim); color: var(--blue-text); border-color: rgba(59,130,246,0.35); }
.curve-notes { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.55; margin: 8px 0 0; }

/* Product classification */
.product-class-card {
    margin-top: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px 18px;
}
.product-class-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.product-class-eyebrow {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.product-class-name { font-size: 1.02rem; font-weight: 700; color: var(--text-primary); }
.product-class-desc { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.55; margin: 8px 0 0; }
.product-class-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px 16px;
    margin-top: 14px;
}
.product-class-facts .fact { display: flex; flex-direction: column; gap: 4px; }
.product-class-facts .fact-k {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.product-class-facts .fact-v { font-size: 0.82rem; color: var(--text-primary); }
.product-class-facts .fact-note { display: block; font-size: 0.72rem; color: var(--text-secondary); line-height: 1.45; margin-top: 3px; }
.subclass-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
    margin-top: 14px;
}
.subclass-card {
    background: var(--ink-03);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 12px 14px;
}
.subclass-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.subclass-name { font-size: 0.84rem; font-weight: 700; }
.subclass-desc { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.5; margin: 6px 0 0; }
.subclass-detail { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.5; margin: 4px 0 0; }

/* Who controls their price */
.control-table tr.is-highlight td { background: var(--accent-purple-dim); }
.control-table td:nth-child(5) { max-width: 34ch; }
.gap-chip {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 1px 7px;
    border-radius: 999px;
    margin-left: 4px;
    vertical-align: middle;
}
.gap-exceeds { background: rgba(239,68,68,0.14);      color: var(--red-text); }
.gap-full    { background: var(--accent-emerald-dim); color: var(--emerald-text); }
.gap-below   { background: var(--bg-secondary);       color: var(--text-muted); }
.adv-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.adv-chip {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--accent-purple-dim);
    color: var(--accent-purple-text);
}
.structure-implications {
    font-size: 0.9rem;
    color: var(--text-primary);
    line-height: 1.65;
    max-width: 78ch;
    margin: 10px 0 0;
}

/* The validated-step trail */
.stage-trail {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px;
}
.stage-step {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}
.stage-step.is-empty { border-style: dashed; opacity: 0.7; }
.stage-step.has-flags { border-color: rgba(245,158,11,0.35); }
.stage-num {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    background: var(--accent-emerald-dim);
    color: var(--emerald-text);
}
.stage-step.has-flags .stage-num { background: var(--accent-amber-dim); color: var(--amber-text); }
.stage-step.is-empty .stage-num  { background: var(--bg-secondary); color: var(--text-muted); }
.stage-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stage-label { font-size: 0.8rem; font-weight: 600; }
.stage-meta { font-size: 0.7rem; color: var(--text-muted); line-height: 1.45; }
.stage-flags { color: var(--amber-text); }
.structure-flags { margin-top: 12px; font-size: 0.78rem; color: var(--text-secondary); }
.structure-flags summary { cursor: pointer; color: var(--text-secondary); }
.structure-flags ul { margin: 8px 0 0; padding-left: 1.1rem; line-height: 1.6; }
.structure-flags code {
    font-size: 0.7rem;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--ink-06);
    color: var(--text-primary);
}

/* Hub: structure column dot */
.structure-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
    background: var(--text-muted);
}
.structure-dot--perfect_competition      { background: var(--accent-emerald); }
.structure-dot--monopolistic_competition { background: var(--accent-blue); }
.structure-dot--oligopoly                { background: var(--accent-amber); }
.structure-dot--monopoly                 { background: #ef4444; }


/* ── Products & price control — the company-level read (2026-10-13) ────────
   Under the market map: each product's company-defined claim, the
   capabilities behind it (claimed vs evidenced), the non-price levers that
   create pricing room, and realised control against the subclass ceiling. */
.control-headline {
    margin-top: 20px;
    padding: 20px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px 28px;
    align-items: start;
}
.control-verdict, .control-market { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.control-verdict-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.ctl-chip--lg { font-size: 0.95rem; padding: 6px 14px; }
.control-market-line { font-size: 0.86rem; color: var(--text-secondary); line-height: 1.7; }
.control-market-line a { color: var(--accent-purple-text); text-decoration: none; }
.control-market-line a:hover { text-decoration: underline; }
.control-market-regime { font-size: 0.74rem; color: var(--text-muted); }
.control-basis { grid-column: 1 / -1; font-size: 0.86rem; color: var(--text-primary); line-height: 1.6; margin: 0; }
.control-headline .strategy-summary { grid-column: 1 / -1; margin: 0; }
@media (max-width: 700px) { .control-headline { grid-template-columns: 1fr; } }

.product-control-card {
    margin-top: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 18px 20px;
}
.product-control-card.is-core { border-color: rgba(139,92,246,0.35); box-shadow: 0 0 0 1px var(--accent-purple-dim); }
.product-control-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}
.product-control-title { min-width: 0; flex: 1 1 320px; }
.product-control-title h3 { margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.product-control-desc { font-size: 0.84rem; color: var(--text-secondary); line-height: 1.55; margin: 6px 0 0; }
.product-control-class { font-size: 0.76rem; color: var(--text-secondary); margin: 6px 0 0; }
.control-gauge {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px;
    background: var(--ink-03);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    flex: 0 0 auto;
}
.control-gauge-row { display: flex; align-items: center; gap: 8px; }
.control-gauge-k { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); width: 58px; }

.product-claim {
    margin: 14px 0 0;
    padding: 12px 16px;
    border-left: 3px solid var(--accent-purple);
    background: var(--accent-purple-dim);
    border-radius: 0 10px 10px 0;
}
.product-claim p { margin: 4px 0 0; font-size: 0.92rem; color: var(--text-primary); line-height: 1.6; font-style: italic; }
.product-claim cite { display: inline-block; margin-top: 6px; font-size: 0.72rem; font-style: normal; color: var(--text-secondary); }
.product-claim cite a { color: var(--accent-purple-text); }

.control-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
    margin-top: 14px;
}
.control-col { min-width: 0; }
.control-col--levers { padding-left: 14px; border-left: 1px solid var(--border-subtle); }
@media (max-width: 700px) { .control-col--levers { padding-left: 0; border-left: 0; } }
.control-col-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.control-col-title { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); }
.control-col-sub { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; }
.control-col-lede { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.55; margin: 0 0 8px; }
.lever-row { padding: 9px 0; border-top: 1px solid var(--border-subtle); }
.lever-row:first-of-type { border-top: 0; }
.lever-row--high { box-shadow: inset 3px 0 0 var(--accent-emerald); padding-left: 10px; margin-left: -10px; }
.lever-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.lever-name { font-size: 0.84rem; font-weight: 600; color: var(--text-primary); min-width: 0; }
.lever-chips { display: inline-flex; gap: 5px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.lever-type { display: inline-block; font-size: 0.66rem; color: var(--accent-purple-text); background: var(--accent-purple-dim); padding: 1px 8px; border-radius: 999px; margin-top: 4px; }
.lever-desc { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.5; margin: 5px 0 0; }
.lever-evidence { font-size: 0.74rem; color: var(--text-muted); line-height: 1.5; margin: 4px 0 0; }
.evid-chip {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
}
.evid-yes   { background: var(--accent-blue-dim); color: var(--blue-text); border-color: rgba(59,130,246,0.35); }
.evid-claim { background: var(--bg-secondary); color: var(--text-muted); border-style: dashed; }
.product-control-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-subtle); }
.product-control-foot p { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.55; margin: 4px 0 0; }
.stage-trail--3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.deep-pill {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--accent-blue-dim);
    color: var(--blue-text);
    margin-left: 6px;
    vertical-align: middle;
}
.control-table .cell-claim { font-style: italic; color: var(--text-secondary); }

/* ── Focus-area company cards: identity + highlights + condensed metrics ── */
.startup-research-card { gap: 0.6rem; }
.src-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.src-identity { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.src-logo {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: var(--ink-06);
    border: 1px solid var(--border-subtle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-decoration: none;
}
.src-logo img { width: 100%; height: 100%; object-fit: contain; padding: 5px; background: #fff; }
.src-title { min-width: 0; }
.src-title .name { font-size: 1.02rem; line-height: 1.25; }
.src-ticker { font-size: 0.66rem; font-weight: 700; color: var(--text-muted); margin-left: 4px; letter-spacing: 0.04em; }
.src-tagline { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.45; margin: 3px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.src-control { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-decoration: none; flex-shrink: 0; }
.src-control-k { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.src-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.src-facts li { display: inline-flex; gap: 5px; align-items: baseline; font-size: 0.76rem; }
.src-fact-k { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.src-fact-v { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.src-diff, .src-products, .src-sectors { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.5; margin: 0; }
.src-product { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--ink-06); color: var(--text-primary); font-size: 0.72rem; margin-right: 4px; }
.src-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 6px;
    padding: 10px 12px;
    background: var(--ink-03);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
}
.src-metric { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.src-metric-k { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.src-metric-v { font-size: 0.92rem; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.src-metric--revenue .src-metric-v { color: var(--accent-purple-text); }
.src-metric .field-sources { margin: 0; }
.src-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: auto; padding-top: 6px; border-top: 1px solid var(--border-subtle); }
.src-foot-note { font-size: 0.7rem; color: var(--text-muted); }


/* ── Market shape triptych: interactive stacks (2026-10-14) ─────────────────
   Suppliers → sellers → buyers side by side. Each column is a vertical stack
   whose segments grow with --w (the group's weight in the chosen lens);
   clicking a segment opens its detail under the column. Alpine toggles the
   lens and the open segment; no transitions so it renders in a hidden tab. */
[x-cloak] { display: none !important; }
.shape-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.shape-modes {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    max-width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: var(--bg-card);
    flex-shrink: 1;
}
.shape-modes-k {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0 8px 0 10px;
}
.shape-modes button {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.76rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    cursor: pointer;
}
.shape-modes button.is-on { background: var(--accent-purple); color: #fff; }
.shape-modes button:hover:not(.is-on) { background: var(--ink-06); color: var(--text-primary); }

.shape-triptych {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr) auto minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
    margin-top: 14px;
}
.shape-col {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.shape-col--sellers { border-color: rgba(139,92,246,0.35); box-shadow: 0 0 0 1px var(--accent-purple-dim); }
.shape-col-head { display: flex; flex-direction: column; gap: 4px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--border-subtle); }
.shape-col-title { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); }
.shape-col--sellers .shape-col-title { color: var(--accent-purple-text); }
.shape-col-sub { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.5; }
.shape-col-sub strong { color: var(--text-primary); }

/* The stack fills the column so the three columns read as one height;
   a segment never drops below the height of its two text lines, so a
   column with a dozen groups grows rather than clipping. */
.shape-stack {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 auto;
    min-height: 340px;
}
.shape-seg {
    --w: 10;
    appearance: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    flex: var(--w) 0 0;
    min-height: 46px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 6px 10px;
    border-radius: 7px;
    border: 1px solid transparent;
    background: var(--ink-06);
    color: var(--text-primary);
    overflow: hidden;
    position: relative;
    transition: flex 420ms cubic-bezier(.2,.8,.2,1), background 150ms ease;
}
.shape-seg::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--seg-accent, var(--accent-purple));
    opacity: 0.9;
}
.shape-seg:hover { background: var(--ink-10); }
.shape-seg.is-open { border-color: var(--seg-accent, var(--accent-purple)); background: var(--ink-08); }
.shape-seg.is-highlight { box-shadow: inset 0 0 0 1px var(--accent-purple); }
.shape-seg--supplier { --seg-accent: var(--accent-blue); }
.shape-seg--buyer    { --seg-accent: var(--accent-emerald); }
.shape-seg--seller   { --seg-accent: var(--accent-purple); }
.shape-seg--seller.size-niche_power { --seg-accent: var(--accent-amber); }
.shape-seg--seller.size-limited     { --seg-accent: var(--accent-blue); }
.shape-seg--seller.size-entrant     { --seg-accent: var(--accent-emerald); }
/* Power tints: the stronger the group, the warmer the band. */
.shape-seg.power-high   { background: linear-gradient(90deg, rgba(239,68,68,0.10), var(--ink-06)); }
.shape-seg.power-medium { background: linear-gradient(90deg, rgba(245,158,11,0.10), var(--ink-06)); }
.shape-seg.power-low    { background: linear-gradient(90deg, rgba(16,185,129,0.08), var(--ink-06)); }
.seg-name {
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.seg-meta { font-size: 0.68rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.shape-detail {
    margin-top: 10px;
    padding: 12px;
    border-radius: 10px;
    background: var(--ink-03);
    border: 1px solid var(--border-subtle);
}
.shape-detail-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.shape-detail-row { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.55; margin: 5px 0 0; }
.shape-detail-row .shape-k { display: inline-block; min-width: 86px; }
@media (max-width: 980px) {
    .shape-triptych { grid-template-columns: minmax(0, 1fr); }
    .shape-stack { min-height: 0; flex: 0 0 auto; }
    .shape-seg { min-height: 46px; flex-basis: auto; }
}

/* Value flow: where the buyers' dollar goes */
.value-flow, .shapers {
    margin-top: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px 16px;
}
.value-flow-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.value-flow-bar {
    display: flex;
    height: 34px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--ink-05);
}
.vf-seg {
    flex: 0 0 calc(var(--w) * 1%);
    min-width: 0;
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vf-seg--sellers   { background: var(--accent-purple-dim); box-shadow: inset 0 0 0 1px rgba(139,92,246,0.35); }
.vf-seg--suppliers { background: var(--accent-blue-dim);   box-shadow: inset 0 0 0 1px rgba(59,130,246,0.35); }
.value-flow-inputs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.vf-input {
    font-size: 0.7rem;
    color: var(--text-secondary);
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
}
.vf-input strong { color: var(--text-primary); }

/* What shapes the market */
.shapers-table th .unit { font-weight: 500; text-transform: none; letter-spacing: 0; }
.shapers-table td:first-child { max-width: 30ch; }


/* ── Who controls their price: one line per product, companies beneath ── */
.product-groups { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.product-group {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px 18px;
}
.product-group.has-highlight { border-color: rgba(139,92,246,0.35); box-shadow: 0 0 0 1px var(--accent-purple-dim); }
.product-group-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.product-group-title { min-width: 0; flex: 1 1 280px; }
.product-group-eyebrow { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.product-group-title h4 { margin: 2px 0 0; font-size: 1.02rem; font-weight: 700; }
.product-group-desc { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.5; margin: 4px 0 0; }
.product-group-facts { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.pg-fact { display: inline-flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.pg-k { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.pg-v { font-size: 0.82rem; color: var(--text-primary); }
.product-group-read { margin-top: 10px; padding: 10px 12px; background: var(--ink-03); border: 1px solid var(--border-subtle); border-radius: 10px; }
.product-group-read p { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.55; margin: 4px 0 0; }
.product-group-read p:first-child { margin-top: 0; }
.product-group-read .shape-k { display: inline-block; min-width: 128px; }
.product-group .research-table-wrap { margin-top: 10px; }
.control-table--grouped td:nth-child(3) { max-width: 40ch; }
.product-group-foot { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-subtle); }
.product-group-foot p { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.55; margin: 4px 0 0; }
.product-group-leader a { color: var(--accent-purple-text); font-weight: 600; text-decoration: none; }
.best-pill {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--accent-emerald-dim);
    color: var(--emerald-text);
    margin-left: 6px;
    vertical-align: middle;
}


/* ── Expand/collapse for long text (shapers table, column notes) ──
   .clamp-row clamps every .clamp inside it to three lines until opened. */
.clamp-row .clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.clamp-row.is-open .clamp { display: block; -webkit-line-clamp: unset; overflow: visible; }
.clamp-toggle {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--accent-purple-text);
    font: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 0;
    cursor: pointer;
    display: block;
    margin-top: 4px;
}
.clamp-toggle:hover { text-decoration: underline; }
.shape-col-notes .clamp-toggle { display: inline; margin: 0 0 0 4px; }

/* ── Demand / cost curves ── */
.demand-chart {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px 16px;
    margin-top: 12px;
}
.demand-chart-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.demand-svg { width: 100%; height: auto; display: block; font-family: inherit; }
.dc-grid { stroke: var(--border-subtle); stroke-width: 1; }
.dc-axis { stroke: var(--text-muted); stroke-width: 1.2; }
.dc-tick { fill: var(--text-muted); font-size: 11px; }
.dc-axis-label { fill: var(--text-secondary); font-size: 11px; font-weight: 600; }
.dc-market { stroke: var(--text-primary); stroke-width: 2.2; }
.dc-market-label { fill: var(--text-primary); font-size: 11px; font-weight: 700; }
.dc-schedule { fill: var(--bg-card); stroke: var(--text-primary); stroke-width: 1.5; }
.dc-company { stroke-width: 1.6; stroke-dasharray: none; opacity: 0.85; }
.dc-company.is-highlight { stroke-width: 2.6; opacity: 1; }
.dc-cost { stroke-width: 1.2; stroke-dasharray: 5 4; opacity: 0.7; }
.dc-point { stroke: var(--bg-card); stroke-width: 2; }
.dc-point.is-highlight { stroke: var(--accent-purple); }
.dc-point-label { fill: var(--text-primary); font-size: 11px; font-weight: 600; }
.dc-c0 { stroke: var(--accent-purple); fill: var(--accent-purple); }
.dc-c1 { stroke: var(--accent-blue); fill: var(--accent-blue); }
.dc-c2 { stroke: var(--accent-emerald); fill: var(--accent-emerald); }
.dc-c3 { stroke: var(--accent-amber); fill: var(--accent-amber); }
.dc-c4 { stroke: #ef4444; fill: #ef4444; }
.dc-c5 { stroke: #06b6d4; fill: #06b6d4; }
.dc-swatch { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.dc-swatch.dc-c0 { background: var(--accent-purple); } .dc-swatch.dc-c1 { background: var(--accent-blue); }
.dc-swatch.dc-c2 { background: var(--accent-emerald); } .dc-swatch.dc-c3 { background: var(--accent-amber); }
.dc-swatch.dc-c4 { background: #ef4444; } .dc-swatch.dc-c5 { background: #06b6d4; }
.demand-table { margin-top: 6px; }
.demand-table tr.is-highlight td { background: var(--accent-purple-dim); }
.demand-note { font-size: 0.76rem; color: var(--text-muted); line-height: 1.55; margin: 10px 0 0; max-width: 90ch; }


/* ── Demand curve: logos on the curve, click-through detail ── */
.demand-chart-head { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.demand-chart-head > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dc-how-btn {
    appearance: none;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
}
.dc-how-btn.is-on, .dc-how-btn:hover { color: var(--accent-purple-text); border-color: rgba(139,92,246,0.45); background: var(--accent-purple-dim); }
.dc-market { stroke-linecap: round; }
.dc-market-area { fill: url(#dc-area-grad); }
.dc-company { stroke-linecap: round; transition: opacity 160ms ease, stroke-width 160ms ease; }
.dc-company.is-sel { stroke-width: 3; opacity: 1; }
.dc-company.is-dim, .dc-cost.is-dim { opacity: 0.18; }
.dc-node { cursor: pointer; transition: opacity 160ms ease; }
.dc-node.is-dim { opacity: 0.35; }
.dc-node-ring { fill: var(--bg-card); stroke: currentColor; stroke-width: 2.5; }
.dc-node.dc-c0 { color: var(--accent-purple); } .dc-node.dc-c1 { color: var(--accent-blue); }
.dc-node.dc-c2 { color: var(--accent-emerald); } .dc-node.dc-c3 { color: var(--accent-amber); }
.dc-node.dc-c4 { color: #ef4444; } .dc-node.dc-c5 { color: #06b6d4; }
.dc-node.is-sel .dc-node-ring { stroke-width: 4; }
.dc-node.is-highlight .dc-node-ring { stroke-width: 3.5; }
.dc-node:hover .dc-node-ring { stroke-width: 4; }
.dc-node-fill { fill: var(--bg-secondary); }
.dc-node-initials { fill: var(--text-primary); font-size: 11px; font-weight: 700; }
.dc-node .dc-point-label { pointer-events: none; }
.dc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dc-chip {
    appearance: none;
    font: inherit;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 6px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
}
.dc-chip img, .dc-chip-initials {
    width: 22px; height: 22px; border-radius: 50%;
    object-fit: contain; background: #fff; padding: 2px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.6rem; font-weight: 700; color: #111;
}
.dc-chip-name { font-size: 0.8rem; font-weight: 600; }
.dc-chip-meta { font-size: 0.7rem; color: var(--text-muted); }
.dc-chip.is-on { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.dc-chip.dc-c0 { color: var(--accent-purple-text); } .dc-chip.dc-c1 { color: var(--blue-text); }
.dc-chip.dc-c2 { color: var(--emerald-text); } .dc-chip.dc-c3 { color: var(--amber-text); }
.dc-chip.dc-c4 { color: var(--red-text); } .dc-chip.dc-c5 { color: #67e8f9; }
.dc-chip .dc-chip-name, .dc-chip .dc-chip-meta { color: var(--text-primary); }
.dc-chip .dc-chip-meta { color: var(--text-muted); }
.dc-detail, .dc-how {
    margin-top: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--ink-03);
    border: 1px solid var(--border-subtle);
}
.dc-detail-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dc-detail-head h4 { margin: 0; font-size: 0.98rem; }
.dc-detail-head p { margin: 2px 0 0; font-size: 0.74rem; }
.dc-detail-head .strategy-drill-link { margin-left: auto; }
.dc-detail-logo {
    width: 40px; height: 40px; border-radius: 50%;
    object-fit: contain; background: #fff; padding: 4px;
    border: 1px solid var(--border-color);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: 700; color: #111;
}
.dc-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-top: 12px; }
.dc-detail-col { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.dc-inputs { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: 0.82rem; }
.dc-inputs dt { color: var(--text-muted); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding-top: 3px; }
.dc-inputs dd { margin: 0; color: var(--text-primary); }
.dc-sectors td, .dc-schedule-table td { font-size: 0.78rem; }
.dc-reasoning { margin: 0; padding-left: 1.2rem; font-size: 0.8rem; color: var(--text-secondary); line-height: 1.6; display: flex; flex-direction: column; gap: 6px; }
.dc-reasoning strong { color: var(--text-primary); }
.dc-how-lede { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.6; margin: 6px 0 10px; }


/* ── Demand as a band: polish + inspect mode ── */
.demand-chart { padding: 16px 18px 14px; }
.dc-controls { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dc-switch {
    display: inline-block; width: 22px; height: 12px; border-radius: 999px;
    background: var(--ink-15); position: relative; vertical-align: middle; margin-right: 4px;
    transition: background 150ms ease;
}
.dc-switch::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; border-radius: 50%;
    background: var(--text-secondary); transition: transform 150ms ease, background 150ms ease;
}
.dc-how-btn.is-on .dc-switch { background: var(--accent-purple); }
.dc-how-btn.is-on .dc-switch::after { transform: translateX(10px); background: #fff; }
.dc-grid { stroke: var(--border-subtle); stroke-dasharray: 2 4; }
.dc-grid--v { opacity: 0.6; }
.dc-axis { stroke: var(--ink-30); stroke-width: 1; }
.dc-tick { fill: var(--text-muted); font-size: 10.5px; letter-spacing: 0.01em; }
.dc-axis-label { fill: var(--text-secondary); font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; }
.dc-band-glow { fill: var(--accent-purple); opacity: 0.18; }
.dc-band { fill: url(#dc-band-grad); stroke: rgba(139,92,246,0.35); stroke-width: 0.8; }
.dc-centre { fill: none; stroke: var(--text-primary); stroke-width: 1; stroke-dasharray: 1 5; stroke-linecap: round; opacity: 0.55; }
.dc-market-label { fill: var(--text-secondary); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.dc-schedule { fill: var(--bg-card); stroke: var(--text-secondary); stroke-width: 1.2; opacity: 0.8; }
.dc-ribbon { stroke-width: 14; stroke-linecap: round; opacity: 0.10; transition: opacity 160ms ease; }
.dc-ribbon.is-sel { opacity: 0.22; }
.dc-ribbon.is-dim { opacity: 0.03; }
.dc-company { stroke-width: 1.4; stroke-dasharray: 2 6; stroke-linecap: round; opacity: 0.75; }
.dc-company.is-sel { stroke-width: 2; stroke-dasharray: none; opacity: 1; }
.dc-halo { pointer-events: none; }
.dc-node { cursor: default; }
.dc-node.is-clickable { cursor: pointer; }
.dc-node-ring { fill: var(--bg-card); stroke: currentColor; stroke-width: 2.4; }
.dc-point-sub { fill: var(--text-secondary); font-size: 10px; letter-spacing: 0.02em; pointer-events: none; }
.dc-node.pos-premium .dc-node-ring { stroke-width: 3.2; }
.dc-node.pos-value .dc-node-ring { stroke-dasharray: 3 2; }
.dc-cost { stroke-width: 1; stroke-dasharray: 4 5; opacity: 0.45; }
.demand-chart:not(.is-inspect) .dc-point-label { font-size: 11.5px; }


/* ── Demand chart, legibility pass: solid band, staircase, gutter labels ── */
.dc-band { fill: url(#dc-band-grad); stroke: rgba(139,92,246,0.55); stroke-width: 1; }
.dc-centre { fill: none; stroke: var(--text-primary); stroke-width: 2; stroke-dasharray: none; opacity: 0.9; stroke-linecap: round; }
.dc-stairs { fill: none; stroke: var(--text-secondary); stroke-width: 1.4; stroke-dasharray: 3 3; opacity: 0.9; stroke-linejoin: round; }
.dc-schedule { fill: var(--bg-card); stroke: var(--text-primary); stroke-width: 1.6; opacity: 1; }
.dc-company { fill: none; stroke-width: 1.8; stroke-dasharray: none; opacity: 0.55; stroke-linecap: round; }
.dc-company.is-sel { stroke-width: 2.6; opacity: 1; }
.dc-company.is-dim { opacity: 0.15; }
.dc-leader { stroke: var(--ink-30); stroke-width: 1; stroke-dasharray: 2 3; }
.dc-node.is-sel .dc-leader { stroke: currentColor; stroke-dasharray: none; }
.dc-gutter-name { fill: var(--text-primary); font-size: 11.5px; font-weight: 600; }
.dc-gutter-meta { fill: var(--text-muted); font-size: 10px; }
.dc-node.is-sel .dc-gutter-name { fill: currentColor; }
.dc-axis-note { fill: var(--text-muted); font-weight: 500; font-style: italic; }
.dc-legend text { fill: var(--text-muted); font-size: 10px; }
.dc-legend-band { fill: var(--accent-purple); opacity: 0.45; }
.dc-ribbon, .dc-halo, .dc-band-glow, .dc-point-sub, .dc-market-label { display: none; }


/* ── Demand band as density: nested layers, evidence-shaded ── */
.dc-band, .dc-legend { display: none; }
.dc-stop--spread  { stop-color: var(--accent-blue); }
.dc-stop--typical { stop-color: #7c6cf2; }
.dc-stop--core    { stop-color: var(--accent-purple); }
.dc-band-layer { stroke: none; }
.dc-band-layer--spread { stroke: rgba(59,130,246,0.30); stroke-width: 0.8; stroke-dasharray: 3 3; }
.dc-observed { stroke: var(--accent-purple); stroke-width: 3; stroke-linecap: round; opacity: 0.85; }
.dc-stub { stroke: var(--ink-40); stroke-width: 1; }
.dc-true { fill: var(--text-primary); }
.dc-gutter-name { font-size: 11.5px; }
.dc-gutter-meta { font-size: 10px; text-anchor: start; }
.dc-legend-row { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 2px; font-size: 0.72rem; color: var(--text-muted); }
.dc-lg { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dc-lg-swatch { display: inline-block; width: 18px; height: 10px; border-radius: 3px; }
.dc-lg-swatch--core    { background: var(--accent-purple); opacity: 0.75; }
.dc-lg-swatch--typical { background: #7c6cf2; opacity: 0.5; }
.dc-lg-swatch--spread  { background: var(--accent-blue); opacity: 0.3; border: 1px dashed rgba(59,130,246,0.6); }
.dc-lg-fade { display: inline-block; width: 26px; height: 10px; border-radius: 3px; background: linear-gradient(90deg, rgba(139,92,246,0.75), rgba(139,92,246,0.08)); }
.dc-lg-stairs { display: inline-block; width: 18px; height: 8px; border-top: 1.4px dashed var(--text-secondary); border-right: 1.4px dashed var(--text-secondary); }
.dc-lg-observed { display: inline-block; width: 18px; height: 3px; border-radius: 2px; background: var(--accent-purple); }


/* ── Inspect: condensed model + inputs table ── */
.dc-inspect { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-subtle); }
.dc-model { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 10px; }
.dc-model > div { display: flex; flex-direction: column; gap: 1px; }
.dc-model dt { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.dc-model dd { margin: 0; font-size: 0.8rem; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.dc-input-table td, .dc-input-table th { padding-top: 6px; padding-bottom: 6px; font-size: 0.76rem; }
.dc-input-table tr.is-sel td { background: var(--accent-purple-dim); }
.kind-chip--company { background: var(--accent-purple-dim); color: var(--accent-purple-text); border-color: rgba(139,92,246,0.35); }
.dc-insights { margin: 10px 0 0; padding-left: 1.1rem; font-size: 0.78rem; color: var(--text-secondary); line-height: 1.55; display: flex; flex-direction: column; gap: 3px; }


/* ── Firm demand (structure-shaped) and average cost curves ── */
.dc-ac { fill: none; stroke-width: 1.5; stroke-dasharray: 1 3; stroke-linecap: round; opacity: 0.6; }
.dc-ac.is-sel { opacity: 1; stroke-width: 2; }
.dc-ac.is-dim { opacity: 0.12; }
.dc-lg-firm { display: inline-block; width: 18px; height: 0; border-top: 2px solid var(--accent-purple); }
.dc-lg-ac { display: inline-block; width: 18px; height: 0; border-top: 2px dotted var(--accent-purple); }