/* Masheen website. One world with the app (fitness-flutter/design/MASHEEN_WORLD.md):
   a loaded barbell in a dim garage gym. Four materials, tokens as in §5.
   Night gym is the dark theme, chalk room the light one. */

@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/barlow-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/inter-600.woff2") format("woff2"); }

/* ---------------------------------------------------------------- tokens */
:root {
  color-scheme: dark;
  /* night gym */
  --iron-floor: #121110;
  --iron-plate: #1C1A18;
  --iron-raised: #262320;
  --iron-bar: #171513;
  --chalk: #F3EEE6;
  --on-chalk: #121110;
  --chalk-dim: #A39C92;
  --steel: #3A3530;
  --steel-light: #5A524B;
  --steel-icon: #6E675F;
  --collar: #4A443E;
  --hairline: rgba(255, 240, 220, .09);
  --ember: #FF6B2C;
  --on-ember: #1A0D05;
  --ember-text: #FF6B2C;
  --ember-glow: rgba(255, 107, 44, .28);
  --danger: #E5484D;
  /* plate light: highlight is always the pale material; shade is the plate's own hue */
  --plate-hl: rgba(243, 238, 230, .35);
  --chalk-shade: rgba(173, 139, 87, .55);
  --ember-shade: rgba(164, 49, 0, .55);

  --f-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: 16px;
  --max: 1240px;
  --r-surface: 16px;
  --r-button: 10px;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --iron-floor: #F3EEE6;
    --iron-plate: #FBF8F2;
    --iron-raised: #E9E2D6;
    --iron-bar: #EDE7DC;
    --chalk: #1A1714;
    --on-chalk: #F3EEE6;
    --chalk-dim: #6B645B;
    --steel: #CFC6B8;
    --steel-light: #B3A999;
    --steel-icon: #8F867A;
    --collar: #C1B8A8;
    --hairline: rgba(26, 23, 20, .10);
    --ember-text: #C0400C; /* bible says #C2410C; that is 4.48:1 on ironFloor, under 4.5 */
    --ember-glow: rgba(255, 107, 44, .22);
    --danger: #C62F35;
    --chalk-shade: rgba(14, 12, 11, .30);
    --ember-shade: rgba(164, 49, 0, .30);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --iron-floor: #F3EEE6;
  --iron-plate: #FBF8F2;
  --iron-raised: #E9E2D6;
  --iron-bar: #EDE7DC;
  --chalk: #1A1714;
  --on-chalk: #F3EEE6;
  --chalk-dim: #6B645B;
  --steel: #CFC6B8;
  --steel-light: #B3A999;
  --steel-icon: #8F867A;
  --collar: #C1B8A8;
  --hairline: rgba(26, 23, 20, .10);
  --ember-text: #C0400C; /* bible says #C2410C; that is 4.48:1 on ironFloor, under 4.5 */
  --ember-glow: rgba(255, 107, 44, .22);
  --danger: #C62F35;
  --chalk-shade: rgba(14, 12, 11, .30);
  --ember-shade: rgba(164, 49, 0, .30);
}

@media (min-width: 600px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 40px; } }

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--iron-floor); scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--iron-floor);
  color: var(--chalk);
  font: 400 16px/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
@media (min-width: 600px) { body { font-size: 17px; } }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 700; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--chalk); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--chalk); color: var(--on-chalk); }

.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--gutter); top: -60px; z-index: 50; background: var(--chalk); color: var(--on-chalk); padding: 10px 14px; border-radius: var(--r-button); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

.num { font-variant-numeric: tabular-nums lining-nums; }
.unit { font-size: .38em; color: var(--chalk-dim); font-weight: 600; letter-spacing: .02em; margin-left: .12em; }
.overline { font: 600 12px/1.3 var(--f-body); letter-spacing: 1.4px; text-transform: uppercase; color: var(--chalk-dim); }
.meta { font-size: 13px; line-height: 1.45; color: var(--chalk-dim); }
.example { font-size: 12px; color: var(--chalk-dim); letter-spacing: .2px; }

.h-display, .h1, .h2 { font-family: var(--f-display); text-transform: uppercase; letter-spacing: .5px; }
.h1 { font-size: clamp(46px, 11.6vw, 100px); line-height: .9; }
.h2 { font-size: clamp(38px, 7.4vw, 76px); line-height: .92; }
.h3 { font: 700 24px/1.05 var(--f-display); text-transform: uppercase; letter-spacing: .5px; }
.lead { font-size: 18px; line-height: 1.55; color: var(--chalk); max-width: 34em; }
@media (min-width: 600px) { .lead { font-size: 19px; } }
.body-dim { color: var(--chalk-dim); max-width: 36em; }

/* press (§10): every tappable scales to .96 in 90 ms */
.press { transition: transform 90ms ease-out, background-color 160ms ease, color 160ms ease, border-color 160ms ease; -webkit-tap-highlight-color: transparent; }
.press:active { transform: scale(.96); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 20px; border-radius: var(--r-button);
  font: 700 18px/1 var(--f-display); letter-spacing: .5px; text-transform: uppercase;
  text-decoration: none; border: 1px solid transparent; white-space: nowrap;
}
.btn-ember { background: var(--ember); color: var(--on-ember); border-radius: var(--r-surface); min-height: 56px; padding: 0 26px; font-size: 22px; }
.btn-chalk { background: var(--chalk); color: var(--on-chalk); }
.btn-iron { background: var(--iron-raised); color: var(--chalk); border-color: var(--hairline); }
.btn[disabled] { opacity: .45; cursor: default; }

/* store buttons: links when a URL exists, a plain state when not */
.stores { display: flex; flex-wrap: wrap; gap: 10px; }
.store {
  display: inline-flex; flex-direction: column; justify-content: center;
  min-height: 56px; min-width: 152px; padding: 8px 16px; border-radius: var(--r-button);
  text-decoration: none; line-height: 1.15; border: 1px solid var(--hairline);
}
.store .s-top { font-size: 12px; color: var(--chalk-dim); }
.store .s-name { font: 700 20px/1.05 var(--f-display); letter-spacing: .5px; text-transform: uppercase; }
a.store { background: var(--chalk); color: var(--on-chalk); border-color: var(--chalk); }
a.store .s-top { color: inherit; opacity: .72; }
.store.is-soon { background: transparent; color: var(--chalk); border-style: dashed; border-color: var(--steel-light); cursor: default; }

