/* The unlock sheet — js/unlock-sheet.js. Ported from
   /static/unlock-takeover-preview.html (approved 2026-10-13).
   Sits above every sheet in the app (home-board 4151, wallet 4250) and below
   the reward ceremonies (10000+), which play over it when a check-in lands. */
@property --us-f { syntax: '<number>'; inherits: true; initial-value: 0; }

#us-root {
    /* Paper, not navy (2026-11-02): matches the place card and pass sheets. */
    --us-paper: #F4F1EA; --us-ink: #1a1a1a; --us-mute: #6b665c; --us-line: rgba(26, 26, 26, .12);
    --us-gold: #F2B705; --us-gold-ink: #8a6300; --us-green: #27ae60; --us-red: #e74c3c;
    --us-logo: url(static/stamps/dpad-logo.svg);
    font-family: var(--font-ui, 'Figtree', sans-serif);
}

/* Dims, doesn't black out. Tap = hide (it keeps counting). */
#us-root .us-scrim {
    position: fixed; inset: 0; z-index: 4300; background: rgba(26, 26, 26, .32);
    opacity: 0; pointer-events: none; transition: opacity .35s;
}
#us-root .us-scrim.on { opacity: 1; pointer-events: auto; }

#us-root .us-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 4301;
    min-height: 54vh; max-height: 88vh; overflow-y: auto;
    background: var(--us-paper); color: var(--us-ink);
    border-radius: 24px 24px 0 0;
    padding: 10px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column;
    transform: translateY(105%); visibility: hidden;
    transition: transform .45s cubic-bezier(.2, .9, .25, 1.05), visibility 0s linear .45s;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, .22);
}
#us-root .us-sheet.on { transform: none; visibility: visible; transition: transform .45s cubic-bezier(.2, .9, .25, 1.05); }
@media (min-width: 600px) {
    #us-root .us-sheet { left: 50%; right: auto; width: 480px; margin-left: -240px; }
}
#us-root .us-grab { width: 42px; height: 5px; border-radius: 3px; background: var(--us-line); margin: 0 auto 12px; flex: 0 0 auto; }
#us-root .us-kicker { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .2em; color: var(--us-gold-ink); }
#us-root .us-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--us-gold); animation: us-blink 1.2s infinite; }
@keyframes us-blink { 50% { opacity: .25; } }
#us-root.is-done .us-kicker { color: #1e7a45; }
#us-root.is-done .us-dot { background: var(--us-green); animation: none; }
#us-root.is-paused .us-kicker { color: var(--us-mute); }
#us-root.is-paused .us-dot { background: var(--us-mute); animation: none; }
#us-root .us-place { font-family: var(--font-display, 'Archivo Black', sans-serif); font-size: 24px; letter-spacing: .02em; margin: 6px 0 2px; line-height: 1.15; overflow-wrap: anywhere; }
#us-root .us-where { font-size: 14px; color: var(--us-mute); }

#us-root .us-mid { display: flex; align-items: center; gap: 18px; margin: 18px 0 6px; }
/* The D-PAD symbol as a mask over a conic gradient — fills clockwise from
   twelve, the miles ring's motion: a hand going round says "how long". */
#us-root .us-dial { --d: 140px; position: relative; width: var(--d); height: var(--d); flex: 0 0 auto; transition: --us-f .9s linear; }
#us-root .us-dial i {
    position: absolute; inset: 0;
    background: conic-gradient(from 0deg, var(--us-gold) calc(var(--us-f) * 1turn), rgba(26, 26, 26, .12) 0);
    -webkit-mask: var(--us-logo) center / contain no-repeat; mask: var(--us-logo) center / contain no-repeat;
}
#us-root .us-halo { position: absolute; inset: -14px; border-radius: 50%; background: radial-gradient(circle, rgba(242, 183, 5, .25), transparent 65%); animation: us-breathe 2.4s ease-in-out infinite; }
@keyframes us-breathe { 50% { transform: scale(1.07); opacity: .6; } }
#us-root .us-dial.paused i { background: conic-gradient(from 0deg, rgba(26, 26, 26, .38) calc(var(--us-f) * 1turn), rgba(26, 26, 26, .10) 0); }
#us-root .us-dial.paused .us-halo { animation: none; opacity: 0; }
#us-root .us-dial.done i { background: var(--us-green); }
#us-root .us-dial.done { animation: us-pop .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes us-pop { 40% { transform: scale(1.12); } }
#us-root .us-clock { min-width: 0; }
#us-root .us-t { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 44px; letter-spacing: .02em; line-height: 1; }
#us-root .us-s { font-size: 14px; color: var(--us-mute); margin-top: 6px; line-height: 1.35; }
#us-root .us-s b { color: var(--us-ink); }
@media (max-width: 360px) {
    #us-root .us-sheet .us-dial { --d: 110px; }
    #us-root .us-t { font-size: 36px; }
}

