/* PumpWatt: the one type scale. Every font size on the site is one of these tokens.
   12 is meta only (labels, badges, dates, counts), never a sentence.
   14 is the floor for prose and for every button, link and field.
   16 body, 18 lead, 22 heading, 28 a sub-hero number, 40 the one big figure.
   The hero headings are fluid clamps, listed in scripts/check_type.py.
   Checked by scripts/check_type.py before every deploy. */
:root{--t-xs:12px;--t-sm:14px;--t-md:16px;--t-lg:18px;--t-xl:22px;--t-2xl:28px;--t-3xl:40px}
/* THE DIM AND GLOW TONES, DECLARED ONCE FOR EVERY PAGE (14 Sep). Each page declares its own :root
   with the brand colours in it, and the twenty-one metro pages declare --lamp and --volt but not
   --lamp-dim or --lamp-glow. A var() naming a colour nobody declared makes the whole declaration
   invalid, so .ln-rank's "border:1px solid var(--lamp-dim)" became no border at all and its
   background became transparent: the BEST pill rendered as bare underlined text on every metro
   page, while looking correct on the home page. Declared here, a page that wants its own value
   still wins, because a page's own :root is read after this file. */
:root{--lamp-dim:#8A6A2E;--lamp-glow:rgba(255,194,74,.16);--volt-dim:#3E6E7E;--volt-glow:rgba(127,209,232,.16)}
h1{font-size:var(--t-2xl)}
h2{font-size:var(--t-xl)}
h3{font-size:var(--t-lg)}
button,input,select,textarea{font:inherit}
/* the change button beside a saved car, same on every calculator */
.vinfo.carline{font-size:var(--t-lg);color:var(--paper);margin:10px 0 2px}
.vinfo.carline b{color:var(--lamp);font-weight:700}
button.carchg{display:inline-block;padding:10px 6px;font:600 var(--t-md) Barlow,system-ui,sans-serif;color:#7FD1E8;background:none;border:0;cursor:pointer}

/* The site menu, the same on every page: Home first, the page you are on underlined in amber.
   On phones all six fit one row, which is why Switch and Prices carry the short names. */
/* 16, not 14 (MO, 2 Oct: "the top nav line make fonts bigger"), and Prices reads Gas prices on every page. */
nav.nav{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 14px;font-size:var(--t-md)}
/* 44px is the tap-target floor, and a menu link is the control every page shares. Measured 13 Sep:
   every one of these was 27px tall on a phone. The padding is vertical only, so the row still fits
   six words across a 390 screen. */
nav.nav a{color:#93A0A6;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
/* LINK COLOR, SITE-WIDE (MO, 17 Sep: "change color of fonts circled" - the intro-paragraph and article links were unstyled, so the browser painted them its own default blue with no relation to the brand. Two contexts, two colors: the masthead intro sits on the dark asphalt background where --volt already reads clearly (used the same way in .ln-foot a); article/table copy sits on the light paper background where --volt itself is too pale (1.4:1), so it's darkened to #155E75, which measures 6:1 against paper. */
.masthead p a{color:var(--volt)}
article a{color:#155E75}

nav.nav a.here{color:var(--paper);border-bottom:0;text-decoration:underline 2px var(--lamp);text-underline-offset:5px}
/* On a phone the menu uses the full screen width, not the text column, so the six words
   can breathe and still sit on one row. */
/* a phone keeps 14: six words with "Gas prices" at 16 spill a 390 screen by a pixel and a 320 one by 17 */
@media (max-width:520px){nav.nav{box-sizing:border-box;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);padding:0 10px;gap:0 15px;flex-wrap:nowrap;font-size:var(--t-sm)}nav.nav a{padding:8px 0;white-space:nowrap}.vinfo.carline{font-size:var(--t-md)}}
@media (max-width:380px){nav.nav{gap:0 clamp(6px,2.8vw,12px);padding:0 8px}}
/* 320 is the narrowest phone still in use, and the Prices page nav is the widest of the nine
   because the current page reads heavier. Measured there at -1px a side, so the last band trims again. */
@media (max-width:340px){nav.nav{gap:0 clamp(5px,2.4vw,12px);padding:0 4px;flex-wrap:wrap;justify-content:center}}
/* the whole radius on one price: one number, nothing else */
.ln-one{margin:6px 0 2px;font-size:var(--t-md);color:var(--muted,#A3ADAF)}
.ln-one b{font-size:var(--t-2xl);color:var(--paper);font-weight:800;margin-right:6px}
/* a habit row with no price today: the gap stands in the price column, quieter than a price */
.ln-list b.hab-u{font-size:var(--t-sm);font-weight:600;color:var(--muted,#A3ADAF)}
/* the station name doubles as the way there, so it reads as a name first and a link second */
.ln-list span a{color:var(--paper,#EDE9E1);text-decoration:underline;text-decoration-color:#4C585C;text-underline-offset:3px}
/* how far away, beside the name: the fact that decides whether the cheapest pump is worth the trip */
.ln-list span small.ln-mi{display:inline;margin-left:8px;font-size:var(--t-xs);color:#7C888D;text-align:left;white-space:nowrap}
/* what the fill really costs, and the tap that opens Fill up with these same three stations in it */
.ln-list a.ln-cost{display:block;text-align:right;color:var(--volt,#7FD1E8);text-decoration:none;font-size:var(--t-sm);font-weight:600;line-height:1.25;white-space:nowrap}
/* a price you can fix has to LOOK editable: the cursor is the only tell on a computer and there is
   no cursor on a phone, so the dotted rule under it does the saying (MO, 13 Sep) */
.ln-list b.ln-tap{cursor:pointer;text-decoration:underline dotted;text-underline-offset:4px;text-decoration-thickness:2px;text-decoration-color:#6F7B80}
/* The three usually cheapest are the answer on this page, so they take the whole tile: the biggest type the
   scale allows, and rows with room to breathe. Three rows can afford it where a list of ten could not. */
/* THE ROWS ARE CAPPED AND CENTERED (MO, 2 Oct: "homepage stations and prices too far out now pc"). The tile is 900 wide so
   it lines up with the ZIP and car row, but a name at one edge and a price at the other is 600px of nothing; 620 keeps
   them readable as pairs. The tile, its top line and the rewards line stay full width. */
.ln-list.ln-big{gap:2px 16px;max-width:620px;margin:4px auto 2px}
/* 6 not 12 above and below each station (MO, 3 Oct: "reduce height of station and price tile" so the ZIP and car row shows on a PC) */
.ln-list.ln-big li>*{padding:6px 0}
/* the name matches the price (MO, 14 Sep: "make station names bigger"). The scale has no step
   between 28 and 40, so bigger means the top step, which is where the price already is. */
/* BIGGER THAN THE SCALE'S TOP STEP (MO, 1 Oct: "make station and prices bigger", with the tile now the full width
   of the three cards). A fluid size registered in site.json clamps: 46 on a PC (52 for one evening, MO: "slightly smaller"), down to 28 on a phone where the
   640 rule below takes over. The name and the price move together, as they have since 14 Sep. */
.ln-list.ln-big span{font-size:var(--t-3xl);font-weight:700;line-height:1.1}
.ln-list.ln-big span a{font-size:var(--t-3xl)}
.ln-list.ln-big span small.ln-mi{font-size:var(--t-sm);margin-left:10px}
/* THE PRICE IS THE ANSWER, so it takes the top of the scale (MO, 14 Sep: "make fuel prices bigger").
   40 is the scale's one-big-figure step. The name sits at the same step since 14 Sep. */
.ln-list.ln-big b{font-size:var(--t-3xl);font-weight:800}
.ln-list.ln-big b.hab-u{font-size:var(--t-lg);font-weight:600}
.ln-list.ln-big a.ln-cost{font-size:var(--t-lg)}
/* Phone gets exactly what the PC gets: same three columns, same sizes, same words. Only the gap tightens,
   because 16px of column gap on a 390px screen is space the numbers need. A long name wraps inside its own
   column rather than pushing the money off the row. */
@media (max-width:640px){
  /* one step down the scale on a phone, name and price together at 28 */
  .ln-list.ln-big span, .ln-list.ln-big span a, .ln-list.ln-big b{font-size:var(--t-2xl)}
  .ln-list.ln-big a.ln-cost{font-size:var(--t-md)}
  .ln-list.ln-big span small.ln-mi{margin-left:6px}
  .ln-list.ln-big li>*{padding:9px 0}
}
@media (max-width:520px){
  .ln-list.ln-big{gap:4px 10px}
}
.ln-lost{display:block;margin-top:2px;font-size:var(--t-xs);color:#8B979C;line-height:1.25;text-align:right}
.ln-soon{flex:1;display:flex;flex-direction:column;justify-content:center;margin:10px 0 0;font-size:var(--t-lg);line-height:1.45;color:#B9C4C8}
@media (max-width:640px){.ln-soon{font-size:var(--t-md);margin:8px 0 0}}

/* ---- SHARED, added 13 Sep after the whole-site review ---- */

/* A heading that is there for structure and screen readers, not for the eye. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* EVERY PANEL THAT OPENS AND CLOSES SAYS SO. One chevron that points at what it will do, a 44px
   target, 8px corners, a tint on hover and focus. This lived in fill-up.html, so Fill up said it
   and Charge up, Hybrid and Methods did not: four steps, three steps and five blocks with no mark
   on any of them. Positioned rather than a grid cell, because the narrow layout at 520px would
   otherwise knock the chevron onto its own row. Checked by scripts/check_toggles.py. */
details > summary{list-style:none;cursor:pointer;position:relative;min-height:44px;border-radius:8px;font-weight:600;
  padding-right:44px}
details > summary::-webkit-details-marker{display:none}
details > summary::after{content:"";position:absolute;right:18px;top:50%;width:10px;height:10px;
  margin-top:-8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  opacity:.65;transform:rotate(45deg);transition:transform .15s ease}
details[open] > summary::after{transform:rotate(-135deg);margin-top:-3px}
details > summary:hover::after,details > summary:focus-visible::after{opacity:1}
@media (prefers-reduced-motion:reduce){details > summary::after{transition:none}}

/* READING WIDTH. Comfortable is 45 to 75 characters a line. Measured 13 Sep with every panel open and
   hidden elements skipped, the worst real lines were Switch 121, Prices 92, About 84, Methods 80.
   (A first pass reported 159 and 137: a Range over a hidden element reports one line box, so the whole
   paragraph counts as a single line. Measure only what is laid out.)
   56ch, not 68: the "0" this unit measures is wider than the average lowercase letter in Barlow, so
   60ch lands at about 75 real characters and 68ch at 85. The selectors below are the ones the
   measurement actually named, not a guess: p.sub is the line under the heading on Prices and Switch,
   article p and article li are the whole of About and Methods. Tables and grids are exempt. */
.body > p, .body > .note, .card > p, .prose p, .lede-copy,
p.hint, p.note, p.legend, p.sub, p.lead,
article > p, article li, article > details > p, article > details > ul li{max-width:56ch}

/* THE INSURANCE OFFER, one treatment on all three calculators (MO, 13 Sep). It was a small green tag
   glued to the end of a form label on Hybrid and Charge up, which reads as part of the label rather
   than as an offer. Its own rule, the line centered, and one filled 44px button under it. */
.ins-band{margin:14px 0 0;padding:14px 16px 16px;border-top:1px solid #E1DCD3;text-align:center}
.ins-band p{max-width:52ch;margin:0 auto 12px;font-size:var(--t-md);color:var(--ink);line-height:1.45}
.ins-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;
  padding:0 24px;border-radius:999px;background:var(--go);color:#fff;text-decoration:none;
  font:700 var(--t-md) Barlow,system-ui,sans-serif;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.ins-cta img{border-radius:3px;background:#fff;padding:1px;flex:none}
.ins-cta:hover,.ins-cta:focus{background:#4f9a5c}
.ins-alt{display:block;width:max-content;margin:10px auto 0;min-height:44px;line-height:44px;color:var(--ink);font-size:var(--t-md);text-decoration:underline;text-underline-offset:3px}

/* TAP A PRICE TO FIX IT (MO, 13 Sep). It used to sit in the foot under the savings button, which is the
   quietest place on the card. It is the same line moved, not a new one: nothing was added. */
.ln-note{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 14px;margin:2px 0 6px}
.ln-note .basis{margin:0}
.ln-tip{margin-left:auto;font-size:var(--t-sm);color:#8B979C;white-space:nowrap;position:relative;top:2px}
/* where the correction form opens: its own cell, the full width of the row, gone while it is empty.
   No top rule and no top padding, because the row's rule already sits above the name and the price. */
.ln-list .ln-edit{grid-column:1/-1}
.ln-list .ln-edit:empty{display:none}
.ln-list.ln-big li>.ln-edit{border-top:0;padding:0 0 10px}

/* the saved-car line on Fill up, Hybrid and Charge up wears the home page's label (MO, 13 Sep) */
.carline .lbl{font-weight:600;color:var(--paper,#EDE9E1)}

/* THE CARD IS THE PILL (MO, 13 Sep). Two columns, because the money column came off the row: the
   name column gets that width back and the whole row fits on one line again. */
/* ONE RULE PER ROW, NOT TWO THAT HAVE TO AGREE (14 Sep). The separator was a border-top on each grid
   cell, and the cells are baseline-aligned, so the two halves of the "line" started at whatever height
   their own tallest content did: the BEST pill lifted the name side 8px, and making the price bigger
   lifted the price side 11px the other way. There is no value for those two to agree on, because they
   are two different lines being asked to look like one. So the row itself carries the rule: one border,
   the full width, which cannot disagree with anything. MO reported this on the pill row; the same
   change removes the whole class of it.
   Scoped to .ln-2 on purpose: the three-column lists on the metro pages still use the grid. */
.ln-list.ln-2{display:block}
.ln-list.ln-2 > li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:0 16px;border-top:1px solid #202B30;padding:12px 0}
.ln-list.ln-2 > li > *{border-top:0;padding:0}
.ln-list.ln-2 > li > span{flex:1 1 auto;min-width:0}
/* the price stays on the right even when a long name pushes it onto its own line. space-between
   only right-aligns it while the two share a line; wrapped, it went flush left under the name,
   which read as a different kind of row (14 Sep, seen at 320 with the longest name the card allows) */
.ln-list.ln-2 > li > b{margin-left:auto}
.ln-list.ln-2 > li > .ln-edit{flex:0 0 100%;padding:6px 0 0}
@media (max-width:640px){.ln-list.ln-2 > li{padding:7px 0;gap:0 10px}}
/* the only indicator on the card. It links to the page that explains how the winner was picked,
   which is also the only inbound link that page has now. */
/* SMALLER PILL, RED TEXT ONLY (MO, 15 Sep, two passes). PumpWatt has no locked brand-red yet - brand-kit.md
   flags that only the mark's amber and volt-blue are decided, no hex palette written down. Using the one
   red already live on the site, the price-up color (#E8695C, same one used for "this week" increases),
   rather than inventing a new one with no kit backing - on the FONT only now (MO's second pass: "red on
   the fonts and not the background"), background back to neutral/transparent, border neutral too so the
   red doesn't leak onto the fill.
   FIX: first pass didn't actually shrink anything visible - font-size was already at the 12px floor
   (--t-xs, the smallest the locked type scale allows, so it can't go lower and still pass check_type.py),
   and the underline didn't come from .ln-rank at all: pw.css's ".ln-list span a" rule (a class + two
   elements) outranks ".ln-rank" alone (a class + zero elements) in specificity, so its underline was
   always winning regardless of .ln-rank's own text-decoration:none. Fixed both below: a transform:scale
   shrinks the whole pill without touching the locked font-size, and ".ln-list span a.ln-rank" now matches
   with enough specificity to actually turn the underline off. */
.ln-rank{display:inline-block;margin-left:6px;padding:0 7px;border-radius:999px;border:1px solid #4C585C;background:transparent;font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.3px;white-space:nowrap;vertical-align:1px}
/* SECOND FIX, same visit: the pill sits inside the same <span> as the station name, and two rules meant
   only for that NAME both matched the pill too, at higher specificity than plain ".ln-rank" - ".ln-list
   span a" (color:var(--paper)) and ".ln-list.ln-big span a" (font-size:var(--t-3xl)), which is exactly
   why the pill was showing up 40px and white instead of small and red. Re-declared here at a specificity
   that actually beats both (adds the .ln-rank class itself to the compound selector), so this is the
   version that wins. */
/* MO, 15 Sep, fourth pass: "the BEST green was a neon green" - not the muted --go green used for
   "below U.S." (that one's for a comparison figure, this is a badge that should pop), a brighter,
   more saturated green instead. */
.ln-list span a.ln-rank{color:#39FF6A;text-decoration:none}
/* MO, 15 Sep, third pass: "way small, bigger but not as big as the station name" - up from the 12px
   meta floor to 16 (--t-md), the scale's body size, clearly a step below the name's 28-40. Line-height
   tightened to keep the pill's own height in proportion to the bigger letters. */
.ln-list.ln-big span a.ln-rank{font-size:var(--t-md);line-height:1.2}
@media (max-width:640px){.ln-rank{margin-left:5px;vertical-align:0}}
/* the distance and any rewards tag sit on their own line, FLUSH LEFT under the station name, on every
   row. Written .ln-list small.ln-meta on purpose: a bare .ln-meta loses to .ln-list small{text-align:right}
   and the line drifts right instead of stacking. That cost a pass. */
.ln-list small.ln-meta{display:block;margin:2px 0 0;padding:0;border:0;text-align:left;white-space:normal}
.ln-list.ln-big span .ln-meta .ln-mi{margin-left:0;font-size:var(--t-sm);color:#7C888D}
.ln-list.ln-big span .ln-meta .ln-loy{margin-left:10px}
/* ONE STEP DOWN FOR THE NAMES, AND ONLY WHERE MEASURING SAYS SO (MO, 14 Sep: "station names too big
   on this example"). The class is put on by fitNames() in shared.js after the card has drawn and been
   measured, never by a width guess: a street of Exxons fits 28 on the same phone where Cumberland Farms
   and Gas Express do not. The PRICE IS NOT IN THIS RULE. It is the answer on this card and it keeps its
   size on both; only the label gives way. */
.ln-list.ln-big.ln-fit span,
.ln-list.ln-big.ln-fit span a{font-size:var(--t-2xl)}
@media (max-width:640px){
  .ln-list.ln-big.ln-fit span,
  .ln-list.ln-big.ln-fit span a{font-size:var(--t-xl)}
}
/* THE CARD'S ONE ACTION, CENTERED, ON EVERY PAGE THAT DRAWS THE CARD (MO, 14 Sep: "Max your savings
   pill centered everywhere"). It sat in index.html only and used margin-left:auto, so it hugged the
   right edge on a computer, centered on a phone through a second rule, and on the twenty-one metro
   pages, which draw the same card from the same shared.js, it had no styling at all and rendered as
   a bare blue link. One rule here, one position, everywhere. */
.ln-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 14px;
  padding-top:4px;font-size:var(--t-sm);color:#8B979C;text-align:center}
.ln-foot a{color:var(--volt);text-decoration:none}
a.ln-max{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;
  border-radius:999px;border:1px solid var(--volt);color:var(--volt);background:none;
  text-decoration:none;white-space:nowrap;font:700 var(--t-sm) Barlow,system-ui,sans-serif;
  text-transform:uppercase;letter-spacing:.08em}
a.ln-max:hover,a.ln-max:focus{background:var(--volt);color:var(--asphalt)}
/* the foot as Fill up's two lines, Your stack and Best combo (MO, 1 Oct). Same action, same 44px floor, a tile not a pill. */
a.ln-max.ln-stack{display:flex;flex-wrap:wrap;gap:6px 32px;padding:8px 18px;border-radius:12px;border-color:rgba(127,209,232,.3);background:rgba(127,209,232,.06);
  text-transform:none;letter-spacing:0;white-space:normal;font:400 var(--t-sm) Barlow,system-ui,sans-serif;color:var(--paper);text-align:center}
a.ln-max.ln-stack:hover,a.ln-max.ln-stack:focus{background:rgba(127,209,232,.14);color:var(--paper)}
.ln-stack .sk{display:flex;flex-direction:column;align-items:center;gap:2px}
.ln-stack .stack-lbl{font:600 var(--t-sm) Barlow,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--paper)}
.ln-stack b{font:700 var(--t-2xl) 'Barlow Condensed',Barlow,sans-serif;color:var(--volt);line-height:1.1}
.ln-stack small{font:400 var(--t-sm) Barlow,system-ui,sans-serif;color:#B9C4C8}
/* THE SAVE PILL (MO, 3 Oct: "make save pill an attention getter", "make save pill slightly smaller"). Only the
   one-line state, "Save Nc/gal with rewards", shown before the driver has a stack; shared.js marks it .ln-save.
   Filled in the pill's own volt with asphalt type (as an outline it read as a footnote), one step down the type
   scale (28 to 22), as wide as its words instead of the whole card, a real pill shape, an arrow, and a ring that
   pulses three times and rests. No motion for a driver who asked for none. The 44px tap floor stays. The
   two-line Your stack / Best combo tile is unchanged. */
a.ln-max.ln-stack.ln-save{display:inline-flex;max-width:100%;min-height:44px;padding:4px 22px;border-radius:999px;border-color:var(--volt,#7FD1E8);background:var(--volt,#7FD1E8);animation:savePulse 2s ease-out .8s 3}
a.ln-max.ln-stack.ln-save b{font-size:var(--t-xl);font-weight:800;color:var(--asphalt,#12191C)}
a.ln-max.ln-stack.ln-save b::after{content:" \2192"}
a.ln-max.ln-stack.ln-save:hover,a.ln-max.ln-stack.ln-save:focus{background:var(--paper,#EDE9E1);border-color:var(--paper,#EDE9E1)}
@keyframes savePulse{0%{box-shadow:0 0 0 0 rgba(127,209,232,.6)}70%{box-shadow:0 0 0 12px rgba(127,209,232,0)}100%{box-shadow:0 0 0 0 rgba(127,209,232,0)}}
@media (prefers-reduced-motion:reduce){a.ln-max.ln-stack.ln-save{animation:none}}
/* YOUR STACK UNDER ITS ROW, CENTERED (MO, 4 Oct: "place your stack to the right of the selected station", then "your
   stack saves 44c you pay and centered"). One line of its own, the full width of the row, under the name and the
   price, the same at every size. It is a child of the row and not of the name cell, so it can never set the row's
   width or get a station name trimmed. The class is doubled so this wins over the card's own rules for a row's
   children wherever it is loaded. */
.ln-list.ln-2 > li > a.ln-pay.ln-pay{flex:0 0 100%;display:block;padding:4px 0 0;border:0;text-align:center;font:400 var(--t-lg)/1.3 Barlow,system-ui,sans-serif;letter-spacing:0;color:var(--go,#5FA86B);text-decoration:underline dotted;text-decoration-thickness:1px;text-underline-offset:4px}
.ln-list.ln-2 > li > a.ln-pay.ln-pay strong{font-weight:700;color:#8FD49B}
/* BIGGER (MO, 4 Oct: "your stack saves line bigger"): 16 became 18 on a phone and 22 on a computer. 22 on a phone
   would break the line in two at 390. */
@media (min-width:641px){.ln-list.ln-2 > li > a.ln-pay.ln-pay{font-size:var(--t-xl)}}
/* the one-line Your stack tile in the foot, for a stack no row can carry: one step down, two on a phone, so it stays on one line */
a.ln-max.ln-stack.ln-mine b{font-size:var(--t-xl)}
@media (max-width:640px){a.ln-max.ln-stack.ln-mine b{font-size:var(--t-lg)}}
/* STACK YOUR SAVINGS, OPEN UNDER THE CARD'S THREE STATIONS (4 Oct). A dark title bar with Done, then Fill up's own
   stack panel in a frame, as tall as its content, then Done again: the panel runs close to three screens on a phone,
   and the driver finishes at the bottom of it. (A bar that sticks to the top of the screen is not possible here: the
   page's .wrap clips its overflow, which pins sticky elements in place.) */
.ln-stackbox{margin:8px 0 0;border:1px solid #2A363C;border-radius:8px;overflow:hidden;background:var(--paper,#EDE9E1)}
.ln-sb-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 8px 6px 16px;background:var(--readout,#0A0F11);color:var(--paper,#EDE9E1);font:700 var(--t-lg) 'Barlow Condensed',Barlow,system-ui,sans-serif}
.ln-sb-done{min-height:44px;padding:0 20px;border:0;border-radius:8px;background:var(--lamp,#FFC24A);color:var(--asphalt,#12191C);font:700 var(--t-md) Barlow,system-ui,sans-serif;cursor:pointer}
.ln-stackbox iframe{display:block;width:100%;height:420px;border:0;background:var(--paper,#EDE9E1)}
.ln-sb-foot{display:flex;justify-content:center;padding:10px 12px 12px;background:var(--paper,#EDE9E1);border-top:1px solid #CFC8BB}
.ln-sb-foot .ln-sb-done{min-width:160px}
/* one number under the list, on the winner only */
.ln-money{margin:10px 0 0;font-size:var(--t-md);line-height:1.4;color:#B9C4C8;text-align:center}
.ln-money b{color:var(--paper);font-weight:700}
/* the whole-stack number the driver actually confirmed in Max Your Savings (MO, 15 Sep: "home page more
   obvious ... only shows rewards"). Everything else on the card is grey text; this is the one line that
   earns a background, since it is the only number here the driver told us themselves rather than one we
   priced for them. */
.ln-money.ln-conf{margin-top:12px;padding:8px 14px;border-radius:8px;background:rgba(199,255,60,.08);
  border:1px solid rgba(199,255,60,.35);color:var(--paper);font-weight:600}
.ln-money.ln-conf b{color:var(--volt);font-weight:800}

/* SEE HOW (17 Sep): one small link under each tool H1 to its clips on /how.html; 44px tap target */
/* on a paper panel (Fill up moved its links into Stack your savings, 2 Oct) the link takes the paper link color, 6:1; --volt reads 1.4:1 there */
.seehow{margin:0 0 10px;font-size:var(--t-sm)}.layers .seehow a{color:#155E75;text-decoration-color:#8A98A0}.seehow a{color:var(--volt);text-decoration:underline;text-decoration-color:#4C585C;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px}

/* QUESTIONS STRIP (18 Sep): the question pages had no link from the site; one strip of three text links before the footer on each tool page, 44px rows */
.qs{margin-top:24px;padding-top:14px;border-top:1px solid #202B30}.qs span{display:block;color:#93A0A6;font-weight:600;text-transform:uppercase;font-size:var(--t-xs);letter-spacing:.08em;margin-bottom:2px}.qs a{display:flex;align-items:center;min-height:44px;font-size:var(--t-sm);color:var(--volt);text-decoration:underline;text-decoration-color:#4C585C;text-underline-offset:3px}

/* the tap-to-fix line sits under the three prices, not above them (MO, 23 Sep) */
.ln-tip-under{margin:-22px 0 28px;text-align:center;font-size:var(--t-sm)}

/* the tap line leads the list now (MO, 23 Sep) */
.ln-tip.ln-tip-top{display:block;width:100%;margin:0 0 2px;white-space:normal;top:0;text-align:center;font-size:var(--t-sm);line-height:1.2}

/* THE PIN ON A PHONE (MO, 3 Oct: "remove pin pill on phone"). shared.js mounts it above the footer instead of
   in the header at 640px and under; this is that row. A full 44px tap target here, it is no longer a header pill. */
.pin-row{margin:18px 0 0;text-align:center}
.pin-row .pin-me{min-height:44px;padding:0 18px}

/* COMPACT INPUTS, ONE BLOCK FOR FILL UP, HYBRID AND CHARGE UP (MO, 5 Oct: "fill up more compact, do the same for the other").
   ZIP label sits beside its box, the car is one line, gaps are tighter. Phone and tablet only: from 1000px the pages already lay the inputs in one row.
   html prefix beats each page's own .hook rules. Also gives the big station name room so the button below no longer clips it. */
@media (max-width:999px){
html .hook h1{margin-bottom:6px}
html .hook .row{grid-template-columns:minmax(0,1fr);gap:0}
html .hook .row>div:first-child{display:flex;align-items:center;gap:10px}
html .hook .row>div:first-child>label{margin:0;flex:0 0 auto}
html .hook .row>div:first-child>input,html .hook .row>div:first-child>.zip-go-wrap{flex:1 1 auto;min-width:0}
html .hook .row3{margin-top:6px}
html .hook .vinfo.carline{margin:6px 0 0}
html .hook .vinfo.carline .lbl{display:none}
html .hook .miles{margin-top:6px;gap:8px}
html .hook .miles label{margin-bottom:2px}
html .hook .digits{padding-bottom:.16em}
/* ZIP BOX SHORT, GO BESIDE IT, ON ALL THREE PAGES (MO, 6 Oct: "fill up zip box is very long, hybrid and charge up zip have no go button"). The label, a 96px box and Go sit on one line on a phone and tablet, the same size as the Home ZIP box. */
html .hook .row>div:first-child>.zip-go-wrap{flex:0 0 auto}
html .hook .zip-go-wrap input{flex:0 0 auto;width:96px;min-width:0}
}
/* the ZIP row with its Go button, shared by Fill up, Hybrid and Charge up */
.hook .row>.zip-row{grid-column:1/-1}
.zip-go-wrap{display:flex;gap:6px;align-items:stretch;min-width:0}
.zip-go-wrap input{flex:1 1 auto;min-width:80px}
.zip-go{flex:0 0 auto;min-height:44px;padding:0 14px;border:0;border-radius:4px;background:var(--lamp);color:var(--asphalt);font:700 var(--t-md) Barlow,system-ui,sans-serif;cursor:pointer;white-space:nowrap}

/* THE HOME STACK PANEL FOLDS (MO, 6 Oct): one dark header row with the answer on the right, the shared chevron, no Done button */
.ln-sb-d>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 44px 6px 16px;background:var(--readout,#0A0F11);color:var(--paper,#EDE9E1);font:700 var(--t-lg) 'Barlow Condensed',Barlow,system-ui,sans-serif}
.ln-sb-d .ln-sb-a{font:700 var(--t-lg) 'Barlow Condensed',Barlow,system-ui,sans-serif;color:var(--lamp,#FFC24A)}
.ln-sb-d[open]>summary{border-bottom:0}

/* STACK YOUR SAVINGS BAR CENTERED (MO, 7 Oct): the title and the cents sit as one group on the bar's middle line; the chevron stays at the right edge. An empty number takes no room, so the title alone is centered too. Measured: group center = bar center at 390 and 1440. */
.ln-sb-d>summary{justify-content:center;padding-left:44px;gap:14px}
.ln-sb-d .ln-sb-a:empty{display:none}

/* THE TAP HINT SPLITS OVER THE TWO COLUMNS IT TALKS ABOUT (MO, 7 Oct): directions on the left above the stations, update on the right above the prices */
.ln-tip.ln-tip-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;max-width:620px;margin:4px auto 2px;text-align:left;white-space:normal;line-height:1.2}
.ln-tip.ln-tip-top>span{flex:0 1 auto;min-width:0}
.ln-tip.ln-tip-top>span:last-child{text-align:right}
@media (min-width:641px){#liveNear .ln-tip.ln-tip-top{max-width:460px}}