@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');
:root{--paper:#FFFFFF;--panel:#F5F3EC;--paper-dim:#F3F1EA;--ink:#16150F;--ink-soft:#8B8579;--line:#EAE6DB;--good:#3E6B4F;--bad:#A44536;--rail:300px;--gutter:26px;--edge:32px;font-family:'DM Sans',sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink);padding:10px 15px;font-size:14px}button:hover{border-color:var(--ink-soft);background:var(--paper-dim)}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--ink);outline-offset:3px}button[aria-pressed=true],button.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}button:disabled{opacity:.55;cursor:wait}header{position:sticky;top:0;z-index:20;height:92px;background:var(--paper);display:grid;grid-template-columns:calc(var(--rail) + var(--gutter)) minmax(0,1fr) auto auto;align-items:center;padding:0 var(--edge) 0 0;border-bottom:1px solid var(--line)}.brand{padding-left:var(--edge);font-family:inherit;font-weight:600;letter-spacing:-.015em;font-size:35px;text-decoration:none;color:var(--ink);line-height:1}.brand span{display:block;font-family:'DM Sans',sans-serif;font-size:10px;letter-spacing:2.4px;margin-top:9px}.header-actions{display:flex;gap:10px}main{display:grid;grid-template-columns:var(--rail) 1fr var(--rail);min-height:calc(100vh - 92px)}aside{background:var(--paper);border-right:1px solid var(--line);padding:27px 23px;max-height:calc(100vh - 92px);overflow:auto;position:sticky;top:92px}.eyebrow{font-size:11px;letter-spacing:1.5px;font-weight:600;color:var(--ink-soft)}h1{font-family:inherit;font-weight:600;letter-spacing:-.015em;font-size:40px;line-height:1.04;margin:15px 0 10px}.intro p{font-size:14px;color:var(--ink-soft);margin-bottom:26px}h2{font-size:16px;font-weight:600;margin:0 0 13px}.presets{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:24px}.presets button{border-radius:8px;text-align:left;padding:11px 9px;font-weight:600;font-size:13px;min-height:68px}.presets small{display:block;font-size:11px;font-weight:400;color:var(--ink-soft);line-height:1.45;margin-top:5px}details{border-top:1px solid var(--line);padding:15px 0}summary{cursor:pointer;font-size:15px;font-weight:600}summary::marker{color:var(--ink-soft)}.fields{display:grid;gap:16px;padding-top:19px}.field label,.range-label{font-size:14px;display:block;margin-bottom:7px}.field select{width:100%;border:1px solid var(--line);padding:9px;background:var(--paper);border-radius:4px;color:var(--ink);font-size:14px}.range-label{display:flex;justify-content:space-between;gap:6px}.range-label output{font-variant-numeric:tabular-nums;font-weight:600}input[type=range]{width:100%;accent-color:var(--ink);height:18px}input[type=checkbox]{accent-color:var(--ink);width:16px;height:16px}input[type=color]{border:1px solid var(--line);width:42px;height:30px;padding:3px;background:var(--paper);border-radius:5px}.color-field,.check{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px}.swatches{display:flex;gap:10px}.swatches button{width:29px;height:29px;border-radius:50%;padding:0;background:var(--color);border:3px solid var(--paper);box-shadow:0 0 0 1px var(--line)}.reset{width:100%;margin-top:15px}.note{font-size:12px;line-height:1.6;color:var(--ink-soft)}.workspace{padding:25px var(--gutter) 18px;min-width:0}.workspace-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.workspace-heading h2{font-family:inherit;font-weight:600;letter-spacing:-.015em;font-size:29px;margin:8px 0 18px}.badge{border:1px solid var(--line);font-size:11px;letter-spacing:1px;padding:7px 10px;border-radius:20px;white-space:nowrap}.tabs{display:flex;gap:6px;margin-bottom:16px}.tabs button{border-radius:30px;padding:9px 18px}.stage{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(270px,1fr);border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel)}.viewer{min-width:0;display:flex;flex-direction:column;position:relative}#viewport{height:510px;min-height:370px;position:relative;flex:1}#viewport canvas{display:block;width:100%;height:100%;outline:none}.camera{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:12px}.camera button{font-size:12px;padding:6px 9px;background:var(--panel)}.camera span{font-size:11px;color:var(--ink-soft);flex-basis:100%;padding:3px}#error{position:absolute;inset:25%;font-size:15px;line-height:1.6}.plan-panel{background:var(--paper-dim);border-left:1px solid var(--line);padding:18px 15px 12px;min-width:0}.plan-heading{display:flex;justify-content:space-between;gap:6px;align-items:center}.plan-heading h3{font-size:15px;margin:0}.plan-heading label{display:flex;align-items:center;gap:4px;font-size:12px}#plan{height:390px}#plan svg{width:100%;height:100%;display:block}.room-list{display:grid;grid-template-columns:1fr;gap:7px;border-top:1px solid var(--line);padding-top:12px}.room{display:flex;justify-content:space-between;gap:5px;font-size:12px}.room span:last-child{color:var(--ink-soft);font-variant-numeric:tabular-nums}.plan-note{font-size:11px;color:var(--ink-soft);margin-top:14px}.summary{display:grid;grid-template-columns:1.2fr 1.3fr 1fr 1fr;gap:20px;padding:21px 2px;border-bottom:1px solid var(--line)}.summary small{font-size:10px;letter-spacing:1px;color:var(--ink-soft)}.summary strong{display:block;font-weight:500;font-size:22px;margin-top:7px}.meter{height:3px;background:var(--line);margin-top:10px;max-width:140px}.meter i{display:block;height:3px;background:var(--ink)}.footer-note,#status{font-size:12px;line-height:1.6;color:var(--ink-soft)}#status:empty{display:none}#status{color:var(--ink);background:var(--panel);border-radius:5px;padding:9px 12px}.viewer-expand{position:absolute;top:12px;right:12px;z-index:5;width:38px;height:38px;padding:0;display:grid;place-items:center;background:var(--paper);border:1px solid var(--line);border-radius:50%;box-shadow:0 2px 9px rgba(22,21,15,.12);color:var(--ink)}
.viewer-expand:hover{background:var(--paper-dim);border-color:var(--ink-soft)}
.viewer-expand svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block}
.viewer-expand .icon-collapse{display:none}
.viewer-expand[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.viewer-expand[aria-pressed=true] .icon-expand{display:none}
.viewer-expand[aria-pressed=true] .icon-collapse{display:block}
.stage.viewer-only{grid-template-columns:1fr}
.viewer-only .plan-panel{display:none}
.viewer-only #viewport{height:min(74vh,780px)}
.plan-only .viewer-expand{display:none}
.stage.plan-only{grid-template-columns:1fr}.plan-only .viewer{display:none}.plan-only .plan-panel{border:0}.plan-only #plan{height:570px}.plan-only .room-list{grid-template-columns:1fr 1fr;gap:10px 30px}button[hidden],.field[hidden],div[hidden]{display:none!important}@media(min-width:1600px){#viewport{height:650px}#plan{height:470px}}@media(max-width:1200px){:root{--rail:270px}main{grid-template-columns:var(--rail) 1fr var(--rail)}.stage{grid-template-columns:1fr}.viewer-only #viewport{height:min(68vh,620px)}.plan-panel{border-left:0;border-top:1px solid var(--line)}#plan{height:400px}.room-list{grid-template-columns:1fr 1fr;gap:8px 20px}#viewport{height:440px}.summary{grid-template-columns:1fr 1fr}}@media(max-width:700px){header{display:flex;justify-content:space-between;height:auto;min-height:95px;padding:16px;gap:15px}.brand{padding-left:0}.brand{font-size:28px}.brand span{font-size:8px}.header-actions{flex-direction:column;gap:5px}.header-actions button{font-size:12px;padding:8px}main{display:flex;flex-direction:column}.workspace{order:0;padding:20px 12px}aside{order:1;position:static;max-height:none;padding:25px;border-right:0;border-left:0}.workspace-heading h2{font-size:25px}.badge{font-size:9px}.tabs button{font-size:12px;padding:8px 13px}#viewport{height:370px}.summary strong{font-size:20px}.plan-panel{padding:17px}.intro h1 br{display:none}.presets{grid-template-columns:repeat(2,1fr)}.presets button{font-size:14px}.presets small{font-size:12px}h1{font-size:36px}}

.presets button img{width:100%;height:80px;object-fit:cover;display:block;border-radius:3px;margin-bottom:8px}.presets button[aria-pressed=true] small{color:var(--panel)}.reference-comparison{margin-top:18px}.reference-content{display:grid;grid-template-columns:minmax(160px,320px) 1fr;gap:22px;align-items:start;padding-top:18px}.reference-content img{width:100%;max-height:310px;object-fit:contain;object-position:left top}.reference-content p{font-size:14px;line-height:1.6;max-width:520px}.reference-content h3{margin:0;font-size:18px}@media(max-width:700px){.reference-content{grid-template-columns:1fr}.reference-content img{max-height:250px}}

.siding-swatches{margin-top:10px;flex-wrap:wrap}.siding-swatches button{width:26px;height:26px}

.graphics-label{font-size:12px;display:flex;align-items:center;gap:6px}.graphics-label select{font:inherit;padding:5px;border:1px solid var(--line);border-radius:4px}.camera .graphics-status{flex-basis:auto;margin-left:auto;font-size:12px}

.layout-review{margin:18px 0;padding:16px;background:var(--panel);border:1px solid var(--line);border-radius:10px;font-size:14px}.layout-review summary{font-weight:650;cursor:pointer}.layout-review p{line-height:1.5}.audit-fail{border-left:3px solid var(--bad);padding-left:10px}.audit-warning{border-left:3px solid var(--ink-soft);padding-left:10px}.audit-review{border-left:3px solid var(--ink-soft);padding-left:10px}

a{color:var(--ink)}.graphics-label select{background:var(--paper);color:var(--ink)}#error,#status[data-tone="bad"]{color:var(--bad)}.audit-pass{color:var(--good)}.audit-fail{color:var(--bad)}.reference-comparison{background:var(--panel);padding:16px;border-radius:10px}.camera{background:var(--panel)}

/* --- Ekstra integration: brand lockup + link-styled action. Palette tokens above are unchanged. --- */
.brand{display:block}.brand-mark{height:21px;width:79px;display:block;flex:none;color:var(--ink)}.brand span{margin-top:8px}.header-actions a.linkbtn{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink);padding:10px 15px;font-size:14px;text-decoration:none;white-space:nowrap}.header-actions a.linkbtn:hover{border-color:var(--ink-soft);background:var(--paper-dim)}@media(max-width:700px){.brand-mark{height:17px;width:64px}.header-actions a.linkbtn{font-size:12px;padding:8px;justify-content:center}}

