/* lesson.css — shared stylesheet for every AP1 lesson and reference page.
 *
 * Design rules that must survive future edits:
 *   - Reads on a phone first. No horizontal scroll, touch targets >= 44px.
 *   - Reference pages get printed. Print rules are not an afterthought.
 *   - German is always visually distinct from Turkish. The learner must be able
 *     to tell at a glance which language a fragment belongs to, because the
 *     exam is written in only one of them.
 *   - No external requests. No web fonts.
 */

:root {
  --ink: #16202b;
  --ink-soft: #4a5a6a;
  --ink-faint: #7d8c9a;
  --paper: #fbfaf7;
  --card: #ffffff;
  --rule: #e2e0d8;
  --de: #1f4e79;          /* German fragments */
  --de-bg: #eaf1f8;
  --accent: #9a3412;      /* traps, warnings */
  --accent-bg: #fdf0e8;
  --ok: #1d6e42;
  --ok-bg: #e9f4ee;
  --measure: 34rem;
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e6e9ec; --ink-soft: #a8b4c0; --ink-faint: #7d8c9a;
    --paper: #131820; --card: #1b222c; --rule: #2c3644;
    --de: #8ec4f2; --de-bg: #17293a;
    --accent: #f0a67a; --accent-bg: #33221a;
    --ok: #7fd1a3; --ok-bg: #16291f;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  overflow-wrap: break-word;
  padding: 2rem 1.1rem 5rem;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

main { max-width: var(--measure); margin: 0 auto; }

/* ---------- typography ---------- */

h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 .3rem; letter-spacing: -.01em; }
h2 {
  font-size: 1.15rem; margin: 2.6rem 0 .8rem; padding-top: .9rem;
  border-top: 1px solid var(--rule); letter-spacing: -.005em;
}
h3 { font-size: 1rem; margin: 1.6rem 0 .4rem; }
p, li { max-width: 100%; }
a { color: var(--de); }

.lede { color: var(--ink-soft); margin: 0 0 1.4rem; }

.meta {
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
  margin: .6rem 0 1.6rem; font-size: .78rem;
}

.badge {
  display: inline-block; padding: .18rem .5rem; border-radius: 999px;
  background: var(--de-bg); color: var(--de); font-weight: 600;
  letter-spacing: .02em; white-space: nowrap;
}
.badge--plain { background: transparent; color: var(--ink-faint); border: 1px solid var(--rule); }

/* German fragments inside Turkish prose.
 *
 * These must WRAP. An earlier version used white-space: nowrap to keep short
 * terms intact, which silently broke the phone layout: a long phrase such as
 * «Einrichten eines IT-gestützten Arbeitsplatzes» then forced the whole page
 * to scroll sideways. Long compounds still need break-word, because German
 * produces single words wider than a 360px screen. */
.de {
  color: var(--de); background: var(--de-bg);
  padding: .04em .28em; border-radius: 4px;
  font-weight: 500;
  overflow-wrap: break-word;
}
.de--block { display: block; white-space: normal; padding: .5rem .7rem; margin: .5rem 0; }

/* ---------- blocks ---------- */

.card {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 1rem 1.05rem; margin: 1.1rem 0;
}

.pattern {
  border-left: 3px solid var(--de);
  background: var(--de-bg); color: var(--de);
  padding: .75rem .9rem; margin: .7rem 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .95rem; line-height: 1.55;
}
.pattern strong { color: inherit; }
.pattern .slot {
  border-bottom: 1.5px dashed currentColor; opacity: .75;
  font-style: italic; padding: 0 .15em;
}

.trap {
  border-left: 3px solid var(--accent); background: var(--accent-bg);
  padding: .7rem .9rem; margin: .7rem 0;
  border-radius: 0 var(--radius) var(--radius) 0; font-size: .92rem;
}
.trap::before { content: "Tuzak — "; font-weight: 700; color: var(--accent); }

.note { font-size: .88rem; color: var(--ink-soft); }

