/* Shared by every page. */

/* The two typefaces, served from here rather than from Google: no visitor's address goes to a
   third party to draw a page, and there is no second site to connect to before text appears.
   Latin only, the same range Google served for these pages; anything outside it falls back.
   Both are under the SIL Open Font License, which is in assets/fonts. */
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/fonts/barlow-condensed-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/fonts/barlow-condensed-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/assets/fonts/barlow-condensed-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Black, white and silver. In the light theme silver is the page and the lines, and emphasis
   (buttons, the chart, the club an athlete is in) is black, because silver on white is too faint
   to read or to see a line in. In the dark theme it is the other way round: the page is black and
   the emphasis is silver. Errors stay red, since that is a warning rather than a colour scheme.
   Every pair the app puts together clears WCAG AA in both themes. The navy and orange theme this
   replaced is kept in design/navy-orange-theme. */
:root {
  --bg: #EEEEF0;
  --surface: #FFFFFF;
  --ink: #0B0B0C;
  --muted: #5A5A61;
  --line: #C6C6CB;
  --bar: #808087;
  --accent: #1C1C1F;
  --accent-ink: #36363B;
  --on-accent: #FFFFFF;
  --danger: #B42318;
  --focus: #0B0B0C;
  --display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A0A0B;
    --surface: #161618;
    --ink: #F4F4F5;
    --muted: #A3A3AA;
    --line: #2F2F34;
    --bar: #68686F;
    --accent: #C9C9CE;
    --accent-ink: #D6D6DB;
    --on-accent: #0A0A0B;
    --danger: #FF9A90;
    --focus: #FFFFFF;
  }
}
:root[data-theme="dark"] {
  --bg: #0A0A0B;
  --surface: #161618;
  --ink: #F4F4F5;
  --muted: #A3A3AA;
  --line: #2F2F34;
  --bar: #68686F;
  --accent: #C9C9CE;
  --accent-ink: #D6D6DB;
  --on-accent: #0A0A0B;
  --danger: #FF9A90;
  --focus: #FFFFFF;
}
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
*, *::before, *::after { box-sizing: inherit; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}
.wrap { max-width: 1080px; margin: 0 auto; padding: 28px 20px 72px; }

/* The logo art is white on transparent: inverted to dark ink on the light theme, as-is on the dark one. */
.logo { display: block; height: 72px; width: auto; filter: invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo { filter: none; } }
:root[data-theme="dark"] .logo { filter: none; }
h1 { font-family: var(--display); font-weight: 700; font-size: clamp(48px, 9vw, 92px); line-height: 0.95; margin: 0 0 16px; letter-spacing: -0.005em; }
.lede { max-width: 52ch; color: var(--muted); margin: 0 0 44px; font-size: 19px; }

/* unit switch */
.seg { border: 0; padding: 0; margin: 0 0 28px; display: inline-flex; border: 1.5px solid var(--ink); border-radius: 6px; overflow: hidden; }
.seg legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label { padding: 8px 18px; font-weight: 600; font-size: 15px; cursor: pointer; }
.seg input:checked + label { background: var(--ink); color: var(--bg); }
.seg input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: -3px; }

/* fields */
.field { margin: 0 0 26px; }
.field > label, .field-label { display: block; font-weight: 600; font-size: 16px; margin-bottom: 2px; }
.control { display: flex; align-items: baseline; gap: 10px; border-bottom: 2px solid var(--ink); }
.control:focus-within { border-bottom-color: var(--accent); outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 2px; }
.control input {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); outline: none;
  font-family: var(--display); font-weight: 600; font-size: 40px; line-height: 1.15; padding: 2px 0;
}
.control input:disabled { color: var(--muted); opacity: 0.5; }
.control input::placeholder { color: var(--muted); opacity: 0.5; }
.unit { font-family: var(--display); font-weight: 500; font-size: 22px; color: var(--muted); }
.hint, .note { margin: 6px 0 0; font-size: 14.5px; color: var(--muted); }
.err { margin: 6px 0 0; font-size: 14.5px; color: var(--danger); font-weight: 500; min-height: 0; }
.err:empty { display: none; }
.note:empty { display: none; }
.check { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 15px; }
.check input { width: 20px; height: 20px; accent-color: var(--accent); margin: 0; }

/* Also used on links (the profile's way through to the week's workouts), so it has to carry the
   display and underline resets a <button> gets for free. */
