/* Website demo (isolate.mjs): compact layout for narrow frames (DAM-23 COO review v3).
   In the pinned app's own small-screen layout the floor buttons sit centred on the right edge
   and the light list spans the full width at the bottom, so the floors cover the list's
   switches; the light popover follows its 3D anchor and lands on top of both.

   Here, under the app's own 700 px breakpoint:
   - floor buttons: top right, under the status chips, instead of centred vertically;
   - light list: full width at the bottom, never taller than the space under the floors;
   - light / blind popover: docked top left, beside the floors, instead of following its anchor.
   So floors, list and popover never overlap and can be used together.
   This file is linked before the app's stylesheet: selectors start with `html body` to win,
   and the popover position needs !important against the inline left/top the app sets per frame. */

/* Where the chip row ends, measured by app/demo-chrome.js. Everything that is docked under the
   row is placed from this, rather than from a row height taken on trust: the row wraps, and the
   scene and look chooser (DAM-160) made it three lines high on a phone, which pushed the sun
   slider under the floor buttons and out of reach (DAM-163 F2). The fallback is the two-line row
   this layout was written for, so a browser that never runs the script keeps the old geometry. */
:root { --demo-chrome-top: calc(var(--demo-chips-bottom, 86px) + 8px); }

/* How wide the floors column at the top right actually is, measured by the same script. The
   docked popover and the chooser's menu keep off it. The fallback is the widest column either
   language asks for — English "Ground" with its count badge — because reserving too little is
   what hid the first letter of every English floor label behind the popover (DAM-164 N1), while
   reserving 28 px too much in German only makes the popover that much narrower. */
:root { --demo-floors-clear: calc(var(--demo-floors-width, 110px) + 16px); }

@media (max-width: 700px) {
  html body .floors {
    top: var(--demo-chrome-top);
    right: 8px;
    transform: none;
  }
  html body .panel {
    /* starts below the floors and the popover: the row, 190 px of popover, an 8 px gap
       (the mansion's floors column is 171 px: three floors, a separator and "Alle") */
    max-height: calc(100vh - 74px - var(--demo-chrome-top) - 190px - 8px);
  }
  html body .popover {
    left: 8px !important;
    top: var(--demo-chrome-top) !important;
    right: var(--demo-floors-clear); /* 8 px edge + the measured floors column + 8 px gap */
    width: auto;
    max-height: 190px;
    overflow-y: auto;
    transform: none;
  }
}

/* The chip row itself, at every width. It is allowed to wrap everywhere, not only on a phone:
   with the chooser in it, the longest German label made the row run past the right edge of a
   768 px screen (DAM-163 F3). Wrapping needs a right edge to wrap at, which makes the fixed row
   as wide as the window — so the row itself lets pointer events through and only its chips take
   them, or the gaps between them would swallow a drag of the model behind it. */
html body .chips {
  right: 12px;
  flex-wrap: wrap;
  pointer-events: none;
}
html body .chips > * { pointer-events: auto; }

/* Above the app's 700 px breakpoint the light list is a column at the top left, under a row
   assumed to be one line high; it starts below the row that is actually there. */
@media (min-width: 701px) {
  html body .panel { top: max(58px, var(--demo-chrome-top)); }
}

/* Light list: a row reached by keyboard must land BELOW its storey's heading. The pinned app's
   .group-title (30 px) is sticky at the top of the scrolling list, and keyboard focus scrolls a row
   only as far as the top of the scroll box, so walking up the list with Shift+Tab left every second
   row up to 30 of its 36 px under "OBERGESCHOSS 3/20" on a 320 px phone (DAM-173). Measured in
   Chromium (deliverables/dam-173/tools/focus-scroll-probe.mjs): 36 px still left 4 px covered,
   40 px is the least that clears it; 44 px leaves room for a face with a taller line. The 96 px
   list on a 320 px phone still shows a whole row below it. */
html body .panel-body { scroll-padding-top: 44px; }

/* Floor count badges (DAM-23 COO review v4). The pinned app places the badge absolutely over the
   top-right corner of the button, on top of the label ("DG", "Alle"). Here it sits beside the
   label in the button's own row. Its space is kept when empty and fits two digits, so the column
   does not change width as lights are switched. All widths. */
html body .floors button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
html body .floors button .badge {
  position: static;
  min-width: 20px;
  text-align: center;
}
html body .floors button .badge:empty {
  display: block;
  visibility: hidden;
}

/* Lights chip: SVG bulb (app/isolate.mjs) instead of the emoji, in the "light is on" colour. */
html body .pill .bulb {
  flex: none;
  color: var(--lit);
}