/*
 * IMFS Insights Hub — Shared Stylesheet
 * File: /insights/assets/imfs-insights.css
 * Version: 1.1 · 17 June 2026
 * Release: IMFS-RR-2026-v1
 *
 * v1.1 CHANGELOG: Merged all page-specific inline styles (hub, methodology,
 * caveat blocks, footnote, sample-banner) into this shared file. Fixes
 * missing-class bug where hub/TOEFL/vs pages lost styling when switched
 * from inline <style> to external <link>.
 *
 * RULES:
 * 1. No inline styles on any insights page — everything uses a class here
 * 2. No position: absolute or fixed
 * 3. No z-index
 * 4. No !important
 * 5. All spacing via tokens — never hardcode px values in pages
 * 6. Dark mode handled here via CSS variables — pages need no dark mode logic
 */

/* ── DESIGN TOKENS ─────────────────────────────────────────────── */
:root {
  /* Brand colours */
  --ii-navy:        #0d2b5e;
  --ii-blue:        #1a56a0;
  --ii-gold:        #b8860b;
  --ii-green:       #166534;
  --ii-red:         #991b1b;
  --ii-amber:       #92400e;

  /* Text scale */
  --ii-text:        #111827;
  --ii-text-2:      #374151;
  --ii-text-3:      #6b7280;
  --ii-text-4:      #9ca3af;

  /* Surface scale */
  --ii-bg:          #ffffff;
  --ii-bg-2:        #f9fafb;
  --ii-bg-3:        #f3f4f6;
  --ii-bg-4:        #e5e7eb;

  /* Borders */
  --ii-border:      #e5e7eb;
  --ii-border-2:    #d1d5db;

  /* Spacing scale */
  --ii-s1:          8px;
  --ii-s2:          16px;
  --ii-s3:          24px;
  --ii-s4:          32px;
  --ii-s5:          48px;
  --ii-s6:          80px;

  /* Layout */
  --ii-max-width:   860px;
  --ii-radius:      6px;
  --ii-radius-lg:   10px;

  /* Shadow — functional only, not decorative */
  --ii-shadow-sm:   0 1px 2px rgba(0,0,0,.05);

  /* Typography */
  --ii-font:        'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
  :root {
    --ii-navy:        #93b4e6;
    --ii-blue:        #60a5fa;
    --ii-gold:        #fbbf24;
    --ii-green:       #6ee7b7;
    --ii-red:         #fca5a5;
    --ii-amber:       #fcd34d;
    --ii-text:        #f9fafb;
    --ii-text-2:      #e5e7eb;
    --ii-text-3:      #9ca3af;
    --ii-text-4:      #6b7280;
    --ii-bg:          #111827;
    --ii-bg-2:        #1f2937;
    --ii-bg-3:        #374151;
    --ii-bg-4:        #4b5563;
    --ii-border:      #374151;
    --ii-border-2:    #4b5563;
    --ii-shadow-sm:   0 1px 2px rgba(0,0,0,0);
  }
}

/* ── RESET & BASE ────────────────────────────────────────────────*/
:root {
  --ii-navy:#0d2b5e;
  --ii-blue:#1a56a0;
  --ii-gold:#b8860b;
  --ii-green:#166534;
  --ii-red:#991b1b;
  --ii-text:#111827;
  --ii-text-2:#374151;
  --ii-text-3:#6b7280;
  --ii-text-4:#9ca3af;
  --ii-bg:#fff;
  --ii-bg-2:#f9fafb;
  --ii-bg-3:#f3f4f6;
  --ii-border:#e5e7eb;
  --ii-border-2:#d1d5db;
  --ii-s1:8px;
  --ii-s2:16px;
  --ii-s3:24px;
  --ii-s4:32px;
  --ii-s5:48px;
  --ii-s6:80px;
  --ii-max-width:860px;
  --ii-radius:6px;
  --ii-radius-lg:10px;
  --ii-shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --ii-font:'Segoe UI',system-ui,-apple-system,Arial,sans-serif;
}
body {
  font-family:var(--ii-font);
  font-size:16px;
  line-height:1.7;
  color:var(--ii-text);
  background:var(--ii-bg);
  margin:0;
  padding:0;
}
p {
  margin:0 0 var(--ii-s2);
  color:var(--ii-text-2);
}
a {
  color:var(--ii-blue);
}
strong {
  color:var(--ii-text);
  font-weight:700;
}

