/* NO! OVER THERE — UI shell. The Pixi canvas fills the viewport; everything
   here is chrome layered on top of it.

   Every colour lives in a token; rules below never name a hex. Three palettes:
   Light is the default (the logo's paper-and-ink), "brand" is the logo navy as
   ground, "blue" is the original development look, preserved. The --cv-*
   tokens are the CANVAS palette — core/theme.js reads them with
   getComputedStyle and feeds Pixi, so chrome and canvas can never disagree.
   Furniture fills are deliberately NOT here: a piece's colour is document
   data, and a theme must never repaint a saved plan. */

:root {
  /* chrome */
  --bg:        #f6f8fb;
  --chrome:    #ffffff;
  --chrome-2:  #eef2f7;
  --line:      #dde3ea;
  --text:      #23303e;
  --text-dim:  #6b7a8d;
  --text-strong: #0c1d30;
  --accent:    #d96f10;
  --accent-dk: #f5821f;    /* the FILL of active/primary buttons */
  --accent-hover: #e2740d;
  --on-accent: #ffffff;
  --accent-wash: rgba(245, 130, 31, .14);
  --hover-bg:  #e4eaf2;
  --hover-border: #c9d3df;
  --surface-input:  #ffffff;
  --surface-sunken: #f0f3f8;
  --danger:      #d8322a;
  --danger-fill: #d8322a;
  --alert-bg:   #fbe3e1;
  --alert-text: #7c1d17;
  --ok:        #1d7a4c;
  --brand-orange: #f5821f;
  --brand-red:    #e12b20;
  --chip-border: rgba(12, 29, 48, .18);
  --scroll-thumb: #c2cdd9;
  --scroll-thumb-hover: #a9b8c9;
  --overlay:  rgba(12, 29, 48, .4);
  --shadow-1: 0 18px 60px rgba(12, 29, 48, .2);
  --shadow-2: 0 3px 12px rgba(12, 29, 48, .16);

  /* canvas */
  --cv-ground:     #f6f8fb;
  --cv-grid-minor: #e9edf3;
  --cv-grid-major: #d8dfe8;
  --cv-grid-heavy: #bfcad8;
  --cv-grid-axis:  #9db1c5;
  --cv-floor:      #ffffff;
  --cv-wall:       #5b708a;
  --cv-wall-interior: #6d8199;
  --cv-wall-edge:  #22384e;
  --cv-wall-open:  #9db1c5;
  --cv-door:       #33465c;
  --cv-jamb:       #7f95ad;
  --cv-accent:      #f5821f;
  --cv-accent-deep: #d96f10;
  --cv-ok:        #1d7a4c;
  --cv-ok-deep:   #d9f0e2;
  --cv-ok-wash:   #c9ead6;
  --cv-ok-bright: #0f5c36;
  --cv-danger:      #d8322a;
  --cv-danger-deep: #fbdedd;
  --cv-warm:      #b97407;
  --cv-warm-deep: #fdeed3;
  --cv-handle:      #ffffff;
  --cv-handle-core: #22384e;
  --cv-chip-bg:        #ffffff;
  --cv-chip-bg-strong: #f2f5f9;
  --cv-chip-border:    #c9d3df;
  --cv-chip-text:      #0c1d30;
  --cv-dim-text:  #6b7a8d;
  --cv-label:     #0c1d30;
  --cv-locked:    #93a3b4;

  /* layout */
  --h-top:     44px;
  --h-bot:     26px;
  --w-panel:   264px;
  --w-palette: 230px;
}