blockquote {
  margin: 1rem 0; padding: .1rem 0 .1rem 1rem;
  border-left: 3px solid var(--rule); color: var(--ink-soft); font-size: .94rem;
}

/* ---------- tables ---------- */

.scroll { overflow-x: auto; margin: 1rem 0; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: left; padding: .45rem .55rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-weight: 650; color: var(--ink-soft); font-size: .8rem; letter-spacing: .02em; }
td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- interactive: type quiz ---------- */

.quiz { margin: 1.2rem 0; }
.quiz > ol { list-style: none; counter-reset: q; padding: 0; margin: 0; }
.quiz .q { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: .9rem 1rem; margin: .8rem 0; }
.quiz .q::before { counter-increment: q; content: counter(q); font-size: .72rem; font-weight: 700; color: var(--ink-faint); }
.quiz .stem { margin: .25rem 0 .7rem; }
.opts { display: flex; flex-wrap: wrap; gap: .4rem; }
.opts button {
  flex: 1 1 auto; min-height: 44px; min-width: 7.5rem;
  padding: .5rem .7rem; font: inherit; font-size: .88rem;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 8px; cursor: pointer;
}
.opts button:hover { border-color: var(--de); }
.opts button[aria-pressed="true"] { border-width: 2px; }
.opts button.is-right { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); font-weight: 600; }
.opts button.is-wrong { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.fb { margin: .7rem 0 0; font-size: .9rem; color: var(--ink-soft); }

/* ---------- interactive: open answer ---------- */

.schreiben { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.05rem; margin: 1.2rem 0; }
.schreiben .task { margin: 0 0 .2rem; }
.schreiben textarea {
  width: 100%; min-height: 8.5rem; margin-top: .7rem; padding: .7rem;
  font: inherit; font-size: .95rem; line-height: 1.6;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 8px; resize: vertical;
}
.counter { margin-top: .35rem; font-size: .8rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.counter.in-range { color: var(--ok); }
.btn {
  min-height: 44px; padding: .55rem 1rem; margin-top: .8rem;
  font: inherit; font-size: .9rem; font-weight: 600;
  background: var(--de); color: var(--paper);
  border: 0; border-radius: 8px; cursor: pointer;
}
.muster { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--rule); }
.raster { list-style: none; padding: 0; margin: .6rem 0 0; }
.raster li { display: flex; gap: .6rem; align-items: flex-start; padding: .45rem 0; border-bottom: 1px dashed var(--rule); font-size: .92rem; }
.raster input { width: 22px; height: 22px; margin-top: .1rem; flex: none; accent-color: var(--ok); }
.raster .pts { margin-left: auto; padding-left: .5rem; font-size: .8rem; color: var(--ink-faint); white-space: nowrap; }
.score { margin-top: .7rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- footer ---------- */

.ask { background: var(--ok-bg); border: 1px solid var(--ok); border-radius: var(--radius); padding: .85rem 1rem; margin: 2.4rem 0 1rem; font-size: .92rem; }
.sources { font-size: .85rem; color: var(--ink-soft); }
.sources li { margin-bottom: .45rem; }

/* ---------- print ---------- */

@media print {
  :root { --paper: #fff; --card: #fff; --de-bg: #fff; --accent-bg: #fff; --ok-bg: #fff; --rule: #bbb; --ink: #000; --ink-soft: #333; }
  body { padding: 0; font-size: 10.5pt; }
  main { max-width: 100%; }
  .quiz, .schreiben, .ask, .no-print { display: none !important; }
  h2 { break-after: avoid; }
  .card, .pattern, .trap, table { break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; word-break: break-all; }
}

/* ---------- added for the generated site ---------- */

.trap-inline {
  border-left: 3px solid var(--accent); background: var(--accent-bg);
  padding: .6rem .85rem; margin: .8rem 0; font-size: .92rem;
  border-radius: 0 var(--radius) var(--radius) 0;
}

.btn--ghost { background: transparent; color: var(--de); border: 1px solid var(--rule); }
.btn + .btn { margin-left: .4rem; }

/* site chrome */
.top {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline;
  max-width: var(--measure); margin: 0 auto 1.4rem; font-size: .85rem;
}
.top a { text-decoration: none; }
.top .home { font-weight: 700; letter-spacing: -.01em; }
.top nav { display: flex; flex-wrap: wrap; gap: .4rem .8rem; margin-left: auto; }

.foot {
  max-width: var(--measure); margin: 3rem auto 0; padding-top: 1rem;
  border-top: 1px solid var(--rule); font-size: .82rem; color: var(--ink-faint);
}
.pager { display: flex; justify-content: space-between; gap: 1rem; margin: 2.4rem 0 0; font-size: .9rem; }
.pager a { max-width: 48%; }

/* progress board */
.blockhead { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; margin: 2rem 0 .5rem; }
.blockhead h2 { border: 0; margin: 0; padding: 0; }
.modlist { list-style: none; padding: 0; margin: 0; }
.modlist li {
  display: flex; gap: .6rem; align-items: baseline; padding: .55rem .2rem;
  border-bottom: 1px solid var(--rule);
}
.modlist li[data-done="done"] { opacity: .62; }
.modlist li[data-done="done"] .num::after { content: " ✓"; color: var(--ok); }
.modlist li[data-done="learning"] .num::after { content: " ●"; color: var(--de); }
.modlist .num { flex: none; width: 2.6rem; font-size: .78rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.modlist a { text-decoration: none; font-weight: 500; }
.modlist .sub { color: var(--ink-faint); font-size: .82rem; }
.modlist .tag { margin-left: auto; flex: none; font-size: .7rem; color: var(--de); background: var(--de-bg); padding: .1rem .4rem; border-radius: 999px; }

.bar { display: inline-block; width: 7rem; height: .5rem; background: var(--rule); border-radius: 999px; overflow: hidden; vertical-align: middle; }
.bar > span { display: block; height: 100%; background: var(--ok); }

.queue { list-style: none; padding: 0; margin: .6rem 0 0; }
.queue li { display: flex; gap: .6rem; padding: .45rem 0; border-bottom: 1px dashed var(--rule); }
.queue .pts { margin-left: auto; color: var(--accent); font-variant-numeric: tabular-nums; }

/* state control */
.states { display: flex; gap: .4rem; flex-wrap: wrap; margin: 1.4rem 0; }
.states button {
  min-height: 44px; padding: .5rem .9rem; font: inherit; font-size: .85rem;
  background: var(--card); color: var(--ink-soft);
  border: 1px solid var(--rule); border-radius: 8px; cursor: pointer;
}
.states button[aria-pressed="true"] { border-color: var(--ok); color: var(--ok); font-weight: 650; background: var(--ok-bg); }

/* trainer */
.rechner { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.05rem; margin: 1.2rem 0; }
.rtask { margin: 0 0 .9rem; }
.rfields { display: flex; flex-wrap: wrap; gap: .6rem; }
.rfield { display: flex; flex-direction: column; gap: .2rem; flex: 1 1 11rem; font-size: .8rem; color: var(--ink-soft); }
.rfield input {
  min-height: 44px; padding: .5rem .6rem; font: inherit; font-size: .95rem;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 8px;
}
.rfield input.is-right { border-color: var(--ok); border-width: 2px; }
.rfield input.is-wrong { border-color: var(--accent); border-width: 2px; }
.ractions { margin-top: .3rem; }
.rfb { margin: .8rem 0 0; font-size: .9rem; }
.rfb.is-ok { color: var(--ok); }
.rfb.is-no { color: var(--accent); }
.rsolution { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--rule); font-size: .9rem; line-height: 1.7; }

/* exam simulation */
.clock {
  font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: .02em; margin: .6rem 0;
}
.clock.is-low { color: var(--accent); }
.simscore { font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* backup */
.backup textarea { width: 100%; min-height: 4.5rem; font-family: ui-monospace, monospace; font-size: .8rem; padding: .6rem; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); color: var(--ink); }

@media print {
  .top nav, .pager, .states, .rechner, .backup { display: none !important; }
}