/* Capsule Studio stylesheet section 1 */
/* ══════════════════════════════════════════
   CAPSULE STUDIO — DESIGN TOKENS
   Display: Cormorant Garamond (headings, brand voice)
   Body/UI: Inter (forms, data, controls)
   Palette: deep forest green + warm paper + gold accent
   ══════════════════════════════════════════ */
:root{
  --ink:#263128;
  --ink-soft:#59645B;
  --gold:#C96F46;
  --gold-soft:#E6B097;
  --orange:#E2600C;
  --paper:#F8F7F2;
  --paper-deep:#EEEDE7;
  --card:#FFFFFF;
  --line:rgba(38,49,40,.14);
  --line-soft:rgba(38,49,40,.08);
  --ink-on-gold:#FFFFFF;
  --success:#526F58;
  --success-bg:#EDF2EC;
  --warn:#A65335;
  --warn-bg:#F8EEE8;
  --danger:#A3493C;
  --danger-bg:#F8EBE8;
  --info-bg:#EEF0EB;
  --shadow-1:0 1px 2px rgba(38,49,40,.04);
  --shadow-2:0 10px 28px rgba(38,49,40,.08);
  --shadow-3:0 24px 64px rgba(38,49,40,.16);
  --r-sm:6px;
  --r-md:10px;
  --r-lg:16px;
  --display:'Cormorant Garamond',serif;
  --script:'Cascadia Mono',monospace;
  --brand:'Michroma',sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --sidebar-w:clamp(220px,22vw,280px);
  --topbar-h:56px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden}
