/* KouLi Speech Mode Results - Mobile-First AI Coach UX */
/* Palette: Main1 #A156F7, Main2 #4BA2A2, Accent #D8686A */

:root {
  --kouli-main1: #A156F7;
  --kouli-main2: #4BA2A2;
  --kouli-accent: #D8686A;
}

/* Results container - vertical rhythm */
.ted-results-redesign {
  padding: 0 16px 24px;
  max-width: 480px;
  margin: 0 auto;
}

.ted-results-redesign .ted-section {
  margin-bottom: 20px;
}

/* Score hero - circular progress ring */
.ted-score-hero {
  background: linear-gradient(135deg, rgba(161, 86, 247, 0.08) 0%, rgba(75, 162, 162, 0.08) 100%);
  border-radius: 20px;
  padding: 24px 20px;
  box-shadow: 0 4px 20px rgba(161, 86, 247, 0.08);
  text-align: center;
}

.ted-score-ring-wrap {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto 16px;
}

.ted-score-ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(
    var(--kouli-main1) calc(var(--score-pct, 0) * 1%),
    rgba(161, 86, 247, 0.15) calc(var(--score-pct, 0) * 1%)
  );
  animation: ted-ring-appear 0.8s ease-out forwards;
  transform: rotate(-90deg); /* Start from top */
}

/* Toast mode uses SVG ring for exact clockwise fill from 12 o'clock */
.toast-score-ring-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.toast-score-ring-track {
  fill: none;
  stroke: rgba(161, 86, 247, 0.15);
  stroke-width: 8;
}

.toast-score-ring-fill {
  fill: none;
  stroke: var(--kouli-main1);
  stroke-width: 8;
  stroke-linecap: butt;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
  transition: stroke-dashoffset 0.35s ease;
}

.ted-score-ring-inner {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  background: var(--background, #fff);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.ted-score-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--kouli-main1);
  line-height: 1.1;
}

.ted-level-label {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-top: 2px;
}

.ted-trend-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.ted-trend-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

.ted-trend-up {
  background: rgba(75, 162, 162, 0.15);
  color: var(--kouli-main2);
}

.ted-trend-down {
  background: rgba(216, 104, 106, 0.15);
  color: var(--kouli-accent);
}

.ted-trend-same {
  background: var(--muted);
  color: var(--muted-foreground);
}

.ted-sparkline-wrap {
  margin-top: 12px;
  height: 32px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
}

.ted-sparkline-bar {
  width: 8px;
  min-height: 4px;
  border-radius: 4px 4px 0 0;
  background: rgba(161, 86, 247, 0.35);
  transition: height 0.3s ease;
}

.ted-sparkline-bar.active {
  background: var(--kouli-main1);
}

/* Hero card: Confidence + Storytelling (same numbers as “This session” pillars) */
.ted-hero-session-metrics {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  margin-top: 16px;
  padding: 12px 10px;
  border-radius: 14px;
  background: rgba(161, 86, 247, 0.06);
  border: 1px solid rgba(161, 86, 247, 0.12);
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
}
.ted-hero-session-metric {
  flex: 1;
  text-align: center;
  min-width: 0;
}
/* Override global index.html `button` (row flex, min-height 44px, width 100% ≤480px) */
.ted-hero-session-metrics button.ted-hero-metric-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  max-width: none;
  min-height: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: none;
  background: transparent;
  border-radius: 10px;
  padding: 10px 6px 8px;
  margin: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
.ted-hero-session-metrics button.ted-hero-metric-btn:hover:not(:disabled) {
  background: rgba(161, 86, 247, 0.1);
  transform: none;
  box-shadow: none;
}
.ted-hero-session-metrics button.ted-hero-metric-btn:active:not(:disabled) {
  transform: none;
}
.ted-hero-session-metrics button.ted-hero-metric-btn:focus-visible {
  outline: 2px solid rgba(161, 86, 247, 0.5);
  outline-offset: 2px;
}
.ted-hero-session-metric-hint {
  display: block;
  margin-top: 0;
  font-size: 0.65rem;
  font-weight: 600;
  color: rgba(161, 86, 247, 0.72);
  letter-spacing: 0.02em;
  line-height: 1.25;
  max-width: 100%;
  padding: 0 2px;
  text-align: center;
}
.ted-hero-session-metrics button.ted-hero-metric-btn:hover .ted-hero-session-metric-hint {
  color: rgba(161, 86, 247, 0.92);
}
.ted-hero-session-metric-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 0;
  line-height: 1.2;
  max-width: 100%;
}
.ted-hero-session-metric-row {
  line-height: 1.15;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 2px;
}
.ted-hero-session-metric-value {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--kouli-main1);
}
.ted-hero-session-metric--story .ted-hero-session-metric-value {
  color: var(--kouli-main2);
}
.ted-hero-session-metric-max {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
  margin-left: 2px;
}
.ted-hero-session-metric-div {
  width: 1px;
  align-self: stretch;
  min-height: 36px;
  margin: 2px 4px;
  background: rgba(161, 86, 247, 0.2);
}

/* Confidence + Storytelling pillars (between hero and focus cards) */
.ted-pillars-section {
  text-align: center;
}
.ted-pillars-heading {
  margin: 0 0 10px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.ted-pillars-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 100%;
}
.ted-pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  padding: 12px 8px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--card, rgba(255, 255, 255, 0.04));
  color: var(--foreground);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
  box-shadow: 0 2px 10px rgba(29, 53, 87, 0.05);
  transition: transform 0.12s ease, box-shadow 0.2s, border-color 0.2s;
}
.ted-pillar:hover,
.ted-pillar:focus-visible {
  border-color: rgba(161, 86, 247, 0.4);
  box-shadow: 0 4px 16px rgba(161, 86, 247, 0.12);
  transform: translateY(-1px);
  outline: none;
}
.ted-pillar-kicker {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 4px;
}
.ted-pillar-metric {
  line-height: 1.1;
  margin: 0 0 2px;
}
.ted-pillar-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--kouli-main1);
}
.ted-pillar-max {
  font-size: 0.8rem;
  color: var(--muted-foreground);
  margin-left: 2px;
  font-weight: 500;
}
.ted-pillar-hint {
  font-size: 0.7rem;
  color: var(--kouli-main2);
  font-weight: 500;
}
@media (min-width: 400px) {
  .ted-pillars-row {
    gap: 12px;
  }
}

/* Coach cards - Focus Next & Your Strength */
.ted-coach-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ted-coach-card {
  border-radius: 20px;
  padding: 16px 18px;
  box-shadow: 0 2px 12px rgba(29, 53, 87, 0.06);
  border: 1px solid var(--border);
}

.ted-coach-card.focus {
  border-left: 4px solid var(--kouli-accent);
  background: linear-gradient(135deg, rgba(216, 104, 106, 0.05) 0%, transparent 100%);
}

.ted-coach-card.strength {
  border-left: 4px solid var(--kouli-main2);
  background: linear-gradient(135deg, rgba(75, 162, 162, 0.05) 0%, transparent 100%);
}

.ted-coach-card-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
  margin-bottom: 6px;
}

.ted-coach-card.focus .ted-coach-card-label {
  color: var(--kouli-accent);
}

.ted-coach-card.strength .ted-coach-card-label {
  color: var(--kouli-main2);
}

.ted-coach-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 4px;
}

.ted-coach-card-tip {
  font-size: 0.85rem;
  color: var(--muted-foreground);
  line-height: 1.4;
}

/* "See Full Breakdown" — default dark pill (used standalone by Toast mode).
   Speech mode demotes this button inside `.ted-secondary-actions` further down
   in this file. */
.ted-breakdown-cta {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 13px 20px;
  background: #14141c;
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(20, 20, 28, 0.12);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}

.ted-breakdown-cta:hover {
  background: #1c1c28;
  color: #ffffff;
  border-color: rgba(168, 85, 247, 0.42);
  box-shadow: 0 6px 18px rgba(20, 20, 28, 0.18);
}

.ted-breakdown-cta:active {
  transform: scale(0.98);
}

/* KouLi Coach CTA — slim primary action on the speech results screen.
   Visually mirrors the home-page Interview hero CTA (same violet gradient,
   compact pill geometry, border-radius 11px) but adds a subtle continuous
   attention pulse: a soft violet outer glow and a slow white shimmer sweep.
   No big halo, no oversized typography — the star + label do the work. */
.ted-kouli-coach-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 14px;
  padding: 0.8rem 1.2rem;
  border: none;
  border-radius: 11px;
  background: linear-gradient(135deg, #8b5cf6, #a855f7);
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 6px 16px rgba(139, 92, 246, 0.28);
  transition: transform 0.18s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

/* Slow white shimmer streak: a soft gloss drifts across the surface to keep
   the button feeling alive without screaming for attention. */
.ted-kouli-coach-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.28) 50%,
    rgba(255, 255, 255, 0) 60%,
    transparent 100%
  );
  background-size: 220% 100%;
  background-position: 140% 0;
  mix-blend-mode: screen;
  opacity: 0.85;
}

.ted-kouli-coach-cta.is-pulsing::before {
  animation: tedKouliCoachShimmer 4.6s ease-in-out infinite;
}

@keyframes tedKouliCoachShimmer {
  0% { background-position: 140% 0; }
  60% { background-position: -120% 0; }
  100% { background-position: -120% 0; }
}

/* Subtle glow pulse on the shadow itself — draws the eye without an
   expanding ring or scale jump. */
.ted-kouli-coach-cta.is-pulsing {
  animation: tedKouliCoachGlow 2.6s ease-in-out infinite;
}

@keyframes tedKouliCoachGlow {
  0%, 100% {
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.28);
  }
  50% {
    box-shadow:
      0 8px 22px rgba(139, 92, 246, 0.5),
      0 0 0 2px rgba(168, 85, 247, 0.18);
  }
}

.ted-kouli-coach-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: 0 10px 26px rgba(139, 92, 246, 0.42);
}

.ted-kouli-coach-cta:active {
  transform: scale(0.985);
}

.ted-kouli-coach-cta:focus-visible {
  outline: 2px solid rgba(196, 181, 253, 0.9);
  outline-offset: 2px;
}

.ted-kouli-coach-cta-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.ted-kouli-coach-cta-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.45));
}

.ted-kouli-coach-cta-label {
  position: relative;
  z-index: 1;
  line-height: 1;
}

/* When the user is actively hovering / focusing, calm the attention pulse
   so the static hover state reads cleanly. */
.ted-kouli-coach-cta.is-pulsing:hover,
.ted-kouli-coach-cta.is-pulsing:focus-visible {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .ted-kouli-coach-cta.is-pulsing,
  .ted-kouli-coach-cta.is-pulsing::before {
    animation: none;
  }
  .ted-kouli-coach-cta::before {
    background-position: -120% 0;
  }
}

