/* ============================================================
   Podcast pages — unified theme layer (light + dark)
   Loaded on /podcast/ and all /podcast/<guest>/ pages.

   Design goals:
   - Unify the standalone summary pages with the site's editorial
     "Anthropic sand" look (Playfair Display + Plus Jakarta Sans).
   - Add a real light/dark mode that follows the rest of the site.
   - Stay responsive on small screens.

   Safety model: every dark rule is scoped under html[data-theme="dark"],
   so light mode is never altered by anything in this file beyond the
   small, intentional unification overrides. The bulk of the per-component
   dark overrides are auto-generated and appended below this header.
   ============================================================ */

/* Editorial type, matching the site home page */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --pf-display: 'Playfair Display', "Source Han Serif SC", "Noto Serif CJK SC", "Songti SC", Georgia, serif;
  --pf-body: 'Plus Jakarta Sans', system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  --pf-mono: "JetBrains Mono", Consolas, monospace;
}

/* ---- Light token unification (nudge the page palette toward the home) ---- */
html[data-theme="light"] {
  --ink: #191613;
  --muted: #6e675d;
  --paper: #fbf9f6;
  --panel: #ffffff;
  --line: #e8e2d5;
  --clay: #b2573f;
  --moss: #326b55;
  --shadow: 0 1px 3px rgba(25,22,19,.05), 0 14px 38px rgba(82,75,65,.08);
}

/* ---- Dark theme tokens (mirrors the site's obsidian-sand dark palette) ---- */
html[data-theme="dark"] {
  --ink: #f3ece0;
  --muted: #a89e90;
  --paper: #12100e;
  --panel: #1b1713;
  --line: #322c25;
  --clay: #e0a184;
  --moss: #8fad88;
  --blue: #84b6d6;
  --gold: #e4c07d;
  --rose: #db93ad;
  --shadow: 0 1px 4px rgba(0,0,0,.35), 0 18px 46px rgba(0,0,0,.5);
}

/* ---- Typography unification (applies to both themes) ---- */
html body { font-family: var(--pf-body); }
html h1, html h2, html h3, html h4,
html .nav-brand,
html .detail-title-row h3,
html .takeaway aside b,
html .mind-core { font-family: var(--pf-display); }
html .site-podcast-nav .nav-brand { font-family: var(--pf-display); letter-spacing: .04em; font-weight: 700; }