.cs-root{
  font-family:var(--body);
  color:var(--ink);
  background:var(--paper);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  height:100vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.cs-root *{box-sizing:border-box}
.cs-root h1,.cs-root h2,.cs-root h3{font-family:var(--display);font-weight:600;color:var(--ink);margin:0}
.cs-root button{font-family:var(--body)}
.cs-root input,.cs-root select{font-family:var(--body);color:var(--ink)}
.cs-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* Focus visibility — accessibility floor */
.cs-root a:focus-visible,
.cs-root button:focus-visible,
.cs-root input:focus-visible,
.cs-root select:focus-visible,
.cs-root [tabindex]:focus-visible{
  outline:2.5px solid var(--gold);
  outline-offset:2px;
  border-radius:4px;
}

@media (prefers-reduced-motion: reduce){
  .cs-root *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
}

/* ── Common form controls ── */
.cs-input{
  width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--card);font-size:14px;color:var(--ink);transition:border-color .15s;
}
.cs-input:focus{border-color:var(--gold);outline:none}
.cs-input::placeholder{color:#9a9588}
.cs-input.cs-autofilled{background:var(--info-bg);border-color:#a9b88f}
.cs-label{font-size:11px;font-weight:600;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px;display:block}

.cs-btn{
  font-family:var(--body);font-weight:600;font-size:13.5px;border-radius:var(--r-sm);
  padding:11px 18px;cursor:pointer;border:1.5px solid transparent;transition:all .15s;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  -webkit-tap-highlight-color:transparent;
}
.cs-btn-primary{background:var(--ink);color:#fff}
.cs-btn-primary:hover{background:var(--ink-soft)}
.cs-btn-primary:disabled{background:#a9a99e;cursor:not-allowed}
.cs-btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.cs-btn-ghost:hover{border-color:var(--ink);background:var(--paper-deep)}
.cs-btn-gold{background:var(--gold);color:var(--ink-on-gold)}
.cs-btn-gold:hover{background:#bd9a58}

.cs-pill{
  display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:99px;
  font-size:12px;font-weight:600;
}
.cs-pill-ok{background:var(--success-bg);color:var(--success)}
.cs-pill-warn{background:var(--warn-bg);color:var(--warn)}
.cs-pill-danger{background:var(--danger-bg);color:var(--danger)}
.cs-pill-info{background:var(--info-bg);color:var(--ink-soft)}

.cs-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1)}
.cs-card-hd{
  padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;
}
.cs-card-hd .cs-ic{color:var(--gold);font-size:17px;flex-shrink:0}
.cs-card-hd h3{font-size:16px;letter-spacing:.01em}
.cs-card-bd{padding:18px}

/* ══════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════ */
.cs-hdr{
  background:var(--ink);color:#fff;flex-shrink:0;
  padding:10px clamp(14px,3vw,28px);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  position:sticky;top:0;z-index:40;
}
.cs-brand{display:flex;align-items:center;gap:10px;min-width:0}
.cs-logo-mark{
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  width:60px;height:60px;border-radius:50%;
  background:var(--orange);
  box-shadow:0 8px 22px rgba(0,0,0,.28);
}
.cs-logo-txt{min-width:0}
.cs-logo-seq{flex-shrink:0;display:none;align-items:center;gap:6px;padding:0 6px}
.cs-logo-seq svg{display:block}
@media (min-width:600px){.cs-logo-seq{display:flex}}
@media (min-width:860px){.cs-logo-seq{gap:9px}}
.cs-logo-name{font-family:var(--brand);font-weight:400;font-size:clamp(16px,2.4vw,20px);letter-spacing:.02em;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-logo-tm{font-size:.5em;font-weight:600;vertical-align:super;letter-spacing:0;margin-left:1px}
.cs-logo-by{font-family:var(--brand);font-weight:400;font-size:9px;letter-spacing:.09em;text-transform:uppercase;line-height:1;color:rgba(255,255,255,.5);white-space:nowrap;margin-top:3px}
.cs-tagline{
  font-family:var(--display);font-style:italic;font-size:17px;letter-spacing:.06em;
  color:var(--gold);white-space:nowrap;
}
@media (max-width:680px){.cs-tagline{display:none}}

/* ══════════════════════════════════════════
   PROGRESS BAR — puzzle-piece step markers
   ══════════════════════════════════════════ */
.cs-prog{
  background:var(--ink-soft);flex-shrink:0;
  padding:0 clamp(10px,3vw,24px);
  display:flex;align-items:stretch;overflow-x:auto;scrollbar-width:none;
}
.cs-prog::-webkit-scrollbar{display:none}
.cs-step{
  display:flex;align-items:center;gap:7px;padding:10px 4px;cursor:pointer;
  color:rgba(255,255,255,.42);font-family:var(--display);font-weight:600;font-size:13px;
  white-space:nowrap;flex-shrink:0;border:none;background:none;transition:color .15s;
  -webkit-tap-highlight-color:transparent;
}
.cs-step:disabled{cursor:default}
.cs-step .cs-stepnum{
  width:20px;height:20px;border-radius:5px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;border:1.5px solid rgba(255,255,255,.25);
  font-family:var(--body);
}
.cs-step.is-active{color:#fff}
.cs-step.is-active .cs-stepnum{background:var(--gold);border-color:var(--gold);color:var(--ink-on-gold)}
.cs-step.is-done{color:rgba(255,255,255,.72)}
.cs-step.is-done .cs-stepnum{background:rgba(255,255,255,.16);border-color:transparent}
.cs-step:not(:disabled):hover{color:#fff}
.cs-steplabel{display:none}
@media (min-width:520px){.cs-steplabel{display:inline}}
.cs-stepdiv{width:14px;flex-shrink:0;position:relative}
.cs-stepdiv::after{content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:rgba(255,255,255,.14)}

/* ══════════════════════════════════════════
   SCREEN SWITCHING
   ══════════════════════════════════════════ */
.cs-main{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.cs-scr{display:none;flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.cs-scr.is-active{display:flex;flex-direction:column}
/* Step 5 (Design) has its own internal two-pane layout — sidebar list
   and canvas each need to scroll independently of each other and of
   the page. Letting the whole screen scroll (the generic .cs-scr
   behavior) breaks that: a tall sidebar list would scroll the entire
   screen, dragging the canvas along with it. */
.cs-scr-fixed{overflow:hidden!important}
.cs-scr-fixed.is-active{display:flex;flex-direction:column}

/* ══════════════════════════════════════════
   GENERIC FORM SCREEN LAYOUT (steps 1,2,3,4,6)
   ══════════════════════════════════════════ */
.cs-page{
  width:100%;max-width:760px;margin:0 auto;
  padding:clamp(16px,3vw,32px) clamp(14px,4vw,28px) 40px;
}
.cs-stack{display:flex;flex-direction:column;gap:16px}
.cs-nav-row{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap}
.cs-nav-row .cs-btn{flex:1;min-width:140px}

/* ══════════════════════════════════════════
   STEP 1 — YOUR SITE
   ══════════════════════════════════════════ */
.cs-addr-row{display:flex;gap:8px;flex-wrap:wrap}
.cs-addr-field{position:relative;flex:1 1 240px;min-width:0}
.cs-addr-row .cs-btn{flex-shrink:0}
.cs-suggest{
  display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-3);z-index:30;max-height:240px;overflow-y:auto;
}
.cs-suggest.is-open{display:block}
.cs-sugg-item{
  padding:10px 13px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-bottom:1px solid var(--line-soft);
}
.cs-sugg-item:last-child{border-bottom:none}
.cs-sugg-item:hover,.cs-sugg-item.is-hl{background:var(--paper-deep)}
.cs-sugg-name{font-weight:600;font-size:13.5px}
.cs-sugg-lga{font-size:11.5px;color:var(--ink-soft);font-style:italic;white-space:nowrap}
.cs-addr-warn{font-size:12px;color:var(--warn);background:var(--warn-bg);border:1px solid #f0d8a8;border-radius:var(--r-sm);padding:8px 11px;margin-top:8px;font-style:italic}
.cs-addr-note{font-size:11.5px;color:var(--ink-soft);font-style:italic;margin:7px 0 0;line-height:1.4}

.cs-result{display:none;margin-top:14px;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.cs-result.is-open{display:block}
.cs-result-hd{padding:10px 14px;background:var(--info-bg);display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.cs-result-hd.is-warn{background:var(--warn-bg)}
.cs-result-bd{padding:14px;background:var(--paper)}
.cs-result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:14px}
.cs-result-item .cs-ri-label{font-size:10.5px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}
.cs-result-item .cs-ri-value{font-family:var(--display);font-weight:600;font-size:15px}
.cs-result-item.is-prime .cs-ri-value{font-size:17px;color:var(--ink)}

.cs-zonebox{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:11px 13px}
.cs-zonebox-hd{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.cs-zone-badge{background:var(--ink);color:var(--gold);font-family:var(--display);font-weight:700;font-size:13px;padding:3px 11px;border-radius:6px}
.cs-zone-lbl{font-size:12px;color:var(--ink-soft);font-style:italic;flex:1}
.cs-zone-edit{font-size:12px;color:var(--ink-soft);text-decoration:underline;cursor:pointer;background:none;border:none;font-family:var(--body);padding:0}
.cs-zone-stds{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:8px}
.cs-energy-box{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px}
.cs-energy-hd{font-size:12.5px;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:.02em;margin-bottom:5px}
.cs-energy-blurb{font-size:12.5px;color:var(--ink);line-height:1.45;margin:0 0 9px}
.cs-energy-list{margin:0;padding-left:18px;font-size:12px;color:var(--ink-soft);line-height:1.6}
.cs-energy-list li{margin-bottom:3px}
.cs-energy-disclaimer{font-size:10.5px;color:var(--ink-soft);font-style:italic;line-height:1.4;margin:11px 0 0}
.cs-zstd{background:var(--paper-deep);border-radius:var(--r-sm);padding:6px 8px;text-align:center}
.cs-zstd-l{font-size:9px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em}
.cs-zstd-v{font-family:var(--display);font-weight:600;font-size:13px}
.cs-zone-override{display:none;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.cs-zone-override.is-open{display:block}
.cs-chip-row{display:flex;flex-wrap:wrap;gap:8px}
.cs-svc-row{display:flex;flex-wrap:wrap;gap:16px}
.cs-svc-item{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:500;cursor:pointer;user-select:none}
.cs-svc-item input[type=checkbox]{width:16px;height:16px;accent-color:var(--ink);cursor:pointer}
.cs-chip{
  padding:8px 15px;border-radius:99px;font-size:12.5px;font-weight:500;cursor:pointer;
  border:1.5px solid var(--line);background:var(--card);color:var(--ink-soft);transition:all .12s;
}
.cs-chip:hover{border-color:var(--ink-soft)}
.cs-chip.is-sel{background:var(--ink);border-color:var(--ink);color:#fff}
.cs-chip.is-warn{border-color:#e2b66b;color:var(--warn);background:var(--warn-bg)}
.cs-chip.is-warn.is-sel{background:var(--warn);border-color:var(--warn);color:#fff}
.cs-chip.is-danger{border-color:#e2a89f;color:var(--danger);background:var(--danger-bg)}
.cs-chip.is-danger.is-sel{background:var(--danger);border-color:var(--danger);color:#fff}

.cs-autofill-note{
  display:none;align-items:center;gap:8px;background:var(--info-bg);border:1px solid #cddabb;
  border-radius:var(--r-sm);padding:8px 12px;font-size:12.5px;color:var(--ink-soft);font-style:italic;margin-bottom:14px;
}
.cs-autofill-note.is-open{display:flex}

.cs-dim-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.cs-dim-field label{font-size:11px;font-weight:600;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;display:block;margin-bottom:5px}
.cs-dim-inputwrap{display:flex;align-items:center;gap:5px}
.cs-dim-inputwrap input{flex:1;min-width:0}
.cs-dim-unit{font-size:12px;color:var(--ink-soft);flex-shrink:0}
@media (max-width:420px){.cs-dim-grid{grid-template-columns:repeat(2,1fr)}}

.cs-siteplan-wrap{background:var(--paper-deep);border:1px solid var(--line);border-radius:var(--r-md);padding:12px;margin:14px 0}
.cs-siteplan-cap{font-size:10.5px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;margin-bottom:9px}
.cs-siteplan-canvas{width:100%;display:block;border-radius:var(--r-sm)}
.cs-siteplan-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:9px}
.cs-leg-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--ink-soft)}
.cs-leg-swatch{width:11px;height:11px;border-radius:3px;flex-shrink:0}

.cs-twocol{display:grid;grid-template-columns:1fr 1.6fr;gap:14px}
@media (max-width:560px){.cs-twocol{grid-template-columns:1fr}}

/* ══════════════════════════════════════════
   STEP 2 — COLLECTIONS
   ══════════════════════════════════════════ */
.cs-coll-grid{display:flex;flex-direction:column;gap:10px}
.cs-step2-section{margin-top:24px}
.cs-step2-label{font-size:11.5px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px}
.cs-formsection{border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);padding:18px 18px 20px;margin-bottom:18px}
.cs-formsection-hd{display:flex;align-items:flex-start;gap:11px;margin-bottom:15px}
.cs-formsection-num{flex-shrink:0;width:25px;height:25px;border-radius:50%;background:var(--ink);color:var(--gold);font-family:var(--display);font-weight:700;font-size:12.5px;display:flex;align-items:center;justify-content:center;margin-top:1px}
.cs-formsection-title{font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink);line-height:1.25}
.cs-formsection-sub{font-size:11.5px;color:var(--ink-soft);margin-top:2px;line-height:1.4}
.cs-formsection-cta-note{font-size:12px;color:var(--ink-soft);font-style:italic;text-align:center;margin:4px 0 10px}
.cs-roof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:520px){.cs-roof-grid{grid-template-columns:repeat(2,1fr)}}
.cs-roof-chip{border:2px solid var(--line);border-radius:var(--r-sm);padding:10px 8px 8px;background:var(--paper);cursor:pointer;transition:border-color .18s;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.cs-roof-chip.is-sel{border-color:var(--gold);background:var(--paper-deep)}
.cs-roof-chip:hover{border-color:var(--ink-soft)}
.cs-roof-chip svg{display:block}
.cs-roof-chip img.cs-roof-ref{display:block;height:52px;width:auto;max-width:100%;object-fit:contain;margin:0 auto}
.cs-roof-chip-label{font-size:11px;font-weight:600;color:var(--ink);line-height:1.2}
.cs-clad-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.cs-clad-card{border:2px solid var(--line);border-radius:var(--r-sm);overflow:hidden;cursor:pointer;transition:border-color .18s}
.cs-clad-card.is-sel{border-color:var(--gold)}
.cs-clad-card:hover{border-color:var(--ink-soft)}
.cs-clad-swatch{height:80px;width:100%;display:block;object-fit:cover;background:#e0d8cc;}
.cs-clad-label{padding:7px 9px;font-size:11px;font-weight:600;line-height:1.3;color:var(--ink);background:var(--paper)}
.cs-clad-eco{display:flex;align-items:flex-start;gap:4px;margin-top:5px;padding-top:5px;border-top:1px solid var(--line-soft);font-size:9.5px;font-weight:500;line-height:1.3;color:var(--success)}
.cs-clad-eco i{font-size:11px;margin-top:1px;flex-shrink:0}
.cs-clad-swatch-solid{position:relative;display:flex;align-items:flex-end;justify-content:flex-start;padding:6px}
.cs-clad-swatch-tag{font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:.03em;color:rgba(255,255,255,.82);text-transform:uppercase;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.cs-clad-swatch-tag.is-dark{color:rgba(20,18,14,.7);text-shadow:none}
.cs-clad-sub{font-size:10px;color:var(--ink-soft);font-weight:400}
.cs-coll-card{
  display:flex;align-items:stretch;border:1.5px solid var(--line);border-radius:var(--r-md);
  background:var(--card);cursor:pointer;overflow:hidden;transition:border-color .15s,box-shadow .15s;
  -webkit-tap-highlight-color:transparent;
}
.cs-coll-card:hover{border-color:var(--ink-soft)}
.cs-coll-card.is-sel{border-color:var(--ink);box-shadow:var(--shadow-2)}
.cs-coll-ic{
  flex:0 0 56px;display:flex;align-items:center;justify-content:center;
  background:var(--paper-deep);font-size:23px;color:var(--ink);
}
.cs-coll-card.is-sel .cs-coll-ic{background:var(--ink);color:var(--gold)}
.cs-coll-bd{flex:1;padding:12px 15px;min-width:0}
.cs-coll-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.cs-coll-name{font-family:var(--display);font-weight:700;font-size:16px}
.cs-coll-tag{font-family:var(--display);font-style:italic;font-size:12px;color:var(--ink-soft);white-space:nowrap}
.cs-coll-feat{font-size:12.5px;color:var(--ink-soft);margin-top:4px;line-height:1.45}

/* ══════════════════════════════════════════
   STEP 3 — YOUR HOME
   ══════════════════════════════════════════ */
.cs-summarybar{
  background:var(--ink);color:#fff;border-radius:var(--r-md);padding:11px 15px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap;
}
.cs-sb-txt{font-family:var(--display);font-style:italic;font-size:13.5px;opacity:.92;min-width:0}
.cs-sb-badge{background:var(--gold);color:var(--ink-on-gold);font-weight:700;font-size:12px;padding:4px 12px;border-radius:99px;white-space:nowrap;font-family:var(--body);display:inline-flex;align-items:center;gap:7px}
.cs-jig-row{display:inline-block;vertical-align:middle;margin:0 2px}

.cs-sectlabel{font-size:11.5px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;margin:18px 0 10px}
.cs-sectlabel:first-child{margin-top:0}
.cs-size-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
@media (max-width:560px){.cs-size-grid{grid-template-columns:repeat(2,1fr)}}
.cs-size-card{
  border:1.5px solid var(--line);border-radius:var(--r-md);padding:12px 11px;cursor:pointer;
  background:var(--card);transition:border-color .15s;-webkit-tap-highlight-color:transparent;
}
.cs-size-card:hover{border-color:var(--ink-soft)}
.cs-size-card.is-sel{border-color:var(--ink);border-width:2px;background:var(--paper-deep)}
.cs-size-name{font-family:var(--display);font-weight:700;font-size:14.5px}
.cs-size-desc{font-family:var(--display);font-style:italic;font-size:11.5px;color:var(--ink-soft);margin-top:1px}

.cs-extra-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media (max-width:520px){.cs-extra-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:360px){.cs-extra-grid{grid-template-columns:repeat(2,1fr)}}
.cs-extra-card{
  border:1px solid var(--line);border-radius:var(--r-md);padding:10px 6px;text-align:center;cursor:pointer;
  background:var(--card);transition:all .15s;-webkit-tap-highlight-color:transparent;
}
.cs-extra-card:hover{border-color:var(--ink-soft);background:var(--paper-deep)}
.cs-extra-card.is-sel{border-color:var(--ink);border-width:1.5px;background:var(--paper-deep)}
.cs-extra-card i{font-size:18px;color:var(--ink);display:block;margin-bottom:5px}
.cs-extra-card span{font-size:11px;color:var(--ink-soft);font-weight:500}
.cs-extra-card.is-sel span{color:var(--ink)}

/* ══════════════════════════════════════════
   STEP 4 — R-CODE REVIEW
   ══════════════════════════════════════════ */
.cs-rc-loading{padding:48px 20px;text-align:center}
.cs-rc-spin{
  width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--ink);border-radius:50%;
  animation:cs-spin .8s linear infinite;margin:0 auto 14px;
}
@keyframes cs-spin{to{transform:rotate(360deg)}}
.cs-rc-loadtitle{font-family:var(--display);font-style:italic;font-weight:600;font-size:15px;margin-bottom:3px}
.cs-rc-loadsub{font-size:12.5px;color:var(--ink-soft);font-style:italic}
.cs-rc-steplist{margin-top:16px;display:inline-flex;flex-direction:column;gap:6px;text-align:left}
.cs-rc-step{font-size:12px;color:var(--ink-soft);display:flex;align-items:center;gap:7px;font-style:italic}
.cs-rc-step.is-done{color:var(--success)}
.cs-rc-step.is-active{color:var(--ink);font-style:normal;font-weight:500}

.cs-rc-banner{
  background:var(--info-bg);border:1px solid #cddabb;border-radius:var(--r-md);
  padding:11px 14px;margin-bottom:14px;display:flex;align-items:flex-start;gap:10px;
}
.cs-rc-banner .cs-ic{color:var(--ink);font-size:16px;flex-shrink:0;margin-top:1px}
.cs-rc-banner strong{font-size:13px;display:block}
.cs-rc-banner span{font-size:12px;color:var(--ink-soft);font-style:italic}

.cs-status-card{border-radius:var(--r-lg);padding:15px;margin-bottom:14px;border:1px solid}
.cs-status-amber{background:var(--warn-bg);border-color:#e2b66b}
.cs-status-body{font-size:13px;color:var(--ink-soft);line-height:1.7;margin:10px 0}
.cs-status-body strong{color:var(--ink);font-weight:600}
.cs-status-warnbox{
  background:#fdf3e1;border:1px solid #e2b66b;border-radius:var(--r-sm);padding:9px 12px;
  font-size:12.5px;color:#7a4d05;display:flex;gap:7px;align-items:flex-start;font-style:italic;
}

.cs-auth-card{margin-bottom:14px}
.cs-auth-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:13px;
}
.cs-auth-row:last-child{border-bottom:none}
.cs-auth-lbl{color:var(--ink-soft);font-style:italic}
.cs-auth-val{font-weight:600;flex-shrink:0;text-align:right}
.cs-auth-val.is-ok{color:var(--success)}
.cs-auth-val.is-warn{color:var(--warn)}
.cs-auth-val.is-fail{color:var(--danger)}

.cs-chk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-bottom:14px}
@media (max-width:480px){.cs-chk-grid{grid-template-columns:1fr}}
.cs-chk{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px;
  font-size:12.5px;display:flex;align-items:center;gap:7px;
}
.cs-chk i{color:var(--success);font-size:15px;flex-shrink:0}
.cs-chk.is-warn i{color:var(--warn)}
.cs-chk.is-info i{color:#3a7ca5}

.cs-siteopt-card{background:var(--paper-deep);border-radius:var(--r-sm);padding:9px 11px;font-size:12.5px;margin-bottom:7px}
.cs-siteopt-name{font-weight:600;margin-bottom:2px}
.cs-siteopt-note{color:var(--ink-soft);font-size:11.5px;font-style:italic;line-height:1.4}

/* ══════════════════════════════════════════
   STEP 5 — DESIGN
   Desktop/tablet: sidebar (library+modules+cost) | canvas
   Mobile (<760px): canvas full-screen, sidebar becomes
   a bottom sheet triggered by a floating action button.
   ══════════════════════════════════════════ */
.cs-design{flex:1;display:flex;min-height:0;overflow:hidden;position:relative}

/* ── Module width — first sidebar section, always visible. Sets how
   much interior depth each module has, which decides what fits in the
   capsule library shown right below it. ── */
.cs-width-section{background:#fdf9f0}
.cs-sb-title-toggle{
  display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;user-select:none;
  width:100%;border:none;background:none;padding:0;margin:0 0 7px;color:var(--ink);font-family:var(--display);
  font-weight:700;font-size:13px;letter-spacing:.03em;text-transform:uppercase;text-align:left;
}
.cs-sb-toggle-hint{display:flex;align-items:center;gap:3px;font-family:var(--body);font-weight:600;font-size:10px;text-transform:none;letter-spacing:0;color:var(--ink-soft);font-style:italic;white-space:nowrap}
.cs-sb-title-toggle i{font-size:14px;color:var(--ink-soft);transition:transform .15s;flex-shrink:0}
.cs-width-section.is-collapsed #modInfoBody{display:none}
.cs-width-section.is-collapsed #modInfoChev{transform:rotate(180deg)}
.cs-width-gate-sub{font-size:11.5px;color:var(--ink-soft);line-height:1.5;margin:2px 0 12px}
.cs-width-gate-row{margin-bottom:10px}
.cs-width-gate-row:last-child{margin-bottom:0}
.cs-width-gate-lbl{font-family:var(--display);font-weight:700;font-size:12.5px;display:block;margin-bottom:5px}

/* Numbered step badges — Capsules (1), Passageways (2), Dock (3) — so
   the sidebar and passageway strip read as a clear top-to-bottom flow
   instead of an undifferentiated list of sections. */
.cs-step-badge{
  display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  border-radius:5px;background:var(--ink);color:var(--gold);font-size:11px;font-weight:700;
  font-family:var(--body);flex-shrink:0;margin-right:5px;vertical-align:middle;
}
.cs-step-badge-sm{width:15px;height:15px;font-size:9.5px;border-radius:4px}
.cs-step-badge-wide{width:auto;padding:0 4px;}

.cs-avail-depth{
  font-size:11px;color:var(--ink-soft);font-style:italic;margin-bottom:11px;
  background:var(--paper-deep);border-radius:var(--r-sm);padding:8px 11px;
}
.cs-sb-sublbl{font-size:11px;font-weight:700;color:var(--ink);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}

.cs-cap-card.is-disabled{opacity:.45;cursor:not-allowed}
.cs-cap-card.is-disabled .cs-cap-dim{color:var(--danger);font-style:italic}
.cs-d-main{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}

.cs-d-banner{
  background:var(--ink);color:#fff;padding:9px clamp(10px,2vw,16px);flex-shrink:0;
  display:flex;align-items:center;gap:9px;
}
.cs-d-banner .cs-ic{color:var(--gold);font-size:15px;flex-shrink:0}
.cs-d-banner-hl{font-family:var(--display);font-weight:700;font-size:13px;line-height:1.25}
.cs-d-banner-sub{font-size:11px;color:rgba(255,255,255,.6);font-style:italic;line-height:1.3;margin-top:1px}

.cs-toolbar{
  background:var(--card);border-bottom:1px solid var(--line);flex-shrink:0;
  padding:8px clamp(8px,2vw,16px);display:flex;align-items:center;gap:2px;
  overflow-x:auto;scrollbar-width:none;
}
.cs-toolbar::-webkit-scrollbar{display:none}
.cs-tbtn{
  display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 12px;
  border-radius:var(--r-sm);cursor:pointer;color:var(--ink-soft);font-size:11px;font-weight:700;
  border:none;background:none;min-width:50px;flex-shrink:0;-webkit-tap-highlight-color:transparent;
  text-transform:uppercase;letter-spacing:.02em;
}
.cs-tbtn i{font-size:19px;display:block}
.cs-tbtn:hover,.cs-tbtn.is-on{background:var(--paper-deep);color:var(--ink)}
.cs-tbtn.is-danger i,.cs-tbtn.is-danger span{color:var(--danger)}
.cs-tdiv{width:1px;height:30px;background:var(--line);margin:0 6px;flex-shrink:0}
/* Toolbar groups: Select/Move/Swap (the drawing tools) get a soft gold
   tint, Remove/Undo/Reset (destructive + history actions) get a soft
   red tint — two visually distinct "areas" instead of one long row
   of identical buttons. */
.cs-tgroup{display:flex;align-items:center;gap:2px;padding:3px;border-radius:calc(var(--r-sm) + 3px);flex-shrink:0}
.cs-tgroup-tools{background:#fbf3df}
.cs-tgroup-danger{background:var(--danger-bg)}
.cs-tb-spacer{flex:1;min-width:8px}
.cs-zoom-pct{font-size:12.5px;font-weight:700;color:var(--ink-soft);min-width:36px;text-align:center;flex-shrink:0;font-family:var(--display)}
.cs-page-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:28px;padding-top:14px;border-top:1px solid var(--line);font-size:11px;color:var(--ink-soft);flex-wrap:wrap}
.cs-page-footer a{color:var(--ink-soft);text-decoration:none}
.cs-page-footer a:hover{text-decoration:underline}
.cs-tb-dimlbl{font-size:12.5px;font-weight:700;color:var(--ink-soft);flex-shrink:0}
.cs-toolbar input[type=range]{width:76px;accent-color:var(--ink);flex-shrink:0}
.cs-toolbar input[type=range]:disabled{opacity:.35}
/* Ceiling height sits in the same strip as the toolbar but is a much
   lower-frequency choice (set once per design, not per capsule) — kept
   deliberately smaller and quieter so the toolbar above it reads as the
   primary control surface. */
#ceilGroup.cs-chip-row{gap:6px}
#ceilGroup .cs-chip{padding:5px 11px;font-size:11px;border-width:1px}

/* ── Dedicated Passageway strip — sits between the toolbar and the
   canvas, separate from the scrolling capsule library sidebar, since
   passageway is a distinct circulation tool used constantly while
   laying out a module rather than a one-off library item. ── */
.cs-pass-strip{
  background:#fdf9f0;border-bottom:1px solid var(--line);flex-shrink:0;
  padding:6px clamp(8px,2vw,16px);display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.cs-pass-strip-div{width:1px;height:18px;background:var(--line);flex-shrink:0}
.cs-pass-strip-label{
  font-family:var(--display);font-weight:700;font-size:11px;color:var(--ink);
  display:flex;align-items:center;gap:5px;flex-shrink:0;
}
.cs-pass-strip-label i{color:var(--gold);font-size:13px}
.cs-pass-strip-row{display:flex;align-items:center;gap:6px;flex-shrink:0}
.cs-pass-strip-row input[type=range]{width:90px;accent-color:var(--ink)}
@media (max-width:700px){.cs-pass-strip-row input[type=range]{width:60px}}

.cs-canvas-wrap{flex:1;overflow:auto;background:#e3ded2;position:relative;min-height:280px}
#planC{display:block;cursor:default;touch-action:none}

.cs-infobar{
  background:var(--card);border-top:1px solid var(--line);flex-shrink:0;
  padding:7px clamp(8px,2vw,14px);display:flex;gap:clamp(8px,2vw,18px);align-items:center;
  overflow-x:auto;scrollbar-width:none;
}
.cs-infobar::-webkit-scrollbar{display:none}
.cs-ib{display:flex;flex-direction:column;gap:0;flex-shrink:0}
.cs-ib-l{font-size:8.5px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.cs-ib-v{font-size:12px;font-weight:600;font-family:var(--display);white-space:nowrap}
.cs-ib-hint{font-size:10.5px;color:var(--ink-soft);font-style:italic;margin-left:auto;white-space:nowrap;display:none}
@media (min-width:900px){.cs-ib-hint{display:block}}

/* ── Sidebar: desktop/tablet inline, mobile bottom sheet ── */
.cs-d-sidebar{
  width:var(--sidebar-w);flex-shrink:0;background:var(--card);border-right:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0;
}
.cs-sb-section{padding:15px 16px;border-bottom:1px solid var(--line);flex-shrink:0}
.cs-sb-title{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.03em;text-transform:uppercase;margin-bottom:10px}
.cs-sb-scroll{flex:1;overflow-y:auto;padding:13px 15px;min-height:0}
.cs-sb-label{font-size:10px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;margin:16px 0 9px}
.cs-sb-label:first-child{margin-top:0}

/* ── Sidebar tabs — Capsules vs Site & Roof. Splits the library and
   the once-off site/roof settings into separate scroll panes so the
   capsule list (used constantly while building) gets the sidebar's
   full scroll height instead of sharing it with everything else. ── */
.cs-sb-tabs{display:flex;gap:7px;padding:13px 15px 0}
.cs-sb-tab{
  flex:1;padding:9px 4px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--card);color:var(--ink-soft);font-size:11px;font-weight:700;line-height:1.3;
  text-transform:uppercase;letter-spacing:.03em;cursor:pointer;font-family:var(--body);
  display:flex;align-items:center;justify-content:center;gap:6px;text-align:center;
}
.cs-sb-tab .cs-step-badge{background:var(--paper-deep);color:var(--ink)}
.cs-sb-tab.is-on .cs-step-badge{background:var(--gold);color:var(--ink)}
.cs-sb-tab:hover{border-color:var(--ink-soft)}
.cs-sb-tab.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}
.cs-sb-tabpanel{display:none}
.cs-sb-tabpanel.is-on{display:block}

.cs-cap-list{display:flex;flex-direction:column;gap:9px}
.cs-lib-pager{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:11px}
.cs-lib-pg-btn{
  width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:var(--card);
  color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;
}
.cs-lib-pg-btn:hover{background:var(--paper-deep)}
.cs-lib-pg-btn:disabled{opacity:.3;cursor:default}
.cs-lib-pg-txt{font-size:11px;color:var(--ink-soft);font-weight:600;min-width:36px;text-align:center}
.cs-cap-card{
  display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--paper-deep);cursor:grab;overflow:hidden;-webkit-tap-highlight-color:transparent;
}
.cs-cap-card:hover{border-color:var(--ink-soft);background:var(--card)}
.cs-cap-card:active{cursor:grabbing}
.cs-cap-card.is-live-selected{border-color:var(--gold);border-width:2px;background:#fbf3df;box-shadow:0 0 0 1px var(--gold)}
.cs-cap-live-tag{background:var(--gold);color:var(--ink-on-gold);font-size:9.5px;font-weight:700;letter-spacing:.02em;padding:3px 9px;text-align:center}
.cs-cap-body{display:flex;align-items:stretch;flex:1;min-width:0}
.cs-cap-thumb{flex-shrink:0;background:#fff;border-right:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.cs-cap-meta{flex:1;padding:8px 11px;display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0}
.cs-cap-name{font-size:12px;font-weight:600}
.cs-cap-dim{font-size:10.5px;color:var(--ink-soft);font-style:italic}
.cs-cap-price{font-size:11px;color:var(--ink);font-weight:600}
.cs-cap-note{font-size:9.5px;color:var(--ink-soft);line-height:1.3;margin-top:1px}
.cs-cap-chiprow{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px}
.cs-cap-chip{
  padding:2px 6px;border-radius:99px;font-size:9.5px;font-weight:600;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--ink-soft);
}
.cs-cap-chip:hover{border-color:var(--ink-soft)}
.cs-cap-chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff}

.cs-pass-note{font-size:10.5px;color:var(--ink-soft);font-style:italic;margin-top:8px}

.cs-mod-card{background:var(--paper-deep);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 12px;margin-bottom:9px}
.cs-mod-card.is-sel{border-color:var(--gold);background:#fdf8ee}
.cs-mod-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;cursor:pointer}
.cs-mod-name{font-family:var(--display);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.03em}
.cs-mod-del{font-size:12px;color:var(--danger);cursor:pointer;background:none;border:none;padding:2px}
.cs-rot-row{display:flex;gap:4px;margin-bottom:5px}
.cs-rot-btn{padding:4px 7px;border:1px solid var(--line);border-radius:4px;font-size:10.5px;cursor:pointer;background:var(--card);color:var(--ink)}
.cs-rot-btn:hover,.cs-rot-btn.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}
/* Module tabs — horizontal strip (Module 1 | Module 2 | +) replacing
   the old stacked cards, so the module-info area takes a single fixed
   row of height regardless of how many modules exist, leaving far more
   room for the scrollable capsule list below. The active tab stays
   highlighted in gold while that module is selected, including the
   whole time capsules are being added to it. */
.cs-modtabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:11px}
.cs-modtab{
  display:flex;align-items:center;gap:6px;padding:6px 9px;border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:var(--card);color:var(--ink-soft);font-size:11.5px;font-weight:600;cursor:pointer;
  font-family:var(--body);white-space:nowrap;
}
.cs-modtab:hover{border-color:var(--ink-soft)}
.cs-modtab.is-sel{border-color:var(--gold);background:#fdf8ee;color:var(--ink);box-shadow:0 0 0 1px var(--gold)}
.cs-modtab-len{font-size:10px;color:var(--ink-soft);font-weight:500}
.cs-modtab.is-sel .cs-modtab-len{color:var(--ink-soft)}
.cs-modtab-len.is-over{color:var(--danger);font-weight:700}
.cs-modtab-del{font-size:11px;color:var(--ink-soft);line-height:1;padding:1px}
.cs-modtab-del:hover{color:var(--danger)}
.cs-modtab-add{padding:6px 11px;color:var(--ink);font-size:14px;justify-content:center}
.cs-modtab-add:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.cs-modtab-body{background:var(--paper-deep);border-radius:var(--r-sm);padding:9px 10px}
.cs-modinfo-sublbl{font-size:9.5px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;margin:8px 0 5px}
.cs-modinfo-sublbl:first-child{margin-top:2px}
.cs-site-cap-sub{font-size:11px;color:var(--ink-soft);line-height:1.4;margin:2px 0 8px}
.cs-mod-info{font-size:10.5px;color:var(--ink-soft);font-style:italic;line-height:1.4;margin-bottom:3px}
.cs-mod-len{font-size:10.5px;font-weight:600}
.cs-mod-len.is-ok{color:var(--success)}
.cs-mod-len.is-warn{color:var(--warn)}
.cs-mod-len.is-over{color:var(--danger)}
.cs-dock-card{background:#f4f1ea}
.cs-dock-card .cs-mod-name i{font-size:13px;margin-right:4px;color:var(--ink-soft)}

.cs-add-mod-btn{
  width:100%;padding:11px;border:1.5px dashed var(--ink);border-radius:var(--r-sm);font-size:12.5px;
  cursor:pointer;background:var(--info-bg);color:var(--ink);font-weight:600;text-align:center;
  margin-top:8px;display:flex;align-items:center;justify-content:center;gap:6px;
}
.cs-add-mod-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ── Cost footer ──
   Lives in the sidebar's normal document flow by default (so the
   mobile bottom-sheet gets it for free) but is pulled out to its own
   column on the right as soon as the sidebar itself goes inline
   (same 760px breakpoint as .cs-d-sidebar below) — same width as the
   sidebar, anchored against .cs-design (already position:relative).
   Previously this only kicked in at 1100px, which left a wide
   tablet/small-desktop range where the cost panel sat inline at the
   bottom of the left sidebar, stealing vertical room from the
   capsule list above it. */
.cs-cost-footer{border-top:1px solid var(--line);padding:13px;flex-shrink:0;background:var(--card);overflow-y:auto}
@media (min-width:760px){
  .cs-cost-footer{
    position:absolute;top:0;right:0;bottom:0;width:var(--sidebar-w);
    border-top:none;border-left:1px solid var(--line);box-shadow:var(--shadow-2);z-index:5;
  }
  /* Reserve the space the absolutely-positioned cost panel now
     occupies, so the canvas doesn't render underneath it. */
  .cs-d-main{margin-right:var(--sidebar-w)}
}
.cs-cost-main{background:var(--ink);border-radius:var(--r-md);padding:11px 14px;margin-bottom:9px}
.cs-cost-main-lbl{font-size:10px;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}
.cs-cost-main-val{font-family:var(--display);font-weight:700;font-size:23px;color:#fff;line-height:1}
.cs-cost-main-sub{font-size:10.5px;color:rgba(255,255,255,.45);font-style:italic;margin-top:2px}
.cs-cost-bk{display:flex;flex-direction:column;gap:3px;margin-bottom:8px}
.cs-cost-bk-row{display:flex;justify-content:space-between;font-size:11.5px}
.cs-cost-bk-lbl{color:var(--ink-soft)}
.cs-cost-bk-val{font-weight:600}
.cs-cost-transport{background:var(--paper-deep);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;margin-bottom:9px}
.cs-ct-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.cs-ct-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.cs-ct-val{font-family:var(--display);font-weight:700;font-size:14px}
.cs-dist-row{display:flex;align-items:center;gap:6px}
.cs-dist-lbl{font-size:11px;color:var(--ink-soft);flex:1}
.cs-dist-input{width:60px;padding:5px 7px;border-radius:var(--r-sm);font-size:12px;text-align:right;border:1px solid var(--line)}
.cs-km-note{font-size:9.5px;color:var(--ink-soft);font-style:italic;margin-top:5px}
.cs-cost-excl{font-size:10.5px;color:var(--warn);font-style:italic;line-height:1.4;margin-bottom:5px}
.cs-cost-note{font-size:10.5px;color:var(--ink-soft);font-style:italic;line-height:1.4;margin-bottom:9px}
.cs-footnote-mark{font-size:10px;font-weight:700;color:var(--gold);font-style:normal;line-height:1}
.cs-spec-link{
  display:inline-flex;align-items:center;gap:6px;width:100%;
  font-family:var(--body);font-size:12px;font-weight:600;color:var(--ink);
  background:var(--paper-deep);border:1.5px solid var(--line);border-radius:var(--r-sm);
  padding:8px 12px;cursor:pointer;margin-bottom:9px;transition:all .15s;
  justify-content:center;
}
.cs-spec-link:hover{border-color:var(--gold);background:var(--info-bg)}
.cs-spec-modal{
  display:none;position:fixed;inset:0;z-index:9999;background:rgba(38,44,16,.72);
  align-items:center;justify-content:center;padding:24px;
}
.cs-spec-modal.is-open{display:flex}
.cs-spec-modal-inner{
  position:relative;max-width:min(760px,92vw);max-height:92vh;background:var(--card);
  border-radius:var(--r-lg);box-shadow:var(--shadow-3);overflow:hidden;
  display:flex;flex-direction:column;
}
.cs-spec-modal-hd{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;border-bottom:1px solid var(--line);background:var(--paper);
}
.cs-spec-modal-hd h3{font-size:16px}
.cs-spec-modal-close{
  background:transparent;border:none;cursor:pointer;color:var(--ink-soft);
  font-size:20px;line-height:1;padding:4px 6px;border-radius:6px;
}
.cs-spec-modal-close:hover{background:var(--paper-deep);color:var(--ink)}
.cs-spec-modal-body{overflow:auto;padding:0;background:var(--paper-deep)}
.cs-spec-modal-body img{display:block;width:100%;height:auto}
.cs-spec-modal-ft{
  padding:10px 16px;border-top:1px solid var(--line);background:var(--paper);
  display:flex;justify-content:flex-end;
}
.cs-gen-btn{width:100%;padding:12px;background:var(--ink);color:#fff;border:none;border-radius:var(--r-sm);font-size:13.5px;font-weight:700;cursor:pointer}
.cs-gen-btn:hover{background:var(--ink-soft)}

/* ── Mobile bottom sheet for sidebar ── */
.cs-sheet-scrim{display:none;position:fixed;inset:0;background:rgba(22,38,26,.45);z-index:48}
.cs-sheet-scrim.is-open{display:block}
.cs-fab{
  display:none;position:absolute;bottom:16px;right:16px;z-index:35;
  background:var(--ink);color:#fff;border:none;border-radius:99px;padding:13px 20px;
  font-size:13px;font-weight:700;box-shadow:var(--shadow-3);align-items:center;gap:8px;
  cursor:pointer;
}
.cs-fab i{font-size:17px}

@media (max-width:759px){
  .cs-d-sidebar{
    position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-height:82vh;
    border-right:none;border-top:1px solid var(--line);border-radius:18px 18px 0 0;
    box-shadow:var(--shadow-3);z-index:49;
    transform:translateY(100%);transition:transform .25s ease;
  }
  .cs-d-sidebar.is-open{transform:translateY(0)}
  .cs-sheet-handle{
    width:36px;height:4px;background:var(--line);border-radius:99px;margin:9px auto 2px;flex-shrink:0;
  }
  .cs-sheet-close{
    position:absolute;top:8px;right:10px;background:none;border:none;font-size:20px;color:var(--ink-soft);
    padding:6px;cursor:pointer;
  }
  .cs-fab{display:flex}
}
@media (min-width:760px){
  .cs-sheet-handle,.cs-sheet-close{display:none}
}

/* ══════════════════════════════════════════
   STEP 6 — CONCEPT
   ══════════════════════════════════════════ */
.cs-out-badge{display:inline-flex;align-items:center;gap:6px;background:var(--success-bg);color:var(--success);padding:5px 13px;border-radius:99px;font-size:12px;font-weight:700;margin-bottom:14px}
.cs-ref-badge{
  display:inline-flex;align-items:center;gap:7px;background:var(--paper-deep);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:8px 14px;font-size:12.5px;color:var(--ink-soft);margin-bottom:18px;
}
.cs-ref-badge strong{font-family:var(--display);font-weight:700;color:var(--ink);letter-spacing:.03em;font-size:13.5px}
.cs-out-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
@media (max-width:540px){.cs-out-grid{grid-template-columns:1fr}}
.cs-out-card-title{font-size:10.5px;color:var(--ink-soft);letter-spacing:.05em;text-transform:uppercase;font-weight:700;margin-bottom:9px}
.cs-out-item{font-size:12.5px;display:flex;align-items:flex-start;gap:7px;margin-bottom:6px;line-height:1.4}
.cs-out-item i{font-size:14px;color:var(--success);flex-shrink:0;margin-top:1px}
.cs-out-total{background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:16px 18px;margin-bottom:14px}
.cs-out-total-top{display:flex;align-items:center;justify-content:space-between;gap:14px}
.cs-out-total-lbl{font-size:11.5px;opacity:.6;font-style:italic}
.cs-out-total-num{font-family:var(--display);font-weight:700;font-size:clamp(22px,4vw,28px)}
.cs-out-total-bk{border-top:1px solid rgba(255,255,255,.18);margin-top:10px;padding-top:9px;display:flex;flex-direction:column;gap:4px}
.cs-out-total-row{display:flex;justify-content:space-between;font-size:12px;color:rgba(255,255,255,.7)}
.cs-out-acts{display:flex;gap:8px;flex-wrap:wrap}
.cs-out-acts .cs-btn{flex:1;min-width:160px}

/* ── Next step: encouraging message + book-a-meeting CTA ──
   Sits after the cost total (once they've seen real numbers) and
   before the secondary download/restart actions, since booking a
   meeting is the actual next move we want to drive toward. */
.cs-next-step{
  display:flex;gap:12px;align-items:flex-start;background:var(--info-bg);border:1px solid #cddabb;
  border-radius:var(--r-lg);padding:16px 18px;margin-bottom:14px;
}
.cs-next-step i{font-size:22px;color:var(--gold);flex-shrink:0;margin-top:2px}
.cs-next-step-title{font-family:var(--display);font-weight:700;font-size:16px;font-style:italic;margin-bottom:4px;line-height:1.3}
.cs-next-step-body{font-size:13px;color:var(--ink-soft);line-height:1.55;margin:0}
.cs-out-acts-primary{margin-bottom:8px}
.cs-book-btn{padding:13px 20px;font-size:14.5px}


/* ================================================================
   CAPSULE BUILDERS WEBSITE-MATCHED VISUAL REFRESH
   Keeps all Capsule Studio logic and controls intact while aligning
   colour, typography, spacing and interface tone with the refined
   Capsule Builders website.
   ================================================================ */
.cs-root{background:var(--paper);letter-spacing:-.006em}
.cs-root h1,.cs-root h2,.cs-root h3{font-family:var(--display);font-weight:500;letter-spacing:-.035em}
.cs-label,.cs-sectlabel,.cs-step2-label,.cs-sb-label,.cs-out-card-title,.cs-cost-main-lbl,.cs-ib-l{
  letter-spacing:.12em;font-weight:600;
}

/* Header and progress navigation */
.cs-hdr{
  background:#344038;
  padding:13px clamp(16px,3vw,34px);
  border-bottom:1px solid rgba(248,247,242,.16);
  box-shadow:none;
}
.cs-logo-mark img{width:42px!important;height:42px!important;object-fit:contain}
.cs-logo-name{letter-spacing:.05em;font-size:clamp(15px,2.2vw,19px)}
.cs-logo-by{color:rgba(248,247,242,.62);letter-spacing:.13em}
.cs-tagline{font-family:var(--script);font-size:16px;font-weight:200;color:#E6B097;letter-spacing:.05em}
.cs-prog{background:#52604B;padding:0 clamp(12px,3vw,30px);border-bottom:1px solid rgba(248,247,242,.11)}
.cs-step{font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;padding:12px 5px;color:rgba(248,247,242,.5)}
.cs-step .cs-stepnum{border-radius:50%;width:23px;height:23px;border-color:rgba(248,247,242,.28)}
.cs-step.is-active .cs-stepnum{background:var(--gold);border-color:var(--gold);color:#fff}
.cs-step.is-done .cs-stepnum{background:rgba(248,247,242,.14)}

/* Page framing and typography */
.cs-page{max-width:860px;padding-top:clamp(30px,5vw,54px);padding-bottom:64px}
.cs-root h1.cs-page-title,.cs-root h2.cs-page-title{font-family:var(--body);font-weight:600;font-size:clamp(28px,4.4vw,44px);letter-spacing:-.01em;line-height:1.08}
.cs-page-sub{font-family:var(--display);font-size:18px;color:var(--ink-soft);font-style:italic;line-height:1.5;margin-top:8px;margin-bottom:30px}
.cs-stack{gap:22px}

/* Cards and form fields */
.cs-card{border:1px solid var(--line);border-radius:0;box-shadow:none;background:var(--card)}
.cs-card-hd{padding:20px 24px;border-bottom:1px solid var(--line);background:var(--paper)}
.cs-card-hd .cs-ic{color:var(--gold)}
.cs-card-hd h3{font-size:17px;font-weight:500;letter-spacing:-.02em}
.cs-card-bd{padding:24px}
.cs-input{border-radius:0;padding:12px 13px;background:#fff;border-color:var(--line)}
.cs-input:focus{border-color:#52604B;box-shadow:0 0 0 1px #52604B}
.cs-input.cs-autofilled{background:var(--info-bg);border-color:#AAB5A5}
.cs-input::placeholder{color:#969D96}

.cs-btn{border-radius:0;padding:12px 20px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.cs-btn-primary,.cs-gen-btn{background:#52604B;color:#fff;border-color:#52604B}
.cs-btn-primary:hover,.cs-gen-btn:hover{background:#344038}
.cs-btn-gold{background:var(--gold);color:#fff}
.cs-btn-gold:hover{background:#A65335}
.cs-btn-ghost{background:transparent;border-color:#52604B;color:#344038}
.cs-btn-ghost:hover{background:#52604B;color:#fff;border-color:#52604B}

.cs-pill,.cs-chip{border-radius:100px}
.cs-chip.is-sel{background:#52604B;border-color:#52604B}
.cs-svc-item input[type=checkbox],.cs-toolbar input[type=range],.cs-pass-strip-row input[type=range]{accent-color:#52604B}

/* Selection cards */
.cs-coll-card,.cs-size-card,.cs-extra-card,.cs-formsection,.cs-roof-chip,.cs-clad-card{
  border-radius:0;box-shadow:none;background:#fff;
}
.cs-coll-card:hover,.cs-size-card:hover,.cs-extra-card:hover,.cs-roof-chip:hover,.cs-clad-card:hover{border-color:#52604B}
.cs-coll-card.is-sel,.cs-size-card.is-sel{border-color:#52604B;background:#F3F2EC;box-shadow:0 10px 26px rgba(38,49,40,.07)}
.cs-coll-ic{background:var(--paper-deep);color:#52604B}
.cs-coll-card.is-sel .cs-coll-ic{background:#52604B;color:#fff!important}
/* Each collection's selected state uses its own Capsule Builders range
   colour (matching the swatches used sitewide) instead of one fixed
   green for all six — so picking Coastal actually highlights teal,
   Heritage highlights rust, etc. */
.cs-coll-card[data-id="urban"].is-sel{border-color:#39461F;box-shadow:0 10px 26px rgba(57,70,31,.16)}
.cs-coll-card[data-id="urban"].is-sel .cs-coll-ic{background:#39461F;color:#fff!important}
.cs-coll-card[data-id="coastal"].is-sel{border-color:#3D6B6B;box-shadow:0 10px 26px rgba(61,107,107,.16)}
.cs-coll-card[data-id="coastal"].is-sel .cs-coll-ic{background:#3D6B6B;color:#fff!important}
.cs-coll-card[data-id="wilderness"].is-sel{border-color:#5C6E2E;box-shadow:0 10px 26px rgba(92,110,46,.16)}
.cs-coll-card[data-id="wilderness"].is-sel .cs-coll-ic{background:#5C6E2E;color:#fff!important}
.cs-coll-card[data-id="heritage"].is-sel{border-color:#8B5E34;box-shadow:0 10px 26px rgba(139,94,52,.16)}
.cs-coll-card[data-id="heritage"].is-sel .cs-coll-ic{background:#8B5E34;color:#fff!important}
.cs-coll-card[data-id="retreat"].is-sel{border-color:#66705B;box-shadow:0 10px 26px rgba(102,112,91,.16)}
.cs-coll-card[data-id="retreat"].is-sel .cs-coll-ic{background:#66705B;color:#fff!important}
.cs-coll-card[data-id="resort"].is-sel{border-color:#102B46;box-shadow:0 10px 26px rgba(16,43,70,.16)}
.cs-coll-card[data-id="resort"].is-sel .cs-coll-ic{background:#102B46;color:#fff!important}
.cs-coll-name,.cs-size-name,.cs-formsection-title{font-family:var(--body);font-weight:600;letter-spacing:-.015em}
.cs-coll-tag,.cs-size-desc,.cs-sb-txt{font-family:var(--script);font-size:14px}
.cs-formsection-num,.cs-step-badge{background:#52604B;color:#fff}
.cs-roof-chip.is-sel,.cs-clad-card.is-sel{border-color:var(--gold);background:#F8F3EF}

/* Site, review and summary panels */
.cs-result,.cs-zonebox,.cs-energy-box,.cs-siteplan-wrap,.cs-summarybar,.cs-status-card,.cs-rc-banner,.cs-next-step,.cs-ref-badge{
  border-radius:0;
}
.cs-zone-badge,.cs-summarybar,.cs-out-total,.cs-cost-main,.cs-d-banner{background:#344038}
.cs-zone-badge{color:#E6B097;border-radius:0}
.cs-sb-badge{background:var(--gold);color:#fff}
.cs-status-amber{background:#F8EEE8;border-color:#D9B7A5}
.cs-rc-banner,.cs-next-step{background:#EEF0EB;border-color:#CCD4C9}
.cs-next-step i{color:var(--gold)}

/* Design workspace */
.cs-design{background:var(--paper)}
.cs-d-sidebar,.cs-cost-footer,.cs-toolbar,.cs-infobar{background:#fff}
.cs-width-section,.cs-pass-strip{background:#F4F2EC}
.cs-canvas-wrap{background:#DDDCD5}
.cs-sb-tab{border-radius:0}
.cs-sb-tab.is-on{background:#52604B;border-color:#52604B}
.cs-sb-tab.is-on .cs-step-badge{background:var(--gold)}
.cs-cap-card,.cs-mod-card,.cs-modtab,.cs-add-mod-btn,.cs-cost-transport,.cs-spec-link{border-radius:0}
.cs-cap-card{background:#F4F2EC}
.cs-cap-card:hover{border-color:#52604B}
.cs-cap-card.is-live-selected,.cs-mod-card.is-sel,.cs-modtab.is-sel{border-color:var(--gold);background:#F8F1EC;box-shadow:none}
.cs-cap-live-tag{background:var(--gold);color:#fff}
.cs-cap-chip.is-on,.cs-rot-btn:hover,.cs-rot-btn.is-on{background:#52604B;border-color:#52604B}
.cs-add-mod-btn{border-color:#52604B;background:#EEF0EB;color:#344038}
.cs-add-mod-btn:hover{background:#52604B;color:#fff}
.cs-tbtn:hover,.cs-tbtn.is-on{background:#EEEDE7;color:#344038}
.cs-fab{background:#52604B}

/* Modal and final output */
.cs-spec-modal{background:rgba(38,49,40,.72)}
.cs-spec-modal-inner{border-radius:0}
.cs-out-badge{background:#EDF2EC;color:#526F58}
.cs-out-total-num,.cs-cost-main-val{font-family:var(--body);font-weight:500;letter-spacing:-.04em}
.cs-page-footer{margin-top:38px;padding-top:20px}

/* Refined micro-interactions without altering workflow */
.cs-card,.cs-coll-card,.cs-size-card,.cs-extra-card,.cs-roof-chip,.cs-clad-card,.cs-cap-card,.cs-btn{
  transition:border-color .2s ease,background-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.cs-coll-card:hover,.cs-size-card:hover,.cs-roof-chip:hover,.cs-clad-card:hover{transform:translateY(-2px)}

@media (max-width:680px){
  .cs-hdr{padding:10px 14px}
  .cs-logo-mark{width:48px;height:48px}
  .cs-logo-mark img{width:36px!important;height:36px!important}
  .cs-page{padding-top:26px}
  .cs-card-hd,.cs-card-bd{padding-left:17px;padding-right:17px}
}


/* Capsule Studio save and resume */
.cs-savebar{position:fixed;right:18px;top:82px;z-index:880;display:flex;gap:8px;align-items:center}
.cs-savebar .cs-btn{box-shadow:0 8px 24px rgba(0,0,0,.16)}
.cs-save-toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(20px);z-index:2000;background:#173f35;color:#fff;padding:12px 18px;border-radius:12px;font-size:14px;font-weight:700;opacity:0;pointer-events:none;transition:.22s ease;box-shadow:0 10px 30px rgba(0,0,0,.22);text-align:center;max-width:calc(100vw - 32px)}
.cs-save-toast.is-show{opacity:1;transform:translateX(-50%) translateY(0)}
.cs-resume-card{display:none;margin:0 0 18px;padding:18px;border:1px solid rgba(23,63,53,.2);border-radius:16px;background:#f4f7f5}
.cs-resume-card.is-show{display:block}
.cs-resume-ref{font-size:24px;letter-spacing:.08em;font-weight:800;color:#173f35;margin:6px 0 12px}
.cs-ref-box{display:flex;gap:8px;flex-wrap:wrap}
.cs-ref-box .cs-input{flex:1;min-width:210px;text-transform:uppercase}
.cs-stage5-save-result{display:none;margin-top:14px;padding:14px;border-radius:12px;background:#eef4f1;border:1px solid rgba(23,63,53,.16)}
.cs-stage5-save-result.is-show{display:block}
.cs-stage5-save-ref{font-size:23px;font-weight:850;letter-spacing:.08em;color:#173f35;margin:4px 0}
@media(max-width:700px){
 .cs-savebar{top:auto;right:12px;bottom:calc(86px + env(safe-area-inset-bottom,0px));z-index:870}
 .cs-savebar .cs-btn{padding:10px 13px;font-size:13px}
 .cs-stage5-screen-actions{display:flex!important;flex-direction:column;gap:10px}
 .cs-stage5-screen-actions .cs-btn{width:100%}
}

/* Capsule Studio stylesheet section 2 */
/* Mobile usability refresh — preserves existing calculations and desktop layout */
@media (max-width:759px){
  html,body{max-width:100%;overflow-x:hidden}
  body{padding-bottom:env(safe-area-inset-bottom)}
  .cs-root{min-height:100dvh}
  .cs-hdr{position:sticky;top:0;z-index:60;min-height:62px;padding:7px 11px;border-bottom:1px solid var(--line)}
  .cs-brand{min-width:0;gap:8px}
  .cs-logo-mark{width:42px;height:42px;flex:0 0 42px}
  .cs-logo-mark img{width:32px!important;height:32px!important}
  .cs-logo-name{font-size:16px;white-space:nowrap}
  .cs-logo-by{font-size:9px;white-space:nowrap}
  .cs-tagline{display:none!important}
  .cs-prog{position:sticky;top:57px;z-index:59;padding:7px 8px;gap:0;overflow-x:auto;justify-content:space-between;scrollbar-width:none}
  .cs-prog::-webkit-scrollbar{display:none}
  .cs-step{min-width:36px;justify-content:center;padding:3px}
  .cs-stepnum{width:28px!important;height:28px!important;font-size:12px!important}
  .cs-stepdiv{min-width:8px;flex:1}
  .cs-main{min-height:calc(100dvh - 106px)}
  .cs-page{padding:20px 14px 92px;max-width:none}
  .cs-page-title{font-size:clamp(28px,9vw,38px);line-height:1.02;margin-bottom:8px}
  .cs-page-sub{font-size:14px;line-height:1.45;margin-bottom:18px}
  .cs-stack{gap:14px}
  .cs-card,.cs-formsection{border-radius:0}
  .cs-card-hd,.cs-card-bd{padding-left:14px!important;padding-right:14px!important}
  .cs-card-hd{padding-top:13px;padding-bottom:13px}
  .cs-card-bd{padding-top:15px;padding-bottom:16px}
  .cs-formsection{padding:15px 14px;margin-bottom:14px}
  .cs-formsection-hd{gap:10px;margin-bottom:14px}
  .cs-input,.cs-select,input[type="number"],input[type="text"],textarea{font-size:16px!important;min-height:46px}
  .cs-addr-row{display:grid!important;grid-template-columns:1fr!important;gap:9px!important}
  .cs-btn{min-height:46px;font-size:14px;padding:11px 14px}
  .cs-chip{min-height:42px;padding:9px 12px;font-size:13px}
  .cs-chip-row{gap:7px}
  .cs-coll-grid,.cs-size-grid,.cs-roof-grid,.cs-clad-grid,.cs-extra-grid{grid-template-columns:1fr!important;gap:10px!important}
  .cs-coll-card,.cs-size-card,.cs-roof-chip,.cs-clad-card,.cs-extra-card{min-height:64px}
  .cs-coll-card:hover,.cs-size-card:hover,.cs-roof-chip:hover,.cs-clad-card:hover{transform:none}
  .cs-twocol,.cs-result-grid,.cs-dim-grid{grid-template-columns:1fr!important}
  .cs-svc-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .cs-svc-item{min-height:44px;padding:10px;background:var(--paper-deep)}
  .cs-nav-row{position:fixed;left:0;right:0;bottom:0;z-index:58;margin:0!important;padding:9px 12px calc(9px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(20,30,20,.10);gap:8px}
  .cs-nav-row .cs-btn{flex:1!important;min-width:0}

  /* Design step: prioritise canvas and make controls touch-friendly */
  #s5{height:calc(100dvh - 106px)!important;min-height:0!important;overflow:hidden!important}
  .cs-design{height:100%!important;min-height:0!important}
  .cs-d-main{width:100%!important;min-width:0!important;height:100%!important;display:flex!important;flex-direction:column!important}
  .cs-d-banner{padding:8px 11px;gap:7px;flex:0 0 auto}
  .cs-d-banner-hl{font-size:12.5px;line-height:1.25}
  .cs-d-banner-sub{font-size:10px;line-height:1.25;max-height:27px;overflow:hidden}
  .cs-toolbar{padding:6px 8px;gap:5px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;flex:0 0 auto}
  .cs-toolbar::-webkit-scrollbar{display:none}
  .cs-tgroup{flex-wrap:nowrap;flex:0 0 auto}
  .cs-tbtn{min-width:58px;min-height:44px;padding:6px 8px;gap:2px}
  .cs-tbtn i{font-size:17px}
  .cs-tbtn span{font-size:9px}
  .cs-infobar{font-size:10px;padding:5px 8px;white-space:nowrap;overflow-x:auto;flex:0 0 auto}
  .cs-canvas-wrap{flex:1 1 auto;min-height:0!important;overflow:auto!important;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y}
  #designCanvas{max-width:none!important;touch-action:none}
  .cs-fab{position:fixed!important;right:12px!important;bottom:calc(14px + env(safe-area-inset-bottom))!important;z-index:47!important;min-height:50px;padding:13px 17px;font-size:14px}
  .cs-fab::after{content:'Add rooms & view cost';margin-left:2px}
  .cs-fab span{display:none}
  .cs-d-sidebar{max-height:min(88dvh,760px)!important;padding-bottom:env(safe-area-inset-bottom);overscroll-behavior:contain}
  .cs-sheet-handle{width:52px;height:5px;margin-top:8px}
  .cs-sheet-close{font-size:26px;top:5px;right:8px;min-width:42px;min-height:42px}
  .cs-sb-section{padding:12px 14px}
  .cs-sb-tabs{position:sticky;top:0;z-index:3;background:#fff}
  .cs-sb-tab{min-height:46px;font-size:11px}
  .cs-sb-scroll{padding:10px 12px;overflow:auto}
  .cs-cap-list{display:grid!important;grid-template-columns:1fr!important;gap:9px!important}
  .cs-cap-card{min-height:78px;padding:10px;touch-action:manipulation}
  .cs-cap-card .cs-cap-body{align-items:center}
  .cs-cap-thumb{flex:0 0 auto}
  .cs-cap-name{font-size:14px}
  .cs-cap-dim,.cs-cap-price{font-size:12px}
  .cs-cap-note{font-size:10.5px;line-height:1.3}
  .cs-cap-chip{min-height:34px;min-width:48px}
  .cs-cost-footer{padding:12px 14px calc(14px + env(safe-area-inset-bottom));max-height:none}
  .cs-cost-main-val{font-size:25px}
  .cs-gen-btn{min-height:48px;font-size:14px;position:sticky;bottom:0}
  .cs-sheet-scrim{backdrop-filter:blur(2px)}

  .cs-spec-modal{padding:8px}
  .cs-spec-modal-inner{max-width:100%;max-height:96dvh}
  .cs-spec-modal-hd{padding:10px 12px}
  .cs-out-acts .cs-btn{min-width:100%}
}
@media (max-width:380px){
  .cs-logo-name{font-size:14px}.cs-logo-by{font-size:8px}
  .cs-svc-row{grid-template-columns:1fr}
  .cs-page{padding-left:11px;padding-right:11px}
}

/* Capsule Studio stylesheet section 3 */
/* Mobile bottom-edge fix: keeps final controls/content above browser chrome and sticky navigation. */
@media (max-width:759px){
  :root{--cs-mobile-bottom-gap:calc(118px + env(safe-area-inset-bottom, 0px));}
  body{min-height:100%;padding-bottom:env(safe-area-inset-bottom, 0px);}
  .cs-scr:not(#s5) .cs-page{padding-bottom:var(--cs-mobile-bottom-gap)!important;}
  .cs-scr:not(#s5) .cs-page-footer,
  .cs-scr:not(#s5) .cs-out-acts,
  .cs-scr:not(#s5) .cs-result-grid:last-child,
  .cs-scr:not(#s5) .cs-card:last-child,
  .cs-scr:not(#s5) .cs-formsection:last-child{margin-bottom:24px;}
  .cs-nav-row{padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px))!important;}
  #s5{height:calc(100svh - 106px)!important;max-height:calc(100dvh - 106px)!important;}
  .cs-d-sidebar{max-height:calc(100svh - 18px)!important;max-height:calc(100dvh - 18px)!important;padding-bottom:calc(18px + env(safe-area-inset-bottom, 0px))!important;}
  .cs-sb-scroll{padding-bottom:24px!important;}
  .cs-cost-footer{padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px))!important;}
  .cs-spec-modal-inner{max-height:calc(100svh - 20px)!important;max-height:calc(100dvh - 20px)!important;}
}

/* Capsule Studio stylesheet section 4 */
/* Definitive mobile bottom fix: the entire design drawer scrolls as one panel.
   This prevents the cost/generate area being trapped below mobile browser chrome. */
@media (max-width:759px){
  :root{--cs-bottom-safe:calc(42px + env(safe-area-inset-bottom, 0px));}

  /* Ordinary wizard pages: reserve more than the measured fixed nav height. */
  .cs-scr:not(#s5) .cs-page{padding-bottom:calc(160px + env(safe-area-inset-bottom, 0px))!important;}

  /* Design drawer: one continuous, momentum-scrolling surface. */
  .cs-d-sidebar{
    display:block!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain;
    max-height:calc(100svh - 8px)!important;
    max-height:calc(100dvh - 8px)!important;
    padding-bottom:var(--cs-bottom-safe)!important;
  }
  .cs-sb-section,.cs-sb-tabs{position:relative!important;top:auto!important;}
  .cs-sb-scroll{
    display:block!important;
    overflow:visible!important;
    min-height:auto!important;
    padding-bottom:18px!important;
  }
  .cs-cost-footer{
    position:relative!important;
    inset:auto!important;
    width:auto!important;
    overflow:visible!important;
    max-height:none!important;
    padding-bottom:calc(56px + env(safe-area-inset-bottom, 0px))!important;
  }
  .cs-gen-btn{position:relative!important;bottom:auto!important;margin-bottom:12px!important;}

  /* Keep the floating opener clear of Safari/Chrome bottom controls. */
  .cs-fab{bottom:calc(28px + env(safe-area-inset-bottom, 0px))!important;}

  /* Modal footer also receives a real scroll-end buffer. */
  .cs-spec-modal-body{padding-bottom:calc(32px + env(safe-area-inset-bottom, 0px))!important;}
  .cs-spec-modal-ft{padding-bottom:calc(18px + env(safe-area-inset-bottom, 0px))!important;}
}
/* Mobile Stage 5 screen-size notice */
.cs-stage5-screen-notice{display:none;}
@media (max-width: 699px){
  #s5{overflow-y:auto!important;background:var(--paper)!important;}
  #s5 .cs-design{display:none!important;}
  .cs-stage5-screen-notice{
    display:flex;min-height:calc(100dvh - 72px);padding:28px 18px calc(40px + env(safe-area-inset-bottom,0px));
    align-items:center;justify-content:center;background:var(--paper);
  }
  .cs-stage5-screen-card{
    width:min(100%,520px);border:1px solid var(--line);background:var(--paper);padding:28px 22px;
    box-shadow:0 16px 46px rgba(31,38,31,.10);text-align:center;
  }
  .cs-stage5-screen-icon{
    width:62px;height:62px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;
    background:var(--stone);color:var(--ink);font-size:29px;
  }
  .cs-stage5-screen-kicker{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:8px;}
  .cs-stage5-screen-card h2{font-family:var(--body);font-size:30px;line-height:1.08;margin:0 0 12px;color:var(--ink);}
  .cs-stage5-screen-card p{font-size:14px;line-height:1.55;color:var(--ink-soft);margin:0 auto 14px;max-width:390px;}
  .cs-stage5-device-row{display:flex;justify-content:center;gap:20px;margin:22px 0 24px;color:var(--ink);}
  .cs-stage5-device{display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;}
  .cs-stage5-device i{font-size:25px;color:var(--bush);}
  .cs-stage5-screen-actions{display:grid;gap:10px;}
  .cs-stage5-screen-actions .cs-btn{width:100%;justify-content:center;min-height:48px;}
  .cs-stage5-screen-note{font-size:11px!important;margin-top:14px!important;color:var(--ink-soft)!important;}
}

/* Capsule Studio stylesheet section 5 */
.cs-ceiling-strip-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Capsule Studio stylesheet section 6 */
.cs-stage5-help-toggle {
  margin-left:auto;
  min-height:34px;
  padding:6px 13px;
  flex-shrink:0;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  font-size:12px;
  font-weight:700;
  border-radius:999px;
  cursor:pointer;
}

.cs-stage5-help-toggle:hover,
.cs-stage5-help-toggle[aria-expanded="true"] {
  background:var(--bush);
  border-color:var(--bush);
  color:#fff;
}

#capsule-stage5-loading-helper {
  position:fixed!important;
  top:305px!important;
  right:calc(var(--sidebar-w) + 16px)!important;
  bottom:auto!important;
  width:min(360px,calc(100vw - 32px))!important;
}

.cs-helper-minimize {
  position:absolute;
  top:9px;
  right:10px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  background:#fff;
  color:var(--ink);
  font-size:22px;
  line-height:1;
  cursor:pointer;
}

.cs-helper-heading {
  padding-right:40px;
}

@media (min-width:700px) and (max-width:1180px) {
  .cs-stage5-help-toggle {
    min-height:40px;
    padding:8px 14px;
  }

  #capsule-stage5-loading-helper {
    top:290px!important;
    right:14px!important;
    width:min(330px,calc(100vw - 28px))!important;
  }
}

@media (max-width:699px) {
  .cs-stage5-help-toggle {
    display:none!important;
  }
}

/* Capsule Studio stylesheet section 7 */
/*
 * Capsule Studio bottom navigation fix
 * - Phones: keep navigation fixed but lift buttons above the iOS safe area.
 * - Small tablets: return navigation to the page flow so it cannot be covered.
 */

/* Phones */
@media (max-width: 699px) {
  :root {
    --cs-phone-safe-bottom: env(safe-area-inset-bottom, 0px);
  }

  .cs-nav-row {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding:
      10px
      12px
      calc(22px + var(--cs-phone-safe-bottom)) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border-top: 1px solid var(--line) !important;
    box-shadow: 0 -10px 30px rgba(20, 30, 20, 0.14) !important;
    z-index: 900 !important;
  }

  .cs-nav-row .cs-btn {
    min-height: 50px !important;
  }

  .cs-scr:not(#s5) .cs-page {
    padding-bottom:
      calc(190px + var(--cs-phone-safe-bottom)) !important;
  }
}

/* Small tablets, including iPad mini portrait */
@media (min-width: 700px) and (max-width: 759px) {
  .cs-nav-row {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    margin-top: 22px !important;
    padding: 12px 0 24px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: auto !important;
  }

  .cs-nav-row .cs-btn {
    min-height: 50px !important;
  }

  .cs-scr:not(#s5) .cs-page {
    padding-bottom:
      calc(40px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Capsule Studio stylesheet section 8 */
/*
 * Final Safari-safe progression navigation.
 * Keep progression controls in the document rather than attached
 * to the visual viewport, which Safari's toolbar can cover.
 */
@media (max-width: 900px) {
  .cs-scr:not(#s5) .cs-nav-row {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    display: flex !important;
    width: 100% !important;
    margin: 24px 0 0 !important;
    padding: 14px 0 20px !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: auto !important;
  }

  .cs-scr:not(#s5) .cs-nav-row .cs-btn {
    min-width: 0 !important;
    min-height: 52px !important;
    padding: 13px 16px !important;
    font-size: 13px !important;
  }

  /*
   * Real content after the buttons lets the user scroll them above
   * Safari/Chrome's bottom toolbar.
   */
  .cs-scr:not(#s5) .cs-page {
 padding-bottom:
      calc(110px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width: 520px) {
  .cs-scr:not(#s5) .cs-nav-row {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .cs-scr:not(#s5) .cs-nav-row .cs-btn {
    flex: none !important;
    width: 100% !important;
    min-height: 54px !important;
  }

  /*
   * Put the forward action first visually on narrow phones.
   * Back remains available immediately underneath.
   */
  .cs-scr:not(#s5) .cs-nav-row .cs-btn-primary {
    order: 1;
  }

  .cs-scr:not(#s5) .cs-nav-row .cs-btn-ghost {
    order: 2;
  }
}

/* Capsule Studio stylesheet section 9 */
/* =====================================================
   Professional portrait header — phones and tablets
   ===================================================== */
@media (max-width: 1180px) and (orientation: portrait) {
  .cs-hdr {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;

    display: flex !important;
    align-items: center !important;

    width: 100% !important;
    min-height: 66px !important;
    height: 66px !important;
    padding:
      8px
      16px
      8px
      calc(16px + env(safe-area-inset-left, 0px)) !important;

    background: var(--ink) !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
    box-sizing: border-box !important;
  }

  .cs-brand {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    gap: 11px !important;
  }

  /* The animated jigsaw sequence is too wide in portrait. */
  .cs-logo-seq,
  .cs-tagline {
    display: none !important;
  }

  .cs-logo-mark {
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
    margin: 0 !important;
  }

  .cs-logo-mark img {
    width: 39px !important;
    height: 39px !important;
    object-fit: contain !important;
  }

  .cs-logo-txt {
    min-width: 0 !important;
  }

  .cs-logo-name {
    overflow: hidden !important;
    font-size: clamp(18px, 3.2vw, 24px) !important;
    line-height: 1.05 !important;
    letter-spacing: .055em !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  .cs-logo-by {
    margin-top: 3px !important;
    font-size: 9px !important;
    line-height: 1 !important;
    letter-spacing: .08em !important;
    white-space: nowrap !important;
  }

  /* Clean, evenly spaced progress strip. */
  .cs-prog {
    position: sticky !important;
    top: 66px !important;
    z-index: 999 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: stretch !important;

    min-height: 56px !important;
    padding: 7px 10px !important;
    gap: 3px !important;

    overflow: hidden !important;
    background: var(--bush) !important;
    box-sizing: border-box !important;
  }

  .cs-step {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 4px !important;
    gap: 5px !important;
    justify-content: center !important;
  }

  .cs-stepnum {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    font-size: 12px !important;
  }

  .cs-steplabel {
    min-width: 0 !important;
    overflow: hidden !important;
    font-size: 9px !important;
    letter-spacing: .035em !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  .cs-stepdiv {
    flex: 1 1 18px !important;
    min-width: 5px !important;
    max-width: 34px !important;
  }

  .cs-main {
    min-height: calc(100dvh - 122px) !important;
  }
}

/* Narrow portrait screens: retain the steps without cramped labels. */
@media (max-width: 760px) and (orientation: portrait) {
  .cs-prog {
    gap: 2px !important;
    padding-inline: 7px !important;
  }

  .cs-step {
    flex: 1 1 0 !important;
    flex-direction: column !important;
    gap: 2px !important;
  }

  .cs-stepdiv {
    display: none !important;
  }

  .cs-steplabel {
    width: 100% !important;
    font-size: 7.5px !important;
    text-align: center !important;
  }
}

/* =====================================================
   Stage 5 — fail safely unless desktop requirements pass
   ===================================================== */
html.cs-stage5-desktop-required #s5 {
  height: auto !important;
  min-height: calc(100dvh - 122px) !important;
  max-height: none !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: var(--paper) !important;
}

html.cs-stage5-desktop-required #s5 .cs-design {
  display: none !important;
}

html.cs-stage5-desktop-required
  #s5
  .cs-stage5-screen-notice {
  display: flex !important;
  width: 100% !important;
  min-height: calc(100dvh - 122px) !important;

  align-items: center !important;
  justify-content: center !important;

  padding:
    32px
    18px
    calc(72px + env(safe-area-inset-bottom, 0px)) !important;

  background: var(--paper) !important;
  box-sizing: border-box !important;
}

html.cs-stage5-desktop-required
  #s5
  .cs-stage5-screen-card {
  width: min(100%, 560px) !important;
  padding: 34px 26px !important;

  border: 1px solid var(--line) !important;
  background: #fff !important;
  box-shadow: 0 18px 48px rgba(31,38,31,.13) !important;
}

html.cs-stage5-desktop-required
  #s5
  .cs-stage5-screen-card h2 {
  margin-bottom: 14px !important;
  font-size: clamp(31px, 6vw, 42px) !important;
  line-height: 1.05 !important;
}

html.cs-stage5-desktop-required
  #s5
  .cs-stage5-device-row {
  gap: 38px !important;
}

html.cs-stage5-desktop-required
  #s5
  .cs-stage5-device i {
  font-size: 32px !important;
}

/* No previous design controls may appear over the notice. */
html.cs-stage5-desktop-required #s5 .cs-d-sidebar,
html.cs-stage5-desktop-required #s5 .cs-sheet-scrim,
html.cs-stage5-desktop-required #s5 .cs-fab,
html.cs-stage5-desktop-required
  #capsule-stage5-loading-helper {
  display: none !important;
}

/*
 * CSS fallback: hide Stage 5 on ordinary coarse-pointer devices
 * even before JavaScript adds the device class.
 */
@media (pointer: coarse) {
  #s5 .cs-design {
    display: none !important;
  }

  #s5 .cs-stage5-screen-notice {
    display: flex !important;
  }
}

/* Capsule Studio stylesheet section 10 */
@media screen and (max-width:1180px) and (orientation:portrait){
.cs-hdr{position:sticky!important;top:0!important;z-index:1000!important;height:64px!important;min-height:64px!important;padding:8px 14px!important;display:flex!important;align-items:center!important;box-sizing:border-box!important}
.cs-logo-seq,.cs-tagline{display:none!important}.cs-logo-mark{width:46px!important;height:46px!important;flex:0 0 46px!important;margin:0!important}.cs-logo-mark img{width:38px!important;height:38px!important}.cs-logo-name{font-size:clamp(18px,3.2vw,23px)!important;white-space:nowrap!important}
.cs-prog{position:sticky!important;top:64px!important;z-index:999!important;display:grid!important;grid-template-columns:repeat(6,1fr)!important;min-height:54px!important;padding:7px 8px!important;gap:4px!important}.cs-step{justify-content:center!important;min-width:0!important;padding:3px!important}.cs-steplabel,.cs-stepdiv{display:none!important}
}
@media screen and (max-width:1180px){
.cs-scr:not(#s5) .cs-nav-row{position:relative!important;inset:auto!important;width:100%!important;margin:24px 0 0!important;padding:14px 0 calc(32px + env(safe-area-inset-bottom,0px))!important;background:transparent!important;border:0!important;box-shadow:none!important}.cs-scr:not(#s5) .cs-nav-row .cs-btn{min-height:52px!important}
#s5{height:auto!important;max-height:none!important;overflow-y:auto!important}#s5 .cs-design,#s5 .cs-d-sidebar,#s5 .cs-sheet-scrim,#s5 .cs-fab,#capsule-stage5-loading-helper{display:none!important}#s5 .cs-stage5-screen-notice{display:flex!important;width:100%!important;min-height:calc(100dvh - 118px)!important;align-items:center!important;justify-content:center!important;padding:30px 18px calc(48px + env(safe-area-inset-bottom,0px))!important;box-sizing:border-box!important}
}
@media screen and (pointer:coarse) and (max-width:1400px){#s5 .cs-design,#s5 .cs-d-sidebar,#s5 .cs-sheet-scrim,#s5 .cs-fab,#capsule-stage5-loading-helper{display:none!important}#s5 .cs-stage5-screen-notice{display:flex!important}}

/* Capsule Studio stylesheet section 11 */
.cs-visually-hidden{
      position:absolute!important;
      width:1px!important;
      height:1px!important;
      padding:0!important;
      margin:-1px!important;
      overflow:hidden!important;
      clip:rect(0,0,0,0)!important;
      white-space:nowrap!important;
      border:0!important;
    }

/* Capsule Studio stylesheet section 12 */
/* CAPSULE PROFESSIONAL OUTPUT PASS 1 */
.cs-cost-split{margin:0 0 10px;padding:9px 11px;background:#f5f5f1;border:1px solid var(--line);font-size:11px}
.cs-cost-split-row{display:flex;justify-content:space-between;gap:12px;padding:3px 0;color:var(--ink)}
.cs-cost-split-row strong{font-weight:800;white-space:nowrap}
.cs-cost-mobility,.cs-transport-formula{font-size:10.5px;line-height:1.35;color:var(--ink-soft);margin-top:5px}
.cs-save-draft-btn{width:100%;margin-top:8px;min-height:42px;justify-content:center}
.cs-draft-modal{position:fixed;inset:0;z-index:2200;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(27,38,31,.78)}
.cs-draft-modal.is-open{display:flex}
.cs-draft-dialog{width:min(520px,100%);background:var(--paper);border-radius:var(--r);box-shadow:0 24px 70px rgba(0,0,0,.35);overflow:hidden}
.cs-draft-dialog-hd{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line)}
.cs-draft-dialog-hd h3{margin:0;font-size:20px;color:var(--ink)}
.cs-draft-close{border:0;background:transparent;font-size:25px;line-height:1;cursor:pointer;color:var(--ink)}
.cs-draft-dialog-bd{padding:20px}
.cs-draft-dialog-bd p{margin:0 0 14px;color:var(--ink-soft);font-size:13px;line-height:1.55}
.cs-draft-pin-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cs-draft-pin-grid .cs-input{text-align:center;letter-spacing:.28em;font-weight:800}
.cs-draft-dialog-actions{display:flex;gap:10px;margin-top:16px}
.cs-draft-dialog-actions .cs-btn{flex:1;justify-content:center}
.cs-draft-result{display:none;margin-top:16px;padding:14px;background:#eef4f1;border:1px solid rgba(23,63,53,.18);border-radius:10px}
.cs-draft-result.is-show{display:block}
.cs-draft-result-ref{font-size:24px;font-weight:850;letter-spacing:.08em;color:#173f35;margin:5px 0 10px}
.cs-draft-status{min-height:18px;margin-top:10px!important;color:var(--ink-soft)!important}
@media(max-width:700px){.cs-draft-pin-grid{grid-template-columns:1fr}.cs-draft-dialog-actions{flex-direction:column}}

/* Capsule Studio stylesheet section 13 */
#capsule-stage5-loading-helper {
    display: none;
    position: fixed;
    right: 22px;
    bottom: 24px;
    z-index: 1250;
    width: min(370px, calc(100vw - 32px));
    padding: 18px;
    border: 1px solid rgba(31, 67, 54, 0.22);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
    color: #1f4336;
    font-family: inherit;
  }

  #capsule-stage5-loading-helper.is-visible {
    display: block;
  }

  #capsule-stage5-loading-helper .cs-helper-heading {
    margin: 0 0 7px;
    font-size: 17px;
    font-weight: 750;
    line-height: 1.25;
  }

  #capsule-stage5-loading-helper .cs-helper-copy {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.5;
    color: #43554d;
  }

  #capsule-stage5-loading-helper .cs-helper-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
  }

  #capsule-stage5-loading-helper button {
    min-height: 42px;
    padding: 9px 14px;
    border-radius: 9px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
  }

  #capsule-stage5-helper-select {
    border: 1px solid #1f4336;
    background: #1f4336;
    color: #ffffff;
  }

  #capsule-stage5-helper-close {
    border: 1px solid rgba(31, 67, 54, 0.28);
    background: #ffffff;
    color: #1f4336;
  }

  #capsule-stage5-loading-helper .cs-helper-status {
    display: none;
    margin: 12px 0 0;
    padding: 10px 11px;
    border-radius: 8px;
    background: #edf4f0;
    color: #1f4336;
    font-size: 13px;
    line-height: 1.4;
  }

  #capsule-stage5-loading-helper .cs-helper-status.is-visible {
    display: block;
  }

  @media (max-width: 699px) {
    #capsule-stage5-loading-helper {
      display: none !important;
    }
  }

/* Phone Stage 5 save-dialog viewport fix */
@media screen and (max-width:700px) {
  .cs-draft-modal {
    height:100dvh !important;
    max-height:100dvh !important;
    align-items:flex-start !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding:
      max(12px, env(safe-area-inset-top, 0px))
      12px
      max(24px, env(safe-area-inset-bottom, 0px)) !important;
  }

  .cs-draft-dialog {
    width:100% !important;
    max-width:520px !important;
    max-height:calc(
      100dvh - 36px
      - env(safe-area-inset-top, 0px)
      - env(safe-area-inset-bottom, 0px)
    ) !important;
    margin:auto 0 !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
  }

  .cs-draft-dialog-hd {
    flex:0 0 auto !important;
    padding:14px 16px !important;
  }

  .cs-draft-dialog-bd {
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
    padding:16px 16px
      calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Capsule Builders return link */
.cs-brand-link {
  color:inherit;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}

.cs-brand-link:hover .cs-logo-by {
  color:rgba(255,255,255,.85);
}

.cs-header-right {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:18px;
  margin-left:auto;
  flex-shrink:0;
}

.cs-main-site-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:40px;
  padding:9px 13px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:8px;
  color:#fff;
  background:rgba(255,255,255,.07);
  text-decoration:none;
  font-family:var(--body);
  font-size:11px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.04em;
  white-space:nowrap;
  transition:
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease;
}

.cs-main-site-link:hover {
  background:#fff;
  border-color:#fff;
  color:var(--ink);
}

.cs-main-site-link i {
  font-size:16px;
}

.cs-main-site-link-short {
  display:none;
}

@media screen and (max-width:680px) {
  .cs-header-right {
    gap:0;
  }

  .cs-main-site-link {
    min-height:40px;
    padding:8px 10px;
    gap:5px;
    font-size:10px;
  }

  .cs-main-site-link-full {
    display:none;
  }

  .cs-main-site-link-short {
    display:inline;
  }
}

@media screen and (max-width:360px) {
  .cs-main-site-link {
    width:40px;
    padding:8px;
  }

  .cs-main-site-link-short {
    display:none;
  }

  .cs-logo-by {
    font-size:7px !important;
  }
}