/* The logo navy as ground; the logo orange does the accent work. */
[data-theme="brand"] {
  --bg:        #0c1d30;
  --chrome:    #112741;
  --chrome-2:  #17324f;
  --line:      #24405e;
  --text:      #dfe9f4;
  --text-dim:  #93a7bc;
  --text-strong: #ffffff;
  --accent:    #f5821f;
  --accent-dk: #b45c0b;
  --accent-hover: #cf6f10;
  --on-accent: #ffffff;
  --accent-wash: rgba(245, 130, 31, .2);
  --hover-bg:  #1b3a5c;
  --hover-border: #2e4f74;
  --surface-input:  #0a1828;
  --surface-sunken: #0e2136;
  --danger:      #e5484d;
  --danger-fill: #6d1f22;
  --alert-bg:   #3a1416;
  --alert-text: #ffd9d6;
  --ok:        #38b26a;
  --chip-border: rgba(255, 255, 255, .22);
  --scroll-thumb: #2e4f74;
  --scroll-thumb-hover: #3d6390;
  --overlay:  rgba(2, 8, 16, .62);
  --shadow-1: 0 18px 60px rgba(0, 0, 0, .55);
  --shadow-2: 0 3px 12px rgba(0, 0, 0, .45);

  --cv-ground:     #0c1d30;
  --cv-grid-minor: #14263c;
  --cv-grid-major: #1c3350;
  --cv-grid-heavy: #2a4568;
  --cv-grid-axis:  #3d5a80;
  --cv-floor:      #132840;
  --cv-wall:       #7f95ad;
  --cv-wall-interior: #8ea4bb;
  --cv-wall-edge:  #cbd9e8;
  --cv-wall-open:  #9fb4cc;
  --cv-door:       #e0e8f2;
  --cv-jamb:       #a9bcd0;
  --cv-accent:      #f5821f;
  --cv-accent-deep: #9c5410;
  --cv-ok:        #38b26a;
  --cv-ok-deep:   #16301f;
  --cv-ok-wash:   #1c4a30;
  --cv-ok-bright: #8ff0b6;
  --cv-danger:      #e5484d;
  --cv-danger-deep: #3a1416;
  --cv-warm:      #e8a33d;
  --cv-warm-deep: #2a2116;
  --cv-handle:      #cbd9e8;
  --cv-handle-core: #0c1d30;
  --cv-chip-bg:        #16304c;
  --cv-chip-bg-strong: #12263e;
  --cv-chip-border:    #2c4a6e;
  --cv-chip-text:      #ffffff;
  --cv-dim-text:  #8fa5bd;
  --cv-label:     #ffffff;
  --cv-locked:    #6b7a8d;
}

/* The original development look, kept exactly as it was. */
[data-theme="blue"] {
  --bg:        #0e1117;
  --chrome:    #161b25;
  --chrome-2:  #1d2430;
  --line:      #2a3342;
  --text:      #dbe3ef;
  --text-dim:  #8b97a8;
  --text-strong: #ffffff;
  --accent:    #4a9eff;
  --accent-dk: #1e5fa8;
  --accent-hover: #2a70c0;
  --on-accent: #ffffff;
  --accent-wash: rgba(30, 95, 168, .3);
  --hover-bg:  #263041;
  --hover-border: #3a465a;
  --surface-input:  #0f141d;
  --surface-sunken: #131822;
  --danger:      #e5484d;
  --danger-fill: #6d1f22;
  --alert-bg:   #3a1416;
  --alert-text: #ffd9d6;
  --ok:        #38b26a;
  --chip-border: rgba(255, 255, 255, .22);
  --scroll-thumb: #39465a;
  --scroll-thumb-hover: #4c5c73;
  --overlay:  rgba(4, 7, 12, .62);
  --shadow-1: 0 18px 60px rgba(0, 0, 0, .55);
  --shadow-2: 0 3px 12px rgba(0, 0, 0, .45);

  --cv-ground:     #0e1117;
  --cv-grid-minor: #1a2230;
  --cv-grid-major: #27323f;
  --cv-grid-heavy: #3a4a5f;
  --cv-grid-axis:  #4a6a8f;
  --cv-floor:      #1b2735;
  --cv-wall:       #7f95ad;
  --cv-wall-interior: #8ea4bb;
  --cv-wall-edge:  #cbd9e8;
  --cv-wall-open:  #9fb4cc;
  --cv-door:       #e0e8f2;
  --cv-jamb:       #a9bcd0;
  --cv-accent:      #4a9eff;
  --cv-accent-deep: #1e5fa8;
  --cv-ok:        #38b26a;
  --cv-ok-deep:   #16301f;
  --cv-ok-wash:   #1c4a30;
  --cv-ok-bright: #8ff0b6;
  --cv-danger:      #e5484d;
  --cv-danger-deep: #3a1416;
  --cv-warm:      #e8a33d;
  --cv-warm-deep: #2a2116;
  --cv-handle:      #cbd9e8;
  --cv-handle-core: #0e1117;
  --cv-chip-bg:        #1d2430;
  --cv-chip-bg-strong: #161b25;
  --cv-chip-border:    #2a3342;
  --cv-chip-text:      #ffffff;
  --cv-dim-text:  #7d8ea3;
  --cv-label:     #ffffff;
  --cv-locked:    #6b7a8d;
}

