/* Layout adapted from the Grimorio Astro theme by sud0pls (MIT): https://github.com/sud0pls/Grimorio-astro
   Colours, font and shapes from Soheil's loom/default theme: navy night sky, glacier-blue accent, gold only for "needs you". */
@font-face { font-family: "Onest"; font-weight: 100 900; font-display: swap; src: url(fonts/onest-latin-wght-normal.woff2) format("woff2"); }

/* Onest rule: no weight above 400 below 14px (the "i" loses its dot). */
:root {
  --bg: #eef4fb; --card: #f8fbff; --surface: #e7eff7;
  --text: #17202a; --muted: #586676;
  --accent: #0067ab; --accent-soft: #d3e9fc; --accent-contrast: #fafcfe;
  --line: #d2dae2; --line-strong: #7c8997;
  --wait: #735500; --ok: #008341; --err: #92002c;
  --shadow-lg: 0 8px 24px #17202a1f;
  --r-panel: 16px; --r-block: 14px; --r-control: 9px; --r-inline: 4px;
  --grad-blue: linear-gradient(135deg, #3a9be0, #004f87);
  /* Gender colours: text and chart marks are the same in light mode (validated together). */
  --der: #2b63c9; --die: #c8323f; --das: #137a52;
  --der-m: #2b63c9; --die-m: #c8323f; --das-m: #137a52;
  --tint: 7%; /* gender background tint; light die text hits 4.5:1 at 8%, so stay below */
  color-scheme: light;
}
:root.dark {
  --bg: #0a1729; --card: #0f1f32; --surface: #051122;
  --text: #e1eaf7; --muted: #9bacc4;
  --accent: #75c8fc; --accent-soft: #0f385a; --accent-contrast: #00111e;
  --line: #26364c; --line-strong: #62758e;
  --wait: #fec84b; --ok: #60db89; --err: #fd7277;
  --shadow-lg: 0 8px 24px #00000066;
  --grad-blue: linear-gradient(135deg, #c4e8ff, #4aa8ef);
  /* Text needs 4.5:1 on navy; chart marks use the palette validated for the dark pane. */
  --der: #8fb0f0; --die: #f08a94; --das: #5cc997;
  --der-m: #5f8be6; --die-m: #e06a75; --das-m: #15704a;
  --tint: 12%;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
@view-transition { navigation: auto; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; padding-top: 60px; font: 16px/1.6 "Onest", "Segoe UI", system-ui, sans-serif; color: var(--text); background: var(--bg); overflow-wrap: anywhere; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button, a { transition: color .18s, background .18s, border-color .18s; }
img { max-width: 100%; display: block; }
button:disabled { opacity: .45; cursor: default; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }
h1, h2, h3 { line-height: 1.25; margin: 0; font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Header ---------- */
.top { position: fixed; inset: 0 0 auto; z-index: 20; height: 60px; background: var(--surface); border-bottom: 1px solid var(--line); }
.top .shell { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.brand { font-weight: 600; font-size: 1.15rem; white-space: nowrap; }
.three > *, .reading > * { min-width: 0; }
.top nav { display: flex; gap: 1.6rem; height: 100%; }
.top nav a { white-space: nowrap; display: flex; align-items: center; color: var(--muted); border-bottom: 2px solid transparent; padding-top: 2px; }
.top nav a:hover { color: var(--text); }
.top nav a[aria-current] { color: var(--text); border-bottom-color: var(--accent); }
.viewer a[href*="practice.html"], .viewer .owner-only { display: none !important; }
.top-right { justify-self: end; display: flex; align-items: center; gap: .4rem; }
.streak { display: flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border-radius: var(--r-control); font-weight: 600; }
.streak.open { color: var(--wait); }
.streak.done { color: var(--accent); background: var(--accent-soft); }
.streak.done svg { fill: currentColor; }
.toast { position: fixed; z-index: 40; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; gap: .5rem; align-items: center; padding: .7rem 1.1rem; background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-block); box-shadow: var(--shadow-lg); font-weight: 500; animation: toast-in .3s ease-out; }
.toast svg { color: var(--accent); fill: currentColor; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px); } }
.theme-btn { width: 36px; height: 36px; border: 0; border-radius: var(--r-control); background: none; color: var(--muted); display: grid; place-items: center; }
.theme-btn:hover { background: var(--surface); color: var(--text); }
.theme-btn svg { width: 20px; height: 20px; }
.theme-btn .moon, :root.dark .theme-btn .sun { display: none; }
:root.dark .theme-btn .moon { display: block; }

.shell { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* ---------- Shared blocks ---------- */
.box { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 18px; }
.box-title { font-size: .95rem; font-weight: 600; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 88px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border: 1px solid var(--line-strong); background: var(--card); padding: .45rem 1rem; border-radius: var(--r-control); font-weight: 500; }
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 85%, var(--text)); color: var(--accent-contrast); }
.btn-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.btn-col { display: flex; flex-direction: column; gap: .5rem; }
.muted { color: var(--muted); }
.chip { display: inline-block; font-size: .8rem; color: var(--muted); border: 1px solid var(--line); border-radius: var(--r-control); padding: 0 .45rem; }

/* Gender colouring */
.der { color: var(--der); } .die { color: var(--die); } .das { color: var(--das); }
b.der, b.die, b.das, .art { font-weight: 600; }

/* Click-to-hear */
.say { cursor: pointer; border-radius: var(--r-inline); text-underline-offset: .22em; }
.say:hover, .say:focus-visible { background: var(--accent-soft); text-decoration: underline dotted; }

/* ---------- Home ---------- */
.three { display: grid; grid-template-columns: 240px minmax(0, 1fr) 230px; gap: 28px; align-items: start; padding: 28px 24px 56px; }
.profile { text-align: center; }
.avatar { width: 88px; height: 88px; border-radius: 50%; margin: 6px auto 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--text); font-size: 2.4rem; font-weight: 600; line-height: 1; }
.profile h1 { font-size: 1.2rem; }
.profile .tag { color: var(--muted); margin: .15rem 0 1rem; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); text-align: left; padding: 12px 0 2px; border-top: 1px solid var(--line); }
.stats strong { display: block; font-size: 1.1rem; }
.stats span { font-size: .8rem; color: var(--muted); font-weight: 400; }

