/* The look lesson (docs/plans/WELCOME-TOUR.md, The look lesson): its rings on the real Appearance window, the dock that
   stands that window against the canvas's right edge, the calm dim and the layer meter beside it, the wall's dissolve,
   Ann's card at the foot of the right panel, and the visitor's drawn window beside the words. Loaded after tour.css by
   the shell (index.html) and by the visitor's page (site/welcome.html). */

/* The look lesson's teaching ring (hands.mjs): a soft accent ring that breathes slowly on the control of the real
   Appearance window being worked. The window sets its own --accent, so the ring wears the person's accent. The soft
   ring is a quieter hint beside it: Mark's aquarium among the Pexels results, Done at the handover. */
.wt-ring { outline: 2px solid color-mix(in srgb, var(--accent) 72%, transparent); outline-offset: 4px; animation: wt-ring 1.8s ease-in-out infinite; }
:is(label.surface-slider, .surface-palette, .surface-gradient, .surface-tint, label.surface-custom, .pexels-search).wt-ring { border-radius: 10px; }
.wt-ring-soft { outline: 2px solid color-mix(in srgb, var(--accent) 42%, transparent); outline-offset: 3px; animation: wt-ring-soft 2.6s ease-in-out infinite; }
@keyframes wt-ring { 50% { outline-color: color-mix(in srgb, var(--accent) 26%, transparent); outline-offset: 7px; } }
/* Inside the right panel's scrolling tools an outer ring is cut off at the panel's edge, so there it is drawn just inside
   the control: the search box, Mark's aquarium among the results. */