* { box-sizing: border-box; }

/* Scrollbars, themed to match the chrome. Firefox gets the standard property;
   WebKit/Blink needs the vendor pseudo-elements for the same result. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 6px;
  /* Inset the thumb with a transparent border so it reads as a slim pill. */
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); background-clip: content-box; }
::-webkit-scrollbar-thumb:active { background: var(--accent); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font: 13px/1.4 "Segoe UI", system-ui, -apple-system, sans-serif;
  user-select: none;
  -webkit-user-select: none;
}

#stage { position: fixed; inset: 0; z-index: 0; }
#stage canvas { display: block; }

/* ── Toolbar ─────────────────────────────────────────────────────── */

#toolbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--h-top);
  z-index: 10;
  display: flex; align-items: center; gap: 6px;
  padding: 0 10px;
  background: var(--chrome);
  border-bottom: 1px solid var(--line);
  /* Last resort below the narrowest breakpoint: scroll rather than clip, so no
     control is ever unreachable. The bar keeps its height — a visible scrollbar
     here would cost more than it's worth. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
#toolbar::-webkit-scrollbar { display: none; }

/* Three sections. The ends grow to share spare space equally, which centres the
   middle whenever there is room — but `flex-basis: auto` with the default
   `min-width: auto` means they never shrink below their own content.

   Forcing the ends to an equal `flex: 1 1 0` centres the middle exactly, and is
   wrong: the right side (document name, four buttons, account) is far wider than
   the logo, so it was squeezed under its content width and — being
   justify-content:flex-end — overflowed LEFTWARDS, laying Save and Presets on
   top of the zoom control and eating its clicks. Cosmetic centring is not worth
   unclickable buttons. */
.bar-left, .bar-right {
  flex: 1 1 auto;
  display: flex; align-items: center; gap: 6px;
}
.bar-right { justify-content: flex-end; }
.bar-mid {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 6px;
}
/* Nothing inside a section shrinks. Groups squeezing themselves is how controls
   end up half-width and unreadable; the shed steps decide what goes instead. It
   also makes each child's offsetWidth its true natural width, which is what
   fitToolbar measures. */
.bar-left > *, .bar-mid > *, .bar-right > * { flex: 0 0 auto; }

/* One label per unit button: the long form normally, an abbreviation when the
   bar is tight. */
#toolbar .u-short { display: none; }

/* Logo lockup: mark | rule | NO! OVER THERE over the tagline. */
#toolbar .brand {
  display: flex; align-items: center; gap: 9px;
  user-select: none; white-space: nowrap;
  margin-right: 2px;
}
#toolbar .brand-mark {
  height: 30px; width: auto; display: block;
  flex: 0 0 auto;
}
#toolbar .brand-text { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
#toolbar .brand-name { font-size: 15px; font-weight: 800; letter-spacing: .3px; }
#toolbar .brand-tag { font-size: 10.5px; color: var(--text-dim); letter-spacing: .1px; }

/* "NO!" is near-black in the logo; on this chrome it has to be light instead. */
#toolbar .b-no    { color: var(--text-strong); }
#toolbar .b-over  { color: var(--brand-orange); }
#toolbar .b-there { color: var(--brand-red); }

/* The toolbar is the tightest thing on the page and there is a lot in it, so it
   sheds decoration before function. These steps are applied by ui/chrome.js in
   order, one at a time, while the bar actually overflows — NOT at guessed pixel
   widths. Hand-tuned breakpoints had to be re-tuned every time the bar gained a
   control, and were wrong at every boundary in between. Measuring is the only
   version of this that stays correct.

   Order: tagline (it is still in the <meta>) -> tool labels (every button keeps
   its tooltip and shortcut) -> grid caption, unit words and the redundant zoom
   buttons -> the account name (the avatar stays) -> the wordmark (the mark alone
   holds the corner). */

#toolbar.shed-1 .brand-tag { display: none; }

#toolbar.shed-2 #tools .tl { display: none; }
#toolbar.shed-2 #tools .tool { padding: 5px 9px; }
#toolbar.shed-2 .brand-name { font-size: 14px; }
#toolbar.shed-2 .brand-mark { height: 26px; }