/* ---------------------------------------------------------------- header */
.site-head { position: sticky; top: 0; z-index: 30; background: var(--iron-floor); border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.site-head.is-scrolled { border-bottom-color: var(--hairline); }
.head-row { display: flex; align-items: center; gap: 12px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; min-height: 44px; }
.brand svg { width: 30px; height: 30px; flex: none; }
.brand b { font: 700 24px/1 var(--f-display); letter-spacing: 1.2px; text-transform: uppercase; }
.nav { display: none; gap: 4px; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; text-decoration: none; color: var(--chalk-dim); font-size: 15px; font-weight: 500; border-radius: var(--r-button); }
@media (min-width: 760px) { .nav { display: flex; } }
/* the site's own links on every page but the landing (T64); a link exists only when its hub holds something */
.site-nav { display: flex; align-items: center; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 7px; border-radius: var(--r-button); text-decoration: none; color: var(--chalk-dim); font-size: 14px; font-weight: 500; }
.site-nav a[aria-current="page"] { color: var(--chalk); }
.site-nav a + .back { display: none; }
@media (min-width: 520px) { .site-nav { gap: 4px; } .site-nav a { padding: 0 12px; font-size: 15px; } .site-nav a + .back { display: inline-flex; } }
.back { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; text-decoration: none; color: var(--chalk-dim); font-size: 15px; font-weight: 500; }

/* theme toggle: steel track, chalk knob (§4 switch, without ember: it is not the live thing) */
.theme {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; min-height: 44px; padding: 0 6px; border: 0; background: transparent; border-radius: 22px;
  color: var(--chalk-dim); font-size: 14px; font-weight: 500;
}
.theme-track { position: relative; width: 44px; height: 24px; border-radius: 12px; background: var(--steel); flex: none; }
.theme-knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--chalk); transition: transform 180ms cubic-bezier(.2, .8, .2, 1); }
.theme-knob::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--steel); transform: translate(3px, -2px); transition: opacity 180ms ease; }
:root[data-theme="light"] .theme-knob, .theme[data-mode="light"] .theme-knob { transform: translateX(20px); }
.theme[data-mode="light"] .theme-knob::after { opacity: 0; }
.theme-label { display: none; }
@media (min-width: 1024px) { .theme-label { display: inline; } }
.no-js .theme, .no-js .sound, .no-js .first-plate, .no-js .fp-hint { display: none; }

/* ---------------------------------------------------------------- footer */
.site-foot { border-top: 1px solid var(--hairline); padding: 40px 0 48px; margin-top: 0; }
.foot-grid { display: grid; gap: 28px; }
.foot-brand p { margin-top: 12px; color: var(--chalk-dim); max-width: 30em; font-size: 15px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px 0 0; color: var(--chalk); text-decoration: none; font-size: 15px; font-weight: 500; }
.foot-fine { color: var(--chalk-dim); font-size: 13px; grid-column: 1 / -1; }
.foot-sisters { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--hairline); }
.foot-sisters ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 22px; }
.foot-sisters a { display: inline-flex; align-items: center; min-height: 44px; color: var(--chalk-dim); text-decoration: none; font-size: 15px; font-weight: 500; }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 1.4fr 1fr; align-items: end; } .foot-side { justify-self: end; text-align: right; } .foot-links { justify-content: flex-end; } }

/* ---------------------------------------------------------------- drawing parts (shared with the app's painters) */
.bb-bar { fill: var(--steel); }
.bb-sleeve { fill: var(--steel-light); }
.bb-collar { fill: var(--collar); }
.pl-body.pl-chalk { fill: var(--chalk); }
.pl-body.pl-ember { fill: var(--ember); }
.pl-shade-chalk { fill: var(--chalk-shade); }
.pl-shade-ember { fill: var(--ember-shade); }
.pl-hl { stroke: var(--plate-hl); stroke-width: 1; stroke-linecap: round; }
.pl-glow { fill: var(--ember-glow); }
.pl-dashed { fill: var(--iron-floor); stroke: var(--ember); stroke-width: 2; stroke-dasharray: 5 4; }
/* ember-able parts rest in chalk unless they are the one live element (§11) */
.ember-able .pl-body.pl-ember { fill: var(--chalk); transition: fill 360ms ease; }
.ember-able .pl-shade-ember { fill: var(--chalk-shade); transition: fill 360ms ease; }
.ember-able .pl-glow { opacity: 0; transition: opacity 360ms ease; }
.ember-able.is-live .pl-body.pl-ember { fill: var(--ember); }
.ember-able.is-live .pl-shade-ember { fill: var(--ember-shade); }
.ember-able.is-live .pl-glow { opacity: 1; }
.ember-able .pm-label { fill: var(--on-chalk); transition: fill 360ms ease; }
.ember-able.is-live .pm-label { fill: var(--on-ember); }
.pm-label { font-family: var(--f-display); font-weight: 700; }
.ember-able .pm-label.is-out, .pm-label.is-out { fill: var(--chalk-dim); }

/* ---------------------------------------------------------------- sections */
.band { border-top: 1px solid var(--hairline); padding-block: clamp(72px, 11vw, 136px); position: relative; }
.band-head { display: grid; gap: 18px; margin-bottom: clamp(36px, 6vw, 64px); }
.band-head .h2 { max-width: 14em; }
@media (min-width: 1024px) {
  .band-head.split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 56px; align-items: end; }
  .band-head.split .overline { grid-column: 1 / -1; }
}
.bleed { width: 100vw; margin-left: calc(50% - 50vw); }

/* ---- hero: the week bar, life size */
.hero { padding-top: clamp(28px, 6vw, 72px); padding-bottom: clamp(48px, 7vw, 88px); }
.hero-top { display: grid; gap: 20px; }
.hero .overline { display: flex; align-items: center; gap: 10px; }
.hero-week { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; }
.hero-week .total { font: 700 clamp(44px, 9vw, 72px)/.95 var(--f-display); }
.hero-week .meta { font-size: 14px; }
@media (min-width: 1024px) {
  .hero-top { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 48px; }
  .hero-week { flex-direction: column; align-items: flex-end; text-align: right; gap: 2px; }
}
.wb { position: relative; margin-top: clamp(20px, 4vw, 44px); padding-inline: max(8px, calc(var(--gutter) / 2)); touch-action: pan-y; }
.wb-stage { position: relative; height: var(--wb-h, 168px); }
.wb-stage > svg { width: 100%; height: 100%; overflow: visible; }
.wb-label { font: 500 12px var(--f-body); fill: var(--chalk-dim); }
.wb-label.is-today { fill: var(--chalk); font-weight: 700; transition: fill 360ms ease; }
.ember-able.is-live .wb-label.is-today { fill: var(--ember-text); }
.ember-able .pl-dashed { stroke: var(--steel-light); transition: stroke 360ms ease; }
.ember-able.is-live .pl-dashed { stroke: var(--ember); }
.wb-day { outline: none; cursor: default; }
.wb-day:focus-visible .wb-focus { stroke: var(--chalk); }
.wb-focus { fill: none; stroke: transparent; stroke-width: 2; }
.wb-readout {
  position: absolute; z-index: 3; left: 0; top: 0; pointer-events: none;
  transform: translate(-50%, -100%); min-width: 92px; max-width: 180px;
  padding: 7px 12px 8px; background: var(--iron-raised); border: 1px solid var(--hairline); border-radius: var(--r-button);
  text-align: center; opacity: 0; transition: opacity 120ms ease;
}
.wb-readout.on { opacity: 1; }
.wb-readout b { display: block; font: 700 20px/1.1 var(--f-display); white-space: nowrap; }
.wb-readout span { display: block; font-size: 12px; color: var(--chalk-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-foot { display: grid; gap: 24px; margin-top: clamp(28px, 5vw, 56px); }
.hero-foot .hint { color: var(--chalk-dim); font-size: 14px; }
@media (min-width: 1024px) { .hero-foot { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 48px; } }
.hero-cta { display: grid; gap: 12px; }
.hero-cta .meta { font-size: 14px; }
/* in JS browsers the plates rack on; hide the server copy until the script draws */
.js .wb-stage .wb-svg .wb-plates, .js [data-live-draw] .static-only { visibility: hidden; }
.js .is-drawn .wb-svg .wb-plates, .js .is-drawn .static-only { visibility: visible; }

/* ---- plate maths */
.pm { display: grid; gap: 28px; }
.pm-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.stepper { display: inline-flex; align-items: center; gap: 6px; }
.step-btn {
  width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--hairline);
  background: var(--iron-raised); color: var(--chalk); display: inline-grid; place-items: center; padding: 0;
}
.step-btn svg { width: 20px; height: 20px; }
.step-btn svg path { stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; fill: none; }
.pm-weight { display: inline-flex; align-items: baseline; padding: 0 6px; }
.pm-weight input {
  width: 5.2ch; padding: 0; border: 0; background: transparent; text-align: right;
  font: 700 clamp(72px, 16vw, 132px)/.95 var(--f-display); letter-spacing: -.5px; color: var(--chalk);
  font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield;
  border-bottom: 2px solid transparent; border-radius: 0;
}
.pm-weight input:focus { outline: none; border-bottom-color: var(--steel-light); }
.pm-weight input::-webkit-outer-spin-button, .pm-weight input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pm-weight .unit { font-size: clamp(26px, 5vw, 44px); font-family: var(--f-display); font-weight: 700; }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: var(--iron-raised); }
.seg button { min-width: 64px; min-height: 44px; border: 0; border-radius: var(--r-button); background: transparent; color: var(--chalk-dim); font: 700 18px/1 var(--f-display); letter-spacing: .5px; text-transform: uppercase; }
.seg button[aria-pressed="true"] { background: var(--chalk); color: var(--on-chalk); }
.pm-stage { position: relative; height: var(--pm-h, 120px); }
.pm-stage > svg { width: 100%; height: 100%; overflow: visible; }
.pm-caption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.pm-caption .cap { font: 700 clamp(24px, 4.2vw, 34px)/1.05 var(--f-display); letter-spacing: .3px; }
.pm-caption .rem { color: var(--chalk-dim); font-size: 14px; }