.feed-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.feed-head h2 { font-size: 1.4rem; }
.feed { display: flex; flex-direction: column; gap: 14px; }
.post { display: grid; grid-template-columns: 187px 1fr; gap: 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 12px; }
.post:hover { border-color: var(--accent); }
.post img { width: 100%; height: 154px; object-fit: cover; border-radius: var(--r-inline); }
.post-body { display: flex; flex-direction: column; padding: 2px 8px 2px 0; min-width: 0; }
.meta { font-size: .875rem; color: var(--muted); display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.meta .cat { color: var(--text); font-weight: 500; }
.meta .sep { color: var(--line); }
.post h3 { font-size: 1.2rem; margin: .3rem 0 .4rem; }
.post h3 a:hover { color: var(--accent); }
.post p { margin: 0; color: var(--muted); }
.post-foot { margin-top: auto; padding-top: .7rem; display: flex; justify-content: space-between; align-items: center; font-size: .9rem; color: var(--muted); }
.post-foot a { color: var(--accent); }
.post-foot a:hover { text-decoration: underline; }

.level + .level, #feed > .feed + .level { margin-top: 36px; }
.today-card { margin-bottom: 22px; }
.today-main { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.today-card h2 { font-size: 1.4rem; }
.today-card p { margin: .2rem 0 0; }
.today-go { padding: .6rem 1.6rem; font-size: 1.05rem; }
.today-card .cue { margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .95rem; }
.course-section { border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--card); margin-bottom: 10px; }
.course-section > .feed { padding: 0 12px 12px; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 12px 16px; cursor: pointer; list-style: none; }
.section-head::-webkit-details-marker { display: none; }
.section-head::before { content: ""; width: 7px; height: 7px; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform .15s; flex: none; }
.course-section[open] > .section-head::before { transform: rotate(45deg); }
.section-head h3 { font-size: 1.05rem; margin-right: auto; }
.section-progress { display: flex; align-items: center; gap: .6rem; font-size: .875rem; white-space: nowrap; }
.section-progress .bar-track { display: block; width: 80px; height: 6px; }
.section-progress .bar-fill { display: block; }
.upcoming { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 12px 16px; border: 1px dashed var(--line); border-radius: var(--r-panel); color: var(--muted); }
.upcoming h3 { font-size: 1rem; font-weight: 500; color: var(--text); opacity: .75; }
.upcoming p { margin: .1rem 0 0; font-size: .9rem; }
.upcoming .muted { font-size: .875rem; white-space: nowrap; }
.pick .sub { padding-left: 1.4rem; font-size: .95rem; }
.due-num { font-size: 2.2rem; font-weight: 700; line-height: 1; color: var(--wait); margin-bottom: .2rem; }

/* Charts: thin horizontal bars, values as text in text colour */
.bars { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.bar-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: .85rem; }
.bar-row dt { color: var(--muted); }
.bar-row dd { margin: 0; font-size: .875rem; font-weight: 600; }
.bar-track { grid-column: 1 / -1; height: 8px; background: var(--surface); border-radius: 4px; }
.bar-fill { height: 100%; background: var(--accent); border-radius: 4px; }
.split { display: flex; gap: 2px; height: 14px; margin: 4px 0 10px; }
.split span { border-radius: 4px; min-width: 6px; }
.split .der { background: var(--der-m); } .split .die { background: var(--die-m); } .split .das { background: var(--das-m); }
.legend { display: flex; gap: .9rem; flex-wrap: wrap; font-size: .85rem; list-style: none; padding: 0; margin: 0; }
.legend li { display: flex; align-items: center; gap: .35rem; }
.legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.legend .der i { background: var(--der-m); } .legend .die i { background: var(--die-m); } .legend .das i { background: var(--das-m); }
.legend b { color: var(--text); font-weight: 400; }

/* ---------- Notes page ---------- */
.reading { display: grid; grid-template-columns: 210px minmax(0, 1fr) 250px; gap: 28px; align-items: start; padding: 28px 24px 80px; }
.toc a { display: block; padding: .3rem 0 .3rem .75rem; color: var(--muted); border-left: 2px solid var(--line); font-size: .92rem; }
.toc a:hover { color: var(--text); }
.toc a[aria-current] { color: var(--text); border-left-color: var(--accent); font-weight: 500; }
article.note { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; }
.cover { margin: 0; position: relative; }
.cover img { width: 100%; aspect-ratio: 2.4; object-fit: cover; }
.cover figcaption { position: absolute; right: 8px; bottom: 6px; font-size: .75rem; color: #fff; background: #0008; padding: 0 .4rem; border-radius: var(--r-inline); }
.cover figcaption a { text-decoration: underline; }
.note-body { padding: 28px clamp(18px, 4vw, 44px) 40px; }
.note-body > header h1 { font-size: clamp(1.8rem, 4vw, 2.3rem); margin: .4rem 0 .2rem; }
.note-body section { padding-top: 28px; margin-top: 28px; border-top: 1px solid var(--line); }
.note-body section:first-of-type { border-top: 0; margin-top: 8px; }
.note-body h2 { font-size: 1.45rem; }
.note-body h2 .sub { display: block; font-size: .95rem; font-weight: 400; color: var(--muted); margin-top: .1rem; }
.note-body h3 { font-size: 1.1rem; margin: 1.4rem 0 .4rem; }
.note-body p, .note-body li { max-width: 70ch; }
.gist { font-size: 1.2rem; line-height: 1.65; margin: .8rem 0 0; }

.vocab { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-top: 14px; }
/* Nouns get a faint tint of their article colour; other words stay plain. */
.vocab-item { background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-block); padding: 10px 12px; }
.tint.der { background: color-mix(in srgb, var(--der-m) var(--tint), var(--card)); border-color: color-mix(in srgb, var(--der-m) 30%, var(--line)); }
.tint.die { background: color-mix(in srgb, var(--die-m) var(--tint), var(--card)); border-color: color-mix(in srgb, var(--die-m) 30%, var(--line)); }
.tint.das { background: color-mix(in srgb, var(--das-m) var(--tint), var(--card)); border-color: color-mix(in srgb, var(--das-m) 30%, var(--line)); }
.vocab-de { font-size: 1.15rem; font-weight: 600; display: inline-block; }
.vocab-pl, .vocab-ex { font-size: .87rem; color: var(--muted); }
.vocab-ex { font-style: italic; display: inline-block; margin-top: .25rem; }

.extras { margin-top: 14px; }
.extras .vocab { margin-top: 10px; }
[lang="fa"] { font-family: "Vazirmatn", "Noto Naskh Arabic", "Noto Sans Arabic", sans-serif; }
.fa { display: block; color: var(--muted); font-size: .95rem; margin-top: .2rem; }
.daybar { display: flex; gap: 2px; margin: 14px 0 6px; border-radius: var(--r-block); overflow: hidden; text-align: center; font-size: .9rem; }
.daybar > div { padding: .55rem .4rem; background: var(--accent-soft); }
.daybar b { display: block; font-weight: 600; }
.daybar small { color: var(--muted); }
.abc td:first-child { font-weight: 600; font-size: 1.15rem; }
.abc td { padding: .35rem .8rem; }
.rule { background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: var(--r-block); padding: 12px 16px; margin: 14px 0; }
.rule > :first-child { margin-top: 0; } .rule > :last-child { margin-bottom: 0; }
table { border-collapse: collapse; margin: 14px 0; border: 1px solid var(--line); border-radius: var(--r-block); overflow: hidden; border-collapse: separate; border-spacing: 0; }
th, td { padding: .45rem 1rem; text-align: left; border-bottom: 1px solid var(--line); }
th { background: var(--surface); font-size: .875rem; font-weight: 600; color: var(--muted); }
tr:last-child td { border-bottom: 0; }
.end { font-style: normal; font-weight: 600; background: var(--accent-soft); padding: 0 .1em; border-radius: var(--r-inline); }

/* Sentence-position diagram: numbered slots, the verb slot is highlighted */
.slots { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.slot-row { display: flex; gap: 6px; flex-wrap: wrap; }
.slot { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-control); padding: 4px 12px 6px; min-width: 70px; }
.slot small { display: block; font-size: .75rem; font-weight: 400; color: var(--muted); }
.slot.verb { background: var(--accent-soft); border-color: var(--accent); font-weight: 600; }

.phrases { list-style: none; padding: 0; margin: 12px 0 0; }
.phrases li { padding: .6rem 0; border-bottom: 1px solid var(--line); }
.phrases li:last-child { border-bottom: 0; }
.phrases [lang="de"] { font-size: 1.1rem; font-weight: 500; }
.phrases .en { display: block; color: var(--muted); font-size: .92rem; }

.warn { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.warn li { border: 1px solid var(--line); border-radius: var(--r-block); padding: 10px 14px; }
.warn s { color: var(--err); text-decoration-thickness: 2px; }
.warn ins { text-decoration: none; color: var(--ok); font-weight: 600; }
.warn .why { display: block; font-size: .92rem; color: var(--muted); margin-top: .2rem; }

.takeaways { padding-left: 1.2rem; font-size: 1.05rem; }
.takeaways li { margin-bottom: .4rem; }
.takeaways li::marker { color: var(--muted); }

details { border: 1px solid var(--line); border-radius: var(--r-block); padding: .55rem .9rem; margin: 14px 0; }
summary { cursor: pointer; font-weight: 500; }
details[open] summary { margin-bottom: .4rem; }

/* Translate pop-up on text selection: two icon buttons, expands only when translate is clicked */
.tip { position: absolute; z-index: 30; padding: 4px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-control); box-shadow: var(--shadow-lg); }
.tip[hidden] { display: none; }
.tip-row { display: flex; gap: 2px; }
.tip-btn { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 7px; background: none; color: var(--muted); }
.tip-btn:hover, .tip-btn[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent); }
.tip.open { width: min(320px, calc(100vw - 16px)); padding: 4px 12px 12px 4px; border-radius: var(--r-block); font-size: .95rem; }
.tip.open .tip-en, .tip.open .tip-src, .tip.open .tip-links { margin-left: 8px; }
.tip-en { margin: .4rem 0 .2rem; }
.tip-en > div + div { margin-top: .3rem; }
.tip-pos { color: var(--muted); font-style: italic; margin-right: .2rem; }
.tip-src { font-size: .8rem; color: var(--muted); }
.tip-links { display: flex; gap: .8rem; margin-top: .5rem; font-size: .875rem; }
.tip-links a { color: var(--accent); text-decoration: underline; }

