/* prado-pro global styles.
 *
 * One file, two routes into the page: the web build links it from index.html
 * (the Content-Security-Policy allows stylesheets from this origin but no
 * inline <style>, security review B, M8), and the native build inlines this
 * same text through `include_str!` in app.rs, where there is no CSP. Colours
 * that follow the theme are NOT here: they are CSS custom properties set on
 * the root element's style attribute in app.rs (`--prado-*`). */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #f5f4f0;
    color: #1a1917;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}
#main {
    width: 100%;
    height: 100%;
    padding: 0 !important;
}
::-webkit-scrollbar { display: none; }
* { scrollbar-width: none; -ms-overflow-style: none; }

/* Top-nav dropdown hover states (components/top_nav.rs). */
.prado-dropdown-item:hover,
.prado-dropdown-signout:hover {
    background: var(--prado-accent-light);
}

/* DALI linking page (pages/dali_linking.rs). The blinking row's border pulse —
 * a marker's glow too — and a faint one under the pointer; a running animation
 * outranks the hover rule, so a blinking row keeps its pulse. The summary
 * banner slides in from where it slides out to, and a row's fold grows it from
 * nothing as it slides in. In the Commission dialog, a choice under the
 * pointer shows the accent's edge and a live Start darkens on hover and
 * keyboard focus; `!important` because both set those inline. A linked row's
 * marks keep their tooltip hidden until the pointer is on them. */
@keyframes dali-identify-pulse { 0%, 100% { box-shadow: none; } 50% { box-shadow: inset 0 0 0 1px var(--prado-accent); } }
@keyframes dali-banner-in { from { opacity: 0; transform: translateY(-0.5rem); } }
@keyframes dali-fold-in { from { grid-template-rows: 0fr; opacity: 0; transform: translateY(-0.5rem); } }
.dali-gear-row:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--prado-accent) 15%, transparent); }
.dali-commission-choice:hover { border-color: var(--prado-accent) !important; }
.dali-commission-start:not(:disabled):hover, .dali-commission-start:not(:disabled):focus-visible { filter: brightness(0.92) !important; }
.dali-mark .dali-tip { visibility: hidden; }
.dali-mark:hover .dali-tip { visibility: visible; }

/* Link by room (pages/dali_lightbox.rs and the plan and tiles it shows). A
 * forms button in a touch target keeps the page's size and takes a tap
 * anywhere on the target, whose height is theme::colors::TOUCH_MIN; a room's
 * toast fades in and out by itself. The read-only building plan's rooms look
 * selected under the pointer and pressed while held, and a light's hover ring
 * shows under the pointer — the colours and the zoom-dependent stroke width
 * are the plan box's custom properties (`--plan-*`, components/
 * building_plan.rs). A card (components/room_fixture_picker.rs) glows in its
 * colour under the pointer and fills while pressed (`--tile-*`, set on the
 * card). */
/* Find (pages/dali_find.rs and the functions pane's empty slots). An empty
 * slot is Find's way in: it takes the accent under the pointer and dips while
 * pressed, so it reads as a button and still as a drop target. The panel's big
 * answers lift under the pointer; its quiet ones get a faint fill. */
.dali-slot-find:hover, .dali-slot-find:focus-visible { border-color: var(--prado-accent) !important; border-style: solid !important; background: var(--prado-accent-light) !important; outline: none; }
.dali-slot-find:active { transform: scale(0.99); }
.dali-find-answer:not(:disabled):hover { border-color: var(--prado-accent) !important; box-shadow: 0 2px 10px color-mix(in srgb, var(--prado-accent) 20%, transparent); }
.dali-find-answer-filled:not(:disabled):hover { background: var(--prado-accent-hover) !important; }
.dali-find-answer:not(:disabled):active { transform: scale(0.98); }
.dali-find-text:not(:disabled):hover { background: var(--prado-accent-light) !important; }
.dali-touch > button { position: relative; }
.dali-touch > button::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, 44px); transform: translateY(-50%); }
.building-plan-room { cursor: pointer; }
.building-plan-room:hover .building-plan-room-shape { fill: var(--plan-room-fill-selected); stroke: var(--plan-room-stroke-selected); stroke-width: var(--plan-room-stroke-width-selected); }
.building-plan-room:active .building-plan-room-shape { fill: var(--plan-room-fill-pressed); stroke: var(--plan-room-stroke-selected); stroke-width: var(--plan-room-stroke-width-selected); }
.building-plan-function { cursor: pointer; }
.building-plan-hover { opacity: 0; transition: opacity 0.2s ease; }
.building-plan-function:hover .building-plan-hover { opacity: 1; transition: opacity 0.2s ease; }
.dali-card { touch-action: manipulation; }
.dali-card:not(:disabled):hover { box-shadow: inset 0 0 0 1px var(--tile-colour); }
.dali-card:not(:disabled):active { background: var(--tile-pressed) !important; }
.dali-card:focus-visible { outline: 2px solid var(--prado-accent); outline-offset: 2px; }
/* Start linking session: each part of the split button lightens under the pointer; a tile's star too. */
.dali-link-split button:not(:disabled):hover { background: var(--prado-accent-hover) !important; }
.dali-link-star:hover, .dali-link-star:focus-visible { background: var(--prado-accent-light) !important; color: var(--prado-accent) !important; outline: none; }
/* The address pane (pages/dali_linking.rs): too narrow for its header row —
 * a tablet held upright — it drops the ADDRESSES title and its separator;
 * the line tabs say as much, and Commission stays whole. */
