/* =====================================================
   dc-theme.css — DentCast Unified Design System
   Design tokens + page-level overrides for all
   internal pages. Loaded on every page with dc-topbar.
   index.html has its own inline system (do not touch).
===================================================== */

/* =====================================================
   CONTENT-ONLY MODE (?view=content)
   When a page is loaded inside the desktop iframe viewer,
   dc-nav.js adds dc-content-only to body.
   This hides all navigation chrome so only the article
   content is visible.
===================================================== */
body.dc-content-only .dc-topbar,
body.dc-content-only #dcToolbarDrawer,
body.dc-content-only #dcRadarOverlay,
body.dc-content-only #dcGlobalBox,
body.dc-content-only footer,
body.dc-content-only .dc-site-footer,
body.dc-content-only #dc-theme-toggle,
body.dc-content-only .dc-bottom-nav,
body.dc-content-only #dcSearchOverlay,
body.dc-content-only .ep-back {
  display: none !important;
}
body.dc-content-only {
  padding-top: 0 !important;
  margin-top: 0 !important;
  min-height: auto !important;
}
body.dc-content-only .wrap {
  margin-top: 0;
  padding-top: 24px;
}
body.dc-content-only main.page,
body.dc-content-only main.article-page {
  padding-top: 24px;
}

/* =====================================================
   DESIGN TOKENS — LIGHT MODE
===================================================== */
:root {
  --pr: #022360;     --pr-rgb: 2,35,96;
  --ac: #0b5fff;     --ac-rgb: 11,95,255;

  --bg: #f0f2f5;
  --surface:  #ffffff;
  --surface2: #f4f6fb;
  --surface3: #eaecf5;
  --border:   rgba(2,35,96,.10);
  --border2:  rgba(2,35,96,.06);

  --txt:     #0a1a33;
  --txt2:    #4a5f85;
  --txt3:    #62779a;   /* was #8a9cbe (2.8:1 on white) → now 4.5:1, WCAG AA */
  --txt-inv: #ffffff;

  --card-bg:     #ffffff;
  --card-border: rgba(2,35,96,.09);
  --card-sh:  0 1px 3px rgba(2,35,96,.07), 0 4px 14px rgba(2,35,96,.04);
  --card-sh2: 0 4px 18px rgba(2,35,96,.13), 0 1px 4px rgba(2,35,96,.07);

  --chip-bg:  rgba(11,95,255,.08);
  --chip-bd:  rgba(11,95,255,.20);
  --chip-txt: #022360;

  --tr:  .17s cubic-bezier(.4,0,.2,1);
  --tr2: .26s cubic-bezier(.4,0,.2,1);

  --r-sm: 10px;  --r-md: 14px;  --r-lg: 18px;
  --r-xl: 22px;  --r-f:  999px;

  /* ── Alias older page variables to readable values ──
     Pages using var(--text) or var(--muted) from their
     own dark-bg :root get these accessible overrides.
     dc-theme.css loads after inline <style> → wins. */
  --text:  #0a1a33;   /* was #e7eaf1 on dark pages → now readable */
  --muted: #4a5f85;   /* was #9aa1b3 (3:1) → now ~6:1 on white  */
  --blue2: #022360;   /* darker accent alias used by some pages   */

  /* ── Semantic role tokens (link + heading) ──
     Added 2026-05-21 to consolidate drifted link blues
     and the dentai heading blue into named roles.
     Brand tokens (--ac, --pr) remain unchanged. */
  --link:       #0b5fff;        /* default link, light mode = brand --ac */
  --link-hover: #003bd1;        /* hover/active link, light mode        */
  --link-rgb:   11, 95, 255;    /* rgb triplet for rgba() use           */
  --heading:    #08327a;        /* deep heading accent, light mode      */
}

