/* =========================================================
   AI kogu tootearenduse protsessis — workshop deck
   Dark surface, deep purple → pink accent.
   Typography: Aino (display Aino Headline) from Eesti.ai DS.
   ========================================================= */

@font-face {
  font-family: "Aino";
  src: url("fonts/AinoWeb-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Aino";
  src: url("fonts/AinoWeb-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Aino";
  src: url("fonts/AinoWeb-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Aino Headline";
  src: url("fonts/AinoWeb-Headline.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
}

:root {
  /* === BAYS (Blues) — intro/framing S1-S5 === */
  --bays-bg:        #0030DE;   /* dark-main */
  --bays-bg-alt:    #000087;   /* dark-darkest */
  --bays-accent-1:  #00C3FF;   /* light-accent */
  --bays-accent-2:  #CEE2FD;   /* light-main */
  --bays-light:     #0062F5;   /* dark-highlight */

  /* === PARKS (Greens) — otsusta ja defineeri S12-S13 === */
  --parks-bg:       #1D4432;   /* dark-main */
  --parks-bg-alt:   #12251C;   /* dark-darkest */
  --parks-accent-1: #CAE122;   /* light-accent */
  --parks-accent-2: #D9E3C6;   /* light-main */
  --parks-contrast: #357549;   /* dark-contrast */

  /* === BEACHES (Coral/Orange) — ehita ja launch'i S14 === */
  --beaches-bg:     #65264B;   /* dark-main */
  --beaches-accent-1: #FF754B; /* light-accent */
  --beaches-accent-2: #FFD7B7; /* light-main */

  /* === BOGS (Teals/Dark) — avasta ja testi S6-S11 === */
  --bogs-bg:        #194F76;   /* dark-main */
  --bogs-bg-alt:    #0D283B;   /* dark-darkest */
  --bogs-accent-1:  #51DE3E;   /* light-accent */
  --bogs-accent-2:  #BAE6E8;   /* light-main */
  --bogs-contrast:  #2A8886;   /* dark-contrast */

  /* === WATERFALL (Purples) — ehita ja launch'i S14 === */
  --waterfall-bg:     #4C1682;   /* dark-main */
  --waterfall-accent-1: #FC5EC7; /* light-accent */
  --waterfall-accent-2: #E5DAEE; /* light-main */

  /* === BOGS (Dark blues/teals) — alternative for S14-S17 === */
  --bogs-bg:        #0A2E3B;   /* Meenikunno very dark (approx) */
  --bogs-bg-alt:    #2A5F6F;   /* Parika teal */
  --bogs-accent:    #4AFF7D;   /* Mukri bright green */

  /* Current defaults (will override per-slide) */
  --bg:           var(--bays-bg);
  --surface:      #0040f0;
  --surface-2:    #0062F5;
  --hairline:     rgba(255,255,255,0.12);
  --hairline-2:   rgba(255,255,255,0.24);

  /* Ink */
  --ink:          #FFFFFF;
  --ink-2:        rgba(255,255,255,0.85);
  --muted:        rgba(255,255,255,0.60);
  --muted-2:      rgba(255,255,255,0.45);

  /* Map phases use matching family colors */
  --phase-discover: #FB5DC6;  /* Kihnu pink */
  --phase-discover-bg: rgba(251,93,198,0.18);
  --phase-decide:   #CAE122;  /* Parks light-accent */
  --phase-decide-bg: rgba(202,225,34,0.18);
  --phase-build:    #FF754B;  /* Beaches light-accent */
  --phase-build-bg: rgba(255,117,75,0.18);

  /* Type */
  --font-display: "Aino Headline", "Aino", system-ui, sans-serif;
  --font-body:    "Aino", system-ui, sans-serif;
}

/* ========== PHASE-SPECIFIC BACKGROUNDS ========== */

/* Bays (blue) — intro/framing: S1-S5 */
.slide--bays {
  --bg: #000087;  /* dark-darkest for general slides */
  --surface: #00005F;
  --surface-2: #0030DE;
}
.slide--bays.slide--hero {
  --bg: #0030DE;  /* dark-main for first/last only */
  --surface: #0040f0;
  --surface-2: #0062F5;
}

/* Bogs (teal) — not used */
.slide--bogs {
  --bg: #194F76;
  --surface: #236088;
  --surface-2: #2A8886;
}

/* Islands (purple) — S6-S13 prototyping/analysis */
.slide--islands {
  --bg: #31055E;
  --surface: rgba(155, 83, 189, 0.15);
  --surface-2: rgba(155, 83, 189, 0.25);
  --ink: #E5DAEE;
  --ink-2: #E5DAEE;
  --muted: rgba(229, 218, 238, 0.7);
  --muted-2: rgba(229, 218, 238, 0.5);
  --hairline: rgba(252, 94, 199, 0.2);
  --hairline-2: rgba(252, 94, 199, 0.3);
  --islands-accent: #FC5EC7;
  --islands-highlight: #9B53BD;
  background: #31055E;
  background-image: radial-gradient(ellipse 1400px 900px at 45% 50%, rgba(155, 83, 189, 0.25), transparent),
                    radial-gradient(ellipse 1200px 800px at 60% 40%, rgba(252, 94, 199, 0.15), transparent);
}

/* Parks (green) — otsusta ja defineeri: S12-S13 */
.slide--parks {
  --bg: #1D4432;  /* dark-main */
  --surface: #2a5a45;
  --surface-2: #357549;
}

/* Waterfall (purple) — ehita ja launch'i: S14 */
.slide--waterfall {
  --bg: #4C1682;  /* dark-main */
  --surface: #5d1a9a;
  --surface-2: #6e1eb2;
}

/* Beaches (coral/burgundy) — ehita ja launch'i: S14 build slide */
.slide--beaches {
  --bg: var(--beaches-bg);
  --surface: #7e3155;
  --surface-2: #9d4068;
}

/* =========================================================
   Stage / slide framing
   ========================================================= */
html, body { margin: 0; padding: 0; background: #000; color: var(--ink); font-family: var(--font-body); }
deck-stage { background: #000; }

.slide {
  position: relative;
  width: 1920px; height: 1080px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Soft brand glow used on hero slides — phase-aware */
.slide--glow::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 30% 50%, rgba(0,195,255,0.35), transparent 70%),
    radial-gradient(ellipse 65% 55% at 70% 30%, rgba(0,48,222,0.28), transparent 65%);
  pointer-events: none;
}
.slide--islands.slide--glow::before {
  background:
    radial-gradient(ellipse 70% 60% at 30% 50%, rgba(252, 94, 199, 0.40), transparent 70%),
    radial-gradient(ellipse 65% 55% at 70% 30%, rgba(155, 83, 189, 0.35), transparent 65%);
}
.slide--parks.slide--glow::before {
  background:
    radial-gradient(ellipse 70% 60% at 30% 50%, rgba(200,230,0,0.35), transparent 70%),
    radial-gradient(ellipse 65% 55% at 70% 30%, rgba(244,232,220,0.25), transparent 65%);
}
.slide--beaches.slide--glow::before {
  background:
    radial-gradient(ellipse 70% 60% at 30% 50%, rgba(255,122,51,0.40), transparent 70%),
    radial-gradient(ellipse 65% 55% at 70% 30%, rgba(184,227,237,0.28), transparent 65%);
}

.slide--soft::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 25% 35%, rgba(0,195,255,0.20), transparent 65%),
    radial-gradient(ellipse 55% 45% at 75% 70%, rgba(0,48,222,0.16), transparent 60%);
  pointer-events: none;
}
.slide--islands.slide--soft::before {
  background:
    radial-gradient(ellipse 60% 50% at 25% 35%, rgba(252, 94, 199, 0.22), transparent 65%),
    radial-gradient(ellipse 55% 45% at 75% 70%, rgba(155, 83, 189, 0.18), transparent 60%);
}
.slide--parks.slide--soft::before {
  background:
    radial-gradient(ellipse 60% 50% at 25% 35%, rgba(200,230,0,0.20), transparent 65%),
    radial-gradient(ellipse 55% 45% at 75% 70%, rgba(244,232,220,0.14), transparent 60%);
}
.slide--beaches.slide--soft::before {
  background:
    radial-gradient(ellipse 60% 50% at 25% 35%, rgba(255,122,51,0.22), transparent 65%),
    radial-gradient(ellipse 55% 45% at 75% 70%, rgba(184,227,237,0.16), transparent 60%);
}

.slide__inner {
  position: relative; z-index: 1;
  flex: 1; display: flex; flex-direction: column;
  padding: 96px 128px;
}

/* =========================================================
   LOOK B — single line dead-centre, lots of empty space
   ========================================================= */
.slide--b .slide__inner {
  justify-content: center;
  align-items: center;
  text-align: center;
}
.slide--b .b-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 84px;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--ink);
  max-width: 22ch;
  text-wrap: balance;
  margin: 0;
}
.slide--b .b-text--small { font-size: 64px; max-width: 26ch; }
.slide--b .b-text--xl    { font-size: 116px; max-width: 16ch; line-height: 1.0; }

.slide--b .b-sub {
  margin-top: 56px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--muted);
  max-width: 30ch;
  text-wrap: balance;
}

