/* Maketa přihlášení (/mock-login) — vizuální jazyk Kolega: teplá off-white,
   cihlová značka, tyrkysová akce, kulaté rohy a kostičková spodní hrana
   u tlačítek. Soubor je schválně samostatný: přihlášení nesdílí s pultem ani
   konzolí žádnou strukturu, tak ať si nemusí tahat jejich CSS.

   Barva akce je tyrkys, ne cihlová — plná červená na tlačítku se čte jako
   „smazat". Cihlová zůstává značce (kostička, wordmark, pozadí). Stejné
   pravidlo jako v maketě pultu a konzole.

   Světlý režim je výchozí (Kolego je světlá aplikace), ◐ vpravo nahoře přepne
   do tmavé varianty. Všechen pohyb — nástup karty, paralaxa, mrknutí maskota —
   se vypíná přes `prefers-reduced-motion`. */

/* ---------- stránka ----------
   Maketa přihlášení je jediná, která nemá pod sebou style.css, takže si musí
   vynulovat výchozí `margin` na body sama — jinak 8 px kolem udělá 16 px
   přetečení a stránka nabídne posuvník, přestože se celá vejde.
   `overflow-x: clip` drží kostičky z paralaxy uvnitř, ale nedělá ze stránky
   posouvací kontejner (na rozdíl od `hidden`), takže sticky a kotvy fungují dál. */
