/* Exercise refinements and shared learning navigation. */
.feed-column {
  --exercise-muted: #716780;
  --answer-surface: #fff;
  --answer-border: #e6e2ed;
  --correct-surface: #f0faf5;
  --correct-border: #92ceb0;
  --wrong-surface: #fff5f2;
  --wrong-border: #e5aa9e;
}

html[data-theme="dark"] .feed-column {
  --exercise-muted: #bcb0cd;
  --answer-surface: #252936;
  --answer-border: #434556;
  --correct-surface: #233c31;
  --correct-border: #579c79;
  --wrong-surface: #442f30;
  --wrong-border: #b57c6e;
}

.feed-toolbar { gap: 12px; flex-wrap: wrap; }
.feed-tabs button { min-height: 40px; padding: 8px 0 11px; font-size: 12px; }
.feed-column .feed-tabs button:not(.selected) { color: var(--exercise-muted); }
.feed-column .auto-label {
  min-height: 40px;
  padding: 4px 0;
  gap: 8px;
  font-size: 11px;
  color: var(--exercise-muted);
  cursor: pointer;
}
.auto-label input { width: 16px; height: 16px; margin: 0; }

.exercise-card .card-banner { padding-top: 13px; padding-bottom: 13px; }
.exercise-card .topic-chip { min-width: 0; line-height: 1.5; flex: 1; }
.exercise-card .exercise-position { font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--exercise-muted); }
.exercise-card .card-body { container-type: inline-size; }
.exercise-card .sentence-translation,
.exercise-card .keyboard-hint,
.exercise-card .input-label { color: var(--exercise-muted); }
.exercise-card .inline-rule summary { padding: 12px 14px; font-size: 12px; line-height: 1.6; }
.exercise-card .inline-rule { margin-bottom: 16px; }
.exercise-card .inline-rule:not([open]) { background: transparent; border-color: transparent; }
.exercise-card .inline-rule:not([open]) summary { padding: 0; min-height: 30px; align-content: center; }
.exercise-card .inline-rule p { padding: 0 14px 10px; font-size: 13px; line-height: 1.75; }
.exercise-card .inline-rule > div { padding: 0 14px 14px; font-size: 13px; line-height: 1.75; }
.exercise-card .card-body h2 { margin-bottom: 16px; line-height: 1.5; }
.exercise-card .german-sentence { line-height: 1.55; overflow-wrap: break-word; }
.exercise-card .sentence-translation { font-size: 13px; line-height: 1.7; margin-top: 8px; margin-bottom: 24px; }
.exercise-card .answers { gap: 10px; }
.exercise-card .answer { font-size: 14px; gap: 10px; min-height: 56px; width: 100%; }
.exercise-card .answer-key { min-width: 28px; min-height: 28px; font-size: 12px; color: var(--exercise-muted); cursor: inherit; }
.exercise-card .answer-text { min-width: 0; overflow-wrap: anywhere; }
.exercise-card .answer-text .vocab { cursor: pointer; }
.exercise-card .answer-marker { flex-shrink: 0; }
.exercise-card .answer:focus-within { outline: 2px solid var(--purple); outline-offset: 3px; }
.exercise-card .answer:disabled { cursor: default; }
.exercise-card .answer:disabled .vocab { cursor: help; }

