/* ==========================================================================
   DONATE — one screen: the case on the left, a real payment panel on the right.
   Loaded only by donate/index.html, on top of style.css (tokens, fonts, nav).

   TYPE: every size is clamp(floor, vh-term, cap). The floor keeps it legible,
   the vh term adapts to the window, the cap stops it ballooning on a big
   display. Nothing is sized in a way that can render at 9px — when a window is
   genuinely too short for the floors, the media query at the bottom hands the
   page back to normal scrolling. A scrollbar is a better outcome than type
   nobody can read.

/* PANEL: the right column is deliberately built like a checkout — a headed
   card, the amount as the biggest thing on it, a total line above the button,
   and the accepted methods spelled out underneath. Those are the conventions
   people have been trained to trust with a card number.
   ========================================================================== */

html[data-page="pay"]{
  --t-micro: clamp(12.5px, 1.7vh, 14.5px);
  --t-label: clamp(13.5px, 1.85vh, 15.5px);
  --t-body:  clamp(16px, 2.2vh, 18.5px);
  --t-input: clamp(17px, 2.4vh, 19.5px);
  --t-dek:   clamp(18px, 2.6vh, 23px);
  --pay-gap: clamp(10px, 1.75vh, 18px);
  --pay-pad-x: clamp(18px, 1.7vw, 26px);
}

html[data-page="pay"],
html[data-page="pay"] body{height:100%}
html[data-page="pay"] body{overscroll-behavior:none}
/* scanlines read as banding on a single static screen */
html[data-page="pay"] .fx-scan{display:none}

.pay{
  min-height:100dvh;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(390px,470px);
  gap:clamp(28px,3.6vw,80px);
  align-items:center;
  padding:clamp(78px,11vh,104px) var(--pad) clamp(20px,3vh,36px);
  max-width:1560px;margin:0 auto;
}
.pay__col{min-width:0}

/* ══════════════ LEFT: the case ══════════════ */
.pay__kicker{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.26em;
  text-transform:uppercase;color:var(--accent)
}
.pay__h1{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.1rem,min(5vw,7.6vh),4.4rem);
  line-height:.92;letter-spacing:-.02em;
  margin:clamp(12px,1.9vh,20px) 0 clamp(12px,1.9vh,20px);
}
.pay__h1 em{
  font-family:var(--serif);font-style:italic;text-transform:none;
  letter-spacing:-.01em;color:var(--accent)
}
.pay__dek{
  font-family:var(--serif);font-size:var(--t-dek);line-height:1.38;
  color:var(--fg);opacity:.9;max-width:40ch
}

.pay__why{
  display:grid;gap:clamp(11px,1.8vh,19px);
  margin-top:clamp(18px,2.8vh,30px);padding-top:clamp(16px,2.6vh,28px);
  border-top:1px solid var(--line);
}
.pay__why li{display:grid;grid-template-columns:auto 1fr;gap:clamp(12px,1.1vw,18px)}
.pay__why b{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.1em;
  color:var(--accent);font-weight:500;padding-top:.15em
}
.pay__why h3{
  font-size:var(--t-body);font-weight:600;line-height:1.35;letter-spacing:-.005em
}
.pay__why p{
  font-size:var(--t-body);line-height:1.45;color:var(--muted);margin-top:3px;
  /* two lines, so copy length can never be what breaks a fixed screen */
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden
}
.pay__promises{
  display:flex;flex-wrap:wrap;gap:clamp(7px,1.1vh,11px) clamp(14px,1.6vw,26px);
  margin-top:clamp(16px,2.6vh,28px);
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)
}
.pay__promises i{color:var(--accent);font-style:normal;margin-right:6px}

/* ══════════════ RIGHT: the payment panel ══════════════ */
.pay__card{
  background:var(--card);
  border:1px solid var(--nav-line);
  border-radius:22px;
  overflow:hidden;                     /* clip the header wash to the radius */
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9), inset 0 1px 0 var(--nav-sheen);
}

/* ── header ── */
.pay__head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:clamp(13px,2vh,19px) var(--pay-pad-x);
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--accent) 8%,var(--card));
}
.pay__head h2{
  font-family:var(--display);font-size:clamp(1.4rem,3.2vh,1.9rem);
  text-transform:uppercase;letter-spacing:-.01em;line-height:1;color:#fff
}
.pay__trust{
  display:flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.1em;
  text-transform:uppercase;color:#fff;font-weight:600;white-space:nowrap
}
.pay__trust svg{flex:0 0 auto;color:var(--accent)}

