/* The Welcome Tour (docs/plans/WELCOME-TOUR.md): only the rules the shell does not already have. The stage wears the
   Welcome room's own grammar (styles/welcome.css: pathary-welcome's h1, pw-lead, pw-primary and pw-tour), the chat is
   the real assistant panel (styles/assistant-panel.css), the overlays the house dialog (resource-dialog.css) and the
   chips the house chip (components.css .chip). Here: the stage's layout and the screen's frame, the chips' size, the
   three dots, the map and the record inside their dialogs, and the visitor page's bar; the look lesson's own rules are
   in lesson.css. Loaded by the shell (index.html) and by the visitor's page (site/welcome.html). */

/* The stage: the words, then the screen under them. The headline and the line keep their room while the words change,
   so the doors and the screen hold still. */
.wt-stage { display: flex; flex-direction: column; padding-top: clamp(28px, 5vh, 56px); padding-bottom: 40px; }
.wt-words { max-width: 880px; }
/* The words keep a soft shadow, so they read over any wall the person lays down: a waterfall, an aquarium, crystal
   clear glass. On a plain wall it cannot be seen. */
.wt-words { text-shadow: 0 1px 2px rgb(0 0 0 / 0.28), 0 2px 20px rgb(0 0 0 / 0.34); }
:root[data-theme="day"] .wt-words { text-shadow: 0 1px 2px rgb(255 255 255 / 0.4), 0 2px 20px rgb(255 255 255 / 0.45); }
/* At night the headline's accent words take a little light, so they still read over a blue wall or an aquarium. */
:root:not([data-theme="day"]) .pathary-welcome .wt-headline span { color: color-mix(in srgb, var(--accent) 78%, #fff); }
.pathary-welcome .wt-headline { min-height: 2.08em; margin-bottom: 0; text-wrap: balance; }
.pathary-welcome .wt-headline[data-size="long"] { font-size: clamp(34px, 3.9vw, 58px); }
.wt-line { min-height: 4.95em; margin: 18px 0 0; text-wrap: pretty; }
.wt-line[data-skip] { cursor: pointer; }
.wt-doors { gap: 10px; min-height: 48px; margin-top: 18px; }
.wt-door { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; text-align: left; cursor: pointer; }
.wt-door svg { width: 17px; height: 17px; flex: none; }
.wt-door small { font-weight: 400; opacity: 0.75; }
.pw-primary.wt-door:hover { filter: brightness(1.08); }
.wt-disc { width: 15px; height: 15px; flex: none; border-radius: 50%; background: var(--disc); border: 1px solid color-mix(in srgb, currentColor 40%, transparent); }
.wt-foot { margin-top: 28px; }
:is(.wt-door, .wt-line, .wt-aside):focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* A chat that comes by itself on a phone waits here, under the doors, as a quiet chip: the speaker's face and a few
   words, in the room's own muted ink, never over the doors or the headline (engine.mjs). */
.wt-aside { display: inline-flex; align-items: center; gap: 9px; margin-top: 16px; padding: 5px 15px 5px 5px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--text) 18%, transparent); background: color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--text); font: inherit; font-size: 15px; text-shadow: none; cursor: pointer; }
.wt-aside[hidden] { display: none; }
.wt-aside:hover { border-color: var(--accent); }
.wt-aside-face { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 13px; font-weight: 600;
  background: color-mix(in srgb, var(--accent) 24%, transparent); color: var(--accent); }

/* The drawn screen's glass frame. It keeps its place from the scene's start ("wait"); the screen inside is drawn at 900
   by 540 and scaled to the frame. In the shell, the real Appearance window stands in for the drawn one while it is
   open (Mark's rule: one Appearance window), so the drawn one steps aside. */
