:root {
  color-scheme: light;

  --color-bg: #f6f7fb;
  --color-bg-subtle: #eef2f7;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-muted: #f8fafc;
  --color-surface-tint: #f1f5f9;
  --color-surface-inverse: #111827;

  --color-text: #111827;
  --color-text-muted: #475569;
  --color-text-subtle: #64748b;
  --color-text-inverse: #f9fafb;

  --color-border: #d8dee9;
  --color-border-subtle: #e5eaf1;
  --color-border-strong: #cbd5e1;

  --color-brand: #4f46e5;
  --color-brand-hover: #4338ca;
  --color-brand-soft: #eef2ff;
  --color-brand-border: #c7d2fe;

  --color-accent: #0891b2;
  --color-accent-soft: #ecfeff;
  --color-accent-border: #a5f3fc;

  --color-success: #059669;
  --color-success-soft: #ecfdf5;
  --color-warning: #d97706;
  --color-warning-soft: #fffbeb;
  --color-danger: #dc2626;
  --color-danger-soft: #fef2f2;
  --color-info: #2563eb;
  --color-info-soft: #eff6ff;

  --color-observed: #2563eb;
  --color-observed-soft: #eff6ff;
  --color-observed-border: #bfdbfe;
  --color-derived: #0f766e;
  --color-derived-soft: #f0fdfa;
  --color-derived-border: #99f6e4;
  --color-estimated: #b45309;
  --color-estimated-soft: #fffbeb;
  --color-estimated-border: #fde68a;

  --color-stage-bunk: #64748b;
  --color-stage-bunk-soft: #f1f5f9;
  --color-stage-bunk-border: #cbd5e1;
  --color-stage-bunk-text: #334155;
  --color-stage-showcase: #7c3aed;
  --color-stage-showcase-soft: #f5f3ff;
  --color-stage-showcase-border: #ddd6fe;
  --color-stage-showcase-text: #5b21b6;
  --color-stage-finals: #b7791f;
  --color-stage-finals-soft: #fffbeb;
  --color-stage-finals-border: #fde68a;
  --color-stage-finals-text: #92400e;
  --color-stage-all: #475569;
  --color-stage-all-soft: #f8fafc;
  --color-stage-all-border: #e2e8f0;
  --color-stage-all-text: #334155;

  --ds-radius-xs: 6px;
  --ds-radius-sm: 8px;
  --ds-radius-md: 10px;
  --ds-radius-lg: 14px;
  --ds-radius-pill: 999px;
  --ds-shadow-sm: 0 1px 2px rgb(15 23 42 / 0.06);
  --ds-shadow-md: 0 10px 28px rgb(15 23 42 / 0.08);
  --ds-shadow-lg: 0 18px 44px rgb(15 23 42 / 0.12);

  --ds-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ds-control-height: 40px;

  --bg: var(--color-bg);
  --surface: var(--color-surface);
  --surface-2: var(--color-surface-muted);
  --panel: var(--color-surface);
  --panel-strong: var(--color-surface-raised);
  --line: var(--color-border);
  --line-strong: var(--color-border-strong);
  --text: var(--color-text);
  --soft: var(--color-text-muted);
  --muted: var(--color-text-subtle);
  --teal: var(--color-accent);
  --cyan: var(--color-accent);
  --blue: var(--color-info);
  --amber: var(--color-warning);
  --coral: var(--color-danger);
  --red: var(--color-danger);
  --green: var(--color-success);
  --purple: var(--color-brand);
  --shadow: var(--ds-shadow-md);
  --radius: var(--ds-radius-md);

  --page-header-rule: var(--color-border-subtle);
  --page-nav-bg: rgb(255 255 255 / 0.94);
  --page-nav-border: var(--color-border);
  --page-nav-active: var(--color-brand-soft);
  --page-nav-accent: var(--color-brand);
  --shell-control-radius: var(--ds-radius-sm);

  --color-surface-base: var(--color-bg);
  --color-accent-primary: var(--color-accent);
  --color-accent-secondary: var(--color-brand);
  --color-positive: var(--color-success);
  --color-negative: var(--color-warning);
  --color-text-primary: var(--color-text);
  --color-text-secondary: var(--color-text-muted);
}

.stage-badge {
  --stage-accent: var(--color-stage-all);
  --stage-soft: var(--color-stage-all-soft);
  --stage-border: var(--color-stage-all-border);
  --stage-text: var(--color-stage-all-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  min-height: 24px;
  border: 1px solid var(--stage-border) !important;
  border-radius: var(--ds-radius-pill);
  padding: 3px 9px;
  color: var(--stage-text) !important;
  background: var(--stage-soft) !important;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.stage-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--stage-accent);
}

.stage-badge[data-stage="Bunk"] {
  --stage-accent: var(--color-stage-bunk);
  --stage-soft: var(--color-stage-bunk-soft);
  --stage-border: var(--color-stage-bunk-border);
  --stage-text: var(--color-stage-bunk-text);
}

.stage-badge[data-stage="Showcase"] {
  --stage-accent: var(--color-stage-showcase);
  --stage-soft: var(--color-stage-showcase-soft);
  --stage-border: var(--color-stage-showcase-border);
  --stage-text: var(--color-stage-showcase-text);
}

.stage-badge[data-stage="Finals"] {
  --stage-accent: var(--color-stage-finals);
  --stage-soft: var(--color-stage-finals-soft);
  --stage-border: var(--color-stage-finals-border);
  --stage-text: var(--color-stage-finals-text);
}

.stage-pair-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.stage-section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.stage-section-header h2,
.stage-section-header h3,
.stage-section-header p {
  margin: 0;
}

.stage-context-rail,
[data-stage-context] {
  --stage-accent: var(--color-stage-all);
  --stage-soft: var(--color-stage-all-soft);
  --stage-border: var(--color-stage-all-border);
  --stage-text: var(--color-stage-all-text);
}

.stage-context-rail[data-stage-context="Bunk"],
[data-stage-context="Bunk"] {
  --stage-accent: var(--color-stage-bunk);
  --stage-soft: var(--color-stage-bunk-soft);
  --stage-border: var(--color-stage-bunk-border);
  --stage-text: var(--color-stage-bunk-text);
}

.stage-context-rail[data-stage-context="Showcase"],
[data-stage-context="Showcase"] {
  --stage-accent: var(--color-stage-showcase);
  --stage-soft: var(--color-stage-showcase-soft);
  --stage-border: var(--color-stage-showcase-border);
  --stage-text: var(--color-stage-showcase-text);
}

.stage-context-rail[data-stage-context="Finals"],
[data-stage-context="Finals"] {
  --stage-accent: var(--color-stage-finals);
  --stage-soft: var(--color-stage-finals-soft);
  --stage-border: var(--color-stage-finals-border);
  --stage-text: var(--color-stage-finals-text);
}

.stage-context-rail {
  border-left: 4px solid var(--stage-accent) !important;
}

.stage-context-bar {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--stage-border) !important;
  border-left: 4px solid var(--stage-accent) !important;
  border-radius: var(--ds-radius-md);
  padding: 10px 12px;
  color: var(--color-text-muted);
  background: color-mix(in srgb, var(--stage-soft) 54%, #ffffff) !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.stage-context-bar p {
  margin: 0;
}

.stage-timeline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.stage-timeline .stage-arrow {
  color: var(--color-text-subtle);
  font-weight: 850;
}

.song-hero-stage .stage-badge,
.summary-card > .stage-badge,
.summary-visual-card > .stage-badge,
.impact-metric-card > .stage-badge,
.official-result-card > .stage-badge,
.fact-summary-card > .stage-badge,
.journey-phase .stage-badge,
.stage-result-stage .stage-badge,
.song-mobile-badges .stage-badge,
.song-mobile-finding-card > .stage-badge,
.song-mobile-accordion-item summary .stage-badge,
.song-mobile-near-list .stage-badge {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  min-height: 24px !important;
  color: var(--stage-text) !important;
  background: var(--stage-soft) !important;
  border-color: var(--stage-border) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.song-hero-stage[data-stage-context],
.stage-position-card[data-stage-context],
.stage-result-row[data-stage-context],
.journey-row[data-stage-context],
.song-mobile-stage-list a[data-stage-context] {
  border-left: 4px solid var(--stage-accent) !important;
}

.stage-section-header .stage-timeline {
  margin-right: 2px;
}

.stage-context-bar + .vote-stage-switcher,
.impact-metrics-panel .stage-context-bar {
  margin-top: 12px;
}

.estimated-warning .stage-badge,
.estimated-warning .data-class-badge {
  flex: 0 0 auto;
}

.song-mobile-accordion-item > summary {
  display: flex;
  align-items: center;
  gap: 8px;
}

html {
  background: var(--color-bg) !important;
}

body,
.report-body,
.graph-body,
.song-body,
.diagnosis-search-body {
  min-height: 100vh;
  color: var(--color-text) !important;
  background:
    radial-gradient(circle at 20% 0%, rgb(79 70 229 / 0.08), transparent 28rem),
    radial-gradient(circle at 88% 6%, rgb(8 145 178 / 0.08), transparent 30rem),
    linear-gradient(180deg, #fbfcff 0%, var(--color-bg) 38%, #f2f5fa 100%) !important;
  font-family: var(--ds-font-sans) !important;
  letter-spacing: 0 !important;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid rgb(79 70 229 / 0.24) !important;
  outline-offset: 2px;
}

.app-shell,
.song-shell {
  background: transparent !important;
  background-image: none !important;
}

.app-shell > .topbar,
.song-shell > .topbar {
  border-bottom-color: var(--color-border-subtle) !important;
  color: var(--color-text) !important;
}

.app-shell > .topbar h1,
.song-shell > .topbar h1 {
  color: var(--color-text) !important;
  letter-spacing: 0 !important;
}

.eyebrow,
.report-section .eyebrow,
.selected-card-kicker,
.panel-title,
.filter-group-title,
.article-category,
.profile-detail-kicker {
  color: var(--color-brand) !important;
}

.app-shell > .site-nav,
.song-shell > .site-nav {
  border-color: var(--color-border) !important;
  background: rgb(255 255 255 / 0.94) !important;
  box-shadow: var(--ds-shadow-md) !important;
}

.site-nav-label,
.top-nav-label,
.global-nav-label {
  color: var(--color-brand) !important;
}

.site-nav-link,
.top-nav a,
.global-page-nav a {
  border-color: var(--color-border-subtle) !important;
  color: var(--color-text-muted) !important;
  background: var(--color-surface) !important;
  box-shadow: none !important;
}

.site-nav-link:hover,
.top-nav a:hover,
.global-page-nav a:hover {
  border-color: var(--color-brand-border) !important;
  color: var(--color-brand-hover) !important;
  background: var(--color-brand-soft) !important;
  transform: none !important;
}

.site-nav-link.active,
.top-nav a.active,
.global-page-nav a.active {
  border-color: var(--color-brand-border) !important;
  color: var(--color-brand-hover) !important;
  background: var(--color-brand-soft) !important;
  box-shadow: inset 0 0 0 1px rgb(79 70 229 / 0.08) !important;
}

.shell-quick-search {
  border-color: var(--color-border) !important;
  background: var(--color-surface-muted) !important;
}

.shell-quick-search input,
.language-switcher select,
select,
input,
textarea {
  min-height: var(--ds-control-height);
  border: 1px solid var(--color-border) !important;
  border-radius: var(--ds-radius-sm) !important;
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
  box-shadow: none !important;
}

.shell-quick-search input::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--color-text-subtle) !important;
}

select:hover,
input:hover,
textarea:hover,
.shell-quick-search:hover {
  border-color: var(--color-brand-border) !important;
}

select:focus,
input:focus,
textarea:focus {
  border-color: var(--color-brand) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgb(79 70 229 / 0.16) !important;
}

.topbar-tools,
.export-links,
.language-switcher {
  color: var(--color-text-muted) !important;
}

.language-switcher {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--ds-radius-sm) !important;
  padding: 4px !important;
  background: var(--color-surface-muted) !important;
  box-shadow: none !important;
}

.export-links a,
.shell-quick-search button,
.icon-button,
.table-tool-button,
.button-link,
.report-link,
.action-link,
.guide-method-link,
.diagnosis-search-form button,
.diagnosis-card-actions a,
.diagnosis-secondary-link,
.overview-search-form button,
.overview-search-actions .button-link,
.overview-closing-links a,
.overview-route-grid a,
.guide-route-links a,
.report-deep-link-grid a,
.route-card-grid a,
.detail-link,
.ux-primary-route a,
.mobile-section-toggle,
.stage-result-action,
.vote-stage-tab,
.table-toggle {
  min-height: var(--ds-control-height);
  border: 1px solid var(--color-border) !important;
  border-radius: var(--ds-radius-sm) !important;
  color: var(--color-text-muted) !important;
  background: var(--color-surface) !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transform: none !important;
}

.shell-quick-search button,
.button-link.primary,
.overview-search-form button,
.overview-search-actions .button-link.primary,
.diagnosis-search-form button,
.search-result-actions .primary,
.mobile-actions .primary,
.inspector-main-actions .primary,
.route-card-grid a.primary,
.report-deep-link-grid a.primary,
.ux-primary-route a {
  border-color: var(--color-brand) !important;
  color: #ffffff !important;
  background: var(--color-brand) !important;
}

.button-link.secondary,
.search-result-actions .secondary,
.mobile-actions .secondary,
.diagnosis-card-actions a.secondary,
.diagnosis-secondary-link,
.report-link,
.action-link,
.guide-method-link {
  border-color: var(--color-brand-border) !important;
  color: var(--color-brand-hover) !important;
  background: var(--color-brand-soft) !important;
}

button:hover,
.button-link:hover,
.table-tool-button:hover,
.report-link:hover,
.action-link:hover,
.guide-method-link:hover,
.diagnosis-card-actions a:hover,
.diagnosis-secondary-link:hover,
.overview-route-grid a:hover,
.guide-route-links a:hover,
.route-card-grid a:hover,
.mobile-section-toggle:hover,
.stage-result-action:hover,
.preset-card:hover,
.mode-tab:hover,
.segment:hover,
.ruler-button:hover,
.detail-link:hover,
.ux-primary-route a:hover,
.vote-stage-tab:hover {
  border-color: var(--color-brand) !important;
  color: var(--color-brand-hover) !important;
  background: var(--color-brand-soft) !important;
  box-shadow: none !important;
  transform: none !important;
}

.button-link.primary:hover,
.overview-search-form button:hover,
.diagnosis-search-form button:hover,
.shell-quick-search button:hover {
  color: #ffffff !important;
  background: var(--color-brand-hover) !important;
}

.overview-content-panel,
.overview-secondary-detail,
.overview-closing,
.overview-search-card,
.overview-entry-grid a,
.overview-stage-copy-grid article,
.overview-stage-environment-grid,
.overview-stage-environment-grid article,
.overview-value-kind-grid article,
.overview-card,
.overview-summary,
.result-brief,
.ux-primary-route,
.panel,
.chart-panel,
.song-panel,
.table-panel,
.ranking-workbench-head,
.ranking-search-panel,
.ranking-controls,
.screening-controls,
.ranking-contract,
.ranking-contract > *,
.ranking-results-workbench,
.ranking-table-panel,
.compare-panel,
.next-action-panel,
.ranking-deep-dive,
.deep-dive-panel,
.analysis-lens-panel,
.strategy-panel,
.diagnostic-panel,
.insight-panel,
.positioning-panel,
.distribution-panel,
.ranking-visual-panel,
.ranking-read-guide,
.preset-deck,
.ranking-preset,
.preset-card,
.advanced-preset-drawer,
.advanced-preset-drawer summary,
.ranking-stat-card,
.ranking-kpi-card,
.ranking-display-summary,
.ranking-display-summary dl > div,
.contract-state-block,
.state-filter-chip,
.ranking-stat,
.ranking-visual-state,
.distribution-card,
.visual-card,
.profile-mix-card,
.lens-card,
.strategy-card,
.diagnostic-card,
.guide-hero,
.guide-start-card,
.guide-section,
.guide-figure,
.guide-lens-grid article,
.guide-summary,
.guide-summary article,
.guide-points article,
.guide-workbench,
.guide-focus-panel,
.guide-axis-panel,
.guide-axis-card,
.guide-type-card,
.guide-filter-tab,
.misread-table,
.mode-tab,
.mode-description,
.mode-axis-group,
.basis-control-group,
.ruler-switch,
.segment,
.selected-metric,
.position-pill,
.inspector-block,
.selected-ruler,
.selected-detail-drawer,
.relative-metric,
.selected-note,
.metric-card,
.shape-bars,
.journey-block,
.nearby-block,
.shape-reading,
.report-hero,
.report-kpi,
.featured-card,
.support-card,
.structure-card,
.compact-analysis-card,
.feature-list-card,
.premise-grid article,
.data-notice-panel,
.report-caution,
.methodology-hero,
.methodology-panel,
.methodology-card,
.methodology-principle-card,
.methodology-list-card,
.diagnosis-search-hero,
.diagnosis-search-results-section,
.diagnosis-route-panel,
.diagnosis-search-form,
.diagnosis-result-card,
.diagnosis-route-grid a,
.song-hero-panel,
.song-hero-metric,
.song-hero-stage,
.summary-card,
.summary-visual-card,
.impact-metric-card,
.diagnosis-panel,
.diagnosis-primary,
.diagnosis-side,
.next-move-panel,
.factor-card,
.diagnosis-identity-card,
.diagnosis-guide-card,
.diagnosis-copy-card,
.evidence-panel,
.position-map-panel,
.position-lens-panel,
.failure-panel,
.fact-summary-card,
.fact-table-card,
.transition-panel,
.similar-panel,
.stage-context-panel,
.benchmark-panel,
.market-board-panel {
  border-color: var(--color-border-subtle) !important;
  border-radius: var(--ds-radius-md) !important;
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
  background-image: none !important;
  box-shadow: var(--ds-shadow-sm) !important;
}

.overview-content-panel,
.ranking-workbench-head,
.ranking-search-panel,
.ranking-controls,
.screening-controls,
.ranking-contract,
.ranking-results-workbench,
.ranking-deep-dive,
.ranking-read-guide,
.guide-hero,
.guide-section,
.report-hero,
.methodology-hero,
.methodology-panel,
.diagnosis-search-hero,
.diagnosis-search-results-section,
.diagnosis-route-panel,
.song-hero-panel,
.panel.wide {
  box-shadow: var(--ds-shadow-md) !important;
}

.rankings-main > :is(
  .ranking-workbench-head,
  .ranking-search-panel,
  .ranking-controls,
  .screening-controls,
  .ranking-contract,
  .ranking-results-workbench,
  .compare-panel,
  .next-action-panel,
  .ranking-deep-dive,
  .ranking-read-guide
),
.ranking-results-workbench > *,
.deep-dive-panel > * {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.overview-cards,
.guide-summary,
.guide-points,
.guide-lens-grid,
.methodology-principle-grid,
.methodology-grid,
.methodology-list-grid,
.report-kpis,
.featured-report-grid,
.diagnosis-result-grid,
.deep-dive-cards,
.summary-card-grid,
.impact-metric-grid,
.factor-grid {
  gap: 14px !important;
}

.overview-section-head h2,
.panel-head h2,
.guide-section-head h2,
.report-section-head h2,
.methodology-section-head h2,
.methodology-panel h2,
.diagnosis-section-head h2,
.ranking-workbench-head h2,
.ranking-deep-dive h2,
.song-hero-copy h2,
.diagnosis-title {
  color: var(--color-text) !important;
  font-size: clamp(1.28rem, 2vw, 1.85rem) !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
}

.report-hero h2,
.guide-hero h2,
.methodology-hero h2,
.diagnosis-search-copy h2 {
  color: var(--color-text) !important;
  font-size: clamp(2rem, 4vw, 3.1rem) !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
}

p,
li,
small,
.muted,
.panel-note,
.panel-head p,
.overview-section-head p,
.overview-content-note,
.overview-search-card p,
.overview-entry-grid p,
.overview-route-grid p,
.guide-hero p:not(.eyebrow),
.guide-section-head p,
.guide-figure-note,
.guide-lens-grid p,
.guide-axis-card p,
.guide-type-head p,
.report-hero-copy > p:not(.eyebrow),
.report-source-note,
.report-section-head p:not(.eyebrow),
.report-kpi small,
.report-note,
.methodology-hero p:not(.eyebrow),
.methodology-section-head p:not(.eyebrow),
.methodology-card p,
.methodology-panel p,
.methodology-list-card li,
.diagnosis-search-copy p:not(.eyebrow),
.diagnosis-section-head p:not(.eyebrow),
.diagnosis-card-head p,
.diagnosis-search-hint,
.ranking-workbench-head p:not(.eyebrow),
.ranking-panel-note,
.search-state,
.table-status,
.song-hero-artist,
.song-hero-stage small,
.song-hero-metric small,
.summary-card p,
.impact-metric-card > p,
.diagnosis-note,
.factor-card p,
.next-move-panel p {
  color: var(--color-text-muted) !important;
}

strong,
b,
h1,
h2,
h3,
h4,
.overview-card strong,
.profile-value,
.metric-card-value,
.kpi-value,
.report-kpi strong,
.featured-card h3,
.compact-card-head strong,
.methodology-card h3,
.methodology-panel h3,
.methodology-panel strong,
.diagnosis-card-head h3,
.diagnosis-card-metrics strong,
.selected-title,
.song-hero-metric strong,
.song-hero-stage strong,
.summary-card strong,
.impact-metric-card > strong,
.factor-card strong,
.next-move-panel strong,
.relative-metric strong,
.metric-value,
.inspector-section-head span,
.selected-detail-drawer > summary,
.vote-count-label {
  color: var(--color-text) !important;
}

.relative-metric span,
.metric-label,
.inspector-section-head small,
.section-note,
.vote-rank-label,
.selected-artist {
  color: var(--color-text-muted) !important;
}

.tag,
.metric-chip,
.value-badge,
.value-kind-badge,
.evidence-badge,
.rank-badge,
.profile-chip,
.profile-strength,
.graph-state-chip,
.ranking-state-chip,
.table-stage-tab,
.stage-button,
.type-button,
.ruler-button,
.mode-tab,
.segment,
.stage-result-stage span,
.stage-result-rank span,
.diagnosis-card-tags span,
.diagnosis-card-metrics span,
.article-category,
.stat-pill,
.current-vote-stage,
.guide-filter-tab,
.journey-chip {
  border: 1px solid var(--color-border-subtle) !important;
  border-radius: var(--ds-radius-pill) !important;
  color: var(--color-text-muted) !important;
  background: var(--color-surface-muted) !important;
  box-shadow: none !important;
}

.tag.accent,
.preset-card.active,
.stage-button.active,
.type-button.active,
.mode-tab.active,
.segment.active,
.ruler-button.active,
.table-stage-tab.active,
.guide-filter-tab.active,
.journey-chip.active,
.vote-stage-tab.active,
.win-profile-card.active {
  border-color: var(--color-brand-border) !important;
  color: var(--color-brand-hover) !important;
  background: var(--color-brand-soft) !important;
}

.tag.warn,
.summary-card.risk,
.impact-metric-card.warn,
.impact-metric-card.risk,
.factor-card.warn,
.factor-card.risk,
.diagnosis-score.risk,
.fact-summary-card.risk {
  border-color: #fde68a !important;
  background: var(--color-warning-soft) !important;
}

.summary-card.good,
.impact-metric-card.good,
.factor-card.good,
.diagnosis-score.good,
.diagnosis-score.win,
.fact-summary-card.good {
  border-color: #bbf7d0 !important;
  background: var(--color-success-soft) !important;
}

.value-badge.observed,
.value-kind-badge.observed,
.evidence-badge.observed,
.overview-value-kind-grid article.observed span,
.methodology-card.observed span {
  border-color: #bfdbfe !important;
  color: var(--color-observed) !important;
  background: var(--color-observed-soft) !important;
}

.value-badge.derived,
.value-kind-badge.derived,
.evidence-badge.derived,
.overview-value-kind-grid article.derived span,
.methodology-card.derived span {
  border-color: #99f6e4 !important;
  color: var(--color-derived) !important;
  background: var(--color-derived-soft) !important;
}

.value-badge.estimated,
.value-kind-badge.estimated,
.evidence-badge.estimated,
.overview-value-kind-grid article.estimated span,
.methodology-card.estimated span,
.estimated-warning {
  border-color: #fde68a !important;
  color: var(--color-estimated) !important;
  background: var(--color-estimated-soft) !important;
}

.status-dot.advanced,
.stage-step.done .stage-dot,
.stage-result-row.done,
.song-hero-stage.active {
  border-color: #bbf7d0 !important;
  background: var(--color-success-soft) !important;
}

.stage-result-row.missing,
.song-hero-stage.missing,
.stage-position-card.missing {
  color: var(--color-text-subtle) !important;
  background: var(--color-surface-muted) !important;
}

.stage-quality-track,
.stage-overview-track,
.profile-density-track,
.density-track,
.fact-meter,
.stage-position-meter,
.vote-rank-track,
.shape-track,
.ranking-bar-track,
.distribution-track,
.visual-bar-track,
.score-stack-bar,
.vote-bar-track {
  background: var(--color-bg-subtle) !important;
}

.stage-quality-track i,
.stage-overview-track div,
.profile-density-track div,
.density-fill,
.fact-meter i,
.stage-position-meter i,
.vote-rank-fill,
.shape-fill,
.ranking-bar-fill,
.visual-bar-fill,
.vote-bar-fill {
  background: var(--color-accent) !important;
}

.profile-density.low .profile-density-track div,
.vote-mix-values .low,
.stage-percentile-row.risk .stage-position-meter i,
.fact-metric-row.risk .fact-meter i {
  background: var(--color-warning) !important;
}

table,
.ranking-table table,
.song-table,
.mini-table,
.compact-table,
.methodology-table,
.vote-table,
.required-table,
.benchmark-table,
.model-metric-table,
.misread-table {
  border-color: var(--color-border-subtle) !important;
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
}

th,
td,
.song-table th,
.song-table td,
.ranking-table th,
.ranking-table td,
.mini-table th,
.mini-table td,
.methodology-table strong,
.methodology-table span,
.misread-table strong,
.misread-table span,
.vote-table-rows > div {
  border-color: var(--color-border-subtle) !important;
  color: var(--color-text-muted) !important;
  background: var(--color-surface) !important;
}

thead th,
.ranking-table th,
.song-table th,
.mini-table th,
.methodology-table > div:first-child,
.misread-table [role="row"]:first-child {
  color: var(--color-text) !important;
  background: var(--color-surface-muted) !important;
}

tbody tr:hover,
.ranking-table tr:hover,
.song-table tbody tr:hover,
.song-table tbody tr.selected {
  background: var(--color-brand-soft) !important;
}

.floating-table-header {
  border-color: var(--color-border-subtle) !important;
  color: var(--color-text) !important;
  background: rgb(255 255 255 / 0.96) !important;
  box-shadow: var(--ds-shadow-md) !important;
}

.graph-command-bar,
.graph-controls,
.graph-next-panel,
.graph-state-current,
.graph-state-active,
.side-panel,
.selected-card,
.filter-detail-block {
  border-color: var(--color-border-subtle) !important;
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
  box-shadow: var(--ds-shadow-sm) !important;
}

.graph-workbench {
  border-color: var(--color-border-subtle) !important;
  background: var(--color-surface) !important;
  box-shadow: var(--ds-shadow-md) !important;
}

.map-panel {
  color: var(--color-text-inverse) !important;
  background:
    radial-gradient(circle at 46% 45%, rgb(45 212 191 / 0.12), transparent 25rem),
    #08121a !important;
}

.map-panel .map-head,
.map-panel .map-guide,
.map-panel .legend,
.map-panel .graph-tooltip {
  color: var(--color-text-inverse) !important;
}

.map-panel .stat-pill,
.map-panel .legend-item,
.map-panel .map-guide,
.map-panel .graph-tooltip {
  border-color: rgb(226 232 240 / 0.22) !important;
  color: #e2e8f0 !important;
  background: rgb(8 13 18 / 0.82) !important;
}

#graphCanvas:focus-visible {
  box-shadow: inset 0 0 0 3px rgb(79 70 229 / 0.54) !important;
}

.graph-controls input[type="range"] {
  accent-color: var(--color-brand) !important;
}

.diagnosis-search-form,
.overview-search-form.primary,
.ranking-primary-search,
.map-search-control {
  border-color: var(--color-brand-border) !important;
  background: var(--color-brand-soft) !important;
}

.diagnosis-search-form label,
.overview-search-form label,
.ranking-primary-search span,
.map-search-control span,
label span {
  color: var(--color-text-muted) !important;
}

.diagnosis-route-grid a,
.overview-entry-grid a,
.overview-route-grid a,
.guide-route-links a,
.route-card-grid a,
.diagnosis-guide-list a,
.similar-panel .similar-row {
  border-color: var(--color-border-subtle) !important;
  background: var(--color-surface-muted) !important;
}

.report-caution,
.data-notice-panel,
.estimated-warning,
.overview-content-note,
.guide-figure-note {
  border-left: 4px solid var(--color-accent) !important;
}

.profile-card,
.profile-example,
.win-profile-card,
.win-profile-detail,
.methodology-table > div:first-child strong,
.methodology-table > div:first-child span {
  color: var(--color-text) !important;
}

.win-profile-card.empty,
.disabled,
[aria-disabled="true"] {
  opacity: 0.62;
}

@media (max-width: 767px) {
  .app-shell,
  .song-shell {
    padding-inline: 14px !important;
  }

  .app-shell > .topbar,
  .song-shell > .topbar {
    min-height: auto !important;
  }

  .site-nav-link {
    min-width: 74px !important;
  }

  .report-hero,
  .guide-hero,
  .methodology-hero,
  .diagnosis-search-hero,
  .song-hero-panel,
  .overview-content-panel {
    padding: 18px !important;
  }

  .report-hero h2,
  .guide-hero h2,
  .methodology-hero h2,
  .diagnosis-search-copy h2 {
    font-size: clamp(1.65rem, 9vw, 2.25rem) !important;
  }
}

/* Residual cleanup for deeper generated panels that predate the shared system. */
.overview-funnel-figure,
.overview-funnel-row,
.overview-stage-environment-grid article,
.overview-stage-stat-grid article,
.structure-node,
.column-controls,
.advanced-operation-panel,
.contract-chip,
.scroll-context-bar,
.scroll-context-bar span,
.type-explainer,
.map-insight-deck,
.map-insight-deck > summary,
.insight-route-card,
.insight-route-song,
.filter-drawer > summary,
.selected-card b,
.graph-state-current b,
.graph-state-active b,
.report-action,
.guide-checklist article,
.quadrant-frame,
.axis-y,
.axis-x,
.denominator-row,
.methodology-principle-card > span,
.methodology-link-row a,
.data-footer,
.data-footer a,
.report-tabs,
.report-tabs a,
.official-result-card {
  border-color: var(--color-border-subtle) !important;
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
  background-image: none !important;
  box-shadow: var(--ds-shadow-sm) !important;
}

.scroll-context-bar,
.report-tabs {
  border-radius: var(--ds-radius-md) !important;
  background: rgb(255 255 255 / 0.96) !important;
  box-shadow: var(--ds-shadow-md) !important;
}

.report-tabs::before {
  border-color: var(--color-brand-border) !important;
  color: var(--color-brand-hover) !important;
  background: var(--color-brand-soft) !important;
  box-shadow: none !important;
}

.report-tabs a,
.data-footer a {
  border-radius: var(--ds-radius-sm) !important;
  color: var(--color-text-muted) !important;
  background: var(--color-surface-muted) !important;
}