/* ── PAGE WRAPPER & BREADCRUMB ───────────────────────────────────*/
.ii-page {
  max-width:var(--ii-max-width);
  margin:0 auto;
  padding:var(--ii-s4) var(--ii-s3) var(--ii-s6);
}
.ii-breadcrumb {
  display:flex;
  flex-wrap:wrap;
  gap:var(--ii-s1);
  align-items:center;
  font-size:13px;
  color:var(--ii-text-3);
  margin-bottom:var(--ii-s3);
}
.ii-breadcrumb a {
  color:var(--ii-text-3);
  text-decoration:none;
}
.ii-breadcrumb a:hover {
  color:var(--ii-blue);
  text-decoration:underline;
}
.ii-breadcrumb__sep {
  color:var(--ii-text-4);
}

/* ── DISCLAIMER & SAMPLE DATASET BANNER ──────────────────────────*/
.ii-sample-banner {
  background: #fff3cd;
  border: 2px solid #ffc107;
  border-radius: var(--ii-radius-lg);
  padding: var(--ii-s3);
  margin-bottom: var(--ii-s4);
}
.ii-sample-banner__heading {
  font-size: 14px;
  font-weight: 800;
  color: #664d03;
  margin: 0 0 var(--ii-s1);
}
.ii-sample-banner__body {
  font-size: 14px;
  color: #664d03;
  margin: 0 0 var(--ii-s2);
}
.ii-sample-banner__body strong {
  color: #3d2b00;
}
.ii-sample-banner__list {
  margin: 0 0 var(--ii-s2);
  padding-left: var(--ii-s3);
}
.ii-sample-banner__list li {
  font-size: 13px;
  color: #664d03;
  margin-bottom: 6px;
  line-height: 1.5;
}
.ii-sample-banner__list li strong {
  color: #3d2b00;
}
.ii-sample-banner__footer {
  font-size: 12px;
  color: #856404;
  margin: 0;
}
.ii-sample-banner__footer a {
  color: #664d03;
  font-weight: 600;
}

/* ── PAGE HEADER & HUB HEADER ────────────────────────────────────*/
.ii-header {
  border-bottom:2px solid var(--ii-navy);
  padding-bottom:var(--ii-s3);
  margin-bottom:var(--ii-s4);
}
.ii-header__label {
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:var(--ii-blue);
  margin:0 0 10px;
}
.ii-header__title {
  font-size:clamp(20px,4vw,30px);
  font-weight:800;
  color:var(--ii-navy);
  line-height:1.2;
  margin:0 0 var(--ii-s2);
}
.ii-header__byline {
  font-size:13px;
  color:var(--ii-text-3);
  margin:0;
  line-height:1.6;
}
.ii-header__byline strong {
  color:var(--ii-text-2);
  font-weight:600;
}
.ii-hub-header {
  margin-bottom:var(--ii-s4);
}
.ii-hub-header__label {
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:var(--ii-blue);
  margin:0 0 var(--ii-s1);
}
.ii-hub-header__title {
  font-size:clamp(24px,5vw,36px);
  font-weight:800;
  color:var(--ii-navy);
  line-height:1.15;
  margin:0 0 var(--ii-s2);
}
.ii-hub-header__sub {
  font-size:clamp(14px,2vw,17px);
  color:var(--ii-text-2);
  max-width:640px;
  margin:0;
}
.ii-hub-section-title {
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:var(--ii-text-3);
  margin:0 0 var(--ii-s2);
  padding-bottom:var(--ii-s1);
  border-bottom:1px solid var(--ii-border);
}

/* ── AI SUMMARY BLOCK ────────────────────────────────────────────*/
.ii-ai-summary {
  background:var(--ii-bg-2);
  border:1px solid var(--ii-border);
  border-radius:var(--ii-radius);
  padding:10px var(--ii-s2);
  margin-bottom:var(--ii-s2);
  font-size:12px;
  color:var(--ii-text-3);
  display:flex;
  flex-direction:column;
  gap:4px;
  line-height:1.5;
}
.ii-ai-summary__row strong {
  color:var(--ii-text-2);
  font-weight:600;
}

