/* Cache-buster 2026-09-09: the previous filenames for this file, site.js and
   legal.css were requested at the edge in the window between the HTML being
   deployed and the files themselves landing. Pages answered those requests with
   200 + the fallback HTML page, and the /assets/* rule in _headers stamped that
   answer immutable for a year, so the CDN kept serving an HTML page under a .css
   URL. Changing the bytes changes the content hash, so the markup now points at
   URLs that were never poisoned. See the /assets/ guard in functions/_middleware.js,
   which stops this from being possible again. */

/* Tokens this file uses that styles.css dropped in the 2026-09-18 redesign —
   without them `.warning` and `.legal__email` lost their border, the cards
   their radius, and "faint" text fell back to the inherited colour. Values as
   they were before the redesign. */
:root {
  --ink-faint: #6E6E6E;         /* 5.13:1 on white */
  --orange-border: rgba(246, 80, 27, 0.30);
  --radius: 12px;
}
/* ============================================================================
   SyzUp — legal subpages (/privacy/, /terms/, /delete-account/)
   Depends on styles.css for design tokens, nav, footer and buttons.
   ========================================================================= */

.legal {
  background: var(--bg);
  padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 8vw, 96px);
}

.legal__inner {
  max-width: 760px;               /* narrower than --max: legal text is read, not scanned */
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* ---------- headings ---------- */

.legal__h1 {
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 20px;
}

.legal__lead {
  font-size: clamp(17px, 2vw, 19px);
  line-height: 1.65;
  color: var(--ink-soft);
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

.legal__section {
  margin-top: clamp(36px, 5vw, 52px);
  scroll-margin-top: 90px;
}


/* Shown when a locale has no translation of this document and is served the
   English text. Deliberately prominent: the visitor asked for their language and
   is about to read a binding agreement in another one. */
.legal__english-notice {
  margin-bottom: 28px;
  padding: 12px 16px;
  border: 1px solid var(--line-strong);
  border-inline-start: 3px solid var(--orange);
  background: var(--bg-cream);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}


.legal__h2 {
  font-size: clamp(20px, 2.6vw, 25px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 14px;
  padding-inline-start: 14px;
  border-inline-start: 3px solid var(--orange);
}

.legal p {
  color: var(--ink-soft);
  line-height: 1.7;
  margin-bottom: 14px;
}

.legal p:last-child { margin-bottom: 0; }

.legal a {
  color: var(--orange-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.legal a:hover,
.legal a:focus-visible { text-decoration-thickness: 2px; }

.legal code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--bg-cream);
  border: 1px solid var(--line);
  padding: 1px 6px;
  color: var(--ink-soft);
}

/* ---------- app / developer identity block ---------- */

.legal__meta {
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  gap: 10px 20px;
  background: var(--bg-cream);
  border: 1px solid var(--line);
  padding: 20px 22px;
}

.legal__meta dt {
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  align-self: center;
}

.legal__meta dd { color: var(--ink); }

/* ---------- lists ---------- */

.legal__steps,
.legal__list {
  margin: 0 0 14px;
  padding-inline-start: 22px;
  color: var(--ink-soft);
  line-height: 1.7;
}

.legal__steps li,
.legal__list li { margin-bottom: 10px; }

.legal__steps li::marker {
  font-weight: 700;
  color: var(--orange-deep);
}

.legal__list li::marker { color: var(--orange-deep); }

/* ---------- email callout ---------- */

.legal__email {
  background: var(--orange-bg);
  border: 1px solid var(--orange-border);
  padding: 18px 22px;
  margin-bottom: 8px;
  font-size: clamp(17px, 2.4vw, 21px);
  font-weight: 600;
  word-break: break-word;
}

.legal__email a { color: var(--ink); }

.legal__hint {
  font-size: 14px;
  color: var(--ink-faint);
  margin-bottom: 20px;
}

/* ---------- deleted-data definition list ---------- */

.legal__data {
  border-top: 1px solid var(--line);
}

.legal__data dt {
  font-weight: 600;
  color: var(--ink);
  padding-top: 16px;
}

.legal__data dd {
  color: var(--ink-soft);
  line-height: 1.65;
  padding: 4px 0 16px;
  border-bottom: 1px solid var(--line);
}

/* ---------- retention table ---------- */

.legal__table-wrap { overflow-x: auto; }

.legal__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  text-align: start;
}

.legal__table th,
.legal__table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.6;
}

.legal__table thead th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-muted);
  background: var(--bg-cream);
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}

.legal__table tbody th {
  font-weight: 600;
  color: var(--ink);
  width: 26%;
}

.legal__table td { color: var(--ink-soft); }