/* Right sidebar: reference modifiers. */
aside.aside-right{border-right:0;border-left:1px solid var(--line)}
aside.aside-right h2{margin-top:0}

/* Design summary lives in the sticky header between the wordmark and the actions. */
header{gap:24px}
.header-summary{display:flex;gap:36px;padding:0;border-bottom:0;justify-content:flex-start;min-width:0}
.header-summary>div{min-width:0}
.header-summary small{white-space:nowrap}
.header-summary strong{font-size:19px;margin-top:4px;white-space:nowrap}
.header-summary .meter{margin-top:6px;max-width:110px}
@media(max-width:1200px){.header-summary{gap:20px}.header-summary strong{font-size:16px}}
@media(max-width:900px){.header-summary{display:none}}

/* Save gate: shown when a signed-out visitor clicks Save design. */
.save-gate{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:rgba(22,21,15,.55);padding:20px}
.save-gate[hidden]{display:none}
.save-gate-card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:30px 30px 24px;width:min(440px,100%);box-shadow:0 24px 48px -24px rgba(22,21,15,.5)}
.save-gate-card h3{margin:0 0 8px;font-size:20px;letter-spacing:-.02em}
.save-gate-card p{margin:0 0 20px;font-size:14px;line-height:1.55;color:var(--ink-soft)}
.save-gate-actions{display:flex;gap:10px;flex-wrap:wrap}
.save-gate-actions a{flex:1 1 140px;display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:999px;border:1px solid var(--ink);color:var(--ink);font-size:14px;font-weight:600;text-decoration:none}
.save-gate-actions a.primary{background:var(--ink);color:var(--paper)}
.save-gate-download{margin-top:14px;width:100%;background:none;border:0;color:var(--ink-soft);font-size:13px;text-decoration:underline;cursor:pointer;padding:6px}
.save-gate-close{position:absolute;top:10px;right:12px;background:none;border:0;font-size:22px;line-height:1;color:var(--ink-soft);cursor:pointer;padding:6px}