.btn {
  font-family: var(--body); font-weight: 600; font-size: 17px; cursor: pointer;
  background: var(--accent); color: var(--on-accent); border: 0; border-radius: 6px; padding: 15px 26px;
  display: inline-block; text-align: center; text-decoration: none; line-height: 1.2;
}
.btn:hover { filter: brightness(0.94); }
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.btn.quiet { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
/* Only for deleting something: an account, or a post of your own in the community feed. */
.btn.danger { background: var(--danger); color: var(--bg); }
.btn.quiet.danger { background: transparent; color: var(--danger); border-color: var(--danger); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.step:focus { outline: none; }

/* account bar + login / sign up */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 40px; }
/* The links, the name and Log out wrap onto a second line rather than squeezing when a narrow
   screen cannot hold them all. */
.acct { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px 14px; font-size: 15px; color: var(--muted); min-width: 0; }
/* The signed-in name is the way back to the athlete's starting profile, from wherever they are.
   It keeps the weight it had as plain text and takes its underline on hover, rather than wearing
   button chrome next to the Log out button. */
.acct-name {
  font: inherit; font-weight: 600; color: var(--ink); overflow-wrap: anywhere;
  background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none;
  border-bottom: 1.5px solid transparent;
}
.acct-name:hover { border-bottom-color: var(--accent); }
.acct-name:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* The way to the other athletes, from every signed-in page. Written like the name beside it, and
   underlined for good on the search itself, which is where it goes. */
.acct-link { font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; border-bottom: 1.5px solid transparent; }
.acct-link:hover, .acct-link[aria-current="page"] { border-bottom-color: var(--accent); }
.acct-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.btn.small { font-size: 15px; padding: 8px 16px; }
.auth-form { max-width: 440px; }
.auth-form .btn { margin-top: 6px; }
.control.text { align-items: center; }
.control.text input { font-family: var(--body); font-weight: 500; font-size: 22px; padding: 6px 0; }
.form-err { margin: 0 0 16px; }

@media (max-width: 480px) {
  .logo { height: 56px; }
  /* The way to the other athletes, the name and Log out are more than fits beside the logo on a
     phone, so the account drops under it rather than pushing Log out off the edge. */
  .topbar { flex-wrap: wrap; }
  .acct { justify-content: flex-start; }
}

/* ---- the footer on every page: the legal links and the way back to the cookie choice ---- */
.site-footer { border-top: 1px solid var(--line); }
.site-footer-in { max-width: 1080px; margin: 0 auto; padding: 22px 20px 28px; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 10px 24px; font-size: 14.5px; color: var(--muted); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.site-footer p { margin: 0; }
.site-footer a, .linklike { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.site-footer a:hover, .linklike:hover { color: var(--ink); }
.linklike { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.site-footer a:focus-visible, .linklike:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }

/* ---- the cookie banner (assets/site.js) ---- */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--surface); border-top: 1.5px solid var(--line);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.12); padding-bottom: env(safe-area-inset-bottom, 0px); }
.consent-in { max-width: 1080px; margin: 0 auto; padding: 16px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.consent-text { flex: 1 1 420px; min-width: 0; }
.consent-h { font-family: var(--display); font-weight: 600; font-size: 21px; line-height: 1.2; margin: 0 0 2px; }
.consent p { margin: 0; font-size: 15px; color: var(--muted); max-width: 72ch; }
.consent a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.consent a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* Reopened from the footer, the choice already made shows as the one pressed. */
.consent .btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

/* ---- the pop-up window (assets/modal.js): every one in the app is this ----
   A <dialog> opened with showModal(), so it holds focus, the page behind it cannot be clicked or
   tabbed into, and Escape closes it. One card, centred over the page dimmed and softly blurred:
   a title, what it is about, and its buttons, the main one last. The dialog itself has no padding
   and its one child (.modal-body) has it all, so a click that lands on the dialog is a click on the
   dimmed page around the card. */
.modal { width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto;
  margin: auto; padding: 0; border: 1.5px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3); }
.modal.wide { width: min(560px, calc(100vw - 32px)); }
.modal::backdrop { background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.modal[open] { animation: modal-in 170ms ease-out; }
.modal[open]::backdrop { animation: modal-fade 170ms ease-out; }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
@keyframes modal-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .modal[open], .modal[open]::backdrop { animation: none; } }
.modal-body { padding: 28px 28px 24px; }
.modal h2 { font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1.05; margin: 0 0 10px; }
.modal-text { margin: 0; color: var(--muted); font-size: 16px; }
.modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 26px; }
.modal textarea { width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border: 1.5px solid var(--ink);
  border-radius: 8px; background: var(--bg); color: var(--ink); resize: vertical; }
.modal textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* On a phone the buttons run the width of the card, the main one on top where the thumb is. */
@media (max-width: 480px) {
  .modal-body { padding: 24px 20px 20px; }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions .btn { width: 100%; }
}

/* A form field for bots only. Off screen rather than display: none, which some bots look for;
   people never see it and screen readers are told to skip it. */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---- the privacy policy and terms ---- */
.prose { max-width: 68ch; }
.prose h2 { font-family: var(--display); font-weight: 600; font-size: 30px; line-height: 1.15; margin: 40px 0 10px; }
.prose h3 { font-weight: 600; font-size: 18px; margin: 24px 0 6px; }
.prose ul { padding-left: 1.2em; }
.prose li { margin: 0 0 6px; }
.prose a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }
.prose a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.updated { color: var(--muted); font-size: 15px; margin: -8px 0 32px; }
.draft { border-left: 4px solid var(--accent); background: var(--surface); padding: 12px 16px; margin: 0 0 28px; max-width: 68ch; font-size: 15.5px; }

/* The pages that draw themselves from the API (the profile, the week, the athletes) start out
   short and grow when their data arrives. Held at a screen tall from the start, the footer begins
   below the fold instead of being shoved down it, which would read as the page jumping. */
.app .wrap { min-height: 100vh; min-height: 100svh; }