/* Research Listen — diagram styles so the Read figures (reused as board slides)
   render correctly inside the dark Listen board. The figures are CSS-variable driven;
   we pass LIGHT-theme variable values inline on each figure <svg> (see listen_research.py)
   so they read as dark-on-paper slides. These class rules supply the card fills. */

/* v3 — live Read-page screencast board */
.lb-board-doc { overflow: hidden; background: #12151b; }
.lb-doc { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #12151b; display: block; pointer-events: none; }
.lb-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
/* clean glowing highlight — circle for a diagram node, rounded box for text/code */
.lb-glow { filter: drop-shadow(0 0 3px rgba(95, 227, 214, .45)) drop-shadow(0 0 8px rgba(95, 227, 214, .3)); animation: lbGlow 2s ease-in-out infinite; }
@keyframes lbGlow { 0%, 100% { stroke-opacity: .9; } 50% { stroke-opacity: .5; } }
.lb-cursor { opacity: 0 !important; }   /* pointer arrow hidden — distraction-free */
.lb-dots { display: none; }   /* progress dots not needed */
/* Captions: one centered line, capped at 50em (never spill to full width). */
.lb-cc-txt { display: block; max-width: 50em; margin-left: auto; margin-right: auto; overflow: hidden; text-overflow: ellipsis; }
.lb-cc-who { display: none; }   /* no separate Host/Expert label above the caption */
/* Host/Expert chips hidden — the narration itself makes the speaker clear. */
.lb-speakers { display: none !important; }
/* Bottom-bar controls: CC + full screen, YouTube-style. */
.lb-ctl-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 30px; padding: 0 8px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); color: #e8eaed; font-weight: 700; font-size: .74rem; cursor: pointer; }
.lb-ctl-btn svg { width: 18px; height: 18px; }
.lb-ctl-btn:hover { background: rgba(255, 255, 255, .12); }
.lb-ctl-btn.on { color: #f6b26b; border-color: rgba(246, 178, 107, .6); }


#lb-svg .iso-front { filter: drop-shadow(0 2px 3px rgba(20, 18, 15, .20)); }
#lb-svg .iso-label {
  font-family: var(--font-ui, "Inter", system-ui, sans-serif);
  font-size: 14px; font-weight: 700; fill: #fff; text-anchor: middle;
}
#lb-svg .iso-sub {
  font-family: var(--font-ui, "Inter", system-ui, sans-serif);
  font-size: 11px; font-weight: 600; fill: rgba(255, 255, 255, .95); text-anchor: middle;
}
#lb-svg .c-brand  .iso-front { fill: #0e7490; }
#lb-svg .c-accent .iso-front { fill: #0369a1; }
#lb-svg .c-violet .iso-front { fill: #6d28d9; }
#lb-svg .c-good   .iso-front { fill: #166534; }
#lb-svg .c-warn   .iso-front { fill: #b45309; }
#lb-svg .c-bad    .iso-front { fill: #b91c1c; }
#lb-svg .c-flat   .iso-front { fill: var(--bg-surface, #fff); stroke: var(--fg-tertiary, #8b857d); stroke-width: 1.6; }
#lb-svg .c-flat   .iso-label,
#lb-svg .c-flat   .iso-sub { fill: var(--fg-primary, #2a2723); }

/* Read-article hand-off link in the contents drawer. */
.lb-readlink {
  display: block; color: #8fd8c4; text-decoration: none; font-weight: 700;
  font-size: .92rem; padding: 4px 2px;
}
.lb-readlink:hover { text-decoration: underline; }