/* Drawing colours are fixed sheet tokens; controls use the workspace theme. */
:root {
  --ev-paper: #ffffff;
  --ev-paper-band: #f4f6f8;
  --ev-ink: #333a42;
  --ev-ink-strong: #111827;
  --ev-muted: #4b5563;
  --ev-line: #9aa4b0;
  --ev-datum: #6b7480;
  --ev-dimension: #0f766e;
  --ev-selection: #E0A82E;
  --ev-plinth: #cfc9bd;
  --ev-parapet: #dfdcd4;
  --ev-basement: #e2e0da;
  --ev-frame: #cbd5e1;
  --ev-light-line: #94a3b8;
  --ev-caption: #475569;
  --ev-empty: #64748b;
  --ev-empty-frame: #e2e8f0;
  --ev-date: #9ca3af;
  --ev-door: #8a6a45;
  --ev-door-frame: #3a2c1a;
  --ev-vent: #dfe7e3;
  --ev-vent-frame: #3f6b5c;
  --ev-flue: #b6ada2;
  --ev-flue-frame: #5c5147;
  --ev-flue-hood: #8d8175;
  --ev-glass: #cfe2ee;
  --ev-glass-frame: #2f5c7a;
  --ev-metal: #374151;
  --ev-shade-shadow: rgba(68,60,48,.16);
  --ev-shade: #c9c2b4;
  --ev-shade-frame: #6b6357;
  --ev-ivory: #e8e1d3;
  --ev-stone: #b9b3a7;
  --ev-sand: #d8c7a6;
  --ev-grey: #9aa1a9;
  --ev-terracotta: #c97b56;
  --ev-white: #eef0f2;
  --ev-wood: #b58b61;
}
#elev-stage { min-height:0; align-items:center; }
#elev-c { width:auto; height:auto; max-height:100%; background:var(--ev-paper); box-shadow:none; border:1px solid var(--nd-border-strong); }
html[data-nd-bar] #elev-modal { top:var(--nd-bar-h); }
#elev-modal .evt, #elev-bar .seg button { min-height:44px; }
#elev-tools { flex-wrap:nowrap; overflow-x:auto; }
#elev-tools > * { flex-shrink:0; }
#ev-edit { flex-wrap:wrap; }
#ev-properties { display:flex; gap:12px; flex-wrap:wrap; align-items:center; padding:10px 14px;
  background:var(--nd-surface); border-bottom:1px solid var(--nd-border-strong); }
#ev-properties[hidden] { display:none; }
#ev-properties label { display:flex; gap:6px; align-items:center; font:600 12px var(--nd-font); }
#ev-properties input, #ev-properties select { min-height:44px; max-width:180px; border:1px solid var(--nd-border-strong);
  border-radius:var(--nd-radius-sm); padding:6px; background:var(--nd-surface-raised); color:var(--nd-text); }
#ev-properties input { width:80px; }
#ev-properties p { width:100%; margin:0; font:12px/1.5 var(--nd-font); color:var(--nd-text-muted); }
#ev-properties .ev-summary { color:var(--nd-text); font-weight:600; }
#ev-properties-close { margin-left:auto; }
#elev-modal :focus-visible { outline:2px solid var(--nd-focus); outline-offset:2px; }
#ev-edit { max-width:100%; padding:8px 14px; background:var(--nd-surface); }
#ev-edit input, #ev-style { min-height:44px; }
#ev-swatches .evsw { width:32px; height:32px; }
@media(max-width:760px) {
  #elev-tools .evt-lbl { display:inline; }
  #elev-stage { align-items:flex-start; padding:12px 8px; }
  #ev-edit, #ev-properties { position:absolute; bottom:0; left:0; right:0; z-index:1;
    max-height:45vh; overflow:auto; padding-bottom:calc(12px + var(--safe-b)); border-top:1px solid var(--nd-border-strong); }
  #ev-edit { gap:8px; }
  #ev-properties label { flex:1 1 42%; justify-content:space-between; }
  #ev-properties input, #ev-properties select { max-width:140px; }
  #ev-properties .ev-summary { flex-basis:80%; }
}

/* The catalogue scrolls within the existing properties sheet on a phone. */
#ev-chajja-types { flex:1 0 100%; min-width:0; }
#ev-chajja-types summary { min-height:44px; padding:10px 8px; cursor:pointer; font:600 13px/1.6 var(--nd-font); color:var(--nd-text); }
.ev-chajja-list { max-height:230px; overflow:auto; padding:2px 4px; }
.ev-chajja-list [role="group"] { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:10px; }
.ev-chajja-list strong { flex-basis:100%; padding:6px 4px; font:600 12px var(--nd-font); color:var(--nd-text); }
#ev-properties .ev-chajja-type { display:flex; align-items:center; gap:8px; min-height:44px; white-space:normal; text-align:left; flex:1 1 240px; max-width:100%; }
.ev-chajja-type img { width:56px; height:42px; object-fit:contain; }
.ev-chajja-type img[hidden], #ev-chajja-note[hidden] { display:none; }
.ev-chajja-type[aria-pressed="true"] { outline:2px solid var(--nd-focus); outline-offset:-2px; }
#ev-properties #ev-chajja-hint, #ev-properties #ev-chajja-note { color:var(--nd-text); }
@media(min-width:761px) { #ev-properties:has(#ev-chajja-types) { max-height:50vh; overflow:auto; } }

/* Mouldings use the same thumbnail/text fallback as chajjas. */
#ev-style-row { display:flex; flex-wrap:wrap; gap:8px 16px; padding:8px 14px; background:var(--nd-surface); border-bottom:1px solid var(--nd-border); }
#ev-style-row label { display:flex; align-items:center; gap:8px; font:600 13px var(--nd-font); color:var(--nd-text); }
#ev-style-row select { min-height:44px; max-width:100%; background:var(--nd-surface); color:var(--nd-text); border:1px solid var(--nd-border-strong); border-radius:6px; padding:0 8px; }
@media(max-width:760px) { #ev-style-row { gap:6px 12px; padding:6px 10px; } #ev-style-row label:first-child { flex-basis:100%; } }
.ev-moulding-picker { flex:1 0 100%; min-width:0; }
.ev-moulding-picker summary { min-height:44px; padding:10px 8px; cursor:pointer; font:600 13px/1.6 var(--nd-font); color:var(--nd-text); }
.ev-moulding-list { max-height:230px; overflow:auto; display:flex; flex-wrap:wrap; gap:4px; padding:4px; }
.ev-moulding-list [role="group"] { display:flex; flex-wrap:wrap; gap:4px; flex:1 1 240px; min-width:0; }
.ev-moulding-list strong { flex-basis:100%; font:600 12px var(--nd-font); color:var(--nd-text); }
#ev-properties .ev-moulding-type { min-height:44px; display:flex; align-items:center; gap:8px; white-space:normal; text-align:left; flex:1 1 240px; max-width:100%; }
.ev-moulding-type img { width:56px; height:42px; object-fit:contain; }
.ev-moulding-type img[hidden], #ev-surround-wrap[hidden] { display:none; }
.ev-moulding-type[aria-pressed="true"] { outline:2px solid var(--nd-focus); outline-offset:-2px; }
#ev-surround-wrap { display:inline-flex; align-items:center; gap:6px; max-width:100%; }
#ev-surround { min-height:44px; max-width:230px; }
@media(min-width:761px) { #ev-properties:has(.ev-moulding-picker) { max-height:45vh; overflow:auto; } }