/* sunshine-walkthrough — this demo in the Veydr Labs look. See kit.css for the shared --vl-* variables.

   Only the interface is restyled here: start screen, room title, tools, rooms menu, key plan frame,
   door prompt, key caps, joystick ring. The marks drawn on the key plan canvas are recoloured by
   tools/demo-brand/sunshine-walkthrough.json.
   sunshine-walkable.css is this same sheet without the key plan and with the Enter VR button:
   change one, change the other.

   The rules every demo follows:
   - action buttons (Walk in, Daylight, the door prompt): Vermilion with black text, off-white on hover
   - toggles (Plan view, Rooms): dark pill when off, Vermilion when on
   - loading / disabled: muted, no accent
   - panels are sharp-cornered with a hairline; buttons and key caps are pills */

:root {
  /* The demo's own colour and font names, pointed at the site's, so nothing falls back to navy, cream or brass. */
  --ink: var(--vl-black); --panel: var(--vl-panel); --line: var(--vl-line);
  --paper: var(--vl-white); --dim: var(--vl-muted); --brass: var(--vl-accent); --live: var(--vl-accent);
  --display: var(--vl-font); --body: var(--vl-font); --mono: var(--vl-font);

  --sw-btn: 38px;                               /* height of a HUD button */
  --sw-gap: 10px;                               /* space between HUD rows */
  --sw-row2: calc(var(--vl-below) + var(--sw-btn) + var(--sw-gap));   /* the line under a row of HUD buttons that sits below the bar */
  --sw-off: rgba(244, 243, 239, 0.34);          /* outline of a toggle that is off */
  --sw-move: 0.4s var(--vl-ease);
}
:root.touch { --sw-btn: 40px; }
@media (pointer: coarse) { :root { --sw-btn: 40px; } }

html, body { background: var(--vl-black); color: var(--vl-white); font-family: var(--vl-font); font-stretch: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: var(--vl-accent); color: var(--vl-on-accent); }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 2px solid var(--vl-accent); outline-offset: 3px; }
.mono { font-family: var(--vl-font); font-variant-numeric: tabular-nums lining-nums; }
.pane { background: var(--vl-panel); border: 1px solid var(--vl-line); border-radius: 0; -webkit-backdrop-filter: var(--vl-blur); backdrop-filter: var(--vl-blur); }

/* ---- Room title: under the kit bar, top left */
#title { top: var(--vl-below); left: var(--vl-left); padding: 13px 18px 14px; }
#room { font-family: var(--vl-font); font-size: clamp(20px, 2.1vw, 28px); font-weight: 700; font-stretch: var(--vl-wide); letter-spacing: -0.035em; line-height: 1; text-wrap: balance; }
#dims { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 11.5px; font-weight: 550; letter-spacing: 0.08em; line-height: 1.2; color: var(--vl-muted); }
#dims::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--vl-accent); flex: none; }
#dims:empty { display: none; }

/* ---- Tools: top right, level with the kit bar */
#tools { top: calc(var(--vl-top) + (var(--vl-bar) - var(--sw-btn)) / 2); right: var(--vl-right); gap: 8px; max-width: calc(100vw - var(--vl-left) - var(--vl-right)); }
.tool {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--sw-btn); padding: 0 16px;
  border: 1px solid var(--sw-off); border-radius: 999px; background: var(--vl-panel); color: var(--vl-white);
  font-size: 13px; font-weight: 600; letter-spacing: 0.01em; line-height: 1; white-space: nowrap;
  transition: background-color var(--sw-move), border-color var(--sw-move), color var(--sw-move);
}
.tool:hover { border-color: var(--sw-off); }
.tool[aria-pressed="true"], #bLight { background: var(--vl-accent); border-color: var(--vl-accent); color: var(--vl-on-accent); }

/* ---- Rooms menu. It stops short of the bottom edge so the frame-rate readout stays clear of it. */
#rooms {
  box-sizing: border-box; top: var(--vl-below); right: var(--vl-right); width: min(300px, calc(100vw - var(--vl-left) - var(--vl-right))); padding: 4px 6px;
  max-height: calc(100vh - var(--vl-below) - 44px - env(safe-area-inset-bottom, 0px)); max-height: calc(100dvh - var(--vl-below) - 44px - env(safe-area-inset-bottom, 0px));
  scrollbar-width: thin; scrollbar-color: rgba(244, 243, 239, 0.3) transparent; overscroll-behavior: contain;
}
#rooms button {
  align-items: center; gap: 14px; min-height: var(--sw-btn); padding: 8px 10px; border-radius: 0; color: var(--vl-white);
  font-size: 13.5px; font-weight: 500; line-height: 1.2;
  transition: background-color var(--sw-move), color var(--sw-move);
}
#rooms button + button { border-top: 1px solid var(--vl-line); }
#rooms button:hover { background: transparent; }
#rooms button[aria-current="true"] { color: var(--vl-accent); font-weight: 650; }
#rooms button:focus-visible { outline-offset: -2px; }
#rooms span:last-child { font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em; color: var(--vl-muted); }
:root.touch #rooms button { min-height: 44px; }

