/* ─────────────────────────────────────────────────────────────
   CaliPath — the pages below a section tile.

   No artboard exists for any of these, so they are built from §8's
   rule: the layout is whatever the content needs, the system stays
   constant. In practice that means one decision matters most —

   THE SECTION COLOUR IS A FILL HERE, NEVER TEXT. §2.4 checks white
   text ON an accent; it says nothing about an accent on the page
   ground, and three of the five fail badly there. On #121212,
   Flexibility #6D089C is 1.95:1 and Shop #283BC9 is no better —
   unreadable at any size. Only Home orange (4.8:1) would have
   worked, which is why Home's rotating line gets away with it.
   So headings and body copy are var(--fg), and the accent appears
   as filled cards, filled rows, filled step numbers and one rule —
   which is what the rest of the site already does.
   ───────────────────────────────────────────────────────────── */

/* ════════ The article ════════ */

.doc{
  /* Long-form text wants a measure, not the full 1440. Left-aligned
     rather than centred, matching the desktop greeting (§7.1). */
  max-width:var(--page-measure);
  padding-bottom:48px;
}

/* The exercise list is not prose, so the measure does not apply to it:
   pinned to 70ch it was a narrow column against the left edge of a
   wide window. It runs the content width instead, capped at 1440 and
   centred past that — the rule .form already uses (screens.css), and
   1440 is the design's own frame, so at that size the page is exactly
   the content area and the cap only bites on wider monitors. */
.doc--wide{
  /* width:100% is load-bearing, not belt-and-braces. .doc is a flex
     item in .screen's column, so it normally stretches to full width —
     but auto cross-axis margins cancel stretch, and without this the
     block shrank to fit its content (894px inside a 1280px area) and
     floated in the middle. .form carries the same width:100% for the
     same reason. */
  width:100%;
  max-width:1440px;
  margin-inline:auto;
}

/* The level or section this page belongs to. Grey, uppercase and
   small: it names the context, the title is the subject. */
.doc__eyebrow{
  margin:0 0 6px;
  font-size:var(--doc-eyebrow);
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--grey);
}

.doc__title{
  margin:0 0 var(--doc-title-mb);
  font-size:var(--page-title);
  font-weight:700;
  line-height:.95;
  letter-spacing:-.015em;
  color:var(--fg);
}

/* ════════ Block copy ════════ */

.doc__h{
  margin:var(--doc-h-mt) 0 var(--doc-h-mb);
  font-size:var(--page-h2);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.01em;
  color:var(--fg);
}

/* First heading on a page has the title above it already. */
.doc__h:first-child{ margin-top:0; }

/* A level down — the two scapular directions under Shoulder, and the
   named progressions under Intermediate. */
.doc__h3{
  margin:var(--doc-p-mb) 0 var(--doc-h-mb);
  font-size:var(--page-h3);
  font-weight:700;
  line-height:1.15;
  color:var(--fg);
}

.doc__p{
  margin:0 0 var(--doc-p-mb);
  font-size:var(--page-body);
  font-weight:400;
  line-height:1.6;
  color:var(--fg);
}

.doc__p strong{ font-weight:700; }

.doc__ul,
.doc__ol{
  margin:0 0 var(--doc-p-mb);
  padding-left:1.3em;
  font-size:var(--page-body);
  line-height:1.6;
  color:var(--fg);
}

.doc__ul li,
.doc__ol li{ margin-bottom:6px; }

.doc__ul li::marker{ color:var(--accent); }

/* Numbers are the content in an ordered list — a progression step is
   "step 3", not a bullet — so they take the weight the marker of an
   unordered list does not need. */
.doc__ol li::marker{
  color:var(--fg);
  font-weight:700;
}

/* The bullets Intermediate hangs off a numbered step. */
.doc__ul--sub{
  margin:6px 0 0;
  font-size:.94em;
}

/* The closing line of every program — "Always listen to your body."
   A rule in the section colour rather than coloured text, for the
   reason at the top of this file. */
.doc__note{
  margin:var(--doc-h-mt) 0 var(--doc-p-mb);
  padding-left:16px;
  border-left:4px solid var(--accent);
  font-size:var(--page-body);
  font-weight:700;
  line-height:1.5;
  color:var(--fg);
}

.doc__note strong{ font-weight:700; }

/* Something deliberately not filled in yet — the Shop's store links.
   Grey so it reads as a held slot rather than content. */
.doc__quiet{
  margin:0 0 var(--doc-p-mb);
  font-size:var(--page-body);
  line-height:1.6;
  color:var(--grey);
}

/* ════════ Labelled facts ════════
   "Frequency — 2–3 sessions per week". A filled chip, so it reads at
   a glance the way Home's stat cards do. Both lines white: §2.4 only
   clears white on a filled accent, and the black the tiles use is
   2.2:1 on Flexibility purple. */

/* flex + fit-content rather than inline-flex: a chip shrinks to its
   own text, but two of them in a row would butt together with no
   separator, since the renderer appends siblings with no whitespace
   between them. */
.meta{
  display:flex;
  width:fit-content;
  flex-direction:column;
  gap:2px;
  margin:0 0 var(--doc-p-mb);
  padding:var(--meta-pad);
  border-radius:calc(var(--meta-value) * .42);
  background:var(--accent);
}