.dali-address-pane { container-type: inline-size; }
@container (max-width: 480px) { .dali-addresses-title { display: none !important; } }
/* Narrower still, the address count goes whole rather than read "8 a…". */
@container (max-width: 400px) { .dali-address-count { display: none !important; } }
/* An address row (pages/dali_linking.rs, DaliGearRow), in the pane or in a
 * function's card, keeps one line at any width: its texts shorten with "…",
 * and on a narrow row Identify drops to its icon — its name stays its
 * tooltip — so the link badge and the × never leave the row. The button's
 * label is its bare text: a zero font size hides it, the icon keeps its own. */
.dali-gear-row { container-type: inline-size; }
@container (max-width: 440px) { .dali-identify button { font-size: 0 !important; gap: 0 !important; padding: 8px 10px !important; } }
/* The functions pane: narrow — a tablet held upright — its cards take back
 * their indent under the room's name. */
.dali-functions-pane { container-type: inline-size; }
@container (max-width: 460px) { .dali-room-body { padding-left: 1rem !important; padding-right: 1rem !important; } }
/* The lightbox (pages/dali_lightbox.rs): the stage — the plan or the cards —
 * and the work panel — the question and its answers, as Find's panel asks
 * — side by side, borderless: the panel a soft sheet inset beside the plan
 * (`--prado-bg-panel` and `--prado-radius` are set on the window), two
 * fifths of the window and never under 360 px. Under 960 px the panel sits
 * under the stage in a row of fixed height, scrolling inside when it must,
 * so the plan keeps its size whatever a step asks. */
.dali-lightbox-body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(360px, 2fr); gap: 1rem; padding: 0 1rem 1rem; flex: 1; min-height: 0; }
.dali-lightbox-stage { display: flex; flex-direction: column; }
/* A step whose lights are on their way (pages/dali_lightbox.rs, RoomBody):
 * its lights take no tap and look it, dimmed until they are on. Over the
 * cards' and markers' own inline opacity. */
.dali-stage-wait .building-plan-function, .dali-stage-wait .dali-card { opacity: 0.4 !important; pointer-events: none; }
.building-plan-function, .dali-card { transition: opacity 0.2s ease; }
/* Cards that scroll in the lightbox's stage (pages/dali_lightbox.rs, Scroll),
 * under what stays put: the floor tabs, the view toggle, the room's name.
 * Its top and bottom fade where cards go on, a sign there is more — on a
 * tablet too, where a scrollbar shows only while it moves. The fades lie over
 * its padding, so at either end nothing is hidden; the side padding leaves
 * room for a card's focus ring, and the margins keep the cards in place. */
.dali-scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: -0.75rem -0.375rem;
  padding: 0.75rem 0.375rem 2.5rem;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 0.75rem, #000 calc(100% - 2.5rem), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 0.75rem, #000 calc(100% - 2.5rem), transparent 100%);
}
.dali-lightbox-panel { display: flex; flex-direction: column; justify-content: center; justify-content: safe center; padding: 2rem; background: var(--prado-bg-panel); border-radius: var(--prado-radius); overflow-y: auto; }
@media (max-width: 960px) { .dali-lightbox-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) min(26rem, 45vh); } .dali-lightbox-panel { padding: 1.25rem 1rem; } }
/* Keyboard and touch in the lightbox: no double-tap delay on anything that
 * takes a tap; a focus ring on the plan's rooms and lights and on every
 * button, for the keyboard only. */
.dali-lightbox button, .dali-card, .building-plan-room, .building-plan-function { touch-action: manipulation; }
.dali-lightbox:focus { outline: none; }
.building-plan-room:focus, .building-plan-function:focus { outline: none; }
.building-plan-room:focus-visible { outline: none; }
.building-plan-room:focus-visible .building-plan-room-shape { stroke: var(--prado-accent); stroke-width: var(--plan-room-stroke-width-selected); }
.building-plan-function:focus-visible { outline: none; }
.building-plan-function:focus-visible .building-plan-hover { opacity: 1; }
.dali-lightbox button:focus-visible { outline: 2px solid var(--prado-accent); outline-offset: 2px; }
/* Linking walkthroughs (pages/dali_walkthrough.rs). The ⓘ beside the page
 * title and the link dialog's: under the pointer, on keyboard focus and while
 * its window is open it takes the accent on a soft pill (`--help-hover`,
 * `--help-fill`, set on it), and its name slides out to its right. In the
 * window, the scene and the miniature sit side by side once it is wide
 * enough, the miniature as tall as the scene; the header's ← and Play take a
 * soft fill under the pointer. While a walkthrough plays, the current step's
 * mark fills over one loop. The miniature is scaled by its frame's
 * `--demo-zoom`, and further in a narrow window. A finger comes to the
 * button or tile a step taps and presses it `--demo-press` in, the player's
 * moment for the tap to land: then a ripple spreads in the accent and the
 * button takes its pressed look (`demo-tap`, on the real components; the
 * finger's ink and outline are the player's `--demo-ink` and
 * `--demo-paper`). A blinking lamp is a calm second on and a second off.
 * With reduced motion: the finger stands still, the look shows at once; no
 * ripple, no blink, no fill. The player reads reduced motion here: a hidden
 * mark, 1 px wide, 2 px under it (`dali-motion-probe`). */