/* ---- Key plan frame (the drawing itself is canvas: see the JSON swaps) */
#keyplan { left: var(--vl-left); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); padding: 7px; }
#keyplan .cap { gap: 10px; padding: 8px 1px 2px; font-size: 9px; font-weight: 550; letter-spacing: 0.14em; line-height: 1.2; color: var(--vl-muted); }

/* ---- Door prompt: an action button */
#prompt {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: var(--sw-btn); padding: 0 17px;
  border: 1px solid var(--vl-accent); border-radius: 999px; background: var(--vl-accent); color: var(--vl-on-accent);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  font-size: 13px; font-weight: 600; letter-spacing: 0.01em; line-height: 1;
  transition: background-color var(--sw-move), border-color var(--sw-move);
}
#prompt kbd {
  box-sizing: border-box; display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin: 0 0 0 -8px; padding: 0 6px;
  border: 0; border-radius: 999px; background: var(--vl-on-accent); color: var(--vl-white);
  font-family: var(--vl-font); font-size: 11px; font-weight: 650; letter-spacing: 0.04em; line-height: 1;
}

/* ---- Frame-rate readout and touch joystick */
#fps { right: var(--vl-right); font-size: 9.5px; font-weight: 550; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244, 243, 239, 0.78); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.5); }
#knob { border: 1.5px solid var(--vl-white); background: rgba(11, 11, 11, 0.3); }

/* ---- Start screen. The text block scrolls inside the space under the kit bar, so it can never slide beneath it. */
#start {
  display: flex; flex-direction: column; align-items: stretch; overflow: hidden;
  padding-top: var(--vl-below); padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); padding-left: var(--vl-left); padding-right: var(--vl-right);
  background: linear-gradient(to top, rgba(11, 11, 11, 0.95) 0, rgba(11, 11, 11, 0.66) 44%, rgba(11, 11, 11, 0.14) 100%);
}
#start .block {
  box-sizing: border-box; min-height: 0; overflow-y: auto; scrollbar-width: none; justify-self: auto;
  width: auto; max-width: 936px; gap: 20px; padding: 8px; margin-top: auto;
  margin-left: calc(clamp(0px, 5vw, 70px) - 8px); margin-bottom: calc(clamp(0px, 5vh, 50px) - 8px);
}
#start .block::-webkit-scrollbar { display: none; }
#start .eyebrow { display: flex; align-items: center; gap: 10px; font-family: var(--vl-font); font-size: 11.5px; font-weight: 550; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.3; color: var(--vl-grey); font-variant-numeric: tabular-nums lining-nums; }
#start .eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--vl-accent); flex: none; }
#start h1 { font-family: var(--vl-font); font-size: clamp(31px, 5.7vw, 86px); font-weight: 800; font-stretch: var(--vl-wide); letter-spacing: -0.045em; line-height: 0.94; text-wrap: balance; }
#start p { max-width: 54ch; color: var(--vl-grey); font-size: 16px; line-height: 1.5; text-wrap: pretty; }
#start .row { gap: 16px 26px; margin-top: 4px; }
#enter {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px;
  border: 1px solid var(--vl-accent); border-radius: 999px; background: var(--vl-accent); color: var(--vl-on-accent);
  font-size: 15px; font-weight: 650; letter-spacing: 0.01em; line-height: 1; white-space: nowrap;
  transition: background-color var(--sw-move), border-color var(--sw-move), color var(--sw-move);
}
.keys { gap: 9px 18px; color: var(--vl-grey); font-size: 12.5px; }
.keys span { display: inline-flex; align-items: center; gap: 8px; }
.keys kbd {
  box-sizing: border-box; display: inline-grid; place-items: center; min-width: 26px; height: 26px; margin: 0; padding: 0 9px;
  border: 1px solid var(--sw-off); border-radius: 999px; background: rgba(11, 11, 11, 0.45); color: var(--vl-white);
  font-family: var(--vl-font); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; line-height: 1; white-space: nowrap;
}
#note { max-width: 62ch; color: var(--vl-muted) !important; font-size: 12.5px !important; }
#error { padding-left: 12px; border-left: 2px solid var(--vl-accent); color: var(--vl-white) !important; font-weight: 600; }