/* ── STAT GRID ───────────────────────────────────────────────────*/
.ii-stat-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1px;
  background:var(--ii-border);
  border:1px solid var(--ii-border);
  border-radius:var(--ii-radius-lg);
  overflow:hidden;
  margin:var(--ii-s3) 0;
  box-shadow:var(--ii-shadow-sm);
}
.ii-stat {
  background:var(--ii-bg);
  padding:var(--ii-s2) 14px;
  text-align:center;
}
.ii-stat__val {
  display:block;
  font-size:clamp(22px,3.5vw,30px);
  font-weight:800;
  color:var(--ii-navy);
  line-height:1;
  margin-bottom:5px;
}
.ii-stat__val--gold {
  color:var(--ii-gold);
}
.ii-stat__val--green {
  color:var(--ii-green);
}
.ii-stat__label {
  display:block;
  font-size:11px;
  color:var(--ii-text-3);
  line-height:1.3;
}

/* ── SECTION ─────────────────────────────────────────────────────*/
.ii-section {
  margin-bottom:var(--ii-s5);
}
.ii-section__title {
  font-size:clamp(15px,2.5vw,18px);
  font-weight:700;
  color:var(--ii-navy);
  border-bottom:1px solid var(--ii-border);
  padding-bottom:var(--ii-s1);
  margin-bottom:var(--ii-s2);
}
.ii-section__subtitle {
  font-size:14px;
  font-weight:600;
  color:var(--ii-blue);
  margin:var(--ii-s3) 0 var(--ii-s1);
}

/* ── FINDING BLOCK (signature element) ───────────────────────────*/
.ii-finding {
  border-left:3px solid var(--ii-navy);
  border-radius:0 var(--ii-radius) var(--ii-radius) 0;
  background:var(--ii-bg-2);
  padding:var(--ii-s2) var(--ii-s3);
  margin:var(--ii-s3) 0;
}
.ii-finding__label {
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:var(--ii-blue);
  margin:0 0 var(--ii-s1);
}
.ii-finding__stat {
  display:block;
  font-size:clamp(28px,5vw,40px);
  font-weight:900;
  color:var(--ii-navy);
  line-height:1;
}
.ii-finding__context {
  display:block;
  font-size:13px;
  color:var(--ii-text-3);
  margin-top:4px;
}
.ii-finding p {
  margin:var(--ii-s1) 0 0;
  font-size:14px;
}

/* ── NOTE & CAVEAT BOXES ─────────────────────────────────────────*/
.ii-caveat {
  background:var(--ii-bg-3);
  border:1px solid var(--ii-border);
  border-radius:var(--ii-radius);
  padding:var(--ii-s2) var(--ii-s3);
  margin:var(--ii-s3) 0;
}
.ii-caveat__title {
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--ii-text-3);
  margin:0 0 var(--ii-s1);
}
.ii-caveat ul {
  margin:0;
  padding-left:var(--ii-s3);
}
.ii-caveat li {
  font-size:13px;
  color:var(--ii-text-3);
  margin-bottom:4px;
  line-height:1.5;
}
.ii-note {
  background:var(--ii-bg-3);
  border:1px solid var(--ii-border);
  border-radius:var(--ii-radius);
  padding:var(--ii-s1) var(--ii-s2);
  font-size:13px;
  color:var(--ii-text-3);
  margin:var(--ii-s2) 0;
  line-height:1.6;
}
.ii-note strong {
  color:var(--ii-text-2);
}

