/* Sippar pass page (#5389). Uses the page's color tokens (index.html :root, light and dark);
   shares budget-ui.css for the hero, steps, notes and details. */
h2{font-size:17px; line-height:1.3; margin:18px 0 2px}
.how{margin:16px 0 6px}

/* Price lines */
.bd{margin:16px 0 0; border:1px solid var(--border); border-radius:10px; padding:2px 14px}
.bd .li{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; font-size:15px; font-variant-numeric:tabular-nums}
.bd .li + .li{border-top:1px solid var(--border)}
.bd .li s{color:var(--grey)}
.bd .li.promo{color:var(--ok); font-weight:600; font-size:13px; border-top:0; padding:0 0 10px; margin-top:-4px}
.bd .li.total{font-weight:650; font-size:17px}
.sk{display:inline-block; width:56px; height:14px; border-radius:6px; background:var(--border); animation:pulse 1.2s ease-in-out infinite}
.bd .li .later{font-weight:400; font-size:14px; color:var(--grey)}
#paycard{margin-top:16px}
.to{margin:10px 0 0; font-size:13px; color:var(--grey)}
.to .mono{color:var(--ink-2)}

/* The checkout, and its loading and error states */
.co{margin-top:14px}
.co iframe{border-radius:10px}
.co-loading{display:grid; gap:10px}
/* Crossmint's frame lays itself out under the skeleton, then takes its place. */
.co-loading + #co-root{position:absolute; left:-9999px; width:100%; max-width:470px}
.co{position:relative}
.co-loading span{display:block; height:44px; border-radius:10px; background:var(--border); opacity:.55; animation:pulse 1.2s ease-in-out infinite}
.co-loading span.tall{height:96px}
.co-error{border:1px solid var(--border); border-radius:10px; padding:16px; text-align:center}
.co-error p{margin:0; color:var(--ink-2); font-size:14px}
.co-error .btn{margin-top:12px}
@keyframes pulse{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){ .sk,.co-loading span,.wait span{animation:none} }

/* Paid, and ready */
.paid{margin-top:18px; border:1px solid var(--border); border-radius:10px; padding:22px 18px; text-align:center}
.paid h2{margin:10px 0 4px}
.paid .q{margin:0}
.paid .q.bad{color:var(--danger)}
.tick{display:inline-block; width:40px; height:40px; border-radius:50%; border:2px solid var(--ok); position:relative}
.tick::after{content:""; position:absolute; left:13px; top:7px; width:9px; height:17px; border:solid var(--ok); border-width:0 2px 2px 0; transform:rotate(45deg)}
.tick.sm{width:22px; height:22px; flex:none; border-width:1.5px}
.tick.sm::after{left:6.5px; top:3px; width:5px; height:10px; border-width:0 1.5px 1.5px 0}
.wait{height:4px; border-radius:4px; background:var(--border); overflow:hidden; margin:16px auto 0; max-width:220px}
.wait span{display:block; height:100%; width:40%; background:var(--copper); border-radius:4px; animation:slide 1.4s ease-in-out infinite}
@keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
.done-note{display:flex; gap:10px; align-items:flex-start; margin:14px 0 0; padding:12px 14px; border-radius:10px;
  border:1px solid color-mix(in srgb, var(--ok) 45%, var(--border)); font-size:14px; color:var(--ink-2); line-height:1.45}
.done-note strong{color:var(--ink)}
#more{margin-top:18px}

/* Terms */
.fine{margin:14px 0 0; font-size:12.5px; line-height:1.5; color:var(--grey)}
.fine + .fine{margin-top:6px}
.fine.test{color:var(--copper)}

/* Giving a pass: the message as it will arrive */
.msg{margin-top:12px; padding:14px 16px; border:1px solid var(--border); border-radius:14px 14px 14px 4px; background:var(--bg); font-size:15px; line-height:1.5; color:var(--ink)}
.msg p{margin:0}
.msg p + p{margin-top:10px}
.msg a{color:var(--copper); word-break:break-all; text-decoration:underline; text-underline-offset:2px}
.gbtns{display:grid; gap:10px; margin-top:12px}
.gbtns .btn{margin-top:0}
.codeline{margin:12px 0 0; font-size:13px; color:var(--grey)}
.codeline .mono{color:var(--ink); letter-spacing:.06em}

