/* Client app — "the athlete" (4.18). True black, gold, numbers big enough to
 * read mid-set. Same type family as the coach console: Archivo for headings
 * and numbers, Plus Jakarta Sans for reading. Loaded last; screen only. */
@media screen {
  html:root {
    --font-ui: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --f-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --f-disp: "Archivo", "Plus Jakarta Sans", system-ui, sans-serif;
  }
  html[data-theme="dark"] {
    --paper: #050505;
    --ground: #050505;
    --ground-2: #0b0b0b;
    --card: #121212;
    --card-2: #1a1a1a;
    --card-3: #232323;
    --field: #0f0f0f;
    --band: #1a1a1a;
    --band-2: #141414;
    --rail-bg: #050505;
    --ink: #f5f2ea;
    --ink-2: #b3aea3;
    --ink-3: #a29d92;
    --rule: #2a2a2a;
    --rule-2: #1f1f1f;
    --line: #2a2a2a;
    --line-2: #1f1f1f;
    background: #050505;
  }
  html body {
    font-family: var(--f-body);
  }
  .journal-shell :is(h1, h2) {
    font-family: var(--f-disp);
    font-weight: 800;
    letter-spacing: -0.02em;
  }
  .journal-shell h1 {
    font-size: clamp(1.9rem, 1.2rem + 1.6vw, 2.5rem);
    line-height: 1.05;
  }
  .journal-shell .athletic-today-workout h2 {
    font-weight: 900;
    font-size: clamp(2.1rem, 1.4rem + 2vw, 2.9rem);
    letter-spacing: -0.03em;
  }

  /* The twelve-week block. */
  .athlete-block {
    display: grid;
    gap: 12px;
    padding: 20px 22px;
    border: 1px solid var(--rule-2);
    border-radius: 20px;
    background: var(--card);
  }
  .athlete-block-top h2 {
    margin: 2px 0 0;
    font-size: 1.15rem;
  }
  .athlete-kicker {
    color: var(--gold, #e4b43c);
    font-weight: 700;
    font-size: 0.85rem;
  }
  .athlete-weeks {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 4px;
    padding-top: 7px;
  }
  .athlete-weeks i {
    position: relative;
    height: 14px;
    border-radius: 3px;
    background: var(--rule);
  }
  .athlete-weeks i.done {
    background: var(--ink);
  }
  .athlete-weeks i.now {
    background: #e4b43c;
  }
  .athlete-weeks i.check::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -7px;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: #e4b43c;
  }
  .athlete-checkpoints {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .athlete-checkpoints li {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--card-2);
    color: var(--ink-2);
    font-size: 0.78rem;
    font-weight: 700;
  }
  .athlete-checkpoints li b {
    font-family: var(--f-disp);
    font-size: 0.98rem;
    font-weight: 800;
    color: var(--ink);
  }
  .athlete-checkpoints li.done {
    color: #4fc08a;
  }
  .athlete-checkpoints li.next {
    box-shadow: inset 0 0 0 1.5px #e4b43c;
    color: #e4b43c;
  }
  html[data-theme="light"] .athlete-checkpoints li.done {
    color: #1f7a50;
  }
  html[data-theme="light"] .athlete-checkpoints li.next {
    color: #8a5d0c;
  }
  html[data-theme="light"] .athlete-kicker {
    color: #8a5d0c;
  }

  /* Food against the goal: a bar with a gold mark where the goal is. */
  .athlete-macros {
    display: grid;
    gap: 12px;
    margin: 14px 0 6px;
  }
  .athlete-macro {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 600;
  }
  .athlete-macro > i {
    position: relative;
    display: block;
    height: 10px;
    border-radius: 99px;
    background: var(--card-3);
  }
  .athlete-macro > i > span {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: var(--ink);
  }
  .athlete-macro > i > b {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 3px;
    border-radius: 2px;
    background: #e4b43c;
  }
  .athlete-macro em {
    font-style: normal;
    color: var(--ink-2);
    white-space: nowrap;
  }
  .athlete-macro em strong {
    font-family: var(--f-disp);
    font-weight: 800;
    color: var(--ink);
  }
  @media (max-width: 560px) {
    .athlete-checkpoints {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* Every four weeks: the paper form's columns. */
  .athlete-checkpoint-table {
    margin-bottom: 18px;
  }
  .athlete-table-scroll {
    overflow-x: auto;
  }
  .athlete-checkpoint-table table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 6px;
  }
  .athlete-checkpoint-table th,
  .athlete-checkpoint-table td {
    padding: 11px 8px;
    text-align: right;
    white-space: nowrap;
  }
  .athlete-checkpoint-table thead th {
    color: var(--ink-2);
    font-size: 0.78rem;
    font-weight: 700;
  }
  .athlete-checkpoint-table th[scope="row"],
  .athlete-checkpoint-table thead th:first-child {
    text-align: left;
    font-weight: 700;
  }
  .athlete-checkpoint-table tbody > tr > * {
    border-top: 1px solid var(--rule-2);
  }
  .athlete-checkpoint-table td {
    font-family: var(--f-disp);
    font-size: 1.05rem;
    font-weight: 800;
  }
  .athlete-checkpoint-table td.athlete-next-date {
    font-family: var(--f-body);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink-2);
  }
  .athlete-checkpoint-table td.athlete-change {
    font-family: var(--f-body);
    font-size: 0.88rem;
    color: var(--ink);
  }

  /* Session credits. */
  .athlete-credits {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    margin-bottom: 18px;
  }
  .athlete-credits h2 {
    margin: 0;
    font-size: 1.6rem;
  }
  .athlete-credits p {
    margin: 10px 0 0;
    color: var(--ink-2);
  }
  .athlete-credit-strip {
    display: flex;
    gap: 4px;
    margin-top: 12px;
  }
  .athlete-credit-strip i {
    flex: 1;
    height: 9px;
    border-radius: 3px;
    background: var(--card-3);
  }
  .athlete-credit-strip i.used {
    background: var(--ink);
  }
  .journal-shell .btn.athlete-whatsapp,
  .journal-shell a.btn.athlete-whatsapp {
    background: #1a7f45;
    border-color: #1a7f45;
    color: #fff;
  }

  /* Paid-up status line. */
  .athlete-paid-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin: 0 0 18px;
    padding: 18px 20px;
    border-radius: 18px;
    background: color-mix(in srgb, #e4b43c 12%, var(--card));
  }
  .athlete-paid-status span {
    display: block;
    color: var(--ink-2);
    font-size: 0.8rem;
    font-weight: 700;
  }
  .athlete-paid-status b {
    display: block;
    font-family: var(--f-disp);
    font-size: 1.35rem;
    font-weight: 900;
    color: #e4b43c;
  }
  html[data-theme="light"] .athlete-paid-status b {
    color: #7a520a;
  }
  .athlete-paid-status.lapsed {
    background: color-mix(in srgb, #ec7a63 12%, var(--card));
  }
  .athlete-paid-status.lapsed b {
    color: var(--ink);
  }
  @media (max-width: 560px) {
    .athlete-credits,
    .athlete-paid-status {
      grid-template-columns: minmax(0, 1fr);
      flex-direction: column;
      align-items: stretch;
    }
  }
}