/*
  planfor120.com: the one stylesheet every page links.

  The colours are the app's own (src/constants/theme.ts, and the accent from app.json) so that
  the site and the app read as one product, and the type is the iOS rounded system face the app
  uses. Two kinds of colour are added here: --link, a deeper shade of the accent for text, because
  the accent itself is only 3.5:1 on white; and the zone colours of src/domain/zones.ts, which only
  ever fill a step bar.

  Pages link this as /assets/site.css?v=N. Cloudflare has been seen serving a non-HTML file from
  its edge for days, out of reach of a purge, so every edit here ships with a new N in every page.
  See "The stylesheet" in DEPLOYMENT.md.
*/

:root {
  color-scheme: light dark;

  --text: #000000;
  --text-2: #60646C;
  --bg: #ffffff;
  --surface: #F0F0F3;
  --line: #E0E1E6;
  --accent: #208AEF;
  --link: #0E6DC8;

  --zone-recovery: #4A9EDA;
  --zone-endurance: #34C759;
  --zone-tempo: #E6B800;
  --zone-threshold: #FF9500;
  --zone-vo2: #FF3B30;

  --font: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --page: 72rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --radius: 16px;
  --radius-lg: 28px;
  --lift: 0 1px 2px rgb(0 0 0 / 0.05), 0 18px 40px -20px rgb(0 0 0 / 0.3);
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: #ffffff;
    --text-2: #B0B4BA;
    --bg: #000000;
    --surface: #212225;
    --line: #2E3135;
    --accent: #4EA6F7;
    --link: #4EA6F7;
    --lift: none;
  }
}

/* --- Base ------------------------------------------------------------------------------------ */

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

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

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem; /* 17px, the iOS body size */
  line-height: 1.6;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  flex: 1 0 auto;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p {
  margin: 0 0 1em;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

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

code {
  font-family: var(--mono);
  font-size: 0.9em;
}

svg {
  display: block;
}

[hidden] {
  display: none !important;
}

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  margin: 0 0 1rem;
  color: var(--link);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.muted {
  color: var(--text-2);
}

/* --- Header and footer ----------------------------------------------------------------------- */

.masthead {
  padding-block: 1.25rem;
}

.masthead .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--text);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.brand-mark {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
}

.brand b {
  color: var(--accent);
  font-weight: inherit;
}

.sep {
  color: var(--line);
  font-weight: 600;
}

.crumb {
  color: var(--text-2);
  font-weight: 600;
  text-decoration: none;
}

.crumb:hover {
  color: var(--text);
}

footer {
  margin-top: clamp(3.5rem, 9vw, 6rem);
  padding-block: 2.5rem 3rem;
  border-top: 1px solid var(--line);
  color: var(--text-2);
  font-size: 0.9375rem;
}

footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.25rem 3rem;
}

.foot-name a {
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}