.report-tabs a:hover,
.report-tabs a.active,
.report-action:hover,
.methodology-link-row a:hover,
.data-footer a:hover,
.insight-route-song:hover {
  border-color: var(--color-brand-border) !important;
  color: var(--color-brand-hover) !important;
  background: var(--color-brand-soft) !important;
  box-shadow: none !important;
  transform: none !important;
}

.report-tabs a.active::after {
  background: var(--color-brand) !important;
}

.report-action.primary,
.methodology-link-row a:first-child {
  border-color: var(--color-brand) !important;
  color: #ffffff !important;
  background: var(--color-brand) !important;
}

.methodology-principle-card > span {
  display: inline-grid !important;
  place-items: center !important;
  border-color: var(--color-brand-border) !important;
  border-radius: var(--ds-radius-pill) !important;
  color: var(--color-brand-hover) !important;
  background: var(--color-brand-soft) !important;
}

.overview-funnel-row.finals,
.structure-node.finals {
  border-color: #fde68a !important;
  background: var(--color-stage-finals-soft) !important;
}

.overview-funnel-row.showcase,
.structure-node.showcase {
  border-color: #ddd6fe !important;
  background: var(--color-stage-showcase-soft) !important;
}

.overview-funnel-row.bunk,
.structure-node.bunk {
  border-color: var(--color-border-subtle) !important;
  background: var(--color-stage-bunk-soft) !important;
}

.overview-funnel-figure span,
.overview-funnel-figure small,
.guide-checklist article span,
.denominator-row span,
.data-footer p,
.data-footer small {
  color: var(--color-text-muted) !important;
}

.guide-figure .axis-y,
.guide-figure .axis-x {
  border-radius: var(--ds-radius-pill) !important;
  color: var(--color-text-muted) !important;
}

/* Second-pass cleanup for legacy visualization widgets still using dark shells. */
.overview-stat-grid article,
.overview-lens-grid article,
.overview-vote-points span,
.overview-driver-summary .driver-row,
.stage-flow article,
.value-kind-grid article,
.voter-dots,
.cutoff-axis span,
.type-position-grid,
.type-node,
.status-chip,
.phase-chip,
.official-score-composition,
.vote-stage-switcher,
.vote-stage-tab,
.vote-legend-item,
.vote-bars,
.mobile-score-composition .composition-card {
  border-color: var(--color-border-subtle) !important;
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
  background-image: none !important;
  box-shadow: var(--ds-shadow-sm) !important;
}

.overview-vote-points span.top,
.overview-rank-band-grid article.top,
.type-node.top-wide,
.type-node.top-narrow {
  border-color: var(--color-derived) !important;
  color: var(--color-derived) !important;
  background: var(--color-derived-soft) !important;
}

.overview-vote-points span.mid,
.overview-rank-band-grid article.mid {
  border-color: var(--color-info) !important;
  color: var(--color-info) !important;
  background: var(--color-info-soft) !important;
}

.overview-vote-points span.low,
.overview-rank-band-grid article.low {
  border-color: var(--color-warning) !important;
  color: var(--color-warning) !important;
  background: var(--color-warning-soft) !important;
}

.type-node.split,
.type-node.stable,
.type-node.low-wide,
.type-node.low-narrow {
  border-color: var(--color-warning) !important;
  color: var(--color-warning) !important;
  background: var(--color-warning-soft) !important;
}

.overview-stat-grid span,
.overview-stat-grid small,
.overview-lens-grid span,
.overview-lens-grid p,
.overview-driver-summary .driver-head-row,
.overview-driver-summary .driver-row span,
.stage-flow p,
.value-kind-grid p,
.value-kind-grid span,
.cutoff-labels,
.vote-stage-switcher-head small,
.vote-stage-tab span,
.vote-stage-tab small,
.vote-legend-item,
.official-score-composition > div:first-child {
  color: var(--color-text-muted) !important;
}

.overview-stat-grid strong,
.overview-lens-grid strong,
.overview-driver-summary .driver-row strong,
.stage-flow strong,
.value-kind-grid strong,
.vote-stage-switcher-head span,
.vote-stage-tab strong,
.official-score-composition strong {
  color: var(--color-text) !important;
}

.overview-driver-summary .driver-gap-track,
.official-score-stack,
.vote-bar-track,
.voter-dots .muted {
  border-color: var(--color-border-subtle) !important;
  background: var(--color-surface-tint) !important;
}

.voter-dots i {
  background: var(--color-accent) !important;
}

.cutoff-axis::before {
  background:
    linear-gradient(90deg, rgb(220 38 38 / 0.28), rgb(203 213 225 / 0.7) 50%, rgb(5 150 105 / 0.32)) !important;
}

.cutoff-axis .line {
  border-color: var(--color-border-strong) !important;
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
}

.cutoff-axis .negative {
  color: var(--color-danger) !important;
  background: var(--color-danger-soft) !important;
}

.cutoff-axis .positive {
  color: var(--color-success) !important;
  background: var(--color-success-soft) !important;
}

.type-position-grid {
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), var(--color-border-subtle) 50%, transparent calc(50% + 1px)),
    linear-gradient(0deg, transparent calc(50% - 1px), var(--color-border-subtle) 50%, transparent calc(50% + 1px)),
    var(--color-surface) !important;
}

.phase-chip {
  color: var(--color-text-muted) !important;
  background: var(--color-surface-muted) !important;
}

.status-chip.advanced,
.status-chip.finalist {
  border-color: var(--color-success) !important;
  color: var(--color-success) !important;
  background: var(--color-success-soft) !important;
}

.status-chip.eliminated {
  border-color: var(--color-danger) !important;
  color: var(--color-danger) !important;
  background: var(--color-danger-soft) !important;
}

.song-shell .report-tabs {
  border-color: var(--color-border-subtle) !important;
  background: rgb(255 255 255 / 0.96) !important;
  box-shadow: var(--ds-shadow-md) !important;
}

.song-shell .report-tabs::before {
  border-color: var(--color-brand-border) !important;
  color: var(--color-brand-hover) !important;
  background: var(--color-brand-soft) !important;
}

.song-shell .report-tabs a {
  border-color: var(--color-border-subtle) !important;
  color: var(--color-text-muted) !important;
  background: var(--color-surface-muted) !important;
  box-shadow: none !important;
}

.song-shell .report-tabs a:hover,
.song-shell .report-tabs a.active {
  border-color: var(--color-brand-border) !important;
  color: var(--color-brand-hover) !important;
  background: var(--color-brand-soft) !important;
  transform: none !important;
}

.song-shell .report-tabs a.active::after {
  background: var(--color-brand) !important;
}

.vote-stage-tab:hover,
.vote-stage-tab.active {
  border-color: var(--color-brand-border) !important;
  background: var(--color-brand-soft) !important;
  transform: none !important;
}

.vote-legend-item::before {
  background: var(--color-accent) !important;
}

.vote-legend-item.median::before {
  background: var(--color-text-subtle) !important;
}

.vote-legend-item.target::before {
  background: var(--color-warning) !important;
}

/* Deep generated analysis sections. These are easy to miss because JS injects
   them after the page shell has loaded. */
.structure-readout > div,
.vote-mix-card,
.type-summary-block,
.overview-site-map,
.overview-expression-grid article,
.table-filter-drawer,
.control-band,
.table-wrap,
.row-inspector,
.inspector-rank-card,
.inspector-key-metrics article,
.inspector-metric,
.deep-dive-theme-state,
.deep-dive-preview-song,
.selection-summary,
.vote-band-legend span,
.guide-focus-actions > div,
.guide-bars,
.guide-density-metric,
.page-reading-grid article,
.purpose-route-grid article,
.misread-table > div,
.type-card,
.type-strength,
.band-item,
.fact-table-card,
.fact-metric-row,
.fact-reference-card,
.fact-reference-row {
  border-color: var(--color-border-subtle) !important;
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
  background-image: none !important;
  box-shadow: var(--ds-shadow-sm) !important;
}

.structure-readout span,
.structure-readout small,
.vote-mix-card span,
.vote-mix-card small,
.type-summary-block span,
.type-summary-block small,
.overview-site-map p,
.overview-site-map small,
.overview-expression-grid p,
.inspector-rank-card span,
.inspector-key-metrics span,
.inspector-metric span,
.deep-dive-theme-state span,
.deep-dive-preview-song span,
.selection-summary p,
.guide-focus-actions small,
.guide-density-metric span,
.guide-density-metric small,
.page-reading-grid p,
.purpose-route-grid p,
.misread-table span,
.type-card p,
.band-item span,
.fact-table-card span,
.fact-metric-row span,
.fact-reference-card span,
.fact-reference-row span {
  color: var(--color-text-muted) !important;
}

.structure-readout strong,
.vote-mix-card strong,
.type-summary-block strong,
.overview-site-map a,
.overview-expression-grid strong,
.inspector-rank-card strong,
.inspector-key-metrics strong,
.inspector-metric strong,
.deep-dive-theme-state strong,
.deep-dive-preview-song strong,
.selection-summary strong,
.guide-focus-actions strong,
.guide-density-metric strong,
.page-reading-grid strong,
.purpose-route-grid strong,
.misread-table strong,
.type-card strong,
.band-item strong,
.fact-table-card strong,
.fact-metric-row strong,
.fact-reference-card strong,
.fact-reference-row strong {
  color: var(--color-text) !important;
}

.type-strength,
.fact-metric-row.good,
.fact-reference-row.good {
  border-color: var(--color-success) !important;
  color: var(--color-success) !important;
  background: var(--color-success-soft) !important;
}

.fact-metric-row.risk,
.fact-reference-row.risk {
  border-color: var(--color-warning) !important;
  color: var(--color-warning) !important;
  background: var(--color-warning-soft) !important;
}

.guide-density-metric.top,
.guide-density-metric.mid,
.guide-density-metric.low,
.guide-density-metric.edge,
.vote-band-legend span {
  background: var(--color-surface-muted) !important;
}

.guide-density-metric.top,
.vote-band-legend span:first-child {
  border-color: var(--color-derived) !important;
}

.guide-density-metric.mid {
  border-color: var(--color-info) !important;
}

.guide-density-metric.low,
.guide-density-metric.edge {
  border-color: var(--color-warning) !important;
}

.guide-mini-metrics span,
.final-benchmark-strip,
.final-benchmark-card,
.benchmark-mini-row,
.benchmark-row,
.path-summary-item {
  border-color: var(--color-border-subtle) !important;
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
  background-image: none !important;
  box-shadow: var(--ds-shadow-sm) !important;
}

.guide-mini-metrics span,
.benchmark-mini-row span,
.benchmark-row span,
.path-summary-item span,
.final-benchmark-card small {
  color: var(--color-text-muted) !important;
}

.benchmark-mini-row strong,
.benchmark-row strong,
.path-summary-item strong,
.final-benchmark-card strong {
  color: var(--color-text) !important;
}

.benchmark-mini-row.good,
.benchmark-row.lower-good {
  border-color: var(--color-success) !important;
  background: var(--color-success-soft) !important;
}

.stage-result-metrics span,
.stage-position-kpis span {
  border-color: var(--color-border-subtle) !important;
  color: var(--color-text-muted) !important;
  background: var(--color-surface-muted) !important;
  box-shadow: var(--ds-shadow-sm) !important;
}

.stage-shift-list span,
.transition-card,
.transition-metrics > div {
  border-color: var(--color-border-subtle) !important;
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
  background-image: none !important;
  box-shadow: var(--ds-shadow-sm) !important;
}

.stage-shift-list span.good,
.transition-metrics > div.up {
  border-color: var(--color-success) !important;
  color: var(--color-success) !important;
  background: var(--color-success-soft) !important;
}

.stage-shift-list span.risk,
.transition-metrics > div.down {
  border-color: var(--color-warning) !important;
  color: var(--color-warning) !important;
  background: var(--color-warning-soft) !important;
}

.copy-item,
.advanced-analysis-disclosure > summary,
.market-ticker span,
.chart-decision-card,
.chart-card,
.radar-metric {
  border-color: var(--color-border-subtle) !important;
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
  background-image: none !important;
  box-shadow: var(--ds-shadow-sm) !important;
}

.copy-item p,
.market-ticker span,
.chart-decision-card span,
.chart-card span,
.chart-card small,
.radar-metric span {
  color: var(--color-text-muted) !important;
}

.copy-item strong,
.chart-decision-card strong,
.chart-card strong,
.radar-metric strong {
  color: var(--color-text) !important;
}

.copy-item.warn,
.chart-decision-card.risk,
.radar-metric.risk {
  border-color: var(--color-warning) !important;
  background: var(--color-warning-soft) !important;
}

.chart-decision-card.good,
.radar-metric.good {
  border-color: var(--color-success) !important;
  background: var(--color-success-soft) !important;
}

.success-benchmark-group,
.success-benchmark-row,
.model-momentum-row,
.position-lens-card,
.target-gap-strip,
.target-gap-item,
.failure-row,
.model-card,
.model-card-head em,
.model-verdict > div,
.model-track-list,
.model-metric-details summary,
.model-metric-row {
  border-color: var(--color-border-subtle) !important;
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
  background-image: none !important;
  box-shadow: var(--ds-shadow-sm) !important;
}

.success-benchmark-title span,
.success-benchmark-label span,
.success-benchmark-label small,
.model-momentum-copy span,
.model-momentum-copy small,
.model-momentum-values span,
.position-lens-card span,
.position-lens-card em,
.position-lens-card p,
.target-gap-title span,
.target-gap-item span,
.failure-row span,
.failure-row small,
.model-card-head span,
.model-card-head em,
.model-narrative,
.model-track-label span,
.model-track-values span,
.model-metric-row span,
.model-metric-row small {
  color: var(--color-text-muted) !important;
}

.success-benchmark-title strong,
.success-benchmark-row strong,
.model-momentum-copy strong,
.model-momentum-values strong,
.position-lens-card strong,
.target-gap-title strong,
.target-gap-item strong,
.failure-row strong,
.model-card-head strong,
.model-verdict strong,
.model-track-label strong,
.model-metric-row strong {
  color: var(--color-text) !important;
}

.success-benchmark-row.good,
.model-momentum-row.good,
.position-lens-card.good,
.target-gap-item.good,
.failure-row.good,
.model-card.good,
.model-metric-row.good {
  border-color: var(--color-success) !important;
  background: var(--color-success-soft) !important;
}

.success-benchmark-row.risk,
.model-momentum-row.risk,
.position-lens-card.risk,
.target-gap-item.risk,
.failure-row.risk,
.model-card.risk,
.model-metric-row.risk {
  border-color: var(--color-warning) !important;
  background: var(--color-warning-soft) !important;
}

.success-benchmark-track,
.model-momentum-track,
.position-lens-meter,
.failure-track,
.model-track {
  border-color: var(--color-border-subtle) !important;
  background: var(--color-surface-tint) !important;
}

.action-lab-summary > div,
.action-scenario-card,
.action-impact-grid > div,
.action-chip-row span {
  border-color: var(--color-border-subtle) !important;
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
  background-image: none !important;
  box-shadow: var(--ds-shadow-sm) !important;
}

.action-chip-row span,
.action-impact-grid span,
.action-scenario-card p {
  color: var(--color-text-muted) !important;
}

.action-impact-grid strong,
.action-scenario-card strong {
  color: var(--color-text) !important;
}

.action-scenario-card.good {
  border-color: var(--color-success) !important;
  background: var(--color-success-soft) !important;
}

.action-scenario-card.risk {
  border-color: var(--color-warning) !important;
  background: var(--color-warning-soft) !important;
}

.report-article,
.related-song-card,
.article-card-meta span {
  border-color: var(--color-border-subtle) !important;
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
  background-image: none !important;
  box-shadow: var(--ds-shadow-sm) !important;
}

.report-article {
  box-shadow: var(--ds-shadow-md) !important;
}

.report-article-header h2,
.report-article-section h3,
.related-song-card strong {
  color: var(--color-text) !important;
}

.report-article-header p,
.report-article-section > p,
.report-article-section .article-body p,
.related-song-card span,
.related-song-card p,
.article-card-meta span {
  color: var(--color-text-muted) !important;
}

.article-card-meta span {
  background: var(--color-surface-muted) !important;
}

/* P0 hierarchy pass: keep the light UI, but make roles and priority visible. */
body,
.report-body,
.graph-body,
.song-body,
.diagnosis-search-body {
  background:
    linear-gradient(180deg, #fbfcff 0%, #f4f7fb 42%, #eef3f8 100%) !important;
}

.report-main,
.song-main {
  gap: clamp(24px, 3vw, 36px) !important;
}

.report-section {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#supportAnalyses,
#dataExplorerOverview,
#finalsTop10,
#borderlineRaces,
#outsideSignals,
#featureLists,
#furtherData,
#dataNotice,
#reportClosing {
  padding-top: clamp(22px, 3vw, 34px) !important;
  border-top: 1px solid var(--color-border-subtle) !important;
}

.report-section-head {
  align-items: flex-start !important;
}

.report-section-head h2 {
  max-width: 22ch;
}

.report-hero,
.song-hero-panel,
.diagnosis-summary-panel {
  border-color: var(--color-border-strong) !important;
  background:
    linear-gradient(180deg, var(--color-surface) 0%, #f8fafc 100%) !important;
}

.featured-report-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
}

.featured-card,
.featured-card.primary-card {
  grid-column: auto !important;
  grid-row: auto !important;
  display: grid !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
  min-height: 330px !important;
  padding: 20px !important;
  border-color: var(--color-border) !important;
  background: var(--color-surface) !important;
  box-shadow: var(--ds-shadow-sm) !important;
}

.featured-card::before {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  border-radius: var(--ds-radius-pill);
  background: var(--color-brand);
}

.featured-card h3,
.featured-card.primary-card h3 {
  font-size: clamp(1.08rem, 1.5vw, 1.34rem) !important;
  line-height: 1.24 !important;
}

.article-subtitle,
.article-happened p {
  display: -webkit-box !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
}

.article-subtitle {
  -webkit-line-clamp: 2 !important;
}

.article-happened p {
  -webkit-line-clamp: 3 !important;
}

.article-happened {
  padding-top: 0 !important;
}

.article-actions {
  gap: 8px !important;
}

.report-action,
.button-link,
.stage-result-action,
.vote-stage-tab {
  border-radius: var(--ds-radius-sm) !important;
  font-weight: 850 !important;
}

.report-action.primary,
.button-link.primary {
  border-color: var(--color-brand) !important;
  color: #fff !important;
  background: var(--color-brand) !important;
}

.report-action.primary:hover,
.button-link.primary:hover {
  color: #fff !important;
  background: var(--color-brand-hover) !important;
}

.report-action.secondary,
.button-link.secondary {
  border-color: var(--color-brand-border) !important;
  color: var(--color-brand-hover) !important;
  background: var(--color-brand-soft) !important;
}

.button-link.ghost,
.report-action.ghost {
  border-color: var(--color-border) !important;
  color: var(--color-text-muted) !important;
  background: var(--color-surface) !important;
}

.support-analysis-grid,
.compact-card-list,
.feature-list-grid {
  align-items: stretch !important;
}

.support-card,
.compact-analysis-card,
.feature-list-card,
.structure-card {
  border-color: var(--color-border-subtle) !important;
  background: var(--color-surface) !important;
  box-shadow: none !important;
}

.structure-list:not(.is-expanded) .mobile-extra-row {
  display: none !important;
}

.structure-list .mobile-list-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  min-height: 38px !important;
  border: 1px solid var(--color-brand-border) !important;
  border-radius: var(--ds-radius-sm) !important;
  padding: 8px 12px !important;
  color: var(--color-brand-hover) !important;
  background: var(--color-brand-soft) !important;
  font-weight: 850 !important;
}

.structure-card,
.compact-analysis-card {
  border-left: 4px solid var(--color-derived) !important;
}

.report-data-explorer-head {
  padding: clamp(20px, 3vw, 30px) 18px 4px !important;
  border-radius: var(--ds-radius-lg) !important;
  background:
    linear-gradient(90deg, rgb(239 246 255 / 0.78), rgb(255 255 255 / 0)) !important;
}

.report-data-explorer-head .report-section-head {
  border-left: 4px solid var(--color-observed);
  padding-left: 14px;
}

.report-data-section {
  padding-top: clamp(16px, 2vw, 24px) !important;
}

.report-data-section .report-section-head h2 {
  font-size: clamp(1.12rem, 1.5vw, 1.45rem) !important;
}

.report-data-section .report-section-head p:not(.eyebrow) {
  max-width: 720px;
  font-size: 0.92rem !important;
}

.report-data-more {
  display: flex;
  justify-content: flex-start;
  padding: 6px 0 0;
}

.report-data-more .action-link {
  width: fit-content;
}

.overview-entry-grid a,
.route-card-grid a,
.diagnosis-route-grid a,
.purpose-route-grid article,
.guide-route-links a {
  position: relative;
  border-left: 4px solid var(--color-brand) !important;
}

.overview-entry-grid a::after,
.route-card-grid a::after,
.diagnosis-route-grid a::after {
  content: "→";
  position: absolute;
  right: 14px;
  bottom: 12px;
  color: var(--color-brand);
  font-weight: 950;
}

.overview-entry-grid a span,
.route-card-grid a span,
.purpose-route-grid a {
  color: var(--color-brand-hover) !important;
  font-weight: 900 !important;
}

.structure-rank,
.feature-list-items span {
  color: var(--color-brand-hover) !important;
  background: var(--color-brand-soft) !important;
}

.report-caution {
  border-color: #fde68a !important;
  color: #7c4a03 !important;
  background: var(--color-estimated-soft) !important;
}

.report-caution::before {
  background: var(--color-estimated) !important;
  color: #fff !important;
}

.song-hero-panel {
  gap: 18px !important;
  padding: clamp(18px, 3vw, 26px) !important;
}

.song-hero-main {
  grid-template-columns: 112px minmax(0, 1fr) !important;
  align-items: center !important;
}

.song-hero-cover {
  width: 112px !important;
  box-shadow: none !important;
}

.song-hero-copy h2 {
  font-size: clamp(1.8rem, 4vw, 3.2rem) !important;
  line-height: 1.03 !important;
}

.song-hero-action-groups {
  justify-content: flex-start !important;
  border-top-color: var(--color-border-subtle) !important;
  padding-top: 12px !important;
}

.song-hero-action-group.primary-actions {
  flex: 0 0 auto !important;
}

.song-hero-action-group.secondary-actions {
  flex: 1 1 auto !important;
}

.song-hero-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.song-hero-metric::before {
  background: var(--color-derived) !important;
}

.song-hero-metric.good::before {
  background: var(--color-success) !important;
}

.song-hero-metric.risk::before {
  background: var(--color-warning) !important;
}

.summary-card-grid.diagnosis-focus-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.summary-card.next {
  border-color: var(--color-brand-border) !important;
  background: var(--color-brand-soft) !important;
}

.diagnosis-result-statement {
  max-width: 78ch !important;
  padding: 14px 16px !important;
  border: 1px solid var(--color-brand-border) !important;
  border-radius: var(--ds-radius-md) !important;
  color: var(--color-text) !important;
  background: var(--color-brand-soft) !important;
  font-weight: 780 !important;
  line-height: 1.7 !important;
}

.diagnosis-narrative-panel {
  border-left: 4px solid var(--color-brand) !important;
}

.diagnosis-copy-card {
  border-color: var(--color-border-subtle) !important;
  background: var(--color-surface-muted) !important;
  box-shadow: none !important;
}

.advanced-analysis-disclosure {
  border-color: var(--color-border-subtle) !important;
  background: var(--color-surface) !important;
  box-shadow: var(--ds-shadow-sm) !important;
}

.advanced-analysis-disclosure > summary,
.advanced-analysis-head {
  background: var(--color-surface-muted) !important;
}

@media (max-width: 1120px) {
  .featured-report-grid,
  .summary-card-grid.diagnosis-focus-grid,
  .song-hero-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .featured-report-grid,
  .summary-card-grid.diagnosis-focus-grid,
  .song-hero-metrics,
  .song-hero-main {
    grid-template-columns: 1fr !important;
  }

  .featured-card,
  .featured-card.primary-card {
    min-height: 0 !important;
  }

  .song-hero-cover {
    width: min(128px, 42vw) !important;
  }

  .structure-list .mobile-list-toggle {
    width: 100% !important;
  }
}

/* P0/P1 information hierarchy pass: make the light UI read as layered product UI,
   not a pile of equal white cards. */

:is(.overview-shell, .diagnosis-search-shell, .rankings-shell, .guide-shell, .methodology-shell, .report-shell) {
  --page-band: #f3f6fb;
  --section-band: #f8fafc;
}

.overview-summary,
.ranking-workbench-head,
.diagnosis-search-hero,
.guide-hero,
.methodology-hero,
.report-hero {
  border: 1px solid var(--color-border-strong) !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  box-shadow: var(--ds-shadow-sm) !important;
}

.overview-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.overview-hero-actions a,
.ranking-table-tools .table-tool-button,
.guide-show-all-types {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 1px solid var(--color-brand-border);
  border-radius: var(--ds-radius-sm);
  padding: 9px 13px;
  color: var(--color-brand-hover);
  background: var(--color-brand-soft);
  font-weight: 850;
  text-decoration: none;
}

.overview-hero-actions a.primary,
.ranking-table-tools .table-tool-button:not(.ghost) {
  border-color: var(--color-brand);
  color: #fff;
  background: var(--color-brand);
}

.overview-cards {
  opacity: 0.86;
}

.overview-entry-grid a,
.overview-site-map a,
.route-card-grid a,
.diagnosis-route-grid a {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--ds-radius-md);
  background: var(--color-surface);
  box-shadow: none;
}

.overview-entry-grid a::after,
.overview-site-map a::after,
.route-card-grid a::after,
.diagnosis-route-grid a::after {
  content: "";
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 18px;
  height: 18px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0.48;
  transform: rotate(-45deg);
}

.overview-entry-grid a span {
  width: fit-content;
  border: 1px solid var(--color-brand-border);
  border-radius: var(--ds-radius-sm);
  padding: 7px 10px;
  color: var(--color-brand-hover);
  background: var(--color-brand-soft);
  font-weight: 850;
}

.overview-site-map {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--ds-radius-lg) !important;
  padding: clamp(18px, 3vw, 24px) !important;
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
  box-shadow: none !important;
}

.overview-site-map a {
  color: var(--color-text) !important;
  background: var(--color-surface-muted) !important;
}

.overview-site-map small {
  color: var(--color-text-muted) !important;
}

.overview-secondary-detail > summary,
.filter-detail-block > summary,
.advanced-preset-drawer > summary,
.ranking-detail-filters > summary,
.graph-controls > summary {
  border: 1px solid var(--color-border);
  border-radius: var(--ds-radius-md);
  background: var(--color-surface-muted);
  color: var(--color-text);
}

.diagnosis-reading-steps {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
  gap: 18px;
  align-items: center;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-derived);
  border-radius: var(--ds-radius-lg);
  padding: clamp(16px, 2.5vw, 22px);
  background: var(--color-surface);
  box-shadow: var(--ds-shadow-sm);
}

.diagnosis-reading-steps h2 {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
}

.diagnosis-reading-steps p {
  margin: 6px 0 0;
  color: var(--color-text-muted);
  line-height: 1.65;
}

.diagnosis-step-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.diagnosis-step-list li {
  display: grid;
  gap: 6px;
  min-height: 76px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--ds-radius-md);
  padding: 10px;
  background: var(--color-surface-muted);
}

.diagnosis-step-list span {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--ds-radius-pill);
  color: #fff;
  background: var(--color-brand);
  font-size: 0.78rem;
  font-weight: 900;
}

.diagnosis-step-list strong {
  font-size: 0.86rem;
  line-height: 1.35;
}

.diagnosis-card-actions a:first-child {
  border-color: var(--color-brand) !important;
  color: #fff !important;
  background: var(--color-brand) !important;
}

.diagnosis-card-actions a.secondary {
  border-color: var(--color-brand-border) !important;
  color: var(--color-brand-hover) !important;
  background: var(--color-brand-soft) !important;
}

.diagnosis-card-actions a.tertiary {
  border-color: transparent !important;
  color: var(--color-text-muted) !important;
  background: transparent !important;
}

.diagnosis-card-tags span,
.diagnosis-card-metrics span,
.tag,
.status-chip,
.phase-chip,
.value-kind-badge,
.article-card-meta span {
  border-radius: var(--ds-radius-pill) !important;
  box-shadow: none !important;
}

.ranking-table-toolbar {
  order: 9;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-observed);
  border-radius: var(--ds-radius-lg);
  padding: 14px 16px;
  background: var(--color-surface);
  box-shadow: var(--ds-shadow-sm);
}

.ranking-table-toolbar > div:first-child {
  display: grid;
  gap: 3px;
}

.ranking-table-toolbar strong {
  color: var(--color-text);
  font-size: 0.96rem;
}

.ranking-table-toolbar span {
  color: var(--color-text-muted);
  font-size: 0.88rem;
}

.ranking-table-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.ranking-table-tools-menu {
  position: relative;
  display: block;
}

.ranking-table-tools-menu summary {
  list-style: none;
  cursor: pointer;
  min-height: 38px;
  border: 1px solid var(--color-border);
  border-radius: var(--ds-radius-sm);
  padding: 9px 34px 9px 13px;
  color: var(--color-text);
  background: var(--color-surface);
  font-weight: 850;
}

.ranking-table-tools-menu summary::-webkit-details-marker {
  display: none;
}

.ranking-table-tools-menu summary::after {
  content: "＋";
  position: absolute;
  right: 13px;
  color: var(--color-brand);
}

.ranking-table-tools-menu[open] summary::after {
  content: "−";
}

.ranking-table-tools-menu > div {
  position: absolute;
  right: 0;
  z-index: 8;
  display: grid;
  min-width: 210px;
  gap: 8px;
  margin-top: 8px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--ds-radius-md);
  padding: 10px;
  background: var(--color-surface);
  box-shadow: var(--ds-shadow-md);
}

.ranking-table-tools .ghost {
  color: var(--color-text-muted);
  background: var(--color-surface);
}

#presetDeck {
  order: 10 !important;
}

#rankingDeepDive {
  order: 11 !important;
}

.compare-panel,
.next-action-panel {
  order: 12 !important;
}

.ranking-read-guide {
  order: 13 !important;
}

.preset-deck {
  border-left: 4px solid var(--color-derived) !important;
}

.ranking-deep-dive,
.deep-dive-panel,
.analysis-lens-panel,
.strategy-panel,
.diagnostic-panel,
.positioning-panel,
.distribution-panel,
.ranking-visual-panel {
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
  box-shadow: none !important;
}

.deep-dive-head {
  border-bottom: 1px solid var(--color-border-subtle);
  padding-bottom: 14px;
}

.deep-dive-cards {
  align-items: stretch;
}

.deep-dive-cards button,
.lens-card,
.strategy-card,
.diagnostic-card,
.candidate-preview-card,
.positioning-segment-card,
.visual-card,
.distribution-card {
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
  box-shadow: none !important;
}

.deep-dive-cards button.active,
.lens-card.active,
.strategy-card.active,
.diagnostic-card.active {
  border-color: var(--color-brand-border) !important;
  background: var(--color-brand-soft) !important;
}

.map-reading-callout {
  display: flex;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--color-derived-border);
  border-left: 4px solid var(--color-derived);
  border-radius: var(--ds-radius-lg);
  padding: 14px 16px;
  color: var(--color-text);
  background: var(--color-derived-soft);
}