/* countRoll digits (§10): each digit is a column that rolls 220 ms */
.roll { display: inline-flex; overflow: hidden; height: 1em; line-height: 1; vertical-align: baseline; }
.roll .c { display: inline-block; position: relative; height: 1em; }
.roll .col { display: flex; flex-direction: column; transition: transform 220ms cubic-bezier(.16, 1, .3, 1); }
.roll .col span { height: 1em; line-height: 1; text-align: center; }
.roll .sep { display: inline-block; height: 1em; line-height: 1; }

/* ---- coach */
.coach { display: grid; gap: 36px; }
@media (min-width: 1024px) { .coach { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 72px; align-items: start; } }
.co-controls { display: grid; gap: 18px; margin-bottom: 32px; }
.co-q { display: grid; gap: 10px; }
.co-q .overline { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; min-width: 56px; padding: 0 16px; border-radius: var(--r-button); border: 0; background: var(--iron-raised); color: var(--chalk); font-weight: 600; font-size: 15px; }
.chip[aria-pressed="true"] { background: var(--chalk); color: var(--on-chalk); }
.co-last { display: grid; gap: 10px; padding: 18px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.co-last-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.co-last-row .v { font: 700 26px/1 var(--f-display); }
.reps-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.reps-track span { height: 10px; border-radius: 3px; background: var(--steel); }
.reps-track span.on { background: var(--chalk); }
.reps-legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; font-size: 12px; color: var(--chalk-dim); text-align: center; }
.co-out { display: grid; gap: 12px; }
.delta { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 8px; background: var(--iron-raised); font: 700 18px/1 var(--f-display); letter-spacing: .3px; }
.co-rule { display: grid; gap: 14px; align-content: start; }

/* ---- progress */
.prog-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 28px; }
.stat b { display: block; font: 700 clamp(32px, 6vw, 46px)/1 var(--f-display); }
.stat > span { display: block; margin-top: 6px; font-size: 13px; color: var(--chalk-dim); }
.tr { position: relative; }
.tr-stage { position: relative; height: clamp(220px, 34vw, 340px); }
.tr-stage > svg { width: 100%; height: 100%; overflow: visible; }
.tr-grid { stroke: var(--hairline); stroke-width: 1; }
.tr-line { fill: none; stroke: var(--chalk); stroke-opacity: .9; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tr-dot { fill: var(--chalk); }
.tr-ring { fill: var(--iron-floor); }
.tr-last { fill: var(--chalk); transition: fill 360ms ease; }
.ember-able.is-live .tr-last { fill: var(--ember); }
.tr-value { font: 700 18px var(--f-display); fill: var(--chalk); font-variant-numeric: tabular-nums; }
.ember-able.is-live .tr-value { fill: var(--ember-text); }
.tr-date { font: 500 12px var(--f-body); fill: var(--chalk-dim); }
.tr-hover { fill: var(--chalk); }
.tr-readout { position: absolute; top: 0; left: 0; pointer-events: none; transform: translate(-50%, -100%); padding: 7px 12px 8px; background: var(--iron-raised); border: 1px solid var(--hairline); border-radius: var(--r-button); text-align: center; opacity: 0; transition: opacity 120ms ease; white-space: nowrap; }
.tr-readout.on { opacity: 1; }
.tr-readout b { display: block; font: 700 18px/1.1 var(--f-display); }
.tr-readout span { font-size: 12px; color: var(--chalk-dim); }
.pro-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--chalk-dim); }
.pro-tag b { font: 700 14px/1 var(--f-display); letter-spacing: .6px; padding: 4px 7px 3px; border-radius: 6px; background: var(--chalk); color: var(--on-chalk); }

/* ---- friends board */
.fr { display: grid; gap: 40px; }
@media (min-width: 1024px) { .fr { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 72px; align-items: start; } .fr-copy { order: 2; } }
.board { position: relative; list-style: none; margin: 0; padding: 0; }
.board li { position: relative; display: grid; grid-template-columns: 40px 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 66px; padding: 0 14px 0 8px; border-bottom: 1px solid var(--hairline); background: var(--iron-floor); border-radius: 0; }
.board li.you { border: 1px solid var(--steel-light); border-radius: var(--r-button); transition: border-color 360ms ease, box-shadow 360ms ease; }
.board li.you.ember-able.is-live { border-color: var(--ember); box-shadow: 0 0 0 3px var(--ember-glow); }
.rank { width: 32px; height: 32px; display: grid; place-items: center; font: 700 17px/1 var(--f-display); color: var(--chalk-dim); }
.rank.stamped { border-radius: 50%; background: var(--chalk); color: var(--on-chalk); box-shadow: inset 0 0 0 3px var(--chalk), inset 0 0 0 4.5px var(--on-chalk); }
.av { width: 42px; height: 42px; border-radius: 50%; background: var(--iron-raised); display: grid; place-items: center; font: 700 15px/1 var(--f-display); letter-spacing: .4px; color: var(--chalk); }
.who { font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who small { display: block; font-weight: 400; font-size: 13px; color: var(--chalk-dim); }
.val { font: 700 22px/1 var(--f-display); text-align: right; white-space: nowrap; }
.val .unit { font-size: .6em; }
.board-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }

/* ---- tools (T64): each tool's drawing standing over its name; drawn only for registered tools */
.tcards { display: grid; border-top: 1px solid var(--hairline); }
.tcard { display: grid; gap: 10px; align-content: start; padding: 28px 0; border-bottom: 1px solid var(--hairline); text-decoration: none; }
.tcard-art { display: flex; align-items: flex-end; min-height: 132px; margin-bottom: 6px; }
.tcard-art .art { display: block; width: 100%; }
.tcard-art svg { width: 100%; height: auto; overflow: visible; }
.tcard-name { font: 700 30px/1 var(--f-display); letter-spacing: .5px; text-transform: uppercase; }
.tcard-line { color: var(--chalk-dim); font-size: 15px; line-height: 1.5; }
@media (min-width: 900px) {
  .tcards { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; }
  .tcard { padding: 4px 36px 4px; border-bottom: 0; border-left: 1px solid var(--hairline); }
  .tcard:first-child { padding-left: 0; border-left: 0; }
  .tcard-art { min-height: 190px; }
}
/* the card drawings (partials/tool-art) */
.art { display: block; width: 100%; }
.art svg { width: 100%; height: auto; overflow: visible; }
.art-steps { display: grid; gap: 8px; }
.art-step { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 12px; }
.art-w { font: 700 26px/1 var(--f-display); text-align: right; }
.art-w small { margin-left: 3px; font-size: .5em; color: var(--chalk-dim); }
/* only the top bar of a rack may glow; the rest are pale */
.art-rest .pl-body.pl-ember { fill: var(--chalk); }
.art-rest .pl-shade-ember { fill: var(--chalk-shade); }
.art-rest .pm-label { fill: var(--on-chalk); }
.art-rest .pm-label.is-out { fill: var(--chalk-dim); }
.sh-paper { fill: var(--iron-plate); stroke: var(--steel); }
.sh-slot { fill: none; stroke: var(--steel-light); stroke-width: 1.5; stroke-dasharray: 3 3; }
.sh-ink { fill: var(--chalk); }
.sh-box { fill: none; stroke: var(--steel-light); stroke-width: 1.5; }
.sh-faint { fill: var(--steel); }
.pm-more { margin-top: 18px; }
.pm-more a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-underline-offset: 3px; text-decoration-color: var(--steel-light); }

/* ---- free and pro */
.plans { display: grid; gap: 0; border-top: 1px solid var(--hairline); }
@media (min-width: 900px) { .plans { grid-template-columns: 1fr 1fr; border-top: 0; gap: 24px; } }
.plan { padding: 28px 0; display: grid; gap: 18px; align-content: start; }
.plan.pro { background: var(--chalk); color: var(--on-chalk); border-radius: var(--r-surface); padding: 28px 24px; }
@media (min-width: 900px) { .plan { padding: 32px; } .plan.free { border: 1px solid var(--hairline); border-radius: var(--r-surface); } .plan.pro { padding: 32px; } }
.plan .h3 { font-size: 34px; }
.plan .meta { font-size: 15px; }
.plan.pro .meta { color: inherit; opacity: .74; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; }
.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; padding: 11px 0; border-top: 1px solid var(--hairline); font-size: 16px; }
.plan.pro .ticks li { border-top-color: rgba(127, 120, 110, .28); }
.ticks li::before { content: ""; width: 12px; height: 12px; margin-top: 6px; border-radius: 50%; background: currentColor; }
.plan.free .ticks li::before { background: transparent; border: 2px solid var(--steel-light); }
.plan-terms { font-size: 14px; }
.plans-note { margin-top: 20px; color: var(--chalk-dim); font-size: 14px; max-width: 46em; }

/* ---- comparison */
.cmp { width: 100%; border-collapse: collapse; }
.cmp caption { text-align: left; }
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: 18px 16px 18px 0; border-bottom: 1px solid var(--hairline); font-size: 16px; }
.cmp thead th { font: 600 12px/1.3 var(--f-body); letter-spacing: 1.4px; text-transform: uppercase; color: var(--chalk-dim); padding-top: 0; }
.cmp tbody th { font: 700 22px/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .4px; width: 30%; }
.cmp td.us { font-weight: 600; }
.cmp td.them { color: var(--chalk-dim); }
@media (max-width: 719px) {
  .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cmp tr { display: grid; grid-template-columns: 1fr; padding: 16px 0; border-bottom: 1px solid var(--hairline); }
  .cmp th, .cmp td { border: 0; padding: 4px 0; width: auto; }
  .cmp tbody th { width: auto; margin-bottom: 4px; }
  .cmp td::before { content: attr(data-k); display: block; font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--chalk-dim); margin-bottom: 2px; }
}

/* ---- questions */
.faq { display: grid; gap: 32px; }
@media (min-width: 1024px) { .faq { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 72px; } .faq-head { position: sticky; top: 96px; align-self: start; } }
.qa { border-top: 1px solid var(--hairline); }
.qa details { border-bottom: 1px solid var(--hairline); }
.qa summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 14px 0; cursor: pointer; font-weight: 600; font-size: 17px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary h3 { font: inherit; }
.qa .pm-mark { flex: none; width: 28px; height: 28px; position: relative; transition: transform 260ms cubic-bezier(.3, 1.5, .5, 1); }
.qa details[open] .pm-mark { transform: rotate(180deg); }
.qa .pm-mark::before, .qa .pm-mark::after { content: ""; position: absolute; left: 6px; right: 6px; top: 13px; height: 2px; border-radius: 1px; background: var(--steel-light); transition: transform 180ms ease; }
.qa .pm-mark::after { transform: rotate(90deg); }
.qa details[open] .pm-mark::after { transform: rotate(0); }
.qa .a { padding: 0 0 22px; color: var(--chalk-dim); max-width: 40em; }
.qa .a p + p { margin-top: 10px; }

/* ---- final call */
.final .h2 { max-width: 12em; }
.final-grid { display: grid; gap: 24px; margin-top: 28px; }
@media (min-width: 1024px) { .final-grid { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }

/* ---- chalk dust (chalkBurst, §10) */
.burst { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.burst i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--chalk); opacity: .0; }

/* ---------------------------------------------------------------- pages: legal, contact, code, reset, 404 */
.page { padding-block: clamp(40px, 8vw, 88px) clamp(64px, 10vw, 112px); }
.page-head { display: grid; gap: 14px; margin-bottom: clamp(32px, 6vw, 56px); max-width: 52em; }
.page-head .h1 { font-size: clamp(44px, 9vw, 88px); }
.last-updated { color: var(--chalk-dim); font-size: 14px; }
.prose { max-width: 46em; }
.prose .intro { font-size: 18px; line-height: 1.6; color: var(--chalk); padding-bottom: 32px; margin-bottom: 8px; border-bottom: 1px solid var(--hairline); }
.prose .section { padding: 28px 0; border-bottom: 1px solid var(--hairline); }
.prose h2 { font: 700 26px/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 12px; }
.prose h3 { font: 600 16px/1.4 var(--f-body); margin: 18px 0 6px; }
.prose p, .prose li { color: var(--chalk-dim); font-size: 16px; }
.prose p + p { margin-top: 12px; }
.prose strong { color: var(--chalk); font-weight: 600; }
.prose a { color: var(--chalk); text-decoration: underline; text-decoration-color: var(--steel-light); text-underline-offset: 3px; }
.prose ul { margin: 10px 0 0; padding-left: 20px; }
.prose li + li { margin-top: 6px; }

.rows { border-top: 1px solid var(--hairline); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 66px; padding: 12px 0; border-bottom: 1px solid var(--hairline); text-decoration: none; }
.row-k { font-size: 13px; color: var(--chalk-dim); }
.row-v { font-weight: 600; font-size: 17px; overflow-wrap: anywhere; }
.row .chev { width: 18px; height: 18px; }
.row .chev path { stroke: var(--steel-icon); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.contact-grid { display: grid; gap: 48px; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 72px; } }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; margin-top: 14px; }
.facts dt { font-size: 13px; color: var(--chalk-dim); }
.facts dd { margin: 2px 0 0; font-weight: 500; }
@media (max-width: 520px) { .facts { grid-template-columns: 1fr; } }

