/* CastingBridges v0 — brand CSS.
   Brand frame mirrors 2016–17 Cybersecurity Podcasts Today (Listen | Learn | Connect),
   with 2026 typographic restraint. Inspired by Podipedia's serif/slab pairing.
   Color palette intentionally professional/civic (this is a credentialing-adjacent product). */

:root {
  --cb-ink: #1a2233;
  --cb-paper: #fbfaf5;
  --cb-paper-2: #f3f1ea;
  --cb-rule: #c9c4b3;
  --cb-accent: #8c5a1a;  /* warm slab umber — bridge motif */
  --cb-accent-2: #2b4a6f; /* civic blue — credentialing tone */
  --cb-muted: #5f6675;
  --cb-warn-bg: #fff5dc;
  --cb-warn-ink: #5a3e0a;
  --serif: Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --max: 920px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.site {
  font-family: var(--serif);
  color: var(--cb-ink);
  background: var(--cb-paper);
  line-height: 1.55;
  font-size: 17px;
}
a { color: var(--cb-accent-2); }
a:hover { color: var(--cb-accent); }

.prelaunch-banner {
  background: var(--cb-warn-bg);
  color: var(--cb-warn-ink);
  padding: 0.8rem 1.2rem;
  font-family: var(--sans);
  font-size: 0.92rem;
  border-bottom: 1px solid var(--cb-rule);
  text-align: center;
}
.prelaunch-banner strong { letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.82rem; }

.site-header {
  border-bottom: 1px solid var(--cb-rule);
  background: var(--cb-paper);
}
.site-header__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.2rem 1.5rem;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between;
}
.site-header__brand {
  text-decoration: none;
  color: var(--cb-ink);
  display: flex;
  align-items: baseline;
  gap: 1rem;
}
.wordmark {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
}
.brand-tagline {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--cb-accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-left: 1px solid var(--cb-rule);
  padding-left: 1rem;
}
@media (max-width: 768px) {
  .brand-tagline { display: none; }
}
.site-nav {
  font-family: var(--sans);
  font-size: 0.92rem;
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.site-nav a { text-decoration: none; }

.site-main {
  max-width: var(--max);
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

.site-footer {
  border-top: 1px solid var(--cb-rule);
  background: var(--cb-paper-2);
  margin-top: 4rem;
}
.site-footer__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 2rem 1.5rem;
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--cb-muted);
}
.brand-stack {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--cb-ink);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 0.4rem;
}
.footer-tagline {
  font-style: italic;
  color: var(--cb-accent);
  margin: 0 0 0.8rem;
}
.footer-parent { margin: 0 0 0.4rem; }
.footer-origin { margin: 0.4rem 0 0; font-size: 0.82rem; }

/* Landing page */
.landing-hero {
  border-bottom: 1px solid var(--cb-rule);
  padding-bottom: 2.5rem;
  margin-bottom: 2.5rem;
}
.landing-hero h1 {
  font-family: var(--serif);
  font-size: 2.4rem;
  line-height: 1.15;
  margin: 0 0 0.6rem;
}
.landing-hero .lede {
  font-size: 1.15rem;
  color: var(--cb-muted);
  max-width: 720px;
  margin: 0 0 1.5rem;
}
.landing-hero .tagline {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--cb-accent);
  font-size: 0.95rem;
  margin: 0 0 1rem;
}
.landing-section { margin-bottom: 3rem; }
.landing-section h2 {
  font-family: var(--serif);
  font-size: 1.5rem;
  border-bottom: 1px solid var(--cb-rule);
  padding-bottom: 0.4rem;
  margin: 0 0 1rem;
}
.principle-card {
  background: var(--cb-paper-2);
  padding: 1.3rem 1.5rem;
  border-left: 4px solid var(--cb-accent);
  margin: 1rem 0;
}
.principle-card h3 {
  margin: 0 0 0.4rem;
  font-family: var(--sans);
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cb-accent);
}
.principle-card p { margin: 0; }

/* Verticals grid */
.vertical-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
  margin: 1.5rem 0;
}
.vertical-card {
  border: 1px solid var(--cb-rule);
  padding: 1.2rem;
  background: var(--cb-paper);
  text-decoration: none;
  color: var(--cb-ink);
  display: block;
}
.vertical-card.active {
  border-color: var(--cb-accent);
  border-width: 2px;
  background: var(--cb-paper-2);
}
.vertical-card h3 {
  margin: 0 0 0.3rem;
  font-family: var(--serif);
  font-size: 1.2rem;
}
.vertical-card .status {
  font-family: var(--sans);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cb-accent);
  margin: 0 0 0.6rem;
}
.vertical-card.placeholder .status { color: var(--cb-muted); }
.vertical-card .blurb {
  font-size: 0.92rem;
  color: var(--cb-muted);
  margin: 0;
}

