/* Brad Hates Running: the website.
   The app's four palettes (app/src/main/kotlin/com/bradhatesrunning/ui/theme/Color.kt), picked by
   prefers-color-scheme for light/dark and by [data-tone] for grumpy/positive. System fonts only:
   the app uses the platform sans-serif too, and a web font would be a request nobody needs. */

:root {
  color-scheme: light dark;

  /* Grumpy light: chalk paper, asphalt ink, ember accent. */
  --bg: #F4F1EA;          /* Paper */
  --surface: #E9E4D9;     /* Paper2 */
  --surface-2: #DCD6C7;   /* Paper3 */
  --text: #1B1D22;        /* Ink */
  --text-dim: #585650;    /* InkDim */
  --accent: #FF6B35;      /* Ember: fill */
  --accent-ink: #A34700;  /* EmberInk: write */
  --on-accent: #1B1D22;
  --info: #0E6E92;        /* SweatInk */
  --rule: #7C7970;
  --shot-edge: rgba(27, 29, 34, 0.14);

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", "Liberation Mono", monospace;
  --measure: 38rem;
  /* The mono label (see .label): full size for headings, nav and form labels, small inside cards,
     tables, captions and the badge. */
  --label-size: 0.75rem;
  --label-size-sm: 0.72rem;
  --label-track: 0.14em;
  --label-track-sm: 0.1em;
  --gutter: 1rem;
  --radius: 1.25rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Grumpy dark: asphalt and ember. */
    --bg: #0F1115;
    --surface: #181B22;
    --surface-2: #232833;
    --text: #F4F1EA;
    --text-dim: #A8A69E;
    --accent: #FF6B35;
    --accent-ink: #FF6B35;
    --on-accent: #0F1115;
    --info: #5BC0EB;
    --rule: #3A3F4B;
    --shot-edge: rgba(244, 241, 234, 0.16);
  }
}

/* Positive light: pale mint cream, deep teal ink, mint accent. */
:root[data-tone="positive"] {
  --bg: #F1F7F3;
  --surface: #E2EDE6;
  --surface-2: #D2E3D9;
  --text: #12322B;
  --text-dim: #4C645C;
  --accent: #4FD1A5;
  --accent-ink: #0B7355;
  --on-accent: #12322B;
  --info: #8A6508;
  --rule: #6E7F77;
  --shot-edge: rgba(18, 50, 43, 0.14);
}

@media (prefers-color-scheme: dark) {
  /* Positive dark: teal-navy and mint. */
  :root[data-tone="positive"] {
    --bg: #0E1A1F;
    --surface: #16262C;
    --surface-2: #1F333A;
    --text: #F6F1E7;
    --text-dim: #B4B0A4;
    --accent: #4FD1A5;
    --accent-ink: #4FD1A5;
    --on-accent: #0E1A1F;
    --info: #F5C451;
    --rule: #34505A;
    --shot-edge: rgba(246, 241, 231, 0.16);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.6 var(--sans);
  transition: background-color 0.3s ease, color 0.3s ease;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent-ink); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--accent-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -3rem;
  padding: 0.5rem 1rem;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  border-radius: 0.5rem;
  z-index: 10;
}
.skip:focus { top: 0.75rem; }

.wrap {
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* The mono, upper-case, letter-spaced label the app uses for every heading (labelSmall). The small
   ones elsewhere use the -sm tokens with their own line-heights. */
.label, .site-nav a, .alpha-form label {
  font: 500 var(--label-size)/1.4 var(--mono);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--text-dim);
}
.label, .alpha-form label { display: block; margin: 0 0 0.5rem; }

/* ── Header ─────────────────────────────────────────────────────────────────────────────────── */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text);
  text-decoration: none;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.brand img { width: 2rem; height: 2rem; border-radius: 0.5rem; }
.site-nav ul { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { line-height: 1; text-decoration: none; padding: 0.5rem 0; }
.site-nav a:hover { color: var(--accent-ink); }
@media (max-width: 30rem) { .site-nav .optional { display: none; } }

/* ── Hero ───────────────────────────────────────────────────────────────────────────────────── */
.hero {
  display: grid;
  gap: 2.5rem;
  padding-top: 2rem;
  padding-bottom: 3rem;
  align-items: center;
}
@media (min-width: 52rem) {
  .hero { grid-template-columns: 1.1fr 1fr; padding-top: 3rem; padding-bottom: 5rem; }
}
.wordmark-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; max-width: 30rem; }
.wordmark {
  font: 900 clamp(3.5rem, 15vw, 6rem)/0.98 var(--sans);
  letter-spacing: -0.035em;
  margin: 0;
}
.wordmark .who { display: block; font: 500 0.8rem/1.4 var(--mono); letter-spacing: var(--label-track); color: var(--text-dim); margin-bottom: 0.75rem; }
.tone-face {
  flex: none;
  width: 4.5rem;
  height: 4.5rem;
  margin-top: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--accent-ink);
  cursor: pointer;
}
.tone-face svg { width: 100%; height: 100%; }
.tone-face:hover { background: var(--surface); }
.tone-face[hidden] { display: none; }
.lede { font-size: 1.25rem; line-height: 1.5; max-width: 30rem; margin: 1.25rem 0 0.75rem; }
.sub { color: var(--text-dim); max-width: 30rem; margin: 0 0 1.75rem; }
.tone-hint { font: 500 var(--label-size)/1.4 var(--mono); letter-spacing: 0.06em; color: var(--text-dim); margin: 1rem 0 0; }