/* ---- Page background per theme (refined warm mesh / obsidian mesh) ---- */
html[data-theme="light"] body {
  background:
    radial-gradient(circle at top left, rgba(178,87,63,.10), transparent 34rem),
    radial-gradient(circle at 80% 8%, rgba(50,107,85,.07), transparent 32rem),
    linear-gradient(135deg, #fbf9f6 0%, #f4efe5 52%, #eef3ee 100%);
  color: var(--ink);
}
html[data-theme="dark"] body {
  background:
    radial-gradient(circle at top left, rgba(224,161,132,.10), transparent 34rem),
    radial-gradient(circle at 80% 8%, rgba(143,173,136,.06), transparent 32rem),
    linear-gradient(160deg, #15120e 0%, #100e0b 55%, #0f1311 100%);
  color: var(--ink);
}

/* Film grain reads as subtle light specks on the dark canvas */
html[data-theme="dark"] .grain {
  opacity: .05;
  mix-blend-mode: screen;
  background-image:
    linear-gradient(90deg, #fff 1px, transparent 1px),
    linear-gradient(#fff 1px, transparent 1px);
}

/* Two components use var(--ink) as a *background* (dark chip / primary button).
   Since --ink flips to cream in dark mode, repaint them with the clay accent. */
html[data-theme="dark"] .idea-tag,
html[data-theme="dark"] .tool-btn.primary {
  background: var(--clay);
  border-color: var(--clay);
  color: #1a1410;
}

/* Generic safety: media + code never overflow on small screens */
html img, html svg, html video, html canvas { max-width: 100%; height: auto; }
html pre { overflow-x: auto; }
html body { transition: background-color .3s ease, color .3s ease; }

/* ============================================================
   Injected UI: theme toggle, reading progress, back-to-top, TOC
   ============================================================ */
.pod-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 60;
  background: linear-gradient(90deg, var(--clay), var(--gold));
  transition: width .12s linear; pointer-events: none;
}

.pod-theme-toggle {
  appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  font: inherit; font-size: .82rem; font-weight: 600; line-height: 1;
  padding: .42rem .72rem; border-radius: 999px; transition: all .15s ease; white-space: nowrap;
}
.pod-theme-toggle:hover { border-color: var(--clay); color: var(--clay); }
.pod-theme-toggle .pod-ico { font-size: .95rem; }

.pod-totop {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 60;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--panel); color: var(--clay);
  box-shadow: var(--shadow); border-radius: 50%; cursor: pointer; font-size: 1.15rem;
  opacity: 0; transform: translateY(10px); pointer-events: none; transition: all .2s ease;
}
.pod-totop.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.pod-totop:hover { background: var(--clay); border-color: var(--clay); color: #fff; }

.pod-toc {
  position: fixed; right: 1.2rem; top: 50%; transform: translateY(-50%); z-index: 55;
  width: 224px; max-height: 72vh; overflow: auto;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: 12px; padding: .85rem .7rem;
  box-shadow: var(--shadow); font-family: var(--pf-body); font-size: .82rem;
}
.pod-toc h4 {
  margin: 0 0 .55rem; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--clay); font-family: var(--pf-body); font-weight: 700;
}
.pod-toc a {
  display: block; padding: .3rem .5rem; margin-bottom: .1rem; border-radius: 6px;
  color: var(--muted); text-decoration: none; line-height: 1.35;
  border-left: 2px solid transparent; transition: all .15s ease;
}
.pod-toc a:hover { color: var(--ink); background: color-mix(in srgb, var(--clay) 12%, transparent); }
.pod-toc a.is-current { color: var(--clay); border-left-color: var(--clay); font-weight: 700; }

/* TOC would overlap content on narrower viewports — desktop only */
@media (max-width: 1280px) { .pod-toc { display: none; } }

/* ---- Extra responsive polish on top of each page's own media queries ---- */
@media (max-width: 980px) {
  .site-podcast-nav { padding: .7rem 1rem; }
  .site-podcast-nav .nav-links { gap: .55rem .9rem; }
  .pod-theme-toggle { padding: .35rem .6rem; font-size: .78rem; }
}
@media (max-width: 640px) {
  .site-podcast-nav { gap: .4rem .8rem; }
  .site-podcast-nav .nav-links { font-size: .82rem; }
  .pod-totop { right: .8rem; bottom: .8rem; width: 40px; height: 40px; }
}

/* ============================================================
   AUTO-GENERATED per-component dark overrides appended below.
   ============================================================ */

/* 85 auto-generated dark-mode component overrides (property-aware, dark-only) */
html[data-theme="dark"] .site-podcast-nav { background:rgba(38,32,26,.82); }
html[data-theme="dark"] .subtitle { color:#c6bba8; }
html[data-theme="dark"] .player-panel { background:rgba(38,32,26,.78); }
html[data-theme="dark"] .chapter-card,
html[data-theme="dark"] .idea-card,
html[data-theme="dark"] .term { background:rgba(38,32,26,.88); }
html[data-theme="dark"] .chapter-card p,
html[data-theme="dark"] .idea-card p,
html[data-theme="dark"] .term p { color:#c6bba8; }
html[data-theme="dark"] .timestamp { background:#2a2113; color:#e6b98c; }
html[data-theme="dark"] .timestamp:hover,
html[data-theme="dark"] .timestamp:focus-visible { background:#3a2c12; }
html[data-theme="dark"] .map-rail,
html[data-theme="dark"] .map-detail,
html[data-theme="dark"] .toolbox { background:rgba(38,32,26,.9); }
html[data-theme="dark"] .map-rail-head { background:#1f1a13; }
html[data-theme="dark"] .map-filter-tags span,
html[data-theme="dark"] .node-tags span,
html[data-theme="dark"] .level-pill { border:1px solid #333a45; background:#181f2a; color:#8fb6dc; }
html[data-theme="dark"] .map-node:hover,
html[data-theme="dark"] .map-node.is-active { background:#172230; }
html[data-theme="dark"] .map-node-time { color:#7db2ec; }
html[data-theme="dark"] .detail-summary { color:#a9b3c0; }
html[data-theme="dark"] .detail-stats span { background:#19212c; color:#a3b1c1; }
html[data-theme="dark"] .explain-card { background:#191f29; }
html[data-theme="dark"] .explain-card.warm { background:#241d10; border-color:#3a2d12; }
html[data-theme="dark"] .explain-card p,
html[data-theme="dark"] .detail-block p { color:#a9b3c0; }
html[data-theme="dark"] .detail-block { background:rgba(38,32,26,.55); }
html[data-theme="dark"] .timeline-clues li { border-bottom:1px solid #34302a; }
html[data-theme="dark"] .learning-questions { color:#a3b1c1; }
html[data-theme="dark"] .toolbox-tab { border:1px solid #333a45; background:#1d1915; color:#9fb2c6; }
html[data-theme="dark"] .tool-card { background:#1d1915; }
html[data-theme="dark"] .tool-card p { color:#a3b1c1; }
html[data-theme="dark"] .recall-card { background:rgba(38,32,26,.66); }
html[data-theme="dark"] .recall-card ol,
html[data-theme="dark"] .recall-card ul { color:#a9b3c0; }
html[data-theme="dark"] .mind-map { border:1px solid #3a3426; background:linear-gradient(135deg, #241d10, #181f2a); }
html[data-theme="dark"] .mind-branch { background:rgba(38,32,26,.75); color:#9fb2c6; }
html[data-theme="dark"] .best-list li { background:rgba(38,32,26,.58); }
html[data-theme="dark"] .caveats { background:#1f1a12; }
html[data-theme="dark"] .transcript-block { background:rgba(38,32,26,0.65); }
html[data-theme="dark"] .transcript-block summary:hover { background:#191f29; }
html[data-theme="dark"] .transcript-block p { color:#c6bba8; border-top:1px dashed #333a45; }
html[data-theme="dark"] .tool-btn { background:#1a212c; color:#c6bba8; border:1px solid #34302a; }
html[data-theme="dark"] .tool-btn:hover { background:#2e2a23; }
html[data-theme="dark"] .timestamp.play-btn { background:#1a212c; color:#aab4c1; }
html[data-theme="dark"] .timestamp.play-btn:hover { background:#1a212c; }
html[data-theme="dark"] h1 { color:#ece5d8; }
html[data-theme="dark"] .player-panel { background:rgba(38,32,26,0.85); }
html[data-theme="dark"] .chapter-card,
html[data-theme="dark"] .idea-card,
html[data-theme="dark"] .term { background:rgba(38,32,26,0.9); }
html[data-theme="dark"] .timestamp { background:#1a212c; color:#aab4c1; }
html[data-theme="dark"] .timestamp:hover,
html[data-theme="dark"] .timestamp:focus-visible { background:#1a212c; }
html[data-theme="dark"] .map-rail,
html[data-theme="dark"] .map-detail,
html[data-theme="dark"] .toolbox { background:rgba(38,32,26,0.9); }
html[data-theme="dark"] .map-rail-head { background:#191f29; }
html[data-theme="dark"] .map-filter-tags span,
html[data-theme="dark"] .node-tags span,
html[data-theme="dark"] .level-pill { border:1px solid #2e2a23; background:#1a212c; color:#c6bba8; }
html[data-theme="dark"] .map-node:hover,
html[data-theme="dark"] .map-node.is-active { background:#1a212c; }
html[data-theme="dark"] .detail-summary { color:#c6bba8; }
html[data-theme="dark"] .detail-stats span { background:#1a212c; color:#a9b3c0; }
html[data-theme="dark"] .explain-card.warm { background:#221d11; border-color:#3a2d10; }
html[data-theme="dark"] .detail-block { background:rgba(38,32,26,0.6); }
html[data-theme="dark"] .timeline-clues li { border-bottom:1px solid #333a45; }
html[data-theme="dark"] .learning-questions { color:#c6bba8; }
html[data-theme="dark"] .toolbox-tab { border:1px solid #34302a; background:#1d1915; color:#c6bba8; }
html[data-theme="dark"] .toolbox-tab:hover { background:#191f29; }
html[data-theme="dark"] .tool-card p { color:#a9b3c0; }
html[data-theme="dark"] .recall-card { background:rgba(38,32,26,0.7); }
html[data-theme="dark"] .recall-card ol,
html[data-theme="dark"] .recall-card ul { color:#c6bba8; }
html[data-theme="dark"] .mind-map { border:1px solid #2e2a23; background:linear-gradient(135deg, #221d11, #16242a); }
html[data-theme="dark"] .mind-branch { background:rgba(38,32,26,0.85); color:#aab4c1; }
html[data-theme="dark"] .best-list li { background:rgba(38,32,26,0.6); }
html[data-theme="dark"] .caveats { background:#2a2210; border:1px solid #3a2d10; color:#c6bba8; }
html[data-theme="dark"] .caveats h3 { color:#c6bba8; }
html[data-theme="dark"] .timestamp { background:#1d1915; color:#e3a988; }
html[data-theme="dark"] .timestamp:hover,
html[data-theme="dark"] .timestamp:focus-visible { background:#1d1915; }
html[data-theme="dark"] .mind-map { border:1px solid #2e2a23; background:linear-gradient(135deg, #221d11, #152019); }
html[data-theme="dark"] .mind-branch { background:rgba(38,32,26,0.85); color:#c6bba8; }
html[data-theme="dark"] .moment-card { background:#241c12; }
html[data-theme="dark"] .detail-point { background:rgba(38,32,26,.78); }
html[data-theme="dark"] .detail-point p { color:#a9b3c0; }
html[data-theme="dark"] .idea-card { background:rgba(38,32,26,0.9); }
html[data-theme="dark"] .final-summary li { border:1px solid #333a45; background:rgba(38,32,26,.06); }
html[data-theme="dark"] .final-summary .timestamp { background:#2a2210; border-color:#34302a; color:#ece5d8; }
html[data-theme="dark"] .explain-card,
html[data-theme="dark"] .detail-block { background:#191f29; }
html[data-theme="dark"] .level-list span { color:#a9b3c0; }
html[data-theme="dark"] .timestamp.play-btn:hover,
html[data-theme="dark"] .timestamp.play-btn:focus-visible { background:#1a212c; }
html[data-theme="dark"] .idea-card,
html[data-theme="dark"] .term { background:rgba(38,32,26,.88); }
html[data-theme="dark"] .idea-card p,
html[data-theme="dark"] .term p { color:#c6bba8; }
html[data-theme="dark"] .recall-card,
html[data-theme="dark"] .explain-card,
html[data-theme="dark"] .detail-block { background:rgba(38,32,26,.66); }
html[data-theme="dark"] .recall-card ol,
html[data-theme="dark"] .recall-card ul,
html[data-theme="dark"] .learning-questions { color:#a9b3c0; }
html[data-theme="dark"] .player-panel { background:rgba(38,32,26,.8); }
html[data-theme="dark"] .map-rail,
html[data-theme="dark"] .map-detail,
html[data-theme="dark"] .toolbox { background:rgba(38,32,26,.92); }
html[data-theme="dark"] .explain-card,
html[data-theme="dark"] .detail-block,
html[data-theme="dark"] .recall-card { background:#191f29; }
html[data-theme="dark"] .idea-card,
html[data-theme="dark"] .term { background:rgba(38,32,26,.9); }
html[data-theme="dark"] .transcript-block { background:rgba(38,32,26,.65); }
html[data-theme="dark"] .player-panel,
html[data-theme="dark"] .map-rail,
html[data-theme="dark"] .map-detail,
html[data-theme="dark"] .toolbox,
html[data-theme="dark"] .chapter-card,
html[data-theme="dark"] .idea-card,
html[data-theme="dark"] .term { background:rgba(38,32,26,.88); }
html[data-theme="dark"] .mind-map { border:1px solid #3a3426; background:linear-gradient(135deg,#241d10,#181f2a); }