.map-reading-callout strong {
  flex: 0 0 auto;
  font-size: 0.94rem;
}

.map-reading-callout span {
  color: var(--color-text-muted);
  line-height: 1.6;
}

.guide-side-nav {
  position: sticky;
  top: 12px;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--ds-radius-lg);
  padding: 10px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--ds-shadow-sm);
  backdrop-filter: blur(12px);
}

.guide-side-nav a {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--ds-radius-sm);
  padding: 8px 10px;
  color: var(--color-text-muted);
  background: var(--color-surface);
  font-size: 0.86rem;
  font-weight: 850;
  text-decoration: none;
}

.guide-side-nav a:hover {
  border-color: var(--color-brand-border);
  color: var(--color-brand-hover);
  background: var(--color-brand-soft);
}

.guide-quick-lookup {
  border-left: 4px solid var(--color-observed) !important;
}

.guide-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.guide-quick-grid a {
  display: grid;
  gap: 8px;
  min-height: 120px;
  border: 1px solid var(--color-border);
  border-radius: var(--ds-radius-md);
  padding: 14px;
  color: var(--color-text);
  background: var(--color-surface);
  text-decoration: none;
}

.guide-quick-grid strong {
  color: var(--color-brand-hover);
}

.guide-quick-grid span {
  color: var(--color-text-muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

.guide-show-all-types {
  grid-column: 1 / -1;
  width: fit-content;
  justify-self: center;
}

#summary.diagnosis-summary-panel {
  border-left: 4px solid var(--color-brand) !important;
}

.diagnosis-result-statement {
  border: 1px solid var(--color-brand-border) !important;
  border-left: 4px solid var(--color-brand) !important;
  border-radius: var(--ds-radius-md) !important;
  padding: 14px 16px !important;
  color: var(--color-text) !important;
  background: var(--color-brand-soft) !important;
  font-size: clamp(1rem, 1.4vw, 1.16rem) !important;
  line-height: 1.75 !important;
  font-weight: 760 !important;
}

#findings.diagnosis-narrative-panel,
#impactMetrics.impact-metrics-panel {
  border-left: 4px solid var(--color-derived) !important;
}

.methodology-hero,
.methodology-panel {
  max-width: 980px;
  margin-inline: auto;
}

.methodology-table,
.misread-table {
  border-radius: var(--ds-radius-md) !important;
  overflow: hidden;
}

.status-chip.eliminated,
.phase-chip.eliminated {
  border-color: var(--color-border-strong) !important;
  color: var(--color-text-muted) !important;
  background: var(--color-surface-muted) !important;
}

.cutoff-axis .negative {
  color: var(--color-warning) !important;
  background: var(--color-warning-soft) !important;
}

@media (max-width: 1080px) {
  .diagnosis-reading-steps,
  .ranking-table-toolbar {
    grid-template-columns: 1fr;
  }

  .diagnosis-step-list,
  .guide-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ranking-table-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 720px) {
  .overview-hero-actions,
  .ranking-table-tools,
  .map-reading-callout,
  .guide-side-nav {
    align-items: stretch;
    flex-direction: column;
  }

  .overview-hero-actions a,
  .ranking-table-tools .table-tool-button,
  .guide-side-nav a {
    width: 100%;
  }

  .ranking-table-tools-menu,
  .ranking-table-tools-menu summary {
    width: 100%;
  }

  .ranking-table-tools-menu > div {
    position: static;
    width: 100%;
  }

  .diagnosis-step-list,
  .guide-quick-grid {
    grid-template-columns: 1fr;
  }
}

/* Layout discipline pass: constrain reading width, reduce card sprawl,
   and keep workbench pages wide only where comparison needs it. */
.app-shell,
.song-shell {
  width: min(1120px, calc(100vw - 32px)) !important;
  max-width: 1120px !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

.rankings-shell,
.graph-shell {
  width: min(1320px, calc(100vw - 32px)) !important;
  max-width: 1320px !important;
}

.report-shell,
.guide-shell,
.methodology-shell {
  width: min(1040px, calc(100vw - 32px)) !important;
  max-width: 1040px !important;
}

.song-shell {
  width: min(1180px, calc(100vw - 32px)) !important;
  max-width: 1180px !important;
}

.dashboard-main,
.rankings-main,
.guide-shell main,
.methodology-shell main,
.report-main,
.song-main {
  gap: 48px !important;
}

.overview-content-panel,
.overview-secondary-detail,
.ranking-workbench-head,
.ranking-search-panel,
.ranking-controls,
.ranking-detail-filters,
.ranking-contract,
.ranking-table-toolbar,
.ranking-results-workbench,
.ranking-deep-dive,
.ranking-read-guide,
.graph-command-bar,
.graph-controls,
.graph-next-panel,
.map-reading-callout,
.report-section,
.guide-section,
.methodology-panel,
.panel {
  border-radius: var(--ds-radius-lg) !important;
}

.overview-content-panel,
.overview-secondary-detail,
.ranking-workbench-head,
.ranking-search-panel,
.ranking-controls,
.ranking-detail-filters,
.ranking-contract,
.ranking-table-toolbar,
.ranking-deep-dive,
.ranking-read-guide,
.report-section,
.guide-section,
.methodology-panel,
.panel {
  padding: 20px !important;
}

.overview-entry-grid,
.route-card-grid,
.diagnosis-route-grid,
.overview-site-map {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.overview-entry-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.overview-entry-grid a,
.route-card-grid a,
.diagnosis-route-grid a,
.overview-site-map a {
  min-height: 108px !important;
  align-content: start !important;
  padding: 18px 46px 18px 18px !important;
}

.overview-site-map {
  box-shadow: none !important;
}

.overview-site-map .overview-figure-title,
.overview-site-map p {
  grid-column: 1 / -1 !important;
}

.overview-site-map a::after,
.overview-entry-grid a::after,
.route-card-grid a::after,
.diagnosis-route-grid a::after {
  right: 18px !important;
  bottom: 18px !important;
  width: 13px !important;
  height: 13px !important;
  opacity: 0.42 !important;
}

.overview-secondary-detail {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.overview-secondary-detail > summary,
.ranking-detail-filters > summary,
.graph-controls > summary,
.advanced-analysis-disclosure > summary,
.vote-detail-disclosure > summary {
  min-height: 56px !important;
  padding: 14px 20px !important;
  line-height: 1.45 !important;
}

.overview-secondary-detail[open] {
  padding: 0 0 20px !important;
}

.overview-secondary-detail[open] > :not(summary) {
  margin-top: 16px !important;
}

.overview-closing {
  display: grid !important;
  gap: 14px !important;
}

.overview-closing-links {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.overview-closing-links a {
  min-height: 76px !important;
  justify-content: flex-start !important;
  padding: 18px !important;
  text-align: left !important;
}

.data-footer {
  min-height: 64px !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-top: 1px solid var(--color-border-subtle) !important;
  padding-block: 16px !important;
}

.data-footer span {
  margin-right: auto !important;
}

.graph-page-topbar h1,
.graph-shell > .topbar h1 {
  font-size: clamp(2rem, 4vw, 2.5rem) !important;
  line-height: 1.05 !important;
}

.graph-intro {
  max-width: 56rem !important;
}

.map-reading-callout {
  max-width: 1040px !important;
  padding: 14px 18px !important;
}

.graph-command-bar {
  grid-template-columns: minmax(280px, 0.92fr) minmax(0, 1.18fr) !important;
  gap: 12px !important;
  padding: 12px !important;
}

.graph-command-bar .top-actions {
  display: grid !important;
  grid-template-columns: minmax(260px, 1fr) auto !important;
  gap: 8px !important;
}

.mode-control-group {
  grid-template-columns: 1fr !important;
}

.mode-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.map-utility-actions .icon-button {
  color: var(--color-text-muted) !important;
  background: var(--color-surface) !important;
}

.graph-workbench {
  min-height: 600px !important;
  height: min(760px, calc(100vh - 220px)) !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 320px) !important;
  gap: 16px !important;
  padding: 12px !important;
  background: rgb(7 12 15 / 0.66) !important;
}

.map-panel {
  min-height: 560px !important;
}

.right-panel {
  width: auto !important;
  min-width: 0 !important;
}

.rankings-main > :is(.ranking-workbench-head, .ranking-search-panel, .ranking-controls, .ranking-detail-filters, .ranking-contract, .ranking-table-toolbar, .ranking-results-workbench, .ranking-deep-dive, .ranking-read-guide, .compare-panel, .next-action-panel) {
  width: 100% !important;
}

.ranking-controls {
  grid-template-columns: repeat(4, minmax(150px, 1fr)) !important;
  gap: 12px !important;
}

.screening-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.ranking-workbench-head { order: 1 !important; }
#rankingSearchPanel { order: 2 !important; }
#rankingControls { order: 3 !important; }
.ranking-contract { order: 4 !important; }
.ranking-table-toolbar { order: 5 !important; }
.ranking-results-workbench { order: 6 !important; }
.ranking-detail-filters { order: 7 !important; }
#presetDeck { order: 8 !important; }
#rankingDeepDive { order: 9 !important; }
.compare-panel,
.next-action-panel { order: 10 !important; }
.ranking-read-guide { order: 11 !important; }

.deep-dive-cards,
.lens-grid,
.diagnostic-grid,
.strategy-grid {
  grid-template-columns: repeat(3, minmax(260px, 1fr)) !important;
  gap: 16px !important;
}

.deep-dive-card,
.lens-card,
.diagnostic-card,
.strategy-card {
  min-height: 0 !important;
  padding: 16px !important;
}

.deep-dive-card p,
.lens-card p,
.diagnostic-card-head p,
.strategy-card p {
  display: -webkit-box !important;
  overflow: hidden !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

.deep-dive-preview-song,
.lens-card .song-cell,
.diagnostic-card .song-cell,
.strategy-card .song-cell {
  margin-top: 2px !important;
}

.lens-actions button,
.diagnostic-actions button,
.strategy-actions button,
.deep-dive-card .action-link {
  border-color: var(--color-border-strong) !important;
  color: var(--color-brand-hover) !important;
  background: var(--color-surface) !important;
}

.lens-actions button:first-child,
.diagnostic-actions button:first-child,
.strategy-actions button:first-child {
  border-color: var(--color-brand) !important;
  color: #fff !important;
  background: var(--color-brand) !important;
}

.compare-panel:empty,
.next-action-panel:empty {
  display: none !important;
}

.compare-panel {
  min-height: 0 !important;
}

.song-main {
  width: min(1180px, 100%) !important;
  padding-block: 24px 56px !important;
}

.song-hero-action-groups {
  gap: 8px !important;
}

.song-hero-action-group.primary-actions .button-link {
  border-color: var(--color-brand) !important;
  background: var(--color-brand) !important;
}

.song-hero-action-group.secondary-actions .button-link {
  border-color: var(--color-border-strong) !important;
  color: var(--color-text-muted) !important;
  background: var(--color-surface) !important;
}

.song-hero-action-group.secondary-actions .button-link[href*="graph"],
.song-hero-action-group.secondary-actions .button-link[href*="rankings"] {
  color: var(--color-brand-hover) !important;
}

.report-tabs {
  justify-content: flex-start !important;
  gap: 8px !important;
}

.report-tabs a {
  min-height: 34px !important;
  padding-inline: 14px !important;
}

#summary.diagnosis-summary-panel {
  border-left-width: 0 !important;
}

.diagnosis-summary-panel .panel-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 16px !important;
}

.diagnosis-summary-panel .panel-head h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem) !important;
}

.diagnosis-result-statement {
  border-left-width: 0 !important;
  border-color: var(--color-border) !important;
  background: var(--color-surface-muted) !important;
  padding: 16px !important;
  font-size: clamp(0.96rem, 1.2vw, 1.08rem) !important;
}

.summary-card-grid.diagnosis-focus-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.summary-card-grid.diagnosis-focus-grid .summary-card:first-child,
.summary-card-grid.diagnosis-focus-grid .summary-card.next {
  grid-column: 1 / -1 !important;
}

.summary-card,
.summary-visual-card,
.impact-metric-card,
.diagnosis-copy-card,
.official-result-card,
.fact-summary-card,
.type-card {
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
  box-shadow: none !important;
}

.summary-card.good,
.summary-card.derived,
.summary-card.risk,
.fact-summary-card.good,
.fact-summary-card.risk,
.impact-metric-card.good,
.impact-metric-card.warn {
  border-color: var(--color-border) !important;
  background: var(--color-surface) !important;
}

.summary-visual-row {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.62fr) !important;
  gap: 16px !important;
}

.summary-next-row {
  grid-template-columns: minmax(0, 1fr) minmax(220px, auto) !important;
}

.summary-actions {
  grid-column: 1 / -1 !important;
  justify-content: flex-start !important;
}

.type-card {
  min-height: 0 !important;
}

.type-card .type-reading,
.type-card p {
  line-height: 1.55 !important;
}

.vote-bar-fill,
.stage-rank-fill,
.vote-mini-bar i,
.mini-fill,
.compact-compare-track i {
  background: var(--color-derived) !important;
  box-shadow: none !important;
}

.vote-bar-col:nth-child(-n + 3) .vote-bar-fill,
.stage-rank-cell:nth-child(-n + 3) .stage-rank-fill,
.vote-mini-bar:nth-child(-n + 3) i {
  background: var(--color-observed) !important;
}

.vote-bar-col:nth-child(n + 8) .vote-bar-fill,
.stage-rank-cell:nth-child(n + 8) .stage-rank-fill,
.vote-mini-bar:nth-child(n + 8) i {
  background: var(--color-text-subtle) !important;
}

.stage-position-meter i,
.stage-percentile-row.good .stage-position-meter i,
.stage-percentile-row.risk .stage-position-meter i,
.position-lens-meter i {
  background: var(--color-derived) !important;
}

[hidden] {
  display: none !important;
}

.overview-site-map > p {
  grid-column: 1 / -1 !important;
  max-width: 760px !important;
  margin: 2px 0 0 !important;
  color: var(--color-text-muted) !important;
  line-height: 1.65 !important;
}

.overview-trust-brief .overview-value-kind-grid {
  margin-top: 14px !important;
}

.overview-entry-grid a span {
  display: inline-flex !important;
  width: fit-content !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: var(--color-brand-hover) !important;
  background: transparent !important;
}

.summary-visual-card > p {
  margin: 8px 0 8px !important;
  color: var(--color-text-muted) !important;
  font-size: 0.88rem !important;
  line-height: 1.65 !important;
}

.summary-visual-card > small {
  display: block !important;
  margin: 0 0 12px !important;
  color: var(--color-text-subtle) !important;
  font-size: 0.78rem !important;
  line-height: 1.5 !important;
}

.summary-card > .value-kind-badge,
.official-result-card > .value-kind-badge,
.fact-summary-card > .value-kind-badge {
  align-self: flex-start !important;
  width: max-content !important;
  max-width: 100% !important;
  min-height: 24px !important;
  padding: 4px 9px !important;
  border-radius: var(--ds-radius-pill) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0 !important;
}

.map-panel .graph-tooltip,
.graph-tooltip {
  display: none !important;
}

/* Map canvas help: collapsed state must be a single compact line. */
.graph-shell .map-panel .map-guide {
  width: max-content !important;
  max-width: min(172px, calc(100% - 150px)) !important;
  z-index: 8 !important;
  padding: 0 !important;
  border-color: rgb(226 232 240 / 0.2) !important;
  border-radius: 10px !important;
  background: rgb(8 13 18 / 0.78) !important;
  box-shadow: 0 12px 28px rgb(0 0 0 / 0.24) !important;
}

.graph-shell .map-panel .map-guide:has(.map-guide-detail[open]) {
  width: min(270px, calc(100% - 150px)) !important;
  max-width: min(270px, calc(100% - 150px)) !important;
  padding: 8px 10px !important;
}

.graph-shell .map-guide-detail {
  margin: 0 !important;
  border: 0 !important;
  padding: 0 !important;
}

.graph-shell .map-guide-detail > summary {
  display: flex !important;
  min-height: 34px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 9px 12px !important;
  color: #eafffd !important;
  font-size: 0.7rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.graph-shell .map-guide-detail[open] > summary {
  min-height: 0 !important;
  padding: 0 0 7px !important;
  border-bottom: 1px solid rgb(226 232 240 / 0.14) !important;
}

.graph-shell .map-guide-detail > summary::after {
  content: "+" !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 18px !important;
  height: 18px !important;
  margin-left: 6px !important;
  float: none !important;
  border: 1px solid rgb(45 212 191 / 0.44) !important;
  border-radius: 999px !important;
  color: #99f6e4 !important;
  font-size: 0.72rem !important;
  line-height: 1 !important;
}

.graph-shell .map-guide-detail[open] > summary::after {
  content: "-" !important;
}

.graph-shell .map-guide-detail-body {
  display: grid !important;
  gap: 6px !important;
  padding-top: 8px !important;
}

.graph-shell .map-guide p,
.graph-shell .map-guide-list dt,
.graph-shell .map-guide-list dd {
  font-size: 0.6rem !important;
}

@media (max-width: 1180px) {
  .graph-workbench {
    grid-template-columns: minmax(0, 1fr) 304px !important;
  }

  .graph-workbench .left-panel {
    position: absolute !important;
    display: block !important;
  }
}

@media (max-width: 980px) {
  .overview-entry-grid,
  .route-card-grid,
  .diagnosis-route-grid,
  .overview-site-map,
  .overview-closing-links,
  .deep-dive-cards,
  .lens-grid,
  .diagnostic-grid,
  .strategy-grid,
  .screening-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .graph-command-bar {
    grid-template-columns: 1fr !important;
  }

  .graph-workbench {
    grid-template-columns: 1fr !important;
    height: auto !important;
    max-height: none !important;
  }

  .graph-workbench .right-panel {
    min-height: 280px !important;
  }

  .summary-card-grid.diagnosis-focus-grid,
  .summary-visual-row,
  .diagnosis-summary-panel .panel-head {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px) {
  .app-shell,
  .song-shell,
  .rankings-shell,
  .graph-shell,
  .report-shell,
  .guide-shell,
  .methodology-shell {
    width: min(100vw - 20px, 100%) !important;
  }

  .dashboard-main,
  .rankings-main,
  .guide-shell main,
  .methodology-shell main,
  .report-main,
  .song-main {
    gap: 32px !important;
  }

  .overview-entry-grid,
  .route-card-grid,
  .diagnosis-route-grid,
  .overview-site-map,
  .overview-closing-links,
  .ranking-controls,
  .deep-dive-cards,
  .lens-grid,
  .diagnostic-grid,
  .strategy-grid,
  .screening-grid {
    grid-template-columns: 1fr !important;
  }

  .overview-content-panel,
  .ranking-workbench-head,
  .ranking-search-panel,
  .ranking-controls,
  .ranking-detail-filters,
  .ranking-contract,
  .ranking-table-toolbar,
  .ranking-deep-dive,
  .ranking-read-guide,
  .report-section,
  .guide-section,
  .methodology-panel,
  .panel {
    padding: 16px !important;
  }

  .graph-workbench {
    min-height: 560px !important;
    padding: 8px !important;
  }

  .map-panel {
    min-height: 520px !important;
  }
}

/* Cross-page rhythm pass: keep each page type in the same layout language. */
.app-shell,
.song-shell {
  --page-shell-gutter: clamp(16px, 2.2vw, 24px) !important;
  --ssc-content-max: 1120px;
  --page-shell-max: calc(var(--ssc-content-max) + (var(--page-shell-gutter) * 2)) !important;
  width: min(var(--page-shell-max), 100%) !important;
  max-width: var(--page-shell-max) !important;
  padding:
    calc(18px + var(--shell-sticky-nav-height) + 12px)
    var(--page-shell-gutter)
    48px !important;
}

.rankings-shell,
.graph-shell {
  --ssc-content-max: 1320px;
}

.song-shell {
  --ssc-content-max: 1180px;
}

.report-shell,
.guide-shell,
.methodology-shell {
  --ssc-content-max: 1040px;
}

.methodology-shell {
  --ssc-content-max: 960px;
}

.app-shell > .topbar,
.song-shell > .topbar {
  min-height: 70px !important;
  margin-bottom: 18px !important;
  padding-bottom: 14px !important;
  align-items: end !important;
}

.app-shell > .topbar h1,
.song-shell > .topbar h1,
.guide-shell .topbar h1,
.graph-shell > .topbar h1 {
  font-size: clamp(1.85rem, 2.8vw, 2.6rem) !important;
  line-height: 1.04 !important;
}

.app-shell > main,
.dashboard-main,
.diagnosis-search-main,
.rankings-main,
.report-main,
.guide-shell main,
.methodology-main,
.song-main {
  display: grid !important;
  gap: 48px !important;
  width: 100% !important;
  max-width: 100% !important;
}

.overview-summary,
.diagnosis-search-hero,
.ranking-workbench-head,
.report-hero,
.guide-hero,
.methodology-hero,
.song-hero-panel,
.graph-command-bar,
.map-reading-callout {
  border: 1px solid var(--color-border-strong) !important;
  border-radius: 12px !important;
  padding: clamp(20px, 2.4vw, 28px) !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  box-shadow: var(--ds-shadow-md) !important;
}

.report-hero,
.guide-hero,
.methodology-hero,
.diagnosis-search-hero,
.ranking-workbench-head,
.overview-summary {
  min-height: 0 !important;
}

.report-hero h2,
.guide-hero h2,
.methodology-hero h2,
.diagnosis-search-copy h2,
.ranking-workbench-head h2,
.overview-summary h2,
.song-hero-copy h2 {
  max-width: 18ch !important;
  font-size: clamp(1.85rem, 3vw, 2.45rem) !important;
  line-height: 1.08 !important;
}

.report-hero-copy > p:not(.eyebrow),
.guide-hero p:not(.eyebrow),
.methodology-hero p:not(.eyebrow),
.diagnosis-search-copy p:not(.eyebrow),
.ranking-workbench-head p:not(.eyebrow),
.overview-summary p:not(.eyebrow),
.song-hero-artist {
  max-width: 72ch !important;
  font-size: 0.98rem !important;
  line-height: 1.68 !important;
}

.overview-content-panel,
.diagnosis-search-results-section,
.diagnosis-route-panel,
.ranking-search-panel,
.ranking-controls,
.ranking-detail-filters,
.ranking-contract,
.ranking-table-toolbar,
.ranking-results-workbench,
.compare-panel,
.next-action-panel,
.ranking-deep-dive,
.ranking-read-guide,
.report-section,
.guide-section,
.methodology-panel,
.panel,
.data-notice-panel,
.graph-next-panel {
  border-radius: 12px !important;
  padding: 24px !important;
}

.overview-content-panel,
.ranking-search-panel,
.ranking-controls,
.ranking-detail-filters,
.ranking-contract,
.ranking-results-workbench,
.ranking-deep-dive,
.report-section,
.guide-section,
.methodology-panel,
.diagnosis-route-panel,
.diagnosis-search-results-section {
  box-shadow: var(--ds-shadow-sm) !important;
}

.panel-head,
.overview-section-head,
.guide-section-head,
.report-section-head,
.methodology-section-head,
.ranking-controls-head,
.screening-head {
  gap: 10px !important;
  margin-bottom: 16px !important;
}

.panel-head h2,
.overview-section-head h2,
.guide-section-head h2,
.report-section-head h2,
.methodology-section-head h2,
.ranking-controls-head span,
.screening-head span {
  font-size: clamp(1.18rem, 1.8vw, 1.55rem) !important;
  line-height: 1.2 !important;
}

.overview-entry-grid,
.overview-site-map,
.overview-closing-links,
.diagnosis-route-grid,
.route-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.overview-entry-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.featured-report-grid,
.support-analysis-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.compact-card-list,
.feature-list-grid,
.deep-dive-cards,
.lens-grid,
.diagnostic-grid,
.strategy-grid,
.screening-grid {
  grid-template-columns: repeat(3, minmax(240px, 1fr)) !important;
  gap: 16px !important;
}

.overview-entry-grid a,
.overview-site-map a,
.overview-closing-links a,
.diagnosis-route-grid a,
.route-card-grid a,
.featured-card,
.support-card,
.compact-analysis-card,
.feature-list-card,
.deep-dive-card,
.lens-card,
.diagnostic-card,
.strategy-card,
.methodology-card,
.guide-start-card,
.guide-summary article,
.guide-points article,
.summary-card,
.impact-metric-card,
.factor-card,
.fact-summary-card {
  min-height: 0 !important;
  border-radius: 10px !important;
  padding: 18px !important;
  background: var(--color-surface) !important;
  box-shadow: var(--ds-shadow-sm) !important;
}

.overview-entry-grid a,
.overview-site-map a,
.overview-closing-links a,
.diagnosis-route-grid a,
.route-card-grid a {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 10px !important;
}

.overview-entry-grid a::after,
.overview-site-map a::after,
.overview-closing-links a::after,
.diagnosis-route-grid a::after,
.route-card-grid a::after {
  width: 28px !important;
  height: 28px !important;
  font-size: 0.95rem !important;
}

.featured-card,
.featured-card.primary-card {
  min-height: 300px !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
}

.deep-dive-card,
.deep-dive-card.active,
.lens-card,
.lens-card.active,
.diagnostic-card,
.strategy-card {
  border-color: var(--color-border-subtle) !important;
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
  background-image: none !important;
}

.deep-dive-card.active,
.lens-card.active {
  box-shadow: inset 3px 0 0 var(--color-brand), var(--ds-shadow-sm) !important;
}

.button-link,
.report-action,
.action-link,
.detail-link,
.icon-button,
.table-tool-button,
.diagnosis-card-actions a,
.lens-actions button,
.diagnostic-actions button,
.strategy-actions button,
.overview-hero-actions a,
.overview-entry-grid a span,
.overview-closing-links a span,
.route-card-grid a span {
  min-height: 40px !important;
  border-radius: 8px !important;
  padding: 0 14px !important;
  font-size: 0.86rem !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
}

.overview-entry-grid a span,
.overview-closing-links a span,
.route-card-grid a span {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--color-brand-hover) !important;
  background: transparent !important;
}

.button-link.primary,
.report-action.primary,
.overview-hero-actions a.primary,
.lens-actions button:first-child,
.diagnostic-actions button:first-child,
.strategy-actions button:first-child {
  border-color: var(--color-brand) !important;
  color: #fff !important;
  background: var(--color-brand) !important;
}

.button-link.secondary,
.report-action.secondary,
.action-link,
.detail-link,
.diagnosis-card-actions a.secondary {
  border-color: var(--color-border-strong) !important;
  color: var(--color-brand-hover) !important;
  background: var(--color-surface) !important;
}

.button-link.ghost,
.report-action.ghost,
.icon-button,
.table-tool-button {
  border-color: var(--color-border) !important;
  color: var(--color-text-muted) !important;
  background: var(--color-surface) !important;
}

.map-reading-callout {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  max-width: 1040px !important;
  padding: 14px 18px !important;
  color: var(--color-text) !important;
  background: var(--color-info-soft) !important;
  box-shadow: var(--ds-shadow-sm) !important;
}

.map-reading-callout strong {
  color: var(--color-observed) !important;
}

.graph-command-bar {
  display: grid !important;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.4fr) !important;
  gap: 16px !important;
  align-items: start !important;
}

.graph-command-bar .top-actions,
.mode-control-group {
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.graph-command-bar .top-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
}

.mode-control-group {
  display: grid !important;
  gap: 12px !important;
}

.mode-tabs,
.ruler-switch,
.segmented,
.stage-buttons {
  gap: 8px !important;
}

.graph-workbench {
  min-height: 620px !important;
  gap: 16px !important;
  padding: 12px !important;
}

.graph-workbench .right-panel {
  width: 330px !important;
  max-width: 330px !important;
}

.map-panel {
  min-height: 580px !important;
}

.summary-card.good,
.summary-card.risk,
.impact-metric-card.good,
.impact-metric-card.warn,
.impact-metric-card.risk,
.factor-card.good,
.factor-card.warn,
.factor-card.risk,
.fact-summary-card.good,
.fact-summary-card.risk {
  background: var(--color-surface) !important;
}

.summary-card.good,
.impact-metric-card.good,
.factor-card.good,
.fact-summary-card.good {
  box-shadow: inset 3px 0 0 var(--color-success), var(--ds-shadow-sm) !important;
}

.summary-card.risk,
.impact-metric-card.warn,
.impact-metric-card.risk,
.factor-card.warn,
.factor-card.risk,
.fact-summary-card.risk {
  box-shadow: inset 3px 0 0 var(--color-estimated), var(--ds-shadow-sm) !important;
}

.data-footer {
  min-height: 64px !important;
  display: flex !important;
  gap: 14px !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  margin-top: 8px !important;
}

.data-footer > div,
.data-footer nav,
.data-footer .export-links {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
}

.data-footer a {
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 8px !important;
  padding: 0 10px !important;
}

