/* Cycling Mentor, strani prijave na gostitelju aplikacije: login.html (/login), signup.html (/registracija, /signup) in
   link.html (povezava iz bota, [auth].link_path). Vir oblikovanja je DESIGN.md 10 (»Hi-vis on tarmac«, odločitev operaterja
   25. 10. 2026: »prijava in vpis sledita« domači strani). Osnova je /landing.css (žetoni, pisavi, gumba, znak, stolpci
   treninga); tu sta samo postavitev in obrazec, z žetoni iz osnove (tests/test_public_pages.py: vsak var() je definiran).
   Strani nimajo slogov v strani; skripte ostanejo vgrajene (tests/test_conn_cap_pages.py, BUSY-1). */

/* lupina: znak, vsebina in na dnu prvega zaslona današnji trening kot obzorje, kot na domači strani */
.auth {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  /* viewport-fit=cover: na telefonu z zarezo vsebina ostane v varnem delu zaslona */
  padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
.auth > .wrap { width: 100%; }
.auth__main { flex: 1 0 auto; display: grid; align-content: center; gap: var(--s-6); padding-block: var(--s-4) var(--s-7); }
/* edini prikazni element strani, zato večji od naslova domače strani (64 px pri 320 in 390, 128 px od 1024) */
.auth__title { font-size: clamp(4rem, 1rem + 12vw, 8rem); }
.auth__title span { display: block; }
.auth__form { width: 100%; max-width: 26rem; }
.auth__horizon { padding-bottom: var(--s-5); }
@media (min-width: 64em) {
  /* naslov in obrazec na isti zgornji črti: korak kode je višji, zato bi poravnava po sredini obrazec premikala */
  .auth__main { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; column-gap: var(--s-8); }
}

/* koraka (e-pošta, koda) v isti celici mreže: višina je višja od obeh, zato preklop ne premakne strani */
.steps { display: grid; }
.step { grid-area: 1 / 1; visibility: hidden; opacity: 0; }
.step.is-active { visibility: visible; opacity: 1; }

/* polje: oznaka nad njim; belo polje na nočni podlagi je najsvetlejša ploskev strani in na soncu najbolj vidna tarča */
.label { display: block; margin-bottom: var(--s-2); font-weight: 700; }
.input {
  display: block;
  width: 100%;
  min-height: var(--tap);
  padding: var(--s-3) var(--s-4);
  border: 0;
  border-radius: var(--r-s);
  background: var(--day-surface);
  color: var(--day-fg);
  font: 400 var(--t-1) / 1.6 var(--font-body);
  appearance: none;
}
.input::placeholder { color: var(--day-muted); opacity: 1; }
.input[aria-invalid="true"] { box-shadow: inset 0 0 0 3px var(--day-error); }
/* koda: Atkinson Hyperlegible Next (števke, ki se jih ne zamenja), ne ležeči ozki prikazni rez */
.input--code {
  padding-inline: var(--s-2);
  font-size: var(--t-4);
  font-weight: 800;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-align: center;
}

/* sporočilo pod poljem: besedilo pove napako, znak »!« je samo okras (alternativno besedilo prazno). Sporočilo je en tekoč
   odstavek: skripta ga sestavi iz besedila, povezave in <br> (link.html, login.html), zato blok, ne flex (flex bi vsak kos
   postavil v svoj stolpec). Znak je zunaj toka v odmiku pred besedilom, sredina na sredini prve vrstice; mere sporočila
   (vrstica, znak) sta lastnosti komponente, ne žetona. */
.alert {
  --alert-line: calc(1.45 * var(--t-1));
  --alert-mark: calc(1.25 * var(--t-0));
  position: relative;
  color: var(--error);
  font-size: var(--t-1);
  font-weight: 700;
  line-height: var(--alert-line);
}
.alert:not(:empty) { margin-top: var(--s-3); padding-inline-start: calc(var(--alert-mark) + var(--s-2)); }
.alert:not(:empty)::before {
  content: "!";
  content: "!" / "";
  position: absolute;
  inset-inline-start: 0;
  top: calc((var(--alert-line) - var(--alert-mark)) / 2);
  display: grid;
  place-items: center;
  width: var(--alert-mark);
  height: var(--alert-mark);
  border-radius: 50%;
  background: var(--error);
  color: var(--bg);
  font-size: var(--t-0);
  font-weight: 800;
  line-height: 1;
}
.alert a { color: var(--fg); overflow-wrap: anywhere; }

/* glavni gumb čez vso širino; med pošiljanjem drugo besedilo v isti celici, zato gumb ne spremeni širine */
.btn--block { display: grid; place-items: center; width: 100%; margin-top: var(--s-4); padding-block: var(--s-4); cursor: pointer; }
.btn--block > span { grid-area: 1 / 1; }
.btn .busy, .btn[aria-busy="true"] .idle { visibility: hidden; }
.btn[aria-busy="true"] .busy { visibility: visible; }
.btn:disabled, .btn[aria-busy="true"] { cursor: progress; }
.btn[aria-disabled="true"], .btn[aria-disabled="true"]:hover { border-color: var(--border); background: transparent; color: var(--muted); cursor: not-allowed; }

.sent { min-height: 3.2em; margin-bottom: var(--s-5); overflow-wrap: anywhere; }
.sent strong { font-weight: 700; }
.nowrap { white-space: nowrap; }
.auth a:not(.btn) { text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.auth a:not(.btn):hover { text-decoration-thickness: 2px; }
.switch { margin-top: var(--s-4); }
.switch a:not(.btn), .check a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; }

.actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--s-4); margin-top: var(--s-2); }
.text-btn {
  min-height: var(--tap);
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg);
  font: 600 var(--t-1) / 1.2 var(--font-body);
  font-variant-numeric: tabular-nums;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.text-btn:hover { text-decoration-thickness: 2px; }
