/* ==========================================================================
   help.gymai.coach — the free gym's guide.

   Built from `GymAI Help Site.dc.html` (frames 34a–34s) and
   `docs/site/specs/help-site.md`. The board draws every rule inline, as a
   design prototype does; this file is the same rules, named once and reused.

   The palette is the PRODUCT's, not the portal's: this site is drawn in the
   design system the product boards carry (brief §3.2), and its foot is the
   product's foot minus `· kept on this instance` (R-13).

   Nothing is loaded from anywhere but this origin. The two typefaces sit in
   `assets/fonts/` with their OFL notice beside them, because the licence
   requires the notice to travel with the files.

   GENERATED INTO `help/` by `scripts/build-help.mjs` — edit this source.
   ========================================================================== */

@font-face {
  font-family: "Geist";
  src: url("assets/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("assets/fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-ui: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, "Helvetica Neue", Helvetica, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace;

  /* The product's palette. Every pair used on text was measured, not assumed:
       #EFF3EC on #08211C  15.4:1   #C4D2C9 on #08211C  10.2:1
       #9BAAA2 on #08211C   6.9:1   #C6F24E on #08211C  13.0:1
       #0A2A16 on #C6F24E  12.6:1   #E8A93C on #0A241F   9.0:1
     The dimmest pair on this site clears AA at 4.5:1 with room to spare. */
  --ground: #08211C;
  --panel: #0A241F;
  --ink: #EFF3EC;
  --ink-body: #C4D2C9;
  --ink-dim: #9BAAA2;
  --accent: #C6F24E;
  --on-accent: #0A2A16;
  --warn: #E8A93C;

  --line: rgb(255 255 255 / 12%);
  --line-2: rgb(255 255 255 / 16%);

  --radius: 8px;
  --gutter: 16px;
}

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink-body);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.6;
}

/* The skip link is the first thing in the document and the first thing a
   keyboard reaches; it is off-screen until it has focus, never `display:none`,
   which would take it out of the tab order entirely. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--on-accent);
  padding: 10px 16px;
  border-radius: 0 0 var(--radius) 0;
  font-weight: 600;
  z-index: 2;
}

.skip:focus { left: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

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

.wrap {
  max-width: 68ch;
  margin: 0 auto;
  padding: 32px var(--gutter) 64px;
}

h1 {
  color: var(--ink);
  font-size: clamp(28px, 6vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 8px 0 12px;
  /* No title on this site is a piece of layout (R-23): German runs about 30%
     longer and must be able to wrap without anything else moving. */
  text-wrap: balance;
}

h2 {
  color: var(--ink);
  font-size: clamp(19px, 3.2vw, 22px);
  line-height: 1.25;
  margin: 36px 0 10px;
  text-wrap: balance;
}

p { margin: 0 0 14px; }

.intro { color: var(--ink); font-size: clamp(18px, 3.4vw, 20px); }

.quiet { color: var(--ink-dim); font-size: 15px; }

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 6px;
}

/* A string QUOTED FROM THE PRODUCT. It is marked so a reader can see which
   words are the screen's own — never by colour alone (the weight and the
   quotation marks carry it too), because an annotation that means something
   only in colour fails 1.4.1. */
.q {
  color: var(--ink);
  font-style: normal;
  font-weight: 600;
}

.q::before { content: "\201C"; }
.q::after { content: "\201D"; }

/* ---------- the chooser ---------- */

.wrap--chooser { padding-top: 64px; }

/* ONE door, drawn as one door — a full-width act, not a one-cell grid waiting
   for siblings (R-04). */
.door {
  display: block;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 20px;
  margin: 20px 0 16px;
  text-decoration: none;
}

.door:hover { border-color: var(--accent); }

.door__title {
  display: block;
  color: var(--ink);
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 4px;
}

.door__line { display: block; color: var(--ink-body); font-size: 16px; }

/* ---------- the guide's home ---------- */

.crumbs {
  max-width: 68ch;
  margin: 0 auto;
  padding: 20px var(--gutter) 0;
  font-size: 15px;
}

/* **WCAG 2.2 AA 2.5.8, and it was a real failure rather than a precaution.** The crumbs were two
   19 px-tall links 18 px apart, which fails both halves of Target Size (Minimum): too small, and
   too close for the exception to apply. An inline link has no height of its own — the box is the
   line box — so the fix is a real block with real padding, not a bigger font. */
.crumbs a {
  display: inline-block;
  min-height: 24px;
  padding: 4px 0;
}

.crumbs a + a { margin-inline-start: 8px; }
.crumbs a + a::before { content: "/ "; color: var(--ink-dim); margin-inline-end: 4px; }

/* Headings with rows, never cards in a grid, so 360 and 1180 are one design. */
.group { margin-top: 32px; }

.rows { list-style: none; margin: 0; padding: 0; }

.rows li { border-top: 1px solid var(--line); }

