/* Guided proposal panel (index.html?proposal). Grayscale like the prototype. */
body.tour .pr-index, body.tour .pr-notes-panel { display: none; }
body.tour .pr-shell { grid-template-columns: minmax(320px, 420px) auto; gap: 40px; }
.tour-panel { position: sticky; top: 28px; display: flex; flex-direction: column; gap: 14px; min-height: 560px; max-height: calc(100svh - 56px); overflow-y: auto; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); color: var(--ink); }
.tour-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tour-brand { color: var(--ink-3); font-size: 13px; font-weight: 600; letter-spacing: .06em; }
.tour-lang { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 999px; }
.tour-lang button { appearance: none; min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font-size: 13px; font-weight: 600; cursor: pointer; }
.tour-lang button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.tour-dots { display: flex; gap: 4px; }
.tour-dots i { flex: 1; height: 5px; border-radius: 3px; background: var(--line-2); }
.tour-dots i.done { background: #9a9a9a; }
.tour-dots i.on { background: var(--ink); }
.tour-part { color: var(--ink-3); font-size: 13px; font-weight: 400; }
.tour-title { font-size: 28px; line-height: 1.25; font-weight: 300; }
.tour-body, .tour-scene, .tour-task p, .tour-why p { font-size: 16px; line-height: 1.7; color: var(--ink-2); }
.tour-body { display: grid; gap: 12px; }
.tour-body p, .tour-body ul, .tour-body ol { margin: 0; }
.tour-body ul, .tour-body ol { padding-left: 22px; display: grid; gap: 6px; }
.tour-big { padding: 14px 16px; border-left: 4px solid var(--ink); background: var(--fill); color: var(--ink) !important; font-weight: 600; }
.tour-checks { list-style: none; padding-left: 0 !important; }
.tour-checks li { padding-left: 28px; position: relative; color: var(--ink); }
.tour-checks li::before { content: "✓"; position: absolute; left: 4px; font-weight: 600; }
.tour-label { margin-bottom: 4px; color: var(--ink-3); font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.tour-task { padding: 14px 16px; border: 2px solid var(--ink); border-radius: 12px; }
.tour-task p:last-child { color: var(--ink); font-weight: 600; }
/* Done: keep the task readable; the label turns into a check. */
.tour-task.is-done { border-color: var(--line-strong); }
.tour-task.is-done p:last-child { color: var(--ink-2); font-weight: 400; }
.tour-done-tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; letter-spacing: 0; }
.tour-why { padding: 14px 16px; border-radius: 12px; background: var(--fill); animation: tour-in .35s ease-out; }
.tour-why .tour-label { color: var(--ink); }
@keyframes tour-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tour-final { display: grid; gap: 8px; }
.tour-msg { padding: 12px 14px; border-left: 4px solid var(--ink); background: var(--fill); font-size: 15px; line-height: 1.6; }
.tour-msg[hidden] { display: none; }
.tour-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 8px; }
.tour-btn { appearance: none; min-height: 48px; padding: 0 18px; border: 2px solid var(--ink); border-radius: 12px; background: var(--paper); color: var(--ink); font-size: 15px; font-weight: 600; cursor: pointer; }
.tour-btn[aria-pressed="true"] { background: var(--fill); }
.tour-primary { margin-left: auto; border-color: var(--ink); background: var(--ink); color: #fff; }
.tour-final .tour-primary { margin-left: 0; }
.tour-btn:disabled { opacity: .35; cursor: default; }
.tour-link { appearance: none; min-height: 44px; padding: 0 8px; border: 0; background: transparent; color: var(--ink-2); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tour-foot .tour-link:last-child { margin-left: auto; }
.tour-mobile { display: none; }
/* The element the audience should touch next. */
/* The only colour in the grayscale prototype: light blue marks where to tap (reads on white and on the dark camera view). */
:root { --tour-blue: #3aa8ff; --tour-blue-soft: rgba(58, 168, 255, .28); }
.tour-hint { position: relative; z-index: 3; outline: 4px solid var(--tour-blue); outline-offset: 3px; box-shadow: 0 0 0 10px var(--tour-blue-soft); animation: tour-blink 1s steps(1, end) infinite, tour-pulse 1s ease-in-out infinite; }
/* Clear on/off blink so it is obvious where to tap; the halo breathes in between. */
@keyframes tour-blink { 50% { outline-color: transparent; } }
@keyframes tour-pulse { 0%, 100% { box-shadow: 0 0 0 10px var(--tour-blue-soft); } 50% { box-shadow: 0 0 0 3px rgba(58, 168, 255, .08); } }
@media (max-width: 1100px) { body.tour .pr-shell { grid-template-columns: 360px auto; gap: 24px; } }
@media (max-width: 860px) { body.tour .pr-shell { grid-template-columns: auto; } .tour-panel { position: static; min-height: 0; max-height: none; } }
@media (max-width: 480px) { .tour-panel { margin: 12px; } .tour-mobile { display: block; color: var(--ink-3); font-size: 13px; } }
/* Reduced motion: no movement, but the on/off blink stays — it is the cue, not decoration. */
@media (prefers-reduced-motion: reduce) { .tour-hint { animation: tour-blink 1s steps(1, end) infinite !important; } }

/* Simulated camera (first try step) */
.tour-camera { position: absolute; inset: 0; z-index: 7; overflow: hidden; background: #111; color: #fff; transition: opacity .45s; }
.tour-camera[hidden] { display: none; }
.tour-camera.is-leaving { opacity: 0; }
.pr-phone.tour-cam-on .prototype-status { color: #fff; }
.pr-phone.tour-cam-on .prototype-status img { filter: invert(1); }
.tour-cam-feed { position: absolute; inset: 0; }
.tour-cam-feed img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.55) blur(1.5px); transform: scale(1.15); }
.tour-cam-sign { position: absolute; left: 50%; top: 44%; width: 190px; padding: 14px 14px 12px; border-radius: 10px; background: #e9e5dc; color: #1d1d1d; text-align: center; transform: translate(-50%, -50%) rotate(-2deg); box-shadow: 0 10px 30px rgba(0,0,0,.5); animation: tour-cam-drift 3.2s ease-in-out infinite; }
.tour-camera.is-found .tour-cam-sign { animation: none; }
@keyframes tour-cam-drift { 50% { transform: translate(-48%, -51%) rotate(-1deg); } }
.tour-cam-name { font-size: 13px; font-weight: 600; letter-spacing: .08em; }
.tour-qr { width: 128px; margin: 8px auto; }
.tour-qr svg { display: block; width: 100%; }
.tour-cam-sub { font-size: 11px; font-weight: 600; }
.tour-cam-frame { position: absolute; left: 50%; top: 44%; width: 250px; height: 250px; transform: translate(-50%, -50%); transition: width .4s, height .4s; }
.tour-cam-frame i { position: absolute; width: 34px; height: 34px; border: 4px solid #fff; }
.tour-cam-frame i:nth-child(1) { left: 0; top: 0; border-width: 4px 0 0 4px; border-radius: 10px 0 0 0; }
.tour-cam-frame i:nth-child(2) { right: 0; top: 0; border-width: 4px 4px 0 0; border-radius: 0 10px 0 0; }
.tour-cam-frame i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 4px 4px; border-radius: 0 0 0 10px; }
.tour-cam-frame i:nth-child(4) { right: 0; bottom: 0; border-width: 0 4px 4px 0; border-radius: 0 0 10px 0; }
.tour-camera.is-found .tour-cam-frame { top: 45.5%; width: 150px; height: 150px; }
.tour-cam-hint { position: absolute; left: 0; right: 0; top: 110px; text-align: center; font-size: 15px; font-weight: 400; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.tour-camera.is-found .tour-cam-hint { opacity: 0; }
.tour-cam-link { appearance: none; position: absolute; left: 50%; top: 62%; max-width: 300px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: #fff; color: #1d1d1d; font-size: 15px; font-weight: 600; transform: translateX(-50%); box-shadow: 0 6px 20px rgba(0,0,0,.45); cursor: pointer; animation: tour-in .3s ease-out; }
.tour-cam-link[hidden] { display: none; }
.tour-cam-note { position: absolute; left: 0; right: 0; bottom: 150px; text-align: center; color: rgba(255,255,255,.7); font-size: 12px; }
.tour-cam-shutter { position: absolute; left: 50%; bottom: 60px; width: 70px; height: 70px; margin-left: -35px; border: 5px solid #fff; border-radius: 50%; box-shadow: inset 0 0 0 4px #111, inset 0 0 0 40px #fff; opacity: .9; }

/* Wrong tap: shake the task (or the Next button once the step is done) and flash the right target. */
.tour-nudge { animation: tour-shake .45s; }
@keyframes tour-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.tour-hint-flash { animation: tour-flash .5s 2; }
@keyframes tour-flash { 50% { outline-offset: 10px; outline-width: 5px; box-shadow: 0 0 0 18px var(--tour-blue-soft); } }
/* Step done: Next invites the presenter on. */
.tour-foot.is-ready .tour-primary { animation: tour-ready 1.4s ease-in-out infinite; }
@keyframes tour-ready { 50% { box-shadow: 0 0 0 6px rgba(29, 29, 29, .18); } }
body.tour .pr-phone { cursor: default; }
@media (prefers-reduced-motion: reduce) { .tour-nudge, .tour-foot.is-ready .tour-primary { animation: none; } }
.tour-how { padding-left: 24px !important; gap: 10px !important; }
.tour-how li b { display: block; color: var(--ink); font-size: 16px; line-height: 1.45; }
.tour-how li span { display: block; color: var(--ink-2); font-size: 15px; line-height: 1.55; }