/* =====================================================
   DESIGN TOKENS — DARK MODE
===================================================== */
[data-theme="dark"] {
  --pr: #5b9cf6;     --pr-rgb: 91,156,246;
  --ac: #5b9cf6;     --ac-rgb: 91,156,246;

  --bg: #0e1621;
  --surface:  #17212b;
  --surface2: #1e2c3a;
  --surface3: #232e3c;
  --border:   rgba(255,255,255,.08);
  --border2:  rgba(255,255,255,.04);

  --txt:  #e8f0ff;
  --txt2: #8aaac8;
  --txt3: #6f8fb0;   /* was #4a6a88 (2.9:1 on surface) → now 4.8:1, WCAG AA */

  --card-bg:     #1e2c3a;
  --card-border: rgba(255,255,255,.07);
  --card-sh:  0 1px 3px rgba(0,0,0,.22), 0 4px 14px rgba(0,0,0,.14);
  --card-sh2: 0 4px 18px rgba(0,0,0,.28);

  /* Dark mode aliases */
  --text:  #e8f0ff;   /* readable on dark bg */
  --muted: #8aaac8;   /* soft muted on dark   */

  --chip-bg:  rgba(91,156,246,.12);
  --chip-bd:  rgba(91,156,246,.24);
  --chip-txt: #8ab4f8;

  /* ── Semantic role tokens (link + heading) — dark mode ── */
  --link:       #7ab4ff;        /* default link, dark mode             */
  --link-hover: #a8c8ff;        /* hover/active link, dark mode        */
  --link-rgb:   122, 180, 255;  /* rgb triplet for rgba() use          */
  --heading:    #8ab4f8;        /* heading accent, dark mode           */
}

/* =====================================================
   BODY — UNIFIED BACKGROUND & TEXT
   body:has(.dc-topbar) specificity = 0,1,1
   overrides any page-level body { } at 0,0,1
===================================================== */
body:has(.dc-topbar) {
  background: var(--bg);
  color: var(--txt);
  transition: background var(--tr2), color var(--tr2);
}

/* Override gradient backgrounds applied to html too */
html:has(body .dc-topbar) {
  background: var(--bg);
  transition: background var(--tr2);
}

/* =====================================================
   CONTENT BOXES — UNIFIED CARD APPEARANCE
   Targets the common content-wrapper classes used
   across all internal page types:
   notecast/metanotes → .text-box
   glossary           → .content-box
   insight            → .glass-box
   Style.css pages    → .card / .intro / .audio-box
===================================================== */
body:has(.dc-topbar) .text-box,
body:has(.dc-topbar) .content-box,
body:has(.dc-topbar) .glass-box,
body:has(.dc-topbar) .card,
body:has(.dc-topbar) .intro,
body:has(.dc-topbar) .audio-box,
body:has(.dc-topbar) .dc-article-box {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-sh);
  color: var(--txt);
  /* remove glass / blur effects — not aligned with design system */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-image: none;
  transition: background var(--tr2), border-color var(--tr2),
              box-shadow var(--tr2), color var(--tr2);
}

/* Glossary-specific term container */
body:has(.dc-topbar) .content-box {
  border-radius: var(--r-lg);
}

/* Insight glass boxes — keep full border from general rule above */
body:has(.dc-topbar) .glass-box {
  border-radius: var(--r-lg);
}

/* =====================================================
   HEADINGS — FULL LIGHT + DARK CONTRAST FIX
   Many dark-bg pages have:
     h1 { color: #ffffff }   → invisible on light bg
     h2 { color: #e7eaf1 }   → near-invisible on light bg
     h3 { color: var(--text)} → same, since --text=#e7eaf1
   Specificity 0,1,2 beats page's 0,0,1 → no !important needed.
===================================================== */

/* LIGHT MODE */
body:has(.dc-topbar) h1 { color: var(--pr); }
body:has(.dc-topbar) h2 { color: var(--txt); }
body:has(.dc-topbar) h3,
body:has(.dc-topbar) h4 { color: var(--txt2); }
body:has(.dc-topbar) h5,
body:has(.dc-topbar) h6 { color: var(--txt3); }