/* Passes you gave (2026-10-25): one row per pass, the state said in words, never by color alone */
.given{list-style:none; margin:10px 0 0; padding:0}
.given > li{padding:12px 0 4px; border-top:1px solid var(--border)}
.gv-top{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.gv-name{font-weight:600; font-size:15px; overflow-wrap:anywhere}
.gv-left{font-variant-numeric:tabular-nums; font-size:15px; white-space:nowrap}
.gv-sub{font-size:13px; color:var(--grey)}
.gv-line{margin:4px 0 0; font-size:14px; color:var(--ink-2); line-height:1.45}
.gv-edit .f{margin-top:10px}
.gv-row{display:flex; gap:8px; margin-top:6px}
.gv-row input{flex:1; min-width:0; min-height:44px; padding:10px 12px; border-radius:10px; border:1px solid var(--border);
  background:var(--bg); color:var(--ink); font-family:inherit; font-size:16px}
.gv-row input:focus-visible{outline:2px solid var(--copper); outline-offset:1px}
.gv-row .btn{width:auto; margin-top:0; padding:0 18px}
.gv-edit .status{margin-top:6px; min-height:0}
/* What a friend bought, opened on tap */
.gv-more{margin-top:6px; font-size:14px}
.gv-more summary{cursor:pointer; color:var(--copper); font-weight:600; font-size:13px; min-height:44px; display:flex; align-items:center}
.gv-more summary:focus-visible{outline:2px solid var(--copper); outline-offset:1px; border-radius:6px}
.gv-svc,.gv-fail{list-style:none; margin:0; padding:0}
.gv-svc li{display:flex; justify-content:space-between; gap:12px; padding:4px 0; color:var(--ink-2); font-variant-numeric:tabular-nums}
.gv-fh{margin:10px 0 2px; font-size:13px; font-weight:600; color:var(--ink-2)}
.gv-fail li{padding:4px 0; color:var(--ink-2); line-height:1.45}
.gv-fail li span{display:block; color:var(--grey); font-size:13px; overflow-wrap:anywhere}
/* One list of passes, sorted by pass number (2026-10-25) */
.pl-code{font-size:13px; color:var(--ink); letter-spacing:.04em}
.pl-acts{display:flex; flex-wrap:wrap; gap:0 16px; margin-left:-8px}
/* Google's "Add to Google Wallet" button, unmodified (black only, ratio kept, at least 48px high, 8px clear space). */
.gw-btn{appearance:none; border:0; background:none; padding:8px; margin:4px 0 0 -8px; cursor:pointer; border-radius:12px; touch-action:manipulation; display:block}
.gw-btn img{display:block; height:48px; width:auto}
.gw-btn:focus-visible{outline:3px solid currentColor; outline-offset:2px}
.gw-btn:disabled{cursor:progress; opacity:.5}
.pl-gave:empty{display:none}
.pl-gave{margin:4px 0 12px}
.pl-find{margin-top:18px; padding-top:4px; border-top:1px solid var(--border)}
.given > li.pl-hit{outline:2px solid var(--copper); outline-offset:4px; border-radius:6px}
.pl-code{white-space:nowrap}
/* How many passes to buy with USDC (#5847): label above, a native select sized for touch */
.gv-row.qty{flex-direction:column; gap:4px; margin:6px 0 10px}
.gv-row.qty select{min-height:44px; max-width:120px; padding:8px 12px; border-radius:10px; border:1px solid var(--border);
  background:var(--bg); color:var(--ink); font-family:inherit; font-size:16px}
.gv-row.qty select:focus-visible{outline:2px solid var(--copper); outline-offset:1px}

/* The budget card's closed line (#5847, To-do 5): the budget offered under the pass, never above it. */
.own summary{cursor:pointer; min-height:44px; display:flex; align-items:center; font-weight:600; color:var(--ink)}
.own summary:focus-visible{outline:2px solid var(--copper); outline-offset:2px; border-radius:6px}
.own[open] summary{margin-bottom:4px}
.own > .q{margin:0 0 4px}
#budget{scroll-margin-top:16px}

/* What pays first (2026-11-02): one choice, said in words ("Pays first"), never by colour alone */
#payfirst:empty{display:none}
#payfirst{margin:18px 0 6px}
.payfirst{border:0; margin:10px 0 0; padding:0; display:grid; gap:8px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.pf-opt{display:flex; gap:12px; align-items:flex-start; padding:12px 14px; min-height:44px; border:1px solid var(--border); border-radius:10px;
  background:#FFFFFF; cursor:pointer}
.pf-opt input{margin:3px 0 0; width:18px; height:18px; accent-color:var(--btn-bg); flex:none}
.pf-opt input:focus-visible{outline:2px solid var(--copper); outline-offset:2px}
.pf-opt:has(input:checked){border-color:var(--ink)}
.pf-opt > span{display:grid; gap:2px; min-width:0}
.pf-name{font-weight:600; font-size:15px}
.pf-sub{font-size:13px; color:var(--grey); overflow-wrap:anywhere}
.pf-now{display:inline-block; margin-left:6px; padding:1px 8px; border-radius:999px; border:1px solid var(--ink); font-size:12px; font-weight:600}