/* Lane A: the plan editor's chrome (W1 editor batch 2026-09-27): tool palette, status bar, context menu, undo history, the
   ? sheet, the overlay canvas, the grouped validation list, the room panel and the Settings drawer's tabs. Uses the shell's
   tokens (--panel, --text, --muted, --btn, --btn-active, --bar), so dark mode follows the page. */
#ed-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
/* the tools float bottom-centre above the status bar (clear of the site panel on the left, the validation panel on the right) */
#ed-palette { position: absolute; left: 50%; bottom: 88px; transform: translateX(-50%); display: flex; flex-direction: row; gap: 4px; padding: 6px; z-index: 3; max-width: calc(100vw - 32px); flex-wrap: wrap; justify-content: center; }
#ed-palette button { display: grid; grid-template-columns: 18px auto auto; align-items: center; gap: 6px; min-height: 36px; padding: 4px 8px; text-align: left; font-size: 12px; }
#ed-palette button kbd { font: 600 10px ui-monospace, monospace; color: var(--muted); background: transparent; border: 1px solid var(--panel-border); border-radius: 4px; padding: 0 4px; }
#ed-palette button.active { background: var(--btn-active); color: var(--btn-active-text); }
#ed-palette button.active kbd { color: inherit; border-color: currentColor; }
#ed-palette #ed-history-btn, #ed-palette #ed-help-btn { display: block; text-align: center; }
#ed-status { position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 4px 10px; border-radius: 8px;
  background: var(--panel); border: 1px solid var(--panel-border); color: var(--text); font: 12px system-ui, sans-serif; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 3; pointer-events: none; }