.group .rows li a {
  display: grid;
  gap: 2px;
  padding: 13px 0;
  color: var(--ink);
  text-decoration: none;
}

.group .rows li a:hover { color: var(--accent); }

/* The title alone made a reader open three pages to find which one was theirs. The line under it
   is the page's OWN first sentence, not a second summary — so the two cannot drift apart. It never
   takes the hover colour: the title is the link, and a whole paragraph turning green reads as one
   enormous control. */
.rows__title { font-weight: 600; }

.rows__line {
  color: var(--ink-body);
  font-size: 15px;
  line-height: 1.45;
  text-wrap: pretty;
}

/* ---------- a task page ---------- */

.where code { display: inline-block; }

.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; }

.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 14px 40px;
}

/* The step number is a disc because it is the same number as the mark on the
   shot (round 54 §1). It is a real number, not a colour. */
.steps li::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  top: 1px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 15px;
  display: grid;
  place-items: center;
}

.notes, .trouble { margin: 0; padding-inline-start: 20px; }
.notes li, .trouble li { margin-bottom: 10px; }

/* The figure may be WIDER THAN THE COLUMN from 900px up. A 1180-wide console shot squeezed into a
   68ch measure is a picture nobody can read, and shrinking the type to fit is the same failure with
   extra steps. The text keeps its measure; only the pictures break out, centred on it. */
.shot { margin: 24px 0; }

@media (min-width: 900px) {
  .shot {
    width: min(1180px, calc(100vw - 2 * var(--gutter)));
    margin-inline: calc(50% - min(1180px, 100vw - 2 * var(--gutter)) / 2);
  }
}

/* The slot the screenshot will occupy. The image itself is S-517's work; until
   it exists the slot carries the alt text as its accessible name, so the page
   is complete for a screen reader before it is complete for an eye. */
.shot__slot {
  background: var(--panel);
  border: 1px dashed var(--line-2);
  border-radius: 14px;
  aspect-ratio: 16 / 10;
}

/* A REAL screenshot. `width`/`height` are on the tag so the box is reserved before the file
   arrives and nothing below it jumps — which is why `width` is NOT reset here: `width: auto` throws
   the attribute away, collapses a lazy figure to its caption, and draws a 2x phone file at 724px.
   `height: auto` alone keeps the pair as the aspect ratio and the attribute as the CSS width.
   A phone shot is drawn at its own 362px and centred rather than stretched to the measure — the
   shot is the size the screen is, and blowing it up to 620px wide is a lie about the product. */
.shot img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--panel);
}

.shot figcaption { color: var(--ink-dim); font-size: 15px; margin-top: 8px; }

/* The amber band the held pages carry. It sits under the intro and above
   *Where it is*, because a reader who cannot do the task at all should learn
   it before the steps (round 54 §1). */
.band {
  background: var(--panel);
  border: 1px solid var(--warn);
  border-inline-start: 4px solid var(--warn);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 20px 0;
}

.band__title { color: var(--warn); font-size: 18px; margin: 0 0 8px; }
.band p:last-child { margin-bottom: 0; }

.checked { color: var(--ink-dim); font-size: 14px; margin-top: 40px; }

/* The home promises *in the order you will meet it*; this is that order, on the page itself, so a
   reader who has just confirmed an address is not sent back to a list to learn that signing in is
   next. It is the GROUP's order and never the whole guide's — nobody's real day goes from keeping
   several gyms to creating an account. Two rows at 360, two columns from 834. */
.pager {
  display: grid;
  gap: 10px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.pager__one {
  display: grid;
  gap: 3px;
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--panel);
  text-decoration: none;
}

.pager__one:hover { border-color: var(--accent); }

.pager__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.pager__title { color: var(--ink); font-size: 17px; font-weight: 600; }
.pager__one:hover .pager__title { color: var(--accent); }

.back { margin-top: 8px; }

/* ---------- not found ---------- */

.wrap--404 { padding-top: 72px; }

.act {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
  padding: 11px 18px;
  margin: 6px 0 14px;
}

.act:hover { color: var(--on-accent); filter: brightness(1.06); }

/* ---------- the foot ---------- */

/* At 360 it is two lines with the same words; at 834 and above it is one row
   (R-14). Never two links, and never labelled `Licence` alone (R-12). */
.foot {
  border-top: 1px solid var(--line);
  color: var(--ink-dim);
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px var(--gutter) 28px;
  max-width: 68ch;
  margin: 0 auto;
}

.foot__by { display: flex; align-items: center; gap: 8px; }
.foot__by img { display: block; }

.foot__licence { display: flex; flex-wrap: wrap; gap: 4px 10px; }

@media (min-width: 834px) {
  :root { --gutter: 24px; }

  .pager { grid-template-columns: 1fr 1fr; }
  .pager__one--on:only-child { grid-column: 2; }

  .foot {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
}

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