/* The signed-in sections of the one Unlock card page (#7141): ported from demos/pass/pass.css and /pass/'s own page
   styles, scoped to .cx so the card face and the connect steps keep index.html's look. Uses index.html's colour tokens
   (light only). States are said in words, never by colour alone. */
.cx{max-width:620px}
.cx > div:not(:empty):not(.use),.cx > section{margin-top:32px}
.cx h1{font-family:Orbitron,system-ui,sans-serif; font-weight:700; font-size:clamp(24px,3.4vw,30px); line-height:1.15;
  color:var(--copper); margin:0 0 8px; text-wrap:balance}
.cx h2{font-size:19px; font-weight:750; line-height:1.3; margin:0 0 4px}
.cx .q{color:var(--ink-2); font-size:15px; margin:0 0 4px; max-width:560px}
.cx .note{color:var(--grey); font-size:13px; margin:10px 0 0; padding:0; border:0; max-width:560px}
.cx .status{margin-top:12px; font-size:14px; color:var(--ink-2); min-height:1.5em}
.cx .status:empty{min-height:0; margin:0}
.cx .status.bad{color:var(--danger)} .cx .status.ok{color:var(--ok)}
.cx .mono{font-family:ui-monospace,"SF Mono",Menlo,monospace}
.cx a{color:var(--copper); text-underline-offset:3px}
.cx button:focus-visible,.cx a:focus-visible,.cx summary:focus-visible{outline:2px solid var(--copper); outline-offset:2px}

/* Buttons: one filled main action, quieter choices beside it */
.cx .btn{appearance:none; display:flex; align-items:center; justify-content:center; border:0; border-radius:10px; background:var(--ink); color:#FFFFFF;
  font-family:inherit; font-size:16px; line-height:1.2; font-weight:600; min-height:48px; width:100%; max-width:420px; margin-top:16px; padding:0 16px;
  cursor:pointer; touch-action:manipulation; transition:transform .16s var(--ease)}
.cx .btn:active{transform:scale(.98)}
.cx .btn[disabled]{opacity:.55; cursor:default}
.cx .btn.ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--border)}
.cx .btn + .btn{margin-top:10px}
@media (prefers-reduced-motion:reduce){ .cx .btn{transition:none} .cx .btn:active{transform:none} }
.cx .link{appearance:none; border:0; background:none; font:inherit; font-size:14px; font-weight:600; color:var(--copper); cursor:pointer;
  min-height:44px; padding:0 8px; text-decoration:underline; text-underline-offset:3px}

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

/* The checkout, and its loading and error states */
.cx .co{margin-top:14px; position:relative}
.cx .co iframe{border-radius:10px}
.cx .co-loading{display:grid; gap:10px}
.cx .co-loading + #co-root{position:absolute; left:-9999px; width:100%; max-width:470px}
.cx .co-loading span{display:block; height:44px; border-radius:10px; background:var(--border); opacity:.55; animation:cx-pulse 1.2s ease-in-out infinite}
.cx .co-loading span.tall{height:96px}
.cx .co-error{border:1px solid var(--border); border-radius:10px; padding:16px; text-align:center}
.cx .co-error p{margin:0; color:var(--ink-2); font-size:14px}
@keyframes cx-pulse{50%{opacity:.25}}

