/*
 * ATLET web app.
 *
 * The signed-out screens were redesigned on 2026-10-25, at the owner's word,
 * to be one door with the public site (app/site): the photo band, the split
 * photo layout and the TRAIN/REHAB strip signed off before are retired. Their
 * rules are the "signed-out screens" section below; change the composition
 * there (bar, brand side with the dial, kicker + framed form) only when asked.
 * Their ground and glass in the dark look (2026-10-26) are styles/signin-bg.css,
 * loaded after this file.
 *
 * Everything directional is written as start/end rather than left/right, so
 * the Persian and English versions are the same stylesheet rather than two.
 */

/* Vazirmatn, served from here rather than from Google: a stylesheet from a
   third party is a request every sign-in makes to it, and one that some
   networks here do not answer. One variable file covers every weight used.
   SIL Open Font License 1.1 -- assets/fonts/Vazirmatn-OFL.txt. */
/* The charts' numbers (assessment-charts.js): Inter, tabular, as the
   owner approved (2026-10-05). Latin only, served from here like Vazirmatn.
   SIL Open Font License 1.1 -- assets/fonts/Inter-OFL.txt. */
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-variable.woff2") format("woff2-variations"),
       url("../assets/fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("../assets/fonts/vazirmatn-variable.woff2") format("woff2-variations"),
       url("../assets/fonts/vazirmatn-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* The two looks (the owner, 2026-10-10: the colours tired the eyes over
   long hours). Dark is the default; light, as TrueCoach's, is chosen with
   the sun/moon beside the header's first button and kept on the device
   (theme.js). Every colour on a signed-in screen is one of these: a new
   rule takes a token, never a colour of its own (test/theme-tokens). */
:root {
  color-scheme: dark;
  --atlet-bg: #14161B;
  --atlet-surface: #1A1D23;
  --atlet-surface-raised: #20242B;
  --atlet-border: #2A2F37;
  --atlet-border-strong: #3A404A;
  --atlet-red: #DC2626;
  --atlet-red-active: #B71C1C;
  --atlet-red-glow: rgba(220, 38, 38, .12);
  --atlet-text-primary: #E4E7EB;
  --atlet-text-secondary: #A2AAB4;
  --atlet-text-muted: #78808B;
  --atlet-ok: #22B37C;
  /* Words in a colour: an amount owed, a warning, done, a link. */
  --red-text: #F08A8A;
  --warn: #E0B25A;
  --ok-text: #5CC9A0;
  --info: #74A9F7;
  /* The quiet accent: today, an exercise's letter, the tab open. Red is kept
     for the one thing to press and for what is wrong. */
  --focus: #8FB0DD;
  --focus-bg: rgba(143, 176, 221, .12);
  /* Washes over a surface: a hover, a well under a segmented control, a line. */
  --veil-1: rgba(255, 255, 255, .035);
  --veil-2: rgba(255, 255, 255, .06);
  --veil-3: rgba(255, 255, 255, .1);
  --veil-4: rgba(255, 255, 255, .16);
  --veil-line: rgba(255, 255, 255, .16);
  --veil-line-strong: rgba(255, 255, 255, .4);
  --well: rgba(0, 0, 0, .22);
  --shadow: rgba(0, 0, 0, .55);
  --shadow-soft: rgba(0, 0, 0, .38);
  --scrim: rgba(0, 0, 0, .6);
  /* A session's bar, in the colour of how it went. */
  --bar: #22262E;
  --bar-ok: #1E4A3A;
  --bar-warn: #4A3B1E;
  --bar-red: #4C2626;
  --red-float: #23171A;
  --red-wash: rgba(120, 20, 20, .28);
  --red-dim: #3A1F22;
  --ok-float: #13241E;
  /* A video or photo opened over the page: dark in either look, as a screen is. */
  --lightbox: rgba(5, 6, 8, .92);
  --lightbox-button: rgba(255, 255, 255, .14);
}

:root[data-theme="light"] {
  color-scheme: light;
  --atlet-bg: #F2F3F5;
  --atlet-surface: #FFFFFF;
  --atlet-surface-raised: #F6F7F9;
  --atlet-border: #E1E4E9;
  --atlet-border-strong: #C8CDD5;
  --atlet-red-glow: rgba(220, 38, 38, .08);
  --atlet-text-primary: #1E2228;
  --atlet-text-secondary: #59626D;
  --atlet-text-muted: #8A929C;
  --atlet-ok: #1E9E6A;
  --red-text: #C62828;
  --warn: #9A6A0A;
  --ok-text: #17805A;
  --info: #2F6FDB;
  --focus: #2F6FDB;
  --focus-bg: #EAF1FC;
  --veil-1: rgba(15, 23, 42, .03);
  --veil-2: rgba(15, 23, 42, .05);
  --veil-3: rgba(15, 23, 42, .08);
  --veil-4: rgba(15, 23, 42, .12);
  --veil-line: rgba(15, 23, 42, .14);
  --veil-line-strong: rgba(15, 23, 42, .3);
  --well: #EEF0F3;
  --shadow: rgba(15, 23, 42, .16);
  --shadow-soft: rgba(15, 23, 42, .1);
  --scrim: rgba(15, 23, 42, .38);
  --bar: #F2F3F5;
  --bar-ok: #E2F3EB;
  --bar-warn: #FAEFD8;
  --bar-red: #FBE3E3;
  --red-float: #FFF1F1;
  --red-wash: #FDECEC;
  --red-dim: #F3D6D6;
  --ok-float: #E3F4EC;
  --lightbox: rgba(5, 6, 8, .92);
  --lightbox-button: rgba(255, 255, 255, .14);
}

/*
 * The signed-out screens: the door from the public site.
 *
 * The site's look (app/site/assets/site.css, approved 2026-10-17; glass
 * 2026-10-25) carried over, as the owner asked on 2026-10-25: ink with the
 * 22px dot grid and a red glow, the kicker (a slanted red bar, the Persian
 * label, its English twin), a glass frame with a red edge around the form,
 * the site's type scale and buttons, and the dial as the brand moment.
 * Replaces the photo band and the TRAIN/REHAB strip signed off earlier.
 *
 * Every rule is under .shell (or #app:empty, the moment before the first
 * screen), so the signed-in app's .field, .submit, .secondary, .notice and
 * .link-button keep their own look. Dark is what the site is and what every
 * first visit sees; a device set to light (theme.js) gets the same page on
 * paper, so the browser's bar and Telegram's header match it.
 */

.shell {
  color-scheme: dark;
  --auth-ink: #0A0A0B;
  --auth-ink-2: #111113;
  --auth-dots: rgba(255, 255, 255, .055);
  --auth-glow: rgba(42, 7, 9, .95);
  --auth-glow-top: rgba(220, 38, 38, .14);
  --auth-line: rgba(255, 255, 255, .08);
  --auth-line-2: rgba(255, 255, 255, .16);
  --auth-line-3: rgba(255, 255, 255, .24);
  --auth-line-strong: rgba(255, 255, 255, .36);
  --auth-veil: rgba(255, 255, 255, .04);
  --auth-underline: rgba(255, 255, 255, .3);
  --auth-text: #F5F5F4;
  --auth-text-2: #D6D3D1;
  --auth-text-3: #A8A29E;
  --auth-placeholder: #8A847F;
  --auth-red: #EF4444;
  --auth-red-text: #EF4444;
  --auth-red-fill: #DC2626;
  --auth-red-press: #B91C1C;
  --auth-red-wash: rgba(239, 68, 68, .10);
  --auth-red-ring: rgba(239, 68, 68, .22);
  --auth-red-halo: rgba(239, 68, 68, .25);
  --auth-red-shadow: rgba(220, 38, 38, .55);
  --auth-bad: #F0525E;
  --auth-bad-edge: rgba(240, 82, 94, .4);
  --auth-bad-wash: rgba(240, 82, 94, .10);
  --auth-bad-text: #FECDD3;
  --auth-field: rgba(0, 0, 0, .35);
  --auth-field-solid: #0E0E11;
  --auth-top: rgba(10, 10, 11, .8);
  --auth-glass: linear-gradient(160deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .025) 42%, rgba(255, 255, 255, .045));
  --auth-glass-ink: linear-gradient(160deg, rgba(30, 30, 35, .62), rgba(16, 16, 19, .52));
  --auth-glass-edge: rgba(255, 255, 255, .13);
  --auth-glass-lit: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(255, 255, 255, .03);
  --auth-glass-drop: 0 22px 48px -28px rgba(0, 0, 0, .85);
  --auth-frame-edge: linear-gradient(160deg, rgba(239, 68, 68, .45), rgba(255, 255, 255, .08) 40%);
  --auth-frame-drop: 0 30px 70px -30px rgba(0, 0, 0, .9);
  --auth-dial-track: rgba(255, 255, 255, .07);
  --auth-dial-tick: rgba(255, 255, 255, .13);
  --auth-dial-tick-on: rgba(239, 68, 68, .7);
  --auth-focus-on-red: #FFFFFF;
  --auth-gutter: clamp(16px, 4vw, 40px);
  --auth-ease: cubic-bezier(.2, .8, .2, 1);
  --auth-out: cubic-bezier(.16, 1, .3, 1);
  /* What the shared components inside read (the support panel, a notice). */
  --atlet-bg: var(--auth-ink);
  --atlet-text-primary: var(--auth-text);
  --atlet-text-secondary: var(--auth-text-2);
  --atlet-text-muted: var(--auth-text-3);
  --atlet-border: var(--auth-line-2);
  --atlet-border-strong: var(--auth-line-3);

  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(var(--auth-dots) 1px, transparent 1.2px) 0 0 / 22px 22px,
    radial-gradient(560px 560px at 64% 46%, var(--auth-glow), transparent 70%),
    var(--auth-ink);
  color: var(--auth-text-2);
  font-family: "Vazirmatn", "Inter", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.75;
}
[dir="rtl"] .shell {
  background:
    radial-gradient(var(--auth-dots) 1px, transparent 1.2px) 0 0 / 22px 22px,
    radial-gradient(560px 560px at 36% 46%, var(--auth-glow), transparent 70%),
    var(--auth-ink);
}
html[lang="en"] .shell { font-family: "Inter", system-ui, sans-serif; line-height: 1.6; }

:root[data-theme="light"] .shell {
  color-scheme: light;
  --auth-ink: #F2F3F5;
  --auth-ink-2: #FFFFFF;
  --auth-dots: rgba(10, 10, 11, .075);
  --auth-glow: rgba(220, 38, 38, .11);
  --auth-glow-top: rgba(220, 38, 38, .09);
  --auth-line: rgba(10, 10, 11, .08);
  --auth-line-2: rgba(10, 10, 11, .14);
  --auth-line-3: rgba(10, 10, 11, .24);
  --auth-line-strong: rgba(10, 10, 11, .46);
  --auth-veil: rgba(10, 10, 11, .03);
  --auth-underline: rgba(10, 10, 11, .3);
  --auth-text: #0A0A0B;
  --auth-text-2: #292524;
  --auth-text-3: #57534E;
  --auth-placeholder: #78716C;
  --auth-red: #DC2626;
  --auth-red-text: #B91C1C;
  --auth-red-wash: rgba(220, 38, 38, .08);
  --auth-red-ring: rgba(220, 38, 38, .18);
  --auth-red-halo: rgba(220, 38, 38, .16);
  --auth-red-shadow: rgba(220, 38, 38, .35);
  --auth-bad: #DC2626;
  --auth-bad-edge: rgba(220, 38, 38, .35);
  --auth-bad-wash: rgba(220, 38, 38, .07);
  --auth-bad-text: #991B1B;
  --auth-field: rgba(255, 255, 255, .92);
  --auth-field-solid: #FFFFFF;
  --auth-top: rgba(242, 243, 245, .85);
  --auth-glass: linear-gradient(160deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .66) 42%, rgba(255, 255, 255, .78));
  --auth-glass-ink: linear-gradient(160deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .8));
  --auth-glass-edge: rgba(10, 10, 11, .09);
  --auth-glass-lit: inset 0 1px 0 rgba(255, 255, 255, .95);
  --auth-glass-drop: 0 22px 48px -30px rgba(15, 23, 42, .28);
  --auth-frame-edge: linear-gradient(160deg, rgba(220, 38, 38, .5), rgba(10, 10, 11, .08) 40%);
  --auth-frame-drop: 0 30px 70px -36px rgba(15, 23, 42, .3);
  --auth-dial-track: rgba(10, 10, 11, .07);
  --auth-dial-tick: rgba(10, 10, 11, .16);
  --auth-dial-tick-on: rgba(220, 38, 38, .75);
  --auth-focus-on-red: #0A0A0B;
}

.shell ::selection { background: rgba(239, 68, 68, .35); color: var(--auth-text); }
/* No word left alone on a last line (later rules balance the folded row's line, a notice's way out). */
/* Not the screen-reader-only status line: text-wrap would undo its nowrap. */
.shell :is(p, .notice, .hint, .intro):not(.sr-only) { text-wrap: pretty; }

/* Behind the page -- a phone's overscroll, the edges a browser shows -- the shell's own ink rather
   than the signed-in app's ground, one step lighter, so nothing seams at the top or bottom.
   (The light look's ground is already the shell's paper.) */
:root:not([data-theme="light"]) body:has(> #app > .shell) { background: #0A0A0B; }

/* --- the bar: the logo where the site has it, the language where the site has it */
.auth-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) max(var(--auth-gutter), calc(50% - 600px + var(--auth-gutter))) 8px;
  border-block-end: 1px solid var(--auth-line);
  background: var(--auth-top);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.auth-top .brand-mark { display: flex; align-items: center; }
/* The logo and the slogan (or, where the slogan is the heading, the brand's four words) side by
   side, a hairline between, as one line. */
.auth-top .atlet-lockup { flex-direction: row; align-items: center; gap: 16px; }
.auth-top .atlet-logo { width: 84px; }
.shell .auth-top .atlet-words { display: block; direction: ltr; font-family: "Inter", system-ui, sans-serif; line-height: 1.2; white-space: nowrap; }
.shell .auth-top :is(.atlet-slogan, .atlet-words) {
  padding-left: 16px;
  border-left: 1px solid var(--auth-line-2);
  color: var(--auth-text-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
}
/* The dots between the four words in the brand's red, as the kicker's bar. */
.shell .auth-top .atlet-words .dot { color: var(--auth-red-text); }
/* Set left to right in both languages; the hairline faces the logo. */
[dir="rtl"] .shell .auth-top :is(.atlet-slogan, .atlet-words) { padding-left: 0; border-left: 0; padding-right: 16px; border-right: 1px solid var(--auth-line-2); }

.shell .lang-toggle {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--auth-line-2);
  border-radius: 999px;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--auth-text-2);
  font: 700 14px/1 "Inter", system-ui, sans-serif;
  cursor: pointer;
}
/* Each language's own name in its own letters (ui.js marks the pill with the language it names). */
.shell .lang-toggle:lang(fa) { font-family: "Vazirmatn", system-ui, sans-serif; font-size: 15px; }

/* --- the page: the form on the reading start, the brand at its end ----------- */
.auth-main {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: minmax(360px, 440px) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(48px, 7vw, 120px);
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding: 40px var(--auth-gutter) 48px;
}
.auth-main > * { min-width: 0; }
/* As the site's hero has its words and its dial (the owner, 2026-10-26): the form where a line
   starts, the dial where it ends. Placed, not moved: the heading stays first in the page, so it is
   read before the form, and nothing in the brand side takes focus. */
.shell .form-panel { grid-column: 1; grid-row: 1; }
.shell .brand-panel { grid-column: 2; grid-row: 1; }

/* The dial and the line under it on one edge, the line's start, as one block in the middle of its side. */
.shell .brand-panel {
  display: grid;
  justify-self: center;
  justify-items: start;
  align-content: center;
  width: min(100%, 30rem);
  /* Small: the dial's open quarter at the bottom already sets the heading off from it. */
  gap: 12px;
  text-align: start;
}
/* A screen with no line under the dial (a failure, nothing open yet): the dial alone, in the middle of its side. */
.shell:not(.has-lead) .brand-panel { justify-items: center; }

/* The dial (the site's hero dial, unlabelled): drawn in once per visit. */
.auth-dial { position: relative; width: clamp(240px, 23vw, 330px); aspect-ratio: 1; }
.auth-dial::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(220, 38, 38, .34), transparent); filter: blur(10px); }
:root[data-theme="light"] .shell .auth-dial::before { background: radial-gradient(closest-side, rgba(220, 38, 38, .16), transparent); }
.auth-dial svg { position: relative; display: block; width: 100%; height: auto; overflow: visible; }
.auth-dial .track { fill: none; stroke: var(--auth-dial-track); stroke-width: 14; stroke-linecap: round; }
.auth-dial .value { fill: none; stroke: var(--auth-red); stroke-width: 14; stroke-linecap: round; }
.auth-dial .tk { fill: none; stroke: var(--auth-dial-tick); stroke-width: 2; stroke-linecap: round; }
.auth-dial .tk.on { stroke: var(--auth-dial-tick-on); }
.auth-dial .tk.long { stroke-width: 3.2; }
.auth-dial .knob { fill: #FFFFFF; stroke: var(--auth-red); stroke-width: 4; }
.auth-dial-mark { position: absolute; top: 50%; left: 50%; width: 30%; height: auto; transform: translate(-50%, -54%); }

/* Under the dial, set from the start of the line as the site sets its words, not centred: the
   slogan, in the brand's Latin face in both languages, a half-phrase to a line. */
.shell .tagline { margin: 0; }
.shell .tagline h1 {
  max-width: 14em;
  margin: 0;
  color: var(--auth-text);
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(2rem, 1.4vw + 1.3rem, 2.875rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
  text-align: left;
}
.shell .tagline h1 > span { display: block; }
/* English inside a Persian page: its lines flush with the Persian start, as the form's are. */
[dir="rtl"] .shell .tagline h1 { text-align: right; }

/* --- the form side ------------------------------------------------------------ */
.shell .form-panel { display: flex; justify-content: center; padding: 0; }
.shell .form-card { width: 100%; max-width: 440px; display: grid; gap: 16px; }

/* The kicker: the slanted bar, the label, its English twin (Persian only). */
.shell .eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0;
  color: var(--auth-red-text);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0;
}
.shell .eyebrow::before { content: ""; flex: none; width: 28px; height: 4px; background: var(--auth-red-fill); transform: skewX(-20deg); }
.shell .eyebrow .en { color: var(--auth-text-3); font: 600 12px/1.5 "Inter", system-ui, sans-serif; letter-spacing: .28em; text-transform: uppercase; }
/* An English label -- the English page's, or the sign-in's "WELCOME BACK" on either. */
.shell .eyebrow:lang(en) { font: 600 12px/1.5 "Inter", system-ui, sans-serif; letter-spacing: .28em; text-transform: uppercase; }

/* The frame: the site's request form, glass with a red edge. */
.auth-frame {
  position: relative;
  padding: 28px;
  border: 1px solid transparent;
  border-radius: 20px;
  background: var(--auth-glass-ink) padding-box, var(--auth-frame-edge) border-box;
  box-shadow: var(--auth-glass-lit), var(--auth-frame-drop);
}
.auth-frame h2,
.shell .form-card > h2 { margin: 0; color: var(--auth-text); font-size: 1.375rem; font-weight: 800; line-height: 1.45; text-wrap: balance; }
html[lang="en"] .shell .auth-frame h2 { letter-spacing: -.01em; }
.auth-frame .intro { margin: 8px 0 0; color: var(--auth-text-2); font-size: 16px; line-height: 1.85; }
.auth-frame > .form { margin-top: 20px; }
.shell .auth-frame > .tg-card { margin-top: 20px; padding: 0; border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.auth-frame > .back { margin-top: 12px; }

.shell .form { display: flex; flex-direction: column; gap: 18px; }
.shell .field { margin: 0; display: grid; gap: 8px; }
.shell .field label { margin: 0; color: var(--auth-text); font-size: 15px; font-weight: 700; line-height: 1.5; }
.shell .field input {
  height: 52px;
  padding: 0 16px;
  border: 1px solid var(--auth-line-strong);
  border-radius: 12px;
  background: var(--auth-field);
  color: var(--auth-text);
  font-family: inherit;
  font-size: 16px;
}
.shell .field input::placeholder { color: var(--auth-placeholder); opacity: 1; }
/* Usernames, passwords, emails and numbers are latin: Inter, as the site sets latin, in both languages;
   on .pw too, so a password keeps its face when the eye shows it. */
.shell .field input:is([dir="ltr"], [type="email"], [type="tel"], [autocomplete="username"]):not(.code-input),
.shell .pw input { font-family: "Inter", system-ui, sans-serif; }
.shell .field input:focus { outline: 2px solid transparent; border-color: var(--auth-red); box-shadow: 0 0 0 3px var(--auth-red-ring); }
/* A password manager's fill keeps the field's own colours. */
.shell .field input:-webkit-autofill,
.shell .field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--auth-text);
  caret-color: var(--auth-text);
  -webkit-box-shadow: 0 0 0 40px var(--auth-field-solid) inset;
  box-shadow: 0 0 0 40px var(--auth-field-solid) inset;
}
.shell .field input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 40px var(--auth-field-solid) inset, 0 0 0 3px var(--auth-red-ring); }
.shell .hint { margin: -8px 0 0; color: var(--auth-text-3); font-size: 14px; line-height: 1.7; }

.shell .code-input { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 18px; font-weight: 700; letter-spacing: .14em; text-align: center; }
.shell .code-input::placeholder { font-weight: 400; }

/* The eye: a full 44px target inside the 52px box, at the right edge where the dots never reach. */
.shell .pw input { padding-right: 54px; }
.shell .pw .eye { right: 4px; width: 44px; height: 44px; border-radius: 10px; color: var(--auth-text-3); }
.shell .pw .eye[aria-pressed="true"] { color: var(--auth-text); background: var(--auth-veil); }
.shell .pw .eye .icon { width: 20px; height: 20px; }
/* Its focus ring inside the field's edge, not cut by it or crowding the edge's own ring. */
.shell .pw .eye:focus-visible { outline-offset: -3px; }

.shell .row-between { flex-wrap: wrap; gap: 0 16px; margin: -8px 0 -4px; font-size: 15px; }
.shell .remember { min-height: 44px; gap: 10px; color: var(--auth-text-2); cursor: pointer; }
.shell .remember input { width: 20px; height: 20px; margin: 0; accent-color: var(--auth-red-fill); }

/* Text links: the site's underlined link, 44px tall. */
.shell .link-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--auth-text-2);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--auth-underline);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  cursor: pointer;
}
/* The way out of a message ("locked": a new password from Telegram), on its own line under it:
   a button cannot wrap mid-line, so set inline it broke into a centred stub in English. */
.shell .notice .link-button.inline { display: block; width: fit-content; min-height: 0; margin-top: 4px; color: inherit; font-weight: 800; line-height: 1.7; text-align: start; text-decoration-color: currentColor; text-wrap: balance; }

/* The one red button. */
.shell .submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: auto;
  min-height: 54px;
  padding: 0 20px;
  border-radius: 12px;
  background: var(--auth-red-fill);
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0;
  box-shadow: 0 10px 30px -8px var(--auth-red-shadow);
}
/* Busy (ui.js busy(): aria-busy and "Signing in…"): still red, a shade darker, a turning ring beside the words. */
.shell .submit:disabled { background: var(--auth-red-press); color: #FFFFFF; opacity: 1; cursor: progress; box-shadow: none; }
.shell .submit[aria-busy="true"]::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: auth-spin .8s linear infinite;
}

.shell .secondary {
  height: auto;
  min-height: 52px;
  border: 1px solid var(--auth-line-3);
  border-radius: 12px;
  background: transparent;
  color: var(--auth-text);
  font-size: 16px;
  font-weight: 800;
}
/* "Try again" on a failure screen: the one thing to press there, so the red button. */
.shell .secondary.retry { min-height: 54px; border-color: transparent; background: var(--auth-red-fill); color: #FFFFFF; font-size: 17px; box-shadow: 0 10px 30px -8px var(--auth-red-shadow); }

.shell :focus-visible { outline: 2px solid var(--auth-red); outline-offset: 3px; }
.shell .submit:focus-visible,
.shell .secondary.retry:focus-visible,
.shell .tg-card-first .tg-button:focus-visible { outline-color: var(--auth-focus-on-red); }
.shell .field input:focus-visible { outline: 2px solid transparent; outline-offset: 0; }

/* What went wrong, under the fields, unfolding rather than jumping. */
.shell .notice { margin: 0; padding: 12px 16px; border: 1px solid; border-inline-start-width: 3px; border-radius: 12px; font-size: 15px; line-height: 1.75; }
.shell .notice-error { border-color: var(--auth-bad-edge); border-inline-start-color: var(--auth-bad); background: var(--auth-bad-wash); color: var(--auth-bad-text); }
.shell .notice-info { border-color: var(--auth-line-2); border-inline-start-color: var(--auth-text-3); background: var(--auth-veil); color: var(--auth-text-2); }
/* Latin sets tighter than Persian: the site's 1.6 for the English paragraphs. */
html[lang="en"] .shell :is(.auth-frame .intro, .notice, .tg-body > p, .small-link) { line-height: 1.6; }

/* "First time on a computer?" -- a glass card; the steps as the site's timeline. */
.shell .tg-card {
  margin: 0;
  padding: 22px;
  border: 1px solid var(--auth-glass-edge);
  border-radius: 16px;
  background: var(--auth-glass);
  box-shadow: var(--auth-glass-lit), var(--auth-glass-drop);
}
.shell .tg-card h3 { margin: 0 0 4px; color: var(--auth-text); font-size: 17px; font-weight: 800; line-height: 1.5; }
.shell .tg-card > p,
.shell .tg-body > p { margin: 0 0 16px; color: var(--auth-text-2); font-size: 15px; line-height: 1.8; }
/* On the sign-in it is folded to one row, as the site's channel rows: a tile, what it is, a chevron. */
.shell details.tg-card { padding: 0; }
.shell .tg-card > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "tile title chev" "tile sub chev";
  align-items: center;
  column-gap: 14px;
  min-height: 64px;
  padding: 11px 18px;
  padding-inline-start: 11px;
  border-radius: 15px;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.shell .tg-card > summary::-webkit-details-marker { display: none; }
.shell .tg-tile { grid-area: tile; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--auth-red-wash); color: var(--auth-red); }
.shell .tg-tile .icon { width: 22px; height: 22px; }
.shell .tg-card > summary h3 { grid-area: title; align-self: end; min-width: 0; margin: 0; font-size: 16px; }
.shell .tg-sub { grid-area: sub; align-self: start; min-width: 0; color: var(--auth-text-3); font-size: 14px; font-weight: 500; line-height: 1.55; text-wrap: balance; }
/* Down when folded, up when open; drawn with physical sides, so it is the same in both directions. */
.shell .tg-chev { grid-area: chev; width: 9px; height: 9px; margin: -5px 4px 0; border-right: 2px solid var(--auth-text-3); border-bottom: 2px solid var(--auth-text-3); transform: rotate(45deg); }
.shell details.tg-card[open] .tg-chev { margin-top: 5px; transform: rotate(225deg); }
.shell .tg-body { padding: 6px 22px 22px; }
.shell .steps { display: grid; gap: 12px; margin: 0 0 18px; padding: 0; list-style: none; }
.shell .steps li { position: relative; display: flex; align-items: flex-start; gap: 14px; color: var(--auth-text); font-size: 15px; line-height: 1.6; }
.shell .steps li > span:last-child { padding-top: 4px; }
.shell .steps li b { font-weight: 800; }
.shell .steps li:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 15px; top: 34px; bottom: -10px; width: 2px; background: var(--auth-line-2); }
.shell .steps li:first-child::after { background: linear-gradient(var(--auth-red), var(--auth-line-2)); }
.shell .steps .n {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 2px solid var(--auth-red);
  border-radius: 50%;
  background: var(--auth-ink-2);
  color: var(--auth-text);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 0 18px var(--auth-red-halo);
}
/* "More ← Sign in from a computer": the arrow points the way the line reads. */
[dir="ltr"] .shell .steps .to { display: inline-block; transform: scaleX(-1); }

/* Telegram, as the site's contact channel: a tile, the words, a chevron. */
.shell .tg-button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  height: auto;
  min-height: 60px;
  padding: 9px 16px;
  padding-inline-start: 9px;
  border: 1px solid var(--auth-glass-edge);
  border-radius: 14px;
  background: var(--auth-veil);
  color: var(--auth-text);
  font-size: 16px;
  font-weight: 800;
  text-align: start;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.shell .tg-button .icon { box-sizing: content-box; width: 22px; height: 22px; padding: 9px; border-radius: 12px; background: var(--auth-red-wash); color: var(--auth-red); }
