/* ============================================================
   Vokabl – Oberfläche
   Route A: iOS-Grammatik, SF-Typo, Farbe bedeutet Sprache.
   ============================================================ */

:root {
  --bg:        #F2F2F7;
  --card:      #FFFFFF;
  --card-2:    #F7F7FA;
  --text:      #000000;
  --text-2:    #55555C;
  --text-3:    #6C6C70;
  --sep:       #D8D8DC;
  --sep-soft:  #E8E8ED;
  --brand:     #0B0B0E;
  --on-brand:  #FFFFFF;
  --tint:      #0A5FE0;

  --ok:        #157F3D;
  --ok-soft:   #EEF7F1;
  --warn:      #8A5A0B;
  --warn-soft: #FCF1DE;
  --bad:       #A61F30;
  --bad-soft:  #FDEEF0;

  /* Farbwelten je Sprache */
  --lang-fr:      #D2273C;
  --lang-fr-soft: #FBE9EB;
  --lang-en:      #0A6CFF;
  --lang-en-soft: #E9F0FF;
  --lang-es:      #C2410C;
  --lang-es-soft: #FCEEE6;
  --lang-it:      #157F5B;
  --lang-it-soft: #E7F5F0;
  --lang-la:      #6D28D9;
  --lang-la-soft: #F1EBFD;

  --r-sm: 14px;
  --r-md: 18px;
  --r-lg: 22px;

  --tap: 44px;

  --avatar-s: 32%;
  --avatar-l: 82%;
  --avatar-text-l: 22%;

  --shadow: #000000;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #000000;
    --card:      #1C1C1E;
    --card-2:    #161618;
    --text:      #FFFFFF;
    --text-2:    #C8C8D0;
    --text-3:    #98989F;
    --sep:       #2C2C2E;
    --sep-soft:  #232326;
    --brand:     #FFFFFF;
    --on-brand:  #0B0B0E;
    --tint:      #5AA9FF;

    --ok:        #32D74B;
    --ok-soft:   #10241A;
    --warn:      #FFD426;
    --warn-soft: #2A2110;
    --bad:       #FF5C6E;
    --bad-soft:  #2A1216;

    --lang-fr:      #FF5C6E;
    --lang-fr-soft: #2A1216;
    --lang-en:      #4C9BFF;
    --lang-en-soft: #101E33;
    --lang-es:      #FF8A4C;
    --lang-es-soft: #2A1A10;
    --lang-it:      #3DD9A0;
    --lang-it-soft: #0F2620;
    --lang-la:      #B68CFF;
    --lang-la-soft: #1E1630;

    --avatar-s: 28%;
    --avatar-l: 30%;
    --avatar-text-l: 86%;

    --shadow: #000000;
  }
}

:root[data-theme="dark"] {
  --bg:        #000000;
  --card:      #1C1C1E;
  --card-2:    #161618;
  --text:      #FFFFFF;
  --text-2:    #C8C8D0;
  --text-3:    #98989F;
  --sep:       #2C2C2E;
  --sep-soft:  #232326;
  --brand:     #FFFFFF;
  --on-brand:  #0B0B0E;
  --tint:      #5AA9FF;

  --ok:        #32D74B;
  --ok-soft:   #10241A;
  --warn:      #FFD426;
  --warn-soft: #2A2110;
  --bad:       #FF5C6E;
  --bad-soft:  #2A1216;

  --lang-fr:      #FF5C6E;
  --lang-fr-soft: #2A1216;
  --lang-en:      #4C9BFF;
  --lang-en-soft: #101E33;
  --lang-es:      #FF8A4C;
  --lang-es-soft: #2A1A10;
  --lang-it:      #3DD9A0;
  --lang-it-soft: #0F2620;
  --lang-la:      #B68CFF;
  --lang-la-soft: #1E1630;

  --avatar-s: 28%;
  --avatar-l: 30%;
  --avatar-text-l: 86%;

  --shadow: #000000;
}

/* ---------- Grundlagen ---------- */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.5px; line-height: 1.1; }
h1 { font-size: 32px; letter-spacing: -1px; }
h2 { font-size: 22px; letter-spacing: -0.5px; }
p  { margin: 0; }

a { color: var(--tint); text-decoration: none; }
a:hover { opacity: 0.8; }

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible { outline: 2.5px solid var(--tint); outline-offset: 2px; border-radius: 6px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Gerüst ---------- */

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 560px;
  margin: 0 auto;
}