/* ── TABLE ───────────────────────────────────────────────────────*/
.ii-table-wrap {
  overflow-x:auto;
  margin:var(--ii-s2) 0;
  border-radius:var(--ii-radius);
  border:1px solid var(--ii-border);
}
.ii-table {
  width:100%;
  border-collapse:collapse;
  font-size:13.5px;
}
.ii-table th {
  background:var(--ii-navy);
  color:#fff;
  padding:10px 14px;
  text-align:left;
  font-weight:600;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.5px;
  white-space:nowrap;
}
.ii-table td {
  padding:9px 14px;
  border-bottom:1px solid var(--ii-border);
  color:var(--ii-text);
  vertical-align:top;
}
.ii-table tr:last-child td {
  border-bottom:none;
}
.ii-table tr:nth-child(even) td {
  background:var(--ii-bg-2);
}
.ii-table__total td {
  font-weight:700;
  background:var(--ii-bg-3);
  border-top:2px solid var(--ii-border-2);
}

/* ── SCORE BANDS ─────────────────────────────────────────────────*/
.ii-bands {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(80px,1fr));
  gap:var(--ii-s1);
  margin:var(--ii-s2) 0;
}
.ii-band {
  padding:12px var(--ii-s1);
  text-align:center;
  border-radius:var(--ii-radius);
  border:1px solid var(--ii-border);
}
.ii-band__score {
  display:block;
  font-weight:800;
  font-size:15px;
  margin-bottom:4px;
  color:var(--ii-navy);
}
.ii-band__pct {
  display:block;
  font-size:11px;
  color:var(--ii-text-3);
}
.ii-band--low {
  background:#fef2f2;
  border-color:#fecaca;
}
.ii-band--amber {
  background:#fffbeb;
  border-color:#fde68a;
}
.ii-band--mid {
  background:#f0f9ff;
  border-color:#bae6fd;
}
.ii-band--good {
  background:#f0fdf4;
  border-color:#bbf7d0;
}
.ii-band--top {
  background:#dcfce7;
  border-color:#86efac;
}

/* ── CHART WRAPPER & LEGEND ──────────────────────────────────────*/
.ii-chart-wrap {
  position:relative;
  width:100%;
  margin:var(--ii-s2) 0;
}
.ii-legend {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:10px;
  font-size:12px;
  color:var(--ii-text-3);
}
.ii-legend__item {
  display:flex;
  align-items:center;
  gap:5px;
}
.ii-legend__dot {
  width:10px;
  height:10px;
  border-radius:2px;
  flex-shrink:0;
}

/* ── CROSS-REFERENCE & RELATED PAGES ─────────────────────────────*/
.ii-ref {
  background:var(--ii-bg-2);
  border:1px solid var(--ii-border);
  border-radius:var(--ii-radius);
  padding:var(--ii-s2);
  margin:var(--ii-s3) 0;
  font-size:14px;
}
.ii-ref__label {
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--ii-text-3);
  margin-bottom:4px;
}
.ii-ref a {
  color:var(--ii-blue);
  font-weight:600;
  text-decoration:none;
}
.ii-ref a:hover {
  text-decoration:underline;
}
.ii-related {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:10px;
  margin:var(--ii-s3) 0;
}
.ii-related__card {
  display:block;
  text-decoration:none;
  background:var(--ii-bg);
  border:1px solid var(--ii-border);
  border-radius:var(--ii-radius);
  padding:14px var(--ii-s2);
  transition:border-color .15s;
}
.ii-related__card:hover {
  border-color:var(--ii-blue);
}
.ii-related__type {
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--ii-gold);
  margin:0 0 5px;
}
.ii-related__title {
  font-size:13px;
  font-weight:600;
  color:var(--ii-navy);
  line-height:1.4;
  margin:0;
}

/* ── HUB CARDS ───────────────────────────────────────────────────*/
.ii-cards {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:var(--ii-s2);
  margin-bottom:var(--ii-s5);
}
.ii-card {
  display:block;
  text-decoration:none;
  background:var(--ii-bg);
  border:1px solid var(--ii-border);
  border-radius:var(--ii-radius-lg);
  padding:var(--ii-s3);
  transition:border-color .15s,box-shadow .15s;
}
.ii-card:hover {
  border-color:var(--ii-blue);
  box-shadow:var(--ii-shadow-sm);
}
.ii-card__meta {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:var(--ii-s1);
}
.ii-card__id {
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--ii-text-4);
}
.ii-card__topic {
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--ii-gold);
}
.ii-card__title {
  font-size:14px;
  font-weight:700;
  color:var(--ii-navy);
  line-height:1.4;
  margin:0 0 var(--ii-s1);
}
.ii-card__desc {
  font-size:13px;
  color:var(--ii-text-3);
  line-height:1.5;
  margin:0;
}
.ii-card--planned {
  opacity:.5;
  cursor:default;
}
.ii-card--planned:hover {
  border-color:var(--ii-border);
  box-shadow:none;
}