.house-right :is(.wt-ring, .wt-ring-soft):not(.house-tab) { outline-offset: -3px; animation-name: wt-ring-in; }
/* There the main ring takes a little light, so it still shows on a blue or green wall behind the panel's glass. */
.house-right .wt-ring:not(.house-tab) { outline-color: color-mix(in srgb, var(--accent) 70%, #fff); }
.house-right .wt-ring-soft:not(.house-tab) { outline-width: 3px; animation-name: wt-ring-soft; }
@keyframes wt-ring-in { 50% { outline-color: color-mix(in srgb, var(--accent) 55%, transparent); } }
@keyframes wt-ring-soft { 50% { outline-color: color-mix(in srgb, var(--accent) 14%, transparent); } }

/* The look lesson's dock (lesson.mjs): the real Appearance window against the right edge of the canvas, under its
   header, in one column. Its small live preview steps aside, since the whole room is the preview now. The values the
   dock measures each frame arrive as --wt-dock-*. */
html[data-wt-dock] dialog.resource-dialog.skin-compact[data-appearance-editor]:not([data-app-appearance]) {
  top: var(--wt-dock-top, 72px) !important; right: var(--wt-dock-right, 12px) !important; bottom: var(--wt-dock-bottom, 12px) !important; left: auto !important;
  width: min(440px, calc(100vw - 48px)) !important; height: auto !important; max-width: none !important; max-height: none !important; transform: none !important; zoom: 1 !important;
  box-shadow: 0 30px 90px rgb(0 0 0 / 0.45), 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent);
}
html[data-wt-dock] [data-appearance-editor] .rd-columns { grid-template-columns: minmax(0, 1fr); gap: 0; }
html[data-wt-dock] [data-appearance-editor] .rd-columns > div + div { border-left: 0; padding-left: 0; }
html[data-wt-dock] [data-appearance-editor] :is([data-compact-preview], .surface-preview-caption) { display: none; }
html[data-wt-dock] [data-appearance-editor] .skin-live-preview { position: static; }
html[data-wt-dock] [data-appearance-editor] .skin-live-preview label.skin-media-drop { margin: 0 0 14px !important; min-height: 92px !important; }
/* The stage keeps clear of the window and the meter beside it. Its words stand on a plate of their own, in the meter's
   glass, so they read over every wall the lesson lays down (white, black, coral, a waterfall, crystal clear glass) while
   the room around them shows that wall true. After the lesson the plate stays wherever the wall, a picture, a video or a
   plain color, sits behind thin glass (data-thin-glass, set by each place), as the person's crystal clear aquarium does. */
html[data-wt-dock] [data-welcome-tour] .wt-stage { padding-right: var(--wt-stage-clear, min(46vw, 660px)); }
:is(html[data-wt-dock], html[data-wt-coach-top], [data-thin-glass]) .wt-words { box-sizing: border-box; width: min(620px, 100%); padding: 22px 30px 24px; border-radius: 22px; text-shadow: none;
  background: color-mix(in srgb, var(--panel, #141a21) 80%, transparent); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); box-shadow: 0 18px 50px rgb(0 0 0 / 0.28); }
:is(html[data-wt-dock], [data-thin-glass]) .wt-words .wt-line { min-height: 3.3em; }
:is(html[data-wt-dock], html[data-wt-coach-top], [data-thin-glass]) .wt-words :is(.wt-line, .wt-doors):empty { display: none; }
/* On a phone the lesson's line stands in the card above the window (turn.mjs), so the stage keeps only its headline,
   small, on the plate: it reads over Black in Day and White in Night, and most of the band between the card and the
   window's sheet is the room itself. */
html[data-wt-coach-top] [data-welcome-tour] .wt-words { padding: 12px 16px 14px; border-radius: 16px; }
html[data-wt-coach-top] [data-welcome-tour] .wt-words :is(.wt-line, .wt-doors) { display: none; }
html[data-wt-coach-top] [data-welcome-tour] .pathary-welcome .wt-headline { min-height: 0; font-size: 26px; }
html[data-wt-dock] :is([data-welcome-tour], .wt-visitor) .wt-foot { visibility: hidden; }
/* The drawn window is the real one's stand-in, so it wears the real one's solid panel, whatever glass the lesson has
   left on the room (crystal clear is 10%). */
html[data-wt-dock] .wt-visitor .wt-screen { background: var(--panel, #141a21); backdrop-filter: none; -webkit-backdrop-filter: none; }

html[data-wt-dock] [data-welcome-tour] .pathary-welcome .wt-headline { font-size: clamp(40px, 4.4vw, 68px); }
html[data-wt-dock="two"] [data-welcome-tour] .pathary-welcome .wt-headline { font-size: clamp(30px, 2.8vw, 46px); }

/* The page dims softly behind the window while Max teaches (frame.mjs): a calm vignette at the edges, clear over the
   wall the person is watching, never black, and light enough that White still reads white. */
.wt-dim { position: fixed; inset: 0; z-index: 89; pointer-events: none; opacity: 0; transition: opacity 0.9s ease;
  background: radial-gradient(84% 80% at var(--wt-dim-x, 42%) 48%, transparent 46%, rgb(4 8 14 / 0.42) 100%); }
:root[data-theme="day"] .wt-dim { background: radial-gradient(84% 80% at var(--wt-dim-x, 42%) 48%, transparent 46%, rgb(24 30 38 / 0.26) 100%); }
.wt-dim[data-on] { opacity: 1; }
/* A phone shows the window on its own: no vignette over it. */
@media (max-width: 999px) { .wt-dim { display: none; } }

/* The layer meter (frame.mjs): five numbered marks stacked bottom to top beside the window, the layer being taught lit,
   the ones built under it kept, all five lit at the recap. */
.wt-meter { position: fixed; z-index: 91; display: flex; flex-direction: column-reverse; gap: 8px; margin: 0; padding: 14px 18px 14px 14px; list-style: none;
  border-radius: 18px; color: var(--text); font-size: 13px; pointer-events: none; opacity: 0; transform: translateX(12px); transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.6s ease;
  background: color-mix(in srgb, var(--panel, #141a21) 72%, transparent); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); box-shadow: 0 18px 50px rgb(0 0 0 / 0.32); }
.wt-meter[data-on]:not([data-away]) { opacity: 1; transform: none; }
.wt-meter li { position: relative; display: flex; align-items: center; gap: 11px; color: color-mix(in srgb, var(--text) 50%, transparent); white-space: nowrap; transition: color 0.4s ease; }
.wt-meter li + li::after { content: ""; position: absolute; left: 13px; top: 100%; width: 1px; height: 8px; background: color-mix(in srgb, var(--text) 18%, transparent); }
.wt-meter b { display: grid; place-items: center; width: 27px; height: 27px; flex: none; border-radius: 50%; font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums;
  border: 1px solid color-mix(in srgb, var(--text) 22%, transparent); transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; }
.wt-meter li[data-state="done"] { color: color-mix(in srgb, var(--text) 80%, transparent); }
.wt-meter li[data-state="done"] b { color: var(--text); border-color: color-mix(in srgb, var(--skin-accent, var(--accent)) 75%, transparent); background: color-mix(in srgb, var(--skin-accent, var(--accent)) 22%, transparent); }
.wt-meter li[data-state="lit"] { color: var(--text); font-weight: 600; }
.wt-meter li[data-state="lit"] b { color: var(--skin-on-accent, #fff); background: var(--skin-accent, var(--accent)); border-color: var(--skin-accent, var(--accent));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--skin-accent, var(--accent)) 22%, transparent); }
.wt-meter[data-whole] { box-shadow: 0 18px 50px rgb(0 0 0 / 0.32), 0 0 0 1px color-mix(in srgb, var(--skin-accent, var(--accent)) 55%, transparent); }

/* The room dissolves from one look into the next (hands.mjs crossfade, visitor-lesson.mjs): the page's own view
   transition, slowed to a calm 700 ms while the lesson changes the wall. A press during it reaches the control under
   it all the same (frame.mjs pressThrough). */
html.wt-fading::view-transition-old(root), html.wt-fading::view-transition-new(root) { animation-duration: 0.7s; animation-timing-function: ease; }
/* The old wall, held over the new one until its first frame is drawn (turn.mjs). */
.wt-wall-ghost { pointer-events: none; }

/* Ann at the foot of the right panel while her chat is out of sight (turn.mjs): her newest line and Pathary's
   Aquarium, in the panel's own glass. */
.wt-coach { position: fixed; bottom: 14px; z-index: 92; display: none; padding: 14px 16px 16px; border-radius: 16px; color: var(--text);
  background: color-mix(in srgb, var(--panel, #141a21) 90%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); box-shadow: 0 20px 60px rgb(0 0 0 / 0.42); }
.wt-coach[data-on] { display: block; animation: wt-coach-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
/* On a phone the card stands at the top and the window becomes a short sheet at the foot of the screen (turn.mjs
   measures its height into --wt-sheet-h), so the room shows between them as Max names each change, and the window's
   own header, its Day and Night and its Done all stay in sight. Its live preview stays pinned at the top of the sheet
   while the controls scroll under it, so a slider being moved and the look it makes are seen together. */
.wt-coach[data-top] { top: 12px; bottom: auto; padding: 12px 14px; }
.wt-coach[data-top] p { font-size: 14px; }
html[data-wt-coach-top] dialog.resource-dialog.skin-compact[data-appearance-editor]:not([data-app-appearance]) {
  top: auto !important; bottom: 10px !important; transform: translateX(-50%) !important; height: var(--wt-sheet-h) !important; max-height: var(--wt-sheet-h) !important; }
html[data-wt-coach-top] [data-appearance-editor] .resource-dialog-body { flex: 1 1 auto; min-height: 0; scroll-padding-top: 96px; }
html[data-wt-coach-top] [data-appearance-editor] .rd-columns { display: block; }
html[data-wt-coach-top] [data-appearance-editor] .skin-live-preview { display: contents; }
/* Pinned over the body's own top padding too, so nothing scrolled under it peeks out above it. */
html[data-wt-coach-top] [data-appearance-editor] [data-compact-preview] { position: sticky; top: -12px; z-index: 3; margin: -12px -2px 0; padding: 12px 2px 8px; background: var(--panel); }
html[data-wt-coach-top] [data-appearance-editor] [data-compact-preview] .skin-preview { height: 72px; max-height: none; aspect-ratio: auto; }
/* The visitor's phone: a line about the room itself, its chat folded away (visitor.mjs reveal). */
.wt-caption { left: 16px; right: 16px; }
/* The reveal (glass.mjs): for "Look at that" and the Goat the window folds down to its footer from the top, Done
   still in sight, so the tank shows where the window stood; the meter steps aside and, on a phone, the stage's headline
   gives the room its band between Ann's card and the footer. --wt-fold is measured each frame as the fold glides. */
html[data-wt-fold] dialog.resource-dialog.skin-compact[data-appearance-editor]:not([data-app-appearance]) { clip-path: inset(var(--wt-fold, 0px) 0 0 0 round var(--wt-fold-r, 16px)); }
html[data-wt-reveal] .wt-meter[data-on]:not([data-away]) { opacity: 0; transform: translateX(12px); }
/* Faded, they take no press either: Explore Pathary, unseen, never ends the tour by accident. The visitor's headline
   fades on a phone only, as the signed-in one does (visitor.mjs sets data-wt-reveal there alone; this holds it to a
   phone whatever the window does after). */
html[data-wt-coach-top] [data-welcome-tour] :is(.wt-words, .wt-foot), .wt-visitor .wt-stage :is(.wt-words, .wt-foot) { transition: opacity 0.5s ease; }
html[data-wt-reveal][data-wt-coach-top] [data-welcome-tour] :is(.wt-words, .wt-foot) { opacity: 0; pointer-events: none; }
@media (max-width: 900px) {
  html[data-wt-reveal] .wt-visitor .wt-stage :is(.wt-words, .wt-foot) { opacity: 0; pointer-events: none; }
}
/* Pathary's Aquarium on a phone (Pexels video 8837970 on the wall, its poster on the visitor's): the wide tank is
   cropped to portrait, so the crop leans right of center, onto the striped fish, the pale one and the yellow one, rather
   than the rock and the woman at its left. */
@media (max-width: 900px) {
  .house-shell > .house-wall :is(video[data-src*="sample-aquarium"], img[src*="8837970"]) { object-position: 60% 50%; }
}
/* The opening's picture from Pexels on a phone (opening.mjs, html[data-wt-pick]): the Stock Media sheet takes the
   screen's width, so its search and its pictures can be used, and the window folds to its footer, Cancel and Done in
   reach below it; Max's line stands in the card at the top. Pexels not answering ("own"), the sheet is folded away and
   the window, whole on a desk, stands at the foot of a phone as its own drop well and its footer, so the stage above
   it says the line and the well it names is in reach. */
@media (max-width: 900px) {
  html[data-wt-pick="pexels"] .house-right { width: 86vw; }
  html[data-wt-pick] dialog.resource-dialog.skin-compact[data-appearance-editor]:not([data-app-appearance]) {
    top: auto !important; bottom: 10px !important; transform: translateX(-50%) !important; height: auto !important; max-height: none !important; }
  html[data-wt-pick="own"] [data-appearance-editor]:not([data-app-appearance]) .resource-dialog-body { flex: none; min-height: 0; }
  html[data-wt-pick="pexels"] [data-appearance-editor]:not([data-app-appearance]) > :not(.resource-dialog-footer),
  html[data-wt-pick="own"] [data-appearance-editor]:not([data-app-appearance]) > :is(.resource-dialog-header, .skin-context, .resource-dialog-tabs, .skin-tab-row),
  html[data-wt-pick="own"] [data-appearance-editor]:not([data-app-appearance]) :is([data-compact-preview], .surface-preview-caption, .rd-columns > :not(.skin-live-preview) > fieldset) { display: none; }
}
@keyframes wt-coach-in { from { opacity: 0; transform: translateY(10px); } }
.wt-coach-who { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.wt-coach-face { width: 28px; height: 28px; flex: none; border-radius: 50%; object-fit: cover; }
.wt-coach-face.house-ann-init { display: grid; place-items: center; font-size: 13px; font-weight: 600; background: color-mix(in srgb, var(--accent) 24%, transparent); color: var(--accent); }
.wt-coach p { margin: 8px 0 0; font-size: 15px; line-height: 1.45; }
.wt-coach .wt-coach-note { color: var(--muted); font-size: 13px; }
.wt-coach-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* Pathary's Aquarium comes to the front once Pexels cannot help (turn.mjs). */
html[data-wt-pexels-down] :is([data-welcome-cast], .wt-coach) .house-ann-suggestion[data-scene="look-turn"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }
.house-ann-note.wt-note { color: var(--text); }

/* The visitor's lesson (visitor-lesson.mjs): the drawn window stands at the right of the stage, the words at its left,
   with the meter between them. */
@media (min-width: 1000px) {
  html[data-wt-dock] .wt-visitor .pathary-welcome.wt-stage { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr); column-gap: 200px; align-content: center;
    max-width: none; min-height: calc(100dvh - 110px); padding: 24px 5% 40px; }
  html[data-wt-dock] .wt-visitor .wt-words { grid-column: 1; grid-row: 1; }
  html[data-wt-dock] .wt-visitor .wt-screen { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 100%; margin: 0; }
  html[data-wt-dock] .wt-visitor .wt-foot { grid-column: 1; }
  html[data-wt-dock] .wt-visitor .pathary-welcome .wt-headline { font-size: clamp(40px, 4.2vw, 64px); }
}
@media (prefers-reduced-motion: reduce) {
  .wt-ring, .wt-ring-soft { animation: none; }
  .wt-dim, .wt-meter, .wt-meter li, .wt-meter b { transition: none; }
  .wt-coach[data-on] { animation: none; }
}