/* bp QR Fuel (ADR 0001). One column that reflows from a 160 px wide screen
   (a 320 px phone at 200% text zoom) to a tablet with no sideways scroll;
   make layout checks every screen. Light and dark follow the phone. */
@font-face { font-family:"bp Sans"; src:url(/static/bpSans-Regular.woff2) format("woff2"), url(/static/bpSansTT-Regular.ttf) format("truetype"); font-weight:400; font-display:swap; unicode-range:U+0020-007E, U+00A0-00FF, U+2010-2027, U+2030-203A, U+20AC, U+2122, U+2190-2193, U+2713; }
@font-face { font-family:"bp Sans"; src:url(/static/bpSans-Bold.woff2) format("woff2"), url(/static/bpSansTT-Bold.ttf) format("truetype"); font-weight:700 900; font-display:swap; unicode-range:U+0020-007E, U+00A0-00FF, U+2010-2027, U+2030-203A, U+20AC, U+2122, U+2190-2193, U+2713; }

:root {
  color-scheme: light dark;
  --green:#009900; --lime:#7AC143; --on-green:#fff;
  --accent:#007A00;              /* green as text and outlines on cards (5.4:1 on white) */
  --ink:#0B3A1C; --soft:#4A6B53; --bg:#F3F6F1; --card:#fff; --line:#DCE5D8; --pressed:#F0F8EC;
  --warn:#8A1C12; --warnbg:#FCE8E6; --yellow:#FFE600; --shadow:0 2px 10px rgba(11,58,28,.08);
  --gutter:clamp(10px, 4vw, 16px); --pad:clamp(12px, 5vw, 20px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --accent:#5BD15B; --ink:#E4EFE6; --soft:#A9C2B0; --bg:#0D1410; --card:#17211A; --line:#2D3D31; --pressed:#1E3323;
    --warn:#FFB4A8; --warnbg:#3A1611; --shadow:0 2px 10px rgba(0,0,0,.4);
  }
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body {
  margin:0; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column;
  font-family:"bp Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background:var(--bg); color:var(--ink);
  /* Long names, codes and links break rather than push the page wide. */
  overflow-wrap:anywhere; hyphens:auto;
}
img, video, iframe { max-width:100%; }
a { color:inherit; }
:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
[tabindex="-1"]:focus { outline:none; }

/* Header: bp green. Its small line is large text (19 px bold), so white on
   #009900 passes WCAG AA as large text. */
.bar {
  background:linear-gradient(135deg, var(--green) 0%, var(--green) 55%, var(--lime) 100%); color:var(--on-green);
  padding:max(12px, env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) 12px max(var(--gutter), env(safe-area-inset-left));
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;
}
.bar img { width:40px; height:40px; flex:none; }
.bar > div { flex:1 1 9em; min-width:0; }
.site { font-size:19px; font-weight:700; line-height:1.2; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; }
.point { font-size:clamp(20px, 6.5vw, 24px); font-weight:800; line-height:1.15; }
.pill { background:#fff; color:#0B3A1C; border-radius:999px; padding:6px 12px; font-weight:800; font-size:15px; white-space:nowrap; margin-left:auto; }
.pill.busy { background:var(--yellow); }
.pill.off { background:#FCE8E6; color:#8A1C12; }

main {
  flex:1 0 auto; width:100%; max-width:520px; margin:0 auto;
  padding:var(--gutter) max(var(--gutter), env(safe-area-inset-right)) var(--gutter) max(var(--gutter), env(safe-area-inset-left));
  display:grid; grid-template-columns:minmax(0, 1fr); gap:14px; align-content:start;
}
.card { background:var(--card); border-radius:18px; padding:var(--pad); box-shadow:var(--shadow); min-width:0; }
h1 { font-size:clamp(22px, 7vw, 26px); margin:0 0 6px; line-height:1.15; }
h2 { font-size:18px; margin:0 0 12px; }
p { margin:6px 0; line-height:1.4; }
.muted { color:var(--soft); font-size:16px; }
.center { text-align:center; }
.big { font-size:clamp(26px, 13vw, 52px); font-weight:900; letter-spacing:-.01em; margin:4px 0; line-height:1.1; }
/* Only a ticking clock gets even-width digits: in bp Sans they also widen the
   point, so a price would read "$2 . 00". */

/* Choices (the amount grid here, setup's pump list): a name with a note
   under it; on a very narrow screen the grid reflows to one column. */
.choices { display:grid; gap:10px; }
.choice {
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:4px 12px; width:100%; min-height:64px;
  text-align:left; padding:clamp(12px, 4vw, 18px); border-radius:14px; border:2px solid var(--line);
  background:var(--card); color:var(--ink); font:inherit; font-size:18px; font-weight:700; cursor:pointer;
}
.choice > span:first-child { flex:1 1 7em; min-width:0; }
.choice small { display:block; font-weight:400; color:var(--soft); font-size:15px; margin-top:2px; }
.choice:active, .choice[aria-pressed="true"] { border-color:var(--accent); background:var(--pressed); }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(76px, 1fr)); gap:10px; }
.grid .choice { justify-content:center; text-align:center; font-size:20px; padding:12px 6px; }
.grid .choice > span:first-child { flex:none; }
.amount { display:grid; gap:10px; margin-top:12px; }

.btn {
  display:flex; align-items:center; justify-content:center; width:100%; min-height:56px; padding:14px 18px;
  text-align:center; text-decoration:none; border-radius:999px; border:0; font:inherit; font-size:18px; font-weight:800;
  background:var(--green); color:var(--on-green); cursor:pointer;
}
.btn:disabled { opacity:.6; }
.btn.dark { background:#000; color:#fff; box-shadow:0 0 0 1px var(--line); }
.btn.ghost { background:transparent; color:var(--accent); border:2px solid var(--accent); }
.btn.link { background:transparent; color:var(--soft); text-decoration:underline; font-weight:700; padding:8px 12px; min-height:44px; }

.member { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
/* BPme lock-up: always white, on the BP Green to BP Light Green gradient,
   with a cap-B's width of clear space (BPme brand guidelines). */
.member .dot, .join .dot { width:72px; height:48px; border-radius:12px; background:linear-gradient(135deg,#009900,#99CC00); display:grid; place-items:center; flex:none; }
.member .dot img, .join .dot img { width:44px; height:auto; display:block; }
.member > div { flex:1 1 120px; min-width:0; }
/* "Not you?" sits at the end of the row; "Add" takes its own full-width row
   below the lock-up, so the words never squeeze into a narrow column. */
.member > .btn.link { flex:none; width:auto; margin-left:auto; }
.member > .btn.ghost { flex:1 1 100%; min-height:48px; padding:10px 16px; }

/* "Join bp me" at the end of a sale with no points: centred, the store
   buttons stacked so they never squeeze at 320 px. */
.join { margin-top:16px; }
.join .dot { margin:0 auto 10px; }
.join h2 { margin:4px 0; font-size:20px; }
.join .stores { display:grid; gap:10px; margin-top:12px; }
.join .btn { overflow-wrap:anywhere; }

.notice.warn { border:3px solid var(--warn); }
.notice.warn h1 { color:var(--warn); }
.error { background:var(--warnbg); color:var(--warn); border-radius:12px; padding:12px 14px; font-weight:700; margin:10px 0; }
.error .btn { margin-top:10px; }
/* Label left, value right; a long value (a card name, a big total) wraps
   under its label on a narrow screen. */
.row { display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 12px; padding:8px 0; border-bottom:1px solid var(--line); }
.row > span { min-width:0; }
.row > span:last-child { text-align:right; margin-left:auto; }
.row:last-child { border-bottom:0; }

.spin { width:44px; height:44px; border-radius:50%; border:5px solid var(--line); border-top-color:var(--green); animation:spin .9s linear infinite; margin:8px 0 12px; }
@keyframes spin { to { transform:rotate(360deg); } }
.tick { width:56px; height:56px; border-radius:50%; background:var(--green); color:#fff; display:grid; place-items:center; font-size:32px; font-weight:900; margin:4px 0 12px; animation:pop .35s ease-out; }
@keyframes pop { from { transform:scale(.6); opacity:0; } }

/* Starting: what has happened and what is next, with a bar that fills over
   the site's 15 s start deadline. */
/* Status cards (the session's progress, notices): centred, the step list a
   centred block with its lines still left-aligned. */
.status { text-align:center; }
.status .tick, .status .spin { margin-left:auto; margin-right:auto; }
.status .steps { width:max-content; max-width:100%; margin-left:auto; margin-right:auto; text-align:left; }
.status .progress { margin-left:auto; margin-right:auto; }
.steps { list-style:none; padding:0; margin:12px 0 4px; display:grid; gap:8px; }
.steps li { display:flex; gap:10px; align-items:center; color:var(--soft); }
.steps li::before { content:""; flex:none; width:22px; height:22px; border-radius:50%; border:3px solid var(--line); }
.steps li.done { color:var(--ink); }
.steps li.done::before { content:"\2713"; border-color:var(--green); background:var(--green); color:#fff; font-size:13px; font-weight:900; display:grid; place-items:center; }
.steps li.now { color:var(--ink); font-weight:700; }
.steps li.now::before { border-color:var(--green); border-top-color:transparent; animation:spin .9s linear infinite; }
.progress { height:6px; border-radius:3px; background:var(--line); overflow:hidden; margin:12px 0 4px; }
.progress > i { display:block; height:100%; width:100%; background:var(--green); transform-origin:left; animation:fill 15s cubic-bezier(.2,.7,.4,1) forwards; }
@keyframes fill { from { transform:scaleX(.04); } to { transform:scaleX(.95); } }

video { width:100%; border-radius:14px; background:#000; aspect-ratio:4/3; object-fit:cover; }
input { width:100%; min-width:0; font:inherit; font-size:20px; padding:12px 14px; min-height:52px; border-radius:12px; border:2px solid var(--line); background:var(--card); color:var(--ink); }
input[aria-invalid="true"] { border-color:var(--warn); }
#pay { min-height:56px; }
/* Holds the wallet buttons' place while Stripe loads, so nothing jumps. */
.wallet-wait { min-height:56px; border-radius:999px; background:var(--line); display:flex; align-items:center; justify-content:center; color:var(--soft); font-weight:700; animation:pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity:.55; } }

/* Before the script runs: the page's shape, not a blank screen. */
.skel { display:grid; gap:12px; }
.skel i { display:block; height:22px; border-radius:8px; background:var(--line); animation:pulse 1.4s ease-in-out infinite; }
.skel i:first-child { width:55%; height:30px; }
.skel i.tall { height:64px; border-radius:14px; }

footer {
  text-align:center; color:var(--soft); font-size:15px; line-height:1.5;
  padding:8px max(var(--gutter), env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
}
footer a { display:inline-flex; align-items:center; min-height:44px; padding:0 10px; font-weight:700; }
.nowrap { white-space:nowrap; }

.saved { margin:0; text-align:center; color:var(--accent); font-weight:700; }
.saved a { display:inline-flex; align-items:center; min-height:44px; color:var(--accent); }
.receipt .rhead { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 12px; }
.receipt .rhead > div { min-width:0; }
.receipt .r { text-align:right; margin-left:auto; }
.receipt .lines { margin:12px 0 4px; border-top:1px solid var(--line); }
.receipt .row { font-size:16px; }
.receipt .row.muted { font-size:15px; border-bottom:0; padding:4px 0; }
.receipt .total { font-size:22px; font-weight:900; border-top:2px solid var(--ink); border-bottom:0; margin-top:4px; }
.list { padding:6px 0; }
.list .item { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:64px; padding:12px var(--pad); color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); }
.list .item > span:first-child { min-width:0; }
.list .item:last-child { border-bottom:0; }
.list small { display:block; color:var(--soft); font-size:14px; margin-top:2px; }
.list .price { font-weight:900; font-size:18px; white-space:nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .progress > i { transform:scaleX(.5); }
}

/* Fuel discount (bp me every fill, or a phone's first fill): front and
   centre. White on #007A00 is 5.4:1, so even the small line passes AA. */
.deal { background:#007A00; color:#fff; border-radius:18px; padding:var(--pad); text-align:center; box-shadow:var(--shadow); }
.deal-big { font-size:clamp(22px, 7.5vw, 30px); font-weight:900; line-height:1.15; }
.deal p { margin:6px 0 0; font-size:16px; }
.save { display:inline-block; max-width:100%; background:#007A00; color:#fff; border-radius:999px; padding:8px 16px; font-weight:800; font-size:18px; line-height:1.3; }
.paid { margin:0; font-size:18px; font-weight:700; color:var(--soft); }
.saving { margin:0; text-align:center; font-weight:800; font-size:18px; color:var(--accent); }

/* The amount screen (design review): the pump number biggest, its grades,
   "Fill up" first and chosen, the wallet for the chosen amount at the end. */
.pumpno { font-size:clamp(32px, 15vw, 60px); font-weight:900; line-height:1.05; letter-spacing:-.01em; margin:0 0 4px; }
.grades { list-style:none; padding:0; margin:4px 0 12px; display:grid; gap:2px; color:var(--soft); font-size:16px; }
.card > .deal { margin:0 0 12px; box-shadow:none; }
.choice.fill { grid-column:1 / -1; }
.choice.fill small { color:inherit; }
.paybar { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); display:grid; gap:10px; }
.hold-up { margin:0; text-align:center; font-weight:800; font-size:18px; }
/* Ready: the time left before the site releases the hold. */
.countdown { margin-top:8px; }
.clock { display:block; font-size:clamp(28px, 11vw, 40px); font-weight:900; font-variant-numeric:tabular-nums; }
/* Fuelling: the pump's amount against the hold, and the sum. */
.meter { height:10px; border-radius:5px; background:var(--line); overflow:hidden; margin:10px 0 4px; }
.meter > i { display:block; height:100%; background:var(--green); }
.breakdown { text-align:left; margin-top:8px; border-top:1px solid var(--line); }
.breakdown .row { font-size:16px; }
.breakdown .row.strong { font-weight:900; }