/* Echidna pilot layer: deck brand (Manrope, tabular numbers) + Book, Rewards and Echidna Card.
   Loaded after app.html's inline styles so these rules win. */

/* ---------- Brand: one clean sans; Playfair stays on the sign-in hero only ---------- */
:root{ --ui:'Manrope',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif; --coral:#C4532F; --coral-bg:rgba(196,83,47,.10); }
[data-theme="dark"]{ --coral:#FF9B71; --coral-bg:rgba(255,155,113,.10); }
html,body{font-variant-numeric:tabular-nums}
.mono{font-family:var(--ui);font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:0}
.brand{font-family:var(--ui);font-weight:800;letter-spacing:-.02em}
.screen:not(#authScreen) .display,.gate .display{font-family:var(--ui);font-weight:800;letter-spacing:-.025em;line-height:1.05}
.screen:not(#authScreen) .h-lg{font-size:34px}
.screen:not(#authScreen) .h-md{font-size:24px}
.nav button{font-size:11.5px}

/* watermark on the Wallet tab too */
#walletScreen{isolation:isolate}
#walletScreen::after{content:"";position:absolute;z-index:-1;pointer-events:none;right:-60px;bottom:-10px;width:min(86vw,440px);aspect-ratio:430/292;background:url("/echidna-mascot.svg") center/contain no-repeat;opacity:.07;transform:rotate(-4deg)}

/* ---------- Shared bits ---------- */
.wp-tag{display:inline-flex;align-items:center;gap:6px;border-radius:28.8px;padding:5px 11px;font-size:12px;font-weight:700;letter-spacing:.02em}
.wp-tag.pilot{background:var(--vellum);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair-2)}
.wp-tag.api{background:var(--coral-bg);color:var(--coral);box-shadow:inset 0 0 0 1px var(--coral)}
.wp-chips{display:flex;flex-wrap:wrap;gap:8px}
.wp-chips button{border:0;cursor:pointer;min-height:40px;padding:8px 16px;border-radius:28.8px;background:var(--bone);color:var(--ink);font:600 14px var(--ui);box-shadow:inset 0 0 0 1px var(--hair-2)}
.wp-chips button.on{background:var(--act);color:var(--on-act);box-shadow:none}
.wp-sec-t{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite);margin:0 0 8px}
.wp-sum{background:var(--bone);border-radius:9px;box-shadow:inset 0 0 0 1px var(--hair);padding:4px 16px}
.wp-sum-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0;border-top:1px solid var(--hair)}
.wp-sum-row:first-child{border-top:0}
.wp-sum-row span{color:var(--graphite);font-size:14px}
.wp-sum-row b{font-weight:700;font-size:15px;text-align:right}
.wp-fee b.ok{color:var(--ok)} .wp-fee b.warn{color:var(--coral)}
.wp-fee small{display:block;font-weight:500;font-size:12px;color:var(--graphite)}

/* ---------- Booking sheet ---------- */
.wp-sheet{position:fixed;inset:0;z-index:960;display:none;align-items:flex-end;justify-content:center;background:color-mix(in srgb,var(--putty) 70%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.wp-sheet.open{display:flex}
.wp-card{width:min(480px,100%);max-height:92dvh;overflow-y:auto;background:var(--putty);border-radius:14px 14px 0 0;box-shadow:0 -1px 0 var(--hair-2),0 -20px 60px rgba(0,0,0,.25);padding:20px 20px calc(22px + var(--safe-bot));display:flex;flex-direction:column;gap:18px;animation:wpUp .32s cubic-bezier(.2,.9,.3,1)}
@keyframes wpUp{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.wp-card{animation:none}}
.wp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.wp-head h2{font:800 26px/1.1 var(--ui);letter-spacing:-.02em;margin:6px 0 4px}
.wp-x{flex:0 0 44px;width:44px;height:44px;border-radius:50%;border:0;background:var(--bone);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:inset 0 0 0 1px var(--hair)}

/* ---------- Timeline (how a booking works) ---------- */
.wp-tl{position:relative;display:flex;flex-direction:column;gap:0;padding-left:4px}
.wp-step{position:relative;display:grid;grid-template-columns:28px 1fr;gap:14px;padding-bottom:18px}
.wp-step:last-child{padding-bottom:0}
.wp-step::before{content:"";position:absolute;left:13px;top:28px;bottom:-2px;width:2px;background:var(--hair-2)}
.wp-step:last-child::before{display:none}
.wp-node{width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--act);display:grid;place-items:center;font:800 12px var(--ui);color:var(--ink);background:var(--putty)}
.wp-step b{display:block;font-weight:800;font-size:16px}
.wp-step p{margin:2px 0 0;color:var(--graphite);font-size:14px;line-height:1.45}
.wp-step .wp-fee-chip{display:inline-block;margin-top:8px;font-weight:700;font-size:12.5px;border-radius:9px;padding:5px 10px;box-shadow:inset 0 0 0 1px currentColor}
.wp-fee-chip.gold{color:var(--mark)} .wp-fee-chip.ok{color:var(--ok)} .wp-fee-chip.warn{color:var(--coral)}

/* ---------- Rewards ---------- */
.wp-dots{display:flex;gap:10px;margin:4px 0 10px}
.wp-dots i{width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--hair-2);display:grid;place-items:center;font-style:normal}
.wp-dots i.done{box-shadow:inset 0 0 0 2px var(--ok);color:var(--ok)}
.wp-dots i.prize{background:var(--act);color:var(--on-act);box-shadow:none;font:800 13px var(--ui)}
.wp-dots svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Echidna Card ---------- */
.wp-wcard{position:relative;aspect-ratio:1.586;border-radius:16px;overflow:hidden;background:#172733;color:#EEF3F5;box-shadow:inset 0 0 0 1px #2A4152,0 18px 40px rgba(0,0,0,.28);padding:20px 22px;display:flex;flex-direction:column;justify-content:space-between}
.wp-wcard::before{content:"";position:absolute;right:-2%;bottom:7%;width:72%;aspect-ratio:430/292;background:url("/echidna-mascot.svg") center/contain no-repeat;opacity:.13;pointer-events:none;-webkit-mask-image:linear-gradient(100deg,transparent 4%,#000 55%);mask-image:linear-gradient(100deg,transparent 4%,#000 55%)}
.wp-wcard .wc-top{position:relative;display:flex;justify-content:space-between;align-items:center}
.wp-wcard .wc-name{font:800 24px var(--ui);letter-spacing:-.02em}
.wp-wcard .wc-chip{position:relative;width:42px;height:32px;border-radius:7px;background:#F6BF26}
.wp-wcard .wc-bot{position:relative;display:flex;justify-content:space-between;align-items:flex-end;font-size:12.5px;color:#A3B4BE}
.wp-wcard .wc-bot b{color:#EEF3F5;font-weight:700}
.wp-tap{width:28px;height:28px;fill:none;stroke:#A3B4BE;stroke-width:1.8;stroke-linecap:round}
.wp-about{display:flex;align-items:center;justify-content:space-between;gap:12px;text-decoration:none;color:var(--ink)}
.wp-about b{font-weight:800}