.screen {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: max(24px, env(safe-area-inset-top)) 16px 0;
}

.screen--plain { background: var(--card); }

.screen__body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-bottom: 20px;
}

.screen__foot {
  position: sticky;
  bottom: 0;
  padding: 14px 0 max(22px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 62%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.screen--plain .screen__foot {
  background: linear-gradient(to top, var(--card) 62%, transparent);
}

/* ---------- Kopfzeile ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--tap);
  margin-bottom: 4px;
}

.topbar__title { flex-grow: 1; font-size: 17px; font-weight: 600; letter-spacing: -0.3px; }

.iconbtn {
  width: var(--tap);
  height: var(--tap);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--tint);
  border-radius: 50%;
}
.iconbtn--back { margin-left: -12px; }
.iconbtn--plain { color: var(--text-3); }

/* ---------- Bausteine ---------- */

.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-3);
}

.muted { color: var(--text-2); font-size: 15px; }
.small { font-size: 13px; color: var(--text-3); }

.card {
  background: var(--card);
  border-radius: var(--r-lg);
  padding: 17px;
}

.stack { display: flex; flex-direction: column; gap: 10px; }
.stack--tight { gap: 6px; }
.row { display: flex; align-items: center; gap: 12px; }
.row--top { align-items: flex-start; }
.grow { flex-grow: 1; }

.list {
  background: var(--card);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.list__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  min-height: 56px;
  color: var(--text);
}
.list__item + .list__item { border-top: 1px solid var(--sep-soft); }

/* ---------- Schaltflächen ---------- */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--brand);
  color: var(--on-brand);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.2px;
  text-align: center;
  transition: opacity 0.15s;
}
.btn:active { opacity: 0.75; }
.btn[disabled] { opacity: 0.4; pointer-events: none; }

/* Der Rückfall auf die Markenfarbe ist Absicht: ohne ihn wird der Knopf
   unsichtbar, sobald --lang im Kontext fehlt. */
.btn--lang { background: var(--lang, var(--brand)); color: #FFFFFF; }
.btn--ghost { background: transparent; border: 1.5px solid var(--sep); color: var(--text); }
.btn--quiet { background: transparent; color: var(--tint); min-height: 48px; font-weight: 500; }
.btn--sm { min-height: 38px; padding: 0 14px; font-size: 15px; border-radius: 19px; }
.btn--chip {
  min-height: 36px; padding: 0 13px; font-size: 14px; font-weight: 600;
  border-radius: 18px; background: var(--card-2); color: var(--text);
}

/* ---------- Formulare ---------- */

.field { display: flex; flex-direction: column; gap: 7px; }
.field__label { font-size: 13px; font-weight: 600; color: var(--text-2); }

.input {
  width: 100%;
  min-height: 52px;
  padding: 0 15px;
  border: 1.5px solid var(--sep);
  border-radius: 13px;
  background: var(--card);
  font-size: 17px;
}
.input:focus { border-color: var(--text); outline: none; }
.input--big { font-size: 22px; font-weight: 600; letter-spacing: -0.4px; }
textarea.input { padding: 13px 15px; min-height: 84px; line-height: 1.45; resize: vertical; }

.field__hint { font-size: 13px; color: var(--text-3); }
.field__hint--ok  { color: var(--ok); }
.field__hint--bad { color: var(--bad); }

.pwwrap { position: relative; display: flex; }
.pwwrap .input { padding-right: 52px; }
.pwwrap .iconbtn { position: absolute; right: 4px; top: 4px; color: var(--text-3); }

.codeboxes { display: flex; gap: 8px; }
.codeboxes input {
  width: 100%;
  max-width: 54px;
  height: 60px;
  padding: 0;
  border: 1.5px solid var(--sep);
  border-radius: 13px;
  background: var(--card);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 26px;
  font-weight: 600;
  text-align: center;
}
.codeboxes input:focus { border-color: var(--text); outline: none; }

.check { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 0; flex-shrink: 0; accent-color: var(--brand); }

/* ---------- Hinweise ---------- */

.note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 15px;
  border-radius: 13px;
  background: var(--card-2);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-2);
}
.note svg { flex-shrink: 0; margin-top: 1px; }
.note--ok   { background: var(--ok-soft);   color: var(--ok); }
.note--warn { background: var(--warn-soft); color: var(--warn); }
.note--bad  { background: var(--bad-soft);  color: var(--bad); }
.note--info { background: var(--lang-en-soft); color: var(--lang-en); }