@media (max-width: 1180px) {
  .app-shell,
  .song-shell,
  .rankings-shell,
  .graph-shell,
  .report-shell,
  .guide-shell,
  .methodology-shell {
    --ssc-content-max: calc(100vw - (var(--page-shell-gutter) * 2));
  }

  .graph-command-bar {
    grid-template-columns: 1fr !important;
  }

  .featured-report-grid,
  .support-analysis-grid,
  .compact-card-list,
  .feature-list-grid,
  .deep-dive-cards,
  .lens-grid,
  .diagnostic-grid,
  .strategy-grid,
  .screening-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  .app-shell,
  .song-shell {
    --page-shell-gutter: 12px !important;
    --ssc-content-max: calc(100vw - 24px);
    padding:
      calc(16px + var(--shell-sticky-nav-height) + 12px)
      var(--page-shell-gutter)
      36px !important;
  }

  .app-shell > .topbar,
  .song-shell > .topbar {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
  }

  .app-shell > main,
  .dashboard-main,
  .diagnosis-search-main,
  .rankings-main,
  .report-main,
  .guide-shell main,
  .methodology-main,
  .song-main {
    gap: 32px !important;
  }

  .overview-summary,
  .diagnosis-search-hero,
  .ranking-workbench-head,
  .report-hero,
  .guide-hero,
  .methodology-hero,
  .song-hero-panel,
  .graph-command-bar,
  .map-reading-callout,
  .overview-content-panel,
  .diagnosis-search-results-section,
  .diagnosis-route-panel,
  .ranking-search-panel,
  .ranking-controls,
  .ranking-detail-filters,
  .ranking-contract,
  .ranking-table-toolbar,
  .ranking-results-workbench,
  .compare-panel,
  .next-action-panel,
  .ranking-deep-dive,
  .ranking-read-guide,
  .report-section,
  .guide-section,
  .methodology-panel,
  .panel,
  .data-notice-panel,
  .graph-next-panel {
    padding: 16px !important;
  }

  .overview-entry-grid,
  .overview-site-map,
  .overview-closing-links,
  .diagnosis-route-grid,
  .route-card-grid,
  .featured-report-grid,
  .support-analysis-grid,
  .compact-card-list,
  .feature-list-grid,
  .deep-dive-cards,
  .lens-grid,
  .diagnostic-grid,
  .strategy-grid,
  .screening-grid {
    grid-template-columns: 1fr !important;
  }

  .map-reading-callout,
  .graph-command-bar .top-actions {
    grid-template-columns: 1fr !important;
  }

  .map-panel {
    min-height: 520px !important;
  }

  .graph-workbench .right-panel {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Contrast correction pass: keep the light UI, but never use pale mint/cyan
   text on pale cards. Older page CSS still emits dark-theme accent colors. */
:root {
  --readable-brand: #3730a3;
  --readable-brand-strong: #312e81;
  --readable-observed: #1d4ed8;
  --readable-derived: #0f766e;
  --readable-estimated: #92400e;
  --readable-neutral: #334155;
  --readable-subtle: #475569;
}

.overview-card span,
.overview-card small,
.report-kpi span,
.report-kpi small,
.hero-stat-card span,
.hero-stat-card small,
.summary-card > span:not(.value-kind-badge),
.official-result-card > span:not(.value-kind-badge),
.fact-summary-card > span:not(.value-kind-badge),
.impact-metric-card > span:not(.value-kind-badge),
.factor-card > span:not(.value-kind-badge),
.current-view-summary span,
.ranking-contract span,
.ranking-contract small,
.contract-state-block span,
.contract-state-block small,
.table-status,
.table-status small,
.table-status .rank-meaning,
.ranking-table-note,
.inspector-note,
.selected-copy,
.selected-song-note,
.guide-figure-note,
.guide-axis-card p,
.guide-quick-grid span,
.guide-peak-chip span,
.denominator-row span,
.vote-point-strip b,
.rank-band-bar small,
.stage-path-card span,
.stage-path-card small,
.stage-result-metrics span,
.stage-position-kpis span,
.stage-shift-list span,
.stage-context-row small,
.stage-position-card-head span,
.stage-position-card-head em,
.vote-stage-tab span,
.vote-stage-tab small {
  color: var(--readable-subtle) !important;
  opacity: 1 !important;
}

.lens-card em,
.lens-card small,
.lens-coverage,
.deep-dive-caution,
.deep-dive-empty,
.deep-dive-preview-song small,
.deep-dive-position-preview span,
.lens-readout-score span,
.lens-readout-score small,
.lens-formula-card > span,
.lens-readout-target > span,
.lens-evidence-title,
.lens-evidence-card span,
.lens-evidence-card small,
.evidence-legend > span:not(.value-kind-badge),
.model-track-legend span,
.chart-legend span,
.range-legend span,
.model-momentum-legend span,
.official-score-legend span {
  color: var(--readable-subtle) !important;
  opacity: 1 !important;
}

.control-label,
.map-search-control span,
.basis-control-group .control-label,
.graph-controls span,
.graph-controls > summary,
.legend-detail > summary,
.map-legend,
.legend-item {
  color: var(--readable-neutral) !important;
  opacity: 1 !important;
}

.overview-card span,
.report-kpi span,
.hero-stat-card span,
.deep-dive-card-kicker,
.lens-card > span,
.diagnostic-card-head > span,
.strategy-card > span,
.screening-card > span,
.guide-figure-title,
.guide-lens-grid span,
.guide-peak-chip span,
.guide-axis-head span,
.profile-detail-kicker,
.profile-index,
.methodology-card span,
.overview-value-kind-grid article span {
  color: var(--readable-derived) !important;
  font-weight: 900 !important;
  opacity: 1 !important;
}

.tag,
.metric-chip,
.value-badge,
.value-kind-badge,
.evidence-badge,
.rank-badge,
.profile-chip,
.profile-strength,
.stat-pill,
.current-vote-stage,
.guide-filter-tab,
.journey-chip,
.table-stage-tab,
.stage-button,
.type-button,
.ruler-button,
.mode-tab,
.segment,
.graph-state-chip,
.ranking-state-chip,
.contract-chip,
.contract-filter-chip,
.state-filter-chip,
.signal-chip,
.status-chip,
.phase-chip,
.trend-chip,
.deep-dive-chip-list span,
.vote-band-legend span,
.rank-band-bar span,
.guide-route-links a,
.page-reading-grid a,
.purpose-route-grid a,
.guide-method-link,
.guide-peak-chip,
.screening-card .tag-row span,
.diagnosis-card-tags span,
.diagnosis-card-metrics span,
.action-chip-row span {
  color: var(--readable-neutral) !important;
  background: #f8fafc !important;
  border-color: var(--color-border-strong) !important;
  opacity: 1 !important;
}

.tag.accent,
.metric-chip.accent,
.stat-pill.accent,
.deep-dive-chip-list span,
.guide-lens-grid span,
.guide-peak-chip,
.signal-chip.wide,
.signal-chip.strong,
.signal-chip.lowRisk,
.signal-chip.riser,
.status-chip.advanced,
.status-chip.finalist,
.phase-chip.advanced,
.phase-chip.finalist,
.state-filter-chip,
.contract-filter-chip {
  color: var(--readable-derived) !important;
  background: #ecfdf5 !important;
  border-color: #5eead4 !important;
}

.value-badge.observed,
.value-kind-badge.observed,
.evidence-badge.observed,
.data-class-badge.observed,
.summary-card > .value-kind-badge.observed,
.official-result-card > .value-kind-badge.observed,
.fact-summary-card > .value-kind-badge.observed {
  color: var(--readable-observed) !important;
  background: #eff6ff !important;
  border-color: #93c5fd !important;
}

.value-badge.derived,
.value-kind-badge.derived,
.evidence-badge.derived,
.data-class-badge.derived,
.summary-card > .value-kind-badge.derived,
.official-result-card > .value-kind-badge.derived,
.fact-summary-card > .value-kind-badge.derived {
  color: var(--readable-derived) !important;
  background: #f0fdfa !important;
  border-color: #5eead4 !important;
}

.value-badge.estimated,
.value-kind-badge.estimated,
.evidence-badge.estimated,
.data-class-badge.estimated,
.summary-card > .value-kind-badge.estimated,
.official-result-card > .value-kind-badge.estimated,
.fact-summary-card > .value-kind-badge.estimated,
.estimated-warning .value-kind-badge {
  color: var(--readable-estimated) !important;
  background: #fffbeb !important;
  border-color: #fbbf24 !important;
}

.primary-button,
.button-link.primary,
.shell-quick-search button,
.lens-actions button:first-child,
.diagnostic-actions button:first-child,
.strategy-actions button:first-child,
.ranking-primary-action,
.song-hero-action-group.primary-actions .button-link {
  color: #ffffff !important;
  background: var(--color-brand) !important;
  border-color: var(--color-brand) !important;
  opacity: 1 !important;
}

.secondary-button,
.button-link.secondary,
.button-link:not(.primary),
.lens-actions button,
.diagnostic-actions button,
.strategy-actions button,
.deep-dive-card .action-link,
.stage-result-action,
.vote-stage-tab,
.ranking-table-toolbar button,
.scroll-context-bar a,
.scroll-context-bar button,
.selected-actions a,
.selected-actions button {
  color: var(--readable-brand) !important;
  background: #ffffff !important;
  border-color: var(--color-border-strong) !important;
  opacity: 1 !important;
}

.evidence-legend a,
.guide-method-link,
.profile-guide-link,
.ranking-read-guide .action-link,
.report-data-more .action-link,
.selected-detail-drawer a {
  color: var(--readable-brand) !important;
  background: #ffffff !important;
  border-color: var(--color-border-strong) !important;
  opacity: 1 !important;
}

button:disabled,
button[disabled],
input:disabled,
select:disabled,
.disabled,
[aria-disabled="true"],
.stage-result-action.disabled,
.button-link.disabled,
.button-link[aria-disabled="true"],
.scroll-context-bar [aria-disabled="true"],
.scroll-context-bar .disabled {
  color: #64748b !important;
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

.guide-figure,
.quadrant-frame,
.denominator-row,
.guide-axis-card,
.guide-start-card,
.guide-lens-grid article,
.page-reading-grid article,
.purpose-route-grid article {
  background: #ffffff !important;
}

.quadrant-cell,
.quadrant-frame .quadrant-cell,
.guide-figure .axis-y,
.guide-figure .axis-x,
.axis-y,
.axis-x {
  color: var(--readable-neutral) !important;
  background: #ffffff !important;
  border-color: var(--color-border-strong) !important;
  opacity: 1 !important;
}

.rank-band-bar .top-band,
.vote-band-legend .top-band,
.vote-point-strip .top-band {
  color: #0f172a !important;
  background: #f0fdfa !important;
  border-color: #5eead4 !important;
}

.rank-band-bar .mid-band,
.vote-band-legend .mid-band,
.vote-point-strip .mid-band {
  color: #0f172a !important;
  background: #eff6ff !important;
  border-color: #93c5fd !important;
}

.rank-band-bar .low-band,
.vote-band-legend .low-band,
.vote-point-strip .low-band {
  color: #0f172a !important;
  background: #fff7ed !important;
  border-color: #fdba74 !important;
}

.rank-band-bar strong,
.vote-band-legend strong,
.vote-point-strip strong,
.denominator-row strong,
.guide-axis-card strong,
.guide-start-card h3,
.guide-lens-grid strong,
.page-reading-grid strong,
.purpose-route-grid strong {
  color: var(--color-text) !important;
  opacity: 1 !important;
}

.map-panel .stat-pill,
.map-panel .tag,
.map-panel .graph-state-chip,
.map-panel .ranking-state-chip,
.map-panel .legend-chip,
.map-panel .legend-item,
.map-panel .legend-detail > summary,
.map-panel .map-legend,
.graph-workbench .stat-pill,
.graph-workbench .tag,
.graph-workbench .graph-state-chip,
.graph-workbench .ranking-state-chip,
.graph-workbench .legend-chip,
.graph-workbench .legend-item,
.graph-workbench .legend-detail > summary,
.graph-workbench .map-legend {
  color: #e2e8f0 !important;
  background: rgb(15 23 42 / 0.72) !important;
  border-color: rgb(148 163 184 / 0.36) !important;
}

.map-panel button:disabled,
.graph-workbench button:disabled,
.map-panel .disabled,
.graph-workbench .disabled,
.map-panel [aria-disabled="true"],
.graph-workbench [aria-disabled="true"] {
  color: #94a3b8 !important;
  background: rgb(15 23 42 / 0.52) !important;
  border-color: rgb(148 163 184 / 0.24) !important;
}

/* Light-mode repair for panels that only appear after opening analysis views,
   diagnosis tabs, or disclosure sections. These must not inherit dark cards. */
.rankings-shell .ranking-deep-dive,
.rankings-shell .deep-dive-panel,
.rankings-shell .analysis-lens-panel,
.rankings-shell .strategy-panel,
.rankings-shell .diagnostic-panel,
.rankings-shell .positioning-panel,
.rankings-shell .distribution-panel,
.rankings-shell .ranking-visual-panel,
.rankings-shell .selection-summary,
.rankings-shell .insight-panel,
.rankings-shell .deep-dive-theme-state,
.rankings-shell .deep-dive-card,
.rankings-shell .deep-dive-preview-song,
.rankings-shell .lens-card,
.rankings-shell .lens-readout,
.rankings-shell .lens-readout-score,
.rankings-shell .lens-formula-card,
.rankings-shell .lens-readout-target,
.rankings-shell .lens-evidence-card,
.rankings-shell .position-lens-card,
.rankings-shell .stage-path-card,
.rankings-shell .lens-readout-main {
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  box-shadow: var(--ds-shadow-sm) !important;
}

.rankings-shell .deep-dive-card.active,
.rankings-shell .lens-card.active,
.rankings-shell .position-lens-card.good,
.rankings-shell .stage-path-card.finalist,
.rankings-shell .stage-path-card.advanced {
  color: var(--color-text) !important;
  background: linear-gradient(180deg, #ffffff 0%, var(--color-brand-soft) 100%) !important;
  border-color: var(--color-brand-border) !important;
  box-shadow: inset 3px 0 0 var(--color-brand), var(--ds-shadow-sm) !important;
}

.rankings-shell .position-lens-card.risk,
.rankings-shell .stage-path-card.eliminated {
  color: var(--color-text) !important;
  background: var(--color-warning-soft) !important;
  border-color: var(--color-estimated-border) !important;
}

.rankings-shell .deep-dive-card strong,
.rankings-shell .deep-dive-theme-state strong,
.rankings-shell .deep-dive-preview-song strong,
.rankings-shell .lens-card strong,
.rankings-shell .lens-readout h3,
.rankings-shell .lens-readout-score strong,
.rankings-shell .lens-formula-card strong,
.rankings-shell .lens-readout-target strong,
.rankings-shell .lens-evidence-card strong,
.rankings-shell .position-lens-card strong,
.rankings-shell .stage-path-card strong,
.rankings-shell .selection-summary strong,
.rankings-shell .insight-panel strong {
  color: var(--color-text) !important;
  opacity: 1 !important;
}

.rankings-shell .deep-dive-card p,
.rankings-shell .deep-dive-card small,
.rankings-shell .deep-dive-empty,
.rankings-shell .deep-dive-caution,
.rankings-shell .deep-dive-theme-state span,
.rankings-shell .deep-dive-preview-song small,
.rankings-shell .lens-card p,
.rankings-shell .lens-card small,
.rankings-shell .lens-card em,
.rankings-shell .lens-readout p,
.rankings-shell .lens-readout-score span,
.rankings-shell .lens-readout-score small,
.rankings-shell .lens-evidence-card p,
.rankings-shell .position-lens-card p,
.rankings-shell .position-lens-card span,
.rankings-shell .position-lens-card em,
.rankings-shell .stage-path-card span,
.rankings-shell .stage-path-card small {
  color: var(--color-text-muted) !important;
  opacity: 1 !important;
}

.rankings-shell .deep-dive-card-kicker,
.rankings-shell .lens-readout-kicker,
.rankings-shell .lens-formula-card > span,
.rankings-shell .lens-readout-target > span,
.rankings-shell .lens-evidence-title,
.rankings-shell .lens-evidence-card small,
.rankings-shell .deep-dive-position-preview strong {
  color: var(--readable-derived) !important;
  opacity: 1 !important;
}

.rankings-shell .deep-dive-theme-state button,
.rankings-shell .deep-dive-chip-list span,
.rankings-shell .deep-dive-position-preview span,
.rankings-shell .lens-actions button,
.rankings-shell .diagnostic-actions button,
.rankings-shell .strategy-actions button {
  color: var(--readable-brand) !important;
  background: #ffffff !important;
  border-color: var(--color-border-strong) !important;
  opacity: 1 !important;
}

.rankings-shell .lens-actions button:first-child,
.rankings-shell .diagnostic-actions button:first-child,
.rankings-shell .strategy-actions button:first-child {
  color: #ffffff !important;
  background: var(--color-brand) !important;
  border-color: var(--color-brand) !important;
}

.song-shell .reached-box,
.song-shell .stage-step,
.song-shell .stage-vote-card,
.song-shell .stage-rank-cell,
.song-shell .vote-bars,
.song-shell .vote-row,
.song-shell .type-card,
.song-shell .band-item,
.song-shell .copy-item,
.song-shell .journey-row,
.song-shell .model-card,
.song-shell .model-card-head em,
.song-shell .model-verdict div,
.song-shell .model-metric-row,
.song-shell .model-track-list,
.song-shell .comparison-board,
.song-shell .comparison-card,
.song-shell .similar-panel,
.song-shell .similar-column,
.song-shell .similar-panel .similar-row {
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  box-shadow: var(--ds-shadow-sm) !important;
}

.song-shell .reached-box,
.song-shell .stage-step.done,
.song-shell .stage-step.active,
.song-shell .stage-vote-card.active,
.song-shell .copy-item.good,
.song-shell .journey-row.active,
.song-shell .model-card.good,
.song-shell .comparison-card.good {
  background: var(--color-success-soft) !important;
  border-color: #86efac !important;
}

.song-shell .copy-item.warn,
.song-shell .copy-item.risk,
.song-shell .model-card.risk,
.song-shell .comparison-card.risk {
  background: var(--color-warning-soft) !important;
  border-color: var(--color-estimated-border) !important;
}

.song-shell .stage-vote-card strong,
.song-shell .stage-rank-cell strong,
.song-shell .type-card strong,
.song-shell .band-item strong,
.song-shell .copy-item strong,
.song-shell .journey-row strong,
.song-shell .model-card-head strong,
.song-shell .model-verdict strong,
.song-shell .model-track-label strong,
.song-shell .comparison-board-head strong,
.song-shell .comparison-title strong,
.song-shell .comparison-card strong,
.song-shell .similar-panel .similar-row strong,
.song-shell .similar-name {
  color: var(--color-text) !important;
  opacity: 1 !important;
}

.song-shell .model-card.good .model-card-head strong,
.song-shell .model-track-row.good .model-track-label strong,
.song-shell .comparison-card.good .comparison-title em {
  color: var(--color-success) !important;
}

.song-shell .model-card.risk .model-card-head strong,
.song-shell .model-track-row.risk .model-track-label strong,
.song-shell .comparison-card.risk .comparison-title em {
  color: var(--color-estimated) !important;
}

.song-shell .stage-vote-card span,
.song-shell .stage-vote-card small,
.song-shell .stage-vote-meta,
.song-shell .stage-vote-link,
.song-shell .stage-rank-cell span,
.song-shell .type-card p,
.song-shell .band-item span,
.song-shell .copy-item p,
.song-shell .journey-row small,
.song-shell .model-card-head span,
.song-shell .model-card-head em,
.song-shell .model-verdict span,
.song-shell .model-metric-row span,
.song-shell .model-track-label span,
.song-shell .model-track-values span,
.song-shell .model-track-values,
.song-shell .model-narrative,
.song-shell .comparison-board-head span,
.song-shell .comparison-board-head small,
.song-shell .comparison-title em,
.song-shell .comparison-card p,
.song-shell .similar-panel .similar-row span,
.song-shell .similar-panel .similar-row small,
.song-shell .similar-score,
.song-shell .panel-note {
  color: var(--color-text-muted) !important;
  opacity: 1 !important;
}

.song-shell .similar-actions a,
.song-shell .stage-vote-link,
.song-shell .button-link.secondary,
.song-shell .button-link.ghost {
  color: var(--readable-brand) !important;
  background: #ffffff !important;
  border-color: var(--color-border-strong) !important;
  opacity: 1 !important;
}

.song-shell .button-link.primary {
  color: #ffffff !important;
  background: var(--color-brand) !important;
  border-color: var(--color-brand) !important;
}

.song-shell .vote-bar-col:nth-child(-n + 3) .vote-bar-fill,
.song-shell .stage-rank-cell:nth-child(-n + 3) .stage-rank-fill {
  background: var(--color-observed) !important;
}

.song-shell .vote-bar-col:nth-child(n + 4):nth-child(-n + 7) .vote-bar-fill,
.song-shell .stage-rank-cell:nth-child(n + 4):nth-child(-n + 7) .stage-rank-fill {
  background: var(--color-derived) !important;
}

.song-shell .vote-bar-col:nth-child(n + 8) .vote-bar-fill,
.song-shell .stage-rank-cell:nth-child(n + 8) .stage-rank-fill {
  background: var(--color-estimated) !important;
}

/* Hidden panel contrast hardening.
   Several drill-down panels were originally authored as dark cards. In the
   current light system they must render as light data panels with readable text. */
.rankings-shell .ranking-workbench-head,
.rankings-shell .ranking-search-panel,
.rankings-shell .ranking-controls,
.rankings-shell .ranking-detail-filters,
.rankings-shell .ranking-contract,
.rankings-shell .screening-controls,
.rankings-shell .screening-grid,
.rankings-shell .screening-head,
.rankings-shell .summary-tile,
.rankings-shell .ranking-table-toolbar,
.rankings-shell .ranking-results-workbench,
.rankings-shell .rankings-table-card,
.rankings-shell .row-inspector-card,
.rankings-shell .compare-panel,
.rankings-shell .compare-empty,
.rankings-shell .strategy-card,
.rankings-shell .strategy-candidate,
.rankings-shell .strategy-action,
.rankings-shell .diagnostic-card,
.rankings-shell .position-card,
.rankings-shell .position-candidate,
.rankings-shell .insight-grid,
.rankings-shell .insight-card,
.rankings-shell .distribution-card,
.rankings-shell .distribution-use,
.rankings-shell .ranking-visual-state,
.rankings-shell .ranking-visual-card,
.rankings-shell .profile-mix-list button,
.rankings-shell .visual-bar-row > div,
.rankings-shell .row-inspector,
.rankings-shell .ranking-mobile-card,
.rankings-shell .mobile-selected-metric,
.rankings-shell .mobile-metrics div,
.rankings-shell .ranking-read-guide {
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  box-shadow: var(--ds-shadow-sm) !important;
  opacity: 1 !important;
}

.rankings-shell .strategy-card,
.rankings-shell .diagnostic-card,
.rankings-shell .position-card {
  border-left-color: var(--color-derived) !important;
}

.rankings-shell .diagnostic-card.discover,
.rankings-shell .position-card.core {
  background: var(--color-derived-soft) !important;
  border-color: var(--color-derived-border) !important;
  border-left-color: var(--color-derived) !important;
}

.rankings-shell .diagnostic-card.borderline,
.rankings-shell .position-card.lowSignal {
  background: var(--color-warning-soft) !important;
  border-color: var(--color-estimated-border) !important;
  border-left-color: var(--color-estimated) !important;
}

.rankings-shell .ranking-workbench-head *,
.rankings-shell .ranking-search-panel *,
.rankings-shell .ranking-controls *,
.rankings-shell .ranking-detail-filters *,
.rankings-shell .ranking-contract *,
.rankings-shell .screening-controls *,
.rankings-shell .screening-grid *,
.rankings-shell .ranking-table-toolbar *,
.rankings-shell .ranking-results-workbench *,
.rankings-shell .rankings-table-card *,
.rankings-shell .row-inspector-card *,
.rankings-shell .compare-panel *,
.rankings-shell .strategy-panel *,
.rankings-shell .diagnostic-panel *,
.rankings-shell .positioning-panel *,
.rankings-shell .distribution-panel *,
.rankings-shell .ranking-visual-panel *,
.rankings-shell .ranking-read-guide * {
  text-shadow: none !important;
  opacity: 1;
}

.rankings-shell .strategy-card-head span,
.rankings-shell .strategy-card .song-title,
.rankings-shell .strategy-card .song-cell strong,
.rankings-shell .strategy-card strong,
.rankings-shell .diagnostic-card-head span,
.rankings-shell .diagnostic-card .song-title,
.rankings-shell .diagnostic-card .song-cell strong,
.rankings-shell .diagnostic-card strong,
.rankings-shell .position-head .panel-title,
.rankings-shell .position-card-head span,
.rankings-shell .position-card .song-title,
.rankings-shell .position-card .song-cell strong,
.rankings-shell .insight-card strong,
.rankings-shell .distribution-card > span,
.rankings-shell .distribution-bin b,
.rankings-shell .result-mix-row b,
.rankings-shell .distribution-use strong,
.rankings-shell .ranking-visual-state strong,
.rankings-shell .ranking-visual-card > strong,
.rankings-shell .visual-bar-row strong,
.rankings-shell .visual-bar-row em,
.rankings-shell .profile-mix-list b,
.rankings-shell .profile-mix-list span,
.rankings-shell .row-inspector strong,
.rankings-shell .rankings-table-card .song-title,
.rankings-shell .ranking-mobile-card strong,
.rankings-shell .mobile-selected-metric strong,
.rankings-shell .mobile-metrics dd,
.rankings-shell .ranking-read-guide strong {
  color: var(--color-text) !important;
}

.rankings-shell .strategy-card-head p,
.rankings-shell .strategy-action p,
.rankings-shell .strategy-candidate-main small,
.rankings-shell .strategy-card .song-cell span,
.rankings-shell .diagnostic-card-head p,
.rankings-shell .diagnostic-card small,
.rankings-shell .diagnostic-card .song-cell span,
.rankings-shell .position-head p,
.rankings-shell .position-head > span,
.rankings-shell .position-card-head p,
.rankings-shell .position-candidate-main small,
.rankings-shell .position-card .song-cell span,
.rankings-shell .insight-card > span,
.rankings-shell .distribution-card-note,
.rankings-shell .distribution-bin small,
.rankings-shell .result-mix-row small,
.rankings-shell .distribution-use span,
.rankings-shell .ranking-visual-state > span,
.rankings-shell .ranking-visual-state em,
.rankings-shell .visual-card-note,
.rankings-shell .visual-bar-row > span,
.rankings-shell .scatter-axis,
.rankings-shell .scatter-guide,
.rankings-shell .row-inspector span,
.rankings-shell .row-inspector small,
.rankings-shell .ranking-mobile-card span,
.rankings-shell .mobile-stage,
.rankings-shell .mobile-selected-metric span,
.rankings-shell .mobile-metrics dt,
.rankings-shell .ranking-read-guide p,
.rankings-shell .ranking-read-guide li {
  color: var(--color-text-muted) !important;
}

.rankings-shell .strategy-card-head button,
.rankings-shell .strategy-action button,
.rankings-shell .strategy-index,
.rankings-shell .position-actions button,
.rankings-shell .position-index,
.rankings-shell .insight-actions a,
.rankings-shell .insight-actions button,
.rankings-shell .screening-head button,
.rankings-shell .ranking-read-guide .action-link,
.rankings-shell .mobile-actions a,
.rankings-shell .mobile-actions button {
  color: var(--readable-brand) !important;
  background: #ffffff !important;
  border-color: var(--color-border-strong) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

.rankings-shell .strategy-card-head button:hover,
.rankings-shell .strategy-action button:hover,
.rankings-shell .strategy-index:hover,
.rankings-shell .position-actions button:hover,
.rankings-shell .position-index:hover,
.rankings-shell .insight-actions a:hover,
.rankings-shell .insight-actions button:hover,
.rankings-shell .screening-head button:hover,
.rankings-shell .ranking-read-guide .action-link:hover {
  color: #ffffff !important;
  background: var(--color-brand) !important;
  border-color: var(--color-brand) !important;
}

.rankings-shell .signal-chip,
.rankings-shell .chip,
.rankings-shell .filter-chip,
.rankings-shell .state-chip,
.rankings-shell .tag-row span {
  color: var(--readable-neutral) !important;
  background: #ffffff !important;
  border-color: var(--color-border-strong) !important;
}

.rankings-shell .signal-chip.up,
.rankings-shell .signal-chip.gapPlus {
  color: var(--color-success) !important;
  background: var(--color-success-soft) !important;
  border-color: #86efac !important;
}

.rankings-shell .signal-chip.down,
.rankings-shell .signal-chip.gapMinus {
  color: var(--color-estimated) !important;
  background: var(--color-warning-soft) !important;
  border-color: var(--color-estimated-border) !important;
}

.song-shell .stage-position-panel,
.song-shell .stage-position-result,
.song-shell .stage-position-card,
.song-shell .position-map-panel,
.song-shell .position-row,
.song-shell .required-table,
.song-shell .fact-table-card,
.song-shell .model-metric-table,
.song-shell .composition-card,
.song-shell .official-score-composition,
.song-shell .stage-result-table,
.song-shell .diagnosis-guide-card,
.song-shell .vote-stage-tab,
.song-shell .mobile-tab,
.song-shell .mobile-score-composition,
.song-shell .mobile-score-composition .composition-card {
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  box-shadow: var(--ds-shadow-sm) !important;
  opacity: 1 !important;
}

.song-shell .stage-position-card.active,
.song-shell .position-row.good,
.song-shell .vote-stage-tab.active,
.song-shell .mobile-tab.active {
  background: var(--color-success-soft) !important;
  border-color: #86efac !important;
}

.song-shell .stage-position-card.missing,
.song-shell .position-row.risk,
.song-shell .composition-row.low {
  background: var(--color-warning-soft) !important;
  border-color: var(--color-estimated-border) !important;
}

.song-shell .stage-position-card-head span,
.song-shell .stage-position-card-head strong,
.song-shell .stage-position-kpis b,
.song-shell .stage-position-result strong,
.song-shell .position-row strong,
.song-shell .position-row em,
.song-shell .required-table strong,
.song-shell .fact-table-card strong,
.song-shell .model-metric-table strong,
.song-shell .composition-row strong,
.song-shell .composition-total strong,
.song-shell .official-score-composition strong,
.song-shell .stage-result-table strong,
.song-shell .vote-stage-tab strong,
.song-shell .mobile-tab strong {
  color: var(--color-text) !important;
  opacity: 1 !important;
}

.song-shell .stage-position-card-head em,
.song-shell .stage-position-card-head span,
.song-shell .stage-position-kpis span,
.song-shell .stage-position-card.missing p,
.song-shell .stage-position-result span,
.song-shell .stage-position-result small,
.song-shell .position-label span,
.song-shell .position-label small,
.song-shell .required-table td,
.song-shell .fact-table-card p,
.song-shell .model-metric-table td,
.song-shell .composition-row span,
.song-shell .official-score-composition span,
.song-shell .stage-result-table td,
.song-shell .vote-stage-tab span,
.song-shell .vote-stage-tab small,
.song-shell .mobile-tab span,
.song-shell .mobile-tab small {
  color: var(--color-text-muted) !important;
  opacity: 1 !important;
}

.song-shell .report-tabs a,
.song-shell .vote-stage-tab,
.song-shell .mobile-tab {
  color: var(--readable-brand) !important;
  background: #ffffff !important;
  border-color: var(--color-border-strong) !important;
}

.song-shell .report-tabs a.active,
.song-shell .report-tabs a:hover,
.song-shell .vote-stage-tab.active,
.song-shell .vote-stage-tab:hover,
.song-shell .mobile-tab.active {
  color: #ffffff !important;
  background: var(--color-brand) !important;
  border-color: var(--color-brand) !important;
}

/* Full-site contrast repair for legacy components left outside the first pass. */
.overview-shell .overview-figure,
.overview-shell .overview-site-map a,
.overview-shell .overview-inline-cta,
.overview-shell .overview-secondary-detail > summary {
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
  border-color: var(--color-border-strong) !important;
}

.overview-shell .overview-figure-title,
.overview-shell .overview-site-map a strong {
  color: var(--color-text) !important;
}

.overview-shell .overview-inline-cta,
.overview-shell .overview-secondary-detail > summary {
  color: var(--readable-brand) !important;
}

.guide-shell .guide-axis-card,
.guide-shell .guide-filter-tab,
.guide-shell .guide-type-card,
.guide-shell .guide-type-card .guide-bars,
.guide-shell .guide-mini-metrics span,
.guide-shell .guide-peak-chip {
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  box-shadow: var(--ds-shadow-sm) !important;
}

.guide-shell .guide-filter-tab.active,
.guide-shell .guide-type-card.active {
  background: var(--color-brand-soft) !important;
  border-color: var(--color-brand-border) !important;
}

.guide-shell .guide-axis-card strong,
.guide-shell .guide-filter-tab span,
.guide-shell .guide-filter-tab strong,
.guide-shell .guide-type-head h2,
.guide-shell .guide-mini-metrics strong,
.guide-shell .guide-peak-chip strong {
  color: var(--color-text) !important;
}

.guide-shell .guide-axis-card p,
.guide-shell .guide-type-head p,
.guide-shell .guide-mini-metrics b,
.guide-shell .guide-peak-chip span {
  color: var(--color-text-muted) !important;
}

.guide-shell .cutoff-axis .negative,
.guide-shell .type-node.split,
.guide-shell .type-node.stable,
.guide-shell .type-node.low-wide,
.guide-shell .type-node.low-narrow {
  color: var(--color-estimated) !important;
  background: var(--color-warning-soft) !important;
  border-color: var(--color-estimated-border) !important;
}

.guide-shell .cutoff-axis .positive,
.guide-shell .type-node.top-wide,
.guide-shell .type-node.top-narrow {
  color: var(--color-success) !important;
  background: var(--color-success-soft) !important;
  border-color: #86efac !important;
}

.methodology-shell .methodology-hero p:not(.eyebrow),
.methodology-shell .methodology-section-head p:not(.eyebrow) {
  color: var(--color-text-muted) !important;
}

.methodology-shell .next-view-links a.secondary {
  color: var(--readable-brand) !important;
  background: #ffffff !important;
  border-color: var(--color-border-strong) !important;
}

.methodology-shell .next-view-links a.secondary:hover {
  color: #ffffff !important;
  background: var(--color-brand) !important;
  border-color: var(--color-brand) !important;
}

.graph-shell .graph-command-bar,
.graph-shell .left-panel,
.graph-shell .right-panel,
.graph-shell .side-panel,
.graph-shell .selected-card,
.graph-shell .type-explainer,
.graph-shell .shape-reading,
.graph-shell .selected-ruler,
.graph-shell .selected-detail-drawer,
.graph-shell .selected-metrics .metric-card,
.graph-shell .song-list,
.graph-shell .song-list-item,
.graph-shell .type-button,
.graph-shell .stage-button,
.graph-shell .filter-drawer > summary,
.graph-shell .legend-detail > summary {
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}

.graph-shell .map-panel {
  color: #e5f4f2 !important;
}

.graph-shell .map-panel h2,
.graph-shell .map-panel strong,
.graph-shell .map-reading-callout strong {
  color: #f8fafc !important;
}

.graph-shell .map-panel span,
.graph-shell .map-panel small,
.graph-shell .map-panel p,
.graph-shell .type-mini-all,
.graph-shell .type-count {
  color: #cbd5e1 !important;
}

.graph-shell .side-panel .eyebrow,
.graph-shell .selected-card-kicker,
.graph-shell .type-cue,
.graph-shell .type-explainer-kicker,
.graph-shell .shape-reading-head span {
  color: var(--readable-derived) !important;
}

.graph-shell .selected-title,
.graph-shell .selected-card strong,
.graph-shell .type-explainer-title,
.graph-shell .shape-reading strong,
.graph-shell .song-list-item strong,
.graph-shell .type-name {
  color: var(--color-text) !important;
}

.graph-shell .selected-artist,
.graph-shell .selected-card span,
.graph-shell .selected-card small,
.graph-shell .selected-note,
.graph-shell .type-explainer p,
.graph-shell .shape-reading p,
.graph-shell .type-help-text,
.graph-shell .song-list-item small,
.graph-shell .type-count {
  color: var(--color-text-muted) !important;
}

.song-shell .path-summary-item,
.song-shell .stage-result-stage,
.song-shell .stage-result-rank,
.song-shell .disclosure-panel > summary,
.song-shell .vote-detail-disclosure > summary,
.song-shell .stage-result-mobile-details > summary,
.song-shell .advanced-analysis-disclosure > summary,
.song-shell .model-metric-details summary,
.song-shell .action-lab-summary > div {
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
  border-color: var(--color-border-strong) !important;
  box-shadow: var(--ds-shadow-sm) !important;
}

.song-shell .path-summary-item span,
.song-shell .path-summary-item small,
.song-shell .stage-result-stage span,
.song-shell .stage-result-rank span,
.song-shell .disclosure-panel > summary small,
.song-shell .vote-detail-disclosure > summary small,
.song-shell .stage-result-mobile-details > summary small,
.song-shell .advanced-analysis-disclosure > summary small,
.song-shell .action-lab-summary span,
.song-shell .action-lab-summary p {
  color: var(--color-text-muted) !important;
}

.song-shell .path-summary-item strong,
.song-shell .stage-result-stage strong,
.song-shell .stage-result-rank strong,
.song-shell .disclosure-panel > summary span,
.song-shell .vote-detail-disclosure > summary span,
.song-shell .stage-result-mobile-details > summary span,
.song-shell .advanced-analysis-disclosure > summary span,
.song-shell .action-lab-summary strong {
  color: var(--color-text) !important;
}

/* Final contrast hardening pass: keep semantic colors, but never at unreadable
   contrast in nested or disclosure-only UI. */
.data-footer a,
.data-footer span,
.data-footer .export-links a {
  color: var(--readable-brand) !important;
  opacity: 1 !important;
}

.data-footer p,
.data-footer small {
  color: var(--color-text-muted) !important;
  opacity: 1 !important;
}

.info-tip,
.rankings-shell .info-tip,
.song-shell .info-tip,
.guide-shell .info-tip,
.graph-shell .info-tip {
  color: #ffffff !important;
  background: #334155 !important;
  border-color: #334155 !important;
  opacity: 1 !important;
}

.guide-shell .guide-type-summary article span,
.guide-shell #guideSummary article span,
.guide-shell .guide-summary article span {
  color: var(--readable-derived) !important;
  background: var(--color-derived-soft) !important;
  border: 1px solid var(--color-derived-border) !important;
  opacity: 1 !important;
}

.guide-shell .cutoff-axis .positive,
.guide-shell .type-node.top-wide,
.guide-shell .type-node.top-narrow {
  color: var(--readable-derived) !important;
  background: var(--color-derived-soft) !important;
  border-color: var(--color-derived-border) !important;
  opacity: 1 !important;
}

.guide-shell .cutoff-axis .negative,
.guide-shell .type-node.split,
.guide-shell .type-node.stable,
.guide-shell .type-node.low-wide,
.guide-shell .type-node.low-narrow {
  color: var(--readable-estimated) !important;
  background: var(--color-warning-soft) !important;
  border-color: var(--color-estimated-border) !important;
  opacity: 1 !important;
}

.guide-shell .quadrant-cell,
.guide-shell .quadrant-label,
.guide-shell .guide-figure-caption,
.guide-shell .guide-figure-note {
  color: var(--color-text-muted) !important;
  opacity: 1 !important;
}

.guide-shell .quadrant-cell.high,
.guide-shell .quadrant-cell.wide {
  color: var(--color-text) !important;
}

.methodology-shell .topbar p,
.methodology-shell .topbar span,
.methodology-shell .methodology-hero span,
.methodology-shell .methodology-hero p,
.methodology-shell .methodology-section-head p {
  color: var(--color-text-muted) !important;
  opacity: 1 !important;
}

.graph-shell .map-reading-callout,
.graph-shell .map-reading-callout strong,
.graph-shell .map-reading-callout span,
.graph-shell .map-reading-callout p {
  color: var(--color-text) !important;
  opacity: 1 !important;
}

.graph-shell .map-reading-callout {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
}

.graph-shell .map-reading-callout span,
.graph-shell .map-reading-callout p {
  color: var(--color-text-muted) !important;
}

.graph-shell .filter-drawer > summary,
.graph-shell .filter-drawer > summary span,
.graph-shell .filter-drawer > summary small,
.graph-shell .legend-detail > summary,
.graph-shell .legend-detail > summary span {
  color: var(--color-text) !important;
  background: #ffffff !important;
  opacity: 1 !important;
}

.graph-shell .type-button,
.graph-shell .type-button *,
.graph-shell .stage-button,
.graph-shell .stage-button *,
.graph-shell .status-button,
.graph-shell .status-button * {
  color: var(--color-text) !important;
  opacity: 1 !important;
}

.graph-shell .type-mini-all,
.graph-shell .type-count,
.graph-shell .type-button small,
.graph-shell .stage-button small,
.graph-shell .status-button small {
  color: var(--color-text-muted) !important;
}

.graph-shell .type-button.active,
.graph-shell .stage-button.active,
.graph-shell .status-button.active {
  color: var(--readable-brand) !important;
  background: var(--color-brand-soft) !important;
  border-color: var(--color-brand-border) !important;
}

.rankings-shell .deep-dive-panel,
.rankings-shell .analysis-lens-panel,
.rankings-shell .nonfinalist-panel,
.rankings-shell .diagnostic-panel,
.rankings-shell .positioning-panel,
.rankings-shell .distribution-panel,
.rankings-shell .ranking-visualization-panel,
.rankings-shell .lens-card,
.rankings-shell .lens-card *,
.rankings-shell .strategy-card,
.rankings-shell .strategy-card *,
.rankings-shell .strategy-candidate,
.rankings-shell .strategy-candidate *,
.rankings-shell .diagnostic-card,
.rankings-shell .diagnostic-card *,
.rankings-shell .position-card,
.rankings-shell .position-card *,
.rankings-shell .position-candidate,
.rankings-shell .position-candidate *,
.rankings-shell .insight-card,
.rankings-shell .insight-card *,
.rankings-shell .distribution-card,
.rankings-shell .distribution-card *,
.rankings-shell .ranking-visual-card,
.rankings-shell .ranking-visual-card *,
.rankings-shell .profile-mix-list button,
.rankings-shell .profile-mix-list button *,
.rankings-shell .compare-panel,
.rankings-shell .compare-empty {
  opacity: 1 !important;
}

.rankings-shell .lens-card,
.rankings-shell .strategy-card,
.rankings-shell .strategy-candidate,
.rankings-shell .diagnostic-card,
.rankings-shell .position-card,
.rankings-shell .position-candidate,
.rankings-shell .insight-card,
.rankings-shell .distribution-card,
.rankings-shell .ranking-visual-card,
.rankings-shell .profile-mix-list button,
.rankings-shell .visual-bar-row > div,
.rankings-shell .compare-panel,
.rankings-shell .compare-empty {
  color: var(--color-text) !important;
  background: #ffffff !important;
  border-color: var(--color-border-strong) !important;
}

.rankings-shell .lens-card p,
.rankings-shell .lens-card span,
.rankings-shell .strategy-card p,
.rankings-shell .strategy-card span,
.rankings-shell .strategy-candidate span,
.rankings-shell .diagnostic-card p,
.rankings-shell .diagnostic-card span,
.rankings-shell .position-card p,
.rankings-shell .position-card span,
.rankings-shell .position-candidate span,
.rankings-shell .insight-card p,
.rankings-shell .insight-card span,
.rankings-shell .distribution-card p,
.rankings-shell .distribution-card span,
.rankings-shell .ranking-visual-card p,
.rankings-shell .ranking-visual-card span,
.rankings-shell .profile-mix-list button span,
.rankings-shell .compare-empty p {
  color: var(--color-text-muted) !important;
}

.rankings-shell .lens-card h3,
.rankings-shell .lens-card strong,
.rankings-shell .strategy-card h3,
.rankings-shell .strategy-card strong,
.rankings-shell .strategy-candidate strong,
.rankings-shell .diagnostic-card h3,
.rankings-shell .diagnostic-card strong,
.rankings-shell .position-card h3,
.rankings-shell .position-card strong,
.rankings-shell .position-candidate strong,
.rankings-shell .insight-card h3,
.rankings-shell .insight-card strong,
.rankings-shell .distribution-card h3,
.rankings-shell .distribution-card strong,
.rankings-shell .ranking-visual-card h3,
.rankings-shell .ranking-visual-card strong {
  color: var(--color-text) !important;
}

.rankings-shell .lens-actions button,
.rankings-shell .strategy-actions button,
.rankings-shell .strategy-action button,
.rankings-shell .diagnostic-actions button,
.rankings-shell .position-actions button,
.rankings-shell .insight-actions button,
.rankings-shell .insight-actions a,
.rankings-shell .distribution-actions button {
  color: var(--readable-brand) !important;
  background: #ffffff !important;
  border-color: var(--color-border-strong) !important;
  opacity: 1 !important;
}

.rankings-shell .lens-actions button:first-child,
.rankings-shell .strategy-actions button:first-child,
.rankings-shell .strategy-action button:first-child,
.rankings-shell .diagnostic-actions button:first-child,
.rankings-shell .position-actions button:first-child,
.rankings-shell .insight-actions button:first-child,
.rankings-shell .insight-actions a:first-child,
.rankings-shell .distribution-actions button:first-child {
  color: #ffffff !important;
  background: var(--color-brand) !important;
  border-color: var(--color-brand) !important;
}

.song-shell .vote-detail-disclosure > summary,
.song-shell .advanced-analysis-disclosure > summary,
.song-shell .advanced-analysis-head,
.song-shell .stage-result-mobile-details > summary,
.song-shell .disclosure-panel > summary,
.song-shell .model-metric-details > summary,
.song-shell .model-metric-details summary {
  color: var(--readable-brand) !important;
  background: #ffffff !important;
  border-color: var(--color-border-strong) !important;
  opacity: 1 !important;
}

.song-shell .vote-detail-disclosure > summary *,
.song-shell .advanced-analysis-disclosure > summary *,
.song-shell .advanced-analysis-head *,
.song-shell .stage-result-mobile-details > summary *,
.song-shell .disclosure-panel > summary *,
.song-shell .model-metric-details > summary *,
.song-shell .model-metric-details summary * {
  color: var(--readable-brand) !important;
  opacity: 1 !important;
}

.song-shell .path-summary-item,
.song-shell .path-summary-item *,
.song-shell .stage-path-card,
.song-shell .stage-path-card *,
.song-shell .stage-result-stage,
.song-shell .stage-result-rank {
  opacity: 1 !important;
}

.song-shell .path-summary-item,
.song-shell .stage-path-card,
.song-shell .stage-result-stage,
.song-shell .stage-result-rank {
  color: var(--color-text) !important;
  background: #ffffff !important;
  border-color: var(--color-border-strong) !important;
}

.song-shell .path-summary-item strong,
.song-shell .stage-path-card strong,
.song-shell .stage-result-stage strong,
.song-shell .stage-result-rank strong {
  color: var(--color-text) !important;
}

.song-shell .path-summary-item span,
.song-shell .path-summary-item small,
.song-shell .stage-path-card span,
.song-shell .stage-path-card small,
.song-shell .stage-result-stage span,
.song-shell .stage-result-rank span {
  color: var(--color-text-muted) !important;
}

.song-shell .nearby-card button,
.song-shell .nearby-card a,
.song-shell .related-song-card button,
.song-shell .related-song-card a {
  color: var(--readable-brand) !important;
  background: #ffffff !important;
  border-color: var(--color-border-strong) !important;
}

.rankings-shell .contract-detail-drawer > summary,
.rankings-shell .sort-header-button,
.rankings-shell .sort-header-button.active,
.rankings-shell .rank-pill,
.rankings-shell .rank-pill.selected {
  color: var(--readable-brand) !important;
  background: #ffffff !important;
  border-color: var(--color-border-strong) !important;
  opacity: 1 !important;
}

.rankings-shell .rank-pill.selected,
.rankings-shell .sort-header-button.active {
  color: #ffffff !important;
  background: var(--color-brand) !important;
  border-color: var(--color-brand) !important;
}

.guide-shell .stage-flow > span,
.guide-shell .stage-flow .arrow {
  color: var(--color-text-muted) !important;
  opacity: 1 !important;
}

.guide-shell .profile-index,
.guide-shell .guide-focus-index {
  color: #ffffff !important;
  background: var(--readable-derived) !important;
  border-color: var(--readable-derived) !important;
  opacity: 1 !important;
}

.guide-shell .guide-focus-reading,
.guide-shell .guide-focus-copy span,
.guide-shell .guide-type-card span,
.guide-shell .guide-type-card small {
  color: var(--color-text-muted) !important;
  opacity: 1 !important;
}

/* Guide reference UI pass: keep the page as a dictionary/reference surface
   instead of another long stack of equal-weight cards. */
.guide-shell {
  --guide-nav-width: 220px;
}

.guide-shell main {
  grid-template-columns: 1fr !important;
  align-items: start !important;
}

.guide-shell main > .guide-hero {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  order: 0 !important;
}

.guide-shell .guide-hero h2 {
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

.guide-shell main > .guide-reference-layout {
  grid-column: 1 / -1 !important;
  order: 1 !important;
}

.guide-reference-layout {
  display: flex !important;
  gap: 24px !important;
  align-items: start !important;
}

.guide-reference-layout > .guide-side-nav {
  flex: 0 0 var(--guide-nav-width) !important;
}

.guide-reference-content {
  display: grid !important;
  flex: 1 1 auto !important;
  gap: 48px !important;
  min-width: 0 !important;
}

.guide-side-nav {
  top: calc(var(--shell-sticky-nav-height, 0px) + 16px) !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 6px !important;
  padding: 14px !important;
  background: rgb(255 255 255 / 0.96) !important;
}

.guide-side-nav strong {
  display: block;
  margin: 0 2px 6px;
  color: var(--color-text) !important;
  font-size: 0.78rem;
  font-weight: 900;
}

.guide-side-nav a {
  width: 100%;
  border-color: transparent !important;
  padding: 8px 10px !important;
  color: var(--color-text-muted) !important;
  background: transparent !important;
}

.guide-side-nav a:hover,
.guide-side-nav a.active {
  color: var(--readable-brand) !important;
  background: var(--color-brand-soft) !important;
  border-color: var(--color-brand-border) !important;
}

.guide-section,
.guide-workbench {
  scroll-margin-top: calc(var(--shell-sticky-nav-height, 0px) + 28px);
}

.guide-quick-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.guide-quick-grid a {
  min-height: 112px !important;
  border-color: var(--color-border-strong) !important;
  box-shadow: var(--ds-shadow-sm) !important;
}

.guide-quick-grid a:hover {
  border-color: var(--color-brand-border) !important;
  box-shadow: var(--ds-shadow-md) !important;
}

.guide-quick-grid strong {
  color: var(--color-text) !important;
}

.guide-quick-grid span {
  color: var(--color-text-muted) !important;
}

.guide-shell .metric-glossary {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.guide-shell .metric-glossary article {
  scroll-margin-top: calc(var(--shell-sticky-nav-height, 0px) + 28px);
}

.guide-shell .metric-glossary article:target {
  border-color: var(--color-brand-border) !important;
  box-shadow: 0 0 0 3px var(--color-brand-soft), var(--ds-shadow-sm) !important;
}

.guide-shell .guide-workbench {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 20px !important;
}

.guide-shell .guide-type-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.guide-shell .guide-show-all-types {
  color: var(--readable-brand) !important;
  background: #ffffff !important;
  border-color: var(--color-brand-border) !important;
}

.guide-shell .guide-route-links a {
  color: var(--readable-brand) !important;
  background: #ffffff !important;
  border-color: var(--color-border-strong) !important;
}

.guide-shell .guide-route-links a:hover {
  color: #ffffff !important;
  background: var(--color-brand) !important;
  border-color: var(--color-brand) !important;
}

@media (max-width: 860px) {
  .guide-shell main {
    grid-template-columns: 1fr !important;
  }

  .guide-reference-layout {
    flex-direction: column !important;
    gap: 24px !important;
  }

  .guide-reference-layout > .guide-side-nav {
    flex-basis: auto !important;
    width: 100% !important;
  }

  .guide-side-nav {
    position: static !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .guide-side-nav strong {
    grid-column: 1 / -1;
  }

  .guide-quick-grid,
  .guide-shell .metric-glossary,
  .guide-shell .guide-type-grid {
    grid-template-columns: 1fr !important;
  }
}

.graph-shell .map-panel .tag,
.graph-shell .selected-card .tag,
.graph-shell .tag-line .tag {
  color: #ffffff !important;
  background: rgb(51 65 85 / 0.96) !important;
  border-color: rgb(148 163 184 / 0.42) !important;
  opacity: 1 !important;
}

.graph-shell .insight-route-actions button,
.graph-shell .insight-route-actions a {
  color: var(--readable-brand) !important;
  background: #ffffff !important;
  border-color: var(--color-border-strong) !important;
  opacity: 1 !important;
}

.graph-shell .insight-route-actions button:first-child,
.graph-shell .insight-route-actions a:first-child {
  color: #ffffff !important;
  background: var(--color-brand) !important;
  border-color: var(--color-brand) !important;
}

.song-shell .summary-definition-list span,
.song-shell .summary-definition-list strong {
  color: var(--color-text) !important;
  background: #ffffff !important;
  border-color: var(--color-border-strong) !important;
  opacity: 1 !important;
}

.song-shell .vote-stage-tab.active,
.song-shell .vote-stage-tab.active span,
.song-shell .vote-stage-tab.active strong,
.song-shell .vote-stage-tab.active small {
  color: #ffffff !important;
  background: var(--color-brand) !important;
  border-color: var(--color-brand) !important;
  opacity: 1 !important;
}

.song-shell .fact-metric-row.good,
.song-shell .fact-metric-row.good *,
.song-shell .position-row.good,
.song-shell .position-row.good *,
.song-shell .composition-row.good,
.song-shell .composition-row.good * {
  color: var(--color-text) !important;
  opacity: 1 !important;
}

.song-shell .fact-metric-row.good,
.song-shell .position-row.good,
.song-shell .composition-row.good {
  background: var(--color-success-soft) !important;
  border-color: #86efac !important;
}

.song-shell .fact-metric-row.risk,
.song-shell .fact-metric-row.risk *,
.song-shell .position-row.risk,
.song-shell .position-row.risk *,
.song-shell .composition-row.low,
.song-shell .composition-row.low * {
  color: var(--color-text) !important;
  opacity: 1 !important;
}

.methodology-shell .ux-primary-route span,
.methodology-shell .ux-primary-route p {
  color: var(--color-text-muted) !important;
  opacity: 1 !important;
}

.guide-shell .profile-index,
.guide-shell .guide-focus-index,
.guide-shell .guide-focus-copy .profile-index,
.guide-shell .guide-type-head .profile-index {
  color: #ffffff !important;
  background: var(--readable-derived) !important;
  border-color: var(--readable-derived) !important;
  opacity: 1 !important;
}

.rankings-shell .inspector-main-actions a.secondary,
.rankings-shell .inspector-main-actions button.secondary,
.graph-shell .next-view-links a.secondary,
.graph-shell .next-view-links button.secondary {
  color: var(--readable-brand) !important;
  background: #ffffff !important;
  border-color: var(--color-border-strong) !important;
  opacity: 1 !important;
}

.song-shell .fact-reference-row,
.song-shell .fact-reference-row *,
.song-shell .fact-reference-row.good,
.song-shell .fact-reference-row.good *,
.song-shell .fact-reference-row.risk,
.song-shell .fact-reference-row.risk * {
  color: var(--color-text) !important;
  opacity: 1 !important;
}

.song-shell .fact-reference-row.good {
  background: var(--color-success-soft) !important;
  border-color: #86efac !important;
}

.song-shell .fact-reference-row.risk {
  background: var(--color-warning-soft) !important;
  border-color: var(--color-estimated-border) !important;
}

.song-shell .final-benchmark-head,
.song-shell .final-benchmark-head *,
.song-shell .transition-metrics .up,
.song-shell .transition-metrics .up *,
.song-shell .transition-metrics .down,
.song-shell .transition-metrics .down *,
.song-shell .transition-metrics .flat,
.song-shell .transition-metrics .flat * {
  color: var(--color-text) !important;
  opacity: 1 !important;
}

.song-shell .transition-metrics .up {
  background: var(--color-success-soft) !important;
  border-color: #86efac !important;
}

.song-shell .transition-metrics .down {
  background: var(--color-warning-soft) !important;
  border-color: var(--color-estimated-border) !important;
}

.song-shell .transition-metrics .flat {
  background: #ffffff !important;
  border-color: var(--color-border-strong) !important;
}

.song-shell .copy-title,
.song-shell .copy-item .copy-title,
.song-shell .copy-item.good .copy-title,
.song-shell .copy-item.warn .copy-title,
.song-shell .copy-item.risk .copy-title {
  color: var(--color-text) !important;
  opacity: 1 !important;
}

.song-shell .model-driver-list span,
.song-shell .model-driver-list .positive,
.song-shell .model-driver-list .negative,
.song-shell .model-driver-list .neutral {
  color: var(--color-text) !important;
  background: #ffffff !important;
  border-color: var(--color-border-strong) !important;
  opacity: 1 !important;
}

.song-shell .model-driver-list .positive {
  border-color: var(--color-derived-border) !important;
}

.song-shell .model-driver-list .negative {
  border-color: var(--color-estimated-border) !important;
}

/* Map page viewport pass: keep the first screen focused on the map canvas. */
.graph-shell {
  gap: 8px !important;
}

.graph-shell > .topbar {
  display: none !important;
}

.graph-shell > .site-nav {
  margin-bottom: 4px !important;
}

.graph-shell .graph-command-bar {
  display: grid !important;
  grid-template-columns: minmax(250px, 0.36fr) minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: stretch !important;
  padding: 8px 10px !important;
  margin: 0 !important;
}

.graph-shell .graph-command-bar .top-actions {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(190px, 1fr) auto !important;
  gap: 8px !important;
  align-items: end !important;
  padding: 0 !important;
}

.graph-shell .map-search-control {
  gap: 4px !important;
}

.graph-shell .map-search-control input,
.graph-shell .map-utility-actions .icon-button {
  height: 34px !important;
  min-height: 34px !important;
}

.graph-shell .map-utility-actions {
  gap: 6px !important;
}

.graph-shell .mode-control-group {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 0.34fr) !important;
  gap: 8px !important;
  align-items: stretch !important;
}

.graph-shell .mode-axis-group,
.graph-shell .basis-control-group {
  gap: 6px !important;
  padding: 18px 9px 8px !important;
}

.graph-shell .mode-tabs {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

.graph-shell .mode-tab,
.graph-shell .ruler-button {
  min-height: 32px !important;
  height: 32px !important;
  padding-inline: 8px !important;
  font-size: 0.68rem !important;
}

.graph-shell .ruler-switch {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  padding: 4px !important;
}

.graph-shell .mode-description {
  display: none !important;
}

.graph-shell .graph-state-chips {
  display: none !important;
}

.graph-shell .graph-workbench {
  height: min(690px, calc(100vh - 200px)) !important;
  min-height: 460px !important;
  max-height: none !important;
  grid-template-columns: minmax(0, 1fr) minmax(306px, 320px) !important;
  gap: 10px !important;
  padding: 10px !important;
  margin: 0 !important;
}

.graph-shell .map-panel {
  height: 100% !important;
  min-height: 0 !important;
}

.graph-shell .canvas-stage {
  height: 100% !important;
  min-height: 0 !important;
}

.graph-shell .right-panel {
  width: 320px !important;
  max-width: 320px !important;
  padding: 14px !important;
  overflow: auto !important;
}

.graph-shell .selected-actions {
  gap: 8px !important;
  margin-top: 12px !important;
}

.graph-shell .selected-meta-line {
  align-items: center !important;
  gap: 6px !important;
  margin-top: 8px !important;
}

.graph-shell .selected-card .selected-chip {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 22px !important;
  padding: 3px 8px !important;
  border: 1px solid var(--color-border-strong) !important;
  border-radius: var(--ds-radius-pill) !important;
  color: var(--color-text-muted) !important;
  background: var(--color-surface-muted) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.graph-shell .selected-card .selected-chip-profile {
  color: var(--color-derived) !important;
  background: var(--color-derived-soft) !important;
  border-color: var(--color-derived-border) !important;
}

.graph-shell .selected-card .selected-chip-status {
  color: var(--color-text-muted) !important;
  background: var(--color-surface-tint) !important;
  border-color: var(--color-border) !important;
}

.graph-shell .selected-card .selected-suno-link {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 22px !important;
  color: var(--readable-brand) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

.graph-shell .selected-ruler {
  margin-top: 12px !important;
  padding: 12px !important;
  border-color: var(--color-border) !important;
  background: var(--color-surface-muted) !important;
  box-shadow: none !important;
}

.graph-shell .selected-ruler .inspector-section-head {
  align-items: flex-start !important;
  gap: 4px !important;
}

.graph-shell .selected-ruler .inspector-section-head span,
.graph-shell .selected-detail-heading {
  color: var(--color-text) !important;
  font-size: 0.78rem !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
}

.graph-shell .selected-ruler .inspector-section-head small {
  color: var(--color-text-subtle) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
}

.graph-shell .selected-relative-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
  margin-top: 8px !important;
}

.graph-shell .selected-card .relative-metric {
  min-width: 0 !important;
  padding: 8px !important;
  border: 1px solid var(--color-border-subtle) !important;
  border-radius: var(--ds-radius-sm) !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.graph-shell .selected-card .relative-metric span {
  display: block !important;
  overflow: hidden !important;
  color: var(--color-text-subtle) !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.graph-shell .selected-card .relative-metric strong {
  display: block !important;
  margin-top: 3px !important;
  color: var(--color-text) !important;
  font-size: 0.98rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

.graph-shell .selected-context-note {
  display: grid !important;
  gap: 3px !important;
  margin: 10px 0 0 !important;
  padding: 8px 0 0 10px !important;
  border-left: 3px solid var(--color-border-strong) !important;
  color: var(--color-text-muted) !important;
  background: transparent !important;
  font-size: 0.72rem !important;
  line-height: 1.45 !important;
}

.graph-shell .selected-context-note strong {
  color: var(--color-text) !important;
  font-size: 0.68rem !important;
  font-weight: 900 !important;
}

.graph-shell .selected-context-note span {
  color: var(--color-text-muted) !important;
}

.graph-shell .selected-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
}

.graph-shell .selected-actions .detail-link:only-child {
  grid-column: 1 / -1 !important;
}

.graph-shell .selected-actions .detail-link {
  min-height: 38px !important;
  justify-content: center !important;
  padding: 8px 10px !important;
  border-radius: var(--ds-radius-sm) !important;
  font-size: 0.82rem !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  white-space: normal !important;
}

.graph-shell .selected-actions .detail-link.primary {
  color: #ffffff !important;
  background: var(--color-brand) !important;
  border-color: var(--color-brand) !important;
}

.graph-shell .selected-actions .detail-link.secondary {
  color: var(--readable-brand) !important;
  background: #ffffff !important;
  border-color: var(--color-border-strong) !important;
}

.graph-shell .selected-detail-drawer {
  margin-top: 18px !important;
  padding: 11px !important;
}

.graph-shell .selected-detail-heading {
  padding-top: 2px !important;
  color: var(--color-text) !important;
  letter-spacing: 0 !important;
}

.graph-shell .selected-detail-drawer > summary,
.graph-shell .selected-detail-drawer > summary::after {
  display: none !important;
}

.graph-shell .selected-observed-head {
  margin-top: 12px !important;
}

.graph-shell .map-reading-callout {
  display: block !important;
  max-width: 960px !important;
  margin: 4px 0 0 !important;
  padding: 6px 2px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--color-text-muted) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.graph-shell .map-reading-callout strong {
  display: inline !important;
  margin-right: 8px !important;
  color: var(--color-text-muted) !important;
  font-size: 0.82rem !important;
  font-weight: 850 !important;
}

.graph-shell .map-reading-callout span,
.graph-shell .map-reading-callout p {
  display: inline !important;
  color: var(--color-text-muted) !important;
  font-size: 0.82rem !important;
  line-height: 1.6 !important;
}

.graph-shell .map-reading-callout .map-relative-note::before {
  content: " / ";
}

.graph-shell .map-reading-callout .map-relative-note[hidden] {
  display: none !important;
}

@media (max-width: 1180px) {
  .graph-shell .mode-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .graph-shell .graph-command-bar,
  .graph-shell .mode-control-group,
  .graph-shell .graph-workbench {
    grid-template-columns: 1fr !important;
  }

  .graph-shell .graph-workbench {
    height: auto !important;
    max-height: none !important;
  }

  .graph-shell .right-panel {
    width: auto !important;
    max-width: none !important;
  }
}

/* Map command bar refinement: search is the primary action, utility actions are secondary. */
.graph-shell .graph-command-bar {
  grid-template-columns: minmax(570px, 0.92fr) minmax(480px, 1.08fr) !important;
  gap: 10px !important;
  align-items: end !important;
}

.graph-shell .graph-command-bar .top-actions {
  grid-template-columns: minmax(400px, 1fr) auto !important;
  gap: 8px !important;
  align-items: end !important;
}

.graph-shell .map-search-control {
  min-width: 400px !important;
  background: #f8fafc !important;
  border-color: var(--color-border-subtle) !important;
}

.graph-shell .map-search-control span {
  color: var(--color-text-muted) !important;
}

.graph-shell .map-search-control input {
  width: 100% !important;
  min-width: 0 !important;
  color: var(--color-text) !important;
  background: #ffffff !important;
  border-color: var(--color-border-strong) !important;
}

.graph-shell .map-utility-actions {
  align-self: end !important;
  gap: 4px !important;
}

.graph-shell .map-utility-actions .icon-button {
  width: auto !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 10px !important;
  border-radius: 10px !important;
  color: var(--color-text-muted) !important;
  background: #ffffff !important;
  border-color: var(--color-border-strong) !important;
  box-shadow: none !important;
  font-size: 0.72rem !important;
  font-weight: 850 !important;
}

.graph-shell .map-utility-actions .icon-button:hover {
  color: var(--readable-brand) !important;
  border-color: var(--color-brand-border) !important;
  background: var(--color-brand-soft) !important;
}

.graph-shell .mode-control-group {
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.28fr) !important;
}

.graph-shell .mode-axis-group,
.graph-shell .basis-control-group {
  padding: 14px 9px 8px !important;
}

.graph-shell .mode-tab,
.graph-shell .ruler-button {
  min-height: 30px !important;
  height: 30px !important;
}

/* Light UI contrast hardening for generated search/candidate cards. */
.rankings-shell .search-result-card,
.rankings-shell .search-result-card *,
.overview-shell .overview-search-card,
.overview-shell .overview-search-card *,
.diagnosis-search-shell .diagnosis-result-card,
.diagnosis-search-shell .diagnosis-result-card * {
  opacity: 1 !important;
}

.rankings-shell .search-result-card,
.overview-shell .overview-search-card,
.diagnosis-search-shell .diagnosis-result-card {
  color: var(--color-text) !important;
  background: #ffffff !important;
  border-color: var(--color-border-strong) !important;
  box-shadow: var(--ds-shadow-sm) !important;
}

.rankings-shell .search-result-card :is(strong, b, h3, dd),
.overview-shell .overview-search-card :is(strong, b, h3, dd),
.diagnosis-search-shell .diagnosis-result-card :is(strong, b, h3, dd) {
  color: var(--color-text) !important;
}

.rankings-shell .search-result-card :is(p, span, small, dt),
.overview-shell .overview-search-card :is(p, span, small, dt),
.diagnosis-search-shell .diagnosis-result-card :is(p, span, small, dt) {
  color: var(--color-text-muted) !important;
}

.rankings-shell .search-result-actions :is(a, button),
.overview-shell .overview-search-actions :is(a, button),
.diagnosis-search-shell .diagnosis-card-actions :is(a, button) {
  min-height: 34px !important;
  border-radius: 10px !important;
  padding: 0 12px !important;
  color: var(--readable-brand) !important;
  background: #ffffff !important;
  border-color: var(--color-border-strong) !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
}

.rankings-shell .search-result-actions .primary,
.overview-shell .overview-search-actions .primary,
.diagnosis-search-shell .diagnosis-card-actions a:first-child {
  color: #ffffff !important;
  background: var(--color-brand) !important;
  border-color: var(--color-brand) !important;
}

.song-shell .risk,
.song-shell .negative,
.song-shell .model-driver-list .negative {
  color: #92400e !important;
}

@media (max-width: 1180px) {
  .graph-shell .graph-command-bar,
  .graph-shell .graph-command-bar .top-actions,
  .graph-shell .mode-control-group {
    grid-template-columns: 1fr !important;
  }

  .graph-shell .map-search-control {
    min-width: 0 !important;
  }
}

/* Phase 1 shared UI foundation: width, grid, card and action hierarchy. */
:root {
  --ssc-container-standard: 1120px;
  --ssc-container-text: 960px;
  --ssc-container-workbench: 1320px;
  --ssc-section-gap: 48px;
  --ssc-header-content-gap: 16px;
  --ssc-card-padding: 22px;
  --ssc-grid-gap: 18px;
}

:is(.overview-shell, .diagnosis-search-shell) {
  width: min(var(--ssc-container-standard), 100%) !important;
  max-width: var(--ssc-container-standard) !important;
}

:is(.report-shell, .guide-shell, .methodology-shell) {
  width: min(var(--ssc-container-text), 100%) !important;
  max-width: var(--ssc-container-text) !important;
}

:is(.rankings-shell, .graph-shell) {
  width: min(var(--ssc-container-workbench), 100%) !important;
  max-width: var(--ssc-container-workbench) !important;
}

:is(.dashboard-main, .diagnosis-search-main, .rankings-main, .graph-shell) {
  gap: var(--ssc-section-gap) !important;
}

:is(.panel-head, .overview-section-head, .diagnosis-section-head, .ranking-section-head, .map-head) {
  gap: var(--ssc-header-content-gap) !important;
}

:is(
  .overview-entry-grid,
  .overview-site-map,
  .diagnosis-route-grid
) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--ssc-grid-gap) !important;
}

.overview-shell .overview-entry-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

:is(
  .featured-report-grid,
  .report-card-grid,
  .article-card-grid
) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--ssc-grid-gap) !important;
}

:is(
  .diagnosis-result-grid,
  .song-card-grid,
  .search-results-grid,
  .search-result-grid,
  .screening-grid,
  .preset-grid,
  .preset-grid.advanced,
  .deep-dive-cards,
  .lens-grid,
  .rankings-insight-grid
) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--ssc-grid-gap) !important;
}

:is(
  .overview-value-kind-grid,
  .overview-stat-grid,
  .metric-card-grid,
  .summary-metric-grid,
  .kpi-grid,
  .selected-stat-grid,
  .rank-metric-grid
) {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: var(--ssc-grid-gap) !important;
}

:is(
  .overview-entry-grid > a,
  .overview-site-map > a,
  .diagnosis-route-grid > a,
  .diagnosis-result-card,
  .preset-card,
  .deep-dive-card,
  .screening-card,
  .overview-value-kind-grid > article,
  .selected-card,
  .control-panel,
  .data-panel
) {
  border-radius: var(--ds-radius-sm) !important;
  padding: var(--ssc-card-padding) !important;
}

:is(
  .route-card,
  .overview-entry-grid > a,
  .overview-site-map > a,
  .diagnosis-route-grid > a
) {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border-subtle) !important;
  box-shadow: var(--ds-shadow-sm) !important;
}

:is(.article-card, .featured-report-card, .report-card) {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border-subtle) !important;
  box-shadow: var(--ds-shadow-sm) !important;
}

:is(.song-card, .diagnosis-result-card, .search-result-card) {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border-strong) !important;
  box-shadow: var(--ds-shadow-sm) !important;
}

:is(.metric-card, .overview-value-kind-grid > article, .kpi, .detail) {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border-subtle) !important;
}