/* Signed-in state in the studio header. */
/* After the actions, at the far right of the bar. */
.account{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-soft);margin-left:12px}
.account strong{color:var(--ink);font-weight:600}
.account .linkbtn,#price-link{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink);padding:8px 13px;font-size:13px;text-decoration:none;cursor:pointer;font-family:inherit}
.account .linkbtn:hover{border-color:var(--ink-soft);background:var(--paper-dim)}
header:has(.account:not([hidden])) #account-login{display:none}

/* Door picker */
.doors-panel{border:1px solid var(--line);border-radius:12px;padding:12px 12px 6px;margin-bottom:16px;background:var(--panel)}
.doors-panel h3{margin:0 0 4px;font-size:14px}
.doors-panel .plan-note{margin:0 0 10px}
.door-row{display:flex;flex-direction:column;gap:6px;padding:10px 0;border-top:1px solid var(--line)}
.door-row:first-child{border-top:0}
.door-name{font-size:13px;font-weight:600;display:flex;flex-direction:column}
.door-name small{font-weight:400;color:var(--ink-soft);font-size:11.5px;margin-top:2px}
.door-row select{width:100%;font-size:12.5px;padding:7px 8px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);font-family:inherit}
.door-row-removed .door-name{color:var(--ink-soft)}
.doors-subhead{margin:14px 0 2px;font-size:13px;font-weight:600;border-top:1px solid var(--line);padding-top:10px}

