/* The styles for index.html, the cupboard options page (room_3d.html is its
   old address, which only moves on to it) */
:root { color-scheme: light; }
html, body { margin: 0; height: 100%; background: #eef0f2; font-family: Helvetica, Arial, sans-serif; }
#view { position: fixed; inset: 0; }
/* The settings are in drawers that slide in from the left, one at a time:
   Other options (opened by ☰), and Lounge, Bedroom, Garage, and Hallway
   and stairs options (by the options button, for the room in view). They open below the top bar, which stays in front, so its
   buttons can still be used (--below-bar is set by the page, as the bar can
   take two rows). The model always fills the screen. */
.drawer {
  position: fixed; top: var(--below-bar, 0); left: 0; bottom: 0; width: 340px; max-width: 88vw; overflow: auto; z-index: 3;
  background: rgba(255, 255, 255, 0.97); padding: 12px 14px 24px; box-sizing: border-box;
  box-shadow: 2px 0 14px rgba(0, 0, 0, 0.2); font-size: 13px; line-height: 1.45;
  transform: translateX(-105%); transition: transform 0.25s ease;
}
body.menu-open #panel, body.lounge-open #loungePanel, body.bed-open #bedPanel, body.garage-open #garagePanel, body.hall-open #hallPanel { transform: none; }
.drawer h1 { font-size: 15px; margin: 0; }
.drawer .head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.drawer .close { font-size: 18px; line-height: 1; padding: 4px 10px; }
/* The top bar, clear of the menus at the top right */
#bar {
  position: fixed; top: 12px; left: 12px; right: 68px; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  pointer-events: none;
}
/* The views list and look (where you are and what you look at): menu
   buttons at the top right, each opening its group below it; the configurations:
   a menu button at the bottom right, opening above */
#corner { position: fixed; right: 12px; bottom: 12px; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.pop { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.pop > .group { display: none; background: rgba(255, 255, 255, 0.92); }
.pop.open > .group { display: flex; }
#menu, .popToggle {
  pointer-events: auto; width: 44px; height: 44px; border-radius: 10px; border: none; font-size: 22px;
  background: rgba(255, 255, 255, 0.95); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); cursor: pointer;
}
.popToggle { color: var(--tint); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 0 0 2px var(--tint); }
#viewMenu { --tint: #1f4e79; }
#viewsMenu { --tint: #6a3d9a; }
/* In front of the top bar: an open menu here can reach it on a phone */
#topRight { position: fixed; top: 12px; right: 12px; z-index: 5; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
#configurationMenu { --tint: #2e7d4f; }
/* The floating text buttons: Share, Reload, Dimensions, and the menus' Save and Delete */
.chip {
  pointer-events: auto; height: 44px; padding: 0 14px; border-radius: 10px; border: none; font: inherit; font-size: 14px;
  background: rgba(255, 255, 255, 0.95); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); cursor: pointer; flex: none;
}
.chip[hidden] { display: none; }
.chip:disabled { opacity: 0.5; cursor: default; }
/* Reload pressed: the room fades till the fresh page draws it (floor_kit.js's reloadButton()) */
body.reloading canvas { opacity: 0.2; transition: opacity 0.25s; }
/* The bar's groups, each with a small heading in its own colour: View
   (where you are and what you look at), Configuration (every setting) and Option */
.group { pointer-events: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 6px 4px 10px;
  border-radius: 12px; background: rgba(255, 255, 255, 0.55); box-shadow: inset 0 0 0 2px var(--tint); }
.group .tag { font-size: 11px; font-weight: bold; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tint); }
#viewGroup { --tint: #1f4e79; }
#viewGroup { max-width: min(900px, calc(100vw - 24px)); box-sizing: border-box; justify-content: flex-end; }
#viewsGroup { flex-wrap: nowrap; }
/* The dropdowns at the top right and bottom right: the views, where you
   are, your eye height, the looks and the configurations */