/* Practice Again CTA - mobile-first 375px (Toast mode wrapper). */
.ted-practice-again-wrap {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

/* Practice Again — default dark pill, matched with "See Full Breakdown".
   Speech mode demotes this inside `.ted-secondary-actions` below. */
.ted-practice-again-cta {
  display: block;
  width: 100%;
  max-width: 343px;
  padding: 14px 24px;
  background: #14141c;
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(20, 20, 28, 0.12);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}

.ted-practice-again-cta:hover {
  background: #1c1c28;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 6px 18px rgba(20, 20, 28, 0.18);
}

.ted-practice-again-cta:active {
  transform: scale(0.98);
}

.ted-change-duration-link {
  background: none;
  border: none;
  padding: 8px 12px;
  font-size: 0.9rem;
  color: var(--muted-foreground);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.ted-change-duration-link:hover {
  color: var(--kouli-main1, #A156F7);
}

/* Speech mode — row of demoted secondary actions: "See Full Breakdown" +
   "Practice Again" pair side-by-side beneath the KouLi Coach CTA. The
   wrapper-scoped overrides repaint the buttons as quiet charcoal pills so
   the premium CTA stays the hero on the results screen. Toast mode does not
   wrap these buttons in `.ted-secondary-actions`, so its dark styling above
   is preserved. */
.ted-secondary-actions {
  margin-top: 12px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 10px;
  width: 100%;
}

.ted-secondary-actions > .ted-breakdown-cta,
.ted-secondary-actions > .ted-practice-again-cta {
  flex: 1 1 0;
  margin: 0;
  max-width: none;
  padding: 10px 14px;
  background: rgba(20, 20, 28, 0.04);
  color: #3a3a48;
  border: 1px solid rgba(20, 20, 28, 0.14);
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  box-shadow: none;
}

.ted-secondary-actions > .ted-breakdown-cta:hover,
.ted-secondary-actions > .ted-practice-again-cta:hover {
  background: rgba(20, 20, 28, 0.07);
  color: #14141c;
  border-color: rgba(20, 20, 28, 0.22);
  box-shadow: none;
}

/* Tertiary link row for "Change duration / mode" — sits below the demoted
   secondary actions so it stays out of the visual hierarchy. */
.ted-tertiary-actions {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  width: 100%;
}

.ted-tertiary-actions .ted-change-duration-link {
  padding: 6px 10px;
  font-size: 0.82rem;
}

/* Sticky bottom CTA bar (appears on scroll, above bottom nav and Speech Coach FAB) */
.ted-results-sticky-cta {
  position: fixed;
  bottom: 80px;
  left: 0;
  right: 0;
  z-index: 900;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  max-width: 480px;
  margin: 0 auto;
  background: var(--background, #fff);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
}

.ted-results-sticky-cta.visible {
  display: flex;
}

.ted-results-sticky-cta .ted-practice-again-cta {
  flex: 1;
  max-width: none;
  margin: 0;
  padding: 12px 16px;
  font-size: 0.95rem;
  background: var(--muted);
  color: var(--foreground);
  border: 1px solid var(--border);
  box-shadow: none;
}

.ted-results-sticky-cta .ted-practice-again-cta:hover {
  background: rgba(161, 86, 247, 0.1);
  color: var(--kouli-main1);
  border-color: rgba(161, 86, 247, 0.4);
  box-shadow: none;
}

.ted-results-sticky-cta .ted-sticky-breakdown-btn,
.ted-results-sticky-cta .ted-breakdown-cta {
  flex: 1;
  margin: 0;
  padding: 12px 16px;
  font-size: 0.95rem;
  background: var(--muted);
  color: var(--foreground);
  border: 1px solid var(--border);
}

.ted-results-sticky-cta .ted-sticky-breakdown-btn:hover,
.ted-results-sticky-cta .ted-breakdown-cta:hover {
  background: rgba(161, 86, 247, 0.1);
  color: var(--kouli-main1);
}

/* Confidence accordion */
.ted-confidence-accordion {
  background: var(--card);
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(29, 53, 87, 0.06);
  border: 1px solid var(--border);
}

.ted-confidence-accordion h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 12px;
}

.ted-accordion-item {
  border-radius: 16px;
  margin-bottom: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.ted-accordion-item:last-child {
  margin-bottom: 0;
}

.ted-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--muted);
  cursor: pointer;
  transition: background 0.2s;
}

.ted-accordion-header:hover {
  background: rgba(161, 86, 247, 0.06);
}

.ted-accordion-header.expanded {
  background: rgba(161, 86, 247, 0.08);
}

.ted-accordion-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--foreground);
}

.ted-accordion-score {
  font-weight: 700;
  font-size: 0.9rem;
  margin-right: 8px;
}

.ted-accordion-chevron {
  width: 20px;
  height: 20px;
  opacity: 0.6;
  transition: transform 0.2s;
}

.ted-accordion-item.expanded .ted-accordion-chevron {
  transform: rotate(180deg);
}

.ted-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.ted-accordion-item.expanded .ted-accordion-body {
  max-height: 400px;
}

.ted-accordion-content {
  padding: 16px;
  border-top: 1px solid var(--border);
  background: var(--background);
}

.ted-accordion-bars {
  margin-bottom: 12px;
}

.ted-accordion-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.ted-accordion-bar-label {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  min-width: 70px;
}

.ted-accordion-bar-track {
  flex: 1;
  height: 6px;
  background: var(--muted);
  border-radius: 3px;
  overflow: hidden;
}

.ted-accordion-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}

.ted-accordion-tip {
  font-size: 0.85rem;
  color: var(--foreground);
  line-height: 1.5;
  padding: 10px 12px;
  background: rgba(161, 86, 247, 0.06);
  border-radius: 12px;
  margin-bottom: 12px;
  border-left: 3px solid var(--kouli-main1);
}

.ted-accordion-example {
  font-size: 0.8rem;
  color: var(--muted-foreground);
  font-style: italic;
  padding: 8px 12px;
  background: var(--muted);
  border-radius: 10px;
}

/* Confidence modal: mobile scroll + narrower on small screens */
.ted-confidence-modal {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
}
@media (max-width: 480px) {
  .ted-confidence-modal {
    max-width: calc(100vw - 24px) !important;
  }
}

/* Audio player redesign */
.ted-audio-player-redesign {
  background: var(--card);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(29, 53, 87, 0.06);
  border: 1px solid var(--border);
}

.ted-audio-timeline-markers {
  position: relative;
  height: 24px;
  margin-bottom: 8px;
}

.ted-audio-marker {
  position: absolute;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  transition: transform 0.15s;
  background: var(--kouli-main1);
}

.ted-audio-marker:hover {
  transform: scale(1.3);
}

.ted-audio-marker.weak-language {
  background: var(--kouli-accent);
}

.ted-audio-marker.high-authority {
  background: var(--kouli-main2);
}

.ted-audio-marker.filler-cluster {
  background: var(--kouli-accent);
  border: 2px solid rgba(216, 104, 106, 0.5);
}

.ted-audio-progress-slider {
  width: 100%;
  height: 8px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--muted);
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}

.ted-audio-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.ted-audio-time-display {
  font-size: 0.8rem;
  color: var(--muted-foreground);
}

@keyframes ted-ring-appear {
  from {
    opacity: 0.5;
    transform: rotate(-90deg) scale(0.9);
  }
  to {
    opacity: 1;
    transform: rotate(-90deg) scale(1);
  }
}

/* ========== Bottom section: growth roadmap (mobile-first 375px) ========== */
.ted-results-redesign #ted-analysis-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 28px;
}

.ted-bottom-card {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 1px 8px rgba(29, 53, 87, 0.04);
  overflow: hidden;
}

.ted-collapsible-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 20px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 1rem;
  font-weight: 600;
  color: var(--foreground);
}

.ted-collapsible-btn:hover {
  background: rgba(161, 86, 247, 0.04);
}

