/* GymClass user guides.
   One stylesheet for all of them, so a change to the look is one edit.
   Palette lifted from the app's own default studio theme, so the guides and the
   product they describe are visibly the same thing. Neutrals carry a slight
   green bias toward the accent rather than sitting on a dead grey. */

:root {
  --paper:      #f7f6f2;
  --card:       #ffffff;
  --ink:        #1b1f1d;
  --ink-soft:   #5b635d;
  --line:       #e2e1d9;
  --green:      #2f5d50;
  --green-soft: #eaf0ed;
  --ember:      #b05c22;
  --ember-soft: #f8eee6;
  --masthead:   #2f5d50;

  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --body: "Newsreader", Georgia, "Times New Roman", serif;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #121513;
    --card:       #1b1f1c;
    --ink:        #eff0ed;
    --ink-soft:   #9aa29c;
    --line:       #2c312e;
    --green:      #86bba8;
    --green-soft: #1d2622;
    --ember:      #e0a173;
    --ember-soft: #2a211a;
    --masthead:   #1d3a32;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper:      #121513;
  --card:       #1b1f1c;
  --ink:        #eff0ed;
  --ink-soft:   #9aa29c;
  --line:       #2c312e;
  --green:      #86bba8;
  --green-soft: #1d2622;
  --ember:      #e0a173;
  --ember-soft: #2a211a;
  --masthead:   #1d3a32;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-text-size-adjust: 100%;
}

/* ---- masthead ---- */

header.site {
  background: var(--masthead);
  padding-block: 1.5rem;
  padding-inline: 20px;
}
header.site .inner { max-width: 34rem; margin: 0 auto; }
header.site a {
  color: #f7f6f2;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
header.site p {
  color: rgba(247, 246, 242, 0.82);
  margin: 0.2rem 0 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* ---- page ---- */

.wrap {
  max-width: 34rem;
  margin: 0 auto;
  padding-block: 2.6rem 4rem;
  padding-inline: 20px;
}

h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.9rem, 6.5vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0 0 0.5rem;
}
.lede { color: var(--ink-soft); font-size: 1.08rem; font-style: italic; margin: 0 0 2.2rem; }

h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.2;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 2.6rem 0 0.7rem;
  padding-top: 1.7rem;
  border-top: 1px solid var(--line);
}
h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 1.6rem; }

h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.02rem;
  margin: 1.7rem 0 0.4rem;
}

p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1.1rem; padding-left: 1.25rem; }
li { margin-bottom: 0.42rem; }
strong { font-weight: 600; }

a { color: var(--green); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

/* Numbered steps really are a sequence, so they are numbered. */
.wrap ol:not(.plain) { counter-reset: step; list-style: none; padding-left: 0; }
.wrap ol:not(.plain) > li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.68rem;
}
.wrap ol:not(.plain) > li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.78rem;
  display: grid;
  place-items: center;
}

/* ---- callouts: two kinds, meaning different things ---- */

.note, .warn {
  border-left: 3px solid var(--green);
  background: var(--card);
  padding: 1rem 1.15rem;
  margin: 1.5rem 0;
}
.warn { border-left-color: var(--ember); background: var(--ember-soft); }
.note p:last-child, .warn p:last-child { margin-bottom: 0; }
.note strong, .warn strong {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.35rem;
}
.warn strong { color: var(--ember); }

/* ---- guide chooser ---- */

.cards { display: grid; gap: 0.85rem; margin: 2rem 0 1rem; }
.card {
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  padding: 1.15rem 1.25rem;
  text-decoration: none;
  color: inherit;
}
.card:hover, .card:focus-visible { border-color: var(--green); }
.card strong {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
  color: var(--green);
  margin-bottom: 0.15rem;
}
.card span { color: var(--ink-soft); font-size: 0.97rem; }

/* ---- lookup tables: these really are tabular ---- */

.scroll { overflow-x: auto; margin: 1.3rem 0; }
table { width: 100%; border-collapse: collapse; font-size: 0.97rem; }
th, td {
  text-align: left;
  padding: 0.62rem 0.75rem 0.62rem 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
th {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom-color: var(--ink-soft);
}
td:first-child { padding-right: 1.1rem; font-weight: 600; }

/* ---- contents ---- */

nav.toc {
  background: var(--card);
  border: 1px solid var(--line);
  padding: 1rem 1.2rem;
  margin-bottom: 2.4rem;
}
nav.toc ul { margin: 0; padding-left: 1.05rem; }
nav.toc li { margin-bottom: 0.22rem; }

code {
  background: var(--card);
  border: 1px solid var(--line);
  padding: 0.1em 0.35em;
  font-size: 0.9em;
}

footer.site {
  border-top: 1px solid var(--line);
  margin-top: 3.4rem;
  padding-top: 1.4rem;
  color: var(--ink-soft);
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }