/* Advanced Layering — page-specific premium components (loads after paintify.css) */
.lay-step{display:flex;align-items:center;gap:12px;margin:0 0 16px}
.lay-step .sn{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--grad-accent);color:#fff;font-weight:700;font-size:.9rem;flex:0 0 auto}
.lay-step h3{font-family:var(--f-disp);font-weight:700;font-size:1.18rem;letter-spacing:-.02em}
.lay-step .sn.cyan{background:var(--grad-cyan);color:#06243f}

.section{margin-bottom:24px}
.ghostlink{color:var(--brand);font-weight:600;font-size:.84rem}

#cleanWrap{margin-top:14px}
.clean-box{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:14px;
  font-family:var(--f-mono);font-size:.74rem;line-height:1.5;color:var(--muted);max-height:240px;overflow:auto;white-space:pre-wrap}

.layer-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:18px}
#progress{display:flex;align-items:center;gap:14px;margin-top:18px;background:var(--brand-ghost);border:1px solid var(--brand-soft);border-radius:var(--r-md);padding:16px 18px}
#progress .spin{border-color:rgba(28,105,212,.25);border-top-color:var(--brand)}
#progressMsg{font-size:.88rem;color:var(--muted)}
.errnote{margin-top:14px;background:#fff4e4;border:1px solid #f4e6c8;border-radius:var(--r-md);padding:13px 16px;font-size:.85rem;color:#8a5a00}

.sample-tag{display:inline-flex;align-items:center;gap:7px;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#0a85c9;background:#e7f8ff;border:1px solid #bfe9fb;border-radius:9999px;padding:5px 11px;margin-left:10px}

/* results layout */
.lay-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,400px);gap:24px;align-items:start}
.stage-card,.panel{min-width:0}
.stage-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-md);overflow:hidden}
.stage-toolbar{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.vtoggle{display:flex;gap:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:9999px;padding:4px}
.vbtn{padding:7px 14px;border-radius:9999px;font-size:.74rem;font-weight:600;color:var(--subtle);transition:.2s var(--ease)}
.vbtn.on{background:var(--grad-accent);color:#fff}
.toolbar-sp{flex:1}
.cov{font-size:.78rem;color:var(--ink-3);color:var(--subtle)}
.cov b{color:var(--text);font-weight:700}
.stage-wrap{position:relative;background:repeating-conic-gradient(#f3f4f6 0% 25%,#fff 0% 50%) 50%/22px 22px}
#stage{display:block;width:100%;height:auto;max-height:72vh;object-fit:contain;margin:0 auto}

.side{display:flex;flex-direction:column;gap:18px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-md);overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.panel-head h4{font-family:var(--f-disp);font-weight:700;font-size:1rem;letter-spacing:-.01em}
.panel-head .hint{font-size:.74rem;color:var(--subtle)}

.layer-list{max-height:340px;overflow:auto;padding:8px}
.layer-row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:9px 10px;border-radius:var(--r-sm);
  border:1px solid transparent;transition:.18s var(--ease);cursor:pointer}
.layer-row:hover{background:var(--surface-2)}
.layer-row.on{background:var(--brand-ghost);border-color:var(--brand-soft)}
.layer-row .lsw{width:26px;height:26px;border-radius:6px;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.layer-row.painted .lsw{box-shadow:inset 0 0 0 1px rgba(0,0,0,.1),0 0 0 2px var(--cyan)}
.layer-row .lname{flex:1;min-width:0;font-size:.86rem;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize}
.layer-row .lbody{font-size:.58rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand);background:var(--brand-soft);border-radius:4px;padding:1px 5px;margin-left:4px}
.layer-row .lcount{font-size:.68rem;color:var(--subtle);font-family:var(--f-mono)}

/* picker */
.picker-body{padding:14px 16px}
.pick-for{font-size:.78rem;color:var(--subtle);margin-bottom:10px}
.pick-for b{color:var(--brand);font-weight:700;text-transform:capitalize}
.pickSearch{width:100%;padding:10px 13px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);font-family:var(--f-body);font-size:.88rem;margin-bottom:10px}
.pickSearch:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ghost)}
.pickTabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;margin-bottom:8px}
.ptab{flex:0 0 auto;padding:7px 12px;border-radius:9999px;font-size:.7rem;font-weight:600;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);white-space:nowrap;transition:.18s var(--ease)}
.ptab.on{background:var(--grad-accent);color:#fff;border-color:transparent}
.pickGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;max-height:300px;overflow:auto}
.pswatch{display:flex;align-items:center;gap:9px;padding:6px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);transition:.16s var(--ease);text-align:left}
.pswatch:hover{border-color:var(--brand);transform:translateY(-1px);box-shadow:var(--sh-sm)}
.pswatch .ps-col{width:30px;height:30px;border-radius:5px;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.pswatch .ps-meta{min-width:0}
.pswatch .ps-meta b{display:block;font-size:.74rem;font-weight:600;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize}
.pswatch .ps-meta span{font-size:.64rem;color:var(--subtle);font-family:var(--f-mono)}

.export-row{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:920px){.lay-grid{grid-template-columns:1fr}.pickGrid{grid-template-columns:repeat(2,1fr)}}

/* layering hero uses the framed segmented-building image (no splash here) */
.hero .art .layer-demo{width:clamp(280px,34vw,440px);aspect-ratio:4/3;object-fit:cover;
  border-radius:12px;border:1px solid rgba(255,255,255,.18);
  box-shadow:0 24px 50px rgba(0,0,0,.42),0 0 0 4px rgba(54,201,255,.10);display:block}
@media(max-width:900px){.hero .art .layer-demo{width:min(440px,100%)}}

/* pipeline strip (raw -> whitened -> layered -> coloured) */
.pipeline{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:12px;align-items:center;margin-top:6px}
.pstage{display:flex;flex-direction:column;gap:8px;min-width:0;margin:0}
.pstage img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;border:1px solid var(--line);box-shadow:var(--sh-sm);background:var(--surface-2)}
.pstage figcaption b{display:block;font-size:.84rem;font-weight:700;letter-spacing:-.01em;text-transform:capitalize}
.pstage figcaption span{font-size:.72rem;color:var(--subtle)}
.parrow{color:var(--brand);display:grid;place-items:center}
.parrow svg{width:20px;height:20px}
@media(max-width:760px){.pipeline{grid-template-columns:1fr}.parrow{transform:rotate(90deg);justify-self:center;margin:-2px 0}}