.shell .tg-button::after { content: ""; width: 8px; height: 8px; margin-inline-end: 4px; border-block-start: 2px solid var(--auth-text-3); border-inline-end: 2px solid var(--auth-text-3); transform: rotate(45deg); }
[dir="rtl"] .shell .tg-button::after { transform: rotate(-45deg); }
/* A forgotten password: Telegram is the way, so it is the red button. */
.shell .tg-card-first .tg-button { border-color: transparent; background: var(--auth-red-fill); color: #FFFFFF; box-shadow: 0 10px 30px -8px var(--auth-red-shadow); }
.shell .tg-card-first .tg-button .icon { background: rgba(255, 255, 255, .16); color: #FFFFFF; }
.shell .tg-card-first .tg-button::after { border-color: rgba(255, 255, 255, .85); }

.shell .small-link { margin: 4px 0 0; color: var(--auth-text-3); font-size: 15px; line-height: 1.8; text-align: center; }
.shell .divider { margin: 4px 0; color: var(--auth-text-3); font-size: 13px; }
.shell .divider::before,
.shell .divider::after { background: var(--auth-line-2); }

/* --- a screen that only says something: a failure, nothing open yet ---------- */
.shell .form-card > h2:first-child::before { content: ""; display: block; width: 36px; height: 4px; margin-bottom: 16px; background: var(--auth-red-fill); transform: skewX(-20deg); }
.shell .form-card > h2 { font-size: clamp(1.5rem, .8vw + 1.2rem, 1.875rem); font-weight: 900; line-height: 1.35; }
html[lang="en"] .shell .form-card > h2 { font-weight: 800; letter-spacing: -.02em; }
.shell .form-card > .notice-info { border-inline-start-color: var(--auth-red); }
/* The whole screen in the frame, as the sign-in's form is (screens.js marks it .status). */
.shell .form-card.status {
  padding: 28px;
  border: 1px solid transparent;
  border-radius: 20px;
  background: var(--auth-glass-ink) padding-box, var(--auth-frame-edge) border-box;
  box-shadow: var(--auth-glass-lit), var(--auth-frame-drop);
}
/* Try again first; signing out beside it, a step quieter (a browser's "account did not open"). */
.shell .status > .retry + .secondary { margin-top: -4px; }
/* The message is the screen's lead, not a box inside the box. */
.shell .status > .notice-info { margin: 0 0 8px; padding: 0; border: 0; background: none; color: var(--auth-text-2); font-size: 16px; line-height: 1.85; }
/* Who to reach (support.js), under a hairline: the site's contact channels, a row each. */
.shell .support {
  margin: 8px 0 0;
  padding: 22px 0 0;
  border: 0;
  border-top: 1px solid var(--auth-line-2);
  border-radius: 0;
  background: none;
}
.shell .support .panel-head { margin: 0 0 2px; color: var(--auth-text); font-size: 16px; font-weight: 800; }
.shell .support .hint { margin: 0 0 14px; }
.shell .support-links { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.shell .support-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  justify-content: stretch;
  gap: 14px;
  height: auto;
  min-height: 60px;
  padding: 9px 18px;
  padding-inline-start: 9px;
  border: 1px solid var(--auth-glass-edge);
  border-radius: 14px;
  background: var(--auth-veil);
  color: var(--auth-text);
  font-size: 16px;
  font-weight: 800;
  text-align: start;
}
.shell .support-link .icon { box-sizing: content-box; width: 20px; height: 20px; padding: 10px; border-radius: 12px; background: var(--auth-red-wash); color: var(--auth-red); }
/* The site's channel (app/site/assets/site.css .channel): what it is, small, above the handle or the number. */
.shell .support.channels .support-link { min-height: 64px; padding-block: 11px; }
.shell .support-text { display: grid; min-width: 0; line-height: 1.4; }
.shell .support-label { color: var(--auth-text-3); font-size: 14px; font-weight: 700; }
.shell .support-value { justify-self: start; color: var(--auth-text); font-size: 17px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.shell .support-value.latin { font-family: "Inter", system-ui, sans-serif; }
.shell .support-link::after { content: ""; width: 8px; height: 8px; margin-inline-end: 4px; border-block-start: 2px solid var(--auth-text-3); border-inline-end: 2px solid var(--auth-text-3); transform: rotate(45deg); }
[dir="rtl"] .shell .support-link::after { transform: rotate(-45deg); }
.shell .status > .support + .secondary { margin-top: 8px; }

/* --- waiting: the Mini App launcher's logo and bar (miniapp/launcher.css) in the middle ---------
   Not one picture with the launcher any more: in the dark look the launcher is still the old ink
   (#0A0A0B), the splash below the charcoal's top colour, and this wait the charcoal ground with its
   ring (signin-bg.css), which comes in on the visit's first screen. */
.shell:has(.form-card > .loader) {
  justify-content: center;
  align-items: center;
  padding: 32px 24px calc(32px + env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(var(--auth-dots) 1px, transparent 1.2px) 0 0 / 22px 22px,
    radial-gradient(90% 55% at 50% 0%, var(--auth-glow-top), transparent 70%),
    var(--auth-ink);
}
.shell:has(.form-card > .loader) .auth-top { display: block; min-height: 0; padding: 0; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.shell:has(.form-card > .loader) .lang-toggle,
.shell:has(.form-card > .loader) .brand-panel { display: none; }
.shell:has(.form-card > .loader) .atlet-lockup { flex-direction: column; gap: 14px; }
.shell:has(.form-card > .loader) .atlet-logo { width: min(268px, 70vw); }
.shell:has(.form-card > .loader) .auth-top .atlet-slogan { position: static; width: auto; height: auto; overflow: visible; clip-path: none; padding: 0; border: 0; font-size: 11px; font-weight: 500; letter-spacing: .28em; }
.shell:has(.form-card > .loader) .auth-main { display: block; flex: none; width: auto; padding: 0; }
.shell:has(.form-card > .loader) .form-card { gap: 14px; max-width: none; margin-top: 8px; text-align: center; }
.shell:has(.form-card > .loader) .form-card > .eyebrow { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.shell:has(.form-card > .loader) .form-card > h2 { color: var(--auth-text-3); font-size: 14px; font-weight: 500; line-height: 1.6; letter-spacing: 0; }
.shell:has(.form-card > .loader) .form-card > h2::before { content: none; }
.shell .form-card > .loader { display: block; justify-self: center; width: 120px; height: 3px; margin-top: 22px; overflow: hidden; border-radius: 2px; background: var(--auth-line-2); }
.shell .form-card > .loader i { display: block; width: 40%; height: 100%; border-radius: 2px; background: var(--auth-red-fill); animation: auth-slide 1.1s ease-in-out infinite; }

/* --- before the first screen: the logo if it takes a moment, on the signed-out screens' colour ---
   (dark: #161618, the charcoal's top edge, with its dots and the red glow; the ring, the symbol and
   the traces come with the first screen). */
#app:empty {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(rgba(255, 255, 255, .055) 1px, transparent 1.2px) 0 0 / 22px 22px,
    radial-gradient(90% 55% at 50% 0%, rgba(220, 38, 38, .14), transparent 70%),
    #161618;
}
#app:empty::before {
  content: "From Science to Performance";
  padding-top: calc(min(268px, 70vw) * .3373 + 14px);
  background: url("../assets/brand/atlet-mark-on-dark.svg") top center / min(268px, 70vw) auto no-repeat;
  color: #A8A29E;
  font: 500 11px/1.2 "Inter", system-ui, sans-serif;
  letter-spacing: .28em;
  text-transform: uppercase;
  white-space: nowrap;
}
#app:empty::after {
  content: "";
  width: 120px;
  height: 3px;
  margin: 36px 0 36px;
  border-radius: 2px;
  background: linear-gradient(#DC2626, #DC2626) no-repeat 0 0 / 48px 3px, rgba(255, 255, 255, .16);
}
:root[data-theme="light"] #app:empty {
  background:
    radial-gradient(rgba(10, 10, 11, .075) 1px, transparent 1.2px) 0 0 / 22px 22px,
    radial-gradient(90% 55% at 50% 0%, rgba(220, 38, 38, .09), transparent 70%),
    #F2F3F5;
}
:root[data-theme="light"] #app:empty::before { background-image: url("../assets/brand/atlet-mark-on-light.svg"); color: #57534E; }
:root[data-theme="light"] #app:empty::after { background-color: rgba(10, 10, 11, .14); }
/* Scripting off: nothing is coming, so index.html's <noscript> (both languages) where the wait would be,
   in place of a loader that would slide for ever over it. (The look's script has not run either: dark.) */
@media (scripting: none) {
  #app:empty::after { display: none; }
}
body > noscript {
  position: fixed;
  inset-inline: 0;
  top: calc(50% + 84px);
  z-index: 1;
  display: grid;
  gap: 6px;
  padding: 0 24px;
  text-align: center;
}
body > noscript p { margin: 0; color: #D6D3D1; font: 500 15px/1.8 "Vazirmatn", "Inter", system-ui, sans-serif; }

/* --- motion: what arrives, once; nothing while reading -------------------------- */
@keyframes auth-rise { from { opacity: 0; translate: 0 14px; } }
@keyframes auth-in { from { opacity: 0; } }
/* The dash lives only inside the keyframes: left on the path after the draw, Chromium 140 painted no arc. */
@keyframes auth-draw { from { stroke-dasharray: 1 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1 1; stroke-dashoffset: 0; } }
@keyframes auth-pulse { from { opacity: .6; } to { opacity: 1; } }
@keyframes auth-spin { to { transform: rotate(1turn); } }
@keyframes auth-slide { from { transform: translateX(170%); } to { transform: translateX(-120%); } }
@keyframes auth-splash { from { background-position: 120px 0, 0 0; } to { background-position: -48px 0, 0 0; } }
@keyframes auth-wait { from { visibility: hidden; } }
@keyframes auth-unfold { from { opacity: 0; max-height: 0; padding-block: 0; overflow: hidden; } to { opacity: 1; max-height: 12em; overflow: hidden; } }

@media (prefers-reduced-motion: no-preference) {
  .shell .form-card > * { animation: auth-rise .45s var(--auth-out) backwards; }
  .shell .form-card > :nth-child(2) { animation-delay: 60ms; }
  .shell .form-card > :nth-child(3) { animation-delay: 120ms; }
  .shell .form-card > :nth-child(n+4) { animation-delay: 180ms; }
  .shell .message > .notice { animation: auth-unfold .3s var(--auth-out) backwards; }
  .auth-dial.play .value { animation: auth-draw 1.4s var(--auth-ease) .2s backwards, auth-in .1s linear .2s backwards; }
  .auth-dial.play .knob { animation: auth-in .3s var(--auth-ease) 1.5s backwards; }
  .auth-dial.play::before { animation: auth-pulse 1.6s ease-in-out 1.6s 3 alternate both; }
  #app:empty::before,
  #app:empty::after { animation: auth-in .3s ease .25s backwards; }
  #app:empty::after { animation: auth-in .3s ease .25s backwards, auth-splash 1.1s ease-in-out .25s infinite; }
  .shell .submit,
  .shell .secondary,
  .shell .tg-button,
  .shell .support-link,
  .shell details.tg-card { transition: background-color .18s var(--auth-ease), border-color .18s var(--auth-ease), box-shadow .24s var(--auth-out), translate .16s var(--auth-out), scale .16s var(--auth-out); }
  .shell .field input { transition: border-color .15s ease, box-shadow .15s ease; }
  .shell .tg-chev { transition: transform .2s var(--auth-ease), margin .2s var(--auth-ease); }
  .shell details.tg-card[open] > .tg-body { animation: auth-rise .3s var(--auth-out) backwards; }
  .shell .submit:not(:disabled):active,
  .shell .secondary:active,
  .shell .tg-button:active { scale: .98; }
}
/* Hover only where there is a pointer: on a phone a tap leaves :hover on what was tapped. */
@media (hover: hover) {
  .shell .lang-toggle:hover { color: var(--auth-text); border-color: var(--auth-line-3); }
  .shell .pw .eye:hover { color: var(--auth-text); background: var(--auth-veil); }
  .shell .link-button:hover { color: var(--auth-text); text-decoration-color: var(--auth-red); }
  .shell .notice .link-button.inline:hover { color: inherit; }
  .shell .submit:not(:disabled):hover,
  .shell .secondary.retry:hover,
  .shell .tg-card-first .tg-button:hover { background: var(--auth-red-press); }
  .shell .secondary:not(.retry):hover,
  .shell .tg-card:not(.tg-card-first) .tg-button:hover,
  .shell .support-link:hover { border-color: rgba(239, 68, 68, .45); background: var(--auth-red-wash); }
  .shell details.tg-card:hover { border-color: rgba(239, 68, 68, .45); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .shell .submit:not(:disabled):hover { translate: 0 -1px; box-shadow: 0 14px 36px -8px rgba(220, 38, 38, .7); }
}
/* The app's own hover colours (further down this file) kept off these screens on a touch screen. */
@media (hover: none) {
  .shell .submit:hover { background: var(--auth-red-fill); }
  .shell .submit:disabled:hover { background: var(--auth-red-press); }
  .shell .secondary:not(.retry):hover { border-color: var(--auth-line-3); background: transparent; }
  .shell .link-button:hover { color: var(--auth-text-2); }
  .shell .pw .eye:not([aria-pressed="true"]):hover { color: var(--auth-text-3); }
  .shell .support-link:hover { border-color: var(--auth-glass-edge); }
}
@media (prefers-reduced-motion: reduce) {
  /* A still ring, open at the top: busy, without the turning. */
  .shell .submit[aria-busy="true"]::before { animation: none; border-color: #FFFFFF; border-top-color: transparent; }
  .shell .form-card > .loader i { width: 100%; animation: none; }
  /* The splash still waits its quarter second, so a quick start shows none of it; it only does not fade in. */
  #app:empty::before,
  #app:empty::after { animation: auth-wait 0s .25s backwards; }
}

/* --- phones and narrow windows: one column, the form first after a short heading */
@media (max-width: 899px) {
  .shell {
    background:
      radial-gradient(var(--auth-dots) 1px, transparent 1.2px) 0 0 / 22px 22px,
      radial-gradient(420px 340px at 88% 0%, var(--auth-glow), transparent 70%),
      var(--auth-ink);
  }
  [dir="rtl"] .shell {
    background:
      radial-gradient(var(--auth-dots) 1px, transparent 1.2px) 0 0 / 22px 22px,
      radial-gradient(420px 340px at 12% 0%, var(--auth-glow), transparent 70%),
      var(--auth-ink);
  }
  .auth-top { min-height: 60px; padding-block: calc(8px + env(safe-area-inset-top, 0px)) 8px; }
  .auth-top .atlet-logo { width: 78px; }
  .auth-main {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    align-content: start;
    row-gap: 24px;
    max-width: 520px;
    padding: 20px var(--auth-gutter) calc(40px + env(safe-area-inset-bottom, 0px));
  }
  /* One column: the heading first, then the form. */
  .shell .form-panel,
  .shell .brand-panel { grid-column: auto; grid-row: auto; }
  .shell .brand-panel { grid-template-columns: minmax(0, 1fr) auto; align-items: center; justify-self: stretch; justify-items: stretch; width: auto; gap: 16px; }
  .shell:not(.has-lead) .brand-panel { display: none; }
  .shell .tagline h1 { font-size: 30px; line-height: 1.12; }
  /* The dial, small, beside the heading: the arc and the symbol only. */
  .auth-dial { order: 2; width: 84px; }
  .auth-dial::before { inset: 6%; }
  .auth-dial .tk { stroke-width: 5; }
  .auth-dial .tk.long { stroke-width: 6; }
  .auth-dial .track,
  .auth-dial .value { stroke-width: 22; }
  .auth-dial .knob { display: none; }
  .auth-frame,
  .shell .form-card.status { padding: 20px; }
  .shell .tg-card { padding: 20px; }
  .shell .tg-body { padding: 4px 20px 20px; }
  .shell .form-card { max-width: none; }
}
/* A tablet, or a narrow window: the page lower down the height, the heading and the dial larger.
   A fixed top space, not centring: centred, the block jumped up under the finger whenever
   something opened ("First time on a computer?"). Not a phone on its side (too short). */
@media (min-width: 600px) and (max-width: 899px) and (min-height: 600px) {
  .auth-main { align-content: start; padding-top: max(40px, calc((100svh - 64px - 720px) / 2)); }
  .shell .tagline h1 { font-size: 34px; }
  .auth-dial { width: 120px; }
}
@media (max-width: 599px) {
  .shell .auth-top :is(.atlet-slogan, .atlet-words) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  /* At 84px the ticks are a fuzz: the ring and the symbol only, the drawing a little larger than its
     box so the ring fills it once the ticks are gone, and the symbol larger inside it. */
  .auth-dial .tk { display: none; }
  .auth-dial svg { width: 112%; margin: -6%; }
  .auth-dial-mark { width: 40%; }
}
/* A step smaller on a small phone, so each half of the slogan keeps to its line beside the dial. */
@media (max-width: 399px) {
  .shell .tagline h1 { font-size: clamp(24px, 7.2vw, 28px); }
}
@media (max-width: 359px) {
  .auth-dial { display: none; }
  .shell .tg-button { gap: 10px; font-size: 15px; padding-inline-end: 12px; }
  .shell .brand-panel { grid-template-columns: minmax(0, 1fr); }
  .shell .support-link { gap: 12px; font-size: 15px; }
  /* The handle is one long word: its row's words get the width, as the folded row's do (the label says what it is). */
  .shell .support.channels .support-link { grid-template-columns: minmax(0, 1fr) auto; padding-inline-start: 16px; }
  .shell .support.channels .support-link .icon { display: none; }
  .shell .support-value { font-size: 16px; }
  /* The row's words get the width: the tile is decoration, and beside it the question broke in two. */
  .shell .tg-card > summary { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title chev" "sub chev"; column-gap: 12px; padding-inline: 16px 14px; }
  .shell .tg-tile { display: none; }
  .auth-frame,
  .shell .form-card.status { padding: 18px 16px; }
  .shell .tg-body { padding: 4px 16px 16px; }
}

/* A laptop's short window (1440x900, 1366x768): tighter, so the sign-in and
   the Telegram card fit above the fold; only the access-code line is below. */
@media (min-width: 900px) and (max-height: 940px) {
  .auth-main { padding-block: 24px 32px; }
  .shell .form-card { gap: 12px; }
  .auth-frame { padding: 24px; }
  .shell .auth-frame > .form { margin-top: 16px; }
  .shell .form { gap: 14px; }
  .shell .tg-card { padding: 18px 20px; }
  .shell .tg-card > p,
  .shell .tg-body > p { margin-bottom: 12px; }
  .shell .steps { gap: 8px; margin-bottom: 14px; }
  .shell .steps li:not(:last-child)::after { bottom: -6px; }
}

/* Reduced transparency: opaque frames. */
@media (prefers-reduced-transparency: reduce) {
  .auth-frame,
  .shell .form-card.status { background: linear-gradient(var(--auth-ink-2), var(--auth-ink-2)) padding-box, var(--auth-frame-edge) border-box; }
  .shell .tg-card { background: var(--auth-ink-2); }
  .auth-top { background: var(--auth-ink); }
}
/* The blur, where there is one: the frames are small, so it is cheap. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .auth-frame,
  .shell .form-card.status,
  .shell .tg-card:not(.tg-card-first) {
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .auth-frame, .shell .form-card.status, .shell .tg-card, .auth-top { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (forced-colors: active) {
  .shell .eyebrow::before,
  .shell .form-card > h2:first-child::before { background: CanvasText; }
  .auth-frame,
  .shell .form-card.status,
  .shell .tg-card { border-color: CanvasText; }
  .shell .tg-chev { border-color: CanvasText; }
  .shell .brand-mark img { forced-color-adjust: none; background: #0A0A0B; }
  .shell .brand-mark img.on-light { background: #FFFFFF; }
  .shell .submit[aria-busy="true"]::before { border-color: ButtonText; border-top-color: Highlight; }
  /* The red fill is gone in these colours: an edge, so the one button still reads as a button, and a
     heavier one than a quiet button's, so "Try again" still reads as first beside "Sign out". */
  .shell .submit,
  .shell .secondary.retry { border: 2px solid ButtonText; }
  /* An icon with a colour of its own (white on the red row, red in a tile) kept it and vanished on
     the system's ground: it takes its row's text colour instead. */
  .shell .icon { forced-color-adjust: auto; color: inherit; }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--atlet-bg);
  color: var(--atlet-text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

:lang(fa) body {
  font-family: "Vazirmatn", "IRANSans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Tahoma, sans-serif;
}


.field { margin-bottom: 16px; }

.field label {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 500;
  color: var(--atlet-text-secondary);
}

.field input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--atlet-border);
  background: var(--atlet-surface);
  color: var(--atlet-text-primary);
  font-size: 14px;
  font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.field input::placeholder { color: var(--atlet-text-muted); }

.field input:focus {
  outline: none;
  border-color: var(--atlet-red);
  box-shadow: 0 0 0 3px var(--atlet-red-glow);
}

/* Usernames, emails, phone numbers and access codes are latin-script values
   even when the interface around them is Persian. */
.field input[type="email"],
.field input[type="tel"],
.field input[type="password"],
.field input[autocomplete="username"],
.field input[autocomplete="new-password"],
.code-input {
  direction: ltr;
  text-align: start;
}

/* A card, IBAN or account number (destination.js): left to right on a
   Persian page as well, and figures of one width so that its groups of four
   read as groups. */
.field input.bank-number {
  direction: ltr;
  text-align: start;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

.code-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 2px;
  text-align: center;
}

.hint {
  margin: -6px 0 16px;
  font-size: 11.5px;
  color: var(--atlet-text-muted);
}

.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 0 22px;
  font-size: 12.5px;
}

.remember {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--atlet-text-secondary);
}

.remember input { accent-color: var(--atlet-red); }

.link-button {
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--atlet-border-strong);
  border-radius: 0;
  background: none;
  color: var(--atlet-text-secondary);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.link-button:hover { color: var(--atlet-text-primary); }

.submit {
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: 12px;
  background: var(--atlet-red);
  color: #fff;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: .2px;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s ease;
}

.submit:hover { background: var(--atlet-red-active); }

.submit:disabled {
  background: var(--atlet-surface-raised);
  color: var(--atlet-text-muted);
  cursor: default;
}

.secondary {
  width: 100%;
  height: 46px;
  border: 1px solid var(--atlet-border-strong);
  border-radius: 12px;
  background: transparent;
  color: var(--atlet-text-primary);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.secondary:hover {
  background: var(--atlet-surface);
  border-color: var(--atlet-red);
}

.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 26px 0;
  font-size: 11px;
  color: var(--atlet-text-muted);
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--atlet-border);
}

/* The password box and its eye. The password reads left to right in both
   languages, so the eye sits at its right edge, where the dots never reach. */
.pw { position: relative; }
.pw input { width: 100%; padding-right: 46px; }
.pw .eye {
  position: absolute;
  inset-block: 0;
  right: 4px;
  margin: auto;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--atlet-text-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.pw .eye:hover { color: var(--atlet-text-primary); }
.pw .eye .icon { width: 19px; height: 19px; }

.notice .link-button.inline { color: inherit; font-weight: 700; font-size: inherit; border-bottom-color: currentColor; }


.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.card-head strong { font-size: 13px; font-weight: 800; }
.card-head .muted { font-size: 10.5px; color: var(--atlet-text-muted); }

.chip {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.chip-ok { background: rgba(24, 197, 134, .13); color: var(--atlet-ok); }
.chip-warn { background: rgba(242, 179, 61, .14); color: #F2B33D; }
.chip-red { background: var(--atlet-red-glow); color: #FF6B6B; }
.chip-dim { background: rgba(157, 166, 176, .12); color: var(--atlet-text-secondary); }

.line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--atlet-border);
}

.line:first-of-type { border-top: 0; }
.line .who { flex: 1; min-width: 0; }
.line .who b { display: block; font-size: 12.5px; font-weight: 700; }

.line .who i {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-style: normal;
  color: var(--atlet-text-muted);
}

.progress {
  height: 5px;
  margin-top: 10px;
  border-radius: 999px;
  background: var(--atlet-border);
  overflow: hidden;
}

.progress i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--atlet-red);
}

.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}

.tile {
  border: 1px solid var(--atlet-border);
  border-radius: 14px;
  background: var(--atlet-surface);
  padding: 12px 13px;
}

.tile strong {
  display: block;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.tile span {
  display: block;
  margin-top: 5px;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--atlet-text-muted);
}

.tile-ok strong { color: var(--atlet-ok); }
.tile-red strong { color: #FF6B6B; }
.tile-dim strong { color: var(--atlet-text-secondary); }

.panel {
  margin: 0 0 18px;
  border: 1px solid var(--atlet-border);
  border-radius: 14px;
  background: var(--atlet-surface);
  padding: 12px 13px;
}

.panel-head {
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 800;
}

.panel .form { margin-top: 6px; }
.panel .field:last-of-type { margin-bottom: 12px; }

.toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--atlet-border);
}

.toggle:first-of-type { border-top: 0; }

.toggle > b {
  font-size: 12.5px;
  font-weight: 700;
}

.toggle > b em {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 400;
  color: var(--atlet-text-muted);
}

.seg {
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--atlet-border);
  border-radius: 11px;
  background: var(--atlet-surface-raised);
  flex: 0 0 auto;
}

.seg-option {
  padding: 6px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--atlet-text-secondary);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.seg-option.on {
  background: var(--atlet-red-glow);
  color: #FF6B6B;
}

.date-sample {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.date-sample div {
  border: 1px solid var(--atlet-border);
  border-radius: 11px;
  background: var(--atlet-surface-raised);
  padding: 9px 10px;
}

.date-sample span {
  display: block;
  font-size: 9.5px;
  color: var(--atlet-text-muted);
}

.date-sample strong {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.notice-ok {
  border: 1px solid rgba(24, 197, 134, .4);
  background: rgba(24, 197, 134, .12);
  color: #7BE6BC;
}

/* A whole row is the target, not a link inside it: a name on a phone is a
   small thing to hit accurately. */
.line-button {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--atlet-border);
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.line-button:first-of-type { border-top: 0; }
.line-button:hover { background: var(--atlet-surface-raised); }

.summary {
  margin: 4px 0 20px;
  border: 1px solid var(--atlet-border);
  border-radius: 12px;
  background: var(--atlet-surface);
  padding: 2px 13px;
}

.summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--atlet-border);
  font-size: 12.5px;
}

.summary-row:first-child { border-top: 0; }
.summary-row span { color: var(--atlet-text-secondary); }
.summary-row b { font-weight: 700; }

/* Identifiers stay latin-script and left-to-right inside a Persian page. */
.latin {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}

.message:empty { display: none; }

.notice {
  margin: 0 0 16px;
  padding: 11px 13px;
  border-radius: 11px;
  font-size: 12.5px;
  line-height: 1.65;
}

.notice-error {
  border: 1px solid rgba(220, 38, 38, .45);
  background: var(--atlet-red-glow);
  color: #FFB4B4;
}

.notice-info {
  border: 1px solid var(--atlet-border);
  background: var(--atlet-surface);
  color: var(--atlet-text-secondary);
}

/* --- the signed-in shell ------------------------------------------------ */

/* Behind every signed-in screen, a plain ground: the gym photo once here
   under dark glass made long reading tiring (the owner, 2026-10-10). */
.app {
  position: relative;
  min-height: 100vh;
  max-width: 560px;
  margin: 0 auto;
}

/* A fixed layer, under the content. */
.app-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--atlet-bg);
}

.app-main,
.side,
.nav { position: relative; z-index: 1; }

.side,
.hdr-title { display: none; }

/* Room under the content for the tab bar, which now stays on screen. */
.app-body {
  padding: 0 14px calc(96px + env(safe-area-inset-bottom, 0px));
}

.icon { width: 1.25em; height: 1.25em; flex: 0 0 auto; }

.app-content { padding-bottom: 8px; }

/* One header for all three roles. Three columns so the mark stays centred
   whatever sits beside it -- the identity badge on one screen, a back button
   on the next. */
.hdr {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 10px;
  margin: calc(12px + env(safe-area-inset-top, 0px)) 14px 12px;
  padding: 10px 12px;
  border: 1px solid var(--atlet-border);
  border-radius: 16px;
  background: var(--atlet-surface);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.hdr-id {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--atlet-border);
  background: var(--atlet-surface-raised);
  font-size: 11px;
  font-weight: 800;
  color: var(--atlet-text-secondary);
}

.hdr-back {
  font-family: inherit;
  font-size: 15px;
  color: var(--atlet-text-primary);
  cursor: pointer;
}

.hdr-mid { display: flex; justify-content: center; min-width: 0; }

.hdr-bell,
.hdr-theme {
  position: relative;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid var(--atlet-border);
  background: var(--atlet-surface-raised);
  color: var(--atlet-text-secondary);
  font-size: 15px;
  cursor: pointer;
}

.hdr-bell b {
  position: absolute;
  top: -5px;
  inset-inline-start: -5px;
  min-width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--atlet-red);
  color: #fff;
  font-size: 9px;
}

/* The owner's logo and the apps' slogan (ui.js atletMark), at the width of each place; the slogan spans the logo. */
.atlet-lockup { display: inline-flex; flex-direction: column; align-items: center; gap: .32em; flex: 0 0 auto; }
.atlet-logo { display: block; height: auto; flex: 0 0 auto; }
.atlet-logo-sm { width: 112px; }
.atlet-logo-md { width: 150px; }
.atlet-logo-lg { width: 220px; }
.atlet-slogan { display: block; direction: ltr; font-family: "Inter", system-ui, sans-serif; font-weight: 500; letter-spacing: .06em; line-height: 1.2; white-space: nowrap; color: var(--atlet-text-secondary); }
.atlet-lockup-sm .atlet-slogan { font-size: 6.6px; }
.atlet-lockup-md .atlet-slogan { font-size: 8.9px; }
.atlet-lockup-lg .atlet-slogan { font-size: 13px; }

/* Five columns for a manager, four for everyone else -- the only thing about
   the chrome that differs by role. Held at the bottom of the screen: at the
   end of the content it was a scroll away on every long list. */
.nav {
  position: fixed;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: min(536px, calc(100% - 24px));
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 7px 6px;
  border: 1px solid var(--atlet-border);
  border-radius: 18px;
  background: var(--atlet-surface);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.nav-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nav-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.nav-6 .nav-tab { font-size: 9px; }

.nav-tab {
  padding: 7px 2px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--atlet-text-muted);
  font-family: inherit;
  font-size: 9.5px;
  font-weight: 700;
  cursor: pointer;
}

.nav-tab em {
  display: block;
  margin-bottom: 3px;
  font-size: 16px;
  font-style: normal;
  line-height: 1;
}

.nav-tab.on { background: var(--focus-bg); color: var(--focus); }


/* --- group notification -------------------------------------------------
 *
 * The audience picker is a row of toggles rather than a dropdown: with four
 * options, every one of them should be readable without an interaction, and
 * the one that is selected should be readable without one either. The tick
 * box is drawn rather than a native checkbox so the control matches the
 * segmented controls elsewhere and keeps its size on a phone.
 */

.picks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 0 4px;
}

.pick {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-block: 8px;
  padding-inline: 10px 13px;
  border: 1px solid var(--atlet-border);
  border-radius: 11px;
  background: var(--atlet-surface-raised);
  color: var(--atlet-text-secondary);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.pick:hover { border-color: var(--atlet-border-strong); }

.pick.on {
  border-color: var(--atlet-red);
  background: var(--atlet-red-glow);
  color: var(--red-text);
}

.pick-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border: 1px solid var(--atlet-border-strong);
  border-radius: 5px;
  font-size: 11px;
  line-height: 1;
}

.pick.on .pick-box {
  border-color: var(--atlet-red);
  background: var(--atlet-red);
  color: #fff;
}

.textarea {
  width: 100%;
  min-height: 132px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--atlet-border);
  background: var(--atlet-surface);
  color: var(--atlet-text-primary);
  font-size: 14px;
  font-family: inherit;
  line-height: 1.7;
  resize: vertical;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.textarea::placeholder { color: var(--atlet-text-muted); }

.textarea:focus {
  outline: none;
  border-color: var(--atlet-red);
  box-shadow: 0 0 0 3px var(--atlet-red-glow);
}

/* The one line that says a message will not reach everyone on the roster. */
.hint.warn { color: var(--warn); }


/* The finance month: two arrows and the month between them. The arrows
   are fixed-width so they do not move when the label changes length. */

.month-bar { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.month-bar .date-step { width: 46px; height: 46px; flex: 0 0 auto; }
.month-bar .date-step:disabled { opacity: .35; cursor: default; }
.month-label { flex: 1; min-width: 0; display: grid; gap: 2px; text-align: center; }
.month-label strong { font-size: 16px; font-weight: 800; }
.month-label span { font-size: 11.5px; color: var(--atlet-text-muted); }
.month-label .link-button { justify-self: center; font-size: 11.5px; }
.owed-total { margin-top: -6px; }
.add-expense { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; }
.add-expense .icon { width: 18px; height: 18px; }

/* A voided entry stays on the page rather than disappearing: the day view
 * is a record, and a correction should be as visible as what it corrected. */
.line-void .who b { text-decoration: line-through; }
.line-void { opacity: .62; }


/* --- the finance month ---------------------------------------------------
 *
 * One month, and the decisions it is waiting on. The bottom line leads
 * because it is the figure the owner actually opens this tab for; revenue
 * and expense sit under it as the two numbers it is made of.
 */

.headline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  border: 1px solid var(--atlet-border);
  border-radius: 14px;
  background: var(--atlet-surface);
  padding: 14px 15px;
}

.headline span { font-size: 11.5px; color: var(--atlet-text-muted); }

.headline strong {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--atlet-ok);
  font-variant-numeric: tabular-nums;
  text-align: end;
}

/* A month that cost more than it made is the one figure here that must not
   be mistaken for a good one at a glance. */
.headline-red { border-color: rgba(255, 107, 107, .35); }
.headline-red strong { color: var(--red-text); }

.summary-row b { font-variant-numeric: tabular-nums; }
.summary-row-ok b { color: var(--atlet-ok); }
.summary-row-warn b { color: var(--warn); }
.summary-row-dim b { color: var(--atlet-text-secondary); }

