/* =====================================================================
   MARROW FOR MEMBERS.  athletes/athletes.css
   The /athletes/ page's own sections on the public system (2026-10-09, lane 3
   of ~/.edwinstrong/design-canon/public-rollout-plan-20261008.md, section
   3.9). Loads after assets/public/public.css and public-app.css, and only
   adds what this page alone draws:
     .at-note   the signature: one phone, the set logged, the coach's note
     .at-week   three tabs of the member app on three phones
     .at-match  the match form on the paper
   The app screens are replicated from marrow-app a7a84d09 in its own 390
   point space with its own values (src/constants/theme.ts, the hybrid):
     .at-pane-plan  the Train tab's program card (AssignedProgramSurface.tsx)
     .at-pane-home  the top of the Train tab (app/(tabs)/program.tsx)
     .at-pane-fuel  the Fuel tab (app/(tabs)/nutrition.tsx)
   No price and no fee language on this page (member surface). Motion plays
   once and rests; start states live under html.pub-armed, so reduced motion
   and Pause motion show the rest state. Colours through tokens only. No em or
   en dashes.
   ===================================================================== */

/* ---------- 2. The signature: the note after the set ---------- */
#main .at-note-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); column-gap: 96px; align-items: center; }
#main .at-note-head { margin-bottom: 0; }
#main .at-steps { display: flex; flex-direction: column; gap: 0; margin-top: 18px; list-style: none; max-width: 520px; }
#main .at-step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px; padding: 16px 0 16px 18px; border-left: 2px solid var(--rule-soft); transition: border-color 500ms cubic-bezier(0.22, 1, 0.36, 1), opacity 500ms ease; }
#main .at-step b { font-weight: 500; font-size: 12px; letter-spacing: 0.14em; line-height: 24px; color: var(--marrow-accent); }
#main .at-step span { font-size: 16px; line-height: 1.55; color: var(--ink-secondary); }
#main .at-step strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 20px; line-height: 1.3; color: var(--ink-primary); }
#main .at-steps.is-playing .at-step:not(.is-on) { opacity: 0.5; }
#main .at-step.is-on { border-left-color: var(--marrow-accent); }
#main .at-note .pv-lede { margin: 12px 0 0; }
#main .at-note .pv-link.is-standalone { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; color: var(--marrow-accent); text-decoration: underline; text-underline-offset: 5px; }
#main .at-stage { display: flex; justify-content: center; }
#main .at-device { width: 320px; }

/* The member Train tab in the coach's branded build, the program card on top. */
#main .hm-app .at-pane-plan, #main .hm-app .at-pane-home { padding: 0 16px; }
/* The logger's stepper figures read in the app's ink (the shared .mono rule would paint them sage). */
#main .hm-app .rl-step b.mono { color: var(--hy-ink); }
#main .hm-app .at-brand { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
#main .hm-app .at-logo { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--hy-aqua); font-size: 13px; font-weight: 600; letter-spacing: 0.5px; color: var(--hy-ground); }
#main .hm-app .at-name { font-family: var(--serif); font-weight: 400; font-size: 17px; line-height: 1.2; color: var(--hy-ink); }
#main .hm-app .at-eb { margin: 16px 0 14px; font-size: 12px; line-height: 18px; letter-spacing: 1.44px; text-transform: uppercase; color: var(--hy-aqua); }
#main .hm-app .at-card { padding: 20px; border-radius: 8px; background: var(--hy-card); border: 1px solid var(--hy-hairline); }
#main .hm-app .at-k { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 2.2px; text-transform: uppercase; color: var(--hy-muted); }
#main .hm-app .at-display { margin: 8px 0 0; font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 32px; color: var(--hy-ink); }
#main .hm-app .at-body { margin: 8px 0 0; font-size: 15px; line-height: 22px; color: var(--hy-muted); }
#main .hm-app .at-div { display: block; height: 1px; margin: 16px 0; background: var(--hy-hairline); }
#main .hm-app .at-day { margin: 8px 0 0; font-size: 15px; font-weight: 600; color: var(--hy-ink); }
#main .hm-app .at-meta { margin: 4px 0 0; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--hy-muted); }
#main .hm-app .at-move { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid var(--hy-hairline); }
#main .hm-app .at-meta + .at-move { margin-top: 12px; }
#main .hm-app .at-i { flex: none; width: 16px; padding-top: 3px; font-size: 11px; font-weight: 600; color: var(--hy-muted); }
#main .hm-app .at-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#main .hm-app .at-t b { font-size: 15px; font-weight: 400; color: var(--hy-ink); }
#main .hm-app .at-cn { font-size: 11px; line-height: 16px; color: var(--hy-aqua-hi); }
#main .hm-app .at-move em { flex: none; padding-top: 3px; font-style: normal; font-size: 11px; color: var(--hy-muted); }
#main .hm-app .at-start { display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 16px; border-radius: 999px; background: var(--color-pure-white); font-size: 15px; font-weight: 500; color: var(--hy-ground); }
#main .hm-app .at-next { margin-top: 12px; display: flex; flex-direction: column; padding: 18px; border-radius: 12px; background: var(--hy-card); border: 1px solid color-mix(in srgb, var(--hy-edge) 55%, transparent); }
#main .hm-app .at-nk { margin: 0 0 8px; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--hy-muted); }
#main .hm-app .at-nt { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 33px; color: var(--hy-ink); }
#main .hm-app .at-ns { margin: 2px 0 0; font-weight: 500; font-size: 14px; line-height: 20px; color: var(--hy-muted); }
#main .hm-app .at-nw { margin: 10px 0 0; font-size: 16px; line-height: 24px; color: var(--hy-ink); }