#ed-menu { position: absolute; z-index: 20; min-width: 190px; padding: 4px; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 8px; box-shadow: var(--shadow); }
#ed-menu button { display: block; width: 100%; text-align: left; padding: 6px 10px; min-height: 32px; background: transparent; border: 0; color: var(--text); font-size: 13px; border-radius: 6px; }
#ed-menu button:hover, #ed-menu button:focus-visible { background: var(--btn); }
#ed-menu hr { border: 0; border-top: 1px solid var(--panel-border); margin: 4px 0; }
#ed-history { position: absolute; left: 50%; bottom: 140px; transform: translateX(-50%); width: 280px; max-height: 60vh; overflow: auto; padding: 8px 10px; z-index: 4; }
#ed-history h2, #ed-help h2 { font-size: 14px; margin: 0 0 6px; }
#ed-history ol { margin: 0; padding-left: 20px; font-size: 12px; }
#ed-history li.now button { font-weight: 700; }
#ed-history li.redo button { opacity: 0.55; }
#ed-history button { background: transparent; border: 0; padding: 3px 4px; min-height: 26px; text-align: left; color: var(--text); width: 100%; }
#ed-history button:hover { background: var(--btn); }
#ed-help { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 32px)); max-height: 80vh; overflow: auto; padding: 14px 16px; z-index: 25; }
#ed-help table { border-collapse: collapse; font-size: 13px; width: 100%; }
#ed-help th { text-align: left; font-weight: 400; padding: 3px 12px 3px 0; white-space: nowrap; vertical-align: top; }
#ed-help td { padding: 3px 0; color: var(--muted); }
#ed-help kbd { font: 600 12px ui-monospace, monospace; }
#ed-help p { font-size: 12px; color: var(--muted); }
/* the inspector (the shell's wall / door panels and the room panel): top right, clear of the site panel */
#plan-wall, #plan-door, #ed-room { left: auto; right: 16px; top: 16px; bottom: auto; width: 320px; max-width: calc(100vw - 32px); max-height: calc(100vh - 260px); overflow: auto; padding: 10px 12px; }
#ed-room .lab-sel-size, #plan-wall .lab-sel-size { color: var(--muted); font-size: 12px; margin: 2px 0 6px; }
.ed-fields { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 6px 0 2px; font-size: 13px; }
.ed-fields input[type=number] { width: 84px; }
.ed-fields input[type=text] { width: 180px; }
#plan-layer canvas.tool-draw { cursor: crosshair; }
/* the grouped validation list */
#plan-val.val-grouped ul { list-style: none; padding-left: 0; max-height: 260px; }
#plan-val .val-group { margin: 8px 0 2px; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
#plan-val .val-group.fail { color: #dc2626; }
#plan-val .val-group.warn { color: #b45309; }
#plan-val .val-item { border-radius: 6px; padding: 2px 4px; margin: 1px 0; }
#plan-val .val-item.cur { background: var(--btn); outline: 2px solid var(--bar); }
#plan-val .val-text { display: block; width: 100%; text-align: left; background: transparent; border: 0; padding: 2px 0; min-height: 0; color: var(--text); font-size: 12px; }
#plan-val .val-text kbd { display: inline-block; min-width: 14px; margin-right: 4px; font: 600 10px ui-monospace, monospace; color: var(--muted); }
#plan-val .val-act { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; margin: 2px 0 2px 18px; }
#plan-val .val-act button { min-height: 26px; padding: 2px 8px; font-size: 12px; }
#plan-val .val-why, #plan-val .val-preview { color: var(--muted); font-size: 11px; }
#plan-val .val-preview { color: #15803d; }
#val-tools { display: flex; gap: 8px; align-items: center; margin: 4px 0; }
#val-tools small { color: var(--muted); }
/* the Settings drawer's tabs (editor/settings_tabs.js) */
#set-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; }
#set-tabs button { min-height: 32px; padding: 4px 10px; font-size: 13px; }
#set-tabs button.active { background: var(--btn-active); color: var(--btn-active-text); }
#set-search { width: 100%; box-sizing: border-box; margin: 0 0 8px; padding: 6px 8px; font-size: 14px; border-radius: 6px; border: 1px solid var(--panel-border); background: var(--btn); color: var(--text); }
.set-tab-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 4px 0 6px; }
.set-tab-head p { margin: 0; font-size: 12px; color: var(--muted); }
.set-tab-hidden { display: none !important; }
#settings-sim-slot .note { font-size: 12px; color: var(--muted); }
@media (max-width: 700px) {
  #ed-palette { bottom: 150px; }
  #ed-palette button { grid-template-columns: 18px; min-height: 44px; min-width: 44px; justify-items: center; }
  #ed-palette button span, #ed-palette button kbd { display: none; }
  #ed-status { bottom: 118px; font-size: 11px; }
  #plan-wall, #plan-door, #ed-room { left: 16px; right: 16px; width: auto; top: auto; bottom: 210px; max-height: 40vh; }
  #ed-history { bottom: 210px; }
}
/* Build / Buy (Plan_Editor_Build_Mode spec v0.4.0 gate, 2026-10-10): direction B's workshop dock and floating cards with
   direction C's right panel. Build mode turns the plan dark and neutral with an amber accent (the canvas: plan_view part 01
   PAL.work); Buy keeps the page's theme. */