/* DARK MODE — same rules, variables resolve to dark-friendly values */
[data-theme="dark"] body:has(.dc-topbar) h1 { color: var(--pr); }
[data-theme="dark"] body:has(.dc-topbar) h2 { color: var(--txt); }
[data-theme="dark"] body:has(.dc-topbar) h3,
[data-theme="dark"] body:has(.dc-topbar) h4 { color: var(--txt2); }
[data-theme="dark"] body:has(.dc-topbar) h5,
[data-theme="dark"] body:has(.dc-topbar) h6 { color: var(--txt3); }

/* Exception: headings inside content boxes that intentionally
   use an accent color (e.g. glossary term h2 with accent border).
   Those use var(--accent) / var(--blue) which stay readable. */

/* =====================================================
   LINKS — CONTENT AREAS ONLY
   Exclude all navigation / topbar / radar elements
===================================================== */
body:has(.dc-topbar) article a,
body:has(.dc-topbar) main a,
body:has(.dc-topbar) .text-box a,
body:has(.dc-topbar) .content-box a,
body:has(.dc-topbar) .glass-box a,
body:has(.dc-topbar) .intro a,
body:has(.dc-topbar) .card a,
body:has(.dc-topbar) .wrap > ul a,
body:has(.dc-topbar) .wrap > ol a {
  color: var(--ac);
  transition: color var(--tr);
}

body:has(.dc-topbar) article a:hover,
body:has(.dc-topbar) main a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =====================================================
   MUTED / SECONDARY TEXT
===================================================== */
body:has(.dc-topbar) .muted,
body:has(.dc-topbar) [class*="muted"],
body:has(.dc-topbar) small {
  color: var(--txt3);
  transition: color var(--tr2);
}

/* =====================================================
   E-E-A-T MICRO-SIGNALS
   Compact authorship, dates, references, and disclaimers.
   These are intentionally quiet so content pages keep the
   DentCast knowledge-base feel rather than a magazine layout.
===================================================== */
body:has(.dc-topbar) .dc-trustline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 10px;
  margin: -6px auto 22px;
  color: var(--txt3);
  font-size: .78rem;
  line-height: 1.8;
  text-align: center;
}

/* Glossary term header layout:
   - the Persian caption (subtitle) hugs the H1,
   - a blank-line gap separates the caption from the byline,
   - the author/specialty sits on its own line, and the two dates share the
     line beneath it. */
body:has(.dc-topbar) .term-header .subtitle {
  margin-top: 3px;
}
body:has(.dc-topbar) .term-header .dc-trustline {
  margin-top: 22px;
}
body:has(.dc-topbar) .term-header .dc-trustline > span:first-child {
  flex-basis: 100%;
}

body:has(.dc-topbar) .dc-trustline a,
body:has(.dc-topbar) .dc-author-link {
  color: var(--txt2);
  font-weight: 600;
  text-decoration: none;
}

body:has(.dc-topbar) .dc-trustline a:hover,
body:has(.dc-topbar) .dc-author-link:hover {
  color: var(--ac);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body:has(.dc-topbar) .author {
  color: var(--txt3);
  font-size: .86rem;
  line-height: 1.8;
}

body:has(.dc-topbar) .dc-disclaimer {
  margin: 28px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border2);
  color: var(--txt3);
  font-size: .82rem;
  line-height: 1.9;
  text-align: center;
}

body:has(.dc-topbar) .dc-references {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--border2);
  color: var(--txt2);
  font-size: .86rem;
  line-height: 1.9;
}

body:has(.dc-topbar) .dc-references h2,
body:has(.dc-topbar) .dc-references h3,
body:has(.dc-topbar) .dc-references h4 {
  margin-top: 0;
  color: var(--txt2);
  font-size: .95rem;
  border: 0;
  padding: 0;
}

body:has(.dc-topbar) .dc-references ol,
body:has(.dc-topbar) .dc-references ul {
  margin: 10px 0 0;
  padding-right: 20px;
}