/* ---- Hover (pointer devices only, so a tap never leaves a button stuck in its hover colours) */
@media (hover: hover) {
  .tool:hover { border-color: var(--vl-accent); color: var(--vl-accent); }
  /* A toggle that is on keeps its Vermilion under the pointer, so its state is never in doubt; only its edge lightens. */
  .tool[aria-pressed="true"]:hover { border-color: var(--vl-white); color: var(--vl-on-accent); }
  #bLight:hover, #prompt:hover, #enter:hover { background: var(--vl-white); border-color: var(--vl-white); color: var(--vl-on-accent); }
  #rooms button:hover { background: rgba(244, 243, 239, 0.07); color: var(--vl-accent); }
}
#enter[disabled], #enter[disabled]:hover { background: rgba(244, 243, 239, 0.12); border-color: transparent; color: var(--vl-muted); cursor: progress; -webkit-backdrop-filter: var(--vl-blur); backdrop-filter: var(--vl-blur); }

/* ---- Motion: the start screen rises in; the HUD pieces settle in as they appear. */
@keyframes sw-rise { from { opacity: 0; transform: translateY(26px); } }
@keyframes sw-drop { from { opacity: 0; transform: translateY(-10px); } }
@keyframes sw-fade { from { opacity: 0; } }
#start { animation: sw-fade 0.9s ease-out both; }
#start .block > * { animation: sw-rise 1s var(--vl-ease) both; }
#start .block > :nth-child(1) { animation-delay: 0.15s; }
#start .block > :nth-child(2) { animation-delay: 0.23s; }
#start .block > :nth-child(3) { animation-delay: 0.31s; }
#start .block > :nth-child(4) { animation-delay: 0.39s; }
#start .block > :nth-child(5) { animation-delay: 0.47s; }
#start .block > :nth-child(6) { animation-delay: 0s; }
#title, #tools { animation: sw-drop 0.8s var(--vl-ease) both; }
#rooms { animation: sw-drop 0.45s var(--vl-ease) both; }
#keyplan, #fps, #prompt { animation: sw-fade 0.5s ease-out both; }

/* ---- Narrow windows: the bar and the tools no longer fit side by side, so the tools take the row below the bar. */
@media (max-width: 820px) {
  #tools { top: var(--vl-below); }
  #rooms { top: var(--sw-row2); max-height: calc(100vh - var(--sw-row2) - 44px - env(safe-area-inset-bottom, 0px)); max-height: calc(100dvh - var(--sw-row2) - 44px - env(safe-area-inset-bottom, 0px)); }
  #title { max-width: calc(100vw - var(--vl-left) - var(--vl-right) - 310px); }
}
/* ---- Phones: the bar, then the tools, then the room title beside the key plan. */
@media (max-width: 720px) {
  #title { top: var(--sw-row2); max-width: calc(100vw - var(--vl-left) - var(--vl-right) - 122px); padding: 10px 13px 11px; }
  #room { font-size: 19px; }
  #dims { margin-top: 7px; font-size: 10.5px; }
  #keyplan { top: var(--sw-row2); right: var(--vl-right); bottom: auto; left: auto; padding: 5px; }
  /* The door prompt stays at mid-screen, as the demo has it, but never climbs onto the key plan on a short phone. */
  #prompt { top: max(calc(50% - 20px), calc(var(--sw-row2) + 175px)); bottom: auto; }
  #start .block { gap: 16px; }
  #start p { font-size: 15px; }
}
@media (max-height: 560px) {
  #start .block { gap: 11px; margin-bottom: -8px; }
  #start h1 { font-size: clamp(28px, 4.4vw, 40px); }
  #start p { font-size: 14px; line-height: 1.4; }
  #enter { min-height: 46px; }
  #note { font-size: 11.5px !important; }
}

@media (prefers-reduced-motion: reduce) {
  #start, #start .block > *, #title, #tools, #rooms, #keyplan, #fps, #prompt { animation: none; }
  .tool, #rooms button, #prompt, #enter { transition: none; }
}

/* ---- Touch fix (this one changes behaviour, not look; added 2026-11-12 at the owner's request).
   The demo's own rule `.hud { pointer-events: none }` also covers the joystick area and the door
   button themselves, so on a phone a drag at the lower left turned the view instead of walking,
   and the door button could not be tapped. These lines let both receive touches. Where they share
   a corner, the door button and the key plan sit above the joystick area, and the Rooms menu stays
   on top of all three. Checked by tools/demo-brand/touch-check.mjs. */
#joy, #prompt { pointer-events: auto; }
#prompt, #keyplan { z-index: 3; }
#rooms { z-index: 4; }