body.ed-build { --panel: rgba(27, 31, 36, 0.95); --panel-border: rgba(255, 255, 255, 0.10); --text: #e9ecef; --muted: #99a3ad; --btn: #2c3239;
  --btn-active: #f5b041; --btn-active-text: #1b1d20; --bar: #f5b041; --accent: #f5b041; --accent-text: #1b1d20; --paper: #16191d; }
body.ed-build #plan-layer { background: #16191d; }
#plan-walls.ed-replaced { display: none; }
#ed-mode { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--btn); margin-right: 6px; }
#ed-mode button { min-height: 32px; padding: 2px 16px; border-radius: 999px; border: 0; background: transparent; color: var(--text); font-weight: 600; }
#ed-mode button.active { background: var(--btn-active); color: var(--btn-active-text); }
/* the dock: bottom centre, clear of the right panel */
#ed-dock { position: absolute; bottom: 16px; left: 322px; right: 372px; max-width: 1060px; margin: 0 auto; padding: 10px 12px 8px; z-index: 6; }
@media (max-width: 1100px) { #ed-dock { left: 16px; } }
body.ed-dock #hint-strip { display: none; }
#ed-dock-head { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 8px; }
#ed-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
#ed-tabs button { min-height: 30px; padding: 3px 14px; border-radius: 999px; border: 1px solid var(--panel-border); background: var(--btn); color: var(--text); font-size: 13px; }
#ed-tabs button.active { background: transparent; border-color: var(--bar); color: var(--bar); }
#ed-tabs button:disabled { opacity: 0.45; }
#ed-search { width: 220px; max-width: 40%; min-height: 32px; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--panel-border); background: var(--btn); color: var(--text); font-size: 13px; }
#ed-swatches { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; border-bottom: 1px solid var(--panel-border); scrollbar-width: thin; }
.ed-sw { position: relative; flex: 0 0 112px; height: 104px; padding: 0; border-radius: 8px; overflow: hidden; border: 2px solid transparent; background: #0e1013; cursor: pointer; }
.ed-sw img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ed-sw-name { position: absolute; left: 6px; right: 6px; bottom: 5px; color: #fff; font: 600 11px system-ui, sans-serif; text-align: left; text-shadow: 0 1px 2px #000, 0 0 6px rgba(0, 0, 0, 0.8); }
.ed-sw.active { border-color: var(--bar); }
.ed-sw.locked img { filter: saturate(0.5) brightness(0.7); }
.ed-sw-lock { position: absolute; top: 5px; left: 5px; padding: 1px 6px; border-radius: 4px; background: rgba(0, 0, 0, 0.7); color: #f5b041; font: 600 10px system-ui, sans-serif; }
#ed-dock-tools #ed-palette { position: static; transform: none; box-shadow: none; border: 0; background: transparent; padding: 6px 0 0; max-width: none; justify-content: flex-start; }
#ed-dock-tools #ed-palette button { grid-template-columns: auto; justify-items: center; gap: 1px; min-width: 64px; min-height: 52px; padding: 4px 8px; text-align: center; border: 0; background: transparent; color: var(--muted); }
#ed-dock-tools #ed-palette button span { font-size: 12px; color: var(--text); }
#ed-dock-tools #ed-palette button.active { background: rgba(245, 176, 65, 0.16); color: var(--bar); border-radius: 8px; }
#ed-dock-tools #ed-palette button.active span { color: var(--bar); }
#ed-dock-tools #ed-palette button kbd { border: 0; padding: 0; }
#ed-dock-tools #ed-palette #ed-history-btn, #ed-dock-tools #ed-palette #ed-help-btn { min-width: 44px; align-self: center; min-height: 36px; border: 1px solid var(--panel-border); }
/* the floating cards */
#ed-roomcard { position: absolute; z-index: 4; width: 280px; padding: 12px 14px; }
#ed-roomcard h3, #ed-fincard h3, #ed-side h3 { margin: 0 0 2px; font-size: 15px; }
.ed-rc-sub { margin: 0 0 8px; color: var(--muted); font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.ed-rc-acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; }
.ed-rc-acts button { min-height: 34px; padding: 2px 4px; font-size: 13px; }
.ed-rc-fins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ed-rc-fin { display: grid; gap: 2px; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 11px; text-align: left; cursor: pointer; }
.ed-rc-fin img { width: 100%; height: 52px; object-fit: cover; border-radius: 6px; }
.ed-rc-fin small { color: var(--bar); }
#ed-fincard { position: absolute; z-index: 4; width: 300px; padding: 10px 12px 12px; }
.ed-fc-img { display: block; width: 100%; height: 150px; object-fit: cover; border-radius: 8px; margin-bottom: 8px; background: #0e1013; }
.ed-fc-hint { margin: 0 0 8px; color: var(--muted); font-size: 12px; }
#ed-fincard dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0 0 8px; font-size: 12px; }
#ed-fincard dt { color: var(--muted); }
#ed-fincard dd { margin: 0; }
#ed-fincard dd.warn { color: var(--bar); }
.ed-fc-src { display: block; font-size: 11px; color: var(--muted); margin-bottom: 8px; }
/* the right panel (direction C) */
#ed-side { position: absolute; z-index: 3; top: 64px; right: 16px; bottom: 84px; width: 340px; max-width: calc(100vw - 32px); display: flex; flex-direction: column; padding: 0; overflow: hidden; }
#ed-side-head { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; justify-content: space-between; padding: 10px 12px 8px; }
#ed-fails { font: 600 12px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); }
#ed-fails.ok { color: #22c55e; }
#ed-fails.warn { color: var(--bar); }
#ed-fails.fail { color: #ef4444; }
#ed-view { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--btn); }
#ed-view button { min-height: 28px; padding: 2px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 12px; }
#ed-view button.active { background: var(--panel); color: var(--text); }
#ed-side-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--panel-border); }
#ed-side-tabs button { min-height: 38px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--muted); font-weight: 600; font-size: 13px; }
#ed-side-tabs button.active { color: var(--text); border-bottom-color: var(--bar); }
#ed-side-props, #ed-side-fin, #ed-side-comp { flex: 1; overflow: auto; padding: 10px 12px 12px; }
#ed-side .panel { position: static; transform: none; inset: auto; width: auto; max-width: none; max-height: none; box-shadow: none; border: 0; background: transparent; padding: 0 0 10px; }
#ed-side #plan-val ul { max-height: none; }
.ed-empty { color: var(--muted); font-size: 12px; }
.ed-note { color: var(--muted); font-size: 11px; }
.ed-surf { list-style: none; margin: 0 0 8px; padding: 0; }
.ed-surf-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 6px 0; border: 0; border-bottom: 1px solid var(--panel-border); border-radius: 0; background: transparent; color: var(--text); text-align: left; }
.ed-surf-row img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; }
.ed-surf-name { display: grid; } .ed-surf-name small { color: var(--muted); font-size: 11px; }
.ed-surf-q { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); }
.ed-cove { display: block; font-size: 12px; margin: 0 0 10px; }
.ed-qty { border: 1px solid var(--panel-border); border-radius: 8px; padding: 8px 10px; background: rgba(127, 127, 127, 0.06); }
.ed-qty h4, #ed-side-fin h4 { margin: 0 0 4px; font-size: 12px; }
.ed-qty table { width: 100%; border-collapse: collapse; font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); }
.ed-qty td { padding: 1px 4px 1px 0; vertical-align: top; } .ed-qty td.n { text-align: right; white-space: nowrap; padding-right: 8px; } .ed-qty td.warn { color: var(--bar); }
.ed-cmp { width: 100%; border-collapse: collapse; font-size: 11px; margin: 4px 0 8px; }
.ed-cmp th, .ed-cmp td { padding: 3px 4px; border-bottom: 1px solid var(--panel-border); text-align: left; vertical-align: top; }
.ed-cmp img { display: block; width: 100%; height: 40px; object-fit: cover; border-radius: 4px; }
#ed-flags ul { list-style: none; padding: 0; margin: 0 0 6px; }
.ed-flag { display: block; width: 100%; text-align: left; min-height: 0; padding: 4px 6px; margin: 2px 0; border: 0; border-left: 3px solid; border-radius: 4px; background: var(--btn); color: var(--text); font-size: 12px; }
.ed-flag.warn { border-left-color: var(--bar); } .ed-flag.pending { border-left-color: var(--muted); }
@media (max-width: 700px) {
  #ed-side { top: auto; bottom: 84px; height: 40vh; left: 16px; right: 16px; width: auto; }
  #ed-dock { right: 16px; }
  #ed-swatches .ed-sw { flex-basis: 88px; height: 80px; }
  #ed-dock-tools #ed-palette button { min-width: 44px; }
  #ed-dock-tools #ed-palette button span { display: none; }
  #ed-roomcard, #ed-fincard { width: min(280px, calc(100vw - 32px)); }
}