/* =====================================================
   FOOTER — UNIFIED ACROSS ALL INTERNAL PAGES
   Matches index.html footer style:
   simple, text-only look with top border
===================================================== */
body:has(.dc-topbar) footer,
body:has(.dc-topbar) .dc-site-footer {
  color: var(--txt2) !important;
  border-top: 1px solid var(--border2) !important;
  background: transparent !important;
  text-align: center !important;
  font-size: .82rem !important;
  line-height: 1.9 !important;
  padding: 22px 18px 90px !important;   /* 90px bottom = room above toggle btn */
  margin-top: 40px !important;
  transition: color var(--tr2), border-color var(--tr2);
  /* Reset any gradient/dark background some pages set */
  background-image: none !important;
}

/* Copyright line */
body:has(.dc-topbar) footer .footer-copy,
body:has(.dc-topbar) footer .footer-copy strong,
body:has(.dc-topbar) footer > div:last-child,
body:has(.dc-topbar) footer > p:last-child {
  color: var(--txt3) !important;
  font-size: .78rem !important;
}

body:has(.dc-topbar) footer .footer-copy strong {
  color: var(--ac) !important;
}

/* ── BACK / HOME BUTTON ── */
body:has(.dc-topbar) footer .btn-home,
body:has(.dc-topbar) .btn-home,
body:has(.dc-topbar) footer a[href="/"],
body:has(.dc-topbar) footer a[href="/index.html"],
body:has(.dc-topbar) footer a[href="index.html"],
body:has(.dc-topbar) footer a[href="../"],
body:has(.dc-topbar) footer a[href="../../"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 22px !important;
  border-radius: var(--r-f) !important;
  background: var(--pr) !important;
  color: #ffffff !important;
  border: none !important;
  font-size: .88rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(var(--pr-rgb),.28) !important;
  transition: all var(--tr) !important;
  margin: 6px 4px !important;
}

body:has(.dc-topbar) footer .btn-home:hover,
body:has(.dc-topbar) footer a[href="/"]:hover,
body:has(.dc-topbar) footer a[href="/index.html"]:hover,
body:has(.dc-topbar) footer a[href="index.html"]:hover {
  opacity: .88 !important;
  transform: translateY(-1px) !important;
}

/* ── ABOUT BUTTON ── */
body:has(.dc-topbar) footer .btn-about,
body:has(.dc-topbar) .btn-about,
body:has(.dc-topbar) footer a[href="/about.html"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 22px !important;
  border-radius: var(--r-f) !important;
  background: var(--surface2) !important;
  color: var(--txt2) !important;
  border: 1px solid var(--border) !important;
  font-size: .88rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  box-shadow: var(--card-sh) !important;
  transition: all var(--tr) !important;
  margin: 6px 4px !important;
}

body:has(.dc-topbar) footer .btn-about:hover,
body:has(.dc-topbar) footer a[href="/about.html"]:hover {
  background: var(--surface3) !important;
  color: var(--pr) !important;
}

/* ── GLOSSARY .btn back button ── */
body:has(.dc-topbar) footer .btn,
body:has(.dc-topbar) .term-footer .btn,
body:has(.dc-topbar) a.btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 22px !important;
  border-radius: var(--r-f) !important;
  background: var(--surface2) !important;
  color: var(--txt) !important;          /* --txt نه --txt2 برای کنتراست بیشتر */
  border: 1px solid var(--border) !important;
  font-size: .88rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  box-shadow: var(--card-sh) !important;
  transition: all var(--tr) !important;
  margin: 6px 4px !important;
}

body:has(.dc-topbar) footer .btn:hover,
body:has(.dc-topbar) .term-footer .btn:hover {
  background: var(--surface3) !important;
  color: var(--pr) !important;
}

