/* Shared Value Mapper surface; every tool rule is scoped away from the Atelier. */
.mapper-page{margin:0;min-height:100svh;padding:32px;background:linear-gradient(#100c1940,#100c1959),url('https://georgeayersartist.com/wp-content/uploads/td-image-sizes/3536-1672-959818ba.webp') center / cover fixed;color:#f5f2f6;font-family:"Avenir Next",Avenir,"Helvetica Neue",Arial,sans-serif;color-scheme:dark}
.mapper-page>.mapper-surface{max-width:1480px;height:calc(100dvh - 64px);min-height:540px;margin:auto;border:1px solid #d7b5f56b;border-radius:12px;box-shadow:0 30px 100px #0009;overflow:hidden}
.mapper-surface{--accent:#d0adef;--accent-hover:#e6cdf9;--text:#f5f2f6;--muted:#d0c4d9;--border:#ffffff2e;box-sizing:border-box;width:100%;height:100%;font-family:"Avenir Next",Avenir,"Helvetica Neue",Arial,sans-serif;color:var(--text);color-scheme:dark;font-size:16px;line-height:1.5}
.mapper-surface *{box-sizing:border-box}.mapper-surface button,.mapper-surface input{font:inherit}.mapper-surface button{color:inherit;cursor:pointer}.mapper-surface button:disabled{opacity:.4;cursor:default}.mapper-surface button:focus-visible,.mapper-surface a:focus-visible,.mapper-surface input:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.mapper-surface a{color:var(--accent);text-decoration:none}.mapper-surface a:hover{color:var(--accent-hover)}
.mapper-surface .mapper-header{height:64px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 24px;border-bottom:1px solid var(--border);background:#21162cd9;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);font-size:14px}.mapper-surface .mapper-header a:first-child{color:#f5f2f6;letter-spacing:.2em}.mapper-surface .workbench-context{color:#d0b2e9;font-size:12px;letter-spacing:.16em}.mapper-surface .workbench-close{display:flex;align-items:center;gap:14px;border:0;padding:8px 0 8px 16px;min-height:44px;background:transparent;font-size:14px}.mapper-surface .workbench-close span{font-size:27px;line-height:1}.mapper-surface .workbench-close:hover{color:var(--accent);text-shadow:0 0 16px #a76bd799}
.mapper-surface .app{display:grid;grid-template-columns:300px minmax(0,1fr);height:calc(100% - 64px);min-height:0}.mapper-surface .sidebar{min-height:0;overflow:auto;padding:26px 24px;display:flex;flex-direction:column;gap:18px;border-right:1px solid #dec0f142;background:linear-gradient(145deg,#472b60d9,#23182be8);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px)}
.mapper-surface .title{font-size:30px;font-weight:300;line-height:1.2;letter-spacing:0;margin:0 0 10px}.mapper-surface .subtitle{font-size:12px;letter-spacing:.12em;color:var(--muted)}.mapper-surface .section{margin-top:6px}.mapper-surface .section h3{font-size:14px;line-height:1.5;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 12px}.mapper-surface #imageInput{display:none}
.mapper-surface .chooseBtn,.mapper-surface .btnPrimary{width:100%;border:1px solid #c3a0e77a;background:#dcc4ef12;padding:13px 16px;border-radius:4px;font-size:16px;min-height:48px}.mapper-surface .chooseBtn:hover{background:#c3a0e724}.mapper-surface .btnPrimary{background:#9871bb;color:#130c1b;border-color:#bf9adc;font-weight:500}.mapper-surface .btnPrimary:hover:not(:disabled){background:#bb95dc}
.mapper-surface .stepsWrap{display:flex;align-items:center;justify-content:space-between;gap:12px}.mapper-surface .stepBtn{width:56px;height:46px;border:1px solid var(--border);border-radius:4px;background:#ffffff09;font-size:28px}.mapper-surface .stepBtn:hover:not(:disabled){background:#ffffff20}.mapper-surface .stepValue{width:48px;text-align:center;font-size:24px;font-weight:400}
.mapper-surface .checkRow{display:flex;gap:10px;align-items:center;border:1px solid var(--border);border-radius:4px;background:#ffffff06;padding:12px;font-size:14px}.mapper-surface input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px;flex-shrink:0}.mapper-surface .status,.mapper-surface .privacy{font-size:14px;line-height:1.6;color:var(--muted);margin:0}.mapper-surface .status:empty{display:none}.mapper-surface .spacer{flex:1}.mapper-surface .downloads{display:flex;flex-wrap:wrap;gap:10px}.mapper-surface .download-link{padding:10px 12px;min-height:44px;border:1px solid var(--border);border-radius:4px;background:#ffffff09;font-size:14px}.mapper-surface .download-link:hover:not(:disabled){border-color:var(--accent);background:#c3a0e724}
.mapper-surface .main{display:flex;flex-direction:column;min-width:0;min-height:0;background:#18151d4d;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.mapper-surface .toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 18px;border-bottom:1px solid var(--border);background:#1a1422b8;color:#f1eaf5;font-size:14px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.mapper-surface .zoom-controls{display:flex;gap:8px}.mapper-surface .fitBtn{min-width:44px;min-height:44px;border:1px solid #ffffff38;border-radius:4px;background:#ffffff0d;padding:10px 12px;font-size:14px}.mapper-surface .fitBtn:hover{background:#ffffff25}
.mapper-surface .canvasWrap{flex:1;min-height:0;overflow:hidden}.mapper-surface .canvas{width:100%;height:100%;position:relative;overflow:hidden;cursor:grab;touch-action:none}.mapper-surface .canvas.dragover{outline:3px solid var(--accent);outline-offset:-3px}.mapper-surface #stage{position:absolute;left:50%;top:50%;will-change:transform}.mapper-surface #previewImg{display:none;max-width:none;max-height:none;user-select:none;pointer-events:none;-webkit-user-drag:none;border-radius:0;opacity:1}
.mapper-surface .emptyState{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:32px;background:linear-gradient(#12101612,#13101655)}.mapper-surface .emptyChooseBtn{display:flex;flex-direction:column-reverse;align-items:center;gap:12px;width:min(490px,100%);padding:32px 22px;border:1px solid #d2adef99;border-radius:6px;background:#231a2dbc;box-shadow:0 18px 60px #0003;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.mapper-surface .emptyChooseBtn:hover{background:#3e2853d9;border-color:#e0c3f7}.mapper-surface .emptyAction{font-size:clamp(23px,2.5vw,30px);font-weight:300;line-height:1.3}.mapper-surface .emptyStep{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#d9c7e7}.mapper-surface .emptySteps{list-style:none;max-width:490px;margin:0;padding:14px 20px;text-align:center;font-size:14px;line-height:1.6;color:#f1eaf5;border-radius:4px;background:#17121fbd;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.mapper-surface .emptySteps li{margin:6px 0}.mapper-surface .emptySteps strong{font-weight:500}
/* Once loaded, the map and its immediate surround are fully opaque and neutral. */
.mapper-surface.has-image .main{background:#282828;backdrop-filter:none;-webkit-backdrop-filter:none}.mapper-surface.has-image .toolbar{background:#242424;backdrop-filter:none;-webkit-backdrop-filter:none}.mapper-surface.has-image .canvas{background:#282828}
/* The workbench sits over the actual Atelier; native dialog manages focus and Escape. */
#mapper-workbench{position:fixed;inset:0;margin:auto;width:min(1480px,calc(100vw - 64px));height:min(980px,calc(100dvh - 64px));max-width:none;max-height:none;padding:0;border:1px solid #d7b5f56b;border-radius:12px;background:transparent;box-shadow:0 30px 100px #0009;overflow:hidden;color:#f5f2f6}#mapper-workbench::backdrop{background:#100b1940;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}body:has(#mapper-workbench[open]){overflow:hidden}
@media(max-width:760px){.mapper-page{padding:0;background-attachment:scroll}.mapper-page>.mapper-surface{height:auto;min-height:100svh;border:0;border-radius:0}.mapper-surface .mapper-header{padding:0 18px;gap:14px}.mapper-surface .app{height:auto;grid-template-columns:1fr}.mapper-surface .sidebar{overflow:visible;display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:22px 20px;border-right:0;border-bottom:1px solid var(--border)}.mapper-surface .sidebar>div:first-child,.mapper-surface .privacy,.mapper-surface .status,.mapper-surface .sidebar>.section:last-child{grid-column:1/-1}.mapper-surface .spacer{display:none}.mapper-surface .main{height:65svh;min-height:380px}.mapper-surface .toolbar{padding:12px}.mapper-surface .toolbar>span{font-size:12px}.mapper-surface .emptyState{padding:24px}.mapper-surface .emptyChooseBtn{padding:26px 18px}#mapper-workbench{width:100vw;height:100dvh;border:0;border-radius:0;overflow:auto}#mapper-workbench>.mapper-surface{height:auto;min-height:100%}#mapper-workbench .mapper-header{position:sticky;top:0;z-index:2}.mapper-surface .workbench-context{font-size:12px;letter-spacing:.08em}}
@media(max-width:380px){.mapper-surface .sidebar{grid-template-columns:1fr}.mapper-surface .mapper-header{padding:0 14px;font-size:12px}.mapper-surface .stepsWrap{justify-content:flex-start}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.mapper-surface .sidebar{background:#30203e}.mapper-surface .main{background:#211a27e8}.mapper-surface .mapper-header,.mapper-surface .toolbar{background:#201728}.mapper-surface .emptyChooseBtn,.mapper-surface .emptySteps{background:#211827}}