/* =========================================================================
   ROSIE — Live call-flow light theme

   The call-flow screens (New Call · Call In Progress · Post-Call Analysis ·
   Training) were originally dark, sitting on the dark app shell. The other
   four sections (My Scorecard, Team Dashboard, Evaluations, Sim Training)
   are LIGHT "report" screens. This file brings the live flow into that same
   light design system.

   Approach mirrors reports.css: the call-flow components are written almost
   entirely against the dark design tokens (var(--surface), var(--text), …),
   so rather than rewrite ~25 component files we REDEFINE those token names to
   light values, scoped to the `.live-screen` subtree. The palette is the same
   one reports.css uses (design_system/colors_and_type.css — paper / ink /
   teal / coral / gold / KSA fills). A small tail of rules fixes the handful
   of places that hardcoded dark colors instead of going through a token.

   Nothing here leaks outside `.live-screen`, so the dark app shell (navy
   header, footer) and the Picture-in-Picture HUD popup (body.pip, a separate
   window that clones the dark :root tokens) are untouched.
   ========================================================================= */

.live-screen {
  /* ---- Surfaces -------------------------------------------------------- */
  /* --bg doubles as the "contrast colour on top of an accent fill" in the
     components (e.g. `.mode-btn.active { color: var(--bg) }`), so flipping it
     to paper keeps light text reading on the teal/blue fills. */
  --bg:             #F8F6F2;              /* paper / page base */
  --surface:        #ffffff;              /* cards / panels */
  --surface-raised: #F4F1EC;              /* inset fields, toggle tracks, code */
  --surface-hover:  #FBFAF8;

  /* ---- Borders (colour values, like reports) --------------------------- */
  --border:         rgba(26, 46, 74, 0.09);
  --border-emph:    rgba(26, 46, 74, 0.15);

  /* ---- Text — ink ramp ------------------------------------------------- */
  --text:           #1A2E4A;
  --text-dim:       #3D5068;
  --text-muted:     #6B7E93;
  --text-faint:     #A8B4C2;

  /* ---- Teal — success / positive / agent / "go" ------------------------ */
  --teal:           #2A9D8F;              /* reports' teal-600 */
  --teal-dark:      #1F7A6F;
  --teal-soft:      #EBF7F6;              /* teal-050 */
  --teal-border:    rgba(42, 157, 143, 0.32);
  --teal-glow:      rgba(42, 157, 143, 0.22);

  /* Aliases — keep accent == teal as the dark theme did, so the live flow
     reads with one coherent teal interactive identity (reports lead with
     cyan; both share this teal for success). */
  --accent:         var(--teal);
  --accent-dark:    var(--teal-dark);
  --accent-soft:    var(--teal-soft);
  --accent-border:  var(--teal-border);
  --accent-glow:    var(--teal-glow);
  --accent-light:   var(--teal-soft);
  --green:          var(--teal);
  --green-soft:     var(--teal-soft);

  /* ---- Blue — knowledge / customer speaker ----------------------------- */
  --blue:           #2C6FB0;
  --blue-dark:      #1A5276;
  --blue-soft:      #E8F1FB;
  --blue-border:    rgba(44, 111, 176, 0.28);

  /* ---- Coral — danger / high alert ------------------------------------- */
  --red:            #E15A47;
  --red-dark:       #C7402E;
  --red-soft:       #FCEBE8;
  --red-border:     rgba(225, 90, 71, 0.30);

  /* ---- Amber — warning / score. Darkened to gap-open so it carries enough
     contrast as text/large numerals on white (the dark theme's #FFA94D is a
     fill colour, too light to read on paper). ---------------------------- */
  --yellow:         #E0922B;
  --yellow-soft:    #FFE9D1;              /* gold-050 */
  --yellow-border:  rgba(224, 146, 43, 0.32);

  /* ---- KSA semantic — light fills (Knowledge / Skill / Attitude) ------- */
  --ksa-k-bg: #D6EAF8; --ksa-k-text: #1A5276; --ksa-k-border: rgba(26, 82, 118, 0.28);
  --ksa-s-bg: #D5F5E3; --ksa-s-text: #1E8449; --ksa-s-border: rgba(30, 132, 73, 0.28);
  --ksa-a-bg: #FDEBD0; --ksa-a-text: #784212; --ksa-a-border: rgba(120, 66, 18, 0.28);

  /* ---- Elevation — soft ink shadows, not heavy black ------------------- */
  --shadow:    0 8px 26px rgba(26, 46, 74, 0.07);
  --shadow-sm: 0 2px 10px rgba(26, 46, 74, 0.05);

  /* Base text colour for the subtree. The components set explicit colours on
     most text, but anything unstyled (e.g. transcript message bodies) would
     otherwise inherit the dark theme's light `color` from <body> and vanish
     on paper. Mirrors reports.css setting `color` on .report-screen. */
  color: var(--text);

  /* native form controls (selects, range, number spinners, scrollbars) */
  color-scheme: light;
}

