/* Pick Up the Tab (r3074 to r3076, Oct 31 2026). Loads on a page only when the card is shown (tipcard.active).
   Brand: design B "Highlighter". Yellow marks a price and nothing else; blue is the one action; everything else is paper and ink.
   Same rules as polish.css: no colour literal, no important flag, font sizes read --t1..--t6, no resource URLs, no font-face.
   Motion (one moment, MOTION-SPEC in the commit): the yellow marker swipes over the suggested price once when the card first
   scrolls into view; a tap slides the marker to the tapped price once. Transform and clip-path only. Nothing loops.
   Reduced motion: the marker is simply there. No script: the suggested price carries a still yellow bar. */
.tipw{margin:var(--sp6) 0;padding:var(--sp5) var(--sp4);background:var(--s1);border:2px solid var(--edge);border-radius:var(--r3);box-shadow:var(--card-shadow);max-width:1100px}
.tipw[hidden],.tipw[data-off]{display:none}
.tipw-h{margin:0 0 var(--sp2);font-family:var(--display);font-size:var(--t5);font-weight:800;letter-spacing:-.03em;line-height:1.02;text-wrap:balance}
.tipw-value{margin:0 0 var(--sp3);max-width:62ch;font-size:var(--t3);line-height:1.45;color:var(--ink)}
.tipw-value[hidden]{display:none}
.tipw-ask{margin:0 0 var(--sp2);font-family:var(--display);font-size:var(--t4);font-weight:700;letter-spacing:-.02em;line-height:1.2;text-wrap:balance}
.tipw-sub{margin:0 0 var(--sp4);max-width:46ch;font-size:var(--t2);color:var(--muted)}
.tipw-set{margin:0;padding:0;border:0;min-width:0}
.tipw-items{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp3)}
.tipw-tile{position:relative;display:grid;grid-row:span 7;grid-template-rows:subgrid;row-gap:var(--sp1);align-content:start;min-height:44px;padding:var(--sp3);
  background:var(--s2);border:2px solid var(--line-strong);border-radius:var(--r2);color:var(--ink);cursor:pointer}