/* Episode list (vertical landing) */
.episode-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}
.episode-list li {
  border-bottom: 1px solid var(--cb-rule);
  padding: 1rem 0;
}
.episode-list a {
  text-decoration: none;
  color: var(--cb-ink);
  display: block;
}
.episode-list .show {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--cb-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.episode-list .episode {
  font-family: var(--serif);
  font-size: 1.15rem;
  margin: 0.2rem 0 0.3rem;
}
.episode-list .meta {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--cb-muted);
}

/* Executive Review (episode template) */
.executive-review {
  background: var(--cb-paper);
}
.er-breadcrumb {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--cb-muted);
  margin: 0 0 1rem;
}
.er-show {
  font-family: var(--sans);
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cb-accent);
  margin: 0 0 0.2rem;
}
.er-host {
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--cb-muted);
  margin: 0 0 1rem;
}
.er-episode {
  font-family: var(--serif);
  font-size: 1.9rem;
  line-height: 1.2;
  margin: 0 0 1.5rem;
}
.er-meta {
  display: flex;
  gap: 2rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  margin: 0 0 2rem;
  padding: 1rem 0;
  border-top: 1px solid var(--cb-rule);
  border-bottom: 1px solid var(--cb-rule);
  flex-wrap: wrap;
}
.er-meta div { display: flex; flex-direction: column; }
.er-meta dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cb-muted);
  margin: 0;
}
.er-meta dd { margin: 0.2rem 0 0; font-weight: 600; }

.er-summary, .er-learning, .er-prov { margin: 2rem 0; }
.er-summary h3, .er-learning h3, .er-prov h3 {
  font-family: var(--serif);
  font-size: 1.3rem;
  border-bottom: 1px solid var(--cb-rule);
  padding-bottom: 0.3rem;
}
.er-learning ol { padding-left: 1.5rem; }
.er-learning li { margin: 0.5rem 0; }
.er-learning-note {
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--cb-muted);
  background: var(--cb-paper-2);
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--cb-rule);
  margin-top: 1rem;
}
.er-prov p { margin: 0.6rem 0; }
.er-footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cb-rule);
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--cb-muted);
}
.er-footer-note { font-size: 0.82rem; font-style: italic; }

/* ============================================================
   Homepage — Slide 5 (Mar 2017) Conceptual Rendition rebuild,
   with a deliberate wink to craigslist as structural inspiration.
   Two-column layout: ~24% utility sidebar / ~76% category grid.
   Civic-press cream/serif brand DNA preserved; teal/utility
   link density introduced as the craigslist tell.
   ============================================================ */

body.site.home {
  background: var(--cb-paper);
  font-size: 15px;
  line-height: 1.45;
}
body.site.home .prelaunch-banner {
  text-align: center;
  font-size: 0.85rem;
}

.cl-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.4rem 1.4rem 3rem;
  display: grid;
  grid-template-columns: minmax(220px, 260px) 1fr;
  gap: 2.2rem;
}
@media (max-width: 760px) {
  .cl-page { grid-template-columns: 1fr; gap: 1.4rem; padding: 1rem; }
}

/* ---------- Left sidebar (craigslist utility column) ---------- */

.cl-sidebar {
  font-family: var(--sans);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--cb-ink);
}

.cl-brand { margin-bottom: 1.2rem; }
/* Brand lockup in homepage sidebar: bridge mark above wordmark, stacked + centered
   over the wordmark. This faithfully reproduces the 2017 title-slide composition
   (mark optically centered above "Casting Bridges") and sidesteps the optical-alignment
   trap that flush-left creates when the mark's leftmost element is a thin curved cable
   and the wordmark's leftmost element is a thick straight letter stem. */
.cl-brand-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-decoration: none;
  color: var(--cb-ink);
}
/* Bridge mark from the March 2017 pitch-deck title slide — same provenance posture
   as Podipedia using its 2017 GTEC-deck mark. Black silhouette on cream paper. */