:is(.callout, .map-reading-callout, .overview-trust-brief) {
  border-radius: var(--ds-radius-sm) !important;
  border: 1px solid var(--color-border-subtle) !important;
}

:is(.data-panel, .map-panel, .ranking-table-panel) {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border-subtle) !important;
  border-radius: var(--ds-radius-sm) !important;
}

:is(.control-panel, .ranking-controls, .screening-controls, .graph-control-panel, .filter-drawer, .graph-controls) {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border-subtle) !important;
  border-radius: var(--ds-radius-sm) !important;
  box-shadow: none !important;
}

:is(.selected-song-panel, .row-inspector, .right-panel, .selected-card) {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border-subtle) !important;
  border-radius: var(--ds-radius-sm) !important;
}

:is(
  .overview-hero-actions a.primary,
  .diagnosis-search-form button,
  .diagnosis-card-actions a:first-child,
  .next-view-links a:first-child,
  .detail-link.primary,
  a.primary,
  button.primary,
  [role="button"].primary,
  .button-primary
) {
  min-height: var(--ds-control-height) !important;
  color: #ffffff !important;
  background: var(--color-brand) !important;
  border: 1px solid var(--color-brand) !important;
  border-radius: var(--ds-radius-sm) !important;
  box-shadow: none !important;
}