/* Stack the table into cards on narrow screens — no horizontal scrolling. */
@media (max-width: 640px) {
  .legal__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .legal__table,
  .legal__table tbody,
  .legal__table tr,
  .legal__table th,
  .legal__table td { display: block; width: auto; }

  .legal__table tr {
    border: 1px solid var(--line);
    margin-bottom: 14px;
    padding: 4px 0;
  }

  .legal__table th,
  .legal__table td { border-bottom: 0; padding: 10px 16px; }

  .legal__table tbody th {
    background: var(--bg-cream);
    margin-bottom: 4px;
  }

  .legal__table td::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ink-faint);
    margin-bottom: 3px;
  }
}

/* ---------- related documents ---------- */

.legal__doclinks {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  font-weight: 600;
}

/* ---------- footer meta ---------- */

.legal__updated {
  margin-top: clamp(40px, 6vw, 64px);
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-faint);
}

/* ---------- unresolved placeholder guard ---------- */
/* Never ships: build.js refuses to emit pages containing @@TODO_ markers.
   This is a last-resort visual tripwire for local preview builds. */
.legal__todo {
  background: #FFF3CD;
  border: 1px dashed #B8860B;
  color: #6B4E00;
  padding: 2px 8px;
  font-weight: 700;
}

/* Non-Latin scripts — see the matching block in styles.css for the reasoning. */
[lang="ko"] .legal { word-break: keep-all; }
[lang="ar"] .legal * { letter-spacing: normal; }
[lang="ar"] .legal p,
[lang="ar"] .legal__lead { line-height: 1.9; }

/* NOT keep-all: ja and zh have no inter-word spaces, so a paragraph would
   have no legal break point at all. Long legal documents make this fatal —
   a single unbroken block scrolls the whole page sideways. */
[lang="ja"] .legal,
[lang="zh-Hans"] .legal {
  word-break: normal;
  line-break: strict;
  overflow-wrap: break-word;
}

/* Devanagari marks collide at the body line-height used for long copy. */
[lang="hi"] .legal p,
[lang="hi"] .legal__lead,
[lang="hi"] .legal li { line-height: 1.9; }

/* Table headers are uppercase with tracking in Latin; that applies to none of
   these scripts. */
[lang="ar"] .legal__table thead th,
[lang="ar"] .legal__meta dt,
[lang="ja"] .legal__table thead th,
[lang="ja"] .legal__meta dt,
[lang="zh-Hans"] .legal__table thead th,
[lang="zh-Hans"] .legal__meta dt,
[lang="hi"] .legal__table thead th,
[lang="hi"] .legal__meta dt {
  text-transform: none;
}

/* ----------------------------------------------------------------------------
   Imported legal documents (privacy, terms)
   These come from the old single-file build and rely on their own markup:
   numbered h2, .card, .warning and tables. Mapped onto the site's tokens here
   rather than editing 18 documents.
   ------------------------------------------------------------------------- */

.legal__docdate {
  font-size: 14px;
  color: var(--ink-faint);
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}

.legal section { margin-top: clamp(32px, 4.5vw, 46px); }

.legal section h2 {
  font-size: clamp(19px, 2.4vw, 23px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.legal section h2 .num {
  color: var(--orange-deep);
  margin-inline-end: 8px;
}

.legal section h3 {
  font-size: 16.5px;
  font-weight: 600;
  color: var(--ink);
  margin: 22px 0 8px;
}

.legal ul,
.legal ol {
  margin: 0 0 14px;
  padding-inline-start: 22px;
  color: var(--ink-soft);
  line-height: 1.7;
}

.legal li { margin-bottom: 8px; }
.legal li::marker { color: var(--orange-deep); }

.legal .card {
  background: var(--bg-cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin: 16px 0;
}

.legal .card > p:last-child { margin-bottom: 0; }

.legal .card-title,
.legal .warning-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--orange-deep);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 8px;
}

.legal .warning {
  background: var(--orange-bg);
  border: 1px solid var(--orange-border);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin: 16px 0;
}

.legal .warning > p:last-child { margin-bottom: 0; }

.legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 14.5px;
  text-align: start;
}

.legal th {
  text-align: start;
  padding: 11px 14px;
  background: var(--bg-cream);
  color: var(--ink);
  font-weight: 600;
  border-bottom: 1px solid var(--line-strong);
}

.legal td {
  padding: 11px 14px;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

/* Critical disclaimers (.danger) — the health and liability blocks in the
   Terms. These carry the most legal weight on the page, so they get a
   stronger treatment than .warning rather than sharing it.
   Note: the source documents styled .danger-title with var(--red), which was
   never defined there, so the heading rendered unstyled. Fixed here. */

.legal .danger {
  background: #FCEDEB;
  border: 1px solid #E5A79C;
  border-inline-start: 3px solid #C0392B;
  border-radius: var(--radius);
  padding: 18px 22px;
  margin: 18px 0;
}

.legal .danger > p:last-child { margin-bottom: 0; }

.legal .danger-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #A5281B;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 8px;
}

.legal .danger p { color: #6B241B; }

/* Translation notice shown on every non-authoritative language version. */
.legal .conv-note {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-faint);
  background: var(--bg-cream);
  border-inline-start: 3px solid var(--line-strong);
  border-radius: 0;
  padding: 12px 16px;
  margin-bottom: 22px;
}

