/* ============================================================
   OtoGym — veebilehe stiil
   ------------------------------------------------------------
   ÜKS ALLIKAS. Kõik värvid ja mõõdud on võetud OTSE äpi
   stiiliraamatust `lib/app_theme.dart` (OtoColors, OtoSize) —
   mitte silma järgi. Kui äpis muutub token, muutub siin muutuja.

   FONTI EI LAETA VÄLJAST. Google Fonts tähendaks, et iga
   külastaja IP läheb Google'ile — terviseäpi privaatsuslehel on
   see vale, ja meie enda reeglid ütlevad, et kolmandale
   osapoolele ei saadeta midagi. Kasutame süsteemifonte.

   KOMPOSITSIOON (Priit 14.09.2026 õhtul: „üks mentaalne mahuruum,
   harmoonia, keskjoondus"). Kogu leht elab ÜHEL teljel ja ÜHES
   tulbas (--laius-tekst): päis, pealkiri, pilt, lõik, nupp ja jalus
   on kõik keskel ja sama laiad. Sektsioone ei eralda jooned, vaid
   õhk ja kolm ringi (kõrv · treeningu orb · SPA orb). Kolm
   tekstiastet ja mitte rohkem: h1 (üks lehel), h2 (iga ploki
   pealkiri — kõigil SAMA suurus ja SAMA vahe tekstini,
   --vahe-pealkiri), lõik (--rida õhku ridade vahel). Väikeseid
   silte plokkide kohal ja erikujundusega kaste ei ole.
   ============================================================ */

:root {
  /* --- Neutraalsed (app_theme.dart:34-38) --- */
  --suvamust: #070707;
  --soe: #161513;
  --tuhk: #3a3833;
  --tuhk-hele: #9b9384;
  --tekst: #e7dcc4;

  /* --- KULD, funktsionaalne pool (app_theme.dart:41-44) --- */
  --kuld: #c8a85f;
  --sampanja: #e9d6a6;
  --kuld-tume: #5e4d28;
  --kuld-tekst: #2a2110;

  /* --- HÕBE, taastumispool (app_theme.dart:47-52) --- */
  --hobe: #c2c6d2;
  --elavhobe: #eef0f6;
  --hobe-tume: #5a5d68;
  --hobe-vaikne: #7e828d;

  /* --- Mõõdud (OtoSize) --- */
  --serv: 24px;
  --vahe-element: 14px;
  --vahe-tihe: 8px;
  --nupu-korgus: 54px;
  --nupu-min-laius: 132px;
  --r-kaart: 18px;
  --r-kiip: 12px;

  /* --- Veebi omad (äpis pole vastet) --- */
  --laius: 1080px;        /* päis ja jalus */
  --laius-tekst: 720px;   /* AINUS sisutulp */
  --rida: 1.75;           /* reavahe: õhk ridade vahel */
  --vahe-pealkiri: 22px;  /* h2 → tekst, igal plokil sama */
  --vahe-plokk: clamp(56px, 8vw, 96px); /* plokkide vahe, jooneta */
  --ring: 150px;          /* kõrvalogo ja orbid, kõik sama mõõtu */
}

/* ------------------------------------------------------------
   Alus
   ------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--suvamust);
  color: var(--tekst);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 17px;
  line-height: var(--rida);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ------------------------------------------------------------
   ELAV TAUST
   ------------------------------------------------------------
   Kaks kihti, täpselt nagu äpi `OtoBackground`:
   1) staatiline valgusvoog ülal-paremal (66% / 16% — sama
      keskpunkt mis `_DustPainter`-is);
   2) liikuv tolm canvas'el (`taust.js`).
   Canvas on `position: fixed`, seega taust EI ALGA iga lehega
   otsast — üks maailm, nagu äpis.
   ------------------------------------------------------------ */

#taust {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  /* LAIUS JA KÕRGUS ON KOHUSTUSLIKUD.
     `<canvas>` on ASENDATAV element (nagu `<img>`): tema
     `width: auto` ei tähenda „venita vanemani", vaid „võta oma
     sisemine mõõt" — ja see on 300 x 150 px. `inset: 0` üksi
     jätab ta seetõttu vasakusse ülanurka väikeseks kastiks.
     Leitud 31.08.2026: tolm töötas ainult ekraani nurgas. */
  width: 100%;
  height: 100%;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      60% 55% at 66% 16%,
      rgba(200, 168, 95, 0.16) 0%,
      rgba(200, 168, 95, 0.06) 38%,
      rgba(200, 168, 95, 0) 70%
    ),
    radial-gradient(
      70% 60% at 12% 96%,
      rgba(94, 77, 40, 0.14) 0%,
      rgba(94, 77, 40, 0) 65%
    );
}