:is(
  .overview-hero-actions a:not(.primary),
  .diagnosis-card-actions a.secondary,
  .diagnosis-secondary-link,
  .next-view-links a.secondary,
  .table-tool-button,
  a.secondary,
  button.secondary,
  [role="button"].secondary,
  .button-secondary
) {
  min-height: var(--ds-control-height) !important;
  color: var(--color-brand-hover) !important;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border-strong) !important;
  border-radius: var(--ds-radius-sm) !important;
  box-shadow: none !important;
}

:is(
  a.ghost,
  button.ghost,
  [role="button"].ghost,
  .icon-button,
  .table-tool-button.ghost,
  .button-ghost,
  .reset-button
) {
  color: var(--color-text-muted) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}

:is(
  .overview-hero-actions a.primary,
  .diagnosis-search-form button,
  .diagnosis-card-actions a:first-child,
  .next-view-links a:first-child,
  .detail-link.primary,
  a.primary,
  button.primary,
  [role="button"].primary,
  .button-primary
):hover {
  background: var(--color-brand-hover) !important;
  border-color: var(--color-brand-hover) !important;
}

.rankings-shell #presetDeck {
  order: 9 !important;
}

.rankings-shell .ranking-controls {
  order: 3 !important;
}

.rankings-shell #rankingDetailFilters {
  order: 5 !important;
}

.rankings-shell .ranking-table-toolbar {
  order: 6 !important;
}

.rankings-shell .ranking-results-workbench {
  order: 7 !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 340px) !important;
  align-items: start !important;
}

.rankings-shell .ranking-table-tools-menu:not([open]) .ranking-table-tools-panel,
.rankings-shell #rankingDetailFilters:not([open]) :is(.screening-grid, .advanced-actions, .column-controls) {
  display: none !important;
}

.rankings-shell .ranking-table-tools-menu > summary,
.rankings-shell #rankingDetailFilters > summary {
  min-height: var(--ds-control-height) !important;
  border-radius: var(--ds-radius-sm) !important;
}

.graph-shell > .topbar h1 {
  font-size: clamp(1.55rem, 2vw, 2.05rem) !important;
}

.graph-shell .graph-command-bar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(180px, auto) !important;
  gap: 12px !important;
  align-items: stretch !important;
}

.graph-shell .graph-control-panel {
  padding: 14px !important;
}

.graph-shell .graph-control-panel-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 10px !important;
  color: var(--color-text-muted) !important;
  font-size: 0.73rem !important;
  font-weight: 900 !important;
}

.graph-shell .graph-basic-control-grid {
  display: grid !important;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: stretch !important;
}

.graph-shell .graph-basic-control-grid .mode-control-group {
  grid-template-columns: minmax(0, 1fr) minmax(160px, auto) !important;
}

.graph-shell .graph-utility-controls {
  display: grid !important;
  align-content: start !important;
}

.graph-shell .graph-utility-controls .map-utility-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 8px !important;
}

.graph-shell .graph-utility-controls .icon-button {
  min-height: 34px !important;
  color: var(--color-text-muted) !important;
  background: var(--color-surface-muted) !important;
  border: 1px solid var(--color-border-subtle) !important;
}

.graph-shell .filter-drawer > summary[data-control-group]::before,
.graph-shell #graphDisplayControls > summary[data-control-group]::before {
  content: attr(data-control-group);
  display: inline-flex;
  margin-right: 10px;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.diagnosis-search-shell .diagnosis-step-list {
  list-style: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
}

@media (max-width: 1180px) {
  :is(
    .overview-entry-grid,
    .overview-site-map,
    .diagnosis-route-grid,
    .diagnosis-result-grid,
    .search-results-grid,
    .screening-grid,
    .preset-grid,
    .preset-grid.advanced,
    .deep-dive-cards,
    .lens-grid,
    .overview-value-kind-grid,
    .overview-stat-grid,
    .metric-card-grid,
    .summary-metric-grid,
    .kpi-grid,
    .selected-stat-grid,
    .rank-metric-grid
  ) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .rankings-shell .ranking-results-workbench,
  .graph-shell .graph-command-bar,
  .graph-shell .graph-basic-control-grid,
  .graph-shell .graph-basic-control-grid .mode-control-group {
    grid-template-columns: 1fr !important;
  }

  .graph-shell .graph-utility-controls .map-utility-actions {
    justify-content: flex-start !important;
  }
}

@media (max-width: 680px) {
  :is(
    .overview-entry-grid,
    .overview-site-map,
    .diagnosis-route-grid,
    .diagnosis-result-grid,
    .search-results-grid,
    .screening-grid,
    .preset-grid,
    .preset-grid.advanced,
    .deep-dive-cards,
    .lens-grid,
    .overview-value-kind-grid,
    .overview-stat-grid,
    .metric-card-grid,
    .summary-metric-grid,
    .kpi-grid,
    .selected-stat-grid,
    .rank-metric-grid
  ) {
    grid-template-columns: 1fr !important;
  }

  :is(
    .overview-entry-grid > a,
    .overview-site-map > a,
    .diagnosis-route-grid > a,
    .diagnosis-result-card,
    .preset-card,
    .deep-dive-card,
    .screening-card,
    .overview-value-kind-grid > article
  ) {
    padding: 18px !important;
  }

  .graph-shell .graph-workbench {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .graph-shell .map-panel {
    height: auto !important;
    min-height: 420px !important;
  }

  .graph-shell .canvas-stage {
    height: 320px !important;
    min-height: 320px !important;
  }

  .graph-shell .right-panel {
    width: auto !important;
    max-width: none !important;
  }
}

/* Rankings: keep the long result set inside a usable scroll viewport.
   The issue is not the number of rows, but letting the table define the
   entire page height. */
.rankings-shell .ranking-results-workbench {
  align-items: stretch !important;
}

.rankings-shell .ranking-table-panel {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  overflow: hidden !important;
  min-height: 0 !important;
}

.rankings-shell .ranking-table {
  max-height: clamp(430px, calc(100vh - 260px), 660px) !important;
  min-height: 360px !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
}

@supports (height: 100dvh) {
  .rankings-shell .ranking-table {
    max-height: clamp(430px, calc(100dvh - 260px), 660px) !important;
  }
}

.rankings-shell .ranking-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 18 !important;
}

.rankings-shell .ranking-table thead th:nth-child(-n + 3) {
  z-index: 28 !important;
}

.rankings-shell .ranking-table td:nth-child(-n + 3) {
  z-index: 8 !important;
}

.rankings-shell .ranking-results-workbench .row-inspector {
  max-height: clamp(430px, calc(100vh - 260px), 660px) !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
}

@supports (height: 100dvh) {
  .rankings-shell .ranking-results-workbench .row-inspector {
    max-height: clamp(430px, calc(100dvh - 260px), 660px) !important;
  }
}

.rankings-shell .floating-table-header {
  display: none !important;
}

@media (max-width: 1180px) {
  .rankings-shell .ranking-results-workbench .row-inspector {
    max-height: none !important;
    overflow: visible !important;
  }
}