/* Paid, and ready */
.cx .paid{border:1px solid var(--border); border-radius:12px; padding:22px 18px; text-align:center; max-width:520px}
.cx .paid h2{margin:10px 0 4px}
.cx .paid .q{margin:0 auto}
.cx .paid .q.bad{color:var(--danger)}
.cx .tick{display:inline-block; width:40px; height:40px; border-radius:50%; border:2px solid var(--ok); position:relative}
.cx .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)}
.cx .tick.sm{width:22px; height:22px; flex:none; border-width:1.5px}
.cx .tick.sm::after{left:6.5px; top:3px; width:5px; height:10px; border-width:0 1.5px 1.5px 0}
.cx .wait{height:4px; border-radius:4px; background:var(--border); overflow:hidden; margin:16px auto 0; max-width:220px}
.cx .wait span{display:block; height:100%; width:40%; background:var(--copper); border-radius:4px; animation:cx-slide 1.4s ease-in-out infinite}
@keyframes cx-slide{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
@media (prefers-reduced-motion:reduce){ .cx .sk,.cx .co-loading span,.cx .wait span{animation:none} }
.cx .done-note{display:flex; gap:10px; align-items:flex-start; margin:0 0 16px; 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}
.cx .done-note strong{color:var(--ink)}
.cx .callout{margin:0 0 12px}

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

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

/* Your cards: one row per card, the state said in words */
.cx .given{list-style:none; margin:12px 0 0; padding:0}
.cx .given > li{padding:14px 0 6px; border-top:1px solid var(--border)}
.cx .gv-top{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.cx .gv-name{font-weight:650; font-size:16px; overflow-wrap:anywhere}
.cx .gv-left{font-variant-numeric:tabular-nums; font-size:16px; font-weight:600; white-space:nowrap}
.cx .gv-sub{font-size:13px; color:var(--grey)}
.cx .gv-line{margin:4px 0 0; font-size:14px; color:var(--ink-2); line-height:1.45}
.cx .gv-edit .f{margin-top:10px}
.cx .gv-row{display:flex; gap:8px; margin-top:6px; max-width:460px}
.cx .gv-row input{flex:1; min-width:0; min-height:44px; padding:10px 12px; border-radius:10px; border:1px solid var(--border);
  background:#FFFFFF; color:var(--ink); font-family:inherit; font-size:16px}
.cx .gv-row input:focus-visible{outline:2px solid var(--copper); outline-offset:1px}
.cx .gv-row .btn{width:auto; margin-top:0; padding:0 18px}
.cx .gv-edit .status{margin-top:6px}
.cx .gv-more{margin-top:6px; font-size:14px}
.cx .gv-more summary{cursor:pointer; color:var(--copper); font-weight:600; font-size:13px; min-height:44px; display:flex; align-items:center}
.cx .gv-svc,.cx .gv-fail{list-style:none; margin:0; padding:0}
.cx .gv-svc li{display:flex; justify-content:space-between; gap:12px; padding:4px 0; color:var(--ink-2); font-variant-numeric:tabular-nums}
.cx .gv-fh{margin:10px 0 2px; font-size:13px; font-weight:600; color:var(--ink-2)}
.cx .gv-fail li{padding:4px 0; color:var(--ink-2); line-height:1.45}
.cx .gv-fail li span{display:block; color:var(--grey); font-size:13px; overflow-wrap:anywhere}
.cx .pl-code{font-size:13px; color:var(--ink); letter-spacing:.04em; white-space:nowrap}
.cx .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). */
.cx .given .gw-btn{margin:4px 0 0 -8px; display:block}
.cx .pl-gave:empty{display:none}
.cx .pl-gave{margin:4px 0 12px}
.cx .pl-find{margin-top:18px; padding-top:4px; border-top:1px solid var(--border)}
.cx .given > li.pl-hit{outline:2px solid var(--copper); outline-offset:4px; border-radius:6px}
.cx .gv-row.qty{flex-direction:column; gap:4px; margin:6px 0 10px}
.cx .gv-row.qty select{min-height:44px; max-width:120px; padding:8px 12px; border-radius:10px; border:1px solid var(--border);
  background:#FFFFFF; color:var(--ink); font-family:inherit; font-size:16px}

/* Closed lines: the budget, connecting a sponsor card */
.cx .own summary{cursor:pointer; min-height:44px; display:flex; align-items:center; font-weight:600; color:var(--ink)}
.cx .own[open] summary{margin-bottom:4px}
.cx .own > .q{margin:0 0 4px}
/* The own wallet's row: its panel (budget-ui.js) opens inside it */
#budget{scroll-margin-top:16px}
.cx .given > li > .own{margin-top:2px}
.cx .given .own-panel:not(:empty){margin:6px 0 10px; padding:16px; border:1px solid var(--border); border-radius:12px; background:#FFFFFF}
.cx .given > li > .btn{max-width:320px}

/* What pays first, what your assistant reads: one choice each, said in words ("Pays first", "Now") */
.cx .payfirst{border:0; margin:12px 0 0; padding:0; display:grid; gap:8px}
.cx .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.cx .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}
.cx .pf-opt input{margin:3px 0 0; width:18px; height:18px; accent-color:var(--ink); flex:none}
.cx .pf-opt input:focus-visible{outline:2px solid var(--copper); outline-offset:2px}
.cx .pf-opt:has(input:checked){border-color:var(--ink)}
.cx .pf-opt > span{display:grid; gap:2px; min-width:0}
.cx .pf-name{font-weight:600; font-size:15px}
.cx .pf-sub{font-size:13px; color:var(--grey); overflow-wrap:anywhere}
.cx .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}

/* Your limits (#7141 slice 5): two amounts, today's use in words beside the bar, the form in place */
#limits{scroll-margin-top:16px}
.cx #limits .stats{max-width:560px; margin:12px 0 10px}
.cx #limits .bar, .cx #limits .barnote{max-width:560px}
.cx .lim-form{max-width:560px}
.cx .lim-form .row{margin-top:16px}
.cx .lim-quiet{text-align:left; margin:8px 0 0}
.cx .lim-quiet .link{padding-left:0}
/* The page's own .f input padding would put an amount under its "$" (here and in the own-wallet panel). */
.cx .money input{padding-left:26px}

/* Signed in, the full Google Wallet block of the connect view gives way to the button on the card's own row. */
body[data-view="in"] #gw{display:none}