/* meA Tutor: meA's world (calm, dark by default, brass accent, sage for done, amber for "look again", never red), with a white
   paper sheet for the test itself because it gets printed. Light follows the phone's setting. All colours are tokens here, in one place,
   like Chit Kids' own stylesheet (no web-app theme is imported). Layout by window size: see rules.js TUTOR.layout and LAYOUT.md. */
:root{
  --bg:#0c1017; --bg2:#121822; --card:#19212d; --card2:#1c2430; --line:#262f3c; --text:#e6e9ee; --muted:#8a94a3; --soft:#c3cad4;
  --brass:#d9b26f; --on-brass:#10141b; --brass-soft:rgb(217 178 111/.14); --sage:#a9bba5; --sage-soft:rgb(169 187 165/.16);
  --amber:#eda04e; --amber-soft:rgb(237 160 78/.12); --glass:#7fd3e6;
  --mea-body:#2b3038; --mea-eye:#ebd9b6; --paper:#fbfaf6; --paper-ink:#1a1a1a; --paper-muted:#5f5f5f; --paper-line:#e3e3e3; --sol:#eef3ea; --paper-hint:#f1efe8; --sol-ink:#2f4a2f;
  --scrim:rgb(0 0 0/.5); --shadow:0 18px 40px -18px rgb(0 0 0/.6);
  --display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --r:16px; --nav-h:64px; --max:720px;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){:root{
  --bg:#f4f2ed; --bg2:#ebe8e1; --card:#ffffff; --card2:#f7f5f0; --line:#ddd8cd; --text:#18202b; --muted:#5b6676; --soft:#3a4452;
  --brass:#8c6a2c; --on-brass:#ffffff; --brass-soft:rgb(140 106 44/.12); --sage:#4e6b49; --sage-soft:rgb(78 107 73/.12);
  --amber:#a8650f; --amber-soft:rgb(168 101 15/.1); --mea-body:#2b3038; --scrim:rgb(20 20 20/.35); --shadow:0 14px 30px -18px rgb(40 30 10/.35);
  color-scheme:light;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 var(--font);-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.muted{color:var(--muted)} .small{font-size:.86rem} .center{text-align:center}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

/* shell */
#app{min-height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
#top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;max-width:calc(var(--max) + 32px);margin:0 auto;padding:8px 16px;background:linear-gradient(var(--bg) 70%,transparent)}
.brand{display:flex;gap:10px;align-items:center;font:600 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.brand .b2{color:var(--brass)} .brand .demo{background:var(--amber-soft);color:var(--amber);padding:2px 8px;border-radius:99px;letter-spacing:.06em}
#view{max-width:calc(var(--max) + 32px);margin:0 auto;padding:4px 16px calc(var(--nav-h) + 24px + env(safe-area-inset-bottom))}
#nav{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;justify-content:center;gap:8px;padding:8px max(16px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:color-mix(in srgb,var(--bg) 92%,transparent);border-top:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#nav button{flex:0 1 180px;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:48px;border:0;background:none;color:var(--muted);font-size:.78rem;font-weight:600;border-radius:12px;cursor:pointer}
#nav button.on{color:var(--brass);background:var(--brass-soft)}
#nav .ic{width:22px;height:22px}
[hidden]{display:none!important}

/* buttons, chips */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:999px;border:1px solid transparent;cursor:pointer;font-weight:600;font-size:.95rem;text-decoration:none}
.btn.p{background:var(--brass);color:var(--on-brass)}
.btn.t{background:var(--card2);border-color:var(--line);color:var(--text)}
.btn.icon{padding:8px 12px}
.btn[disabled]{opacity:.5;cursor:default}
.btn.wide{width:100%}
.row{display:flex;gap:10px;align-items:center;margin-top:12px} .row.wrap{flex-wrap:wrap} .row.between{justify-content:space-between}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 14px 44px}
.chips.left{margin-left:0}
.chip{display:inline-flex;flex-direction:column;align-items:flex-start;gap:0;min-height:44px;justify-content:center;padding:8px 14px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--soft);cursor:pointer;font-size:.95rem;text-align:left}
.chips.left .chip{flex-direction:row;align-items:center;gap:6px;border-radius:999px}
.chip small{color:var(--muted);font-size:.78rem}
.chip.on{background:var(--brass);border-color:transparent;color:var(--on-brass);font-weight:600}
.chip.on small{color:inherit;opacity:.8}
.chip .ic{width:16px;height:16px}
.pill{font-size:.78rem;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--amber-soft);color:var(--amber);white-space:nowrap}

