/* The full-page step flow: Evaluation, Interview, the goal plan and its
   review (Ryan 2026-10-25: one experience, never mixed with the step modal).
   Progress line on top, logo top left, × top right with a discard confirm,
   one slide at a time, chevrons bottom left. */
.eval-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #1a2744;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
}
.eval-overlay::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url('../assets/background.webp');
  background-size: cover;
  background-position: center;
  opacity: 0.15;
  pointer-events: none;
}
.eval-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* Logo in top left - match app header size */
.eval-logo {
  position: fixed;
  top: 16px;
  left: 24px;
  z-index: 1010;
}
.eval-logo img {
  height: 40px;
}

.eval-close {
  position: fixed;
  top: 16px;
  right: 24px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  width: 48px;
  height: 48px;
  font-size: 32px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1010;
}
.eval-close:hover {
  color: #fff;
}

/* Progress bar - split into two sections at top */
.eval-progress {
  position: fixed;
  top: 0; left: 0;
  width: 50%;
  height: 4px;
  background: #2AABE2;
  z-index: 1012;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.eval-progress-secondary {
  position: fixed;
  top: 0; left: 50%;
  width: 50%;
  height: 4px;
  background: rgba(255, 255, 255, 0.15);
  z-index: 1011;
}
.eval-progress-bar {
  height: 100%;
  background: #2AABE2;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Slides container */
.eval-slides {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden;
}
.eval-slide, .gpo-slide {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Review cycle: the metric box and the summary's extra rows make some
     slides taller than a phone. `safe` keeps the top reachable and the
     slide scrolls instead of sliding content under the nav. */
  justify-content: safe center;
  overflow-y: auto;
  padding: 120px 40px 80px;
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.eval-slide.active, .gpo-slide.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.eval-slide.exit-up, .gpo-slide.exit-up {
  opacity: 0;
  transform: translateY(-40px);
}

.eval-ok-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 14px 28px;
  background: #2AABE2;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.eval-ok-btn:hover {
  background: #1976D2;
}

/* Navigation - bottom left arrows (moved to avoid feedback orb) */
.eval-nav {
  position: fixed;
  bottom: 32px;
  left: 32px;
  display: flex;
  gap: 8px;
  z-index: 1010;
}
.eval-nav-btn {
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.eval-nav-btn.secondary {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
}
.eval-nav-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}
.eval-nav-btn.primary {
  background: #2AABE2;
  color: #fff;
}
.eval-nav-btn.primary:hover {
  background: #1976D2;
}
.eval-nav-btn.primary:disabled {
  background: rgba(42, 171, 226, 0.3);
  color: rgba(255, 255, 255, 0.3);
  cursor: not-allowed;
}
.eval-nav-btn.submit {
  width: auto;
  padding: 0 28px;
  background: #4caf50;
  color: #fff;
  font-size: 15px;
}
.eval-nav-btn.submit:hover {
  background: #43a047;
}

.eval-discard {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 20;
  display: none; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center;
  width: max-content; max-width: calc(100vw - 32px); padding: 12px 16px; border-radius: 12px; font-size: 14px;
  color: #fff; background: rgba(12,20,34,.96); border: 1px solid rgba(245,166,35,.45);
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
}
.eval-discard.open { display: flex; }
.eval-discard button {
  height: 34px; padding: 0 14px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
  color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
}
.eval-discard button.danger { background: rgba(245,166,35,.18); border-color: rgba(245,166,35,.6); color: #F5A623; }

/* The goal plan's slides use .gpo-slide (the Evaluation's goToSlide queries
   every .eval-slide on the page). Content runs one 700px column, like the
   Evaluation's questions. */
.gpo-slide { justify-content: flex-start; }
.eval-col { max-width: 700px; width: 100%; text-align: left; }
.eval-nav-btn svg { display: block; }
.eval-close { text-decoration: none; }
@media (max-width: 640px) {
  .eval-slide, .gpo-slide { padding: 96px 16px 104px; }
  .eval-logo { left: 16px; }
  .eval-logo img { height: 32px; }
  .eval-close { right: 8px; }
  .eval-nav { left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }
}
.eval-nav-btn.secondary:disabled { opacity: .35; cursor: default; }
.eval-nav-btn.secondary:disabled:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.6); }
/* iPhone (viewport-fit=cover): logo and × clear the Dynamic Island, the
   chevrons clear the home indicator, slides start below both. */
.eval-logo { top: calc(16px + env(safe-area-inset-top)); left: max(24px, env(safe-area-inset-left)); }
.eval-close { top: calc(16px + env(safe-area-inset-top)); right: max(24px, env(safe-area-inset-right)); }
.eval-nav { bottom: calc(32px + env(safe-area-inset-bottom)); }
@media (max-width: 640px) {
  .eval-logo { top: calc(12px + env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left)); }
  .eval-close { top: calc(8px + env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); }
  .eval-nav { bottom: calc(16px + env(safe-area-inset-bottom)); }
  .eval-slide, .gpo-slide { padding-top: calc(84px + env(safe-area-inset-top)); padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}
/* The fixed chevrons never cover a slide's own buttons: the column ends with
   room for them (margin, not scroll-container padding, so every browser keeps
   it), and on phones the buttons sit right, clear of the chevrons on the left. */
.gpo-slide > .eval-col, .gpo-slide > .gpo-q { margin-bottom: 40px; }
/* Goal plan bottom row (Ryan 2026-10-25): Back bottom left, the step's own
   button bottom right and always named for what comes next ("Next: Your
   business"), in the same place on every step, like the deck's ‹ ›. It sits
   outside the slides so their transforms never move it. On phones it is one
   flat bar with Back in it, clear of the home indicator. */
.gpo-next { position: fixed; right: max(32px, env(safe-area-inset-right)); bottom: calc(32px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px; z-index: 1010; margin: 0; }
.gpo-next:empty { display: none; }
.eval-nav-btn[hidden] { display: none; }
.gpo-next .btn, .gpo-next .gp-btn { height: 48px; padding: 0 24px; border-radius: 8px; font-size: 15px; font-weight: 600; }
.gpo-next .gp-actions { margin: 0; flex-direction: row; }
.gpo-next .gp-actions .gp-btn { width: auto; }
@media (max-width: 640px) {
  .gpo-next, .gpo-next:empty { display: flex; left: 0; right: 0; bottom: 0; justify-content: flex-end; min-height: 68px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #0d1e36; border-top: 1px solid rgba(255,255,255,.08); }
  .gpo-next .btn, .gpo-next .gp-btn { height: 48px; padding: 0 18px; }
  .eval-overlay:has(.gpo-next) .eval-nav { z-index: 1011; bottom: calc(10px + env(safe-area-inset-bottom)); }
}
/* Desktop: the goal plan uses the year-in-review deck's page frame (Ryan
   2026-10-25: no "invisible walls"): content starts at the deck's left gutter
   (160 of 1920) and runs to its right one, never a boxed centered column. */
@media (min-width: 1100px) {
  .gpo-slide { align-items: stretch; padding-left: max(56px, 8.333vw); padding-right: max(56px, 8.333vw); padding-top: 150px; }
  .gpo-slide > .eval-col, .gpo-slide > .gpo-q { max-width: none; }
}
@media (min-width: 1100px) and (max-height: 860px) {
  .gpo-slide { padding-top: 124px; }
}
@media (max-width: 640px) {
  .gpo-slide > .eval-col, .gpo-slide > .gpo-q { margin-bottom: 48px; }
  .gpo-q .gp-actions { justify-content: flex-end !important; }
}