/* ---------- 3. Your week: three tabs on three phones ---------- */
#main .at-week-head { max-width: calc(var(--atelier-max-width) - 2 * var(--space-3)); }
#main .at-tabs { display: none; }
#main .at-weeks { display: grid; grid-template-columns: repeat(3, minmax(0, 300px)); justify-content: center; column-gap: 56px; margin-top: 16px; }
#main .at-wk { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
#main .at-device-s { --s: 0.66154; width: 280px; text-align: left; }
#main .dialed-band .at-wk-t { margin: 44px 0 0; font-family: var(--serif); font-weight: 300; font-size: 28px; line-height: 1.15; color: var(--hy-ink); }
#main .dialed-band p.at-wk-p { margin: 8px 0 0; max-width: 30ch; font-size: 16px; line-height: 1.5; color: var(--hy-muted); }
#main .hm-app .at-panes-prog .hm-pane { opacity: 1; visibility: visible; transform: none; }

/* The top of the Train tab. */
#main .hm-app .at-hello { margin: 4px 0 0; font-family: var(--serif); font-weight: 300; font-size: 40px; line-height: 44px; color: var(--hy-ink); }
#main .hm-app .at-hello em { font-style: italic; font-weight: 300; color: var(--hy-aqua-hi); }
#main .hm-app .at-score { margin-top: 24px; display: flex; justify-content: space-around; gap: 10px; padding: 22px 12px 20px; border-radius: 12px; background: var(--hy-card); border: 1px solid color-mix(in srgb, var(--hy-edge) 55%, transparent); }
#main .hm-app .at-sc { flex: 0 1 130px; min-width: 0; display: flex; flex-direction: column; align-items: center; color: var(--hy-teal); }
#main .hm-app .at-sc.is-aqh { color: var(--hy-aqua-hi); }
#main .hm-app .at-rw { position: relative; display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 12px; }
#main .hm-app .at-ring { position: absolute; inset: 0; width: 64px; height: 64px; overflow: visible; fill: none; }
#main .hm-app .at-r-track { stroke: color-mix(in srgb, var(--hy-edge) 55%, transparent); stroke-width: 4; }
#main .hm-app :is(.at-r-arc, .at-r-lum) { stroke: currentColor; stroke-linecap: round; stroke-dasharray: var(--p) 100; transform: rotate(-90deg); transform-origin: 36px 36px; }
#main .hm-app .at-r-arc { stroke-width: 4; }
#main .hm-app .at-r-lum { stroke-width: 12; stroke-opacity: 0.16; }
#main .hm-app .at-rw b { position: relative; font-weight: 400; font-size: 22px; line-height: 26px; color: var(--hy-ink); }
#main .hm-app .at-sl { font-size: 14px; line-height: 20px; text-align: center; color: var(--hy-muted); }
#main .hm-app .at-ss { margin-top: 2px; font-size: 12px; line-height: 16px; text-align: center; color: var(--hy-muted); }
#main .hm-app .at-pane-home .at-next { margin-top: 16px; }
#main .hm-app .at-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
#main .hm-app .at-pills span { display: flex; align-items: center; justify-content: center; gap: 10px; height: 46px; border-radius: 999px; background: var(--hy-card); border: 1px solid var(--hy-hairline); font-weight: 500; font-size: 16px; color: var(--hy-ink); }
#main .hm-app .at-pills svg { width: 20px; height: 20px; fill: var(--hy-ink); }