.text-btn[aria-disabled="true"], .text-btn:disabled { color: var(--muted); text-decoration: none; cursor: default; }

/* vpis: polja, potrditev pogojev, past za robote, zaprt vpis */
.field + .field { margin-top: var(--s-4); }
.hint { margin-top: var(--s-2); color: var(--muted); font-size: var(--t-0); }
/* potrditveno polje svetlo kot vnosna polja (brskalnikovo temno polje ima na nočni podlagi šibek rob); označeno je limetino.
   Oznaka objame polje, zato je cilj cela vrstica (najmanj 44 px), ne samo kvadrat 24 px */
.check {
  display: grid;
  grid-template-columns: var(--s-5) minmax(0, 1fr);
  align-items: center;
  gap: var(--s-3);
  min-height: var(--tap);
  margin-top: var(--s-5);
  cursor: pointer;
}
.check input { width: var(--s-5); height: var(--s-5); margin: 0; color-scheme: light; accent-color: var(--accent); }
.check input[aria-invalid="true"] { outline: 2px solid var(--error); outline-offset: 2px; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.closed { font-size: var(--t-2); line-height: 1.45; }
#signup[data-code="0"] #code-field { display: none; }
#signup[data-mode="closed"] .steps { display: none; }
#signup[data-mode="open"] #closed { display: none; }

/* gibanje: preklop korakov odgovori na kolesarjevo dejanje; ob prefers-reduced-motion: reduce brez prehoda */
@media (prefers-reduced-motion: no-preference) {
  .step { transition: opacity var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast); }
  .step.is-active { transition: opacity var(--dur-fast) var(--ease-out), visibility 0s; }
}

/* trener: začetek (build_trainer.py) */
.auth { position: relative; isolation: isolate; }
.auth__horizon { position: relative; }
/* kolesar na trenažerju v --border: pod 64em desno v pasu obzorja nad stolpci, v toku strani, zato nikoli pod obrazcem; od
   64em v levem stolpcu pod naslovom, za vsebino (z-index -1), kjer je edino besedilo naslov v --fg (7,66:1 na --border;
   --muted bi imel 4,49:1, limeta pod besedilom 1,16:1, zato risba ne sme pod obrazec) */