#us-root .us-why { margin-top: 14px; }
#us-root .us-why h4 { margin: 0 0 8px; font-size: 11px; letter-spacing: .2em; color: #8a8270; font-weight: 800; }
#us-root .us-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 1px 0 rgba(26, 26, 26, .06); margin-bottom: 8px; transition: background .3s; }
#us-root .us-ic { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; font-size: 20px; background: var(--us-paper); color: var(--us-ink); overflow: hidden; }
#us-root .us-ic.us-art img { width: 100%; height: 100%; object-fit: contain; }
#us-root .dw-coin.us-coin { width: 40px; height: 40px; flex: 0 0 auto; }
#us-root .us-tx { flex: 1; min-width: 0; }
#us-root .us-tx b { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#us-root .us-tx small { font-size: 12.5px; color: var(--us-mute); }
#us-root .us-st { font-size: 12px; font-weight: 800; color: var(--us-gold-ink); white-space: nowrap; }
#us-root .us-item.got { background: #e3f4ea; }
#us-root .us-item.got .us-st { color: #1e7a45; }

#us-root .us-note { font-size: 12.5px; color: var(--us-mute); margin: 6px 2px 0; min-height: 1em; }
#us-root .us-note.warn { color: #b35a00; }

#us-root .us-acts { display: flex; gap: 10px; margin-top: auto; padding-top: 16px; }
#us-root .us-btn { flex: 1; border: 0; border-radius: 100px; padding: 15px 12px; font: 800 15px var(--font-ui, 'Figtree', sans-serif); cursor: pointer; }
#us-root .us-pri { background: var(--us-ink); color: var(--us-paper); }
#us-root .us-ghost { background: transparent; color: var(--us-ink); box-shadow: inset 0 0 0 1.5px rgba(26, 26, 26, .25); }
#us-root .us-danger { background: var(--us-red); color: #fff; }
#us-root .us-confirm { display: none; margin-top: auto; padding-top: 14px; }
#us-root .us-confirm p { margin: 0 0 10px; font-size: 14px; color: var(--us-ink); }
#us-root .us-sheet.asking .us-main { display: none; }
#us-root .us-sheet.asking .us-confirm { display: block; }
#us-root .us-confirm .us-acts { padding-top: 0; }

/* Docked: hidden but still counting. Off-screen AND transparent when away,
   so no edge of it peeks under the status bar. */
#us-root .us-pill {
    position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 72px); z-index: 4302;
    transform: translate(-50%, -220px); opacity: 0; pointer-events: none;
    transition: transform .4s cubic-bezier(.2, .9, .25, 1.1), opacity .25s;
    display: flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border-radius: 100px;
    background: var(--us-paper); color: var(--us-ink); box-shadow: 0 8px 24px rgba(0, 0, 0, .22), inset 0 0 0 1px var(--us-line);
    cursor: pointer; max-width: calc(100vw - 32px); border: 0; font: inherit;
}
#us-root .us-pill.on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
#us-root .us-pill .us-dial { --d: 34px; }
#us-root .us-pill .us-halo { inset: -6px; }
#us-root .us-pt { font-weight: 800; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#us-root .us-pc { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--us-gold-ink); font-size: 14px; white-space: nowrap; }
#us-root .us-chev { opacity: .5; font-size: 16px; }
#us-root .us-pill.done { background: var(--us-green); color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .22); }
#us-root .us-pill.done .us-pc { color: #fff; }
#us-root .us-pill.done .us-dial i { background: #fff; }