@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],label[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 designer 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:transparent; /* the model on the card itself, no white box (owner, 2026-10-14) */
  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:transparent; /* the model on the pressed card's own dark ground, no grey box (owner, 2026-10-14) */
}
/* 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. */
/* (No dotted edge any more: a model from the Builder, sent to the site, is stored as an imported one and is one of
   the catalogue's designs like any other - owner, 2026-10-11: "there is a dotted white line around it".) */


/* 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}
.wall-add button.on{background:var(--paper-dim)}
.door-pick{display:grid;gap:5px;padding:6px 0 2px}
.door-pick-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px;align-items:center;font-size:.78rem}
.door-pick-row select{font:inherit;font-size:.78rem;padding:3px 4px;max-width:150px}

/* 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}

/* "Order Now": the one filled button in the bar - the site's accent, or the brand's on a
   white-label host (brand.js sets --brand, and themes a.primary with the brand's button style). */
.header-actions a.linkbtn#price-link.order-now{background:var(--brand,#2F5FEA);border-color:var(--brand,#2F5FEA);color:var(--brand-ink,#fff);font-weight:600}
.header-actions a.linkbtn#price-link.order-now:hover{background:var(--brand,#2F5FEA);border-color:var(--brand,#2F5FEA);filter:brightness(1.08)}
.header-actions .customize-this{background:transparent;border:1px solid var(--line);color:var(--ink);white-space:nowrap}
.header-actions .customize-this:hover{background:var(--paper-dim);border-color:var(--ink-soft)}

/* Header actions, in three levels so there is one clear thing to do:
   primary    Order Now - 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, Customize this - 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 designer'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 (designer/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%}}
/* Inside the admin Builder's right rail (designer/app.js builderEmbedStart): the modifiers panel only. */
.embed-builder header,.embed-builder #aside-left,.embed-builder .workspace,.embed-builder .mobile-bar,.embed-builder .drawer-head,.embed-builder .drawer-scrim{display:none!important}
.embed-builder body{background:transparent}
/* The admin Builder's whole workspace (app.js embedFull): /designer as it is, its header and designs rail left to the Builder. */
.embed-builder-full header,.embed-builder-full #aside-left,.embed-builder-full .mobile-bar,.embed-builder-full .drawer-head,.embed-builder-full .drawer-scrim{display:none!important}
.embed-builder-full main{grid-template-columns:minmax(0,1fr) var(--rail);min-height:100vh}
.embed-builder-full aside{top:0;max-height:100vh}
/* Inside a sister site (app.js partnerEmbedStart): the 3D, the floor plan and the Basic modifiers; the sister site saves and reserves. */
.embed-partner header,.embed-partner #aside-left,.embed-partner #panel-mode,.embed-partner #reset,.embed-partner .save-gate,.embed-partner .mobile-bar [data-drawer="aside-left"],.embed-partner .order-now-bar{display:none!important}
.embed-partner main{grid-template-columns:minmax(0,1fr) var(--rail);min-height:100vh}
.embed-partner aside{top:0;max-height:100vh}
@media (max-width:700px){.embed-partner main{grid-template-columns:1fr}}
.embed-builder .modifiers-head{top:0!important}
.embed-builder main{display:block;min-height:0}
.embed-builder #aside-right{position:static!important;inset:auto!important;height:auto!important;max-height:none!important;overflow:visible!important;box-shadow:none!important;visibility:visible!important;border:0;padding:4px 18px 24px;display:block!important;transform:none!important;width:auto!important}

/* Phones: "Order Now" is a full-width bar in the accent along the very foot of the screen, under
   Designs / Customize, and the top bar keeps only Log in and Save design (no Order Now, no
   Customize this). */
