/* =========================================================
   Seth's Recovery Program — page-scoped styles.
   Loaded AFTER dist/css/styles.min.css so token + shared
   component classes (container, section, card, btn, .nav-*,
   .site-header, .site-footer) come from the design system.
   Only page-specific additions live here.
   ========================================================= */

/* Reuse the muted section + brand look but give the recovery
   page its own subtle "special edition" personality. */
.seth-header {
  border-bottom: 1px solid var(--color-border);
}

/* Hero — celebrate the client. */
.seth-hero {
  background: linear-gradient(180deg, #fdf6ec 0%, #fbfcff 55%, #ffffff 100%);
}

.seth-eyebrow {
  color: var(--color-platform);
}

.seth-eyebrow--light {
  color: #ffd9a0;
}

.seth-hero__title {
  margin: 0;
  line-height: var(--lh-tight);
  font-size: clamp(1.9rem, 5vw, var(--fs-3xl));
  max-width: 20ch;
}

.seth-hero__lead {
  max-width: 62ch;
}

.seth-hero__actions {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.seth-disclaimer {
  margin-top: var(--space-8);
  padding: var(--space-4);
  border-left: 4px solid var(--color-platform);
  background: rgba(180, 83, 9, 0.07);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  max-width: 62ch;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

/* Tier cards get a touch more air. */
.seth-tier {
  display: flex;
  flex-direction: column;
}

.seth-tier h3 {
  margin-top: 0;
}

.seth-tier ul {
  flex-grow: 1;
  color: var(--color-text-muted);
}

/* Gadgets (nap accumulator + gag machine). */
.seth-gadget {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 760px) {
  .seth-gadget {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }
}

.seth-gadget__head > * + * {
  margin-top: var(--space-4);
}

.seth-gadget__label {
  font-size: var(--fs-lg);
  margin: 0 0 var(--space-3);
}

/* Dark gadget variant (gag machine) for contrast. */
.seth-gadget--dark {
  background: var(--color-bg);
  border-color: #22304e;
}

.seth-gadget--dark h2 {
  color: var(--color-text-inverse);
}

.seth-lead--light {
  color: var(--color-text-inverse-muted);
}

/* Progress track for the nap accumulator — class toggles,
   no inline styles (CSP-safe). Width steps are discrete so no
   runtime element.style is ever needed. */
.progress-track {
  width: 100%;
  height: 1.5rem;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--color-growth);
  border-radius: 999px;
  transition: width 0.35s ease;
}

/* Width steps: 7 naps / 100%. CSP-safe — never set via element.style. */
.progress-fill.progress--1 { width: 14.285%; }
.progress-fill.progress--2 { width: 28.571%; }
.progress-fill.progress--3 { width: 42.857%; }
.progress-fill.progress--4 { width: 57.142%; }
.progress-fill.progress--5 { width: 71.428%; }
.progress-fill.progress--6 { width: 85.714%; }
.progress-fill.progress--7 { width: 100%; background: var(--color-platform); }

.seth-gadget__note {
  margin: var(--space-3) 0 0;
  color: var(--color-text-muted);
  min-height: 1.5em;
}

.seth-gadget--dark .seth-gadget__note {
  color: var(--color-text-inverse-muted);
}

.seth-gadget__actions {
  margin-top: var(--space-4);
}

/* Gag card — the cutaway bit renders here. */
.seth-gag-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  min-height: 9rem;
  display: flex;
  align-items: center;
}

.seth-gag-card p {
  margin: 0;
  color: var(--color-text);
  font-size: var(--fs-lg);
  line-height: var(--lh-base);
}

.seth-gag-card.is-flashing {
  animation: gagFlash 0.4s ease;
}

@keyframes gagFlash {
  0% {
    background: var(--color-surface);
  }
  40% {
    background: #fff3d6;
  }
  100% {
    background: var(--color-surface);
  }
}

/* Lighter text on the light background gag card for the
   "dark mode" container holding it. */
.seth-gadget--dark .seth-gag-card {
  background: var(--color-surface);
}

/* Closing love note — on-brand but unmistakably personal. */
.seth-love {
  background: linear-gradient(180deg, #fbfcff 0%, #fdf6ec 100%);
}

.seth-love__title {
  margin: 0 0 var(--space-4);
}

.seth-love__body {
  max-width: 62ch;
  color: var(--color-text);
  font-size: var(--fs-lg);
}

.seth-love__signoff {
  margin-top: var(--space-6);
  font-weight: 700;
  color: var(--color-text-muted);
}

/* Reduced-motion: keep it calm. */
@media (prefers-reduced-motion: reduce) {
  .progress-fill {
    transition: none;
  }

  .seth-gag-card.is-flashing {
    animation: none;
  }
}

/* Mobile polish consistent with the rest of the site. */
@media (max-width: 759px) {
  .seth-hero__actions .btn--block-mobile {
    margin-bottom: 0;
  }

  .seth-gadget__body button {
    width: 100%;
  }
}