/* Walnut desk (desktop only, built by desk.js). The studio's papers lie on a walnut
   desk; Arcade Corner props sit in the margins beside them and glide aside when a
   step needs the room. Night (dark theme) swaps in the lamp-lit surface. */
:root{--desk-night:0;--desk-ease:cubic-bezier(.22,.8,.24,1)}
:root[data-theme=dark]{--desk-night:1}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--desk-night:1}}
.desk{display:none}
/* At night the papers take on the lamp's warmth instead of neutral grey */
@media(min-width:1024px){:root[data-theme=dark] #editor{--pad-margin:#7e4237}:root[data-theme=dark]{--bg:#17110d;--paper:#211a15;--soft:#2c241e;--line:#3d332b;--field:#191310;--tile:#2a221c}}
@media(min-width:1024px) and (prefers-color-scheme:dark){:root:not([data-theme=light]) #editor{--pad-margin:#7e4237}:root:not([data-theme=light]){--bg:#17110d;--paper:#211a15;--soft:#2c241e;--line:#3d332b;--field:#191310;--tile:#2a221c}}

@media(min-width:1024px){
 /* The body holds the desk's layer so overlays inside the page still rise above the header */
 body{position:relative;z-index:0}
 .desk{display:block;position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:#3a2418 url(assets/desk/walnut-surface-day.webp) center/cover}
 .desk::before{content:'';position:absolute;inset:0;background:#1d120b url(assets/desk/walnut-surface-night.webp) center/cover;opacity:var(--desk-night);transition:opacity .8s ease}
 .topbar{box-shadow:0 10px 30px -18px #0009}
 .shell{padding-bottom:48px;overflow-x:clip}

 /* Words that sit straight on the wood */
 .intro h1,.intro .save-status{color:#f6ead8;text-shadow:0 1px 2px #0008}
 .intro .save-status span{background:#f6ead8}
 .cards-view-hint{color:#f6ead8;text-shadow:0 1px 2px #0009}
 .flow-bar{box-shadow:0 18px 34px -22px #000c}
 /* Step 1 is compact, so the first sets show without scrolling */
 .set-stage{padding-top:24px}
 .set-stage-head{margin-bottom:20px}
 .set-stage-head h2{font-size:34px}
 .collection-mode button{min-height:68px;padding-block:12px}
 .collection-mode{margin-bottom:18px}
 .set-stage .set-browse-controls{margin-bottom:16px;padding:14px 16px}
 /* The studio footer sits on the wood */
 .shell>footer{color:#e8dccb;border-color:#ffffff24;text-shadow:0 1px 2px #0009}
 .shell>footer a,.shell>footer button{color:#f6ead8}
 body[data-editor-step=sets] .flow-bar{margin-top:22px}

 /* Each step is a paper laid on the desk */
 .set-stage{background:var(--paper);border-radius:22px;padding:30px 34px 34px;margin-bottom:24px;box-shadow:0 2px 0 #0000000d,0 40px 70px -34px #0d0500d9}
 .editor,.preview-panel{box-shadow:0 2px 0 #0000000d,0 34px 60px -32px #0d0500d9}
 body[data-editor-step=cards] #editor:not(:has(#album-inline-room)){background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:0 2px 0 #0000000d,0 34px 60px -32px #0d0500d9}

 /* Step 2: the binder lies right on the wood, its controls on a smoked-glass strip */
 body[data-editor-step=cards] .workspace{max-width:1060px;margin-inline:auto}
 .album-modal.album-inline-room{display:grid;grid-template-columns:minmax(0,1fr) auto;background:none;padding-inline:0}
 .album-inline-room>*{grid-column:1/-1}
 .album-inline-room>.album-toolbar,.album-inline-room>.album-topbar{grid-row:1;position:relative;z-index:5;background:#140c07b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);max-width:none;margin:0 0 26px;padding:12px 16px;border:0}
 .album-inline-room>.album-toolbar{grid-column:1;border-radius:16px 0 0 16px;gap:12px}
 .album-inline-room>.album-topbar{grid-column:2;border-radius:0 16px 16px 0;padding-left:0}
 .album-inline-room .album-identity{display:none}
 .album-inline-room .album-cover.spread{box-shadow:inset 0 2px 2px #ffffff20,inset 0 -5px 5px #0007,0 2px 0 #66666644,0 6px 0 #151515,0 10px 0 #373737,0 26px 30px -6px #0b0400cc,0 60px 80px -30px #0b0400b3}
 .album-inline-room .album-foot{color:#eadfcf;text-shadow:0 1px 2px #000a}
 .album-inline-room .album-progress{background:#0000004d}

 /* Step 3: the Look editor is a spiral notepad lying beside the open binder */
 body[data-editor-step=templates] #editor{--pad-rule:color-mix(in srgb,var(--line) 75%,transparent);--pad-margin:#eaa79b;position:relative;border:0;border-radius:3px 3px 14px 14px;padding:52px 26px 26px 56px;background-color:var(--paper);background-image:linear-gradient(90deg,transparent 34px,var(--pad-margin) 34px 36px,transparent 36px),repeating-linear-gradient(to bottom,transparent 0 33px,var(--pad-rule) 33px 34px);box-shadow:0 2px 0 #0000000d,0 40px 64px -30px #0d0500e6}
 body[data-editor-step=templates] #editor::before{content:'';position:absolute;left:14px;right:14px;top:-12px;height:34px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='34'%3E%3Ccircle cx='15' cy='25' r='4.2' fill='%23241811'/%3E%3Crect x='12' y='2' width='6' height='25' rx='3' fill='none' stroke='%23a59d92' stroke-width='2.2'/%3E%3C/svg%3E") 0 0/30px 34px repeat-x}
 /* Step 4: the page lies on the desk, a little askew; the 100% reminder is a sticky note */
 .print-sheet .sheet-frame{transform:rotate(-1deg)}
 .print-sheet .page-layout-caption{color:#f6ead8;text-shadow:0 1px 2px #0009}
 body[data-editor-step=print] .print-warning{background:#ffe58a;border:0;border-radius:2px;color:#4a3826;transform:rotate(-.6deg);box-shadow:0 14px 20px -14px #0009}
 body[data-editor-step=print] .print-warning strong{color:#2f2116}
 /* Props */
 .desk-prop{position:absolute;left:0;top:0;width:var(--w);height:auto;opacity:var(--o,1);transform:translate(var(--x),var(--y)) rotate(var(--r));transition:transform 1.05s var(--desk-ease),opacity .6s ease,filter .8s ease;filter:sepia(.1) saturate(.92) brightness(calc(.95 - var(--desk-night)*.33)) drop-shadow(2px 3px 2px #14080090) drop-shadow(14px 20px 16px #14080061)}
 /* Off the desk (before the first step and whenever a step has no use for them) */
 .desk-prop--plant{--w:220px;--x:calc(100vw + 60px);--y:120px;--r:20deg}
 .desk-prop--joystick{--w:270px;--x:-360px;--y:calc(100vh - 230px);--r:-24deg}
 .desk-prop--pins{--w:170px;--x:calc(100vw + 60px);--y:calc(100vh - 120px);--r:24deg}
 .desk-prop--toploaders{--w:170px;--x:-260px;--y:150px;--r:-24deg}
 .desk-prop--scissors{--w:230px;--x:-300px;--y:calc(100vh - 300px);--r:-30deg}
 /* 1 · Set — a wide catalog page, so props tuck into the corners */
 .desk[data-desk-step=sets] .desk-prop--plant{--x:calc(50vw + 640px);--y:110px;--r:14deg}
 .desk[data-desk-step=sets] .desk-prop--joystick{--x:calc(50vw - 910px);--y:calc(100vh - 220px);--r:-12deg}
 /* 2 · Your cards — the binder in the middle, the arcade corner around it */
 .desk[data-desk-step=cards] .desk-prop--plant{--x:calc(50vw + 545px);--y:190px;--r:8deg}
 .desk[data-desk-step=cards] .desk-prop--toploaders{--x:calc(50vw - 720px);--y:200px;--r:-10deg}
 .desk[data-desk-step=cards] .desk-prop--joystick{--x:calc(50vw - 765px);--y:calc(100vh - 250px);--r:-14deg}
 .desk[data-desk-step=cards] .desk-prop--pins{--x:calc(50vw + 530px);--y:calc(100vh - 235px);--r:10deg}
 /* 3 · Look — the style sheets push everything aside */
 .desk[data-desk-step=templates] .desk-prop--plant{--x:calc(50vw + 640px);--y:calc(100vh - 300px);--r:22deg}
 .desk[data-desk-step=templates] .desk-prop--toploaders{--x:calc(50vw - 810px);--y:120px;--r:-16deg}
 /* 4 · Print — scissors come out for cutting */
 .desk[data-desk-step=print] .desk-prop--plant{--x:calc(50vw + 640px);--y:110px;--r:16deg}
 .desk[data-desk-step=print] .desk-prop--toploaders{--x:calc(50vw - 810px);--y:130px;--r:-8deg}
 .desk[data-desk-step=print] .desk-prop--scissors{--x:calc(50vw - 870px);--y:calc(100vh - 320px);--r:-12deg}
}
/* Props only where the margins can hold them */
@media(max-width:1199px){.desk-prop{display:none}}
@media(prefers-reduced-motion:reduce){.desk-prop,.desk::before{transition:none}}
/* Shadows: one light source just above the desk, slightly in front. Every object casts
   a tight contact shadow where it touches the wood and a soft ambient shadow that grows
   with height. Three heights: paper lying flat, objects resting on paper, things held up.
   At night (lamp light) shadows are deeper and warmer. */
:root{--sh-rgb:28 14 4;--sh-a:1}
:root[data-theme=dark]{--sh-rgb:6 3 1;--sh-a:1.35}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--sh-rgb:6 3 1;--sh-a:1.35}}
@media(min-width:1024px){
 :root{
  --sh-flat:0 .5px 1px rgb(var(--sh-rgb)/calc(.16*var(--sh-a))),0 2px 3px rgb(var(--sh-rgb)/calc(.10*var(--sh-a))),0 10px 18px -6px rgb(var(--sh-rgb)/calc(.22*var(--sh-a))),0 30px 48px -18px rgb(var(--sh-rgb)/calc(.38*var(--sh-a)));
  --sh-rest:0 1px 1px rgb(var(--sh-rgb)/calc(.18*var(--sh-a))),0 4px 8px -2px rgb(var(--sh-rgb)/calc(.20*var(--sh-a))),0 14px 24px -10px rgb(var(--sh-rgb)/calc(.34*var(--sh-a)));
  --sh-lift:0 2px 3px rgb(var(--sh-rgb)/calc(.16*var(--sh-a))),0 12px 20px -6px rgb(var(--sh-rgb)/calc(.30*var(--sh-a))),0 34px 56px -18px rgb(var(--sh-rgb)/calc(.48*var(--sh-a)))
 }
 .topbar{box-shadow:0 1px 0 rgb(var(--sh-rgb)/.08),0 8px 22px -14px rgb(var(--sh-rgb)/calc(.5*var(--sh-a)))}
 .flow-bar{box-shadow:var(--sh-rest)}
 .set-stage,.editor,.preview-panel,body[data-editor-step=cards] #editor:not(:has(#album-inline-room)){box-shadow:var(--sh-flat)}
 body[data-editor-step=templates] #editor{box-shadow:var(--sh-flat)}
 .print-sheet .page-preview{box-shadow:var(--sh-flat)}
 .print-sheet:not([data-pages="1"]) .page-preview{box-shadow:4px 4px 0 -1px #f3f1ea,4px 4px 0 0 rgb(var(--sh-rgb)/.08),8px 8px 0 -1px #e7e3d9,8px 8px 0 0 rgb(var(--sh-rgb)/.08),var(--sh-flat)}
 .print-sheet .page-controls,.album-inline-room>.album-navigation{box-shadow:var(--sh-rest)}
 .set-stage>#set-catalog-panel,.set-stage>#pokemon-catalog-panel{box-shadow:0 1px 1px rgb(var(--sh-rgb)/.06),0 8px 18px -12px rgb(var(--sh-rgb)/.22)}
 .album-inline-room .album-cover.spread{box-shadow:inset 0 2px 2px #ffffff20,inset 0 -5px 5px #0007,0 2px 0 #66666644,0 6px 0 #151515,0 10px 0 #373737,0 12px 6px -2px rgb(var(--sh-rgb)/calc(.5*var(--sh-a))),0 30px 44px -12px rgb(var(--sh-rgb)/calc(.6*var(--sh-a))),0 70px 90px -30px rgb(var(--sh-rgb)/calc(.45*var(--sh-a)))}
}