.cl-bridge-mark {
  display: block;
  width: 110px;
  height: auto;
}
.cl-brand-word {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.01em;
}
.cl-brand-stack {
  font-family: var(--serif);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cb-accent);
  margin: 0.5rem 0 0;
}

.cl-nav { margin-bottom: 1.2rem; }
.cl-nav-line {
  margin: 0.35rem 0;
  font-size: 0.85rem;
  color: var(--cb-muted);
}
.cl-nav a, .cl-policy a, .cl-parent a {
  color: var(--cb-accent-2);
  text-decoration: none;
}
.cl-nav a:hover, .cl-policy a:hover, .cl-parent a:hover {
  text-decoration: underline;
}

.cl-search {
  background: var(--cb-paper-2);
  border: 1px solid var(--cb-rule);
  padding: 0.7rem 0.8rem;
  margin-bottom: 1.2rem;
}
.cl-search-label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cb-muted);
  margin-bottom: 0.4rem;
}
.cl-search input[type="search"] {
  width: 100%;
  padding: 0.4rem 0.5rem;
  font-family: var(--sans);
  font-size: 0.88rem;
  border: 1px solid var(--cb-rule);
  background: #fff;
  color: var(--cb-ink);
}
.cl-search input[type="search"]:disabled { color: var(--cb-muted); background: #fafaf6; }
.cl-search-note {
  font-size: 0.72rem;
  font-style: italic;
  color: var(--cb-muted);
  margin: 0.4rem 0 0;
}

.cl-events {
  background: #f5f8fa;
  border: 1px solid #d8e3ea;
  padding: 0.8rem 0.9rem;
  margin-bottom: 1.2rem;
}
.cl-events-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.95rem;
  margin: 0 0 0.5rem;
  color: var(--cb-accent-2);
  letter-spacing: 0.02em;
}
.cl-events-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.82rem;
  color: var(--cb-ink);
}
.cl-events-list li { padding: 0.25rem 0; border-bottom: 1px dotted #d8e3ea; }
.cl-events-list li:last-child { border-bottom: none; }
.cl-events-date {
  display: inline-block;
  font-weight: 700;
  color: var(--cb-accent);
  margin-right: 0.4rem;
  min-width: 2.8rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.cl-policy {
  font-size: 0.78rem;
  color: var(--cb-muted);
  line-height: 1.55;
  margin-bottom: 1rem;
}
.cl-policy p { margin: 0; }
.cl-policy p + p { margin-top: 0.15rem; }

.cl-parent {
  font-size: 0.78rem;
  color: var(--cb-muted);
  margin: 1rem 0 0;
}
.cl-parent-note { display: block; font-style: italic; font-size: 0.72rem; margin-top: 0.15rem; }

/* ---------- Right content column ---------- */

.cl-main { min-width: 0; }

.cl-hero {
  border: 1px solid var(--cb-rule);
  background:
    linear-gradient(135deg, rgba(43,74,111,0.04) 0%, rgba(140,90,26,0.05) 100%),
    var(--cb-paper);
  padding: 1.8rem 1.6rem 1.6rem;
  margin-bottom: 1.6rem;
  position: relative;
}
.cl-hero::before {
  /* Subtle bridge-silhouette accent at top edge */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--cb-accent-2) 0%, var(--cb-accent) 50%, var(--cb-accent-2) 100%);
}
.cl-hero-eyebrow {
  font-family: var(--serif);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cb-accent-2);
  margin: 0 0 0.6rem;
}
.cl-hero-tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.55rem;
  line-height: 1.25;
  color: var(--cb-ink);
  margin: 0 0 0.8rem;
}
.cl-hero-tagline em { font-style: italic; }
.cl-hero-sub {
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--cb-muted);
  margin: 0;
  max-width: 56ch;
  line-height: 1.55;
}

/* ---------- Category grid (3-column dense link layout) ---------- */