.ted-collapsible-title {
  color: var(--kouli-main1, #A156F7);
}

.ted-collapsible-chevron {
  width: 20px;
  height: 20px;
  opacity: 0.6;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.ted-collapsible-panel {
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.ted-collapsible-btn[aria-expanded="false"] + .ted-collapsible-panel {
  max-height: 0;
}

.ted-collapsible-btn[aria-expanded="true"] + .ted-collapsible-panel {
  max-height: 600px;
}

.ted-collapsible-btn[aria-expanded="true"] .ted-collapsible-chevron {
  transform: rotate(180deg);
}

/* Your Core Theme — lighter weight */
.ted-core-theme-content {
  padding: 0 20px 20px;
}

.ted-theme-pill {
  display: inline-block;
  background: rgba(161, 86, 247, 0.1);
  color: var(--kouli-main1, #A156F7);
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 0.85rem;
  margin: 0 8px 8px 0;
}

.ted-theme-empty {
  opacity: 0.7;
}

.ted-core-theme-sentence {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.45;
  margin: 12px 0 0;
}

/* Inspiration card */
.ted-inspiration-content {
  padding: 0 20px 20px;
}

.ted-inspiration-title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--foreground);
  margin-bottom: 4px;
}

.ted-inspiration-meta {
  font-size: 0.85rem;
  color: var(--muted-foreground);
  margin-bottom: 8px;
}

.ted-inspiration-interpretation {
  font-size: 0.875rem;
  color: var(--foreground);
  line-height: 1.45;
  margin: 0 0 12px;
}

.ted-inspiration-cta {
  display: inline-block;
  font-size: 0.875rem;
  color: var(--kouli-main1, #A156F7);
  text-decoration: none;
  font-weight: 500;
}

.ted-inspiration-cta:hover {
  text-decoration: underline;
}

.ted-inspiration-empty {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin: 0;
}

/* Insights: 3 blocks with color coding */
.ted-insights-content {
  padding: 0 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ted-insights-block-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.ted-whats-working .ted-insights-block-label {
  color: var(--kouli-main2, #4BA2A2);
}

.ted-where-to-improve .ted-insights-block-label {
  color: var(--kouli-accent, #D8686A);
}

.ted-structural .ted-insights-block-label {
  color: var(--kouli-main1, #A156F7);
}

.ted-insights-list {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--foreground);
}

.ted-whats-working .ted-insights-list li {
  color: var(--kouli-main2, #4BA2A2);
}

.ted-where-to-improve .ted-insights-list li {
  color: var(--kouli-accent, #D8686A);
}

.ted-structural-text {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--foreground);
  margin: 0;
}

/* Your Next Session Plan */
.ted-next-plan-content {
  padding: 0 20px 20px;
}

.ted-next-goals-list {
  margin: 0 0 16px;
  padding-left: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--foreground);
}

.ted-practice-goals-cta {
  display: block;
  width: 100%;
  padding: 12px 20px;
  background: var(--kouli-main1, #A156F7);
  color: white;
  border: none;
  border-radius: 16px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

.ted-practice-goals-cta:hover {
  background: #8b45e6;
}

.ted-practice-goals-cta:active {
  transform: scale(0.98);
}

/* ========== Pre-Session Screen (Speech Mode) ========== */
.ted-pre-session-layout {
  padding: 0 16px;
  max-width: 420px;
  margin: 0 auto;
}

.ted-pre-session-layout .compact-timer-section {
  margin-bottom: 1.5rem;
}

.ted-pre-session-layout .timer-display {
  font-size: 1.75rem;
  color: var(--kouli-main1, #A156F7);
}

.ted-start-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.ted-start-cta {
  width: 100%;
  max-width: 320px;
  padding: 16px 24px;
  background: var(--kouli-main1, #A156F7);
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(161, 86, 247, 0.35);
  transition: transform 0.2s, box-shadow 0.2s;
  animation: ted-start-pulse 2.5s ease-in-out infinite;
}

.ted-start-cta:hover {
  background: #8b45e6;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(161, 86, 247, 0.4);
}

.ted-start-cta:active {
  transform: scale(0.98);
}

@keyframes ted-start-pulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(161, 86, 247, 0.35); }
  50% { box-shadow: 0 6px 24px rgba(161, 86, 247, 0.5); }
}

.ted-start-hint {
  font-size: 0.9rem;
  color: var(--muted-foreground);
  margin: 0;
  font-style: italic;
}

/* Stage Mode Toggle */
.ted-stage-mode-toggle-wrap {
  margin-bottom: 1rem;
}

.ted-stage-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.ted-stage-mode-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.ted-stage-mode-slider {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--muted);
  border-radius: 12px;
  transition: background 0.25s ease;
}

.ted-stage-mode-slider::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  left: 2px;
  top: 2px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: transform 0.25s ease;
}

.ted-stage-mode-toggle input:checked + .ted-stage-mode-slider {
  background: var(--kouli-main1);
}

.ted-stage-mode-toggle input:checked + .ted-stage-mode-slider::before {
  transform: translateX(20px);
}

.ted-stage-mode-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--foreground);
}

/* Pre-session cards */
.ted-pre-session-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 16px 24px;
  max-width: 420px;
  margin: 0 auto;
}

.ted-session-ready-card {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(29, 53, 87, 0.04);
}

.ted-session-ready-focus {
  font-size: 0.9rem;
  color: var(--foreground);
  margin-bottom: 12px;
}

.ted-session-ready-note {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.45;
  margin: 0;
}

.ted-todays-focus-card {
  background: rgba(75, 162, 162, 0.06);
  border: 1px solid rgba(75, 162, 162, 0.2);
  border-radius: 20px;
  padding: 16px 20px;
}

.ted-todays-focus-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--kouli-main2, #4BA2A2);
  margin-bottom: 8px;
}

.ted-todays-focus-list {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--foreground);
}

/* ========== During Recording Screen - Full-Screen, Isolated (375px) ========== */
body.ted-recording-active {
  overflow: hidden;
  position: fixed;
  inset: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ted-recording-immersive {
  position: fixed;
  inset: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background: var(--background, #fff);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  padding-top: 56px;
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
  overflow: hidden;
}

/* Speech self-view — Shadow-style tile.
   One floating glass card, mirrored video, clean "Camera off" placeholder.
   Anchored bottom-right so it never crowds the timer or the mist stage. */
#ted-self-view-wrap,
#ted-self-view-wrap-stage {
  position: fixed;
  right: 24px;
  bottom: calc(120px + env(safe-area-inset-bottom, 0px));
  top: auto;
  left: auto;
  width: clamp(180px, 22vw, 280px);
  aspect-ratio: 4 / 3;
  height: auto;
  margin: 0;
  z-index: 10020;
  transform: none;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background:
    radial-gradient(circle at 50% 26%, rgba(255, 255, 255, 0.09), transparent 45%),
    rgba(255, 255, 255, 0.06);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 -16px 28px rgba(6, 6, 15, 0.35),
    0 18px 38px rgba(0, 0, 0, 0.34);
}

/* Light recording surface keeps a softer, paler card */
#ted-recording-area:not(.stage-mode) #ted-self-view-wrap {
  border-color: rgba(161, 86, 247, 0.35);
  background:
    linear-gradient(160deg, rgba(255,255,255,0.92) 0%, rgba(244,240,255,0.94) 45%, rgba(236,247,247,0.92) 100%);
  box-shadow: 0 14px 34px rgba(17, 24, 39, 0.18), 0 4px 12px rgba(161, 86, 247, 0.16);
}

/* Header — very subtle, just enough to anchor the close button */
#ted-self-view-wrap .interview-self-view-header,
#ted-self-view-wrap-stage .interview-self-view-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 3;
  height: 28px;
  padding: 0 10px;
  background: linear-gradient(180deg, rgba(8, 8, 16, 0.62) 0%, transparent 100%);
  display: flex;
  align-items: center;
  gap: 8px;
}

#ted-self-view-wrap .interview-self-view-title,
#ted-self-view-wrap-stage .interview-self-view-title {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

#ted-self-view-wrap .interview-self-view-close,
#ted-self-view-wrap-stage .interview-self-view-close {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.7);
}

/* Mirrored video, full-bleed (like Shadow's .kouli-self-view-video) */
#ted-self-view-video,
#ted-self-view-video-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}

/* Placeholder centred when the camera is off */
#ted-self-view-wrap .interview-self-view-empty,
#ted-self-view-wrap-stage .interview-self-view-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.62);
}

#ted-self-view-wrap .interview-self-view-empty-text,
#ted-self-view-wrap-stage .interview-self-view-empty-text {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.6);
  text-transform: none;
}

@media (max-width: 480px) {
  #ted-self-view-wrap,
  #ted-self-view-wrap-stage {
    right: 14px;
    bottom: calc(108px + env(safe-area-inset-bottom, 0px));
    width: min(40vw, 168px);
  }
}

.ted-recording-exit-btn {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.9);
  color: var(--foreground);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.ted-recording-exit-btn:hover {
  background: var(--muted);
}

.ted-recording-exit-btn:active {
  transform: scale(0.95);
}

.ted-recording-immersive.stage-mode .ted-recording-exit-btn {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.ted-recording-immersive.stage-mode .ted-recording-exit-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.ted-recording-countdown {
  font-size: 5rem;
  font-weight: 700;
  color: var(--kouli-main1);
  text-align: center;
  animation: ted-countdown-pulse 1s ease-in-out infinite;
}

@keyframes ted-countdown-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.05); }
}

.ted-recording-active {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: min(480px, 94vw);
  gap: 18px;
  margin: 0 auto;
}

#ted-recording-area:not(.stage-mode) .ted-recording-active {
  max-width: min(500px, 94vw);
  width: 100%;
  box-sizing: border-box;
  align-self: center;
  margin-left: auto;
  margin-right: auto;
}

#ted-recording-area:not(.stage-mode).ted-recording-immersive,
.ted-recording-immersive {
  align-items: center;
  justify-content: flex-start;
  padding-top: clamp(40px, 8vh, 80px);
  padding-bottom: clamp(28px, 6vh, 64px);
}

.ted-recording-timer-wrap {
  text-align: center;
  margin-top: 4px;
}

/* Muted, calm timer — less dashboard, more coach. No pulse, no glow. */
.ted-recording-timer {
  font-size: clamp(1.7rem, 4.2vw, 2.1rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.62);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  line-height: 1;
}

#ted-recording-area:not(.stage-mode) .ted-recording-timer {
  color: rgba(17, 24, 39, 0.46);
}

.ted-recording-timer.urgent {
  color: rgba(232, 121, 124, 0.85);
}

@keyframes ted-timer-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

@keyframes ted-timer-pulse-urgent {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.02); }
}

/* Legacy waveform card + KCI dashboard hidden on the recording surface —
   the mist is the only live energy indicator (anchor: less dashboard,
   more coach). */
.ted-recording-waveform-wrap,
.ted-waveform-canvas,
#ted-recording-area #ted-live-kci-box {
  display: none !important;
}

/* KouLi mist stage — the coach presence at the top of the screen.
   Uses .kouli-voice-stage-inner / .kouli-voice-glow / .kouli-voice-mist-field
   / .kouli-mist-col from kouli-coach-visual.css — the same component as
   KouLi Coach, Confidence Coach and the Shadow live/debrief stage.

   On the recording surface the mist is ambient atmosphere, not a widget —
   the box dissolves into the background so it reads as "the coach is in the
   room, listening" rather than "here is a small box of mist". Keep the
   component visible, but let the inherited inner stage spill past its old
   clipping bounds so there is no hard rectangular edge. */
.ted-recording-mist-stage {
  position: relative;
  width: 100%;
  max-width: min(560px, 100vw);
  /* Compact — the mist is a presence, not a panel. */
  min-height: clamp(160px, 24vh, 220px);
  border: 0;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  --voice-energy: 0.12;
}

/* Dissolve the hard horizontal baseline where the columns are anchored.
   Only the bottom and the very top get masked — the body of the mist stays
   fully visible. This kills the "bar" look without hiding the column tops. */
.ted-recording-mist-stage .kouli-voice-stage-inner {
  overflow: visible;
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.65) 8%,
    rgba(0, 0, 0, 1) 28%,
    rgba(0, 0, 0, 1) 70%,
    rgba(0, 0, 0, 0.4) 92%,
    rgba(0, 0, 0, 0) 100%
  );
          mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.65) 8%,
    rgba(0, 0, 0, 1) 28%,
    rgba(0, 0, 0, 1) 70%,
    rgba(0, 0, 0, 0.4) 92%,
    rgba(0, 0, 0, 0) 100%
  );
}

#ted-recording-area:not(.stage-mode) .ted-recording-mist-stage {
  background: transparent;
}

/* Glow disc inside the mist stage — dim it down so the radial halo doesn't
   trace a circle that re-defines the "box". The columns themselves carry
   the presence. */
.ted-recording-mist-stage .kouli-voice-glow {
  opacity: 0.58;
}

/* Inline Shadow-style self-view tile, below the timer. Sized large enough
   that the speaker feels seen — it's a stage presence, not a thumbnail. */
.ted-recording-self-view {
  position: relative;
  width: 100%;
  max-width: min(440px, 92vw);
  aspect-ratio: 4 / 3;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(circle at 50% 26%, rgba(255, 255, 255, 0.07), transparent 45%),
    rgba(255, 255, 255, 0.05);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 -16px 28px rgba(6, 6, 15, 0.35),
    0 18px 38px rgba(0, 0, 0, 0.34);
  color: rgba(255, 255, 255, 0.78);
}

.ted-recording-self-view.is-on {
  box-shadow:
    inset 0 0 0 1px rgba(122, 153, 171, 0.34),
    0 0 0 1px rgba(122, 153, 171, 0.12),
    0 16px 32px rgba(0, 0, 0, 0.32);
}