.slide--b .b-author {
  margin-top: 32px;
  font-family: var(--font-body);
  font-size: 24px;
  line-height: 1.4;
  color: var(--ink-2);
  font-weight: 600;
}

/* Gradient sweep for hero title — phase-aware */
.b-gradient {
  background: linear-gradient(96deg, #00D4FF 0%, #FFE680 60%, #FFFFFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.slide--islands .b-gradient {
  background: linear-gradient(96deg, #FC5EC7 0%, #9B53BD 60%, #E5DAEE 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.slide--parks .b-gradient {
  background: linear-gradient(96deg, #C8E600 0%, #F4E8DC 60%, #7FBA00 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.slide--beaches .b-gradient {
  background: linear-gradient(96deg, #FF7A33 0%, #B8E3ED 60%, #FFB399 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Tool tag appearing on (B) slides that name tools */
.b-tools {
  margin-top: 72px;
  display: inline-flex; gap: 12px; flex-wrap: wrap;
  justify-content: center;
}
.b-tools .tool {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1.5px solid var(--hairline-2);
  color: var(--ink-2);
  background: rgba(244,238,249,0.04);
}

/* =========================================================
   LOOK A — title top, screenshot dominates, quiet text stack
   ========================================================= */
.slide--a .slide__inner { padding: 72px 96px 72px 96px; gap: 32px; }

.a-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 48px;
}
.a-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 64px;
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}
.a-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 18px 0;
}
.a-eyebrow .dot { width: 10px; height: 10px; border-radius: 999px; background: var(--bays-accent-1); }
.slide--bogs .a-eyebrow .dot { background: var(--bogs-accent-1); }
.slide--parks .a-eyebrow .dot { background: var(--parks-accent-1); }
.slide--waterfall .a-eyebrow .dot { background: var(--waterfall-accent-1); }
.a-eyebrow--discover .dot { background: var(--phase-discover); }
.slide--islands .a-eyebrow--discover .dot { background: #FC5EC7; }
.slide--islands .a-eyebrow--discover { color: #FC5EC7; }
.a-eyebrow--decide   .dot { background: var(--phase-decide); }
/* Inside the purple Islands theme, keep the decide eyebrow accent pink so
   the analyse/decide slides match the surrounding discover slides visually. */
.slide--islands .a-eyebrow--decide .dot { background: #FC5EC7; }
.slide--islands .a-eyebrow--decide { color: #FC5EC7; }
.a-eyebrow--build    .dot { background: var(--phase-build); }

.a-tools {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end;
  max-width: 580px;
}
.a-tools .tool {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--hairline-2);
  color: var(--ink-2);
  background: rgba(244,238,249,0.04);
  white-space: nowrap;
}
.a-tools .tool em { font-style: normal; color: var(--muted); font-weight: 400; }

.a-body {
  flex: 1; display: grid;
  grid-template-columns: 1fr 460px;
  gap: 56px;
  min-height: 0;
}

.a-shot {
  position: relative;
  border-radius: 22px;
  border: 1px solid var(--hairline-2);
  background: var(--surface);
  overflow: hidden;
  min-height: 0;
}
.a-shot image-slot {
  width: 100%; height: 100%; display: block;
}
.a-shot::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(244,238,249,0.04);
}

.a-stack { display: flex; flex-direction: column; gap: 28px; padding-top: 8px; }

.a-why {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 26px;
  line-height: 1.32;
  color: var(--ink-2);
  margin: 0;
  text-wrap: pretty;
}
.a-why::before {
  content: "Miks";
  display: block;
  font-style: normal;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--phase-discover);
  margin-bottom: 12px;
}
.slide--phase-decide .a-why::before { color: var(--phase-decide); }
.slide--phase-build  .a-why::before { color: var(--phase-build); }

.a-steps {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 14px;
  border-top: 1px solid var(--hairline);
  padding-top: 24px;
}
.a-steps li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 16px;
  font-family: var(--font-body);
  font-size: 22px;
  line-height: 1.35;
  color: var(--ink);
}
.a-steps li .n {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--phase-discover);
  letter-spacing: -0.01em;
}
.slide--phase-decide .a-steps li .n { color: var(--phase-decide); }
.slide--phase-build  .a-steps li .n { color: var(--phase-build); }

.a-exercise {
  margin-top: auto;
  padding: 22px 24px;
  border-radius: 16px;
  border: 1px dashed var(--hairline-2);
  background: rgba(0,98,245,0.10);
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.4;
  color: var(--ink-2);
}
.a-note {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.45;
  color: var(--muted);
  margin: 0;
}

/* Exercise slide — extracted .a-exercise content with a countdown timer */
.slide--exercise .slide__inner {
  display: flex;
  align-items: center;
  justify-content: center;
}
.exercise-card {
  width: 100%;
  max-width: 1100px;
  padding: 56px 64px;
  background: rgba(0,98,245,0.10);
  border: 1px dashed var(--hairline-2);
  border-radius: 28px;
  text-align: center;
}
.slide--phase-decide .exercise-card { background: rgba(45,212,191,0.06); }
.slide--phase-build  .exercise-card { background: rgba(251,113,133,0.06); }
.exercise-eyebrow {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--phase-discover);
  margin-bottom: 18px;
}
.slide--phase-decide .exercise-eyebrow { color: var(--phase-decide); }
.slide--phase-build  .exercise-eyebrow { color: var(--phase-build); }
.exercise-text {
  font-size: 36px;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 44px;
}