.cl-categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: min-content;
  gap: 1.2rem 1.6rem;
  margin-bottom: 2rem;
  align-items: start;
}
@media (max-width: 900px) { .cl-categories { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cl-categories { grid-template-columns: 1fr; } }

.cl-cat { min-width: 0; align-self: start; }

/* Rounded-pill category headers (Slide 5 "designed UI" element) */
.cl-pill {
  display: inline-block;
  background: linear-gradient(180deg, #f1ede2 0%, #d8d2bf 100%);
  border: 1px solid var(--cb-rule);
  border-radius: 999px;
  padding: 0.32rem 1rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--cb-ink);
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 1px 1px rgba(0,0,0,0.04);
}
.cl-cat.active .cl-pill {
  background: linear-gradient(180deg, #f5e9d2 0%, #d8b97a 100%);
  border-color: var(--cb-accent);
  color: var(--cb-warn-ink);
}
.cl-pill:hover { filter: brightness(0.97); }

.cl-links {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 0;
  font-family: var(--sans);
  font-size: 0.83rem;
  line-height: 1.45;
}
.cl-links li { margin: 0.15rem 0; }
.cl-links a {
  color: var(--cb-accent-2);
  text-decoration: none;
}
.cl-links a:hover { text-decoration: underline; color: var(--cb-accent); }
.cl-links-meta {
  margin-top: 0.5rem;
  font-size: 0.74rem;
  color: var(--cb-muted);
  font-style: italic;
}
.cl-soon {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--cb-muted);
  margin-bottom: 0.15rem;
}
.cl-soon-note {
  color: var(--cb-muted);
  font-size: 0.74rem;
  font-style: italic;
}

/* ---------- Principles + origin (denser than non-home pages) ---------- */

.cl-principles, .cl-origin {
  border-top: 1px solid var(--cb-rule);
  padding-top: 1.3rem;
  margin-top: 1rem;
}
.cl-principles-title {
  font-family: var(--serif);
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  margin: 0 0 0.7rem;
  color: var(--cb-ink);
}
.cl-principles-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--sans);
  font-size: 0.88rem;
  line-height: 1.55;
}
.cl-principles-list li {
  padding: 0.55rem 0;
  border-bottom: 1px dotted var(--cb-rule);
  color: var(--cb-ink);
}
.cl-principles-list li:last-child { border-bottom: none; }
.cl-principles-list strong { color: var(--cb-accent-2); }
.cl-principles-list a { color: var(--cb-accent-2); }

.cl-origin p {
  font-family: var(--sans);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--cb-ink);
  margin: 0;
}

.cl-craig {
  margin: 2rem 0 0;
  padding-top: 1rem;
  border-top: 1px dotted var(--cb-rule);
  text-align: center;
  font-family: var(--serif);
  font-size: 0.82rem;
  color: var(--cb-muted);
}
.cl-craig a { color: var(--cb-muted); }

/* Grid key (legend for the gold-pill / gray-pill distinction) */
.cl-grid-key {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--cb-muted);
  margin: 0 0 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.cl-key-swatch {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 999px;
  border: 1px solid var(--cb-rule);
  vertical-align: middle;
}
.cl-key-swatch.cl-key-live {
  background: linear-gradient(180deg, #f5e9d2 0%, #d8b97a 100%);
  border-color: var(--cb-accent);
}
.cl-key-swatch.cl-key-forming {
  background: linear-gradient(180deg, #f1ede2 0%, #d8d2bf 100%);
}

.cl-vert-teaser {
  margin-top: 0.45rem !important;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--cb-muted);
  border-top: 1px dotted var(--cb-rule);
  padding-top: 0.4rem;
  line-height: 1.5;
}

/* Active-vertical cell: corpus header → 2-col podcast list → tail.
   Keeps the cybersecurity cell from becoming much taller than its rowmates. */
.cl-links-corpus {
  font-size: 0.78rem;
  color: var(--cb-muted);
  border-bottom: 1px dotted var(--cb-rule);
  padding-bottom: 0.35rem;
  margin-bottom: 0.45rem;
  list-style: none;
}
.cl-links-corpus strong { color: var(--cb-accent-2); }
.cl-links-shows {
  margin: 0 0 0.55rem;
  padding: 0;
  list-style: none;
}
.cl-links-shows li {
  margin: 0.08rem 0;
  font-size: 0.82rem;
  line-height: 1.4;
}
.cl-links-more {
  margin-top: 0.35rem !important;
  font-size: 0.78rem;
  color: var(--cb-muted);
}
.cl-links-more a { color: var(--cb-accent-2); }
.cl-links-tail {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px dotted var(--cb-rule);
  padding-top: 0.45rem;
}
.cl-links-tail li { margin: 0.18rem 0; }

/* ---------------------------------------------------------------
   L2 vertical: participating-podcasts list (name-dominant, no eyebrow noise)
   Added 2026-06-02 QA pass.
   --------------------------------------------------------------- */
.podcast-list {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 1.5rem;
}
.podcast-list li {
  border-bottom: 1px solid var(--cb-rule);
}
.podcast-list li:first-child {
  border-top: 1px solid var(--cb-rule);
}
.podcast-list a {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "name arrow"
    "host arrow";
  align-items: center;
  gap: 0.25rem 1.5rem;
  text-decoration: none;
  color: var(--cb-ink);
  padding: 1.2rem 0.25rem;
  transition: background 120ms ease, padding-left 120ms ease;
}
.podcast-list .podcast-name { grid-area: name; }
.podcast-list .podcast-host { grid-area: host; margin-top: 0; }
.podcast-list a::after { grid-area: arrow; align-self: center; }
.podcast-list a:hover,
.podcast-list a:focus {
  background: var(--cb-paper);
  padding-left: 0.75rem;
}
.podcast-list a::after {
  content: "→";
  font-family: var(--sans);
  color: var(--cb-accent);
  font-size: 1.2rem;
  opacity: 0.5;
  transition: opacity 120ms ease, transform 120ms ease;
}
.podcast-list a:hover::after,
.podcast-list a:focus::after {
  opacity: 1;
  transform: translateX(4px);
}
.podcast-list .podcast-name {
  display: block;
  font-family: var(--serif);
  font-size: 1.65rem;
  font-weight: 600;
  color: var(--cb-accent);
  line-height: 1.2;
}
.podcast-list .podcast-host {
  display: block;
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--cb-muted);
  margin-top: 0.25rem;
}
.podcast-list a:hover .podcast-name,
.podcast-list a:focus .podcast-name {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.section-intro {
  margin: 0.25rem 0 0.5rem;
  color: var(--cb-muted);
}
.section-aside {
  margin-top: 1.25rem;
  padding-top: 0.9rem;
  border-top: 1px dotted var(--cb-rule);
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--cb-muted);
  font-style: italic;
}
.section-aside a { font-style: normal; }