/* every tile prints the same seven rows (picture, name, place, price, source, caption, credit), so prices line up across a band */
/* every word and picture sits above the marker, so a sliding marker never hides one */
.tipw-art,.tipw-photo,.tipw-name,.tipw-city,.tipw-src,.tipw-caption,.tipw-credit{position:relative;z-index:2}
.tipw-art,.tipw-photo{grid-row:1}.tipw-name{grid-row:2}.tipw-city{grid-row:3}.tipw-price,.tipw-note{grid-row:4}.tipw-src{grid-row:5}.tipw-caption{grid-row:6}.tipw-credit{grid-row:7}
.tipw-tile:hover{border-color:var(--edge)}
.tipw-tile:has(.tipw-in:checked){border-color:var(--edge);box-shadow:var(--card-shadow);background:var(--s1)}
.tipw-tile:has(.tipw-in:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.tipw-in{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.tipw-photo{display:block;width:100%;height:auto;aspect-ratio:4 / 3;margin:0 0 var(--sp1);object-fit:cover;border:2px solid var(--edge);border-radius:var(--r1)}
.tipw-caption,.tipw-credit{margin-top:var(--sp1);font-size:var(--t1);color:var(--quiet)}
.tipw-art{width:56px;height:56px;margin:0 0 var(--sp1);color:var(--ink);overflow:visible}
.tipw-name{font-family:var(--display);font-size:var(--t3);font-weight:700;line-height:1.2;letter-spacing:-.01em}
.tipw-tag{display:inline-block;margin-left:var(--sp1);font-family:var(--body);font-size:var(--t1);font-weight:500;color:var(--muted);letter-spacing:0}
.tipw-city{font-size:var(--t1);color:var(--muted)}
.tipw-price,.tipw-note{position:relative;z-index:2;justify-self:start;align-self:start;margin-top:var(--sp2);padding:0 var(--sp2);
  font-family:var(--display);font-size:var(--t4);font-weight:800;letter-spacing:-.03em;line-height:1.3;font-variant-numeric:tabular-nums;color:var(--ink)}
.tipw-note{font-size:var(--t3);font-weight:700;padding-left:0}
.tipw-src{margin-top:var(--sp1);font-size:var(--t1);color:var(--quiet)}
/* the marker: one yellow bar, a 1px box scaled to the price by tip.js (transform only) */
.tipw-mark{position:absolute;left:0;top:0;z-index:1;width:1px;height:1px;background:var(--price-bg);transform-origin:0 0;
  transform:translate(var(--mx,0),var(--my,0)) scale(var(--mw,1),var(--mh,1));opacity:0;pointer-events:none}
.tipw[data-m] .tipw-mark{opacity:1}
.tipw-tile.is-mark .tipw-price{color:var(--price-ink)}
/* no script: the suggested price and a picked one carry a still bar of their own */
.tipw:not(.tipw-js) .tipw-tile.is-sug .tipw-price,.tipw:not(.tipw-js) .tipw-tile:has(.tipw-in:checked) .tipw-price{background:var(--price-bg);color:var(--price-ink)}
.tipw-hint{margin:var(--sp3) 0 0;font-size:var(--t2);color:var(--muted)}
.tipw-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp3);margin:var(--sp4) 0 var(--sp2)}
.tipw .tipw-go{flex:1 1 240px;max-width:340px;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:var(--sp3) var(--sp5);text-align:center;text-decoration:none}
.tipw-skip{min-height:44px;padding:0 var(--sp3);background:none;border:0;border-radius:var(--r1);font:inherit;font-size:var(--t2);color:var(--link);text-decoration:underline;cursor:pointer}
.tipw-skip:focus-visible,.tipw-srcs summary:focus-visible,.tipw-srcs a:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.tipw-fine{margin:0 0 var(--sp2);font-size:var(--t1);color:var(--muted);max-width:62ch}
.tipw-srcs{font-size:var(--t1);color:var(--muted)}
.tipw-srcs summary{display:flex;align-items:center;min-height:44px;color:var(--link);cursor:pointer}
.tipw-srcs ul{margin:0 0 var(--sp2);padding-left:var(--sp5)}
.tipw-srcs a{color:var(--link)}
.tipw-thanks{max-width:62ch}
@keyframes tip-swipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:no-preference){
  .tipw-js .tipw-mark{transition:transform var(--d-enter) var(--e-land)}
  .tipw-js .tipw-mark.is-jump{transition:none}
  .tipw-js .tipw-mark.is-swipe{animation:tip-swipe var(--d-draw) var(--e-draw) backwards}
  .tipw-js .tipw-tile.is-mark .tipw-price{transition:color var(--d-exit) linear var(--d-exit)}
}
@media (prefers-reduced-motion:reduce){ .tipw-mark{transition:none;animation:none} }
.tipw-other:nth-child(even){grid-column:1 / -1}
@media (min-width:721px){
  .tipw{padding:var(--sp6) var(--sp6)}
  .tipw-items{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
  .tipw-other:nth-child(even){grid-column:auto}
}
/* a deal page under 1024px is one flex column with explicit order numbers (polish.css, item 2): the card joins the receipt's slot, after it, so it never sits above a price */
/* round 30 (J2): and after the folds (order 5 is the layout block with the full math), so a price is never pushed down by a tip ask */
@media (max-width:1023px){ .deal-b>.tipw{order:6} }
/* round 30 (J2): on a phone the card is at most one screen tall: two columns of tiles, a short photo, the photo's caption and credit and the
   source line stay in the markup (the gate counts them) and in "Where these prices come from" and on /credits.html, but not on the tile.
   tip.js seats the home card after "See every deal" on a phone. */
@media (max-width:720px){
  .tipw{margin:var(--sp4) 0;padding:var(--sp4) var(--sp3)}
  .tipw-h{font-size:var(--t4);margin-bottom:var(--sp1)}
  .tipw-ask{font-size:var(--t3);margin-bottom:var(--sp1)}
  .tipw-value{font-size:var(--t2);line-height:1.35;margin-bottom:var(--sp2)}
  .tipw-sub{margin-bottom:var(--sp2)}
  .tipw-items{gap:var(--sp2)}
  .tipw-tile{grid-row:span 4;row-gap:2px;padding:var(--sp2)}
  .tipw-caption,.tipw-credit,.tipw-src{display:none}
  .tipw-photo{height:64px;aspect-ratio:auto;margin:0}
  .tipw-art{width:40px;height:40px;margin:0}
  .tipw-name{font-size:var(--t2)}
  .tipw-price,.tipw-note{margin-top:2px;font-size:var(--t3)}
  .tipw-other{grid-row:span 1;display:flex;align-items:center;gap:var(--sp2)}
  .tipw-other .tipw-city{display:none}
  .tipw-other .tipw-note{margin:0 0 0 auto;padding-right:0}
  .tipw-hint{margin-top:var(--sp2)}
  .tipw-row{flex-wrap:nowrap;gap:var(--sp2);margin:var(--sp3) 0 0}
  .tipw .tipw-go{flex:1 1 0;min-width:0;padding:var(--sp3)}
  .tipw-skip{flex:none}
  .tipw-fine{margin-bottom:0}
}
/* round 30 (J2): on a desk the deal page card sits in the narrow right column and measured 1,520px tall (two screens). It takes the same compact tile there:
   a short photo, no caption, credit or source line on the tile (all three stay in the list). The home card at 1440 is 861px and keeps its full tile. */
@media (min-width:721px){
  .deal-b .tipw-tile{grid-row:span 4;row-gap:2px;padding:var(--sp2)}
  .deal-b .tipw-caption,.deal-b .tipw-credit,.deal-b .tipw-src{display:none}
  .deal-b .tipw-photo{height:64px;aspect-ratio:auto;margin:0}
  .deal-b .tipw-art{width:40px;height:40px;margin:0}
  .deal-b .tipw-other{grid-row:span 1;display:flex;align-items:center;gap:var(--sp2)}
  .deal-b .tipw-other .tipw-city{display:none}
  .deal-b .tipw-other .tipw-note{margin:0 0 0 auto;padding-right:0}
}