/* Visual layer for Simulation World v0.4 — same brand as the pitch. Loaded after reach-me.css. */
body { font-family: var(--sans); background: var(--night) }
.world { background: radial-gradient(900px 520px at 80% 0, rgba(255, 95, 168, .22), transparent 60%), radial-gradient(800px 500px at 0 100%, rgba(109, 61, 245, .22), transparent 55%), var(--night) }
.light { background: radial-gradient(1100px 600px at 85% -10%, var(--blush) 0, transparent 60%), var(--paper); color: var(--ink) }
.screen { padding-top: clamp(80px, 11vh, 120px) }
.kicker { font-weight: 700; letter-spacing: .16em; font-size: 15px }
h1, h2 { font-weight: 800; letter-spacing: -.035em } .accent { background: var(--flow); -webkit-background-clip: text; background-clip: text; color: transparent }
.lead { font-size: var(--fs-lead) }
/* Gradient is reserved for the one primary action per screen; everything else is flat and shadowless. */
.btn { border-radius: 999px; min-height: var(--tap); padding: 16px 30px; font-size: var(--fs-control); background: var(--mag); box-shadow: none }
.btn.next, #confirmActions .btn:first-child { background: var(--flow) }
.btn:focus-visible, .answer:focus-visible, .card:focus-visible, .choice:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px }
.btn.dark { background: var(--plum) }

