/* Vokabeltrainer — visual language
   ----------------------------------------------------------------------
   The subject is a German school exercise book: cool greenish paper, a
   printed rule to write on, the red Korrekturrand down the left margin, and
   the label glued to the cover. Three of those appear here, once each. The
   rest is quiet, because the word on the card is the thing being looked at.

   Colour carries exactly one meaning: red is a word you missed, green is a
   word you knew (two depths for how surely), marine is "go". Nothing else is
   coloured, so nothing else competes.                                     */

@font-face { font-family: 'Zilla Slab'; src: url('/fonts/ZillaSlab-500.woff2') format('woff2');
             font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Zilla Slab'; src: url('/fonts/ZillaSlab-600.woff2') format('woff2');
             font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/fonts/IBMPlexSans-400.woff2') format('woff2');
             font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/fonts/IBMPlexSans-500.woff2') format('woff2');
             font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/fonts/IBMPlexSans-600.woff2') format('woff2');
             font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --paper:    #f1f4f0;
  --sheet:    #ffffff;
  --ink:      #16262b;
  --pencil:   #4d6169;
  --faint:    #7d9198;
  --rule:     #d4ded9;
  --marine:   #0e4a5a;
  --on-marine:#f1f4f0;
  --grass:    #2c7a51;
  --grass-deep:#175a3a;
  --korrektur:#be4030;
  --tint-green:#e3efe7;
  --tint-deep: #d5e9dc;
  --tint-red:  #fae9e5;
  --tint-marine:#dfeaee;
  --cover:    #0e4a5a;
  --cover-edge:#0a3844;

  --font-word: 'Zilla Slab', Georgia, 'Times New Roman', serif;
  --font-ui: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Phonetics stay in the system face: the webfonts' latin subset has no
     IPA block, and a missing glyph box is worse than a change of typeface. */
  --font-ipa: -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif;

  --r-leaf: 5px;    /* paper barely rounds */
  --r-control: 12px;
  --r-chip: 9px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:    #0e1518;
    --sheet:    #162026;
    --ink:      #e7edea;
    --pencil:   #a2b5ba;
    --faint:    #76898f;
    --rule:     #253338;
    --marine:   #79c2da;
    --on-marine:#0b1114;
    --grass:    #5fbf8b;
    --grass-deep:#8ad7ac;
    --korrektur:#e58b76;
    --tint-green:#143023;
    --tint-deep: #17392a;
    --tint-red:  #33201b;
    --tint-marine:#13323c;
    --cover:    #102a33;
    --cover-edge:#0a1e25;
  }
}

/* Same palette under an explicit attribute: lets the screenshot script and a
   future manual switch reach it without the OS setting. */
:root[data-theme="dark"] {
  --paper:    #0e1518;
  --sheet:    #162026;
  --ink:      #e7edea;
  --pencil:   #a2b5ba;
  --faint:    #76898f;
  --rule:     #253338;
  --marine:   #79c2da;
  --on-marine:#0b1114;
  --grass:    #5fbf8b;
  --grass-deep:#8ad7ac;
  --korrektur:#e58b76;
  --tint-green:#143023;
  --tint-deep: #17392a;
  --tint-red:  #33201b;
  --tint-marine:#13323c;
  --cover:    #102a33;
  --cover-edge:#0a1e25;
}

* { box-sizing: border-box; }

html { background: var(--paper); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.55 var(--font-ui);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
}

.app {
  max-width: 30rem;
  margin: 0 auto;
  padding: 0 1.1rem calc(1.2rem + env(safe-area-inset-bottom));
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
/* Screens that are not the home screen keep their old top spacing. */
.app > .stack:first-child:not(.has-cover) { padding-top: max(1.1rem, env(safe-area-inset-top)); }
/* Anything with this class is pushed to the bottom of the screen, so a short
   page ends deliberately instead of trailing off into empty paper. */
.foot { margin-top: auto; padding-top: 1.4rem; border-top: 1px solid var(--rule); }

h1 { font: 600 1.55rem/1.2 var(--font-word); margin: 0 0 1rem; letter-spacing: -.005em; }
h2 { font: 600 1.02rem/1.3 var(--font-word); margin: 1.9rem 0 .6rem; color: var(--pencil); }
p { margin: 0 0 .9rem; max-width: 34em; }
.muted { color: var(--pencil); }
.tiny { font-size: .82rem; }
.loading { color: var(--faint); text-align: center; padding: 5rem 0; }
.stack > * + * { margin-top: .75rem; }
.row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }

/* ── the cover ─────────────────────────────────────────────────────────
   Every German school Heft is a saturated colour with a white label glued
   on. That is the whole identity of the thing, so it is the top of the
   screen: full bleed, edge to edge, with the label sitting on it.        */
