/* ============================================================
   OutLoud v3 — PRESENTATION SCREEN  (Job c3973498 — screen only)
   ============================================================
   Layered on top of the existing .ol-screen chrome in runtime.css.
   runtime.css already owns .ol-screen-cards / .ol-screen-card /
   .ol-card-* — this file ONLY adds the deck pieces that are new:

     • deck-live   — makes the deck visible without disturbing the
                     existing content panels (panel-live)
     • deck topbar — brand + slide dots + prev/next
     • panel-live  — hides the deck layer so a plan-driven content
                     panel takes over cleanly
     • .experience — light-theme overrides (the demo panel is light,
                     while runtime.css's .ol-card-* assume dark)

   Avatar markup/directors and the lip-sync/sink pipeline are
   intentionally untouched.
   ============================================================ */

/* The base .experience rule (redesign.css) hides the screen until a
   content panel goes live; deck-live re-shows it for the deck. */
.ol-screen.deck-live { display: flex; flex-direction: column; }
.experience .ol-screen.deck-live { display: flex; }
.ol-screen.deck-live .ol-screen-body { position: relative; flex: 1 1 auto; min-height: 170px; }

/* ---- deck topbar: brand + dots + prev/next ---- */
.ol-screen-topbar.ol-screen-decktop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ol-screen-decknav { display: flex; align-items: center; gap: 10px; }
.ol-screen-dots { display: flex; align-items: center; gap: 5px; }
.ol-screen-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}
.ol-screen-dot:hover { background: rgba(255, 255, 255, 0.4); }
.ol-screen-dot.active { background: #9ec9ff; transform: scale(1.25); }

.ol-screen-navbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid rgba(120, 160, 210, 0.45);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #dce8ff;
  font: 700 13px/1 'DM Sans', Arial, sans-serif;
  cursor: pointer;
  transition: background 140ms ease, transform 140ms ease;
}
.ol-screen-navbtn:hover { background: rgba(255, 255, 255, 0.14); transform: translateY(-1px); }

/* When a plan-driven content panel (pricing, booking, etc.) goes live,
   the deck layer steps aside entirely — no overlap, no double content. */
.ol-screen.panel-live .ol-screen-decktop { display: none; }
.ol-screen.panel-live .ol-screen-cards { opacity: 0; pointer-events: none; }

/* ---------- light-theme overrides (demo .experience panel) ----------
   The deck lives inside the light "experience" card; runtime.css's
   .ol-card-* colors target the dark branded screen. Re-map them. */
.experience .ol-screen.deck-live {
  background: #f6f8ff;
  border: 1px solid #dce5f2;
}
.experience .ol-screen.deck-live .ol-screen-topbar.ol-screen-decktop {
  background: #edf3ff;
  border-bottom: 1px solid #dce5f2;
}
.experience .ol-screen .ol-screen-brand { color: var(--blue); }
.experience .ol-screen .ol-screen-navbtn {
  border-color: #cbdaf2;
  background: #fff;
  color: var(--blue);
}
.experience .ol-screen .ol-screen-navbtn:hover { background: #e8f0ff; }
.experience .ol-screen .ol-screen-dot { background: #d5e1f4; }
.experience .ol-screen .ol-screen-dot:hover { background: #a9c3eb; }
.experience .ol-screen .ol-screen-dot.active { background: var(--blue); }

.experience .ol-screen .ol-card-kicker { color: var(--blue); }
.experience .ol-screen .ol-card-title { color: var(--ink); }
.experience .ol-screen .ol-card-body { color: var(--body-ink); }
.experience .ol-screen .ol-card-ask {
  border: 1px solid #cbdaf2;
  background: #fff;
  color: var(--blue);
}
.experience .ol-screen .ol-card-ask:hover { background: #e8f0ff; }
.experience .ol-screen .ol-card-link { color: var(--blue); border-bottom-color: #b9cdec; }
.experience .ol-screen .ol-card-link:hover { color: #174bad; border-bottom-color: #174bad; }

/* A compact visual grammar for the presentation screen. Its palette
   comes from the page's semantic tokens, rather than per-slide colors. */
.experience .ol-screen .ol-screen-cards { overflow-y: auto; padding: 12px; }
.experience .ol-screen .ol-screen-cards[hidden] { display: none; }
.experience .ol-screen .ol-screen-card {
  inset: 12px; justify-content: center; gap: 10px;
  min-height: calc(100% - 24px);
}
.experience .ol-screen .ol-card-title { font: 500 25px/1.08 'Newsreader', Georgia, serif; }
.experience .ol-screen .ol-card-body { font: 500 12px/1.45 var(--sans); }
.ol-card-graphic { display: flex; align-items: stretch; gap: 5px; margin: 3px 0; }
.ol-graphic-pipeline { flex-direction: column; gap: 0; }
.ol-graphic-flow, .ol-graphic-tiers { flex-direction: row; }
.ol-graphic-node {
  flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center;
  gap: 4px; padding: 12px 8px; border: 1px solid var(--edge);
  border-radius: 6px; background: var(--glass); color: var(--ink);
  font: 700 11px/1.25 var(--sans); overflow-wrap: anywhere;
}
.ol-graphic-node:first-child { border-color: var(--blue); }
.ol-graphic-connector { align-self: center; color: var(--blue); font: 700 15px/1 var(--sans); }
.ol-graphic-flow .ol-graphic-connector { transform: rotate(-90deg); }
.ol-graphic-tag { color: var(--blue); font: 700 10px/1.1 var(--sans); }
.ol-graphic-tiers .ol-graphic-node { justify-content: space-between; }
.ol-graphic-tiers strong { font-size: 12px; }

@media (max-width: 600px) {
  .experience .ol-screen .ol-screen-decktop { padding: 5px 6px; }
  .experience .ol-screen .ol-screen-brand { display: none; }
  .experience .ol-screen .ol-screen-decknav { width: 100%; justify-content: space-between; gap: 4px; }
  .experience .ol-screen .ol-screen-dots { gap: 3px; }
  .experience .ol-screen .ol-screen-dot { width: 5px; height: 5px; }
  .experience .ol-screen .ol-screen-card { display: none; position: relative; inset: auto; gap: 5px; min-height: 100%; justify-content: flex-start; }
  .experience .ol-screen .ol-screen-card.active { display: flex; }
  .experience .ol-screen .ol-screen-cards { padding: 7px; }
  .experience .ol-screen .ol-card-title { font-size: 16px; }
  .experience .ol-screen .ol-card-body { font-size: 9px; line-height: 1.25; }
  .experience .ol-screen .ol-card-ask { font-size: 9px; padding: 5px 7px; margin-top: 2px; }
  .ol-card-graphic { gap: 2px; }
  .ol-graphic-pipeline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .ol-graphic-pipeline .ol-graphic-connector { display: none; }
  .ol-graphic-pipeline .ol-graphic-node { min-height: 35px; }
  .ol-graphic-node { padding: 5px 3px; font-size: 8px; }
  .ol-graphic-tiers strong { font-size: 8px; }
  .ol-graphic-tag { font-size: 8px; }
  .ol-graphic-connector { font-size: 10px; }
}

@media (max-width: 760px) {
  .ol-screen.deck-live .ol-screen-body { min-height: 150px; }
}

/* product photo on screen cards (generic look, any client) */
.ol-card-image { display:block; width:100%; height:170px; object-fit:cover; object-position:center; border-radius:10px; margin:0 0 10px; }
@media (max-width:640px) { .ol-card-image { height:120px; } }