.order-now-bar{display:none}
@media (max-width:860px){
  .header-actions #price-link,.header-actions #customize-this{display:none!important}
  .mobile-bar .order-now-bar{
    grid-column:1/-1;display:flex;align-items:center;justify-content:center;
    min-height:50px;margin-top:2px;border-radius:14px;
    background:var(--brand,#2F5FEA);border:1px solid var(--brand,#2F5FEA);color:var(--brand-ink,#fff);
    font-size:15.5px;font-weight:600;letter-spacing:.01em;text-decoration:none;
  }
  .mobile-bar .order-now-bar:active{filter:brightness(.94)}
  .workspace{padding-bottom:calc(156px + env(safe-area-inset-bottom))}
}

/* Basic / Advanced (app.js BASIC_KEYS): a two-way switch beside "Modifiers"; in Basic the short
   list stands open and the groups are hidden. */
/* Pinned to the top of the rail while its controls scroll under it (the rail scrolls on its own;
   sticking is measured inside its 27px top padding, hence -27px). */
.modifiers-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-27px 0 0;padding:27px 0 13px;position:sticky;top:-27px;z-index:3;background:var(--paper)}
.modifiers-head h2{margin:0}
.panel-mode{display:inline-flex;padding:3px;gap:2px;border-radius:999px;background:var(--panel);border:1px solid var(--line)}
.panel-mode button{border:0;background:transparent;padding:6px 12px;font-size:12.5px;font-weight:600;border-radius:999px;color:var(--ink-soft)}
.panel-mode button:hover{background:transparent;color:var(--ink)}
.panel-mode button[aria-pressed=true]{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px rgba(22,21,15,.14)}
.basic-fields{display:none}
#controls.is-basic .basic-fields{display:grid;border-top:1px solid var(--line);padding:19px 0 15px}
#controls.is-basic details{display:none}
@media (max-width:860px){
  /* Under the drawer's own sticky "Customize" head. */
  aside>.modifiers-head{padding:16px 22px 13px;margin:0;top:69px}
}

/* Colour circles (app.js swatchButtons / paintSwatches): the only way to choose a colour. The one
   the design has is ringed - not filled in ink, as a pressed button is. */
