/* ===========================================================
   dl-theme.css — Swiss Red (light) / Midnight (dark) theme layer
   ADDITIVE override layer. Enqueued at priority 1000 (after dl-tokens,
   dl-design-system, dl-combined, dl-design-v2, dl-content-cap).
   Rollback = remove the enqueue block in functions.php + delete this file
   and dl-theme-toggle.js.  Decided 2026-05-29 (memory: project_swiss_midnight_theme_pivot).

   Strategy: the article template consumes fallback-only legacy tokens
   (--ink, --green, --bg-soft, --line ...). We DEFINE those tokens here in
   terms of private --sm-* tokens that switch by mode, so the whole article
   re-themes from one place. We do NOT touch the existing --dl-* tokens
   (dl-tokens.css) to avoid clobbering chrome/components.

   Scope guards:
   - Homepage (body.home / front-page) is excluded from page-surface + dark
     background overrides; only the shared chrome recolour reaches it.
   - Featured PNGs + inline SVG figures are NOT recoloured here (image phase).
   =========================================================== */

@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap');

/* ---------- A. private theme tokens ---------- */
:root{
  --sm-bg:#ffffff; --sm-surface:#ffffff; --sm-surface-2:#f7f7f7;
  --sm-ink:#1a1a1a; --sm-ink-strong:#000000; --sm-ink-2:#555555; --sm-ink-3:#8a8a8a;
  --sm-accent:#e8352b; --sm-accent-ink:#cf2418; --sm-accent-soft:#fdecea; --sm-accent-soft-line:#f6d3cf;
  --sm-hairline:#e2e2e2;
  --sm-cta-bg:#e8352b; --sm-cta-ink:#ffffff;
  --sm-hdr-line:rgba(255,255,255,.13);
}
html[data-mode="dark"]{
  --sm-bg:#0a0a0b; --sm-surface:#141416; --sm-surface-2:#1b1b1e;
  --sm-ink:#ededf0; --sm-ink-strong:#fafafa; --sm-ink-2:#9a9aa2; --sm-ink-3:#6a6a72;
  --sm-accent:#f5b417; --sm-accent-ink:#f5b417; --sm-accent-soft:#211c0e; --sm-accent-soft-line:#3a3216;
  --sm-hairline:#242427;
  --sm-cta-bg:#f5b417; --sm-cta-ink:#0a0a0b;
  --sm-hdr-line:#242427;
}
@media (prefers-color-scheme: dark){
  html:not([data-mode="light"]){
    --sm-bg:#0a0a0b; --sm-surface:#141416; --sm-surface-2:#1b1b1e;
    --sm-ink:#ededf0; --sm-ink-strong:#fafafa; --sm-ink-2:#9a9aa2; --sm-ink-3:#6a6a72;
    --sm-accent:#f5b417; --sm-accent-ink:#f5b417; --sm-accent-soft:#211c0e; --sm-accent-soft-line:#3a3216;
    --sm-hairline:#242427;
    --sm-cta-bg:#f5b417; --sm-cta-ink:#0a0a0b;
    --sm-hdr-line:#242427;
  }
}

/* ---------- B. remap the legacy article tokens onto --sm-* (auto-switch by mode) ---------- */
:root{
  --ink:var(--sm-ink);
  --ink-soft:var(--sm-ink-2);
  --ink-faint:var(--sm-ink-3);
  --green:var(--sm-accent);
  --green-deep:var(--sm-accent-ink);
  --green-soft:var(--sm-accent-soft);
  --green-light:var(--sm-accent-soft-line);
  --bg-soft:var(--sm-surface-2);
  --cream:var(--sm-surface);
  --line:var(--sm-hairline);
  --line-soft:var(--sm-hairline);
  /* dl-tokens / dl-combined ink family (used by `body.dl-modern strong,b` -> var(--dl-ink)
     and body text). All are dark literals, so dark mode hid every bold lead-in.
     Remap onto mode-aware --sm-* so bolds follow the mode. */
  --dl-ink:var(--sm-ink);
  --dl-ink-soft:var(--sm-ink);
  --dl-ink-deep:var(--sm-ink-strong);
  --dl-ink-mute:var(--sm-ink-2);
  --dl-ink-faint:var(--sm-ink-3);
  --dl-ink-2:var(--sm-ink-2);
  --dl-ink-3:var(--sm-ink-3);
  /* neutralise the legacy Modern-blog-test (--mb-*) palette on post 38492 */
  --mb-brand:var(--sm-accent);
  --mb-brand-deep:var(--sm-accent-ink);
  --mb-brand-darker:var(--sm-accent-ink);
  --mb-brand-light:var(--sm-accent-soft-line);
  --mb-brand-soft:var(--sm-accent-soft);
  --mb-accent-green:var(--sm-accent);
  --mb-ink:var(--sm-ink-strong);
  --mb-ink-2:var(--sm-ink-2);
  --mb-ink-3:var(--sm-ink-3);
  --mb-ink-4:var(--sm-ink-3);
  --mb-bg-2:var(--sm-surface);
  --mb-bg-3:var(--sm-surface-2);
  --mb-bg-tint:var(--sm-surface-2);
  --mb-bg-cool:var(--sm-surface-2);
}
/* 38492 Modern-blog-test overlay defines --mb-* on body.dl-modern-blog-test
   (out-specifies :root). Re-define at higher specificity so the rev-62 layout
   recolours to Swiss/Midnight. */
html[data-mode] body.dl-modern-blog-test{
  --mb-brand:var(--sm-accent); --mb-brand-deep:var(--sm-accent-ink); --mb-brand-darker:var(--sm-accent-ink);
  --mb-brand-light:var(--sm-accent-soft-line); --mb-brand-soft:var(--sm-accent-soft);
  --mb-accent-green:var(--sm-accent);
  --mb-ink:var(--sm-ink-strong); --mb-ink-2:var(--sm-ink-2); --mb-ink-3:var(--sm-ink-3); --mb-ink-4:var(--sm-ink-3);
  --mb-bg-2:var(--sm-surface); --mb-bg-3:var(--sm-surface-2); --mb-bg-tint:var(--sm-surface-2); --mb-bg-cool:var(--sm-surface-2);
}

/* ---------- C. chrome recolour ONLY (structure untouched) ---------- */
.dl-logo-img circle{fill:var(--sm-accent) !important;}
.dl-btn-primary, .dl-header-cta-desktop, a.dl-btn.dl-btn-primary{
  background:var(--sm-cta-bg) !important; border-color:var(--sm-cta-bg) !important; color:var(--sm-cta-ink) !important;
}
.dl-btn-primary:hover, .dl-header-cta-desktop:hover{filter:brightness(.95);}

/* normalise residual hard-coded green accents -> theme accent (BOTH modes) */
html[data-mode] body:not(.home) #dl-main .dl-promise-block,
html[data-mode] body:not(.home) #dl-main .dl-mcq-section,
html[data-mode] body:not(.home) #dl-main .dl-mcq-answer,
html[data-mode] body:not(.home) #dl-main .dl-callout,
html[data-mode] body:not(.home) #dl-main .dl-sources,
html[data-mode] body:not(.home) #dl-main .ah-significance{ border-left-color:var(--sm-accent) !important; }
html[data-mode] body:not(.home) #dl-main .dl-promise-eyebrow{ color:var(--sm-accent-ink) !important; }
html[data-mode] body:not(.home) #dl-main .dl-promise-eyebrow[style],
html[data-mode] body:not(.home) #dl-main .ah-sig-head{ background:var(--sm-accent) !important; }
html[data-mode] body:not(.home) #dl-main .ah-sig-section-h,
html[data-mode] body:not(.home) #dl-main .article-hero-back{ color:var(--sm-accent-ink) !important; }

/* dark-mode toggle button */
.dl-mode-toggle{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border:1px solid var(--sm-hdr-line);border-radius:999px;background:transparent;color:inherit;cursor:pointer;padding:0;margin-left:4px;vertical-align:middle;}
.dl-mode-toggle:hover{border-color:var(--sm-accent);}
.dl-mode-toggle svg{width:15px;height:15px;}
.dl-mode-toggle .dl-ic-sun{display:none;}
.dl-mode-toggle .dl-ic-moon{display:block;}
html[data-mode="dark"] .dl-mode-toggle .dl-ic-sun{display:block;}
html[data-mode="dark"] .dl-mode-toggle .dl-ic-moon{display:none;}
@media (prefers-color-scheme: dark){
  html:not([data-mode="light"]) .dl-mode-toggle .dl-ic-sun{display:block;}
  html:not([data-mode="light"]) .dl-mode-toggle .dl-ic-moon{display:none;}
}