/* Light recording surface gets a softer card */
#ted-recording-area:not(.stage-mode) .ted-recording-self-view {
  border-color: rgba(161, 86, 247, 0.28);
  background:
    linear-gradient(160deg, rgba(255,255,255,0.94) 0%, rgba(244,240,255,0.96) 50%, rgba(236,247,247,0.94) 100%);
  color: rgba(29, 24, 54, 0.7);
  box-shadow: 0 12px 28px rgba(17, 24, 39, 0.14), 0 4px 10px rgba(161, 86, 247, 0.14);
}

.ted-recording-self-view-header {
  position: absolute;
  inset: 8px 12px auto 12px;
  z-index: 3;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.5);
}

#ted-recording-area:not(.stage-mode) .ted-recording-self-view-header {
  color: rgba(29, 24, 54, 0.46);
}

.ted-recording-self-view-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
  display: none;
}

.ted-recording-self-view-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 0 12px;
}

.ted-recording-self-view-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.45);
}

#ted-recording-area:not(.stage-mode) .ted-recording-self-view-icon {
  color: rgba(29, 24, 54, 0.4);
}

.ted-recording-self-view-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ted-recording-self-view-label {
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.85);
}

#ted-recording-area:not(.stage-mode) .ted-recording-self-view-label {
  color: rgba(29, 24, 54, 0.78);
}

.ted-recording-self-view-hint {
  font-size: 0.74rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.48);
}

#ted-recording-area:not(.stage-mode) .ted-recording-self-view-hint {
  color: rgba(29, 24, 54, 0.46);
}

@media (max-height: 720px) {
  .ted-recording-mist-stage {
    min-height: clamp(180px, 30vh, 260px);
  }
  .ted-recording-self-view {
    max-width: min(360px, 84vw);
  }
}

@media (max-width: 380px) {
  .ted-recording-self-view {
    max-width: 92vw;
  }
}

/* Live KCI in normal Speech (not Stage): full column width, taller, scrollable */
#ted-recording-area:not(.stage-mode) #ted-live-kci-box.ted-live-kci-box {
  width: 100%;
  max-width: 100%;
  margin: 0;
  max-height: min(62vh, 560px);
  overflow-x: hidden;
  overflow-y: auto;
  flex-shrink: 1;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

/*
 * Speech KCI: two columns — give the right column (sparkline + self-view camera) more width.
 */
#ted-recording-area:not(.stage-mode) #ted-live-kci-box .live-kci-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.28fr);
  gap: 10px;
  align-items: start;
}

/* Self-view: user’s camera preview — scales with the wider right column (4:3) */
#ted-recording-area:not(.stage-mode) #ted-live-kci-box .live-kci-right .interview-self-view-wrap {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  max-height: min(36vh, 280px);
  min-height: 0;
  margin: 6px 0 0;
}

#ted-recording-area:not(.stage-mode) #ted-live-kci-box .live-kci-chart-wrap .live-kci-sparkline {
  height: 48px;
}

#ted-recording-area:not(.stage-mode) #ted-live-kci-box .live-kci-left {
  border-bottom: none;
  border-right: 1px solid #f1f5f9;
}

@media (max-width: 340px) {
  #ted-recording-area:not(.stage-mode) #ted-live-kci-box .live-kci-grid {
    grid-template-columns: 1fr;
  }
  #ted-recording-area:not(.stage-mode) #ted-live-kci-box .live-kci-left {
    border-right: none;
    border-bottom: 1px solid #f1f5f9;
  }
}

.ted-recording-immersive.stage-mode #ted-live-kci-box,
#ted-recording-area.stage-mode #ted-live-kci-box {
  display: none !important;
}

.ted-waveform-canvas {
  display: block;
  width: 100%;
  height: 120px;
  border-radius: 12px;
}

/* End is the one primary action; Pause sits beneath as a subtle text link. */
.ted-recording-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  margin-top: 4px;
}

.ted-recording-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}

.ted-recording-btn:active {
  transform: scale(0.98);
}

.ted-recording-btn.ted-recording-end {
  padding: 10px 28px;
  min-width: 96px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 0.92rem;
  box-shadow:
    0 10px 24px rgba(6, 6, 15, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.ted-recording-btn.ted-recording-end:hover {
  background: rgba(255, 255, 255, 0.16);
  box-shadow:
    0 14px 30px rgba(6, 6, 15, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.ted-recording-textlink {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.18s ease;
}

#ted-recording-area:not(.stage-mode) .ted-recording-textlink {
  color: rgba(29, 24, 54, 0.5);
}

.ted-recording-textlink:hover {
  color: rgba(255, 255, 255, 0.85);
}

#ted-recording-area:not(.stage-mode) .ted-recording-textlink:hover {
  color: rgba(29, 24, 54, 0.85);
}

.ted-recording-processing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: var(--muted-foreground);
  font-size: 1rem;
}

.ted-processing-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--kouli-main1);
  border-radius: 50%;
  animation: ted-spin 0.8s linear infinite;
}

@keyframes ted-spin {
  to { transform: rotate(360deg); }
}

/* ========== Stage Mode - Immersive Dark Experience ========== */
.ted-recording-immersive.stage-mode {
  background: linear-gradient(180deg, #08080c 0%, #050507 100%);
  animation: ted-stage-fade-in 0.4s ease-out;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.ted-recording-immersive.stage-mode::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 36% at 50% 20%, rgba(122, 153, 171, 0.16) 0%, transparent 70%);
  pointer-events: none;
}

@keyframes ted-stage-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ted-recording-immersive.stage-mode .ted-recording-countdown {
  color: #fff;
  text-shadow: 0 0 24px rgba(122, 153, 171, 0.5);
}

.ted-recording-immersive.stage-mode .ted-recording-active {
  animation: ted-stage-fade-in 0.5s ease-out;
}

.ted-recording-immersive.stage-mode .ted-recording-timer-wrap {
  position: relative;
}

/* Anchor-aligned: timer stays muted on both surfaces. No glow, no oversize. */
.ted-recording-immersive.stage-mode .ted-recording-timer {
  color: rgba(255, 255, 255, 0.62);
  text-shadow: none;
}

.ted-recording-immersive.stage-mode .ted-recording-timer.urgent {
  color: rgba(255, 138, 140, 0.86);
  text-shadow: none;
}

.ted-recording-live-label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: rgba(122, 153, 171, 0.7);
  margin-top: 6px;
  text-shadow: none;
  opacity: 0.85;
}

.ted-recording-immersive.stage-mode .ted-recording-waveform-wrap {
  position: relative;
  background: transparent;
  box-shadow: 0 0 60px rgba(122, 153, 171, 0.22), inset 0 0 30px rgba(122, 153, 171, 0.07);
  border: 1px solid rgba(122, 153, 171, 0.3);
  border-radius: 20px;
  padding: 24px;
}

.ted-recording-immersive.stage-mode .ted-recording-waveform-wrap::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: radial-gradient(ellipse 90% 70% at 50% 50%, rgba(122, 153, 171, 0.18) 0%, transparent 70%);
  border-radius: 22px;
  pointer-events: none;
}

.ted-recording-immersive.stage-mode .ted-recording-pause {
  display: none;
}

.ted-recording-immersive.stage-mode .ted-recording-controls {
  gap: 12px;
}

.ted-recording-immersive.stage-mode .ted-recording-btn.ted-recording-end {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 20px rgba(6, 6, 15, 0.3);
}

.ted-recording-immersive.stage-mode .ted-recording-btn.ted-recording-end:hover {
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 28px rgba(6, 6, 15, 0.4);
}

.ted-recording-immersive.stage-mode.ted-recording-fade .ted-recording-waveform-wrap {
  opacity: 0;
  transition: opacity 0.5s ease-out;
  transform: translateZ(0);
}

.ted-recording-immersive.stage-mode .ted-recording-processing {
  color: rgba(255, 255, 255, 0.85);
  animation: ted-stage-fade-in 0.4s ease-out;
}

.ted-recording-immersive.stage-mode .ted-processing-spinner {
  border-color: rgba(122, 153, 171, 0.3);
  border-top-color: rgba(122, 153, 171, 0.9);
}

.ted-processing-progress-wrap {
  width: 100%;
  max-width: 280px;
  height: 4px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 12px;
}

.ted-processing-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(122, 153, 171, 0.95), rgba(74, 93, 110, 0.8));
  border-radius: 2px;
  transition: width 0.25s ease-out;
  will-change: width;
  transform: translateZ(0);
}

/* ========== Exit Confirmation Modal ========== */
.ted-exit-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  -webkit-tap-highlight-color: transparent;
}

.ted-exit-modal {
  background: var(--background, #fff);
  border-radius: 20px;
  padding: 24px;
  max-width: 320px;
  width: 100%;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.ted-exit-modal h3 {
  margin: 0 0 12px;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--foreground);
}

.ted-exit-modal-p {
  margin: 0 0 24px;
  font-size: 0.95rem;
  color: var(--muted-foreground);
  line-height: 1.5;
}

.ted-exit-modal-actions {
  display: flex;
  gap: 12px;
}

.ted-exit-modal-resume {
  flex: 1;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--muted);
  color: var(--foreground);
  border: 1px solid var(--border);
  transition: background 0.2s, transform 0.1s;
}

.ted-exit-modal-resume:hover {
  background: rgba(161, 86, 247, 0.08);
}

.ted-exit-modal-resume:active {
  transform: scale(0.98);
}

.ted-exit-modal-end {
  flex: 1;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--kouli-accent, #D8686A);
  color: white;
  border: none;
  transition: background 0.2s, transform 0.1s;
}

.ted-exit-modal-end:hover {
  background: #c2585a;
}

.ted-exit-modal-end:active {
  transform: scale(0.98);
}

/* ============================================================
   Speech mode setup — dark shell (2026-05-27 redesign).

   Brings the "Speak with Impact" setup screen in line with
   Shadow Interview, Confidence Coach, and the Kouli home shell:
   dark gradient background, mist-purple accents, calm typography.
   Scoped to body.kouli-speech-active so the rest of the app shell
   is untouched.
   ============================================================ */

html:has(body.kouli-speech-active) {
  background-color: #050507;
}

body.kouli-speech-active {
  background:
    radial-gradient(circle at 50% 28%, rgba(122, 153, 171, 0.3), rgba(74, 93, 110, 0.14) 30%, transparent 52%),
    linear-gradient(180deg, #08080c 0%, #060609 44%, #040407 100%) !important;
  background-color: #050507 !important;
  background-attachment: fixed;
  color: #fff;
}

body.kouli-speech-active #app-header {
  display: none !important;
}

body.kouli-speech-active::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.32;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent 72%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent 72%);
}

body.kouli-speech-active #ted-mode-page {
  position: relative;
  z-index: 1;
  background: transparent !important;
  min-height: calc(100vh - 78px);
  padding: 0;
  color: #fff;
}