/* forms (code page, reset password) */
.form-card { background: var(--iron-plate); border-radius: var(--r-surface); padding: 24px 20px; max-width: 460px; }
@media (min-width: 600px) { .form-card { padding: 32px; } }
.field { display: grid; gap: 8px; margin-bottom: 18px; }
.field label, .form-label { font-size: 14px; font-weight: 600; }
.input, .form-input, .promo-input {
  width: 100%; min-height: 52px; padding: 0 16px; border-radius: var(--r-button);
  border: 1px solid var(--hairline); background: var(--iron-raised); color: var(--chalk); font-size: 16px;
}
.input:focus, .form-input:focus, .promo-input:focus { outline: none; border-color: var(--chalk); }
.hint { font-size: 13px; color: var(--chalk-dim); }
.error, .error-message { color: var(--danger); font-size: 14px; }
.error { padding: 12px 14px; border: 1px solid var(--danger); border-radius: var(--r-button); margin-bottom: 18px; }
.btn-block { width: 100%; }
.mini-bar { margin: 6px 0 28px; height: 40px; }

/* the rolling plate: the world's loading mark (§4, loading spinner) */
.spinner { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: currentColor; position: relative; animation: roll 900ms linear infinite; vertical-align: middle; }
.spinner::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--iron-floor); }
.spinner::after { content: ""; position: absolute; left: 9px; top: 2px; width: 4px; height: 4px; border-radius: 50%; background: var(--iron-floor); }
@keyframes roll { to { transform: rotate(360deg); } }

/* 404 */
.lost { display: grid; gap: 20px; }
.lost .h1 { font-size: clamp(64px, 16vw, 168px); }

/* ---------------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .press:active { transform: none; }
}

/* ================================================================ phones (T59)
   A drawn phone: dark hardware in both themes; the screen follows the page
   theme. Screens are laid out at 390 x 844 logical px, sizes measured off the
   app's own captures, then scaled by --k. Any screen can be swapped for a real
   capture (config site.phone_captures). Ember inside a phone shows only while
   that phone is the page's live element (§11); the active tab may join it,
   as in the app. */
