/* ENDEVA site styles. All brand tokens live here; pages read only from tokens.
   Rules from the app: mint is brand/accent only, activity content uses its
   category color, gold is reserved for Plus and is never mixed with mint. */

:root {
  color-scheme: light dark;

  /* Brand */
  --brand: #5FD6A4;
  --on-brand: #ffffff;      /* wordmark/tagline on mint, mirrors the splash */
  --brand-ink: #08301f;     /* accessible ink for small text on mint */
  --plus-gold: #E3B036;     /* Plus tier only */

  /* Activity categories (iOS system colors) */
  --cat-strength: #007AFF;
  --cat-cardio: #FF9500;
  --cat-sport: #AF52DE;

  /* Surfaces */
  --bg: #ffffff;
  --bg-alt: #f4f6f5;
  --text: #141816;
  --text-2: #566059;
  --border: #e2e7e4;

  --radius: 14px;
  --content: 40rem;
  --wide: 64rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --cat-strength: #0A84FF;
    --cat-cardio: #FF9F0A;
    --cat-sport: #BF5AF2;

    --bg: #0c0e0d;
    --bg-alt: #171b19;
    --text: #f1f4f2;
    --text-2: #9aa49e;
    --border: #262c29;
  }
}

/* Base */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 0.5em; }
h2 { font-size: 1.5rem; }
p { margin: 0 0 1em; }
a { color: inherit; }
img { max-width: 100%; }

/* The hidden attribute must always win. The browser's own rule for it is only
   display: none in the UA stylesheet, so any author rule setting display beats
   it: .ex-list li and .chips are both display: flex, which left every "hidden"
   exercise row and the hidden jump links rendering as normal. That made the
   library's search look broken, counting matches correctly while filtering
   nothing. Do not remove this, and do not rely on the attribute alone. */
[hidden] { display: none !important; }

/* Uppercase + tracking is reserved for the ENDEVA wordmark */
.wordmark {
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Any stat numbers get tabular digits, matching the app */
.num { font-variant-numeric: tabular-nums; }

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

/* Layout */
.container {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.page { padding: 2.5rem 0 4rem; }

.prose {
  max-width: var(--content);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}
.prose h1 { font-size: 2rem; }
.prose h2 { font-size: 1.25rem; margin-top: 2.25em; }
.prose ul,
.prose ol { padding-left: 1.25rem; }
.prose li { margin-bottom: 0.35em; }

/* Header with CSS-only mobile menu (checkbox hack, keeps the site zero-JS) */
.site-header { border-bottom: 1px solid var(--border); }
.site-header .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 3.5rem;
}
.site-header a { text-decoration: none; }
.home-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0;
  margin-right: auto;
}
.home-link .mark {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.45rem;
  background: var(--brand);
}
.nav-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.nav-button {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.9rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}
.site-nav {
  display: none;
  width: 100%;
  flex-direction: column;
  padding: 0.5rem 0 1rem;
}
.nav-toggle:checked ~ .site-nav { display: flex; }
.site-nav a { padding: 0.6rem 0.25rem; border-radius: 8px; }
.site-nav a[aria-current="page"] { font-weight: 700; }
.site-nav .btn { margin-top: 0.75rem; align-self: flex-start; }

@media (min-width: 720px) {
  .nav-button { display: none; }
  .site-nav {
    display: flex;
    width: auto;
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
  }
  .site-nav a { padding: 0.6rem 0.75rem; }
  .site-nav a:hover:not(.btn) { background: var(--bg-alt); }
  .site-nav .btn { margin: 0 0 0 0.5rem; }
}

/* Articles dropdown: hover + keyboard focus on desktop, links shown inline
   inside the mobile menu. Still zero JS. */
.nav-group { display: flex; flex-direction: column; }
.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.nav-trigger::after {
  content: "";
  width: 0.4em;
  height: 0.4em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-0.15em);
  opacity: 0.6;
}
.dropdown { display: flex; flex-direction: column; }
.site-nav .dropdown a { padding-left: 1.25rem; }