/* meA */
.mea{display:block;flex:none}
.mea .halo{fill:var(--brass);opacity:.12} .mea .ring{fill:none;stroke:var(--brass);stroke-opacity:.3;stroke-width:1.4}
.mea .body{fill:var(--mea-body);stroke:var(--brass);stroke-opacity:.5;stroke-width:1.2}
.mea .eyes rect{fill:var(--mea-eye)} .mea .glasses{fill:none;stroke:var(--brass);stroke-width:2} .mea .smile{fill:none;stroke:var(--mea-eye);stroke-width:3;stroke-linecap:round}
.mea .eyes{animation:blink 6s infinite;transform-origin:120px 112px}
.mea.think .ring{animation:pulse 1.6s ease-in-out infinite;transform-origin:center}
.mea.think .halo{animation:glow 1.6s ease-in-out infinite}
@keyframes blink{0%,96%,100%{transform:scaleY(1)}98%{transform:scaleY(.15)}}
@keyframes pulse{50%{transform:scale(1.08);stroke-opacity:.7}}
@keyframes glow{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.mea *{animation:none!important}}

/* screens before the app */
.screen.center{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:6vh 0 24px;max-width:480px;margin:0 auto}
.hello{font:400 1.9rem/1.15 var(--display);margin:4px 0 0;text-wrap:balance}
.hello.sm{font-size:1.4rem}
.lead{color:var(--soft);margin:0;max-width:40ch}
.steps{text-align:left;margin:8px 0;padding-left:22px;display:flex;flex-direction:column;gap:8px;color:var(--soft)}
.steps .ic{width:16px;height:16px;vertical-align:-3px;color:var(--brass)}
.terms{text-align:left;margin:4px 0 8px;padding-left:20px;display:flex;flex-direction:column;gap:10px;color:var(--soft)}
.terms b{color:var(--text)}
.pairform{display:flex;flex-direction:column;gap:10px;width:100%;max-width:300px}
.pairform input{font:600 1.5rem var(--mono);letter-spacing:.2em;text-align:center;padding:12px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--text)}
.err{color:var(--amber);min-height:1.4em;margin:0;font-size:.92rem}

/* Tests: meA asks */
.split{display:block}
.ask{padding-top:6px}
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:5vh 0 16px}
.say{display:flex;gap:10px;align-items:flex-end;margin:6px 0 10px}
.bubble{background:var(--card);border:1px solid var(--line);border-radius:18px 18px 18px 6px;padding:10px 14px;max-width:min(88%,520px)}
.bubble b{font-weight:600}
.bubble.me{display:block;margin:0 0 12px auto;background:var(--card2);border-radius:18px 18px 6px 18px;color:var(--soft);text-align:left;cursor:pointer;white-space:pre-wrap;overflow-wrap:anywhere}
.bubble.me small{display:block;font-size:.72rem;color:var(--brass);margin-top:2px}
.answer{display:flex;gap:8px;margin:0 0 14px 44px}
.answer.col{flex-direction:column}
.answer .row{margin:0;justify-content:flex-end}
.answer input,.answer textarea{flex:1;min-width:0;font:inherit;font-size:16px;color:var(--text);background:var(--card);border:1px solid var(--line);border-radius:14px;padding:11px 14px}
.answer textarea{resize:vertical}
.review{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin:14px 0}
.lbl{font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0}
dt{color:var(--muted)} dd{margin:0;text-align:right;overflow-wrap:anywhere} dd.hl{color:var(--brass);font-weight:600}