/* Two-step exercise (e.g. slide 08a) — side-by-side cards, each with its
   own timer. The shared .exercise-card styling still applies; this just
   tightens type/spacing to fit two cards. */
.exercise-multi {
  display: flex;
  gap: 32px;
  width: 100%;
  max-width: 1640px;
  align-items: stretch;
}
.exercise-multi .exercise-card {
  flex: 1 1 0;
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.exercise-multi .exercise-eyebrow { margin-bottom: 0; }
.exercise-multi .exercise-text {
  font-size: 24px;
  line-height: 1.4;
  margin: 0;
}
.exercise-multi .timer-display { font-size: 72px; }
.exercise-multi .timer-btn { font-size: 15px; padding: 8px 22px; min-width: 96px; }

.a-note a, .exercise-text a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.a-note a:hover, .exercise-text a:hover { opacity: 0.75; }
.exercise-timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.timer-display {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 108px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.timer-controls { display: flex; gap: 12px; }
.timer-btn {
  appearance: none;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 500;
  padding: 10px 28px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  border: 0;
  cursor: pointer;
  min-width: 120px;
}
.timer-btn:hover { opacity: 0.85; }
.exercise-timer.timer-done .timer-display {
  color: #FF754B;
  animation: timer-pulse 0.8s ease-in-out infinite;
}
@keyframes timer-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.a-exercise::before {
  content: "Harjutus";
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--phase-discover);
  margin-bottom: 8px;
}
.slide--phase-decide .a-exercise { background: rgba(45,212,191,0.06); }
.slide--phase-decide .a-exercise::before { content: "Harjutus"; color: var(--phase-decide); }
.slide--phase-build  .a-exercise { background: rgba(251,113,133,0.06); }
.slide--phase-build  .a-exercise::before { color: var(--phase-build); }

/* Page mark — top-right phase indicator */
.a-mark {
  position: absolute;
  top: 56px; left: 96px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  z-index: 2;
}
.slide--bogs .a-mark { color: var(--bogs-accent-1); }
.slide--islands .a-mark { color: #FC5EC7; }
.slide--parks .a-mark { color: var(--parks-accent-1); }
.slide--waterfall .a-mark { color: var(--waterfall-accent-1); }

/* Tiny footer */
.slide-foot {
  position: absolute;
  bottom: 40px; left: 96px; right: 96px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-body);
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
  z-index: 2;
}
.slide-foot .wordmark { letter-spacing: -0.005em; text-transform: none; font-size: 16px; color: var(--muted); }
.slide-foot .wordmark b { color: var(--ink-2); font-weight: 700; }

.eesti-logo {
  height: 126px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

/* =========================================================
   S4 — interactive process map
   ========================================================= */
.map-slide .slide__inner { padding: 64px 96px 80px; gap: 28px; }
.map-head { display: flex; justify-content: space-between; align-items: flex-end; }
.map-head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 60px;
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin: 0; max-width: 22ch;
}
.map-head .hint {
  font-family: var(--font-body);
  font-size: 18px; color: var(--muted);
  letter-spacing: 0.04em;
  display: inline-flex; align-items: center; gap: 12px;
}
.map-head .hint .kbd {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--hairline-2);
  color: var(--ink-2);
  font-size: 16px;
  letter-spacing: 0;
}