/* ── HUB BROWSE-BY-TOPIC ─────────────────────────────────────────*/
.ii-browse {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--ii-s3);
  margin-bottom:var(--ii-s5);
}
.ii-browse__block {
  background:var(--ii-bg-2);
  border:1px solid var(--ii-border);
  border-radius:var(--ii-radius);
  padding:var(--ii-s2) var(--ii-s3);
}
.ii-browse__title {
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--ii-text-3);
  margin:0 0 var(--ii-s1);
}
.ii-browse__links {
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.ii-browse__links li a {
  font-size:13px;
  color:var(--ii-blue);
  text-decoration:none;
  font-weight:500;
}
.ii-browse__links li a:hover {
  text-decoration:underline;
}

/* ── HUB DATASET BAR ─────────────────────────────────────────────*/
.ii-dataset-bar {
  display:flex;
  flex-wrap:wrap;
  gap:var(--ii-s3);
  padding:var(--ii-s3) 0;
  border-top:1px solid var(--ii-border);
  border-bottom:1px solid var(--ii-border);
  margin:var(--ii-s3) 0 var(--ii-s2);
}
.ii-dataset-bar__item {
  display:flex;
  flex-direction:column;
}
.ii-dataset-bar__val {
  font-size:22px;
  font-weight:800;
  color:var(--ii-navy);
  line-height:1;
}
.ii-dataset-bar__label {
  font-size:12px;
  color:var(--ii-text-3);
  margin-top:3px;
}
.ii-dataset-bar__cta {
  font-size:13px;
  color:var(--ii-text-3);
  margin:0 0 var(--ii-s5);
}
.ii-dataset-bar__cta a {
  color:var(--ii-blue);
}

/* ── HUB QUESTIONS LIST ──────────────────────────────────────────*/
.ii-questions {
  background:var(--ii-bg-2);
  border:1px solid var(--ii-border);
  border-radius:var(--ii-radius);
  padding:var(--ii-s2) var(--ii-s3);
  margin-bottom:var(--ii-s5);
}
.ii-questions__title {
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--ii-text-3);
  margin:0 0 var(--ii-s2);
}
.ii-questions__list {
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:var(--ii-s1);
}
.ii-questions__list li {
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.ii-questions__list li a {
  font-size:14px;
  color:var(--ii-blue);
  text-decoration:none;
  line-height:1.5;
}
.ii-questions__list li a:hover {
  text-decoration:underline;
}
.ii-questions__list li::before {
  content:"→";
  color:var(--ii-text-3);
  font-size:12px;
  margin-top:3px;
  flex-shrink:0;
}

/* ── HUB VERSION BLOCK ───────────────────────────────────────────*/
.ii-version-block {
  background:var(--ii-bg-2);
  border:1px solid var(--ii-border);
  border-radius:var(--ii-radius);
  padding:var(--ii-s3);
  margin-bottom:var(--ii-s5);
}
.ii-version-block__title {
  font-size:13px;
  font-weight:700;
  color:var(--ii-navy);
  margin:0 0 var(--ii-s2);
}
.ii-version-block__grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--ii-s2);
}
.ii-version-block__key {
  font-size:11px;
  color:var(--ii-text-3);
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-bottom:3px;
}
.ii-version-block__val {
  font-size:13px;
  font-weight:600;
  color:var(--ii-text-2);
}

/* ── HUB ABOUT BLOCK ─────────────────────────────────────────────*/
.ii-about-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--ii-s3);
  margin-bottom:var(--ii-s5);
}
.ii-about-block {
  background: var(--ii-bg-2);
  border: 1px solid var(--ii-border);
  border-radius: var(--ii-radius);
  padding: var(--ii-s2);
}
.ii-about-block__title {
  font-size:13px;
  font-weight:700;
  color:var(--ii-navy);
  margin:0 0 var(--ii-s1);
}
.ii-about-block__text {
  font-size:14px;
  color:var(--ii-text-2);
  line-height:1.65;
  margin:0;
}