/* The legacy results / recording layers inside #ted-mode-page keep
   their own backgrounds; we only re-skin the setup container. */
.ted-setup-shell {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 18px calc(96px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 22px;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.ted-setup-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
}

.ted-setup-wordmark {
  font-size: 1.35rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-shadow: 0 0 22px rgba(122, 153, 171, 0.18);
  color: #fff;
}

.ted-setup-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding-top: 4px;
}

.ted-setup-kicker {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(122, 153, 171, 0.92);
}

.ted-setup-title {
  margin: 0;
  font-size: clamp(1.7rem, 6vw, 2.1rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.025em;
  background: linear-gradient(90deg, #ffffff 0%, #e2e8f0 58%, #b8c6d4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ted-setup-subtitle {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
  max-width: 32ch;
}

.ted-setup-headphones {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.82rem;
  line-height: 1.2;
  align-self: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.ted-setup-headphones-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: rgba(122, 153, 171, 0.85);
}

.ted-setup-headphones-icon svg {
  width: 100%;
  height: 100%;
}

.ted-setup-timer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 28px 22px 24px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at 50% -10%, rgba(122, 153, 171, 0.22), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 20px 60px -30px rgba(74, 93, 110, 0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.ted-setup-timer-display {
  font-size: clamp(2.6rem, 12vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-shadow: 0 0 32px rgba(122, 153, 171, 0.3);
}

.ted-setup-time-selector {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
}

.ted-setup-time-label {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

.ted-setup-time-dropdown {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background:
    rgba(255, 255, 255, 0.06)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 10px center;
  background-size: 14px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 7px 30px 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  outline: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ted-setup-time-dropdown:focus-visible {
  outline: 2px solid rgba(122, 153, 171, 0.55);
  outline-offset: 2px;
}

.ted-setup-time-dropdown option {
  background: #0e0f13;
  color: #fff;
}

.ted-setup-start-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

/* Scope the new CTA so it overrides the legacy .ted-start-cta. */
.ted-setup-start-section .ted-setup-start-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  max-width: 320px;
  padding: 16px 24px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
  border: none;
  border-radius: 18px;
  cursor: pointer;
  background: linear-gradient(135deg, #00d6b0 0%, #00C4A0 55%, #009e87 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 18px 40px -18px rgba(0, 196, 160, 0.85);
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.15s ease;
  animation: none;
}

.ted-setup-start-section .ted-setup-start-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 22px 50px -18px rgba(0, 196, 160, 1);
}

.ted-setup-start-section .ted-setup-start-cta:active {
  transform: scale(0.985);
}

.ted-setup-start-section .ted-setup-start-cta:disabled {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.7;
}

.ted-setup-start-hint {
  margin: 0;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
}

@media (min-width: 760px) {
  .ted-setup-shell {
    padding-top: 28px;
  }
}

/* ============================================================
   Speech prep screen (2026-06-14).

   Opens after "Start speech" and before the mic/camera prompt,
   so the user confirms ("I'm ready") with full context. Mirrors
   Shadow Interview's #prep-card look (kouli-prep) — neutral grey
   canvas — while keeping the single teal moment on the CTA.
   ============================================================ */
.ted-prep {
  gap: 18px;
}

/* Back / close control in setup + transcript headers.
   Must beat index.html's global `button` rules (padding, width 100% on
   mobile, border:none, var(--primary) fill, invalid --dark-charcoal text). */
#ted-mode-page button.ted-prep-back {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  margin: 0;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.88);
  cursor: pointer;
  box-shadow: none;
  transform: none;
  font: inherit;
  font-weight: inherit;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

#ted-mode-page button.ted-prep-back:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.32);
  color: #fff;
  transform: none;
  box-shadow: none;
}

#ted-mode-page button.ted-prep-back:active:not(:disabled) {
  transform: scale(0.94);
}

#ted-mode-page button.ted-prep-back svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.ted-prep-intro {
  text-align: left;
}

.ted-prep-title {
  margin: 0;
  font-size: clamp(1.7rem, 6vw, 2.1rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 850;
  color: rgba(255, 255, 255, 0.96);
}

.ted-prep-subtitle {
  margin: 10px 0 0;
  font-size: 0.96rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.68);
}

.ted-prep-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ted-prep-item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.ted-prep-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.82);
}

.ted-prep-icon svg {
  width: 20px;
  height: 20px;
}

.ted-prep-body h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.94);
}

.ted-prep-body p {
  margin: 6px 0 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}

.ted-prep-soft {
  color: rgba(255, 255, 255, 0.42);
  font-weight: 500;
  letter-spacing: 0;
}

@media (max-width: 480px) {
  .ted-prep-list { gap: 8px; }
  .ted-prep-item { padding: 12px; }
  .ted-prep-icon { width: 32px; height: 32px; }
}

/* ============================================================
   Speech transcript screen (2026-06-14).

   Optional paste-or-upload step after "Set time". Neutral frosted
   card on the dark shell; the single teal moment stays on the
   "Continue" CTA (reuses .ted-setup-start-cta).
   ============================================================ */
.ted-transcript-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.ted-transcript-upload {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ted-transcript-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px 16px;
  border-radius: 14px;
  border: 1px dashed rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.92rem;
  font-weight: 650;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ted-transcript-button:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.36);
}

.ted-transcript-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ted-transcript-button svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.ted-transcript-status {
  font-size: 0.8rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.6);
}

.ted-transcript-status.is-error {
  color: rgba(244, 162, 97, 0.92);
}

.ted-script-surface {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(8, 8, 18, 0.4);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ted-script-surface:focus-within {
  border-color: rgba(0, 196, 160, 0.45);
  box-shadow: 0 0 0 3px rgba(0, 196, 160, 0.12);
}

.ted-script-surface-status {
  margin: 0;
  padding: 8px 14px 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.55);
}

.ted-script-surface-status.is-error {
  color: rgba(244, 162, 97, 0.92);
}

.ted-script-surface-status[hidden] {
  display: none !important;
}

.ted-script-surface #ted-transcript-input {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  min-height: 200px;
}

.ted-script-surface #ted-transcript-input:focus-visible {
  box-shadow: none;
}

.ted-script-surface #ted-transcript-input[hidden] {
  display: none !important;
}

.ted-script-beats-view {
  padding: 12px 14px;
  min-height: 200px;
  max-height: 320px;
  overflow: auto;
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.86);
  white-space: pre-wrap;
  word-break: break-word;
}

.ted-script-beats-view[hidden] {
  display: none !important;
}

.ted-beat-sheet-legend--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 8px;
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.48);
}

.ted-beat-sheet-legend--inline[hidden] {
  display: none !important;
}

.ted-beat-sheet-legend-hint {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.38);
  font-size: 0.72rem;
}

.ted-transcript-input,
#ted-transcript-input {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 120px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(8, 8, 18, 0.4);
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.92rem;
  line-height: 1.5;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#ted-transcript-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

#ted-transcript-input:focus-visible {
  border-color: rgba(0, 196, 160, 0.6);
  box-shadow: 0 0 0 3px rgba(0, 196, 160, 0.18);
}

.ted-transcript-meta {
  display: flex;
  justify-content: flex-end;
}

.ted-transcript-charcount {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.5);
}

/* Beat sheet — delivery cues on the script upload screen */
.ted-beat-sheet-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}

.ted-beat-sheet-toggle-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ted-beat-sheet-toggle-label {
  font-size: 0.9rem;
  font-weight: 650;
  color: rgba(255, 255, 255, 0.9);
}

.ted-beat-sheet-toggle-hint {
  font-size: 0.78rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.52);
}

.ted-beat-sheet-switch {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  cursor: pointer;
}

.ted-beat-sheet-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.ted-beat-sheet-switch-track {
  display: block;
  width: 46px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: background-color 0.15s ease, border-color 0.15s ease;
  position: relative;
}

.ted-beat-sheet-switch-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  transition: transform 0.15s ease;
}

.ted-beat-sheet-switch input:checked + .ted-beat-sheet-switch-track {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.28);
}

.ted-beat-sheet-switch input:checked + .ted-beat-sheet-switch-track::after {
  transform: translateX(18px);
}

.ted-beat-sheet-switch input:focus-visible + .ted-beat-sheet-switch-track {
  box-shadow: 0 0 0 3px rgba(0, 229, 192, 0.22);
}

.ted-beat-sheet-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(8, 8, 18, 0.35);
}

.ted-beat-sheet-preview[hidden] {
  display: none !important;
}

.ted-beat-sheet-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ted-beat-sheet-preview-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
}

.ted-beat-sheet-body {
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.86);
  max-height: 220px;
  overflow: auto;
}

.ted-beat-sheet-body.is-loading .ted-beat-sheet-message,
.ted-beat-sheet-body .ted-beat-sheet-message {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.88rem;
}

.ted-beat-sheet-body.is-error .ted-beat-sheet-message {
  color: rgba(244, 162, 97, 0.92);
}

.beat-pause {
  display: inline-block;
  margin: 0 0.35em;
  padding: 0 0.45em;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #7A99AB;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: baseline;
  line-height: 1.6;
}

.beat-pause--legend {
  margin: 0;
}

.beat-emphasis-strong {
  font-weight: 650;
  color: #B8CDD8;
}

.beat-emphasis-soft {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(184, 205, 216, 0.55);
}

.ted-beat-sheet-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.48);
}

.ted-beat-sheet-legend-item strong,
.ted-beat-sheet-legend-item u {
  font-size: inherit;
}

/* Script version tabs — original vs shaped arc */
.ted-script-version-tabs {
  display: flex;
  gap: 8px;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}

.ted-script-version-tabs[hidden] {
  display: none !important;
}

.ted-script-version-tab {
  flex: 1;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  border-radius: 9px;
  padding: 9px 12px;
  background: transparent;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.86rem;
  font-weight: 650;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.ted-script-version-tab:hover {
  color: rgba(255, 255, 255, 0.82);
}

.ted-script-version-tab.is-active {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.ted-script-version-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 229, 192, 0.22);
}

.ted-script-prep-status {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.55);
}

.ted-script-prep-status[hidden] {
  display: none !important;
}

.ted-arc-changes--inline {
  margin: 8px 0 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.ted-transcript-continue-note {
  margin: 0 0 10px;
  font-size: 0.82rem;
  color: #7A99AB;
  text-align: center;
}

.ted-transcript-continue-note[hidden] {
  display: none !important;
}

.ted-delivery-plan-section {
  margin-bottom: 16px;
  padding: 16px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.ted-delivery-plan-section[hidden] {
  display: none !important;
}

.ted-delivery-plan-kicker {
  margin: 0 0 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7A99AB;
}

.ted-delivery-plan-title {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 650;
  color: #B8CDD8;
}

.ted-delivery-plan-summary {
  margin: 0 0 12px;
  font-size: 0.86rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
}

.ted-delivery-plan-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ted-delivery-plan-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.18);
}

