/* Swipe tour (JOB_006). Easy-read: cream background, big text, Back / Read aloud / Next fixed in the same place. */
:root{--bg:#fdf6e3;--card:#fffdf7;--ink:#1f2937;--muted:#4b5563;--line:#d6cdb8;--accent:#1e5aa8;--focus:#f59e0b;--bar:84px}
*{box-sizing:border-box}
html{font-size:18px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Verdana,Tahoma,Arial,sans-serif;line-height:1.55;overflow-x:hidden}
.tour{min-height:100vh;padding:12px 16px calc(var(--bar) + 16px)}
.tourtop{display:flex;flex-wrap:wrap;gap:8px;max-width:1000px;margin:0 auto 4px}   /* Home / All tours / Sign in: the way out on every screen */
.tourtop a{font-weight:700;font-size:.9rem;padding:6px 12px;border:2px solid var(--accent);border-radius:999px;background:var(--card);color:var(--accent);text-decoration:none}
.tourtop a:hover,.tourtop a:focus-visible{background:var(--accent);color:var(--card)}
.dots{display:flex;justify-content:center;gap:8px;padding:6px 0 10px}
.dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--accent);background:transparent;padding:0;cursor:pointer}
.dot[aria-selected="true"]{background:var(--accent)}
/* clip the slide-in: a card poking past the edge makes phone browsers zoom out, and then the fixed buttons jump */
html{overflow-x:hidden}
.stage{max-width:1000px;margin:0 auto;touch-action:pan-y;user-select:none;overflow-x:clip;padding:4px 6px 10px}
.card{display:grid;grid-template-columns:1fr;gap:12px;align-items:start}
.card.in-right{animation:inR .25s ease-out}.card.in-left{animation:inL .25s ease-out}
@keyframes inR{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes inL{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
.pic{margin:0;display:flex;justify-content:center}
.pic img{display:block;max-width:100%;max-height:min(40vh,calc(100vh - var(--bar) - 330px));min-height:180px;object-fit:contain;border:3px solid var(--line);border-radius:18px;background:var(--card);box-shadow:0 4px 14px rgba(0,0,0,.08)}
/* walk-through player: the app's own picture steps, built up one by one */
.walkbox{background:var(--card);border:3px solid var(--line);border-radius:18px;padding:10px 12px 12px;width:100%;max-width:520px;margin:0 auto;box-shadow:0 4px 14px rgba(0,0,0,.08)}
.wtop{display:flex;flex-direction:column;align-items:flex-start;gap:4px}   /* topic, then the sound label on its own line: same rows in every box */
.wtopic{font-weight:700;color:var(--accent);font-size:.95rem}
.speed{display:inline-block;background:#fff7d6;color:#1f2937;border:2px solid #e0b100;border-radius:999px;padding:1px 10px;font-weight:700;font-size:.9rem}
.wname{font-size:1.2rem;margin:.2em 0 .3em;line-height:1.3}
.wdots{display:flex;gap:5px;justify-content:center;margin:2px 0 8px}
.wdots i{width:10px;height:10px;border-radius:50%;background:var(--bg);border:1.5px solid var(--line)}
.wdots i.on{background:var(--accent);border-color:var(--accent)}
/* one picture size on every walk-through screen: the area is fixed, the picture (cropped to its drawing) fills it */
.wpic{height:clamp(160px,calc(32vh - 30px),300px)}   /* 30px given to the Home row, so Play stays above the bar on phones */
.wpic svg{display:block;width:100%;height:100%;margin:0 auto;color:var(--ink)}
.speed.spoken{background:transparent;border-color:var(--line);color:var(--muted)}
.wpic .wg.new{animation:wfade .9s ease both}
.walkbox.fast .wpic .wg.new{animation-duration:.45s}
@keyframes wfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.wnum{color:var(--muted);font-size:.95rem;margin:.4em 0 0}
.wtext{font-size:1.1rem;line-height:1.45;margin:.1em 0 .5em}   /* min-height set by tour.js: the tallest step text in the tour */
.wplay{display:block;width:100%;font:inherit;font-weight:700;font-size:1.1rem;padding:12px;border-radius:12px;border:2px solid var(--accent);background:var(--accent);color:var(--accent-ink,#fff);cursor:pointer}
.walkbox.fast .wplay{background:var(--card);color:var(--accent)}   /* same size as the spoken one, so the box never changes */
.words h1{font-size:1.6rem;line-height:1.25;margin:.1em 0 .4em}
.words p{font-size:1.15rem;margin:.2em 0 .5em;max-width:34em}
.count{color:var(--muted);font-size:1rem!important;margin:0!important}
.section{font-weight:700;color:var(--accent)}
@media (max-width:899px){.card:has(.points) .pic img{max-height:26vh;min-height:0}}   /* the list of points fits on a phone screen */
.points{list-style:none;padding:0;margin:.4em 0 0;max-width:34em}
.points li{position:relative;padding:4px 0 6px 34px;font-size:1.1rem;line-height:1.45}
.points li::before{content:"✓";position:absolute;left:4px;top:3px;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--accent-ink,#fff);font-size:.85rem;font-weight:700;text-align:center;line-height:22px}
.acts{display:grid;gap:10px;margin-top:12px;max-width:26em}
.act{display:block;text-align:center;font-weight:700;font-size:1.1rem;padding:14px;border-radius:12px;border:2px solid var(--accent);color:var(--accent);background:var(--card);text-decoration:none}
.act.primary{background:var(--accent);color:var(--accent-ink,#fff)}
.bar{position:fixed;left:0;right:0;bottom:0;height:var(--bar);display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;padding:12px 16px;background:var(--bg);border-top:2px solid var(--line);max-width:100vw}
.nav{font:inherit;font-weight:700;font-size:1.05rem;border-radius:12px;border:2px solid var(--accent);background:var(--card);color:var(--accent);cursor:pointer;min-width:0;padding:0 6px}
.nav.next{background:var(--accent);color:var(--accent-ink,#fff)}
.nav:disabled{opacity:.4;cursor:default}
button:focus-visible,a:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media (min-width:900px){
  .card{grid-template-columns:minmax(300px,420px) 1fr;gap:40px;align-items:center;min-height:calc(100vh - var(--bar) - 80px)}
  .pic img{max-height:calc(100vh - var(--bar) - 90px)}
  .words h1{font-size:2.2rem}.words p{font-size:1.3rem}
  .bar{left:50%;transform:translateX(-50%);max-width:720px;border:2px solid var(--line);border-bottom:0;border-radius:16px 16px 0 0}
}
@media (min-width:900px){
  .wpic{height:clamp(160px,calc(100vh - var(--bar) - 520px),340px)}   /* leaves room (incl. the Home row) so Play is never under the bar */
  .card.is-walk{min-height:0;padding-top:4px}
}
@media (prefers-reduced-motion:reduce){.card,.wpic .wg.new{animation:none!important}}