/* L3 episode row: promote title, demote metadata.
   Override the L2 .episode-list .show eyebrow ordering when on show pages. */
.episode-list .episode {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--cb-accent);
  order: 1;
}
.episode-list a {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.episode-list .show { order: 2; font-size: 0.78rem; }
.episode-list .meta { order: 3; }

/* ---------------------------------------------------------------
   L4 Executive Review Learning Points — typed-question display
   Added 2026-06-02 with Feb 2016 source-of-truth corpus.
   --------------------------------------------------------------- */
.er-lp-list { padding-left: 1.5rem; }
.er-lp {
  margin: 1.2rem 0;
  padding: 0;
}
.er-lp-prompt {
  margin: 0 0 0.5rem;
  font-weight: 500;
}
.er-lp-choices {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0 0;
  font-size: 0.95rem;
}
.er-lp-choices li {
  padding: 0.15rem 0;
  color: var(--cb-ink);
}
.er-lp-choice-id {
  display: inline-block;
  width: 1.5rem;
  color: var(--cb-muted);
  font-family: var(--sans);
  font-size: 0.85rem;
}
.er-lp-matching {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 0.5rem;
}
.er-lp-matching ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.95rem;
}
.er-lp-matching li {
  padding: 0.15rem 0;
}
.er-lp-note {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  color: var(--cb-muted);
  font-style: italic;
}

/* ---------------------------------------------------------------
   Phase 2 — L4 episode-page additions:
     - embedded podcast player
     - interactive Q&A widgets
     - certification block
   Added 2026-06-02. Pilot episode: Apple v FBI (DtSR 182).
   --------------------------------------------------------------- */

/* Embedded audio player */
.er-player { margin: 1.5rem 0; }
.er-audio {
  display: block;
  width: 100%;
  min-height: 44px;
}
.er-audio-note {
  margin: 0.4rem 0 0;
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--cb-muted);
  font-style: italic;
}
.er-audio-fallback {
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--cb-rule);
  background: var(--cb-paper);
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--cb-muted);
  margin: 0;
}
.er-audio-fallback a {
  color: var(--cb-accent);
  font-weight: 500;
}