.ted-delivery-plan-outcome {
  grid-row: span 2;
  align-self: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7A99AB;
}

.ted-delivery-plan-item--landed .ted-delivery-plan-outcome {
  color: #00C4A0;
}

.ted-delivery-plan-after {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.78);
}

.ted-delivery-plan-note {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.52);
}

.ted-delivery-plan-list--flip {
  margin-top: 10px;
  max-height: min(240px, 42vh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.ted-results-dimension-cards {
  margin-top: 0;
}

.ted-flip-back-tips {
  margin: 10px 0 0;
  padding-left: 1.1rem;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.82rem;
  line-height: 1.45;
}

.ted-flip-back-tips li + li {
  margin-top: 6px;
}

/* Shape my arc — script rewrite preview */
.ted-arc-preview {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(8, 8, 18, 0.35);
}

.ted-arc-preview[hidden] {
  display: none !important;
}

.ted-arc-preview.is-loading .ted-arc-message,
.ted-arc-message {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.88rem;
  line-height: 1.5;
}

.ted-arc-preview.is-error .ted-arc-message {
  color: rgba(244, 162, 97, 0.92);
}

.ted-arc-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ted-arc-preview-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
}

.ted-arc-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 640px) {
  .ted-arc-compare {
    grid-template-columns: 1fr;
  }
}

.ted-arc-pane {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.ted-arc-pane-label {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.ted-arc-pane--shaped .ted-arc-pane-label {
  color: rgba(184, 205, 216, 0.72);
}

.ted-arc-pane-body {
  max-height: 180px;
  overflow: auto;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.86rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

.ted-arc-pane--shaped .ted-arc-pane-body {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.045);
}

.ted-arc-changes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ted-arc-changes li {
  font-size: 0.8rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.62);
}

.ted-arc-change-beat {
  display: inline-block;
  margin-right: 0.35em;
  padding: 0.05em 0.4em;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #7A99AB;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ted-arc-status-note {
  margin: 0;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.48);
}

.ted-arc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ted-arc-btn {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 0.86rem;
  font-weight: 650;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ted-arc-btn--primary {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
}

.ted-arc-btn--primary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
}

.ted-arc-btn--ghost {
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
}

.ted-arc-btn--ghost:hover {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ted-transcript-skip {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  padding: 4px 8px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s ease;
}

.ted-transcript-skip:hover {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================
   Speech analysing overlay (2026-05-27 redesign).

   A single dark fullscreen screen with a flashlight-highlight
   label — same recipe as Shadow Interview's .kouli-analyzing.
   Sits above all Speech UI (recording layer, results container)
   so the user only ever sees one calm "Analysing your speech"
   screen between Stop and the rendered results.
   ============================================================ */

.ted-analyzing.hidden { display: none !important; }

.ted-analyzing {
  position: fixed;
  inset: 0 0 calc(60px + env(safe-area-inset-bottom, 0px)) 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 18%, rgba(122, 153, 171, 0.2), rgba(74, 93, 110, 0.1) 32%, transparent 55%),
    #050507;
  padding: 0 24px;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  animation: tedAnalyzingFade 600ms ease-out;
}

.ted-analyzing-label {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.35) 35%,
    #ffffff 50%,
    rgba(255, 255, 255, 0.35) 65%,
    rgba(255, 255, 255, 0.35) 100%
  );
  background-size: 220% 100%;
  background-position: 140% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-align: center;
  animation: tedLabelFlashlight 2.8s ease-in-out infinite;
}

@keyframes tedAnalyzingFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes tedLabelFlashlight {
  0%   { background-position: 140% 50%; }
  100% { background-position: -140% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .ted-analyzing { animation: none; }
  .ted-analyzing-label {
    animation: none;
    background: none;
    color: rgba(255, 255, 255, 0.85);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.85);
  }
}

/* ============================================================
   Speech "Too short to coach" overlay (2026-05-29).

   Same calm dark family as .ted-analyzing — used when the
   transcript is below MIN_WORDS_FOR_TED_ANALYSIS so we never
   render a meaningless score card for a few seconds of speech.
   ============================================================ */

.ted-too-short.hidden { display: none !important; }

.ted-too-short {
  position: fixed;
  inset: 0 0 calc(60px + env(safe-area-inset-bottom, 0px)) 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 18%, rgba(122, 153, 171, 0.2), rgba(74, 93, 110, 0.1) 32%, transparent 55%),
    #050507;
  padding: 0 28px;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  animation: tedAnalyzingFade 600ms ease-out;
}

.ted-too-short-card {
  max-width: 360px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.ted-too-short-label {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.35) 35%,
    #ffffff 50%,
    rgba(255, 255, 255, 0.35) 65%,
    rgba(255, 255, 255, 0.35) 100%
  );
  background-size: 220% 100%;
  background-position: 140% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: tedLabelFlashlight 2.8s ease-in-out infinite;
}

.ted-too-short-body {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

.ted-too-short-retry {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}

.ted-too-short-retry:hover,
.ted-too-short-retry:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.08);
}

.ted-too-short-retry:active {
  background: rgba(255, 255, 255, 0.16);
}

@media (prefers-reduced-motion: reduce) {
  .ted-too-short { animation: none; }
  .ted-too-short-label {
    animation: none;
    background: none;
    color: rgba(255, 255, 255, 0.92);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.92);
  }
}

/* ============================================================
   Speech results — coach-first debrief (2026-05-27 redesign).

   The results page now follows the Shadow Interview debrief pattern:
   Talk-to-KouLi mist first, one readiness line, three coach cards,
   compact themes/inspiration, and a collapsed transcript. Detailed
   metrics stay available through the existing full breakdown modal.
   ============================================================ */

body.kouli-speech-active #ted-results-container {
  gap: 16px;
  width: 100%;
  max-width: 520px !important;
  padding: max(16px, env(safe-area-inset-top)) 18px calc(104px + env(safe-area-inset-bottom, 0px)) !important;
  color: #fff;
  background: transparent !important;
}

body.kouli-speech-active #ted-score-section {
  order: 1;
  margin-bottom: 0 !important;
}

body.kouli-speech-active #ted-analysis-cards {
  order: 2;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  margin-bottom: 0 !important;
}

/* Replay sits between TED stage check (order 2) and transcription
   (order 4). Without this, the slot inherits the default `order: 0`
   and floats to the very top of the flex container — above the mist —
   regardless of where it lives in the DOM. */
body.kouli-speech-active #ted-speech-replay-slot {
  order: 3;
  margin-bottom: 0 !important;
}

body.kouli-speech-active #ted-transcription-section {
  order: 4;
  margin-bottom: 0 !important;
  border-radius: 18px !important;
  overflow: visible !important;
  box-shadow: none !important;
}

.ted-results-coach-first {
  padding: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ted-results-mist-button {
  position: relative;
  width: 100%;
  height: clamp(180px, 28vh, 240px);
  margin: clamp(28px, 6vw, 48px) 0 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  isolation: isolate;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

.ted-results-mist-button:focus-visible {
  outline: 3px solid rgba(0, 196, 160, 0.85);
  outline-offset: 6px;
  border-radius: 28px;
}

.ted-results-mist {
  position: absolute;
  inset: 18px 0 4px;
  overflow: hidden;
  filter: saturate(1.32);
  animation: tedResultsMistBreathe 5.2s ease-in-out infinite;
}

.ted-results-mist::before,
.ted-results-mist::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 92%;
  height: 44%;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, rgba(45, 212, 191, 0.32), rgba(0, 196, 160, 0.42), rgba(34, 211, 238, 0.24), transparent);
  filter: blur(22px);
  opacity: 0.78;
  animation: tedResultsMistDrift 8s ease-in-out infinite alternate;
}

.ted-results-mist::after {
  width: 78%;
  height: 64%;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.22), rgba(0, 196, 160, 0.46), rgba(56, 189, 248, 0.24), transparent);
  filter: blur(34px);
  opacity: 0.5;
  animation-duration: 11s;
  animation-direction: alternate-reverse;
}

.ted-results-mist-col {
  position: absolute;
  left: var(--mist-left);
  bottom: 12%;
  width: clamp(10px, 3.8vw, 18px);
  height: calc(62px + (var(--mist-i) * 4px));
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0), var(--mist-color), rgba(255,255,255,0));
  filter: blur(8px);
  opacity: 0.46;
  mix-blend-mode: screen;
  animation: tedResultsMistColumn 4.6s ease-in-out infinite;
  animation-delay: var(--mist-delay);
}

.ted-results-mist-label {
  position: absolute;
  left: 50%;
  top: 51%;
  z-index: 2;
  transform: translate(-50%, -50%);
  padding: 8px 18px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: rgba(8, 8, 18, 0.18);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.27em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 0 18px rgba(255,255,255,0.45), 0 0 42px rgba(0, 196, 160, 0.8);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 6px 24px rgba(8,8,18,0.32);
  white-space: nowrap;
}

.ted-results-mist-button:hover .ted-results-mist { filter: saturate(1.55) brightness(1.08); }
.ted-results-mist-button:active .ted-results-mist { transform: scale(0.985); }

@keyframes tedResultsMistBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}

@keyframes tedResultsMistDrift {
  0% { transform: translate(-58%, -50%); }
  100% { transform: translate(-42%, -50%); }
}

@keyframes tedResultsMistColumn {
  0%, 100% { opacity: 0.32; transform: translateX(-50%) scaleY(0.85); }
  50% { opacity: 0.7; transform: translateX(-50%) scaleY(1.15); }
}

.ted-results-readiness,
.ted-storytelling-card,
.ted-results-theme-card,
.ted-results-inspiration-card,
.ted-results-transcript-details {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
    rgba(8, 8, 18, 0.74);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  color: #fff;
}

.ted-results-readiness {
  padding: 19px 18px 17px;
}

.ted-results-readiness-kicker,
.ted-results-card-kicker {
  margin: 0 0 8px;
  font-size: 0.72rem;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(122, 153, 171, 0.85);
}

.ted-results-readiness-line {
  margin: 0 0 14px;
  font-size: clamp(1.34rem, 6vw, 1.78rem);
  line-height: 1.12;
  letter-spacing: -0.045em;
  font-weight: 820;
  color: rgba(255, 255, 255, 0.96);
}

.ted-results-progress-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(122, 153, 171, 0.32);
  background: rgba(74, 93, 110, 0.18);
  color: rgba(226, 232, 240, 0.92);
  font-size: 0.76rem;
  font-weight: 750;
  letter-spacing: 0.03em;
}

.ted-results-coach-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.ted-results-coach-card {
  padding: 16px 17px;
  border-radius: 17px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
}

.ted-results-coach-card h3,
.ted-storytelling-card h3,
.ted-results-inspiration-card h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.96);
}