/* Kogu sisu tolmu peal. */
main,
header,
footer {
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------------
   Tüpograafia — kolm astet, kõikjal samad
   ------------------------------------------------------------ */

h1,
h2,
h3 {
  margin: 0;
  font-weight: 500;
  color: var(--sampanja);
}

/* h1 on ALATI ühel real (Priit 14.09: „ei tohi olla murtud rida").
   Suurus tuleb ekraani laiusest: pealkirja laius on mõõdetud
   21,7 em (inglise, pikem) ja jagaja 22,3 jätab 3 % varu
   kerimisriba jaoks. Laual ülempiir 2,5 rem; telefonil (375 px)
   tuleb ~14,7 px — väike, aga terve rida. h1 elab `.raam` (1080 px)
   raamis, mitte kitsas tulbas, sest ühel real ei mahu ta 720 px sisse. */
h1 {
  white-space: nowrap;
  font-size: min(2.5rem, calc((100vw - 2 * var(--serv)) / 22.3));
  line-height: 1.18;
  letter-spacing: 0.01em;
  margin-bottom: 32px;
}

h2,
h3 {
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.4rem, 2.8vw, 1.75rem);
  line-height: 1.3;
  letter-spacing: 0.01em;
  margin-bottom: var(--vahe-pealkiri);
}

h3 {
  font-size: 1.15rem;
  line-height: 1.35;
  margin-bottom: 12px;
}

p {
  margin: 0 0 1.3em;
}

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

strong {
  color: var(--sampanja);
  font-weight: 600;
}

a {
  color: var(--kuld);
  text-decoration-color: rgba(200, 168, 95, 0.35);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--sampanja);
  text-decoration-color: currentColor;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--kuld);
  outline-offset: 3px;
  border-radius: 4px;
}

.vaikne {
  color: var(--tuhk-hele);
}

/* ------------------------------------------------------------
   Paigutus — üks telg, üks tulp
   ------------------------------------------------------------ */

.raam {
  width: 100%;
  max-width: var(--laius);
  margin: 0 auto;
  padding-left: var(--serv);
  padding-right: var(--serv);
}

.kitsas {
  max-width: var(--laius-tekst);
}

main {
  padding-bottom: var(--vahe-plokk);
}

section {
  padding: var(--vahe-plokk) 0 0;
  text-align: center;
}

/* ------------------------------------------------------------
   Päis — logo keskel, menüü selle all keskel
   ------------------------------------------------------------ */

header {
  padding: 30px 0 8px;
  text-align: center;
}

.paise-riba {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.logo {
  flex-direction: column;
  gap: 8px;
}

.logo img {
  height: 40px;
  width: auto;
}

/* BETA-märk sõnalogo all — sama padi mis äpis (OtoBetaMark:
   kuld 80 %, tume tekst, kiibiraadius, väike kiri, silt-sõrendus). */
.beta-mark {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--r-kiip);
  background: rgba(200, 168, 95, 0.8);
  color: var(--kuld-tekst);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.16em;
}

/* Beta teade allalaadimisnupu all (Priit 14.09.2026). */
.beta-teade {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--kuld);
}

.avaplokk .allalaadimine {
  flex-direction: column;
  gap: 14px;
}

nav.menuu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(14px, 3vw, 30px);
}

nav.menuu a {
  color: var(--tuhk-hele);
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

nav.menuu a:hover,
nav.menuu a[aria-current="page"] {
  color: var(--tekst);
}

/* Keelevalik: üks kiip menüü lõpus — eesti lehel „ENG", inglise
   lehel „EE". Valik on aadress, mitte salvestatud olek (keel.php). */
nav.menuu .keelevalik {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid var(--kuld-tume);
  border-radius: 999px;
  color: var(--kuld);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

nav.menuu .keelevalik:hover {
  border-color: var(--kuld);
  color: var(--sampanja);
}

/* ------------------------------------------------------------
   Nupud — OtoButton
   ------------------------------------------------------------
   Äpi reegel: primaarne nupp on KESKJOONDATUD ja PIIRATUD
   laiusega. Servast servani venib ainult nimekirjarida või
   sisendiväli. Siin sama.
   ------------------------------------------------------------ */

.nupp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--nupu-korgus);
  min-width: var(--nupu-min-laius);
  padding: 0 30px;
  border: 0;
  border-radius: var(--r-kiip);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  background: linear-gradient(180deg, var(--sampanja) 0%, var(--kuld) 100%);
  color: var(--kuld-tekst);
  box-shadow: 0 0 26px rgba(200, 168, 95, 0.16);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.nupp:hover {
  filter: brightness(1.06);
  box-shadow: 0 0 34px rgba(200, 168, 95, 0.26);
  transform: translateY(-1px);
  color: var(--kuld-tekst);
}

.nupp:active {
  transform: translateY(0);
}

.nupp-teine {
  background: transparent;
  color: var(--sampanja);
  border: 1px solid var(--kuld-tume);
  box-shadow: none;
}

.nupp-teine:hover {
  border-color: var(--kuld);
  color: var(--sampanja);
  box-shadow: 0 0 22px rgba(200, 168, 95, 0.12);
}

.nupp-hobe {
  background: linear-gradient(180deg, var(--elavhobe) 0%, var(--hobe) 100%);
  color: #2b2e36;
  box-shadow: 0 0 26px rgba(194, 198, 210, 0.14);
}

/* Sisunupp, mis ei ole link (SPA moodulite nimed): ilma tõsteta. */
.nupp.staatiline,
.nupp.staatiline:hover {
  cursor: default;
  transform: none;
  filter: none;
}

.nupurida {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--vahe-element);
}

