/* The Plona gas card (migration 0197; app/card.js, move.js's tile, docs.js's receipt rows). From the founder-approved mockups of Oct 10
   (gas-card-design/html/gc.css sections 2 to 6). Tokens only, so dark mode keeps working. */

/* ---------- 1. the card step (#/card/start, step 1 of 2): three short facts, the name, the terms ---------- */
.gc-facts{list-style:none;margin:0 0 var(--v-group);padding:0;display:grid;gap:var(--v-field)}
.gc-facts li{display:flex;gap:12px;align-items:flex-start}
.gc-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:var(--tint);color:var(--ot)}
.gc-ic svg{width:22px;height:22px}
.gc-facts b{display:block;font-size:16px;line-height:1.3}
.gc-facts span.t{display:block;font-size:14.5px;line-height:1.38;color:var(--sub)}
.gc-name{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);margin:0 0 var(--v-field);font-size:15px}
.gc-name span{color:var(--sub)}
.gc-name b{font-size:16px;min-width:0;overflow-wrap:anywhere;text-align:right}
.gc-agree{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card)}
.gc-agree input[type=checkbox]{flex:none;width:24px;height:24px;margin:1px 0 0;accent-color:var(--orange)}
.gc-agree[aria-invalid=true],.gc-agree:has(input[aria-invalid=true]){border-color:var(--bad)}
.gc-agree label{cursor:pointer}
.gc-agree b{display:block;font-size:16px;line-height:1.3}
.gc-agree .t{display:block;font-size:14px;line-height:1.38;color:var(--sub)}
.gc-agree .gc-read{font-size:14px;padding:14px 4px;margin:-14px -4px;min-height:0;color:var(--ink);font-weight:600;text-decoration:underline}   /* 3.5.8: a 44px tall tap area, same line height */
.gc-lock{display:flex;gap:8px;align-items:flex-start;margin:var(--v-field) 2px 0;font-size:13.5px;line-height:1.4;color:var(--sub)}
.gc-lock svg{flex:none;width:16px;height:16px;margin-top:2px}
.gc-sbx{margin:var(--v-field) 0 0;font-size:14.5px;line-height:1.42;color:var(--sub)}

/* ---------- 2. the card face. Plona draws it; with details shown the number, expiry and CVC are Stripe's Issuing Elements (Stripe-hosted
   frames: the digits never reach Plona). Before "Show details" the face shows only the last 4. ---------- */