@media (min-width: 720px) {
  .nav-group { position: relative; flex-direction: row; }
  .dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 11rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.4rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    z-index: 10;
  }
  /* invisible bridge so the pointer can cross from trigger to menu */
  .dropdown::before {
    content: "";
    position: absolute;
    top: -0.6rem;
    left: 0;
    right: 0;
    height: 0.6rem;
  }
  .nav-group:hover .dropdown,
  .nav-group:focus-within .dropdown { display: flex; }
  .site-nav .dropdown a { padding: 0.55rem 0.75rem; }
}

/* Hero (landing) */
.hero {
  background: var(--brand);
  color: var(--on-brand);
  text-align: center;
  padding: 4.5rem 1.25rem 4rem;
}
.hero .mark {
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1.5rem;
  display: block;
}
/* app-icon tile treatment for the hero mark */
.hero img.mark {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 22%;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}
.hero h1 {
  font-size: clamp(2.5rem, 10vw, 3.5rem);
  margin-bottom: 0.35em;
}
.hero .tagline {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.5em;
}
.hero .hero-sub {
  font-weight: 500;
  max-width: 32rem;
  margin: 0 auto 2rem;
}

/* Buttons: min-height keeps tap targets at 44px or more */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.6rem 1.5rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
}
.btn-store { background: #111; color: #fff; }
.btn-brand { background: var(--brand); color: var(--brand-ink); }
.btn-outline { border: 1px solid var(--border); }

/* Plus (gold): subscription surfaces only, never mixed with mint */
.plus-badge {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #F5C74D, #D1991F);
  color: #33230a;
  font-weight: 700;
  font-size: 0.9rem;
}
.btn-plus { background: linear-gradient(180deg, #F5C74D, #D1991F); color: #33230a; }

/* Feature cards (landing) */
.features { padding: 3.5rem 0 1.5rem; }
.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  padding: 1.25rem 1.25rem 0.5rem;
}
.card h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.05rem;
}
.card p { color: var(--text-2); }
.dot {
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 999px;
  background: var(--accent, var(--brand));
}
.accent-strength { --accent: var(--cat-strength); }
.accent-cardio { --accent: var(--cat-cardio); }
.accent-sport { --accent: var(--cat-sport); }
.accent-brand { --accent: var(--brand); }

/* Feature rows (product page) */
.feature-row {
  display: grid;
  gap: 1.5rem;
  padding: 2.5rem 0;
}
.feature-row + .feature-row { border-top: 1px solid var(--border); }
.feature-row h2 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.35rem;
}
.feature-row p { color: var(--text-2); max-width: 36rem; }
.feature-row .phone { margin: 0 auto; }
@media (min-width: 720px) {
  .feature-row { grid-template-columns: 1fr auto; align-items: center; }
}

/* Screenshot placeholders */
.shots { padding: 2rem 0 3rem; }
.shot-row {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 0.5rem 1.25rem 1rem;
  scroll-snap-type: x mandatory;
}
.phone {
  flex: none;
  width: 220px;
  aspect-ratio: 9 / 19.5;
  border: 1px solid var(--border);
  border-radius: 2rem;
  background: var(--bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  font-size: 0.85rem;
  scroll-snap-align: center;
}

/* Articles */
.article-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.article-list li { border-bottom: 1px solid var(--border); }
.article-list a { display: block; padding: 1.1rem 0; text-decoration: none; }
.article-list h2 { font-size: 1.15rem; margin: 0 0 0.2em; }
.article-list p { margin: 0; color: var(--text-2); }
.article-meta {
  color: var(--text-2);
  font-size: 0.9rem;
}

/* Centered call to action band */
.cta {
  text-align: center;
  padding: 2rem 0 3rem;
}

/* FAQ: native details/summary, no JS */
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.9rem 0;
}
.faq details p { color: var(--text-2); margin: 0 0 1rem; }

/* Long-form article furniture: science, programs, exercise library.
   Every surface here is neutral (bg-alt / border / text-2). Mint stays
   brand-only, gold stays Plus-only, and the category colors stay for
   activity content, so nothing below tints data. */

