/* Product walkthroughs (js/walkthroughs/). The templates carry every visual
 * value inline, straight from the Claude Design reference; this file only
 *   1. recreates the reference page's base styles inside .wt-board, and
 *      puts back the browser defaults that site.css / legacy.css reset
 *      globally (img/svg display:block, button font:inherit, heading sizes);
 *   2. makes the 1296px artboard fluid: the header and chips reflow, and the
 *      1232×780 app window scales as one piece (runtime.js sets the scale);
 *   3. styles the phone view and the full-screen overlay.
 * !important appears only where it has to beat the templates' inline styles. */

/* ── Host (before and after mount) ───────────────────────────────────── */
.wt-host { position: relative; max-width: 1296px; margin: 0 auto; }
/* On short screens, narrow the board until the step chips and the whole app
   window fit under the 72px nav at once (window is 1232×780; ~190px covers
   nav, chips, gaps and padding). 1.5795 = 1232/780. */
@media (min-width: 701px) {
  .wt-host { max-width: min(1296px, calc((100vh - 190px) * 1.5795 + 64px)); }
}
.wt-host:not(.is-ready) {
  aspect-ratio: 1296 / 1000;
  border-radius: 24px;
  background: linear-gradient(180deg, #0F2544 0%, #16324f 100%);
}
.wt-host[hidden] { display: none; }

/* ── 1. Reference base styles, scoped ────────────────────────────────── */
.wt-board {
  --font-heading: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #1A1E2C;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.wt-board *, .wt-board *::before, .wt-board *::after { box-sizing: border-box; }
.wt-board img, .wt-board svg { display: inline; max-width: none; }
.wt-board p, .wt-board figure, .wt-board blockquote { margin: 0; }
.wt-board :is(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: bold;
  line-height: inherit;
  letter-spacing: -0.02em;
  color: #1B3A5C;
  text-wrap: wrap;
}
.wt-board button {
  font: revert;
  font-family: inherit;
  border: revert;
  background: revert;
  padding: revert;
  cursor: pointer;
}
.wt-board button:focus-visible { outline: 2px solid #7EC8E3; outline-offset: 2px; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } }

/* ── 2. Fluid artboard ───────────────────────────────────────────────── */
.wt-board { width: 100% !important; }
.wt-stage { position: relative; width: 100%; flex: none; }
.wt-stage > .wt-win { position: absolute !important; top: 0; left: 0; transform-origin: 0 0; }
.wt-board[data-reduced] * { transition: none !important; animation: none !important; }

@media (max-width: 1100px) {
  .wt-board h2 { font-size: 24px !important; }
}

/* Expand affordance: only when the window is scaled small. */
.wt-expand, .wt-close, .wt-rotate { display: none; }
.wt-small .wt-stage { cursor: zoom-in; }
.wt-small .wt-expand {
  position: absolute; right: 10px; bottom: 10px; z-index: 5;
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, .3) !important;
  background: rgba(15, 37, 68, .88) !important;
  color: #fff; font-size: 12.5px; font-weight: 600;
  box-shadow: 0 6px 18px rgba(5, 15, 30, .35);
}

/* ── 3. Phones ───────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .wt-host:not(.is-ready) { aspect-ratio: 4 / 3; border-radius: 18px; }
  .wt-board { padding: 18px 14px !important; gap: 14px !important; border-radius: 18px !important; }
  .wt-board > :first-child { align-items: flex-start !important; gap: 12px !important; }
  .wt-board h2 { font-size: 19px !important; line-height: 1.25 !important; }
  .wt-board .wt-play { height: 32px !important; padding: 0 12px !important; font-size: 12px !important; }
  /* One chip: the step now playing, with its progress bar. */
  .wt-board [data-on="false"] { display: none !important; }
  .wt-board [data-on="true"] { max-width: 100%; }
}

/* ── Full-screen overlay (tap to expand) ─────────────────────────────── */
html.wt-lock, html.wt-lock body { overflow: hidden; }
.wt-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; background: #0A1A30;
}
.wt-board.wt-full {
  flex: 1; height: 100%; max-width: none;
  border-radius: 0 !important;
  padding: 12px 12px 10px !important;
  gap: 10px !important;
}
.wt-full > :first-child { display: none !important; }
.wt-full [data-on="false"] { display: none !important; }
.wt-full .wt-stage { flex: 1 1 auto; min-height: 0; height: auto; cursor: default; }
.wt-full .wt-expand { display: none !important; }
.wt-full > div:nth-child(2) { padding-right: 52px; }
.wt-full .wt-close {
  position: absolute; top: 10px; right: 10px; z-index: 6;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, .3) !important;
  background: rgba(255, 255, 255, .08) !important; color: #fff;
}
@media (orientation: portrait) {
  .wt-full .wt-rotate {
    display: block; flex: none; margin: 0;
    text-align: center; font-size: 13px; color: rgba(255, 255, 255, .6);
  }
}

/* ── Section chrome around a walkthrough ─────────────────────────────── */
.wt-section { padding: 72px 0; background: #fff; }
.wt-section--lead { padding-top: 8px; }
.wt-section .wt-section__inner { max-width: 1360px; }
.wt-section__head { margin-bottom: 28px; }
@media (max-width: 700px) {
  .wt-section { padding: 48px 0; }
  .wt-section--lead { padding-top: 0; }
}
.wt-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 12px 16px; margin-top: 28px;
}
.wt-cta__note { width: 100%; text-align: center; font-size: 14px; color: var(--muted, #6B7A99); }
.wt-tabs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin: 0 auto 28px; max-width: 1000px;
}
.wt-tab {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 18px; border-radius: 99px;
  border: 1px solid var(--border, #E2E8F0); background: #fff;
  color: var(--text-secondary, #4A5568); font-size: 14.5px; font-weight: 600;
  transition: all .2s cubic-bezier(.4, 0, .2, 1);
}
.wt-tab:hover { border-color: #7EC8E3; color: var(--navy, #1B3A5C); }
.wt-tab[aria-selected="true"] { background: var(--navy, #1B3A5C); border-color: var(--navy, #1B3A5C); color: #fff; }
.wt-tab:focus-visible { outline: 3px solid rgba(126, 200, 227, .6); outline-offset: 2px; }
@media (max-width: 700px) {
  .wt-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 0 -20px 20px; padding: 0 20px 4px; scrollbar-width: none; }
  .wt-tabs::-webkit-scrollbar { display: none; }
  .wt-tab { flex: none; height: 38px; padding: 0 14px; font-size: 13.5px; }
}

/* ── /tour ───────────────────────────────────────────────────────────── */
.tour-rail { justify-content: center; margin-top: 28px; }
.tour-step { padding: 56px 0; }
.tour-step--alt { background: var(--off-white, #F5F7FA); }
.tour-step__head { max-width: 760px; margin: 0 auto 22px; text-align: center; }
.tour-step__intro { margin: 10px 0 0; font-size: 17px; line-height: 1.6; color: var(--text-secondary, #4A5568); }
.tour-sticky { display: none; }
@media (max-width: 700px) {
  .tour-step { padding: 40px 0; }
  .tour-step__intro { font-size: 15.5px; }
  /* Event traffic is mostly phones: keep the builder one tap away. */
  .tour-sticky {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96); border-top: 1px solid var(--border, #E2E8F0);
    box-shadow: 0 -8px 24px rgba(13, 31, 52, .08);
  }
  .tour-sticky .btn { width: 100%; justify-content: center; }
  body:has(.tour-sticky) { padding-bottom: 72px; }
}