/* /start, /start/try and the route strip on /signup?from=start.
   Spec: ops/reports/ONBOARDING_START_SPEC_2026-09-25.md.

   Style family: Wayfinding Public. It sets STRUCTURE only: a three-station
   route, numbered stops, signal-style labels, 4px corners, hairline borders,
   no drop shadows. Every colour is a style.css [data-theme] token, so the
   flow is whichever theme the visitor picked on the first station. The one
   exception is the category colours (food / drink / attraction), which are
   data in the app too (static/app.js BUILTIN_CAT_COLOR).

   Motion uses two curves only: --ease-decel and plain ease-out. Every
   animation is started by the visitor, runs once, and is removed under
   prefers-reduced-motion (block at the end of this file). */

:root {
  --ease-decel: cubic-bezier(0.2, 0, 0, 1);
  --onb-font: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --onb-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 200ms; }

.onb {
  margin: 0;
  font-family: var(--onb-font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
.onb *, .onb *::before, .onb *::after { box-sizing: border-box; }
.onb a { color: var(--link); }
.onb :focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
html:not(.js) .js-only { display: none !important; }
html.js .nojs-only { display: none !important; }

/* ------------------------------------------------------------ top bar */
.onb-top { background: var(--bg); border-bottom: 1px solid var(--border); }
.onb-bar {
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; max-width: 1080px; margin: 0 auto; padding: 0 4px 0 16px;
}
.onb-brand {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: var(--text) !important; text-decoration: none; font-weight: 700; font-size: 16px;
}
.onb-pin { width: 16px; height: 22px; flex: 0 0 16px; fill: var(--accent); }
.onb-pin circle { fill: var(--bg); }
.onb-login, .onb-back {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; padding: 0 12px;
  font-size: 15px; font-weight: 700; text-decoration: none;
}
.onb-login:hover, .onb-back:hover { text-decoration: underline; }

/* The route: three stations, the current one ringed. */
.onb-route {
  list-style: none; margin: 0 auto; padding: 2px 16px 10px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 560px;
}
.stn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.stn-dot {
  position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--accent); background: var(--bg);
}
.stn.is-done .stn-dot { background: var(--accent); }
.stn.is-here .stn-dot {
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}
.stn + .stn::before {
  content: ""; position: absolute; top: 5px; left: -50%; width: 100%; height: 2px;
  background: linear-gradient(var(--accent), var(--accent)) no-repeat left center / 0% 100% var(--border-strong);
}
.stn.is-done::before { background-size: 100% 100%; }
.stn.is-here::before { background-size: 100% 100%; animation: onb-fill 240ms ease-out both; }
@keyframes onb-fill { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
.stn-name { font-size: 12px; line-height: 1.3; color: var(--text-muted); text-align: center; }
.stn.is-here .stn-name { color: var(--text); font-weight: 700; }
.stn-no {
  font-family: var(--onb-mono); font-weight: 600; font-variant-numeric: tabular-nums;
  margin-right: 4px;
}

/* ------------------------------------------------------------ page */
.onb-main { max-width: 560px; margin: 0 auto; padding: 20px 16px 0; }
.onb-title { margin: 0 0 6px; font-size: 22px; line-height: 1.3; font-weight: 700; color: var(--text); }
.onb-sub { margin: 0 0 16px; font-size: 15px; color: var(--text-soft); }
.onb-more { margin: 12px 0 0; font-size: 13px; color: var(--text-muted); }

/* ------------------------------------------------------------ actions */
.onb-actions {
  position: sticky; bottom: 0; z-index: 6;
  display: flex; flex-direction: column; gap: 4px;
  margin: 16px -16px 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--bg); border-top: 1px solid var(--border);
}
.onb-primary {
  display: flex; align-items: center; justify-content: center; width: 100%;
  min-height: 52px; padding: 0 16px; border: 0; border-radius: 4px;
  background: var(--accent); color: var(--accent-text) !important;
  font: inherit; font-size: 16px; font-weight: 700; text-align: center; text-decoration: none;
  cursor: pointer; outline: 3px solid transparent; outline-offset: 3px;
  transition: transform 90ms var(--ease-decel);
}
.onb-primary:active { transform: scale(.98); }
.onb-primary:disabled { cursor: progress; opacity: .72; }
.onb-primary.is-nudge { animation: onb-breathe 1.2s ease-in-out 2; }
@keyframes onb-breathe {
  0%, 100% { outline-color: transparent; }
  50% { outline-color: color-mix(in srgb, var(--accent) 45%, transparent); }
}
.onb-secondary {
  display: flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 0 8px; border: 0; background: none; color: var(--link) !important;
  font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.onb-tertiary {
  display: flex; align-items: center; justify-content: center; min-height: 44px;
  font-size: 13px; line-height: 1.35; color: var(--text-muted) !important;
}

/* ------------------------------------------------------------ station 1: looks */
.looks { border: 0; margin: 0; padding: 0; min-width: 0; }
.look-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.look {
  position: relative; display: block; cursor: pointer;
  border: 1px solid var(--border); border-radius: 4px; background: var(--bg);
}
.look-input { position: absolute; top: 8px; left: 8px; width: 1px; height: 1px; margin: 0; opacity: 0; }
.look:has(.look-input:checked) {
  outline: 2px solid var(--link); outline-offset: 2px;
}
.look:has(.look-input:focus-visible) {
  outline: 2px solid var(--text); outline-offset: 2px;
}
/* The preview tile carries data-swatch, so swatches.css's colours for THAT
   style paint just this box: its ground, its two colours, its ink. */
.look-mini {
  position: relative; display: block; height: 96px; overflow: hidden;
  background: var(--sw-1); color: var(--sw-ink);
  border-radius: 3px 3px 0 0; border-bottom: 1px solid var(--border);
}
.lm-road {
  position: absolute; left: -20%; width: 140%; height: 3px;
  background: var(--sw-3); opacity: .55;
}
.lm-road--a { top: 30%; transform: rotate(-12deg); }
.lm-road--b { top: 58%; transform: rotate(20deg); }
.lm-road--c { top: 10%; left: 20%; width: 3px; height: 120%; transform: rotate(14deg); }
.lm-pin {
  position: absolute; left: 58%; top: 16%; width: 14px; height: 14px;
  background: var(--sw-2); border: 2px solid var(--sw-1);
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
}
.lm-pin--2 { left: 26%; top: 36%; }
.lm-pin--3 { left: 74%; top: 44%; }
.lm-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; height: 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 8px; background: var(--sw-1); border-top: 1px solid var(--sw-3);
}
.lm-name { width: 40%; height: 6px; border-radius: 3px; background: var(--sw-ink); }
.lm-line { display: none; }
.lm-btn { width: 18px; height: 18px; border-radius: 3px; background: var(--sw-2); }
/* The two cute styles: round shapes, and 小釘 (their mascot) is the pin. */
.look-mini[data-swatch="sticker"] .lm-pin,
.look-mini[data-swatch="cloud"] .lm-pin {
  width: 20px; height: 23px; border: 0; border-radius: 0; transform: none;
  background: url("/static/discover/mascot-sticker.svg") no-repeat center / contain;
}
.look-mini[data-swatch="cloud"] .lm-pin { background-image: url("/static/discover/mascot-cloud.svg"); }
.look-mini[data-swatch="sticker"] .lm-btn,
.look-mini[data-swatch="cloud"] .lm-btn,
.look-mini[data-swatch="sticker"] .lm-road,
.look-mini[data-swatch="cloud"] .lm-road { border-radius: 999px; }
.look-mini[data-swatch="sticker"] .lm-sheet { border-top: 2px solid var(--sw-ink); }
.look-mini[data-swatch="cloud"] .lm-sheet { border-top: 0; border-radius: 12px 12px 0 0; }
/* Seven tiles in two or three columns: the last one takes the whole row
   rather than sitting alone in a corner. */
.look-grid > .look:nth-child(7):last-child { grid-column: 1 / -1; }
.look-name {
  display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 10px;
  font-size: 14px; line-height: 1.3; color: var(--text);
}
.look-check {
  flex: 0 0 16px; width: 16px; height: 16px; margin-left: auto; visibility: hidden;
  fill: none; stroke: var(--link); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.look-sel { display: none; }
.look-input:checked ~ .look-name .look-check,
.look-input:checked ~ .look-check { visibility: visible; }
.look-input:checked ~ .look-name .look-sel,
.look-input:checked ~ .look-sel { display: block; }
.look-stage { display: none; }

/* ------------------------------------------------------------ station 2: the stage */
.onb-col--lead { display: none; }
.stage {
  display: flex; flex-direction: column; overflow: hidden;
  height: max(420px, calc(100vh - 250px));
  height: max(420px, calc(100svh - 250px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  border: 1px solid var(--border); border-radius: 4px; background: var(--bg);
}
.stage-chat {
  position: relative; flex: 0 0 42%; min-height: 0;
  display: flex; flex-direction: column; padding: 10px 12px 10px;
  background: var(--bg-soft); border-bottom: 1px solid var(--border);
}
.stage-hint { flex: 0 0 auto; margin: 0 0 8px; font-size: 14px; line-height: 1.45; color: var(--text-muted); }
.onb-try.is-underway .stage-hint { display: none; }
.thread {
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
}
html.js .thread--final { display: none; }
html:not(.js) .thread--live { display: none; }

.post {
  position: relative; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 4px;
}
.post-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.post-av {
  display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface-alt); color: var(--text-soft); font-size: 12px; font-weight: 700;
}
.post-author { font-weight: 600; color: var(--text); }
.post-tag {
  margin-left: auto; padding: 1px 8px; font-size: 12px; white-space: nowrap;
  border: 1px solid var(--border-strong); border-radius: 999px; color: var(--text-muted);
}
.post-cap { margin: 6px 0 4px; font-size: 15px; line-height: 1.45; color: var(--text); }
.post-cat, .peek-cat { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-muted); }
[data-cat="food"] { --cat: #e11d48; }
[data-cat="drink"] { --cat: #b45309; }
[data-cat="hotel"] { --cat: #7c3aed; }
[data-cat="attraction"] { --cat: #059669; }
[data-cat="other"] { --cat: #6b7280; }
.cat-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--cat, var(--text-muted)); }

/* The highlighter: the bot "reading" the caption. A band along the bottom
   40% of the name, swept left to right. */
.hl {
  --hl-ink: rgba(250, 204, 21, .45);
  background-image: linear-gradient(var(--hl-ink), var(--hl-ink));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 40%;
  transition: background-size 260ms linear;
  font-weight: 700;
}
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .hl { --hl-ink: color-mix(in srgb, var(--accent) 35%, transparent); }
}
.hl.is-lit { background-size: 100% 40%; }
/* In the sent bubble the band becomes a stroke UNDER the name, in the
   bubble's own ink. A tinted band behind the glyphs there would mix
   --accent-text into the ground the name sits on and sink it under 4.5:1
   in six of the seven themes (the name is 14px bold, not large text).
   The stroke lives in the span's bottom padding, so the name still reads
   on plain --accent (4.6:1 or better in every theme; smoke pins both). */
.msg--me .hl {
  --hl-ink: var(--accent-text);
  padding-bottom: 3px; background-size: 0% 2px;
}
.msg--me .hl.is-lit { background-size: 100% 2px; }

.msg { max-width: 86%; }
.msg p { margin: 0; }
.msg--me {
  align-self: flex-end; padding: 8px 12px;
  background: var(--accent); color: var(--accent-text);
  border-radius: 14px 14px 4px 14px;
}
.msg-cap { font-size: 14px; line-height: 1.45; }
.msg-meta { align-self: flex-end; margin: 0; font-size: 11px; color: var(--text-muted); }
.msg--bot { align-self: flex-start; display: flex; align-items: flex-end; gap: 8px; }
.msg--bot:focus { outline: none; }
.msg--bot:focus-visible .msg-body { outline: 2px solid var(--link); outline-offset: 2px; }
.bot-av {
  display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
}
.bot-pin { width: 10px; height: 14px; fill: var(--accent); }
.bot-pin circle { fill: var(--surface); }
.msg-body {
  padding: 8px 12px; font-size: 14px; line-height: 1.45; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px 14px 14px 4px;
}
.msg-chip {
  display: inline-flex; align-items: center; margin-top: 6px; padding: 2px 10px;
  font-size: 13px; font-weight: 700; border-radius: 999px; color: var(--text);
  border: 1px solid var(--cat, var(--border-strong));
  background: var(--surface-alt);
}
.msg .msg-note { margin-top: 4px; font-size: 12px; line-height: 1.4; color: var(--text-muted); }
.typing {
  align-self: flex-start; display: flex; gap: 4px; margin-left: 32px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px 14px 14px 4px;
}
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); opacity: .3; animation: onb-dot 900ms linear 1 both; }
.typing i:nth-child(2) { animation-delay: 150ms; }
.typing i:nth-child(3) { animation-delay: 300ms; }
@keyframes onb-dot { 0% { opacity: .3; } 30% { opacity: 1; } 60%, 100% { opacity: .3; } }

/* The map: generated inline SVG (tools/start_map.py), coloured here. */
.stage-map { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: var(--surface-alt); container-type: size; }
.map-box { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.map-frame { position: relative; width: 100%; aspect-ratio: 400 / 260; }
@supports (width: 1cqh) {
  .map-frame { width: min(100cqw, 100cqh * 400 / 260); }
}
.onb-map { display: block; width: 100%; height: 100%; }
.m-ground { fill: var(--surface-alt); }
.m-park { fill: color-mix(in srgb, var(--surface-alt) 70%, #5cb37f 30%); }
.m-water { fill: color-mix(in srgb, var(--surface-alt) 60%, var(--link) 40%); }
.m-river { fill: none; stroke: color-mix(in srgb, var(--surface-alt) 60%, var(--link) 40%); stroke-width: 3; }
.m-road { fill: none; stroke: var(--border-strong); stroke-linecap: round; stroke-linejoin: round; }
.m-major { stroke-width: 2.5; }
.m-minor { stroke-width: 1.2; }
.m-attr {
  position: absolute; top: 2px; right: 4px; padding: 0 4px; font-size: 11px; line-height: 1.5;
  color: var(--text-muted); background: var(--surface-alt);
}
.map-count {
  position: absolute; top: 8px; left: 8px; z-index: 3; margin: 0; padding: 3px 8px;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 4px;
}

.pin {
  position: absolute; z-index: 2; display: none;
  width: 44px; height: 44px; margin: -44px 0 0 -22px; padding: 0;
  border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
html:not(.js) .pin.is-final, html.js .pin.is-dropped { display: block; }
.pin:focus-visible { outline-offset: -2px; border-radius: 4px; }
.pin-mark {
  position: absolute; left: 50%; bottom: 0; width: 18px; height: 25px; margin-left: -9px;
  overflow: visible; fill: var(--cat); stroke: #fff; stroke-width: 1.5;
}
.pin-mark circle { fill: #fff; stroke: none; }
.pin.is-picked .pin-mark { stroke: var(--text); }
.pin-ring {
  position: absolute; left: 50%; bottom: -8px; width: 16px; height: 16px; margin-left: -8px;
  border: 2px solid var(--cat); border-radius: 50%; opacity: 0; pointer-events: none;
}

.peek {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  padding: 10px 14px 12px; background: var(--surface); border-top: 1px solid var(--border);
  transform: translateY(105%); transition: transform 280ms var(--ease-decel);
}
html:not(.js) .peek.is-final, html.js .peek.is-up { transform: none; }
html.js .peek.is-leaving { transition: transform 200ms ease-out; }
.peek-tag {
  position: absolute; top: 10px; right: 12px; padding: 0 6px; font-size: 11px;
  border: 1px solid var(--border-strong); border-radius: 999px; color: var(--text-muted);
}
.peek-name { margin: 0 56px 4px 0; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--text); }
.peek-meta { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13px; color: var(--text-muted); }
.peek-cat { color: var(--text-soft); font-size: 13px; }
.peek-sharers { margin: 4px 0 0; font-size: 12px; color: var(--text-muted); }
.peek-sharers[hidden] { display: none; }

/* Station 2's action bar is a state machine (try.js sets data-state). Before
   try.js runs, "final" reads as idle under html.js; with no JS at all the
   server-rendered final state shows 建立我的地圖 + the account link. */
.onb-actions--try { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 4px; }
.onb-actions--try .onb-primary, .onb-actions--try .act--skip { grid-column: 1 / -1; }
.onb-actions--try .act--again { grid-column: 1; }
.onb-actions--try .act--have { grid-column: 2; justify-content: flex-end; text-align: right; }
html.js .act { display: none; }
html.js .onb-try:is([data-state="final"], [data-state="idle"], [data-state="playing"]) :is(.act--send, .act--skip),
html.js .onb-try[data-state="sent"] :is(.act--keep, .act--again, .act--have),
html.js .onb-try[data-state="done"] :is(.act--keep, .act--have) { display: flex; }
html.js .onb-try[data-state="done"] .act--have,
html:not(.js) .act--have { grid-column: 1 / -1; justify-content: center; text-align: center; }

/* ------------------------------------------------------------ station 3: /signup strip */
.onb-strip {
  width: min(360px, 90vw); margin: 0 auto 14px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 4px;
  font-family: var(--onb-font); color: var(--text);
}
.onb-strip .onb-route { padding: 0 0 10px; }
.onb-strip-lead { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text-soft); }
.onb-names { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.onb-names li {
  padding: 2px 10px; font-size: 13px; font-weight: 700; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface-alt); color: var(--text);
}
.onb-names[hidden] { display: none; }
.onb-strip .onb-replay { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--link); }

/* ------------------------------------------------------------ circle reveal (look.js) */
html.vt-circle::view-transition-old(root),
html.vt-circle::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.vt-circle::view-transition-new(root) { animation: onb-reveal 360ms var(--ease-decel); }
@keyframes onb-reveal {
  from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 50%)); }
  to { clip-path: circle(var(--vt-r, 150%) at var(--vt-x, 50%) var(--vt-y, 50%)); }
}

/* ------------------------------------------------------------ phones: one screen
   Owner's report (2026-09-25): the walk-through scrolled on a phone that
   had room for all of it. Two causes: the demo stage's height was a guess
   (100svh - 250px; the bars above and below it are ~264px, so every phone
   scrolled ~14px), and the home-indicator inset was reserved twice (body
   padding AND the sticky action bar). On a phone each station is now
   exactly one screen: the body is the viewport's height, the bars keep
   their size, and the one flexible part (the tile grid, the demo stage)
   takes what is left. Only if that part cannot fit even at its minimum
   (very large accessibility text) does .onb-main scroll, inside the page. */
@media (max-width: 767.98px) {
  html:has(> body.onb--look), html:has(> body.onb--try) { height: 100%; }
  body.onb--look, body.onb--try {
    box-sizing: border-box; display: flex; flex-direction: column;
    height: 100vh; height: 100dvh; min-height: 0; overflow: hidden;
  }
  .onb--look .onb-top, .onb--try .onb-top { flex: 0 0 auto; }
  .onb--look .onb-main, .onb--try .onb-main {
    flex: 1 1 auto; min-height: 0; width: 100%;
    display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
    padding-top: 12px;
  }
  .onb--look .onb-grid, .onb--try .onb-grid { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .onb--look .onb-col { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  /* The bar sits at the foot of the column; the body already reserves the
     home-indicator inset, so the bar does not add it again. */
  .onb--look .onb-actions, .onb--try .onb-actions {
    position: static; flex: 0 0 auto; margin-top: auto; padding-bottom: 12px;
  }

  /* Station 1: the tiles share the height that is left. */
  .onb--look .onb-title { font-size: 20px; }
  .onb--look .onb-sub { margin-bottom: 12px; }
  .onb--look .looks { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .onb--look .look-grid { flex: 1 1 auto; min-height: 0; grid-auto-rows: minmax(0, 1fr); gap: 10px; }
  .onb--look .look { display: flex; flex-direction: column; min-height: 0; }
  .onb--look .look-mini { flex: 1 1 auto; height: auto; min-height: 28px; max-height: 96px; }
  .onb--look .onb-more { flex: 0 0 auto; margin-top: 8px; }

  /* Station 2: the stage takes what the bars leave. */
  .onb--try .stage { flex: 1 1 auto; height: auto; min-height: 300px; }
  /* The chat half is as tall as the sample post needs (at least 42%, so the
     layout does not jump between phones), up to 55%: on a 667pt phone a
     fixed 42% cut the top of the sample post off under the hint. Once the
     demo runs, the thread keeps its newest bubbles at the bottom as before. */
  .onb--try .stage-chat { flex: 0 1 auto; min-height: 42%; max-height: 55%; }
}
@media (max-width: 767.98px) and (max-height: 700px) {
  /* iPhone SE class: 之後在設定裡隨時能換 is reassurance, not a control, so
     it gives its row back to the tiles here. */
  .onb--look .onb-more { display: none; }
  .onb--look .look-name { min-height: 30px; padding-top: 2px; padding-bottom: 2px; }
}

/* ------------------------------------------------------------ 768 and up */
@media (min-width: 768px) {
  .onb-main { padding-top: 32px; padding-bottom: 40px; }
  .look-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .onb-actions {
    position: static; margin: 20px 0 0; padding: 0; border-top: 0; background: none;
  }
  .stage { height: 560px; }
}

/* ------------------------------------------------------------ 1200 and up */
@media (min-width: 1200px) {
  .onb-main { max-width: 1080px; padding-top: 48px; }
  .onb-grid {
    display: grid; grid-template-columns: minmax(0, 440px) 560px; gap: 64px;
    justify-content: center; align-items: start;
  }
  .look-stage { display: block; position: sticky; top: 24px; }
  .look-mini--big { height: 420px; border-radius: 4px; border: 1px solid var(--border); }
  .look-mini--big .lm-road { height: 6px; }
  .look-mini--big .lm-road--c { width: 6px; height: 120%; }
  .look-mini--big .lm-pin { width: 24px; height: 24px; border-width: 3px; }
  .look-mini--big[data-swatch="sticker"] .lm-pin,
  .look-mini--big[data-swatch="cloud"] .lm-pin { width: 40px; height: 45px; }
  .look-mini--big .lm-sheet { height: 96px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; padding: 0 20px; }
  .look-mini--big .lm-name { width: 50%; height: 12px; }
  .look-mini--big .lm-line { display: block; width: 30%; height: 8px; border-radius: 4px; background: var(--sw-ink); opacity: .5; }
  .look-mini--big .lm-btn { position: absolute; right: 20px; top: 30px; width: 88px; height: 36px; border-radius: 4px; }

  .onb-grid--try {
    grid-template-areas: "lead stage" "actions stage";
    grid-template-rows: auto 1fr;
  }
  .onb-col--lead { display: block; grid-area: lead; }
  .onb-title--try { font-size: 28px; }
  /* Chat over map, as on a phone, rather than the spec's 45/55 side by
     side: at 560px wide a side-by-side map column is ~300px and the map
     (a 400:260 frame) shrinks to a strip in a tall empty box. Stacked, the
     map gets the full 560px width. */
  .stage { grid-area: stage; height: 640px; }
  .stage-chat { flex: 0 0 40%; }
  .stage-hint { display: none; }
  .onb-actions--try { grid-area: actions; align-self: start; margin-top: 8px; }
}

/* ------------------------------------------------------------ reduced motion */
/* No position, scale or clip movement at all; state changes are an opacity
   fade of at most 120ms. try.js / look.js read the same media query and skip
   the choreography entirely. */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  .stn.is-here::before { animation: none; background-size: 100% 100%; }
  .onb-primary { transition: opacity 90ms linear; }
  .onb-primary:active { transform: none; opacity: .85; }
  .onb-primary.is-nudge { animation: none; }
  .hl { transition: none; }
  .typing i { animation: none; opacity: .6; }
  .pin, .pin-mark { animation: none !important; transition: none !important; }
  .pin-ring { display: none; }
  .peek, html.js .peek.is-leaving { transform: none; opacity: 0; pointer-events: none; transition: opacity 120ms linear; }
  html:not(.js) .peek.is-final, html.js .peek.is-up { opacity: 1; pointer-events: auto; }
}