.pick {
  pointer-events: auto; height: 44px; min-width: 0; max-width: 100%; border: none; border-radius: 10px; padding: 0 10px;
  background: rgba(255, 255, 255, 0.95); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); font: inherit; font-size: 14px; cursor: pointer;
}
#where, #lookAt, #eye, #lookPick, #viewPick, #configurationPick { flex: none; }
/* The option on show, in Lounge options: the drawer's width, framed as its
   other dropdowns are */
.drawer select.pick { display: block; width: 100%; height: 36px; box-shadow: none; border: 1px solid #999; border-radius: 6px; }
/* The rooms' split buttons in the top bar: the room's name, going there,
   joined to a dropdown of how to see it (Bird's eye or the plan) */
#roomViews { display: contents; }
.split { display: flex; flex: none; pointer-events: auto; border-radius: 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); }
.split .chip { box-shadow: none; border-radius: 10px 0 0 10px; }
/* The dropdown shows only ▾, its list the choices (the select's own text
   hidden; the options keep theirs) */
.split .kind { position: relative; display: flex; }
.split .kind select { width: 36px; padding: 0; color: transparent; appearance: none; -webkit-appearance: none;
  box-shadow: none; border-radius: 0 10px 10px 0; border-left: 1px solid #ccc; }
.split .kind select option { color: #000; }
.split .kind::after { content: '▾'; position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; font-size: 16px; }
/* An open drawer leaves the room live beside it (kit/floor_kit.js frames
   the views clear of it), and the options button moves clear of it too, to
   close it again */
body:is(.menu-open, .lounge-open, .bed-open, .garage-open, .hall-open) #bottomLeft { left: calc(min(340px, 88vw) + 12px); }
/* On phones held upright (up to 600 wide, kit/floor_kit.js's SHEET_WIDTH)
   the drawers are a sheet from the bottom, --sheet high, the room above it;
   its handle drags it taller or shorter, and the options button sits on its
   top edge */
.sheetHandle { display: none; }
@media (max-width: 600px) {
  .drawer { top: auto; bottom: 0; width: 100%; max-width: none; height: var(--sheet, 45vh); padding-top: 0;
    border-radius: 14px 14px 0 0; box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.2); transform: translateY(105%); }
  .sheetHandle { display: block; position: sticky; top: 0; z-index: 1; height: 22px; margin: 0 -14px 4px; background: inherit;
    cursor: ns-resize; touch-action: none; }
  .sheetHandle::before { content: ''; display: block; width: 44px; height: 5px; border-radius: 3px; background: #bbb; margin: 8px auto 0; }
  body:is(.menu-open, .lounge-open, .bed-open, .garage-open, .hall-open) #bottomLeft { left: 12px; bottom: calc(var(--sheet, 45vh) + 8px); }
  /* The top bar's buttons smaller (chosen), so it leaves the room more of
     the screen above the sheet: padded just enough that they fit in three
     rows on a 390-wide phone (measured, 19 Oct 2026) */
  #bar { gap: 6px; }
  #bar .chip, #bar .pick, #menu { height: 36px; font-size: 13px; }
  #bar .chip { padding: 0 7px; }
  #menu { width: 36px; font-size: 18px; }
  .split .kind select { width: 28px; }
  /* While a sheet's open, only ☰ stays in the top bar, so the room gets the
     space above the sheet; closing the sheet brings the buttons back */
  body:is(.menu-open, .lounge-open, .bed-open, .garage-open, .hall-open) #bar > :not(#menu) { display: none; }
}
.drawer label { display: block; margin: 8px 0 2px; }
/* The drawer's sections, each opening and closing (remembered here) */
.drawer details.sec { border-top: 1px solid #ddd; margin-top: 10px; padding-top: 6px; }
.drawer details.sec > summary { cursor: pointer; font-weight: bold; font-size: 14px; color: #1f4e79; padding: 2px 0; }
.drawer input[type=range] { width: 100%; }
.drawer button { font: inherit; padding: 5px 8px; border-radius: 6px; border: 1px solid #999; background: #fff; cursor: pointer; }
.drawer button:disabled { opacity: 0.4; cursor: default; }
.drawer button.on { background: #1f4e79; color: #fff; border-color: #1f4e79; }
.drawer .row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.depth { margin: 0 0 8px; }
.drawer .depth label { display: inline; margin: 0 0 0 10px; font-weight: normal; }
.drawer #islandBlock label { display: block; margin: 2px 0 0 10px; }   /* long choices, one a line */
/* A switch: a checkbox drawn as a sliding toggle */
.drawer label.switch { display: flex; align-items: center; gap: 8px; font-weight: bold; cursor: pointer; }
.drawer label.switch:has(input:disabled) { opacity: 0.45; cursor: default; }   /* the Bench, while the bookshelf's in its place */
.switch input { appearance: none; margin: 0; width: 36px; height: 20px; border-radius: 10px; background: #bbb; position: relative; cursor: pointer; transition: background 0.15s; }
.switch input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left 0.15s; }
.switch input:checked { background: #1f4e79; }
.switch input:checked::after { left: 18px; }

.colours { margin: 10px 0 4px; }
.colours .colhead { font-weight: bold; }
.colours .colrow { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.colours [hidden] { display: none; }
.colours select { flex: 1; min-width: 0; font: inherit; padding: 4px 5px; border: 1px solid #999; border-radius: 5px; background: #fff; }
.colours .swatch { width: 20px; height: 20px; border-radius: 4px; border: 1px solid #999; flex: none; background: transparent; }
#paletteList .colrow { margin: 3px 0; }
#paletteList .what { flex: 1; min-width: 0; }
#paletteList code { color: #666; font-size: 11px; }
/* The name and size of a thing to store, by the pointer */
#tip { position: fixed; z-index: 4; display: none; pointer-events: none; white-space: nowrap; font-size: 12px;
  padding: 4px 7px; border-radius: 5px; background: rgba(31, 78, 121, 0.95); color: #fff; }
#storedBlock { margin: 10px 0 4px; }
#storedBlock .colhead { font-weight: bold; }
#storedInfo { margin-top: 4px; }
.drawer input.shelves { width: 100%; box-sizing: border-box; font: inherit; padding: 4px 5px; border: 1px solid #999; border-radius: 5px; }
#storedLifts { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; margin-top: 6px; }
.drawer #storedLifts label { display: block; margin: 0; }
#storedLifts input { width: 70px; font: inherit; padding: 2px 4px; }
#dresserPick, #larderPick, #sofaPick, #storedBlock select { width: 100%; margin-top: 4px; font: inherit; padding: 4px 5px; border: 1px solid #999; border-radius: 5px; background: #fff; }
#summary { padding: 7px 9px; background: #f4efe6; border-radius: 6px; margin-top: 4px; }
#summary .src { color: #777; font-size: 11px; margin-top: 4px; }
.drawer .hint { color: #666; font-size: 12px; margin-top: 8px; }
/* At the bottom left: the room's options */
#bottomLeft { position: fixed; left: 12px; bottom: 12px; z-index: 2; pointer-events: none; }
/* The cutting lists, in the lounge's and the bedroom's options */
.cutList .cutHead { font-weight: bold; margin-bottom: 4px; }
.cutList .cutRule { color: #555; font-size: 12px; margin-bottom: 2px; }
.cutList .cutKind { font-weight: bold; color: #1f4e79; margin-top: 6px; }
.cutList .cutRow { display: grid; grid-template-columns: 3em 9em auto; }
.cutList .cutRow span:first-child { text-align: right; padding-right: 6px; }
.cutList .cutTotal { margin-top: 6px; border-top: 1px solid #ddd; padding-top: 4px; }