/* ---------- Cards and practice ---------- */
.card { color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-panel); min-height: 300px; padding: 28px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: .5rem; }
.card .big { font-size: clamp(2rem, 7vw, 2.8rem); font-weight: 600; line-height: 1.15; }
.card .small { color: var(--muted); }
.card .answer { font-size: 1.25rem; }
.controls { display: flex; gap: .6rem; justify-content: center; margin-top: 1.1rem; flex-wrap: wrap; }
.hint { text-align: center; color: var(--muted); font-size: .88rem; margin-top: .7rem; }
.gender-btns .btn { min-width: 90px; font-size: 1.2rem; font-weight: 600; }
.gender-btns .btn.der { color: var(--der); } .gender-btns .btn.die { color: var(--die); } .gender-btns .btn.das { color: var(--das); }
.feedback { min-height: 1.8rem; text-align: center; font-weight: 600; margin-top: .9rem; }
.feedback.ok { color: var(--ok); } .feedback.no { color: var(--err); }
.type-row { display: flex; gap: .5rem; margin-top: .8rem; width: 100%; }
.type-row input { flex: 1; min-width: 0; font-size: 1.15rem; padding: .45rem .7rem; border: 1px solid var(--line-strong); border-radius: var(--r-control); background: var(--bg); }
.umlauts { display: flex; gap: .4rem; justify-content: center; margin-top: .4rem; }
.umlauts button { border: 1px solid var(--line-strong); background: var(--bg); border-radius: var(--r-control); width: 2.3rem; height: 2.3rem; font-size: 1.1rem; }