/* ── the amount: the biggest thing on the panel ── */
.pay__amount{
  padding:clamp(15px,2.3vh,24px) var(--pay-pad-x);
  border-bottom:1px solid var(--line);
  background:var(--bg-2);
}
.pay__amount > span{
  display:block;
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.18em;
  text-transform:uppercase;color:#fff;font-weight:600;margin-bottom:clamp(6px,1vh,10px)
}
.pay__amount-row{display:flex;align-items:center;gap:10px}
.pay__cur{
  font-family:var(--display);font-size:clamp(1.5rem,3.4vh,2.1rem);
  color:var(--muted);line-height:1
}
.pay__amount input{
  flex:1;min-width:0;background:none;border:0;padding:0;
  font-family:var(--display);font-size:clamp(2rem,4.7vh,3.1rem);
  line-height:1.05;letter-spacing:-.01em;color:var(--fg);
  font-variant-numeric:tabular-nums;
}
.pay__amount input::placeholder{color:var(--muted);opacity:.35}
.pay__amount input:focus{outline:none}
.pay__amount input::-webkit-outer-spin-button,
.pay__amount input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pay__amount input[type=number]{-moz-appearance:textfield;appearance:textfield}
/* focus lands on the block, not a 1px ring round a borderless input */
.pay__amount:focus-within{background:var(--bg)}
.pay__amount.is-bad{box-shadow:inset 3px 0 0 var(--hot)}

.pay__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(10px,1.6vh,15px)}
.pay__chip{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.04em;font-weight:600;
  padding:clamp(8px,1.3vh,11px) clamp(13px,1.2vw,17px);border-radius:100px;
  border:1px solid var(--line);color:#fff;background:var(--card);
  transition:border-color .25s,color .25s,background .25s,transform .25s
}
.pay__chip:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.pay__chip.is-on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* ── who's giving ── */
.pay__body{padding:clamp(15px,2.3vh,24px) var(--pay-pad-x);display:grid;gap:var(--pay-gap)}
.pay__field{display:grid;gap:clamp(5px,.8vh,8px)}
.pay__field > label{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.18em;
  text-transform:uppercase;color:#fff;font-weight:600
}
.pay__field input{
  width:100%;background:var(--bg-2);border:1px solid var(--line);border-radius:13px;
  padding:clamp(11px,1.75vh,15px) 15px;
  font-family:var(--sans);font-size:var(--t-input);
  transition:border-color .25s,background .25s
}
.pay__field input::placeholder{color:var(--muted);opacity:.6}
.pay__field input:focus{outline:none;border-color:var(--accent);background:var(--bg)}
.pay__field input[aria-invalid="true"]{border-color:var(--hot)}
html[data-mode="paper"] .pay__field input[aria-invalid="true"]{border-color:var(--accent)}

/* phone gets a country affix — it reads as a payment field, not a text box */
.pay__tel{
  display:flex;align-items:stretch;
  background:var(--bg-2);border:1px solid var(--line);border-radius:13px;
  overflow:hidden;transition:border-color .25s,background .25s
}
.pay__tel:focus-within{border-color:var(--accent);background:var(--bg)}
.pay__tel[data-invalid="true"]{border-color:var(--hot)}
html[data-mode="paper"] .pay__tel[data-invalid="true"]{border-color:var(--accent)}
.pay__tel > span{
  display:grid;place-items:center;padding:0 13px;
  border-right:1px solid var(--line);
  font-family:var(--mono);font-size:var(--t-input);color:var(--muted)
}
.pay__tel input{
  flex:1;min-width:0;background:none;border:0;
  padding:clamp(11px,1.75vh,15px) 15px;
  font-family:var(--mono);font-size:var(--t-input);letter-spacing:.04em
}
.pay__tel input:focus{outline:none}

.pay__err{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.06em;
  text-transform:uppercase;color:var(--hot);min-height:1.15em
}
html[data-mode="paper"] .pay__err{color:var(--accent)}

/* ── total + pay ── */
.pay__sum{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding-top:var(--pay-gap);border-top:1px solid var(--line)
}
.pay__sum-lab{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.14em;
  text-transform:uppercase;color:#fff;font-weight:600
}
.pay__sum-val{
  font-family:var(--display);font-size:clamp(1.4rem,3.2vh,2rem);line-height:1;
  color:var(--accent);font-variant-numeric:tabular-nums
}
.pay__sum-val.is-empty{color:var(--muted);font-family:var(--mono);font-size:var(--t-label)}