/* Inline editing in the 3D view */
.viewer{position:relative}
.pick-tip{position:absolute;z-index:5;pointer-events:none;background:rgba(22,21,15,.88);color:#fff;font-size:12px;padding:5px 9px;border-radius:7px;white-space:nowrap}
.inline-editor{position:absolute;z-index:6;width:280px;background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 34px -14px rgba(22,21,15,.35);padding:12px 12px 10px;font-size:12.5px}
.inline-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:13px}
.inline-close{border:0;background:transparent;font-size:18px;line-height:1;cursor:pointer;color:var(--ink-soft);padding:0 2px}
.inline-editor label{display:flex;flex-direction:column;gap:4px;margin:0 0 8px;font-weight:600;font-size:12px}
.inline-editor select,.inline-editor input[type=color]{width:100%;font-size:12.5px;padding:7px 8px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);font-family:inherit;font-weight:400}
.inline-editor input[type=color]{height:34px;padding:2px 4px}
.inline-summary{color:var(--ink-soft);margin-bottom:6px}
.inline-editor select+select{margin-top:6px}

/* ==========================================================================
   Mobile studio. Appended last so it wins over the earlier breakpoints.

   Below 860px the two rails stop being columns and become drawers that fly in
   over the model. Stacked underneath, every control sat below a full-height
   viewport: you scrolled past the model to reach a control, changed it, then
   scrolled back to see what happened. A live 3D configurator only works if the
   model stays on screen while you change it.
   ========================================================================== */