/* Sidebar pick lists (lessons, exercises) and small text helpers */
.pick { display: flex; flex-direction: column; gap: 2px; }
.pick a, .pick button { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; text-align: left; width: 100%; padding: .4rem .6rem; border: 0; background: none; border-radius: var(--r-control); color: var(--text); }
.pick a:hover, .pick button:hover { background: var(--surface); }
.pick [aria-current], .pick [aria-pressed="true"] { background: var(--accent-soft); }
.pick .count { color: var(--muted); font-size: .875rem; }
.pick small { display: block; color: var(--muted); font-size: .85rem; }
.box p { margin: 0 0 .6rem; } .box p:last-child { margin-bottom: 0; }
.box .note-hint { color: var(--muted); font-size: .9rem; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: .4rem .7rem; font-size: .9rem; color: var(--muted); margin: 0; }
.keys dt, .keys dd { margin: 0; }
kbd { font: .85rem/1 "Onest", sans-serif; color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--r-inline); padding: .15rem .4rem; }
.facts { margin: 0; display: grid; gap: .55rem; }
.facts dt { font-size: .85rem; color: var(--muted); }
.facts dd { margin: 0; }
.link { color: var(--accent); text-decoration: underline; }
.link-btn { border: 0; background: none; padding: 0; color: var(--muted); font-size: .875rem; text-decoration: underline; }
.link-btn:hover { color: var(--accent); }
.logout { margin-top: .8rem; }
.login-page { padding-top: 0; min-height: 100vh; display: grid; place-items: center; }
.login { width: min(360px, calc(100vw - 32px)); text-align: center; padding: 28px; }
.login img { margin: 0 auto 10px; border-radius: 14px; }
.login h1 { font-size: 1.4rem; margin-bottom: 1.2rem; }
.login form { display: grid; gap: .5rem; text-align: left; }
.login label { color: var(--muted); font-size: .9rem; }
.login input { font-size: 1rem; padding: .55rem .7rem; border: 1px solid var(--line-strong); border-radius: var(--r-control); background: var(--bg); }
.login .btn { margin-top: .5rem; }
.login-error { color: var(--err); margin: 0; font-size: .9rem; }
.word-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; }
.tabs { display: flex; flex-wrap: wrap; gap: .2rem 1.4rem; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.tabs a { padding: .2rem 0 .6rem; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a:hover { color: var(--text); }
.tabs a[aria-current] { color: var(--text); font-weight: 500; border-bottom-color: var(--accent); }
.count.due { color: var(--wait); }
.tabs .count { font-size: .875rem; margin-left: .15rem; }
.gap { display: inline-block; min-width: 3.5em; border-bottom: 2px solid var(--accent); color: var(--muted); margin: 0 .15em; }
.gap.ok { color: var(--ok); border-color: var(--ok); } .gap.no { color: var(--err); border-color: var(--err); }
.due-num.best { color: var(--text); }
.streak-big { display: flex; align-items: center; gap: .5rem; font-size: 2.2rem; font-weight: 700; line-height: 1; margin-bottom: .3rem; }
.streak-big svg { width: 30px; height: 30px; }
.streak-big.open { color: var(--wait); } .streak-big.done { color: var(--accent); } .streak-big.done svg { fill: currentColor; }
.cal { display: grid; grid-auto-flow: column; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(7, auto); gap: 3px; margin: .8rem 0 .5rem; } /* 12 weeks, one column each */
.cal span { aspect-ratio: 1; border-radius: 3px; background: var(--surface); }
.cal .l1 { background: color-mix(in srgb, var(--accent) 30%, var(--surface)); }
.cal .l2 { background: color-mix(in srgb, var(--accent) 60%, var(--surface)); }
.cal .l3 { background: var(--accent); }
.cal .today { outline: 1px solid var(--text); outline-offset: 1px; }
.cal-legend { display: flex; gap: .35rem; align-items: center; font-size: .8rem; color: var(--muted); }
.cal-legend span { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.cal-legend .l0 { background: var(--surface); } .cal-legend .l1 { background: color-mix(in srgb, var(--accent) 30%, var(--surface)); } .cal-legend .l2 { background: color-mix(in srgb, var(--accent) 60%, var(--surface)); } .cal-legend .l3 { background: var(--accent); }
#streak-box .bars { margin-top: .6rem; }
.repair-note { color: var(--wait); font-size: .95rem; }
.cal-help { font-size: .875rem; margin-top: .5rem; }
#streak-box .btn { margin-top: .8rem; width: 100%; }
.tiles { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: 52px; width: 100%; padding: 8px; border-radius: var(--r-block); }
.tiles.answer { border: 1px dashed var(--line-strong); margin-top: .6rem; }
.tile { font-size: 1.15rem; padding: .35rem .8rem; border: 1px solid var(--line-strong); border-radius: var(--r-control); background: var(--card); }
.tile:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.timer { height: 6px; border-radius: 3px; background: var(--surface); margin-bottom: 14px; overflow: hidden; }
.timer div { height: 100%; background: var(--accent); width: 100%; }
.choices { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 420px; margin-top: .8rem; }
.choices .btn { justify-content: flex-start; }
.choices .btn kbd { margin-right: .5rem; }
.choices .btn.right { border-color: var(--ok); color: var(--ok); }
.choices .btn.wrong { border-color: var(--err); color: var(--err); }
.story { text-align: left; align-items: stretch; justify-content: flex-start; }
.story h3 { font-size: 1.3rem; margin-bottom: .4rem; }
.story-line { padding: .5rem 0; border-bottom: 1px solid var(--line); }
.story-line:last-child { border-bottom: 0; }
.story-line .de { font-size: 1.15rem; }
.story-line .en { display: block; color: var(--muted); font-size: .95rem; margin-top: .15rem; }
.story-line .en[hidden] { display: none; }
.story-line.playing { background: var(--accent-soft); border-radius: var(--r-inline); }
.story.hide-text .de, .story.hide-text .reveal, .story.hide-text .en { visibility: hidden; }
.toggle { display: flex; align-items: center; gap: .5rem; font-size: .95rem; padding: .3rem 0; cursor: pointer; }
.reveal { border: 0; background: none; color: var(--accent); font-size: .875rem; padding: 0; margin-left: .4rem; text-decoration: underline; }
.round { display: flex; gap: 3px; height: 6px; margin-bottom: 14px; }
.round span { flex: 1; border-radius: 3px; background: var(--surface); }
.round .ok { background: var(--ok); } .round .no { background: var(--err); }
.card .examples { margin-top: .4rem; color: var(--muted); }
.card .examples [lang="de"] { color: var(--text); }

@media (max-width: 1080px) {
  .three { grid-template-columns: 220px minmax(0, 1fr); }
  .three > .right { grid-column: 1 / -1; position: static; display: grid; grid-template-columns: 1fr 1fr; }
  .reading { grid-template-columns: minmax(0, 1fr) 240px; }
  .reading > .toc-wrap { display: none; }
}
@media (max-width: 760px) {
  .three, .reading { grid-template-columns: 1fr; padding-left: 14px; padding-right: 14px; }
  .three > .right { grid-template-columns: 1fr; }
  .three > main { order: -1; } /* on phones the task comes first, sidebars below */
  .side { position: static; }
  .post { grid-template-columns: 1fr; }
  .post img { height: 170px; }
  .pick { flex-direction: row; overflow-x: auto; flex-wrap: nowrap; }
  .pick a, .pick button { width: auto; white-space: nowrap; }
  .top .shell { grid-template-columns: auto 1fr auto; gap: .8rem; }
  .top nav { gap: 1rem; justify-content: center; }
  .brand { font-size: 1rem; }
}
@media (pointer: coarse) { .keys-box { display: none; } .tip-btn { width: 40px; height: 40px; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } html { scroll-behavior: auto; } * { transition: none !important; } @view-transition { navigation: none; } }
.hear-btn { gap: .5rem; font-size: 1.05rem; padding: .6rem 1.2rem; }