#toolbar.shed-3 .lbl-grid { display: none; }
#toolbar.shed-3 .doc-name { max-width: 90px; }
#toolbar.shed-3 .group.doc { margin-right: 6px; }
#toolbar.shed-3 { gap: 4px; padding: 0 6px; }
#toolbar.shed-3 .sep { margin: 0 2px; }
#toolbar.shed-3 .u-long { display: none; }
#toolbar.shed-3 .u-short { display: inline; }
/* The wheel zooms and the % button fits to view, so these two are redundant. */
#toolbar.shed-3 #btn-zoom-in,
#toolbar.shed-3 #btn-zoom-out { display: none; }

#toolbar.shed-4 .acct-name { display: none; }

#toolbar.shed-5 .brand-text { display: none; }

/* Last two, only reached on genuinely small screens. The document name is
   repeated in the Presets dialog and the grid size is rarely changed mid-plan,
   so these are the least missed. */
#toolbar.shed-6 .group.doc { display: none; }

#toolbar.shed-7 .group[title="Grid square size"] { display: none; }
#toolbar .group { display: flex; align-items: center; gap: 4px; }
#toolbar .sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
#toolbar .spacer, #statusbar .spacer { flex: 1 1 auto; }
#toolbar .lbl { color: var(--text-dim); font-size: 12px; padding: 0 2px; }

button {
  font: inherit; color: var(--text);
  background: var(--chrome-2);
  border: 1px solid var(--line); border-radius: 5px;
  padding: 5px 9px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap;
}
button:hover { background: var(--hover-bg); border-color: var(--hover-border); }
button:active { transform: translateY(1px); }
button.is-on, .tool.is-on {
  background: var(--accent-dk); border-color: var(--accent); color: var(--on-accent);
}
button.primary { background: var(--accent-dk); border-color: var(--accent); color: var(--on-accent); }
button.primary:hover { background: var(--accent-hover); }
button.wide { min-width: 62px; justify-content: center; }
button:disabled { opacity: .38; cursor: default; }
button:disabled:hover { background: var(--chrome-2); border-color: var(--line); }
.ico { font-size: 13px; line-height: 1; }

input.num, input[type="text"], input[type="number"], select {
  font: inherit; color: var(--text);
  background: var(--surface-input); border: 1px solid var(--line); border-radius: 5px;
  padding: 5px 7px; width: 68px;
}
input.num { width: 58px; text-align: center; }
input[type="number"] { width: 46px; }
input:focus, select:focus { outline: none; border-color: var(--accent); }

/* ── Account control ─────────────────────────────────────────────── */

#account { min-height: 28px; }
#account a {
  display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none; color: var(--text);
  padding: 4px 8px 4px 5px; border-radius: 5px;
  border: 1px solid transparent;
  max-width: 190px;
}
#account a:hover { background: var(--chrome-2); border-color: var(--line); }
.acct-signin {
  color: var(--brand-orange) !important;
  font-weight: 600; padding: 5px 10px !important;
  border-color: var(--line) !important;
}
.acct-signin:hover { background: var(--brand-orange) !important; color: #fff !important; border-color: var(--brand-orange) !important; }
.acct-avatar {
  width: 22px; height: 22px; flex: 0 0 22px;
  border-radius: 50%; overflow: hidden;
  background: var(--accent-dk); color: var(--on-accent);
  font-size: 10px; font-weight: 700; letter-spacing: .3px;
  display: inline-flex; align-items: center; justify-content: center;
}
.acct-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acct-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.acct-warn {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--brand-red); color: #fff;
  font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: help;
}

.doc-name { color: var(--text-dim); max-width: 190px; overflow: hidden;
            text-overflow: ellipsis; white-space: nowrap; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
       display: inline-block; margin-left: -2px; }
/* Keep the document name off the buttons next to it. */
#toolbar .group.doc { margin-right: 10px; }

/* ── Properties panel ────────────────────────────────────────────── */

#panel {
  position: fixed; top: var(--h-top); right: 0; bottom: var(--h-bot);
  width: var(--w-panel); z-index: 9;
  background: var(--chrome); border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
  transition: transform .16s ease;
}
/* Slide the panel fully off-screen — a partial collapse just leaks clipped
   text at the edge. */