@media (max-width:860px){
  main{display:block;min-height:0}

  /* Rails become sheets, off-canvas until asked for. */
  aside{
    position:fixed;top:0;bottom:0;z-index:60;
    width:min(89vw,392px);max-height:none;
    padding:0 0 calc(24px + env(safe-area-inset-bottom));
    background:var(--paper);border:0;overflow-y:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    box-shadow:0 0 0 rgba(22,21,15,0);
    transition:transform .34s cubic-bezier(.32,.72,0,1),box-shadow .34s ease;
    will-change:transform;
  }
  aside#aside-left{left:0;transform:translateX(-101%);border-right:1px solid var(--line)}
  aside#aside-right{right:0;transform:translateX(101%);border-left:1px solid var(--line)}
  /* Must out-rank aside#aside-left/right above, which carry the off-canvas transform:
     an id beats a class, so a bare .drawer-open never moved the panel. */
  aside#aside-left.drawer-open,aside#aside-right.drawer-open{transform:translateX(0);box-shadow:0 18px 60px rgba(22,21,15,.28)}
  aside#aside-left.drawer-dragging,aside#aside-right.drawer-dragging{transition:none}
  aside>section,aside>.note,aside>h2,aside>#controls,aside>.doors-panel{padding-left:22px;padding-right:22px}
  aside>h2{margin-top:20px}
  aside>#reset{width:calc(100% - 44px);margin-left:22px;margin-right:22px}

  /* A head that stays put while the controls scroll under it. */
  .drawer-head{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    position:sticky;top:0;z-index:2;
    padding:16px 14px 14px 22px;background:var(--paper);
    border-bottom:1px solid var(--line);
  }
  .drawer-head h2{margin:0;font-size:19px;font-weight:600;letter-spacing:-.01em}
  .drawer-close{
    width:38px;height:38px;flex:none;padding:0;border-radius:50%;
    font-size:22px;line-height:1;display:grid;place-items:center;background:var(--panel)
  }

  .drawer-scrim{
    position:fixed;inset:0;z-index:55;background:rgba(22,21,15,.42);
    opacity:0;pointer-events:none;transition:opacity .3s ease;
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  }
  .drawer-scrim.on{opacity:1;pointer-events:auto}

  /* The bar that opens them, and the live figure between. */
  .mobile-bar{
    position:fixed;left:0;right:0;bottom:0;z-index:50;
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;
    padding:9px 12px calc(9px + env(safe-area-inset-bottom));
    background:var(--paper);
    background:color-mix(in srgb,var(--paper) 86%,transparent);
    -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
    border-top:1px solid var(--line);
  }
  .bar-btn{
    display:flex;align-items:center;justify-content:center;gap:8px;
    padding:11px 10px;font-size:13.5px;font-weight:600;border-radius:14px;
    background:var(--panel);border-color:transparent;min-height:46px;
  }
  .bar-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
  .bar-btn[aria-expanded=true]{background:var(--ink);color:var(--paper)}
  .bar-stat{text-align:center;line-height:1.15;padding:0 4px;min-width:96px}
  .bar-stat strong{display:block;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
  .bar-stat span{font-size:11px;color:var(--ink-soft);font-variant-numeric:tabular-nums}

  /* The model gets the screen, and room to clear the bar. */
  .workspace{padding:16px 14px calc(96px + env(safe-area-inset-bottom))}
  .workspace-heading h2{font-size:24px;margin:4px 0 14px}
  #viewport{height:min(56vh,520px)}
  .viewer-only #viewport{height:min(68vh,640px)}
  .stage{border-radius:14px}
  .tabs{gap:5px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{white-space:nowrap;flex:none}
  .camera{gap:5px;padding:9px}
  .camera button{font-size:11.5px;padding:6px 8px}

  /* Controls sized for thumbs. */
  .fields{gap:18px}
  .field select,input[type=range]{min-height:44px}
  .field select{font-size:15px}
  .swatches{flex-wrap:wrap;gap:12px}
  .swatches button{width:34px;height:34px}
  summary{padding:4px 0;min-height:34px}
  .presets{grid-template-columns:1fr 1fr;gap:10px}
  .presets button{min-height:84px}
}
@media (max-width:860px) and (prefers-reduced-motion:reduce){
  aside,.drawer-scrim{transition:none}
}
/* Desktop keeps its rails: no bar, no scrim, no drawer chrome. */
@media (min-width:861px){
  .mobile-bar,.drawer-scrim,.drawer-head{display:none}
}

/* Garage and Space presets have no reference photograph, so they draw themselves: the same
   axonometric the catalog cards use, built from the design's own dimensions. It replaces a
   striped block that was identical on all twenty-one of them.

   The drawing takes its colours from custom properties, so the pressed state inverts it the way
   the striped block used to invert, and dark mode is a redefinition rather than a second SVG. */
.presets .preset-thumb{
  --card-wall:var(--paper-dim); --card-side:var(--panel); --card-roof:var(--ink);
  --card-edge:var(--ink); --card-door:var(--paper); --card-glass:var(--line); --card-reveal:#DCD7CA;
  display:block;height:80px;margin-bottom:8px;border-radius:3px;background:var(--paper);
  padding:5px 6px;overflow:hidden;
}
.presets .preset-thumb svg{width:100%;height:100%;display:block;overflow:visible}
.chalk-render{width:100%!important;height:100%!important;object-fit:contain!important;padding:6px;box-sizing:border-box;display:block}
.presets button[aria-pressed=true] .preset-thumb{
  --card-wall:#3A382F; --card-side:#2B2A22; --card-roof:#100F0C; --card-edge:#C9C3B4;
  --card-door:#4A463D; --card-glass:#5A5648; --card-reveal:#1A1916;
  background:#2b2a22;
}
/* An imported model, told apart from the catalog without being pushed below it.

   It is the same kind of thing - a design you can start from - so it gets the same button and the
   same drawing, and one dotted edge saying where it came from. A separate section would have said
   it was a lesser sort of design, and a badge on an 80-pixel card would have covered the drawing
   that is the reason the card is there. */
.presets .preset-imported .preset-thumb{
  border:1px dashed var(--line);
  padding:4px 5px;
}


/* The three kinds of building, above the preset strip. Equal columns rather than a flex row:
   "Backyard Houses" is twice the width of "Garages", and left to size themselves the tabs jump
   about as the labels change. The rail is 270px at its narrowest, so they are small and flat
   rather than the pill buttons used in the workspace. */
.preset-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:13px}
.preset-tabs button{border-radius:7px;padding:8px 4px;font-size:12.5px;font-weight:600;text-align:center;white-space:nowrap}
@media(max-width:700px){.preset-tabs button{font-size:13.5px;padding:10px 4px}}



/* The list of openings on the current design, at the foot of the Doors & windows group.
   Separated from that group's two settings by a rule rather than boxed in a card of its own:
   inside an already-bordered section a card is a box in a box, and it was one of the reasons
   the list read as a separate subject from the settings that govern it. */
.doors-note{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line)}
#doors{margin-top:2px}

