/* 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)}
.tourtop a[href="/contact"]{margin-left:auto}   /* Contact sits top right; on a phone only its envelope shows, so the row stays one line */
@media (max-width:520px){.tourtop{gap:6px}.tourtop a{padding:6px 9px}.tourtop .tl{display:none}}
.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}
}
/* Desktop, any window height (operator, 2026-10-30: on a laptop window about 600 high the bar covered the text and Play,
   and the picture sat well to the right of Home). Sizes now follow the window HEIGHT, so each screen fits above the bar;
   the picture starts at the same left edge as Home, and Contact ends at the right edge of the text. */
@media (min-width:900px){
  .tour{padding-top:8px}
  .tourtop{padding:0 6px}                                   /* the same side padding as .stage below it */
  .dots{padding:4px 0 6px}
  .card{min-height:calc(100vh - var(--bar) - 70px)}
  .card:not(.is-walk){grid-template-columns:auto 1fr}       /* the picture takes only its own width; the words get the rest */
  .pic{justify-content:flex-start}
  .pic img{max-width:420px;max-height:calc(100vh - var(--bar) - 100px);min-height:0}
  .walkbox{margin:0}
  .words h1{font-size:clamp(1.45rem,5vh,2.2rem)}
  .words p{font-size:clamp(1rem,2.6vh,1.3rem)}
  .points li{font-size:clamp(.95rem,2.5vh,1.1rem);line-height:1.38;padding:2px 0 4px 34px}
  .acts{gap:8px;margin-top:8px}
  .act{padding:clamp(8px,1.7vh,14px)}
  .walkbox{padding:8px 12px 10px}
  .wname{font-size:clamp(1rem,2.8vh,1.2rem)}
  .wtext{font-size:clamp(.95rem,2.5vh,1.1rem)}
  .wpic{height:clamp(110px,calc(100vh - var(--bar) - 520px),340px)}
  .wplay{padding:clamp(8px,1.6vh,12px)}
}
/* short desktop windows (a laptop at 125-150% scaling: 520-700 high): a more compact walk-through box */
@media (min-width:900px) and (max-height:700px){
  .card.is-walk{grid-template-columns:minmax(300px,480px) 1fr;gap:28px}
  .wtop{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 10px}
  .wname{font-size:clamp(.95rem,2.6vh,1.1rem);margin:.1em 0 .2em}
  .wdots{margin:0 0 4px}
  .wpic{height:clamp(76px,calc(100vh - var(--bar) - 400px),340px)}
  .wnum{margin:.2em 0 0}
  .wtext{font-size:clamp(.85rem,2.4vh,1.1rem);line-height:1.35}
  .walkbox{padding:6px 10px 8px}
  .acts{grid-template-columns:1fr 1fr;max-width:34em}       /* the last screen's buttons, two to a row */
}
@media (prefers-reduced-motion:reduce){.card,.wpic .wg.new{animation:none!important}}