body.panel-collapsed #panel { transform: translateX(100%); }

.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-bottom: 1px solid var(--line);
  font-weight: 600; color: var(--text-dim);
}

/* The reopen handle. Sits against the panel's left edge when open and pins to
   the viewport edge when collapsed, so there is always something to click. */
#panel-toggle {
  position: fixed;
  top: calc(var(--h-top) + 10px);
  right: var(--w-panel);
  z-index: 11;
  width: 22px; height: 46px;
  padding: 0;
  justify-content: center;
  font-size: 15px; line-height: 1;
  border-radius: 6px 0 0 6px;
  border-right-color: transparent;
  transition: right .16s ease, background .12s ease;
}
body.panel-collapsed #panel-toggle {
  right: 0;
  /* Nothing else is on screen to anchor it, so make the handle obvious. */
  background: var(--accent-dk);
  border-color: var(--accent);
  color: var(--on-accent);
}
body.panel-collapsed #panel-toggle:hover { background: var(--accent-hover); }
#panel-body { padding: 10px; overflow-y: auto; flex: 1; }

.field { margin-bottom: 10px; }
.field > label { display: block; color: var(--text-dim); font-size: 11.5px;
                 margin-bottom: 4px; text-transform: uppercase; letter-spacing: .4px; }

/* Section header with an at-a-glance figures block pinned to its right. */
.sec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sec-head > label { margin-bottom: 0; flex: 0 0 auto; }
.sec-stats {
  flex: 1 1 auto;
  min-width: 0;          /* shrink rather than push the panel wider */
  text-align: right;
  color: var(--text-dim);
  font-size: 11.5px;
  line-height: 1.45;
  white-space: nowrap;
  margin-top: -1px;
}
.sec-stats b { color: var(--text); font-weight: 600; }
.field .row { display: flex; align-items: center; gap: 6px; }
.field input[type="range"] { width: 100%; accent-color: var(--accent); }
.field input.full { width: 100%; }
.empty { color: var(--text-dim); font-style: italic; padding: 8px 2px; }
.readout { color: var(--text-dim); font-size: 12px; }
.readout b { color: var(--text); font-weight: 600; }
hr.rule { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }

/* ── Furniture palette (left drawer) ─────────────────────────────── */

#palette {
  position: fixed; top: var(--h-top); left: 0; bottom: var(--h-bot);
  width: var(--w-palette); z-index: 9;
  background: var(--chrome); border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  transition: transform .16s ease;
}
body.palette-collapsed #palette { transform: translateX(-100%); }

#palette-toggle {
  position: fixed;
  top: calc(var(--h-top) + 10px);
  left: var(--w-palette);
  z-index: 11;
  width: 22px; height: 46px;
  padding: 0; justify-content: center;
  font-size: 15px; line-height: 1;
  border-radius: 0 6px 6px 0;
  border-left-color: transparent;
  transition: left .16s ease, background .12s ease;
}
body.palette-collapsed #palette-toggle {
  left: 0;
  background: var(--accent-dk); border-color: var(--accent); color: var(--on-accent);
}
body.palette-collapsed #palette-toggle:hover { background: var(--accent-hover); }

.pal-tabs { display: flex; border-bottom: 1px solid var(--line); }
.pal-tab {
  flex: 1 1 0; min-width: 0;
  justify-content: center;
  padding: 9px 4px;
  font-size: 12px;
  background: transparent; border: 0; border-radius: 0;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
}
.pal-tab:hover { background: var(--chrome-2); border-color: transparent; color: var(--text); }
.pal-tab.is-on {
  background: transparent;
  color: var(--text-strong);
  border-bottom-color: var(--accent);
}
.pal-tab:active { transform: none; }

.pal-search { padding: 8px; border-bottom: 1px solid var(--line); }
.pal-search input { width: 100%; }

#palette-list { flex: 1; overflow-y: auto; padding: 4px 0 8px; }

.pal-group {
  padding: 10px 10px 4px;
  font-size: 11px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--text-dim);
}

.pal-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px; cursor: grab;
}
.pal-item:hover { background: var(--chrome-2); }
.pal-item:active { cursor: grabbing; }
.pal-item.dragging { opacity: .45; }
.pal-chip {
  width: 20px; flex: 0 0 20px; height: 14px; border-radius: 2px;
  border: 1px solid var(--chip-border);
}
.pal-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-dims { color: var(--text-dim); font-size: 11px; white-space: nowrap; }