/* A deposit waiting on a decision is a row with a second line of controls
   under it, rather than a row with buttons squeezed in beside the name. */
.line-stack {
  display: block;
  padding: 11px 0;
}

.mini-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
}

.mini-actions .hint { margin: 0; flex: 1 1 100%; }

.chooser { margin: 10px 0 2px; }

.chooser-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--atlet-text-secondary);
}



.panel > .mini-actions { margin-top: 12px; }

/* A number the athlete copies into their bank app. The whole row is the
   target: these are sixteen and twenty-six digit numbers, and a small
   "copy" link beside one is a hard thing to hit on a phone. */
.copy-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 0;
  border: 0;
  border-top: 1px solid var(--atlet-border);
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.copy-row:first-of-type { border-top: 0; }
.copy-row:hover { background: var(--atlet-surface-raised); }

.copy-label {
  flex: 0 0 auto;
  font-size: 11.5px;
  color: var(--atlet-text-muted);
}

.copy-row b {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.copy-row em {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: var(--atlet-red);
}

/* The way into sending a deposit: a full-width button on the balance
   card, red when something is owed and quiet when nothing is. */
.deposit-open {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.deposit-open .icon { width: 18px; height: 18px; }

.chev {
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
  color: var(--atlet-text-muted);
}

/* An unread notification. A dot rather than a colour wash: the row still
   has to be readable, and half the rows will be unread on any visit. */
.note-unread { position: relative; padding-inline-start: 14px; }

.note-unread::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 15px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--atlet-red);
}

.note-unread .who b { font-weight: 800; }

/* A notification's body is written in lines -- the day, what is left, who
   recorded it -- and reads as lines, not one run-on sentence. */
.note-body { white-space: pre-line; line-height: 1.7; }

/* The time sits at the row's end, like a message's. */
.note-row { align-items: flex-start; }

.note-when {
  flex: none;
  padding-top: 2px;
  font-size: 10.5px;
  color: var(--atlet-text-muted);
  font-variant-numeric: tabular-nums;
}

/* A day of notifications under its heading: today, yesterday, a date. */
.note-day + .note-day { margin-top: 6px; }

.note-day-head {
  padding: 10px 0 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--atlet-text-muted);
}

.note-day-head + .line { border-top: 0; }

.note-actions { display: flex; justify-content: flex-end; margin: 2px 0 4px; }

/* The bell's drop (notifications.js): a small box sliding down from under
   the header, over the screen the reader is on; the screen dims behind it.
   On a phone it spans the width; wider, it sits under the bell. */
.note-scrim {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 38;
  background: var(--scrim);
  opacity: 0;
  transition: opacity .2s ease;
}
.note-scrim.open { opacity: 1; }
.note-drop {
  position: fixed;
  z-index: 39;
  inset-inline: 10px;
  max-height: min(72vh, 540px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--atlet-border);
  border-radius: 16px;
  background: var(--atlet-surface);
  color: var(--atlet-text-primary);
  box-shadow: 0 18px 40px var(--shadow-soft);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-16px) scale(.98);
  transform-origin: top;
  transition: opacity .2s ease, transform .26s cubic-bezier(.2, .9, .3, 1.1);
}
.note-drop.open { opacity: 1; transform: none; }
@media (min-width: 640px) {
  .note-drop { inset-inline-start: auto; inset-inline-end: 16px; width: 400px; }
}
@media (prefers-reduced-motion: reduce) {
  .note-scrim, .note-drop { transition: none; }
}
.note-drop-body { display: flex; flex-direction: column; min-height: 0; }
.note-drop-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--atlet-border);
}
.note-drop-head strong { font-size: 14px; }
.note-drop-head .muted { flex: 1; font-size: 11px; }
.note-drop-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--atlet-border);
  border-radius: 10px;
  background: var(--atlet-surface-raised);
  color: var(--atlet-text-secondary);
  cursor: pointer;
}
.note-drop-list { overflow-y: auto; padding: 0 12px 8px; }
.note-drop-more {
  width: 100%;
  margin-top: 6px;
  padding: 10px;
  border: 0;
  border-top: 1px solid var(--atlet-border);
  background: none;
  color: var(--atlet-text-secondary);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

/* A refusal that is a question rather than a verdict. */
.warn-panel { border-color: rgba(242, 179, 61, .4); }

/* --- wide screens: laptop and desktop ------------------------------------
   One layout, two widths. Below 1000px it is the phone app above; from
   1000px the tabs move into a sidebar on the reading edge (right in
   Persian, left in English -- the grid follows the page's direction), the
   header says where the reader is, and the content takes the room. The
   same elements are drawn at both widths; only this block moves them. */

.side-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 8px 22px;
  direction: ltr;
}


.side-tabs { display: flex; flex-direction: column; gap: 4px; }

.side-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--atlet-text-secondary);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: start;
  cursor: pointer;
}

.side-tab .icon { font-size: 18px; }
.side-tab:hover { background: var(--veil-1); color: var(--atlet-text-primary); }
.side-tab.on { background: var(--focus-bg); color: var(--focus); }

.side-me {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 14px 8px 0;
  border-top: 1px solid var(--atlet-border);
}

.side-me b { display: block; font-size: 13px; }
.side-me i { display: block; font-style: normal; font-size: 11px; color: var(--atlet-text-muted); }

/* --- the athlete's own tabs -----------------------------------------------
 *
 * Each tab opens on its answer: a ring counting down the sessions left,
 * the balance with the one button that settles it, then the record. */

.greeting {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 2px 14px;
  font-size: 14px;
  color: var(--atlet-text-secondary);
}

.greeting strong {
  font-size: 20px;
  font-weight: 800;
  color: var(--atlet-text-primary);
}

.hero-body {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

.ring-box {
  position: relative;
  flex: 0 0 auto;
  width: 108px;
  height: 108px;
}

.ring { display: block; width: 100%; height: 100%; }
.ring-track { fill: none; stroke: var(--atlet-border-strong); stroke-width: 9; }

.ring-fill {
  fill: none;
  stroke: var(--atlet-red);
  stroke-width: 9;
  stroke-linecap: round;
  transition: stroke-dashoffset .6s ease;
}

.ring-low .ring-fill { stroke: var(--warn); }

.ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.ring-label strong {
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ring-label span {
  margin-top: 4px;
  font-size: 10.5px;
  color: var(--atlet-text-muted);
}

.hero-text { flex: 1; min-width: 0; }

.hero-name {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
}

.hero-text p {
  margin: 0 0 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--atlet-text-secondary);
}

.hero-text p b { color: var(--atlet-text-primary); font-weight: 700; }
.hero-text .chip { display: inline-block; margin-top: 6px; }

.balance.owed { border-color: rgba(220, 38, 38, .45); }

.balance-big {
  margin: 4px 0 12px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.balance-big.red { color: var(--red-text); }
.balance-big.calm { font-size: 16px; color: var(--atlet-text-primary); }
.balance .hint { margin: -4px 0 12px; }

.card-head .link-button { font-size: 12px; }

.earlier { border-top: 1px solid var(--atlet-border); }
.earlier:first-of-type { border-top: 0; }
.earlier > summary { list-style: none; cursor: pointer; border-top: 0; }
.earlier > summary::-webkit-details-marker { display: none; }
.earlier .chev { transition: transform .15s ease; }
.earlier[open] .chev { transform: rotate(90deg); }
[dir="rtl"] .earlier[open] .chev { transform: rotate(-90deg); }

.earlier-body {
  margin-inline-start: 6px;
  padding-inline-start: 12px;
  padding-bottom: 6px;
  border-inline-start: 2px solid var(--atlet-border);
}

.earlier-body .hint { margin: 6px 0; }

/* --- sending a deposit ----------------------------------------------------
 *
 * Three numbered steps in the order they are done. The slip is two big
 * targets -- camera and gallery -- because a single file input opened the
 * camera and nothing else on some phones. */

.deposit-flow { max-width: 640px; }

.step-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--atlet-red);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.step-head strong { font-size: 13.5px; font-weight: 800; }
.step .hint { margin: 0 0 10px; }
.step .hint b { color: var(--atlet-text-primary); }
.step .field { margin-bottom: 8px; }
.step .field + .hint { margin-top: 0; }
.fill-all { margin: 0 0 10px; }

.pick small {
  font-size: 11px;
  font-weight: 600;
  color: var(--atlet-text-muted);
}

.receipt-picks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 2px 0 10px;
}

.receipt-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 88px;
  padding: 10px;
  border: 1px dashed var(--atlet-border-strong);
  border-radius: 14px;
  background: var(--atlet-surface-raised);
  color: var(--atlet-text-primary);
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.receipt-pick:hover { border-color: var(--atlet-red); background: var(--atlet-red-glow); }
.receipt-pick .icon { width: 26px; height: 26px; color: var(--red-text); }

/* Out of sight but still in the page: a label opens it, and a picker that
   is display:none is one some mobile browsers refuse to open. */
.file-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.receipt-preview {
  display: block;
  max-width: 100%;
  max-height: 240px;
  margin: 2px auto 8px;
  border: 1px solid var(--atlet-border);
  border-radius: 12px;
  object-fit: contain;
}

.receipt-shown .hint { margin: 0 0 4px; text-align: center; }

.extras > summary {
  list-style: none;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--atlet-text-secondary);
}

.extras > summary::-webkit-details-marker { display: none; }
.extras > summary::before { content: '+ '; color: var(--atlet-red); }
.extras[open] > summary::before { content: '− '; }
.extras[open] > summary { margin-bottom: 6px; }

.send-bar { margin: 0 0 18px; }
.send-bar .hint { margin: 10px 0 0; text-align: center; }

.sent { padding: 24px 16px; text-align: center; }

.sent-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: rgba(24, 197, 134, .13);
  color: var(--atlet-ok);
  font-size: 26px;
  font-weight: 800;
}

.sent strong { display: block; margin-bottom: 6px; font-size: 16px; }
.sent .hint { margin: 0 0 16px; }

/* --- support ---------------------------------------------------------------- */

.support .hint { margin: 0 0 12px; }

.support-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.support-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  border: 1px solid var(--atlet-border-strong);
  border-radius: 12px;
  color: var(--atlet-text-primary);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.support-link:hover { border-color: var(--atlet-red); }
.support-link .icon { width: 18px; height: 18px; }

/* --- the Jalali date field --------------------------------------------------
 *
 * A button that reads like the input it replaces, and a month that opens
 * beneath it in the page rather than floating over it: nothing to
 * position, nothing to clip on a phone, and the page scrolls as usual. */

.date-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--atlet-border);
  border-radius: 12px;
  background: var(--atlet-surface);
  color: var(--atlet-text-primary);
  font: inherit;
  font-size: 14px;
  text-align: start;
  cursor: pointer;
}

.date-button.empty { color: var(--atlet-text-muted); }
.date-button .icon { width: 19px; height: 19px; color: var(--atlet-text-secondary); }

.date-button:focus-visible,
.date-button[aria-expanded="true"] {
  outline: none;
  border-color: var(--atlet-red);
  box-shadow: 0 0 0 3px var(--atlet-red-glow);
}

.date-pop {
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--atlet-border-strong);
  border-radius: 14px;
  background: var(--atlet-surface-raised);
}

.date-pop[hidden] { display: none; }

.date-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.date-head strong { font-size: 14px; font-weight: 800; }

.date-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--atlet-border);
  border-radius: 10px;
  background: transparent;
  color: var(--atlet-text-primary);
  cursor: pointer;
}

.date-step .icon { width: 18px; height: 18px; }

.date-week,
.date-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  text-align: center;
}

.date-week span {
  padding: 4px 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--atlet-text-muted);
}

.date-day {
  height: 38px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--atlet-text-primary);
  font: inherit;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.date-day:hover { background: var(--veil-2); }
.date-day.today { border-color: var(--atlet-border-strong); }
.date-day.on { background: var(--atlet-red); border-color: var(--atlet-red); color: #fff; font-weight: 800; }
.date-day:disabled { color: var(--atlet-text-muted); opacity: .4; cursor: default; background: transparent; }

.date-foot { display: flex; justify-content: center; padding-top: 8px; }

/* --- the staff panel: shared parts ------------------------------------------
 *
 * Sheets, search, filters, the action bar and the stats row are one set,
 * used by the athlete list, the file, attendance and the home pages. */

/* Equal parts while they fit; past that a second row, each name whole: on a
   phone "Athletes" and "Templates" were cut to "Athle…" (the owner, 2026-10-17). */
.seg-wide { display: flex; flex-wrap: wrap; margin: 0 0 14px; padding: 4px; border-radius: 13px; }
.seg-wide .seg-option { flex: 1 1 0; min-width: max-content; padding: 9px 8px; font-size: 12.5px; border-radius: 10px; }

body.sheet-open { overflow: hidden; }

.sheet-layer {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.sheet-scrim { position: absolute; inset: 0; background: var(--scrim); }

.sheet {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 88vh;
  overflow: auto;
  padding: 10px 18px calc(24px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--atlet-border-strong);
  border-radius: 22px 22px 0 0;
  background: var(--atlet-surface);
  color: var(--atlet-text-primary);
  outline: none;
}

.sheet-handle {
  width: 42px;
  height: 5px;
  margin: 0 auto 10px;
  border-radius: 999px;
  background: var(--atlet-border-strong);
}

.sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.sheet-head h3 { margin: 0; font-size: 16px; font-weight: 700; }
.sheet-head p { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--atlet-text-muted); }

.sheet-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid var(--atlet-border);
  border-radius: 10px;
  background: transparent;
  color: var(--atlet-text-secondary);
  cursor: pointer;
}

.sheet-close .icon { width: 18px; height: 18px; }
.sheet .field:last-of-type { margin-bottom: 12px; }
.sheet .submit { margin-top: 6px; }

.menu-item { display: flex; align-items: center; gap: 12px; padding: 13px 4px; }
.menu-item .icon { width: 20px; height: 20px; color: var(--atlet-text-secondary); }
.menu-item.danger b, .menu-item.danger .icon { color: var(--red-text); }

.row-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin-inline-end: -6px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--atlet-text-muted);
  cursor: pointer;
}

.row-menu:hover { background: var(--atlet-surface-raised); color: var(--atlet-text-primary); }
.row-menu .icon { width: 18px; height: 18px; }

.searchbar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  margin: 0 0 12px;
  padding: 0 14px;
  border: 1px solid var(--atlet-border);
  border-radius: 14px;
  background: var(--atlet-surface);
  color: var(--atlet-text-muted);
}

.searchbar:focus-within { border-color: var(--atlet-red); box-shadow: 0 0 0 3px var(--atlet-red-glow); }
.searchbar .icon { width: 20px; height: 20px; }

.searchbar input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--atlet-text-primary);
  font: inherit;
  font-size: 14px;
}

.searchbar input::placeholder { color: var(--atlet-text-muted); }
.searchbar input::-webkit-search-cancel-button { filter: invert(.7); }

.filters {
  display: flex;
  gap: 6px;
  margin: 0 0 10px;
  padding-bottom: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.filters::-webkit-scrollbar { display: none; }

.filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 7px 12px;
  border: 1px solid var(--atlet-border);
  border-radius: 999px;
  background: var(--atlet-surface);
  color: var(--atlet-text-secondary);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.filter b { font-weight: 800; color: var(--atlet-text-muted); }
.filter.on { border-color: var(--atlet-red); background: var(--atlet-red-glow); color: var(--red-text); }
.filter.on b { color: var(--red-text); }

.av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid var(--atlet-border-strong);
  border-radius: 50%;
  background: var(--atlet-surface-raised);
  font-size: 14px;
  font-weight: 800;
}

.av-lg { width: 52px; height: 52px; font-size: 19px; }
.av-xl { width: 76px; height: 76px; font-size: 26px; }
/* A person's picture over their initials (person-photos.js). */
.av.has-photo, .msg-ava.has-photo, .hdr-id.has-photo { background-size: cover; background-position: center; color: transparent; }
.msg-ava.has-photo span { visibility: hidden; }
.photo-panel .photo-row { display: flex; align-items: center; gap: 14px; }
.photo-panel .photo-side { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.photo-panel .photo-side .hint { margin: 0; }
.photo-panel .photo-actions { display: flex; flex-wrap: wrap; gap: 6px; }

.actionbar { display: grid; gap: 8px; margin: 0 0 14px; }
.actionbar-1 { grid-template-columns: minmax(0, 1fr); }
.actionbar-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.actionbar-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.actionbar-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 74px;
  padding: 10px 4px;
  border: 1px solid var(--atlet-border);
  border-radius: 14px;
  background: var(--atlet-surface);
  color: var(--atlet-text-primary);
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
}