.pay__btn{
  display:flex;align-items:center;justify-content:center;gap:12px;width:100%;
  background:var(--accent);color:var(--accent-ink);
  border-radius:100px;padding:clamp(13px,2.05vh,18px) 22px;
  font-family:var(--mono);font-weight:500;
  font-size:clamp(13.5px,1.85vh,15.5px);letter-spacing:.12em;text-transform:uppercase;
  transition:transform .3s var(--ease),box-shadow .3s,opacity .25s;
}
.pay__btn:hover:not(:disabled){
  transform:translateY(-2px);
  box-shadow:0 16px 34px -14px color-mix(in srgb,var(--accent) 70%,transparent)
}
.pay__btn:disabled{opacity:.55;cursor:not-allowed}
.pay__btn i{font-style:normal;transition:transform .3s var(--ease)}
.pay__btn:hover:not(:disabled) i{transform:translateX(4px)}

/* ── footer: what's accepted, and who handles it ── */
.pay__foot{
  padding:clamp(11px,1.8vh,17px) var(--pay-pad-x) clamp(13px,2.1vh,20px);
  border-top:1px solid var(--line);
  display:grid;gap:clamp(6px,1vh,10px);justify-items:center;text-align:center
}
.pay__methods{
  display:flex;flex-wrap:wrap;justify-content:center;gap:5px 12px;
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.12em;
  text-transform:uppercase;color:#fff;font-weight:500
}
.pay__methods span{white-space:nowrap}
.pay__methods span + span::before{content:'·';margin-right:12px;color:var(--muted);opacity:.6}
/* no max-width: this is one short line, and wrapping it to three was what
   pushed the card past the fold on a 700px-tall window */
.pay__fine{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.06em;
  color:#fff;font-weight:500;line-height:1.6
}
.pay__fine a{color:var(--accent)}

.pay__status{
  font-size:var(--t-body);line-height:1.45;color:var(--fg);
  padding:0 var(--pay-pad-x) clamp(13px,2vh,20px)
}
.pay__status.is-bad{color:var(--hot)}
html[data-mode="paper"] .pay__status.is-bad{color:var(--accent)}

/* ── the thank-you, in place of the fields ── */
.pay__done{padding:clamp(20px,3.2vh,34px) var(--pay-pad-x);display:grid;gap:clamp(10px,1.7vh,16px);justify-items:start}
.pay__done-h{
  font-family:var(--display);font-size:clamp(1.8rem,4.4vh,2.8rem);
  text-transform:uppercase;line-height:1
}
.pay__done-h em{font-family:var(--serif);font-style:italic;text-transform:none;color:var(--accent)}
.pay__done p{font-size:var(--t-body);line-height:1.5;color:var(--muted)}
.pay__done-ref{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.08em;color:var(--fg);
  background:var(--bg-2);border:1px solid var(--line);border-radius:10px;
  padding:11px 14px;word-break:break-all;width:100%
}

/* ══════════════ locked to one screen, but only where that's sane ══════════════
   Wide enough for two columns AND tall enough for the type floors: lock it.
   Otherwise stack, scroll, and put the form first — the reason for the visit.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:981px) and (min-height:660px){
  html[data-page="pay"],
  html[data-page="pay"] body{overflow:hidden}
  .pay{height:100dvh;min-height:0}

  /* Safety valve. The panel fits on its own, but a long status line — "your
     payment went through but couldn't be confirmed, email…" — can push it past
     a short screen, and clipping a message like that is unacceptable. So the
     CARD scrolls in that case, not the page: still one screen, nothing lost.
     In normal use this never engages. */
  .pay__col--form{max-height:100%;display:flex}
  .pay__card{max-height:100%;overflow-y:auto;overscroll-behavior:contain;flex:1}
}

@media (max-width:980px), (max-height:659px){
  .pay{
    grid-template-columns:1fr;align-items:start;
    gap:clamp(30px,5vh,52px);
    padding:clamp(96px,14vh,124px) var(--pad) clamp(44px,8vh,76px);
  }
  .pay__col--form{order:-1}
  .pay__h1{font-size:clamp(2.3rem,10vw,3.8rem)}
  .pay__why p{-webkit-line-clamp:3}
}

@media (max-width:520px){
  .pay__card{border-radius:18px}
  .pay__methods{font-size:10.5px;letter-spacing:.08em}
}