/* my tests */
.list{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
.sechead{display:flex;justify-content:space-between;align-items:baseline}
.sechead h2{font:500 1.3rem var(--display);margin:0 0 8px}
.total{color:var(--brass);font-weight:700}
.trow{display:flex;width:100%;gap:12px;align-items:center;justify-content:space-between;text-align:left;padding:12px 14px;margin:0 0 8px;background:var(--card);border:1px solid var(--line);border-radius:14px;cursor:pointer;min-height:56px}
.trow .g{display:flex;flex-direction:column;min-width:0}
.trow .g b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trow .g small{color:var(--muted)}
.trow .res{display:flex;flex-direction:column;align-items:flex-end;flex:none}
.empty{padding:8px 0}
.stars{display:inline-flex;gap:1px;color:var(--line);line-height:1}
.stars i{font-style:normal} .stars i.on{color:var(--brass)}
.stars.sm{font-size:.85rem} .stars.lg{font-size:2.2rem;gap:6px}

/* one test */
.testhead{display:flex;flex-direction:column;gap:10px;margin:2px 0 6px}
.testhead .btn{align-self:flex-start}
.prog{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.prog li{flex:1;font-size:.72rem;color:var(--muted);padding-top:6px;border-top:4px solid var(--line);border-radius:2px;text-align:center}
.prog li.d{border-color:var(--sage);color:var(--sage)} .prog li.c{border-color:var(--brass);color:var(--text);font-weight:600}
.q{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.q .n{font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.q .x{font:400 1.45rem/1.3 var(--display);margin-top:6px}
.q .a{margin-top:12px;padding:10px 14px;border-left:3px solid var(--sage);background:var(--sage-soft);border-radius:0 12px 12px 0}
.tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:6px 0 12px}
.clock{font:600 1.3rem var(--mono);color:var(--brass);min-width:4.5ch}
.clock.up{color:var(--amber)}
.paper{background:var(--paper);color:var(--paper-ink);border-radius:8px;padding:22px 20px;box-shadow:var(--shadow);font-size:1rem}
.paper h2{font:500 1.3rem/1.25 var(--display);margin:0}
.paper .meta{color:var(--paper-muted);font-size:.9rem;margin:2px 0 12px}
.paper .fields{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px;font-size:.85rem;color:var(--paper-muted);margin-bottom:12px}
.paper .fields span{border-bottom:1px solid var(--paper-muted);padding-bottom:14px}
.paper .hint{background:var(--paper-hint);color:var(--paper-ink);border-radius:6px;padding:8px 10px;font-size:.88rem}
.paper .task{border-top:1px solid var(--paper-line);padding:12px 0;break-inside:avoid}
.paper h3,.mtask h3{display:flex;justify-content:space-between;gap:12px;font-size:1rem;margin:0 0 4px}
.pts{font-weight:400;color:var(--muted);white-space:nowrap}
.paper .pts{color:var(--paper-muted)}
.paper p{margin:0;overflow-wrap:anywhere}
.paper .sol{background:var(--sol);color:var(--sol-ink);padding:8px 10px;border-radius:4px}
.paper .sum{text-align:right;font-weight:600;margin-top:10px}
.key{break-before:page;margin-top:24px}
.stick{position:sticky;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 8px);display:flex;gap:12px;align-items:center;justify-content:space-between;margin-top:16px;padding:10px;background:color-mix(in srgb,var(--bg) 88%,transparent);border-radius:999px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.stick .muted{padding-left:8px}
.mtask{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--line);border-radius:var(--r);padding:14px 16px;margin:0 0 12px}
.mtask.is-richtig{border-left-color:var(--sage)} .mtask.is-teilweise{border-left-color:var(--brass)} .mtask.is-falsch{border-left-color:var(--amber)}
.mtask details{margin:4px 0 8px;color:var(--soft)} .mtask summary{cursor:pointer;color:var(--brass);font-weight:600;font-size:.9rem;min-height:32px}
.mtask details p{margin:6px 0 0;overflow-wrap:anywhere}
.mtask .sol{background:var(--sage-soft);border-radius:10px;padding:10px 12px;overflow-wrap:anywhere}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}
.seg.two{display:inline-grid;grid-template-columns:1fr 1fr;margin:0}
.seg button{min-height:44px;border-radius:12px;border:1px solid var(--line);background:var(--card2);color:var(--soft);font-weight:600;cursor:pointer;padding:0 12px}
.seg button.on{background:var(--brass);border-color:transparent;color:var(--on-brass)}
.seg button.m-richtig.on{background:var(--sage);color:var(--on-brass)}
.seg button.m-falsch.on{background:var(--amber);color:var(--on-brass)}
.result{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:8px 0}
.result .score{font:400 2.6rem/1.1 var(--display)}
.result .pts{margin:4px 0 0;color:var(--soft)}
.result .verdict{font:italic 400 1.15rem var(--display);color:var(--soft);margin:4px 0 0;max-width:36ch}
.prac{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.prac li{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;border-left:3px solid var(--amber);background:var(--amber-soft);border-radius:0 10px 10px 0}
.prac small{color:var(--muted);white-space:nowrap}
.printonly{display:none}

/* Vokabs */
.vocab{padding-top:8px}
.vcard{position:relative;margin:16px 0 8px}
.flash,.pair{width:100%;min-height:min(46vh,340px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border-radius:22px;border:1px solid var(--line);background:var(--card);padding:28px 20px;text-align:center}
.flash{cursor:pointer}
.flash.turned{background:var(--card2);border-color:var(--brass)}
.flash small,.pair small{font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.flash b{font:400 2.1rem/1.2 var(--display);overflow-wrap:anywhere}
.flash .hint{color:var(--muted);font-size:.85rem}
.pair{gap:22px} .pair div{display:flex;flex-direction:column;gap:4px} .pair b{font:400 1.7rem var(--display);overflow-wrap:anywhere}
.vmark{position:absolute;top:10px;right:10px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--card2);color:var(--muted);display:grid;place-items:center;cursor:pointer}
.vmark.on{color:var(--brass);border-color:var(--brass)} .vmark.on .ic{fill:currentColor}
.vnav span{color:var(--muted)}

/* sheet and toast */
#back{position:fixed;inset:0;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity .2s;z-index:20}
#back.open{opacity:1;pointer-events:auto}
#sheet{visibility:hidden;position:fixed;left:0;right:0;bottom:0;z-index:21;max-height:88dvh;overflow:auto;background:var(--bg2);border-radius:22px 22px 0 0;transform:translateY(105%);transition:transform .25s ease;padding:18px max(18px,env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left))}
#sheet.open{transform:none;visibility:visible}
.sheetin{max-width:var(--max);margin:0 auto}
.sheetin h2{font:500 1.4rem var(--display);margin:0 0 8px} .sheetin h3{font-size:1rem;margin:18px 0 4px}
.note{background:var(--brass-soft);border-radius:12px;padding:10px 12px;margin:0 0 8px}
#toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + 20px + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:.2s;z-index:30;background:var(--card2);border:1px solid var(--line);color:var(--text);padding:10px 16px;border-radius:14px;max-width:min(92vw,480px);box-shadow:var(--shadow)}
#toast.show{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){#sheet,#back,#toast{transition:none}}

/* wide windows (iPad and up): meA's questions or the test beside "Meine Proben" */
#app[data-cols="2"]{--max:1080px}
#app[data-cols="2"] .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:32px;align-items:start}
#app[data-cols="2"] .side .list{margin-top:6px;border-top:0;padding-top:0;position:sticky;top:64px}
#app[data-cols="2"] .testview,#app[data-cols="2"] .vocab{max-width:760px;margin:0 auto}
#app[data-wide="true"] .hello{font-size:2.2rem}
/* a phone turned sideways: less hero, compact nav */
#app[data-short="true"] .hero{padding:8px 0}
#app[data-short="true"] .screen.center{padding-top:8px}
#app[data-short="true"] { --nav-h:52px }
#app[data-short="true"] #nav button{flex-direction:row;gap:8px;min-height:40px}
@media (max-width:420px){.chips{margin-left:0}.answer{margin-left:0}.paper{padding:18px 14px}.paper .fields{grid-template-columns:1fr}}

/* print: only the paper (test, then the answer key on its own page) */
@media print{
  body{background:#fff}
  #top,#nav,#toast,#sheet,#back,.testview{display:none!important}
  #view{padding:0;max-width:none}
  .printonly{display:block}
  .printonly .paper{box-shadow:none;padding:0;background:#fff}
  @page{margin:18mm 16mm}
}
.hero.top{padding:2vh 0 8px}

/* chits_mea ADR-0010: several topics, typed tasks answered on screen, reading and listening texts, meA's feedback */
.topics{margin:0 0 14px 44px}
.topic{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:10px 14px;margin:0 0 10px}
.topic .row{margin:0}
.topic .chips{margin:6px 0 2px}
.topics .answer{margin:8px 0 0}
.subform{margin:6px 0 0!important}
.atask{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin:0 0 12px}
.atask h3{display:flex;justify-content:space-between;gap:12px;font-size:1rem;margin:0}
.atask > p{margin:6px 0 10px;overflow-wrap:anywhere}
.atask .muted.small{margin:0}
.ans{display:block;width:100%;font:inherit;font-size:16px;color:var(--text);background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:11px 14px}
textarea.ans{resize:vertical}
.gaps{line-height:2.4;margin:8px 0 0;overflow-wrap:anywhere}
.gap{font:inherit;font-size:16px;width:4.5em;max-width:60%;color:var(--text);background:var(--card2);border:0;border-bottom:2px solid var(--brass);border-radius:6px 6px 0 0;padding:2px 8px;margin:0 4px}
.opts.choose{display:grid;gap:8px;margin-top:4px}
.opt{min-height:44px;text-align:left;padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:var(--card2);color:var(--soft);cursor:pointer;font-weight:500}
.opt.on{background:var(--brass);border-color:transparent;color:var(--on-brass);font-weight:600}
.atask .seg{grid-template-columns:1fr 1fr}
.text{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin:0 0 12px}
.text p{margin:0;overflow-wrap:anywhere}
.player .row{margin-top:8px}
.paper .text{background:var(--paper-hint);border:0;color:var(--paper-ink);border-radius:6px}
.paper ul.opts{list-style:none;padding:0;margin:6px 0 0} .paper p.opts{margin-top:6px}
.mtask ul.opts{list-style:none;padding:0;margin:6px 0 0}
.mtask .mine{background:var(--card2);border-radius:10px;padding:10px 12px;margin:0 0 8px;overflow-wrap:anywhere}
.mtask .fb{display:flex;gap:8px;align-items:flex-start;margin:0 0 8px;color:var(--soft)}
.mtask .fb .mea{flex:none}
@media print{.atask,.player{display:none}}
/* topic picker (as in Lernfuchs): + Thema hinzufügen, per topic "Auf Unterthemen eingrenzen" with chips */
.pick{display:block;width:100%;min-height:48px;font:inherit;font-size:16px;color:var(--text);background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin:0 0 10px;cursor:pointer}
.topic .narrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0 0;font-size:.95rem;color:var(--soft);cursor:pointer}
.topic .narrow input{width:20px;height:20px;accent-color:var(--brass);margin:0}
.topic .narrow .muted{font-size:.86rem}
.topic .subs{margin-top:8px}
.topic .subs p{display:flex;align-items:center;gap:6px;margin:6px 0}
.btn.xs{min-height:36px;padding:4px 10px}
.err.small{color:var(--amber);font-size:.86rem;margin:6px 0}
/* after a test: meA's encouragement and the tip to practise */
.coach{margin:10px auto 0;max-width:34ch}
.coach .verdict{font:500 1.15rem/1.3 var(--display);margin:0 0 4px}
.coach p{margin:4px 0;color:var(--soft)}
.coach .goal{color:var(--brass);font-weight:600}
.say.tip{margin:14px 0}
.say.tip .bubble p{margin:0 0 10px}