/* ZenDesign (/zendesign), visual-first (Andy, October 14): a design studio with Scan,
   Plan and Design views and a palette that swaps finishes in the model, then the scan,
   the checks and the way in. Tokens, type, buttons, frames and focus come from tokens v1
   (review/base.css, app/platform.css); this file only lays out the page. */

.zd-page{padding-bottom:8px}
:where(.zd-page) p,:where(.zd-page) h2,:where(.zd-page) h3,:where(.zd-page) figure{margin:0}

/* Intro */
.zd-intro{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:end;padding:clamp(36px,5vw,64px) 0 clamp(24px,3.5vw,36px)}
.zd-intro .product-lockup{margin-bottom:20px}
.zd-intro h1{font-size:var(--text-display);max-width:11ch}
.zd-intro .lead{max-width:30em}
.zd-intro .actions{margin-top:24px}

/* Studio: the views on the left, the palette on the right */
.zd-studio{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(16px,2vw,24px);align-items:start}
.zd-tabs{display:inline-flex;gap:4px;padding:4px;margin-bottom:12px;border:1px solid var(--rule);border-radius:var(--radius-control);background:var(--surface-sunk)}
.zd-tabs [role=tab]{min-height:36px;padding:6px 16px;border:0;border-radius:6px;background:none;color:var(--text-muted);font-size:14px;font-weight:500}
.zd-tabs [role=tab]:hover{color:var(--text);background:color-mix(in srgb,var(--text) 6%,transparent)}
.zd-tabs [role=tab][aria-selected=true]{background:var(--text);color:var(--bg)}
.zd-view figcaption{margin-top:10px}
.zd-frame{aspect-ratio:1.5;display:grid;grid-template:minmax(0,1fr) / minmax(0,1fr);place-items:center;background:var(--surface-sunk)}
.zd-frame>img{width:100%;height:100%;object-fit:contain}
.zd-light{background:#f5f4ee}
.zd-plans{grid-template:minmax(0,1fr) / 1fr 1fr;gap:clamp(10px,2vw,24px);padding:20px clamp(12px,2vw,24px) 16px}
.zd-plans figure{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:8px;height:100%;min-height:0}
.zd-plans img{width:100%;height:100%;object-fit:contain}
.zd-plans figcaption{font:10.5px/1.3 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:#56635b;text-align:center}

.zd-model{background:#1d1f1c}
.zd-model>img{object-fit:cover}
.zd-model[data-model-state=live]>img{visibility:hidden}
.zd-model canvas{position:absolute;inset:0;display:block;width:100%!important;height:100%!important;cursor:grab;animation:zd-in var(--reveal) var(--ease)}
.zd-model[data-dragging] canvas{cursor:grabbing}
@keyframes zd-in{from{opacity:0}}
.model-status{position:absolute;left:12px;bottom:12px;z-index:1;padding:5px 8px;border-radius:4px;background:rgb(20 26 23 / .85);color:#efeadc;font-size:12px}
.zd-tools{position:absolute;right:12px;top:12px;z-index:1}
.zd-tools button{min-height:36px;padding:6px 12px;border-color:rgb(239 234 220 / .3);background:rgb(16 22 19 / .8);color:#efeadc;font-size:13px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.zd-tools button:hover{border-color:#efeadc;background:rgb(16 22 19 / .95)}
.zd-tools button[aria-pressed=true]{background:#efeadc;color:#18201c;border-color:#efeadc}

.zd-palette{margin-top:50px;padding:6px 18px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface)}
.zd-palette h2{padding:12px 0 6px;font:var(--text-label)/1.5 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.zd-group{padding:12px 8px;margin:0 -8px;border-top:1px solid var(--rule);border-radius:6px;transition:background-color var(--quick) var(--ease)}
.zd-group:hover,.zd-group:focus-within,.zd-group.is-found{background:color-mix(in srgb,var(--zendesign) 18%,transparent)}
.zd-group-head{display:grid;gap:2px;margin-bottom:10px!important;font-size:14px;line-height:1.35}
.zd-group-head>span:first-child{font-weight:600}
.zd-choice{color:var(--text-muted);font-size:13px}
.zd-swatches{display:flex;gap:10px}
.zd-swatches [role=radio]{width:30px;height:30px;padding:0;border:1px solid rgb(255 255 255 / .25);border-radius:50%;background:var(--swatch);box-shadow:0 0 0 2px var(--surface);transition:box-shadow var(--quick) var(--ease)}
.zd-swatches [role=radio].metal{background:linear-gradient(135deg,color-mix(in srgb,var(--swatch) 55%,#fff) 0%,var(--swatch) 45%,color-mix(in srgb,var(--swatch) 70%,#000) 100%)}
.zd-swatches [role=radio]:hover{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--rule-strong)}
.zd-swatches [role=radio][aria-checked=true]{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--text)}
.zd-swatches [role=radio][aria-disabled=true]{cursor:default}

/* Sections */
.zd-section{margin-top:var(--section-space);padding-top:clamp(28px,4vw,40px);border-top:1px solid var(--rule)}
.zd-section>h2{margin-bottom:clamp(20px,3vw,32px)}

/* Measured in minutes */
.zd-measure-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:end;margin-bottom:clamp(20px,3vw,32px)}
.zd-measure-head p{font-size:var(--text-lead);line-height:1.55;color:var(--text-muted);max-width:32em}
.zd-measure-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,2vw,20px);align-items:center}
.zd-measure-pair figcaption{margin-top:10px}
.zd-measure-pair .zd-frame{aspect-ratio:1.43}
.zd-measure-pair .zd-frame>img{padding:clamp(10px,2vw,22px)}

/* Checked before it's ordered: four tiles, each a picture and a few words */
.zd-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,20px)}
.zd-tile p{margin-top:12px!important;font:600 17px/1.3 var(--font-head);letter-spacing:-.015em}
.zd-tile a{text-decoration-color:color-mix(in srgb,currentColor 45%,transparent)}
.zd-tile-visual{aspect-ratio:4/3;display:grid;place-items:center;padding:16px;border-radius:var(--radius);border:1px solid var(--sheet-rule);background:var(--sheet-raised);color:var(--sheet-text)}
.zd-fit{width:100%;height:auto}
.zd-fit .wall{fill:none;stroke:#18201c;stroke-width:4;stroke-linecap:square}
.zd-fit .bad{fill:#fbe1d6;stroke:#b4532a;stroke-width:2}
.zd-fit .good{fill:#e1eedc;stroke:#2f6b3f;stroke-width:2;stroke-dasharray:5 4}
.zd-fit text{font:11px var(--font-mono);text-anchor:middle}
.zd-fit .dim{fill:#56635b}.zd-fit .bad-text{fill:#8a3f1b}.zd-fit .good-text{fill:#1f5a2f;font-weight:600}
.zd-code,.zd-specs{list-style:none;margin:0;padding:0;width:100%;font-size:12.5px}
.zd-code li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--sheet-rule)}
.zd-code li:first-child{border-top:0}
.zd-specs li{display:grid;grid-template-columns:18px auto minmax(0,1fr);gap:8px;align-items:center;padding:7px 0;border-top:1px solid var(--sheet-rule);font-weight:600}
.zd-specs li:first-child{border-top:0}
.zd-specs i{width:18px;height:18px;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 1px rgb(0 0 0 / .15)}
.zd-specs span{color:var(--sheet-muted);font-weight:400;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zd-handoff{grid-template-columns:minmax(0,1fr) auto;gap:12px}
.zd-handoff>img{width:100%;max-height:100%;object-fit:contain}
.zd-to{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:20px;background:var(--zenlink-tint);color:#0b5a53;font-size:12.5px;font-weight:600;white-space:nowrap}
.zd-to::before{content:"→";font-weight:400}

/* The way in */
.zd-closing{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px 48px}
.zd-closing h2{margin-bottom:10px}
.zd-closing p{color:var(--text-muted);max-width:36em}

@media (max-width:1080px){
  .zd-studio{grid-template-columns:minmax(0,1fr) 260px}
  .zd-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .zd-intro,.zd-measure-head{grid-template-columns:1fr;gap:16px;align-items:start}
  .zd-studio{grid-template-columns:1fr}
  /* The palette becomes a strip of swatch cards under the view */
  .zd-palette{display:flex;gap:10px;margin:0;padding:0 0 6px;border:0;background:none;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin}
  .zd-palette h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .zd-group{flex:0 0 auto;width:min(220px,62vw);margin:0;padding:12px;border:1px solid var(--rule);background:var(--surface);scroll-snap-align:start}
  .zd-measure-pair{grid-template-columns:1fr}
}
@media (max-width:560px){
  .zd-frame{aspect-ratio:1.1}
  .zd-tiles{grid-template-columns:1fr}
  .zd-tile-visual{aspect-ratio:16/10}
}

/* Real inspiration, close to the choices it informs. */
.zd-inspiration{margin:0 0 36px}
.zd-inspiration-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:0 0 16px}
.zd-inspiration h2{font-size:22px;letter-spacing:-.03em}
.zd-inspiration-head p{color:var(--text-muted);font-size:14px}
.zd-inspiration-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.zd-inspiration-card{min-width:0}
.zd-pin-photo{position:relative;display:block;height:200px;border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
.zd-pin-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 60%;transition:transform 240ms ease}
.zd-pin-photo:hover img{transform:scale(1.035)}
.zd-pinterest{position:absolute;right:10px;bottom:10px;padding:5px 9px;border-radius:20px;background:#f5f2e9;color:#762d35;font-size:11px;font-weight:600}
.zd-inspiration-card>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-top:10px}
.zd-inspiration h3{font-size:15px;letter-spacing:0}
.zd-inspiration [data-look]{border:0;padding:0;background:none;min-height:32px;font-size:12px;color:var(--zendesign-ink);text-decoration:underline;text-underline-offset:4px}

.zd-studio{grid-template-columns:minmax(0,1fr) 330px;scroll-margin-top:90px}
.zd-frame{aspect-ratio:1.2}
.zd-palette[hidden]{display:none}
.zd-studio:not([data-view=design]){grid-template-columns:minmax(0,1fr);max-width:1000px}
.zd-studio:not([data-view=design]) .zd-frame{aspect-ratio:1.6}
.zd-palette{padding:8px 14px}
.zd-palette h2{text-transform:none;letter-spacing:0;font:600 15px/1.5 var(--font-head);color:var(--text)}
.zd-fixture-options{display:flex;gap:7px}
.zd-fixture-options [role=radio]{flex:1;min-width:0;padding:4px 4px 7px;border:1px solid var(--rule);border-radius:7px;background:var(--surface-sunk);color:var(--text-muted);display:grid;justify-items:center;gap:3px}
.zd-fixture-options [role=radio][aria-checked=true]{border-color:var(--zendesign-ink);background:color-mix(in srgb,var(--zendesign) 22%,var(--surface-sunk));color:var(--text);box-shadow:inset 0 0 0 1px var(--zendesign-ink)}
/* Each choice is a still of that fixture in this room, rendered from the studio's own model */
.zd-fixture-options img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;background:#e9e4d6}
.zd-fixture-options [role=radio]:not([aria-checked=true]):hover{border-color:var(--rule-strong)}
.zd-fixture-options span{font-size:11px;line-height:1.3;text-align:center}
/* The choice the pro's plan uses, so the others read as styles to compare */
.zd-fixture-options [role=radio]{position:relative}
.zd-planned{position:absolute;left:7px;top:7px;padding:1px 4px;border-radius:3px;background:rgb(24 32 28 / .85);color:#efeadc;font:600 8px/1.4 var(--font-mono);font-style:normal;letter-spacing:.04em;text-transform:uppercase}
.zd-fixture-options [aria-disabled=true]{opacity:.55;cursor:default}
.zd-finishes{border-top:1px solid var(--rule);padding:12px 0 4px}
.zd-finishes summary{cursor:pointer;font-size:13px;color:var(--text-muted)}
.zd-finishes .zd-group:first-of-type{border-top:0}

/* The captured room stays untextured; the inspection moves to useful details. */
.zd-capture-scene{position:relative;overflow:hidden}
.zd-capture-scene>img{filter:contrast(1.15) brightness(.97);transition:transform 650ms cubic-bezier(.2,.65,.3,1);transform-origin:52% 62%;padding:24px 0 40px}
.zd-capture-scene[data-capture-scene=bath]>img{transform:scale(1.45) translate(-4%,-2%)}
.zd-capture-scene[data-capture-scene=doors]>img{transform:scale(1.4) translate(-3%,10%)}
.zd-capture-note{position:absolute;left:16px;top:16px;max-width:calc(100% - 32px);padding:8px 12px;background:#fffef5e8;border:1px solid #d3d3ca;border-radius:6px;color:#253b32;font-size:13px;font-weight:500}
.zd-capture-open{position:absolute;right:16px;bottom:16px;padding:8px 12px;background:#253b32;color:#f5f2e9;border-radius:6px;font-size:12px;text-decoration:none}
.zd-capture-choices{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.zd-capture-choices button{min-height:38px;padding:7px 12px;font-size:12px}
.zd-capture-choices [aria-pressed=true]{background:var(--text);color:var(--bg)}
.zd-measure-card figcaption{display:grid;gap:4px;color:var(--text-muted);font-size:14px}
.zd-measure-card strong{color:var(--text);font-size:17px;font-weight:600}

@media(max-width:1080px){.zd-studio{grid-template-columns:minmax(0,1fr) 290px}.zd-inspiration-card>div{display:block}.zd-pin-photo{height:180px}}
@media(max-width:900px){
 .zd-studio{grid-template-columns:1fr}.zd-palette{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;overflow:visible;padding:0;background:none;border:0;margin:0}
 .zd-palette h2{grid-column:1/-1;position:static;width:auto;height:auto;clip-path:none;padding:0}
 .zd-group{width:auto;min-width:0;margin:0;padding:10px}
 .zd-finishes{grid-column:1/-1}.zd-finishes .zd-group{margin-top:10px}
 .zd-frame{aspect-ratio:1.4}.zd-inspiration-head{display:block}.zd-inspiration-head p{margin-top:6px}
}
@media(max-width:620px){
 .zd-inspiration-grid{display:flex;overflow-x:auto;scroll-snap-type:x proximity;gap:12px;padding-bottom:10px}
 .zd-inspiration-card{flex:0 0 80%;scroll-snap-align:start}.zd-pin-photo{height:220px}
 .zd-inspiration-card>div{display:flex}.zd-inspiration h3{font-size:14px}
 .zd-palette{grid-template-columns:1fr}.zd-palette>.zd-group{padding:12px}
 .zd-group-head{display:flex;justify-content:space-between;gap:10px}
 .zd-fixture-options [role=radio]{padding:4px 4px 8px}
 .zd-fixture-options span{font-size:12px}.zd-frame{aspect-ratio:1.05}
 .zd-studio:not([data-view=design]) .zd-frame{aspect-ratio:1.05}
 .zd-capture-note{font-size:11px;left:10px;top:10px}.zd-capture-open{right:10px;bottom:10px}
}
@media(prefers-reduced-motion:reduce){.zd-pin-photo img,.zd-capture-scene>img{transition:none}.zd-pin-photo:hover img{transform:none}}

/* Inspiration lives in the studio (Andy, October 17): the photos are the first choice in the
   style panel, and the picked one stays pinned on the model. */
.zd-looks{padding:4px 0 12px}
.zd-look-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.zd-look-options [role=radio],.zd-look-add{position:relative;aspect-ratio:1;min-width:0;padding:0;border:1px solid var(--rule);border-radius:7px;overflow:hidden;background:var(--surface-sunk)}
.zd-look-options [role=radio] img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 240ms ease}
.zd-look-options [role=radio]:hover img{transform:scale(1.06)}
.zd-look-options [role=radio][aria-checked=true]{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--zendesign-ink)}
.zd-look-options [aria-disabled=true]{opacity:.55;cursor:default}
.zd-look-add{display:grid;place-content:center;justify-items:center;gap:2px;border-style:dashed;border-color:var(--rule-strong);color:var(--text-muted);font-size:11px;line-height:1.2;text-align:center;text-decoration:none}
.zd-look-add span{font-size:20px;line-height:1}
.zd-look-add:hover{color:var(--text);border-color:var(--text)}
.zd-look-note{margin-top:8px!important;color:var(--text-muted);font-size:12px;line-height:1.4}
.zd-looks .zd-group-head>span:first-child{font:600 15px/1.5 var(--font-head)}
.zd-palette>.zd-looks{padding-top:12px}

.zd-pinned{position:absolute;left:12px;top:12px;z-index:1;display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:center;width:min(290px,calc(100% - 140px));padding:8px 12px 8px 8px;border:1px solid rgb(239 234 220 / .25);border-radius:9px;background:rgb(16 22 19 / .88);color:#efeadc;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:zd-in var(--reveal) var(--ease)}
.zd-pinned img{display:block;width:72px;height:72px;object-fit:cover;border-radius:6px}
.zd-pinned small{display:block;font:600 10px/1.3 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--zendesign-ink)}
.zd-pinned strong{display:block;margin:2px 0;font-size:14px;line-height:1.3}
.zd-pinned a{font-size:12px;color:#c9cfc8;text-underline-offset:3px}

/* You bring, we handle */
.zd-bring-head{display:grid;gap:12px;max-width:44em;margin-bottom:clamp(20px,3vw,32px)}
.zd-bring-head p{font-size:var(--text-lead);line-height:1.55;color:var(--text-muted)}
.zd-bring-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2.6fr);gap:clamp(16px,2.4vw,32px);align-items:start}
.zd-bring h3{margin-bottom:12px!important;font:600 var(--text-label)/1.5 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--zendesign-ink)}
.zd-handle h3::before{content:"→ "}
.zd-bring-list ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.zd-bring-list li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:center;padding:12px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface);font-size:14.5px;line-height:1.35}
.zd-bring-list svg{width:22px;height:22px;fill:none;stroke:var(--zendesign-ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.zd-bring .zd-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
.zd-bring .zd-tile p{font-size:15.5px}

@media (max-width:1080px){
  .zd-bring-grid{grid-template-columns:1fr}
  .zd-bring-list ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zd-bring .zd-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .zd-palette>.zd-looks{grid-column:1/-1}
  .zd-look-options{grid-template-columns:repeat(4,minmax(0,88px))}
  .zd-pinned{grid-template-columns:52px minmax(0,1fr);gap:10px;width:min(260px,calc(100% - 130px))}
  .zd-pinned img{width:52px;height:52px}
}
@media (max-width:560px){
  .zd-bring-list ul,.zd-bring .zd-tiles{grid-template-columns:1fr}
  .zd-pinned{left:8px;top:8px;padding:6px 8px 6px 6px;grid-template-columns:40px minmax(0,1fr);width:calc(100% - 120px)}
  .zd-pinned img{width:40px;height:40px}
  .zd-pinned strong{font-size:12.5px}
  .zd-pinned a{display:none}
}
@media(prefers-reduced-motion:reduce){.zd-look-options [role=radio] img{transition:none}.zd-look-options [role=radio]:hover img{transform:none}.zd-pinned{animation:none}}
/* The palette's heading stays for screen readers; "Start from a photo" leads visually */
.zd-palette>h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);padding:0}