.cover {
  margin: 0 -1.1rem 1.3rem;
  padding: max(1.5rem, env(safe-area-inset-top)) 1.1rem 1.5rem;
  background: var(--cover);
  border-bottom: 3px solid var(--cover-edge);
}
.cover .etikett { box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .55); }

/* ── the label glued to the cover of every school exercise book ──────────
   The one decorative device in the app. Double rule at the top, two writing
   lines under the title, exactly like the Etikett a child fills in in
   September.                                                              */
.etikett {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-top: 3px double var(--marine);
  border-radius: var(--r-leaf);
  padding: 1rem 1.1rem 1.1rem;
}
.etikett-title { font: 600 1.75rem/1.1 var(--font-word); letter-spacing: -.01em; }
.etikett-lines { margin-top: .7rem; display: grid; gap: .45rem; }
.etikett-line { display: flex; align-items: baseline; gap: .6rem; border-bottom: 1px solid var(--rule); padding-bottom: .3rem; }
.etikett-line span { color: var(--faint); font-size: .8rem; min-width: 3.4rem; }
.etikett-line b { font-weight: 500; }

/* ── surfaces ─────────────────────────────────────────────────────────── */
.card {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-leaf);
  padding: 1rem 1.1rem;
}
.hero { background: var(--tint-marine); border-color: transparent; }
.hero .big { font: 600 3.1rem/1 var(--font-word); letter-spacing: -.02em; color: var(--marine); }

/* Counters sit on ruled lines rather than in three little boxes. */
.stats { display: flex; gap: .2rem; padding: .8rem .2rem; border-top: 1px solid var(--rule); }
.stat { flex: 1; }
.stat b { display: block; font: 600 1.35rem/1.15 var(--font-word); }
.stat span { font-size: .78rem; color: var(--faint); }
.stat + .stat { border-left: 1px solid var(--rule); padding-left: .8rem; }
/* The totals stat is a button; without this it keeps the button radius and
   the divider next to it renders as a stray curve. */
.stat-button { border-radius: 0; }

/* ── controls ─────────────────────────────────────────────────────────── */
button { font: 500 1rem/1.25 var(--font-ui); border: 1px solid transparent; border-radius: var(--r-control);
         padding: .9rem 1.05rem; background: var(--tint-marine); color: var(--ink);
         cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:active { transform: translateY(1px); }
button:disabled { opacity: .3; cursor: default; transform: none; }
:focus-visible { outline: 2px solid var(--marine); outline-offset: 2px; }

.btn-primary { width: 100%; background: var(--marine); color: var(--on-marine); font-weight: 600; font-size: 1.05rem; padding: 1.05rem; }
.btn-secondary { width: 100%; background: transparent; border-color: var(--rule); color: var(--ink); }
.btn-quiet { background: none; border: none; color: var(--pencil); padding: .55rem .3rem; font-weight: 500; }
.btn-back { flex: none; width: 2.75rem; height: 2.75rem; padding: 0; display: inline-flex;
            align-items: center; justify-content: center;
            background: var(--sheet); border: 1px solid var(--rule); color: var(--ink); border-radius: var(--r-control); }
.icon { display: block; }
.chev { color: var(--rule); flex: none; }

/* ── the card being drilled: a leaf of the vocabulary book ──────────────
   Faint red margin rule on the left, the way a Heft is printed, and the
   word sitting on a writing line.                                        */
.prompt-card {
  position: relative;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-leaf);
  padding: 2.4rem 1.4rem 2rem 1.7rem;
  min-height: 14rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  box-shadow: 0 1px 0 var(--rule), 0 14px 28px -22px rgba(22, 38, 43, .5);
}
.prompt-card::before {
  content: ""; position: absolute; inset: 0 auto 0 .85rem; width: 1px;
  background: var(--korrektur); opacity: .28;
}
.direction { font-size: .82rem; color: var(--faint); margin-bottom: 1.1rem; }
.term-row { display: flex; align-items: center; justify-content: center; gap: .6rem; }
.term { font: 600 clamp(1.5rem, 7.5vw, 2.25rem)/1.15 var(--font-word); letter-spacing: -.015em;
        overflow-wrap: anywhere; }
.btn-speak { flex: none; width: 2.4rem; height: 2.4rem; padding: 0; display: inline-flex;
             align-items: center; justify-content: center; background: var(--tint-marine);
             border: none; border-radius: 50%; color: var(--marine); }
.btn-speak-small { width: 2rem; height: 2rem; background: none; }
.term-line { border-bottom: 1px solid var(--rule); padding-bottom: .35rem; }
.ipa { font-family: var(--font-ipa); font-size: .98rem; color: var(--faint); margin-top: .55rem; }
.divider { width: 100%; height: 1px; background: var(--rule); margin: 1.4rem 0 1.2rem; }
.answer { font: 600 1.85rem/1.2 var(--font-word); color: var(--grass-deep); }
.example { font-size: 1rem; color: var(--pencil); margin-top: 1rem; font-style: italic; }
.tip { margin-top: 1rem; font-size: .9rem; color: var(--ink); background: var(--tint-marine);
       border-radius: var(--r-chip); padding: .65rem .8rem; text-align: left; }
