/* interactive prototype shell: a phone on desktop, full-bleed on a phone */
html,body{height:100%}
body{margin:0;display:grid;place-items:center;background:repeating-linear-gradient(122deg,#E9E3D6 0 10px,#DDD6C6 10px 20px);overflow:hidden}
.phone{border:1px solid var(--ink);box-shadow:10px 10px 0 var(--cork),11px 11px 0 var(--ink)}
@media (max-width:520px),(max-height:880px){body{display:block;background:var(--paper)}.phone{width:100%;height:100dvh;border:0;box-shadow:none}}
.view{display:none;flex:1;min-height:0;flex-direction:column}.view.on{display:flex}
.tray{overflow:visible}
.deck .slip{touch-action:pan-y;user-select:none;will-change:transform;transition:transform .42s var(--ease-travel)}
.deck .slip.drag{transition:none;animation:none}
.deck .slip.gone-r{transform:translateZ(60px) translateX(140%) rotate(8deg)!important}
.deck .slip.gone-l{transform:translateZ(60px) translateX(-140%) rotate(-8deg)!important}
.deck .fan{transition:transform .42s var(--ease-travel),opacity .42s}
.seal.no{color:var(--stone)}
.toast{position:absolute;left:16px;right:16px;top:14px;z-index:9;background:var(--ink);color:var(--bone);font:500 10px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:10px 12px;translate:0 -140%;transition:translate .3s var(--ease-enter)}
.toast.on{translate:0 0}
.tabs a{cursor:pointer}
.hist .row .undo{cursor:pointer}
.slip .more,.refs a{cursor:pointer}
.decide button{-webkit-tap-highlight-color:transparent}
.detail{overflow:auto}
.hist{overflow:auto}
.tray.list{overflow:auto;padding-top:12px}
.slip.pick{cursor:pointer;transition:transform .2s var(--ease-draw),box-shadow .2s}
@media (pointer:fine){#v-tray .hint::after{content:" · keys Y · N · Z"}}
/* the top slip stays a flat 2D layer (reliable taps on its links); depth comes from the fans behind it */
.deck .slip{transform:none;animation-name:enter}
.deck .slip.gone-r{transform:translateX(140%) rotate(8deg)!important}
.deck .slip.gone-l{transform:translateX(-140%) rotate(-8deg)!important}
/* CARD FLIP — the decision turns the slip over on its vertical axis; the next slip turns in behind it. */
.deck{perspective:1400px;perspective-origin:50% 40%}
.deck .slip{backface-visibility:hidden;transform-origin:50% 50%}
.deck .slip.flip-out-r{animation:flipOutR .38s var(--ease-travel) forwards!important}
.deck .slip.flip-out-l{animation:flipOutL .38s var(--ease-travel) forwards!important}
.deck .slip.flip-in{animation:flipIn .42s var(--ease-enter) both!important}
@keyframes flipOutR{from{transform:rotateY(0)}to{transform:rotateY(92deg) translateX(10%)}}
@keyframes flipOutL{from{transform:rotateY(0)}to{transform:rotateY(-92deg) translateX(-10%)}}
@keyframes flipIn{from{transform:rotateY(-88deg);clip-path:inset(0)}to{transform:rotateY(0);clip-path:inset(0)}}
.deck .fan{transition:transform .38s var(--ease-travel),opacity .38s}
@media (prefers-reduced-motion:reduce){.deck .slip.flip-out-r,.deck .slip.flip-out-l,.deck .slip.flip-in{animation:none!important}}