html,body{height:100%}
body{display:flex;flex-direction:column;overflow:hidden;overscroll-behavior:none}
.wrap{flex:1;min-height:0;display:flex;flex-direction:column}
/* mode: detail or swipe, the same queue */
.mode{flex:none;display:flex;align-items:center;gap:16px;height:44px;padding:0 var(--gut);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(240,180,76,.45)}
.mode a{color:inherit}
.mode a.on{color:#ffd58a;box-shadow:0 1px 0 var(--wait)}
.mode .n{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--faint);letter-spacing:.06em}
.undo1{flex:none;height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:14px;font-size:11.5px;color:var(--body);transition:height .18s}
.undo1.on{height:30px}
.undo1 .w{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--wait)}
.undo1 button{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#ffd58a;box-shadow:0 1px 0 rgba(240,180,76,.5)}
.deck{position:relative;flex:1;min-height:0;display:grid;place-items:center;padding:6px var(--gut) 0;touch-action:none;overflow:hidden}
/* the card: the draft as coworkers will see it, compact, still marked as proposed */
.card{position:absolute;width:min(420px,calc(100vw - 2 * var(--gut)));max-height:calc(100% - 20px);overflow:hidden;padding:20px 18px 14px 34px;background:#05060c;
  border:1px dashed rgba(240,180,76,.6);border-radius:10px;box-shadow:0 18px 50px rgba(0,0,0,.7);user-select:none;cursor:grab;will-change:transform;transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .32s}
.card.drag{transition:none;cursor:grabbing}
.card.back1{transform:translateY(14px) scale(.955);opacity:.55}
.card.back2{transform:translateY(28px) scale(.91);opacity:.25}
.card.back1 *,.card.back2 *{visibility:hidden}
.card .tg{display:flex;align-items:center;gap:10px;margin-left:-16px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--wait)}
.card .tg::before{content:'';width:12px;border-top:1px dashed var(--wait)}
.card .tg .fl{margin-left:auto;color:var(--flag);letter-spacing:.12em}
.card .tg .fl mark{letter-spacing:.02em;text-transform:none;font-size:11px}
.card .hd{display:flex;align-items:center;gap:12px;margin:18px 0 10px}
.card.stamped .tg{opacity:0}
.card .nm{font:700 24px/1.1 var(--dot);letter-spacing:.02em;color:var(--ink)}
.card .lbl{font-size:9.5px;color:var(--faint)}
.card .aim{position:relative;font-size:15px;line-height:1.38;color:var(--ink);margin:4px 0 10px}
.card .hl{position:relative;font-size:12.5px;color:var(--ink);margin:0 0 6px}
.card ul{margin:0;padding:0;list-style:none}
.card li{position:relative;padding-left:16px;font-size:12px;line-height:1.45;color:var(--body);margin:4px 0}
.card li::after{content:'';position:absolute;left:1px;top:.55em;width:5px;height:5px;background:var(--cell)}
.card .nw::before{content:'+';position:absolute;left:-24px;top:.1em;width:12px;text-align:center;font-size:12px;color:var(--wait)}
.card li.nw::before{left:-24px}
.card .ship{position:relative;display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;font-size:11px;color:var(--dim)}
.card .ship span{display:inline-flex;align-items:center;gap:6px}
.card .ship img{width:64px;height:40px;object-fit:cover;object-position:top;border:1px solid rgba(206,222,240,.14)}
.card mark.fl{background:none;color:var(--flag);box-shadow:0 1px 0 var(--flag)}
.card .ways{display:flex;justify-content:space-between;margin-top:14px;padding-top:10px;border-top:1px dotted rgba(206,222,240,.14);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.card .ways b{font-weight:400;color:rgba(240,180,76,.75)}
.card.less .aim,.card.less .hl,.card.less li{color:var(--ink)}
/* the stamp: what the swipe means, as the card tilts */
.stamp{position:absolute;top:9px;padding:4px 9px;font:700 18px/1 var(--dot);letter-spacing:.08em;border:2px solid currentColor;border-radius:4px;opacity:0;pointer-events:none;background:rgba(5,6,12,.85)}
.stamp.post{left:22px;color:#ffd58a;transform:rotate(-4deg)}
.stamp.no{right:16px;color:var(--dim);transform:rotate(4deg)}
.stamp.less{left:50%;color:var(--wait);transform:translateX(-50%)}
/* a flagged draft resists a right swipe */
.card.shake{animation:shake .42s}
@keyframes shake{20%{transform:translateX(-10px) rotate(-1deg)}40%{transform:translateX(9px) rotate(1deg)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
.chk{position:absolute;left:50%;top:10px;transform:translate(-50%,-6px);opacity:0;padding:6px 12px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--flag);background:#05060c;box-shadow:inset 0 0 0 1px rgba(224,116,95,.6);transition:opacity .2s,transform .2s;z-index:5;white-space:nowrap}
.chk.on{opacity:1;transform:translate(-50%,0)}
/* the why: one tap after the swipe */
.why{flex:none;padding:12px var(--gut) calc(16px + env(safe-area-inset-bottom));min-height:118px;display:flex;flex-direction:column;align-items:center;gap:10px}
.why .q{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(240,180,76,.75)}
.why .chips{justify-content:center;max-width:460px;opacity:0;transform:translateY(10px);transition:opacity .2s,transform .2s}
.why.on .chips{opacity:1;transform:none}
.why .chip{height:44px;padding:0 14px;font-size:13px;box-shadow:inset 0 0 0 1px rgba(240,180,76,.4);background:rgba(240,180,76,.05);color:#ffe2a6}
.why .chip .k{box-shadow:inset 0 0 0 1px rgba(240,180,76,.35);color:rgba(240,180,76,.7)}
.why .keys{display:flex;gap:18px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.why .keys span{display:inline-flex;align-items:center;gap:6px}
.why .keys .k{margin:0}
/* the end */
.end{display:flex;flex-direction:column;align-items:center;gap:22px}
.end h1{font:700 44px/1 var(--dot);letter-spacing:.06em;margin:0;color:var(--ink);text-shadow:0 0 14px rgba(120,180,255,.25)}
.end .mk{display:flex;gap:26px;font-size:20px;color:var(--ink);font-variant-numeric:tabular-nums}
.end .mk span{display:inline-flex;align-items:center;gap:10px}
.end .mk svg{width:16px;height:16px}
.end .mk .neg{color:var(--faint)}
.end .ln{display:flex;gap:24px;font-size:12px}
.end .ln a{color:var(--ink)}
@media (max-width:720px){.why .keys{display:none}.card{padding-left:30px}}
@media (prefers-reduced-motion:reduce){.card{transition:none}.card.shake{animation:none}}