:root{
    --bg:#f4f1ea; --panel:#fffefb; --panel2:#f8f5ed; --ink:#111; --muted:#655f55;
    --line:#d6cfc2; --soft:#e8e2d7; --accent:#2356a6; --red:#d6483a; --yellow:#f4d03f;
    --shadow:0 18px 42px rgba(50,42,31,.12);
  }
  *{box-sizing:border-box}
  html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
  body{display:grid;grid-template-columns:360px minmax(520px,1fr);grid-template-rows:48px minmax(0,1fr);overflow:hidden}
  ::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:#ebe6dc}::-webkit-scrollbar-thumb{background:#c7bdad;border:3px solid #ebe6dc;border-radius:99px}::-webkit-scrollbar-thumb:hover{background:#a99d8d}
  /* The zone dividers are Mondrian strokes: one bold 8px black rule between
     sidebar/stage, toolbar/stage, stage/dock and dock/status. */
  .um-project-header{grid-column:1/-1;position:relative;--um-header-bg:#fffefb;--um-header-text:#111;--um-header-muted:#8a8274;--um-header-line:#111;--um-header-accent:#d6483a;border-bottom-width:2px;font-family:'Space Grotesk',Inter,ui-sans-serif,sans-serif;font-weight:700;font-size:13.5px;letter-spacing:.01em}
aside{grid-row:2;height:calc(100vh - 48px);overflow:auto;background:linear-gradient(180deg,#fffefb,#f3efe6);border-right:8px solid #111;display:flex;flex-direction:column;gap:6px;padding:14px 12px 14px 14px}
  main{height:100vh;display:grid;grid-template-rows:auto 1fr auto auto;min-width:0}
  /* Orthogonal Mondrian UI: square corners everywhere by design — do not add
     border-radius to panels/controls. SKÅDIS slots stay obround in the canvas. */
  h1{font:700 17px/1.1 'Space Grotesk',Inter,ui-sans-serif,sans-serif;letter-spacing:-.01em;text-transform:none;margin:0}
  p{line-height:1.4}.note{font-size:11px;color:var(--muted);margin:5px 0 0;line-height:1.35}.warn{background:#fff4d8;border:1px solid #e1bf61;padding:8px 9px;font-size:11px;color:#5e4512;line-height:1.3}
  /* sidebar notes collapse into small info icons; the full text pops on hover */
  .note-tip{position:relative;display:inline-flex;margin:0 0 0 6px;cursor:help;vertical-align:middle}
  aside > .note-tip{margin:4px 6px 0 0}
  .note-i{width:16px;height:16px;line-height:15px;text-align:center;border:1px solid var(--line);background:#fffefb;color:var(--muted);font-size:11px;font-weight:700;display:inline-block}
  .note-tip:hover .note-i,.note-tip:focus .note-i{background:#f4d03f;color:#111;border-color:#111}
  .note-card{display:none;position:absolute;left:0;bottom:calc(100% + 6px);z-index:60;width:236px;background:#fffefb;border:1px solid #111;box-shadow:3px 3px 0 rgba(17,17,17,.16);padding:8px 10px;font-size:11px;line-height:1.4;color:#4a453c;font-weight:600}
  .note-tip:hover .note-card,.note-tip:focus .note-card{display:block}
  aside > .note-tip .note-card,.masthead .note-card{bottom:auto;top:calc(100% + 6px)}   /* header icons: pop down, not off-screen */
  .rail-list{display:flex;flex-direction:column;gap:3px;max-height:180px;overflow:auto;border:1px solid var(--line);background:#fffefb;padding:6px}
  .rail-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:#4a453c;cursor:pointer;padding:1px 3px}
  .rail-row.selected{outline:2px solid #f4d03f;background:#fdf6dd}
  .rail-row:hover{background:#f6f2e8}
  .piece-actions button.on{background:#f4d03f;border-color:#111}
  .piece-actions button:disabled{opacity:.45;cursor:default}
  .piece-flags{flex:none;font-size:12px;min-width:16px;text-align:right}
  .rail-row input{width:74px;flex:none;font-size:11px;padding:2px 4px}
  .rail-row em{font-style:normal;color:#a3541f;font-weight:800}
  .rail-badge{display:inline-block;min-width:22px;text-align:center;background:#111;color:#fff;font-weight:900;font-size:10px;padding:2px 4px;margin-right:4px}
  .project-bar{display:flex;gap:4px;margin:2px 0 0}
  .project-bar select{flex:1;min-width:0;font-size:11px}
  .project-bar button{flex:none;width:26px;padding:3px 0;font-size:12px;background:#fffefb;border:1px solid var(--line);cursor:pointer}
  .project-bar button:hover{border-color:#111;background:#f4d03f}
  #markMountsBtn.active{background:#d6483a;color:#fff;border-color:#111}
  details{border:1px solid var(--line);background:#fffefb;margin:0;padding:0;overflow:hidden;flex:none}
  details[open]{box-shadow:0 10px 26px rgba(50,42,31,.06)}
  summary{cursor:pointer;padding:10px 12px;font:700 12.5px/1.2 'Space Grotesk',Inter,sans-serif;letter-spacing:.02em;text-transform:none;list-style:none;border-bottom:1px solid transparent;display:flex;align-items:center;justify-content:space-between}
  summary::-webkit-details-marker{display:none}
  summary::after{content:'+';font-size:13px;line-height:1;opacity:.75}
  details[open] summary::after{content:'−'}
  summary:hover::after{opacity:1}
  details[open] summary{border-bottom-color:var(--line)}
  /* Every section owns a full-color header (user call — stripes were too
     subtle, pure black too heavy): Board grey, Layout red (the composition IS
     the painting), Pieces white (most panels are white), Rails charcoal,
     Model light blue, Backplate warm taupe, Pegs deep blue, Export yellow
     (the same yellow as the estimate chip — the money color). */
  details.sec-quiet>summary{background:#b4b0a6;color:#111}
  details.sec-layout>summary{background:var(--red);color:#fff}
  details.sec-skadis>summary{background:#f8f5ed;color:#111}
  details.sec-rails>summary{background:#2c2924;color:#fff}
  details.sec-stl>summary{background:#6f8fc0;color:#fff}
  details.sec-plate>summary{background:#8b8478;color:#fff}
  details.sec-pegs>summary{background:var(--accent);color:#fff}
  details.sec-export>summary{background:var(--yellow);color:#111}
  .content{padding:11px}.row{display:grid;grid-template-columns:1fr 1fr;gap:7px}
  /* a wrapping label must not push its input out of line with the neighbour's */
  .row>div{display:flex;flex-direction:column;justify-content:flex-end}
  label{display:block;font-size:10px;font-weight:850;letter-spacing:.06em;text-transform:uppercase;margin:7px 0 3px;color:#2c2924}
  /* option names with a title explain themselves on hover — mark them */
  label[title]{cursor:help;text-decoration:underline dotted rgba(44,41,36,.4);text-underline-offset:2px}
  input,select,button,textarea{font:inherit;font-size:13px;border:1px solid #cfc6b8;background:#fffefb;color:var(--ink);padding:6px 8px;min-height:31px;width:100%}
  textarea{resize:vertical;line-height:1.35}
  input[type=file]{font-size:12px;padding:6px;background:#fff}
  /* One press language everywhere: hover inks the border and lifts on a hard
     Mondrian offset shadow (no blur — the UI is orthogonal); :active pushes the
     element down onto the surface. Soft blurred shadows are reserved for the
     canvas shell and floating panels. */
  button{font-weight:850;cursor:pointer;background:#eee8dd;transition:border-color .12s,background .12s,box-shadow .12s,transform .12s}.btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
  button:hover:not(:disabled){border-color:#111;box-shadow:2px 2px 0 rgba(17,17,17,.28)}
  button:active:not(:disabled){transform:translate(1px,1px);box-shadow:0 0 0 rgba(17,17,17,.28)}
  button:disabled{opacity:.45;cursor:default;box-shadow:none}
  /* Compact 2-col × 3-row action grid: single tidy block instead of stacked tall button pairs. */
  .btns-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
  .btns-grid button{min-height:32px;padding:6px 8px;font-size:12px;line-height:1.1;white-space:nowrap}
  .btns-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:8px}
  .btns-3 button{min-height:32px;padding:6px 6px;font-size:12px;line-height:1.1;white-space:nowrap}
  .divider{height:1px;background:var(--line);margin:12px 0}
  /* Button hierarchy, one primary per group:
     .primary  black — the group's main action
     .cta      yellow — generative / business moments (fill, submit); same
               yellow as the estimate chip
     (default) cream — secondary actions
     .ghost    outline — rare/undo-ish actions (clear, reset)
     .danger   red-tinted — destructive, quiet until hovered */
  button.primary{background:#111;color:#fff;border-color:#111}
  button.primary:hover:not(:disabled){background:#2c2924}
  button.cta{background:var(--yellow);border-color:#111}
  button.cta:hover:not(:disabled){background:#ffdf57}
  button.ghost{background:transparent;border-color:var(--line);color:var(--muted)}
  button.ghost:hover:not(:disabled){color:#111}
  button.danger{background:#fffefb;color:#9b2d20;border-color:#dcc0b8}
  button.danger:hover:not(:disabled){border-color:#d6483a;background:#fdf1ef;box-shadow:2px 2px 0 rgba(214,72,58,.3)}
  .toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:10px 16px;border-bottom:8px solid #111;background:#f8f5ed}
  /* Metrics are readouts, not controls: they live in the bottom status bar as a
     quiet inline strip, so the toolbar holds only the step sequence + estimate. */
  .bottom-metrics{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
  .metric{border:none;background:none;padding:0;min-width:0;display:flex;gap:5px;align-items:baseline}.metric small{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:900}.metric strong{font-size:11.5px}.metric select{padding:6px 8px;min-height:30px;margin-top:2px}
  .toolbar-actions{margin-left:0;display:flex;gap:6px;flex-wrap:wrap;align-items:center}.toolbar-actions button{width:auto;min-height:32px;padding:7px 10px;font-size:11px;letter-spacing:.08em;text-transform:uppercase}.toolbar-actions button.active{background:#111;color:#fff;border-color:#111}
  /* the numbered workflow steps read as one connected sequence, set apart from the utility buttons */
  .toolbar-actions .step-btn{background:#fffefb;border-color:#8b8478}
  .toolbar-actions .step-btn.active{background:var(--accent);color:#fff;border-color:#111;box-shadow:none}
  .toolbar-actions .step-btn:nth-of-type(3){margin-right:10px}
  .stage-wrap{overflow:auto;padding:24px;display:grid;place-items:center;background:#f8f5ed}
  .canvas-shell{width:min(980px,100%);height:min(820px,calc(100vh - 155px));min-height:520px;border:2px solid #111;overflow:hidden;background:#fffefb;box-shadow:none;position:relative}
  #mainCanvas{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
  #mainCanvas:active{cursor:grabbing}
  .view-controls{position:absolute;top:12px;right:12px;display:none;gap:4px;z-index:2}
  .view-controls.show{display:flex}
  .view-controls button{width:auto;min-height:28px;padding:5px 11px;font-size:11px;font-weight:850;letter-spacing:.07em;text-transform:uppercase;background:rgba(255,254,251,.93);border:1px solid var(--line);box-shadow:0 2px 8px rgba(50,42,31,.1)}
  .view-controls button.active{background:#111;color:#fff;border-color:#111}
  .bottom{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:10px 16px;border-top:8px solid #111;font-size:12px;color:var(--muted);background:#f8f5ed}
  #status{color:#2c2924;font-weight:750}
  #status.err{color:var(--red);font-weight:850}
  :focus-visible{outline:3px solid rgba(35,86,166,.45);outline-offset:2px}
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{transition:none !important;animation:none !important}
  }

  .logo{display:inline-grid;grid-template-columns:10px 20px 10px;grid-template-rows:10px 10px;gap:2px;margin-bottom:0;flex:none}
  .logo span{display:block;border:2px solid #111;background:var(--panel2)}.logo .r{background:var(--red);grid-row:span 2}.logo .b{background:var(--accent)}.logo .y{background:var(--yellow)}
  .checkline{display:flex;gap:8px;align-items:center;margin:8px 0 0;font-size:12px;font-weight:800;color:#2c2924;text-transform:none;letter-spacing:0}.checkline input{width:auto;min-height:auto;padding:0}.edge-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 12px;margin:4px 0 8px}.edge-grid .checkline{margin:0}
  .soft-panel{border:1px solid var(--line);background:#fbfaf7;padding:8px 9px;margin-top:8px}
  .peg-map-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .peg-map-head label{margin:0}
  .peg-map-head button{width:auto;min-height:26px;padding:4px 9px;font-size:10px;letter-spacing:.06em;text-transform:uppercase}
  /* Peg map: pegs sit at their true SKÅDIS hole positions on the selected piece's
     face. The obround toggle shape depicts the physical slot — the square-corner
     rule applies to UI chrome, not to board geometry the map represents. */
  .peg-map{position:relative;border:2px solid #111;background:var(--panel2);margin:8px auto 0;max-width:100%}
  .peg-map button{position:absolute;width:14px;height:24px;min-height:0;padding:0;transform:translate(-50%,-50%);border-radius:7px;border:1.5px solid #143b78;box-shadow:0 0 0 2px rgba(255,254,251,.95)}
  .peg-map button.on{background:var(--accent)}
  .peg-map button.off{background:rgba(255,254,251,.75);border:1.5px dashed var(--red)}
  .peg-map button:hover{box-shadow:0 0 0 2px rgba(255,254,251,.95),0 0 0 5px rgba(35,86,166,.35)}
  /* peg toggles are centred by their own transform — the global press-translate must not undo it */
  .peg-map button:active{transform:translate(-50%,-50%);box-shadow:0 0 0 2px rgba(255,254,251,.95),0 0 0 5px rgba(35,86,166,.35)}
  .piece-list{display:flex;flex-direction:column;gap:3px;margin-top:6px;max-height:190px;overflow:auto}
  .piece-row{display:flex;align-items:center;gap:6px;padding:3px 5px;border:1px solid var(--line);background:#fffefb;cursor:pointer}
  .piece-row.active{border-color:#111;background:#fdf6dd;box-shadow:inset 3px 0 0 #f4d03f}
  .piece-badge{min-width:22px;height:22px;display:grid;place-items:center;border:1.5px solid #111;font-weight:900;font-size:11px;flex:none}
  .piece-size{font-size:11px;font-weight:800;color:#5f594f;min-width:74px;white-space:nowrap}
  .piece-row select{flex:1;width:auto;min-height:24px;padding:2px 4px;font-size:11px}
  .piece-row.locked{background:#fbf6e6;border-color:#e1bf61}
  .piece-lock{width:auto;min-height:24px;flex:none;padding:2px 5px;font-size:12px;background:#fffefb;border:1px solid var(--line)}
  .piece-lock.on{background:#f4d03f;border-color:#111}
  .swatches{display:flex;gap:5px;align-items:center;margin-top:2px}
  .swatch{width:26px;height:26px;min-height:0;flex:none;padding:0;border:2px solid #111}
  .swatch.active{box-shadow:0 0 0 2px #fffefb,0 0 0 4px #111}
  .swatches input[type=color]{width:26px;height:26px;min-height:0;flex:none;padding:1px;border:2px dashed #6b6458;background:#fffefb}
  @media (max-width: 900px){
    body{display:block;overflow:auto}
    aside{height:auto;max-height:none;border-right:0;border-bottom:8px solid #111;padding:14px}
    main{height:auto;min-height:82vh;grid-template-rows:auto minmax(520px,1fr) auto}
    .toolbar{position:sticky;top:0;z-index:3;flex-wrap:wrap;padding:10px}
    .toolbar-actions{width:100%;margin-left:0}
    .metric{min-width:calc(50% - 6px);flex:1}
    .stage-wrap{min-height:520px;padding:12px}
    .canvas-shell{width:100%;height:clamp(520px,72vh,760px);min-height:520px;border-left:0;border-right:0}
    .bottom{display:block}
    .bottom span{display:block;margin:3px 0}
  }
  @media (max-width: 520px){
    .row,.btns,.btns-grid{grid-template-columns:1fr}
    .metric{min-width:100%}
    h1{font-size:16px}
  }

/* ============ IKEA-planner UX layer ============ */
/* Live totals chip: a metric that is also a button (opens the report) */
.totals-chip{width:auto;flex:none;margin-left:auto;text-align:left;cursor:pointer;background:var(--yellow);border:2px solid #111;padding:5px 12px;display:flex;gap:7px;align-items:baseline}
.totals-chip:hover{background:#ffdf57;box-shadow:none}
.totals-chip strong{white-space:nowrap;font:700 13px 'Space Grotesk',Inter,sans-serif}

/* Drag-and-drop rail chips (Rails menu) */
.rail-chip-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0 2px}
.rail-chip{min-height:34px;background:#111;color:#fff;border:1px solid #111;font-size:12px;cursor:grab;touch-action:none;user-select:none}
.rail-chip:hover:not(:disabled){background:#2c2924;box-shadow:2px 2px 0 rgba(17,17,17,.28)}
.rail-chip:active{cursor:grabbing}
.rail-ghost{position:fixed;z-index:99;pointer-events:none;width:96px;height:14px;background:#111;border:2px solid #f4d03f;box-shadow:4px 4px 0 rgba(17,17,17,.28)}
.rail-ghost.v{width:14px;height:96px}

/* Canvas context menu */
#ctxMenu{position:fixed;display:none;z-index:80;min-width:196px;background:#fffefb;border:1px solid #111;
  box-shadow:4px 4px 0 rgba(17,17,17,.18);padding:4px}
.ctx-head{padding:6px 9px 5px;font:900 10px Inter,system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;
  color:#fff;background:#111;margin:-4px -4px 4px}
.ctx-item{display:block;width:100%;text-align:left;border:none;background:none;min-height:0;
  padding:6px 9px;font:700 12px Inter,system-ui,sans-serif;color:#2c2924;cursor:pointer}
.ctx-item:hover{background:#f4d03f;box-shadow:none}
.ctx-item.danger{color:#9b2d20}
.ctx-item.danger:hover{background:#d6483a;color:#fff}
.ctx-swatches{display:flex;gap:4px;padding:4px 9px 6px;border-bottom:1px solid var(--line);margin-bottom:3px}
.ctx-swatch{width:20px;height:20px;min-height:0;flex:none;padding:0;border:1.5px solid #111;cursor:pointer}
.ctx-swatch:hover{outline:2px solid #f4d03f;box-shadow:none}

/* Inline dimension editor (click a measurement on the canvas) */
#dimEdit{position:fixed;display:none;z-index:80;align-items:center;gap:5px;background:#fffefb;border:1px solid #2356a6;
  box-shadow:3px 3px 0 rgba(35,86,166,.22);padding:5px 8px;font:800 11px Inter,system-ui,sans-serif;color:#2356a6}
#dimEdit input{width:64px;min-height:0;padding:3px 5px;border:1px solid #2356a6;font:800 12px Inter,system-ui,sans-serif;color:#111}

/* Shared modal (design check, fill chooser) */
#modalWrap{position:fixed;inset:0;z-index:90;background:rgba(30,24,18,.42);display:grid;place-items:center;padding:20px}
/* the id rule above beats the UA [hidden] rule — restate it or the empty modal
   shell shows permanently and the close button (which toggles hidden) can't act */
#modalWrap[hidden]{display:none}
#modalBox{background:#fffefb;border:1px solid #111;box-shadow:6px 6px 0 rgba(17,17,17,.2);
  width:min(560px,94vw);max-height:88vh;display:flex;flex-direction:column}
#modalHead{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#111;color:#fff;padding:9px 12px}
#modalHead b{font:900 11px Inter,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase}
#modalHead button{width:auto;min-height:0;padding:2px 8px;background:none;border:1px solid rgba(255,255,255,.4);color:#fff;font-size:12px}
#modalHead button:hover{background:#d6483a;border-color:#d6483a;box-shadow:none}
#modalBody{padding:12px;overflow:auto}

/* Design check rows */
.check-ok{margin:4px 0;font:700 13px/1.5 Inter,system-ui,sans-serif;color:#2c5e2e;background:#eef4e6;border:1px solid #a9c48f;padding:10px 12px}
.check-row{display:block;width:100%;text-align:left;margin:0 0 6px;min-height:0;padding:8px 10px;cursor:pointer;
  font:700 12px/1.4 Inter,system-ui,sans-serif;background:#fffefb}
.check-row.err{border:1px solid #d6483a;color:#7c1408;box-shadow:inset 3px 0 0 #d6483a}
.check-row.warn{border:1px solid #e1bf61;color:#5e4512;box-shadow:inset 3px 0 0 #f4d03f}
.check-row:hover{background:#fdf6dd}
.check-submit{display:block;width:100%;margin-top:10px;background:#111;color:#fff;border-color:#111}

/* Mondrian fill chooser */
.fill-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fill-card{padding:6px;min-height:0;background:#fffefb;border:1px solid var(--line);cursor:pointer;display:flex;flex-direction:column;gap:5px;align-items:center}
.fill-card:hover{border-color:#111;background:#fdf6dd;box-shadow:3px 3px 0 rgba(17,17,17,.14)}
.fill-card svg{width:100%;height:auto;display:block}
.fill-card span{font:800 10px Inter,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* Accessory dock: a catalog strip under the canvas (static prerenders of the
   real geometry). Click sets the selected piece; dragging a card onto the
   board creates a piece there — the IKEA catalog gesture. */
.acc-select-hidden{display:none}
.acc-dock{display:flex;gap:12px;align-items:center;padding:7px 16px;border-top:8px solid #111;background:#fffefb}
.acc-dock-label{flex:none;font:900 10px Inter,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#2c2924}
.acc-dock-label em{display:block;font:600 10px Inter,system-ui,sans-serif;letter-spacing:0;text-transform:none;font-style:normal;color:var(--muted);margin-top:2px}
.acc-picker{display:flex;gap:5px;overflow-x:auto;min-width:0;flex:1;padding:2px 0}
.acc-card{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:0;width:88px;flex:none;padding:5px 3px 4px;
  background:#fffefb;border:1px solid var(--line);cursor:grab;touch-action:none;user-select:none}
.acc-card img{width:100%;height:38px;object-fit:contain;display:block;image-rendering:auto;pointer-events:none}
.acc-card span{font:800 9px Inter,system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#2c2924;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}
.acc-card:hover{border-color:#111;box-shadow:2px 2px 0 rgba(17,17,17,.12)}
.acc-card:active{cursor:grabbing}
.acc-card.active{border-color:#111;background:#fdf6dd;box-shadow:inset 0 -3px 0 #f4d03f}
.acc-ghost{position:fixed;z-index:99;pointer-events:none;width:92px;display:flex;flex-direction:column;align-items:center;gap:3px;
  background:#fffefb;border:2px solid #111;box-shadow:4px 4px 0 rgba(17,17,17,.28);padding:5px 3px 4px}
.acc-ghost img{width:100%;height:38px;object-fit:contain}
.acc-ghost span{font:800 9px Inter,system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#2c2924;white-space:nowrap}

/* Floating cable-hole editor: appears when the hole is clicked in the 3D view */
#holeEditor3D,#mountEditor3D{position:fixed;display:none;z-index:60;background:#fffefb;border:1px solid rgba(20,20,20,.28);
  box-shadow:0 6px 18px rgba(20,20,20,.2);padding:8px 10px;font:700 11px Inter,system-ui,sans-serif;color:#4a453c}
#holeEditor3D b,#mountEditor3D b{display:block;margin-bottom:5px;font-size:10px;letter-spacing:.4px;color:#111}
#holeEditor3D label,#mountEditor3D label{margin:0 4px 0 8px}
#holeEditor3D label:first-child,#mountEditor3D label:first-child{margin-left:0}
#holeEditor3D input,#mountEditor3D input{width:54px;padding:3px 4px;border:1px solid rgba(20,20,20,.25);background:#fff;font:inherit}
#mountEditor3D button{margin-left:8px;padding:3px 7px;border:1px solid rgba(155,45,32,.5);background:#fff;color:#9b2d20;font:inherit;cursor:pointer}

/* ============ Mondrian shell ============ */
/* Light sidebar; sections are the colored blocks (headers above), phases are
   quiet ink labels between them. */
.masthead{background:none;padding:0 0 4px;display:flex;flex-direction:column;gap:7px;flex:none}
.mast-row{display:flex;align-items:center;gap:10px}
.mode-toggle{margin-left:auto;display:flex;border:2px solid #111;flex:none}
.mode-toggle button{width:auto;min-height:0;padding:4px 9px;font:850 10px Inter,ui-sans-serif,sans-serif;letter-spacing:.05em;text-transform:uppercase;border:none;background:#f8f5ed;color:#111}
.mode-toggle button:hover:not(.on){background:#f4d03f;box-shadow:none;border:none}
.mode-toggle button:active{transform:none;box-shadow:none}
.mode-toggle button.on{background:#111;color:#fff}
/* Phase dividers are quiet clickable ink labels between the colored blocks;
   a click opens the phase's first section. */
.phase{color:var(--muted);font:700 10.5px 'Space Grotesk',Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:8px 2px 1px;display:flex;align-items:center;gap:7px;flex:none;cursor:pointer;user-select:none}
.phase:hover{color:#111}
.phase-n{color:inherit;font-size:10.5px;flex:none}
.phase::after{content:'';flex:1;height:1px;background:rgba(17,17,17,.14)}
.project-block{background:#fffefb;border:1px solid var(--line);padding:8px 11px 10px;flex:none}
.project-block .project-bar{margin:0}
/* Simple mode hides the engineering menus (STL fitting, backplate, pegs and the
   advanced board dimensions); their defaults keep working underneath. */
body.mode-simple .advanced-details,
body.mode-simple #secModel,
body.mode-simple #secPlate,
body.mode-simple #secPegs{display:none}