.meta__label{
  font-size:var(--doc-eyebrow);
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#FFF;
}

.meta__value{
  font-size:var(--meta-value);
  font-weight:700;
  line-height:1.1;
  color:#FFF;
}

/* ════════ Links ════════
   The menu pages are the only ones with somewhere to go — a mailto
   for feedback, one route across to the privacy policy — and an
   underlined coloured link is not available to them: the whole point
   of the note at the top of this file is that the section colour is
   unreadable as type on the page ground. So a link is a filled pill,
   the same fill the labelled facts and the exercise rows use, with
   white text that §2.4 has already cleared.

   width:fit-content on a flex column, so the pill is as wide as its
   own words rather than the measure. */
.doc__link{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  max-width:100%;
  /* The right margin is for the About page's pair of credit buttons:
     the renderer appends siblings with no whitespace between them, so
     two inline pills would otherwise touch. Same reason .meta is
     flex + fit-content rather than inline-flex. */
  margin:0 10px var(--doc-p-mb) 0;
  padding:var(--meta-pad);
  border-radius:calc(var(--meta-value) * .42);
  background:var(--accent);
  font-size:var(--page-body);
  font-weight:700;
  line-height:1.2;
  color:#FFF;
  transition:transform 200ms ease-out;
}

@media (hover:hover){
  .doc__link:hover{ transform:translateY(-2px); }
}

/* ════════ Progressions ════════
   A numbered step with a body that can hold anything a page can. The
   number sits in a filled square rather than being a list marker,
   because a step's body is several blocks tall and a marker would
   lose the number against them. */

.steps{ margin:0 0 var(--doc-p-mb); }

.step{
  display:grid;
  grid-template-columns:var(--step-n) minmax(0,1fr);
  gap:0 var(--step-gap);
  margin-bottom:var(--doc-h-mt);
}

.step:last-child{ margin-bottom:0; }

.step__head{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:subgrid;
  align-items:center;
  margin-bottom:var(--doc-h-mb);
}

.step__n{
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--step-n);
  height:var(--step-n);
  border-radius:calc(var(--step-n) * .28);
  background:var(--accent);
  font-size:calc(var(--step-n) * .5);
  font-weight:700;
  line-height:1;
  color:#FFF;
}

.step__title{
  font-size:var(--page-h3);
  font-weight:700;
  line-height:1.15;
  color:var(--fg);
}

/* The body lines up under the title, not under the number. */
.step__body{ grid-column:2; }

/* Inside a step the spacing tightens — the step itself is already
   the separation. */
.step__body > :last-child{ margin-bottom:0; }
.step__body .doc__h{ margin-top:var(--doc-h-mb); }

/* ════════ The level hub ════════
   .tiles--row centres its rows in the height it is given, which fills
   the screen when there are five levels and leaves two tiles floating
   in the middle of an empty page when there are two. So the hub hangs
   them from the heading instead. */

.tiles--hub{
  align-content:start;
  margin-top:var(--tile-row-gap);
}

/* ════════ The exercise list ════════
   .tiles--row fits itself to the viewport and never scrolls, which is
   right for five levels and wrong for thirteen exercises. So these
   are fixed-height rows in a page that scrolls.

   Two per line on desktop, Mostafa's call — one column left half the
   window empty beside it. The column gap reads --tile-row-colgap, so
   the list keeps step with the two columns of level tiles on the
   screen above it.

   NOTE that token currently resolves to 12px at every width, not the
   30px the desktop block sets: the "Fit maths" :root at the foot of
   tokens.css redeclares it, and a media query adds no specificity, so
   the later plain :root wins. Pre-existing, and it affects the section
   screens too. Reading the token means both move together whenever it
   is fixed. */

.doclist{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--doclist-gap);
}

@media (min-width:900px){
  .doclist{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:var(--tile-row-colgap);
  }
}

/* Push Day / Pull Day run across both columns. */
.doclist__group{
  grid-column:1 / -1;
  margin:var(--doc-h-mt) 0 0;
  font-size:var(--page-h3);
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--grey);
}

.doclist__group:first-child{ margin-top:0; }

.doclist__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:var(--doclist-h);
  padding:var(--doclist-pad);
  border-radius:calc(var(--doclist-h) * .22);
  background:var(--accent);
  color:#FFF;
  transition:transform 200ms ease-out;
}

.doclist__name{
  font-size:var(--doclist-name);
  font-weight:700;
  line-height:1.1;
  min-width:0;
}

.doclist__go{
  width:var(--doclist-go);
  height:var(--doclist-go);
  flex:0 0 auto;
}

@media (hover:hover){
  .doclist__item:hover{ transform:translateY(-3px); }
}

/* ════════ Deep-page top bar ════════
   Mostafa's call: on a page you reached from a tile the hamburger and
   the profile control step aside, the five sections stay live so you
   can move between them, and a back arrow takes the hamburger's
   place. Grey like the hamburger it replaces (§6.4) — the bar's
   controls never take a section colour. */

.topbar__back{
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--burger-w);
  height:44px;
  color:var(--grey);
  flex:0 0 auto;
}

.topbar__back svg{
  width:76%;
  height:76%;
}

@media (hover:hover){
  .topbar__back:hover{ color:var(--fg); }
}