.dali-help-toggle::before { content: ""; position: absolute; inset: -6px; }
.dali-help-toggle:hover, .dali-help-toggle:focus-visible, .dali-help-toggle[aria-expanded="true"] { color: var(--help-hover) !important; background: var(--help-fill) !important; outline: none; }
.dali-help-label { display: inline-block; max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; margin-left: 0; transition: max-width 0.3s ease, opacity 0.2s ease, margin-left 0.3s ease; }
.dali-help-toggle:hover .dali-help-label, .dali-help-toggle:focus-visible .dali-help-label { max-width: 16rem; opacity: 1; margin-left: 6px; }
.dali-help-dialog:focus, .dali-walk:focus { outline: none; }
.dali-help-back:hover, .dali-help-back:focus-visible, .dali-help-play:hover, .dali-help-play:focus-visible { background: var(--prado-accent-light) !important; outline: none; }
.dali-motion-probe { position: absolute; width: 1px; height: 1px; visibility: hidden; pointer-events: none; }
.dali-walk { container: dali-walk / inline-size; }
.dali-walk-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.dali-walk-mini { position: relative; height: 17rem; }
@container dali-walk (min-width: 30rem) { .dali-walk-stage { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } .dali-walk-mini { height: auto; } }
.dali-walk-demo { zoom: var(--demo-zoom); }
@container dali-walk (max-width: 50rem) { .dali-walk-demo { zoom: calc(var(--demo-zoom) * 0.8); } }
@keyframes dali-walk-fill { from { width: 0; } to { width: 100%; } }
.dali-walk-fill { animation-name: dali-walk-fill; animation-timing-function: linear; animation-fill-mode: both; }
@keyframes dali-walk-blink { 0%, 40% { opacity: 1; } 50%, 90% { opacity: 0; } 100% { opacity: 1; } }
.dali-walk-blink { animation: dali-walk-blink 2s ease-in-out infinite; }
@keyframes dali-demo-ripple { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--prado-accent) 35%, transparent); } to { box-shadow: 0 0 0 24px transparent; } }
.demo-tap { position: relative; }
.demo-tap::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; animation: dali-demo-ripple 1s ease-out var(--demo-press) both; }
@keyframes dali-demo-finger { from { opacity: 0; transform: translate(-20%, 10%) translate(14px, 14px); } 60% { opacity: 1; transform: translate(-20%, 10%) scale(0.88); } to { opacity: 1; transform: translate(-20%, 10%); } }
.demo-tap::before { content: "touch_app"; position: absolute; left: 50%; top: 50%; z-index: 2; font-family: 'Material Symbols Rounded'; font-feature-settings: 'liga'; font-variation-settings: 'FILL' 1; font-size: 40px; line-height: 1; font-weight: normal; font-style: normal; letter-spacing: normal; text-transform: none; color: var(--demo-ink); text-shadow: 0 0 2px var(--demo-paper), 0 0 2px var(--demo-paper), 0 0 4px var(--demo-paper); pointer-events: none; animation: dali-demo-finger calc(var(--demo-press) / 0.6) ease-out both; }
@keyframes dali-demo-answer { to { border-color: var(--prado-accent); transform: scale(0.98); } }
@keyframes dali-demo-answer-filled { to { border-color: var(--prado-accent); background: var(--prado-accent-hover); transform: scale(0.98); } }
@keyframes dali-demo-text { to { background: var(--prado-accent-light); } }
@keyframes dali-demo-slot { to { border-color: var(--prado-accent); border-style: solid; background: var(--prado-accent-light); transform: scale(0.99); } }
@keyframes dali-demo-card { to { box-shadow: inset 0 0 0 1px var(--tile-colour); } }
.dali-find-answer.demo-tap { animation: dali-demo-answer 0.15s ease-out var(--demo-press) both; }
.dali-find-answer-filled.demo-tap { animation-name: dali-demo-answer-filled; }
.dali-find-text.demo-tap { animation: dali-demo-text 0.15s ease-out var(--demo-press) both; }
.dali-slot-find.demo-tap { animation: dali-demo-slot 0.15s ease-out var(--demo-press) both; }
.dali-card.demo-tap { animation: dali-demo-card 0.15s ease-out var(--demo-press) both; }
@media (prefers-reduced-motion: reduce) { .dali-motion-probe { width: 2px; } .demo-tap::before { animation: none; transform: translate(-20%, 10%); } .demo-tap::after { animation: none; } .dali-walk .demo-tap { animation-duration: 0s; animation-delay: 0s; } .dali-walk-blink { animation: none; } .dali-walk-fill { animation: none; width: 100%; } }