/* ── GENERIC BACK LINK IN FOOTER (notecast/insight inline style links) ──
   Targets the first <a> in a <footer> that goes "back"
   (href doesn't start with # or mailto and isn't /about.html)
   We can't use :not() with compound selectors in older engines,
   so we style ALL footer a's then override the about one above.
── */
body:has(.dc-topbar) footer a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 22px !important;
  border-radius: var(--r-f) !important;
  background: var(--surface2) !important;
  color: var(--txt2) !important;
  border: 1px solid var(--border) !important;
  font-size: .88rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  box-shadow: var(--card-sh) !important;
  transition: all var(--tr) !important;
  margin: 6px 4px !important;
  /* Reset all inline-style colours */
  background-color: var(--surface2) !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body:has(.dc-topbar) footer a:hover {
  background: var(--surface3) !important;
  color: var(--pr) !important;
  transform: translateY(-1px) !important;
}

/* ── Footer copyright / about-link text ── */
body:has(.dc-topbar) .term-footer .about-link,
body:has(.dc-topbar) footer .about-link {
  font-size: .80rem !important;
  color: var(--txt3) !important;
  margin-top: 10px !important;
}

body:has(.dc-topbar) footer strong {
  color: var(--txt2) !important;
  font-weight: 700 !important;
}

/* =====================================================
   CONTRAST FIXES — LIGHT MODE
   Pages designed for dark bg (DentAI, DentCast+)
   had light/gold text. After dc-theme forces light bg
   these become unreadable. Fix per class below.
===================================================== */

/* ── DentCast+ : .text-box paragraph text ──────────
   Original: color:#cbd2e6  (light blue-gray, dark-bg only)
   Light fix: var(--txt)    (#0a1a33, high contrast)
   Dark keep: #cbd2e6       (original, fine on dark card)
─────────────────────────────────────────────────── */
body:has(.dc-topbar) .text-box p,
body:has(.dc-topbar) .text-box li,
body:has(.dc-topbar) .text-box span:not([class*="badge"]):not([class*="tag"]) {
  color: var(--txt) !important;
}

[data-theme="dark"] body:has(.dc-topbar) .text-box p,
[data-theme="dark"] body:has(.dc-topbar) .text-box li {
  color: #cbd2e6 !important;
}

/* ── DentAI : .caption (gold/yellow text on light bg) ──
   Original: color:rgba(255,199,44,0.85) = near-invisible on white
   Light fix: #7a5500 (dark amber) — contrast ratio ~7:1 on white
   Dark keep: original gold — fine on dark background
─────────────────────────────────────────────────── */
body:has(.dc-topbar) .caption {
  background: rgba(180,120,0,.08) !important;
  border-color: rgba(180,120,0,.22) !important;
}

body:has(.dc-topbar) .caption p,
body:has(.dc-topbar) .caption li,
body:has(.dc-topbar) .caption strong,
body:has(.dc-topbar) .caption b {
  color: #7a5500 !important;
}

body:has(.dc-topbar) .caption ul li::before,
body:has(.dc-topbar) .caption ol li::before {
  color: #9a6a00 !important;
}

[data-theme="dark"] body:has(.dc-topbar) .caption {
  background: rgba(255,185,40,.15) !important;
  border-color: rgba(255,220,100,.40) !important;
}

[data-theme="dark"] body:has(.dc-topbar) .caption p,
[data-theme="dark"] body:has(.dc-topbar) .caption li,
[data-theme="dark"] body:has(.dc-topbar) .caption strong,
[data-theme="dark"] body:has(.dc-topbar) .caption b {
  color: rgba(255,199,44,.90) !important;
}

[data-theme="dark"] body:has(.dc-topbar) .caption ul li::before,
[data-theme="dark"] body:has(.dc-topbar) .caption ol li::before {
  color: #caa200 !important;
}

/* =====================================================
   SECTION LIST ITEMS — Chairside / Notecast / etc.
===================================================== */
body:has(.dc-topbar) .wrap > ul li,
body:has(.dc-topbar) .wrap > ol li {
  color: var(--txt);
  transition: color var(--tr2);
}

/* =====================================================
   SELECTION
===================================================== */
::selection { background: rgba(11,95,255,.15); }

