@import url("/fonts/fonts.css");

/* ── Flat design (matches learn-app dative trainer: no card, flat rows) ──
   Light theme only. Teachable has no dark mode, so the embed stays light
   regardless of the learner's OS setting. Dark palette removed for now.
   Text uses the *-ink tokens (contrast-checked); borders/fills use the
   accent tokens. Brand orange #F04E23 kept. No brown. */
:root {
  --sg-bg:#EFEFED; --sg-surface:#FFFFFF; --sg-chip:#E7E7E4;
  --sg-text:#1F2022; --sg-light:#5C5E62; --sg-border:#D3D3D0;
  --sg-orange:#F04E23; --sg-orange-dark:#D8401A; --sg-orange-ink:#D8401A;
  --sg-success:#1AA35A; --sg-success-ink:#0F7A42;
  --sg-error:#E23B34; --sg-error-ink:#C42A24;
  --sg-success-tint:rgba(26,163,90,0.13); --sg-error-tint:rgba(226,59,52,0.12);
}

body {background:var(--sg-bg) !important;background-image:none !important;overflow-y:auto;scrollbar-width:none;color:var(--sg-text);margin:0}
body::-webkit-scrollbar {display:none}
main.ex-main {min-height:100vh}
/* embedded (iframed into a lesson): bare - no site header/footer, tight, no forced scroll */
body.ex-embed main.ex-main {min-height:auto;padding:14px 0 24px}
body.ex-embed {overflow-y:auto}

/* Container: NO box - content flows on the page, like the dative trainer */
.ex-container {position:relative;font-family:"Karla",sans-serif;color:var(--sg-text);background:transparent;box-shadow:none;border:none;padding:12px 20px;max-width:720px;margin:0 auto}
.header-row {display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:10px}
.header-row > div:first-child {display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-right:100px}
.title {font-size:26px;font-weight:800;color:var(--sg-orange-ink);margin:0;letter-spacing:-0.3px}
/* migrated exercises: title as a small tag (the Teachable lecture already names it) */
.ex-tag {display:inline-block;font-family:"Karla",sans-serif;font-size:14px;font-weight:700;color:var(--sg-orange-ink);background:rgba(240,78,35,0.12);padding:4px 12px;border-radius:8px;letter-spacing:0.02em;line-height:1.3}
.level-badge {font-size:11px;font-weight:700;background:var(--sg-success-tint);color:var(--sg-orange-ink);background:rgba(240,78,35,0.12);padding:3px 10px;border-radius:8px;letter-spacing:1px;text-transform:uppercase}