.wt-screen {
  position: relative; flex: none; width: min(100%, max(320px, calc((100svh - 560px) * 5 / 3))); aspect-ratio: 900 / 540;
  margin-top: 28px; border-radius: 20px; overflow: hidden; background: var(--skin-surface-fill, var(--panel));
  backdrop-filter: blur(var(--wall-blur, 12px)); border: 1px solid var(--edge); box-shadow: var(--sh-card, 0 30px 80px rgba(0, 0, 0, 0.3));
}
.wt-screen[data-state="off"] { display: none; }
.wt-screen[data-state="wait"] { visibility: hidden; }
.wt-screen-box { position: absolute; left: 0; top: 0; width: 900px; height: 540px; transform-origin: 0 0; }
.wt-screen-box > * { position: absolute; inset: 0; }
[data-real-window] .wt-screen[data-kind="appearance"] { display: none; }

/* The chips in the canvas header: the house chip, sized to sit in the bar beside the room's name. */
.wt-chips { display: flex; align-items: center; gap: 6px; flex: none; min-width: 0; pointer-events: auto; }
.wt-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--r-pill, 999px); font: inherit; font-size: var(--t-label); font-weight: var(--w-med, 500); white-space: nowrap; cursor: pointer; }
.wt-chip:not(.chip-on):hover { color: var(--text); border-color: var(--accent); }
.wt-chip svg { width: 15px; height: 15px; flex: none; }
@media (max-width: 1180px) { .wt-chip:not(.chip-on) > span { display: none; } .wt-chip:not(.chip-on) { width: 30px; padding: 0; justify-content: center; } }

/* The moment before Ann's line arrives: three dots where her line will be. */
.wt-typing { display: flex; gap: 5px; padding: 6px 0; }
.wt-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: wt-dot 1s ease-in-out infinite; }
.wt-typing i + i { animation-delay: 0.15s; }
@keyframes wt-dot { 50% { opacity: 0.25; } }