/* Interactive Q&A — intro + progress + per-question widgets */
.er-learning-intro {
  margin: 0.5rem 0 0.5rem;
  font-family: var(--sans);
  font-size: 0.95rem;
}
.er-learning-progress {
  margin: 0 0 1rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--cb-muted);
}
.er-learning-progress .er-progress-count {
  font-weight: 600;
  color: var(--cb-accent);
}
.er-lp-input {
  margin: 0.5rem 0;
  font-family: var(--sans);
  font-size: 0.95rem;
}
.er-lp-input label {
  display: block;
  padding: 0.25rem 0;
  cursor: pointer;
}
.er-lp-input--tf label {
  display: inline-block;
  margin-right: 1.5rem;
}
.er-lp-fill-label { display: block; }
.er-lp-fill-input {
  display: block;
  margin-top: 0.25rem;
  padding: 0.4rem 0.6rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  border: 1px solid var(--cb-rule);
  border-radius: 3px;
  width: min(420px, 100%);
}
.er-lp-input--matching {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.er-lp-match-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 200px);
  gap: 1rem;
  align-items: center;
  padding: 0.2rem 0;
  max-width: 560px;
}
.er-lp-match-left { font-size: 0.95rem; }
.er-lp-match-select {
  padding: 0.3rem 0.4rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  border: 1px solid var(--cb-rule);
  border-radius: 3px;
  background: white;
}
.er-lp-actions {
  margin-top: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.er-lp-check {
  padding: 0.4rem 0.9rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  border: 1px solid var(--cb-accent);
  background: white;
  color: var(--cb-accent);
  border-radius: 3px;
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease;
}
.er-lp-check:hover { background: var(--cb-accent); color: white; }
.er-lp-check:disabled {
  background: var(--cb-paper);
  color: var(--cb-muted);
  border-color: var(--cb-rule);
  cursor: default;
}
.er-lp-feedback {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-style: italic;
}
.er-lp-feedback--ok { color: #0d5d4b; font-weight: 600; }
.er-lp-feedback--err { color: #8a3a1a; }
.er-lp--correct {
  background: linear-gradient(to right, rgba(13, 93, 75, 0.06), transparent 60%);
  padding-left: 0.5rem;
}

/* Certification block */
.er-cert {
  margin-top: 2rem;
  padding: 1.5rem;
  border: 1px solid var(--cb-accent);
  background: var(--cb-paper);
  border-radius: 4px;
}
.er-cert h3 {
  margin-top: 0;
  color: var(--cb-accent);
}
.er-cert-statement {
  font-style: italic;
  font-family: var(--serif);
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--cb-accent);
  background: white;
  margin: 1rem 0;
}
.er-cert-form {
  display: grid;
  gap: 0.75rem;
  margin: 1rem 0;
}
.er-cert-label {
  display: block;
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--cb-ink);
}
.er-cert-label input {
  display: block;
  margin-top: 0.25rem;
  padding: 0.5rem 0.7rem;
  font-family: var(--sans);
  font-size: 1rem;
  border: 1px solid var(--cb-rule);
  border-radius: 3px;
  width: min(420px, 100%);
}
.er-cert-date {
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--cb-muted);
  margin: 0;
}
#er-cert-button {
  padding: 0.6rem 1.25rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  border: 0;
  background: var(--cb-accent);
  color: white;
  border-radius: 3px;
  cursor: pointer;
  font-weight: 600;
  justify-self: start;
}
#er-cert-button:hover { background: var(--cb-ink); }
#er-cert-status {
  margin: 0.5rem 0 0;
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--cb-muted);
}

/* Lock interaction on a correctly-answered Learning Point without disabling
   form controls (which can cause :checked to read false on querySelector). */
.er-lp--locked .er-lp-input { pointer-events: none; opacity: 0.85; }

/* Embedded iframe audio player (used when the source CDN blocks native <audio>
   embeds via Referer/CORS — e.g., Buzzsprout-hosted episodes). */
.er-audio-embed {
  display: block;
  width: 100%;
  border: 0;
  background: white;
}

/* Hint text under the cert Name input (typed-name dual-use disclosure) */
.er-cert-hint {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--cb-muted);
  font-style: italic;
}

/* Feedback state when the correct answer was revealed after 3 wrong attempts */
.er-lp-feedback--revealed {
  color: #6b4a1f;
  font-weight: 500;
}
.er-lp--revealed {
  background: linear-gradient(to right, rgba(255, 184, 90, 0.10), transparent 60%);
  padding-left: 0.5rem;
}

/* Stronger differentiation for revealed-after-3-wrong answers vs. answered correctly. */
.er-lp--revealed .er-lp-prompt::after {
  content: " (auto-revealed)";
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b4a1f;
  background: rgba(255, 184, 90, 0.15);
  padding: 0.1rem 0.5rem;
  border-radius: 2px;
  margin-left: 0.4rem;
  vertical-align: middle;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}