/* Progress count + score badge, right of the title */
.header-stats {position:absolute;top:14px;right:20px;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--sg-light);flex:none}
.score-badge {background:var(--sg-orange);color:#fff;padding:2px 11px;border-radius:11px;font-weight:700;font-size:13px;font-variant-numeric:tabular-nums}

/* Flat header buttons: Menu, hint pills */
.header-actions {display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;min-width:0}
.back-btn {background:var(--sg-surface);color:var(--sg-text);border:1px solid var(--sg-border);padding:8px 16px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block;flex:none;transition:filter .12s}
.back-btn:hover {filter:brightness(0.97)}

/* Task instruction - tells the learner what to do */
.ex-instruction {font-family:"Karla",sans-serif;font-size:16px;line-height:1.45;color:var(--sg-light);margin:-4px 0 16px}

/* Progress: thin line, like the dative trainer */
.progress-row {display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;font-size:14px;color:var(--sg-light)}
.progress-bar {flex:1;height:4px;background:var(--sg-border);border-radius:2px;margin:0 12px;overflow:hidden}
.progress-fill {height:100%;background:var(--sg-orange);border-radius:2px;transition:width 0.3s}

/* Exercise area */
.exercise-area {min-height:200px}
.exercise-sentence {position:relative;font-size:25px;line-height:1.6;margin:20px 0;color:var(--sg-text);white-space:pre-line}

/* translation popup - hover or tap the German to show the English above it */
.has-tr {cursor:help}
.tr-pop {position:absolute;bottom:calc(100% + 13px);left:50%;transform:translateX(-50%);width:max-content;max-width:92%;background:var(--sg-surface);color:var(--sg-light);border:1px solid var(--sg-border);border-radius:8px;padding:6px 13px;font-size:15px;font-weight:500;line-height:1.4;text-align:center;box-shadow:0 3px 12px rgba(0,0,0,0.2);z-index:25;opacity:0;visibility:hidden;transition:opacity .12s;pointer-events:none}
.has-tr:hover .tr-pop, .has-tr.tr-show .tr-pop {opacity:1;visibility:visible}
.exercise-sentence .gap {min-width:74px;display:inline-block;color:var(--sg-orange-ink);font-weight:700;text-align:center;border-bottom:2px solid var(--sg-orange)}

/* NEW: per-question image - reserved, centred slot so the card never jumps when it decodes */
.ex-image-slot {display:flex;align-items:center;justify-content:center;min-height:210px;margin:8px 0 4px}
.ex-image-slot img {max-height:210px;max-width:100%;border-radius:10px;display:block}

/* Fill input: flat orange underline blank (like the dative "d__" prompt) */
.gap-input {font-family:"Karla",sans-serif;font-size:23px;font-weight:700;border:none;border-bottom:2px solid var(--sg-border);border-radius:0;background:transparent;color:var(--sg-orange-ink);padding:2px 6px;min-width:60px;max-width:100%;outline:none;text-align:center;transition:border-color .12s}
.gap-input:focus {border-bottom-color:var(--sg-orange)}
.gap-input.correct {color:var(--sg-success-ink);border-bottom-color:var(--sg-success)}
.gap-input.wrong {color:var(--sg-error-ink);border-bottom-color:var(--sg-error)}
.gap-wrong {font-family:"Karla",sans-serif;font-size:23px;font-weight:600;color:var(--sg-error-ink);text-decoration:line-through;text-decoration-thickness:2px;padding:2px 4px}
.corr-ans {font-family:"Karla",sans-serif;font-size:23px;font-weight:700;color:var(--sg-success-ink);border-bottom:2px solid var(--sg-success);padding:2px 6px;margin-left:8px;white-space:nowrap}

/* Numbered gap badge (multi-gap items): ties each blank to its matching hint */
.gap-badge {display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--sg-orange);color:#fff;font-size:12px;font-weight:800;line-height:1;vertical-align:middle;flex:none}
.exercise-sentence .gap-badge {margin:0 3px 0 2px}
.hint-pill .gap-badge {width:18px;height:18px;margin-right:6px}

/* Per-gap hint marker: a small "?" right after the blank; click to reveal that gap's hint */
.gap-hint {position:relative;display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:50%;border:1.5px solid var(--sg-orange);color:var(--sg-orange-ink);background:transparent;font-size:12px;font-weight:800;line-height:1;cursor:pointer;margin-left:6px;vertical-align:middle;user-select:none}
.gap-hint.open {background:var(--sg-orange);color:#fff}
.gap-pop {position:absolute;top:calc(100% + 13px);left:50%;transform:translateX(-50%);width:max-content;max-width:220px;background:var(--sg-surface);color:var(--sg-text);border:1px solid var(--sg-orange);border-radius:8px;padding:6px 11px;font-size:14px;font-weight:600;line-height:1.35;text-align:center;box-shadow:0 3px 12px rgba(0,0,0,0.2);z-index:30;white-space:normal;cursor:default}

/* Translation line (no italics per house rules) */
.translation-line {font-family:"Karla",sans-serif;font-size:17px;line-height:1.45;color:var(--sg-light);margin:10px 0 4px}

/* Pick options: flat full-width stacked rows with a number chip */
.options-row {display:flex;flex-direction:column;gap:10px;margin:22px 0;align-items:stretch}
.option-btn {display:flex;align-items:center;gap:12px;width:100%;text-align:left;font-family:"Karla",sans-serif;font-size:19px;font-weight:600;padding:14px 16px;border-radius:12px;border:2px solid var(--sg-border);cursor:pointer;background:var(--sg-surface);color:var(--sg-text);transition:filter .12s,background .12s}
.option-btn:hover {filter:brightness(0.97)}
.option-btn .key-hint {display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;font-size:13px;font-weight:700;color:var(--sg-light);background:var(--sg-chip);border-radius:7px}
.option-btn.correct {background:var(--sg-success-tint);color:var(--sg-success-ink);border-color:var(--sg-success)}
.option-btn.correct .key-hint {color:var(--sg-success-ink);background:var(--sg-success-tint)}
.option-btn.wrong {background:var(--sg-error-tint);color:var(--sg-error-ink);border-color:var(--sg-error)}
.option-btn.wrong .key-hint {color:var(--sg-error-ink);background:var(--sg-error-tint)}

/* Multi-select (checkbox): each option has a checkbox square; toggle, then Check */
.multi-hint {text-align:center;color:var(--sg-light);font-size:15px;margin:2px 0 12px}
.option-btn.multi .chk {width:20px;height:20px;border:2px solid var(--sg-border);border-radius:5px;flex:none;display:inline-block;transition:background .1s,border-color .1s}
.option-btn.multi.selected .chk {background:var(--sg-orange);border-color:var(--sg-orange)}
.option-btn.multi.correct .chk {background:var(--sg-success);border-color:var(--sg-success)}
.option-btn.multi.wrong .chk {background:var(--sg-error);border-color:var(--sg-error)}
.option-btn.multi.missed .chk {border-color:var(--sg-success);border-style:dashed}

/* Word order */
.word-chips {display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:22px 0}
.word-chip {font-family:"Karla",sans-serif;font-size:19px;font-weight:600;padding:11px 18px;border-radius:10px;border:1px solid var(--sg-border);cursor:pointer;background:var(--sg-surface);color:var(--sg-text);transition:filter .12s;user-select:none}
.word-chip:hover {filter:brightness(0.97)}
.word-chip.placed {opacity:0.4;cursor:default}
.order-slot {min-height:48px;border:2px dashed var(--sg-border);border-radius:12px;padding:10px;margin:16px 0;display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:transparent;transition:border-color .12s}
.order-slot.correct {border-color:var(--sg-success);border-style:solid}
.order-slot.wrong {border-color:var(--sg-error);border-style:solid}
.order-slot .slot-word {font-size:19px;font-weight:600;padding:8px 14px;background:var(--sg-orange);color:#fff;border-radius:10px;cursor:pointer}
.order-source {position:relative;text-align:center;font-size:20px;line-height:1.5;color:var(--sg-text);margin:16px 0 4px;white-space:pre-line}
/* dragdrop scaffold: fixed sentence with inline gap slots */
.scaffold-text {position:relative;text-align:center;font-size:20px;line-height:2.1;color:var(--sg-text);margin:16px 0 6px}
.drop-slot {display:inline-block;min-width:52px;min-height:1.3em;margin:0 3px;padding:3px 10px;border-bottom:2px dashed var(--sg-border);vertical-align:middle;cursor:pointer;font-weight:700;color:var(--sg-orange-ink)}
.drop-slot.filled {border-bottom:2px solid var(--sg-orange);background:var(--sg-chip);border-radius:8px}
.drop-slot.correct {border-bottom:2px solid var(--sg-success);color:var(--sg-success-ink);background:var(--sg-success-tint);border-radius:8px}
.drop-slot.wrong {border-bottom:2px solid var(--sg-error);color:var(--sg-error-ink);background:var(--sg-error-tint);border-radius:8px}
.order-instruction {text-align:center;color:var(--sg-light);font-size:16px;margin:0 0 4px}

/* Mark words (wordsearch): click the target words in the text */
.mark-text {font-size:20px;line-height:2;margin:20px 0;color:var(--sg-text)}
.mark-word {cursor:pointer;padding:1px 3px;border-radius:5px;transition:background .1s}
.mark-word:hover {background:var(--sg-chip)}
.mark-word.marked {background:rgba(240,78,35,0.18);color:var(--sg-orange-ink);font-weight:600}
.mark-word.correct {background:var(--sg-success-tint);color:var(--sg-success-ink);font-weight:600}
.mark-word.wrong {background:var(--sg-error-tint);color:var(--sg-error-ink);text-decoration:line-through}
.mark-word.missed {outline:1.5px dashed var(--sg-success);outline-offset:1px}

/* Mark-words counter */
.mark-counter {text-align:center;font-size:15px;font-weight:600;color:var(--sg-light);margin:10px 0 4px}

/* Essay (free writing, not graded) */
.essay-prompt {font-size:19px;line-height:1.6;margin:18px 0;color:var(--sg-text);white-space:pre-line}
.essay-tasks {font-size:19px;line-height:1.6;margin:18px 0;color:var(--sg-text);padding-left:24px}
.essay-tasks li {margin:7px 0}
.essay-box {width:100%;min-height:180px;font-family:"Karla",sans-serif;font-size:17px;line-height:1.5;padding:12px 14px;border:1px solid var(--sg-border);border-radius:10px;background:var(--sg-surface);color:var(--sg-text);resize:vertical}
.essay-box:focus {outline:none;border-color:var(--sg-orange)}
.essay-count {text-align:right;font-size:13px;color:var(--sg-light);margin:6px 2px 0}

/* Primary action button (Check / Next / Practice Again) - flat orange */
.check-btn {font-family:"Karla",sans-serif;font-size:19px;font-weight:700;padding:13px 34px;border-radius:10px;border:none;cursor:pointer;background:var(--sg-orange);color:#fff;display:block;margin:20px auto;transition:filter .12s}
.check-btn:hover {filter:brightness(1.05)}
.check-btn:disabled {opacity:0.5;cursor:default}
.hidden {display:none !important}

/* NEW: explanation shown after answering - sits at the bottom so no control moves.
   Flat surface, rounded, no left-border accent, house colours. */
.ex-explanation {margin:18px auto 0;max-width:640px;background:var(--sg-surface);border:1px solid var(--sg-border);border-radius:12px;padding:14px 18px;font-family:"Karla",sans-serif}
.ex-explanation .lbl {display:block;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--sg-orange-ink);margin-bottom:5px}
.ex-explanation p {margin:0;font-size:16.5px;line-height:1.5;color:var(--sg-text)}

/* Hint / EN pills - flat */
.pills-row {display:flex;gap:8px;justify-content:center;margin:14px 0 8px;flex-wrap:wrap}
.hint-pill {position:relative;font-family:"Karla",sans-serif;font-size:14px;font-weight:600;padding:7px 15px;border-radius:10px;border:1px solid var(--sg-border);background:var(--sg-surface);color:var(--sg-light);cursor:pointer;transition:filter .12s,color .12s,border-color .12s;user-select:none}
/* revealed hint shows in one stable line below the buttons - the button never changes text */
.hint-reveal {min-height:42px;display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;font-size:17px;font-weight:600;line-height:1.35;color:var(--sg-text);margin:4px auto 0;max-width:520px;padding:0 12px}
.hint-pill:hover {filter:brightness(0.97);color:var(--sg-orange-ink)}
.hint-pill.revealed {color:var(--sg-text);border-color:var(--sg-orange)}
.hint-pill.en-on {color:var(--sg-orange-ink);border-color:var(--sg-orange)}
.hint-pill.fading {opacity:0}

/* Results */
.results {text-align:center;padding:20px 0}
.results h2 {font-size:32px;color:var(--sg-orange-ink);margin-bottom:10px}
.results .score {font-size:46px;font-weight:800;color:var(--sg-success-ink);margin:15px 0}
.results .detail {font-size:19px;color:var(--sg-light);margin:5px 0}

/* Feedback (pick / order) */
.feedback-msg {text-align:center;font-size:16px;font-weight:600;margin:10px 0;min-height:24px}
.feedback-msg.correct {color:var(--sg-success-ink)}
.feedback-msg.wrong {color:var(--sg-error-ink)}