/* ═══ till.css — the payment sheet, on whatever screen it is opened from ══════
 *
 * 🔴 WHY THIS FILE EXISTS. Every sheet rule in this product is scoped to
 * `#view-deck`, in deck.css and again in astra.css. That was correct while the
 * only sheet was a question about a card. The till opens from settings too now,
 * where none of those selectors match, so the sheet would have rendered as an
 * unstyled block of markup at the bottom of the document.
 *
 * ⛔ SO THE RULES HERE ARE THE DECK'S, WITH THE VIEW SELECTOR REMOVED, and they
 * are deliberately restricted to `.sheet.till` rather than `.sheet`. Two
 * definitions of `.sheet` in one document is the last one winning, which is the
 * exact defect the three-documents merge was undone to fix.
 *
 * ⛔ IT LOADS AFTER astra.css so the till inherits the retheme rather than
 * base.css's older palette. Anything that reads a colour must load last.
 */

.scrim.till-scrim{position:fixed;inset:0;z-index:90;background:rgba(6,6,10,.28);
  animation:till-scrim-in 220ms ease both}
@keyframes till-scrim-in{from{opacity:0}to{opacity:1}}

.sheet.till{position:fixed;left:0;right:0;bottom:0;z-index:91;
  box-sizing:border-box;
  background:var(--s1);
  border-top:1px solid var(--edge2);border-radius:20px 20px 0 0;
  padding:22px 22px calc(28px + env(safe-area-inset-bottom));
  box-shadow:0 -26px 60px -30px rgba(0,0,0,.5);
  /* ⛔ CAPPED AND SCROLLABLE. The card form is tall, and a sheet taller than the
     window puts the pay button somewhere nobody can reach. */
  max-height:90dvh;overflow-y:auto;overscroll-behavior:contain;
  animation:till-up 320ms cubic-bezier(.16,.84,.28,1) both;
  touch-action:pan-y}
@keyframes till-up{from{transform:translateY(102%)}to{transform:translateY(0)}}
.sheet.till.dragging{animation:none;transition:none}
.sheet.till.springing{animation:none;transition:transform 220ms cubic-bezier(.2,.9,.3,1)}

/* ⛔ THE HANDLE IS THE HIT AREA, NOT THE HAIRLINE. The grip is 4px tall because
   that is what a grip looks like; it was also the whole target, which is why the
   sheet could not be dragged. This wrapper is what a thumb actually lands on.
   `touch-action:none` is scoped to it alone, so the sheet below still scrolls. */
.sheet.till .grip-hit{margin:-16px -22px 4px;padding:16px 22px 10px;
  touch-action:none;cursor:grab}
.sheet.till .grip-hit:active{cursor:grabbing}
.sheet.till .grip{width:38px;height:4px;border-radius:100px;background:var(--edge2);
  margin:0 auto}
.sheet.till .inner{max-width:360px;margin:0 auto;padding-bottom:8px}

.sheet.till .till-head h2{margin:0 0 4px;font-family:"Fraunces",Georgia,serif;
  font-weight:400;font-size:22px;line-height:1.2;letter-spacing:-.01em;color:var(--txt1)}
.sheet.till .till-head h2 em{font-style:normal;color:var(--lime-txt)}
.sheet.till .sheet-note{margin:0;font-size:13.5px;line-height:1.6;color:var(--dim1)}

/* ⛔ A FLOOR, NOT A HEIGHT. Stripe's iframe sizes itself and grows when a wallet
   appears; a fixed height would clip Apple Pay off the top of the form. */
.sheet.till #till-mount{min-height:320px;margin-top:16px}

.sheet.till #till-error:empty{display:none}
.sheet.till #till-error{color:var(--amber,#8E5A0C);font-size:13px;line-height:1.5;margin-top:10px}

/* ⛔ THE POLICIES, WHERE THE CARD GOES IN. Quiet enough not to read as a warning,
   present enough that nobody has to go looking for them. */
.sheet.till .till-legal{margin:14px 0 0;text-align:center;font-size:12px;line-height:1.6;
  color:var(--dim2)}
.sheet.till .till-legal a{color:var(--dim1);text-decoration:underline;text-underline-offset:2px}
.sheet.till .till-legal a:hover{color:var(--txt1)}

@media (prefers-reduced-motion:reduce){
  .sheet.till,.scrim.till-scrim{animation:none}
}