.action .icon { width: 22px; height: 22px; color: var(--red-text); }
.action:hover { border-color: var(--atlet-border-strong); }
.action.main { border-color: var(--atlet-red); background: var(--atlet-red); color: #fff; }
.action.main .icon { color: #fff; }
.action.main:hover { background: var(--atlet-red-active); }

.stats { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 8px; }

.stat {
  padding: 10px 8px;
  border-radius: 12px;
  background: var(--atlet-surface-raised);
  text-align: center;
}

.stat b { display: block; font-size: 16px; font-weight: 800; line-height: 1.3; font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 3px; font-size: 10.5px; color: var(--atlet-text-muted); }
.stat-red b { color: var(--red-text); }
.stat-ok b { color: var(--atlet-ok); }
.stat-warn b { color: var(--warn); }

/* The athlete list: a row says who, how much is left, and what is due. */

.arow {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 0;
  border: 0;
  border-top: 1px solid var(--atlet-border);
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.roster .arow:first-of-type,
.card-head + .arow { border-top: 0; }
.arow:hover { background: var(--veil-1); }
.arow .who { flex: 1; min-width: 0; }
.arow .who b { display: block; font-size: 13.5px; font-weight: 800; overflow-wrap: anywhere; }
.arow .who i { display: block; margin-top: 3px; font-style: normal; font-size: 11.5px; color: var(--atlet-text-muted); }
.row-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }

.count { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: 0 0 auto; }
.count-left { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.count-left b { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.count-left small { font-size: 11px; color: var(--atlet-text-muted); }

.bar { display: block; width: 64px; height: 5px; overflow: hidden; border-radius: 999px; background: var(--atlet-border-strong); }
.bar i { display: block; height: 100%; border-radius: 999px; background: var(--atlet-red); }
.bar.low i { background: #F2B33D; }

.fab {
  position: fixed;
  inset-inline-start: 16px;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 50px;
  padding: 0 18px;
  border: 0;
  border-radius: 16px;
  background: var(--atlet-red);
  color: #fff;
  font: inherit;
  font-size: 13.5px;
  font-weight: 800;
  box-shadow: 0 10px 30px var(--shadow-soft);
  cursor: pointer;
}

.fab .icon { width: 20px; height: 20px; }

/* Table columns exist only on a wide screen; a phone reads them in the
   row's own lines. */
.roster-row .col, .roster-head { display: none; }
.col-owed.red { color: var(--red-text); font-weight: 700; }

/* Room under the last row, so the button never sits on top of it. */
.app-content:has(> .fab) { padding-bottom: 76px; }

/* An athlete's file: who, three numbers, the few things done most, then
   the record in four tabs. */

.file-head { padding: 14px; }
.file-who { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.file-who .who { flex: 1; min-width: 0; }
.file-who .who b { display: block; font-size: 18px; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.file-who .who i { display: block; margin-top: 3px; font-style: normal; font-size: 12px; color: var(--atlet-text-muted); }
.file-who .who .chip { display: inline-block; margin-top: 6px; }

.call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 1px solid var(--atlet-border-strong);
  border-radius: 12px;
  color: var(--atlet-text-primary);
}

.call .icon { width: 19px; height: 19px; }
.call:hover { border-color: var(--atlet-red); }

.panel.attention { border-color: rgba(242, 179, 61, .45); }

.mini {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  height: 32px;
  padding: 0 11px;
  border: 1px solid var(--atlet-border-strong);
  border-radius: 10px;
  background: transparent;
  color: var(--atlet-text-primary);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.mini .icon { width: 15px; height: 15px; }
.mini.ok { border-color: rgba(24, 197, 134, .35); background: rgba(24, 197, 134, .14); color: var(--atlet-ok); }
.mini.go { border-color: var(--atlet-red); background: var(--atlet-red); color: #fff; }
.mini:disabled { opacity: .5; cursor: default; }
a.mini { text-decoration: none; }

.submit.danger { background: #B91C1C; }
.secondary.danger { border-color: rgba(220, 38, 38, .45); color: var(--red-text); }
.secondary.danger:disabled { opacity: .5; }

.reject-box { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--atlet-border); }
.reject-box .field { margin-bottom: 10px; }
.sheet .fill-all { margin: -4px 0 10px; }
.card-head .row-menu { margin-inline-start: auto; }

/* Attendance: the day, who is ticked, one press. */

.day-bar { display: flex; align-items: flex-end; gap: 8px; margin: 0 0 12px; }
.day-bar .field { flex: 1; min-width: 0; margin: 0; }
.day-bar .field > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.day-bar .date-step { width: 46px; height: 46px; flex: 0 0 auto; }
.day-bar .date-step:disabled { opacity: .35; cursor: default; }
.day-bar .date-pop { position: relative; z-index: 3; }

.pick-row {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 0;
  border: 0;
  border-top: 1px solid var(--atlet-border);
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.pick-list .card-head + .pick-row { border-top: 0; }
.pick-row .who { flex: 1; min-width: 0; }
.pick-row .who b { display: block; font-size: 13.5px; font-weight: 700; }
.pick-row .who i { display: block; margin-top: 2px; font-style: normal; font-size: 11.5px; color: var(--atlet-text-muted); }
.pick-row.off .who b { color: var(--atlet-text-secondary); }

.box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--atlet-border-strong);
  border-radius: 7px;
}

.box .icon { width: 16px; height: 16px; }
.pick-row.on .box { border-color: var(--atlet-red); background: var(--atlet-red); color: #fff; }
.pick-row.off .box { opacity: .35; }

.renew-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 8px;
  margin-inline-start: 35px;
  padding: 9px 11px;
  border: 1px dashed rgba(242, 179, 61, .45);
  border-radius: 11px;
  background: rgba(242, 179, 61, .09);
  color: var(--warn);
  font-size: 11.5px;
  line-height: 1.5;
  cursor: pointer;
}

.switch { flex: 0 0 auto; width: 20px; height: 20px; accent-color: var(--warn); }
.row-error { margin: -4px 0 8px; margin-inline-start: 35px; }

.sticky-bar {
  position: fixed;
  inset-inline: 12px;
  bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 640px;
  margin-inline: auto;
  padding: 8px;
  border: 1px solid var(--atlet-border-strong);
  border-radius: 18px;
  background: var(--atlet-surface);
  box-shadow: 0 12px 30px var(--shadow);
}

.sticky-bar .submit { flex: 1; height: 44px; font-size: 13.5px; }
.sticky-bar .seg { flex: 0 0 auto; }
.sticky-bar .notice { flex: 1; margin: 0; }
.app-content:has(> .sticky-bar) { padding-bottom: 84px; }

.tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.sec-title { display: flex; align-items: center; justify-content: space-between; margin: 6px 2px 10px; }
.sec-title strong { font-size: 14px; font-weight: 800; }
.sec-title span { font-size: 11.5px; color: var(--atlet-text-muted); }

/* The staff home: the day's work, each row with its action. */

.task-head { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.task-head strong { flex: 1; font-size: 13.5px; font-weight: 800; }
.task-count { font-size: 12px; font-weight: 600; color: var(--atlet-text-secondary); }

.task-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 10px;
}

.task-icon .icon { width: 18px; height: 18px; }
.task-warn { background: rgba(242, 179, 61, .14); color: var(--warn); }
.task-red { background: var(--atlet-red-glow); color: var(--red-text); }
.task-dim { background: rgba(157, 166, 176, .12); color: var(--atlet-text-secondary); }

.task-row { gap: 8px; }

.task-who {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.task-who .av { width: 34px; height: 34px; font-size: 12.5px; }
.task-who .who { flex: 1; min-width: 0; }
.task-who .who b { display: block; font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.task-who .who i { display: block; margin-top: 2px; font-style: normal; font-size: 11.5px; color: var(--atlet-text-muted); }
.task-more { display: block; margin: 6px auto 0; }

.all-clear { display: flex; align-items: center; gap: 10px; color: var(--atlet-ok); font-size: 13px; font-weight: 700; }
.all-clear .icon { width: 22px; height: 22px; }

.panel-button { display: block; width: 100%; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.panel-button:hover { border-color: var(--atlet-border-strong); }

.big-action { display: flex; align-items: center; justify-content: center; gap: 8px; height: 54px; margin: 0 0 14px; }
.big-action .icon { width: 22px; height: 22px; }
.greeting .muted { font-size: 12px; color: var(--atlet-text-muted); }

@media (min-width: 760px) {
  /* Package and balance side by side once there is room for both. */
  .athlete-top {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
  }

  .ring-box { width: 128px; height: 128px; }
  .ring-label strong { font-size: 38px; }

  /* A sheet on a wide screen is a dialog in the middle of it. */
  .sheet-layer { align-items: center; }
  .sheet { max-width: 520px; border: 1px solid var(--atlet-border-strong); border-radius: 20px; padding-bottom: 22px; }
  .sheet-handle { display: none; }
}

@media (min-width: 1000px) {
  .app {
    max-width: 1440px;
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    align-items: start;
    gap: 20px;
    padding: 20px;
  }

  .side {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 20px;
    height: calc(100vh - 40px);
    padding: 18px 12px;
    border: 1px solid var(--atlet-border);
    border-radius: 18px;
    background: var(--atlet-surface);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  .nav { display: none; }

  .app-main { min-width: 0; }

  .hdr { margin: 0 0 18px; padding: 12px 16px; }
  .hdr-mid { display: none; }
  .hdr-title { display: block; font-size: 16px; font-weight: 800; }

  .app-body { padding: 0 0 24px; }

  .panel,
  .tile {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .fab { bottom: 28px; inset-inline-start: 32px; }
  .sticky-bar { position: sticky; bottom: 16px; inset-inline: auto; margin: 0 0 18px; max-width: none; }
  .app-content:has(> .sticky-bar) { padding-bottom: 8px; }
  .tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* The roster as a table: name, package, left, until, owed. */
  .roster-table .roster-head,
  .roster-table .roster-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 2.2fr) minmax(0, 1.5fr) minmax(88px, .8fr) minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 12px;
  }

  .roster-table .roster-head {
    padding: 4px 0 10px;
    border-bottom: 1px solid var(--atlet-border);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--atlet-text-muted);
  }

  .roster-table .roster-head + .roster-row { border-top: 0; }
  .roster-table .col { display: block; min-width: 0; font-size: 12.5px; overflow-wrap: anywhere; }
  .roster-table .count { align-items: flex-start; }
  .roster-table .sub-until,
  .roster-table .chip-debt { display: none; }

  /* The work beside today's numbers. */
  .home-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: start; }
  .tile { padding: 16px 18px; }
  .tile strong { font-size: 26px; }
  .tile span { font-size: 12px; }

  /* An athlete's file side by side: who and what they are on, beside what
     has happened. On a phone the same parts stack in the same order. */
  .file-cols {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
  }
}

/* --- a package to choose ----------------------------------------------------
   What it is for, what it holds, what a session of it costs: the same block
   on the athlete's price list and in the sheet a coach gives a package from
   (js/package-offer.js). */
.offer { padding: 10px 0; border-top: 1px solid var(--atlet-border); }
.offer:first-of-type, .hint + .offer { border-top: 0; }
.renew-terms .offer, .sheet .offer { border-top: 0; padding: 4px 0 8px; }

.offer-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.offer-head strong { font-size: 13.5px; font-weight: 800; }
.offer-price { font-size: 13px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }

.offer-about { margin: 4px 0 0; font-size: 12.5px; line-height: 1.8; color: var(--atlet-text-primary); }

.offer-terms {
  margin: 4px 0 0;
  font-size: 11.5px;
  color: var(--atlet-text-muted);
  font-variant-numeric: tabular-nums;
}

.offer-saving {
  margin: 3px 0 0;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--atlet-ok);
}

.tariff-note { margin: 0 0 4px; }

.renew-terms { margin: 2px 0 10px; }
.renew-terms .offer-terms { font-size: 12.5px; color: var(--atlet-text-primary); }

.renew-was { display: block; margin-top: 2px; font-size: 11px; color: var(--warn); }

/* Several single sessions: the package nearest them, for the seller to say (package-offer.js). */
.offer-nearest {
  margin: 4px 0 0;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--warn);
}

/* --- someone new, waiting to be let in (join.js, access-requests.js) --- */

.join-intro { margin: 0 0 14px; font-size: 13px; line-height: 1.9; }
/* The send button clear of the group choices above it (it nearly touched them). */
.join-intro ~ .submit { margin-top: 18px; }

.join-sent {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 22px;
}

.join-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: rgba(24, 197, 134, .14);
  color: var(--atlet-ok);
}

.join-mark .icon { width: 26px; height: 26px; }
.join-sent strong { font-size: 18px; }
.join-sent p { margin: 8px 0 0; font-size: 13px; line-height: 1.9; }
.join-edit { display: block; margin: 14px auto; }

.request-note { margin: 4px 2px 12px; line-height: 1.9; }

.request-create {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.request-create .icon { width: 18px; height: 18px; }
.request-dismiss { display: block; margin: 16px auto 4px; }

/* The catalogue (packages.js): the price and the ⋮ side by side, and the
   packages off sale set back from those on it. */
.row-end { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.row-end strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.panel-off-sale { opacity: 0.78; }
.panel-off-sale .card-head strong { color: var(--atlet-text-muted); }

/* An access code, shown once (athlete-file.js showCode): large, and read
   left to right in both languages. */
.access-code-shown {
  margin: 14px 0 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 2px;
  text-align: center;
}
.code-offer { margin-top: 14px; }

/* --- a package asked for (package-requests.js) ---------------------------- */

/* The athlete's "choose" under each package on the price list. */
.offer-choose {
  margin-top: 8px;
  padding: 6px 14px;
  border: 1px solid var(--atlet-red);
  border-radius: 10px;
  background: var(--atlet-red-glow);
  color: var(--red-text);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.offer-choose:disabled { border-color: var(--atlet-border); background: transparent; color: var(--atlet-text-muted); cursor: default; }

.request-price { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.request-price b { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.request-waits { margin-top: 8px; }

/* Label and value in two columns: a request, what it would start after. */
.kv {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 12px;
  margin: 8px 0 10px;
  font-size: 13px;
}
.kv > span { color: var(--atlet-text-secondary); }
.kv > b { font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.request-card { display: flex; flex-direction: column; gap: 4px; }
.request-cancel { align-self: flex-start; color: var(--red-text); }
.hint.ok { color: var(--atlet-ok); }


/* --- training programs (training.js) ------------------------------------ */

.training-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 4px 2px 10px; }
.week-nav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }

.week { padding: 4px 0; }
.day-row { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-top: 1px solid var(--atlet-border); }
.day-row:first-child { border-top: 0; }
.day-row.today { background: var(--atlet-red-glow); border-radius: 12px; }
.day-when { font-size: 12.5px; font-weight: 700; color: var(--atlet-text-secondary); padding-top: 6px; }
.day-items { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.day-item {
  text-align: start;
  padding: 8px 11px;
  border: 1px solid var(--atlet-border);
  border-radius: 11px;
  background: var(--atlet-surface-raised);
  color: var(--atlet-text-primary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.day-item.rest { background: transparent; border-style: dashed; color: var(--atlet-text-muted); font-weight: 500; }
.day-add { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 520px) {
  .day-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .day-when { padding-top: 0; }
}

/* The coach's calendar: a box for every day, the sessions in it as cards,
   as TrueCoach and MONOLITH lay theirs out. A week is seven columns where
   they fit and one box under another on a phone; a month is always seven. */
.cal-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 2px 12px; }
.cal-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-title strong { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.cal-title .muted { font-size: 12px; }
.cal-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cal-controls .week-nav { margin: 0; }

.cal { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.cal-day {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--atlet-border);
  border-radius: 14px;
  background: var(--atlet-surface);
  transition: border-color .12s, background-color .12s;
}
.cal-day.today { border-color: var(--focus); box-shadow: inset 0 2px 0 var(--focus); }
.cal-day.outside { opacity: .45; }
.cal-day.drop { border-color: var(--atlet-red); background: var(--atlet-red-glow); }
/* A narrow day (the athlete's panel open beside it) puts its date and its two
   buttons, together, on a line under its name rather than past its edge (the
   owner, 2026-10-17). */
.cal-day-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; padding: 0 2px; font-size: 11.5px; color: var(--atlet-text-secondary); }
.cal-day-tools { display: inline-flex; margin-inline-start: auto; align-self: center; }
.cal-day-tools:empty { display: none; }
.cal-day-tools > button { margin-inline-start: 0; }
.cal-day-head b { font-size: 12.5px; font-weight: 600; color: var(--atlet-text-primary); }
.cal-day.today .cal-day-head b { color: var(--focus); }
.cal-day-body { display: flex; flex-direction: column; gap: 6px; }
.cal-day-body:empty { display: none; }

.cal-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--atlet-border);
  border-inline-start: 3px solid var(--atlet-text-muted);
  border-radius: 10px;
  background: var(--atlet-surface-raised);
  cursor: pointer;
}
.cal-card:hover { border-color: var(--atlet-border-strong); }
.cal-card.tone-ok { border-inline-start-color: var(--atlet-ok); }
.cal-card.tone-warn { border-inline-start-color: var(--warn); }
.cal-card.tone-red { border-inline-start-color: var(--atlet-red); }
.cal-card.rest { background: transparent; border-style: dashed; border-inline-start-width: 1px; color: var(--atlet-text-muted); cursor: default; }
.cal-card.rest b { font-weight: 600; }
.cal-card.dragging { opacity: .4; }
.cal-card-head { display: flex; align-items: flex-start; gap: 4px; }
.cal-card-head b { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; overflow-wrap: break-word; }
.cal-menu {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  margin: -4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--atlet-text-secondary);
  cursor: pointer;
}
.cal-menu:hover { background: var(--atlet-surface); color: var(--atlet-text-primary); }
.cal-menu .icon { width: 16px; height: 16px; }
/* A session on a card, as TrueCoach shows one: each exercise a line of its
   own, the whole name wrapping by words (never letter by letter), and what
   to do under it in a smaller, quieter type. */
.cal-note { font-size: 11px; line-height: 1.4; color: var(--atlet-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cal-section { margin-top: 3px; font-size: 10.5px; font-weight: 600; color: var(--atlet-text-secondary); overflow-wrap: break-word; }
/* The warm-up's first lines above the exercises, the cool-down's below, quieter, each side of a rule. */
.cal-part { font-size: 11px; line-height: 1.4; color: var(--atlet-text-muted); overflow-wrap: break-word; }
.cal-part-warmup { padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid var(--atlet-border); }
.cal-part-cooldown { padding-top: 5px; margin-top: 6px; border-top: 1px solid var(--atlet-border); }
.cal-ex { font-size: 12px; line-height: 1.35; word-break: normal; overflow-wrap: break-word; hyphens: auto; }
.cal-ex + .cal-ex { margin-top: 5px; }
/* "C)" read in its own direction, its space on the side of the name whichever way the name runs. */
.cal-ex-label { margin-inline-end: 4px; color: var(--focus); font-weight: 600; unicode-bidi: plaintext; }
.cal-ex-name { font-weight: 500; color: var(--atlet-text-primary); }
.cal-ex-what { display: block; margin-top: 1px; font-size: 11px; font-weight: 500; color: var(--atlet-text-secondary); }
.cal-more { font-size: 11px; color: var(--atlet-text-muted); }
.cal-detail .seg-option { padding: 0 10px; }
/* The weeks scroll in an area of their own under the athlete's header, as
   TrueCoach's do: the header stays put; the bar and the weekday names stay on
   top of the area. Its height is set to reach the foot of the screen (training.js). */
.cal-scroll { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; margin: 0 -4px; padding: 0 4px; min-height: 320px; }
/* The month scrolls on, as TrueCoach's does: the bar and the weekday names stay on top. */
.cal-sticky { position: sticky; top: 0; z-index: 6; margin: 0 -4px 6px; padding: 8px 4px 2px; background: var(--atlet-bg); }
.cal-sticky .cal-toolbar { margin-bottom: 8px; }
.cal-month-title { font-size: 16px; font-weight: 700; }
.cal-sentinel { height: 1px; }
.cal-jump .icon { width: 15px; height: 15px; }
.cal-day.jumped { animation: cal-jumped 1.6s ease-out 1; }
@keyframes cal-jumped { 0% { box-shadow: 0 0 0 3px rgba(220, 38, 38, .7); } 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); } }
.cal-card-foot { display: flex; flex-wrap: wrap; gap: 4px; }
/* A day's column narrows with the athlete's panel open (the owner, 2026-10-17: "attended at the gym" ran
   out of the card): a chip wraps inside its card rather than running past it. */
.cal-card-foot .chip { min-width: 0; max-width: 100%; font-size: 10.5px; line-height: 1.35; white-space: normal; overflow-wrap: break-word; border-radius: 10px; }

.cal-add { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }
.cal-add .mini { height: 28px; padding: 0 8px; font-size: 11.5px; }
.cal-add .mini.go { border-color: var(--atlet-border); background: transparent; color: var(--atlet-text-secondary); font-weight: 600; }
.cal-add .mini.go:hover { border-color: var(--atlet-red); color: var(--red-text); }
.cal-add .mini.paste { border-style: dashed; border-color: rgba(220, 38, 38, .6); color: var(--red-text); }

/* Ticking cards: the square in a card's corner, the bar with what can be
   done to what is ticked, and the days a copy can be pasted on. */
.cal-check {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  margin-top: 1px;
  padding: 0;
  border: 1.5px solid var(--atlet-border-strong);
  border-radius: 5px;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.cal-check:hover { border-color: var(--atlet-text-secondary); }
.cal-check.on { border-color: var(--atlet-red); background: var(--atlet-red); }
.cal-check .icon { width: 13px; height: 13px; stroke-width: 3; }
@media (pointer: coarse) { .cal-check { width: 22px; height: 22px; } }
.cal-card.selected { border-color: rgba(220, 38, 38, .75); box-shadow: 0 0 0 1px rgba(220, 38, 38, .45); }
.cal-bar {
  position: sticky;
  top: 8px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin: 0 0 10px;
  padding: 8px 12px;
  border: 1px solid rgba(220, 38, 38, .55);
  border-radius: 12px;
  background: var(--red-float);
  font-size: 12.5px;
  font-weight: 700;
}
.cal-bar.pasting { border-style: dashed; font-weight: 500; }
/* The dock: what is ticked and where a copy goes, held at the foot of the
   screen however far the calendar is scrolled (TrueCoach's bar), above the
   tab bar on a phone, with the last message over it. */
.cal-dock {
  position: fixed;
  z-index: 30;
  inset-inline: 0;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  pointer-events: none;
}
.cal-dock > * { pointer-events: auto; width: min(640px, 100%); }
.cal-dock > .message:empty { display: none; }
.cal-dock > .message .notice { margin: 0; box-shadow: 0 10px 30px var(--shadow-soft); }
/* A delete said with its undo (training.js sayUndo): the button and its seconds left. */
.undo-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.undo-line .mini.undo { flex: 0 0 auto; gap: 6px; border-color: rgba(24, 197, 134, .55); color: var(--atlet-text-primary); }
.undo-line .undo-count { min-width: 1.2em; text-align: center; color: var(--atlet-ok); font-variant-numeric: tabular-nums; }
.cal-dock .cal-bar { position: static; margin: 0; background: var(--red-float); box-shadow: 0 12px 34px var(--shadow); }
.training.docked .cal-scroll { padding-bottom: 84px; }
@media (min-width: 1000px) {
  /* Beside the side bar, over the calendar's own column. */
  .cal-dock { bottom: 22px; padding-inline-start: 280px; }
}
.cal-bar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mini.danger { border-color: rgba(220, 38, 38, .45); color: var(--red-text); }
.cal-day.pasting { border-style: dashed; border-color: rgba(220, 38, 38, .45); cursor: copy; }
.cal-day.pasting:hover { border-color: var(--atlet-red); background: var(--atlet-red-glow); }
.cal-day.pasting .cal-card { cursor: copy; }
.cal-day.busy { opacity: .6; pointer-events: none; }

/* The training tab's three places, and a template: its weeks one under
   another, each the same row of seven day boxes a calendar week is. */
.training-places { margin: 2px 0 14px; }
/* The coach's home: the three counts are the groups below them, and a filter. */
.training-tile { text-align: start; font: inherit; color: inherit; cursor: pointer; }
.training-tile.on { border-color: var(--atlet-red); box-shadow: 0 0 0 1px rgba(220, 38, 38, .45); }
.tile-warn strong { color: var(--warn); }
.who .pkg-line { font-size: 11px; color: var(--atlet-text-muted); }
.who .pkg-none { color: var(--red-text); }
.ready-head { margin-top: 22px; }
.editor-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.editor-suggest { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.editor-suggest:empty { display: none; }
.part-text { min-height: 140px; }
/* A warm-up's slot above the exercises and a cool-down's below them, as
   TrueCoach's editor has them (training.js partSlot): a few lines or
   nothing, the library's suggested as it is typed in. */
.ed-part { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1.5px dashed var(--atlet-border-strong); border-radius: 14px; }
.editor-write .ed-part { margin-bottom: 8px; }
.editor-write .ed-part-cooldown { margin: 8px 0 0; }
.ed-part-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.ed-part-head strong { font-size: 13px; color: var(--atlet-text-secondary); }
.ed-part-head .hint { margin: 0; flex: 1; font-size: 11.5px; }
.ed-part-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.ed-part-tools .mini { padding: 4px 9px; font-size: 12px; }
.part-slot-text { min-height: 54px; }
.part-suggest .pick .icon { width: 13px; height: 13px; }
.part-videos { display: flex; flex-wrap: wrap; gap: 6px; }
.part-videos:empty { display: none; }
/* A line's own words as its label ("10 Dead Bug"), read in their own direction. */
.part-videos .sv-video span { unicode-bidi: plaintext; }
.part-video-picker { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.part-videos-label { margin: 0; font-size: 11.5px; }
.part-video { display: inline-flex; align-items: center; gap: 2px; }
.part-video-x { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--atlet-border); background: var(--atlet-surface-raised); color: var(--atlet-text-muted); display: grid; place-items: center; cursor: pointer; padding: 0; }
.part-video-x svg { width: 12px; height: 12px; }
.part-video-x:hover { color: var(--atlet-text-primary); border-color: var(--atlet-border-strong); }
.part-video-search { margin-top: 2px; }
.sv-part-videos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
/* A row of demo videos sits together at the start, not each pushed to the end as a single one beside a name is. */
.sv-part-videos .sv-video { margin-inline-start: 0; }
.part-finder { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 10px; }
.part-found { display: flex; flex-wrap: wrap; gap: 6px; }
.part-found:empty { display: none; }
.part-keep-text { margin: 0 0 12px; max-height: 30vh; overflow: auto; }
.lib-kinds { margin: 0 0 12px; }
/* As the athlete reads them: before the session and after it. */
.sv-part { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-inline-start: 3px solid var(--atlet-border-strong); border-radius: 10px; background: var(--atlet-surface-raised); }
.sv-part-title { font-size: 12.5px; color: var(--atlet-text-secondary); }
.sv-part-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; line-height: 1.7; unicode-bidi: plaintext; }
.sv-part-gap { height: 6px; }
.editor-tap { display: block; margin: -2px 2px 8px; }
.sv-editable { cursor: pointer; transition: border-color .12s; }
.sv-editable:hover { border-color: var(--atlet-border-strong); }
.form-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.form-pair .field { margin-bottom: 12px; }
.cal-one { grid-template-columns: minmax(0, 420px); }
.template-given .card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.template-changed { position: static; }
.cal-week-block { margin-bottom: 16px; }
.cal-week-title { margin: 0 2px 8px; font-size: 13px; font-weight: 600; color: var(--atlet-text-secondary); }
.template-note { margin: -4px 2px 12px; }
.template-given { margin-top: 8px; }
.template-given-row { display: flex; align-items: center; gap: 8px; }
.template-given-row .given-who { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.template-given-row .given-withdraw { flex: 0 0 auto; }
/* Sessions written and not saved, kept on this device (session-drafts.js). */
.ed-drafts { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.ed-draft-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ed-draft-row span { flex: 1 1 200px; min-width: 0; }
.ed-restored { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ed-restored span { flex: 1 1 200px; }
.ed-draft-state { margin: 4px 0 0; font-size: 12px; }
.assign-list { display: flex; flex-direction: column; max-height: 46vh; overflow-y: auto; margin: 4px 0 10px; }
.assign-pick { gap: 10px; }
.assign-notify { margin: 2px 2px 10px; }
.assign-pick[aria-pressed="true"] { background: var(--atlet-red-glow); }
.assign-list.picked { max-height: 26vh; }
/* The programs, as TrueCoach's list (training.js drawTemplates): its days, then what it is; give and the menu beside. */
.tpl-row { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--atlet-border); }
.tpl-row:first-child { border-top: 0; }
.tpl-row > .line-button { flex: 1; min-width: 0; border-top: 0; }
.tpl-days { flex: 0 0 auto; width: 40px; display: flex; flex-direction: column; align-items: center; gap: 1px; color: var(--atlet-text-secondary); }
.tpl-days .icon { width: 18px; height: 18px; }
.tpl-days b { font-size: 11.5px; color: var(--atlet-text-primary); }
.tpl-give { flex: 0 0 auto; }
@media (max-width: 520px) { .tpl-give span { display: none; } }
/* Habits, as TrueCoach's tracker (training.js habitStrip): the last seven days of each. */
.habit-card { padding: 12px 14px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; }
.my-habits .habit-card { padding: 10px 0; margin: 0; border-top: 1px solid var(--atlet-border); }
.habit-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.habit-day { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 0; border: 0; background: transparent; color: var(--atlet-text-secondary); font: inherit; }
button.habit-day { cursor: pointer; }
.habit-day small { font-size: 11px; }
.habit-dot { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--atlet-border-strong); }
.habit-dot .icon { width: 15px; height: 15px; }
.habit-day.done .habit-dot { background: var(--atlet-ok); border-color: var(--atlet-ok); color: #06140f; }
.habit-day.missed .habit-dot { border-color: rgba(239, 68, 68, .55); color: var(--red-text); }
.habit-day.today .habit-dot { border-color: var(--atlet-text-primary); border-style: dashed; }
.habit-day.off { opacity: .3; }
.habit-share { margin: 0; }
/* The day's nutrition targets and the plan (training.js nutritionPanel), for the coach and the athlete. */
.nutrition-panel { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.nutrition-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }
.nutrition-tile { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--atlet-surface-raised); min-width: 0; }
.nutrition-tile .muted { font-size: 11.5px; }
.nutrition-tile b { font-size: 15px; font-variant-numeric: tabular-nums; }
.nutrition-plan { margin: 0; font-size: 13.5px; line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; }
.form-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
/* The athlete's training profile (training.js profileBody). */
.profile-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; padding: 14px; }
.profile-row { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.profile-row.wide { grid-column: 1 / -1; }
.profile-row .muted { font-size: 12px; }
.profile-row p { margin: 0; font-size: 13.5px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.profile-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
/* An athlete's metrics (training.js metricsBody) and the library's sets of them. */
.metric-card { padding: 12px 14px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 6px; }
.metric-head { display: flex; align-items: center; gap: 10px; }
.metric-head .who { flex: 1; min-width: 0; }
.metric-head .who b, .metric-head .who i { display: block; }
@media (max-width: 640px) { .metric-head { flex-wrap: wrap; } .metric-head .who { flex-basis: 100%; } .metric-last { margin-inline-end: auto; } }
.drawer-tools { justify-content: flex-start; gap: 8px; }
.metric-last { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.metric-target { margin: 0; font-size: 12.5px; color: var(--atlet-text-secondary); }
.metric-target.ok { color: var(--atlet-ok); }
.set-items { display: flex; flex-direction: column; gap: 8px; margin: 0 0 8px; }
.set-item { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.set-item select, .set-item input { min-width: 0; height: 40px; }
@media (max-width: 520px) { .set-item { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; } .set-item input { grid-column: 1 / -1; } }
/* The coach's activity, as TrueCoach's notifications (training.js drawActivity). */
.act-day { margin-bottom: 12px; }
.act-day-head { margin: 10px 4px 6px; font-size: 13px; color: var(--atlet-text-secondary); }
.act-line { gap: 12px; }
.act-line.new { background: rgba(24, 197, 134, .06); }
.act-line.new .who b::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-inline-start: 6px; border-radius: 50%; background: var(--atlet-ok); vertical-align: middle; }
.act-icon { flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; }
.act-icon .icon { width: 16px; height: 16px; }
.act-icon.act-done { background: rgba(24, 197, 134, .14); color: var(--atlet-ok); }
.act-icon.act-comment { background: rgba(74, 158, 255, .14); color: var(--info); }
.act-icon.act-record { background: rgba(242, 179, 61, .14); color: var(--warn); }
.act-body { margin: 4px 0 0; font-size: 13px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.act-time { flex: 0 0 auto; align-self: flex-start; font-size: 11.5px; color: var(--atlet-text-muted); font-variant-numeric: tabular-nums; }
/* The coach's list ticked, as TrueCoach's clients list (training.js drawList). */
.list-row { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--atlet-border); }
.list-row:first-child { border-top: 0; }
.list-row > .line-button { flex: 1; min-width: 0; border-top: 0; }
.list-row.picked { background: var(--atlet-red-glow); border-radius: 10px; }
.list-check { margin: 0 4px; }
.list-pcts { display: flex; gap: 8px; font-size: 12px; font-variant-numeric: tabular-nums; }
.list-pick-all { margin-inline-start: auto; }
.training.docked .training-list { margin-bottom: 84px; }
@media (max-width: 699px) {
  .list-row .line { flex-wrap: wrap; }
  .list-pcts { order: 1; flex-basis: 100%; padding-inline-start: 48px; }
}
.assign-search { width: 100%; height: 40px; margin: 0 0 6px; padding: 0 12px; border: 1px solid var(--atlet-border-strong); border-radius: 10px; background: var(--atlet-surface-raised); color: var(--atlet-text-primary); font: inherit; font-size: 13.5px; }
.assign-group { display: block; margin: 8px 4px 2px; font-size: 12px; font-weight: 700; color: var(--atlet-text-secondary); }
/* What lands on which date (training.js openTemplateForAthlete). */
.assign-preview { display: flex; flex-direction: column; margin: 4px 0 10px; padding: 10px 12px; border: 1px solid var(--atlet-border); border-radius: 12px; background: var(--veil-1); }
.assign-preview:empty { display: none; }
.assign-preview-head { font-size: 13px; margin-bottom: 6px; }
.assign-land { display: flex; gap: 12px; padding: 4px 0; border-top: 1px solid var(--atlet-border); font-size: 13px; }
.assign-land-day { flex: 0 0 9em; color: var(--atlet-text-secondary); }
.assign-land.taken .assign-land-day { color: var(--warn); }
.assign-land-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assign-more { margin: 4px 0 0; font-size: 12px; color: var(--atlet-text-muted); }
.assign-preview .notice { margin: 8px 0 0; }
.assign-new { display: block; margin: 12px auto 0; }
.cal-day-program { width: 24px; height: 24px; margin-inline-start: auto; align-self: center; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--atlet-text-muted); cursor: pointer; opacity: .55; }
.cal-day:hover .cal-day-program, .cal-day-program:focus-visible { opacity: 1; }
.cal-day-program:hover { background: var(--veil-2); color: var(--atlet-text-primary); }
.cal-day-program .icon { width: 15px; height: 15px; }
/* A day's reminder, as TrueCoach's bookmark (training.js openDayNote): the coaches' only. */
.cal-day-note-btn { width: 24px; height: 24px; margin-inline-start: auto; align-self: center; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--atlet-text-muted); cursor: pointer; opacity: .55; }
.cal-day-note-btn + .cal-day-program { margin-inline-start: 0; }
.cal-day:hover .cal-day-note-btn, .cal-day-note-btn:focus-visible, .cal-day-note-btn.on { opacity: 1; }
.cal-day-note-btn:hover { background: var(--veil-2); color: var(--atlet-text-primary); }
.cal-day-note-btn .icon { width: 15px; height: 15px; }
.cal-day-note-btn.on .icon path { fill: currentColor; }
.cal-day-note { width: 100%; margin: 4px 0 2px; padding: 5px 8px; border: 0; border-inline-start: 3px solid; border-radius: 6px; font: inherit; font-size: 11.5px; line-height: 1.6; text-align: start; color: var(--atlet-text-primary); cursor: pointer; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.color-BLUE { --note: #4A9EFF; }
.color-RED { --note: #F87171; }
.color-GREEN { --note: #18C586; }
.color-AMBER { --note: #F2B33D; }
.cal-day-note-btn.on { color: var(--note); }
.cal-day-note { border-inline-start-color: var(--note); background: color-mix(in srgb, var(--note) 14%, transparent); }
.day-note-colors { display: flex; gap: 10px; margin: 0 0 10px; }
.day-note-color { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; background: var(--note); cursor: pointer; opacity: .7; }
.day-note-color.on { opacity: 1; border-color: var(--atlet-text-primary); box-shadow: 0 0 0 2px var(--note); }

.field select {
  width: 100%;
  height: 46px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--atlet-border);
  background: var(--atlet-surface);
  color: var(--atlet-text-primary);
  font-size: 14px;
  font-family: inherit;
}
@container cal (min-width: 800px) {
  .cal-week-block .cal-week .cal-day { min-height: 200px; }
}

/* Where one week ends and the next begins, across the row (training.js drawWeek). */
.cal-week-sep { grid-column: 1 / -1; margin: 10px 2px 0; padding-top: 10px; border-top: 1px solid var(--atlet-border); font-size: 12px; font-weight: 600; color: var(--atlet-text-secondary); }
.cal-week > .cal-week-sep:first-child { margin-top: 0; padding-top: 2px; border-top: 0; }

.menu-item { width: 100%; }
.menu-item .icon { width: 18px; height: 18px; color: var(--atlet-text-secondary); }
.menu-item.danger, .menu-item.danger .icon { color: var(--red-text); }
.menu-move { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; padding: 6px 0 10px; }
.menu-move .field { flex: 1 1 200px; margin: 0; }

/* The calendar's own width, not the screen's, chooses its look: with the
   athlete's column and a section open beside it, a computer's calendar can be
   as narrow as a phone's, and seven columns of it broke words letter by letter
   (the owner, 2026-10-17). */
.cal-scroll, .cal-week-block { container: cal / inline-size; }
/* Narrower than seven readable columns the calendar is TrueCoach's phone list:
   day after day, each with its sessions under its date; an empty day one
   short line, its buttons beside its date. */
@container cal (max-width: 799px) {
  .cal-week .cal-day.empty { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; min-height: 0; padding: 6px 10px; }
  .cal-week .cal-day.empty .cal-day-head { padding: 0; }
  .cal-week .cal-day.empty .cal-add { margin-top: 0; }
}
@media (min-width: 980px) {
  /* The calendar takes the whole width, as TrueCoach's does: a seventh of it is a column worth reading. */
  .app:has(.cal) { max-width: none; }
}
@container cal (min-width: 800px) {
  .cal-week { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  /* A seventh of the page is narrow: a session's title gets a line of its
     own under the square and the menu, so a long word is never split. */
  .cal-week .cal-card:not(.rest) .cal-card-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; row-gap: 5px; }
  .cal-week .cal-card:not(.rest) .cal-card-head .cal-check { grid-column: 1; grid-row: 1; }
  .cal-week .cal-card:not(.rest) .cal-card-head .cal-menu { grid-column: 3; grid-row: 1; }
  .cal-week .cal-card:not(.rest) .cal-card-head > b { grid-column: 1 / -1; grid-row: 2; }
  .cal-week .cal-day { min-height: 170px; }
}

/* The editor: the text and what it reads as, side by side where they fit. */
.editor-panes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 12px; }
@media (min-width: 900px) {
  .app:has(.editor-panes) { max-width: 1100px; }
  .editor-panes { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}
.editor-label { display: block; margin: 8px 2px 6px; font-size: 12px; font-weight: 600; color: var(--atlet-text-secondary); }
.quick-text {
  min-height: 320px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Vazirmatn", monospace;
  font-size: 13.5px;
  line-height: 1.9;
  unicode-bidi: plaintext;
}
.editor-help summary { cursor: pointer; font-size: 12.5px; color: var(--atlet-text-secondary); margin-top: 8px; }
.editor-example {
  margin: 8px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--atlet-border);
  border-radius: 10px;
  background: var(--atlet-surface);
  font-size: 12.5px;
  line-height: 1.9;
  white-space: pre-wrap;
  unicode-bidi: plaintext;
}
.editor-missing { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }

/* A session as the athlete reads it. */
.session-view { display: flex; flex-direction: column; gap: 8px; }
.sv-note { margin: 0; font-size: 12.5px; color: var(--atlet-text-secondary); }
.sv-section { padding: 2px 2px 4px; }
.sv-section strong { font-size: 13px; color: var(--atlet-text-secondary); }
.sv-ex {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--atlet-border);
  border-radius: 12px;
  background: var(--atlet-surface);
}
.sv-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sv-head b { font-weight: 600; font-size: 13.5px; overflow-wrap: anywhere; }
.sv-label {
  min-width: 24px;
  height: 24px;
  padding: 0 5px;
  display: inline-grid;
  place-items: center;
  border-radius: 7px;
  background: var(--atlet-red-glow);
  color: var(--red-text);
  font-weight: 800;
  font-size: 11.5px;
}
.sv-video {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border: 1px solid var(--atlet-border);
  border-radius: 999px;
  color: var(--atlet-text-secondary);
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
}
.sv-video .icon { width: 12px; height: 12px; }
/* A video played in a box over the page (training.js openVideo). */
.video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; margin-bottom: 12px; border-radius: 12px; overflow: hidden; background: #000; }
.video-frame.vertical { width: auto; height: min(70vh, 560px); aspect-ratio: 9 / 16; margin-inline: auto; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-preview:empty { display: none; }
.team-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.team-filter .pick small { margin-inline-start: 6px; opacity: .7; font-weight: 600; }
.team-filter .pick svg { width: 16px; height: 16px; margin-inline-end: 4px; }
.assign-teams { margin: 0 0 8px; }
.team-line .mini { margin-inline-end: 6px; }
.team-members { max-height: 50vh; overflow: auto; margin: 8px 0; }
.video-preview .video-frame { margin-top: -4px; }
.video-preview .video-frame.vertical { height: min(50vh, 420px); }
.video-elsewhere { display: inline-block; margin-bottom: 6px; }
.sv-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.sv-cue { margin: 0; font-size: 12.5px; line-height: 1.8; color: var(--atlet-text-secondary); unicode-bidi: plaintext; }
.sv-group { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--atlet-border); border-radius: 13px; }
.sv-group-head { font-size: 11.5px; font-weight: 600; color: var(--atlet-text-secondary); padding: 0 4px; }
.sv-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid var(--atlet-border); font-size: 13px; }
.sv-item > span:first-child { font-variant-numeric: tabular-nums; color: var(--atlet-text-secondary); min-width: 2.5em; }

/* --- the athlete's program (athlete-training.js) ------------------------- */

.today-training { display: flex; flex-direction: column; gap: 6px; border-color: rgba(220, 38, 38, .38); background: linear-gradient(160deg, rgba(220, 38, 38, .18), var(--atlet-surface) 60%); }
.today-training strong { font-size: 17px; font-weight: 800; }
.eyebrow-red { font-size: 11.5px; font-weight: 700; color: var(--red-text); }
.day-item .chip { margin-inline-start: 8px; }

.session-progress { display: flex; flex-direction: column; gap: 6px; margin: 0 2px 12px; font-size: 12.5px; color: var(--atlet-text-secondary); }
.session-progress i { display: block; height: 5px; border-radius: 999px; background: var(--atlet-red); }

.log-card { gap: 8px; }
.set-previous { margin: 0; font-size: 12px; color: var(--atlet-text-secondary); background: var(--veil-1); border-radius: 8px; padding: 4px 8px; }
.set-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr) 40px; gap: 6px; align-items: center; }
.set-head span { font-size: 11px; color: var(--atlet-text-muted); text-align: center; font-weight: 700; }
/* With no sets written by the coach, the athlete adds rows as they lift (athlete-training.js setRows). */
.set-more { display: flex; flex-wrap: wrap; gap: 8px; }
.set-add { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px dashed var(--atlet-border-strong); border-radius: 9px; background: transparent; color: var(--atlet-text-secondary); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.set-add:hover { color: var(--atlet-text-primary); border-color: var(--atlet-text-secondary); }
.set-add .icon { width: 14px; height: 14px; }
.set-index { text-align: center; color: var(--atlet-text-secondary); font-weight: 700; }
.set-input {
  width: 100%;
  padding: 8px 6px;
  border: 1px solid var(--atlet-border);
  border-radius: 9px;
  background: var(--atlet-surface-raised);
  color: var(--atlet-text-primary);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.set-tick, .block-tick {
  display: inline-grid;
  place-items: center;
  border: 1.5px solid var(--atlet-border-strong);
  background: transparent;
  color: var(--atlet-text-muted);
  cursor: pointer;
  font-family: inherit;
}
.set-tick { width: 36px; height: 36px; border-radius: 50%; margin: 0 auto; }
.set-tick.on, .block-tick.on { background: var(--atlet-ok); border-color: var(--atlet-ok); color: #04130C; }
.block-tick { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 8px 14px; border-radius: 11px; font-weight: 700; font-size: 13px; }
.rest-timer { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 11px; background: var(--atlet-red-glow); color: var(--red-text); font-weight: 700; }
.rest-timer b { font-size: 17px; font-variant-numeric: tabular-nums; color: var(--atlet-text-primary); }
/* A class that sets display outranks the hidden attribute: say it again. */
.rest-timer[hidden] { display: none; }

.rpe-scale { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; margin: 8px 0 4px; }
.rpe-scale .pick { justify-content: center; padding: 8px 0; }
.rpe-ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--atlet-text-muted); }
.rpe-label { text-align: center; font-weight: 800; color: var(--red-text); min-height: 1.4em; margin: 6px 0; }

/* The 30-second check-in on the athlete's home (athlete-training.js, checkinCard). */
.checkin { display: flex; flex-direction: column; gap: 10px; }
.checkin strong { font-size: 16px; font-weight: 800; }
.checkin .hint { margin: -4px 0 0; }
.checkin-row { display: flex; flex-direction: column; gap: 4px; }
.checkin-row > label { font-size: 13px; font-weight: 700; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.checkin-row > label span { font-size: 11px; font-weight: 400; color: var(--atlet-text-muted); }
.checkin-scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.checkin-scale .pick, .pain-scale .pick { justify-content: center; padding: 9px 0; }
.pain-scale { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.checkin-pain { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; cursor: pointer; }
.checkin-pain input { width: 18px; height: 18px; accent-color: var(--atlet-red); }
.checkin-done { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.checkin-done .who { flex: 1; min-width: 0; }
.checkin-done .who b { display: block; font-size: 13px; }
.checkin-done .who i { font-size: 12px; color: var(--atlet-text-secondary); font-style: normal; }

/* --- the coach's monitoring tab and notes (training.js) ------------------- */

.mon-status { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 12px; }
.mon-dot { width: 18px; height: 18px; border-radius: 50%; flex: none; background: #6B7280; box-shadow: 0 0 0 4px rgba(107, 114, 128, .18); }
.mon-dot.GREEN { background: var(--atlet-ok); box-shadow: 0 0 0 4px rgba(24, 197, 134, .2); }
.mon-dot.YELLOW { background: #F2B33D; box-shadow: 0 0 0 4px rgba(242, 179, 61, .22); }
.mon-dot.RED { background: var(--atlet-red); box-shadow: 0 0 0 4px rgba(220, 38, 38, .25); }
.mon-dot.small { width: 10px; height: 10px; box-shadow: none; display: inline-block; vertical-align: middle; margin-inline-end: 6px; }
.mon-status .who { flex: 1; min-width: 0; }
.mon-status .who b { display: block; font-size: 16px; }
.mon-status .who i { font-size: 12px; color: var(--atlet-text-secondary); font-style: normal; }
.mon-alerts { padding: 4px 0; margin-bottom: 12px; }
.mon-alert { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mon-alert.RED .who b { color: var(--red-text); }
.mon-alert.YELLOW .who b { color: var(--warn); }
.mon-alert .mon-answer { display: flex; gap: 6px; }
.mon-alert .mon-answer .mini.on { border-color: var(--atlet-ok); color: var(--atlet-ok); }
.mon-checkins { padding: 10px 14px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 6px; }
.mon-checkins .hint { margin: 0; }
.mon-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr); gap: 4px 6px; font-size: 12.5px; align-items: center; }
.mon-grid .h { font-size: 11px; color: var(--atlet-text-muted); font-weight: 700; }
.mon-grid .d { color: var(--atlet-text-secondary); }
.mon-grid .n { font-weight: 800; text-align: center; border-radius: 7px; padding: 3px 0; background: var(--veil-1); }
.mon-grid .n.low { background: var(--atlet-red-glow); color: var(--red-text); }
.mon-grid .n.mid { background: rgba(242, 179, 61, .14); color: var(--warn); }
.mon-grid .p { font-size: 12px; }
.mon-grid .p.hurt { color: var(--red-text); font-weight: 700; }
.mon-note { grid-column: 1 / -1; font-size: 12px; color: var(--atlet-text-secondary); padding: 0 0 4px 8px; border-inline-start: 2px solid var(--atlet-border); margin-bottom: 2px; }
.ath-notes { display: flex; flex-direction: column; gap: 8px; padding: 14px; margin-bottom: 12px; }
.ath-notes .textarea { width: 100%; }
.ath-notes .mini { align-self: flex-start; }
.note-list { padding: 4px 0; }
.note-item { display: flex; align-items: flex-start; gap: 10px; }
.note-item .who p { margin: 0; white-space: pre-wrap; font-size: 13px; line-height: 1.7; }
.note-item .who i { font-size: 11.5px; }

/* --- records and progress (training.js, athlete-training.js) -------------- */

/* The strength page (strength.js): the lifts beside the one chosen where there is room, a row above it where not. */
.str { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; container-type: inline-size; }
.str-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.str-head strong { font-size: 16px; font-weight: 600; }
.str-head p { margin: 2px 0 0; font-size: 12.5px; }
.str-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.str-lifts { border: 1px solid var(--atlet-border); border-radius: 16px; background: var(--atlet-surface); overflow: hidden; min-width: 0; }
.str-search { display: block; width: calc(100% - 20px); margin: 10px 10px 0; padding: 8px 12px; border: 1px solid var(--atlet-border); border-radius: 10px; background: var(--well); color: var(--atlet-text-primary); font: inherit; font-size: 13px; }
.str-lifts-list { display: flex; gap: 8px; overflow-x: auto; padding: 10px; scrollbar-width: none; }
.str-lifts-list::-webkit-scrollbar { display: none; }
.str-lift { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: none; min-width: 168px; max-width: 240px; padding: 9px 12px; border: 1px solid var(--atlet-border); border-radius: 12px; background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; transition: background-color .15s, border-color .15s; }
.str-lift[hidden] { display: none; }
.str-lift:hover { background: var(--veil-1); }
.str-lift.on { background: var(--focus-bg); border-color: var(--focus); }
.str-lift-name { display: flex; flex-direction: column; min-width: 0; }
.str-lift-name b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.str-lift-name small, .str-lift-num small { font-size: 11.5px; color: var(--atlet-text-muted); }
.str-lift-num { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.str-v { font-size: 13px; font-weight: 600; white-space: nowrap; }
.str-lift-num small.str-up, .str-up { color: var(--ok-text); }
.str-lift-num small.str-down, .str-down { color: var(--atlet-text-muted); }
.str-lift-num small.warn { color: var(--warn); }
@container (min-width: 760px) {
  .str-grid { grid-template-columns: 260px minmax(0, 1fr); }
  .str-lifts { align-self: start; }
  .str-lifts-list { flex-direction: column; gap: 0; overflow: visible; padding: 8px 0 0; }
  .str-lift { min-width: 0; max-width: none; border: 0; border-top: 1px solid var(--atlet-border); border-radius: 0; padding: 11px 14px; }
  .str-lifts-list .str-lift:first-child { border-top: 0; }
}
.str-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.str-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.str-kpi { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1px solid var(--atlet-border); border-radius: 14px; background: var(--atlet-surface); min-width: 0; }
.str-kpi > small:first-child { color: var(--atlet-text-secondary); font-size: 12px; }
.str-kpi b { font-size: 21px; font-weight: 700; }
.str-kpi small { font-size: 11.5px; color: var(--atlet-text-muted); }
.str-kpi i { font-style: normal; font-size: 12px; }
.str-stale { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.str-card { padding: 14px 16px; margin: 0; }
.str-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.str-card-top > b { font-size: 15px; font-weight: 600; }
.str-card-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.str-seg { display: flex; gap: 3px; padding: 3px; border-radius: 10px; background: var(--well); }
.str-seg button { border: 0; background: transparent; color: var(--atlet-text-secondary); font: inherit; font-size: 12px; padding: 5px 10px; border-radius: 8px; cursor: pointer; transition: background-color .15s, color .15s; }
.str-seg button.on { background: var(--atlet-surface); color: var(--atlet-text-primary); box-shadow: 0 1px 3px var(--shadow-soft); }
.str-chart { margin-top: 6px; }
.str-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--atlet-text-secondary); }
.str-legend span { display: inline-flex; align-items: center; gap: 5px; }
.str-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.str-legend i.line { background: var(--focus); }
.str-legend i.test { background: var(--warn); border-radius: 2px; transform: rotate(45deg); }
.str-legend i.record { background: var(--ok-text); }
.str-card .hint { margin: 8px 0 0; }
.str-hist { padding: 2px 14px; margin: 0; }
.str-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--atlet-border); font-size: 13px; }
.str-row:first-child { border-top: 0; }
.str-day { color: var(--atlet-text-secondary); font-size: 12.5px; }
.str-sets { display: flex; gap: 5px; flex-wrap: wrap; }
.str-sets span { padding: 2px 8px; border-radius: 999px; background: var(--veil-2); font-size: 12px; unicode-bidi: isolate; white-space: nowrap; }
.str-sets.muted { font-size: 12px; }
.str-e { display: flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.str-tag { padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 500; }
.str-tag.pr { background: rgba(24, 197, 134, .13); color: var(--ok-text); }
.str-tag.test { background: var(--focus-bg); color: var(--focus); }
.str-tag.warn { background: rgba(242, 179, 61, .14); color: var(--warn); }
.str-all { display: block; margin: 6px auto 10px; }
.str-wait { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; margin: 0; border-color: rgba(242, 179, 61, .5); background: rgba(242, 179, 61, .06); }
.str-wait > strong { color: var(--warn); font-weight: 600; }
.str-wait-row { display: flex; align-items: center; gap: 8px; }
.str-wait-row .who { flex: 1; min-width: 0; }
.str-wait-row .mini.ok { border-color: var(--atlet-ok); color: var(--atlet-ok); white-space: nowrap; }
.str-wait .hint { margin: 2px 0 0; }
/* A phone's width: the maximum in force across, the other two side by side; a jump's answers under it. */
@container (max-width: 560px) {
  .str-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .str-kpi:first-child { grid-column: 1 / -1; }
  .str-kpi b { font-size: 18px; }
  .str-wait-row { flex-wrap: wrap; }
  .str-wait-row .who { flex-basis: 100%; }
  .str-row { grid-template-columns: 74px minmax(0, 1fr) auto; gap: 8px; }
}
/* Any value over time (strength.js trendLine): the weight, a metric. */
.trend-line { width: 100%; }
.rec-hist .line .who b { direction: ltr; text-align: start; }
.rec-hist .line.void { opacity: .55; }
.rec-hist .line.void .who b { text-decoration: line-through; }
.set-target { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; background: rgba(74, 158, 255, .08); border: 1px solid rgba(74, 158, 255, .35); border-radius: 8px; padding: 5px 8px; }
.set-target b { direction: ltr; }
.set-target.none { background: rgba(242, 179, 61, .08); border-color: rgba(242, 179, 61, .4); color: var(--warn); }
.set-target.stale { background: rgba(242, 179, 61, .06); border-color: rgba(242, 179, 61, .3); }
.set-history { margin: 4px 0 0; font-size: 12px; color: var(--atlet-text-secondary); border-top: 1px dashed var(--atlet-border); padding-top: 4px; }
.set-history div { display: flex; justify-content: space-between; padding: 1px 0; }
.set-history b { direction: ltr; color: var(--atlet-text-primary); font-weight: 700; }
.record-toast { display: flex; flex-direction: column; gap: 3px; background: linear-gradient(160deg, rgba(24, 197, 134, .22), var(--atlet-surface) 70%); border: 1px solid rgba(24, 197, 134, .5); border-radius: 12px; padding: 10px 12px; margin-top: 8px; }
.record-toast b { font-size: 14px; }
.record-toast span { font-size: 12px; color: var(--atlet-text-secondary); }
.my-records { margin-top: 12px; }

/* --- the library's tags (training.js) ------------------------------------- */

.tag-family { margin: 6px 0 2px; }
.tag-family-name { display: block; font-size: 11.5px; color: var(--atlet-text-muted); margin-bottom: 4px; }
.tag-picks { display: flex; flex-wrap: wrap; gap: 6px; }
/* An exercise's imported details: a two-column list, the values in English as they came. */
.attr-list { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; font-size: 12.5px; }
.attr-list dt { color: var(--atlet-text-muted); }
.attr-list dd { margin: 0; color: var(--atlet-text-primary); }
.attr-list .attr-value { direction: ltr; text-align: start; unicode-bidi: isolate; }
.tag-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.tag-filter { font: inherit; font-size: 12.5px; height: 34px; padding: 0 28px 0 10px; border-radius: 999px; border: 1px solid var(--atlet-border-strong); background: var(--atlet-surface-raised); color: var(--atlet-text-secondary); max-width: 100%; }
.tag-filter.on { border-color: var(--atlet-red); color: var(--atlet-text-primary); background: var(--atlet-red-glow); }
.ed-lib-tags .tag-filters { margin: 6px 0 4px; gap: 4px; }
.ed-lib-tags .tag-filter { font-size: 11.5px; height: 30px; flex: 1 1 45%; min-width: 0; }
.tag-pick { font: inherit; font-size: 12.5px; border: 1px solid var(--atlet-border-strong); border-radius: 999px; padding: 4px 11px; color: var(--atlet-text-secondary); background: var(--atlet-surface-raised); cursor: pointer; }
.tag-pick.on { border-color: var(--info); color: var(--info); background: rgba(74, 158, 255, .1); }
.who .lib-tags { font-size: 11px; color: var(--atlet-text-muted); }
.tag-family + .hint { margin-top: 10px; }

.finished { display: flex; flex-direction: column; gap: 4px; border-color: rgba(24, 197, 134, .4); }
.conversation { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.comment { padding: 8px 12px; border-radius: 12px; background: var(--atlet-surface-raised); border: 1px solid var(--atlet-border); }
.comment.coach { border-color: rgba(220, 38, 38, .35); }
.comment p { margin: 2px 0 0; font-size: 13.5px; line-height: 1.8; unicode-bidi: plaintext; }
.comment-who { font-size: 11.5px; font-weight: 700; color: var(--atlet-text-secondary); }


/* --- movement assessments (assessment.js) ------------------------------------------ */

.cal-assess { display: inline-flex; align-items: center; gap: 6px; }
.assess-recorder { padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.assess-step { display: flex; flex-direction: column; gap: 8px; }
.assess-step + .assess-step { border-top: 1px solid var(--atlet-border); padding-top: 14px; }
.assess-step-head { display: flex; align-items: center; gap: 8px; }
.assess-step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--atlet-surface-raised); color: var(--atlet-text-secondary); font-size: 12px; font-weight: 700;
}
.assess-step.done .assess-step-n { background: rgba(24, 197, 134, .18); color: var(--atlet-ok); }
.assess-step p { margin: 0; font-size: 13px; line-height: 1.7; }
.assess-step p .chip { margin-inline-start: 6px; }
.assess-step .submit, .assess-step .mini { align-self: flex-start; }
.assess-places { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.assess-place {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px;
  border: 1px dashed var(--atlet-border-strong); font-size: 13px; color: var(--atlet-text-secondary);
}
.assess-place b { color: var(--atlet-text-primary); }
.assess-place.set { border-style: solid; border-color: var(--atlet-ok); background: rgba(24, 197, 134, .08); }
.assess-assign { gap: 8px; }
.assess-place .assess-blink { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.assess-assign select { width: 100%; min-width: 0; padding: 8px; border-radius: 8px; border: 1px solid var(--atlet-border-strong); background: var(--atlet-surface); color: var(--atlet-text-primary); font: inherit; }
.assess-count .mini[aria-pressed="true"] { border-color: var(--atlet-ok); background: rgba(24, 197, 134, .08); }
.assess-steps { margin: 0; padding-inline-start: 20px; font-size: 13px; line-height: 1.8; }
.assess-timer { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; text-align: start; }
.ok-text { color: var(--atlet-ok); }
.assess-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.assess-note-input {
  width: 100%; min-height: 56px; resize: vertical; padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--atlet-border); background: var(--atlet-surface); color: var(--atlet-text-primary); font: inherit;
}
/* The stance's age: its lights are by age group. */
.assess-age { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.assess-age-input {
  width: 5.5em; padding: 6px 8px; border-radius: 10px;
  border: 1px solid var(--atlet-border); background: var(--atlet-surface); color: var(--atlet-text-primary); font: inherit;
}

.light { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: none; }
.light-green { background: #22B573; }
.light-yellow { background: #F2B33D; }
.light-red { background: #FF6B6B; }
.lights-row { display: inline-flex; gap: 5px; align-items: center; }

.assess-card { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px; }
.assess-compass { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 0; }
.assess-compass .muted { font-size: 13px; }
.assess-check td .light { vertical-align: middle; margin-inline-end: 6px; }
.assess-check .assess-check-note { margin: 6px 0 0; font-size: 13px; color: var(--atlet-text-secondary); }
.assess-light { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.assess-light .light { margin-top: 6px; }
.assess-light p { margin: 2px 0 0; font-size: 13px; color: var(--atlet-text-secondary); line-height: 1.7; }
.assess-figure { font-size: 12px; color: var(--atlet-text-muted); white-space: nowrap; margin-top: 3px; }
.assess-change, .assess-first { margin: 0; font-size: 13px; }
.assess-chart { width: 100%; max-width: 420px; height: auto; display: block; margin: 0 auto; }
.assess-chart-grid { stroke: var(--atlet-border); stroke-width: 1; }
.assess-chart-axis { font-size: 10px; fill: var(--atlet-text-muted); }
.assess-chart-axis.ok { fill: var(--atlet-ok); }
.assess-chart-axis.warn { fill: var(--warn); }
.assess-chart-label { font-size: 13px; fill: var(--atlet-text-primary); }
.assess-chart-value { font-size: 12px; font-weight: 700; fill: var(--atlet-text-primary); }
.assess-chart-track { fill: var(--atlet-surface-raised); }
.assess-chart-stood { fill: rgba(157, 166, 176, .13); }
.assess-chart-edge { stroke-width: 1.5; stroke-dasharray: 4 3; }
.assess-chart-edge.ok { stroke: var(--atlet-ok); }
.assess-chart-edge.warn { stroke: var(--warn); }
.assess-chart-legend { display: flex; gap: 16px; justify-content: center; font-size: 12px; color: var(--atlet-text-secondary); }
.assess-chart-legend span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 6px; vertical-align: -1px; }
.assess-chart-legend .leg-right::before { background: #4A9EFF; }
.assess-chart-legend .leg-left::before { background: #FF8A3D; }
/* The charts the owner approved (assessment-charts.js, 2026-10-05): numbers above, the chart under them. */
.assess-trend { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; margin-bottom: 14px; background: var(--atlet-surface); border-color: var(--atlet-border); border-radius: 18px; }
.assess-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.assess-card-head strong { font-size: 15.5px; font-weight: 700; }
.assess-card-head p { margin: 4px 0 0; font-size: 12.5px; }
.assess-card-note { margin: 0; font-size: 12px; }
.assess-num { direction: ltr; unicode-bidi: isolate; display: inline-block; font-family: "Inter", "Vazirmatn", sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.assess-kpis { display: flex; gap: 26px; flex-wrap: wrap; }
.assess-kpi { display: flex; flex-direction: column; gap: 2px; min-width: 88px; }
.assess-kpi-name { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--atlet-text-muted); }
.assess-kpi-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.assess-kpi-dot.right { background: #4C8DFF; }
.assess-kpi-dot.left { background: #FF8F4A; }
.assess-kpi b { font-size: 28px; font-weight: 600; line-height: 1.15; }
.assess-kpi-delta { font-size: 11.5px; color: var(--atlet-text-muted); }
.assess-trend .good, .assess-sym .good { color: var(--ok-text); }
.assess-trend .warn, .assess-sym .warn { color: var(--warn); }
.assess-trend .bad, .assess-sym .bad { color: var(--red-text); }
.assess-trend .muted, .assess-sym .muted { color: var(--atlet-text-muted); }
.assess-echart { width: 100%; }
.assess-sym { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border: 1px solid var(--atlet-border); border-radius: 16px; background: var(--atlet-surface); }
.assess-sym-row { display: flex; align-items: flex-end; justify-content: space-between; padding: 4px 6px 0; }
.assess-sym-side { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 84px; }
.assess-sym-side span { font-size: 12px; }
.assess-sym-side b { font-size: 30px; font-weight: 600; }
.assess-sym-side b.small { font-size: 21px; color: var(--atlet-text-primary); }
.assess-pill { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; padding: 4px 11px; border-radius: 999px; font-weight: 600; background: rgba(125,133,148,.12); }
.assess-pill.good { background: rgba(34,195,142,.12); }
.assess-pill.warn { background: rgba(233,162,59,.12); }
.assess-pill.bad { background: rgba(240,82,94,.12); }
.assess-curve { display: flex; flex-direction: column; gap: 6px; }
.assess-curve p { margin: 0; font-size: 13px; line-height: 1.7; }
/* The overall conclusion and the plan: the coach's words, before the numbers. */
.assess-verdict { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px; background: var(--atlet-surface-raised); }
.assess-verdict p { margin: 0; font-size: 13px; line-height: 1.75; color: var(--atlet-text-secondary); }
.assess-verdict .assess-verdict-main { font-size: 14px; color: var(--atlet-text-primary); }
.assess-verdict .hint.warn { font-size: 12.5px; }
.assess-plan { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(242, 179, 61, .08); }
.assess-plan-item { display: flex; flex-direction: column; gap: 4px; }
.assess-plan-item > .muted { font-size: 11.5px; }
.assess-plan-item p { margin: 0; font-size: 13px; line-height: 1.7; }
.assess-plan-exercises { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 12.5px; }
.assess-plan-exercise { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; background: var(--atlet-surface); border: 1px solid var(--atlet-border); }
.assess-plan-goal { font-size: 12.5px; }
.assess-plan-guide { margin: 0; font-size: 12.5px; line-height: 1.8; color: var(--atlet-text-secondary); }
.assess-plan-guide b { font-weight: 700; color: var(--atlet-text-primary); }
/* The library's exercises for an area: a suggestion, folded until wanted. */
.assess-plan-more { display: flex; flex-direction: column; gap: 6px; }
.assess-plan-more > summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--warn); }
.assess-plan-more[open] > summary { margin-bottom: 4px; }
.assess-plan-more .assess-plan-guide { margin-bottom: 6px; }
.assess-plan-next { margin: 0; font-size: 13px; line-height: 1.7; }
/* An area's program, folded under it: when and how often, the stages, each exercise with its dose and cue. */
.assess-program-when { margin: 0; font-size: 12px; font-weight: 600; color: var(--atlet-text-secondary); }
.assess-program-stage { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.assess-program-stage-name { font-size: 12px; color: var(--warn); }
.assess-program-ex { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--atlet-surface); border: 1px solid var(--atlet-border); }
.assess-program-ex-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.assess-program-dose { font-size: 12px; font-weight: 700; color: var(--atlet-text-primary); }
.assess-program-ex .assess-program-cue { margin: 0; font-size: 11.5px; line-height: 1.7; }
.assess-program-why { margin-top: 4px; }
.assess-program-why > summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--atlet-text-secondary); }
.assess-program-why p { display: flex; flex-direction: column; gap: 1px; margin: 6px 0 0; font-size: 11.5px; line-height: 1.7; }
.assess-program-cite { font-weight: 700; color: var(--atlet-text-primary); }
a.assess-program-cite { text-decoration: underline; text-underline-offset: 2px; }
.assess-glossary summary { cursor: pointer; font-size: 13px; color: var(--atlet-text-secondary); }
.assess-glossary p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--atlet-text-secondary); }
.assess-suggestions { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px; background: rgba(242, 179, 61, .08); }
.assess-suggestions p { margin: 0; font-size: 12px; }
.assess-suggestion { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.assess-suggestion .muted { font-size: 11.5px; min-width: 70px; }
.assess-reps summary { cursor: pointer; font-size: 13px; color: var(--atlet-text-secondary); }
.assess-reps table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 8px; }
.assess-reps th, .assess-reps td { padding: 5px 6px; text-align: start; border-bottom: 1px solid var(--atlet-border); white-space: nowrap; }
.assess-reps th { color: var(--atlet-text-muted); font-weight: 600; }
.assess-reps .table-wrap { overflow-x: auto; }
.assess-reps p { font-size: 12px; margin: 6px 0 0; }
.assess-open { border-bottom: 1px solid var(--atlet-border); }
.assess-row.void { opacity: .6; }
.assess-note { margin: 0 14px 10px; font-size: 13px; color: var(--atlet-text-secondary); }
.assess-open .link-button.danger { margin: 0 14px 12px; color: var(--red-text); }

/* The assessment page (assessment.js): the results -- what needs attention, a card a test --
   one test's page, its trend and its history day by day, and a new test, a line a test
   opening to its sensors and its start. Side by side on a wide screen. */
.asx-head { display: flex; flex-direction: column; gap: 8px; margin: 2px 2px 12px; }
.asx-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* The movement file: the dominant leg, the injuries, the sport -- a line under the name. */
.asx-file { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--atlet-border); background: var(--atlet-surface); font-size: 12.5px; line-height: 1.7; }
.asx-file.empty { border-style: dashed; color: var(--atlet-text-muted); }
.asx-file-text { display: flex; flex-wrap: wrap; gap: 2px 8px; min-width: 0; color: var(--atlet-text-secondary); }
.asx-file-text b { font-weight: 700; color: var(--atlet-text-primary); }
.asx-file .link-button { flex: none; }
.asx-file-label { display: block; margin-top: 4px; font-size: 13.5px; }
.asx-file-hint { margin: 0; font-size: 12px; }
.asx-file-legs { margin: 0; }
.asx-file-injuries { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.asx-file-injury { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 8px; align-items: center; padding: 8px; border-radius: 12px; border: 1px solid var(--atlet-border); background: var(--atlet-surface-raised); }
.asx-file-injury select, .asx-file-injury input[type="text"] { min-width: 0; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--atlet-border-strong); background: var(--atlet-surface); color: var(--atlet-text-primary); font: inherit; font-size: 13px; }
.asx-file-injury input[type="text"] { grid-column: 1 / -1; }
.asx-file-recent { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--atlet-text-secondary); }
.asx-file-injury .link-button { justify-self: end; }
.asx-file-injuries > .mini { align-self: flex-start; }
/* How a test was taken, chosen when it is kept. */
.asx-conditions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; }
.asx-conditions .mini.on { border-color: var(--atlet-red); background: var(--atlet-red-glow); color: var(--atlet-text-primary); }
.assess-row .who .chip { margin-top: 3px; font-size: 10.5px; }
.asx-title { min-width: 0; }
.asx-title h2 { margin: 0; font-size: 19px; font-weight: 800; overflow-wrap: anywhere; }
.asx-title .muted { display: block; margin-top: 2px; font-size: 12px; }
.asx-tabs { display: flex; gap: 8px; align-items: stretch; margin: 0 0 12px; }
.asx-tabs-pages { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 13px; background: var(--well); border: 1px solid var(--atlet-border); }
.asx-tabs-pages button { padding: 9px 6px; border: 0; border-radius: 10px; background: transparent; color: var(--atlet-text-secondary); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.asx-tabs-pages button.on { background: var(--atlet-red-glow); color: var(--red-text); }
/* The full assessment, beside the two pages: the one action, so the one red. */
.asx-battery-go { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border: 0; border-radius: 13px; background: var(--atlet-red); color: #fff; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.asx-battery-go .icon { width: 16px; height: 16px; }
/* The full assessment's sheet and its banner over the recorder. */
.asx-battery-order { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
:lang(fa) .asx-battery-order { list-style-type: persian; }
.asx-battery-order li span { display: block; font-size: 11.5px; }
.asx-battery-note { margin: 4px 0 0; font-size: 12px; line-height: 1.7; }
.asx-battery-rules { margin: 0; padding-inline-start: 20px; font-size: 13px; line-height: 1.9; }
.asx-battery { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(220, 38, 38, .45); background: var(--atlet-red-glow); }
.asx-battery-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.asx-battery-steps { display: inline-flex; gap: 5px; }
.asx-battery-steps i { box-sizing: border-box; width: 18px; height: 6px; border-radius: 3px; background: var(--veil-3); }
.asx-battery-steps i.kept { background: var(--atlet-ok); }
/* Passed over: an empty outline, not a step still to come. */
.asx-battery-steps i.skipped { background: transparent; border: 1px solid var(--veil-line-strong); }
.asx-battery-steps i.now { background: var(--atlet-red); }
.asx-battery-tip { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--atlet-text-secondary); }
.asx-battery-tip.warn { color: var(--warn); }
.asx-battery-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.asx-bundle-run { display: flex; flex-direction: column; gap: 10px; }
.asx-cards { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.asx-attn { display: flex; flex-direction: column; padding: 10px 13px; border-radius: 14px; border: 1px solid rgba(239, 68, 68, .4); background: var(--red-wash); }
.asx-attn > b { font-size: 12.5px; color: var(--red-text); margin-bottom: 2px; }
.asx-attn-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border: 0; background: none; color: var(--atlet-text-primary); font: inherit; font-size: 13px; text-align: start; cursor: pointer; }
.asx-calm { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 13px; border-radius: 14px; border: 1px solid var(--atlet-border); background: var(--atlet-surface); font-size: 12.5px; color: var(--atlet-text-secondary); }
.asx-section { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 8px 2px 0; font-size: 13px; color: var(--atlet-text-secondary); }
.asx-section .muted { font-size: 11.5px; }
.asx-card { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 12px 13px; border-radius: 16px; border: 1px solid var(--atlet-border); background: var(--atlet-surface); color: var(--atlet-text-primary); font: inherit; text-align: start; cursor: pointer; }
.asx-card.sel { border-color: rgba(220, 38, 38, .55); box-shadow: inset 0 0 0 1px rgba(220, 38, 38, .25); }
.asx-card-top, .asx-card-sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.asx-card-top b { font-size: 14px; font-weight: 800; }
.asx-card-top .chip { font-size: 10.5px; flex: none; }
.asx-card-sub .muted { font-size: 11.5px; }
.asx-card-nums { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.asx-card-value { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.asx-card-metric { font-size: 11px; color: var(--atlet-text-muted); }
.asx-card-value b { font-size: 15px; font-weight: 800; }
.asx-change { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--atlet-text-muted); }
.asx-change.up { color: var(--ok-text); }
.asx-change.down { color: var(--red-text); }
.asx-spark { width: 112px; height: 40px; display: block; }

.asx-test { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.asx-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; }
.asx-back .icon { width: 16px; height: 16px; }
.asx-test-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.asx-test-head h3 { margin: 0; font-size: 17px; font-weight: 800; }
.asx-test-head .muted { font-size: 12px; }
.asx-test-head .mini { flex: none; display: inline-flex; align-items: center; gap: 5px; }
.asx-one { margin: 0; font-size: 12.5px; }
.asx-day { border-radius: 14px; border: 1px solid var(--atlet-border); background: var(--atlet-surface); overflow: hidden; }
.asx-day-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; padding: 10px 13px; border: 0; background: none; color: var(--atlet-text-primary); font: inherit; font-size: 13px; text-align: start; cursor: pointer; }
.asx-day-head .muted { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.asx-day-head .icon, .asx-pick-head > .icon, .asx-fold-head .icon { width: 16px; height: 16px; flex: none; color: var(--atlet-text-muted); transition: transform .15s; }
.asx-day.open .asx-day-head .icon, .asx-pick.open .asx-pick-head > .icon, .asx-fold.open .asx-fold-head .icon { transform: rotate(180deg); }
.asx-item { border-top: 1px solid var(--atlet-border); padding: 0 13px; }
.asx-item .assess-row { border-top: 0; padding: 10px 0; }
.asx-item .assess-open { border-bottom: 0; }

.asx-new { display: flex; flex-direction: column; gap: 10px; }
.assess-views { margin: 0; }
.assess-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.assess-chips .mini.on { border-color: var(--atlet-red); color: var(--atlet-text-primary); background: var(--atlet-red-glow); }
.assess-note-box { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--atlet-surface-raised); font-size: 13px; line-height: 1.7; color: var(--atlet-text-secondary); }
.asx-picks { display: flex; flex-direction: column; gap: 8px; }
.asx-pick { border-radius: 14px; border: 1px solid var(--atlet-border); background: var(--atlet-surface); }
.asx-pick.open { border-color: rgba(220, 38, 38, .55); }
.asx-pick-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 13px; border: 0; background: none; color: var(--atlet-text-primary); font: inherit; text-align: start; cursor: pointer; }
.asx-pick-name { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.asx-pick-name b { font-size: 13.5px; overflow-wrap: anywhere; }
.asx-pick-name .muted { font-size: 11.5px; }
.asx-pick-body { display: flex; flex-direction: column; gap: 8px; padding: 0 13px 13px; }
.asx-use { margin: 0; font-size: 12.5px; line-height: 1.7; }
.asx-places { display: flex; flex-wrap: wrap; gap: 6px; }
.asx-places > span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: var(--well); border: 1px solid var(--atlet-border); font-size: 12px; }
.asx-places b { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--atlet-red); color: #fff; font-size: 10.5px; }
.asx-pick-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.asx-fold { border-top: 1px solid var(--atlet-border); }
.asx-fold-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; padding: 10px 2px; border: 0; background: none; color: var(--atlet-text-secondary); font: inherit; font-size: 13px; text-align: start; cursor: pointer; }
.asx-fold-body { padding: 0 0 10px; font-size: 13px; line-height: 1.8; }
.asx-steps { margin: 4px 0 0; padding-inline-start: 18px; }
.asx-start { width: 100%; margin-top: 4px; }

@media (min-width: 1180px) {
  .asx-split { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 16px; align-items: start; }
  /* The open test stays in view beside a long list of cards, and scrolls on its own. At its end
     the page scrolls on: held in, the pane's foot -- the raw data and void buttons -- stayed below
     the screen until the page was scrolled from beside it (the owner, 2026-10-09). */
  .asx-pane { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; padding: 14px; border-radius: 18px; border: 1px solid var(--atlet-border); background: var(--atlet-surface); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .asx-split .asx-card { background: var(--well); }
}
.assess-recorder-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 16px; }
.assess-phase { font-size: 15px !important; font-weight: 700; }
.light-none { background: var(--atlet-border-strong); }

/* The body the sensors are shown on (assessment.js bodyFigure). */
.assess-where { display: flex; flex-direction: column; gap: 8px; flex: none; }
.assess-views-row { display: flex; gap: 6px; justify-content: center; }
.assess-view { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.assess-view figcaption { font-size: 11px; color: var(--atlet-text-muted); }
.assess-view .assess-body { width: 150px; height: auto; direction: ltr; }
.assess-where.compact .assess-body { width: 120px; }
.assess-skin { fill: var(--atlet-surface-raised); stroke: var(--atlet-border-strong); stroke-width: 1; }
.assess-mark { fill: none; stroke: var(--atlet-border-strong); stroke-width: 0.8; stroke-linecap: round; }
.assess-dimple { fill: var(--atlet-text-muted); }
.assess-bar { stroke: var(--atlet-text-secondary); stroke-width: 3; stroke-linecap: round; }
.assess-sensor { fill: var(--atlet-red); stroke: #fff; stroke-width: 0.8; }
.assess-sensor.optional { fill: none; stroke: var(--atlet-red); stroke-dasharray: 2 1.5; stroke-width: 1.2; }
.assess-badge circle { fill: var(--atlet-text-primary); }
.assess-badge text { fill: var(--atlet-bg); font-size: 7px; font-weight: 700; font-family: inherit; }
.assess-where-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; line-height: 1.7; }
.assess-where-item { display: grid; grid-template-columns: 22px 150px 1fr; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--atlet-border); border-radius: 12px; background: var(--atlet-surface-raised); }
.assess-where.compact .assess-where-item { grid-template-columns: 20px 118px 1fr; padding: 6px 8px; }
@media (max-width: 420px) { .assess-where-item { grid-template-columns: 20px 120px 1fr; gap: 8px; } }
.assess-where-number { width: 22px; height: 22px; border-radius: 50%; background: var(--atlet-text-primary); color: var(--atlet-bg); font-weight: 700; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.assess-where-closeup { width: 100%; height: auto; direction: ltr; background: var(--atlet-surface); border-radius: 10px; border: 1px solid var(--atlet-border); }
/* The close-up draws on the surface: the body a shade off it, its landmarks plainly visible, dark or light. */
.assess-where-closeup .assess-skin { fill: var(--veil-3); stroke: var(--veil-line-strong); stroke-width: 1.2; }
.assess-where-closeup .assess-mark { stroke: var(--atlet-text-secondary); stroke-width: 1.1; }
.assess-where-closeup .assess-mark.strong { stroke: var(--atlet-text-primary); stroke-width: 1.8; }
.assess-where-closeup .assess-dimple { fill: var(--atlet-text-primary); }
.assess-where-closeup .assess-sensor { stroke-width: 1.2; }
.assess-where-port-note { color: var(--atlet-red); font-size: 12px; }
.assess-where-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.assess-where-list li b { margin-inline-end: 6px; }
.assess-where-list li i { margin-inline-start: 6px; font-size: 11.5px; }
.assess-mark.strong { stroke: var(--atlet-text-secondary); stroke-width: 1.4; }
.assess-mark.dashed { stroke-dasharray: 2.5 2; }
.assess-where-led { fill: #FFE28A; }
.assess-where-port { fill: #fff; opacity: .9; }
.assess-where-arrow { fill: none; stroke: var(--atlet-red); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.assess-where-word { fill: var(--atlet-red); font-size: 8px; font-family: inherit; }
.assess-where-small { fill: var(--atlet-text-primary); font-size: 8.5px; font-family: inherit; font-weight: 600; }
.assess-where > p { margin: 0; font-size: 11.5px; }
.asx-fold-body .assess-where { width: 100%; max-width: 440px; }
.assess-count { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.assess-count .mini.on { border-color: var(--atlet-red); background: var(--atlet-red-glow); color: var(--atlet-text-primary); }

/* The moving body (assessment-motion.js): how a test is done, the athlete live, a replay. */
.assess-motion { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px; border-radius: 12px; background: var(--atlet-surface-raised); min-width: 0; }
.assess-motion-title { font-size: 12px; font-weight: 700; color: var(--atlet-text-secondary); }
.assess-motion-words { margin: 0; min-height: 22px; font-size: 13.5px; font-weight: 700; text-align: center; color: var(--atlet-text-primary); }
.assess-motion .mini { margin-top: 4px; }
.assess-motion-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
/* Telling which sensor is where: the movement to do, big enough to read from where the athlete stands. */
.assess-where-fold > summary { cursor: pointer; font-weight: 700; color: var(--atlet-text-secondary); margin-bottom: 6px; }
.assess-find { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; align-items: center; }
.assess-find-words { display: flex; flex-direction: column; gap: 4px; }
.assess-find-words b { font-size: 20px; color: var(--atlet-text-primary); }
.assess-find-words p { margin: 0; }
.assess-find-now { font-size: 17px; font-weight: 700; color: var(--atlet-ok); }
/* The sensors on the bench. */
.assess-bench-part { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--atlet-border); }
.assess-bench .input { max-width: 110px; }
.assess-bench table { font-size: 13px; }
/* A recording led by sound: big enough to read from where the athlete stands. */
.assess-guide { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px; border-radius: 14px; background: var(--atlet-surface-raised); text-align: center; }
/* (.assess-step p sets small text; these are read from across the room.) */
.assess-step .assess-guide p { margin: 0; }
.assess-step .assess-guide-say { font-size: 24px; font-weight: 800; line-height: 1.5; color: var(--atlet-text-primary); }
.assess-step .assess-guide-count { font-size: 76px; font-weight: 900; line-height: 1.05; color: var(--atlet-text-primary); font-variant-numeric: tabular-nums; }
.assess-play { margin: 8px 14px 0; }
.motion-figure { width: 100%; max-width: 260px; height: auto; direction: ltr; }
.motion-ground { stroke: var(--atlet-border-strong); stroke-width: 2; }
.motion-wall { stroke: var(--atlet-border-strong); stroke-width: 3; stroke-dasharray: 6 4; }
.motion-prop { fill: none; stroke: var(--atlet-border-strong); stroke-width: 2; }
.motion-chair { fill: none; stroke: var(--atlet-border-strong); stroke-width: 3; stroke-linecap: round; }
.motion-limb { stroke: var(--atlet-text-secondary); stroke-linecap: round; fill: none; transition: stroke .2s; }
.motion-limb.far { opacity: .45; }
.motion-limb.faint { opacity: .25; }
.motion-limb.warn { stroke: var(--warn); }
.motion-head { fill: var(--atlet-text-secondary); }
.motion-dowel { stroke: #C89B5C; stroke-width: 3; stroke-linecap: round; }
.motion-barbell { fill: var(--atlet-text-muted); }
.motion-sensor { fill: var(--atlet-red); stroke: #fff; stroke-width: 1; }

/* The session as cards (training.js cardsEditor), as TrueCoach builds one. */
.ed-head input { flex: 1 1 240px; min-width: 0; font: inherit; font-size: 18px; font-weight: 700; background: transparent; border: 0; border-bottom: 1px dashed var(--atlet-border-strong); border-radius: 0; padding: 6px 2px; outline: none; color: var(--atlet-text-primary); }
.ed-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.ed-cols.single { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) { .ed-cols { grid-template-columns: minmax(0, 1fr); } }
.ed-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ed-sec { display: flex; align-items: center; gap: 8px; margin: 8px 4px 2px; color: var(--atlet-text-secondary); font-size: 14px; }
.ed-line { flex: 1; height: 1px; background: var(--atlet-border); }
.ed-card { display: grid; grid-template-columns: 32px 76px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px; background: var(--atlet-surface); border: 1px solid var(--atlet-border); border-radius: 14px; }
.ed-card.editable { cursor: pointer; }
.ed-card.editable:hover { border-color: var(--atlet-border-strong); }
.ed-badge { width: 30px; height: 30px; border-radius: 8px; background: var(--focus-bg); color: var(--focus); display: grid; place-items: center; font-weight: 600; font-size: 13px; margin-top: 10px; }
.ed-thumb { width: 76px; height: 50px; border-radius: 8px; border: 0; background: linear-gradient(135deg, var(--atlet-border-strong), var(--atlet-surface-raised)); display: grid; place-items: center; color: var(--atlet-text-primary); cursor: pointer; padding: 0; }
.ed-thumb.none { cursor: default; color: var(--atlet-text-muted); opacity: .55; }
.ed-thumb svg { width: 20px; height: 20px; }
.ed-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ed-name { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.ed-fields { display: flex; flex-wrap: wrap; gap: 6px; }
.ed-field { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; background: var(--atlet-surface-raised); border: 1px solid var(--atlet-border); border-radius: 8px; padding: 3px 9px; }
.ed-field i { font-style: normal; color: var(--atlet-text-muted); }
.ed-field b { font-weight: 600; }
.ed-field.ok { color: var(--atlet-ok); }
.ed-field svg { width: 13px; height: 13px; }
.ed-note { margin: 0; font-size: 12.5px; color: var(--atlet-text-secondary); line-height: 1.7; }
.ed-item { display: flex; gap: 8px; font-size: 13px; }
.ed-session-note { margin: 0 4px; font-size: 13px; color: var(--atlet-text-secondary); }
.ed-superset { display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 14px; border-inline-start: 3px solid var(--info); background: rgba(74, 158, 255, .05); }
.ed-superset-head { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--info); margin: 0 6px; background: none; border: 0; padding: 0; text-align: start; cursor: pointer; align-self: flex-start; }
span.ed-superset-head { cursor: default; }
.ed-link { display: flex; align-items: center; gap: 8px; margin: -2px 0; }
.ed-link-line { flex: 1; height: 1px; background: var(--atlet-border); }
.ed-link-pill { font: inherit; font-size: 12.5px; border: 1px dashed var(--atlet-border-strong); border-radius: 999px; padding: 3px 12px; color: var(--atlet-text-secondary); background: var(--atlet-bg); cursor: pointer; }
.ed-link-pill.on { border-style: solid; border-color: var(--info); color: var(--info); background: rgba(74, 158, 255, .08); }
.ed-add { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; padding: 14px; border: 1.5px dashed var(--atlet-border-strong); border-radius: 14px; background: transparent; color: var(--atlet-text-primary); font: inherit; cursor: pointer; margin-top: 6px; }
.ed-add b { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; }
.ed-add small { color: var(--atlet-text-muted); font-size: 12px; }
.ed-adds { display: flex; flex-wrap: wrap; gap: 8px; }
.ed-lib { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; max-height: calc(100vh - 40px); overflow: hidden; }
.ed-lib-search { width: 100%; box-sizing: border-box; background: var(--atlet-surface-raised); color: var(--atlet-text-primary); border: 1px solid var(--atlet-border-strong); border-radius: 10px; padding: 9px 12px; font: inherit; font-size: 14px; }
.ed-lib-list { overflow-y: auto; display: flex; flex-direction: column; }
.ed-lib-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) 30px; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--atlet-border); }
.ed-lib-item .ed-thumb { width: 56px; height: 36px; }
.ed-lib-name { font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.ed-lib-add { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--atlet-border); background: var(--atlet-surface-raised); color: var(--atlet-text-primary); display: grid; place-items: center; cursor: pointer; }
.ed-lib-add svg { width: 16px; height: 16px; }
@media (max-width: 900px) { .ed-lib { position: static; max-height: none; } .ed-lib-list { max-height: 320px; } }

/* A session opened over the calendar, as TrueCoach opens one (training.js
   mountEditor): a column in the middle of the screen over the board dimmed
   under it, the whole screen on a phone; its bar at the top in the colour of
   how it went, what scrolls under it, Save at its foot. */
.ed-layer:empty { display: none; }
body:has(.ed-layer:not(:empty)) { overflow: hidden; }
.ed-scrim { position: fixed; inset: 0; z-index: 35; background: var(--scrim); }
.ed-window { position: fixed; z-index: 36; inset: 0; display: flex; flex-direction: column; background: var(--atlet-surface); color: var(--atlet-text-primary); }
@media (min-width: 1000px) {
  .ed-window { inset: 26px auto 26px 50%; transform: translateX(-50%); width: min(780px, calc(100vw - 48px)); border: 1px solid var(--atlet-border-strong); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px var(--shadow); }
  .ed-window.wide { width: min(1180px, calc(100vw - 48px)); }
}
.ed-head input:focus { border-bottom-color: var(--atlet-red); }
.ed-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; padding: 8px 10px; background: var(--bar); border-bottom: 1px solid var(--atlet-border); color: var(--atlet-text-primary); }
.ed-bar.tone-ok { background: var(--bar-ok); }
.ed-bar.tone-warn { background: var(--bar-warn); }
.ed-bar.tone-red { background: var(--bar-red); }
.ed-when { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; padding: 0 8px; overflow: hidden; white-space: nowrap; }
.ed-when b { font-size: 14px; }
.ed-when span { font-size: 12.5px; opacity: .88; overflow: hidden; text-overflow: ellipsis; }
.ed-tools { display: flex; align-items: center; gap: 2px; }
.ed-icon, .ed-bar .row-menu { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: transparent; color: inherit; cursor: pointer; }
.ed-icon:hover:not(:disabled), .ed-bar .row-menu:hover { background: var(--veil-3); }
.ed-icon:disabled { opacity: .3; cursor: default; }
.ed-icon.on { background: var(--veil-4); }
.ed-icon .icon, .ed-bar .row-menu .icon { width: 19px; height: 19px; }
.ed-edit { display: inline-flex; align-items: center; gap: 6px; height: 34px; margin-inline-end: 4px; padding: 0 12px; border: 1px solid var(--veil-line); border-radius: 9px; background: var(--veil-3); color: inherit; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.ed-edit:hover { background: var(--veil-4); }
.ed-edit .icon { width: 16px; height: 16px; }
.ed-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 22px 30px; }
.ed-foot { flex: 0 0 auto; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--atlet-border); background: var(--atlet-surface); }
.ed-foot[hidden] { display: none; }
/* What was just taken out of the session, with its undo: a row of its own above the buttons. */
.ed-foot .undo-line { flex: 1 1 100%; margin: 0; }
.ed-foot .submit, .ed-foot .secondary { width: auto; height: 42px; margin: 0; padding: 0 24px; }
.ed-foot .message { flex: 1 1 200px; min-width: 0; }
.ed-foot .message:empty { display: none; }
.ed-foot .message .notice { margin: 0; }
.ed-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ed-window .ed-lib { top: 0; max-height: calc(100vh - 210px); }
/* The tab bar is drawn over the page's own layer: put away while a session is open. */
body:has(.ed-layer:not(:empty)) .nav { display: none; }
@media (max-width: 640px) {
  .ed-scroll { padding: 14px 12px 24px; }
  /* Two rows: the buttons, then the day and how it went in full. */
  .ed-bar { flex-wrap: wrap; padding: 6px 6px 8px; }
  .ed-tools { margin-inline-start: auto; }
  .ed-when { order: 9; flex: 1 0 100%; padding: 2px 8px 0; }
  .ed-card { grid-template-columns: 30px 48px minmax(0, 1fr) auto; gap: 10px; padding: 10px; }
  .ed-card .ed-thumb { width: 48px; height: 34px; }
}

/* The session read (drawSessionRead): what was asked, what was done, what was said. */
.wo-view { display: flex; flex-direction: column; gap: 10px; max-width: 700px; margin: 0 auto; }
.wo-title { margin: 2px 0 8px; text-align: center; font-size: 18px; font-weight: 700; line-height: 1.5; }
.wo-part { padding: 10px 14px; border-radius: 12px; background: var(--veil-1); border: 1px solid var(--atlet-border); }
.wo-part h4, .wo-talk h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 13px; color: var(--atlet-text-secondary); }
.wo-part h4 .icon, .wo-talk h4 .icon { width: 17px; height: 17px; }
.wo-part-warmup h4 .icon { color: #F97316; }
.wo-part-cooldown h4 .icon { color: var(--info); }
.wo-part-line { margin: 0; font-size: 13.5px; line-height: 1.8; }
.wo-gap { height: 6px; }
.wo-videos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.wo-ex { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--atlet-border); background: var(--atlet-surface); }
.wo-ex.editable { cursor: pointer; }
.wo-ex.editable:hover { border-color: var(--atlet-border-strong); }
.wo-badge { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 600; background: var(--focus-bg); color: var(--focus); }
.wo-ex-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wo-ex-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-height: 30px; }
.wo-ex-head b { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.wo-rx { margin: 0; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.wo-cue, .wo-note { margin: 0; font-size: 12.5px; line-height: 1.8; color: var(--atlet-text-secondary); }
.wo-last { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12px; color: var(--atlet-text-muted); }
.wo-set { display: inline-block; padding: 1px 7px; border-radius: 6px; background: var(--veil-2); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.wo-result { margin-top: 4px; padding: 8px 10px; border-radius: 8px; background: var(--well); border-inline-start: 3px solid var(--atlet-ok); }
.wo-result.no { border-inline-start-color: #EF4444; }
.wo-result-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.wo-result-line > .icon { width: 15px; height: 15px; }
.wo-result.ok .wo-result-line > .icon { color: var(--atlet-ok); }
.wo-result.no .wo-result-line > .icon { color: var(--red-text); }
.wo-result-note { margin: 4px 0 0; font-size: 12.5px; color: var(--atlet-text-secondary); }
.wo-group { display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 14px; border-inline-start: 3px solid var(--info); background: rgba(74, 158, 255, .05); }
.wo-group-head { font-size: 12.5px; font-weight: 600; color: var(--info); margin: 0 6px; }
.wo-rounds { font-size: 12px; color: var(--atlet-text-secondary); }
.wo-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid var(--atlet-border); font-size: 13px; }
.wo-item > span:first-child { min-width: 3em; color: var(--atlet-text-secondary); font-variant-numeric: tabular-nums; }
.wo-sec { display: flex; align-items: center; gap: 8px; margin: 8px 2px 0; font-size: 14px; color: var(--atlet-text-secondary); }
.wo-talk { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--atlet-border); display: flex; flex-direction: column; gap: 8px; }
.wo-talk .hint { margin: 0; }
.wo-say { max-width: 86%; align-self: flex-start; padding: 8px 12px; border-radius: 12px; background: var(--atlet-surface-raised); }
.wo-say.coach { align-self: flex-end; background: rgba(220, 38, 38, .18); }
.wo-say-who { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; font-size: 11.5px; color: var(--atlet-text-secondary); }
.wo-say-who time { color: var(--atlet-text-muted); font-size: 10.5px; }
.wo-say p { margin: 2px 0 0; font-size: 13.5px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.wo-compose { display: flex; align-items: flex-end; gap: 8px; }
.wo-reply { flex: 1; min-height: 44px; resize: vertical; }
.wo-send { flex: 0 0 auto; height: 44px; }

/* Printed, the session alone on the paper, in ink. */
@media print {
  body:has(.ed-layer:not(:empty)) :is(.side, .nav, .hdr, .app-bg, .training, .cal-dock, .chat-float) { display: none !important; }
  body:has(.ed-layer:not(:empty)) { overflow: visible; background: #fff; }
  .ed-scrim, .ed-tools, .ed-foot, .ed-bar .ed-icon, .wo-compose { display: none !important; }
  .ed-window { position: static; transform: none; width: auto; height: auto; overflow: visible; border: 0; box-shadow: none; background: #fff; }
  .ed-scroll { overflow: visible; padding: 0; }
  .ed-window, .ed-window * { color: #000 !important; background: transparent !important; border-color: #bbb !important; }
}

/* The athlete's page in training (training.js athleteHead / athleteTabs). */
.ath-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 14px; margin-bottom: 10px; }
.ath-who { display: flex; align-items: center; gap: 10px; flex: 1 1 200px; min-width: 0; }
.ath-who strong { display: block; font-size: 16px; }
.ath-who .muted { font-size: 12.5px; }
.ath-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.ath-stat { background: var(--atlet-surface-raised); border: 1px solid var(--atlet-border); border-radius: 12px; padding: 7px 12px; min-width: 110px; }
.ath-stat b { display: block; font-size: 16px; }
.ath-stat b.warn { color: var(--warn); }
.ath-stat span { font-size: 11.5px; color: var(--atlet-text-secondary); }
.ath-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ath-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--atlet-border); margin: 0 0 12px; overflow-x: auto; }
@media (max-width: 520px) {
  /* The calendar's bar in one short row: Today and the date picker as an icon. */
  .cal-sticky { padding-top: 4px; }
  .cal-sticky .cal-toolbar { gap: 6px; margin-bottom: 4px; }
  .cal-month-title { font-size: 13.5px; }
  .cal-jump span { display: none; }
}
.ath-tab { font: inherit; font-size: 14px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--atlet-text-secondary); padding: 8px 14px; cursor: pointer; white-space: nowrap; }
.ath-tab.on { color: var(--atlet-text-primary); font-weight: 600; border-bottom-color: var(--atlet-red); }
.ath-soon { padding: 16px; }
.ath-soon p { margin: 6px 0 0; line-height: 1.8; }
.ath-results { display: flex; flex-direction: column; gap: 10px; padding: 14px; margin-bottom: 12px; }
.ath-load { width: 100%; max-width: 560px; height: auto; display: block; margin: 0 auto; }
.ath-load rect { fill: var(--atlet-border-strong); }
.ath-load rect.now { fill: var(--atlet-red); }
.ath-load .v { font-size: 10px; fill: var(--atlet-text-primary); }
.ath-load .d { font-size: 9.5px; fill: var(--atlet-text-muted); }
.ath-sessions { padding: 4px 0; }
.ath-session { display: flex; align-items: center; gap: 10px; }

/* The movement assessments at a glance (assessment-overview.js): the training tab's list, the file's card, the athlete's tab. */
.assess-dots { display: inline-flex; gap: 3px; align-items: center; }
.assess-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--atlet-border-strong); }
.assess-dot.ok { background: var(--atlet-ok); }
.assess-dot.warn { background: #F2B33D; }
.assess-dot.bad { background: #EF4444; }
.hint.bad { color: var(--red-text); }
.av-sm { width: 30px; height: 30px; font-size: 12px; }
/* The training tab's assessments: filters with counts, a card an athlete, those never assessed in a short list. */
.asv { display: flex; flex-direction: column; gap: 12px; }
.asv-head h2 { margin: 0; font-size: 19px; font-weight: 800; }
.asv-head .muted { display: block; margin-top: 2px; font-size: 12px; }
.asv .filters { margin: 0; }
.asv-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.asv-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; border-radius: 16px; border: 1px solid var(--atlet-border); background: var(--atlet-surface); }
.asv-card:hover { border-color: var(--atlet-border-strong); }
.asv-open { display: flex; flex-direction: column; gap: 9px; min-width: 0; padding: 12px 13px; border: 0; background: none; color: var(--atlet-text-primary); font: inherit; text-align: start; cursor: pointer; }
.asv-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.asv-who { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.asv-who b { font-size: 14px; font-weight: 800; overflow-wrap: anywhere; }
.asv-who i { font-style: normal; font-size: 11.5px; color: var(--atlet-text-muted); overflow-wrap: anywhere; }
.asv-when { flex: none; font-size: 11.5px; color: var(--atlet-text-muted); }
.asv-when.due { color: var(--warn); font-weight: 700; }
.asv-tests { display: flex; flex-wrap: wrap; gap: 6px; }
.asv-test { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--atlet-border); background: var(--well); font-size: 11.5px; color: var(--atlet-text-secondary); }
.asv-test i { width: 8px; height: 8px; border-radius: 50%; background: var(--atlet-border-strong); }
.asv-test.ok i { background: var(--atlet-ok); }
.asv-test.warn i { background: #F2B33D; }
.asv-test.bad i { background: #EF4444; }
.asv-test.bad { border-color: rgba(239, 68, 68, .45); color: var(--atlet-text-primary); }
/* A test due again (migration 0076): coming within a week, due, or past. */
.asv-test.retest-soon { border-color: var(--info); }
.asv-test.retest-due, .asv-test.retest-overdue { border-color: var(--warn); border-style: dashed; }
.asv-when.soon { color: var(--info); }
.assess-card-next.soon, .assess-tile-next.soon { color: var(--info); }
.assess-card-next.due, .assess-card-next.overdue, .assess-tile-next.due, .assess-tile-next.overdue { color: var(--warn); font-weight: 600; }
.assess-tile-next { display: block; font-size: 11.5px; color: var(--atlet-text-muted); }
.asx-due { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--atlet-border); border-radius: 12px; background: var(--atlet-surface); }
.asx-due > b { font-size: 13px; margin-bottom: 4px; }
.asx-due-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border: 0; background: none; color: var(--atlet-text-primary); font: inherit; font-size: 13px; text-align: start; cursor: pointer; }
.asx-due-row .icon { flex: none; color: var(--atlet-text-muted); }
.asx-due-row.soon .icon { color: var(--info); }
.asx-due-row.due .icon, .asx-due-row.overdue .icon { color: var(--warn); }
.asx-due-when { margin-inline-start: auto; font-size: 12px; color: var(--atlet-text-secondary); white-space: nowrap; }
.asx-card-due { display: block; font-size: 11.5px; color: var(--atlet-text-muted); }
.asx-card-due.soon { color: var(--info); }
.asx-card-due.due, .asx-card-due.overdue { color: var(--warn); font-weight: 600; }
.asx-retest { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 10px; border: 1px solid var(--atlet-border); border-radius: 12px; background: var(--atlet-surface); font-size: 13px; }
.asx-retest .icon { flex: none; color: var(--atlet-text-muted); }
.asx-retest.soon .icon { color: var(--info); }
.asx-retest.due .icon, .asx-retest.overdue .icon { color: var(--warn); }
.asx-retest-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.asx-retest-text .muted { font-size: 12px; }
.asv-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 12.5px; line-height: 1.6; }
.asv-note.bad { color: var(--red-text); }
.asv-note.warn { color: var(--warn); }
.asv-note b { font-size: 11.5px; font-weight: 700; color: var(--atlet-text-muted); }
.asv-add { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-block-start: 12px; margin-inline-end: 12px; border-radius: 12px; border: 1px solid rgba(220, 38, 38, .5); background: var(--atlet-red-glow); color: var(--red-text); cursor: pointer; }
.asv-add .icon { width: 18px; height: 18px; }
.asv-section { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 2px 8px; font-size: 13px; color: var(--atlet-text-secondary); }
.asv-never-list { border-radius: 14px; border: 1px solid var(--atlet-border); background: var(--atlet-surface); }
.asv-never-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 12px; border-top: 1px solid var(--atlet-border); }
.asv-never-row:first-child { border-top: 0; }
.asv-never-who { display: flex; align-items: center; gap: 10px; min-width: 0; border: 0; background: none; color: var(--atlet-text-primary); font: inherit; font-size: 13px; text-align: start; cursor: pointer; }
.asv-never-who span:last-child { overflow-wrap: anywhere; }
@media (min-width: 1000px) {
  .asv-list { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
  .asv-never-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}
.assess-card-mini .line { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; }
.assess-card-actions { display: flex; gap: 8px; margin-top: 8px; }
.assess-card-actions button { flex: 1; }
.assess-tiles-wrap { display: grid; grid-template-columns: minmax(0, 2fr) minmax(200px, 1fr); gap: 12px; align-items: start; }
.assess-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.assess-tile { display: flex; flex-direction: column; gap: 6px; text-align: start; font: inherit; color: inherit; cursor: pointer; }
.assess-tile:hover { border-color: var(--atlet-border-strong); }
.assess-tile-line { margin: 0; font-size: 13px; color: var(--atlet-text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.assess-start { display: flex; flex-direction: column; gap: 8px; }
.assess-start button.secondary { display: flex; gap: 6px; align-items: center; justify-content: flex-start; }
@media (max-width: 760px) {
  .assess-tiles-wrap { grid-template-columns: 1fr; }
  .assess-tiles { grid-template-columns: 1fr; }
}

/* The assessment report (assessment-report.js): white A4 paper on the screen's desk,
   printed alone. The content is 184 mm wide on screen and on paper (A4 less 13 mm a
   side), so the charts drawn here are the charts printed. */
.report-screen { display: flex; flex-direction: column; gap: 14px; }
.report-controls { display: flex; flex-direction: column; gap: 12px; }
.report-controls-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.report-controls-row strong { font-size: 15px; }
.report-field { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--atlet-text-secondary); }
.report-field input { flex: 1; max-width: 360px; height: 38px; border-radius: 10px; border: 1px solid var(--atlet-border-strong); background: var(--atlet-surface-raised); color: var(--atlet-text-primary); padding: 0 12px; font: inherit; }
.report-ticks { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: 13px; }
.report-tick { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.report-tick i { font-style: normal; font-size: 12px; }
.report-hint { margin: 0; font-size: 12px; }
.report-desk { background: #24272D; border-radius: 16px; padding: 28px 16px; overflow-x: auto; }
.report-paper {
  --atlet-text-primary: #14161B; --atlet-text-secondary: #4B5260; --atlet-text-muted: #6A7280;
  --atlet-surface: #FFFFFF; --atlet-surface-raised: #F5F6F8; --atlet-border: #E6E8EC; --atlet-border-strong: #D3D7DE;
  --atlet-ok: #12A26E; --atlet-red: #C10D0E;
  box-sizing: content-box; width: 184mm; margin: 0 auto; padding: 14mm 13mm; background: #FFFFFF; color: #14161B;
  border-radius: 4px; box-shadow: 0 12px 40px rgba(0, 0, 0, .35); font-family: "Vazirmatn", "IRANSans", sans-serif; font-size: 12.5px; line-height: 1.8;
}
.report-paper h1, .report-paper h2, .report-paper h3 { color: #14161B; }
.report-paper h2 { font-size: 20px; font-weight: 800; margin: 0 0 12px; }
.report-paper h3 { font-size: 14px; font-weight: 700; margin: 18px 0 8px; padding-inline-start: 10px; border-inline-start: 3px solid #C10D0E; }
.report-paper p { margin: 4px 0; }
.report-paper ul, .report-paper ol { margin: 4px 0; padding-inline-start: 20px; }
.report-paper .muted { color: #6A7280; }
.report-paper .hint.warn { color: #A86A00; }
.report-paper .hint.bad { color: #C62F3B; }
.report-paper .assess-trend, .report-paper .assess-sym { background: #FFFFFF; border: 1px solid #E6E8EC; }
.report-paper .assess-trend .good, .report-paper .assess-sym .good { color: #12A26E; }
.report-paper .assess-trend .warn, .report-paper .assess-sym .warn { color: #B9770E; }
.report-paper .assess-trend .bad, .report-paper .assess-sym .bad { color: #D93844; }
.report-paper .assess-trend .muted, .report-paper .assess-sym .muted, .report-paper .assess-kpi-name, .report-paper .assess-kpi-delta { color: #6A7280; }
.report-paper .assess-sym-side b.small { color: #14161B; }
.report-paper .assess-kpi-dot.right { background: #2F6FE4; }
.report-paper .assess-kpi-dot.left { background: #F07A2E; }
.report-paper .assess-card { border: 1px solid #E6E8EC; border-radius: 14px; padding: 14px; background: #FFFFFF; }
.report-paper .assess-plan { background: #FFF8EC; border: 1px solid #F3E2C0; }
.report-paper .assess-plan-guide { color: #3D3D3C; }
.report-paper .assess-plan-guide b { color: #1F1F1F; }
.report-paper .assess-verdict { background: #F5F6F8; }
.report-paper details > summary { list-style: none; font-weight: 700; color: #14161B; }
.report-paper details > summary::-webkit-details-marker { display: none; }
.report-paper a.sv-video { color: #C10D0E; border-color: #F0C9C9; background: #FFF5F5; }
.report-paper table { border-collapse: collapse; width: 100%; font-size: 11.5px; }
.report-paper th, .report-paper td { border-bottom: 1px solid #E6E8EC; padding: 5px 6px; text-align: start; color: #14161B; }
.report-paper th { color: #4B5260; font-weight: 700; background: #F5F6F8; }
/* The cover: the gym's photograph to the paper's edges, darkened so the owner's white logo and
   the words read, the brand's red along the foot. */
.report-cover {
  position: relative; box-sizing: border-box; height: 297mm; margin: -14mm -13mm 0; padding: 20mm 18mm 24mm;
  display: flex; flex-direction: column; color: #FFFFFF; overflow: hidden; border-radius: 4px 4px 0 0;
  background:
    linear-gradient(180deg, rgba(10, 10, 12, .80) 0%, rgba(10, 10, 12, .34) 30%, rgba(10, 10, 12, .50) 52%, rgba(10, 10, 12, .93) 76%, #0A0A0C 100%),
    url('../assets/atlet-gym.jpg') center 28% / cover no-repeat #0A0A0C;
}
.report-cover-logo { display: block; width: 108mm; margin: 16mm auto 0; }
.report-slogan { margin: 4.5mm 0 0; text-align: center; direction: ltr; font-family: "Inter", sans-serif; font-weight: 500; font-size: 13.5px; letter-spacing: .08em; color: rgba(255, 255, 255, .78); }
.report-cover-body { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; }
.report-cover h1 { color: #FFFFFF; font-size: 44px; font-weight: 800; line-height: 1.35; margin: 16px 0 0; }
.report-cover .report-en { align-self: stretch; margin: 4px 0 0; direction: ltr; text-align: end; font-family: "Inter", sans-serif; font-weight: 500; font-size: 11.5px; letter-spacing: .34em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.report-facts { align-self: stretch; display: grid; grid-template-columns: 1.15fr 1.45fr 1fr; margin: 12mm 0 0; border-top: 1px solid rgba(255, 255, 255, .24); }
.report-fact { padding: 5mm 0 0; min-width: 0; }
.report-fact + .report-fact { padding-inline-start: 6mm; margin-inline-start: 6mm; border-inline-start: 1px solid rgba(255, 255, 255, .16); }
.report-fact.wide { grid-column: 1 / -1; margin: 5mm 0 0; padding-inline-start: 0; border-inline-start: 0; border-top: 1px solid rgba(255, 255, 255, .16); }
.report-fact dt { font-size: 10.5px; color: rgba(255, 255, 255, .62); margin-bottom: 2px; }
.report-fact dd { margin: 0; font-size: 15.5px; font-weight: 700; color: #FFFFFF; line-height: 1.6; }
.report-fact.wide dd { font-size: 13px; font-weight: 500; }
.report-cover-band { position: absolute; inset-inline: 0; bottom: 0; height: 7mm; background: #C10D0E; }
/* The brand's slanted bar, at the logo's own angle (it rises a third of its width). */
.report-motif { display: inline-block; flex: none; background: #C10D0E; }
.report-cover .report-motif { width: 64px; height: 30px; clip-path: polygon(0 71.7%, 100% 0, 100% 28.3%, 0 100%); }
.report-head { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid #E6E8EC; }
.report-head h2 { margin: 0; font-size: 22px; line-height: 1.5; }
.report-head p { margin: 1px 0 0; font-size: 12px; }
.report-head .report-motif { width: 30px; height: 20px; clip-path: polygon(0 50.4%, 100% 0, 100% 49.6%, 0 100%); }
.report-head .report-motif.numbered { width: 52px; height: 40px; clip-path: polygon(0 43.7%, 100% 0, 100% 56.3%, 0 100%); display: inline-flex; align-items: center; justify-content: center; color: #FFFFFF; font: 700 13px "Inter", sans-serif; letter-spacing: .02em; }
.report-intro { color: #4B5260; font-size: 13px; margin: 0 0 14px !important; }
@media screen { .report-cover + .report-section { margin-top: 14mm; } }
.report-section { break-before: page; page-break-before: always; padding-top: 6px; }
.report-glance { display: flex; flex-direction: column; gap: 8px; }
.report-glance-row { display: grid; grid-template-columns: 44mm 1fr; gap: 12px; padding: 10px 12px; border: 1px solid #E6E8EC; border-radius: 12px; break-inside: avoid; }
.report-glance-test { display: flex; flex-direction: column; gap: 3px; }
.report-glance-row p { margin: 0; }
.report-priorities li { margin: 5px 0; }
.report-legend { display: flex; flex-direction: column; gap: 6px; }
.report-legend-item { display: flex; align-items: center; gap: 8px; }
.report-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.report-sources li { font-size: 11.5px; color: #4B5260; }
.report-disclaimer { margin-top: 18px !important; padding-top: 12px; border-top: 1px solid #E6E8EC; font-size: 11.5px; color: #4B5260; }
/* Pages break between blocks, never inside a small one, and never right after a heading. The
   result card is long: it flows over pages rather than leaving one half empty. */
.report-paper .assess-trend, .report-paper .assess-sym, .report-paper .assess-verdict, .report-paper .assess-light,
.report-paper .assess-plan-item, .report-paper .assess-curve, .report-paper tr, .report-keep { break-inside: avoid; page-break-inside: avoid; }
.report-paper h2, .report-paper h3, .report-paper details > summary, .report-paper .assess-card-head, .report-paper .report-head, .report-paper .assess-plan > b, .report-paper .assess-verdict > b { break-after: avoid; page-break-after: avoid; }
.report-print-root { display: none; }
@media print {
  /* The app is dark (color-scheme in index.html): printed, the page and its margins are paper. */
  html.printing-report { color-scheme: light; background: #FFFFFF !important; }
  body.printing-report { background: #FFFFFF !important; }
  body.printing-report > *:not(.report-print-root) { display: none !important; }
  body.printing-report .report-print-root { display: block; }
  .report-print-root .report-paper { width: auto; padding: 0; margin: 0; box-shadow: none; border-radius: 0; }
  /* The first page has no margin (@page :first): the cover is the whole sheet. */
  .report-print-root .report-cover { margin: 0; height: 297mm; border-radius: 0; }
  /* The plan's box would leave its empty top at the foot of a page when its heading moves on with
     the first item: on paper the heading carries the line and each item its own box. */
  .report-print-root .assess-plan { background: none; border: 0; border-radius: 0; padding: 0; }
  .report-print-root .assess-plan > b { padding-top: 8px; border-top: 2px solid #F2B33D; }
  .report-print-root .assess-plan-item, .report-print-root .assess-plan-next { padding: 8px 10px; border-radius: 8px; background: #FFF8EC; }
  .report-paper, .report-paper * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* --- messages (messages.js, migration 0060) ---------------------------------
 *
 * As the owner approved the mockups (chat-mockup/, 2026-10-06): the list and
 * the open conversation one after the other on a phone, side by side on a
 * wide screen. The reader's own messages sit at the end side in the red of
 * the brand, the other person's at the start side. */

/* The header's bubble beside the bell: two buttons on the end side, the
   start side as wide so the mark stays in the middle. */
.hdr.hdr-2 { grid-template-columns: 80px minmax(0, 1fr) 80px; }
.hdr-2 > .hdr-id { justify-self: start; }
.hdr-starts { display: flex; gap: 8px; justify-self: start; }
.hdr-ends { display: flex; gap: 8px; justify-self: end; }

/* Dark or light (theme.js): the sun to go light, the moon to go dark. */
.hdr-theme > span { display: grid; place-items: center; }
.hdr-theme .theme-to-dark, :root[data-theme="light"] .hdr-theme .theme-to-light { display: none; }
:root[data-theme="light"] .hdr-theme .theme-to-dark { display: grid; }
/* The mark in the look's own colours, on the signed-out screens too (they follow the look since 2026-10-25). */
.atlet-logo.on-light, :root[data-theme="light"] .atlet-logo.on-dark { display: none; }
:root[data-theme="light"] .atlet-logo.on-light { display: block; }
.hdr-bell b[hidden] { display: none; }
.side-badge { margin-inline-start: auto; min-width: 19px; height: 19px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; background: var(--atlet-red); color: #fff; font-size: 10.5px; font-weight: 800; }
.side-badge[hidden] { display: none; }

.msg-layout { display: block; }
.msg-pane { min-width: 0; }
.msg-layout:not(.has-thread) .msg-thread { display: none; }
.msg-layout.has-thread .msg-list { display: none; }

.msg-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 2px 12px; }
.msg-title h2 { margin: 0; font-size: 18px; font-weight: 800; }
.msg-new { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; border: 1px solid rgba(220, 38, 38, .45); background: var(--atlet-red-glow); color: var(--red-text); font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.msg-note { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; padding: 9px 11px; border: 1px dashed var(--atlet-border-strong); border-radius: 12px; color: var(--atlet-text-secondary); font-size: 11.5px; line-height: 1.7; }
.msg-note .icon { margin-top: 3px; color: var(--atlet-text-muted); }

.msg-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 0 10px; border-radius: 12px; background: var(--well); border: 1px solid var(--atlet-border); }
.msg-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 6px; border: 0; border-radius: 9px; background: transparent; color: var(--atlet-text-secondary); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.msg-seg button.on { background: var(--atlet-red-glow); color: var(--red-text); }

.msg-chips { display: flex; gap: 6px; margin: 0 0 10px; }
.msg-chip { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--atlet-border); background: var(--atlet-surface); color: var(--atlet-text-secondary); font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.msg-chip.on { color: var(--red-text); border-color: rgba(220, 38, 38, .45); background: var(--atlet-red-glow); }
.msg-search { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 0 12px; border: 1px solid var(--atlet-border); border-radius: 12px; background: var(--atlet-surface); color: var(--atlet-text-muted); }
.msg-search input { flex: 1; min-width: 0; height: 40px; border: 0; background: transparent; color: var(--atlet-text-primary); font: inherit; font-size: 13px; outline: none; }

.msg-convs { border: 1px solid var(--atlet-border); border-radius: 16px; background: var(--atlet-surface); overflow: hidden; }
.msg-conv { width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 12px 13px; border: 0; border-top: 1px solid var(--atlet-border); background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.msg-conv:first-child { border-top: 0; }
.msg-conv.sel { background: rgba(220, 38, 38, .09); box-shadow: inset 0 0 0 1px rgba(220, 38, 38, .3); }
.msg-ava { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; font-size: 13px; font-weight: 800; color: var(--atlet-text-primary); background: var(--atlet-surface-raised); border: 1px solid var(--atlet-border-strong); }
.msg-ava.small { width: 36px; height: 36px; font-size: 11.5px; }
.msg-ava.mgmt { background: var(--red-float); border-color: rgba(220, 38, 38, .5); color: var(--red-text); }
.msg-conv-mid { min-width: 0; display: block; }
.msg-conv-name { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13.5px; }
.msg-conv-name b { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-conv-name i { font-style: normal; font-size: 9.5px; }
.msg-conv-who { display: block; margin-top: 2px; font-size: 10.5px; color: var(--atlet-text-muted); }
.msg-conv-last { display: block; margin-top: 3px; font-size: 12px; color: var(--atlet-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-conv.unread .msg-conv-last { color: var(--atlet-text-primary); font-weight: 600; }
.msg-conv-end { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.msg-conv-time { font-size: 10.5px; color: var(--atlet-text-muted); white-space: nowrap; }
.msg-count { min-width: 19px; height: 19px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--atlet-red); color: #fff; font-size: 10.5px; font-weight: 800; }

.msg-pick-h { margin: 14px 2px 6px; font-size: 11.5px; font-weight: 800; color: var(--atlet-text-muted); }
.msg-pick { width: 100%; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 10px 4px; border: 0; border-top: 1px solid var(--atlet-border); background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.msg-pick .msg-ava { width: 40px; height: 40px; font-size: 12px; }
.msg-pick b { display: block; font-size: 13.5px; }
.msg-pick i { display: block; margin-top: 2px; font-style: normal; font-size: 11px; color: var(--atlet-text-muted); }
.msg-pick > .icon { color: var(--atlet-text-muted); }
.msg-pick-list { max-height: 55vh; overflow: auto; }

/* The open conversation. */
.msg-thread-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; padding: 10px 12px; border: 1px solid var(--atlet-border); border-radius: 14px; background: var(--atlet-surface); }
.msg-thread-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.msg-thread-who b { display: block; font-size: 14px; font-weight: 800; }
.msg-thread-who span { display: block; margin-top: 1px; font-size: 10.5px; color: var(--atlet-text-muted); }
.msg-messages { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px 12px; }
.msg-day { align-self: center; margin: 8px 0 4px; padding: 3px 11px; border-radius: 999px; background: var(--atlet-surface); border: 1px solid var(--atlet-border); font-size: 10.5px; color: var(--atlet-text-secondary); }
.msg-older { align-self: center; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--atlet-border-strong); background: var(--atlet-surface); color: var(--atlet-text-secondary); font: inherit; font-size: 11.5px; cursor: pointer; }
.msg-bub { max-width: 80%; padding: 8px 12px 6px; border-radius: 16px; border: 1px solid var(--atlet-border); font-size: 13.5px; line-height: 1.85; }
.msg-bub.them { align-self: flex-start; background: var(--atlet-surface-raised); border-start-start-radius: 6px; }
.msg-bub.me { align-self: flex-end; background: rgba(120, 22, 22, .55); border-color: rgba(220, 38, 38, .35); border-start-end-radius: 6px; }
.msg-bub.editable { cursor: pointer; }
.msg-who { display: block; font-size: 11px; font-weight: 800; color: var(--red-text); }
.msg-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-meta { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-top: 2px; font-size: 10px; color: var(--atlet-text-muted); }
.msg-bub.me .msg-meta { color: var(--atlet-text-secondary); }
.msg-meta i { font-style: italic; }
.msg-seen { display: inline-flex; align-items: center; gap: 3px; }
.msg-seen.on { color: var(--info); }
.msg-seen .icon { width: 13px; height: 13px; }
.msg-pick-one { display: grid; place-items: center; gap: 8px; padding: 60px 10px; color: var(--atlet-text-muted); font-size: 13px; }
.msg-pick-one .icon { width: 30px; height: 30px; }

.msg-composer { position: fixed; inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 5; max-width: 536px; margin: 0 auto; padding: 8px; border: 1px solid var(--atlet-border); border-radius: 18px; background: var(--atlet-surface); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
/* The box takes the row, whatever stands beside it (the paperclip came in front of it, 2026-10-10, and a grid of two
   columns left the box 44 px wide -- the owner, 2026-10-13: "I have to click just there to write"). */
.msg-composer-row { display: flex; gap: 8px; align-items: flex-end; }
.msg-composer-box { flex: 1 1 auto; min-width: 0; }
.msg-composer-row > .msg-send, .msg-composer-row > .msg-attach { flex: 0 0 auto; }
.msg-input { display: block; width: 100%; min-height: 44px; max-height: 160px; resize: none; padding: 10px 12px; border-radius: 13px; border: 1px solid var(--atlet-border-strong); background: var(--well); color: var(--atlet-text-primary); font: inherit; font-size: 14px; line-height: 1.7; }
.msg-input:focus { outline: none; border-color: rgba(220, 38, 38, .6); }
.msg-input.msg-edit { min-height: 110px; margin-bottom: 10px; }
.msg-counter { display: block; margin-top: 2px; text-align: end; font-size: 9.5px; color: var(--atlet-text-muted); }
.msg-send { width: 44px; height: 44px; border-radius: 13px; border: 0; display: grid; place-items: center; background: var(--atlet-red); color: #fff; cursor: pointer; }
.msg-send:disabled { background: var(--red-dim); color: var(--atlet-text-secondary); cursor: default; }
[dir="rtl"] .msg-send .icon { transform: scaleX(-1); }
.msg-send .icon { width: 20px; height: 20px; }
.msg-send-failure:empty { display: none; }
.msg-readonly { display: flex; align-items: center; gap: 9px; margin: 6px 0 0; padding: 12px 14px; border: 1px dashed var(--atlet-border-strong); border-radius: 14px; background: var(--atlet-surface); color: var(--atlet-text-secondary); font-size: 12px; }
.msg-readonly .icon { color: var(--warn); flex: 0 0 auto; }

.msg-action { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 4px; border: 0; border-top: 1px solid var(--atlet-border); background: transparent; color: inherit; font: inherit; font-size: 13.5px; text-align: start; cursor: pointer; }
.msg-action:first-child { border-top: 0; }
.msg-action small { display: block; font-size: 10.5px; color: var(--atlet-text-muted); }

/* A message waiting, on the athlete's home. */
.msg-home { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 11px; align-items: center; margin: 0 0 14px; padding: 12px 13px; border-radius: 16px; border: 1px solid rgba(220, 38, 38, .45); background: rgba(80, 14, 14, .55); }
.msg-home[hidden] { display: none; }
.msg-home-mid { min-width: 0; }
.msg-home-mid small { display: block; font-size: 10.5px; font-weight: 800; color: var(--red-text); }
.msg-home-mid b { display: block; font-size: 13.5px; margin-top: 1px; }
.msg-home-last { display: block; margin-top: 2px; font-size: 12px; color: var(--atlet-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-home-go { padding: 7px 12px; border: 0; border-radius: 10px; background: var(--atlet-red); color: #fff; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }

@media (max-width: 999.98px) {
  /* A conversation open on a phone: its composer takes the bottom bar's place. */
  .app:has(.msg-layout.has-thread) .nav { display: none; }
  .msg-layout.has-thread .msg-messages { padding-bottom: 110px; }
}

@media (min-width: 1000px) {
  .hdr-msg { display: none; }
  .msg-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; }
  .msg-layout:not(.has-thread) .msg-thread,
  .msg-layout.has-thread .msg-list { display: block; }
  .msg-pane { height: calc(100vh - 120px); border: 1px solid var(--atlet-border); border-radius: 18px; background: var(--atlet-surface); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .msg-list { padding: 12px; overflow: auto; }
  .msg-list .msg-convs { border: 0; background: transparent; border-radius: 0; }
  .msg-list .msg-conv { border-top: 0; border-radius: 12px; padding: 11px 8px; }
  .msg-thread { display: flex; flex-direction: column; overflow: hidden; }
  .msg-layout.has-thread .msg-thread, .msg-layout:not(.has-thread) .msg-thread { display: flex; }
  .msg-thread-top { margin: 0; border: 0; border-bottom: 1px solid var(--atlet-border); border-radius: 0; background: transparent; padding: 12px 16px; }
  .msg-thread .msg-messages { flex: 1; overflow: auto; padding: 14px 18px; }
  .msg-thread .msg-bub { max-width: 62%; }
  .msg-composer { position: static; max-width: none; margin: 0 14px 14px; }
  .msg-thread .msg-readonly { margin: 0 14px 14px; }
}

/* The sidebar folded to its icons, as TrueCoach's (the default; its button opens it). */
.side-symbol { display: none; width: 30px; height: auto; }
/* The mark is the way home, in the header and the sidebar (as TrueCoach's logo is). */
.hdr-home, .side-home { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.side-home { display: flex; align-items: center; min-width: 0; }
.hdr-home:focus-visible, .side-home:focus-visible { outline: 2px solid var(--atlet-red); outline-offset: 4px; border-radius: 10px; }
.side-fold { flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; margin-inline-start: auto; padding: 0; border: 1px solid var(--atlet-border); border-radius: 9px; background: transparent; color: var(--atlet-text-secondary); cursor: pointer; }
.side-fold:hover { color: var(--atlet-text-primary); border-color: var(--atlet-border-strong); }
.side-fold .icon { font-size: 16px; }
.app.side-folded .side-fold .icon { transform: rotate(180deg); }
[dir="rtl"] .side-fold .icon { transform: rotate(180deg); }
[dir="rtl"] .app.side-folded .side-fold .icon { transform: none; }
@media (min-width: 1000px) {
  .app.side-folded { grid-template-columns: 72px minmax(0, 1fr); }
  .app.side-folded .side { align-items: center; padding: 14px 8px; }
  .app.side-folded .side-brand { flex-direction: column; gap: 12px; padding: 2px 0 16px; }
  .app.side-folded .side-brand .atlet-lockup { display: none; }
  .app.side-folded .side-symbol { display: block; }
  .app.side-folded .side-fold { margin: 0; }
  .app.side-folded .side-tabs { align-items: center; }
  .app.side-folded .side-tab { position: relative; justify-content: center; width: 48px; padding: 11px 0; }
  .app.side-folded .side-tab > span { display: none; }
  .app.side-folded .side-badge { position: absolute; top: 3px; inset-inline-end: 2px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 9.5px; }
  .app.side-folded .side-me { justify-content: center; padding: 12px 0 0; }
  .app.side-folded .side-me > div:last-child { display: none; }
}

/* The athlete's page, as TrueCoach's client page: a column of the athlete
   beside the calendar -- folded to icons, or opened -- and a section open
   beside it when asked for; each scrolls on its own, the page never. */
.ath-page { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; min-height: 360px; }
.ath-page.with-drawer { grid-template-columns: auto minmax(0, 420px) minmax(0, 1fr); }
.ath-page.with-drawer.drawer-wide { grid-template-columns: auto minmax(0, 1fr); }
.ath-drawer-head strong { margin-inline-end: auto; }
.ath-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; }
.ath-main .cal-scroll { flex: 1 1 auto; min-height: 0; }
.ath-rail { display: flex; flex-direction: column; gap: 4px; width: 58px; height: 100%; overflow-x: hidden; overflow-y: auto; padding: 8px 6px; border: 1px solid var(--atlet-border); border-radius: 16px; background: var(--atlet-surface); }
.ath-rail.open { width: 236px; padding: 10px; }
.rail-who { display: flex; align-items: center; gap: 10px; padding: 3px; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.rail-who:hover { background: var(--veil-1); }
.ath-rail:not(.open) .rail-who { justify-content: center; }
.rail-name { display: none; min-width: 0; }
.ath-rail.open .rail-name { display: flex; flex-direction: column; gap: 2px; }
.rail-name strong { font-size: 14px; overflow-wrap: anywhere; }
.rail-name .muted { font-size: 11.5px; }
.rail-facts { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; }
.rail-facts .ath-stat { min-width: 0; padding: 6px 10px; }
.rail-facts .ath-stat b { font-size: 14px; }
.rail-group { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; margin-top: 2px; border-top: 1px solid var(--atlet-border); }
.rail-item { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 11px; border: 0; border-radius: 11px; background: transparent; color: var(--atlet-text-secondary); font: inherit; font-size: 13px; font-weight: 700; text-align: start; white-space: nowrap; cursor: pointer; }
.rail-item .icon { flex: 0 0 auto; font-size: 18px; }
.rail-item > span { display: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ath-rail.open .rail-item > span { display: inline; }
.ath-rail:not(.open) .rail-item { justify-content: center; padding: 0; }
.rail-item:hover { background: var(--veil-1); color: var(--atlet-text-primary); }
.rail-item.on { background: var(--focus-bg); color: var(--focus); }
.rail-item.go { background: var(--atlet-red); color: #FFFFFF; }
.rail-item.go:hover { background: #D4191A; color: #FFFFFF; }
.rail-toggle { flex: 0 0 auto; align-self: center; width: 34px; height: 34px; display: grid; place-items: center; margin-top: auto; padding: 0; border: 1px solid var(--atlet-border); border-radius: 50%; background: transparent; color: var(--atlet-text-secondary); cursor: pointer; }
.rail-toggle:hover { color: var(--atlet-text-primary); border-color: var(--atlet-border-strong); }
.ath-rail.open .rail-toggle { align-self: flex-end; }
.rail-toggle .icon { transform: rotate(180deg); }
.ath-rail.open .rail-toggle .icon { transform: none; }
[dir="rtl"] .rail-toggle .icon { transform: none; }
[dir="rtl"] .ath-rail.open .rail-toggle .icon { transform: rotate(180deg); }
.ath-drawer { display: flex; flex-direction: column; min-width: 0; height: 100%; overflow: hidden; border: 1px solid var(--atlet-border); border-radius: 16px; background: var(--atlet-surface); }
.ath-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 10px 14px; border-bottom: 1px solid var(--atlet-border); }
.ath-drawer-head strong { font-size: 15px; }
.ath-drawer-close, .ath-drawer-wide { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--atlet-text-secondary); cursor: pointer; }
.ath-drawer-close:hover, .ath-drawer-wide:hover { background: var(--veil-2); color: var(--atlet-text-primary); }
.ath-drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px; }
/* On a phone the column of icons stays at the side, as TrueCoach's; opened,
   it -- and a section -- come over the calendar. */
@media (max-width: 979px) {
  .ath-page, .ath-page.with-drawer { position: relative; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
  .ath-rail { width: 48px; padding: 6px 4px; }
  .ath-rail.open { position: absolute; z-index: 9; inset-block: 0; inset-inline-start: 0; width: min(280px, 84vw); padding: 10px; background: var(--atlet-bg); box-shadow: 0 18px 44px var(--shadow); }
  .ath-drawer { position: absolute; z-index: 8; inset-block: 0; inset-inline: 56px 0; background: var(--atlet-bg); box-shadow: 0 18px 44px var(--shadow); }
  /* Covering the calendar already: nothing to widen. */
  .ath-drawer-wide { display: none; }
}

/* The "A" beside the calendar (TrueCoach's): the writing on the days a step larger, twice, then back. */
.cal-text-size { min-width: 38px; justify-content: center; font-family: "Inter", system-ui, sans-serif; font-weight: 800; }
.cal-text-size.size-0 span { font-size: 13px; }
.cal-text-size.size-1 span { font-size: 15.5px; }
.cal-text-size.size-2 span { font-size: 18px; }
.cal-text-size:not(.size-0) { border-color: rgba(220, 38, 38, .55); color: var(--red-text); }
.training[data-text-size="1"] .cal { zoom: 1.15; }
.training[data-text-size="2"] .cal { zoom: 1.3; }

/* The athlete's panel opened, as TrueCoach's: the program's end, the last
   weight, the sessions done, and the share done over 7, 30 and 90 days. */
.rail-due { align-self: flex-start; margin-top: 4px; padding: 2px 8px; border-radius: 999px; background: var(--veil-2); font-size: 11px; font-weight: 700; color: var(--atlet-text-secondary); }
.rail-due.red { background: rgba(220, 38, 38, .85); color: #FFFFFF; }
.rail-facts { gap: 4px; }
.rail-line { display: flex; align-items: flex-start; gap: 8px; padding: 4px 2px; font-size: 12.5px; color: var(--atlet-text-primary); }
.rail-line > .icon { flex: 0 0 auto; margin-top: 2px; font-size: 16px; color: var(--atlet-text-secondary); }
.rail-line.muted { color: var(--atlet-text-muted); }
.rail-line-body { display: flex; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.rail-pct { font-weight: 600; }
.rail-pct.ok { color: var(--atlet-ok); }
.rail-pct.warn { color: var(--warn); }
.rail-pct.red { color: var(--red-text); }
.rail-pct.dim { color: var(--atlet-text-muted); }
.ath-stat-mon { display: inline-flex; align-items: center; gap: 6px; }
.rail-item.rail-chat { color: var(--atlet-text-primary); }

/* The calendar's tools beside Today: export, the keys, the settings. */
.cal-tool { width: 34px; padding: 0; justify-content: center; }
.cal-tool .icon { font-size: 17px; }
@media (hover: none) { .cal-keys { display: none; } }
.cal-day.focused { outline: 2px solid rgba(220, 38, 38, .8); outline-offset: 1px; }
.cal-setting { display: flex; align-items: center; gap: 10px; padding: 10px 2px; font-size: 14px; cursor: pointer; }
.cal-setting input { width: 18px; height: 18px; accent-color: var(--atlet-red); }

/* The list of keys, as TrueCoach's: each action beside its keys. */
.key-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 760px) { .key-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.key-group h3 { margin: 0 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--atlet-border); font-size: 14px; }
.key-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 13px; }
.keys { display: inline-flex; align-items: center; gap: 4px; direction: ltr; }
.keys i { font-style: normal; color: var(--atlet-text-muted); font-size: 11px; }
.keys kbd { min-width: 22px; padding: 2px 7px; border: 1px solid var(--atlet-border-strong); border-bottom-width: 2px; border-radius: 6px; background: var(--veil-2); font-family: "Inter", system-ui, sans-serif; font-size: 11.5px; font-weight: 700; text-align: center; color: var(--atlet-text-primary); }

/* The activity feed and the search, in the section beside the calendar. */
.feed-note { margin: 4px 0 0; font-size: 12px; line-height: 1.6; color: var(--atlet-text-secondary); }
.athlete-search { margin-bottom: 10px; }
.search-results { display: flex; flex-direction: column; gap: 6px; }
.search-results > strong { margin-top: 8px; font-size: 12.5px; color: var(--atlet-text-secondary); }

/* The chat with the athlete, over the calendar at the foot of the screen, as TrueCoach's. */
.chat-float { position: fixed; z-index: 40; bottom: 22px; inset-inline-end: 22px; width: min(360px, calc(100vw - 24px)); height: min(480px, calc(100vh - 140px)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--atlet-border-strong); border-radius: 16px; background: var(--atlet-bg); box-shadow: 0 22px 50px var(--shadow); }
.chat-float[hidden] { display: none; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--atlet-border); }
.chat-head b { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-close { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--atlet-text-secondary); cursor: pointer; }
.chat-close:hover { background: var(--veil-2); color: var(--atlet-text-primary); }
.chat-messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.chat-bub { max-width: 82%; padding: 7px 10px; border-radius: 12px; background: var(--atlet-surface-raised); }
.chat-bub p { margin: 0; font-size: 13px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-bub.me { align-self: flex-end; background: rgba(220, 38, 38, .22); }
.chat-bub.them { align-self: flex-start; }
.chat-time { display: block; margin-top: 2px; font-size: 10.5px; color: var(--atlet-text-muted); }
.chat-compose { display: flex; align-items: flex-end; gap: 8px; padding: 10px; border-top: 1px solid var(--atlet-border); }
.chat-input { flex: 1; min-height: 40px; max-height: 120px; resize: none; }
.chat-send { width: 40px; height: 40px; padding: 0; justify-content: center; }
@media (max-width: 999px) {
  .chat-float { inset-inline: 8px; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); width: auto; height: min(460px, calc(100vh - 200px)); }
}

/* What the athletes see of their program and may change (client-settings.js, migration 0067). */
.client-settings .client-intro { margin: 2px 2px 10px; }
.client-settings .panel { display: grid; gap: 12px; }
.client-tick { align-items: flex-start; gap: 10px; padding: 2px 0; cursor: pointer; }
.client-tick input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; }
.client-tick-text { display: grid; gap: 2px; min-width: 0; }
.client-tick-text b { color: var(--atlet-text-primary); font-weight: 600; }
.client-tick-text i { font-style: normal; font-size: 13px; color: var(--atlet-text-secondary); }
.client-settings .field.is-off { opacity: 0.45; }
.client-settings .client-summary { margin: 4px 2px 12px; color: var(--atlet-text-primary); }
.training-head .session-move { display: inline-flex; align-items: center; gap: 6px; }
.training-head .session-move svg { width: 16px; height: 16px; }

/* An athlete's plans, the skeleton of their training (training.js plansBody, migration 0068). */
.cal-day-focus { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; }
.cal-focus-tag { display: inline-block; max-width: 100%; padding: 1px 7px; border-radius: 999px; font-size: 11px; line-height: 1.6; color: var(--atlet-text-primary); background: color-mix(in srgb, #A78BFA 18%, transparent); border: 1px solid color-mix(in srgb, #A78BFA 45%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-card { display: grid; gap: 8px; }
.plan-card.plan-past { opacity: .7; }
.plan-week { display: grid; gap: 4px; }
.plan-day { display: grid; grid-template-columns: 4.5em 1fr; align-items: center; gap: 8px; }
.plan-day-name { color: var(--atlet-text-secondary); font-size: 13px; }
.plan-day-tags { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.plan-day.empty .plan-day-name { opacity: .6; }
.plan-seen { margin: 0; }
.plan-form-week { display: grid; gap: 6px; }
.plan-form-day { display: grid; grid-template-columns: 6em 1fr; align-items: center; gap: 8px; }
.plan-form-day span { color: var(--atlet-text-secondary); font-size: 13px; }
.plan-form-day input { min-width: 0; }
/* The athlete's week: what each day is for, and the plan it comes from. */
.my-plan { display: grid; gap: 4px; }
.my-plan .wo-cue { margin: 0; }
.day-focus { display: flex; flex-wrap: wrap; gap: 4px; flex-basis: 100%; }

/* Progress pictures (training.js photoDayRow, migration 0070). */
.photo-day { display: grid; gap: 6px; margin: 6px 0 10px; }
.photo-day-head { font-size: 13px; font-weight: 700; color: var(--atlet-text-secondary); }
.photo-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.photo-thumb { position: relative; display: block; padding: 0; border: 1px solid var(--atlet-border-strong, var(--veil-line)); border-radius: 10px; overflow: hidden; background: var(--veil-1); aspect-ratio: 3 / 4; cursor: pointer; }
.photo-thumb.empty { display: grid; place-items: center; color: var(--atlet-text-muted); cursor: default; }
.photo-thumb .photo-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-thumb .photo-pose { position: absolute; inset-inline-start: 6px; bottom: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; color: #fff; background: var(--scrim); }
.photo-img.loading { opacity: .3; }
.photo-img.failed { opacity: .15; }
.photo-full { width: 100%; max-height: 70vh; object-fit: contain; border-radius: 10px; background: #000; }
.photo-file { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px dashed var(--atlet-border-strong, var(--veil-line)); border-radius: 10px; cursor: pointer; color: var(--atlet-text-primary); }
.photo-file input { max-width: 100%; font-size: 13px; }
.photo-preview img { max-width: 160px; border-radius: 8px; margin-top: 6px; }
.photo-compare { display: grid; gap: 10px; }
.photo-pair { display: grid; gap: 4px; }
.photo-pair .photo-pose { font-size: 12.5px; color: var(--atlet-text-secondary); }
.photo-pair-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.photo-privacy { margin-top: 4px; }

/* The library's files for the athletes (training.js documentLine, migration 0071). */
.doc-line { display: flex; align-items: center; gap: 8px; }
.doc-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.doc-open svg { width: 22px; height: 22px; flex: none; color: var(--atlet-red); }
.my-documents { display: grid; gap: 8px; }

/* A circuit as TrueCoach's (the owner, 2026-10-10): a box of the coach's own lines, its demo videos under them. */
/* No video column: the letter, the box, its menu. */
.ed-card.ed-circuit { grid-template-columns: 32px minmax(0, 1fr) auto; }
.ed-card.ed-circuit > .sv-circuit { grid-column: 1 / -1; }
@media (max-width: 720px) {
  .ed-card.ed-circuit { grid-template-columns: 30px minmax(0, 1fr) auto; }
}
.ed-circuit .ed-body { display: grid; gap: 8px; min-width: 0; }
.ed-circuit-title { width: 100%; font-weight: 600; font-size: 15px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--atlet-border-strong, var(--veil-line)); background: transparent; color: var(--atlet-text-primary); }
.ed-circuit-title.missing { border-color: var(--red-text); }
.ed-circuit-text { width: 100%; min-height: 96px; line-height: 1.7; resize: vertical; }
.sv-circuit-lines { display: grid; gap: 2px; margin: 4px 0 6px; }
.sv-circuit-line, .wo-circuit-line { white-space: pre-wrap; margin: 0; }
.sv-video-none { opacity: .75; }
.circuit-result-label { display: block; margin-top: 8px; font-size: 13px; color: var(--atlet-text-secondary); }
.circuit-result { width: 100%; margin-top: 4px; }
/* TrueCoach's "Link result to metric": on the coach's card, in the picker, and on the athlete's phone. */
.ed-metric { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; max-width: 100%; margin-top: 6px; padding: 4px 10px; border: 1px dashed var(--atlet-border-strong); border-radius: 999px; background: transparent; color: var(--atlet-text-secondary); font: inherit; font-size: 12px; cursor: pointer; }
.ed-metric span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-metric .icon { flex: none; font-size: 14px; }
.ed-metric:hover { color: var(--atlet-text-primary); border-color: var(--focus); }
.ed-metric.on { border-style: solid; border-color: transparent; background: var(--focus-bg); color: var(--focus); }
.metric-link-search { display: block; width: 100%; padding: 9px 12px; border: 1px solid var(--atlet-border); border-radius: 10px; background: var(--well); color: var(--atlet-text-primary); font: inherit; font-size: 14px; }
.metric-link-list { display: flex; flex-direction: column; gap: 4px; max-height: 46vh; overflow-y: auto; margin: 10px 0; }
.metric-link-list .pick { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: start; }
.metric-link-list .pick small { color: var(--atlet-text-muted); }
.metric-link-group { margin: 8px 2px 2px; color: var(--atlet-text-muted); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; }
.metric-link-hint { display: flex; align-items: flex-start; gap: 6px; }
.metric-link-1rm { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; padding: 10px 12px; border: 1px solid var(--atlet-border); border-radius: 12px; }
.metric-link-1rm input { margin-top: 3px; flex: none; }
.metric-link-1rm span { display: flex; flex-direction: column; gap: 3px; }
.metric-link-1rm b { font-size: 13.5px; font-weight: 600; }
.metric-link-1rm small { font-size: 12px; line-height: 1.6; }
.metric-link-hint .icon { flex: none; margin-top: 2px; }
.metric-field { display: grid; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--atlet-border); }
.metric-field-label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--atlet-text-secondary); }
.metric-field-label .icon { color: var(--focus); }
.metric-field-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.metric-field-row .set-input { max-width: 140px; }
.metric-field-last { margin-inline-start: auto; }
.finish-metrics { display: grid; gap: 8px; margin: 12px 0; }
.finish-metric-name { display: flex; align-items: center; gap: 6px; flex: 1 1 140px; min-width: 0; font-size: 13px; }
.wo-metric-value { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--focus-bg); color: var(--focus); font-size: 12px; }

/* A file's own name read in its own direction (documentLine). */
.doc-file-name { unicode-bidi: isolate; }
/* The two days compared fit a phone's narrow drawer. */
.photo-compare .field select { font-size: 13px; padding-inline: 8px; min-width: 0; }


/* ---------------------------------------------------------------------------
 * The app's guide (guide.js): a step's hole in a dimmed page and its card,
 * the welcome and the guide's list as a sheet (a window on a wide screen),
 * a stage's toast and the pill it waits in. Above the sheets.
 * ------------------------------------------------------------------------- */
.guide-layer { position: fixed; inset: 0; z-index: 95; pointer-events: none; }
.guide-dim { position: absolute; inset: 0; background: var(--scrim); pointer-events: auto; }
.guide-block { position: absolute; pointer-events: auto; }
.guide-block.all { inset: 0; }
.guide-spot {
  position: absolute; border-radius: 16px; pointer-events: none;
  box-shadow: 0 0 0 9999px var(--scrim), 0 0 0 2px var(--atlet-red), 0 0 0 9px rgba(220, 38, 38, .2);
  transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease;
}
.guide-spot.pulse::after {
  content: ''; position: absolute; inset: -10px; border-radius: 22px;
  border: 2px solid rgba(220, 38, 38, .45); animation: guide-pulse 1.6s ease-out infinite;
}
@keyframes guide-pulse { from { opacity: 1; transform: scale(.96); } to { opacity: 0; transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .guide-spot { transition: none; } .guide-spot.pulse::after { animation: none; } }

.guide-card {
  position: absolute; width: min(360px, calc(100vw - 24px)); box-sizing: border-box; pointer-events: auto;
  background: var(--atlet-surface);
  border: 1px solid var(--atlet-border-strong); border-radius: 20px; padding: 16px 16px 14px;
  box-shadow: 0 24px 60px var(--shadow); color: var(--atlet-text-primary);
}
.guide-arrow { position: absolute; width: 14px; height: 14px; background: var(--atlet-surface); border: 1px solid var(--atlet-border-strong); transform: rotate(45deg); }
.guide-arrow.down { bottom: -8px; border-top: 0; border-left: 0; }
.guide-arrow.up { top: -8px; border-bottom: 0; border-right: 0; background: var(--atlet-surface); }
.guide-arrow.at-right { right: -8px; border-bottom: 0; border-left: 0; }
.guide-arrow.at-left { left: -8px; border-top: 0; border-right: 0; }
.guide-arrow.none { display: none; }

.guide-top { display: flex; align-items: center; gap: 10px; }
.guide-eyebrow { font-size: 11.5px; font-weight: 800; color: var(--red-text); }
.guide-count { font-size: 11.5px; color: var(--atlet-text-muted); margin-inline-start: auto; white-space: nowrap; }
.guide-eyebrow + .guide-x, .guide-big + .guide-x { margin-inline-start: auto; }
.guide-x {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; cursor: pointer;
  border: 1px solid var(--atlet-border); background: transparent; color: var(--atlet-text-secondary); padding: 0;
}
.guide-x .icon { width: 15px; height: 15px; }
.guide-title { font-size: 17px; font-weight: 800; margin: 10px 0 6px; line-height: 1.5; }
.guide-body { font-size: 13.5px; line-height: 1.9; color: var(--atlet-text-secondary); margin: 0; }
.guide-body b, .guide-lead b, .guide-tip b { color: var(--atlet-text-primary); font-weight: 700; }
.guide-tip {
  display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding: 9px 11px; border-radius: 12px;
  background: rgba(220, 38, 38, .08); border: 1px dashed rgba(220, 38, 38, .35); font-size: 12.5px; line-height: 1.8; color: var(--red-text);
}
.guide-tip .icon { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--red-text); }
.guide-dots { display: flex; gap: 5px; margin-top: 14px; }
.guide-dot { width: 6px; height: 6px; border-radius: 3px; background: var(--atlet-border-strong); }
.guide-dot.on { width: 18px; background: var(--atlet-red); }
.guide-dot.done { background: var(--red-dim); }
.guide-actions { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.guide-btn {
  height: 40px; padding: 0 16px; border-radius: 12px; font: inherit; font-weight: 800; font-size: 13.5px; cursor: pointer;
  border: 1px solid var(--atlet-border-strong); background: transparent; color: var(--atlet-text-primary);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
}
.guide-btn .icon { width: 16px; height: 16px; }
.guide-btn.primary { background: var(--atlet-red); border-color: var(--atlet-red); color: #fff; }
.guide-btn.ok { background: rgba(24, 197, 134, .12); border-color: rgba(24, 197, 134, .45); color: var(--ok-text); }
.guide-skip {
  margin-inline-start: auto; background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; cursor: pointer;
  color: var(--atlet-text-muted); text-decoration: underline; text-underline-offset: 5px; white-space: nowrap;
}
.guide-end { text-align: center; }
.guide-end .guide-actions { justify-content: center; }
.guide-end-mark { width: 52px; height: 52px; margin: 4px auto 0; border-radius: 16px; display: grid; place-items: center; background: rgba(24, 197, 134, .14); color: var(--ok-text); }
.guide-end-mark .icon { width: 26px; height: 26px; }

.guide-sheet {
  position: absolute; inset-inline: 0; bottom: 0; pointer-events: auto; box-sizing: border-box; max-height: 92vh; overflow-y: auto;
  background: var(--atlet-surface); border: 1px solid var(--atlet-border-strong); border-bottom: 0; color: var(--atlet-text-primary);
  border-radius: 26px 26px 0 0; padding: 10px 20px calc(22px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -24px 60px var(--shadow);
}
.guide-sheet.center {
  inset-inline: auto; bottom: auto; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 540px; border-radius: 24px; border-bottom: 1px solid var(--atlet-border-strong); padding: 22px 26px 24px;
}
.guide-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--atlet-border-strong); margin: 0 auto 16px; }
.guide-hero { display: flex; align-items: center; gap: 14px; }
.guide-mark {
  width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; flex: none;
  background: radial-gradient(circle at 30% 20%, rgba(220, 38, 38, .35), rgba(220, 38, 38, .08)); border: 1px solid rgba(220, 38, 38, .4);
}
.guide-mark img { width: 30px; height: 30px; }
.guide-hello { font-size: 12.5px; color: var(--atlet-text-muted); }
.guide-big { font-size: 20px; font-weight: 900; line-height: 1.45; }
.guide-lead { font-size: 13.5px; line-height: 1.95; color: var(--atlet-text-secondary); margin: 14px 0 0; }
.guide-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.guide-stages.many { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.guide-stage {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px 10px; border-radius: 14px;
  border: 1px solid var(--atlet-border); background: var(--atlet-surface); font-size: 12px; font-weight: 700; text-align: center;
}
.guide-stage em { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--atlet-red-glow); color: var(--red-text); font-style: normal; }
.guide-stage em .icon { width: 17px; height: 17px; }
.guide-meta { display: flex; gap: 14px; margin-top: 14px; font-size: 12px; color: var(--atlet-text-muted); }
.guide-meta span { display: inline-flex; align-items: center; gap: 5px; }
.guide-meta .icon { width: 14px; height: 14px; }
.guide-cta { display: grid; gap: 8px; margin-top: 18px; }
.guide-cta > .guide-btn { height: 50px; font-size: 15px; border-radius: 14px; }
.guide-cta .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.guide-cta .row .guide-btn { height: 44px; }
.guide-note { font-size: 11.5px; color: var(--atlet-text-muted); text-align: center; margin: 10px 0 0; line-height: 1.8; }

.guide-progress { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.guide-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--atlet-border); overflow: hidden; }
.guide-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #DC2626, #FF6B6B); }
.guide-progress b { font-size: 12.5px; color: var(--atlet-text-secondary); white-space: nowrap; }
.guide-rows { display: grid; gap: 8px; margin-top: 14px; }
.guide-row {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px; width: 100%; cursor: pointer;
  border: 1px solid var(--atlet-border); background: var(--atlet-surface); color: inherit; font: inherit; text-align: start;
}
.guide-row em {
  width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; font-style: normal;
  background: var(--atlet-surface-raised); color: var(--atlet-text-secondary); border: 1px solid var(--atlet-border);
}
.guide-row em .icon { width: 18px; height: 18px; }
.guide-row div { flex: 1; min-width: 0; }
.guide-row b { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.guide-row small { display: block; font-size: 11.5px; color: var(--atlet-text-muted); margin-top: 2px; line-height: 1.6; }
.guide-new { font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 999px; color: var(--red-text); border: 1px solid rgba(220, 38, 38, .5); }
.guide-state { font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: 999px; white-space: nowrap; display: inline-flex; gap: 4px; align-items: center; }
.guide-state .icon { width: 13px; height: 13px; }
.guide-state.done { background: rgba(24, 197, 134, .12); color: var(--ok-text); }
.guide-state.skipped { background: var(--atlet-surface-raised); color: var(--atlet-text-muted); border: 1px solid var(--atlet-border); }
.guide-state.todo { background: var(--atlet-red-glow); color: var(--red-text); }
.guide-row.next { border-color: rgba(220, 38, 38, .55); background: linear-gradient(90deg, rgba(220, 38, 38, .1), transparent); }
.guide-row.next em { color: var(--red-text); border-color: rgba(220, 38, 38, .4); background: var(--atlet-red-glow); }
.guide-row.done em { color: var(--ok-text); }

.guide-toast {
  position: fixed; inset-inline: 16px; bottom: calc(104px + env(safe-area-inset-bottom, 0px)); z-index: 95; box-sizing: border-box;
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; color: var(--atlet-text-primary);
  background: var(--ok-float); border: 1px solid rgba(24, 197, 134, .45); box-shadow: 0 18px 40px var(--shadow);
}
.guide-toast em { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: rgba(24, 197, 134, .16); color: var(--ok-text); flex: none; }
.guide-toast em .icon { width: 18px; height: 18px; }
.guide-toast div { flex: 1; min-width: 0; }
.guide-toast b { display: block; font-size: 13.5px; }
.guide-toast small { display: block; font-size: 11.5px; color: var(--ok-text); margin-top: 2px; }
.guide-toast .guide-btn { height: 36px; padding: 0 14px; }

.guide-pill {
  position: fixed; inset-inline-start: 16px; bottom: calc(100px + env(safe-area-inset-bottom, 0px)); z-index: 30; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 8px; border-radius: 999px; font: inherit;
  background: var(--atlet-surface); border: 1px solid rgba(220, 38, 38, .5); box-shadow: 0 10px 30px var(--shadow);
  font-size: 12.5px; font-weight: 800; color: var(--atlet-text-primary);
}
[dir="rtl"].guide-pill { padding: 0 8px 0 14px; inset-inline-start: auto; left: auto; right: 16px; }
[dir="ltr"].guide-pill { inset-inline-start: auto; right: auto; left: 16px; }
.guide-ring { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#DC2626 var(--p), var(--atlet-border-strong) 0); }
.guide-ring::before { content: ''; width: 18px; height: 18px; border-radius: 50%; background: var(--atlet-surface); grid-area: 1 / 1; }
.guide-ring .icon { width: 12px; height: 12px; grid-area: 1 / 1; color: var(--red-text); z-index: 1; }
@media (min-width: 900px) {
  .guide-pill { bottom: 24px; }
  [dir="rtl"].guide-pill { right: auto; left: 24px; }
  [dir="ltr"].guide-pill { left: auto; right: 24px; }
  .guide-toast { inset-inline: auto; inset-inline-end: 24px; bottom: 24px; width: 440px; }
}

/* --- videos and photos sent (media-ui.js, migration 0073) ------------------- */

.media-tile {
  position: relative; display: block; width: 168px; max-width: 100%; aspect-ratio: 16 / 10; padding: 0; margin: 6px 0 2px;
  border: 1px solid var(--atlet-border); border-radius: 12px; overflow: hidden; cursor: pointer;
  background: linear-gradient(135deg, var(--atlet-border-strong), var(--atlet-surface-raised)) center / cover no-repeat;
}
.media-tile.media-video { aspect-ratio: 3 / 4; width: 132px; }
.media-tile.has-still { background-size: cover; background-position: center; }
.media-play {
  position: absolute; inset: 0; margin: auto; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: var(--scrim); color: #fff;
}
.media-play .icon { width: 18px; height: 18px; fill: currentColor; }
.media-length {
  position: absolute; inset-inline-end: 6px; bottom: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 11px; color: #fff; background: var(--scrim); direction: ltr;
}
.media-label { position: absolute; inset-inline-start: 6px; top: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; color: #fff; background: var(--scrim); }
.media-tile:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.media-viewer { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; }
.media-scrim { position: absolute; inset: 0; background: var(--lightbox); }
.media-stage { position: relative; max-width: min(96vw, 900px); max-height: 88vh; display: grid; place-items: center; }
.media-full { max-width: min(96vw, 900px); max-height: 88vh; border-radius: 12px; background: #000; }
.media-wait { color: #F3F4F6; font-size: 14px; }
/* A video already fetching its first piece, unseen until it has a picture. */
.media-full.media-pending { position: absolute; opacity: 0; pointer-events: none; }
.media-close {
  position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); inset-inline-end: 12px; width: 40px; height: 40px;
  border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--lightbox-button); color: #fff; cursor: pointer;
}

.media-progress { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; margin: 6px 0; border: 1px solid var(--atlet-border); border-radius: 12px; background: var(--atlet-surface-raised); }
.media-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.media-progress-bar { height: 6px; border-radius: 999px; background: var(--veil-3); overflow: hidden; }
.media-progress-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--focus); transition: width .25s ease; }
.media-trim { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; margin: 6px 0; border: 1px solid var(--atlet-border); border-radius: 12px; background: var(--atlet-surface-raised); font-size: 13px; }
.media-trim p { margin: 0; }
.media-trim b { direction: ltr; unicode-bidi: isolate; }
.media-range { width: 100%; accent-color: var(--focus); }
.media-trim-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Under each exercise, the athlete's way to the coach (athlete-training.js). */
.ex-talk {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 8px; padding: 5px 11px;
  border: 1px solid var(--atlet-border); border-radius: 999px; background: transparent; color: var(--atlet-text-secondary);
  font: inherit; font-size: 12.5px; cursor: pointer;
}
.ex-talk:hover { border-color: var(--atlet-border-strong); color: var(--atlet-text-primary); }
.ex-talk.answered { border-color: var(--focus); color: var(--focus); }
.ex-talk .icon { width: 15px; height: 15px; }
.ex-thread { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.ex-attached { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ex-attached:empty { display: none; }
.ex-compose { display: flex; gap: 8px; justify-content: space-between; margin-top: 8px; }
.ex-video { display: inline-flex; align-items: center; gap: 6px; }
.ex-video .icon { width: 16px; height: 16px; }

/* Under each exercise of a session the coach reads (training.js). */
.wo-ex-talk { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--atlet-border); cursor: default; }
.wo-ex-reply { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; }
.wo-ex-reply .icon { width: 14px; height: 14px; }

/* The archive: an athlete's videos, by the day of the session. */
.video-archive { display: flex; flex-direction: column; gap: 14px; }
.video-day-head { display: block; margin-bottom: 6px; font-size: 13px; color: var(--atlet-text-secondary); }
.video-row { display: flex; flex-wrap: wrap; gap: 10px; }
.video-item { margin: 0; display: flex; flex-direction: column; gap: 4px; width: 132px; }
.video-item .media-tile { margin: 0; }
.video-item figcaption { display: flex; gap: 5px; align-items: baseline; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.video-ex-label { color: var(--focus); font-weight: 800; }

/* The messages: a photo or a video beside the words (messages.js). */
.msg-attach { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 13px; border: 1px solid var(--atlet-border-strong); display: grid; place-items: center; background: transparent; color: var(--atlet-text-secondary); cursor: pointer; }
.msg-attach:hover { color: var(--atlet-text-primary); }
.msg-attach:disabled { opacity: .5; cursor: default; }
.msg-progress:empty { display: none; }
.msg-bub.with-file .media-tile { margin: 2px 0 4px; }
/* The chat beside the calendar: the paperclip as the messages', a little smaller. */
.chat-attach { width: 38px; height: 38px; border-radius: 11px; }
.chat-float .msg-progress { padding: 0 10px; }
.chat-bub .media-tile { width: 120px; }

/* --- motion (ui.js show, glideTab, skeleton, sheets; the owner, 2026-10-11) -------- */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* What is coming: the faint shape of rows, shimmering. */
.skeleton { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--atlet-border); border-radius: 16px; background: var(--atlet-surface); }
.skeleton-row { display: flex; align-items: center; gap: 12px; }
.skeleton-row > span { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.skeleton-dot, .skeleton-line { display: block; border-radius: 999px; background: var(--veil-3); }
.skeleton-dot { width: 34px; height: 34px; flex: none; }
.skeleton-line { height: 10px; }
.skeleton-line.short { width: 32%; height: 8px; opacity: .7; }

/* The open tab's mark, gliding from the old tab to the new. */
.side-tabs { position: relative; }
.nav-tab, .side-tab { position: relative; z-index: 1; }
.tab-glide { position: absolute; z-index: 0; pointer-events: none; transform-origin: 0 0; }
.nav-tab.on.gliding, .side-tab.on.gliding { background: transparent; }

@media (prefers-reduced-motion: no-preference) {
  .skeleton-dot, .skeleton-line {
    background: linear-gradient(90deg, var(--veil-2) 0%, var(--veil-4) 45%, var(--veil-2) 90%) 0 0 / 260% 100%;
    animation: skeleton-shine 1.4s ease-in-out infinite;
  }
  .skeleton { animation: fade-in .3s ease-out both; }

  /* A step to another place: its blocks come in one after another, from the side the step went. */
  .app-content.page-enter > * {
    --enter-x: 0px;
    animation: page-in .34s cubic-bezier(.2, .8, .2, 1) both;
  }
  .app-content.page-enter[data-enter="forward"] > * { --enter-x: 18px; }
  .app-content.page-enter[data-enter="back"] > * { --enter-x: -18px; }
  [dir="rtl"] .app-content.page-enter[data-enter="forward"] > * { --enter-x: -18px; }
  [dir="rtl"] .app-content.page-enter[data-enter="back"] > * { --enter-x: 18px; }
  .app-content.page-enter > :nth-child(2) { animation-delay: 35ms; }
  .app-content.page-enter > :nth-child(3) { animation-delay: 70ms; }
  .app-content.page-enter > :nth-child(4) { animation-delay: 105ms; }
  .app-content.page-enter > :nth-child(5) { animation-delay: 140ms; }
  .app-content.page-enter > :nth-child(6) { animation-delay: 175ms; }
  .app-content.page-enter > :nth-child(n + 7) { animation-delay: 210ms; }

  /* Sheets rise from the foot on a phone, and settle in the middle on a wide screen; and fall away. */
  .sheet-layer .sheet-scrim { animation: fade-in .22s ease-out both; }
  .sheet { animation: sheet-rise .32s cubic-bezier(.2, .9, .25, 1) both; }
  .sheet-layer.leaving { pointer-events: none; }
  .sheet-layer.leaving .sheet-scrim { animation: fade-out .2s ease-in both; }
  .sheet-layer.leaving .sheet { animation: sheet-fall .2s ease-in both; }

  /* What is pressed gives a little. */
  :is(.submit, .secondary, .mini, .nav-tab, .side-tab, .msg-pick, .msg-conv, .day-item, .line-button, .action, .rail-item,
      .ex-talk, .media-tile, .panel-button, .hdr-bell, .hdr-theme, .msg-send, .msg-attach, .cal-card, .filter, .seg-option, .pick) {
    transition: transform .14s ease, background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, opacity .18s ease;
  }
  :is(.submit, .secondary, .mini, .nav-tab, .side-tab, .msg-pick, .msg-conv, .day-item, .line-button, .action, .rail-item,
      .ex-talk, .media-tile, .panel-button, .hdr-bell, .hdr-theme, .msg-send, .msg-attach, .filter, .seg-option, .pick):active:not(:disabled) {
    transform: scale(.97);
  }
  .cal-card:active { transform: scale(.985); }

  /* A video or photo opened over the page, and a session's frame. */
  .media-viewer .media-scrim { animation: fade-in .2s ease-out both; }
  .media-stage { animation: pop-in .26s cubic-bezier(.2, .9, .25, 1) both; }
  .ed-window { animation: pop-in .26s cubic-bezier(.2, .9, .25, 1) both; }
  .ed-scrim { animation: fade-in .22s ease-out both; }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 760px) {
  .sheet { animation-name: sheet-settle; }
  .sheet-layer.leaving .sheet { animation-name: sheet-leave; }
}

@keyframes skeleton-shine { from { background-position: 100% 0; } to { background-position: -60% 0; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; transform: translate3d(var(--enter-x), 6px, 0); } to { opacity: 1; transform: none; } }
@keyframes sheet-rise { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheet-fall { from { transform: none; } to { transform: translateY(100%); } }
@keyframes sheet-settle { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes sheet-leave { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px) scale(.98); } }
/* By `scale`, not `transform`: a session's frame is centred with a transform of its own. */
@keyframes pop-in { from { opacity: 0; scale: .97; } to { opacity: 1; scale: 1; } }

/* Suggestions under a field as it is typed in (ui.js suggestUnder): the library's names on a phone too. */
.field-suggest { display: flex; flex-direction: column; gap: 2px; margin: -6px 0 12px; padding: 4px; border: 1px solid var(--atlet-border-strong); border-radius: 12px; background: var(--atlet-surface-raised); box-shadow: 0 10px 24px var(--shadow-soft); }
.field-suggest[hidden] { display: none; }
.field-suggest .pick { display: flex; align-items: baseline; gap: 4px; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--atlet-text-primary); font: inherit; font-size: 14px; text-align: start; cursor: pointer; }
.field-suggest .pick:hover, .field-suggest .pick:focus-visible { background: var(--veil-2); }
.field-suggest .pick small { color: var(--atlet-text-muted); font-size: 11.5px; }

/* A test's sensor settings (assessment-settings.js): what, then how, a line each. */
.asx-settings { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 8px 0 0; font-size: 13px; }
.asx-settings dt { color: var(--atlet-text-secondary); }
.asx-settings dd { margin: 0; color: var(--atlet-text-primary); }
@media (max-width: 520px) { .asx-settings { grid-template-columns: 1fr; gap: 2px; } .asx-settings dd { margin-bottom: 6px; } }

/* The month's deposits on the finance page (finance.js): by day, newest
   first; a choice of way of paying when the month has more than one. */
.pay-methods { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; }
.pay-method {
  padding: 4px 11px;
  border: 1px solid var(--atlet-border);
  border-radius: 999px;
  background: none;
  color: var(--atlet-text-secondary);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.pay-method.on { border-color: var(--atlet-red); color: var(--atlet-text-primary); background: var(--atlet-red-glow); }
.pay-day-head { padding: 10px 0 2px; font-size: 11px; font-weight: 700; color: var(--atlet-text-muted); }
.pay-day-head + .line { border-top: 0; }
.pay-reversed { color: #F2B33D; }
.pay-more { display: block; margin: 8px auto 2px; }

/* The install sheet's steps (install.js): the three taps, numbered, readable on a phone. */
.install-steps {
  margin: 4px 0 14px;
  padding-inline-start: 22px;
  display: grid;
  gap: 10px;
  font-size: 15px;
  line-height: 1.5;
}