/* =====================================================================
   guide-step.css — Shared styles for all interactive guide pages
   Loaded after styles.css + theme.css
   ===================================================================== */

body { background: var(--night); color: var(--cream); font-family: 'Inter', sans-serif; }

/* ── Progress bar ────────────────────────────────────────────────── */
.gs-progress-bar-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--edge-50);
  z-index: 200;
}
.gs-progress-bar {
  height: 100%;
  background: var(--copper);
  transition: width 0.3s ease;
  width: 0%;
}

/* ── Main scrollable area (between sticky nav and sticky footer) ── */
.gs-main {
  min-height: calc(100dvh - 5rem - 5rem); /* nav + footer */
  padding: 1.5rem 1.5rem 2rem;
  max-width: 44rem;
  margin: 0 auto;
}

/* ── Card ─────────────────────────────────────────────────────────── */
.gs-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ── Type badge ──────────────────────────────────────────────────── */
.gs-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(var(--sage-rgb), 0.12);
  color: var(--sage);
  border: 1px solid rgba(var(--sage-rgb), 0.2);
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  width: fit-content;
}
.gs-type-badge--warning {
  background: rgba(193, 127, 62, 0.12);
  color: var(--copper);
  border-color: rgba(193, 127, 62, 0.25);
}
.gs-type-badge--success {
  background: rgba(138, 171, 127, 0.15);
  color: var(--sage);
  border-color: rgba(138, 171, 127, 0.3);
}

/* ── Step number ─────────────────────────────────────────────────── */
.gs-step-num {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--copper);
}

/* ── Image ───────────────────────────────────────────────────────── */
.gs-img-wrap {
  border-radius: 0.875rem;
  overflow: hidden;
  background: var(--edge-50);
  aspect-ratio: 4 / 3;
}
.gs-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.gs-img--portrait {
  aspect-ratio: 3 / 4;
  max-height: 55vh;
}

/* ── Text content ────────────────────────────────────────────────── */
.gs-title {
  font-size: clamp(1.5rem, 5vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cream);
  line-height: 1.2;
  margin: 0;
}
.gs-subtitle {
  font-size: 0.9375rem;
  color: rgba(var(--sage-rgb), 0.8);
  margin: 0;
}
.gs-body {
  font-size: 1rem;
  color: rgba(var(--cream-rgb), 0.85);
  line-height: 1.65;
  margin: 0;
}

/* ── Stat grid ───────────────────────────────────────────────────── */
.gs-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
.gs-stat {
  background: var(--surface-1);
  border: 1px solid var(--edge-60);
  border-radius: 0.625rem;
  padding: 0.875rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.gs-stat-val {
  font-size: 1rem;
  font-weight: 700;
  color: var(--cream);
}
.gs-stat-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(var(--sage-rgb), 0.7);
}

/* ── Safety list ─────────────────────────────────────────────────── */
.gs-safety-list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.gs-safety-item {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  background: var(--surface-1);
  border: 1px solid var(--edge-60);
  border-radius: 0.75rem;
  padding: 0.875rem 1rem;
}
.gs-safety-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.gs-safety-title {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 0.25rem;
}
.gs-safety-body {
  font-size: 0.875rem;
  color: rgba(var(--sage-rgb), 0.85);
  line-height: 1.55;
  margin: 0;
}

/* ── Two-column cards ────────────────────────────────────────────── */
.gs-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
@media (max-width: 480px) { .gs-two-col { grid-template-columns: 1fr; } }
.gs-col-card {
  background: var(--surface-1);
  border: 1px solid var(--edge-60);
  border-radius: 0.75rem;
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
}
.gs-col-card strong {
  display: block;
  color: var(--copper);
  font-size: 0.8125rem;
  font-weight: 700;
  margin-bottom: 0.375rem;
}
.gs-col-card p {
  color: rgba(var(--cream-rgb), 0.82);
  line-height: 1.55;
  margin: 0;
}

/* ── Bullets & numbered lists ────────────────────────────────────── */
.gs-bullets, .gs-numbered {
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
}
.gs-bullets { list-style: disc; }
.gs-numbered { list-style: decimal; }
.gs-bullets li, .gs-numbered li {
  font-size: 0.9375rem;
  color: rgba(var(--cream-rgb), 0.85);
  line-height: 1.55;
  padding-left: 0.25rem;
}

