/* sunshine-walkable — 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, door prompt,
   key caps, joystick ring. The teleport arc, landing ring and wrist label drawn inside VR are
   recoloured by tools/demo-brand/sunshine-walkable.json.
   sunshine-walkthrough.css is this same sheet with the key plan and without the Enter VR button:
   change one, change the other.

   The rules every demo follows:
   - action buttons (Walk in, Enter VR, the door prompt): Vermilion with black text, off-white on hover
   - toggles (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"] { 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; }

/* ---- 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, #enterVR {
  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; }
#enterVR:hover { background: var(--vl-accent); }
#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); }
  #prompt:hover, #enter:hover, #enterVR: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; }
#fps, #prompt { animation: sw-fade 0.5s ease-out both; }

/* ---- Phones: the bar, then the Rooms button, then the room title: the same rows as the walkthrough, which has three tools to fit.
   (On wider screens one tool always fits beside the bar.) */
@media (max-width: 720px) {
  #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 { top: var(--sw-row2); max-width: calc(100vw - var(--vl-left) - var(--vl-right)); padding: 10px 13px 11px; }
  #room { font-size: 19px; }
  #dims { margin-top: 7px; font-size: 10.5px; }
  #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, #enterVR { min-height: 46px; }
  #note { font-size: 11.5px !important; }
}

@media (prefers-reduced-motion: reduce) {
  #start, #start .block > *, #title, #tools, #rooms, #fps, #prompt { animation: none; }
  .tool, #rooms button, #prompt, #enter, #enterVR { 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. The door button
   sits above the joystick area where they overlap, and the Rooms menu stays on top of both.
   Checked by tools/demo-brand/touch-check.mjs. */
#joy, #prompt { pointer-events: auto; }
#prompt { z-index: 3; }
#rooms { z-index: 4; }