/* Jump links now matter, so honour the motion preference */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.prose h3 { font-size: 1.05rem; margin-top: 1.75em; }
.prose h4 {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 1.5em 0 0.4em;
}
.prose hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 2.5rem 0;
}
.prose figure { margin: 1.5rem 0; }
.prose figcaption { color: var(--text-2); font-size: 0.85rem; }

.back-link {
  display: inline-block;
  padding: 0.6rem 0;
  color: var(--text-2);
  font-size: 0.9rem;
}

/* Shape chips: "3 days", "6 weeks", "Barbell". Static labels by default,
   jump links on the exercise index. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-alt);
  color: var(--text-2);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
a.chip {
  min-height: 2.75rem;
  padding: 0 0.9rem;
  text-decoration: none;
  color: var(--text);
}
a.chip:hover { border-color: var(--text-2); }

/* Load display, matching the app: kg leads, the percent is a quiet badge */
.load {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}
.pct {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-alt);
  color: var(--text-2);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  white-space: nowrap;
}
.load .pct { margin-left: 0.4rem; }

/* Week by week scheme tables. Four columns fit 390px; the wrapper is
   insurance for anything wider. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.25rem 0 1.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.table-scroll:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.scheme {
  /* separate, not collapse: sticky row headers are unreliable otherwise */
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 0.9rem;
}
.scheme caption {
  caption-side: top;
  text-align: left;
  padding: 0.8rem 0.9rem 0.2rem;
  color: var(--text-2);
  font-size: 0.85rem;
  line-height: 1.4;
}
.scheme th,
.scheme td {
  padding: 0.55rem 0.7rem;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.scheme tr:last-child > * { border-bottom: 0; }
.scheme thead th {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-2);
  background: var(--bg-alt);
}
.scheme tbody th,
.scheme thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  font-weight: 600;
  border-right: 1px solid var(--border);
}
.scheme tbody th { background: var(--bg); }
.scheme thead th:first-child { background: var(--bg-alt); z-index: 2; }
.scheme .sets {
  display: block;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.scheme .pct { margin-top: 0.15rem; }
.scheme .cell-note {
  display: block;
  margin-top: 0.15rem;
  color: var(--text-2);
  font-size: 0.75rem;
}
/* Emphasis rows (test week, deload). Neutral fill, never brand or category. */
.scheme tr.is-marked > *,
.scheme tr.is-marked th { background: var(--bg-alt); }

/* Contents card at the top of long articles. Plain anchor links, so the jump
   behaviour is the browser's and the page stays zero-JS. Section numbers come
   from CSS counters, so adding or reordering a heading renumbers itself. */
.toc {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
  padding: 1rem 1.15rem 1.1rem;
  margin: 0 0 2.25rem;
}
.toc-title {
  font-weight: 700;
  font-size: 0.95rem;
  margin: 0 0 0.65rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--border);
}
.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.toc li { margin: 0; }
.toc a {
  display: flex;
  gap: 0.55rem;
  padding: 0.4rem 0;
  font-size: 0.95rem;
  text-decoration: none;
}
.toc a:hover { text-decoration: underline; }
.toc a::before {
  flex: none;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

/* Numbering: 1, 2, 3 for sections and 3.1, 3.2 for subsections */
.toc > ol { counter-reset: toc-section; }
.toc > ol > li { counter-increment: toc-section; }
.toc > ol > li > a::before {
  content: counter(toc-section) ".";
  min-width: 1.6rem;
}
.toc > ol > li > ol {
  counter-reset: toc-sub;
  padding-left: 1.6rem;
}
.toc > ol > li > ol > li { counter-increment: toc-sub; }
.toc > ol > li > ol > li > a::before {
  content: counter(toc-section) "." counter(toc-sub);
  min-width: 2.1rem;
}
.toc > ol > li > ol > li > a { color: var(--text-2); }

@media (min-width: 640px) {
  .toc > ol { column-count: 2; column-gap: 2rem; }
  .toc > ol > li { break-inside: avoid; }
}

/* Jumped-to headings need room above them */
.prose h2,
.prose h3 { scroll-margin-top: 1.5rem; }

/* Section numbers on the headings themselves, mirroring the contents card.
   Opt in with <main class="prose numbered">: the same counters would number
   the guides and support pages otherwise. */
.numbered { counter-reset: section; }
.numbered h2 {
  counter-increment: section;
  counter-reset: subsection;
}
.numbered h3 { counter-increment: subsection; }
.numbered h2::before,
.numbered h3::before {
  margin-right: 0.45rem;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}
.numbered h2::before { content: counter(section) "."; }
.numbered h3::before { content: counter(section) "." counter(subsection); }

/* Callouts, mostly for evidence honesty caveats */
.note {
  --note-rule: var(--text-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--note-rule);
  border-radius: var(--radius);
  background: var(--bg-alt);
  padding: 1rem 1.1rem;
  margin: 1.75rem 0;
}
.note > :last-child { margin-bottom: 0; }
.note p { color: var(--text-2); }
.note-label {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
  margin-bottom: 0.35rem;
}
/* Only for genuinely strength-category content */
.note-strength { --note-rule: var(--cat-strength); }

/* References */
ol.refs {
  padding-left: 1.6rem;
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-2);
}
ol.refs li { margin-bottom: 0.85rem; line-height: 1.5; }
ol.refs li:target {
  background: var(--bg-alt);
  border-radius: 8px;
  box-shadow: 0 0 0 0.4rem var(--bg-alt);
}
ol.refs cite { font-style: italic; }

