/* ROUND 3b — the tray as an OBJECT. Real perspective (CSS 3D), slips fanned in
   depth and occluding each other, decisions as pressed keys, the stamp driven in
   along Z. Depth is geometry + hard OFFSET print shadows (0 blur, two inks laid
   off-register). Still: no glow, no blur, no gradient blob, radius 0. */
:root{--z:1200px;--off:#2E4A78;--off2:#1863DC}
.phone{background:var(--paper);perspective:var(--z);perspective-origin:50% 38%}
/* ink top bar — the ground-ink token, bone type */
.top{background:repeating-linear-gradient(122deg,#15151A 0 10px,#1D1D24 10px 20px);border-bottom:0;padding:16px 16px 12px;color:var(--bone);position:relative}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;background:var(--accent)}
.top .wm{color:var(--bone);font-size:18px}.top .wm small{color:var(--accent-soft)}
.top .me{color:var(--navy-soft)}.top .me b{color:var(--bone)}
/* header numerals: enormous, tabular, engraved with a double hairline underneath */
.tray-h{padding:18px 16px 6px;align-items:baseline}
.tray-h .num{font-size:88px;line-height:.8;letter-spacing:-.05em;color:var(--ink);text-shadow:2px 2px 0 var(--slip),4px 4px 0 var(--line)}
.tray-h .lbl{letter-spacing:.26em}
.tabs{border-bottom:3px double var(--line);font-size:11.5px}
.tabs a.on{border-bottom-width:3px}
/* THE TRAY — a shelf in perspective; the slips sit ON it */
.tray{padding:26px 16px 0;transform-style:preserve-3d}
.tray::before{content:"";position:absolute;left:8px;right:8px;top:14px;height:12px;background:repeating-linear-gradient(122deg,#E9E3D6 0 10px,#DDD6C6 10px 20px);border:1px solid var(--line);transform:rotateX(62deg);transform-origin:50% 100%}
.deck{transform-style:preserve-3d;position:relative}
.deck .slip{transform:translateZ(60px) rotateX(-3deg);transform-origin:50% 100%;
  box-shadow:6px 6px 0 var(--cork),7px 7px 0 var(--line);border-color:var(--ink)}
.deck .slip::before{content:"";position:absolute;inset:-1px;border:1px solid var(--off2);translate:2px 2px;z-index:-1;pointer-events:none}
.deck .fan{position:absolute;left:0;right:0;top:0;background:var(--slip);border:1px solid var(--line);padding:14px 16px;transform-origin:50% 100%;
  box-shadow:4px 4px 0 var(--cork)}
.deck .fan .name{font:400 18px/1.05 var(--display);letter-spacing:-.015em;color:var(--stone)}
.deck .fan .addr{font:400 11px/1.4 var(--body);color:var(--mut)}
.deck .fan.f1{transform:translateZ(0) translateY(14px) rotateX(-8deg) scale(.97)}
.deck .fan.f2{transform:translateZ(-60px) translateY(26px) rotateX(-14deg) scale(.94);opacity:.85}
.deck .fan.f3{transform:translateZ(-120px) translateY(36px) rotateX(-20deg) scale(.91);opacity:.7}
.deck-n{margin-top:52px;letter-spacing:.14em}
/* slip interior — engraved rules, off-register accent */
.slip .name{font-size:28px;text-shadow:1px 1px 0 var(--slip),2px 2px 0 var(--line-soft)}
.slip .eyebrow{border-bottom:1px solid var(--line-soft);padding-bottom:8px}
.slip .facts{border-top:3px double var(--line)}
.slip .why{background:var(--paper);border:1px solid var(--line);box-shadow:inset 3px 3px 0 var(--cork)}
/* STAMP — driven in along Z, twice the size, two inks off-register */
.seal{font-size:12px;padding:9px 12px;border-width:2px;outline-width:2px;rotate:-9deg;text-shadow:1.5px 1.5px 0 var(--paper),3px 3px 0 var(--navy-soft);
  animation:drive .42s var(--ease-draw) both;animation-delay:.9s;transform-origin:50% 50%}
@keyframes drive{from{transform:translateZ(300px) scale(1.6);clip-path:inset(0 100% 0 0)}60%{clip-path:inset(0)}to{transform:translateZ(0) scale(1);clip-path:inset(0)}}
/* DECISION KEYS — physical keycaps: cap face lifted on Z over a darker base */
.decide{gap:12px;padding:14px 16px 6px;background:var(--paper);border-top:3px double var(--line)}
.decide button{position:relative;border:1px solid var(--ink);background:var(--slip);padding:18px 12px 20px;
  box-shadow:0 6px 0 var(--cork),0 7px 0 var(--ink),6px 7px 0 var(--ink);translate:0 -6px;transition:translate .12s var(--ease-draw),box-shadow .12s var(--ease-draw)}
.decide button.yes{border-color:var(--navy);box-shadow:0 6px 0 var(--navy-soft),0 7px 0 var(--navy),6px 7px 0 var(--navy)}
.decide button:active,.decide button[disabled]{translate:0 0;box-shadow:0 0 0 var(--cork),0 1px 0 var(--ink),1px 1px 0 var(--ink)}
.decide button .g{font-size:42px;text-shadow:1px 1px 0 var(--slip),2px 2px 0 var(--line)}
.decide button.yes .g{text-shadow:1px 1px 0 var(--slip),2px 2px 0 var(--navy-soft)}
.hint{border-top:0;padding:12px 0 12px}
/* sheet rises as a hinged panel */
.sheet{border-top:3px solid var(--navy);box-shadow:0 -4px 0 var(--navy-soft);transform-origin:50% 100%;animation:hinge .5s var(--ease-enter) both}
@keyframes hinge{from{transform:rotateX(-70deg) translateY(40px)}to{transform:none}}
.sheet .h{font-size:24px}
.reasons label.on{background:var(--paper);margin:0 -16px;padding:12px 16px;border-left:4px solid var(--navy)}
/* select-many — slips as a rolodex, each lifted more than the last */
.slip.pick{box-shadow:4px 4px 0 var(--cork),5px 5px 0 var(--line);transform-origin:0 100%}
.slip.pick.on{box-shadow:6px 6px 0 var(--navy-soft),7px 7px 0 var(--navy);transform:translateZ(30px) rotateY(-2deg)}
.bar{border-top:3px double var(--line);background:var(--paper)}
.bar .btn.solid{box-shadow:0 5px 0 var(--navy-soft),0 6px 0 var(--navy),5px 6px 0 var(--navy);translate:0 -5px;border-color:var(--navy)}
.bar .btn{box-shadow:0 5px 0 var(--cork),0 6px 0 var(--ink),5px 6px 0 var(--ink);translate:0 -5px;border-color:var(--ink)}
/* sign in — the diamond on a plinth, the wordmark engraved */
.gate img{width:84px;filter:none;transform:translateZ(80px) rotateX(-6deg);transform-origin:50% 100%}
.gate{transform-style:preserve-3d;padding-top:40px}
.gate .wm{font-size:44px;text-shadow:2px 2px 0 var(--slip),4px 4px 0 var(--line)}
.gate .btn.solid{box-shadow:0 6px 0 var(--navy-soft),0 7px 0 var(--navy),6px 7px 0 var(--navy);translate:0 -6px;border-color:var(--navy);font-size:14px}
/* tray clear — the seal driven in huge; tally engraved */
.done .stampbig{font-size:18px;padding:16px 22px;border-width:3px;outline-width:3px;text-shadow:2px 2px 0 var(--paper),4px 4px 0 var(--navy-soft);animation:drive .6s var(--ease-draw) both;animation-delay:.5s}
.done{transform-style:preserve-3d}
.done .h{font-size:32px;text-shadow:1px 1px 0 var(--slip),2px 2px 0 var(--line)}
/* decided — rows as ledger lines, glyphs pressed */
.hist .row .g{font-size:28px;text-shadow:1px 1px 0 var(--slip),2px 2px 0 var(--line-soft)}
.hist .day{border-bottom:3px double var(--line)}
/* detail */
.detail .kv{border-top:3px double var(--line)}
.detail .next{box-shadow:4px 4px 0 var(--navy-soft),5px 5px 0 var(--navy)}
/* desktop: the queue is a shelf receding in perspective */
.desk{perspective:2400px;perspective-origin:30% 40%}
.desk .id{background:repeating-linear-gradient(122deg,#15151A 0 10px,#1D1D24 10px 20px);color:var(--bone)}
.desk .id *{color:var(--bone)!important}.desk .id .kicker{color:var(--navy-soft)!important}
.desk .queue{transform-style:preserve-3d;transform:rotateY(8deg);transform-origin:0 50%}
.desk .queue .slip{box-shadow:5px 5px 0 var(--cork),6px 6px 0 var(--line)}
.desk .queue .slip.on{transform:translateZ(40px) translateX(10px);box-shadow:8px 8px 0 var(--navy-soft),9px 9px 0 var(--navy);border-color:var(--navy)}
.desk .record{transform:rotateY(-3deg);transform-origin:100% 50%;box-shadow:inset 6px 0 0 var(--cork)}
.desk .record .h1{font-size:30px;text-shadow:1px 1px 0 var(--slip),2px 2px 0 var(--line)}
@media (prefers-reduced-motion:reduce){.seal,.done .stampbig,.sheet{animation:none}.decide button{transition:none}}
/* fixes after first render */
.deck .slip{animation-name:enter3d}
@keyframes enter3d{from{transform:translateZ(60px) rotateX(-3deg) translateY(8px);clip-path:inset(0 0 100% 0)}to{transform:translateZ(60px) rotateX(-3deg);clip-path:inset(0)}}
.deck .fan{transform-origin:50% 0}
.deck .fan.f1{transform:translateZ(-30px) translateY(16px) scale(.965)}
.deck .fan.f2{transform:translateZ(-70px) translateY(30px) scale(.93);opacity:.85}
.deck .fan.f3{transform:translateZ(-110px) translateY(42px) scale(.895);opacity:.7}
.gate .wm small,.tray-h .lbl{text-shadow:none}
.gate .wm{text-shadow:3px 3px 0 var(--line)}
.seal{text-shadow:2px 2px 0 var(--navy-soft)}
.kv{display:grid;grid-template-columns:110px 1fr;gap:0 14px;font-size:12px}
.kv>div{padding:7px 0;border-bottom:1px solid var(--line-soft)}
.kv .k{font:500 9.5px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.kv .v.edit{position:relative}
/* fans peek out BELOW the top slip, receding into the shelf */
.deck .fan{top:auto;bottom:0;transform-origin:50% 100%}
.deck .fan.f1{transform:translateZ(-30px) translateY(18px) scale(.965)}
.deck .fan.f2{transform:translateZ(-70px) translateY(34px) scale(.93);opacity:.85}
.deck .fan.f3{transform:translateZ(-110px) translateY(48px) scale(.895);opacity:.7}
.deck-n{margin-top:64px}