.ted-results-coach-card p,
.ted-storytelling-note,
.ted-results-theme-card p,
.ted-results-inspiration-card p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.68);
}

.ted-storytelling-card {
  padding: 18px;
}

.ted-storytelling-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.ted-storytelling-head h3 {
  font-size: 1.8rem;
  line-height: 1;
  margin-bottom: 0;
}

.ted-storytelling-head h3 span {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.48);
  margin-left: 3px;
}

.ted-storytelling-head button {
  width: auto;
  min-height: 0;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.13);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.78);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.ted-story-arc {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin: 0 0 12px;
}

.ted-story-arc-segment {
  min-height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 7px 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(to top, rgba(122, 153, 171, calc((var(--segment-score, 0) / 100) * 0.6)), rgba(255,255,255,0.035)),
    rgba(255,255,255,0.03);
}

.ted-story-arc-segment.is-strong {
  border-color: rgba(122, 153, 171, 0.32);
}

.ted-story-arc-segment.is-missing {
  opacity: 0.58;
}

.ted-story-arc-segment span {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.ted-results-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.ted-results-actions .ted-practice-again-cta,
.ted-results-actions .ted-breakdown-cta {
  max-width: none;
  margin: 0;
  width: 100%;
}

.ted-results-actions .ted-practice-again-cta {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.ted-results-actions .ted-practice-again-cta:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}

.ted-results-actions .ted-breakdown-cta {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.74);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

/* ============================================================
   Coach card flip mechanic (2026-05-29).

   All four results coach cards (Confidence / Best moment / Main fix
   / Next rep) are flippable. Tapping anywhere on the card flips it
   to its data-side; tapping the "← Back" affordance returns to the
   front. The outer .ted-results-coach-card supplies the perspective
   container (chrome moves to the inner faces so backface-visibility
   has something to clip against).

   Reduced motion: the flip is replaced with an instant cross-fade
   between faces, no rotateY. Same ARIA states apply.
   ============================================================ */

.ted-results-coach-card.ted-flip-card {
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
  perspective: 1200px;
  cursor: pointer;
  outline: none;
}

.ted-results-coach-card.ted-flip-card:focus-visible .ted-flip-card-inner {
  box-shadow: 0 0 0 2px rgba(122, 153, 171, 0.55);
  border-radius: 17px;
}

/*
 * Inner has its height set explicitly by JS (see attachTedFlipCardHandlers).
 * We can't use a grid stack here because that sizes the inner to the
 * TALLER of the two faces — leaving the front looking padded and oversized
 * before the user flips. Instead, faces are absolute-positioned (so neither
 * contributes to layout) and JS sets inner.style.height to whichever face
 * is currently visible. The `height` transition matches the `transform`
 * transition so the card morphs smoothly during the flip.
 */
.ted-flip-card-inner {
  position: relative;
  transform-style: preserve-3d;
  transition:
    transform 700ms cubic-bezier(0.55, 0.055, 0.1, 1),
    height 700ms cubic-bezier(0.55, 0.055, 0.1, 1);
}

.ted-flip-card.is-flipped .ted-flip-card-inner {
  transform: rotateY(180deg);
}

.ted-flip-card-front,
.ted-flip-card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  padding: 16px 17px;
  border-radius: 17px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.ted-flip-card-front h3,
.ted-flip-card-back h3,
.ted-flip-card-back-title {
  margin: 0 0 8px;
  font-size: 1.05rem;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.96);
}

.ted-flip-card-front p,
.ted-flip-card-back p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.68);
}

.ted-flip-card-back {
  transform: rotateY(180deg);
}

.ted-flip-card-hint {
  margin-top: 12px;
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  font-weight: 800;
  user-select: none;
}

.ted-flip-card-back-btn {
  appearance: none;
  -webkit-appearance: none;
  margin: 12px 0 0;
  padding: 6px 0 0;
  background: none;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-align: left;
}

.ted-flip-card-back-btn:hover,
.ted-flip-card-back-btn:focus {
  outline: none;
  color: rgba(255, 255, 255, 0.95);
}

/* Storytelling coach card — back-face track sections.
   Each track (Structure / Depth / Proof) gets a small uppercase header,
   a hairline divider between tracks, and pill-styled chips for the STAR
   "missing components" list. Visual register matches existing card
   primitives: kicker styling mirrors .ted-results-readiness-kicker, and
   the divider mirrors the .ted-flip-card-hint border-top hairline. */
.ted-card-track-label {
  margin: 0 0 8px;
  font-size: 0.72rem;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.58);
}

.ted-card-track-divider {
  appearance: none;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin: 14px 0;
  height: 0;
  background: none;
}

.ted-star-gap {
  display: inline-block;
  margin: 0 6px 6px 0;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Confidence card — four sub-dimension bars (back face).
   Bars use the same purple family as the rest of the page; no
   traffic-light colors. Numbers are right-aligned for scannability.
   Tightened spacing (2026-05-29) so the back doesn't tower over the
   front; the dynamic-height flip animates the difference but a smaller
   delta makes the flip feel calmer. */
.ted-flip-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 6px 0 0;
}

.ted-flip-bar {
  display: grid;
  grid-template-columns: 100px 1fr 26px;
  align-items: center;
  gap: 9px;
}

.ted-flip-bar label {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.66);
  font-weight: 600;
  letter-spacing: 0.005em;
}

.ted-flip-bar-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.ted-flip-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(122, 153, 171, 0.85) 0%, rgba(74, 93, 110, 0.95) 100%);
  transition: width 600ms cubic-bezier(0.4, 0.0, 0.1, 1);
}

.ted-flip-bar-value {
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.86);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Back-side score block (used by Best moment and Main fix). */
.ted-flip-back-score {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 6px 0 10px;
}

.ted-flip-back-score-num {
  font-size: 1.9rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: rgba(255, 255, 255, 0.96);
}

.ted-flip-back-score-unit {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.46);
  font-weight: 600;
}

.ted-flip-back-line {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.68);
}

.ted-flip-back-title {
  margin: 0 0 4px;
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.94);
}

/* Next rep — drill list (back face). */
.ted-flip-back-sublabel {
  margin: 0 0 8px;
  font-size: 0.68rem;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.46);
}

.ted-flip-back-drills {
  margin: 0;
  padding: 0 0 0 1.15rem;
  list-style: decimal;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ted-flip-back-drills li {
  font-size: 0.88rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.78);
  padding-left: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .ted-flip-card-inner {
    transform: none !important;
    transition: none;
  }
  .ted-flip-card-front,
  .ted-flip-card-back {
    transform: none !important;
    transition: opacity 220ms ease;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
  }
  .ted-flip-card-back { opacity: 0; pointer-events: none; }
  .ted-flip-card.is-flipped .ted-flip-card-front { opacity: 0; pointer-events: none; }
  .ted-flip-card.is-flipped .ted-flip-card-back { opacity: 1; pointer-events: auto; }
  .ted-flip-bar-fill { transition: none; }
}

/* ============================================================
   See full breakdown — text link variant (2026-05-29).

   Replaces the heavy outlined `.ted-breakdown-cta` button on the
   results page. Same pattern as the recording surface (End primary
   pill, Pause text link). Keeps Try again as the single primary
   action so the page has one visual centre of gravity.
   ============================================================ */

.ted-results-actions .ted-breakdown-link {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  padding: 4px 0 0;
  margin: 0 auto;
  width: auto;
  min-height: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: color 160ms ease;
  text-align: center;
  display: block;
}

.ted-results-actions .ted-breakdown-link:hover,
.ted-results-actions .ted-breakdown-link:focus {
  outline: none;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.ted-results-actions .ted-breakdown-link:active {
  color: rgba(255, 255, 255, 1);
}

/* ============================================================
   Going deeper — themes + inspiration combined (2026-05-29).

   Lighter chrome than the four coach cards above. Single quiet
   section with a kicker, sub-labelled themes and inspiration
   blocks. Sits clearly secondary to the spine (Confidence /
   Best moment / Main fix / Next rep).
   ============================================================ */

.ted-results-going-deeper {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(8, 8, 18, 0.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
  padding: 18px 17px 16px;
  color: #fff;
}

.ted-results-going-deeper-kicker {
  margin: 0 0 14px;
  font-size: 0.7rem;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(122, 153, 171, 0.8);
}

.ted-results-going-deeper-themes {
  margin: 0 0 16px;
}

.ted-results-going-deeper-inspiration {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 14px;
}

.ted-results-going-deeper-sublabel {
  margin: 0 0 8px;
  font-size: 0.7rem;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.46);
}

.ted-results-going-deeper-inspiration h4 {
  margin: 0 0 4px;
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.94);
}

.ted-results-going-deeper-inspiration p {
  margin: 0 0 8px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
}

.ted-results-going-deeper-watch {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: rgba(122, 153, 171, 0.92);
  text-decoration: none;
}

.ted-results-going-deeper-watch:hover,
.ted-results-going-deeper-watch:focus {
  text-decoration: underline;
  text-underline-offset: 3px;
  outline: none;
}

.ted-results-going-deeper .ted-results-theme-pills {
  margin: 0;
}

.ted-results-theme-card,
.ted-results-inspiration-card {
  padding: 17px;
}

.ted-results-theme-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

.ted-results-theme-pills span {
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.78rem;
  font-weight: 700;
}

.ted-results-inspiration-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 13px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.78rem;
}

.ted-results-inspiration-meta a {
  color: rgba(122, 153, 171, 0.92);
  font-weight: 750;
  text-decoration: none;
}

.ted-results-transcript-details {
  padding: 0;
  overflow: hidden;
}

.ted-results-transcript-details summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 17px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 750;
}

.ted-results-transcript-details summary::-webkit-details-marker {
  display: none;
}

.ted-results-transcript-details summary small {
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.78rem;
  font-weight: 650;
}

.ted-results-transcript-toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 0 17px 10px;
}

.ted-results-transcript-toolbar button {
  width: auto;
  min-height: 0;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.7);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.ted-results-transcript-details .transcription-content {
  padding: 0 17px 17px;
}

.ted-results-transcript-details .transcription-content p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.65;
}

@media (prefers-reduced-motion: reduce) {
  .ted-results-mist,
  .ted-results-mist::before,
  .ted-results-mist::after,
  .ted-results-mist-col {
    animation: none;
  }
}

/* =====================================================================
   "Ready for the TED-stage?" — flippable composite card

   Replaces the legacy Going Deeper / Inspiration block. Uses the same
   .ted-flip-card mechanic as the four coach cards so flipping behaves
   identically (front -> back, ARIA, keyboard, reduced-motion). The
   front carries the composite score + closest match. The back shows
   the per-component bars, the top three TED matches, and topics.
   ===================================================================== */