/* Exercise library: search and filter controls.
   Ships with the hidden attribute and is revealed by /exercises.js, so with
   JavaScript off none of this appears and the jump links stay instead. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ex-controls {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
  padding: 1rem 1.15rem 1.15rem;
  margin: 0 0 2rem;
}
.ex-search { display: block; margin-bottom: 1rem; }
.ex-search input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 1rem; /* 16px or more stops iOS zooming on focus */
  -webkit-appearance: none;
  appearance: none;
}
.ex-search input::placeholder { color: var(--text-2); }
.ex-search input:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
  border-color: transparent;
}

.ex-filter + .ex-filter { margin-top: 0.85rem; }
.ex-filter-label {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-2);
}
.ex-filter .chips { margin: 0; }

/* Filter chips are buttons, so they need the element defaults stripped */
.chip-filter {
  min-height: 2.25rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--text);
  background: var(--bg);
  cursor: pointer;
}
.chip-filter:hover { border-color: var(--text-2); }
.chip-filter:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
/* Selected state is a filled neutral, never mint: these are data filters */
.chip-filter.is-on {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}
.chip-filter.is-on .ex-count { color: var(--bg); opacity: 0.7; }

.ex-status {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ex-empty {
  margin: 2rem 0;
  color: var(--text-2);
}

/* Exercise library index */
.ex-group { margin: 0 0 2.5rem; }
.ex-group h2 { scroll-margin-top: 1rem; }
.ex-group h3 {
  font-size: 0.95rem;
  color: var(--text-2);
  margin: 1.5rem 0 0.25rem;
}
.ex-count {
  color: var(--text-2);
  font-size: 0.9rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.ex-list { list-style: none; padding: 0; margin: 0; }
.ex-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.6rem;
  min-height: 2.75rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--border);
  break-inside: avoid;
}
.ex-list .ex-name { font-weight: 600; }
.ex-list a.ex-name { display: inline-block; padding: 0.25rem 0; }
.ex-list .ex-meta { color: var(--text-2); font-size: 0.85rem; }
@media (min-width: 760px) {
  .ex-list { column-count: 2; column-gap: 2.5rem; }
}

/* The flat search results list the script builds. One ungrouped run of
   exercises, so it takes a third column where there is room for one. */
.ex-results > .ex-list { margin-bottom: 1.5rem; }
@media (min-width: 1040px) {
  .ex-results > .ex-list { column-count: 3; column-gap: 2rem; }
}

/* Three-up card grid, for section indexes with more than four cards */
@media (min-width: 900px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 3rem;
  padding: 2rem 0 3rem;
}
.site-footer .container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
}
.footer-links a { padding: 0.5rem 0; }
.site-footer small { color: var(--text-2); }

/* Centered utility page (404) */
.center-page {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.25rem;
}