/* ---------- D. DARK MODE: re-point hardcoded-white surfaces (article pages only) ----------
   Homepage excluded via :not(.home):not(.page-template-front-page).
   Beats the inline `background:#FFFFFF !important` page wrappers in single.php. */
html[data-mode="dark"] body:not(.home):not(.page-template-front-page),
html[data-mode="dark"] body:not(.home) .hfeed.site,
html[data-mode="dark"] body:not(.home) #content,
html[data-mode="dark"] body:not(.home) #primary,
html[data-mode="dark"] body:not(.home) #dl-main{ background:var(--sm-bg) !important; color:var(--sm-ink); }

/* article surfaces that use hardcoded #FFFFFF / pale fills */
html[data-mode="dark"] body:not(.home) .article-hero{ background:#101012 !important; }
html[data-mode="dark"] body:not(.home) .article-toc,
html[data-mode="dark"] body:not(.home) .dl-promise-block,
html[data-mode="dark"] body:not(.home) .dl-mcq,
html[data-mode="dark"] body:not(.home) .dl-callout,
html[data-mode="dark"] body:not(.home) .dl-author,
html[data-mode="dark"] body:not(.home) .dl-byline,
html[data-mode="dark"] body:not(.home) .dl-comparison-table,
html[data-mode="dark"] body:not(.home) .dl-comparison-table td,
html[data-mode="dark"] body:not(.home) .dl-comparison-table th,
html[data-mode="dark"] body:not(.home) .dl-prelims-framework,
html[data-mode="dark"] body:not(.home) .dl-mains-framework,
html[data-mode="dark"] body:not(.home) .dl-mcq-answer-body,
html[data-mode="dark"] body:not(.home) figure.dl-figure{ background:var(--sm-surface) !important; }
html[data-mode="dark"] body:not(.home) .dl-inline-newsletter{ background:var(--sm-surface-2) !important; }

/* hairlines / borders that were hardcoded light */
html[data-mode="dark"] body:not(.home) .article-toc,
html[data-mode="dark"] body:not(.home) .dl-promise-block,
html[data-mode="dark"] body:not(.home) .dl-mcq,
html[data-mode="dark"] body:not(.home) .dl-comparison-table,
html[data-mode="dark"] body:not(.home) .dl-comparison-table td{ border-color:var(--sm-hairline) !important; }

/* generic safety: any element on an article page still painted pure white in dark
   mode gets the dark surface (covers small hardcoded #fff cards we have not class-targeted) */
html[data-mode="dark"] body:not(.home) #dl-main [style*="background:#FFFFFF"],
html[data-mode="dark"] body:not(.home) #dl-main [style*="background:#fff"],
html[data-mode="dark"] body:not(.home) #dl-main [style*="background: #FFFFFF"]{ background:var(--sm-surface) !important; }

/* ---- D2. precise dark-mode surface fixes (live DOM introspection 2026-05-29).
   #dl-main prefix included so we match the live ID-scoped !important rules. ---- */
/* page-level containers inside main -> page bg (double-id = guaranteed specificity win) */
html[data-mode="dark"] body:not(.home) #dl-main#dl-main,
html[data-mode="dark"] body:not(.home) #dl-main#dl-main .article-body,
html[data-mode="dark"] body:not(.home) #dl-main#dl-main .article-grid,
html[data-mode="dark"] body:not(.home) #dl-main#dl-main .article-prose,
html[data-mode="dark"] body:not(.home) #dl-main#dl-main article.dl-ca-entry{ background:var(--sm-bg) !important; }
html[data-mode="dark"] body:not(.home) #dl-main#dl-main .article-hero{ background:#0f1012 !important; }
/* card surfaces inside main -> surface */
html[data-mode="dark"] body:not(.home) #dl-main#dl-main .article-toc,
html[data-mode="dark"] body:not(.home) #dl-main#dl-main .ah-significance,
html[data-mode="dark"] body:not(.home) #dl-main#dl-main .dl-mcq-answer,
html[data-mode="dark"] body:not(.home) #dl-main#dl-main .dl-mcq-answer-body,
html[data-mode="dark"] body:not(.home) #dl-main#dl-main .dl-prelims-framework,
html[data-mode="dark"] body:not(.home) #dl-main#dl-main .dl-prelims-framework-body,
html[data-mode="dark"] body:not(.home) #dl-main#dl-main .dl-mains-framework,
html[data-mode="dark"] body:not(.home) #dl-main#dl-main .dl-mains-framework-body,
html[data-mode="dark"] body:not(.home) #dl-main#dl-main .dl-sources{ background:var(--sm-surface) !important; }
/* list items that carry their own white fill -> transparent (sit on dark parent) */
html[data-mode="dark"] body:not(.home) #dl-main#dl-main .dl-prelims-framework-body li,
html[data-mode="dark"] body:not(.home) #dl-main#dl-main .dl-mains-framework-body li,
html[data-mode="dark"] body:not(.home) #dl-main#dl-main .dl-sources li{ background:transparent !important; }
html[data-mode="dark"] body:not(.home) #dl-main#dl-main .ah-share-btn{
  background:var(--sm-surface-2) !important; border-color:var(--sm-hairline) !important; color:var(--sm-ink) !important; }
/* Astra wrapper (ancestor of #dl-main) + page wrappers -> page bg */
html[data-mode="dark"] body:not(.home) .ast-container,
html[data-mode="dark"] body:not(.home) .ast-separate-container,
html[data-mode="dark"] body:not(.home) .site-content,
html[data-mode="dark"] body:not(.home) #content,
html[data-mode="dark"] body:not(.home) #primary,
html[data-mode="dark"] body:not(.home) div.ast-container.ast-container,
html[data-mode="dark"] body:not(.home) .hfeed.site{ background:var(--sm-bg) !important; }
/* any remaining list item carrying its own light fill -> transparent on dark */
html[data-mode="dark"] body:not(.home) #dl-main#dl-main li{ background:transparent !important; }

/* ===== GREEN SWEEP v2 — banner + gradients + PYQ/MCQ (live full audit 2026-05-29). BOTH modes. ===== */
/* Banner (you said only header/footer excluded, NOT the banner): de-green the hero. */
html[data-mode] body:not(.home) #dl-main .article-hero{ background:#0f1012 !important; }
html[data-mode] body:not(.home) #dl-main .article-hero-bg{ filter:grayscale(1) brightness(.5) !important; }
/* "Last updated" pill (green gradient) -> neutral chip */
html[data-mode] body:not(.home) #dl-main .ah-updated-pill{
  background:var(--sm-surface-2) !important; border:1px solid var(--sm-hairline) !important; }
html[data-mode] body:not(.home) #dl-main .ah-updated-pill,
html[data-mode] body:not(.home) #dl-main .ah-updated-pill-label,
html[data-mode] body:not(.home) #dl-main .ah-updated-pill-date{ color:var(--sm-ink) !important; }
html[data-mode] body:not(.home) #dl-main .ah-updated-pill-icon{ color:var(--sm-accent-ink) !important; }
/* active TOC item green -> accent-soft */
html[data-mode] body:not(.home) #dl-main .toc-active,
html[data-mode] body:not(.home) #dl-main .toc-list .is-active,
html[data-mode] body:not(.home) #dl-main a.toc-active{ background:var(--sm-accent-soft) !important; color:var(--sm-accent-ink) !important; }
/* PYQ / MCQ framework green backgrounds -> surface */
html[data-mode] body:not(.home) #dl-main .dl-prelims-framework,
html[data-mode] body:not(.home) #dl-main .dl-mains-framework{ background:var(--sm-surface-2) !important; }
html[data-mode="dark"] body:not(.home) #dl-main .dl-prelims-framework,
html[data-mode="dark"] body:not(.home) #dl-main .dl-mains-framework{ background:var(--sm-surface) !important; }
/* full-border (all sides) greens -> accent */
html[data-mode] body:not(.home) #dl-main .dl-promise-block,
html[data-mode] body:not(.home) #dl-main .dl-mcq-section{ border-color:var(--sm-accent) !important; }
/* comparison table green cell borders -> hairline; sources border -> accent */
html[data-mode] body:not(.home) #dl-main .dl-comparison-table,
html[data-mode] body:not(.home) #dl-main .dl-comparison-table tr,
html[data-mode] body:not(.home) #dl-main .dl-comparison-table td,
html[data-mode] body:not(.home) #dl-main .dl-comparison-table th,
html[data-mode] body:not(.home) #dl-main .dl-comparison-table tbody,
html[data-mode] body:not(.home) #dl-main .dl-table-wrap{ border-color:var(--sm-hairline) !important; }
html[data-mode] body:not(.home) #dl-main .dl-sources{ border-color:var(--sm-accent) !important; }