.map-wrap {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 28px;
  min-height: 0;
}

.map-phases {
  display: grid;
  grid-template-columns: 3fr 2fr 2fr;
  gap: 18px;
}
.phase-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 22px;
  border-radius: 14px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.phase-bar .pdot { width: 14px; height: 14px; border-radius: 999px; }
.phase-bar.discover { background: var(--phase-discover-bg); }
.phase-bar.discover .pdot { background: var(--phase-discover); }
.phase-bar.decide   { background: var(--phase-decide-bg); }
.phase-bar.decide .pdot { background: var(--phase-decide); }
.phase-bar.build    { background: var(--phase-build-bg); }
.phase-bar.build .pdot { background: var(--phase-build); }

.map-flow {
  display: grid;
  grid-template-rows: auto auto;
  gap: 36px;
  align-content: start;
  position: relative;
}

.map-steps {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 18px;
  position: relative;
}
.step {
  position: relative;
  display: flex; flex-direction: column; align-items: stretch; gap: 12px;
  padding: 22px 18px;
  border-radius: 18px;
  background: var(--surface);
  border: 1.5px solid var(--hairline);
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
  font-family: var(--font-body);
  text-align: left;
}
.step:hover { border-color: var(--hairline-2); transform: translateY(-2px); }
.step .step-n {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.step .step-name {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.0;
}
.step .step-bar { height: 4px; border-radius: 4px; margin-top: 8px; }

.step[data-phase="discover"] .step-bar { background: var(--phase-discover); }
.step[data-phase="decide"]   .step-bar { background: var(--phase-decide); }
.step[data-phase="build"]    .step-bar { background: var(--phase-build); }

.step.active[data-phase="discover"] { background: rgba(0,98,245,0.22); border-color: var(--phase-discover); }
.step.active[data-phase="decide"]   { background: rgba(0,195,255,0.20); border-color: var(--phase-decide); }
.step.active[data-phase="build"]    { background: rgba(252,238,200,0.20); border-color: var(--phase-build); }
.step.active .step-name { color: var(--ink); }
.step.active .step-n { color: var(--ink-2); }

/* connecting line */
.map-steps::before {
  content: "";
  position: absolute;
  top: 35px; left: 18px; right: 18px;
  height: 2px;
  background: linear-gradient(90deg, var(--phase-discover) 0%, var(--phase-discover) 42%, var(--phase-decide) 44%, var(--phase-decide) 70%, var(--phase-build) 72%, var(--phase-build) 100%);
  opacity: 0.35;
  z-index: 0;
}
.step { z-index: 1; }

/* Remove old connecting line */
.map-steps::before { display: none; }

.map-panel {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  padding: 36px 40px;
  background: var(--surface-2);
  border: 1.5px solid var(--hairline-2);
  border-radius: 22px;
  min-height: 240px;
}
.map-panel.phase-discover { border-color: rgba(0,98,245,0.60); }
.map-panel.phase-decide   { border-color: rgba(0,195,255,0.55); }
.map-panel.phase-build    { border-color: rgba(252,238,200,0.50); }

.panel-l { display: flex; flex-direction: column; gap: 18px; }
.panel-l .p-eyebrow {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.panel-l .p-name {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.022em;
  margin: 0;
}
.phase-discover .p-name { color: var(--phase-discover); }
.phase-decide   .p-name { color: var(--phase-decide); }
.phase-build    .p-name { color: var(--phase-build); }
.panel-l .p-why {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 22px;
  line-height: 1.35;
  color: var(--ink-2);
  max-width: 38ch;
  margin: 0;
}
.panel-l .p-tools {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto;
}
.panel-l .p-tools .tool {
  font-size: 16px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--hairline-2);
  color: var(--ink-2);
  background: rgba(244,238,249,0.03);
}

.panel-r { display: flex; flex-direction: column; gap: 14px; }
.panel-r .p-do-label {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.panel-r ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }

.panel-r ol li.panel-description {
  display: block;
  font-family: var(--font-body);
  font-size: 22px;
  line-height: 1.45;
  color: var(--ink);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}

.panel-r ol li.panel-key-point {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.35;
  color: var(--ink-2);
}
.panel-r ol li.panel-key-point .bullet {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
}
.phase-discover .panel-r ol li.panel-key-point .bullet { color: var(--phase-discover); }
.phase-decide   .panel-r ol li.panel-key-point .bullet { color: var(--phase-decide); }
.phase-build    .panel-r ol li.panel-key-point .bullet { color: var(--phase-build); }

/* =========================================================
   Process strip (S6-S15)
   ========================================================= */
.process-strip {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: rgba(0,0,0,0.3);
  border-radius: 999px;
  backdrop-filter: blur(8px);
}

.strip-dots {
  display: flex;
  align-items: center;
  gap: 12px;
}

.strip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted-2);
  opacity: 0.4;
  transition: all 180ms ease;
}