.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0 1.75rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font: 700 0.9rem/1 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.button:hover { filter: brightness(1.06); }
.button.quiet { background: transparent; color: var(--text); box-shadow: inset 0 0 0 2px var(--rule); }

/* Phones. The screenshots already carry the status bar; the frame is only rounded corners. */
.shots { display: flex; gap: 1rem; justify-content: center; align-items: flex-start; }
.shot {
  margin: 0;
  flex: 0 1 15rem;
  min-width: 0;
}
.shot img, .shot picture {
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--shot-edge), 0 1.25rem 2.5rem -1.5rem rgba(0, 0, 0, 0.45);
  background: var(--surface);
}
.shot figcaption { font: 500 var(--label-size-sm)/1.4 var(--mono); letter-spacing: 0.08em; color: var(--text-dim); margin-top: 0.6rem; text-align: center; }
/* The run shot is staggered down. It is the last figure in both tones; :nth-child(2) used to pick
   the positive Home shot, which is hidden in grumpy, so the stagger jumped between shots on a tap. */
.hero .shots .shot:last-child { margin-top: 2.5rem; }
.shot.crop img { border-radius: 0.9rem; }

/* Tone-dependent content: the grumpy version unless the face has been tapped. revert gives each
   element its own default display (inline for a span, block for a p). */
[data-when="positive"] { display: none; }
:root[data-tone="positive"] [data-when="grumpy"] { display: none; }
:root[data-tone="positive"] [data-when="positive"] { display: revert; }

/* A .swap holds both versions in one grid cell, so it is always as tall as the taller one and
   tapping the face moves nothing. The other version is there but invisible (and out of the
   accessibility tree). Only with the script on (.can-flip): without it the page stays grumpy and
   needs no room for the positive copy. */
.can-flip .swap { display: grid; }
.can-flip .swap > [data-when] { grid-area: 1 / 1; display: block; }
.can-flip .swap > [data-when="positive"],
:root[data-tone="positive"].can-flip .swap > [data-when="grumpy"] { visibility: hidden; }
:root[data-tone="positive"].can-flip .swap > [data-when="positive"] { visibility: visible; }

/* ── Sections ───────────────────────────────────────────────────────────────────────────────── */
section { padding: 3.5rem 0; }
.band { background: var(--surface); }
h2 {
  font: 800 clamp(1.9rem, 6vw, 2.75rem)/1.08 var(--sans);
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  max-width: 24ch;
}
h3 { font: 700 1.2rem/1.3 var(--sans); margin: 0 0 0.4rem; }
p { margin: 0 0 1rem; max-width: var(--measure); }
.dim { color: var(--text-dim); }

.feature {
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 52rem) {
  .feature { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .feature.flip > .copy { order: 2; }
}

.points { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: 0.9rem; max-width: var(--measure); }
.points li { padding-left: 1.4rem; position: relative; }
.points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 2px;
  background: var(--accent);
}
.points strong { font-weight: 700; }
.after-list { margin-top: 1.25rem; }

/* A spoken line, as the app would say it. */
.said {
  margin: 1.5rem 0 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--accent);
  background: var(--surface-2);
  border-radius: 0 0.75rem 0.75rem 0;
  font-size: 1.05rem;
  max-width: var(--measure);
}
.band .said { background: var(--bg); }
.said p { margin: 0; }
.said p + p { margin-top: 0.5rem; }
.said cite { display: block; margin-top: 0.6rem; font: 500 var(--label-size-sm)/1.4 var(--mono); letter-spacing: var(--label-track-sm); font-style: normal; color: var(--text-dim); text-transform: uppercase; }

/* Grumpy / positive side by side. */
.tones { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 40rem) { .tones { grid-template-columns: 1fr 1fr; } }
.tone-card { background: var(--surface-2); border-radius: var(--radius); padding: 1.25rem 1.25rem 0.5rem; }
.band .tone-card { background: var(--bg); }
.tone-card dl { margin: 0; }
.tone-card dt { font: 500 var(--label-size-sm)/1.4 var(--mono); letter-spacing: var(--label-track-sm); text-transform: uppercase; color: var(--text-dim); }
.tone-card dd { margin: 0.15rem 0 0.9rem; font-weight: 600; }

.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
@media (min-width: 52rem) { .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; } }
.gallery .shot { flex: none; }

.grid-3 { display: grid; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 52rem) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--surface); border-radius: var(--radius); padding: 1.5rem; }
.band .card { background: var(--bg); }
.card p:last-child { margin-bottom: 0; }