/* ===== FIGURE + FEATURED SVG recolour (pilot: convert images to theme, per user 2026-05-29).
   CSS fill/stroke override the SVG presentation attributes. Header/footer untouched. ===== */
:root{ --fig-brand:#1f2125; --fig-acc1:#e8352b; --fig-acc2:#9aa0a8; --fig-bg:#f4f4f4; --fig-ink:#1a1a1a; --fig-ink-soft:#666666; }
/* dark mode: keep figures as LIGHT cards (legible) — only the accent switches to amber */
html[data-mode="dark"]{ --fig-brand:#1f2125; --fig-acc1:#f5b417; --fig-acc2:#9aa0a8; --fig-bg:#f4f4f4; --fig-ink:#1a1a1a; --fig-ink-soft:#666666; }
@media (prefers-color-scheme: dark){ html:not([data-mode="light"]){ --fig-brand:#1f2125; --fig-acc1:#f5b417; --fig-acc2:#9aa0a8; --fig-bg:#f4f4f4; --fig-ink:#1a1a1a; --fig-ink-soft:#666666; } }
/* light backing on the figure svg so the light-designed diagram reads correctly in dark mode */
html[data-mode="dark"] #dl-main .dl-figure svg{ background:#f4f4f4 !important; border-color:#2b2b2f !important; }
#dl-main svg [fill="#1A5B41"], #dl-main svg [fill="#052816"], #dl-main svg [fill="#144832"], #dl-main svg [fill="#0E3424"]{ fill:var(--fig-brand) !important; }
#dl-main svg [fill="#27A275"], #dl-main svg [fill="#2775A2"]{ fill:var(--fig-acc1) !important; }
#dl-main svg [fill="#C4633F"]{ fill:var(--fig-acc2) !important; }
#dl-main svg [fill="#F6F1E8"], #dl-main svg [fill="#F4F1E8"], #dl-main svg [fill="#F3FAF6"], #dl-main svg [fill="#DDEDE2"]{ fill:var(--fig-bg) !important; }
#dl-main svg [fill="#1F2D24"]{ fill:var(--fig-ink) !important; }
#dl-main svg [fill="#3A4A40"], #dl-main svg [fill="#4A6356"]{ fill:var(--fig-ink-soft) !important; }
#dl-main svg [stroke="#1A5B41"], #dl-main svg [stroke="#052816"]{ stroke:var(--fig-brand) !important; }
#dl-main svg [stroke="#27A275"]{ stroke:var(--fig-acc1) !important; }
#dl-main svg [stroke="#C4633F"]{ stroke:var(--fig-acc2) !important; }
#dl-main svg [fill="#C5DECE"]{ fill:var(--fig-acc2) !important; }
#dl-main svg [stroke="#C5DECE"]{ stroke:var(--fig-acc2) !important; }

/* =================================================================
   DEEP FIX (deep audit 2026-05-29): kill remaining green (shadows /
   gradients / underlines / badge) + match sample hero + component colours.
   ================================================================= */
/* Test-mode debug badge must not ship */
body.dl-modern-blog-test::before{ content:none !important; display:none !important; }

/* Hero = clean like the sample: page-bg, no triangle pattern, ink title */
html[data-mode] body:not(.home) #dl-main .article-hero{ background:var(--sm-bg) !important; }
html[data-mode] body:not(.home) #dl-main .article-hero-bg{ display:none !important; }
html[data-mode] body:not(.home) #dl-main .article-hero::after{ background-image:none !important; background:none !important; }
html[data-mode] body:not(.home) #dl-main .ah-title{ color:var(--sm-ink-strong) !important; }
html[data-mode] body:not(.home) #dl-main .ah-deck,
html[data-mode] body:not(.home) #dl-main .ah-byline,
html[data-mode] body:not(.home) #dl-main .ah-byline .byline-item{ color:var(--sm-ink-2) !important; }

/* Significance card: header BLACK (sample), subtle border, no green glow */
html[data-mode] body:not(.home) #dl-main .ah-significance .ah-sig-head,
html[data-mode] body:not(.home) #dl-main .ah-sig-head{ background:#14181f !important; color:#ffffff !important; }
html[data-mode] body:not(.home) #dl-main .ah-significance{ box-shadow:0 14px 40px -22px rgba(0,0,0,.35) !important; border-color:var(--sm-hairline) !important; }

/* Kill green box-shadows / glows everywhere */
html[data-mode] body:not(.home) #dl-main .article-hero-image{ box-shadow:0 20px 50px -20px rgba(0,0,0,.35) !important; }
html[data-mode] body:not(.home) #dl-main .dl-mcq-section{ box-shadow:none !important; }
html[data-mode] body:not(.home) #dl-main .dl-eeat-photo,
html[data-mode] body:not(.home) #dl-main .dl-eeat-initials{ box-shadow:none !important; }
.dl-btn-primary, .dl-header-cta-desktop{ box-shadow:none !important; }

/* Green link underlines + EEAT hover -> red-soft */
html[data-mode] body:not(.home) #dl-main .article-prose a,
html[data-mode] body:not(.home) #dl-main .dl-ca-entry a,
html[data-mode] body:not(.home) #dl-main .entry-content a,
html[data-mode] body:not(.home) #dl-main .dl-eeat-cta a:hover{ border-bottom-color:var(--sm-accent-soft-line) !important; }

/* MCQ green dividers -> hairline */
html[data-mode] body:not(.home) #dl-main .dl-mcq,
html[data-mode] body:not(.home) #dl-main .dl-mcq:last-child,
html[data-mode] body:not(.home) #dl-main .dl-mcq-section .dl-mcq{ border-bottom-color:var(--sm-hairline) !important; }

/* Comparison table first-column labels -> red accent (sample) */
html[data-mode] body:not(.home) #dl-main .dl-comparison-table tbody td:first-child,
html[data-mode] body:not(.home) #dl-main .dl-comparison-table th:first-child{ color:var(--sm-accent-ink) !important; }

/* Author card: neutral surface (kill pale-green) */
html[data-mode] body:not(.home) #dl-main .dl-eeat-author-block{ background:var(--sm-surface-2) !important; }
/* last two greens: hero glow + button shadow (double specificity to beat inline !important) */
#dl-main#dl-main .article-hero::after{ background-image:none !important; background:none !important; }
body.dl-modern a.dl-btn-primary, body.dl-modern .dl-header-cta-desktop, .dl-btn-primary.dl-btn-primary{ box-shadow:none !important; }

/* =================================================================
   STRUCTURE CSS for the JS-rebuilt sample components (pilot). 2026-05-29.
   ================================================================= */
/* --- exam-paper PYQ (.pyq4 / .s4 / .fw) --- */
#dl-main .pyq4{ background:var(--sm-surface); border:1px solid var(--sm-hairline); border-left:3px solid var(--sm-accent); border-radius:10px; padding:22px 26px; margin:0 0 14px; }
#dl-main .pyq4 .s4-tag{ font-size:12px; font-weight:700; color:var(--sm-accent-ink); letter-spacing:.04em; margin:0 0 10px; }
#dl-main .pyq4 .s4-stem{ font-size:16px; font-weight:600; color:var(--sm-ink-strong); line-height:1.5; margin:0 0 13px; }
#dl-main .pyq4 .s4-stmts{ counter-reset:s4; list-style:none; margin:0 0 6px; padding:0; }
#dl-main .pyq4 .s4-stmt{ counter-increment:s4; font-size:15px; line-height:1.7; color:var(--sm-ink); padding-left:32px; position:relative; margin:0 0 8px; }
#dl-main .pyq4 .s4-stmt::before{ content:counter(s4) "."; position:absolute; left:6px; font-weight:700; color:var(--sm-accent-ink); }
#dl-main .pyq4 .s4-prompt{ font-size:15px; color:var(--sm-ink-strong); font-weight:600; margin:16px 0 13px; }
#dl-main .pyq4 .s4-opts{ list-style:none; display:flex; flex-direction:column; gap:10px; padding:0; margin:0; }
#dl-main .pyq4 .s4-opt{ display:flex; gap:13px; align-items:center; font-size:14.5px; color:var(--sm-ink); }
#dl-main .pyq4 .s4-opt-l{ width:26px; height:26px; border-radius:50%; border:1.5px solid var(--sm-accent-soft-line); font-weight:700; font-size:12px; color:var(--sm-accent-ink); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
#dl-main .pyq4 .mains-tag{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.05em; color:var(--sm-accent-3, var(--sm-accent-ink)); background:var(--sm-accent-soft); padding:4px 11px; border-radius:999px; margin:0 0 10px; }
#dl-main .pyq4 .mains-text{ font-size:15px; line-height:1.6; color:var(--sm-ink-strong); font-weight:500; }
#dl-main .pyq4 .fw{ margin-top:14px; border:1px solid var(--sm-hairline); border-radius:11px; overflow:hidden; background:var(--sm-surface-2); }
#dl-main .pyq4 .fw summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:11px; padding:12px 16px; font-size:13px; font-weight:600; color:var(--sm-accent-ink); }
#dl-main .pyq4 .fw summary::-webkit-details-marker{ display:none; }
#dl-main .pyq4 .fw summary::before{ content:""; width:7px; height:7px; border-right:2px solid var(--sm-accent); border-bottom:2px solid var(--sm-accent); transform:rotate(-45deg); transition:transform .2s; flex-shrink:0; }
#dl-main .pyq4 .fw[open] summary::before{ transform:rotate(45deg); }
#dl-main .pyq4 .fw-body{ padding:2px 16px 15px; font-size:13.5px; line-height:1.6; color:var(--sm-ink-2); }
#dl-main .pyq4 .fw-body p{ margin:7px 0; font-size:13.5px; } #dl-main .pyq4 .fw-body strong{ color:var(--sm-ink-strong); }

/* --- renderer PYQ (.dl-pyq-statements / .dl-pyq-options) styled to MATCH the
   Sindoor .s4 exam-paper look: bold accent statement numbers + a/b/c/d circle
   options. The renderer emits these classes on every article; this makes every
   PYQ render like the Operation sample without the one-off rebuild JS. 2026-05-30. */
/* Native OL marker, styled bold-accent via ::marker. Double-id beats the generic
   #dl-main ol rule that forced list-style:decimal + zero padding (which let the
   old number-span overlap the text). One marker, correctly indented. 2026-05-30. */
#dl-main#dl-main .dl-pyq-statements{ list-style:decimal; margin:6px 0 8px; padding-left:30px; color:var(--sm-ink,#1a1a1a) !important; }
#dl-main#dl-main .dl-pyq-statements>li{ padding-left:6px; line-height:1.7; margin:0 0 8px; color:var(--sm-ink,#1a1a1a) !important; }
#dl-main#dl-main .dl-pyq-statements>li::marker{ color:var(--sm-accent-ink); font-weight:700; }
/* Figure caption as a clean editorial footer (Figure N + caption + Reference),
   matching the Operation sample's defined-figure standard. Light (the SVG already
   carries its own dark brand footer; a second dark strip would double up). 2026-05-30. */
#dl-main .dl-figure figcaption{ margin:10px 2px 0; font-size:13px; line-height:1.55; color:var(--sm-ink-2); }
#dl-main .dl-figure .dl-fig-cap{ font-weight:600; color:var(--sm-ink-strong); }
#dl-main .dl-figure .dl-fig-ref{ display:block; margin-top:3px; font-size:12px; color:var(--sm-ink-mute, #6b6258); }
#dl-main .dl-pyq-options{ list-style:none; display:flex; flex-direction:column; gap:10px; margin:14px 0 0; padding:0; }
#dl-main .dl-pyq-options>li{ display:flex; gap:13px; align-items:flex-start; }
#dl-main .dl-pyq-options .dl-pyq-optl{ width:26px; height:26px; border-radius:50%; border:1.5px solid var(--sm-accent-soft-line); font-weight:700; font-size:12px; color:var(--sm-accent-ink); display:flex; align-items:center; justify-content:center; flex-shrink:0; text-transform:lowercase; }

/* --- featured card --- */
#dl-main .feat-card{ border:1px solid var(--sm-hairline); border-radius:var(--sm-img-radius,4px); overflow:hidden; background:var(--sm-surface); margin:0 0 30px; }
#dl-main .feat-hd{ background:#14181f; color:#fff; display:flex; align-items:center; justify-content:space-between; padding:13px 22px; }
#dl-main .feat-wm{ font-size:13px; font-weight:700; letter-spacing:.04em; display:flex; align-items:center; gap:8px; }
#dl-main .feat-wm i{ width:11px; height:11px; background:var(--sm-accent); border-radius:2px; transform:rotate(45deg); display:inline-block; }
#dl-main .feat-cat{ font-size:10.5px; font-weight:700; letter-spacing:.16em; opacity:.85; }
#dl-main .feat-bd{ display:grid; grid-template-columns:1fr; }
/* 2-column only when an "At a glance" right panel is actually present; otherwise the
   hero content (heading + deck + pills) spans the full width instead of leaving an empty
   250px right column. Per user 2026-05-31: "why Heading are not written full horizontally". */
#dl-main .feat-bd:has(.feat-right){ grid-template-columns:1fr 250px; }
#dl-main .feat-left{ padding:26px 24px 24px; }
#dl-main .feat-eyebrow{ display:inline-block; white-space:nowrap; max-width:100%; font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--sm-accent-ink); background:var(--sm-accent-soft); padding:6px 12px; border-radius:999px; }
/* Long eyebrows (e.g. "International Relations - GS-II") wrapped to a forced 3-line
   pill in the narrow 2-col left column at tablet too (G8 eyebrow_stacked @768 + @320);
   shrink font + tracking AND stack the card single-column at <=820 so the eyebrow gets
   full width and fits <=2 lines. 2026-05-30. */
@media (max-width:820px){ #dl-main .feat-eyebrow{ font-size:10px; letter-spacing:.04em; padding:5px 10px; line-height:1.3; } }
/* At phone widths the single-column card column is ~194px; even 10px eyebrows 3-lined
   the longest labels ("Science and Technology - GS-III"). Cut feat-left padding for more
   width AND drop eyebrow to 9px / zero tracking so any eyebrow fits <=2 lines. 2026-05-30. */
@media (max-width:480px){ #dl-main .feat-left{ padding:20px 14px 18px; } #dl-main .feat-eyebrow{ font-size:9px; letter-spacing:0; padding:5px 9px; } }
#dl-main .feat-ttl{ font-size:34px; line-height:1.04; font-weight:700; letter-spacing:-.02em; color:var(--sm-ink-strong); margin:16px 0 0; }
#dl-main .feat-ttl span{ color:var(--sm-accent-ink); display:block; margin-top:14px; }
#dl-main .feat-sub{ font-size:16px; font-weight:500; color:var(--sm-ink-2); margin:9px 0 0; }
#dl-main .feat-pills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
#dl-main .feat-pill{ font-size:12px; font-weight:600; color:var(--sm-ink); background:var(--sm-surface); border:1.5px solid var(--sm-hairline); border-radius:999px; padding:6px 12px; }
#dl-main .feat-pill b{ color:var(--sm-accent-ink); }
#dl-main .feat-right{ background:var(--sm-surface-2); border-left:1px solid var(--sm-hairline); padding:24px 22px; }
#dl-main .feat-tl-title{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--sm-accent-ink); margin-bottom:16px; }
#dl-main .feat-tl-item{ position:relative; padding-left:22px; padding-bottom:14px; border-left:2px solid var(--sm-hairline); }
#dl-main .feat-tl-item:last-child{ padding-bottom:0; border-left-color:transparent; }
#dl-main .feat-tl-item::before{ content:""; position:absolute; left:-7px; top:2px; width:12px; height:12px; border-radius:50%; background:var(--sm-accent); border:3px solid var(--sm-surface-2); }
#dl-main .feat-tl-item b{ display:block; font-size:13px; font-weight:700; color:var(--sm-ink-strong); line-height:1.15; }
#dl-main .feat-tl-item span{ font-size:12px; color:var(--sm-ink-2); }
#dl-main .feat-ft{ background:#14181f; color:#fff; display:flex; align-items:center; justify-content:space-between; padding:11px 22px; font-size:11px; }
#dl-main .feat-ft .r{ opacity:.72; }
@media(max-width:820px){ #dl-main .feat-bd{ grid-template-columns:1fr; } #dl-main .feat-right{ border-left:none; border-top:1px solid var(--sm-hairline); } }

/* --- MCQ: flat (remove card), lettered options, red text-link reveal --- */
#dl-main .dl-mcq-section{ background:none !important; border:none !important; box-shadow:none !important; padding:0 !important; }
#dl-main .dl-mcq{ background:none !important; border:none !important; border-bottom:1px solid var(--sm-hairline) !important; border-radius:0 !important; padding:16px 0 !important; box-shadow:none !important; }
#dl-main .dl-mcq-list{ list-style:lower-alpha !important; margin:0 0 6px 22px !important; }
#dl-main .dl-mcq-answer summary{ background:none !important; color:var(--sm-accent-ink) !important; border:none !important; padding:8px 0 !important; font-weight:600 !important; }

/* --- Sources: flat red-arrow list (remove card) --- */
#dl-main .dl-kb-section .dl-sources, #dl-main ul.dl-sources{ background:none !important; border:none !important; box-shadow:none !important; padding:0 !important; list-style:none !important; }
#dl-main .dl-sources li{ list-style:none !important; padding-left:20px !important; position:relative !important; }
#dl-main .dl-sources li::before{ content:"\2192" !important; position:absolute !important; left:0 !important; color:var(--sm-accent) !important; }

/* --- Author avatar initials --- */
#dl-main .dl-eeat-initials-text{ color:#fff; font-weight:700; font-size:18px; }
/* initials variant only — never the real photo (no dark square behind the circular photo) */
#dl-main .dl-eeat-initials:not(:has(img)){ background:#14181f !important; display:flex !important; align-items:center; justify-content:center; }

/* fix: MCQ option a/b/c/d letters + PYQ stem/statement colour (double-id beats live) */
#dl-main#dl-main .dl-mcq-list{ list-style:lower-alpha outside !important; padding-left:26px !important; margin-left:2px !important; }
#dl-main#dl-main .dl-mcq-list > li{ display:list-item !important; padding-left:4px !important; margin:4px 0 !important; }
#dl-main#dl-main .dl-mcq-list > li::marker{ color:var(--sm-accent-ink) !important; font-weight:700 !important; }
#dl-main#dl-main .pyq4 .s4-stem,
#dl-main#dl-main .pyq4 .s4-prompt{ color:var(--sm-ink-strong) !important; }
#dl-main#dl-main .pyq4 .s4-stmt{ color:var(--sm-ink) !important; }

/* ===== SAMPLE-MATCH: exact typography / spacing to the approved sample (computed-diff 2026-05-29) ===== */
#dl-main, #dl-main p, #dl-main li, #dl-main h1, #dl-main h2, #dl-main h3, #dl-main h4, #dl-main span, #dl-main a, #dl-main strong, #dl-main summary, #dl-main td, #dl-main th, #dl-main .pyq4, #dl-main .feat-card{
  font-family:"General Sans","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif !important; }
/* hero */
#dl-main#dl-main .ah-title{ font-size:clamp(33px,4.4vw,54px) !important; font-weight:700 !important; line-height:1.05 !important; letter-spacing:-.02em !important; }
#dl-main#dl-main .ah-deck{ font-size:clamp(15px,1.4vw,18px) !important; line-height:1.62 !important; margin:18px 0 0 !important; }
/* body prose + headings */
#dl-main#dl-main .article-prose p{ font-size:18px !important; line-height:1.78 !important; margin:0 0 22px !important; }
#dl-main#dl-main .dl-ca-section h2{ font-size:clamp(23px,2.5vw,30px) !important; font-weight:700 !important; line-height:1.2 !important; letter-spacing:-.012em !important; padding:18px 0 0 !important; margin:0 0 8px !important; border-bottom:0 !important; }
#dl-main#dl-main .dl-ca-section h3{ font-size:16px !important; font-weight:600 !important; line-height:1.6 !important; letter-spacing:normal !important; color:var(--sm-ink-2) !important; margin:0 0 22px !important; }
#dl-main#dl-main .dl-lettered-list li{ font-size:17px !important; line-height:1.72 !important; padding:0 0 0 20px !important; margin:0 0 15px !important; border-left:3px solid var(--sm-accent-soft-line) !important; }
/* comparison table */
#dl-main#dl-main .dl-comparison-table td{ padding:13px 16px !important; }
#dl-main#dl-main .dl-comparison-table tbody td:first-child, #dl-main#dl-main .dl-comparison-table th:first-child{ font-weight:700 !important; color:var(--sm-accent-ink) !important; }
/* callout */
#dl-main#dl-main .dl-callout{ font-size:16px !important; line-height:1.6 !important; background:var(--sm-accent-soft) !important; padding:22px 24px !important; margin:30px 0 !important; border:1px solid var(--sm-accent-soft-line) !important; border-radius:4px !important; box-shadow:none !important; }
/* MCQ */
#dl-main#dl-main .dl-mcq-q{ font-weight:600 !important; line-height:1.55 !important; margin:0 0 12px !important; }
#dl-main#dl-main .dl-mcq-list{ font-size:15px !important; line-height:1.7 !important; color:var(--sm-ink-2) !important; margin:0 0 6px 22px !important; }
/* sources */
#dl-main#dl-main .dl-sources li{ font-size:14.5px !important; line-height:1.55 !important; color:var(--sm-ink) !important; padding:0 0 0 18px !important; margin:0 0 11px !important; }
/* featured card */
#dl-main#dl-main .feat-card{ font-size:16px !important; line-height:1.6 !important; color:var(--sm-ink) !important; box-shadow:0 1px 2px rgba(0,0,0,.06) !important; }
#dl-main .feat-hd, #dl-main .feat-ft{ background:#111111 !important; }
#dl-main#dl-main .feat-ttl{ font-size:34px !important; line-height:1.1 !important; letter-spacing:-.02em !important; margin:16px 0 20px !important; font-weight:700 !important; }
#dl-main#dl-main .feat-sub{ font-size:18px !important; line-height:1.6 !important; margin:22px 0 0 !important; }
/* pyq exam-paper sizes (match sample computed) */
#dl-main#dl-main .pyq4{ font-size:16px !important; line-height:1.6 !important; }
#dl-main#dl-main .pyq4 .s4-tag{ font-size:18px !important; line-height:1.6 !important; color:var(--sm-ink) !important; margin:0 0 22px !important; }
#dl-main#dl-main .pyq4 .s4-stem, #dl-main#dl-main .pyq4 .s4-prompt{ font-size:18px !important; line-height:1.6 !important; margin:0 0 14px !important; }
#dl-main#dl-main .pyq4 .s4-stmt{ font-size:15px !important; line-height:1.7 !important; padding:0 0 0 32px !important; margin:0 0 8px !important; }
#dl-main#dl-main .pyq4 .s4-opt{ font-size:14.5px !important; line-height:1.6 !important; padding:0 !important; margin:0 !important; }

/* ===== SAMPLE-MATCH v2: win the live !important font + final line-height/colour ===== */
#dl-main#dl-main *{ font-family:"General Sans","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif !important; }
#dl-main#dl-main .pyq4 .s4-stem, #dl-main#dl-main .pyq4 .s4-prompt{ line-height:1.78 !important; color:var(--sm-ink) !important; margin:0 0 22px !important; }
#dl-main#dl-main .pyq4 .s4-tag{ line-height:1.78 !important; }
#dl-main#dl-main .dl-mcq .dl-mcq-q{ font-size:16px !important; line-height:1.55 !important; margin:0 0 12px !important; }
#dl-main#dl-main .dl-comparison-table td{ border-left:0 !important; }

/* ===== SAMPLE-MATCH v3: full paired component audit (computed diff 2026-05-29) ===== */
/* hero byline + last-updated pill (grey chip, not pink) */
#dl-main#dl-main .ah-byline{ font-size:13px !important; line-height:1.6 !important; gap:16px !important; }
#dl-main#dl-main .ah-updated-pill{ font-size:13px !important; font-weight:600 !important; color:#333 !important; background:#f2f2f2 !important; border-color:#e2e2e2 !important; padding:6px 12px !important; gap:7px !important; }
#dl-main#dl-main .ah-updated-pill-label, #dl-main#dl-main .ah-updated-pill-date{ color:#333 !important; }
/* significance card */
#dl-main#dl-main .ah-significance{ font-size:16px !important; line-height:1.6 !important; color:var(--sm-ink) !important; border-radius:4px !important; border-color:#dddddd !important; box-shadow:0 8px 30px rgba(0,0,0,.08) !important; }
#dl-main#dl-main .ah-sig-head{ font-size:19px !important; font-weight:700 !important; letter-spacing:-.01em !important; background:#111111 !important; padding:18px 24px !important; }
#dl-main#dl-main .ah-sig-section-h{ font-size:16px !important; color:var(--sm-accent-ink) !important; }
#dl-main#dl-main .ah-sig-section-body{ font-size:14.5px !important; line-height:1.62 !important; }
#dl-main#dl-main .ah-sig-takeaways li{ font-size:14px !important; line-height:1.55 !important; color:var(--sm-ink) !important; padding:0 0 0 22px !important; margin:0 0 13px !important; }
/* hero share -> sample grey 42px circles */
#dl-main#dl-main .ah-share-btn{ width:42px !important; height:42px !important; border-radius:50% !important; color:var(--sm-ink-2) !important; border-color:var(--sm-hairline) !important; background:transparent !important; transition:color 150ms ease, border-color 150ms ease, background 150ms ease !important; }
/* restore share-button hover colour (border + icon -> accent, soft-accent fill); two-mode via tokens */
#dl-main#dl-main .ah-share-btn:hover,
#dl-main#dl-main .ah-share-btn:focus-visible{ color:var(--sm-accent) !important; border-color:var(--sm-accent) !important; background:var(--sm-accent-soft) !important; }
/* dark-mode hover must match the dark surface rule's specificity to win */
html[data-mode="dark"] body:not(.home) #dl-main#dl-main .ah-share-btn:hover,
html[data-mode="dark"] body:not(.home) #dl-main#dl-main .ah-share-btn:focus-visible{ color:var(--sm-accent) !important; border-color:var(--sm-accent) !important; background:var(--sm-accent-soft) !important; }
#dl-main#dl-main .ah-share-label{ font-size:12px !important; letter-spacing:.12em !important; text-transform:uppercase !important; }
/* TOC */
#dl-main#dl-main .article-toc{ background:transparent !important; }
#dl-main#dl-main .toc-head{ font-size:11.5px !important; font-weight:700 !important; letter-spacing:.16em !important; color:var(--sm-ink-3) !important; padding-bottom:12px !important; margin-bottom:14px !important; border-bottom:1px solid var(--sm-hairline) !important; }
#dl-main#dl-main .dl-toc-list a, #dl-main#dl-main .toc-list a{ display:block !important; font-size:13.5px !important; padding:7px 10px 7px 14px !important; border-left:2px solid transparent !important; }
/* Overview heading: kill red underline, size 30 */
#dl-main#dl-main .dl-section-overview{ font-size:clamp(23px,2.5vw,30px) !important; line-height:1.2 !important; letter-spacing:-.012em !important; border-bottom:0 !important; border-left:0 !important; padding:0 !important; padding-left:0 !important; margin:0 0 8px !important; color:#2a2520 !important; }
/* TOC: head + all list links bold, in warm dark grey (user 2026-05-30: "Table of
   Contents" head, all bold dark grey). Active item keeps its tint highlight. */
#dl-main#dl-main .toc-head{ text-transform:none !important; letter-spacing:normal !important; font-size:13.5px !important; font-weight:700 !important; color:#000000ad !important; }
#dl-main#dl-main .toc-list a, #dl-main#dl-main .dl-toc-list a{ font-weight:700 !important; color:#000000ad !important; }
/* TOC head stays pinned at the top of the box; only the list scrolls under it on
   desktop, so the head never hides when scroll-spy auto-scrolls to the active item
   (user 2026-05-30). Scoped >=981px; mobile TOC is static and untouched. */
@media (min-width:981px){
  #dl-main#dl-main .article-toc{ display:flex !important; flex-direction:column !important; overflow:hidden !important; max-height:calc(100vh - 70px) !important; }
  #dl-main#dl-main .article-toc .toc-head{ flex:0 0 auto !important; }
  #dl-main#dl-main .article-toc .toc-list,
  #dl-main#dl-main .article-toc #dl-toc-list{ flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important; padding-right:6px !important; }
}
/* Heading red-bar removal lives at SOURCE in dl-design-v2.css (.article-prose h2 /
   h2#sources / .dl-promise-block::before). Heading COLOUR is consolidated here as the
   single source of truth: the production article layer (dl-modern-blog-test.css)
   sets `h2 { color:var(--mb-ink) !important }` at (1,1,2) specificity, which outranks
   the dl-design-v2 rule and, where --mb-ink is not inherited (MCQ section, author
   block), goes invalid and falls back to inherited pure black. One canonical 2-ID
   rule in the last-loaded sheet fixes every heading at once (warm dark grey, never
   pure black; user 2026-05-30). */
#dl-main#dl-main .article-prose h2,
#dl-main#dl-main .article-prose h3,
#dl-main#dl-main .dl-eeat-name{ color:#2a2520 !important; }
/* PYQ Promise eyebrow (red pill) + row (plain, no pink box) */
#dl-main#dl-main .dl-promise-eyebrow{ display:inline-block !important; font-size:11px !important; letter-spacing:.14em !important; text-transform:uppercase !important; color:#fff !important; background:var(--sm-accent) !important; padding:4px 11px !important; margin:0 10px 0 0 !important; border:0 !important; border-radius:999px !important; }
#dl-main#dl-main .dl-promise-row{ color:var(--sm-ink-2) !important; background:none !important; border:0 !important; padding:0 !important; margin:0 0 18px !important; }
/* deck */
#dl-main#dl-main .article-prose p.dl-ca-deck{ font-size:20px !important; line-height:1.6 !important; padding:0 0 26px !important; margin:0 0 30px !important; border:0 !important; border-bottom:1px solid var(--sm-hairline) !important; }
/* figure caption left-aligned */
#dl-main#dl-main .dl-figure figcaption{ font-size:13px !important; text-align:left !important; margin:12px 0 0 !important; }
/* inline newsletter: show + match padding */
#dl-main#dl-main .dl-inline-newsletter{ display:flex !important; padding:24px !important; margin:30px 0 !important; gap:24px !important; }
/* callout label + list */
#dl-main#dl-main .dl-callout-label{ color:var(--sm-ink) !important; }
#dl-main#dl-main .dl-callout-list li{ font-size:15px !important; line-height:1.6 !important; color:var(--sm-ink) !important; padding:0 0 0 18px !important; margin:0 0 10px !important; }
/* MCQ answer explanation text */
#dl-main#dl-main .dl-mcq-answer-body p{ font-size:14.5px !important; line-height:1.65 !important; color:var(--sm-ink) !important; margin:8px 0 !important; }
/* editorial disclaimer: show + match */
#dl-main#dl-main .dl-ca-disclaimer{ display:block !important; color:var(--sm-ink) !important; padding:0 !important; }
#dl-main#dl-main .dl-ca-disclaimer-heading{ display:block !important; font-size:14px !important; font-weight:700 !important; letter-spacing:.08em !important; text-transform:uppercase !important; color:var(--sm-ink-2) !important; margin:36px 0 8px !important; }
/* author block: subtle (kill big red border/shadow/rounding) */
/* A5 two-tone split card (live 2026-05-31): grid, edge-to-edge panels, no inner padding/gap. */
#dl-main#dl-main .dl-eeat-author-block.dl-eeat-split{ color:var(--sm-ink) !important; padding:0 !important; gap:0 !important; border:1px solid var(--sm-hairline) !important; border-radius:14px !important; overflow:hidden !important; }
#dl-main#dl-main .dl-eeat-split .dl-eeat-left{ padding:27px 20px !important; }
#dl-main#dl-main .dl-eeat-split .dl-eeat-right{ padding:25px 27px !important; }
#dl-main#dl-main .dl-eeat-name{ font-size:1.12rem !important; line-height:1.2 !important; letter-spacing:normal !important; margin:0 0 2px !important; }
/* source links red */
#dl-main#dl-main .dl-sources a{ font-weight:400 !important; color:var(--sm-accent-ink) !important; border-bottom:0 !important; }
/* Sources: one divider per row only (the <li> bottom border). Kill the link's own
   underline so each row is not double-lined (user 2026-05-31). */
#dl-main#dl-main .dl-sources li a{ border-bottom:0 !important; text-decoration:none !important; }

/* ===== SAMPLE-MATCH v4: final real residuals (width/inherited diffs ignored) ===== */
#dl-main#dl-main .dl-section-overview{ display:block !important; }
#dl-main#dl-main .dl-promise-row{ color:var(--sm-ink) !important; }
#dl-main#dl-main .ah-share-btn{ background:var(--sm-surface) !important; }
#dl-main#dl-main .ah-share{ padding-top:18px !important; margin:24px 0 6px !important; border-top:1px solid var(--sm-hairline) !important; gap:12px !important; }
#dl-main#dl-main .dl-mcq-answer summary{ letter-spacing:normal !important; border-radius:0 !important; }
#dl-main#dl-main .toc-head{ line-height:1.6 !important; }
#dl-main#dl-main .dl-mcq-answer-body p{ line-height:1.78 !important; }

/* ===== REFINEMENTS v6 (marked feedback 2026-05-29) ===== */
/* #4 real logo in featured card header (white wordmark + accent dots) */
#dl-main .feat-hd .feat-wm i{ display:none !important; }
#dl-main .feat-hd .dl-logo-img{ height:22px !important; width:auto !important; display:block !important; }
#dl-main .feat-hd .dl-logo-img path{ fill:#ffffff !important; }
#dl-main .feat-hd .dl-logo-img circle{ fill:var(--sm-accent) !important; }
/* #5 PYQ framework body text uniform */
#dl-main#dl-main .pyq4 .fw-body, #dl-main#dl-main .pyq4 .fw-body p, #dl-main#dl-main .pyq4 .fw-body li{ font-size:14px !important; line-height:1.6 !important; }
#dl-main#dl-main .pyq4 .fw-body strong{ color:var(--sm-ink-strong) !important; }
/* #6 newsletter: kill stray red left bar */
#dl-main#dl-main .dl-inline-newsletter{ border:1px solid rgba(255,255,255,.12) !important; border-left:1px solid rgba(255,255,255,.12) !important; }
#dl-main#dl-main .dl-inline-newsletter::before{ display:none !important; }
/* #7 callout: no round list dots; small accent square marker like sample */
#dl-main#dl-main .dl-callout-list{ list-style:none !important; }
#dl-main#dl-main .dl-callout-list li{ list-style:none !important; padding-left:18px !important; position:relative !important; }
#dl-main#dl-main .dl-callout-list li::marker{ content:"" !important; }
#dl-main#dl-main .dl-callout-list li::before{ content:"" !important; display:block !important; position:absolute !important; left:0 !important; top:9px !important; width:7px !important; height:7px !important; border-radius:2px !important; background:var(--sm-accent) !important; box-shadow:none !important; }
/* #8/#9 MCQ: per-question bordered cards, grey letters, NO section outline, NO red bracket */
#dl-main#dl-main .dl-mcq-section{ border:0 !important; box-shadow:none !important; background:none !important; padding:0 !important; }
#dl-main#dl-main .dl-mcq{ border:1px solid var(--sm-hairline) !important; border-radius:8px !important; padding:18px 22px !important; background:var(--sm-surface) !important; margin:0 0 14px !important; box-shadow:none !important; }
#dl-main#dl-main .dl-mcq-list > li::marker{ color:var(--sm-ink-3) !important; font-weight:400 !important; }
/* toggle is a plain link like the sample: no grey/mint box around it.
   Kills the inline `#dl-main .article-prose .dl-mcq-answer{background:var(--sm-surface-2,#F3FAF6)}`
   and the modern-blog `--mb-bg-cool` box (the "weird hue"). 2-id to win. */
#dl-main#dl-main .dl-mcq-answer{ border-left:0 !important; padding:0 !important; background:none !important; }
/* "Show answer and explanation" reveal: visible accent text-link in BOTH modes
   (red #cf2418 light / amber #f5b417 dark via --sm-accent-ink). Fixes the
   white-on-light invisible summary after the black button was removed (2026-06-01). */
#dl-main#dl-main .dl-mcq-answer summary{ color:var(--sm-accent-ink) !important; }
#dl-main#dl-main .dl-mcq-answer summary::before,
#dl-main#dl-main .dl-mcq-answer > summary::before{ color:var(--sm-accent-ink) !important; }
/* MCQ choices + statements text colour (user-specified 2026-05-30). */
#dl-main#dl-main .dl-mcq-list li,
#dl-main#dl-main .dl-mcq-statements li{ color:var(--sm-ink) !important; }
/* text readability on the now-dark surfaces (links/strong keep their token accent) */
html[data-mode="dark"] body:not(.home) #dl-main p,
html[data-mode="dark"] body:not(.home) #dl-main li,
html[data-mode="dark"] body:not(.home) #dl-main h2,
html[data-mode="dark"] body:not(.home) #dl-main h3,
html[data-mode="dark"] body:not(.home) #dl-main h4,
html[data-mode="dark"] body:not(.home) #dl-main td,
html[data-mode="dark"] body:not(.home) #dl-main th{ color:var(--sm-ink) !important; }

/* B1: comparison table must not clip its right column on mobile.
   Force fixed layout at full container width so the three columns share the
   space and long cell text wraps instead of overflowing/clipping. Robust
   against ancestor overflow:hidden (no horizontal-scroll dependency). 2-id to win. */
@media (max-width:760px){
  #dl-main#dl-main .dl-comparison-table{ display:table !important; table-layout:fixed !important; width:100% !important; max-width:100% !important; min-width:0 !important; }
  #dl-main#dl-main .dl-comparison-table td,
  #dl-main#dl-main .dl-comparison-table th{ white-space:normal !important; word-break:break-word !important; overflow-wrap:anywhere !important; padding:8px 10px !important; font-size:13px !important; }
}

/* M3 sources: match the sample — no box, no native bullet, no italic. Keep the
   red arrow marker + the bold host prefix (user spec). 2-id beats the inline
   single.php `#dl-main .article-prose .dl-sources` box/bullet/italic rules. */
#dl-main#dl-main .dl-sources{ background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; padding:0 !important; list-style:none !important; }
#dl-main#dl-main .dl-sources li{ list-style:none !important; padding:0 0 0 22px !important; margin:0 0 11px !important; position:relative !important; }
#dl-main#dl-main .dl-sources li::marker{ content:"" !important; }
#dl-main#dl-main .dl-sources li::before{ content:"\2192" !important; position:absolute !important; left:0 !important; top:0 !important; color:var(--sm-accent) !important; font-style:normal !important; font-weight:600 !important; }
#dl-main#dl-main .dl-sources a,
#dl-main#dl-main .dl-sources em,
#dl-main#dl-main .dl-sources li strong{ font-style:normal !important; }

/* ---------- F. font-size fixes (user feedback 2026-05-29) — dl-theme loads last
   (priority 1000) so these win the cascade on the page. MCQ prompt 16px (match
   stem), editorial disclaimer 15px (smaller than body). ---------- */
#dl-main#dl-main p.dl-mcq-q-outro { font-size:16px !important; font-style:normal !important; font-weight:600 !important; }
#dl-main#dl-main p.dl-ca-disclaimer { font-size:15px !important; font-family:inherit !important; }

/* ---------- G. Copy-link share button: icon-only, consistent with the X/LinkedIn/
   WhatsApp circles (user feedback 2026-05-29: the always-on "Copy link" text spilled
   out of the circle). Show the label only as the brief "Copied" confirmation. ---------- */
#dl-main#dl-main .ah-share-copy { position:relative !important; }
#dl-main#dl-main .ah-share-copy .ah-share-copy-label { display:none !important; }
/* "Copied" shows as a small tooltip ABOVE the circle (not inline text spilling out of it) */
#dl-main#dl-main .ah-share-copy.is-copied .ah-share-copy-label {
  display:block !important; position:absolute !important; bottom:calc(100% + 6px); left:50%;
  transform:translateX(-50%); margin:0 !important; padding:3px 8px;
  background:#111111; color:#ffffff; border-radius:4px; font-size:11px; font-weight:600;
  white-space:nowrap; pointer-events:none; z-index:5;
}

/* ============================================================================
   DARK MODE (Midnight) corrections — user 2026-05-31.
   The canonical light-mode colour rules above hardcode dark values (#2a2520 headings,
   #3c3c3cb8 MCQ text, TOC) that do NOT flip, and at 2-ID specificity they override the
   generic dark rule. Add Midnight counterparts at html[data-mode="dark"] + 2-ID so they
   win in dark mode. Also flip the series-nav card/panel surfaces that stay light.
   ============================================================================ */
html[data-mode="dark"] #dl-main#dl-main .article-prose h2,
html[data-mode="dark"] #dl-main#dl-main .article-prose h3,
html[data-mode="dark"] #dl-main#dl-main .dl-section-overview,
html[data-mode="dark"] #dl-main#dl-main .dl-eeat-name,
html[data-mode="dark"] #dl-main#dl-main .article-prose .dl-promise-block::before{ color:#ffffff !important; }
/* MCQ choices + statements: soft light on the dark card */
html[data-mode="dark"] #dl-main#dl-main .dl-mcq-list li,
html[data-mode="dark"] #dl-main#dl-main .dl-mcq-statements li{ color:var(--sm-ink) !important; }
/* Table of Contents */
html[data-mode="dark"] #dl-main#dl-main .toc-head{ color:#F0EBE1 !important; }
html[data-mode="dark"] #dl-main#dl-main .toc-list a,
html[data-mode="dark"] #dl-main#dl-main .dl-toc-list a{ color:#C9C2B6 !important; }
/* Series-nav surfaces that don't flip (prev/next cards + all-parts panel + titles) */
html[data-mode="dark"] #dl-main#dl-main .dl-series-nav-v2 .snv2-card{ background:#141416 !important; border-color:#2a2a2e !important; }
html[data-mode="dark"] #dl-main#dl-main .dl-series-nav-v2 .snv2-card.snv2-disabled{ background:transparent !important; }
html[data-mode="dark"] #dl-main#dl-main .dl-series-nav-v2 .snv2-title{ color:#fafafa !important; }
html[data-mode="dark"] #dl-main#dl-main .dl-series-nav-v2 .snv2-all{ background:#141416 !important; border-color:#2a2a2e !important; }
html[data-mode="dark"] #dl-main#dl-main .dl-series-nav-v2 .snv2-all summary{ color:#F0EBE1 !important; }
html[data-mode="dark"] #dl-main#dl-main .dl-series-nav-v2 .snv2-list li{ border-color:#2a2a2e !important; }
html[data-mode="dark"] #dl-main#dl-main .dl-series-nav-v2 .snv2-list .snv2-current,
html[data-mode="dark"] #dl-main#dl-main .dl-series-nav-v2 .snv2-current span,
html[data-mode="dark"] #dl-main#dl-main .dl-series-nav-v2 .snv2-current strong{ color:#fafafa !important; }
html[data-mode="dark"] #dl-main#dl-main .dl-series-nav-v2 .snv2-current em{ color:#9a9aa2 !important; }

/* TOC internal scrollbar: fine line, very light (user 2026-05-31; was the thick browser default
   after the head-pinned fix moved the scroll onto the list). Dark-mode counterpart included. */
#dl-main#dl-main .toc-list, #dl-main#dl-main #dl-toc-list{ scrollbar-width:thin !important; scrollbar-color:rgba(0,0,0,.13) transparent !important; }
#dl-main#dl-main .toc-list::-webkit-scrollbar, #dl-main#dl-main #dl-toc-list::-webkit-scrollbar{ width:3px !important; }
#dl-main#dl-main .toc-list::-webkit-scrollbar-track, #dl-main#dl-main #dl-toc-list::-webkit-scrollbar-track{ background:transparent !important; }
#dl-main#dl-main .toc-list::-webkit-scrollbar-thumb, #dl-main#dl-main #dl-toc-list::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.13) !important; border-radius:3px !important; }
html[data-mode="dark"] #dl-main#dl-main .toc-list, html[data-mode="dark"] #dl-main#dl-main #dl-toc-list{ scrollbar-color:rgba(255,255,255,.16) transparent !important; }
html[data-mode="dark"] #dl-main#dl-main .toc-list::-webkit-scrollbar-thumb, html[data-mode="dark"] #dl-main#dl-main #dl-toc-list::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.16) !important; }

/* Mobile tap-targets >= 44x44 (WCAG 2.5.5) — TOC links, MCQ toggle, back/part/source links
   were 23-43px tall on mobile and tripped the QA tap-target check (user 2026-05-31). */
@media (max-width: 768px) {
  #dl-main#dl-main .toc-list a,
  #dl-main#dl-main .dl-toc-list a,
  #dl-main#dl-main .dl-mcq-answer summary,
  #dl-main#dl-main .article-hero-back,
  #dl-main#dl-main .ah-part,
  #dl-main#dl-main .ah-part-btn,
  #dl-main#dl-main .dl-sources a{ min-height:44px !important; display:flex !important; align-items:center !important; }
  #dl-main#dl-main .article-hero-back,
  #dl-main#dl-main .ah-part,
  #dl-main#dl-main .ah-part-btn,
  #dl-main#dl-main .dl-sources a{ display:inline-flex !important; }
}

/* B2 current-row tint in dark (the dl-design-v2 var(--sm-accent-soft) wasn't winning in dark) */
html[data-mode="dark"] #dl-main#dl-main .dl-series-nav-v2 .snv2-list .snv2-current{ background:#26210f !important; }

/* B2 series-nav: brand-correct borders + unified bg (user 2026-05-31). The panel was
   #F8FAFC (second grey) and the card/panel borders were off-brand pale-pink
   (--dl-green-200). Panel -> author-box surface (--sm-surface-2 = #f7f7f7 light);
   neutral borders -> --sm-hairline; the active Next card -> clean Swiss red --sm-accent. */
#dl-main#dl-main .dl-series-nav-v2 .snv2-all{ background:var(--sm-surface-2) !important; border-color:var(--sm-hairline) !important; }
#dl-main#dl-main .dl-series-nav-v2 .snv2-card{ border-color:var(--sm-hairline) !important; }
#dl-main#dl-main .dl-series-nav-v2 a.snv2-card.snv2-next{ border-color:var(--sm-accent) !important; }

/* A5 author-block text hierarchy (user 2026-05-31: bio ~20% smaller). The bio/role/label
   are <p> inside .article-prose, so the .article-prose p (18px) rule was overriding the
   inline A5 sizes. Scope to .dl-eeat-split (2-id + 2-class) to win and restore the hierarchy. */
#dl-main#dl-main .dl-eeat-split .dl-eeat-bio{ font-size:14px !important; line-height:1.6 !important; }
#dl-main#dl-main .dl-eeat-split .dl-eeat-role{ font-size:13px !important; }
#dl-main#dl-main .dl-eeat-split .dl-eeat-label{ font-size:17.5px !important; }   /* "About the author" larger, up to +25% (user 2026-05-31) */
#dl-main#dl-main .dl-eeat-split .dl-eeat-cta,
#dl-main#dl-main .dl-eeat-split .dl-eeat-cta a{ font-size:16px !important; }   /* CTA -10% (was 18px via .article-prose) */