/* The Fuel tab: what the coach wrote, as list row groups. */
#main .hm-app .at-pane-fuel { padding: 0 20px; }
#main .hm-app .at-pane-fuel .rp-title { margin: 22px 0 18px; }
#main .hm-app .af-eb { margin: 0; font-size: 12px; line-height: 16px; letter-spacing: 0.96px; text-transform: uppercase; color: var(--hy-muted); }
#main .hm-app .af-eb2 { margin-top: 26px; }
#main .hm-app .af-body { margin: 8px 0 0; font-size: 14px; line-height: 21px; color: var(--hy-muted); }
#main .hm-app .af-list { margin-top: 12px; border-radius: 8px; background: var(--hy-card); border: 1px solid var(--hy-hairline); overflow: hidden; }
#main .hm-app .af-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 12px 16px; }
#main .hm-app .af-row + .af-row { border-top: 1px solid var(--hy-hairline); }
#main .hm-app .af-row span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#main .hm-app .af-row b { font-size: 15px; font-weight: 500; color: var(--hy-ink); }
#main .hm-app .af-row small { font-size: 13px; color: var(--hy-aqua); }
#main .hm-app .af-row i { font-style: normal; font-size: 20px; color: var(--hy-muted); }

/* ---------- 4. The match form on the paper ---------- */
#main .at-match-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 72px; align-items: start; }
#main .at-match-head { margin-bottom: 0; position: sticky; top: 104px; }
#main .at-promise { display: flex; flex-direction: column; gap: 18px; margin-top: 18px; list-style: none; }
#main .at-promise li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }
#main .at-promise svg { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--hy-card); fill: none; stroke: var(--hy-aqua-hi); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#main .at-promise span { font-size: 15px; line-height: 1.55; color: var(--ink-secondary); }
#main .at-promise b { display: block; font-family: var(--serif); font-weight: 400; font-size: 18px; line-height: 1.35; color: var(--ink-primary); }
#main .at-promise a { color: var(--marrow-accent); text-decoration: underline; text-underline-offset: 3px; }
#main .at-match .apply-form { padding: 40px; border-radius: 24px; background: var(--paper-card); border: 1px solid var(--rule-soft); }
#main .at-match .apply-form-eyebrow { margin: 0 0 10px; font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--marrow-accent); }
#main .at-match .apply-form-title { margin: 0 0 28px; font-family: var(--serif); font-weight: 300; font-size: 32px; line-height: 1.15; letter-spacing: -0.01em; text-transform: none; color: var(--ink-primary); }
#main .at-match .field { margin-bottom: 18px; }
#main .at-match .field-label { margin-bottom: 8px; font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-secondary); }
#main .at-match :is(.field-input, .field-textarea) { width: 100%; min-height: 48px; padding: 12px 16px; border-radius: 12px; background: var(--color-pure-white); border: 1px solid var(--rule-strong); font-family: var(--sans); font-size: 16px; color: var(--ink-primary); }
#main .at-match .field-textarea { min-height: 120px; line-height: 1.5; resize: vertical; }
#main .at-match :is(.field-input, .field-textarea)::placeholder { color: var(--ink-tertiary); }
#main .at-match :is(.field-input, .field-textarea):focus { outline: 2px solid var(--marrow-accent); outline-offset: 2px; border-color: var(--marrow-accent); }
#main .at-match .consent { margin: 6px 0 22px; }
#main .at-match .consent-label { display: flex; gap: 12px; align-items: flex-start; }
#main .at-match .consent-label span { font-family: var(--sans); font-size: 14px; line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--ink-secondary); }
#main .at-match .consent-label a { color: var(--marrow-accent); text-decoration: underline; }
#main .at-match .submit-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 0 24px; border: 1px solid var(--hy-card); border-radius: 999px; background: var(--hy-card); color: var(--hy-ink); font-family: var(--sans); font-weight: 500; font-size: 16px; letter-spacing: 0; text-transform: none; cursor: pointer; transition: box-shadow 160ms ease; }
#main .at-match .submit-btn:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--hy-teal) 30%, transparent); }
#main .at-match .submit-btn:disabled { opacity: 0.6; cursor: progress; }
#main .at-match .submit-disclaimer { margin-top: 16px; font-family: var(--sans); font-size: 14px; line-height: 1.5; letter-spacing: 0; text-transform: none; text-align: left; color: var(--ink-secondary); }
#main .at-match .submit-disclaimer a { color: var(--marrow-accent); text-decoration: underline; }
#main .pub-close .pub-close-h { max-width: 18ch; }

