/* The driver's money (founder 2026-10-09): "You walk away with about $X" plus a small (i), and the (i) sheet.
   Home: site-v2/css/walk.css (served at /css/walk.css), linked by the Market page and app/index.html.
   Uses the shared tokens; the green falls back between the site's (--gbg) and the app's (--good-bg) names. */

/* ---------- the line ---------- */
.wa{min-width:0}
.wa-l{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;row-gap:0;line-height:1.2}
.wa-lead{font:500 15px/1.3 'Instrument Sans',sans-serif;color:var(--sub);text-wrap:balance}
.wa-n{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.wa-amt{font:600 26px/1.1 'Clash Grotesk','Instrument Sans',sans-serif;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
/* the (i): a 28px circle you can see, a 44px target you can hit. It sits above a card's stretched link (z-index). */
.wa-i{position:relative;z-index:2;flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border-radius:50%;
  border:1.5px solid var(--ink);background:var(--card);color:var(--ink);font:700 italic 14px/1 Georgia,'Times New Roman',serif;cursor:pointer}
.wa-i::before{content:"";position:absolute;inset:-8px}
.wa-i:hover{background:var(--wait)}
.wa-i:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

/* card and bar: the words on top, the amount under them (beside the button) */
.wa-card .wa-l,.wa-bar .wa-l{flex-direction:column;align-items:flex-start}
.wa-card .wa-lead{font-size:14px}
.wa-bar .wa-lead{font-size:13.5px}
/* one line: step 1 recap, Review row, Next trip card, Inbox offer card, receipt, laptop side card */
.wa-line .wa-amt{font-size:22px}
/* the money box: offer and room. Light green, one line that wraps before the amount. */
.wa-box{margin-top:6px;background:var(--good-bg,var(--gbg,#E6F6EE));border-radius:var(--r-md,10px);padding:12px 14px}
.wa-box .wa-lead{font:600 18px/1.3 'Clash Grotesk','Instrument Sans',sans-serif;color:var(--ink)}
.wa-box .wa-amt{font-size:30px}
.wa-box .wa-i,.wa-line .wa-i{background:transparent}
.wa-line.wa-tint{background:var(--good-bg,var(--gbg,#E6F6EE));border-radius:var(--r-md,10px);padding:8px 12px}
/* the (i) whose sheet is open: filled (after the transparent rule above, so it wins in every size) */
.wa .wa-i[aria-expanded=true]{background:var(--ink);color:var(--bg)}

/* ---------- the sheet: title, route, the walk-away BIG in light green at the top, then the plain sentences, Got it (founder 2026-10-10:
   "It should say to driver what they walk away with first!!! Then the explanation") ---------- */
/* app: a native <dialog class="was"> (like the legal sheet). Market: market.js's .sheet-back > .sheet.was. Same inside. */
dialog.was{position:fixed;left:0;right:0;bottom:0;top:auto;margin:0;width:100%;max-width:none;max-height:88dvh;border:0;
  border-radius:18px 18px 0 0;background:var(--card);color:var(--ink);box-shadow:0 -10px 30px rgba(0,0,0,.18);overflow:auto;
  padding:8px 18px calc(18px + env(safe-area-inset-bottom))}
dialog.was::backdrop{background:rgba(20,16,12,.45)}
dialog.was[open]{animation:waup .2s ease-out}
@keyframes waup{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){dialog.was[open]{animation:none}}
.sheet.was{border-radius:18px 18px 0 0;padding:8px 18px calc(18px + env(safe-area-inset-bottom))}
@media(min-width:700px){
  dialog.was{top:0;bottom:0;margin:auto;width:min(440px,92vw);height:fit-content;max-height:86vh;border-radius:16px;padding:12px 22px 22px}
  .sheet.was{max-width:440px;border-radius:16px;padding:12px 22px 22px}
}
.was::before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 6px}
@media(min-width:700px){.was::before{display:none}}
.was-head{display:flex;align-items:center;gap:8px}
.was-head h2{flex:1;margin:0;font:600 22px/1.2 'Clash Grotesk','Instrument Sans',sans-serif;min-width:0}
.was-head h2:focus{outline:0}
.was-x{flex:none;width:44px;height:44px;margin-right:-10px;border:0;background:none;border-radius:10px;font-size:28px;line-height:1;color:var(--ink);cursor:pointer}
.was-x:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
.was-route{margin:0 0 14px;font-size:14px;color:var(--sub)}
.was-pre{margin:0 0 14px;font-size:15px;line-height:1.45;color:var(--sub)}
.was-p{margin:0 0 10px;font-size:17px;line-height:1.45}
.was-p:last-of-type{margin-bottom:16px}
.was b{font-weight:700}
/* the walk-away, first and big: the same words and amount as the line, no (i) (this IS the (i)'s answer) */
.was-top{margin:0 0 14px;padding:12px 14px 13px;border-radius:var(--r-md,10px);background:var(--good-bg,var(--gbg,#E6F6EE));display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:0}
.was-tl{font:600 19px/1.3 'Clash Grotesk','Instrument Sans',sans-serif;color:var(--ink)}
.was .was-amt{font:600 34px/1.1 'Clash Grotesk','Instrument Sans',sans-serif;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.was-ok{width:100%}

/* ---------- print (the receipt): no button to tap on paper, so the sentences print under the line ---------- */
.wa-print{display:none}
@media print{.wa-i{display:none}.wa-print{display:block;margin-top:6px;font-size:13px;line-height:1.45}}

/* ---------- placements (the containers belong to their screens; only the money inside is this file's) ---------- */
/* driver Routes, the Next trip card: under Pickup and Drop-off, above the buttons */
.rh-wa{margin-top:14px}
/* route page (route-apply's .rp-buy bar on phones, .rp-side card on laptops): the line takes the room left of Apply. The body has no
   money row: phones show it once, in the bar; laptops once, in the side card (Turo shows the price once). */
.rp-buy .wa{flex:1;min-width:0}
.rp-buy .btn{min-width:128px;padding:0 16px}
.rp-side .wa-line .wa-l{column-gap:8px}
.rp-side .wa-line .wa-lead{font:600 17px/1.3 'Clash Grotesk','Instrument Sans',sans-serif;color:var(--ink)}
.rp-side .wa-line .wa-amt{font-size:28px}
/* Review and send: the walk-away box opens the page, right under the title, before the rows (walk-away first, founder 2026-10-10) */
.rv-wa{margin:0 0 12px}
.rv-wa .wa-box{margin-top:0}
/* the Inbox offer card */
.tcard .wa{margin:8px 0 2px}