/* Per the new-anchor style guide:
   - "Use metrics sparingly." → composite score is hidden until the
     user flips the card. The front carries only title + closest match.
   - "Less polish. More presence." → no corporate badge / logo lockup.
   - "no heavy numbers unless necessary" → no 67/100 hero number.
   - "Use warm red sparingly for states." → no red surfaces here. */
.ted-stage-section { margin: 0; }

.ted-stage-front,
.ted-stage-back {
  padding: 22px 22px 26px;
}

.ted-stage-kicker {
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ted-stage-title {
  margin: 0 0 6px;
  color: rgba(255, 255, 255, 0.96);
  font-size: clamp(1.05rem, 4.4vw, 1.3rem);
  font-weight: 750;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

/* Quiet sub-line beneath the TED-stage title. Honest descriptor of
   what the card compares against, presented as a soft caption rather
   than an uppercase tracking kicker so the title stays the anchor. */
.ted-stage-front-sub {
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.84rem;
  line-height: 1.45;
  letter-spacing: 0;
}

.ted-stage-closest {
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.92rem;
  line-height: 1.5;
}

.ted-stage-closest-label {
  display: block;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.ted-stage-closest a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.22);
  text-underline-offset: 2px;
}

.ted-stage-closest--empty {
  color: rgba(255, 255, 255, 0.5);
}

.ted-stage-back-score {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}

.ted-stage-back-score-num {
  font-size: clamp(1.6rem, 6vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.96);
  line-height: 1;
}

.ted-stage-back-score-unit {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
}

.ted-stage-back-score-band {
  margin-left: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.ted-stage-back-label {
  margin: 14px 0 8px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ted-stage-bars { margin-top: 4px; }

.ted-stage-empty {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
}

.ted-stage-matches {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ted-stage-matches li {
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.ted-stage-matches a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.ted-stage-matches li:not(:has(a)) {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ted-stage-match-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.ted-stage-match-title {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
}

.ted-stage-match-meta {
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.78rem;
  line-height: 1.3;
}

/* Quiet glass chip per "Pills" rules in the style guide. No red. */
.ted-stage-match-sim {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.ted-stage-topics { margin-top: 14px; }

.ted-stage-topics .ted-results-theme-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ted-stage-topics .ted-results-theme-pills span {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

@media (max-width: 480px) {
  .ted-stage-front,
  .ted-stage-back {
    padding: 18px 18px 22px;
  }

  .ted-stage-matches a {
    gap: 10px;
  }

  .ted-stage-match-title {
    font-size: 0.88rem;
  }
}

/* =====================================================================
   Stage 1 — Full-screen self-view mode

   Pure visual mode change: same MediaStream, same recording flow, same
   controls. We just expand `.ted-recording-self-view` to fill the
   immersive recording surface, hide the mist + global recording-exit
   button, and float the timer + End/Pause + minimize button on a
   frosted-glass scrim so the camera stays the dominant visual.
   ===================================================================== */

/* Enter button: frosted pill nested in the top-right of the inline
   self-view tile. Always shown so users can discover the affordance
   even before the camera stream attaches — tapping with no camera
   simply shows the placeholder filling the screen, which is honest
   feedback that they need to enable the camera. */
.ted-recording-fullscreen-toggle {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(8, 8, 16, 0.36);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  backdrop-filter: blur(8px) saturate(150%);
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  cursor: pointer;
  opacity: 0.78;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 160ms ease, background 160ms ease, transform 160ms ease, border-color 160ms ease, color 160ms ease;
}

.ted-recording-fullscreen-toggle:hover,
.ted-recording-fullscreen-toggle:focus-visible {
  opacity: 1;
  background: rgba(15, 15, 25, 0.55);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
  outline: none;
}

.ted-recording-fullscreen-toggle:active {
  transform: scale(0.96);
}

.ted-recording-fullscreen-toggle-icon {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  opacity: 0.85;
}

.ted-recording-fullscreen-toggle-label {
  display: inline-block;
}

/* Light recording surface: tweak so the pill stays readable but quiet
   on the soft gradient when stageMode is off. */
#ted-recording-area:not(.stage-mode) .ted-recording-fullscreen-toggle {
  background: rgba(29, 24, 54, 0.32);
  border-color: rgba(29, 24, 54, 0.16);
  color: rgba(29, 24, 54, 0.7);
}

#ted-recording-area:not(.stage-mode) .ted-recording-fullscreen-toggle:hover,
#ted-recording-area:not(.stage-mode) .ted-recording-fullscreen-toggle:focus-visible {
  background: rgba(29, 24, 54, 0.5);
  border-color: rgba(29, 24, 54, 0.28);
  color: rgba(29, 24, 54, 0.92);
}

/* Already inside fullscreen — the exit pill takes over. */
#ted-recording-area.is-stage-fullscreen .ted-recording-fullscreen-toggle {
  display: none;
}

/* Exit button: only rendered when the recording area is in
   is-stage-fullscreen mode. Sits where the global recording-exit button
   normally lives so the user always finds the dismissal in the same
   corner. */
.ted-recording-fullscreen-exit {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top, 0px));
  right: calc(16px + env(safe-area-inset-right, 0px));
  z-index: 12;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(15, 15, 25, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 160ms ease, transform 160ms ease, border-color 160ms ease;
}

.ted-recording-fullscreen-exit svg {
  width: 14px;
  height: 14px;
}

.ted-recording-fullscreen-exit:hover,
.ted-recording-fullscreen-exit:focus-visible {
  background: rgba(28, 28, 45, 0.72);
  border-color: rgba(255, 255, 255, 0.36);
  outline: none;
}

.ted-recording-fullscreen-exit:active {
  transform: scale(0.96);
}

#ted-recording-area.is-stage-fullscreen .ted-recording-fullscreen-exit {
  display: inline-flex;
}

/* Hide the global recording-exit (✕) while in fullscreen so it doesn't
   compete with the minimize pill. The user must minimize first, then
   exit the recording — protects from accidental session ends. */
#ted-recording-area.is-stage-fullscreen #ted-recording-exit-btn {
  display: none;
}

/* Expand the self-view to fill the recording surface. We use absolute
   positioning instead of the browser's Fullscreen API so we keep
   control over orientation handling and don't fight Safari's escape
   gestures. The video's existing object-fit: cover + scaleX(-1) keeps
   the mirroring intact. */
#ted-recording-area.is-stage-fullscreen .ted-recording-self-view {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  border: none;
  box-shadow: none;
  z-index: 1;
}

/* The "SELF VIEW" header label is noise once the video fills the
   frame — hide it. */
#ted-recording-area.is-stage-fullscreen .ted-recording-self-view-header {
  display: none;
}

/* Hide the mist column in fullscreen — the camera is the stage. */
#ted-recording-area.is-stage-fullscreen .ted-recording-mist-stage {
  display: none;
}

/* Hide live KCI box too if it happens to be visible — fullscreen is
   meant to be calm. */
#ted-recording-area.is-stage-fullscreen .ted-live-kci-box {
  display: none !important;
}

/* Float the timer wrap in the bottom-right with a frosted-glass chip.
   Override the centered hero treatment from .ted-recording-timer-wrap. */
#ted-recording-area.is-stage-fullscreen .ted-recording-timer-wrap {
  position: absolute;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  right: calc(20px + env(safe-area-inset-right, 0px));
  top: auto;
  left: auto;
  margin: 0;
  padding: 9px 13px;
  width: auto;
  min-width: 0;
  max-width: none;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(15, 15, 25, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
  z-index: 11;
  text-align: center;
}

#ted-recording-area.is-stage-fullscreen .ted-recording-timer {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  margin: 0;
  text-shadow: none;
}

#ted-recording-area.is-stage-fullscreen .ted-recording-live-label {
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 2px;
}

/* End + Pause sit in a matching frosted housing, bottom-center. */
#ted-recording-area.is-stage-fullscreen .ted-recording-controls {
  position: absolute;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 10px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(15, 15, 25, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
}

#ted-recording-area.is-stage-fullscreen .ted-recording-end {
  /* Compact-but-tappable End pill in fullscreen. */
  padding: 9px 22px;
  font-size: 0.92rem;
  border-radius: 999px;
}

#ted-recording-area.is-stage-fullscreen .ted-recording-pause {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.78);
}

/* Narrow phones: keep timer + controls from kissing each other. */
@media (max-width: 380px) {
  #ted-recording-area.is-stage-fullscreen .ted-recording-timer-wrap {
    padding: 7px 11px;
  }
  #ted-recording-area.is-stage-fullscreen .ted-recording-timer {
    font-size: 1.2rem;
  }
  #ted-recording-area.is-stage-fullscreen .ted-recording-controls {
    padding: 8px 14px;
  }
  #ted-recording-area.is-stage-fullscreen .ted-recording-end {
    padding: 8px 18px;
    font-size: 0.86rem;
  }
}

/* Browsers without backdrop-filter (older Firefox, some Android WebViews):
   fall back to a denser solid scrim so labels still read against the
   video. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #ted-recording-area.is-stage-fullscreen .ted-recording-timer-wrap,
  #ted-recording-area.is-stage-fullscreen .ted-recording-controls,
  .ted-recording-fullscreen-exit,
  .ted-recording-fullscreen-toggle {
    background: rgba(8, 8, 16, 0.78);
  }
}

/* =====================================================================
   Mobile sizing safety net
   ---------------------------------------------------------------------
   `index.html` ships a legacy global rule inside @media (max-width:480px)
   that sets `button { width: 100%; justify-content: center; }`. That rule
   was meant for `.button-group` stacks but bleeds onto every <button> on
   the page. Speech-mode floating pills (Full screen toggle, fullscreen
   Exit) and recording controls must stay content-sized so they don't
   stretch into wide banners on phones. Class selectors beat the bare
   `button` selector for the `width` property — no !important needed.
   ===================================================================== */
.ted-recording-fullscreen-toggle,
.ted-recording-fullscreen-exit,
.ted-recording-btn,
.ted-recording-btn.ted-recording-end,
.ted-recording-textlink,
.ted-recording-pause {
  width: auto;
}

/* Narrow phones: tighten the floating Full screen pill and the
   fullscreen Exit pill so they read as quiet affordances rather than
   shouting controls. */
@media (max-width: 480px) {
  #ted-mode-page button.ted-prep-back {
    width: 36px;
    min-width: 36px;
    max-width: 36px;
    justify-content: center;
  }

  .ted-recording-fullscreen-toggle {
    top: 6px;
    right: 6px;
    padding: 4px 9px 4px 8px;
    font-size: 0.66rem;
    gap: 4px;
  }
  .ted-recording-fullscreen-toggle-icon {
    width: 10px;
    height: 10px;
  }
  /* Sit the Exit pill comfortably below the iOS notch / Android status bar. */
  #ted-recording-area.is-stage-fullscreen .ted-recording-fullscreen-exit {
    top: calc(12px + env(safe-area-inset-top, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
    padding: 7px 13px 7px 11px;
    font-size: 0.74rem;
  }
}