.gface{position:relative;width:100%;max-width:296px;aspect-ratio:1.586;margin:0 auto;border-radius:16px;padding:16px 18px;color:#fff;overflow:hidden;
  background:radial-gradient(120% 140% at 100% 100%,#BF4A0A 0%,rgba(191,74,10,0) 55%),linear-gradient(135deg,#1d1b19 0%,#2b2622 60%,#3a2418 100%);
  box-shadow:0 2px 4px rgba(20,20,20,.12),0 10px 26px rgba(20,20,20,.18);display:flex;flex-direction:column;justify-content:space-between}
.gface.sm{max-width:236px;padding:12px 14px;border-radius:13px;margin:var(--s1) auto var(--v-group)}
.gface .gf-top{display:flex;justify-content:space-between;align-items:center}
.gface .gf-brand{display:flex;align-items:center;gap:2px;font:700 20px/1 'Clash Grotesk','Instrument Sans',sans-serif}
.gface.sm .gf-brand{font-size:17px}
.gface .gf-brand img{width:38px;height:24px;object-fit:cover;filter:brightness(1.15)}
.gface .gf-kind{font:600 12.5px/1 'Instrument Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.gface .gf-num{font:500 18px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.06em;font-variant-numeric:tabular-nums;min-height:22px;white-space:nowrap}
.gface.sm .gf-num{font-size:15px}
.gface .gf-mock{font:600 13px/1.3 'Instrument Sans',sans-serif;letter-spacing:0;opacity:.9;white-space:normal}
.gface .gf-bot{display:flex;justify-content:space-between;align-items:flex-end;font:600 13px/1.2 'Instrument Sans',sans-serif;letter-spacing:.04em}
.gface .gf-bot > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gface .gf-bot small{display:block;font-size:10.5px;font-weight:600;opacity:.7;letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px}
.gface .gf-exp{text-align:right}
.gface .gf-cvc{position:absolute;right:18px;top:46%;font:500 14px/1 'JetBrains Mono',ui-monospace,monospace}
.gc-tools{display:flex;gap:8px;justify-content:center;margin:12px 0 0}
.gc-tools .btn{flex:1;max-width:170px;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;padding-left:10px;padding-right:10px;font-size:15.5px}
.gc-tools svg{width:18px;height:18px}
.gc-copyel{flex:1;max-width:160px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--ink);border-radius:var(--r-md)}
.gc-msg{text-align:center;margin:6px 0 0;min-height:0}

/* ---------- 3. the card page (#/card): add it to your phone, the trip's budget, using it, card details ---------- */
.gcp .phead{margin-bottom:14px}
.gc-sec{margin:18px 0 0}
.gc-sec h2{font-size:20px;margin:0 0 4px}
.gc-sec .gc-st{margin:0 0 10px;font-size:14.5px;line-height:1.4;color:var(--sub)}
.gc-wal{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gc-wal button{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 12px;border:1.5px solid var(--ink);border-radius:var(--r-md);background:var(--card);color:var(--ink);font:700 15.5px/1.2 'Instrument Sans',sans-serif;text-align:left;cursor:pointer;min-width:0}
.gc-wal button svg{flex:none;width:22px;height:22px}
.gc-wal button small{display:block;font-weight:500;font-size:13px;color:var(--sub)}
.gc-trip{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);padding:14px 16px}
.gc-trip .gt-r{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.gc-trip .gt-route{font-weight:700;font-size:16px;min-width:0;overflow-wrap:anywhere}
.gc-trip .gt-when{font-size:14px;color:var(--sub);white-space:nowrap}
.gc-trip .gt-on{color:var(--good-d);font-weight:700}
.gc-trip .gt-amt{margin:8px 0 2px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.gc-trip .gt-amt b{font:600 28px/1.1 'Clash Grotesk','Instrument Sans',sans-serif;font-variant-numeric:tabular-nums}
.gc-trip .gt-amt span{font-size:15px;color:var(--sub)}
.gc-trip p.small{margin-top:4px;font-size:14px;line-height:1.4}
.gc-help{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}
.gc-help li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-top:1px solid var(--line)}
.gc-help li:first-child{border-top:0}
.gc-help .gc-ic{width:36px;height:36px;border-radius:10px}
.gc-help .gc-ic svg{width:20px;height:20px}
.gc-help b{display:block;font-size:15.5px;line-height:1.3}
.gc-help .t{display:block;font-size:14px;line-height:1.38;color:var(--sub)}
.gc-help li.gc-help-go{padding:0}
.gc-help-go button{display:flex;gap:12px;align-items:center;width:100%;min-height:56px;padding:12px 14px;border:0;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.gc-help-go button > span:nth-child(2){flex:1;min-width:0}
.gc-help-go button > svg{flex:none;width:18px;height:18px;color:var(--sub)}
.gc-kv{margin:0;padding:2px 16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}
.gc-kv > div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-top:1px solid var(--line)}
.gc-kv > div:first-child{border-top:0}
.gc-kv > div.st{display:block}
.gc-kv dt,.gc-kv dd{margin:0;font-size:15px;line-height:1.38}
.gc-kv dt{color:var(--sub)}
.gc-kv dd{font-weight:600;min-width:0;overflow-wrap:anywhere;text-align:right}
.gc-kv > div.st dd{text-align:left;margin-top:4px}
.gc-kv dd small{display:block;margin-top:4px;font-size:13px;font-weight:400;color:var(--sub)}
.gc-kv .ph,.gc-kv .ph-a{display:block;font-weight:400;color:var(--sub)}
.gc-kv .ph{font-style:italic}
.gc-legal{margin:16px 0 0;font-size:13px;line-height:1.45;color:var(--sub)}
.gc-legal b{color:var(--ink);font-weight:600}
.gc-legal .ph{font-style:italic}
/* go-live 3.5 (0233): the complaints link on the card step, the terms sheet and Using it; 44px tall to tap */
.gc-cmp{margin:8px 0 0}
.gc-cmp a,.gc-help .t a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--ot,#A63F05);text-decoration:underline;text-underline-offset:2px}
.gc-sbxs .row{gap:8px;flex-wrap:wrap}
/* the sheets (wallet steps, the card terms) */
.gc-steps{margin:6px 0 14px;padding-left:22px;font-size:15px;line-height:1.45}
.gc-steps li{margin:0 0 6px}
.gc-terms{margin:4px 0 14px;padding-left:20px;font-size:15px;line-height:1.5}
.gc-terms a{color:var(--ink);font-weight:600}

/* ---------- 4. the gas card tile on the trip page and the move page (move.js, card mode): what's left, a meter, the last purchase ---------- */
.gc-tile{border:1.5px solid var(--ink);border-radius:var(--r-lg);background:var(--card);padding:14px 16px;margin:0 0 12px}
.gc-tile .gt-h{display:flex;align-items:center;gap:10px;margin:0 0 8px}
.gc-tile .gt-t{flex:1;min-width:0}
.gc-tile .gt-open{flex:none;display:inline-flex;align-items:center;min-height:44px;margin:-6px -4px -6px 0;padding:0 4px;font-weight:700;font-size:15px;color:var(--ink)}
.gc-tile .gt-h .gc-ic{width:36px;height:36px;border-radius:10px}
.gc-tile .gt-h b{display:block;font-size:16px;line-height:1.25}
.gc-tile .gt-h .on{display:block;font-size:13.5px;line-height:1.3;color:var(--good-d);font-weight:700}
.gc-left{display:flex;align-items:baseline;gap:8px;margin:2px 0 8px;flex-wrap:wrap}
.gc-left b{font:600 34px/1 'Clash Grotesk','Instrument Sans',sans-serif;font-variant-numeric:tabular-nums}
.gc-left span{font-size:16px;color:var(--sub)}
.gc-meter{position:relative;height:10px;border-radius:5px;background:var(--wait);overflow:hidden}
.gc-meter i{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:var(--orange)}
.gc-used{display:flex;justify-content:space-between;gap:8px;margin:6px 0 0;font-size:14px;color:var(--sub);font-variant-numeric:tabular-nums}
.gc-last{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line);font-size:14.5px;line-height:1.4;color:var(--sub)}
.gc-own,.gc-off,.gc-pre,.gc-get{display:block;padding:12px;margin:0 0 12px}

/* ---------- 5. the driver's receipt (docs.js, card mode): the money rows in the order the money moved, then the purchases ---------- */
.rc-sec{margin:16px 0 0}
.rc-sec h2{font-size:18px;margin:0 0 6px}
.rc-money td{padding:9px 0}
.rc-money .as{display:block;font-size:13px;font-weight:400;color:var(--sub);line-height:1.35;margin-top:1px}
.rc-money td:last-child{padding-left:12px;vertical-align:top}
.rc-money tr.sent td{border-top:2px solid var(--ink);font-weight:700}
.rc-buys{list-style:none;margin:0;padding:0}
.rc-buys li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line);font-size:15px}
.rc-buys li:first-child{border-top:0}
.rc-buys .w{min-width:0}
.rc-buys .w small{display:block;font-size:13px;color:var(--sub)}
.rc-buys b{font-variant-numeric:tabular-nums;white-space:nowrap}
.rc-card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);padding:6px 16px 8px}
.rc-own{margin:6px 0 0;font-size:14px;color:var(--sub)}

/* 3.5.8: the short-phone rules (smaller icons, text and card) are gone (steps.css section 5); the button stays on screen (sticky) */
@media (max-width:340px){
  .gc-wal{grid-template-columns:1fr}
  .gface .gf-num{font-size:15px}
}