/* ============ TAP-TO-PAINT STUDIO ============ */
.studio{max-width:760px;margin:0 auto}
.studio-stage{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh-md);
  background:repeating-conic-gradient(#f3f4f6 0 25%,#fff 0 50%) 50%/22px 22px}
#stage{display:block;width:100%;height:auto;max-height:74vh;object-fit:contain;cursor:pointer;touch-action:manipulation}
.shint{position:absolute;left:50%;top:14px;transform:translateX(-50%);background:rgba(13,38,89,.92);color:#fff;
  font-size:.76rem;font-weight:500;padding:8px 15px;border-radius:999px;pointer-events:none;transition:opacity .4s;white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.slegend{position:absolute;left:12px;bottom:12px;display:flex;gap:12px;font-size:.66rem;color:var(--subtle);background:rgba(255,255,255,.85);backdrop-filter:blur(6px);padding:6px 10px;border-radius:9px}
.slegend i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:5px;vertical-align:middle}
.slegend .dotp{background:#cfd3da}.slegend .dotk{background:#3a3f47}
.scount{position:absolute;right:12px;top:12px;font-size:.66rem;color:#fff;background:rgba(13,38,89,.78);padding:5px 10px;border-radius:8px}
.scount b{font-weight:700}

.studio-actions{display:flex;align-items:center;gap:8px;margin-top:14px;flex-wrap:wrap}
.sbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:11px;padding:11px 14px;font:inherit;font-size:.82rem;font-weight:600;color:var(--text);cursor:pointer;transition:.16s var(--ease)}
.sbtn svg{width:16px;height:16px}
.sbtn:active{transform:translateY(1px)}.sbtn:hover{background:var(--surface-2)}
.sbtn.compare.on{background:#0d2659;color:#fff;border-color:#0d2659}
.sdl{margin-left:auto;flex:1 1 200px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:none;border-radius:11px;
  padding:13px 18px;font:inherit;font-size:.9rem;font-weight:700;letter-spacing:.02em;color:#fff;cursor:pointer;
  background:linear-gradient(135deg,var(--brand),#0653b6);box-shadow:0 10px 24px rgba(28,105,212,.34)}
.sdl svg{width:18px;height:18px}.sdl:active{transform:translateY(1px)}
.studio-export{margin-top:12px;font-size:.78rem;color:var(--subtle);text-align:center}
.studio-export button{border:none;background:none;font:inherit;font-size:.78rem;font-weight:600;color:var(--brand);cursor:pointer;padding:2px 2px}
.studio-export button:hover{text-decoration:underline}

/* shade sheet */
#results .scrim{position:fixed;inset:0;background:rgba(8,15,30,.34);opacity:0;pointer-events:none;transition:opacity .35s var(--ease);z-index:55}
#results .scrim.show{opacity:1;pointer-events:auto}
#results .sheet{position:fixed;left:50%;bottom:0;transform:translate(-50%,108%);width:100%;max-width:620px;z-index:60;
  background:var(--surface);border-radius:22px 22px 0 0;box-shadow:0 -16px 50px rgba(8,15,30,.3);
  transition:transform .42s var(--ease);padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));max-height:52vh;display:flex;flex-direction:column}
#results .sheet.show{transform:translate(-50%,0)}
#results .grab{width:42px;height:5px;border-radius:999px;background:#d7dae0;margin:10px auto 4px}
#results .sheet-head{display:flex;align-items:center;gap:11px;padding:6px 18px 12px}
#results .sheet-head .now{width:36px;height:36px;border-radius:9px;border:1px solid var(--line);box-shadow:inset 0 0 0 2px var(--cyan);flex:0 0 auto}
#results .sheet-head .lbl b{display:block;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--subtle)}
#results .sheet-head .lbl h3{font-size:1.14rem;font-weight:700;letter-spacing:-.02em;text-transform:capitalize}
#results .sheet-head .x{margin-left:auto;width:36px;height:36px;border-radius:9px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer}
#results .sheet-head .x svg{width:16px;height:16px;color:var(--subtle)}
#results .search{margin:0 16px 10px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:11px;padding:11px 12px;background:var(--surface-2)}
#results .search svg{width:16px;height:16px;color:var(--subtle);flex:0 0 auto}
#results .search input{border:none;background:none;outline:none;font:inherit;font-size:.92rem;width:100%}
#results .recent{padding:0 16px 8px}
#results .recent .cap{font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--subtle);margin-bottom:7px}
#results .recent .row{display:flex;gap:9px;overflow-x:auto;padding-bottom:2px}
#results .tabs{display:flex;gap:7px;overflow-x:auto;padding:0 16px 10px;flex:0 0 auto}
#results .tab{flex:0 0 auto;padding:8px 13px;border-radius:999px;font-size:.74rem;font-weight:600;color:var(--subtle);background:var(--surface-2);border:1px solid var(--line);cursor:pointer;white-space:nowrap}
#results .tab.on{background:#0d2659;color:#fff;border-color:#0d2659}
#results .grid{flex:1 1 auto;overflow-y:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:4px 16px 16px}
#results .sw{display:flex;flex-direction:column;align-items:center;gap:5px;border:none;background:none;padding:0;cursor:pointer}
#results .sw .dot{width:100%;aspect-ratio:1;border-radius:13px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 3px 8px rgba(0,0,0,.08);transition:transform .12s var(--ease)}
#results .sw:active .dot{transform:scale(.92)}
#results .sw.on .dot{box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 0 0 3px var(--cyan)}
#results .sw span{font-size:.6rem;color:var(--subtle);text-align:center;line-height:1.1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#results .rdot{width:42px;height:42px;border-radius:11px;flex:0 0 auto;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
@media(max-width:560px){#results .grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.sdl{flex-basis:140px}}

/* scroll headroom so the tapped part can lift above the sheet */
body.sheet-open #results{padding-bottom:60vh}