/* The map and the record, in the house dialog. */
.wt-dialog[open] { width: min(1240px, calc(100vw - 24px)); max-height: min(860px, calc(100dvh - 32px)); }
.wt-record[open] { width: min(780px, calc(100vw - 24px)); }
.wt-dialog .resource-dialog-header { align-items: flex-start; cursor: default; padding: 18px 20px 14px; }
.wt-dialog-words h2 { font-size: 24px; letter-spacing: -0.03em; }
.wt-dialog-words p { margin: 6px 0 0; font-size: var(--t-small); color: var(--muted); }
.wt-map-scroll { position: relative; padding: 16px 20px 24px; }
.wt-map-cols { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 190px; gap: 40px; align-items: start; width: max-content; }
.wt-map-col { display: flex; flex-direction: column; gap: 8px; }
.wt-map-col h3, .wt-week time { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 2px; }
.wt-node {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 9px 30px 9px 12px;
  border: 1px solid var(--edge); border-radius: 12px; background: var(--rd-inset); color: var(--text); font-size: 13px; line-height: 1.3; text-align: left; cursor: pointer;
}
.wt-node:hover { border-color: var(--accent); }
.wt-node small { font-size: 11px; color: var(--muted); }
.wt-node > svg { position: absolute; right: 9px; top: 9px; width: 15px; height: 15px; color: var(--accent); }
.wt-node[aria-current] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.wt-map-lines { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.wt-map-lines path { fill: none; stroke: color-mix(in srgb, var(--text) 16%, transparent); stroke-width: 1.5; }
.wt-weeks { list-style: none; margin: 0; display: grid; gap: 14px; }
.wt-week { padding: 18px 20px; border: 1px solid var(--edge); border-radius: 14px; background: var(--rd-inset); }
.wt-week h3 { font-size: 24px; line-height: 1.1; font-weight: 650; letter-spacing: -0.045em; margin: 8px 0 12px; }
.wt-week h3 span { color: var(--accent); }
.wt-week p { margin: 0 0 8px; color: var(--muted); line-height: 1.6; }
.wt-sources { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.wt-sources a { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 12px; border: 1px solid var(--edge); border-radius: 999px; color: var(--text); font-size: 13px; text-decoration: none; overflow-wrap: anywhere; }
.wt-sources a:hover { color: var(--accent); }
.wt-sources svg { width: 14px; height: 14px; flex: none; }

/* The visitor's page (site/welcome.html): the shell's frame with a bar of its own, the Pathary mark and Sign in. It
   loads only the sheets the room needs, so the two values the signed-in shell gets elsewhere are set here: the canvas
   title's face (document-mode.css) and a new account's right panel width (app.js, 370px). */
.wt-visitor { --font-trajan: var(--font-ui); }
.wt-visitor .house { --house-rw: 370px; }
.wt-visitor [hidden] { display: none !important; }
.wt-bar { display: flex; align-items: center; gap: 12px; padding: 0 16px; }
.wt-mark { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-size: 17px; font-weight: 650; letter-spacing: -0.02em; text-decoration: none; }
.wt-bar .wt-signin { padding: 7px 16px; font-size: var(--t-small); text-decoration: none; }
.wt-spacer { visibility: hidden; }
.wt-preview .wt-signin { display: none; }
.wt-credit { position: fixed; left: 16px; bottom: 12px; z-index: 3; margin: 0; font-size: 12px; color: var(--muted); }
.wt-credit a { color: inherit; }
.wt-transcript { position: fixed; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wt-skip { position: absolute; left: 16px; top: -60px; z-index: 20; padding: 8px 14px; border-radius: 999px; background: var(--accent); color: var(--on-accent, #fff); }
.wt-skip:focus { top: 8px; }
.wt-noscript { padding: 40px 16px; }

/* Phones and narrow windows: one column, the screen above the words. The visitor's canvas has no rail above it. */
@media (max-width: 900px) {
  .pathary-welcome.wt-stage { padding: 18px 16px 40px; }
  .wt-screen { order: -1; width: 100%; margin: 0 0 22px; border-radius: 16px; }
  .pathary-welcome .wt-headline { font-size: clamp(34px, 9.4vw, 48px); min-height: 0; }
  .pathary-welcome .wt-headline[data-size="long"] { font-size: clamp(30px, 8vw, 40px); }
  .wt-line { font-size: 17px; min-height: 0; margin-top: 16px; }
  .wt-doors { margin-top: 18px; }
  .wt-visitor .house-main { height: 100%; }
  /* The chat is a sheet over the room here, so it keeps a surface of its own that reads over any wall, whatever glass
     the look lesson has left on the room (crystal clear is 10%); the skin's own glass is the sheet's everywhere else. */
  .wt-visitor .house-right { background: color-mix(in srgb, var(--panel) 94%, transparent) !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; }
  /* Under the canvas header (visitor.mjs measures its foot into --house-panel-top), never over the room's name. */
  .wt-credit { bottom: auto; top: calc(var(--house-panel-top, 104px) + 6px); }
  .wt-sheet-open .wt-credit { visibility: hidden; }
}
@media (max-width: 700px) {
  .wt-dialog[open] { width: 100vw; max-width: 100vw; max-height: 92dvh; margin: auto 0 0; border-radius: 18px 18px 0 0; }
  .wt-map-cols { grid-auto-flow: row; grid-auto-columns: auto; width: auto; gap: 22px; }
  .wt-map-lines { display: none; }
}
/* Her doors in the chat and the coach (cast.mjs castParts, turn.mjs): the house's pills. The Ann panel no longer offers
   suggestions of its own, so the tour keeps their rules here. */
[data-welcome-cast] .house-ann-suggestions { display: flex; flex: none; flex-wrap: wrap; gap: 6px; padding: 0 var(--ann-pad) var(--ann-gap); }
:is([data-welcome-cast], .wt-coach) .house-ann-suggestion { min-height: 32px; max-width: 100%; padding: 5px 10px; border: 1px solid var(--edge); border-radius: var(--r-pill, 999px); background: transparent; color: var(--muted); font: inherit; font-size: var(--t-label); line-height: 1.35; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
:is([data-welcome-cast], .wt-coach) .house-ann-suggestion:hover { background: var(--sel); color: var(--accent); }
:is([data-welcome-cast], .wt-coach) .house-ann-suggestion:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (pointer: coarse) {
  :is([data-welcome-cast], .wt-coach) .house-ann-suggestion { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .wt-typing i { animation: none; }
}