/* Scenario library */
.grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px }
.card { border-radius: 22px; padding: 22px; transition: transform 200ms ease, background 200ms ease; background: rgba(255, 255, 255, .06) }
.card:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .1) }
.card h3 { margin: 12px 0 6px; font-size: 24px } .card p { margin: 0 0 10px; font-size: var(--fs-body); line-height: 1.45; color: #f3e6ee }

/* System vs reality */
.status > div { border-radius: 20px; background: rgba(255, 255, 255, .6); border-top: 0; box-shadow: inset 0 0 0 1px rgba(42, 15, 37, .08) }
.world .status > div { background: rgba(255, 255, 255, .05) }
.status h3 { font-size: clamp(22px, 2vw, 34px); margin: 8px 0 0 }
.fault { background: var(--flow); -webkit-background-clip: text; background-clip: text; color: transparent }

/* Method choices + message */
.choice { min-height: var(--tap); font-size: var(--fs-control); padding: 18px 22px; border-radius: 18px }
.question { border-radius: 26px 26px 26px 8px; box-shadow: none; border: 1px solid var(--line); font-size: 22px }
#presented, #message { font-weight: 700 }

/* Big answer buttons (respond) */
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px }
.answer { min-height: 72px; padding: 14px 18px; border-radius: 18px; border: 2px solid var(--line); background: #fff; color: var(--ink); font-family: inherit; font-weight: 700; font-size: clamp(21px, 1.6vw, 26px); line-height: 1.3; cursor: pointer; text-align: left }
.answer:hover { border-color: var(--mag) }
#respond .btn.next { display: none }

/* Result */
.result { border-radius: 22px; font-size: clamp(22px, 2vw, 32px) }
.pass { background: #fff; color: var(--ink); border: 3px solid transparent; background-image: linear-gradient(#fff, #fff), var(--rainbow); background-origin: border-box; background-clip: padding-box, border-box }
.pass .small { color: var(--muted) } .fail { background: var(--danger-tint); color: var(--danger) } .fail .small { color: var(--danger) }

/* Evidence timeline */
.timeline { border-left: 0; padding-left: 0; display: grid; gap: 8px }
.event { margin: 0; padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, .06); border-left: 3px solid var(--pink) }
.event .small { font-size: 15px; word-break: break-word }
#backToPitch { display: inline-block; text-decoration: none; margin-left: 10px }

/* Loop progress bar */
.loopbar { position: fixed; z-index: 10; top: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; margin: 0; padding: 6px; list-style: none; border-radius: 999px; background: rgba(42, 15, 37, .82); backdrop-filter: blur(8px) }
.loopbar[hidden] { display: none }
.loopbar li { padding: 8px 16px; border-radius: 999px; font-family: inherit; font-weight: 800; font-size: 15px; line-height: 1; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .78); transition: background 300ms ease, color 300ms ease }
.loopbar li[data-state~="done"] { color: #fff }
.loopbar li[data-state~="done"]::before { content: "✓ " }
.loopbar li[data-state="active"] { background: var(--mag); color: #fff }
.loopbar li[data-state~="ok"] { background: var(--rainbow); color: var(--ink) }

@media (max-width: 650px) { .answers { grid-template-columns: 1fr } .loopbar li { padding: 7px 8px; font-size: 12px; letter-spacing: .02em } }
@media (prefers-reduced-motion: reduce) { .card, .loopbar li { transition: none } }
a.btn { display: inline-block; text-decoration: none }
.btn.alt { background: var(--mag-tint); color: var(--mag-deep) }

/* Answer hint on the white question card: dark enough for older readers (WCAG AA+). */
.question .dark-copy { color: var(--plum); font-size: 16px; font-weight: 600 }

/* Heading order: cards sit under the page h1 and setup values under the persona h1, so they are h2 in
   markup but keep the subsection look they had as h3. */
.card h2 { margin: 12px 0 6px; font-size: 26px; line-height: 1.2; letter-spacing: normal }
.status h2 { font-size: clamp(22px, 2vw, 34px); margin: 8px 0 0; line-height: 1.2; letter-spacing: normal }
#message { font-size: 24px }

/* Readable defaults for older users: helper text, tap cards and radio options follow the size tokens. */
.small { font-size: var(--fs-small) }
.response-card, .output-option { min-height: var(--tap); font-size: var(--fs-control) }

/* ---- v0.8 pre-production layer: navigation, guide, kiosk, motion, responsive ---- */
.home-link { display: inline-flex; align-items: center; min-height: 48px; margin-bottom: 8px; color: var(--focus); font-weight: 700; text-decoration: none }
.home-link:hover { text-decoration: underline }
/* The flow bar stays readable over scrolled content. */
.loopbar { background: var(--plum); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) }

/* Each screen enters with a short rise; the global reduced-motion rule in reach-me.css cancels it. */
.screen.on { animation: screen-in 320ms var(--ease) both }
@keyframes screen-in { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
.answer, .choice, .card, .response-card { transition: transform 180ms var(--ease), border-color 180ms }
.answer:active, .choice:active, .card:active, .response-card:active { transform: scale(.98) }

/* Guide: avatar bottom-left with a speech bubble. Bottom-right belongs to each screen's primary .next button. */
.guide { position: fixed; z-index: 30; left: 16px; flex-direction: row-reverse; justify-content: flex-end; bottom: max(16px, env(safe-area-inset-bottom)); display: flex; align-items: flex-end; gap: 10px; max-width: min(420px, calc(100vw - 32px)); pointer-events: none }
.guide__bubble { pointer-events: none; margin: 0 0 14px; padding: 14px 16px; border-radius: 18px 18px 18px 4px; background: #fff; color: var(--ink); font-size: var(--fs-small); line-height: 1.5; border: 1px solid var(--line) }
.guide.is-new .guide__bubble { animation: guide-pop 360ms var(--ease) }
.guide.is-closed .guide__bubble { display: none }
.guide__toggle { pointer-events: auto; flex: none; width: 72px; height: 72px; padding: 4px; border: 0; border-radius: 50%; background: var(--plum); cursor: pointer }
.guide__toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px }
@keyframes guide-pop { from { opacity: 0; transform: translateY(8px) scale(.96) } to { opacity: 1; transform: none } }
/* Room under content so the guide never covers the last control. */
.screen { padding-bottom: 120px }

/* Kiosk idle prompt */
.idle { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(29, 11, 28, .78) }
.idle[hidden] { display: none }
.idle__card { display: grid; justify-items: center; gap: 12px; max-width: 520px; padding: 32px; border-radius: 28px; background: #fff; color: var(--ink); text-align: center }
.idle__card h2 { margin: 0; font-size: 34px; line-height: 1.2; letter-spacing: normal }
.idle__avatar { width: 110px }
.idle__card p { margin: 0; font-size: var(--fs-body); line-height: 1.5 }
/* Not .next: the v0.4 base pins .next to the screen corner. */
.idle__stay { background: var(--flow); min-width: 60% }

/* Tablet */
@media (min-width: 651px) and (max-width: 1100px) {
  .grid { grid-template-columns: repeat(2, 1fr) }
}
/* Phone: single column, full-width controls */
@media (max-width: 650px) {
  .grid { grid-template-columns: 1fr }
  .btn.next, #confirmActions .btn { width: 100% }
  /* On phones .next is static, so the right edge is free: dock the guide there like a floating button. */
  .guide { left: auto; right: 12px; flex-direction: row }
  .guide__bubble { border-radius: 18px 18px 4px 18px }
  .guide__toggle { width: 60px; height: 60px }
}

/* Kiosk: one size step up on every token, bigger targets, guide always visible. */
body.kiosk { --fs-small: 20px; --fs-body: 24px; --fs-lead: clamp(26px, 2.2vw, 36px); --fs-control: 26px; --tap: 80px; user-select: none; -webkit-user-select: none }
body.kiosk .kicker { font-size: 18px }
body.kiosk .loopbar li { font-size: 18px; padding: 12px 20px }
body.kiosk .guide { max-width: min(560px, calc(100vw - 32px)) }
body.kiosk .guide__bubble { font-size: 22px }
body.kiosk .guide__toggle { width: 96px; height: 96px }
body.kiosk .home-link { display: none }

/* Where Thai speech comes from on this device (shown on the reach screen, recorded in the report). */
.speech-source { display: grid; gap: 6px; margin-top: 12px }
.speech-source .btn { justify-self: start; margin-top: 4px }

/* Read-along: the card being spoken is lifted and outlined; status words sit on each card. */
.meaning-card { transition: transform 200ms var(--ease), box-shadow 200ms, outline-color 200ms; outline: 3px solid transparent; outline-offset: 2px }
.meaning-card.is-speaking { outline-color: var(--mag); transform: translateY(-4px) scale(1.03); background: var(--mag-tint) }
.meaning-card .unit-check { display: block; margin-top: 8px; font-style: normal; font-weight: 800; font-size: var(--fs-small) }
.meaning-card[data-check="heard"] { border-color: var(--ok) }
.meaning-card[data-check="conflict"] { border-color: var(--danger); background: var(--danger-tint) }
.unit-checks { display: grid; gap: 4px; margin: 10px 0; padding: 0; list-style: none; font-weight: 700 }
.unit-check--conflict { color: var(--danger) }

/* One-tap actions next to the guide: ask for a person, private audio. */
.guide__actions { display: flex; flex-direction: column; gap: 8px; pointer-events: auto; margin-bottom: 6px }
.guide__action { min-height: var(--tap); padding: 0 16px; border: 2px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: 700 var(--fs-small) var(--sans); cursor: pointer; white-space: nowrap }
.guide__action:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px }
.guide__action[aria-pressed="true"] { background: var(--plum); border-color: var(--plum); color: #fff }
#askForHelp { border-color: var(--mag); color: var(--mag-deep) }
body.kiosk .guide__action { font-size: var(--fs-control) }

/* Flow bar labels never wrap (the done check mark sits inline). */
.loopbar li { white-space: nowrap }

/* Phones: the guide becomes a solid bottom bar (help · headphones · avatar), like a mobile tab bar.
   Screens get enough bottom padding that, scrolled to the end, the bar covers nothing. */
@media (max-width: 650px) {
  .guide { left: 0; right: 0; bottom: 0; max-width: none; flex-direction: row; align-items: center; justify-content: flex-end; gap: 8px;
           padding: 8px 12px max(8px, env(safe-area-inset-bottom)); background: var(--plum); border-top: 1px solid rgba(255, 255, 255, .15); pointer-events: auto }
  .guide__actions { flex-direction: row; margin: 0; flex: 1 }
  .guide__action { flex: 1; padding: 0 10px }
  .guide__bubble { position: absolute; left: 12px; right: 12px; bottom: calc(100% + 8px); margin: 0 }
  .guide__toggle { width: 56px; height: 56px }
  .screen { padding-bottom: 180px }
}

/* Arrival alert: banner + two border pulses at 1 per second (<= 3 flashes/s, WCAG 2.3.1). */
.arrival-alert { position: fixed; z-index: 40; top: 76px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 32px);
                 padding: 12px 20px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 800; font-size: var(--fs-control);
                 border: 3px solid var(--mag); pointer-events: none }
.arrival-alert[hidden] { display: none }
body.flash-alert::after { content: ""; position: fixed; inset: 0; z-index: 35; pointer-events: none; border: 10px solid var(--pink);
                          animation: flash-border 1s steps(1, end) 2 both }
@keyframes flash-border { 0% { opacity: 1 } 50% { opacity: 0 } 100% { opacity: 0 } }
body.kiosk .arrival-alert { top: 110px; font-size: 28px }

/* Conversation: who said what — label + icon + colour, never colour alone. */
.conversation { margin-top: 20px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: #fff; color: var(--ink) }
.conversation h3 { margin: 0 0 10px; font-size: var(--fs-control) }
.conversation__lines { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none }
.conversation__lines:empty::before { content: "ยังไม่มีบทสนทนา"; color: var(--muted) }
.conversation__line { display: grid; gap: 2px; max-width: 85%; padding: 10px 14px; border-radius: 14px; font-size: var(--fs-body) }
.conversation__line b { font-size: var(--fs-small) }
.conversation__line--staff { justify-self: start; background: var(--mag-tint); border-left: 5px solid var(--mag) }
.conversation__line--person { justify-self: end; background: var(--ok-tint); border-right: 5px solid var(--ok) }
.conversation__type label { display: block; font-weight: 700; margin-bottom: 6px }
.conversation__row { display: flex; flex-wrap: wrap; gap: 8px }
.conversation__row input { flex: 1 1 220px; min-height: var(--tap); padding: 0 14px; border: 2px solid var(--line); border-radius: 12px; font: inherit; font-size: var(--fs-body); color: var(--ink) }
.conversation__row input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px }

/* ADAPT, one question at a time. Step 1 = accept the suggestion or choose; step 2 = the choices. */
.adapt-question { margin: 8px 0 6px; font-size: clamp(24px, 3vw, 34px); line-height: 1.25; letter-spacing: normal }
.adapt-question:focus { outline: none }
.adapt-suggestion { margin: 0 0 16px; font-size: var(--fs-lead); font-weight: 700 }
.adapt-actions { display: flex; flex-wrap: wrap; gap: 12px }
.adapt-accept { background: var(--flow); min-width: 12em }
.link-back { min-height: var(--tap); padding: 0; border: 0; background: none; color: var(--focus); font: 700 var(--fs-small) var(--sans); cursor: pointer; text-decoration: underline }
.adapt-staff { margin-top: 16px }
.adapt-staff summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-weight: 700 }
#adapt[data-adapt-step="suggest"] .adapt-step--choose,
#adapt[data-adapt-step="suggest"] #outputControls,
#adapt[data-adapt-step="suggest"] .adapt-staff,
#adapt[data-adapt-step="suggest"] .btn.next,
#adapt[data-adapt-step="suggest"] #contextControls .suggestion,
#adapt[data-adapt-step="suggest"] #acceptSuggestion,
#adapt[data-adapt-step="choose"] .adapt-step--suggest,
#adapt[data-adapt-step="choose"] #contextControls { display: none }

.units-draft { color: var(--danger); font-weight: 700 }

/* Problem-first library: problems → people → profile. */
.quick-starts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 24px 0 8px }
.quick-starts .flow-q { grid-column: 1 / -1 }
.flow-q { margin: 16px 0 12px; font-size: clamp(26px, 3vw, 38px); line-height: 1.2; letter-spacing: normal }
.flow-q:focus { outline: none }
.problem-grid, .person-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px }
.problem-card, .person-card { display: grid; gap: 4px; min-height: var(--tap); padding: 18px; border: 2px solid rgba(255, 255, 255, .18); border-radius: 18px; background: rgba(255, 255, 255, .06); color: #fff; text-align: left; font: inherit; cursor: pointer }
.problem-card:hover, .person-card:hover, .problem-card:focus-visible, .person-card:focus-visible { border-color: var(--pink) }
.problem-card:focus-visible, .person-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px }
.problem-icon { font-size: 34px }
.problem-card b, .person-card b { font-size: var(--fs-control) }
.problem-card small, .person-card small { color: var(--on-night-soft); font-size: var(--fs-small) }
.problem-count { font-weight: 800 }
.person-card { grid-template-columns: 72px 1fr; align-items: center; column-gap: 14px }
.person-avatar { width: 72px }
.person-text { display: grid; gap: 2px }
.profile { display: grid; grid-template-columns: 140px 1fr; gap: 24px; align-items: start; margin-top: 8px }
.profile-avatar { width: 140px }
.profile-group { margin: 0 0 8px; font-weight: 800; color: var(--focus) }
.fictional { padding: 2px 10px; border-radius: 999px; background: var(--mag-tint); color: var(--mag-deep); font-size: var(--fs-small) }
.profile-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: var(--fs-body) }
.profile-facts dt { font-weight: 800 }
.profile-facts dd { margin: 0 }
.situation-list { display: grid; gap: 12px; justify-items: start }
.next-like { background: var(--flow) }
.all-scenarios { margin-top: 28px }
.all-scenarios summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; font-weight: 700 }
.persona-avatar { display: block; width: 100%; height: auto }
.setup-person { display: flex; gap: 16px; align-items: center; margin: 8px 0 }
.setup-person[hidden] { display: none }
.setup-avatar { width: 88px; flex: none }
@media (max-width: 650px) { .profile { grid-template-columns: 1fr } .profile-avatar { width: 110px } .profile-facts { grid-template-columns: 1fr } }

/* Room under every screen for the guide's one-tap buttons (≈190px tall on desktop). */
@media (min-width: 651px) { .screen { padding-bottom: 220px } }