/* The Autonomous Marketing Harness — presenter shell
   Palette and type from the Claude Design v10 deck (Rubik 300/400, IBM Plex Mono). */
:root {
  --bg: #F0EDE6; --ink: #151412; --sub: #5C5850; --orange: #FF4D0F;
  --card: #FAF9F5; --line: #E2DED4; --mono: 'IBM Plex Mono', Menlo, Consolas, monospace;
  --sans: Rubik, 'DM Sans', sans-serif;
}
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); }
body { overflow: hidden; height: 100vh; }

/* ── Stage: a fixed 1920×1080 canvas scaled to fit the viewport ── */
.deck { position: fixed; inset: 0; display: block; overflow: hidden; background: var(--bg); }
.stage { position: absolute; top: 0; left: 0; width: 1920px; height: 1080px; transform-origin: top left; }
.stage > section { position: absolute !important; top: 0; left: 0; width: 1920px; height: 1080px; display: none !important; }
.stage > section.active { display: flex !important; }
.stage > section img { max-width: none; }

/* slide 6: the skills popover */
[data-skills-label] { transition: background .2s; }
[data-skills-label]:hover, [data-skills-label].pinned { background: rgba(255,77,15,.06); }
[data-skills-pop][hidden] { display: none; }

/* ── HUD ── */
.progress { position: fixed; left: 0; bottom: 0; height: 4px; width: 0; background: var(--orange); z-index: 50; transition: width .3s; }
.nav-btn { position: fixed; top: 50%; transform: translateY(-50%); width: 44px; height: 88px; border: 0; background: transparent; color: var(--sub); font: 400 30px/1 var(--sans); cursor: pointer; opacity: 0; transition: opacity .2s; z-index: 40; }
.nav-btn:hover, body.touch .nav-btn { opacity: .8; }
.nav-btn.prev { left: 0; } .nav-btn.next { right: 0; }
.counter { position: fixed; right: 16px; bottom: 12px; font: 400 12px/1 var(--mono); letter-spacing: .1em; color: var(--sub); background: rgba(240,237,230,.9); border: 1px solid var(--line); padding: 4px 8px; border-radius: 6px; z-index: 50; }

/* ── Presenter timer (T) ── */
.presenter-timer { position: fixed; top: 14px; left: 16px; display: none; align-items: baseline; gap: 10px; padding: 8px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; font-family: var(--mono); z-index: 60; }
.presenter-timer.active { display: flex; }
.presenter-timer .clock { font-size: 22px; }
.presenter-timer .clock.warn { color: var(--orange); }
.presenter-timer .lbl { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--sub); }

/* ── Notes drawer (N) ── */
.notes { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); background: var(--card); border-left: 1px solid var(--line); transform: translateX(100%); transition: transform .3s; z-index: 70; display: flex; flex-direction: column; box-shadow: -20px 0 60px rgba(21,20,18,.12); }
.notes.open { transform: none; }
.notes__head { padding: 18px 22px 12px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); display: flex; justify-content: space-between; align-items: center; }
.notes__head button { border: 0; background: transparent; font: 400 20px/1 var(--sans); cursor: pointer; color: var(--sub); }
.notes__body { padding: 18px 22px 32px; overflow-y: auto; font-size: 17px; line-height: 1.55; }
.notes__cue { font-size: 14px; line-height: 1.5; color: var(--sub); border-left: 3px solid var(--orange); padding: 2px 0 2px 12px; margin: 0 0 18px; }
.notes__words { white-space: pre-wrap; }
.notes__meta { margin-top: 20px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--sub); }
.notes__next { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--sub); }
.notes__next b { color: var(--ink); font-weight: 400; }

/* ── Help (?) ── */
.help { position: fixed; inset: 0; background: rgba(21,20,18,.82); color: var(--bg); display: none; align-items: center; justify-content: center; z-index: 90; }
.help.active { display: flex; }
.help__card { background: var(--ink); border: 1px solid #3a3835; border-radius: 16px; padding: 28px 36px; min-width: 320px; }
.help__card h3 { margin: 0 0 14px; font: 400 15px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--orange); }
.help__card table { border-collapse: collapse; font-size: 15px; }
.help__card td { padding: 5px 14px 5px 0; }
.help__card kbd { font-family: var(--mono); background: #2b2926; border-radius: 6px; padding: 2px 8px; }

/* ── Avatar widget (click to hear Gil narrate) ── */
.avatar-widget { position: fixed; top: 10px; right: 12px; z-index: 80; display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 60px; padding: 4px 16px 4px 4px; box-shadow: 0 8px 30px rgba(21,20,18,.14); cursor: pointer; user-select: none; }
.avatar-widget.minimized { display: none; }
.avatar-widget__face { width: 50px; height: 50px; border-radius: 50%; overflow: hidden; position: relative; flex: none; border: 2px solid var(--orange); background: #ddd; }
.avatar-widget__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-widget__face video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.avatar-widget.playing .avatar-widget__face { box-shadow: 0 0 0 6px rgba(255,77,15,.18); }
.avatar-widget__info { display: flex; flex-direction: column; gap: 3px; }
.avatar-widget__label { font-size: 14px; }
.avatar-widget__status { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--sub); }
.avatar-widget.playing .avatar-widget__status { color: var(--orange); }
.avatar-widget__min { position: absolute; top: -4px; right: -4px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--sub); font: 400 15px/1 var(--sans); cursor: pointer; }
.avatar-toggle { position: fixed; top: 16px; right: 16px; z-index: 80; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--orange); background: var(--card); padding: 0; overflow: hidden; cursor: pointer; display: none; }
.avatar-toggle img { width: 100%; height: 100%; object-fit: cover; }
.avatar-toggle.show { display: block; }

/* small screens */
@media (max-width: 720px) {
  .avatar-widget { top: 8px; right: 8px; padding: 4px 12px 4px 4px; gap: 8px; }
  .avatar-widget__face { width: 44px; height: 44px; }
  .avatar-widget__label { font-size: 12px; }
  .counter { display: none; }
  .presenter-timer { top: 8px; left: 8px; }
}