/* =========================================================================
   scoshow.com — the tip jar

   Loaded after site.css and inherits every token from it, so day/night comes
   free and this file never restates a colour. The page is deliberately quiet:
   one card, one column, no tape, no rotation, no collage. The homepage is
   allowed to be busy; the page where someone is typing a card number is not.

   Voice rules apply to the type as much as the copy — Shantell for Scott's
   own words, Karla for anything procedural.
   ========================================================================= */

/* Full site width, so the masthead is pixel-identical to the homepage's --
   it is the same markup from the same helper and must not be squeezed. Only
   the reading column is narrowed, and that happens on the card. */
.tip-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- the card ---------- */

.tip-main {
  padding-top: 26px;
  padding-bottom: 64px;
  flex: 1 0 auto;
}

/* Nobody should read a payment form at 1400px, and nobody should read one
   pinned to the left edge of a 1400px page either. Centred, so the card sits
   under the middle of the masthead rather than off to one side. */
.tip-main > .tip-card {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.tip-card {
  background: var(--card);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-card);
  padding: 34px 34px 30px;
}

/* Prose paragraphs only.
   Written as `> p` this had specificity 0,1,1 and quietly beat every
   single-class rule below it -- .tip-fine, .tip-back, .tip-sig, .tip-change
   are all direct <p> children of the card, so their margins were being
   declared and then thrown away, and .tip-fine kept a 46ch cap it had been
   told to drop. :not([class]) narrows this to the unclassed body copy it was
   always meant for, and lets the named ones own their own spacing. */
.tip-card > p:not([class]) {
  font-family: var(--f-body);
  color: var(--body);
  margin: 0 0 14px;
  max-width: 46ch;
}

h1.tip-h {
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 16px;
}

.tip-h__icon {
  display: inline-flex;
  vertical-align: -4px;
  margin-right: 9px;
  color: var(--mark-h);
}

/* ---------- step 1: the form ---------- */

/* Who actually takes the money, said before anyone types a digit rather than
   buried in fine print underneath the card fields. */
p.tip-badge {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 20px 0 0;
  padding: 13px 15px;
  border: 1px solid var(--rule);
  background: var(--well);
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.45;
  color: var(--body);
  max-width: none;
}
/* The word "stripe" is a link out, not emphasis. It keeps the bold it had as
   a <strong>, but takes the link colour -- a blue word is the signal that it
   can be clicked, which is the whole reason it is a link: nobody should have
   to already know who Stripe is before deciding to type a card number. */
p.tip-badge a {
  font-weight: 700;
  color: var(--link);
}
p.tip-badge a:hover { color: var(--link-hover); }
p.tip-badge .tip-badge__lock {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--join);
  margin-top: 1px;
}

.tip-form { margin-top: 26px; }

/* "or", between the presets and the free-text amount. A plain label now, not a
   radio: typing a number IS the choice, so there is nothing left to click. */
.tip-amount-or {
  font-family: var(--f-hand);
  font-size: 15px;
  color: var(--muted);
  padding: 0 2px;
  cursor: pointer;
}

.tip-amounts {
  border: 0;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.tip-amounts legend {
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  padding: 0;
  margin-bottom: 12px;
}

/* The radio itself is hidden, but never display:none — that would take it out
   of the tab order and off the accessibility tree. It stays, invisible and
   focusable, and the label's box shows the focus ring on its behalf. */
.tip-amount { position: relative; }
.tip-amount input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  left: 0; top: 0;
  margin: 0;
  cursor: pointer;
}
.tip-amount span {
  display: block;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 16px;
  padding: 10px 20px;
  border: 1.5px solid var(--rule);
  background: transparent;
  color: var(--ink);
  transition: border-color .12s, background-color .12s;
}
.tip-amount input:checked + span {
  border-color: var(--join);
  background: color-mix(in srgb, var(--join) 12%, transparent);
}
.tip-amount input:focus-visible + span {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.tip-amount:hover span { border-color: var(--join); }

.tip-other {
  width: 110px;
  border: 0;
  border-bottom: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--f-hand);
  font-size: 16px;
  padding: 8px 2px;
  border-radius: 0;
}
.tip-other::placeholder { color: var(--muted-2); opacity: 1; }

/* The minimum, said before anyone types rather than discovered by being
   refused. flex-basis 100% breaks it onto its own line under the amount row. */
p.tip-hint {
  flex: 0 0 100%;
  margin: 2px 0 0;
  font-family: var(--f-body);
  font-size: 13px;
  color: var(--muted);
}