/* ------------------------------------------------------------
   Avaplokk ja ringid
   ------------------------------------------------------------
   Kolm ringi lehel, kõik --ring mõõtu ja keskel: ümar kõrvalogo
   (avaplokk), kuldne treeningu orb ja hõbedane SPA orb — samad
   pildid mis äpi avaekraanil. Sama „hingamine" mis äpi orbil:
   ±3 % suurust, 9 s tsükkel.
   ------------------------------------------------------------ */

.avaplokk {
  padding-top: clamp(28px, 5vw, 56px);
}

.allalaadimine {
  margin-bottom: 40px;
}

.kora,
.orb-pilt {
  display: block;
  width: var(--ring);
  height: var(--ring);
  margin: 0 auto 34px;
  animation: hingamine 9s ease-in-out infinite;
}

.kora {
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(200, 168, 95, 0.55),
    0 0 46px rgba(200, 168, 95, 0.24);
}

.orb-pilt {
  filter: drop-shadow(0 0 40px rgba(200, 168, 95, 0.22));
}

.orb-pilt.hobe {
  filter: drop-shadow(0 0 36px rgba(194, 198, 210, 0.18));
  animation-delay: -4.5s;
}

@keyframes hingamine {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
  }
}

/* SPA moodulid: neli hõbedast nuppu nagu äpi SPA menüü, keskel.
   Kitsal ekraanil neli rida täislaiuses — täpselt nagu äpis. */
ul.moodulinupud {
  list-style: none;
  margin: 4px 0 34px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--vahe-element);
}

/* ------------------------------------------------------------
   Keelelipud (jaluses)
   ------------------------------------------------------------
   Lipud on värvilised ja see palett on kuldne-must. Lahendus ei
   ole lippude ümbervärvimine (siis nad ei ole enam lipud), vaid
   VAIKNE OLEK: veidi läbipaistev ja pehme varjuga, täies värvis
   alles siis, kui kursor neile läheb.
   ------------------------------------------------------------ */

.keeled p {
  margin-bottom: 12px;
  font-size: 0.88rem;
  color: var(--tuhk-hele);
}

.lipud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.lipp {
  display: block;
  width: 30px;
  height: auto;
  aspect-ratio: 28 / 20;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(58, 56, 51, 0.9);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
  opacity: 0.78;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.lipp:hover {
  opacity: 1;
  transform: translateY(-2px);
}

/* ------------------------------------------------------------
   Märkus ja täitmata koht
   ------------------------------------------------------------ */

/* Vaiksem lõik (vormi allmärkus, dokumendi kokkuvõte) — sama
   kirjatüüp, ilma kasti ja jooneta. */
.markus {
  color: var(--tuhk-hele);
  font-size: 0.95rem;
}

/* Täitmata koht — nurksulud, nagu äpi tekstiregistris. */
.taitmata {
  color: var(--kuld);
  background: rgba(200, 168, 95, 0.08);
  border-bottom: 1px dashed var(--kuld-tume);
  padding: 0 3px;
  border-radius: 3px;
}

/* ------------------------------------------------------------
   Vorm — sama telg: silt keskel, väli täislaiuses, nupud keskel
   ------------------------------------------------------------ */

form {
  margin-top: 36px;
  text-align: center;
}

.vali {
  margin-bottom: 28px;
}

.vali label {
  display: block;
  margin-bottom: 10px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--sampanja);
}

/* Sisendiväli VENIB servast servani — see on äpi reegli teine
   pool: nimekirjarida ja sisendiväli tohivad, nupp ei tohi. */