/* =====================================================
   DARK / LIGHT MODE FLOAT TOGGLE BUTTON
   Ported 1:1 from index.html so every page matches.
===================================================== */
#dc-theme-toggle{
  position:fixed; bottom:76px; left:14px; z-index:250;
  width:40px; height:40px; border-radius:var(--r-md);
  background:var(--card-bg); color:var(--txt2);
  border:1px solid var(--card-border);
  box-shadow:var(--card-sh);
  display:flex; align-items:center; justify-content:center;
  font-size:17px; cursor:pointer;
  transition:all var(--tr);
}
#dc-theme-toggle:active{ transform:scale(.86); background:var(--surface2); }

/* =====================================================
   JUMP / SCROLL BUTTON (used in Chairside, etc.)
===================================================== */
body:has(.dc-topbar) .dc-jump,
body:has(.dc-topbar) #dcJumpBtn {
  position: fixed;
  bottom: 126px;   /* above theme toggle (76px + 42px + 8px) */
  left: 14px;
  z-index: 249;
  width: 42px;
  height: 42px;
  border-radius: var(--r-f);
  background: var(--surface2);
  color: var(--txt3);
  border: 1px solid #022360;
  box-shadow: var(--card-sh);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--tr);
}

body:has(.dc-topbar) .dc-jump:active,
body:has(.dc-topbar) #dcJumpBtn:active {
  transform: scale(.88);
}

body:has(.dc-topbar) #dcJumpBtn svg {
  width: 20px;
  height: 20px;
  fill: var(--txt3);
}

/* =====================================================
   CONTENT PAGE WRAPPER — MAX-WIDTH STANDARDIZATION
   Max-width follows index.html spirit:
   articles ≤ 720px, listings ≤ 860px
===================================================== */
body:has(.dc-topbar) .wrap {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 18px;
  padding-right: 18px;
  background: transparent;
}

/* Narrower for single-article pages */
body:has(.dc-topbar) main.page,
body:has(.dc-topbar) main.article-page {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* =====================================================
   SMOOTH PAGE TRANSITIONS
===================================================== */
body:has(.dc-topbar),
body:has(.dc-topbar) *:not(img):not(video) {
  transition-timing-function: cubic-bezier(.4,0,.2,1);
}

/* =====================================================
   GLOBAL SEARCH BOX — DARK MODE
   (global-search.css uses hardcoded whites)
===================================================== */
[data-theme="dark"] #dcGlobalBox.dc-global-filter-box {
  background: var(--surface);
  border-color: var(--border);
  color: var(--txt);
}

[data-theme="dark"] #dcGlobalBox .dc-global-filter-title {
  color: var(--txt);
}

[data-theme="dark"] #dcGlobalBox .dc-search-input {
  background: var(--surface2);
  border-color: var(--border);
  color: var(--txt);
}

[data-theme="dark"] #dcGlobalBox .dc-filter-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--txt2);
}

[data-theme="dark"] #dcGlobalBox .dc-filter-btn.active {
  background: rgba(91,156,246,.15);
  border-color: rgba(91,156,246,.35);
  color: var(--ac);
}

[data-theme="dark"] #dcGlobalBox .dc-results-box,
[data-theme="dark"] #dcGlobalBox .dc-result-item {
  background: var(--surface2);
  border-color: var(--border);
  color: var(--txt);
}

[data-theme="dark"] #dcGlobalBox .dc-result-title {
  color: var(--ac);
}

[data-theme="dark"] #dcGlobalBox .dc-result-meta {
  color: var(--txt3);
}

/* =====================================================
   LEGACY NOTECAST PAGES — theme-responsive overrides
   notecast/episode-* pages have no .dc-topbar so the
   existing body:has(.dc-topbar) rules above don't apply.
   These mirror rules flip body bg/text and the embedded
   .glass-box / .audio-box / .back panels with the theme.
   Added 2026-05-21 — colors only, no structural change.
===================================================== */
body:not(:has(.dc-topbar)) {
  background: var(--bg);
  color: var(--text);
  transition: background var(--tr2), color var(--tr2);
}

body:not(:has(.dc-topbar)) .glass-box,
body:not(:has(.dc-topbar)) .text-box {
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-sh);
}