.swatches button[aria-pressed=true],.swatches button[aria-pressed=true]:hover{background:var(--color);border-color:var(--paper);box-shadow:0 0 0 2px var(--ink)}
.swatches button:hover{background:var(--color)}
.inline-swatches{display:grid;gap:7px;font-size:12.5px;margin:2px 0 10px}
.inline-swatches .swatches{flex-wrap:wrap;gap:7px}
.inline-swatches .swatches button{width:24px;height:24px;border-width:2px}
.swatches button:disabled{opacity:.3;cursor:not-allowed}
.swatch-name{font-size:12.5px;color:var(--ink-soft);text-align:right}
/* Phones: the house is not tappable (app.js phoneView), so no tip or edit box over it. */
@media (max-width:860px){#pick-tip,#inline-editor{display:none!important}}
@media (max-width:860px){.pick-hint{display:none}}
.camera .pick-hint{padding:0;font-size:inherit;flex-basis:auto}

/* The cutaway's wall height (app.js applyCut): a vertical slider on the left of the 3D view, top
   for the whole house, bottom for the floor. */
.cut-slider{position:absolute;left:12px;top:50%;transform:translateY(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 8px;border-radius:999px;background:color-mix(in srgb,var(--paper) 88%,transparent);border:1px solid var(--line);box-shadow:0 2px 9px rgba(22,21,15,.1)}
.cut-slider[hidden]{display:none}
.cut-slider input[type=range]{writing-mode:vertical-lr;direction:rtl;width:22px;height:min(46vh,240px);margin:0;accent-color:var(--ink);cursor:ns-resize}
.cut-slider output{font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:44px;text-align:center}
.cut-label{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
@media (max-width:860px){.cut-slider input[type=range]{height:min(30vh,170px)}}

/* A Builder model sent to the brand (app.js builderLayout): finishes only, in the one list, and a
   tab per storey over the plan. */
.plan-levels{display:flex;gap:4px;margin-left:auto;margin-right:8px}
.plan-levels[hidden]{display:none}
.plan-levels button{font-size:11.5px;padding:4px 9px;border-radius:999px}


/* A brand's model: its description, starting price and photos (app.js renderModelInfo). */
.model-info{border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:12px 14px;margin:0 0 12px;font-size:13.5px;line-height:1.55}
.model-info[hidden]{display:none}
.mi-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.mi-head span{font-weight:600}
.model-info p{margin:6px 0 0;color:var(--ink-soft)}
.mi-photos{display:flex;gap:8px;overflow-x:auto;margin-top:10px;scrollbar-width:thin}
.mi-photos img{height:84px;width:auto;border-radius:8px;border:1px solid var(--line);display:block}
.preset-featured{display:inline-block;margin-top:4px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand,#2F5FEA)}

/* Walk through (walkthrough.js): the 3D view full screen, with an exit and a hint over it. */
.viewer.walking{background:#11120f}
.viewer.walking-fixed{position:fixed;inset:0;z-index:1000;height:100vh;height:100dvh}
.viewer.walking #viewport{height:auto!important;min-height:0;flex:1}
.viewer.walking .camera,.viewer.walking .viewer-expand,.viewer.walking .cut-slider,.viewer.walking .pick-tip,.viewer.walking .inline-editor{display:none!important}
html.walk-lock,html.walk-lock body{overflow:hidden}
.walk-ui{position:absolute;inset:0;pointer-events:none;z-index:6}
.walk-exit{pointer-events:auto;position:absolute;top:16px;right:16px;background:rgba(22,21,15,.72);color:#fff;border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(6px);font-size:14px;padding:10px 16px;display:flex;gap:10px;align-items:center}
.walk-exit:hover{background:rgba(22,21,15,.9);border-color:rgba(255,255,255,.5)}
.walk-exit kbd{font:inherit;font-size:11px;opacity:.7;border:1px solid rgba(255,255,255,.35);border-radius:4px;padding:1px 5px}
.walk-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);margin:0;background:rgba(22,21,15,.72);color:#fff;font-size:14px;padding:10px 18px;border-radius:999px;backdrop-filter:blur(6px);white-space:nowrap;max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis}
.walk-hint[hidden],.walk-hint:empty{display:none}
@media(max-width:700px){.walk-hint{font-size:12px;bottom:16px}.walk-exit kbd{display:none}}
/* The site chip and banner lead with a map pin (app.js). */
.site-chip{flex-direction:row;align-items:center;gap:9px}
.site-chip-text{display:flex;flex-direction:column;min-width:0}
.site-pin{width:17px;height:17px;flex:none;fill:none;stroke:var(--ink-soft);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.site-banner{align-items:center}
.site-banner .site-pin{width:14px;height:14px;margin-right:-2px}
/* With the site chip in the header the four figures ran into each other and under it: each keeps
 * its width, and app.js (fitSummary) hides whole figures, least needed first, until the rest fit. */
.header-summary>div{flex:none}
.header-summary>div.squeezed{display:none}
.layout-review[hidden]{display:none!important}
/* The walkthrough's picture button sits beside Exit (walkthrough.js snapshot). */
.walk-tools{pointer-events:auto;position:absolute;top:16px;right:16px;display:flex;gap:8px;align-items:center}
.walk-tools .walk-exit{position:static}
.walk-shot{background:rgba(22,21,15,.72);color:#fff;border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(6px);font-size:14px;padding:10px 14px;display:flex;gap:8px;align-items:center}
.walk-shot:hover{background:rgba(22,21,15,.9);border-color:rgba(255,255,255,.5)}
.walk-shot svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.walk-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.walk-flash.on{animation:walk-flash .45s ease-out}
@keyframes walk-flash{0%{opacity:.75}100%{opacity:0}}
@media(max-width:700px){.walk-shot span{display:none}.walk-tools{top:12px;right:12px}}
/* The walkthrough's loading screen (walkthrough.js reveal): over the view until the house is dressed, lit and drawn, then faded. */
.walk-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:auto;z-index:1;background:radial-gradient(120% 90% at 50% 40%,#23221d 0%,#11120f 70%);opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s}
.walk-ui.loading .walk-loading{opacity:1;visibility:visible;transition:none}
.walk-ui.loading .walk-hint,.walk-ui.loading .walk-shot{display:none}
.walk-ui .walk-tools{z-index:2}
.walk-loading-card{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;color:#fff;padding:24px;animation:walk-rise .5s ease-out both}
.walk-spinner{position:relative;width:52px;height:52px;margin-bottom:6px;border-radius:50%;background:conic-gradient(from 0deg,rgba(255,255,255,0) 0deg,rgba(255,255,255,.95) 300deg,rgba(255,255,255,0) 360deg);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));animation:walk-spin .9s linear infinite}
.walk-spinner::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(255,255,255,.08)}
.walk-loading-name{font-size:20px;font-weight:600;letter-spacing:-.01em}
.walk-loading-name:empty{display:none}
.walk-loading-note{font-size:14px;color:rgba(255,255,255,.62);animation:walk-breathe 2s ease-in-out infinite}
@keyframes walk-spin{to{transform:rotate(360deg)}}
@keyframes walk-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes walk-breathe{0%,100%{opacity:.55}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.walk-spinner{animation-duration:2.4s}.walk-loading-note,.walk-loading-card{animation:none}}
/* Until the design a link (or a refresh) asked for is in place, the drawings, figures and options are
 * blank, then fade in: the default design never shows first (index.html, app.js designReady). */
#viewport canvas,#plan,#rooms,.header-summary,#controls,.bar-stat,#model-info,.site-chip{transition:opacity .3s ease}
html.awaiting-design #viewport canvas,html.awaiting-design #plan>svg,html.awaiting-design #rooms,html.awaiting-design .header-summary,html.awaiting-design #controls,html.awaiting-design .bar-stat,html.awaiting-design #model-info,html.awaiting-design .plan-levels,html.awaiting-design #audit-results{opacity:0}
/* View in your yard (app.js openAR, ar.js): the AR button beside the expand button, and its sheet. */
.viewer-tools{position:absolute;top:12px;right:58px;z-index:5;display:flex;gap:8px;align-items:center}
.viewer-ar{position:relative;height:38px;padding:0 12px;display:flex;gap:6px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:999px;box-shadow:0 2px 9px rgba(22,21,15,.12);color:var(--ink);font-size:13px;font-weight:600}
.viewer-ar:hover{background:var(--paper-dim);border-color:var(--ink-soft)}
.viewer-ar svg,.ar-go svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.viewer.walking .viewer-ar,.plan-only .viewer-ar,.viewer.walking .viewer-tools,.plan-only .viewer-tools{display:none!important}
html.awaiting-design .viewer-ar,html.awaiting-design .viewer-tools{visibility:hidden}
.ar-sheet{position:fixed;inset:0;z-index:2000;background:rgba(22,21,15,.55);display:grid;place-items:center;padding:16px}
.ar-sheet[hidden]{display:none}
.ar-card{position:relative;background:var(--paper);color:var(--ink);border-radius:16px;width:min(520px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:22px 22px 18px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.ar-card h3{margin:0 0 4px;font-size:20px;letter-spacing:-.01em}
.ar-sub{margin:0 0 14px;color:var(--ink-soft);font-size:14px;line-height:1.45}
.ar-close{position:absolute;top:10px;right:10px;width:34px;height:34px;padding:0;border-radius:50%;font-size:20px;line-height:1}
.ar-stage{height:min(46vh,340px);border-radius:12px;background:var(--paper-dim);display:grid;place-items:center;overflow:hidden}
.ar-stage model-viewer{width:100%;height:100%;background:var(--paper-dim);--poster-color:transparent}
.ar-status{color:var(--ink-soft);font-size:14px;padding:0 16px;text-align:center}
.ar-go{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:8px;align-items:center;background:var(--ink);color:var(--paper);border-color:var(--ink);font-weight:600;padding:12px 18px;white-space:nowrap}
.ar-foot{margin-top:14px;display:flex;gap:14px;align-items:center}
.ar-qr{flex:none;width:132px;height:132px;background:#fff;border-radius:8px;padding:4px}
.ar-qr svg{width:100%;height:100%;display:block}
.ar-tip{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
.ar-tip strong{color:var(--ink)}
@media(max-width:520px){.ar-foot{flex-direction:column;align-items:flex-start}.viewer-ar span{display:none}.viewer-ar{width:38px;padding:0;justify-content:center}}
.ar-steps{margin:0;padding-left:18px;font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
.ar-steps li{margin:2px 0}.ar-steps strong{color:var(--ink)}
/* The sheet's 'View in your yard' keeps its colours on hover and focus: the designer's button hover
 * (a pale fill) turned it to white text on near-white. */
.ar-go:hover,.ar-go:focus,.ar-go:active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ar-modes{display:flex;gap:6px;margin:0 0 10px}
.ar-modes button{font-size:13px;font-weight:600;padding:7px 14px}
/* The edit bar's view buttons: outlined on the dark bar, light text (the designer's button fill made
 * them pale with white text, unreadable). Save stays the solid one. */
.brand-edit-bar button.linkbtn{background:transparent;color:#fff;opacity:1;border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;white-space:nowrap}
.brand-edit-bar button.linkbtn:hover,.brand-edit-bar button.linkbtn:focus{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
.brand-edit-bar #be-save{background:#fff;color:#16150f;border-color:#fff;white-space:nowrap}
.brand-edit-bar #be-save:hover{background:#e9e6de;color:#16150f}
.door-row-lit{animation:door-lit 2.2s ease-out}@keyframes door-lit{0%,35%{background:rgba(58,110,165,.16);box-shadow:0 0 0 2px rgba(58,110,165,.55)}100%{background:transparent;box-shadow:none}}

/* iOS zooms into a field whose text is under 16px and leaves the page zoomed: never on a touch screen. */
@media (pointer:coarse){input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea{font-size:16px!important;}}

/* A window wall's grid controls (app.js windowWallControls) and the note when a stretch refuses one. */
.inline-editor label.ww-range,.ww-range{display:grid;grid-template-columns:6.4em 1fr 2em;align-items:center;gap:8px;font-size:.8rem;margin:4px 0;text-align:left}
.ww-range span{color:var(--muted);text-align:left}
.ww-range input[type="range"]{width:100%;margin:0}
.ww-range output{text-align:right;font-variant-numeric:tabular-nums}
.ww-range select{grid-column:2 / 4}
.inline-editor .place-travel{margin:4px 0 0;font-size:.72rem;color:var(--muted)}
.ww-note{color:#8a4b2f !important}

/* In the admin Builder's rail (app.js builderEmbedStart): the click-to-edit editor sits at the top of the
   panel, in the flow, rather than floating over a 3D view the frame does not show. */
.embed-builder #inline-editor{position:static!important;left:auto!important;top:auto!important;width:auto!important;max-width:none!important;margin:0 0 14px;box-shadow:none;border:1px solid var(--line);border-radius:12px}
.embed-builder #inline-editor:not([hidden]){display:block!important}
/* The design strip waits, blank, for the catalogue (Ekstra's order, the Builder's models) and fades in (app.js
   catalogShown): never the compiled order first. */
#presets{transition:opacity .25s ease}
html.catalog-pending #presets{opacity:0;pointer-events:none}
/* The floor plan's own controls (owner, 2026-10-11): Mirrored, and an expand button that gives the plan the whole stage. */
.plan-heading{flex-wrap:wrap;justify-content:flex-start;gap:12px}
.plan-heading h3{margin-right:auto}
.plan-expand[aria-pressed=true]{background:var(--paper);color:var(--ink);border-color:var(--line)}
.plan-expand{width:32px;height:32px;padding:0;display:grid;place-items:center;background:var(--paper);border:1px solid var(--line);border-radius:50%;color:var(--ink)}
.plan-expand svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.plan-expand .icon-collapse,.stage.plan-big .plan-expand .icon-expand{display:none}
.stage.plan-big .plan-expand .icon-collapse{display:block}
.stage.plan-only .plan-expand{display:none}
.stage.plan-big{grid-template-columns:1fr}
.stage.plan-big .viewer{display:none}
.stage.plan-big .plan-panel{border:0}
.stage.plan-big #plan{height:min(74vh,780px)}
.stage.plan-big .room-list{grid-template-columns:1fr 1fr;gap:10px 30px}


/* A design's photos (gallery.js): the button beside AR with its count, and the lightbox. */
.viewer-gallery[hidden]{display:none}
.gallery-count{min-width:20px;height:20px;padding:0 6px;margin-left:2px;border-radius:999px;background:#2563eb;color:#fff;font-size:11.5px;font-weight:700;line-height:20px;text-align:center}
.gl{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;background:rgba(12,13,14,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#f3f1ec;opacity:0;transition:opacity .22s ease}
.gl.on{opacity:1}
.gl-top{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 6px;font-size:13px;letter-spacing:.04em}
.gl-count{opacity:.75}
.gl-btn{width:44px;height:44px;border-radius:999px;border:0;background:rgba(255,255,255,.1);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s}
.gl-btn:hover,.gl-btn:focus-visible{background:rgba(255,255,255,.22);outline:none}
.gl-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gl-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:14px;padding:6px 16px}
.gl-fig{margin:0;flex:1;min-width:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.gl-img{max-width:100%;max-height:calc(100% - 34px);object-fit:contain;border-radius:10px;box-shadow:0 18px 60px rgba(0,0,0,.45);opacity:0;transform:scale(.985);transition:opacity .3s ease,transform .3s ease}
.gl-img.in{opacity:1;transform:none}
.gl-cap{margin-top:10px;font-size:13.5px;opacity:.85;text-align:center}
.gl-thumbs{display:flex;gap:8px;justify-content:center;overflow-x:auto;padding:10px 16px 18px;scrollbar-width:thin}
.gl-thumb{flex:none;width:72px;height:52px;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;background:none;cursor:pointer;opacity:.55;transition:opacity .15s,border-color .15s}
.gl-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gl-thumb[aria-current="true"],.gl-thumb:hover{opacity:1;border-color:#fff}
@media(max-width:520px){.gl-stage{gap:0;padding:4px}.gl-prev,.gl-next{display:none}.viewer-gallery{width:auto;padding:0 10px}}
/* Loading and switching designs (app.js designReady, switchDesign): a spinner in the 3D view and the plan while the
   design is on its way; the one on screen fades out before the next is built, and the next fades and settles in. */
#plan{position:relative}
#viewport::after,#plan::after{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:conic-gradient(from 0deg,rgba(22,21,15,0) 0deg,rgba(22,21,15,.5) 300deg,rgba(22,21,15,0) 360deg);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));opacity:0;pointer-events:none;transition:opacity .2s ease;animation:studio-spin .85s linear infinite;will-change:transform,opacity;z-index:1}
html.awaiting-design #viewport::after,html.switching #viewport::after,html.awaiting-design #plan::after,html.switching #plan::after{opacity:1;transition-delay:.12s}
.plan-only #viewport::after,.viewer.walking #viewport::after{display:none}
@keyframes studio-spin{to{transform:rotate(360deg)}}
#viewport canvas,#plan>svg{transition:opacity .38s ease,transform .5s cubic-bezier(.2,.8,.2,1);transform-origin:50% 55%}
html.awaiting-design #viewport canvas,html.awaiting-design #plan>svg{transform:scale(.97)}
html.switching #viewport canvas,html.switching #plan>svg{opacity:0;transform:scale(.97);transition-duration:.16s,.16s;transition-timing-function:ease-in}
#rooms,#model-info,.header-summary,.bar-stat{transition:opacity .3s ease}
html.switching #rooms,html.switching #model-info,html.switching .bar-stat{opacity:.35;transition-duration:.15s}
/* The view tabs: what comes in, comes in softly. */
.stage>.viewer,.stage>.plan-panel{animation:studio-in .32s cubic-bezier(.2,.8,.2,1)}
@keyframes studio-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* The design strip: a tab's designs rise in, one after another. */
#presets button:not([hidden]){animation:studio-in .34s cubic-bezier(.2,.8,.2,1) backwards}
#presets button:nth-child(2){animation-delay:.03s}#presets button:nth-child(3){animation-delay:.06s}#presets button:nth-child(4){animation-delay:.09s}#presets button:nth-child(5){animation-delay:.12s}#presets button:nth-child(6){animation-delay:.15s}#presets button:nth-child(n+7){animation-delay:.18s}
#presets button{transition:transform .18s cubic-bezier(.2,.8,.2,1),background-color .18s ease,border-color .18s ease,box-shadow .18s ease}
#presets button:active{transform:scale(.97)}
.tabs button,[data-mode],[data-tab]{transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .15s ease}
.tabs button:active,[data-mode]:active{transform:scale(.96)}
@media(prefers-reduced-motion:reduce){#viewport::after,#plan::after{animation-duration:2.4s}#viewport canvas,#plan>svg,.stage>.viewer,.stage>.plan-panel,#presets button{transition:opacity .2s ease;transform:none!important;animation:none}}