.tip-field { margin-bottom: 20px; }
.tip-field label {
  display: block;
  font-family: var(--f-hand);
  font-size: 15px;
  color: var(--soft);
  margin-bottom: 6px;
}
.tip-field input {
  width: 100%;
  max-width: 420px;
  border: 0;
  border-bottom: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  padding: 7px 2px;
  border-radius: 0;
}
.tip-field input::placeholder { color: var(--muted-2); opacity: 1; }

:root[data-skin="night"] .tip-other,
:root[data-skin="night"] .tip-field input { border-bottom-color: var(--muted); }
@media (prefers-color-scheme: dark) {
  :root:not([data-skin="day"]) .tip-other,
  :root:not([data-skin="day"]) .tip-field input { border-bottom-color: var(--muted); }
}

/* ---------- the button ---------- */

.tip-btn {
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 16px;
  background: var(--join);
  color: var(--join-ink);
  padding: 12px 28px;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  margin-top: 6px;
}
.tip-btn:hover:not(:disabled) { filter: brightness(1.07); }
.tip-btn:disabled { opacity: .6; cursor: default; }

/* ---------- step 2: paying ---------- */

.tip-summary {
  margin: 0 0 4px;
  padding: 16px 0 4px;
  border-top: 1px solid var(--rule);
}
.tip-summary > div {
  display: flex;
  gap: 12px;
  padding: 4px 0;
}
.tip-summary dt {
  font-family: var(--f-hand);
  color: var(--muted);
  flex: 0 0 68px;
  font-size: 15px;
}
.tip-summary dd {
  margin: 0;
  font-family: var(--f-body);
  color: var(--ink);
  /* A stranger's text. It is already scrubbed and capped server-side; this
     just stops a single unbroken 40-character word blowing out the card. */
  overflow-wrap: anywhere;
}

p.tip-change,
p.tip-back {
  font-family: var(--f-hand);
  font-size: 15px;
  color: var(--body);
  margin: 10px 0 0;
}

/* "back to the site" is a way OUT, and it sat tight under the submit button as
   though it were part of the same decision. It needs a gap that says otherwise
   -- but a SMALLER one than the 26px rhythm above the button, or the exit reads
   as heavier than the action it follows. .tip-change keeps the close spacing;
   it belongs to the summary directly above it. */
p.tip-back { margin-top: 20px; }

#tip-express:not([hidden]) { margin: 22px 0 0; }
/* 20px here plus the button's own 6px top margin puts 26px above "send it",
   the same clearance step one gives "next". Without it the button sat 14px
   under the card fields and 20px above the note below, so the quiet footnote
   had more room than the thing that takes the money. */
#payment-element { margin: 24px 0 20px; }

/* "or pay by card", ruled through. Hidden until Stripe confirms the visitor
   actually has a wallet to tap, so it can never label an empty row. */
p.tip-or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0 0;
  font-family: var(--f-hand);
  font-size: 14px;
  color: var(--muted);
}
/* An author display: value outranks the UA stylesheet's [hidden]{display:none},
   so a bare `hidden` attribute does NOT hide a flex container. Without this the
   divider announced "or pay by card" above an empty wallet row on every browser
   that has no wallet -- which is most desktops. */
p.tip-or[hidden] { display: none; }

p.tip-or::before,
p.tip-or::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--rule);
}

p.tip-err {
  font-family: var(--f-hand);
  font-size: 15px;
  color: var(--live);
  margin: 12px 0 0;
  max-width: 46ch;
}

/* The reassurance under the pay button. Clear of the button so it does not
   read as a caption on it, but matched to .tip-back so the two trailing notes
   sit at the same distance on both steps. No width cap -- at 46ch a sentence
   this short broke onto a second line for no reason, which looked like a
   mistake rather than a measure. */
p.tip-fine {
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--muted);
  margin: 20px 0 0;
}

/* Cards that only say something -- the thank-you and the closed sign -- give
   the heading room to land before the sentence under it. The step pages do
   not: there the heading introduces a form and wants to stay close to it. */
.tip-card--said h1.tip-h { margin-bottom: 26px; }

p.tip-sig {
  font-family: var(--f-hand);
  font-weight: 700;
  color: var(--ink);
  margin: 22px 0 0;
}

/* ---------- narrow ---------- */

@media (max-width: 640px) {
  .tip-page { --gutter: 22px; }
  .tip-card { padding: 26px 22px 24px; }
  h1.tip-h { font-size: 25px; }
  .tip-field input { max-width: 100%; }
  .tip-btn { width: 100%; }
}