/* Cabinet Ottawa Design Studio — phone first, colours from /apps/shared/brand/palette.css */
:root{
  --ds-bg:#F4F7FB; --ds-panel:#FFFFFF; --ds-ink:#13233A; --ds-muted:#50627A; --ds-line:#D6DFEA;
  --ds-navy:var(--hu-navy,#0B2747); --ds-accent:var(--hu-accent,#E8590C); --ds-accent-deep:var(--hu-accent-deep,#C2410C);
  --ds-accent-soft:var(--hu-accent-soft,#FFF1E0); --ds-orange:var(--hu-orange,#FF8A00);
  --ds-sheet:38vh;
}
:root:not([data-hu-theme="soft"]) body.ds-dark{ --ds-bg:#06142A; --ds-panel:#0B2140; --ds-ink:#F2F7FD; --ds-muted:#A9BCD3; --ds-line:#1F3F66; }
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow-x:hidden}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--ds-bg);color:var(--ds-ink);display:flex;flex-direction:column;min-height:100%;overscroll-behavior:none}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:50}

.ds-bar{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--ds-navy);color:#fff;position:sticky;top:0;z-index:20}
.ds-bar h1{font-size:1rem;margin:0;flex:1;font-weight:800;letter-spacing:.01em}
.ds-howto{display:inline-block;margin:0 0 10px;font-size:.84rem;font-weight:800;color:#e8590c;text-decoration:none}
@media(max-width:480px){.ds-back{color:#fff;text-decoration:none;font-weight:700;font-size:.9rem;white-space:nowrap;padding:6px 4px}
.ds-price{background:var(--ds-orange);color:var(--ds-navy);border:0;border-radius:999px;padding:7px 12px;font-weight:900;font-size:.85rem;white-space:nowrap;cursor:pointer;max-width:46vw;overflow:hidden;text-overflow:ellipsis}

main{flex:1;display:flex;flex-direction:column;min-height:0}
.ds-stage{position:relative;flex:1;min-height:30vh;background:var(--ds-panel);border-bottom:1px solid var(--ds-line);overflow:hidden}
.ds-stage canvas{display:block;width:100%;height:100%;touch-action:none}
.ds-viewtoggle{position:absolute;top:10px;left:10px;z-index:5;display:flex;background:var(--ds-bg);border:1px solid var(--ds-line);border-radius:999px;padding:3px}
.ds-viewtoggle button{border:0;background:transparent;color:var(--ds-ink);font-weight:800;font-size:.85rem;padding:7px 14px;border-radius:999px;cursor:pointer;min-height:36px}
.ds-viewtoggle button[aria-selected="true"]{background:var(--ds-navy);color:#fff}
.ds-toolbar{position:absolute;top:10px;right:10px;z-index:5;display:flex;gap:6px}
.ds-toolbar button{width:38px;height:38px;border-radius:50%;border:1px solid var(--ds-line);background:var(--ds-bg);color:var(--ds-ink);font-size:1.1rem;cursor:pointer}
.ds-toolbar button:disabled{opacity:.35}
.ds-hint{position:absolute;left:0;right:0;bottom:8px;margin:0;text-align:center;font-size:.8rem;color:var(--ds-muted);pointer-events:none}
.ds-warnings{position:absolute;left:10px;right:10px;bottom:30px;display:flex;flex-direction:column;gap:4px;pointer-events:none}
.ds-warnings p{margin:0;background:var(--ds-orange);color:var(--ds-navy);font-size:.78rem;font-weight:700;padding:6px 10px;border-radius:8px}

.ds-sheet{height:var(--ds-sheet);display:flex;flex-direction:column;background:var(--ds-bg);padding-bottom:env(safe-area-inset-bottom,0px);transition:height .2s ease;border-top:1px solid var(--ds-line)}
/* the handle: tap to hide the controls and give the 3D the screen */
.ds-handle{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:30px;border:0;background:var(--ds-panel);color:var(--ds-muted);font:700 .78rem/1 Inter,system-ui,sans-serif;cursor:pointer;padding:6px 0 4px}
.ds-grip{width:36px;height:4px;border-radius:2px;background:var(--ds-line)}
.ds-handle:focus-visible{outline:2px solid var(--ds-accent);outline-offset:-2px}
body.ds-collapsed{--ds-sheet:calc(84px + env(safe-area-inset-bottom,0px))}
body.ds-collapsed .ds-panel{display:none}
body.ds-collapsed .ds-tabs button{min-height:48px;padding:6px 4px}
.ds-tabs{display:grid;grid-template-columns:repeat(4,1fr);background:var(--ds-panel);border-bottom:1px solid var(--ds-line)}
.ds-tabs button{border:0;background:transparent;color:var(--ds-muted);font-weight:800;font-size:.82rem;padding:10px 4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:52px;border-bottom:3px solid transparent}
.ds-tabs button span{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--ds-line);color:var(--ds-ink);font-size:.72rem}
.ds-tabs button[aria-selected="true"]{color:var(--ds-navy);border-bottom-color:var(--ds-accent)}
.ds-tabs button[aria-selected="true"] span{background:var(--ds-accent);color:#fff}
.ds-panel{flex:1;overflow-y:auto;padding:12px 14px 80px;-webkit-overflow-scrolling:touch}
.ds-panel h2{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ds-muted);margin:14px 0 8px}
.ds-panel h2:first-child{margin-top:2px}
.ds-note{font-size:.82rem;color:var(--ds-muted);margin:4px 0 8px;line-height:1.4}

.ds-chips{display:flex;flex-wrap:wrap;gap:8px}
.ds-chips button{border:1.5px solid var(--ds-line);background:var(--ds-panel);color:var(--ds-ink);border-radius:999px;padding:9px 14px;font-weight:700;font-size:.86rem;cursor:pointer;min-height:40px}
.ds-chips button.on{background:var(--ds-navy);border-color:var(--ds-navy);color:#fff}
#cab-chips button{background:var(--ds-accent-soft);border-color:var(--ds-accent);color:var(--ds-accent-deep)}
#cab-chips button:active{background:var(--ds-accent);color:#fff}
.ds-swatches{display:flex;flex-wrap:wrap;gap:10px}
.ds-swatches button{width:44px;height:44px;border-radius:12px;border:2px solid var(--ds-line);cursor:pointer;position:relative}
.ds-swatches button.on{border-color:var(--ds-accent);box-shadow:0 0 0 2px var(--ds-accent-soft)}
.ds-swatches button span{position:absolute;left:0;right:0;bottom:-16px;font-size:.6rem;color:var(--ds-muted);text-align:center;white-space:nowrap}
.ds-swatches{padding-bottom:16px}
.ds-switch{display:flex;align-items:center;gap:8px;font-weight:700;margin:10px 0;font-size:.9rem}
.ds-switch input{width:20px;height:20px;accent-color:var(--ds-accent)}
.ds-walls{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.ds-walls label{display:flex;flex-direction:column;gap:4px;font-size:.78rem;font-weight:700;color:var(--ds-muted)}
.ds-walls .ft{display:flex;align-items:center;gap:4px}
.ds-walls input{width:56px;min-height:40px;border:1.5px solid var(--ds-line);border-radius:8px;padding:6px;font-size:1rem;font-weight:700;color:var(--ds-ink);background:var(--ds-panel)}
.ds-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0}
.ds-row label{display:flex;align-items:center;gap:6px;font-size:.85rem;font-weight:700}
select,input[type=text]{min-height:40px;border:1.5px solid var(--ds-line);border-radius:8px;padding:6px 8px;font-size:.95rem;font-weight:700;background:var(--ds-panel);color:var(--ds-ink)}
.ds-btn{border:0;background:var(--ds-accent);color:#fff;font-weight:800;border-radius:10px;padding:11px 16px;font-size:.92rem;cursor:pointer;min-height:44px}
.ds-btn:active{background:var(--ds-accent-deep)}
.ds-btn-soft{background:var(--ds-panel);color:var(--ds-navy);border:1.5px solid var(--ds-line)}
.ds-btn-danger{background:var(--ds-panel);color:#9F1239;border:1.5px solid #f2c2ce}
.ds-btn-small{padding:8px 12px;min-height:38px;font-size:.82rem}
.ds-selected{background:var(--ds-panel);border:1.5px solid var(--ds-accent);border-radius:12px;padding:8px 12px;margin-top:10px}
.ds-summary{font-size:.82rem;color:var(--ds-muted);margin-top:10px;line-height:1.5}
.ds-summary b{color:var(--ds-ink)}
.ds-actions{display:grid;gap:8px;grid-template-columns:1fr 1fr}
.ds-actions .ds-btn:first-child{grid-column:1/-1}
.ds-bigprice{font-size:1.7rem;font-weight:900;color:var(--ds-navy);margin:2px 0 4px}
.ds-pricelines{font-size:.82rem;color:var(--ds-muted);display:grid;gap:2px}
.ds-pricelines div{display:flex;justify-content:space-between;gap:8px}
.ds-projectpick{background:var(--ds-panel);border:1.5px solid var(--ds-line);border-radius:12px;padding:10px 12px;margin-top:10px}
#start-over{margin-top:16px}

.ds-attach{position:fixed;left:10px;right:10px;bottom:calc(72px + env(safe-area-inset-bottom,0px));z-index:30;background:var(--ds-navy);color:#fff;padding:12px 14px;border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.35);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ds-attach p{margin:0;flex:1 1 100%;font-size:.88rem;font-weight:700}

/* Keep the shared AI-settings chip and Millie launcher clear of the sheet's bottom-right corner */
.hu-ai-settings,[data-hu-ai-settings]{bottom:calc(var(--ds-sheet) + 8px)!important}

/* keyboard up while typing in the panel: fit the page to the space above the keyboard;
   the 3D becomes a live strip at the top, the panel gets the rest, the step tabs and handle step aside */
body.ds-kb{height:var(--vvh,100%);min-height:0;overflow:hidden}
body.ds-kb main{min-height:0}
body.ds-kb .ds-stage{flex:0 0 clamp(120px,32%,260px);min-height:0}
body.ds-kb .ds-sheet{flex:1 1 auto;height:auto;min-height:0;transition:none}
body.ds-kb .hu-shell-header,body.ds-kb .rm-empty3d,body.ds-kb .ds-handle,body.ds-kb .ds-tabs,body.ds-kb .ds-hint,body.ds-kb .ds-toolbar,body.ds-kb #cabinetottawa-shared-chatbot,body.ds-kb .hu-ai-settings,body.ds-kb [data-hu-ai-settings]{display:none!important}
body.ds-kb .ds-panel{display:block;padding-bottom:24px}
body.ds-kb .ds-viewtoggle{transform:scale(.85);transform-origin:top left}

/* Millie's launcher sits just above the panel, never over the step tabs */
#cabinetottawa-shared-chatbot{bottom:calc(var(--ds-sheet) + 12px)!important;transition:bottom .2s ease}

/* side by side only on a real desktop (wide screen and a mouse); phones stay stacked even in desktop mode */
@media (min-width:900px) and (hover:hover) and (pointer:fine){
  :root,body.ds-collapsed{--ds-sheet:100%}
  .ds-handle{display:none}
  #cabinetottawa-shared-chatbot{bottom:16px!important}
  body.ds-collapsed .ds-panel{display:block}
  main{flex-direction:row}
  .ds-stage{flex:1 1 60%;min-height:0;border-bottom:0;border-right:1px solid var(--ds-line)}
  .ds-sheet{flex:0 0 400px;height:auto}
  .ds-warnings{bottom:40px}
}

.ds-packages button{background:var(--ds-navy);border-color:var(--ds-navy);color:#fff}
.ds-packages button:active{background:var(--ds-accent);border-color:var(--ds-accent)}
.ds-image{position:fixed;inset:0;z-index:40;background:rgba(7,26,49,.7);display:flex;align-items:center;justify-content:center;padding:12px}
.ds-image-card{background:var(--ds-panel);border-radius:16px;padding:12px;max-width:640px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.ds-image-card img{width:100%;height:auto;border-radius:10px;display:block}
.ds-image-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}.ds-image-actions .ds-btn{flex:1;text-align:center;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}

.ds-real{display:flex;gap:8px;overflow-x:auto;padding:8px 0 4px;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
.ds-real:empty{display:none}
.ds-real button{flex:none;width:96px;border:0;background:transparent;padding:0;cursor:pointer;scroll-snap-align:start;text-align:left}
.ds-real img{width:96px;height:72px;object-fit:cover;border-radius:10px;display:block;border:1.5px solid var(--ds-line)}
.ds-real span{display:block;font-size:.66rem;color:var(--ds-muted);margin-top:3px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-real-big button{width:150px}.ds-real-big img{width:150px;height:110px}
.ds-real-label{font-size:.72rem;color:var(--ds-accent-deep);font-weight:800;letter-spacing:.04em;text-transform:uppercase;margin:6px 0 0}
.ds-image-card .ds-real-cap{margin:8px 0 0;font-weight:700;color:var(--ds-navy)}

.ds-mydesigns{display:grid;gap:8px;margin:6px 0 10px}.ds-mydesign{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.ds-mydesign small{flex:1;min-width:140px;color:var(--ds-muted,#5b6b80);font-size:12px}.ds-x{border:0;background:transparent;font-size:20px;line-height:1;color:#b91c1c;cursor:pointer;padding:4px 8px}

/* Save-first: the account button, status and project picker must appear immediately
   after opening Save, not below photos, price lines and image-generation actions. */
.ds-panel[data-panel="save"]{display:flex;flex-direction:column}
.ds-panel[data-panel="save"] > .ds-actions:has(#save-project){order:-30}
.ds-panel[data-panel="save"] > .ds-actions:has(#save-project)::before{content:"SAVE YOUR DESIGN";grid-column:1/-1;font-size:.78rem;letter-spacing:.08em;font-weight:800;color:var(--ds-muted);padding:0 0 2px}
.ds-panel[data-panel="save"] > #save-status{order:-29;min-height:1.3em;margin-top:8px}
.ds-panel[data-panel="save"] > #project-pick{order:-28;flex-shrink:0}
.ds-panel[data-panel="save"] > h2:has(+ .ds-note + .ds-actions:has(#save-project)),
.ds-panel[data-panel="save"] > h2:has(+ .ds-note + .ds-actions:has(#save-project)) + .ds-note{display:none}
.ds-panel[data-panel="save"] > #start-over{order:20}

/* Starting-design flipper: « » over the stage. Flipping previews a copy; the gallery entry itself is never changed. */
.ds-flip{position:absolute;left:50%;top:56px;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:6px;background:var(--ds-bg);border:1px solid var(--ds-line);border-radius:999px;padding:4px;box-shadow:0 4px 14px rgba(11,39,71,.14);max-width:calc(100% - 20px)}
.ds-flip button{width:44px;height:44px;border-radius:50%;border:0;background:var(--ds-navy);color:#fff;font-size:1.35rem;font-weight:900;line-height:1;cursor:pointer;flex:none}
.ds-flip button:active{transform:scale(.94)}
.ds-flip-label{display:flex;flex-direction:column;align-items:center;min-width:0;padding:0 6px;text-align:center}
.ds-flip-label b{font-size:.86rem;color:var(--ds-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw}
.ds-flip-label small{font-size:.72rem;color:var(--ds-muted);white-space:nowrap}
/* sits under the Plan/3D toggle: the bottom-right of the stage belongs to Millie's launcher */
.ds-prepared-h{font-size:.95rem;margin:4px 0 2px;color:var(--ds-ink,#10233f)}