html, body { margin: 0; padding: 0; }
body { background: #F7F7F4; overflow-x: hidden; }
@supports (overflow: clip) { body { overflow-x: clip; } }
body:has(.lg.dark) { background: #181B20; }

/* ---------- tokeny ---------- */
.lg {
  --paper:   #F7F7F4;
  --paper-2: #EFEEEA;
  --card:    #FFFFFF;
  --sunk:    #F7F6F2;
  --line:    rgba(32, 36, 43, .13);
  --line-2:  rgba(32, 36, 43, .22);
  --tx:      #20242B;
  --dim:     #6A7078;
  --faint:   #9A9A94;

  --cta-tx:   #FFFFFF;   /* text na tlačítku akce */
  --acc:      #FF3333;   /* značka */
  --acc-2:    #D92626;
  --cta:      #129E9C;   /* akce */
  --cta-edge: #0E7E7C;
  --cta-soft: rgba(18, 158, 156, .12);
  --bad:      #C8352F;
  --bad-soft: rgba(200, 53, 47, .1);
  --ok:       #3B9E5F;
  --warn:     #9A6A12;
  --warn-soft: rgba(245, 191, 96, .22);

  --head: "Baloo 2", "Source Sans 3", system-ui, sans-serif;
  --disp: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --r: 12px;

  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--paper); color: var(--tx);
  font: 400 15px/1.55 var(--disp);
  -webkit-font-smoothing: antialiased;
}

.lg.dark {
  --paper:   #181B20;
  --paper-2: #14171B;
  --card:    #20242B;
  --sunk:    #262B33;
  --line:    rgba(247, 247, 244, .14);
  --line-2:  rgba(247, 247, 244, .26);
  --tx:      #E2E0DB;
  --dim:     #9A9A94;
  --faint:   #7C7C77;
  --cta:      #18C5C3;
  --cta-edge: #129E9C;
  --cta-soft: rgba(24, 197, 195, .14);
  --cta-tx:   #082A29;
  --bad:      #F08076;
  --bad-soft: rgba(240, 128, 118, .12);
  --warn:     #F5BF60;
  --warn-soft: rgba(245, 191, 96, .14);
}

.lg *, .lg *::before, .lg *::after { box-sizing: border-box; }
.lg .mono { font-family: var(--mono); font-size: .92em; }

/* ---------- kostičky v pozadí (paralaxa) ----------
   Leží pod kartou, nereagují na klik a nesou jen barvu značky. Posouvá je
   login.js podle myši a scrollu; `--px`/`--py` jsou pixely, `--rot` je dané. */
.lg-plx { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.lg-plxi {
  position: absolute; display: block;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) rotate(var(--rot, 0deg));
  transition: transform .5s cubic-bezier(.2, .9, .25, 1);
  animation: lg-float 9s ease-in-out infinite alternate;
  animation-delay: calc(var(--m) * -12ms);
}
.lg-plxi .brick { width: var(--m); height: var(--m); display: block; }
.lg-plxi .brick .b { fill: var(--acc); }
.lg-plxi .brick .e { fill: var(--acc-2); }
@keyframes lg-float { to { margin-top: -14px; } }

/* ---------- hlavička ---------- */
.lg-top {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px;
}
.lg-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--tx); }
.lg-brand .brick { width: 24px; height: 24px; display: block; }
.lg-brand .brick .b { fill: var(--acc); }
.lg-brand .brick .e { fill: var(--acc-2); opacity: .55; }
.lg-brand .brick .f { fill: #fff; }
.lg-brand .brick .s { fill: none; stroke: #fff; stroke-width: 8; stroke-linecap: round; }
.lg-brand .logo-tx { font: 700 19px/1 var(--head); letter-spacing: -.01em; }
.lg-brand .ltr { display: inline-block; animation: lg-ltr .5s both; animation-delay: calc(.25s + var(--i) * .05s); }
.lg-brand:hover .brick { transform: translateY(-2px) rotate(-6deg); transition: transform .25s cubic-bezier(.2, .9, .25, 1); }
@keyframes lg-ltr { from { opacity: 0; transform: translateY(6px); } }

.lg-theme {
  width: 32px; height: 32px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--line); background: none; color: var(--dim); font-size: 15px;
}
.lg-theme:hover { color: var(--tx); border-color: var(--line-2); }

/* ---------- plocha a karta ---------- */
/* plocha si bere, co po hlavičce zbylo — počítat 100vh minus hlavička by se
   rozjelo o pixel, jakmile se změní písmo nebo výška tlačítka */
.lg-wrap {
  position: relative; z-index: 2; flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 20px 40px;
}
.lg-card {
  width: 100%; max-width: 400px; background: var(--card);
  border: 1px solid var(--line); border-radius: 18px;
  padding: 26px 26px 22px; margin-top: -18px;
  box-shadow: 0 18px 44px rgba(32, 36, 43, .09), 0 2px 6px rgba(32, 36, 43, .04);
  animation: lg-card-in .55s cubic-bezier(.2, .9, .25, 1) both; animation-delay: .1s;
}
.lg.dark .lg-card { box-shadow: 0 18px 44px rgba(0, 0, 0, .4); }
@keyframes lg-card-in { from { opacity: 0; transform: translateY(14px); } }

.lg-card h1 { margin: 0 0 4px; font: 700 25px/1.2 var(--head); letter-spacing: -.015em; }
.lg-sub { margin: 0 0 18px; color: var(--dim); font-size: 14px; }
.lg-sub b { color: var(--tx); font-weight: 600; }

/* panel se vymění, ne překreslí — proto krátký nástup zleva/zprava */
.lg-panel[hidden] { display: none; }
.lg-panel { animation: lg-panel-in .3s cubic-bezier(.2, .9, .25, 1) both; }
@keyframes lg-panel-in { from { opacity: 0; transform: translateX(10px); } }
.lg-card.back .lg-panel { animation-name: lg-panel-back; }
@keyframes lg-panel-back { from { opacity: 0; transform: translateX(-10px); } }

/* ---------- maskot ---------- */
.lg-mascot {
  position: relative; z-index: 3;
  filter: drop-shadow(0 6px 14px rgba(255, 51, 51, .22));
  animation: lg-drop .7s cubic-bezier(.2, 1.3, .4, 1) both;
}
@keyframes lg-drop { from { opacity: 0; transform: translateY(-26px) rotate(-8deg); } }
.mascot { width: var(--m); height: var(--m); display: block; overflow: visible; }
.mascot .b { fill: var(--acc); }
.mascot .e { fill: var(--acc-2); opacity: .55; }
.mascot .f { fill: #fff; }
.mascot .s { fill: none; stroke: #fff; stroke-width: 8; stroke-linecap: round; }

/* oči jdou za kurzorem; login.js sype `--ex`/`--ey` v jednotkách viewBoxu */
.mascot .eyes { transform: translate(var(--ex, 0px), var(--ey, 0px)); transition: transform .18s ease-out; }
.mascot .lids { opacity: 0; transition: opacity .12s; }
.mascot .lid { fill: none; stroke: var(--acc-2); stroke-width: 9; stroke-linecap: round; }

/* nálady: pusa je vždycky právě jedna */
.mascot .mouth { opacity: 0; transition: opacity .18s; }
.mascot .m-ok { opacity: 1; }
.lg-mascot.is-think .m-ok, .lg-mascot.is-happy .m-ok, .lg-mascot.is-sad .m-ok { opacity: 0; }
.lg-mascot.is-think .m-think, .lg-mascot.is-happy .m-happy, .lg-mascot.is-sad .m-sad { opacity: 1; }

/* u hesla si zakryje oči (víčka dolů), po odhalení hesla zase kouká */
.lg-mascot.is-shy .lids { opacity: 1; }
.lg-mascot.is-shy .eyes { opacity: 0; }
.lg-mascot.is-happy .mascot { animation: lg-hop .5s cubic-bezier(.2, .9, .25, 1); }
.lg-mascot.is-sad .mascot { animation: lg-shake .4s; }
@keyframes lg-hop { 40% { transform: translateY(-10px) rotate(4deg); } }
@keyframes lg-shake { 20% { transform: translateX(-6px) rotate(-3deg); } 60% { transform: translateX(6px) rotate(3deg); } }

/* mrkání: krátké zavření víček, spouští ho login.js */
.lg-mascot.blink .lids { opacity: 1; }
.lg-mascot.blink .eyes { opacity: 0; }

/* ---------- Google ---------- */
.lg-google {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 11px 14px; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: var(--r); background: var(--card);
  font: 600 15px/1 var(--disp); color: var(--tx);
  transition: background .15s, border-color .15s, transform .12s;
}
.lg-google:hover { background: var(--sunk); border-color: var(--line-2); }
.lg-google:active { transform: translateY(1px); }
.lg-google.busy { color: var(--dim); pointer-events: none; }
.g-ico { width: 18px; height: 18px; flex: none; }
.lg-hint-g { margin: 8px 0 0; text-align: center; font-size: 12.5px; color: var(--faint); }

.lg-or {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 16px; color: var(--faint); font-size: 12.5px; text-transform: lowercase;
}
.lg-or::before, .lg-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------- formulář ---------- */
.lg-form { display: flex; flex-direction: column; gap: 13px; }
.lg-f { display: block; }
.lg-lbl {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-bottom: 5px; font-size: 12.5px; font-weight: 600; color: var(--dim);
}
.lg-in {
  width: 100%; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--sunk);
  font: 400 15px/1.3 var(--disp); color: var(--tx);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.lg-in::placeholder { color: var(--faint); }
.lg-in:focus {
  outline: none; background: var(--card);
  border-color: var(--cta); box-shadow: 0 0 0 3px var(--cta-soft);
}
.lg-card.err .lg-in:focus { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.lg-in[type="password"] { font-family: var(--mono); letter-spacing: .08em; }

.lg-pass { position: relative; display: block; }
.lg-pass .lg-in { padding-right: 42px; }
.lg-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 8px; background: none; color: var(--faint);
}
.lg-eye:hover { color: var(--dim); background: var(--sunk); }
.lg-eye svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.lg-eye[aria-pressed="true"] { color: var(--cta); }

.lg-link { font-weight: 600; color: var(--cta); text-decoration: none; }
.lg-link:hover { text-decoration: underline; }

.lg-check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--dim); cursor: pointer; }
.lg-check input { width: 16px; height: 16px; accent-color: var(--cta); cursor: pointer; }

.lg-btn {
  display: block; width: 100%; padding: 12px 16px; margin-top: 3px; cursor: pointer;
  border: 0; border-radius: var(--r); background: var(--cta); color: var(--cta-tx);
  box-shadow: inset 0 -3px 0 var(--cta-edge);
  font: 700 15px/1.2 var(--head); text-align: center; text-decoration: none;
  transition: transform .12s, filter .15s;
}
.lg-btn:hover { filter: brightness(1.06); }
.lg-btn:active { transform: translateY(2px); box-shadow: inset 0 -1px 0 var(--cta-edge); }
.lg-btn.busy { pointer-events: none; filter: saturate(.55); }
.lg-btn.ghost {
  background: none; color: var(--dim); box-shadow: none;
  border: 1px solid var(--line); font-weight: 600;
}
.lg-btn.ghost:disabled { cursor: default; color: var(--faint); }
.lg-btn.ghost em { font-style: normal; font-family: var(--mono); font-size: 12.5px; }

.lg-back, .lg-link-b {
  display: block; width: 100%; margin-top: 12px; padding: 4px; cursor: pointer;
  border: 0; background: none; color: var(--dim);
  font: 600 13.5px/1.3 var(--disp); text-align: center; text-decoration: none;
}
.lg-back:hover, .lg-link-b:hover { color: var(--tx); }
.lg-link-b { color: var(--cta); }

/* ---------- hlášky ---------- */
.lg-caps, .lg-err {
  margin: 0; padding: 9px 11px; border-radius: 9px; font-size: 13px;
}
.lg-caps { background: var(--warn-soft); color: var(--warn); }
.lg-err { background: var(--bad-soft); color: var(--bad); }
.lg-card.err .lg-err { animation: lg-err-in .35s; }
@keyframes lg-err-in { 30% { transform: translateX(-5px); } 70% { transform: translateX(5px); } }

.lg-demo {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed var(--line);
  font-size: 12.5px; color: var(--faint); text-align: center;
}
.lg-note { position: relative; z-index: 2; margin: 22px 0 0; font-size: 12.5px; color: var(--faint); }

/* ---------- síla hesla ---------- */
.lg-str { display: flex; align-items: center; gap: 5px; margin-top: -4px; }
.lg-str i { flex: 1; height: 4px; border-radius: 2px; background: var(--line); transition: background .2s; }
.lg-str em { font-style: normal; font-size: 12px; color: var(--faint); min-width: 74px; text-align: right; }
.lg-str[data-s="1"] i:nth-child(-n+1), .lg-str[data-s="2"] i:nth-child(-n+2) { background: var(--bad); }
.lg-str[data-s="3"] i:nth-child(-n+3) { background: var(--warn); }
.lg-str[data-s="4"] i { background: var(--ok); }

/* ---------- obálka na obrazovce „odesláno" ---------- */
.lg-mail { position: relative; width: 78px; height: 52px; margin: 4px auto 18px; }
.lg-mail-b, .lg-mail-f { position: absolute; inset: 0; border-radius: 8px; }
.lg-mail-b { background: var(--acc); box-shadow: inset 0 -4px 0 var(--acc-2); }
.lg-mail-f {
  border-radius: 8px 8px 0 0; background: #fff; opacity: .82;
  clip-path: polygon(0 0, 100% 0, 50% 62%);
  transform-origin: top; animation: lg-flap 2.6s ease-in-out infinite;
}
@keyframes lg-flap { 0%, 70%, 100% { transform: rotateX(0); } 85% { transform: rotateX(38deg); } }

/* ---------- hotovo ---------- */
.lg-done h1 { color: var(--ok); }
.lg-done .lg-btn { margin-top: 16px; }

/* ---------- úzké obrazovky ---------- */
/* Na telefonu se karta se vším všudy do výšky tak tak vejde — proto užší
   hlavička, menší odsazení a kratší patka. Cíl je, aby se nemuselo scrollovat. */
@media (max-width: 480px) {
  .lg-top { padding: 14px 16px; }
  .lg-wrap { padding: 0 16px 18px; }
  .lg-mascot .mascot { width: 76px; height: 76px; }
  .lg-card { padding: 22px 18px 18px; border-radius: 16px; }
  .lg-card h1 { font-size: 22px; }
  .lg-note { margin-top: 14px; }
  .lg-plxi { display: none; }
}

/* Nízké okno (rozdělaná obrazovka, notebook s malou výškou, telefon na šířku):
   karta se stáhne, ať se vejde celá — je to přihlášení, scrollovat se v něm nemá. */
@media (max-height: 720px) {
  .lg-top { padding: 12px 20px; }
  .lg-mascot .mascot { width: 66px; height: 66px; }
  .lg-card { padding: 20px 22px 16px; margin-top: -12px; }
  .lg-card h1 { font-size: 21px; }
  .lg-sub { margin-bottom: 13px; }
  .lg-or { margin: 13px 0 12px; }
  .lg-form { gap: 10px; }
  .lg-demo { margin-top: 12px; padding-top: 10px; }
  .lg-wrap { padding-bottom: 16px; }
  .lg-note { margin-top: 12px; }
}

/* ---------- klid ---------- */
@media (prefers-reduced-motion: reduce) {
  .lg-card, .lg-panel, .lg-mascot, .lg-brand .ltr { animation: none; }
  .lg-plxi { animation: none; transition: none; }
  .lg-mail-f { animation: none; }
  .mascot .eyes, .mascot .lids, .mascot .mouth { transition: none; }
}