input[type="text"],
input[type="email"],
select,
textarea {
  width: 100%;
  min-height: var(--nupu-korgus);
  padding: 14px 16px;
  background: rgba(7, 7, 7, 0.72);
  border: 1px solid var(--tuhk);
  border-radius: var(--r-kiip);
  color: var(--tekst);
  font: inherit;
  line-height: 1.5;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

textarea {
  min-height: 190px;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: #6d675d;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--kuld);
  box-shadow: 0 0 0 3px rgba(200, 168, 95, 0.12);
  outline: none;
}

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--kuld) 50%),
    linear-gradient(135deg, var(--kuld) 50%, transparent 50%);
  background-position: calc(100% - 22px) calc(50% + 2px),
    calc(100% - 16px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 46px;
}

select option {
  background: var(--soe);
  color: var(--tekst);
}

.abitekst {
  margin: 10px 0 0;
  font-size: 0.9rem;
  color: var(--tuhk-hele);
}

/* Väljade rühm (kõrvaklapid: tootja + mudel) — pealkiri nagu silt,
   alasildid tavalises kirjas. Brauseri vaikeraam maha. */
fieldset.vali {
  border: 0;
  padding: 0;
  margin: 0 0 28px;
  min-width: 0;
}

fieldset.vali legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 10px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--sampanja);
}

.vali .alasilt {
  margin-top: 14px;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--tekst);
}

fieldset.vali legend + .alasilt {
  margin-top: 0;
}

/* Linnuke (uudiskiri): kast ja tekst ühel real, keskel nagu muu vorm. */
.vali .linnuke {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 0;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--tekst);
  cursor: pointer;
}

.vali .linnuke input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--kuld);
}

/* Rämpsupüünis: inimene seda ei näe ega saa fookust. */
.pyynis {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.viga {
  background: rgba(80, 30, 20, 0.34);
  border-radius: var(--r-kiip);
  padding: 14px 18px;
  margin-bottom: 26px;
  color: #f0c9bd;
  font-size: 0.95rem;
}

/* ------------------------------------------------------------
   Dokumenditekst (privaatsusreeglid)
   ------------------------------------------------------------
   Pealkiri ja kokkuvõte keskel nagu mujal; jaotised on pikk
   lugemistekst tabelite ja loeteludega ning seisavad vasakul —
   sama erand mis äpi nõusolekuväraval (pikk lõik vasakul,
   ülatekst keskel).
   ------------------------------------------------------------ */

.dokument {
  text-align: left;
}

.dokumendi-pais {
  text-align: center;
  margin-bottom: 44px;
}

.dokumendi-pais h1 {
  margin-bottom: 14px;
}

.dokumendi-pais .markus {
  margin-top: 26px;
}

.dokument h2 {
  margin: 44px 0 var(--vahe-pealkiri);
}

.dokument ul {
  padding-left: 22px;
  margin: 0 0 1.3em;
}

.dokument li {
  margin-bottom: 8px;
}

.tabeliraam {
  overflow-x: auto;
  margin: 0 0 1.4em;
  border: 1px solid var(--tuhk);
  border-radius: var(--r-kaart);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  min-width: 520px;
}

th,
td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(58, 56, 51, 0.6);
  vertical-align: top;
}

th {
  color: var(--kuld);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.76rem;
  background: rgba(22, 21, 19, 0.8);
}

tr:last-child td {
  border-bottom: 0;
}

/* ------------------------------------------------------------
   Jalus — keskel, ilma jooneta
   ------------------------------------------------------------ */

footer {
  padding: 36px 0 60px;
  text-align: center;
  color: var(--tuhk-hele);
  font-size: 0.92rem;
}

.jaluse-riba {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}

footer p {
  margin: 0 0 4px;
}

footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
}

footer a {
  color: var(--tuhk-hele);
  text-decoration: none;
}

footer a:hover {
  color: var(--tekst);
}

/* ------------------------------------------------------------
   Väiksed ekraanid
   ------------------------------------------------------------ */

@media (max-width: 560px) {
  body {
    font-size: 16px;
  }
  .nupp {
    width: 100%;
  }
  .nupurida,
  ul.moodulinupud {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Printimine: privaatsusreeglid peavad paberil loetavad olema. */
@media print {
  body {
    background: #fff;
    color: #000;
  }
  #taust,
  body::before,
  header nav,
  footer,
  .nupp {
    display: none !important;
  }
  h1,
  h2,
  h3,
  p,
  li,
  td,
  th {
    color: #000 !important;
  }
  .tabeliraam,
  table,
  th,
  td {
    border-color: #999 !important;
  }
}