/* Range sliders (Agent/Customer Speed) — the dark UA groove doesn't belong on
   paper. Draw a flat light track on the track pseudo-elements (not the input
   itself) and a teal thumb, so the thumb centres on the track cross-browser.
   The input keeps enough height to hold the thumb without clipping. */
.live-screen .speed-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 14px;
  background: transparent;
  cursor: pointer;
}
.live-screen .speed-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(26, 46, 74, 0.14);
}
.live-screen .speed-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;            /* (track 4px − thumb 14px) / 2 → centre on track */
  border: none;
  border-radius: 50%;
  background: var(--teal);
  cursor: pointer;
}
.live-screen .speed-slider::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(26, 46, 74, 0.14);
}
.live-screen .speed-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: none;
  border-radius: 50%;
  background: var(--teal);
  cursor: pointer;
}

/* Full-bleed paper backdrop behind whichever live screen is active, so the
   live flow reads as its own light page (like the report screens'
   .report-surface) rather than a card floating on the dark shell. The header
   and footer stay navy/dark by design. */
.app:has(> .live-screen.active) {
  background: #F8F6F2;
}

/* =========================================================================
   Hardcoded-colour fixes — the few component rules that baked in a dark
   colour instead of routing through a token. Scoped under .live-screen so
   specificity (0,2,0) wins over the component rule (0,1,0).
   ========================================================================= */

/* Processing overlay: light scrim instead of the navy one. */
.live-screen .processing-overlay {
  background: rgba(248, 246, 242, 0.86);
}

/* Number spinner painted light. */
.live-screen .turns-input { color-scheme: light; }

/* Inline code / preformatted blocks (QA reasoning) — the originals used
   white/black tints meant for a dark surface. The live-KB blocks now route
   through the v2 --rta-* tokens (see alert-kb.css), so only the QA reasoning
   detail needs the light fix here. */
.live-screen .qa-kb-detail code { background: rgba(26, 46, 74, 0.06); }

/* Training Results summary banner was a dark navy gradient — make it a white
   page card. */
.live-screen .tr-summary {
  background: linear-gradient(120deg, #ffffff 0%, #FBFAF8 100%);
}

/* "Close the loop" card — the key call-to-action panel. Filled teal gradient
   (like the report hero gradients) so it pops as a feature panel and reads
   distinctly from the buttons it contains. Inner content flips to light. */
.live-screen .tr-retry {
  background: linear-gradient(150deg, #2A9D8F 0%, #1B7163 100%);
  border-color: transparent;
  box-shadow: 0 12px 30px rgba(42, 157, 143, 0.28);
}
.live-screen .tr-retry-eyebrow { color: rgba(255, 255, 255, 0.82); }
.live-screen .tr-retry-h { color: #fff; }
.live-screen .tr-retry-p { color: rgba(255, 255, 255, 0.85); }
.live-screen .tr-retry .tr-prog-top { color: rgba(255, 255, 255, 0.82); }
.live-screen .tr-retry .tr-prog-top b { color: #fff; }
.live-screen .tr-retry .tr-prog-track { background: rgba(255, 255, 255, 0.22); }
.live-screen .tr-retry .tr-prog-fill { background: #fff; }
/* Primary action (Retry Practice): solid white pill on the teal panel. */
.live-screen .tr-retry .training-action-btn {
  background: #fff;
  border-color: #fff;
  color: var(--teal-dark);
}
.live-screen .tr-retry .training-action-btn:hover {
  background: rgba(255, 255, 255, 0.9);
  color: var(--teal-dark);
  border-color: #fff;
}
/* Secondary actions (New Live Call / Contact supervisor): ghost/outline. */
.live-screen .tr-retry .training-action-btn.is-dark {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}
.live-screen .tr-retry .training-action-btn.is-dark:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: #fff;
  color: #fff;
}

/* Divider track: dark-on-light instead of white-on-dark. */
.live-screen .coach-input__divider { background: rgba(26, 46, 74, 0.10); }

/* Disabled coach Submit kept white text (invisible on its light teal fill). */
.live-screen .coach-input__submit:disabled { color: rgba(26, 46, 74, 0.35); }