.strip-dot.active {
  width: 12px;
  height: 12px;
  opacity: 1;
}

.strip-dot.active[data-phase="discover"] { background: var(--phase-discover); }
.strip-dot.active[data-phase="decide"] { background: var(--phase-decide); }
.strip-dot.active[data-phase="build"] { background: var(--phase-build); }

.strip-label {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
}

/* =========================================================
   S13 — Prompt Builder live (3-page wizard)
   ========================================================= */
.pb-slide .slide__inner { padding: 96px 96px 72px; gap: 24px; }
.pb-head { display: flex; justify-content: space-between; align-items: flex-end; }
.pb-head h2 {
  font-family: var(--font-display);
  font-size: 60px; font-weight: 700;
  letter-spacing: -0.022em; line-height: 1.04;
  margin: 0; max-width: 24ch;
}
.pb-head .pb-tools { display: flex; gap: 10px; }
.pb-head .pb-tools .tool {
  font-size: 18px; font-weight: 500;
  padding: 10px 18px; border-radius: 999px;
  border: 1.5px solid var(--hairline-2);
  color: var(--ink-2); background: rgba(244,238,249,0.04);
}

/* Wizard container */
.pb-wizard {
  position: relative;
  min-height: 520px;
  flex: 1;
}

.pb-page {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.pb-page-grid {
  display: grid;
  grid-template-columns: 580px 1fr;
  gap: 32px;
  align-items: start;
}

.pb-questions {
  background: var(--surface);
  border-radius: 22px;
  padding: 32px;
  border: 1.5px solid var(--hairline-2);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.pb-page-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: var(--ink);
}

.pb-field { display: flex; flex-direction: column; gap: 8px; }
.pb-field label {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-2);
}