/* Cross-links between the two documents. */
.legal a.xdoc { font-weight: 600; }

/* CTA na /coaches/ — jedyny przycisk na stronie w szacie dokumentu.
   Gradient i kształt biorą się z .btn--orange w styles.css, który ta strona
   też wczytuje; tutaj tylko margines.

   Kolor trzeba przywrócić jawnie: `.legal a` wyżej ma specyficzność 0,1,1 i
   wygrywa z `.btn--orange` (0,1,0), więc bez tej reguły przycisk dostaje
   pomarańczowy tekst na pomarańczowym gradiencie i podkreślenie — napis
   znika. Ten sam zabieg co `.legal__email a` kilka reguł wyżej. */
.legal__cta {
  margin-top: 1.75rem;
}

.legal__cta .btn--orange {
  color: #FFFFFF;
  text-decoration: none;
}

/* ---------- kalkulator 1RM (/1rm-calculator/) ---------- */

/* Pierwszy interaktywny element w szacie dokumentu. Trzyma się tych samych
   tokenów co reszta pliku, żeby nie wyglądał jak widżet doklejony z innego
   serwisu. */
.calc {
  margin: 0 0 2rem;
  padding: 20px;
  background: var(--bg-cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.calc__fields {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 14px;
}

/* Jedna kolumna poniżej 560 px: trzy pola obok siebie robiły się węższe niż
   dwucyfrowa liczba, a pole, w które nie widać co się wpisuje, jest gorsze
   niż pole niżej. */
@media (max-width: 560px) {
  .calc__fields { grid-template-columns: 1fr; }
}

.calc__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.calc__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
}

.calc__input {
  min-height: 44px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 16px; /* 16px, bo poniżej tego iOS Safari przybliża stronę przy wejściu w pole */
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}

.calc__input:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 1px;
}

.calc__out {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* Obie jednostki jedna pod druga, nie obok: przy dwóch liczbach w jednej
   linii oko musi szukać, która jest która, a na wąskim ekranie i tak by się
   złamały w przypadkowym miejscu. */
.calc__out-values {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 6px 0 0;
}

.calc__out-alt {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.calc__out-label {
  font-size: 14px;
  color: var(--ink-muted);
}

.calc__out-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--orange-deep);
  font-variant-numeric: tabular-nums;
}

/* Kolumna z ciężarem zmienia się przy każdym wciśnięciu klawisza, więc cyfry
   muszą mieć stałą szerokość — inaczej cała tabela drga przy pisaniu. */
.calc__table td,
.calc__table th[scope="row"] {
  font-variant-numeric: tabular-nums;
}

/* Przeliczenie pod spodem, w tej samej kolejności co w wyniku nad tabelą.
   Jednostek nie powtarzamy w każdej komórce — niesie je nagłówek kolumny. */
.calc__cell-alt {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--ink-faint);
}

.calc__cell-alt:empty {
  display: none;
}

/* Wynik kalkulatora talerzy to ciąg „2 × 20 · 1 × 10", nie jedna liczba —
   przy rozmiarze wyniku 1RM łamałby się na wąskim ekranie w połowie pary. */
.calc__out-value--plates {
  font-size: 22px;
  letter-spacing: -0.01em;
}

/* ---------- końcowe CTA jako blok, nie kolejny akapit ---------- */

/* Na białej stronie dokumentu sekcja z przyciskiem czytała się jak następny
   akapit: nic się nie wyróżniało, oko po prostu jechało dalej. Landing kończy
   się ciemnym blokiem i ten robi to samo — ten sam kontrast, ten sam
   pomarańczowy przycisk na ciemnym tle. Tokeny pochodzą ze styles.css, który
   ta strona też wczytuje. */
.legal__cta-block {
  margin-top: clamp(40px, 6vw, 64px);
  padding: clamp(24px, 4vw, 36px);
  background: var(--bg-dark);
  border-radius: var(--radius);
}

/* Nagłówek traci pomarańczową kreskę: na ciemnym tle blok ma już własną
   ramę, a kreska przy krawędzi paddingu wyglądała jak usterka. */
.legal__cta-block .legal__h2 {
  color: var(--ink-on-dark);
  padding-inline-start: 0;
  border-inline-start: 0;
}

.legal__cta-block p {
  color: rgba(244, 239, 231, 0.78);
}

.legal__cta-block .legal__cta {
  margin-top: 1.5rem;
  margin-bottom: 0;
}

/* DOTS ma cztery pola zamiast trzech. Na szerokim ekranie w jednym rzędzie,
   niżej łamie się na dwie kolumny, zanim zejdzie do jednej — cztery pola
   jedno pod drugim to niepotrzebnie długi formularz na tablecie. */
.calc__fields--four {
  grid-template-columns: 1fr 1fr auto auto;
}

@media (max-width: 760px) {
  .calc__fields--four { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .calc__fields--four { grid-template-columns: 1fr; }
}