@container (min-width: 400px) {
  .exercise-card .answers--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 280px) {
  .exercise-card .answers--short { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 220px) {
  .exercise-card .answers--tiny { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.choice-word-help { margin-top: 14px; color: var(--exercise-muted); font-size: 12px; }
.choice-word-help summary { cursor: pointer; min-height: 32px; align-content: center; }
.choice-word-help dl { margin: 8px 0 0; display: grid; gap: 12px; }
.choice-word-help dt { margin: 0 0 4px; color: var(--ink); font-size: 14px; }
.choice-word-help dd { margin: 0; line-height: 1.7; }

/* Feedback must stay green/red when a checked answer is under the pointer. */
.exercise-card .answer.is-correct { --answer-surface: var(--correct-surface); --answer-border: var(--correct-border); }
.exercise-card .answer.is-wrong { --answer-surface: var(--wrong-surface); --answer-border: var(--wrong-border); }
.feed-column .exercise-card .answer:disabled:hover {
  background: var(--answer-surface);
  border-color: var(--answer-border);
}

.exercise-card .feedback { font-size: 13px; line-height: 1.8; padding: 17px; }
.exercise-card .feedback strong { font-size: 14px; }
.exercise-card .feedback-symbol { flex-shrink: 0; }
.exercise-card .feedback > div:last-child { min-width: 0; overflow-wrap: anywhere; }
.exercise-card .card-actions { gap: 12px 16px; }
.exercise-card .card-actions .primary { font-size: 13px; }
.exercise-card .card-actions .text-button { min-height: 44px; }
.exercise-card .keyboard-hint { font-size: 11px; line-height: 1.6; }
.exercise-card .input-label { font-size: 12px; }
.exercise-card .typed-answer { caret-color: var(--purple); }
.exercise-card .special-keys span { font-size: 11px; line-height: 1.6; }
.exercise-card .round-button { width: 40px; height: 40px; }
.exercise-card .card-footer { padding-top: 10px; padding-bottom: 10px; font-size: 11px; color: var(--exercise-muted); }
.feed-column .feed-below { font-size: 11px; line-height: 1.7; color: var(--exercise-muted); }
.feed-column .feed-below > span { max-width: 100%; }
.feed-column .feed-below > span:first-child { align-items: flex-start; justify-content: center; }
.feed-below svg { flex-shrink: 0; margin-top: 2px; }
.feed-column .feed-below > span + span { font-size: 11px; color: inherit; }

@media (max-width: 720px) {
  .feed-toolbar { gap: 4px 12px; margin-bottom: 14px; }
  .feed-tabs { gap: 16px; }
  .exercise-card .card-banner { padding-top: 10px; padding-bottom: 10px; }
  .exercise-card .inline-rule p,
  .exercise-card .inline-rule > div { font-size: 12px; }
  .exercise-card .sentence-translation { font-size: 12px; }
  .exercise-card .answer { padding: 9px 11px; }
  .exercise-card .card-footer { padding-left: 22px; padding-right: 22px; }
}

@media (pointer: coarse) {
  .feed-tabs button, .feed-column .auto-label { min-height: 44px; }
  .exercise-card .tile-control,
  .exercise-card .special-keys button { min-width: 44px; min-height: 44px; }
  .exercise-card .round-button { width: 44px; height: 44px; }
  .exercise-card .inline-rule summary,
  .choice-word-help summary { min-height: 44px; }
}

/* One header for context, task, and progress. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.exercise-card .card-banner { gap: 18px; padding-top: 13px; padding-bottom: 13px; }
.exercise-title { min-width: 0; flex: 1; }
.exercise-title .topic-chip { font-size: 12px; font-weight: 550; margin-bottom: 7px; }
.exercise-title h2 { font-size: 23px; font-weight: 600; line-height: 1.3; letter-spacing: -.4px; color: #3d3157; overflow-wrap: break-word; }
html[data-theme="dark"] .exercise-title h2 { color: #f5efff; }
.exercise-tools { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.feed-controls { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.daily-progress { display: flex; align-items: center; gap: 6px; color: #806126; font-size: 11px; white-space: nowrap; }
html[data-theme="dark"] .daily-progress { color: #d9c18f; }

/* Green-to-red CEFR scale: labels carry the meaning alongside colour. */
[data-cefr="A1"] { --cefr-ink: #195f43; --cefr-fill: #e3f5e9; --cefr-line: #a6d7b8; --cefr-dark-ink: #a9e6bf; --cefr-dark-fill: #223e31; --cefr-dark-line: #4b795c; }
[data-cefr="A2"] { --cefr-ink: #42601c; --cefr-fill: #eef5df; --cefr-line: #bdd293; --cefr-dark-ink: #cfdfa0; --cefr-dark-fill: #35432b; --cefr-dark-line: #6b7d48; }
[data-cefr="B1"] { --cefr-ink: #755400; --cefr-fill: #fff2ce; --cefr-line: #e3c86e; --cefr-dark-ink: #ecd58f; --cefr-dark-fill: #463d25; --cefr-dark-line: #8f783f; }
[data-cefr="B2"] { --cefr-ink: #8b4b12; --cefr-fill: #fff0de; --cefr-line: #e1b584; --cefr-dark-ink: #f0c095; --cefr-dark-fill: #493429; --cefr-dark-line: #976d4d; }
[data-cefr="C1"] { --cefr-ink: #963e2a; --cefr-fill: #ffe9e1; --cefr-line: #e6b1a2; --cefr-dark-ink: #f0b19c; --cefr-dark-fill: #492f2c; --cefr-dark-line: #975d4f; }
[data-cefr="C2"] { --cefr-ink: #94354c; --cefr-fill: #fce8ee; --cefr-line: #e0a8b7; --cefr-dark-ink: #f0aabe; --cefr-dark-fill: #472b38; --cefr-dark-line: #92596e; }
.workspace :is(.lesson-level,.level-pill)[data-cefr], .cefr-guide [data-cefr] { color: var(--cefr-ink); background: var(--cefr-fill); border-color: var(--cefr-line); }
html[data-theme="dark"] .workspace :is(.lesson-level,.level-pill)[data-cefr], html[data-theme="dark"] .cefr-guide [data-cefr] { color: var(--cefr-dark-ink); background: var(--cefr-dark-fill); border-color: var(--cefr-dark-line); }
.exercise-tools .lesson-level { border-width: 1px; border-style: solid; border-radius: 9px; padding: 8px 10px; min-height: 44px; min-width: 94px; display: grid; gap: 6px; cursor: pointer; }
.level-label-text { display: flex; gap: 7px; align-items: center; font-size: 10px; }
.level-label-text strong { font-size: 12px; }
.level-spectrum,.cefr-gradient { background: linear-gradient(90deg,#62b98c 0%,#a5bc63 20%,#d8bd56 40%,#df9d5d 60%,#d57b68 80%,#c96880 100%); }
.level-spectrum { display: block; height: 3px; border-radius: 3px; position: relative; margin: 0 3px; }
.level-spectrum::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--cefr-ink); border: 1px solid var(--cefr-fill); position: absolute; top: -2px; left: var(--cefr-position); transform: translateX(-50%); }
html[data-theme="dark"] .level-spectrum::after { background: var(--cefr-dark-ink); border-color: var(--cefr-dark-fill); }
.cefr-guide { width: min(370px,calc(100vw - 28px)); padding: 22px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 42px #16102230; }
html[data-theme="dark"] .cefr-guide { background: #252936; border-color: #494459; }
.cefr-guide-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 19px; }
.cefr-guide-heading h2 { font-size: 18px; font-weight: 600; }
.cefr-guide-heading button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: transparent; }
.cefr-gradient { height: 6px; border-radius: 4px; }
.cefr-steps { display: grid; grid-template-columns: repeat(6,1fr); gap: 5px; margin: 10px 0 20px; }
.cefr-steps span { padding: 5px 0; text-align: center; font-size: 12px; border-radius: 5px; border: 1px solid transparent; }
.cefr-steps [data-current] { outline: 2px solid currentColor; outline-offset: 2px; font-weight: 700; }
.cefr-guide dl { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 14px; margin: 0; }
.cefr-guide dl div { display: flex; align-items: center; gap: 7px; }
.cefr-guide dt { font-size: 11px; font-weight: 650; border-radius: 4px; padding: 3px 5px; }
.cefr-guide dd { margin: 0; font-size: 12px; line-height: 1.5; }
.cefr-guide p { font-size: 12px; color: #716780; margin-top: 20px; line-height: 1.6; }
html[data-theme="dark"] .cefr-guide p { color: #bcb0cd; }

/* A device-local compact sidebar; native buttons keep names and tooltips. */
.sidebar-toggle { position: absolute; top: 112px; right: 21px; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--muted); }
.sidebar-toggle:hover { color: var(--purple); background: var(--light); }
button[data-nav="learn"] { --nav-day: #6847ba; --nav-night: #c4acff; }
button[data-nav="topics"] { --nav-day: #3263b6; --nav-night: #9dbdf4; }
button[data-nav="reading"] { --nav-day: #28765e; --nav-night: #8dd4b8; }
button[data-nav="conversations"] { --nav-day: #8b5b1d; --nav-night: #e5bf81; }
button[data-nav="review"] { --nav-day: #a34c3f; --nav-night: #edae9e; }
[data-nav="reference"] { --nav-day: #6156ac; --nav-night: #b6b1ee; }
.nav-item,.mobile-nav button { --nav-color: var(--nav-day); }
html[data-theme="dark"] :is(.nav-item,.mobile-nav button) { --nav-color: var(--nav-night); }
.sidebar .nav-item { border: 1px solid transparent; padding: 10px 12px; gap: 11px; min-height: 54px; position: relative; transition: background .16s ease-out,border-color .16s ease-out,transform .16s ease-out; }
.sidebar .nav-item > svg { width: 32px; height: 32px; padding: 6px; color: var(--nav-color); background: color-mix(in srgb,var(--nav-color) 13%,transparent); border-radius: 8px; }
html .sidebar .nav-item:hover { background: color-mix(in srgb,var(--nav-color) 9%,transparent); border-color: color-mix(in srgb,var(--nav-color) 24%,transparent); transform: translateX(2px); }
html .sidebar .nav-item.active { color: var(--nav-color); background: color-mix(in srgb,var(--nav-color) 13%,transparent); border-color: color-mix(in srgb,var(--nav-color) 24%,transparent); }
.sidebar .nav-item.active > svg { background: color-mix(in srgb,var(--nav-color) 22%,transparent); }
.sidebar .nav-item:active { transform: translateY(1px); }
.mobile-nav button { min-height: 44px; }
.mobile-nav button svg { color: var(--nav-color); }
html .mobile-nav button[data-nav].active { color: var(--nav-color); }
.mobile-nav button.active svg { background: color-mix(in srgb,var(--nav-color) 16%,transparent); border-radius: 5px; }
@media(min-width: 721px) {
  .sidebar-collapsed .sidebar { width: 80px; padding: 28px 12px 18px; }
  .sidebar-collapsed .workspace { margin-left: 80px; }
  .sidebar-collapsed .brand { padding: 0; justify-content: center; }
  .sidebar-collapsed .brand > span:last-child,
  .sidebar-collapsed .nav-caption,
  .sidebar-collapsed .nav-label,
  .sidebar-collapsed .sidebar-bottom .level-label,
  .sidebar-collapsed .sidebar-bottom > p,
  .sidebar-collapsed .reset-label { display: none; }
  .sidebar-collapsed .sidebar-toggle { position: static; margin: 16px auto 18px; width: 36px; height: 36px; }
  .sidebar-collapsed .sidebar .nav-item { width: 56px; justify-content: center; padding: 10px 0; }
  .sidebar-collapsed .nav-count { position: absolute; top: 0; right: -2px; }
  .sidebar-collapsed .sidebar-bottom .text-button { width: 44px; height: 44px; display: grid; place-items: center; margin: 0 auto; }
}
@media(max-width: 720px) {
  .exercise-card .card-banner { padding-top: 10px; padding-bottom: 10px; gap: 12px; }
  .exercise-title h2 { font-size: 21px; }
  .exercise-tools { display: grid; grid-template-columns: auto; gap: 5px 7px; }
  .exercise-tools .lesson-level { min-width: 46px; padding: 8px; }
  .level-label-text { justify-content: center; }
  .level-label-text > span { display: none; }
  .exercise-position { grid-column: 1 / -1; grid-row: 2; text-align: center; }
  .feed-controls { gap: 12px; }
  .feed-toolbar { gap: 8px 12px; }
}
@media(max-width: 380px) {
  .exercise-title h2 { font-size: 19px; }
  .exercise-card .card-banner { gap: 8px; }
}
@media(pointer: coarse) {
  .cefr-guide-heading button { width: 44px; height: 44px; }
}
#vocab-tooltip .vocab-plural { color: #f3e9ff; font-size: 12px; margin-bottom: 5px; }
#vocab-tooltip .vocab-usage { color: #d0c5dc; font-size: 11px; line-height: 1.5; margin-top: 6px; }
#vocab-tooltip .vocab-usage [lang="de"] { display: inline; }