.source { margin-top: 1.3rem; font-size: .78rem; color: var(--faint); }

.swipe-hint { margin-top: 1rem; text-align: center; }
.session-bar { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.1rem; }
.progress { flex: 1; height: 5px; background: var(--rule); border-radius: 999px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--marine); transition: width .3s ease; }

/* Three grades, one axis: missed → knew it → knew it instantly. */
/* Full width, one per row: the label says what you did, the right-hand side
   says when the word comes back. Three across meant every label wrapped, and
   a wrapped label is one more thing to decode mid-session. */
.actions { margin-top: 1.1rem; }
.grade-row { display: grid; gap: .45rem; }
.grade-row button { display: flex; align-items: baseline; justify-content: space-between;
                    gap: .6rem; padding: .95rem 1.05rem; text-align: left; }
.grade-label { font-weight: 600; font-size: 1.02rem; }
.grade-when { font-size: .8rem; opacity: .85; font-variant-numeric: tabular-nums; }
.g-again { background: var(--tint-red); color: var(--korrektur); border-color: color-mix(in srgb, var(--korrektur) 22%, transparent); }
.g-good  { background: var(--tint-green); color: var(--grass); border-color: color-mix(in srgb, var(--grass) 22%, transparent); }
.g-easy  { background: var(--tint-deep); color: var(--grass-deep); border-color: color-mix(in srgb, var(--grass-deep) 34%, transparent); }

/* Three-way choice, one control: which way round the words are asked. */
.segmented { display: flex; gap: .3rem; padding: .25rem; background: var(--surface-2, var(--sheet));
             border: 1px solid var(--rule); border-radius: var(--r-control); }
.segmented button { flex: 1; padding: .65rem .25rem; font-size: .82rem; white-space: nowrap; background: none;
                    border: none; border-radius: 9px; color: var(--pencil); }
.segmented button[aria-pressed="true"] { background: var(--marine); color: var(--on-marine); font-weight: 600; }

/* ── page picker: index tabs down the side of the book ─────────────────── */
.unit-row { display: flex; flex-wrap: wrap; gap: .35rem; }
.unit-chip { font-size: .84rem; padding: .42rem .7rem; border-radius: 999px; background: var(--sheet);
             border: 1px solid var(--rule); color: var(--pencil); }
.unit-chip[aria-pressed="true"] { background: var(--marine); border-color: var(--marine); color: var(--on-marine); }
.pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.1rem, 1fr)); gap: .4rem; }
.page-chip { padding: .5rem .25rem; border-radius: var(--r-chip); background: var(--sheet); border: 1px solid var(--rule);
             text-align: center; font: 500 1.02rem/1.2 var(--font-word); color: var(--ink); }
.page-chip small { display: block; font: 400 .68rem/1.4 var(--font-ui); color: var(--faint); }
.page-chip[aria-pressed="true"] { background: var(--marine); border-color: var(--marine); color: var(--on-marine); }
.page-chip[aria-pressed="true"] small { color: inherit; opacity: .78; }

/* ── choosing a book ──────────────────────────────────────────────────── */
.course-card { display: block; width: 100%; text-align: left; background: var(--sheet);
               border: 1px solid var(--rule); border-radius: var(--r-leaf); padding: 1rem 1.1rem; }
.course-card.is-current { border-color: var(--marine); border-left-width: 3px; }
.course-language { font-size: .8rem; color: var(--faint); }
.course-title { font: 600 1.35rem/1.2 var(--font-word); margin-top: .1rem; }
.course-meta { font-size: .88rem; color: var(--pencil); margin-top: .25rem; }
.course-current { font-size: .78rem; color: var(--marine); margin-top: .5rem; font-weight: 600; }

/* Quiet navigation rows: label left, the value they lead to on the right,
   separated by the same rule as everything else on this paper. */
.rows { border-top: 1px solid var(--rule); }
.rowlink { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
           width: 100%; background: none; border: none; border-bottom: 1px solid var(--rule);
           border-radius: 0; padding: 1rem .2rem; text-align: left; font-weight: 500; }
.rowlink .meta { color: var(--faint); font-size: .88rem; }
.rowlink .meta { margin-left: auto; }
.rowlink:active { background: var(--tint-marine); }

/* What was practised last time, sitting where the page would otherwise be
   empty. */
.recap { margin-top: 1.1rem; padding: .85rem .95rem; background: var(--sheet);
         border: 1px solid var(--rule); border-left: 3px solid var(--marine);
         border-radius: var(--r-leaf); cursor: pointer; }