.phone { --k: .62; position: relative; flex: none; margin: 0; width: calc(390px * var(--k) + 2 * var(--bz)); --bz: calc(4px + 9px * var(--k)); }
.phone-body {
  position: relative; padding: var(--bz); border-radius: calc(54px * var(--k) + var(--bz));
  background: #23201D; box-shadow: inset 0 0 0 1px #3A3530, inset 0 0 0 calc(var(--bz) - 2px) #1A1816, 0 18px 36px -24px rgba(0, 0, 0, .55);
}
:root[data-theme="light"] .phone-body { box-shadow: inset 0 0 0 1px #4A443E, inset 0 0 0 calc(var(--bz) - 2px) #1A1816, 0 22px 40px -26px rgba(60, 40, 20, .45); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .phone-body { box-shadow: inset 0 0 0 1px #4A443E, inset 0 0 0 calc(var(--bz) - 2px) #1A1816, 0 22px 40px -26px rgba(60, 40, 20, .45); } }
.phone-body::before { content: ""; position: absolute; left: calc(-1px - 1px * var(--k)); top: calc(160px * var(--k)); width: 3px; height: calc(64px * var(--k)); border-radius: 2px; background: #2E2A26; }
.phone-body::after { content: ""; position: absolute; right: calc(-1px - 1px * var(--k)); top: calc(200px * var(--k)); width: 3px; height: calc(96px * var(--k)); border-radius: 2px; background: #2E2A26; }
.phone-screen { position: relative; width: calc(390px * var(--k)); height: calc(844px * var(--k)); border-radius: calc(46px * var(--k)); overflow: hidden; background: var(--iron-floor); isolation: isolate; }
.phone-screen > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.scr { position: absolute; left: 0; top: 0; width: 390px; height: 844px; transform: scale(var(--k)); transform-origin: 0 0; background: var(--iron-floor); color: var(--chalk); font: 400 15px/1.35 var(--f-body); overflow: hidden; }
.island { position: absolute; z-index: 5; left: 50%; top: calc(11px * var(--k)); width: calc(120px * var(--k)); height: calc(34px * var(--k)); margin-left: calc(-60px * var(--k)); border-radius: 20px; background: #0B0A09; }
.phone figcaption, .phone-cap { margin-top: 14px; text-align: center; font: 700 18px/1.1 var(--f-display); letter-spacing: .5px; text-transform: uppercase; }

/* status bar */
.sb { height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 6px 30px 0 34px; font: 600 16px/1 var(--f-body); }
.sb svg { height: 13px; width: auto; }
.sb-r { display: flex; gap: 6px; align-items: center; }
.sb { color: var(--chalk); }

/* type */
.p-title { font: 700 34px/1 var(--f-display); letter-spacing: .5px; text-transform: uppercase; }
.p-over { font: 600 12px/1.2 var(--f-body); letter-spacing: 1.4px; text-transform: uppercase; color: var(--chalk-dim); }
.p-meta { font-size: 13px; color: var(--chalk-dim); }
.p-pad { padding: 0 24px; }
.p-rule { height: 1px; background: var(--hairline); margin: 0 24px; }
.p-unit { font-size: .36em; color: var(--chalk-dim); margin-left: 3px; letter-spacing: 0; }
.p-num { font-family: var(--f-display); font-weight: 700; font-variant-numeric: tabular-nums; }

/* chips, buttons, rows */
.p-chips { display: flex; gap: 8px; padding: 0 24px; }
.p-chip { height: 40px; padding: 0 16px; display: inline-flex; align-items: center; border-radius: 10px; background: var(--iron-raised); font: 500 14px/1 var(--f-body); color: var(--chalk); white-space: nowrap; }
.p-chip.on { background: var(--chalk); color: var(--on-chalk); }
.p-slab { display: flex; align-items: center; justify-content: center; height: 56px; border-radius: 16px; font: 700 24px/1 var(--f-display); letter-spacing: .5px; text-transform: uppercase; background: var(--chalk); color: var(--on-chalk); border: 0; width: 100%; }
.p-ember .p-slab.p-act, .phone .p-slab.p-act { transition: background-color 360ms ease, color 360ms ease; }
.ember-able.is-live .p-slab.p-act { background: var(--ember); color: var(--on-ember); }
.p-circle { width: 44px; height: 44px; border-radius: 50%; background: var(--iron-raised); display: grid; place-items: center; flex: none; }
.p-circle svg { width: 16px; height: 16px; }
.p-circle path { stroke: var(--chalk); stroke-width: 2; fill: none; stroke-linecap: round; }
.p-group { margin: 0 24px; background: var(--iron-plate); border-radius: 16px; overflow: hidden; }
.p-row { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 66px; padding: 0 16px 0 12px; }
.p-row + .p-row::before { content: ""; position: absolute; top: 0; left: 66px; right: 0; height: 1px; background: var(--hairline); }
.p-tile { position: relative; width: 42px; height: 42px; border-radius: 10px; background: var(--iron-raised); display: grid; place-items: center; font: 700 20px/1 var(--f-display); }
.p-tile i { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--iron-plate); }
.p-rt { font: 600 16px/1.25 var(--f-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-rm { font-size: 13px; color: var(--chalk-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-rv { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--chalk-dim); white-space: nowrap; }
.p-rv b { font: 700 22px/1 var(--f-display); color: var(--chalk); }
.p-rv b small { font-size: 12px; color: var(--chalk-dim); margin-left: 2px; }
.p-chev { width: 8px; height: 13px; }
.p-chev path { stroke: var(--steel-icon); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.p-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 24px; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.p-stats > div { padding: 14px 0 14px 0; }
.p-stats > div + div { border-left: 1px solid var(--hairline); padding-left: 14px; }
.p-stats b { display: block; font: 700 38px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.p-stats b small { font-size: 17px; color: var(--chalk-dim); margin-left: 3px; }
.p-stats > div > span { display: block; margin-top: 6px; font-size: 13px; color: var(--chalk-dim); }
.p-wb { padding: 0 24px; height: 134px; }
.p-wb svg { width: 342px; height: 134px; overflow: visible; }
.p-ember-text { color: var(--chalk); transition: color 360ms ease; }
.ember-able.is-live .p-ember-text { color: var(--ember-text); }

/* tab bar (ironBar, hairline on top) */
.tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 86px; background: var(--iron-bar); border-top: 1px solid var(--hairline); display: grid; grid-template-columns: repeat(5, 1fr); padding: 8px 6px 0; }
.tab { display: grid; justify-items: center; align-content: start; gap: 5px; font: 500 11px/1 var(--f-body); color: var(--chalk-dim); }
.tab svg { width: 24px; height: 24px; }
.tab.on { color: var(--chalk); font-weight: 700; }
.ember-able.is-live .tab.on { color: var(--ember-text); }

/* workout header: close, title line, progress segments, elapsed */
.wh { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 6px 20px 0; height: 64px; }
.wh-mid { display: grid; gap: 8px; }
.wh-mid .p-meta { font-size: 12px; }
.segs { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; }
.segs i { height: 4px; border-radius: 2px; background: var(--steel); }
.segs i.d { background: var(--chalk); }
.segs i.c { background: var(--chalk); transition: background-color 360ms ease; }
.ember-able.is-live .segs i.c { background: var(--ember); }
.wh-t { font: 700 22px/1 var(--f-display); font-variant-numeric: tabular-nums; }

/* set screen */
.media { margin: 10px 20px 0; height: 118px; border-radius: 16px; background: var(--iron-raised); position: relative; display: grid; place-items: center; }
.media svg { width: 54px; height: 30px; }
.media svg rect { fill: var(--steel-icon); }
.media .p-circle { position: absolute; left: 12px; bottom: 12px; width: 36px; height: 36px; background: var(--iron-floor); }
.media .p-circle i { width: 3px; height: 3px; border-radius: 50%; background: var(--chalk); box-shadow: -6px 0 0 var(--chalk), 6px 0 0 var(--chalk); }
.ss-head { padding: 18px 24px 0; }
.ss-type { display: flex; gap: 10px; align-items: baseline; }
.ss-name { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: 8px; }
.ss-name .p-title { font-size: 34px; line-height: .98; }
.sdots { display: flex; gap: 6px; padding-bottom: 6px; }
.sdots i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--steel-light); }
.sdots i.d { background: var(--chalk); border-color: var(--chalk); }
.sdots i.c { border-color: var(--chalk); background: var(--chalk); transition: background-color 360ms ease, border-color 360ms ease; }
.ember-able.is-live .sdots i.c { background: var(--ember); border-color: var(--ember); }
.wr { display: grid; grid-template-columns: 1fr 1fr; margin: 14px 24px 0; border-top: 1px solid var(--hairline); }
.wr > div { padding-top: 12px; }
.wr > div + div { border-left: 1px solid var(--hairline); padding-left: 22px; }
.wr .big { font: 700 84px/.95 var(--f-display); font-variant-numeric: tabular-nums; letter-spacing: -.5px; margin-top: 6px; }
.wr .big small { font-size: 28px; color: var(--chalk-dim); margin-left: 4px; letter-spacing: 0; }
.ss-line { padding: 0 24px; margin-top: 14px; font-size: 15px; color: var(--chalk-dim); }
.ss-line b { color: var(--chalk); font-weight: 600; }
.ss-try { display: flex; justify-content: space-between; padding: 0 24px; margin-top: 16px; font-size: 15px; color: var(--chalk-dim); }
.ss-try b { color: var(--chalk); font-weight: 600; }
.ss-try span:last-child { color: var(--chalk); font-weight: 600; }
.ss-pm { position: relative; padding: 0 24px; margin-top: 10px; height: 72px; }
.ss-pm svg { width: 342px; height: 72px; overflow: visible; }
.ss-pm .cap { position: absolute; left: 0; right: 0; top: 2px; text-align: center; font-size: 11px; color: var(--chalk-dim); }
.ss-next { position: absolute; left: 24px; right: 24px; bottom: 100px; display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; }
.ss-next .p-tile { width: 40px; height: 40px; }
.ss-next .p-tile svg { width: 22px; height: 12px; }
.ss-next .p-tile svg rect { fill: var(--steel-icon); }
.ss-next b { display: block; font-size: 15px; font-weight: 600; }
.p-foot { position: absolute; left: 20px; right: 20px; bottom: 30px; }

/* rest screen */
.rs { padding: 14px 24px 0; }
.rs-label { font: 600 12px/1 var(--f-body); letter-spacing: 1.4px; color: var(--chalk-dim); transition: color 360ms ease; }
.ember-able.is-live .rs-label { color: var(--ember-text); }
.rs-clock { font: 700 124px/1 var(--f-display); letter-spacing: -1px; margin: 12px 0 14px; font-variant-numeric: tabular-nums; }
.rs-track { height: 8px; border-radius: 4px; background: var(--steel); overflow: hidden; }
.rs-track i { display: block; height: 100%; width: 100%; border-radius: 4px; background: var(--chalk); transform-origin: left; transition: background-color 360ms ease; }
.ember-able.is-live .rs-track i { background: var(--ember); }
.rs-adj { display: flex; gap: 8px; margin-top: 16px; }
.rs-adj .p-chip { height: 42px; color: var(--chalk-dim); }
.rs-done { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hairline); font-size: 15px; color: var(--chalk-dim); }
.rs-done b { color: var(--chalk); font-weight: 600; }
.rs-hard { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; font-size: 15px; }
.rs-hard b { font-weight: 600; }
.rs-rpe { display: flex; gap: 8px; margin-top: 10px; }
.rs-rpe span { width: 42px; height: 42px; border-radius: 10px; background: var(--iron-raised); display: grid; place-items: center; font-size: 15px; color: var(--chalk-dim); }
.rs-rpe span.on { background: var(--chalk); color: var(--on-chalk); font-weight: 600; }
.rs-next { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.rs-next .h { font: 700 26px/1 var(--f-display); text-transform: uppercase; letter-spacing: .4px; margin-top: 8px; }
.rs-next .row { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.rs-next .w { font: 700 40px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.rs-next .w small { font-size: 15px; color: var(--chalk-dim); }
.p-btn { height: 40px; padding: 0 16px; border-radius: 10px; background: var(--iron-raised); display: inline-flex; align-items: center; font-weight: 600; font-size: 15px; }

/* record */
.rec { margin: 16px 24px 0; padding: 16px; border-radius: 16px; background: var(--iron-plate); display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: end; }
.rec .p-over { grid-column: 1 / -1; transition: color 360ms ease; }
/* a record is ember only while new (one second); the button rests meanwhile, so one thing glows */
.ember-able.is-live.has-new .rec .p-over, .ember-able.is-live.has-new .rec .v { color: var(--ember-text); }
.ember-able.is-live.has-new .p-slab.p-act { background: var(--chalk); color: var(--on-chalk); }
.rec .v { transition: color 360ms ease; }
.rec b { font-weight: 600; font-size: 16px; }
.rec .v { font: 700 30px/1 var(--f-display); text-align: right; font-variant-numeric: tabular-nums; }

/* summary */
.sm-top { display: flex; justify-content: space-between; padding: 8px 20px 0; }
.sm-top div { display: flex; gap: 12px; }
.sm-h { padding: 14px 24px 0; }
.sm-h .p-title { font-size: 40px; }
.sm-h .p-meta { margin-top: 6px; font-size: 14px; }
.recs { margin: 0 24px; background: var(--iron-plate); border-radius: 16px; }
.recs > div { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 14px 16px; align-items: center; }
.recs > div + div { border-top: 1px solid var(--hairline); }
.recs b { font-weight: 600; font-size: 16px; }
.recs .k { font-size: 12px; color: var(--chalk-dim); text-align: right; }
.recs .m { font-size: 12px; color: var(--chalk-dim); }
.recs .v { font: 700 22px/1 var(--f-display); text-align: right; color: var(--chalk); transition: color 360ms ease; font-variant-numeric: tabular-nums; }

/* exercise page */
.ex-top { display: flex; justify-content: space-between; padding: 8px 20px 0; }
.ex-chart { margin: 0 24px; height: 130px; }
.ex-chart svg { width: 342px; height: 130px; overflow: visible; }
.ex-msg { padding: 0 24px; margin-top: 6px; font-size: 14px; color: var(--chalk); }
.kv { margin: 0 24px; background: var(--iron-plate); border-radius: 16px; }
.kv > div { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; min-height: 56px; }
.kv > div + div { border-top: 1px solid var(--hairline); }
.kv b { display: block; font-weight: 600; font-size: 15px; }
.kv span { font-size: 12px; color: var(--chalk-dim); }
.kv .v { font: 700 20px/1 var(--f-display); font-variant-numeric: tabular-nums; }

/* boards + feed */
.bd-tabs { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 24px; padding: 3px; gap: 2px; border-radius: 12px; background: var(--iron-raised); }
.bd-tabs span { height: 36px; display: grid; place-items: center; border-radius: 10px; font: 600 13px/1 var(--f-body); color: var(--chalk-dim); }
.bd-tabs span.on { background: var(--chalk); color: var(--on-chalk); }
.phone .board { margin: 0 24px; }
.phone .board li { grid-template-columns: 34px 40px minmax(0, 1fr) auto; gap: 10px; min-height: 60px; padding: 0 12px 0 4px; }
.phone .board .av { width: 40px; height: 40px; font-size: 14px; }
.phone .board .who { font-size: 15px; }
.phone .board .val { font-size: 21px; }
.feed { margin: 0 24px; padding: 14px 16px; border-radius: 16px; background: var(--iron-plate); display: grid; grid-template-columns: 40px 1fr; gap: 4px 12px; }
.feed .av { width: 40px; height: 40px; font-size: 14px; grid-row: span 3; }
.feed b { font-weight: 600; font-size: 15px; }
.feed .p-meta { font-size: 12px; margin-left: 6px; }
.feed .line { font-size: 14px; }
.feed .acts { display: flex; gap: 8px; margin-top: 8px; }
.kudo { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 10px; background: var(--iron-raised); font-size: 13px; font-weight: 600; }
.kudo i { width: 10px; height: 10px; border-radius: 50%; background: var(--chalk); }

/* why sheet (coach) */
.dim::after { content: ""; position: absolute; inset: 0; background: rgba(10, 9, 8, .55); z-index: 3; }
.sheet { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; padding: 12px 24px 30px; background: var(--iron-plate); border-radius: 16px 16px 0 0; }
.sheet .grab { width: 40px; height: 5px; border-radius: 3px; background: var(--steel-light); margin: 0 auto 18px; }
.sheet .p-title { font-size: 28px; }
.sheet p { margin-top: 12px; font-size: 16px; line-height: 1.45; }
.sheet .tip { font-size: 13px; color: var(--chalk-dim); }
.sheet .p-slab { margin-top: 18px; height: 50px; font-size: 20px; }

/* ================================================================ the workout section */
.wk { display: grid; gap: 32px; }
.wk-steps { list-style: none; margin: 0; padding: 0; counter-reset: wk; }
.wk-step { counter-increment: wk; }
.wk-step button { display: grid; grid-template-columns: 52px 1fr; gap: 4px 14px; width: 100%; padding: 18px 0; border: 0; border-top: 1px solid var(--hairline); background: transparent; text-align: left; color: var(--chalk-dim); }
.wk-step button::before { content: "0" counter(wk); grid-row: span 2; font: 700 40px/1 var(--f-display); color: var(--steel-light); transition: color 200ms ease; }
.wk-step b { font: 700 26px/1.05 var(--f-display); text-transform: uppercase; letter-spacing: .4px; color: var(--chalk-dim); transition: color 200ms ease; }
.wk-step span { font-size: 15px; line-height: 1.5; }
.wk-step.on b, .wk-step.on button::before { color: var(--chalk); }
.wk-step.on span { color: var(--chalk); }
.wk-stage { position: relative; }
.wk-phones { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x mandatory; }
.wk-phones .phone { --k: .62; scroll-snap-align: start; }
.watch-note { font-size: 14px; color: var(--chalk-dim); max-width: 15em; }
/* JS: one phone, the steps play in it */
.js .wk-phones { display: grid; overflow: visible; padding: 0; }
.js .wk-phones .phone { grid-area: 1 / 1; --k: .82; visibility: hidden; }
.js .wk-phones .phone.on { visibility: visible; }
.js .wk-phones .phone figcaption { display: none; }
.wk-phones .phone .scr > * { transition: none; }
.js .wk-phones .phone.on.rise .scr > * { animation: chalkUp 380ms cubic-bezier(.2, .8, .2, 1) both; }
.js .wk-phones .phone.on.rise .scr > :nth-child(2) { animation-delay: 40ms; }
.js .wk-phones .phone.on.rise .scr > :nth-child(3) { animation-delay: 110ms; }
.js .wk-phones .phone.on.rise .scr > :nth-child(4) { animation-delay: 180ms; }
.js .wk-phones .phone.on.rise .scr > :nth-child(5) { animation-delay: 250ms; }
.js .wk-phones .phone.on.rise .scr > :nth-child(n+6) { animation-delay: 320ms; }
@keyframes chalkUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.watch { --w: 132px; position: relative; width: var(--w); }
.watch-body { position: relative; padding: calc(var(--w) * .068); border-radius: calc(var(--w) * .3); background: #23201D; box-shadow: inset 0 0 0 1px #3A3530, inset 0 0 0 7px #1A1816; }
.watch-body::after { content: ""; position: absolute; right: -5px; top: 40px; width: 6px; height: 26px; border-radius: 3px; background: #3A3530; }
.watch-screen { aspect-ratio: 184 / 224; border-radius: calc(var(--w) * .22); background: #0B0A09; color: #F3EEE6; display: grid; justify-items: center; align-content: center; gap: calc(var(--w) * .04); padding: calc(var(--w) * .07); }
.watch-screen .n { font-size: calc(var(--w) * .078); color: #A39C92; white-space: nowrap; }
.watch-ring { position: relative; width: 70%; aspect-ratio: 1; }
.watch-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.watch-ring circle { fill: none; stroke-width: 6; }
.watch-ring .t { stroke: rgba(255, 255, 255, .1); }
.watch-ring .a { stroke: #F3EEE6; stroke-linecap: round; }
.watch-ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 calc(var(--w) * .19)/1 var(--f-display); font-variant-numeric: tabular-nums; }
.watch-screen .sk { width: 100%; height: calc(var(--w) * .2); border-radius: 8px; background: rgba(255, 255, 255, .1); display: grid; place-items: center; font-size: calc(var(--w) * .078); font-weight: 600; letter-spacing: .5px; }
.wk-watch { display: none; }
@media (min-width: 1000px) {
  .wk { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 64px; align-items: start; }
  .js .wk { min-height: 0; }
  .js .wk-steps { padding: clamp(100px, 18vh, 180px) 0 clamp(120px, 22vh, 220px); }
  .js .wk-step { min-height: clamp(300px, 46vh, 440px); }
  .js .wk-step button { padding-top: 22px; }
  .js .wk-stage { position: sticky; top: clamp(76px, calc(50vh - 370px), 120px); display: flex; gap: 28px; align-items: flex-end; justify-content: flex-end; }
  .js .wk-watch { display: grid; gap: 12px; position: absolute; right: calc(390px * .82 + 2 * (4px + 9px * .82) + 36px); bottom: 48px; opacity: 0; transform: translateY(12px); transition: opacity 380ms ease, transform 380ms cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
  .js .wk-watch.on { opacity: 1; transform: none; }
  .wk-head { grid-column: 1 / -1; }
}
@media (max-width: 999px) {
  .js .wk-phones .phone { --k: var(--fit-k, .78); }
  .js .wk-phones { justify-items: center; }
  .js .wk-steps { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .js .wk-step { flex: 0 0 82%; scroll-snap-align: start; }
  .js .wk-step button { height: 100%; border: 1px solid var(--hairline); border-radius: var(--r-surface); padding: 16px; align-content: start; }
  .js .wk-step.on button { border-color: var(--steel-light); }
  .wk-card-watch { display: none; }
  .js .wk-step .wk-card-watch { display: flex; gap: 14px; align-items: center; margin-top: 12px; grid-column: 1 / -1; }
  .wk-card-watch .watch { --w: 118px; flex: none; }
}
@media (min-width: 1000px) { .wk-card-watch { display: none !important; } }

/* phones beside demos */
.with-phone { display: grid; gap: 40px; align-items: start; }
.with-phone > .phone { justify-self: center; }
@media (min-width: 1000px) { .with-phone { grid-template-columns: minmax(0, 1fr) auto; column-gap: 64px; } .with-phone.left { grid-template-columns: auto minmax(0, 1fr); } }

/* four phones on one steel line */
.rack4 { --rk: .52; position: relative; display: flex; gap: clamp(16px, 3vw, 40px); justify-content: center; overflow-x: auto; padding: 0 var(--gutter) 28px; scroll-snap-type: x mandatory; }
.rack4 .phone { --k: var(--rk); scroll-snap-align: center; }
.rack4 .phone figcaption { margin-top: 30px; }
.rack4-line { position: absolute; left: 0; right: 0; top: calc(844px * var(--rk) + 8px + 18px * var(--rk) - 3px); height: 10px; border-radius: 5px; background: var(--steel); pointer-events: none; }
@media (max-width: 999px) { .rack4 { --rk: .6; justify-content: flex-start; } .rack4-line { width: calc(4 * (390px * .6 + 16px) + 3 * 16px + 2 * var(--gutter)); right: auto; } }

.ember-able.is-live .board li.you { border-color: var(--ember); box-shadow: 0 0 0 3px var(--ember-glow); }

@media (max-width: 999px) { .js .wk-stage { order: -1; } }
:root[data-theme="light"] .media { background: var(--iron-plate); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .media { background: var(--iron-plate); } }
/* the workout phones swap by visibility; never let it transition (keeps one live phone) */
.wk-phones .phone { transition: none !important; }

/* ================================================================ T62: weight, touch and small motion
   Animation is transform and opacity only. Hover is used for exactly two
   things: primary (ember) buttons warm, plates lift. Nothing depends on it. */
.pm-num { position: relative; display: inline-block; }
.has-roll .pm-roll { position: absolute; inset: 0; display: flex; justify-content: flex-end; align-items: baseline; pointer-events: none;
  font: 700 clamp(72px, 16vw, 132px)/.95 var(--f-display); letter-spacing: -.5px; color: var(--chalk); }
.has-roll .pm-num input:not(:focus) { color: transparent; caret-color: transparent; }
.has-roll .pm-num input:focus + .pm-roll { visibility: hidden; }
.pm-roll .roll { height: .95em; }
.pm-roll .roll .c, .pm-roll .roll .col span, .pm-roll .roll .sep { height: .95em; line-height: .95; }
.pm-lift { transition: transform 160ms cubic-bezier(.2, .8, .2, 1); }
@media (hover: hover) { .pm-svg .pm-lift:hover { transform: translateY(-4px); } }
/* warm what you can press: ember fill brightens 6% over 120 ms */
.btn-ember, .ember-able.is-live .p-slab.p-act, .btn-primary, .first-plate.on { transition: filter 120ms ease, transform 90ms ease-out; }
@media (hover: hover) { .btn-ember:hover, .ember-able.is-live .p-slab.p-act:hover, .btn-primary:hover { filter: brightness(1.06); } }
.btn-ember:focus-visible, .btn-primary:focus-visible { filter: brightness(1.06); }
.p-slab { cursor: pointer; }
.p-slab:active { transform: scale(.96); }
@media (prefers-reduced-motion: reduce) { .pm-lift, .pm-svg .pm-lift:hover { transform: none !important; } }

/* the header mark as a bar that loads as the page goes by: one plate per section (motion.js) */
.brand svg.lp { width: 62px; }
.lp-p { fill: var(--chalk); opacity: 0; transform: translateX(var(--from, 12px)); transition: transform 260ms cubic-bezier(.3, 1.4, .5, 1), opacity 120ms ease, fill 360ms ease; }
.lp-p.on { opacity: 1; transform: none; }
.lp-p.ember-able.is-live { fill: var(--ember); }
/* lights: the theme wipes out from the switch (site.js) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
/* load your first plate */
.fp-week { display: flex; align-items: baseline; gap: 12px; margin-top: 12px; }
.fp-week .total { font: 700 clamp(40px, 8vw, 64px)/.95 var(--f-display); }
.fp-week .meta { font-size: 14px; }
.first-plate { position: absolute; top: 0; bottom: 24px; right: calc(11.4% - 20px); width: 56px; padding: 0; border: 0; background: transparent; border-radius: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fp-hint { margin-top: 14px; }
.stores { position: relative; }
.stores::after { content: ""; position: absolute; inset: -8px; border: 2px solid var(--chalk); border-radius: calc(var(--r-surface) + 6px); opacity: 0; pointer-events: none; transition: opacity 200ms ease; }
.stores.is-next::after { opacity: 1; }
/* sound switch (footer) */
.sound { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 6px 0 0; border: 0; background: transparent; color: var(--chalk-dim); font-size: 14px; font-weight: 500; }
.sound .theme-knob::after { display: none; }
.sound[aria-checked="false"] .theme-knob { transform: none; }
.sound[aria-checked="true"] .theme-knob { transform: translateX(20px); }

/* Three hub links in the header (T69: Tools, Articles, Glossary): on a narrow
   screen the wordmark gives way, the mark stays; the app strip under the
   header names the app. */
@media (max-width: 519px) { .site-head.has-three .brand b { display: none; } }
@media (max-width: 639px) { .site-head.has-three .site-nav a + .back { display: none; } }