/* Usage guide: full-screen slide deck (the page itself never scrolls) */
html:has(body.guide-page) { height: 100%; overflow: hidden; overscroll-behavior: none; }
body.guide-page { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; overscroll-behavior: none; }
body.guide-page .nav { position: static; flex: none; }
body.guide-page .nav-row { min-height: 60px; }

.tag { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; }
.tag.free { background: rgba(52, 211, 153, 0.15); color: #34d399; border: 1px solid rgba(52, 211, 153, 0.5); }
.tag.code { background: rgba(255, 122, 0, 0.15); color: var(--accent); border: 1px solid rgba(255, 122, 0, 0.55); }
.tag.mixed { background: rgba(255, 179, 38, 0.15); color: var(--gold); border: 1px solid rgba(255, 179, 38, 0.55); }

.deck {
  --c: var(--accent);
  flex: 1; min-height: 0; width: 100%; max-width: 1120px; margin: 0 auto;
  display: flex; flex-direction: column; padding: 0.75rem 1rem 0;
  touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none;
}
.deck-view { flex: 1; min-height: 0; overflow: hidden; border-radius: 24px; }
.deck-track { display: flex; height: 100%; transition: transform 0.4s cubic-bezier(0.22, 0.8, 0.25, 1); will-change: transform; }
.slide {
  --c: var(--accent);
  flex: 0 0 100%; min-width: 0; height: 100%; overflow: hidden; box-sizing: border-box;
  display: grid; grid-template-columns: 1fr 320px; grid-template-rows: minmax(0, 1fr); gap: 2.5rem; align-items: center;
  padding: clamp(1rem, 4dvh, 2.2rem) 2.5rem; background: var(--card);
  border: 2px solid var(--c); border-radius: 24px;
  background-image: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--c) 16%, transparent), transparent 55%);
}
.slide-intro { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.slide-center { max-width: 760px; }
.slide-center h1 { font-size: clamp(1.8rem, 5vw, 3.2rem); margin: 0.3rem 0 0.8rem; }
.slide-center .lead { color: var(--soft); margin: 0 auto; max-width: 560px; }
.end-title { font-size: clamp(1.6rem, 4.5vw, 2.8rem); margin: 0.3rem 0 0.8rem; }
.legend { margin: 1.1rem 0 0; color: var(--soft); font-size: 0.9rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin: 1.4rem 0; }
.chip {
  padding: 0.4rem 0.85rem; border-radius: 999px; border: 1.5px solid var(--c); background: transparent;
  color: var(--text); font: inherit; font-size: 0.85rem; cursor: pointer; transition: background 0.15s;
}
.chip:hover { background: color-mix(in srgb, var(--c) 22%, transparent); }
.md-links.center { justify-content: center; margin-top: 1.4rem; }
.end-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; justify-content: center; margin-top: 1.8rem; color: var(--soft); font-size: 0.8rem; }
.end-links a { color: var(--soft); text-decoration: underline; text-underline-offset: 3px; }

.slide-text { min-height: 0; }
.md-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.8rem; }
.md-head h2 { margin: 0; font-size: clamp(1.4rem, 3vw, 2.1rem); }
.md-head.small { margin: 0; justify-content: center; }
.md-head.small h2 { font-size: 1.25rem; }
.md-num {
  width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--c); color: var(--on);
  display: flex; align-items: center; justify-content: center; font-weight: 800; flex: none;
}
.md-head.small .md-num { width: 2rem; height: 2rem; }
.md-steps { margin: 1rem 0 0; padding-left: 1.3rem; color: var(--text); line-height: 1.55; font-size: clamp(0.88rem, 2.3dvh, 1.05rem); }
.md-steps li { margin: 0.5rem 0; }
.md-steps li::marker { color: var(--c); font-weight: 700; }
.md-links { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.1rem; }

.md-shots { height: 100%; min-height: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.phone-wrap { flex: 1; min-height: 0; width: 100%; display: flex; justify-content: center; }
.phone {
  height: 100%; max-width: 100%; box-sizing: border-box; display: flex; border-radius: 30px; padding: 7px;
  background: #3a3a40; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}
.phone img { display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; border-radius: 24px; -webkit-user-drag: none; }
.md-cap { color: var(--soft); font-size: 0.85rem; margin: 0.7rem 0 0; flex: none; }
.md-dots { display: flex; gap: 0.5rem; justify-content: center; margin-top: 0.6rem; flex: none; }
.md-dots button {
  width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--line-strong);
  background: transparent; color: var(--text); cursor: pointer; font: inherit; font-weight: 700;
}
.md-dots button.on { background: var(--c); color: var(--on); border-color: var(--c); }

.deck-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem 0 calc(0.9rem + env(safe-area-inset-bottom)); }
.deck-bar .btn { white-space: nowrap; }
.deck-bar .btn:disabled { opacity: 0.35; cursor: default; }
.deck-mid { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; min-width: 0; }
.deck-dots { display: flex; gap: 0.45rem; justify-content: center; }
.deck-dot {
  width: 0.7rem; height: 0.7rem; border-radius: 999px; padding: 0; border: 0; cursor: pointer;
  background: var(--line-strong); transition: width 0.25s, background 0.25s;
}
.deck-dot:hover { background: var(--c); opacity: 0.7; }
.deck-dot.on { width: 1.8rem; background: var(--c); opacity: 1; }
.deck-progress { display: none; width: 7rem; height: 5px; border-radius: 999px; background: var(--line-strong); overflow: hidden; }
.deck-progress i { display: block; height: 100%; width: 0; background: var(--c); border-radius: inherit; transition: width 0.3s; }
.deck-count { color: var(--soft); font-size: 0.8rem; }

@media (max-width: 899px) {
  .deck { padding: 0.5rem 0.6rem 0; }
  .slide { grid-template-columns: 1fr; padding: 1.1rem 1.1rem; gap: 0.8rem; align-content: center; }
  .slide-solo { align-content: center; }
  .slide-shot { grid-template-rows: auto minmax(0, 1fr) auto; align-content: stretch; justify-items: center; }
  .slide-shot .md-cap { margin: 0; }
  .md-steps { font-size: clamp(0.92rem, 2.5dvh, 1.1rem); }
  .deck-dots { display: none; }
  .deck-progress { display: block; }
  .deck-bar { gap: 0.5rem; }
  .deck-bar .btn { padding-inline: 0.8rem; font-size: 0.85rem; }
}
@media (prefers-reduced-motion: reduce) { .deck-track { transition: none; } }

/* Annotated screenshots */
.shots-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 1.2rem; margin-top: 1.4rem; }
.shots-grid figure { margin: 0; background: #fff; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); }
.shots-grid img { display: block; width: 100%; height: auto; }
.shots-grid figcaption { padding: 0.6rem 1rem; color: #333; font-weight: 600; font-size: 0.9rem; background: #f4f0e8; }
@media (max-width: 520px) { .shots-grid { grid-template-columns: 1fr; } }