.pb-field input, .pb-field textarea {
  font: inherit;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.4;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--hairline-2);
  background: rgba(10,6,18,0.5);
  color: var(--ink);
  resize: vertical;
  outline: none;
  transition: border-color 140ms ease, background 140ms ease;
  box-sizing: border-box;
}
.pb-field input:focus, .pb-field textarea:focus {
  border-color: var(--parks-accent-1);
  background: rgba(168,219,0,0.08);
}

.pb-preview {
  background: var(--surface);
  border-radius: 22px;
  padding: 28px;
  border: 1.5px solid var(--hairline-2);
  max-height: 520px;
  overflow-y: auto;
}

.pb-preview-title {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 16px;
}

.pb-preview-content {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-2);
  white-space: pre-wrap;
  word-wrap: break-word;
}

.pb-preview-content:empty::before {
  content: "Täida väljad, et näha preview →";
  color: var(--muted-2);
  font-style: italic;
}

.pb-preview-content strong {
  color: var(--parks-accent-1);
  font-weight: 700;
}

.pb-preview-content .ph {
  color: var(--muted-2);
}

.pb-nav {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 8px;
}

.pb-btn {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1.5px solid var(--hairline-2);
  background: rgba(244,238,249,0.04);
  color: var(--ink);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.pb-btn:hover { 
  background: rgba(244,238,249,0.08);
  border-color: var(--parks-accent-1);
}
.pb-btn--primary {
  background: linear-gradient(96deg, var(--parks-accent-1), #A8DB00);
  border-color: transparent;
  color: #000;
  font-weight: 700;
}
.pb-btn--primary:hover {
  opacity: 0.9;
}

/* Progress dots */
.pb-progress {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 24px;
}

.pb-progress-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--hairline-2);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.pb-progress-dot:hover {
  background: var(--muted);
  transform: scale(1.15);
}

.pb-progress-dot.active {
  background: var(--parks-accent-1);
  transform: scale(1.2);
}

/* =========================================================
   S15 — AI Prototype Prompt Builder (full-screen live)
   ========================================================= */
/* Background inherited from the slide's theme class (slide--islands) so the
   slide matches the surrounding purple deck section instead of fighting it
   with its own hardcoded gradient. */
.prototype-builder-slide .slide__inner {
  padding: 64px 80px;
  gap: 32px;
  max-width: none;
}

.proto-head {
  text-align: left;
  margin-bottom: 12px;
}
.proto-title {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
  color: #fff;
}
.proto-title-accent {
  background: linear-gradient(96deg, #E879F9, #F0ABFC);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.proto-subtitle {
  font-family: var(--font-body);
  font-size: 24px;
  line-height: 1.4;
  color: rgba(255,255,255,0.7);
  margin: 8px 0 0 0;
}

.proto-wizard {
  position: relative;
  flex: 1;
  min-height: 0;
}

.proto-page {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
}

.proto-page-grid {
  display: grid;
  grid-template-columns: 580px 1fr;
  gap: 28px;
  flex: 1;
  min-height: 0;
}

.proto-questions {
  background: rgba(0,0,0,0.35);
  border-radius: 20px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.proto-tabs {
  display: flex;
  background: rgba(0,0,0,0.3);
  padding: 6px;
  gap: 6px;
}
.proto-tab {
  flex: 1;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  padding: 12px 16px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: all 0.2s;
}
.proto-tab.active {
  background: linear-gradient(96deg, #A855F7, #E879F9);
  color: #000;
}
.proto-tab:hover:not(.active) {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.9);
}

.proto-questions > div:not(.proto-tabs) {
  padding: 28px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.proto-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.proto-field label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #E879F9;
}
.proto-field input,
.proto-field textarea {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(0,0,0,0.4);
  color: rgba(255,255,255,0.95);
  resize: vertical;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
/* Concept page: textareas grow to fill the questions column so the form
   doesn't leave a big empty band at the bottom. */
.proto-field--grow { flex: 1 1 0; min-height: 0; }
.proto-field--grow textarea { flex: 1; min-height: 0; }
.proto-field input:focus,
.proto-field textarea:focus {
  border-color: #E879F9;
  background: rgba(0,0,0,0.5);
}
.proto-field input::placeholder,
.proto-field textarea::placeholder {
  color: rgba(255,255,255,0.35);
}

.proto-preview {
  background: rgba(0,0,0,0.5);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.proto-preview-header {
  background: rgba(0,0,0,0.4);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.proto-preview-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #E879F9;
  box-shadow: 0 0 8px #E879F9;
}
.proto-preview-title {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.6);
  flex: 1;
}
.proto-preview-actions {
  display: flex;
  gap: 8px;
}

.proto-btn-sm {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.9);
  cursor: pointer;
  transition: background 0.15s;
}
.proto-btn-sm:hover {
  background: rgba(255,255,255,0.15);
}
.proto-btn-sm.proto-btn-primary {
  background: linear-gradient(96deg, #A855F7, #E879F9);
  border-color: transparent;
  color: #000;
}
.proto-btn-sm.proto-btn-primary:hover {
  opacity: 0.9;
}

.proto-preview-content {
  flex: 1;
  padding: 24px;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,0.85);
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-y: auto;
}
.proto-preview-content:empty::before {
  content: "Täida väljad, et näha prompt →";
  color: rgba(255,255,255,0.35);
  font-style: italic;
}
.proto-preview-content strong {
  color: #E879F9;
  font-weight: 700;
}

/* =========================================================
   S14 — Build / handoff plain text variant
   ========================================================= */
.build-slide .slide__inner { padding: 96px 128px; gap: 48px; justify-content: center; }
.build-title {
  font-family: var(--font-display);
  font-size: 96px; font-weight: 700;
  line-height: 1.0; letter-spacing: -0.025em;
  margin: 0; max-width: 16ch;
  color: var(--ink);
}
.build-body {
  font-family: var(--font-body);
  font-size: 36px; line-height: 1.4;
  color: var(--ink-2);
  max-width: 30ch;
  text-wrap: pretty;
  margin: 0;
}
.build-tools { display: flex; gap: 14px; margin-top: 8px; }
.build-tools .tool {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 500;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1.5px solid var(--hairline-2);
  color: var(--ink-2);
}
.build-exercise {
  margin-top: 32px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 24px;
  color: var(--muted);
  max-width: 40ch;
}

/* Parks (green) — close variant */
.slide--parks-close {
  --bg: #12251C;
  --surface: #1a3329;
  --surface-2: #234d3a;
  --ink: #E8F5E9;
  --ink-2: #C8E6C9;
  --muted: #81C784;
  --muted-2: #66BB6A;
  --hairline: rgba(129, 199, 132, 0.15);
  --hairline-2: rgba(129, 199, 132, 0.25);
  background: #12251C;
  background-image: radial-gradient(ellipse 1400px 900px at 45% 50%, rgba(102, 187, 106, 0.15), transparent),
                    radial-gradient(ellipse 1200px 800px at 60% 40%, rgba(129, 199, 132, 0.12), transparent);
}

.slide--parks-close .b-gradient {
  background: linear-gradient(96deg, #66BB6A, #81C784, #A5D6A7);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* =========================================================
   S18 — Close / links
   ========================================================= */
.close-slide .slide__inner { padding: 96px 128px; justify-content: space-between; }
.close-thanks {
  font-family: var(--font-display);
  font-size: 280px; font-weight: 700;
  line-height: 0.9; letter-spacing: -0.04em;
  margin: 0;
}
.close-links {
  display: flex; gap: 32px; flex-wrap: wrap;
  font-family: var(--font-body);
  font-size: 28px; color: var(--ink-2);
}
.close-links a {
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1.5px solid var(--hairline-2);
  padding-bottom: 4px;
  transition: color 140ms ease, border-color 140ms ease;
}
.close-links a:hover { color: var(--cyan); border-color: var(--cyan); }
.close-links .ph { color: var(--muted-2); }

/* Feedback QR — bottom-right corner of the close slide. */
.close-slide { position: relative; }
.close-qr {
  position: absolute;
  right: 96px;
  bottom: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: var(--ink-2);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 18px;
  letter-spacing: 0.04em;
}
.close-qr img {
  width: 260px;
  height: 260px;
  background: #fff;
  padding: 14px;
  border-radius: 18px;
  display: block;
}

/* =========================================================
   Edit mode (deck-stage overlay Edit button)
   ========================================================= */
deck-stage[data-edit-mode] .slide,
deck-stage[data-edit-mode] .slide * { cursor: text; }
deck-stage[data-edit-mode] .slide a,
deck-stage[data-edit-mode] .slide button { cursor: pointer; }
[data-deck-edit] {
  outline: 2px solid #FB5DC6;
  outline-offset: 3px;
  border-radius: 3px;
  background: rgba(251, 93, 198, 0.06);
}

/* =========================================================
   Tweaks panel coexistence — leave default
   ========================================================= */