/* Drawing tools in the palette — actions, not draggable pieces. */
.pal-tool { cursor: pointer; }
.pal-tool .pal-dims { font-style: italic; opacity: .8; }
.pal-tool.is-on { background: var(--accent-wash); }
.pal-tool.is-on .pal-name { color: var(--text-strong); font-weight: 600; }
.pal-chip-tool {
  height: 14px !important;
  background: repeating-linear-gradient(90deg, var(--scroll-thumb-hover) 0 4px, transparent 4px 6px);
  border-color: transparent;
}
.pal-item .empty, #palette-list .empty { padding: 10px; text-align: center; }
#palette-list .empty button { margin-top: 6px; }

.pal-foot {
  padding: 7px 10px; border-top: 1px solid var(--line);
  color: var(--text-dim); font-size: 11px; text-align: center;
}

/* ── Layers pane (bottom of the left drawer) ─────────────────────── */

.layers-pane {
  flex: 0 0 auto;
  display: flex; flex-direction: column;
  max-height: 44%;
  border-top: 1px solid var(--line);
  background: var(--surface-sunken);
}
.layers-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px;
  font-size: 11px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--text-dim);
}
.layers-head button { padding: 2px 8px; font-size: 11px; }

#layer-list { overflow-y: auto; padding: 0 0 4px; min-height: 44px; }

.layer-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px; cursor: pointer;
  border-left: 2px solid transparent;
}
.layer-row:hover { background: var(--chrome-2); }
.layer-row.is-active {
  background: var(--accent-wash);
  border-left-color: var(--accent);
}
.layer-row.has-selection .layer-name { color: var(--text-strong); }

.layer-num {
  flex: 0 0 26px; text-align: right;
  font-family: ui-monospace, Consolas, monospace; font-size: 11.5px;
  color: var(--text-dim);
}
.layer-row.is-active .layer-num { color: var(--accent); }
.layer-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layer-name.is-default { color: var(--text-dim); font-style: italic; }
.layer-count {
  flex: 0 0 auto; min-width: 18px; text-align: center;
  color: var(--text-dim); font-size: 11px;
}
.layer-rename { flex: 1; width: auto; padding: 2px 5px; font-size: 12.5px; }

.layer-badge {
  flex: 1; text-align: center;
  color: var(--text); font-size: 12px;
  padding: 4px 6px;
  background: var(--surface-input); border: 1px solid var(--line); border-radius: 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Right-click furniture editor ────────────────────────────────── */

.ctxmenu {
  position: fixed; z-index: 45;
  width: 232px; max-height: 84vh; overflow-y: auto;
  padding: 8px 10px 10px;
  background: var(--chrome); border: 1px solid var(--hover-border); border-radius: 8px;
  box-shadow: var(--shadow-1);
}
.ctxmenu[hidden] { display: none; }
.ctx-title {
  font-weight: 650; padding: 2px 0 8px; margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.ctxmenu .field { margin-bottom: 8px; }
.ctxmenu button { padding: 4px 8px; font-size: 12px; }

/* ── Shared field bits ───────────────────────────────────────────── */

.row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.readout.note { margin-bottom: 6px; }
input.len-inline { width: 74px; text-align: center; }
.times { color: var(--text-dim); }

.swatch {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--text-dim); font-size: 12px; cursor: pointer;
}
.swatch input[type="color"] {
  width: 26px; height: 24px; padding: 1px;
  background: var(--surface-input); border: 1px solid var(--line); border-radius: 4px;
  cursor: pointer;
}

/* ── Status bar ──────────────────────────────────────────────────── */

#statusbar {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--h-bot);
  z-index: 10;
  display: flex; align-items: center; gap: 14px; padding: 0 10px;
  background: var(--chrome); border-top: 1px solid var(--line);
  color: var(--text-dim); font-size: 12px;
}
#statusbar .stat { white-space: nowrap; }
#statusbar .stat b { color: var(--text); font-weight: 600; }
#statusbar b.iso { color: var(--accent); }
#statusbar .hint { color: var(--text-dim); }
#statusbar .mono { font-family: ui-monospace, Consolas, monospace; min-width: 150px;
                   text-align: right; }

