/* STACKIT on the web.
 *
 * One stylesheet for every page here, because the moment there were two pages
 * the colours would have been written twice — and a brand change would then be
 * a hunt rather than an edit. Taken from the app's own palette in
 * lib/core/theme.dart and named by job, not by colour. */

:root {
  --ground: #0A0405;
  --ground-mid: #150708;
  --ground-lit: #2B0B0D;
  --text: #FBF3F2;
  --dim: #C09B98;
  --accent: #FF2E37;
  --accent-warm: #FF5C52;
  --accent-deep: #C40F19;
  --on-accent: #FFFFFF;
  --hairline: rgba(255, 46, 55, 0.35);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--ground);
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* `safe center` centres while the content fits and packs to the top the
   * moment it does not. Plain `center` keeps centring past that point, which
   * splits the overflow above and below — so at 200% text on a 320px screen
   * the buttons went under the fold *and* the icon went off the top, and the
   * part above the start edge cannot be scrolled back to at all. */
  justify-content: safe center;
  min-height: 100svh;
  /* Spacing in px, never rem.
   *
   * Every gap and margin on this page used to be written in rem, which scales
   * with the reader's own text size — so at 200% type the padding doubled
   * along with the words and threw away about 200px before a single button was
   * drawn. On a 320px screen that pushed all three buttons off the bottom: the
   * page still scrolled, but the first thing a visitor saw was a huge name and
   * no way to act on it.
   *
   * Type scales. Space does not. */
  padding: 40px 16px calc(40px + env(safe-area-inset-bottom));
  color: var(--text);
  text-align: center;
  font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* The light comes in from the top, the way it does in the app. */
  background:
    radial-gradient(120% 70% at 50% 0%, var(--ground-lit) 0%, var(--ground-mid) 45%, var(--ground) 100%);
}

img.mark {
  width: 104px;
  height: 104px;
  border-radius: 24px;
  border: 1px solid var(--hairline);
}

h1 {
  margin: 20px 0 0;
  /* The floor is in vw rather than rem for the same reason the padding is in
   * px: a 16-character callsign set at 2.25rem is 72px once the reader's text
   * is at 200%, which is three lines of shouting on a 320px screen. In vw it
   * stays proportionate to the screen it is actually on, and the max in rem
   * still lets it grow for somebody who has asked for bigger text. */
  font-size: clamp(1.75rem, 11vw, 3.25rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.1;
  /* A callsign is up to 16 characters and may be one unbroken word, which on a
   * narrow phone is the one thing that can push a page sideways. */
  overflow-wrap: anywhere;
  max-width: 100%;
}

p.line,
p.who {
  margin: 8px 0 0;
  color: var(--dim);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 380px;
  margin-top: 28px;
}

a.get {
  display: block;
  /* Vertical padding in px so the button keeps its shape as the label grows;
   * the label itself still scales, and the box grows with it because the
   * height is the content's, not a fixed number. */
  padding: 15px 18px;
  border-radius: 999px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  background: linear-gradient(180deg, var(--accent-warm), var(--accent-deep));
  color: var(--on-accent);
}

/* The store the visitor is not on stays available but stops shouting. */
a.get.secondary {
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--text);
}

a.get:active { transform: translateY(1px); }

footer {
  margin-top: 32px;
  color: var(--dim);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}

@media (prefers-reduced-motion: no-preference) {
  a.get { transition: transform 80ms ease; }
}

/* A short screen spends its height on the thing the visitor came to press, not
 * on the logo. This is what carries the worst real case — a 16-character
 * callsign on a 320x568 phone at 200% text, where the name alone takes three
 * lines and the primary button was ending one pixel under the fold. */
@media (max-height: 640px) {
  body {
    padding-top: 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }
  img.mark { width: 64px; height: 64px; border-radius: 15px; }
  h1 { margin-top: 12px; }
  .actions { margin-top: 18px; }
  footer { margin-top: 20px; }
}