.trainer { display: block; width: auto; height: clamp(8rem, 17vh, 11rem); margin: 0 0 var(--s-2) auto; color: var(--border); }
.trainer .cm-accent { fill: var(--accent); stroke: none; }
@media (min-width: 64em) {
  .trainer { position: absolute; z-index: -1; left: var(--gutter); bottom: 100%; height: clamp(10rem, 26vh, 17rem); margin: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .trainer .tr-crank { animation: tr-crank 0.75s linear infinite; }
  .trainer .tr-thigh { animation: tr-thigh 0.75s linear infinite; }
  .trainer .tr-shin { animation: tr-shin 0.75s linear infinite; }
  .trainer .tr-thigh--far, .trainer .tr-shin--far { animation-delay: calc(0.75s / -2); }
  .trainer .tr-fly { animation: tr-crank calc(0.75s / 3) linear infinite; }
  .trainer .tr-body { animation: tr-body calc(0.75s / 2) ease-in-out infinite; }
  .is-hidden .trainer * { animation-play-state: paused; }
  @keyframes tr-crank { from { transform: rotate(-30deg); } to { transform: rotate(330deg); } }
  @keyframes tr-thigh { 0% { transform: rotate(23.8deg); } 2.78% { transform: rotate(26.41deg); } 5.56% { transform: rotate(29.55deg); } 8.33% { transform: rotate(33.1deg); } 11.11% { transform: rotate(36.98deg); } 13.89% { transform: rotate(41.06deg); } 16.67% { transform: rotate(45.24deg); } 19.44% { transform: rotate(49.37deg); } 22.22% { transform: rotate(53.3deg); } 25% { transform: rotate(56.86deg); } 27.78% { transform: rotate(59.84deg); } 30.56% { transform: rotate(62.06deg); } 33.33% { transform: rotate(63.47deg); } 36.11% { transform: rotate(64.1deg); } 38.89% { transform: rotate(64.06deg); } 41.67% { transform: rotate(63.5deg); } 44.44% { transform: rotate(62.52deg); } 47.22% { transform: rotate(61.2deg); } 50% { transform: rotate(59.58deg); } 52.78% { transform: rotate(57.69deg); } 55.56% { transform: rotate(55.54deg); } 58.33% { transform: rotate(53.12deg); } 61.11% { transform: rotate(50.43deg); } 63.89% { transform: rotate(47.47deg); } 66.67% { transform: rotate(44.25deg); } 69.44% { transform: rotate(40.8deg); } 72.22% { transform: rotate(37.19deg); } 75% { transform: rotate(33.53deg); } 77.78% { transform: rotate(29.97deg); } 80.56% { transform: rotate(26.71deg); } 83.33% { transform: rotate(23.95deg); } 86.11% { transform: rotate(21.86deg); } 88.89% { transform: rotate(20.57deg); } 91.67% { transform: rotate(20.15deg); } 94.44% { transform: rotate(20.58deg); } 97.22% { transform: rotate(21.83deg); } 100% { transform: rotate(23.8deg); } }
  @keyframes tr-shin { 0% { transform: rotate(85.8deg); } 2.78% { transform: rotate(80.3deg); } 5.56% { transform: rotate(74.54deg); } 8.33% { transform: rotate(68.65deg); } 11.11% { transform: rotate(62.71deg); } 13.89% { transform: rotate(56.87deg); } 16.67% { transform: rotate(51.25deg); } 19.44% { transform: rotate(46.06deg); } 22.22% { transform: rotate(41.52deg); } 25% { transform: rotate(37.96deg); } 27.78% { transform: rotate(35.71deg); } 30.56% { transform: rotate(35.05deg); } 33.33% { transform: rotate(36.08deg); } 36.11% { transform: rotate(38.65deg); } 38.89% { transform: rotate(42.46deg); } 41.67% { transform: rotate(47.16deg); } 44.44% { transform: rotate(52.47deg); } 47.22% { transform: rotate(58.15deg); } 50% { transform: rotate(64.03deg); } 52.78% { transform: rotate(69.97deg); } 55.56% { transform: rotate(75.84deg); } 58.33% { transform: rotate(81.55deg); } 61.11% { transform: rotate(86.98deg); } 63.89% { transform: rotate(92.03deg); } 66.67% { transform: rotate(96.59deg); } 69.44% { transform: rotate(100.53deg); } 72.22% { transform: rotate(103.74deg); } 75% { transform: rotate(106.1deg); } 77.78% { transform: rotate(107.51deg); } 80.56% { transform: rotate(107.91deg); } 83.33% { transform: rotate(107.28deg); } 86.11% { transform: rotate(105.65deg); } 88.89% { transform: rotate(103.1deg); } 91.67% { transform: rotate(99.71deg); } 94.44% { transform: rotate(95.62deg); } 97.22% { transform: rotate(90.95deg); } 100% { transform: rotate(85.8deg); } }
  @keyframes tr-body { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-1.4deg); } }
}
/* trener: konec */