/* ── Tip & Warning boxes ─────────────────────────────────────────── */
.gs-tip, .gs-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  border-radius: 0.75rem;
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  line-height: 1.55;
}
.gs-tip {
  background: rgba(138, 171, 127, 0.08);
  border: 1px solid rgba(138, 171, 127, 0.2);
  color: rgba(var(--sage-rgb), 0.9);
}
.gs-tip-icon { font-size: 1rem; flex-shrink: 0; }
.gs-warning {
  background: rgba(193, 127, 62, 0.1);
  border: 1px solid rgba(193, 127, 62, 0.25);
  color: rgba(var(--cream-rgb), 0.9);
}
.gs-warning-icon { font-size: 1rem; flex-shrink: 0; color: var(--copper); }

/* ── Finish tips ─────────────────────────────────────────────────── */
.gs-finish-tips {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.gs-finish-tip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--surface-1);
  border: 1px solid var(--edge-60);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  color: rgba(var(--cream-rgb), 0.85);
}
.gs-finish-tip span:first-child { font-size: 1.25rem; flex-shrink: 0; }

/* ── CTA link ────────────────────────────────────────────────────── */
.gs-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--copper);
  color: var(--cream);
  font-weight: 700;
  font-size: 0.9375rem;
  padding: 0.875rem 1.5rem;
  border-radius: 0.625rem;
  text-decoration: none;
  transition: background 0.2s;
  text-align: center;
}
.gs-cta:hover { background: var(--rust); }

/* ── Sticky footer nav ───────────────────────────────────────────── */
.gs-footer {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--night);
  border-top: 1px solid var(--edge-60);
  padding: 0.875rem 1.5rem;
  padding-bottom: max(0.875rem, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  z-index: 100;
}
.gs-step-counter {
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(var(--sage-rgb), 0.7);
  white-space: nowrap;
}
.gs-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.65rem 1.25rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  letter-spacing: 0.01em;
}
.gs-btn svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.gs-btn--prev {
  background: var(--edge-30);
  color: var(--cream);
  border: 1px solid var(--edge-60);
}
.gs-btn--prev:hover { background: var(--edge-50); }
.gs-btn--next {
  background: var(--copper);
  color: var(--cream);
}
.gs-btn--next:hover { background: var(--rust); }

/* ── Light theme overrides ───────────────────────────────────────── */
html[data-theme="light"] body { background: #FEFAE0 !important; }
html[data-theme="light"] .gs-title { color: #283618; }
html[data-theme="light"] .gs-body { color: rgba(40,54,24,0.82); }
html[data-theme="light"] .gs-stat { background: #fff; border-color: rgba(0,0,0,0.1); }
html[data-theme="light"] .gs-stat-val { color: #283618; }
html[data-theme="light"] .gs-safety-item { background: #fff; border-color: rgba(0,0,0,0.1); }
html[data-theme="light"] .gs-safety-title { color: #283618; }
html[data-theme="light"] .gs-safety-body { color: rgba(40,54,24,0.75); }
html[data-theme="light"] .gs-col-card { background: #fff; border-color: rgba(0,0,0,0.1); }
html[data-theme="light"] .gs-col-card p { color: rgba(40,54,24,0.82); }
html[data-theme="light"] .gs-bullets li,
html[data-theme="light"] .gs-numbered li { color: rgba(40,54,24,0.85); }
html[data-theme="light"] .gs-tip { background: rgba(96,108,56,0.08); border-color: rgba(96,108,56,0.2); color: #606C38; }
html[data-theme="light"] .gs-warning { background: rgba(188,108,37,0.08); border-color: rgba(188,108,37,0.2); color: rgba(40,54,24,0.9); }
html[data-theme="light"] .gs-finish-tip { background: #fff; border-color: rgba(0,0,0,0.1); color: rgba(40,54,24,0.85); }
html[data-theme="light"] .gs-footer { background: #FEFAE0; border-top-color: rgba(0,0,0,0.1); }
html[data-theme="light"] .gs-step-counter { color: rgba(40,54,24,0.6); }
html[data-theme="light"] .gs-btn--prev { background: rgba(0,0,0,0.04); color: #283618; border-color: rgba(0,0,0,0.14); }
html[data-theme="light"] .gs-btn--prev:hover { background: rgba(0,0,0,0.08); }
html[data-theme="light"] .gs-subtitle { color: rgba(40,54,24,0.7); }