/* ---------- Motion. The rest state is the base; the start states live under pub-armed. ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* The coach's note types only once the plan is on screen (athletes/athletes.js turns it). */
  .pub-armed #main .at-pane-plan:not(.is-in) .pub-ch { opacity: 0; animation: none; }
  .pub-armed #main .at-stage.is-in .at-pane-plan.is-in .pub-ch { animation: pub-kf-fade 90ms linear both; animation-delay: calc(700ms + var(--t)); }
  .pub-armed #main .at-pane-plan:not(.is-in) :is(.at-card, .at-next) { opacity: 0; transform: translateY(18px); }
  .pub-armed #main .at-pane-plan.is-in .at-card { animation: pub-kf-rise 820ms cubic-bezier(0.22, 1, 0.36, 1) 100ms both; }
  .pub-armed #main .at-pane-plan.is-in .at-next { animation: pub-kf-rise 820ms cubic-bezier(0.22, 1, 0.36, 1) 260ms both; }

  /* Your week: the phones rise in turn and the Train rings draw. */
  .pub-armed #main .at-weeks:not(.is-in) .at-wk { opacity: 0; transform: translateY(28px); }
  .pub-armed #main .at-weeks.is-in .at-wk { animation: pub-kf-rise 900ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--i) * 140ms); }
  .pub-armed #main .at-weeks:not(.is-in) :is(.at-r-arc, .at-r-lum) { stroke-dasharray: 0 100; }
  .pub-armed #main .at-weeks.is-in :is(.at-r-arc, .at-r-lum) { animation: pub-kf-ringp 1100ms cubic-bezier(0.22, 1, 0.36, 1) 520ms both; }
}

/* ---------- Widths ---------- */
@media (max-width: 1100px) {
  #main .at-weeks { column-gap: 28px; }
  #main .at-device-s { --s: 0.61026; width: 260px; }
}
@media (max-width: 900px) {
  #main .at-note-grid { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  #main .at-match-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  #main .at-match-head { position: static; }
  /* One phone at a time, switched by the three tabs (script only; without it all three stand in a column). */
  .at-js #main .at-tabs { display: flex; justify-content: center; gap: 8px; margin: 8px auto 28px; padding: 0 16px; }
  .at-js #main .at-tab { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--hy-aqua) 40%, transparent); background: transparent; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hy-muted); cursor: pointer; }
  .at-js #main .at-tab[aria-selected="true"] { background: var(--hy-card); border-color: var(--hy-aqua-hi); color: var(--hy-aqua-hi); }
  #main .at-weeks { grid-template-columns: minmax(0, 300px); row-gap: 72px; }
  .at-js #main .at-wk:not(.is-on) { display: none; }
  #main .at-device-s { --s: 0.66154; width: 280px; }
  #main .dialed-band .at-wk-t { margin-top: 32px; }
}
@media (max-width: 767px) {
  #main .at-device { --s: 0.66154; width: 280px; }
  #main .at-match .apply-form { padding: 28px 20px; }
  #main .at-match .apply-form-title { font-size: 28px; }
  #main .at-step strong { font-size: 18px; }
}
/* Gauntlet O2, measured at 320 with CDP device metrics: the three member app tabs sat 18.44px
   outside their strip. Less strip padding, less tab padding, less tracking. */
@media (max-width: 420px) {
  .at-js #main .at-tabs { gap: 6px; padding: 0 8px; }
  .at-js #main .at-tab { min-height: 44px; padding: 0 12px; letter-spacing: 0.08em; }
}