body:not(:has(.dc-topbar)) .glass-box h1,
body:not(:has(.dc-topbar)) .glass-box h2,
body:not(:has(.dc-topbar)) .glass-box h3,
body:not(:has(.dc-topbar)) .glass-box h4,
body:not(:has(.dc-topbar)) .glass-box p,
body:not(:has(.dc-topbar)) .glass-box li,
body:not(:has(.dc-topbar)) .text-box p,
body:not(:has(.dc-topbar)) .text-box li {
  color: var(--text);
}

body:not(:has(.dc-topbar)) .audio-box {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--card-sh);
}

body:not(:has(.dc-topbar)) .back,
body:not(:has(.dc-topbar)) .back-link {
  background: var(--chip-bg);
  color: var(--link);
  border: 1px solid var(--chip-bd);
}
body:not(:has(.dc-topbar)) .back:hover,
body:not(:has(.dc-topbar)) .back-link:hover {
  background: var(--chip-bd);
}

body:not(:has(.dc-topbar)) footer {
  color: var(--muted);
}

/* DentAI .back button — same theme-aware treatment */
body:has(.dc-topbar) .back {
  background: var(--chip-bg);
  color: var(--link);
  border: 1px solid var(--chip-bd);
}
body:has(.dc-topbar) .back:hover {
  background: var(--chip-bd);
}

/* DentAI 11-16: embedded styles use background:#fff !important on .text-box.
   Override only in dark mode so the box flips with the theme. */
[data-theme="dark"] body:has(.dc-topbar) .text-box {
  background: var(--card-bg) !important;
}

/* Site-wide "محتوای مرتبط" section. Globalized counterpart of the per-episode
   ep-section / ep-section-label / ep-related-link rules (inlined in each
   /episodes/*.html), so typed-brain pages and glossary pages can render the
   same blue-accent section + outline capsule without each page redefining the
   rules. Visual values mirror ep-* verbatim. */
.dc-related-section{padding:22px 28px 0;}
.dc-related-section:last-child{padding-bottom:28px;}
.dc-related-label{font-size:1rem;font-weight:700;color:var(--ac);border-right:4px solid var(--ac);padding-right:12px;margin-bottom:14px;}
.dc-related-capsules{display:flex;flex-wrap:wrap;gap:8px;}
.dc-related-capsule{display:inline-flex;align-items:center;gap:6px;font-size:.87rem;font-weight:600;color:var(--ac);text-decoration:none;padding:8px 16px;border:1px solid var(--ac);border-radius:10px;transition:background .15s,color .15s;}
.dc-related-capsule:hover{background:var(--ac);color:#fff;}
@media(max-width:480px){.dc-related-section{padding-right:18px;padding-left:18px;}}

/* =====================================================
   RESPONSIVE IMAGE GUARD
   Content images now carry intrinsic width/height attrs
   (CLS fix, injected by .github/scripts/inject_img_attrs.py).
   This zero-specificity rule keeps those attrs from ever
   fixing the height of a responsive image: any page rule —
   even a bare `img { }` — still wins over :where() at 0,0,1,
   so explicitly sized images (logos, avatars) are unaffected.
===================================================== */
:where(main, article, figure, .wrap, .text-box, .content-box, .glass-box) img {
  max-width: 100%;
  height: auto;
}

/* =====================================================
   ACCESSIBILITY — KEYBOARD FOCUS + REDUCED MOTION
   Added 2026-06-10 (phase 2 a11y).
   - :focus-visible fires only on keyboard/AT focus, so
     touch and mouse users never see the ring.
   - [tabindex="-1"] targets receive programmatic focus
     (skip link); they need no ring of their own.
   - The reduced-motion block is a global kill-switch for
     every animation/transition on pages that load this
     file (520+), honoring vestibular-disorder settings.
===================================================== */
:focus-visible {
  outline: 3px solid var(--ac);
  outline-offset: 2px;
}

[tabindex="-1"]:focus {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}