/* ---------- Sprachfarben ----------
   Eine Klasse je Sprache statt Variablen im style-Attribut: so wird die
   Farbe überall im Teilbaum vererbt und von jedem Browser aufgelöst. */

.lang-fr { --lang: var(--lang-fr); --lang-soft: var(--lang-fr-soft); }
.lang-en { --lang: var(--lang-en); --lang-soft: var(--lang-en-soft); }
.lang-es { --lang: var(--lang-es); --lang-soft: var(--lang-es-soft); }
.lang-it { --lang: var(--lang-it); --lang-soft: var(--lang-it-soft); }
.lang-la { --lang: var(--lang-la); --lang-soft: var(--lang-la-soft); }

/* ---------- Marken- und Sprachelemente ---------- */

.brandmark { display: flex; align-items: center; gap: 12px; }
.brandmark__word { font-size: 25px; font-weight: 800; letter-spacing: -1.2px; }

.langtag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 6px;
  background: var(--lang);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.levelbar { display: inline-flex; align-items: center; gap: 3px; }
.levelbar i {
  width: 11px;
  height: 4px;
  border-radius: 2px;
  background: var(--sep);
}
.levelbar i.on { background: var(--lang); }
.levelbar b {
  margin-left: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--lang);
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;

  /* Erst ein fester Rückfall, dann die berechnete Farbe. Scheitert die
     zweite Zeile (Browser lösen mehrteilige Farben aus Variablen
     unterschiedlich gut auf), bleibt der Kreis sichtbar statt als
     blauer Linktext übrig. Komma-Syntax, weil sie überall gilt. */
  background: #D9D9DE;
  background: hsl(var(--hue, 220), var(--avatar-s), var(--avatar-l));
  color: #3A3A42;
  color: hsl(var(--hue, 220), 45%, var(--avatar-text-l));
}
.avatar--lg { width: 56px; height: 56px; font-size: 19px; }
.avatar--sm { width: 32px; height: 32px; font-size: 12px; }

/* ---------- Stapelkarte ---------- */

.deck {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 18px 18px 18px 0;
  background: var(--card);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: var(--text);
}
.deck__edge { width: 4px; align-self: stretch; background: var(--lang); border-radius: 0 3px 3px 0; }
.deck__title { font-size: 17px; font-weight: 600; letter-spacing: -0.3px; }
.deck__meta { font-size: 13px; font-weight: 500; color: var(--text-3); }

/* ---------- Fortschritt ---------- */

/* Der Balken wird gestaucht, nicht in der Breite gesetzt: eine
   prozentuale Breite haengt davon ab, wie der Browser die Breite des
   Elternelements im Flex-Layout aufloest, eine Transformation nicht.
   Die Rundung sitzt am Rahmen, damit sie beim Stauchen nicht verzerrt. */
.bar {
  height: 8px;
  border-radius: 4px;
  background: var(--sep-soft);
  overflow: hidden;
}
.bar > i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--lang, var(--brand));
  transform-origin: left center;
  transition: transform 0.35s ease-out;
  /* Bewusst KEIN transform als Startwert: sonst bliebe der Balken auf
     null stehen, falls der Wert aus dem Markup einmal nicht ankommt.
     Den Wert setzt setProgress() direkt am Element. */
}

.ring { display: block; }

.stat { display: flex; flex-direction: column; gap: 3px; align-items: center; flex-grow: 1; }
.stat__num { font-size: 22px; font-weight: 700; letter-spacing: -0.5px; }
.stat__lbl { font-size: 12px; font-weight: 500; color: var(--text-3); text-align: center; line-height: 1.3; }

/* ---------- Lernsitzung ---------- */

.study__head { display: flex; align-items: center; gap: 14px; padding-top: 4px; }
.study__count { font-size: 14px; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }

.prompt { font-size: 38px; font-weight: 700; letter-spacing: -1.1px; line-height: 1.1; }

.context {
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--card-2);
  border-left: 3px solid var(--sep);
}
.context__sentence { font-size: 15px; line-height: 1.5; color: var(--text-2); }
.context__de { margin-top: 7px; font-size: 13px; line-height: 1.45; color: var(--text-3); }
.context .gap {
  display: inline-block;
  min-width: 76px;
  height: 18px;
  border-bottom: 2px solid var(--text-3);
  vertical-align: baseline;
}