/* ── HUB CITATION BLOCK ──────────────────────────────────────────*/
.ii-citation {
  background:var(--ii-bg-3);
  border:1px solid var(--ii-border);
  border-radius:var(--ii-radius);
  padding:var(--ii-s2) var(--ii-s3);
  margin-bottom:var(--ii-s4);
}
.ii-citation__title {
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--ii-text-3);
  margin:0 0 var(--ii-s1);
}
.ii-citation__text {
  font-size:13px;
  color:var(--ii-text-2);
  font-style:italic;
  line-height:1.6;
  margin:0;
}

/* ── FOOTNOTE & FOOTER ───────────────────────────────────────────*/
.ii-footer {
  border-top:1px solid var(--ii-border);
  padding-top:var(--ii-s3);
  margin-top:var(--ii-s6);
  font-size:12px;
  color:var(--ii-text-3);
  line-height:1.8;
  display:flex;
  flex-direction:column;
  gap:var(--ii-s2);
}
.ii-footer a {
  color:var(--ii-text-3);
  text-decoration:none;
}
.ii-footer a:hover {
  text-decoration:underline;
}
.ii-footer__meta {
  display:flex;
  flex-wrap:wrap;
  gap:var(--ii-s2);
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--ii-text-4);
}
.ii-footer__links {
  display:flex;
  flex-wrap:wrap;
  gap:var(--ii-s2);
}
.ii-footnote {
  font-size:11px;
  color:var(--ii-text-4);
  margin-top:var(--ii-s3);
  line-height:1.5;
}
.ii-footnote a {
  color:var(--ii-text-4);
  text-decoration:none;
}
.ii-footnote a:hover {
  text-decoration:underline;
}

/* ── MISC ────────────────────────────────────────────────────────*/
*,*::before,*::after {
  box-sizing:border-box;
}
h1,h2,h3 {
  margin:0;
}
ul {
  margin:0;
  padding:0;
}

/* ── RESPONSIVE ─────────────────────────────────────────────────── */
@media(prefers-color-scheme:dark){:root{
  --ii-navy:#93b4e6;--ii-blue:#60a5fa;--ii-gold:#fbbf24;--ii-green:#6ee7b7;
  --ii-text:#f9fafb;--ii-text-2:#e5e7eb;--ii-text-3:#9ca3af;--ii-text-4:#6b7280;
  --ii-bg:#111827;--ii-bg-2:#1f2937;--ii-bg-3:#374151;
  --ii-border:#374151;--ii-border-2:#4b5563;--ii-shadow-sm:0 1px 2px rgba(0,0,0,0);
}}

@media(max-width:600px){
  .ii-page{padding:var(--ii-s3) var(--ii-s2) var(--ii-s5);}
  .ii-stat-grid{grid-template-columns:1fr 1fr;}
  .ii-bands{grid-template-columns:repeat(3,1fr);}
  .ii-related{grid-template-columns:1fr;}
}

@media(max-width:400px){
  .ii-stat-grid{grid-template-columns:1fr;}
  .ii-bands{grid-template-columns:1fr 1fr;}
}

@media(prefers-color-scheme:dark) {
  .ii-sample-banner { background: #2d2100; border-color: #856404; }
  .ii-sample-banner__heading,
  .ii-sample-banner__body,
  .ii-sample-banner__list li,
  .ii-sample-banner__footer { color: #fcd34d; }
  .ii-sample-banner__body strong,
  .ii-sample-banner__list li strong { color: #fef3c7; }
}

@media(max-width:600px){
  .ii-page{padding:var(--ii-s3) var(--ii-s2) var(--ii-s5);}
  .ii-browse{grid-template-columns:1fr;}
  .ii-about-grid{grid-template-columns:1fr;}
  .ii-cards{grid-template-columns:1fr;}
  .ii-dataset-bar{gap:var(--ii-s2);}
}