/* The placement controls in an opening's editor: nudge along the wall, raise the sill, and the
   alignments. Laid out as labelled rows so a person reads "Along wall  3'-8"" rather than three
   unlabelled arrows, and a control whose move would be refused is disabled rather than offered. */
.opening-place{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);display:grid;gap:7px}
.opening-place .place-row{display:grid;grid-template-columns:5.2em 1.9em 1fr 1.9em;align-items:center;gap:6px}
.opening-place .place-row span{font-size:.78rem;color:var(--muted)}
.opening-place .place-row output{font-variant-numeric:tabular-nums;text-align:center;font-size:.82rem}
.opening-place button{border:1px solid var(--line);background:var(--paper);border-radius:4px;padding:3px 6px;font:inherit;font-size:.78rem;cursor:pointer;color:inherit}
.opening-place button:hover:not(:disabled){background:var(--paper-dim)}
.opening-place button:disabled{opacity:.32;cursor:default}
.opening-place .place-actions{display:flex;flex-wrap:wrap;gap:5px}
.opening-place .place-align{display:grid;gap:3px;font-size:.78rem;color:var(--muted)}
.opening-place .place-travel{margin:0;font-size:.72rem;color:var(--muted)}
/* A door has no sill to raise, so that row is a label and a statement rather than two arrows and a
   number. It inherited the four-column grid and dropped "on the floor" into the 2em arrow column,
   where it wrapped to three lines. */
.opening-place .place-note{grid-template-columns:5.2em 1fr}
.opening-place .place-note output{text-align:left;color:var(--muted);font-style:italic}

/* Adding something to a wall. A blank elevation used to offer its finish and nothing else, because
   nothing could put anything on it; these sit under the finish controls in the same editor. */
.wall-add{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);display:grid;gap:6px}
.wall-add > span{font-size:.78rem;color:var(--muted)}
.wall-add button,.opening-place button{border:1px solid var(--line);background:var(--paper);border-radius:4px;padding:4px 9px;font:inherit;font-size:.78rem;cursor:pointer;color:inherit}
.wall-add button:hover:not(:disabled){background:var(--paper-dim)}
.wall-add button:disabled{opacity:.32;cursor:default}

/* The lot from the homepage eligibility check, beside the design summary. */
.site-chip{display:flex;flex-direction:column;justify-content:center;padding:6px 14px;border:1px dashed var(--line);border-radius:12px;max-width:220px;min-width:0}
.site-chip small{font-size:10px;letter-spacing:.06em;color:var(--ink-soft);font-weight:600}
header:has(.site-chip){grid-template-columns:calc(var(--rail) + var(--gutter)) minmax(0,1fr) auto auto auto;gap:0 14px}
.site-chip strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:900px){.site-chip{display:none}}