.choice {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 0 18px;
  border: 1.5px solid var(--sep);
  border-radius: 14px;
  background: var(--card);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.2px;
  text-align: left;
}
.choice span { flex-grow: 1; }
.choice.is-right { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); font-weight: 600; }
.choice.is-wrong { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); font-weight: 600; }
.choice[disabled] { pointer-events: none; }
.choice[disabled]:not(.is-right):not(.is-wrong) { opacity: 0.45; }

.verdict { display: flex; flex-direction: column; gap: 6px; padding: 15px 16px; border-radius: 14px; }
.verdict--ok    { background: var(--ok-soft);   color: var(--ok); }
.verdict--close { background: var(--warn-soft); color: var(--warn); }
.verdict--bad   { background: var(--bad-soft);  color: var(--bad); }
.verdict__head  { font-size: 16px; font-weight: 700; letter-spacing: -0.2px; }
.verdict__sol   { font-size: 20px; font-weight: 600; letter-spacing: -0.3px; color: var(--text); }

.accents { display: flex; gap: 8px; flex-wrap: wrap; }
.accents button {
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1.5px solid var(--sep);
  border-radius: 11px;
  background: var(--card);
  font-size: 18px;
}

/* ---------- Import ---------- */

.improw {
  background: var(--card);
  border-radius: var(--r-md);
  padding: 14px 15px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.improw--warn { border: 1.5px solid var(--warn); }
.improw--dupe { opacity: 0.5; }
.improw__pair { display: flex; align-items: center; gap: 10px; }
.improw__word { flex-grow: 1; font-size: 16px; font-weight: 600; letter-spacing: -0.2px; }
.improw__de   { font-size: 15px; color: var(--text-2); }
.improw__ex   { font-size: 13.5px; font-style: italic; color: var(--text-3); line-height: 1.45; }
.improw__flag { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; }

/* ---------- Tab-Leiste ---------- */

/* Schwebende Leiste aus Milchglas: sitzt über dem Inhalt, der
   darunter durchscheint und beim Scrollen durchwandert. */
.tabbar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  margin-top: 10px;
  padding: 8px 0 max(10px, env(safe-area-inset-bottom));
  pointer-events: none;
}

.tabbar__glass {
  display: flex;
  gap: 2px;
  padding: 7px 6px;
  border-radius: 30px;
  pointer-events: auto;
  background: color-mix(in srgb, var(--card) 74%, transparent);
  backdrop-filter: saturate(180%) blur(26px);
  -webkit-backdrop-filter: saturate(180%) blur(26px);
  border: 0.5px solid color-mix(in srgb, var(--text) 12%, transparent);
  box-shadow:
    0 10px 30px color-mix(in srgb, var(--shadow) 14%, transparent),
    0 2px 8px  color-mix(in srgb, var(--shadow) 8%, transparent);
}

.tabbar a {
  flex-grow: 1;
  flex-basis: 0;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 23px;
  color: var(--text-2);
  /* Kleine Schrift braucht Luft zwischen den Buchstaben, nicht weniger:
     negatives Tracking presst sie zusammen und lässt sie unsauber
     aussehen. Deshalb hier als einzige Stelle positives Tracking. */
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15px;
  transition: background 0.18s, color 0.18s;
}
.tabbar a svg { width: 25px; height: 25px; flex-shrink: 0; stroke-width: 1.8; }
.tabbar a span { line-height: 1; }
.tabbar a:active { background: color-mix(in srgb, var(--text) 6%, transparent); }

.tabbar a.is-on {
  color: var(--tint);
  background: color-mix(in srgb, var(--tint) 10%, transparent);
}
.tabbar a.is-on svg { stroke-width: 2; }

/* Die Leiste legt sich über den Inhalt, statt ihn abzuschneiden —
   sonst hätte das Milchglas nichts, worüber es liegen könnte.
   Der Zuschlag unten hält die letzte Zeile frei. */
.tabbar { margin-top: -88px; }
.screen:has(.tabbar) .screen__body { padding-bottom: 102px; }

/* ---------- Zustände ---------- */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 44px 24px;
  text-align: center;
  color: var(--text-3);
}

.spinner {
  width: 26px;
  height: 26px;
  border: 2.5px solid var(--sep);
  border-top-color: var(--text-3);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading { display: flex; justify-content: center; padding: 48px 0; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(28px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  max-width: 340px;
  padding: 13px 18px;
  border-radius: 14px;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  z-index: 50;
  animation: rise 0.2s ease-out;
}
.toast--bad { background: var(--bad); color: #FFFFFF; }
@keyframes rise {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}