.soon {
  display: inline-block;
  font: 500 var(--label-size-sm)/1 var(--mono);
  letter-spacing: var(--label-track-sm);
  text-transform: uppercase;
  padding: 0.35rem 0.55rem;
  border-radius: 0.4rem;
  box-shadow: inset 0 0 0 1.5px var(--rule);
  color: var(--text-dim);
  vertical-align: 0.2em;
  margin-left: 0.35rem;
  white-space: nowrap;
}

/* ── Get it ─────────────────────────────────────────────────────────────────────────────────── */
.get { text-align: center; }
.get h2, .get p { margin-left: auto; margin-right: auto; }
.play {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  min-width: 15rem;
  padding: 0.8rem 1.5rem;
  border-radius: 0.9rem;
  text-decoration: none;
  text-align: left;
}
.play small { font: 500 var(--label-size-sm)/1.2 var(--mono); letter-spacing: var(--label-track-sm); text-transform: uppercase; }
.play span { font: 700 1.3rem/1.2 var(--sans); }
.play.is-soon { box-shadow: inset 0 0 0 2px var(--rule); color: var(--text-dim); }
.play.is-live { background: var(--text); color: var(--bg); }
.play.is-live:hover { filter: brightness(1.15); }
.play img { height: 3.5rem; width: auto; }
.get .alpha-link { margin-top: 1.25rem; font-size: 0.95rem; }

/* ── Footer ─────────────────────────────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--rule);
  padding: 2rem 0 3rem;
  color: var(--text-dim);
  font-size: 0.95rem;
}
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; justify-content: space-between; }
.site-footer p { margin: 0; }
.site-footer ul { list-style: none; display: flex; gap: 1.5rem; margin: 0; padding: 0; }

/* ── Privacy and alpha pages (.doc) ─────────────────────────────────────────────────────────── */
.doc { padding-top: 2rem; padding-bottom: 4rem; }
.doc h1 { font: 900 clamp(2.5rem, 10vw, 4rem)/1 var(--sans); letter-spacing: -0.03em; margin: 0 0 1rem; }
.doc h2 { font-size: clamp(1.4rem, 4.5vw, 1.8rem); margin-top: 2.75rem; }
.doc ul { max-width: var(--measure); padding-left: 1.25rem; }
.doc li { margin-bottom: 0.5rem; }
.doc .summary { background: var(--surface); border-radius: var(--radius); padding: 1.5rem 1.5rem 0.5rem; max-width: 44rem; }
.doc .summary h2 { margin-top: 0; padding-top: 0.25rem; }
.doc .summary ul { padding-left: 1.1rem; }
.doc table { border-collapse: collapse; width: 100%; max-width: 44rem; margin: 1rem 0 1.5rem; font-size: 0.95rem; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 0.6rem 0.75rem 0.6rem 0; border-bottom: 1px solid var(--rule); }
.doc th { font: 500 var(--label-size-sm)/1.4 var(--mono); letter-spacing: var(--label-track-sm); text-transform: uppercase; color: var(--text-dim); }
.table-scroll { overflow-x: auto; max-width: 100%; }

/* ── Alpha page ─────────────────────────────────────────────────────────────────────────────── */
.alpha ol { max-width: var(--measure); padding-left: 1.5rem; }
.alpha ol li { margin-bottom: 0.6rem; }
.alpha h3 { margin-top: 2rem; }
.alpha-form { max-width: var(--measure); margin: 1.25rem 0 0.5rem; }
.alpha-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.alpha-form input {
  flex: 1 1 11rem;
  min-width: 0;
  min-height: 3.25rem;
  padding: 0 1rem;
  border: 2px solid var(--rule);
  border-radius: 0.75rem;
  background: var(--bg);
  color: var(--text);
  font: 600 1.35rem/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.alpha-form input::placeholder { color: var(--text-dim); opacity: 0.6; }
.alpha-form input[aria-invalid="true"] { border-color: var(--accent-ink); }
.alpha-form .button { flex: 0 0 auto; border: 0; cursor: pointer; }
.alpha-form p { margin-top: 0.75rem; font-size: 0.95rem; }
.alpha-error {
  display: none;
  max-width: var(--measure);
  margin: 1rem 0 0;
  padding: 0.9rem 1.1rem;
  border-left: 4px solid var(--accent-ink);
  border-radius: 0 0.75rem 0.75rem 0;
  background: var(--surface);
  font-weight: 600;
}
.alpha-error:target, .alpha-error.is-shown { display: block; }
/* Focused only so a screen reader reads it on arrival; it isn't a control, so no ring. */
.alpha-error:focus { outline: none; }
.alpha-build { max-width: var(--measure); margin: 0.75rem 0 1rem; display: grid; gap: 0.6rem; }
.alpha-build div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0.75rem; }
.alpha-build dt { font: 500 var(--label-size-sm)/1.9 var(--mono); letter-spacing: var(--label-track-sm); text-transform: uppercase; color: var(--text-dim); }
.alpha-build dd { margin: 0; }
.alpha-hash { font: 0.85rem/1.5 var(--mono); overflow-wrap: anywhere; }
.alpha code { overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}