/* ── Theme picker (status bar) ───────────────────────────────────── */

.theme-picker { display: inline-flex; align-items: center; gap: 6px; }
.theme-dot {
  width: 14px; height: 14px; padding: 0;
  border-radius: 50%;
  border: 1px solid var(--chip-border);
  cursor: pointer;
}
/* Each dot previews ITS theme's ground + accent, regardless of the active one. */
.theme-dot-light { background: linear-gradient(135deg, #ffffff 55%, #f5821f 55%); }
.theme-dot-brand { background: linear-gradient(135deg, #0c1d30 55%, #f5821f 55%); }
.theme-dot-blue  { background: linear-gradient(135deg, #0e1117 55%, #4a9eff 55%); }
.theme-dot:hover { transform: scale(1.15); border-color: var(--text-dim); }
.theme-dot.is-on { outline: 2px solid var(--accent); outline-offset: 1px; }
.theme-dot:active { transform: scale(1.05); }

/* ── Modal ───────────────────────────────────────────────────────── */

.modal {
  position: fixed; inset: 0; z-index: 40;
  background: var(--overlay);
  display: flex; align-items: center; justify-content: center;
}
.modal[hidden] { display: none; }
.modal-card {
  width: 460px; max-height: 74vh; display: flex; flex-direction: column;
  background: var(--chrome); border: 1px solid var(--line); border-radius: 9px;
  box-shadow: var(--shadow-1);
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--line); font-weight: 600;
}
.modal-head button { padding: 2px 7px; }
.modal-row { display: flex; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.modal-row input { flex: 1; width: auto; }
.preset-list { overflow-y: auto; padding: 6px; flex: 1; min-height: 90px; }
.preset {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 6px; cursor: pointer;
}
.preset:hover { background: var(--chrome-2); }
.preset .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preset .meta { color: var(--text-dim); font-size: 11.5px; }
.preset .del { padding: 2px 7px; background: transparent; border-color: transparent;
               color: var(--text-dim); }
.preset .del:hover { color: #fff; background: var(--danger); border-color: var(--danger); }
/* Sits under the list while signed out, where "these are only in this browser"
   is the last thing read before closing the modal. */
.preset-signin {
  display: block; margin-top: 4px; padding: 9px 10px;
  border-top: 1px solid var(--line);
  color: var(--accent); font-size: 12px; text-decoration: none;
}
.preset-signin:hover { text-decoration: underline; }
.modal-msg { padding: 0 14px 12px; color: var(--text-dim); font-size: 12px; min-height: 18px; }
.modal-msg.err { color: var(--danger); }
.modal-msg.ok { color: var(--ok); }

/* Confirm dialog — stacks above the presets modal. */
.dialog-layer { z-index: 50; }
.confirm-card { width: 410px; }
.confirm-msg { padding: 14px; line-height: 1.55; color: var(--text); }
.confirm-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 0 14px 14px;
}
.confirm-actions button { padding: 7px 13px; }
button.danger { background: var(--danger-fill); border-color: var(--danger); color: #fff; }
button.danger:hover { background: var(--danger); border-color: var(--danger); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Floating bits ───────────────────────────────────────────────── */

.typechip {
  position: fixed; z-index: 20; pointer-events: none;
  background: var(--accent-dk); border: 1px solid var(--accent); color: var(--on-accent);
  border-radius: 5px; padding: 3px 8px;
  font-family: ui-monospace, Consolas, monospace; font-size: 13px;
  box-shadow: var(--shadow-2);
}
.typechip[hidden] { display: none; }

.dropzone {
  position: fixed; inset: var(--h-top) 0 var(--h-bot) 0; z-index: 30;
  background: var(--accent-wash);
  border: 3px dashed var(--accent); margin: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; color: var(--text-strong); pointer-events: none;
}
.dropzone[hidden] { display: none; }

/* Shown by account-boot.js when the canvas graph never ran. */
.boot-warning {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: calc(var(--h-top) + 14px); z-index: 60;
  max-width: 460px; padding: 11px 15px;
  background: var(--alert-bg); border: 1px solid var(--brand-red); border-radius: 7px;
  color: var(--alert-text); font-size: 13px; line-height: 1.5; text-align: center;
  box-shadow: var(--shadow-2);
}