.site-banner{display:none}
@media (max-width:900px){
  .site-banner{display:flex;gap:8px;align-items:baseline;padding:9px 16px;border-bottom:1px solid var(--line);background:var(--panel);font-size:13px;min-width:0}
  .site-banner strong{font-size:11px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
  .site-banner span{color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* Phone header: the three actions in a row beside the wordmark, not a column a third of the screen tall. */
@media (max-width:700px){
  header{min-height:0;align-items:center;flex-wrap:wrap;padding:12px 14px;gap:10px}
  .header-actions{flex-direction:row;flex-wrap:wrap;justify-content:flex-end;gap:6px}
  .header-actions button,.header-actions a.linkbtn{font-size:13px;padding:9px 12px;min-height:40px;display:inline-flex;align-items:center}
}

/* --- Sidebar scrollbars: a thin rounded thumb on a clear track instead of the system bar. Chrome,
   Edge and Safari draw the ::-webkit-scrollbar parts; Firefox, which cannot, gets its own thin
   bar in the same colors. --- */
aside::-webkit-scrollbar{width:10px;height:10px}
aside::-webkit-scrollbar-track{background:transparent}
aside::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px;border:3px solid transparent;background-clip:padding-box;min-height:40px}
aside:hover::-webkit-scrollbar-thumb{background-color:#CFC9BB}
aside::-webkit-scrollbar-thumb:hover,aside::-webkit-scrollbar-thumb:active{background-color:var(--ink-soft)}
aside::-webkit-scrollbar-corner{background:transparent}
@supports not selector(::-webkit-scrollbar){aside{scrollbar-width:thin;scrollbar-color:#CFC9BB transparent}}

.light-row input[type=range]{width:100%}
.light-remove,.light-actions button{font:inherit;font-size:12.5px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);cursor:pointer;align-self:flex-start}
.light-actions{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 4px}
.lights-head{margin-left:0}

/* Garage strip: flat roof, then gable, under a heading each. */
.presets .preset-group{grid-column:1/-1;margin:10px 0 2px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.presets .preset-group:first-of-type{margin-top:0}
.presets .preset-group[hidden]{display:none}

/* "Customize this": the one blue button in the bar - the site's accent, or the brand's on a
   white-label host (brand.js sets --brand). */
.header-actions .customize-this{background:var(--brand,#2F5FEA);border-color:var(--brand,#2F5FEA);color:var(--brand-ink,#fff);white-space:nowrap}
.header-actions .customize-this:hover{background:var(--brand,#2F5FEA);border-color:var(--brand,#2F5FEA);filter:brightness(1.08)}

/* Header actions, in three levels so there is one clear thing to do:
   primary    Customize this - the only filled button (Ekstra blue, or the brand's colour and
              button style on a white-label site: brand.js themes .primary)
   secondary  Save design, Get a price - outlined, quiet
   tertiary   Log in - text only
   Two filled buttons in one colour (as white-label sites had) leave nothing to choose between. */
.header-actions{align-items:center}
.header-actions .save-btn{display:inline-flex;align-items:center;gap:7px;background:transparent;border:1px solid var(--line);color:var(--ink)}
.header-actions .save-btn:hover{background:var(--paper-dim);border-color:var(--ink-soft)}
.header-actions .save-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;flex:none}
.header-actions a.linkbtn#price-link{background:transparent;padding:10px 15px;font-size:14px}
.header-actions a.linkbtn.login-link{background:transparent;border-color:transparent;padding-left:8px;padding-right:8px}
.header-actions a.linkbtn.login-link:hover{background:transparent;border-color:transparent;text-decoration:underline;text-underline-offset:3px}

/* ---- "Customize this": the customization request modal (customize.js) ---- */
.cz-backdrop{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(22,21,15,.55)}
.cz-backdrop[hidden]{display:none}
body.cz-open{overflow:hidden}
.cz-modal{position:relative;width:min(640px,100%);max-height:calc(100vh - 40px);overflow:auto;background:var(--paper);border-radius:14px;padding:28px 28px 22px;box-shadow:0 20px 60px rgba(22,21,15,.3)}
.cz-x{position:absolute;top:12px;right:12px;width:34px;height:34px;padding:0;border-radius:50%;font-size:20px;line-height:1;background:var(--panel)}
.cz-steps{display:flex;gap:6px;list-style:none;margin:0 40px 18px 0;padding:0;counter-reset:cz}
.cz-steps li{flex:1;font-size:11px;letter-spacing:.04em;color:var(--ink-soft);border-top:3px solid var(--line);padding-top:7px;counter-increment:cz}
.cz-steps li::before{content:counter(cz) ". "}
.cz-steps li.done{border-color:color-mix(in srgb,var(--brand,#2F5FEA) 45%,var(--line))}
.cz-steps li.on{border-color:var(--brand,#2F5FEA);color:var(--ink);font-weight:600}
/* The studio's own type (DM Sans), not a display serif: the rest of the interface, the dashboard
   and the marketing pages are all sans, and a serif here read as a different product. */
.cz-body h2{font-family:inherit;font-weight:600;font-size:24px;letter-spacing:-.015em;line-height:1.2;margin:0 0 8px}
.cz-sub{font-size:14px;line-height:1.55;color:var(--ink-soft);margin:0 0 18px}
.cz-sub strong{color:var(--ink)}
.cz-areas{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cz-area{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;border-radius:10px;padding:13px 14px;background:var(--paper);border:1.5px solid var(--line)}
.cz-area span{font-size:12px;color:var(--ink-soft);font-weight:400}
.cz-area strong{font-size:14px}
.cz-area[aria-pressed=true]{background:color-mix(in srgb,var(--brand,#2F5FEA) 8%,var(--paper));border-color:var(--brand,#2F5FEA);color:var(--ink)}
.cz-area[aria-pressed=true] span{color:var(--ink-soft)}
.cz-field{display:block;margin-bottom:14px}
.cz-field span{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.cz-field em{font-weight:400;color:var(--ink-soft);font-style:normal}
.cz-field textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:10px 12px;font:inherit;font-size:14px;color:var(--ink);background:var(--paper);resize:vertical}
.cz-field textarea:focus{outline:2px solid var(--brand,#2F5FEA);outline-offset:1px}
.cz-review{margin:0;display:grid;grid-template-columns:minmax(120px,32%) 1fr;gap:10px 16px;font-size:14px}
.cz-review dt{font-weight:600}
.cz-review dd{margin:0;line-height:1.5;white-space:pre-wrap}
.cz-muted{color:var(--ink-soft)}
.cz-small{font-size:12px}
.cz-lines{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.cz-line{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:13px 15px;border-top:1px solid var(--line);font-size:14px}
.cz-line:first-child{border-top:0}
.cz-line span{display:block;font-size:12px;color:var(--ink-soft);margin-top:3px}
.cz-line b{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.cz-total{background:var(--panel)}
.cz-total b{font-size:18px}
.cz-eta{margin-top:14px;padding:13px 15px;border-radius:10px;background:color-mix(in srgb,var(--brand,#2F5FEA) 8%,var(--paper));font-size:13px;line-height:1.5}
.cz-eta strong{display:block;font-size:14px;margin-bottom:2px}
.cz-error{margin:14px 0 0;padding:10px 12px;border-radius:8px;background:#FBEDEA;color:var(--bad);font-size:13px}
.cz-actions{display:flex;justify-content:space-between;gap:10px;margin-top:22px}
.cz-actions .cz-primary{margin-left:auto}
.cz-primary{background:var(--brand,#2F5FEA);border:1px solid var(--brand,#2F5FEA);color:var(--brand-ink,#fff);border-radius:999px;padding:11px 20px;font-size:14px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center}
.cz-primary:hover{background:var(--brand,#2F5FEA);border-color:var(--brand,#2F5FEA);filter:brightness(1.07)}
.cz-primary:disabled{opacity:.45;cursor:not-allowed;filter:none}
.cz-ghost{background:transparent}
.cz-done{text-align:center;padding:10px 0 4px}
.cz-check{width:54px;height:54px;border-radius:50%;margin:0 auto 14px;display:grid;place-items:center;font-size:26px;color:#fff;background:var(--brand,#2F5FEA)}
@media(max-width:560px){.cz-modal{padding:22px 18px 18px}.cz-areas{grid-template-columns:1fr}.cz-review{grid-template-columns:1fr}.cz-review dd{margin-bottom:6px}.cz-body h2{font-size:21px}}

/* Editing a brand's model (studio/app.js brandEditStart): the bar under the header. */
.brand-edit-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 20px;background:#16150f;color:#fff;font-size:13.5px}
.brand-edit-bar .be-what strong{font-weight:600}
.brand-edit-bar .be-name{display:flex;align-items:center;gap:8px;margin-left:auto}
.brand-edit-bar .be-name span{opacity:.7;font-size:12px}
.brand-edit-bar input{font:inherit;padding:7px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;min-width:220px}
.brand-edit-bar .linkbtn{color:#fff;opacity:.8}
.brand-edit-bar .be-msg{flex-basis:100%;font-size:12.5px;opacity:.85}
.brand-edit-bar .be-msg:empty{display:none}
@media (max-width:700px){.brand-edit-bar .be-name{margin-left:0;flex:1}.brand-edit-bar input{min-width:0;width:100%}}