.recap-head { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem;
              font-size: .92rem; color: var(--pencil); }
.recap-head b { color: var(--ink); font-family: var(--font-word); font-weight: 600; white-space: nowrap; }
.recap-hard { margin-top: .55rem; display: flex; flex-wrap: wrap; gap: .35rem; align-items: baseline; }
.word-chip { font: 600 .85rem var(--font-word); background: var(--tint-red); color: var(--korrektur);
             border-radius: 999px; padding: .18rem .55rem; }

/* ── dictionary ───────────────────────────────────────────────────────── */
/* Input with the magnifier drawn inside it rather than floating beside. */
.field { position: relative; display: flex; align-items: center; }
.field-icon { position: absolute; left: .85rem; color: var(--faint); pointer-events: none; }
.field input[type="search"] { padding-left: 2.6rem; }
input[type="search"] { font: 400 1.02rem var(--font-ui); width: 100%; padding: .85rem .95rem;
  border-radius: var(--r-control); border: 1px solid var(--rule); background: var(--sheet);
  color: var(--ink); -webkit-appearance: none; }
input[type="search"]:focus { outline: 2px solid var(--marine); outline-offset: 1px; }

.entry { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-leaf); padding: .7rem .9rem; }
.entry-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.entry-en { font: 600 1.05rem/1.3 var(--font-word); }
.entry-ipa { font-size: .85rem; }
.entry-de { color: var(--pencil); font-size: .95rem; }
.entry-meta { display: flex; align-items: center; gap: .45rem; flex: none; }
.entry-meta small { color: var(--faint); font-size: .75rem; font-variant-numeric: tabular-nums; }
.entry-detail { border-top: 1px solid var(--rule); margin-top: .6rem; padding-top: .1rem; }
.dot { width: .5rem; height: .5rem; border-radius: 50%; display: inline-block; }
.dot-new { background: var(--rule); }
.dot-due { background: var(--korrektur); }
.dot-known { background: var(--grass); }

.stat-button { background: none; border: none; padding: 0; text-align: left; font: inherit; }
.stat-button b { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }

/* ── history ──────────────────────────────────────────────────────────── */
.log-day { font: 500 .82rem/1 var(--font-ui); color: var(--faint); margin: 1.2rem 0 .45rem; }
.log-entry { display: flex; align-items: center; gap: .9rem; background: var(--sheet);
             border: 1px solid var(--rule); border-radius: var(--r-leaf); padding: .8rem .95rem; }
.log-score { font: 600 1.15rem/1 var(--font-word); font-variant-numeric: tabular-nums; min-width: 3.4rem; }
.log-what { flex: 1; font-size: .9rem; }
.log-what small { display: block; color: var(--faint); font-size: .78rem; }
.log-bar { width: 3.2rem; height: 5px; border-radius: 999px; background: var(--tint-red); overflow: hidden; }
.log-bar > i { display: block; height: 100%; background: var(--grass); }

.hard-list { display: grid; gap: .35rem; }
.hard-word { font-size: .95rem; }
.hard-word b { font-family: var(--font-word); font-weight: 600; }
.hard-word small { color: var(--faint); }

/* Details/summary: the phrase stays hidden until it is asked for, so it is
   not on screen when the phone is handed round. */
.reveal summary { cursor: pointer; color: var(--marine); font-weight: 500; padding: .5rem 0; }
.reveal summary::marker { color: var(--faint); }

/* ── login ────────────────────────────────────────────────────────────── */
.phrase { font: 600 1.45rem/1.65 var(--font-word); background: var(--sheet); border: 1px solid var(--rule);
          border-left: 3px solid var(--korrektur); border-radius: var(--r-leaf); padding: 1rem 1.1rem;
          text-align: center; word-spacing: .25rem; }
input[type="text"] { font: 400 1.05rem var(--font-ui); width: 100%; padding: .85rem .95rem;
                     border-radius: var(--r-control); border: 1px solid var(--rule);
                     background: var(--sheet); color: var(--ink); }
input[type="text"]:focus { outline: 2px solid var(--marine); outline-offset: 1px; }
label { display: block; font-size: .85rem; color: var(--pencil); margin-bottom: .3rem; }

.notice { border-radius: var(--r-chip); padding: .7rem .85rem; font-size: .92rem; }
.notice-warn { background: var(--tint-red); color: var(--korrektur); }
.notice-info { background: var(--tint-marine); color: var(--ink); }

.offline-badge { position: fixed; left: 50%; transform: translateX(-50%);
                 bottom: calc(1rem + env(safe-area-inset-bottom));
                 background: var(--ink); color: var(--paper); padding: .5rem .9rem;
                 border-radius: 999px; font-size: .82rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  button:active { transform: none; }
}