@media (max-width: 760px) {
  .rankings-shell .ranking-table-panel {
    display: block !important;
    overflow: visible !important;
  }

  .rankings-shell .ranking-table {
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

.rankings-shell #rankingDetailFilters[hidden],
.rankings-shell .ranking-contract[hidden] {
  display: none !important;
}

.rankings-shell .ranking-entry-context {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 0 0 14px !important;
  padding: 14px 16px !important;
  border: 1px solid var(--color-brand-border) !important;
  border-radius: var(--ds-radius-md) !important;
  background: var(--color-brand-soft) !important;
  box-shadow: var(--ds-shadow-sm) !important;
}

.rankings-shell .ranking-entry-context[hidden] {
  display: none !important;
}

.rankings-shell .ranking-entry-context strong {
  display: block !important;
  color: var(--color-text) !important;
  font-size: 0.95rem !important;
  font-weight: 950 !important;
  line-height: 1.35 !important;
}

.rankings-shell .ranking-entry-context span {
  display: block !important;
  margin-top: 3px !important;
  color: var(--color-text-muted) !important;
  font-size: 0.84rem !important;
  font-weight: 750 !important;
  line-height: 1.45 !important;
}

.rankings-shell .ranking-entry-context nav {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: flex-end !important;
}

.rankings-shell .ranking-entry-context a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 7px 11px !important;
  border: 1px solid var(--color-border-strong) !important;
  border-radius: var(--ds-radius-sm) !important;
  color: var(--readable-brand) !important;
  background: #ffffff !important;
  font-size: 0.76rem !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
}

/* Final Map control correction: compact utilities, wide search, dark canvas preserved. */
.graph-shell .graph-command-bar {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: end !important;
  padding: 8px !important;
}

.graph-shell .graph-command-bar .graph-control-panel {
  border-color: var(--color-border-subtle) !important;
  border-radius: var(--ds-radius-sm) !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.graph-shell .graph-command-bar .graph-control-panel-head {
  display: none !important;
}

.graph-shell .graph-basic-controls {
  padding: 8px !important;
}

.graph-shell .graph-basic-control-grid {
  grid-template-columns: minmax(420px, 0.92fr) minmax(0, 1.08fr) !important;
  gap: 10px !important;
  align-items: end !important;
}

.graph-shell .graph-basic-control-grid .mode-control-group {
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.24fr) !important;
  gap: 8px !important;
  align-items: stretch !important;
}

.graph-shell .graph-utility-controls {
  align-self: end !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.graph-shell .graph-utility-controls .map-utility-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  gap: 6px !important;
}

.graph-shell .graph-utility-controls .icon-button {
  height: 34px !important;
  min-height: 34px !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 10px !important;
  border-radius: 10px !important;
  color: var(--color-text-muted) !important;
  background: #ffffff !important;
  border: 1px solid var(--color-border-strong) !important;
  box-shadow: none !important;
  font-size: 0.72rem !important;
}

.graph-shell .map-search-control {
  min-width: 420px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.graph-shell .map-search-control input {
  height: 36px !important;
  min-height: 36px !important;
}

.graph-shell .map-search-control span,
.graph-shell .control-label {
  font-size: 0.68rem !important;
  line-height: 1.15 !important;
}

.graph-shell .mode-axis-group,
.graph-shell .basis-control-group {
  padding: 12px 8px 7px !important;
}

.graph-shell .mode-tab,
.graph-shell .ruler-button {
  height: 28px !important;
  min-height: 28px !important;
  padding-inline: 7px !important;
  font-size: 0.66rem !important;
}

.graph-shell .map-panel {
  color: #e5f4f2 !important;
  border-color: rgb(148 163 184 / 0.36) !important;
  background:
    radial-gradient(circle at 46% 45%, rgb(45 212 191 / 0.12), transparent 25rem),
    #08121a !important;
}

.graph-shell .map-panel :is(h2, strong) {
  color: #f8fafc !important;
}

.graph-shell .map-panel :is(span, small, p) {
  color: #cbd5e1 !important;
}

.graph-shell .graph-workbench {
  height: min(620px, calc(100vh - 250px)) !important;
  min-height: 410px !important;
}

@media (max-width: 1180px) {
  .graph-shell .graph-command-bar,
  .graph-shell .graph-basic-control-grid,
  .graph-shell .graph-basic-control-grid .mode-control-group {
    grid-template-columns: 1fr !important;
  }

  .graph-shell .map-search-control {
    min-width: 0 !important;
  }

  .graph-shell .graph-utility-controls .map-utility-actions {
    justify-content: flex-start !important;
  }
}

/* Map command bar layout: search first, view controls second, utilities tertiary. */
.graph-shell .graph-command-bar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: stretch !important;
  padding: 8px !important;
  margin: 0 !important;
}

.graph-shell .graph-search-panel {
  display: grid !important;
  grid-template-columns: minmax(420px, 1fr) auto !important;
  gap: 10px !important;
  align-items: end !important;
  padding: 10px 12px !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--ds-radius-md) !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.graph-shell .graph-search-panel .graph-control-panel-head {
  display: none !important;
}

.graph-shell .map-search-control {
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  gap: 5px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.graph-shell .map-search-control span,
.graph-shell .control-label {
  position: static !important;
  color: var(--color-text-muted) !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
}

.graph-shell .map-search-control input {
  width: 100% !important;
  min-width: 0 !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 12px !important;
  color: var(--color-text) !important;
  background: #ffffff !important;
  border: 1px solid var(--color-border-strong) !important;
  border-radius: var(--ds-radius-sm) !important;
  font-size: 0.92rem !important;
  font-weight: 750 !important;
}

.graph-shell .map-utility-actions {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

.graph-shell .map-utility-actions .icon-button {
  width: auto !important;
  min-width: 74px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 11px !important;
  color: var(--color-text-muted) !important;
  background: #ffffff !important;
  border: 1px solid var(--color-border-strong) !important;
  border-radius: var(--ds-radius-sm) !important;
  box-shadow: none !important;
  font-size: 0.74rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

.graph-shell .map-utility-actions .icon-button:hover {
  color: var(--readable-brand) !important;
  background: var(--color-brand-soft) !important;
  border-color: var(--color-brand-border) !important;
}

.graph-shell .filter-drawer > summary {
  gap: 9px !important;
  max-width: min(330px, calc(100vw - 72px)) !important;
}

.graph-shell .filter-drawer > summary span:first-of-type {
  display: none !important;
}

.graph-shell .filter-drawer > summary span,
.graph-shell .filter-drawer > summary small {
  white-space: nowrap !important;
}

.graph-shell .graph-view-controls {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 220px !important;
  gap: 10px !important;
  align-items: stretch !important;
  padding: 10px 12px !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--ds-radius-md) !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.graph-shell .graph-view-controls .mode-axis-group,
.graph-shell .graph-view-controls .basis-control-group {
  display: grid !important;
  min-width: 0 !important;
  gap: 7px !important;
  align-content: start !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.graph-shell .graph-view-controls .mode-tabs {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(128px, 1fr)) !important;
  gap: 8px !important;
}

.graph-shell .graph-view-controls .ruler-switch {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.graph-shell .graph-view-controls .mode-tab,
.graph-shell .graph-view-controls .ruler-button {
  min-width: 0 !important;
  width: 100% !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 10px !important;
  border-radius: var(--ds-radius-pill) !important;
  font-size: 0.74rem !important;
  font-weight: 850 !important;
  line-height: 1.1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.graph-shell .graph-view-controls .mode-description,
.graph-shell .graph-view-controls .graph-state-chips {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
}

@media (max-width: 1180px) {
  .graph-shell .graph-search-panel,
  .graph-shell .graph-view-controls {
    grid-template-columns: 1fr !important;
  }

  .graph-shell .graph-view-controls .mode-tabs {
    grid-template-columns: repeat(3, minmax(132px, 1fr)) !important;
  }

  .graph-shell .map-utility-actions {
    justify-content: flex-start !important;
  }
}

@media (max-width: 760px) {
  .graph-shell .graph-view-controls .mode-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .graph-shell .map-utility-actions {
    flex-wrap: wrap !important;
  }

  .graph-shell .map-utility-actions .icon-button {
    min-width: 0 !important;
  }
}

/* Guide cards: keep semantic color markers out of the heading text. */
.guide-shell .guide-points article {
  position: relative !important;
  display: grid !important;
  align-content: start !important;
  gap: 8px !important;
  min-height: 96px !important;
  padding: 18px 18px 18px 50px !important;
  overflow: visible !important;
}

.guide-shell .guide-points article::before {
  top: 22px !important;
  left: 20px !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 4px !important;
}

.guide-shell .guide-points article strong,
.guide-shell .guide-points article span {
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
  line-height: 1.45 !important;
}

.guide-shell .guide-points:not(.metric-glossary) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
}

.guide-shell .guide-points article strong {
  color: var(--color-text) !important;
  font-size: 0.9rem !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

.guide-shell .guide-points article span {
  color: var(--color-text-muted) !important;
  font-size: 0.78rem !important;
  font-weight: 760 !important;
}

.guide-shell .metric-glossary {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.guide-shell .metric-glossary article {
  min-height: 116px !important;
}

@media (max-width: 1040px) {
  .guide-shell .metric-glossary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  .guide-shell .guide-points,
  .guide-shell .metric-glossary {
    grid-template-columns: 1fr !important;
  }

  .guide-shell .guide-points article {
    min-height: 0 !important;
  }
}

/* Song detail benchmark table: references are the primary axis. */
.song-shell .benchmark-table--targets {
  gap: 8px !important;
}

.song-shell .benchmark-table--targets .benchmark-head,
.song-shell .benchmark-table--targets .benchmark-row {
  grid-template-columns: minmax(122px, 0.58fr) repeat(5, minmax(92px, 1fr)) !important;
}

.song-shell .benchmark-table--targets .benchmark-head span,
.song-shell .benchmark-table--targets .benchmark-head strong {
  color: var(--color-text-muted) !important;
  font-size: 0.68rem !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

.song-shell .benchmark-table--targets .benchmark-target-row {
  min-width: 0 !important;
  background: var(--color-surface) !important;
}

.song-shell .benchmark-table--targets .benchmark-target-row.self-row {
  border-color: var(--color-derived-border) !important;
  background: var(--color-derived-soft) !important;
}

.song-shell .benchmark-table--targets .benchmark-target-label {
  color: var(--color-text) !important;
  font-size: 0.78rem !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
}

.song-shell .benchmark-table--targets .benchmark-cell {
  min-width: 0 !important;
}

.song-shell .benchmark-table--targets .benchmark-track {
  display: block !important;
  width: 100% !important;
  height: 8px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: var(--color-bg-subtle) !important;
}

.song-shell .benchmark-table--targets .benchmark-track i {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: #aebaba !important;
}

.song-shell .benchmark-table--targets .benchmark-cell strong {
  color: var(--color-text) !important;
  font-size: 0.78rem !important;
  font-weight: 900 !important;
}

.song-shell .benchmark-table--targets .benchmark-cell.self .benchmark-track i {
  background: var(--color-derived) !important;
}

.song-shell .benchmark-table--targets .benchmark-cell.self.lower-good .benchmark-track i {
  background: var(--color-success) !important;
}

@media (min-width: 768px) {
  .song-shell .benchmark-table--targets .benchmark-cell {
    padding-inline: clamp(18px, 2.4vw, 42px) !important;
  }

  .song-shell .benchmark-table--targets .benchmark-track,
  .song-shell .benchmark-table--targets .benchmark-cell strong {
    width: min(100%, 158px) !important;
    margin-inline: auto !important;
  }

  .song-shell .benchmark-table--targets .benchmark-cell strong {
    display: block !important;
    margin-top: 4px !important;
  }
}

@media (max-width: 1120px) {
  .song-shell .benchmark-table--targets {
    overflow-x: auto !important;
    padding-bottom: 4px !important;
  }

  .song-shell .benchmark-table--targets .benchmark-head,
  .song-shell .benchmark-table--targets .benchmark-row {
    min-width: 760px !important;
  }
}

@media (max-width: 760px) {
  .song-shell .benchmark-table--targets {
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  .song-shell .benchmark-table--targets .benchmark-head {
    display: none !important;
  }

  .song-shell .benchmark-table--targets .benchmark-row {
    min-width: 0 !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  .song-shell .benchmark-table--targets .benchmark-target-label {
    font-size: 0.86rem !important;
  }

  .song-shell .benchmark-table--targets .benchmark-cell {
    grid-template-columns: minmax(112px, 0.5fr) minmax(0, 1fr) minmax(44px, auto) !important;
    gap: 8px !important;
    align-items: center !important;
  }

  .song-shell .benchmark-table--targets .benchmark-cell::before {
    content: attr(data-metric-label) !important;
    min-width: 0 !important;
    overflow: hidden !important;
    color: var(--color-text-muted) !important;
    font-size: 0.68rem !important;
    font-weight: 900 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .song-shell .benchmark-table--targets .benchmark-cell strong {
    min-width: 44px !important;
    text-align: right !important;
  }
}

/* Song vote breakdown: keep phase switching compact and readable. */
.song-shell .vote-breakdown-panel {
  overflow: hidden !important;
}

.song-shell .vote-breakdown-panel .panel-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 16px !important;
}

.song-shell .current-vote-stage {
  min-width: 156px !important;
  width: auto !important;
  justify-items: end !important;
  align-self: start !important;
  border: 1px solid var(--color-border-strong) !important;
  border-radius: 999px !important;
  padding: 10px 16px !important;
  color: var(--color-text) !important;
  background: #f8fafc !important;
  box-shadow: none !important;
  text-align: right !important;
}

.song-shell .current-vote-stage span,
.song-shell .current-vote-stage small {
  color: var(--color-text-muted) !important;
  background: transparent !important;
  border: 0 !important;
}

.song-shell .current-vote-stage strong {
  color: var(--color-text) !important;
  background: transparent !important;
  border: 0 !important;
  font-size: 1rem !important;
}

.song-shell .vote-stage-switcher {
  gap: 12px !important;
  margin: 24px 0 12px !important;
  border: 1px solid var(--color-border-strong) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
  box-shadow: none !important;
}

.song-shell .vote-stage-switcher-head {
  display: grid !important;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr) !important;
  gap: 10px 16px !important;
  align-items: start !important;
}

.song-shell .vote-stage-switcher-head span {
  color: var(--color-text) !important;
  font-size: 0.78rem !important;
  font-weight: 900 !important;
}

.song-shell .vote-stage-switcher-head small {
  color: var(--color-text-muted) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  text-align: right !important;
}

.song-shell .vote-stage-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.song-shell .vote-stage-tab {
  min-height: 68px !important;
  align-content: center !important;
  gap: 4px !important;
  border: 1px solid var(--color-border-strong) !important;
  border-radius: 10px !important;
  padding: 12px !important;
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
  box-shadow: none !important;
  transform: none !important;
}

.song-shell .vote-stage-tab:hover {
  border-color: var(--color-brand-border) !important;
  background: #f8fafc !important;
  transform: none !important;
}

.song-shell .vote-stage-tab.active,
.song-shell .vote-stage-tab.active:hover {
  color: var(--color-text) !important;
  background: #eef2ff !important;
  border-color: var(--color-brand-border) !important;
  box-shadow: inset 4px 0 0 var(--color-brand) !important;
}

.song-shell .vote-stage-tab span,
.song-shell .vote-stage-tab strong,
.song-shell .vote-stage-tab small,
.song-shell .vote-stage-tab.active span,
.song-shell .vote-stage-tab.active strong,
.song-shell .vote-stage-tab.active small {
  background: transparent !important;
  border: 0 !important;
  opacity: 1 !important;
}

.song-shell .vote-stage-tab span,
.song-shell .vote-stage-tab small {
  color: var(--color-text-muted) !important;
}

.song-shell .vote-stage-tab.active span,
.song-shell .vote-stage-tab.active small {
  color: var(--color-text-muted) !important;
}

.song-shell .vote-stage-tab strong,
.song-shell .vote-stage-tab.active strong {
  color: var(--color-text) !important;
}

.song-shell .vote-reference-strip {
  margin: 14px 0 8px !important;
}

@media (max-width: 760px) {
  .song-shell .vote-breakdown-panel .panel-head,
  .song-shell .vote-stage-switcher-head,
  .song-shell .vote-stage-tabs {
    grid-template-columns: 1fr !important;
  }

  .song-shell .current-vote-stage,
  .song-shell .vote-stage-switcher-head small {
    justify-items: start !important;
    text-align: left !important;
  }
}

/* Refine the vote phase selector into a compact segmented control. */
.song-shell .vote-breakdown-panel .panel-head {
  grid-template-columns: 1fr !important;
}

.song-shell .vote-breakdown-panel .current-vote-stage {
  display: none !important;
}

.song-shell .vote-stage-switcher {
  gap: 8px !important;
  margin: 18px 0 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.song-shell .vote-stage-switcher-head {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px 12px !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
}

.song-shell .vote-stage-switcher-head span {
  color: var(--color-text) !important;
  font-size: 0.76rem !important;
}

.song-shell .vote-stage-switcher-head small {
  color: var(--color-text-muted) !important;
  font-size: 0.7rem !important;
  text-align: left !important;
}

.song-shell .vote-stage-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.song-shell .vote-stage-tab {
  width: auto !important;
  min-width: 156px !important;
  min-height: 46px !important;
  display: grid !important;
  grid-template-columns: minmax(0, auto) auto !important;
  grid-template-areas:
    "phase rank"
    "meta meta" !important;
  column-gap: 8px !important;
  row-gap: 2px !important;
  align-content: center !important;
  border: 1px solid var(--color-border-strong) !important;
  border-radius: 999px !important;
  padding: 8px 13px !important;
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
  box-shadow: none !important;
}

.song-shell .vote-stage-tab span {
  grid-area: phase !important;
  max-width: 9.5rem !important;
  color: var(--color-text) !important;
  font-size: 0.78rem !important;
}

.song-shell .vote-stage-tab strong {
  grid-area: rank !important;
  color: var(--color-text) !important;
  font-size: 0.78rem !important;
}

.song-shell .vote-stage-tab small {
  grid-area: meta !important;
  color: var(--color-text-muted) !important;
  font-size: 0.66rem !important;
}

.song-shell .vote-stage-tab:hover {
  border-color: var(--color-brand-border) !important;
  background: #f8fafc !important;
}

.song-shell .vote-stage-tab.active,
.song-shell .vote-stage-tab.active:hover {
  background: #ffffff !important;
  border-color: var(--color-brand) !important;
  box-shadow: inset 0 0 0 1px var(--color-brand) !important;
}

.song-shell .vote-stage-tab.active span,
.song-shell .vote-stage-tab.active strong {
  color: var(--color-brand-hover) !important;
}

.song-shell .vote-stage-tab.active small {
  color: var(--color-text-muted) !important;
}

@media (max-width: 760px) {
  .song-shell .vote-stage-tab {
    min-width: min(100%, 176px) !important;
  }
}

/* Song hero: use icon-led groups so the report opens as a visual summary. */
.song-shell .song-hero-panel {
  position: relative !important;
  overflow: hidden !important;
  gap: 20px !important;
  scroll-margin-top: calc(var(--shell-secondary-sticky-top, 0px) + 72px) !important;
  border-color: var(--color-border-strong) !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
}

.song-shell .song-hero-panel::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgb(79 70 229 / 0.06) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, rgb(15 23 42 / 0.04) 0 1px, transparent 1px 100%) !important;
  background-size: 36px 36px !important;
  opacity: 0.45 !important;
}

.song-shell .song-hero-panel > * {
  position: relative !important;
}

.song-shell .song-hero-main {
  grid-template-columns: 116px minmax(0, 1fr) !important;
  gap: 18px !important;
}

.song-shell .song-hero-cover {
  width: 116px !important;
  border-radius: 14px !important;
  border-color: var(--color-border-strong) !important;
  box-shadow: 0 18px 42px rgb(15 23 42 / 0.14) !important;
}

.song-shell .song-hero-copy .eyebrow {
  margin-bottom: 5px !important;
}

.song-shell .song-hero-copy h2 {
  max-width: 18ch !important;
}

.song-shell .song-hero-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.song-shell .song-hero-metric {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  border-color: var(--color-border-strong) !important;
  border-radius: 14px !important;
  padding: 14px !important;
  background: rgb(255 255 255 / 0.92) !important;
  box-shadow: 0 14px 30px rgb(15 23 42 / 0.07) !important;
}

.song-shell .song-hero-metric::before {
  display: none !important;
}

.song-shell .song-hero-icon,
.song-shell .song-hero-stage-icon {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  border: 1px solid var(--color-brand-border) !important;
  border-radius: 12px !important;
  color: var(--color-brand-hover) !important;
  background: #eef2ff !important;
}

.song-shell .song-hero-icon {
  width: 42px !important;
  height: 42px !important;
}

.song-shell .song-hero-icon svg,
.song-shell .song-hero-stage-icon svg {
  width: 22px !important;
  height: 22px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.song-shell .song-hero-metric.good .song-hero-icon {
  color: var(--color-success) !important;
  background: var(--color-success-soft) !important;
  border-color: #86efac !important;
}

.song-shell .song-hero-metric.risk .song-hero-icon {
  color: var(--color-estimated) !important;
  background: var(--color-warning-soft) !important;
  border-color: var(--color-estimated-border) !important;
}

.song-shell .song-hero-metric-copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
}

.song-shell .song-hero-metric-copy span,
.song-shell .song-hero-stage div > span {
  color: var(--color-text-muted) !important;
  font-size: 0.68rem !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

.song-shell .song-hero-metric-copy strong {
  color: var(--color-text) !important;
  font-size: clamp(1.18rem, 1.8vw, 1.55rem) !important;
}

.song-shell .song-hero-metric-copy small,
.song-shell .song-hero-stage small {
  color: var(--color-text-muted) !important;
  font-size: 0.72rem !important;
  line-height: 1.35 !important;
}

.song-shell .song-hero-path {
  position: relative !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.song-shell .song-hero-stage {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 11px !important;
  border-radius: 14px !important;
  padding: 13px !important;
  background: rgb(255 255 255 / 0.9) !important;
  border-color: var(--color-border-strong) !important;
  box-shadow: 0 10px 24px rgb(15 23 42 / 0.055) !important;
  transform: none !important;
}

.song-shell .song-hero-stage:hover {
  background: #f8fafc !important;
  transform: none !important;
}

.song-shell .song-hero-stage.active {
  background: var(--color-derived-soft) !important;
  border-color: var(--color-derived-border) !important;
}

.song-shell .song-hero-stage.active .song-hero-stage-icon {
  color: var(--color-derived) !important;
  background: #f0fdfa !important;
  border-color: var(--color-derived-border) !important;
}

.song-shell .song-hero-stage-icon {
  width: 38px !important;
  height: 38px !important;
}

.song-shell .song-hero-stage strong {
  color: var(--color-text) !important;
  font-size: 0.95rem !important;
}

.song-shell .song-hero-stage div {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
}

@media (max-width: 980px) {
  .song-shell .song-hero-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .song-shell .song-hero-main,
  .song-shell .song-hero-metrics,
  .song-shell .song-hero-path {
    grid-template-columns: 1fr !important;
  }

  .song-shell .song-hero-cover {
    width: 96px !important;
  }
}

/* Rankings: the table is the product. Keep conditions followed immediately by
   the list, and remove sticky/floating helper UI that competes with it. */
.rankings-shell.app-shell {
  padding-top: 22px !important;
}

.rankings-shell > .site-nav {
  position: static !important;
  top: auto !important;
  left: auto !important;
  z-index: auto !important;
  width: 100% !important;
  margin-bottom: 18px !important;
  border-radius: 12px !important;
}

.rankings-shell #presetDeck[hidden],
.rankings-shell .ranking-workbench-head[hidden],
.rankings-shell #rankingSearchPanel[hidden],
.rankings-shell #scrollContextSpacer[hidden],
.rankings-shell #scrollContextBar[hidden],
.rankings-shell #tableStatus[hidden],
.rankings-shell #rowInspector[hidden],
.rankings-shell #comparePanel[hidden],
.rankings-shell #nextActionPanel[hidden],
.rankings-shell #rankingDeepDive[hidden],
.rankings-shell .ranking-read-guide[hidden] {
  display: none !important;
}

.rankings-shell .ranking-results-workbench {
  grid-template-columns: minmax(0, 1fr) !important;
  order: 4 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.rankings-shell .rankings-main {
  gap: 16px !important;
}

.rankings-shell .ranking-table-panel {
  padding: 0 !important;
  border-radius: 12px !important;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border-subtle) !important;
  box-shadow: var(--ds-shadow-sm) !important;
}

.rankings-shell .ranking-table {
  max-height: clamp(480px, calc(100vh - 230px), 720px) !important;
  min-height: 440px !important;
  border-radius: 12px !important;
  border: 0 !important;
}

@supports (height: 100dvh) {
  .rankings-shell .ranking-table {
    max-height: clamp(480px, calc(100dvh - 230px), 720px) !important;
  }
}

.rankings-shell .ranking-table thead th,
.rankings-shell .ranking-table thead th:nth-child(-n + 3) {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}

.rankings-shell .floating-table-header,
.rankings-shell .row-inspector,
.rankings-shell .scroll-context-bar,
.rankings-shell .scroll-context-spacer,
.rankings-shell .table-status {
  display: none !important;
}

.rankings-shell .sort-header-button {
  display: none !important;
}

.rankings-shell .ranking-controls {
  margin-bottom: 0 !important;
}

/* Diagnosis search candidates: make them selectable song cards, not mini
   dashboards. */
.diagnosis-search-shell .diagnosis-search-results-section {
  padding: 0 !important;
  overflow: hidden !important;
}

.diagnosis-search-shell .diagnosis-section-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 16px !important;
  align-items: start !important;
  padding: 22px 24px 0 !important;
}

.diagnosis-search-shell .diagnosis-section-head h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem) !important;
  line-height: 1.12 !important;
}

.diagnosis-search-shell .diagnosis-result-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  padding: 22px 24px 24px !important;
}

.diagnosis-search-shell .diagnosis-result-card {
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto auto auto auto !important;
  gap: 12px !important;
  border-radius: 14px !important;
  padding: 16px !important;
  background: #fff !important;
  border: 1px solid var(--color-border-strong) !important;
  box-shadow: 0 10px 24px rgb(15 23 42 / 0.045) !important;
}

.diagnosis-search-shell .diagnosis-card-main {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
}

.diagnosis-search-shell .diagnosis-card-cover {
  width: 58px !important;
  height: 58px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
  background: var(--color-surface-muted) !important;
  box-shadow: inset 0 0 0 1px rgb(15 23 42 / 0.08) !important;
}

.diagnosis-search-shell .diagnosis-card-cover.fallback {
  display: grid !important;
  place-items: center !important;
  color: var(--color-brand) !important;
  font-weight: 950 !important;
}

.diagnosis-search-shell .diagnosis-card-head {
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
}

.diagnosis-search-shell .diagnosis-card-head h3 {
  overflow: hidden !important;
  margin: 0 !important;
  color: var(--color-text) !important;
  font-size: 1rem !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.diagnosis-search-shell .diagnosis-card-head p {
  overflow: hidden !important;
  margin: 0 !important;
  color: var(--color-text-muted) !important;
  font-size: 0.87rem !important;
  font-weight: 700 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.diagnosis-search-shell .diagnosis-card-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.diagnosis-search-shell .diagnosis-card-tags span {
  min-height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 999px !important;
  padding: 3px 8px !important;
  color: var(--color-text-muted) !important;
  background: var(--color-surface-muted) !important;
  border: 1px solid var(--color-border-subtle) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}

.diagnosis-search-shell .diagnosis-card-tags span:nth-child(1),
.diagnosis-search-shell .diagnosis-card-tags span:nth-child(2) {
  color: var(--color-derived) !important;
  background: var(--color-derived-soft) !important;
  border-color: var(--color-derived-border) !important;
}

.diagnosis-search-shell .diagnosis-card-metrics {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.diagnosis-search-shell .diagnosis-card-metrics dl {
  min-width: 0 !important;
  margin: 0 !important;
  border-radius: 10px !important;
  padding: 9px 10px !important;
  background: #f8fafc !important;
  border: 1px solid var(--color-border-subtle) !important;
}

.diagnosis-search-shell .diagnosis-card-metrics dt {
  overflow: hidden !important;
  margin: 0 0 3px !important;
  color: var(--color-text-subtle) !important;
  font-size: 0.66rem !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.diagnosis-search-shell .diagnosis-card-metrics dd {
  margin: 0 !important;
  color: var(--color-text) !important;
  font-size: 1rem !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
}

.diagnosis-search-shell .diagnosis-card-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr) !important;
  gap: 8px !important;
  align-items: stretch !important;
}

.diagnosis-search-shell .diagnosis-card-actions a {
  min-height: 40px !important;
  border-radius: 10px !important;
  padding: 0 12px !important;
  font-size: 0.8rem !important;
  font-weight: 900 !important;
  text-align: center !important;
  text-decoration: none !important;
}

.diagnosis-search-shell .diagnosis-card-actions a.primary {
  color: #fff !important;
  background: var(--color-brand) !important;
  border-color: var(--color-brand) !important;
}

.diagnosis-search-shell .diagnosis-card-actions a.secondary {
  color: var(--color-brand-hover) !important;
  background: #fff !important;
  border: 1px solid var(--color-border-strong) !important;
}

@media (min-width: 1180px) {
  .diagnosis-search-shell .diagnosis-result-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .diagnosis-search-shell .diagnosis-section-head,
  .diagnosis-search-shell .diagnosis-result-grid,
  .diagnosis-search-shell .diagnosis-card-actions {
    grid-template-columns: 1fr !important;
  }

  .diagnosis-search-shell .diagnosis-secondary-link {
    width: fit-content !important;
  }
}

/* SSC8-VL-032: Mobile-special UI.
   Mobile is not a squeezed desktop workbench. The small-screen layer below
   makes each page reveal the main task first, then details. */
.song-mobile-report {
  display: none !important;
}

@media (max-width: 767px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  body {
    background: var(--color-page) !important;
  }

  :is(.app-shell, .song-shell) {
    width: 100% !important;
    max-width: none !important;
    gap: 32px !important;
    padding: 12px 16px 32px !important;
    padding-inline: 16px !important;
  }

  :is(.app-shell, .song-shell) > .topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: start !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 14px 0 6px !important;
    border: 0 !important;
  }

  :is(.app-shell, .song-shell) > .topbar h1 {
    margin: 0 !important;
    font-size: clamp(1.75rem, 9vw, 2.35rem) !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
  }

  :is(.app-shell, .song-shell) > .topbar .eyebrow {
    margin-bottom: 6px !important;
    font-size: 0.68rem !important;
  }

  .topbar-tools {
    min-width: 0 !important;
    align-self: start !important;
  }

  .language-switcher {
    min-height: 40px !important;
    padding: 4px !important;
    gap: 0 !important;
  }

  .language-switcher > span {
    display: none !important;
  }

  .language-switcher select {
    min-width: 92px !important;
    min-height: 34px !important;
    font-size: 0.8rem !important;
  }

  :is(.app-shell, .song-shell) > .site-nav {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    margin: 0 !important;
    overflow: visible !important;
    border-radius: 14px !important;
    padding: 8px !important;
    background: #fff !important;
    border: 1px solid var(--color-border-strong) !important;
    box-shadow: 0 10px 24px rgb(15 23 42 / 0.07) !important;
  }

  .site-nav-group.page-links {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 6px !important;
    width: 100% !important;
    overflow-x: auto !important;
    padding-bottom: 2px !important;
    scrollbar-width: none !important;
  }

  .site-nav-group.page-links::-webkit-scrollbar {
    display: none !important;
  }

  .site-nav-label {
    display: none !important;
  }

  .site-nav-link {
    flex: 0 0 auto !important;
    min-width: 78px !important;
    min-height: 40px !important;
    justify-content: center !important;
    border-radius: 9px !important;
    padding: 0 6px !important;
    font-size: 0.74rem !important;
    line-height: 1.1 !important;
    white-space: normal !important;
  }

  .page-links .site-nav-link:last-child {
    display: flex !important;
  }

  .site-nav .shell-quick-search {
    display: none !important;
  }

  .data-footer {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 16px 0 24px !important;
  }

  :is(
    .overview-content-panel,
    .overview-summary,
    .diagnosis-search-hero,
    .diagnosis-reading-steps,
    .diagnosis-search-results-section,
    .diagnosis-route-panel,
    .ranking-controls,
    .ranking-table-panel,
    .report-section,
    .guide-hero,
    .guide-section,
    .methodology-hero,
    .methodology-panel,
    .song-hero-panel,
    .panel
  ) {
    border-radius: 14px !important;
    padding: 16px !important;
  }

  :is(
    .overview-entry-grid,
    .overview-site-map,
    .overview-value-kind-grid,
    .overview-closing-links,
    .diagnosis-route-grid,
    .reading-map-grid,
    .route-card-grid,
    .report-deep-link-grid,
    .guide-quick-grid,
    .guide-shell .metric-glossary,
    .guide-shell .guide-type-grid,
    .methodology-principle-grid,
    .methodology-grid,
    .methodology-list-grid,
    .song-hero-metrics,
    .song-hero-path,
    .summary-card-grid,
    .report-grid
  ) {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .overview-summary {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .overview-summary h2 {
    font-size: clamp(2rem, 10vw, 2.65rem) !important;
  }

  .overview-hero-actions,
  .overview-closing-links,
  .next-view-links {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .overview-hero-actions a,
  .overview-closing-links a,
  .next-view-links a {
    min-height: 44px !important;
    justify-content: center !important;
  }

  .overview-stage-copy-grid,
  .overview-stat-grid,
  #overviewVoting,
  #overviewReadGuide,
  #resultOverview {
    display: none !important;
  }

  .overview-funnel-figure {
    padding: 14px !important;
  }

  .overview-funnel-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
  }

  .overview-funnel-row b {
    grid-column: 1 / -1 !important;
    justify-self: start !important;
  }

  .diagnosis-search-hero {
    grid-template-columns: 1fr !important;
  }

  .diagnosis-search-form {
    grid-template-columns: 1fr !important;
  }

  .diagnosis-search-form button {
    min-height: 44px !important;
  }

  .diagnosis-reading-steps {
    grid-template-columns: 1fr !important;
  }

  .diagnosis-step-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .diagnosis-step-list li {
    min-height: 44px !important;
  }

  .diagnosis-search-shell .diagnosis-result-grid {
    grid-template-columns: 1fr !important;
    padding: 16px !important;
  }

  .diagnosis-search-shell .diagnosis-result-card {
    padding: 14px !important;
  }

  .diagnosis-search-shell .diagnosis-card-metrics {
    display: none !important;
  }

  .diagnosis-search-shell .diagnosis-card-actions {
    grid-template-columns: 1fr !important;
  }

  .rankings-shell.app-shell {
    gap: 20px !important;
    padding-top: 12px !important;
  }

  .rankings-shell .rankings-main {
    display: grid !important;
    gap: 14px !important;
  }

  .rankings-shell .ranking-controls {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    order: 1 !important;
    margin: 0 !important;
    padding: 16px !important;
  }

  .rankings-shell .ranking-controls-head {
    display: grid !important;
    gap: 4px !important;
  }

  .rankings-shell .ranking-controls-head span {
    font-size: 1.25rem !important;
  }

  .rankings-shell .ranking-controls label {
    display: grid !important;
    gap: 6px !important;
  }

  .rankings-shell .ranking-controls select,
  .rankings-shell .ranking-controls input {
    min-height: 44px !important;
    width: 100% !important;
  }

  .rankings-shell #rankingDetailFilters,
  .rankings-shell .ranking-contract,
  .rankings-shell #comparePanel,
  .rankings-shell #nextActionPanel,
  .rankings-shell #rankingDeepDive,
  .rankings-shell .ranking-read-guide,
  .rankings-shell #rowInspector,
  .rankings-shell #floatingTableHeader,
  .rankings-shell #scrollContextBar,
  .rankings-shell #scrollContextSpacer {
    display: none !important;
  }

  .rankings-shell .ranking-results-workbench {
    order: 2 !important;
    display: block !important;
    margin: 0 !important;
  }

  .rankings-shell .ranking-table-panel {
    display: block !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .rankings-shell .ranking-table {
    display: none !important;
  }

  .rankings-shell .ranking-mobile-list {
    display: grid !important;
    gap: 10px !important;
    max-height: min(68vh, 620px) !important;
    padding: 10px !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
    background: var(--color-surface) !important;
  }

  @supports (height: 100dvh) {
    .rankings-shell .ranking-mobile-list {
      max-height: min(68dvh, 620px) !important;
    }
  }

  .rankings-shell .ranking-mobile-card {
    gap: 10px !important;
    border-radius: 12px !important;
    padding: 12px !important;
    background: #fff !important;
    border: 1px solid var(--color-border-subtle) !important;
    box-shadow: none !important;
  }

  .rankings-shell .ranking-mobile-card .song-cell {
    align-items: center !important;
  }

  .rankings-shell .mobile-selected-metric {
    border-radius: 10px !important;
    background: var(--color-derived-soft) !important;
    border-color: var(--color-derived-border) !important;
  }

  .rankings-shell .mobile-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .rankings-shell .mobile-metrics div:nth-child(n + 5) {
    display: none !important;
  }

  .rankings-shell .mobile-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .rankings-shell .mobile-actions a,
  .rankings-shell .mobile-actions button {
    min-height: 44px !important;
    justify-content: center !important;
  }

  .rankings-shell .mobile-actions .secondary {
    display: none !important;
  }

  .graph-shell.app-shell {
    gap: 14px !important;
    padding-top: 10px !important;
  }

  .graph-shell > .topbar {
    padding-bottom: 0 !important;
  }

  .graph-shell > .topbar .graph-intro {
    display: none !important;
  }

  .graph-shell .graph-command-bar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 10px !important;
    border-radius: 14px !important;
  }

  .graph-shell .graph-control-panel {
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .graph-shell .graph-control-panel-head {
    display: none !important;
  }

  .graph-shell .graph-search-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .graph-shell .map-search-control {
    min-width: 0 !important;
    width: 100% !important;
  }

  .graph-shell #graphSearch {
    min-height: 44px !important;
    width: 100% !important;
  }

  .graph-shell #resetView {
    display: none !important;
  }

  .graph-shell .graph-view-controls {
    display: grid !important;
    gap: 10px !important;
  }

  .graph-shell .mode-axis-group,
  .graph-shell .basis-control-group {
    display: grid !important;
    gap: 6px !important;
  }

  .graph-shell .mode-tabs {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding-bottom: 2px !important;
    scroll-snap-type: x mandatory !important;
  }

  .graph-shell .mode-tab {
    min-width: 132px !important;
    min-height: 42px !important;
    flex: 0 0 auto !important;
    scroll-snap-align: start !important;
    white-space: normal !important;
  }

  .graph-shell .ruler-switch {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .graph-shell .mode-description,
  .graph-shell #graphStateChips {
    display: none !important;
  }

  .graph-shell .graph-workbench {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    height: auto !important;
    max-height: none !important;
    padding: 8px !important;
  }

  .graph-shell .filter-drawer {
    order: 1 !important;
    max-width: none !important;
  }

  .graph-shell .filter-drawer > summary {
    min-height: 42px !important;
    padding: 0 12px !important;
  }

  .graph-shell .filter-drawer > summary small {
    display: none !important;
  }

  .graph-shell .map-panel {
    order: 2 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  .graph-shell .map-head {
    padding: 10px 10px 0 !important;
  }

  .graph-shell .map-head h2 {
    font-size: 1.15rem !important;
  }

  .graph-shell .map-stats {
    display: none !important;
  }

  .graph-shell .canvas-stage {
    min-height: 360px !important;
    height: min(58vh, 470px) !important;
  }

  @supports (height: 100dvh) {
    .graph-shell .canvas-stage {
      height: min(58dvh, 470px) !important;
    }
  }

  .graph-shell .map-guide {
    max-width: 148px !important;
  }

  .graph-shell .map-guide-detail:not([open]) {
    max-width: 148px !important;
  }

  .graph-shell .map-guide-detail:not([open]) > summary {
    min-height: 34px !important;
    padding: 0 10px !important;
    font-size: 0.72rem !important;
  }

  .graph-shell .map-guide-detail:not([open]) > summary::after {
    content: "+" !important;
    font-size: 0.8rem !important;
  }

  .graph-shell .right-panel {
    order: 3 !important;
    width: auto !important;
    max-width: none !important;
    max-height: 44vh !important;
    overflow: auto !important;
    padding: 10px !important;
    border-radius: 14px !important;
  }

  @supports (height: 100dvh) {
    .graph-shell .right-panel {
      max-height: 44dvh !important;
    }
  }

  .graph-shell .selected-card {
    padding: 10px !important;
  }

  .graph-shell .selected-head {
    grid-template-columns: 54px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .graph-shell .cover-wrap,
  .graph-shell .cover-wrap img {
    width: 54px !important;
    height: 54px !important;
  }

  .graph-shell .selected-title {
    font-size: 1rem !important;
  }

  .graph-shell .selected-ruler {
    padding: 10px !important;
  }

  .graph-shell .selected-relative-grid,
  .graph-shell .selected-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .graph-shell .selected-actions {
    grid-template-columns: 1fr !important;
  }

  .graph-shell .selected-actions a {
    min-height: 44px !important;
  }

  .graph-shell .selected-detail-drawer {
    margin-top: 10px !important;
    padding-top: 10px !important;
  }

  .graph-shell .map-reading-callout {
    display: block !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 2px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--color-text-muted) !important;
    font-size: 0.8rem !important;
    line-height: 1.6 !important;
  }

  .graph-shell .map-reading-callout strong {
    display: inline !important;
    margin-right: 6px !important;
    color: var(--color-text) !important;
  }

  .graph-shell #graphDisplayControls,
  .graph-shell #mapInsightDeck,
  .graph-shell .graph-next-panel {
    display: none !important;
  }

  .report-shell .report-hero {
    grid-template-columns: 1fr !important;
    padding: 18px !important;
  }

  .report-shell .report-kpis,
  .report-shell .reading-map-grid,
  .report-shell .featured-report-grid,
  .report-shell .support-analysis-grid,
  .report-shell .feature-list-grid {
    grid-template-columns: 1fr !important;
  }

  .report-shell .report-data-section:nth-of-type(n + 8) {
    display: none !important;
  }

  .report-shell .structure-list .mobile-extra-row,
  .report-shell .compact-card-list > :nth-child(n + 4),
  .report-shell .feature-list-grid > :nth-child(n + 4) {
    display: none !important;
  }

  .report-shell .route-card-grid {
    grid-template-columns: 1fr !important;
  }

  .report-shell .report-deep-links,
  .report-shell #dataNotice {
    display: none !important;
  }

  .guide-shell main,
  .guide-reference-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .guide-shell .guide-side-nav {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 12px !important;
  }

  .guide-shell .guide-side-nav strong {
    grid-column: 1 / -1 !important;
  }

  .guide-shell .guide-side-nav a {
    min-height: 38px !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .guide-shell .guide-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .guide-shell .guide-focus,
  .guide-shell .guide-axis-cards {
    grid-template-columns: 1fr !important;
  }

  .methodology-shell {
    max-width: 100% !important;
  }

  .methodology-shell .methodology-main {
    gap: 18px !important;
  }

  .methodology-shell .methodology-table {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    border: 0 !important;
    background: transparent !important;
  }

  .methodology-shell .methodology-table > div {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    border: 1px solid var(--color-border-subtle) !important;
    border-radius: 12px !important;
    padding: 12px !important;
    background: #fff !important;
  }

  .methodology-shell .methodology-table > div:first-child {
    display: none !important;
  }

  .song-shell {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 16px !important;
    gap: 18px !important;
    overflow-x: hidden !important;
  }

  .song-shell > .topbar,
  .song-shell > .site-nav {
    display: none !important;
  }

  .song-shell #songReport {
    display: block !important;
  }

  .song-shell #songReport,
  .song-shell .song-mobile-report,
  .song-shell .song-mobile-report > * {
    box-sizing: border-box !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  .song-shell .song-mobile-report {
    display: grid !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  .song-shell .song-mobile-report ~ * {
    display: none !important;
  }

  .song-mobile-local-header {
    position: relative !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  .song-mobile-local-header a {
    color: var(--color-brand-hover) !important;
    font-size: 0.88rem !important;
    font-weight: 900 !important;
    text-decoration: none !important;
  }

  .song-mobile-identity {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
    padding: 16px !important;
    border: 1px solid var(--color-border-strong) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 16px 34px rgb(15 23 42 / 0.08) !important;
  }

  .song-mobile-identity > div {
    min-width: 0 !important;
  }

  .song-mobile-cover {
    width: 64px !important;
    height: 64px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    display: grid !important;
    place-items: center !important;
    background: var(--color-surface-tint) !important;
    border: 1px solid var(--color-border-subtle) !important;
    color: var(--color-text-muted) !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
  }

  .song-mobile-cover img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .song-mobile-identity .eyebrow {
    margin: 0 0 4px !important;
    color: var(--color-brand-hover) !important;
    font-size: 0.68rem !important;
    font-weight: 950 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }

  .song-mobile-identity h1 {
    margin: 0 !important;
    color: var(--color-text) !important;
    font-size: clamp(1.55rem, 8vw, 2rem) !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere !important;
  }

  .song-mobile-identity p {
    margin: 5px 0 0 !important;
    color: var(--color-text-muted) !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
  }

  .song-mobile-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 10px !important;
  }

  .song-mobile-badges span {
    min-height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    border-radius: 999px !important;
    padding: 0 9px !important;
    color: var(--color-text) !important;
    background: #f8fafc !important;
    border: 1px solid var(--color-border-subtle) !important;
    font-size: 0.72rem !important;
    font-weight: 900 !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  .song-mobile-summary-card,
  .song-mobile-findings,
  .song-mobile-next-focus,
  .song-mobile-accordion-item {
    padding: 16px !important;
    border: 1px solid var(--color-border-strong) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 10px 26px rgb(15 23 42 / 0.055) !important;
  }

  .song-mobile-summary-card {
    border-left: 3px solid var(--color-brand) !important;
  }

  .song-mobile-summary-card .eyebrow {
    margin: 0 0 4px !important;
    color: var(--color-brand-hover) !important;
    font-size: 0.72rem !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
  }

  .song-mobile-summary-card h3,
  .song-mobile-findings h3,
  .song-mobile-next-focus h3 {
    margin: 0 !important;
    color: var(--color-text) !important;
    font-size: 1.08rem !important;
    line-height: 1.25 !important;
  }

  .song-mobile-summary-card p,
  .song-mobile-next-focus p,
  .song-mobile-accordion-item p {
    margin: 8px 0 0 !important;
    color: var(--color-text-muted) !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    line-height: 1.65 !important;
  }

  .song-mobile-section-head {
    display: grid !important;
    gap: 4px !important;
    margin-bottom: 12px !important;
  }

  .song-mobile-section-head p {
    margin: 0 !important;
    color: var(--color-text-muted) !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
  }

  .song-mobile-finding-grid {
    display: grid !important;
    gap: 10px !important;
  }

  .song-mobile-finding-card {
    display: grid !important;
    gap: 5px !important;
    min-height: 104px !important;
    padding: 13px !important;
    border-radius: 14px !important;
    background: #fff !important;
    border: 1px solid var(--color-border-subtle) !important;
  }

  .song-mobile-finding-card .kind-badge {
    width: fit-content !important;
  }

  .song-mobile-finding-card span {
    color: var(--color-text-muted) !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
  }

  .song-mobile-finding-card strong {
    color: var(--color-text) !important;
    font-size: 1.45rem !important;
    line-height: 1.05 !important;
  }

  .song-mobile-finding-card small {
    color: var(--color-text-muted) !important;
    font-size: 0.78rem !important;
    font-weight: 750 !important;
    line-height: 1.45 !important;
  }

  .song-mobile-next-focus {
    display: grid !important;
    gap: 12px !important;
  }

  .song-mobile-next-focus .button-link.primary {
    min-height: 44px !important;
    justify-content: center !important;
  }

  .song-mobile-accordion {
    display: grid !important;
    gap: 12px !important;
  }

  .song-mobile-accordion-item {
    overflow: hidden !important;
  }

  .song-mobile-accordion-item > summary {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: -8px -8px 0 !important;
    padding: 8px !important;
    color: var(--color-text) !important;
    cursor: pointer !important;
    font-size: 0.94rem !important;
    font-weight: 950 !important;
    list-style: none !important;
  }

  .song-mobile-accordion-item > summary::-webkit-details-marker,
  .song-mobile-nested-detail > summary::-webkit-details-marker {
    display: none !important;
  }

  .song-mobile-accordion-item > summary::after,
  .song-mobile-nested-detail > summary::after {
    content: "+" !important;
    flex: 0 0 auto !important;
    color: var(--color-brand-hover) !important;
    font-weight: 950 !important;
  }

  .song-mobile-accordion-item[open] > summary::after,
  .song-mobile-nested-detail[open] > summary::after {
    content: "-" !important;
  }

  .song-mobile-band-list {
    display: grid !important;
    gap: 10px !important;
    margin-top: 10px !important;
  }

  .song-mobile-band {
    display: grid !important;
    gap: 8px !important;
    padding: 12px !important;
    border-radius: 14px !important;
    background: #fff !important;
    border: 1px solid var(--color-border-subtle) !important;
  }

  .song-mobile-band div {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 2px 12px !important;
    align-items: end !important;
  }

  .song-mobile-band span {
    color: var(--color-text) !important;
    font-size: 0.84rem !important;
    font-weight: 950 !important;
  }

  .song-mobile-band strong {
    color: var(--color-text) !important;
    font-size: 1.15rem !important;
    justify-self: end !important;
  }

  .song-mobile-band small {
    grid-column: 1 / -1 !important;
    color: var(--color-text-muted) !important;
    font-size: 0.76rem !important;
    font-weight: 800 !important;
  }

  .song-mobile-band i {
    height: 8px !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    background: #e2e8f0 !important;
  }

  .song-mobile-band i b {
    display: block !important;
    height: 100% !important;
    border-radius: inherit !important;
  }

  .song-mobile-band.top i b {
    background: var(--color-observed) !important;
  }

  .song-mobile-band.mid i b {
    background: var(--color-derived) !important;
  }

  .song-mobile-band.low i b {
    background: var(--color-text-muted) !important;
  }

  .song-mobile-nested-detail {
    margin-top: 12px !important;
    padding-top: 10px !important;
    border-top: 1px solid var(--color-border-subtle) !important;
  }

  .song-mobile-nested-detail > summary {
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: var(--color-brand-hover) !important;
    cursor: pointer !important;
    font-size: 0.84rem !important;
    font-weight: 900 !important;
    list-style: none !important;
  }

  .song-mobile-nested-detail .vote-mini {
    margin-top: 10px !important;
  }

  .song-mobile-compare-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 10px !important;
  }

  .song-mobile-compare-grid > div {
    display: grid !important;
    gap: 3px !important;
    padding: 12px !important;
    border-radius: 12px !important;
    border: 1px solid var(--color-border-subtle) !important;
    background: #fff !important;
  }

  .song-mobile-compare-grid span,
  .song-mobile-stage-list span,
  .song-mobile-near-list span {
    color: var(--color-text-muted) !important;
    font-size: 0.74rem !important;
    font-weight: 900 !important;
  }

  .song-mobile-compare-grid strong,
  .song-mobile-stage-list strong,
  .song-mobile-near-list strong {
    color: var(--color-text) !important;
    font-size: 0.96rem !important;
  }

  .song-mobile-stage-list,
  .song-mobile-near-list {
    display: grid !important;
    gap: 10px !important;
    margin-top: 10px !important;
  }

  .song-mobile-stage-list a,
  .song-mobile-near-list a {
    display: grid !important;
    gap: 4px !important;
    padding: 12px !important;
    color: inherit !important;
    text-decoration: none !important;
    border-radius: 13px !important;
    border: 1px solid var(--color-border-subtle) !important;
    background: #fff !important;
  }

  .song-mobile-stage-list a.active {
    border-color: var(--color-derived-border) !important;
    background: var(--color-derived-soft) !important;
  }

  .song-mobile-stage-list small,
  .song-mobile-near-list small {
    color: var(--color-text-muted) !important;
    font-size: 0.76rem !important;
    font-weight: 750 !important;
    line-height: 1.45 !important;
  }

  .song-mobile-accordion-item .button-link.secondary {
    min-height: 42px !important;
    justify-content: center !important;
    margin-top: 12px !important;
  }

  .song-mobile-accordion-item.estimated {
    border-color: var(--color-estimated-border) !important;
    background: #fff !important;
  }

  .song-mobile-estimated-note {
    display: grid !important;
    gap: 6px !important;
    margin-top: 10px !important;
    padding: 12px !important;
    border-radius: 13px !important;
    border: 1px solid var(--color-estimated-border) !important;
    background: var(--color-estimated-soft) !important;
  }

  .song-mobile-estimated-note strong {
    color: var(--color-text) !important;
    font-size: 0.9rem !important;
    font-weight: 950 !important;
  }

  .song-mobile-estimated-note p {
    margin: 0 !important;
    color: var(--color-text-muted) !important;
    font-size: 0.82rem !important;
    font-weight: 750 !important;
    line-height: 1.55 !important;
  }

  .song-shell .song-hero-panel {
    padding: 16px !important;
  }

  .song-shell .song-hero-main {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 12px !important;
  }

  .song-shell .song-hero-cover {
    display: block !important;
    width: 72px !important;
    height: 72px !important;
    border-radius: 12px !important;
  }

  .song-shell .song-hero-cover img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .song-shell .song-hero-copy h2 {
    max-width: none !important;
    font-size: clamp(1.8rem, 8vw, 2.25rem) !important;
  }

  .song-shell .song-hero-metrics {
    grid-template-columns: 1fr !important;
  }

  .song-shell .song-hero-path {
    grid-template-columns: 1fr !important;
  }

  .song-shell .song-hero-action-groups {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .song-shell .song-hero-action-group {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .song-shell .song-hero-action-group.secondary-actions .button-link:nth-child(n + 3) {
    display: none !important;
  }

  .song-shell .mobile-section-tabs {
    display: flex !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding: 8px !important;
    border-radius: 12px !important;
  }

  .song-shell .mobile-section-tabs a {
    min-width: max-content !important;
    min-height: 38px !important;
  }

  .song-shell .report-section {
    scroll-margin-top: 12px !important;
  }

  .song-shell details.advanced-analysis-disclosure:not([open]),
  .song-shell details.disclosure-panel:not([open]) {
    padding: 0 !important;
  }

  .song-shell .song-mobile-report ~ * {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  :is(.app-shell, .song-shell) {
    padding-inline: 20px !important;
  }

  .site-nav-group.page-links {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .rankings-shell .ranking-results-workbench {
    grid-template-columns: 1fr !important;
  }

  .rankings-shell #rowInspector {
    display: none !important;
  }

  .graph-shell .graph-workbench {
    grid-template-columns: 1fr !important;
  }

  .graph-shell .right-panel {
    max-height: 420px !important;
    overflow: auto !important;
  }
}

@media (max-width: 767px) {
  body.song-body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }

  .song-shell,
  .song-shell *,
  .song-shell *::before,
  .song-shell *::after {
    box-sizing: border-box !important;
  }

  .song-shell {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 16px !important;
    overflow-x: hidden !important;
  }

  .song-shell #songReport,
  .song-shell .song-mobile-report,
  .song-shell .song-mobile-report > * {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .song-shell .song-mobile-report :is(p, small, span, strong, h1, h2, h3, summary, a) {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
}

/* Map mobile: compact toolbar, not a stacked desktop control surface.
   Lazyweb map references favor a slim search/filter strip and keep advanced
   controls out of the first viewport. */
@media (max-width: 767px) {
  .graph-shell .graph-command-bar,
  .graph-shell .map-insight-deck,
  .graph-shell .graph-controls,
  .graph-shell .graph-next-panel,
  .graph-shell .graph-data-footer {
    display: none !important;
  }

  .graph-shell .mobile-map-panel {
    display: grid !important;
    gap: 5px !important;
    padding: 7px !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 24px rgb(15 23 42 / 0.07) !important;
  }

  .graph-shell .mobile-map-distance,
  .graph-shell .mobile-map-distance strong {
    font-size: 0.64rem !important;
    line-height: 1.3 !important;
  }

  .graph-shell .mobile-map-controls {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  .graph-shell .mobile-map-search {
    grid-column: 1 / -1 !important;
  }

  .graph-shell .mobile-map-axis,
  .graph-shell .mobile-filter-button {
    grid-column: auto !important;
    min-width: 0 !important;
  }

  .graph-shell .mobile-filter-button {
    display: none !important;
  }

  .graph-shell .mobile-map-search span,
  .graph-shell .mobile-map-axis span {
    font-size: 0.56rem !important;
  }

  .graph-shell .mobile-map-panel input,
  .graph-shell .mobile-map-panel select,
  .graph-shell .mobile-filter-button {
    min-height: 34px !important;
    border-radius: 9px !important;
    padding-inline: 8px !important;
    font-size: 0.75rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .graph-shell .mobile-filter-button {
    font-size: 0.68rem !important;
    white-space: nowrap !important;
  }

  .graph-shell .mobile-map-ruler {
    gap: 5px !important;
  }

  .graph-shell .mobile-map-ruler .ruler-button {
    min-height: 30px !important;
    border-radius: 9px !important;
    font-size: 0.68rem !important;
  }

  .graph-shell .mobile-map-tabs {
    gap: 5px !important;
  }

  .graph-shell .mobile-map-tab {
    min-height: 34px !important;
    border-radius: 9px !important;
    font-size: 0.72rem !important;
  }

  .graph-shell .left-panel.filter-drawer > summary {
    min-height: 36px !important;
    width: fit-content !important;
    max-width: calc(100vw - 64px) !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    font-size: 0.72rem !important;
  }

  .graph-shell .left-panel.filter-drawer > summary .filter-summary-extra {
    display: none !important;
  }
}

/* Final mobile Map override: canvas first, overlays outside the map. */
.mobile-map-tools {
  display: none;
}

@media (max-width: 767px) {
  .graph-body {
    overflow-x: hidden !important;
  }

  .graph-shell {
    box-sizing: border-box !important;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    margin-inline: 10px !important;
    overflow-x: hidden !important;
    gap: 8px !important;
    padding: 10px 0 18px !important;
  }

  .graph-shell > *,
  .graph-shell .mobile-map-panel,
  .graph-shell .graph-workbench,
  .graph-shell .map-panel,
  .graph-shell .right-panel,
  .graph-shell .selected-card {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .graph-shell .mobile-map-panel,
  .graph-shell .graph-workbench,
  .graph-shell .map-panel,
  .graph-shell .right-panel,
  .graph-shell .selected-card {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
  }

  .graph-shell .site-nav {
    display: none !important;
  }

  .graph-shell > .topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    width: 100% !important;
    gap: 10px !important;
    padding-block: 8px 4px !important;
  }

  .graph-shell > .topbar .eyebrow,
  .graph-shell .graph-intro,
  .graph-shell .mobile-map-distance {
    display: none !important;
  }

  .graph-shell > .topbar h1 {
    font-size: 1.38rem !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
  }

  .graph-shell .topbar-tools {
    margin-left: auto !important;
  }

  .graph-shell .language-switcher {
    min-height: 34px !important;
    padding: 3px 4px 3px 8px !important;
    border-radius: 10px !important;
  }

  .graph-shell .language-switcher span {
    display: none !important;
  }

  .graph-shell .graph-language-select {
    min-height: 28px !important;
    padding: 0 22px 0 8px !important;
    font-size: 0.72rem !important;
  }

  .graph-shell .mobile-map-panel {
    gap: 6px !important;
    padding: 7px !important;
    border-radius: 12px !important;
  }

  .graph-shell .mobile-map-controls {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px !important;
  }

  .graph-shell .mobile-map-search {
    grid-column: 1 / -1 !important;
  }

  .graph-shell .mobile-map-search span,
  .graph-shell .mobile-map-axis span {
    display: none !important;
  }

  .graph-shell .mobile-map-panel input,
  .graph-shell .mobile-map-panel select {
    width: 100% !important;
    min-height: 36px !important;
    border-radius: 10px !important;
    font-size: 0.76rem !important;
  }

  .graph-shell .mobile-map-axis {
    min-width: 0 !important;
  }

  .graph-shell .mobile-filter-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 86px !important;
    min-height: 36px !important;
    padding-inline: 10px !important;
    border-radius: 10px !important;
    font-size: 0.72rem !important;
    white-space: nowrap !important;
  }

  .graph-shell .mobile-map-ruler .ruler-button,
  .graph-shell .mobile-map-tab {
    min-height: 32px !important;
  }

  .graph-shell .mobile-map-tabs {
    display: none !important;
  }

  .graph-shell .graph-workbench {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .graph-shell .map-panel {
    width: 100% !important;
    height: clamp(340px, 46dvh, 430px) !important;
    min-height: 340px !important;
    border: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #071216 !important;
  }

  .graph-shell .canvas-stage {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
  }

  .graph-shell #graphCanvas {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    touch-action: none !important;
    cursor: grab !important;
  }

  .graph-shell #graphCanvas:active {
    cursor: grabbing !important;
  }

  .graph-shell .map-head,
  .graph-shell .map-guide,
  .graph-shell .map-legend,
  .graph-shell .nav-pad,
  .graph-shell .graph-tooltip {
    display: none !important;
  }

  .graph-shell .left-panel.filter-drawer:not([open]) {
    display: none !important;
  }

  .graph-shell .left-panel.filter-drawer[open] {
    position: fixed !important;
    z-index: 80 !important;
    inset: auto 10px 10px !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(78dvh, 620px) !important;
    overflow: auto !important;
    border: 1px solid var(--color-border-strong) !important;
    border-radius: 18px !important;
    padding: 12px !important;
    background: var(--color-surface) !important;
    box-shadow: 0 26px 80px rgb(15 23 42 / 0.24) !important;
  }

  .graph-shell .right-panel {
    display: block !important;
    grid-template-rows: none !important;
    position: static !important;
    z-index: auto !important;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 8px 0 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .graph-shell .mobile-map-panel,
  .graph-shell .graph-workbench,
  .graph-shell .map-panel,
  .graph-shell .right-panel,
  .graph-shell .selected-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  .graph-shell .selected-card {
    display: grid !important;
    align-content: start !important;
    align-self: start !important;
    position: relative !important;
    min-height: 0 !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    border: 1px solid var(--color-border-strong) !important;
    border-radius: 15px !important;
    padding: 10px 12px 11px !important;
    background: var(--color-surface) !important;
    box-shadow: 0 14px 34px rgb(15 23 42 / 0.08) !important;
  }

  .graph-shell .selected-card::before {
    display: none !important;
  }

  .graph-shell .selected-card-kicker {
    display: none !important;
  }

  .graph-shell .selected-head {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 9px !important;
    margin: 0 !important;
    padding-right: 0 !important;
  }

  .graph-shell .selected-head .cover-wrap {
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
  }

  .graph-shell .selected-title {
    margin: 0 !important;
    overflow: hidden !important;
    color: var(--color-text) !important;
    font-size: 0.96rem !important;
    font-weight: 950 !important;
    line-height: 1.18 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .graph-shell .selected-copy,
  .graph-shell .selected-meta-row {
    min-width: 0 !important;
  }

  .graph-shell .selected-meta-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 3px !important;
  }

  .graph-shell .selected-artist {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 48px) !important;
    margin-top: 0 !important;
    overflow: hidden !important;
    color: var(--color-text-muted) !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .graph-shell .selected-type-icon {
    display: grid !important;
    grid-template-columns: 24px 8px !important;
    align-items: end !important;
    align-self: center !important;
    flex: 0 0 auto !important;
    gap: 4px !important;
    position: static !important;
    justify-self: end !important;
    width: 38px !important;
    height: 22px !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 999px !important;
    padding: 3px 4px !important;
    background: rgb(255 255 255 / 0.94) !important;
    box-shadow: 0 6px 14px rgb(15 23 42 / 0.08) !important;
  }

  .graph-shell .selected-type-icon .selected-type-bars {
    display: grid !important;
    grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
    align-items: end !important;
    gap: 1px !important;
    height: 14px !important;
    margin: 0 !important;
  }

  .graph-shell .selected-type-icon .selected-type-bars span,
  .graph-shell .selected-type-icon .selected-type-bands span {
    min-height: 2px !important;
    border-radius: 2px 2px 1px 1px !important;
    background: linear-gradient(180deg, var(--selected-type-color, var(--color-accent)), rgb(94 234 212 / 0.34)) !important;
    box-shadow: none !important;
    animation: none !important;
  }

  .graph-shell .selected-type-icon .selected-type-bands {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: end !important;
    gap: 1px !important;
    height: 14px !important;
  }

  .graph-shell .selected-type-fallback-shape {
    display: block !important;
    align-self: center !important;
    width: 20px !important;
    height: 12px !important;
    border-radius: 8px 8px 3px 3px !important;
    background: var(--selected-type-color, var(--color-accent)) !important;
  }

  .graph-shell .selected-stage-line {
    display: block !important;
    margin-top: 6px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    color: var(--color-text-muted) !important;
    background: transparent !important;
    font-size: 0.74rem !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .graph-shell .selected-stage-ranks {
    display: none !important;
  }

  .graph-shell .selected-stage-rank {
    display: grid !important;
    grid-template-columns: 84px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 10px !important;
  }

  .graph-shell .selected-stage-rank span,
  .graph-shell .selected-stage-rank strong,
  .graph-shell .selected-stage-rank small {
    margin: 0 !important;
  }

  .graph-shell .selected-actions {
    display: block !important;
    margin-top: 8px !important;
  }

  .graph-shell .selected-actions .detail-link {
    width: fit-content !important;
    min-width: 104px !important;
    min-height: 36px !important;
    border-radius: 10px !important;
    padding-inline: 13px !important;
    font-size: 0.82rem !important;
  }

  .graph-shell[data-mobile-view="list"] .map-panel,
  .graph-shell[data-mobile-view="list"] .selected-card,
  .graph-shell[data-mobile-view="map"] .right-panel .preset-section {
    display: none !important;
  }

  .graph-shell[data-mobile-view="list"] .right-panel {
    margin-top: 0 !important;
    border: 1px solid var(--color-border-strong) !important;
    border-radius: 16px !important;
    padding: 12px !important;
    background: var(--color-surface) !important;
  }

  .graph-shell .mobile-map-tools {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    margin-top: 8px !important;
  }

  .graph-shell .mobile-map-tool-button,
  .graph-shell .mobile-map-tool-link,
  .graph-shell .mobile-map-tool-chip {
    min-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--color-border-strong) !important;
    border-radius: 999px !important;
    padding: 0 12px !important;
    color: var(--color-text) !important;
    background: var(--color-surface) !important;
    font: inherit !important;
    font-size: 0.74rem !important;
    font-weight: 850 !important;
    text-decoration: none !important;
  }

  .graph-shell .mobile-map-tool-button {
    color: var(--readable-brand) !important;
    background: var(--color-brand-soft) !important;
    border-color: var(--color-brand-border) !important;
    cursor: pointer !important;
  }

  .graph-shell .mobile-map-tool-chip {
    color: var(--color-text-muted) !important;
    background: var(--color-surface-muted) !important;
  }

  .graph-shell .map-reading-callout {
    margin: 2px 2px 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--color-text-muted) !important;
    font-size: 0.76rem !important;
    line-height: 1.6 !important;
  }

  .graph-shell .map-reading-callout strong {
    display: inline !important;
    margin-right: 6px !important;
    color: var(--color-text) !important;
  }
}

html.map-touch-layout,
html.map-touch-layout body {
  overflow-x: hidden !important;
}

html.map-touch-layout .graph-shell {
  box-sizing: border-box !important;
  width: min(100%, 820px) !important;
  max-width: min(100%, 820px) !important;
  margin-inline: auto !important;
  gap: 8px !important;
  padding: 10px 12px 24px !important;
  overflow-x: hidden !important;
}

html.map-touch-layout .graph-shell > *,
html.map-touch-layout .graph-shell .mobile-map-panel,
html.map-touch-layout .graph-shell .graph-workbench,
html.map-touch-layout .graph-shell .map-panel,
html.map-touch-layout .graph-shell .right-panel,
html.map-touch-layout .graph-shell .selected-card {
  box-sizing: border-box !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

html.map-touch-layout .graph-shell > .site-nav,
html.map-touch-layout .graph-shell .graph-intro,
html.map-touch-layout .graph-shell .graph-command-bar,
html.map-touch-layout .graph-shell .map-insight-deck,
html.map-touch-layout .graph-shell .graph-controls,
html.map-touch-layout .graph-shell .graph-next-panel,
html.map-touch-layout .graph-shell .graph-data-footer {
  display: none !important;
}

html.map-touch-layout .graph-shell > .topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 8px 0 4px !important;
  border: 0 !important;
}

html.map-touch-layout .graph-shell > .topbar .eyebrow {
  display: none !important;
}

html.map-touch-layout .graph-shell > .topbar h1 {
  margin: 0 !important;
  font-size: clamp(1.35rem, 4vw, 1.7rem) !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
}

html.map-touch-layout .graph-shell .topbar-tools {
  margin-left: auto !important;
}

html.map-touch-layout .graph-shell .language-switcher {
  min-height: 34px !important;
  padding: 3px 4px 3px 8px !important;
  border-radius: 10px !important;
}

html.map-touch-layout .graph-shell .language-switcher span {
  display: none !important;
}

html.map-touch-layout .graph-shell .graph-language-select {
  min-height: 28px !important;
  padding: 0 22px 0 8px !important;
  font-size: 0.72rem !important;
}

html.map-touch-layout .graph-shell .mobile-map-panel {
  display: grid !important;
  gap: 6px !important;
  width: 100% !important;
  padding: 7px !important;
  border: 1px solid var(--color-border-strong) !important;
  border-radius: 12px !important;
  background: var(--color-surface) !important;
  box-shadow: 0 12px 30px rgb(15 23 42 / 0.08) !important;
}

html.map-touch-layout .graph-shell .mobile-map-distance {
  display: none !important;
}

html.map-touch-layout .graph-shell .mobile-map-controls {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 6px !important;
  align-items: end !important;
}

html.map-touch-layout .graph-shell .mobile-map-search {
  grid-column: 1 / -1 !important;
}

html.map-touch-layout .graph-shell .mobile-map-search span,
html.map-touch-layout .graph-shell .mobile-map-axis span {
  display: none !important;
}

html.map-touch-layout .graph-shell .mobile-map-panel input,
html.map-touch-layout .graph-shell .mobile-map-panel select {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 36px !important;
  border-radius: 10px !important;
  font-size: 0.76rem !important;
}

html.map-touch-layout .graph-shell .mobile-map-axis {
  min-width: 0 !important;
}

html.map-touch-layout .graph-shell .mobile-filter-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 86px !important;
  min-height: 36px !important;
  padding-inline: 10px !important;
  border-radius: 10px !important;
  font-size: 0.72rem !important;
  white-space: nowrap !important;
}

html.map-touch-layout .graph-shell .mobile-map-ruler {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

html.map-touch-layout .graph-shell .mobile-map-ruler .ruler-button {
  min-height: 32px !important;
}

html.map-touch-layout .graph-shell .mobile-map-tabs {
  display: none !important;
}

html.map-touch-layout .graph-shell .graph-workbench {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.map-touch-layout .graph-shell .map-panel {
  width: 100% !important;
  height: clamp(360px, 48dvh, 500px) !important;
  min-height: 360px !important;
  border: 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: #071216 !important;
}

html.map-touch-layout .graph-shell .canvas-stage,
html.map-touch-layout .graph-shell #graphCanvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  overflow: hidden !important;
  touch-action: none !important;
}

html.map-touch-layout .graph-shell .map-head,
html.map-touch-layout .graph-shell .map-guide,
html.map-touch-layout .graph-shell .map-legend,
html.map-touch-layout .graph-shell .nav-pad,
html.map-touch-layout .graph-shell .graph-tooltip {
  display: none !important;
}

html.map-touch-layout .graph-shell .left-panel.filter-drawer:not([open]) {
  display: none !important;
}

html.map-touch-layout .graph-shell .left-panel.filter-drawer[open] {
  position: fixed !important;
  z-index: 80 !important;
  inset: auto 10px 10px !important;
  width: auto !important;
  max-width: none !important;
  max-height: min(78dvh, 620px) !important;
  overflow: auto !important;
  border: 1px solid var(--color-border-strong) !important;
  border-radius: 18px !important;
  padding: 12px !important;
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
  box-shadow: 0 26px 80px rgb(15 23 42 / 0.24) !important;
}

html.map-touch-layout .graph-shell .right-panel {
  display: block !important;
  position: static !important;
  width: 100% !important;
  margin: 8px 0 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.map-touch-layout .graph-shell .right-panel .preset-section {
  display: none !important;
}

html.map-touch-layout .graph-shell .selected-card {
  display: grid !important;
  align-content: start !important;
  position: relative !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: min(33dvh, 280px) !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  border: 1px solid var(--color-border-strong) !important;
  border-radius: 15px !important;
  padding: 10px 12px 11px !important;
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
  box-shadow: 0 14px 34px rgb(15 23 42 / 0.08) !important;
}

html.map-touch-layout .graph-shell .selected-card::before,
html.map-touch-layout .graph-shell .selected-card-kicker {
  display: none !important;
}

html.map-touch-layout .graph-shell .selected-head {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 9px !important;
  margin: 0 !important;
}

html.map-touch-layout .graph-shell .selected-head .cover-wrap {
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
}

html.map-touch-layout .graph-shell .selected-title {
  margin: 0 !important;
  overflow: hidden !important;
  color: var(--color-text) !important;
  font-size: 0.96rem !important;
  font-weight: 950 !important;
  line-height: 1.18 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html.map-touch-layout .graph-shell .selected-meta-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  margin-top: 3px !important;
}

html.map-touch-layout .graph-shell .selected-artist {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 48px) !important;
  margin-top: 0 !important;
  overflow: hidden !important;
  color: var(--color-text-muted) !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html.map-touch-layout .graph-shell .selected-type-icon {
  display: grid !important;
  grid-template-columns: 24px 8px !important;
  align-items: end !important;
  flex: 0 0 auto !important;
  gap: 4px !important;
  width: 38px !important;
  height: 22px !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 999px !important;
  padding: 3px 4px !important;
  background: rgb(255 255 255 / 0.94) !important;
  box-shadow: 0 6px 14px rgb(15 23 42 / 0.08) !important;
}

html.map-touch-layout .graph-shell .selected-type-icon .selected-type-bars,
html.map-touch-layout .graph-shell .selected-type-icon .selected-type-bands {
  display: grid !important;
  align-items: end !important;
  gap: 1px !important;
  height: 14px !important;
  margin: 0 !important;
}

html.map-touch-layout .graph-shell .selected-type-icon .selected-type-bars {
  grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
}

html.map-touch-layout .graph-shell .selected-type-icon .selected-type-bands {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

html.map-touch-layout .graph-shell .selected-type-icon .selected-type-bars span,
html.map-touch-layout .graph-shell .selected-type-icon .selected-type-bands span {
  min-height: 2px !important;
  border-radius: 2px 2px 1px 1px !important;
  background: linear-gradient(180deg, var(--selected-type-color, var(--color-accent)), rgb(94 234 212 / 0.34)) !important;
  box-shadow: none !important;
  animation: none !important;
}

html.map-touch-layout .graph-shell .selected-stage-line {
  display: block !important;
  margin-top: 6px !important;
  overflow: hidden !important;
  color: var(--color-text-muted) !important;
  font-size: 0.74rem !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html.map-touch-layout .graph-shell .selected-stage-ranks {
  display: none !important;
}

html.map-touch-layout .graph-shell .selected-actions {
  display: block !important;
  margin-top: 8px !important;
}

html.map-touch-layout .graph-shell .selected-actions .detail-link {
  width: fit-content !important;
  min-width: 104px !important;
  min-height: 36px !important;
  border-radius: 10px !important;
  padding-inline: 13px !important;
  font-size: 0.82rem !important;
}

html.map-touch-layout .graph-shell .mobile-map-tools {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
  margin-top: 8px !important;
}

html.map-touch-layout .graph-shell .mobile-map-tool-button,
html.map-touch-layout .graph-shell .mobile-map-tool-link,
html.map-touch-layout .graph-shell .mobile-map-tool-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  border: 1px solid var(--color-border-strong) !important;
  border-radius: 999px !important;
  padding: 0 12px !important;
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
  font: inherit !important;
  font-size: 0.74rem !important;
  font-weight: 850 !important;
  text-decoration: none !important;
}

html.map-touch-layout .graph-shell .map-reading-callout {
  display: block !important;
  margin: 2px 2px 0 !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--color-text-muted) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0.76rem !important;
  line-height: 1.6 !important;
}

html.map-touch-layout .graph-shell .map-reading-callout strong {
  display: inline !important;
  margin-right: 6px !important;
  color: var(--color-text) !important;
}

@media (max-width: 560px) {
  html.map-touch-layout .graph-shell {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    padding-inline: 0 !important;
  }

  html.map-touch-layout .graph-shell .map-panel {
    height: clamp(340px, 46dvh, 430px) !important;
    min-height: 340px !important;
  }

  html.map-touch-layout .graph-shell .selected-card {
    max-height: min(34dvh, 240px) !important;
  }
}

@media (max-width: 767px) {
  body :is(.app-shell, .song-shell) > .site-nav {
    display: none !important;
  }

  body :is(.app-shell, .song-shell) > .topbar .topbar-tools {
    display: none !important;
  }

  body :is(.app-shell, .song-shell) > .topbar {
    padding-right: 56px !important;
  }

  body > .mobile-menu-button {
    position: fixed !important;
    top: max(12px, env(safe-area-inset-top)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    z-index: 520 !important;
    width: 44px !important;
    height: 44px !important;
    display: inline-grid !important;
    place-items: center !important;
  }

  body > .mobile-shell-menu:not([hidden]) {
    display: block !important;
  }
}

@media (min-width: 768px) {
  body > .mobile-menu-button,
  body > .mobile-shell-menu {
    display: none !important;
  }
}

/* PC header convergence: match the Overview page header rhythm across pages. */
@media (min-width: 901px) {
  body :is(.app-shell, .song-shell) {
    padding:
      calc(18px + var(--shell-sticky-nav-height) + 12px)
      var(--page-shell-gutter)
      48px !important;
  }

  body .rankings-shell.app-shell {
    padding-top: calc(18px + var(--shell-sticky-nav-height) + 12px) !important;
  }

  body :is(.app-shell, .song-shell) > .site-nav {
    position: fixed !important;
    top: 0 !important;
    left: var(--shell-fixed-nav-left) !important;
    z-index: 260 !important;
    width: var(--shell-fixed-nav-width) !important;
    margin: 0 0 18px !important;
    border-radius: 0 0 10px 10px !important;
  }

  body :is(.app-shell, .song-shell) > .topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    min-height: 70px !important;
    margin: 0 0 18px !important;
    padding: 0 0 14px !important;
    border-bottom: 1px solid var(--page-header-rule) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body :is(.app-shell, .song-shell) > .topbar h1 {
    font-size: clamp(1.85rem, 2.8vw, 2.6rem) !important;
    line-height: 1.04 !important;
    letter-spacing: 0 !important;
  }
}