.foot-links {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Step bar: a workout drawn the way the app's StepBar draws one -------------------------- */

/* Each step is as wide as its share of the time and as tall as its share of the dial. */
.stepbar {
  width: 100%;
  height: 3.5rem;
}

.stepbar .recovery {
  fill: var(--zone-recovery);
}

.stepbar .endurance {
  fill: var(--zone-endurance);
}

.stepbar .tempo {
  fill: var(--zone-tempo);
}

.stepbar .threshold {
  fill: var(--zone-threshold);
}

.stepbar .vo2 {
  fill: var(--zone-vo2);
}

.stepbar .now {
  fill: var(--text);
}

/* --- The planfor120 index -------------------------------------------------------------------- */

.intro {
  padding-block: clamp(3rem, 11vw, 8rem) clamp(2.5rem, 7vw, 4.5rem);
}

.intro h1 {
  max-width: 14ch;
  font-size: clamp(2.75rem, 1.4rem + 6.4vw, 6.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}

.section-label {
  margin-bottom: 1.25rem;
  color: var(--text-2);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.project {
  position: relative;
  container-type: inline-size;
  background: var(--surface);
  border-radius: var(--radius-lg);
}

.project-body {
  display: grid;
  gap: 1.75rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

@container (min-width: 44rem) {
  .project-body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: center;
    gap: 3rem;
  }
}

.project h3 {
  margin-bottom: 0.5rem;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
}

.project h3 a {
  color: var(--text);
  text-decoration: none;
}

/* The heading's link stretches over the whole card: one target, and one link to announce. */
.project h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

@supports selector(:has(a)) {
  .project:has(a:focus-visible) {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
  }

  .project a:focus-visible {
    outline: none;
  }
}

.project p {
  margin-bottom: 1rem;
  color: var(--text-2);
}

.more {
  color: var(--link);
  font-weight: 600;
}

.project-art {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--bg);
  border-radius: var(--radius);
}

.project-art .stepbar {
  height: 4.5rem;
}

@media (prefers-reduced-motion: no-preference) {
  .project {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .project:hover {
    transform: translateY(-2px);
    box-shadow: var(--lift);
  }
}

/* --- The app's page -------------------------------------------------------------------------- */

.hero {
  padding-block: clamp(2rem, 6vw, 5rem) clamp(3rem, 7vw, 5rem);
}

.hero .wrap {
  display: grid;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 4.5rem);
}

@media (min-width: 60rem) {
  .hero .wrap {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  }
}

.hero h1 {
  margin-bottom: 1.5rem;
  font-size: clamp(2.5rem, 1.5rem + 4.4vw, 4.75rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.hero .lede {
  max-width: 36rem;
  margin-bottom: 1.25rem;
  font-size: clamp(1.1875rem, 1rem + 0.9vw, 1.4375rem);
  line-height: 1.5;
}

.hero .lede + p {
  max-width: 34rem;
  color: var(--text-2);
}

/*
  The illustration beside the pitch: one moment of a ride, in the app's own words — RESISTANCE
  with "of" its range, CADENCE as a range in rpm, the step's clock, and "Next · step · clock". It
  is a picture of the two sentences next to it, and claims nothing they do not.
*/
.coach {
  display: grid;
  gap: 1.25rem;
  justify-self: center;
  width: 100%;
  max-width: 27rem;
  margin: 0;
  padding: clamp(1.25rem, 3.5vw, 1.75rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--lift);
  font-variant-numeric: tabular-nums;
}

.coach-top,
.coach-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.coach-step {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.coach-step::before {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--zone-vo2);
}

.coach-round {
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-2);
  font-size: 0.8125rem;
  font-weight: 600;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.metric {
  display: grid;
  gap: 0.2rem;
  padding: 0.85rem 0.75rem;
  background: var(--bg);
  border-radius: var(--radius);
}

/* The app's MetricTile label: 11pt capitals under or over a bold figure. */
.metric-label {
  color: var(--text-2);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.metric-value {
  font-size: clamp(1.375rem, 1rem + 1.5vw, 1.875rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.metric-unit {
  color: var(--text-2);
  font-size: 0.8125rem;
}

.coach-next {
  color: var(--text-2);
  font-size: 0.9375rem;
  font-weight: 600;
}

.countin {
  display: flex;
  gap: 0.375rem;
}

.countin span {
  display: grid;
  place-items: center;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 50%;
  background: var(--bg);
  color: var(--text-2);
  font-size: 0.9375rem;
  font-weight: 700;
}

.countin .on {
  background: var(--link);
  color: var(--bg);
}

.pair {
  display: grid;
  gap: 1rem;
}

@media (min-width: 48rem) {
  .pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.card {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--surface);
  border-radius: var(--radius-lg);
}

.card h2 {
  margin-bottom: 1rem;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
}

.status-line {
  font-size: 1.1875rem;
  font-weight: 700;
}

.email {
  display: inline-block;
  font-size: clamp(1.1875rem, 1rem + 1vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.section {
  padding-top: 1rem;
}

.yours {
  display: grid;
  gap: 1.5rem 4rem;
}

@media (min-width: 60rem) {
  .yours {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }
}

.yours h2 {
  margin-bottom: 0;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.yours .text {
  max-width: 40rem;
}

.nos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.25rem 0 1.5rem;
  padding: 0;
  list-style: none;
}

.nos li {
  padding: 0.4rem 0.9rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
}

/* --- Legal pages ----------------------------------------------------------------------------- */

.doc {
  padding-top: clamp(1.5rem, 5vw, 4rem);
}

.doc .wrap {
  display: grid;
  gap: 1.75rem;
}

@media (min-width: 64rem) {
  .doc .wrap {
    grid-template-columns: 14rem minmax(0, 42rem);
    justify-content: center;
    align-items: start;
    column-gap: clamp(3rem, 6vw, 6rem);
  }

  .doc-head,
  .doc-body {
    grid-column: 2;
  }

  .toc {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
}

.doc-head h1 {
  margin-bottom: 0.75rem;
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.updated {
  color: var(--text-2);
  font-size: 0.9375rem;
}

.toc {
  padding: 0.9rem 1.1rem;
  background: var(--surface);
  border-radius: var(--radius);
}

.toc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--text-2);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
}

.toc summary::-webkit-details-marker {
  display: none;
}

.toc summary::after {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
}

.toc[open] summary::after {
  transform: translateY(25%) rotate(-135deg);
}

.toc ol {
  display: grid;
  gap: 0.125rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.toc a {
  display: block;
  margin-inline: -0.5rem;
  padding: 0.3rem 0.5rem;
  border-radius: 8px;
  color: var(--text-2);
  font-size: 0.9375rem;
  line-height: 1.35;
  text-decoration: none;
}

.toc a:hover {
  background: var(--bg);
  color: var(--text);
}

@media (min-width: 64rem) {
  .toc {
    position: sticky;
    top: 1.5rem;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    padding: 0.25rem 0.5rem 0.5rem;
    background: none;
  }

  .toc a:hover {
    background: var(--surface);
  }
}

.doc-body {
  line-height: 1.7;
}

.doc-body .lede {
  font-size: 1.1875rem;
  line-height: 1.6;
}

.doc-body h2 {
  margin: 2.75rem 0 0.75rem;
  font-size: 1.375rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
  scroll-margin-top: 1.5rem;
}

.doc-body ul {
  margin: 0 0 1.25rem;
  padding-left: 1.25rem;
}

.doc-body li {
  margin-bottom: 0.6rem;
  padding-left: 0.25rem;
}

.doc-body li::marker {
  color: var(--text-2);
}

.table {
  margin: 1.5rem 0 2rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.table th,
.table td {
  padding: 0.9rem 1.1rem;
  text-align: left;
  vertical-align: top;
}

.table th {
  background: var(--surface);
  color: var(--text-2);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.table td {
  width: 50%;
}

.table td + td {
  color: var(--text-2);
}

.table tbody tr + tr td {
  border-top: 1px solid var(--line);
}

/*
  On a phone each row becomes a block: what, and under it why. The roles in the markup keep a
  screen reader reading it as a table once the display changes, which Safari otherwise forgets.
*/
@media (max-width: 40rem) {
  .table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .table table,
  .table tbody,
  .table tr,
  .table td {
    display: block;
    width: auto;
  }

  .table tr {
    padding: 1rem 1.1rem;
  }

  .table td {
    padding: 0;
  }

  .table td + td {
    margin-top: 0.35rem;
  }

  .table tbody tr + tr td {
    border-top: 0;
  }

  .table tbody tr + tr {
    border-top: 1px solid var(--line);
  }
}

/* --- Pages with one thing to say: an invite, a shared workout, a missing page ---------------- */

.solo {
  display: grid;
  place-items: center;
  padding-block: clamp(2rem, 8vw, 6rem);
}

.solo-card {
  width: 100%;
  max-width: 34rem;
  text-align: center;
}

.solo-card h1 {
  margin-bottom: 1rem;
  font-size: clamp(1.875rem, 1.3rem + 2.6vw, 2.75rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.solo-card p {
  color: var(--text-2);
}

.solo-card p strong {
  color: var(--text);
}

.solo-card .eyebrow {
  color: var(--link);
}

/* "See what it does" breaks as one phrase, not after "See". */
.solo-card a {
  white-space: nowrap;
}

.solo-card .code {
  display: flex;
  justify-content: center;
  gap: 0.35em;
  margin: 2rem 0;
  padding: 1.5rem 1rem 1.5rem calc(1rem + 0.12em);
  background: var(--surface);
  border-radius: var(--radius-lg);
  color: var(--text);
  font-family: var(--mono);
  font-size: clamp(2.25rem, 1.4rem + 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  -webkit-user-select: all;
  user-select: all;
}

.shared {
  margin: 2rem 0;
  padding: 1.75rem 1.25rem;
  background: var(--surface);
  border-radius: var(--radius-lg);
}

.shared-name {
  display: block;
  font-size: clamp(1.5rem, 1.2rem + 2vw, 2.125rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.shared-length {
  display: block;
  margin-top: 0.4rem;
  color: var(--text-2);
}

.links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}