/* Inburgering Mate practice app — taste-skill app sheet "editorial-greeting", brand palette/type kept.
   Grid: 12 cols in a 1100px column, 16px gutters → (1100 - 11*16)/12 = 77px per column. */
:root{
  --chrome:#F6F5F3; --sheet:#fff; --panel:#F6F5F3; --raised:#fff; --border:#DCD8CE; --control:#C9C2B2;
  --ink:#1B2430; --muted:#4F5B6B; --accent:#24459A; --accent-hover:#1B3577; --tint:#E6ECF8;
  --fail:#B4442F; --fail-tint:#F8E7E2; --ok:#2F6F62; --ok-tint:#E4EFEB; --night:#142030;
  --display:'Imbue',Georgia,serif; --text:'Albert Sans',system-ui,sans-serif;
  --r:10px; --gap:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font:400 16px/1.55 var(--text);color:var(--ink);background:var(--chrome);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
a{color:inherit}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* shell: tinted L-frame + white sheet inset 8px */
.app{display:grid;grid-template-columns:228px 1fr;min-height:100svh}
.side{padding:20px 14px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100svh}
.brand{display:flex;align-items:center;gap:10px;font-weight:500;text-decoration:none;padding:6px 10px 18px}
.side nav{display:flex;flex-direction:column;gap:2px}
.side nav a{display:block;padding:7px 10px;border-radius:8px;text-decoration:none;color:var(--muted);font-size:15px}
.side nav a:hover{color:var(--ink);background:#EAE6DC}
.side nav a.on{color:var(--accent);background:var(--tint);font-weight:500}
.side .group{font-size:13px;color:var(--muted);padding:14px 10px 4px}
.side .acct{margin-top:auto;padding:10px;font-size:14px;color:var(--muted)}
.side .acct a{color:var(--ink)}
.side .acct a.btn{color:#fff}
.sheet{background:var(--sheet);margin:8px 8px 8px 0;border-radius:16px;min-height:calc(100svh - 16px)}
.topbar{display:none}
main#view{max-width:1100px;margin:0 auto;padding:56px 24px 80px}
.foot{max-width:1100px;margin:0 auto;padding:0 24px 32px;color:var(--muted);font-size:13px}
.foot a{color:var(--muted)}

/* titles */
.greet{font:400 32px/1.1 var(--display);letter-spacing:-.01em;text-transform:uppercase}
.greet-sub{color:var(--muted);margin-top:10px}
h1{font-size:24px;font-weight:500;line-height:1.25;letter-spacing:-.01em}
h2{font-size:15px;font-weight:600;margin:32px 0 10px}
h3{font-size:16px;font-weight:600}
.lead{color:var(--muted);margin-top:4px}
.muted{color:var(--muted)}
.crumbs{font-size:13px;color:var(--muted);margin-bottom:8px}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--ink)}

/* 12-col grid, spans share column lines */
.g{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);margin-top:var(--gap)}
.g.first{margin-top:48px}
.s3{grid-column:span 3}.s6{grid-column:span 6}.s9{grid-column:span 9}.s12{grid-column:span 12}
.tile{background:var(--panel);border-radius:var(--r);padding:16px;min-height:128px;display:flex;flex-direction:column}
.tile .l{font-size:13px;color:var(--muted)}
.tile .v{font-size:30px;line-height:1.1;margin-top:6px}
.tile .c{font-size:13px;color:var(--muted);margin-top:auto}
.panel{background:var(--panel);border-radius:var(--r);padding:20px}
.ph{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.ph h3{font-size:14px;font-weight:600}
.ph .n{font-size:12px;color:var(--muted);background:var(--sheet);border:1px solid var(--border);border-radius:999px;padding:0 8px} /* taste-skill-ignore: app screen, quiet control borders per app-screens rules */
.ph a{margin-left:auto;font-size:13px;color:var(--muted)}
.rows{display:grid;gap:8px}
.rc{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:63px;padding:10px 14px;background:var(--raised);border:1px solid var(--border);border-radius:8px;text-decoration:none;transition:border-color .15s} /* taste-skill-ignore: app screen, quiet control borders per app-screens rules */
a.rc:hover{border-color:var(--control)}
.rc .t b{display:block;font-weight:500}
.rc .t span{display:block;font-size:13px;color:var(--muted)}
.rc .r{display:flex;align-items:center;gap:10px;flex:none;font-size:13px;color:var(--muted);text-align:right}

/* pills, buttons */
.pill{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;font-size:12px;background:#EAE6DC;color:var(--muted)}
.pill.free{background:var(--ok-tint);color:var(--ok)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border-radius:8px;border:1px solid transparent;background:var(--accent);color:#fff;font-weight:500;text-decoration:none;cursor:pointer;transition:background .15s,transform .1s} /* taste-skill-ignore: app screen, quiet control borders per app-screens rules */
.btn:hover{background:var(--accent-hover)}.btn:active{transform:translateY(1px)}
.btn.o{background:var(--accent)}.btn.o:hover{background:var(--accent-hover)}
.btn.l{background:var(--sheet);color:var(--ink);border-color:var(--control)} /* taste-skill-ignore: app screen, quiet control borders per app-screens rules */
.btn.l:hover{background:var(--panel)}
.btn.l.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.sm{min-height:32px;padding:0 12px;font-size:14px}
.btn:disabled{opacity:.45;cursor:default}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 6px}
.done-dot{color:var(--ok);font-size:13px}

/* course lesson list */
.list{display:grid;gap:8px;margin-top:20px}
.row{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:56px;padding:10px 14px;background:var(--raised);border:1px solid var(--border);border-radius:8px;text-decoration:none} /* taste-skill-ignore: app screen, quiet control borders per app-screens rules */
a.row:hover{border-color:var(--control)}
.row .t b{display:block;font-weight:500}
.row .t span{color:var(--muted);font-size:13px}
.row .r{display:flex;align-items:center;gap:10px;flex:none}

/* lesson players */
.panel.lesson{background:var(--sheet);border:1px solid var(--border);margin-top:20px;padding:28px} /* taste-skill-ignore: app screen, quiet control borders per app-screens rules */
.passage{white-space:pre-wrap;background:var(--panel);border-radius:8px;padding:22px;font-size:17px;line-height:1.7}
.q{margin-top:26px}
.q h4{font-size:17px;font-weight:500;margin-bottom:10px}
.q .en{color:var(--muted);font-size:14px;margin:-6px 0 10px}
.opts{display:grid;gap:8px}
.opt{text-align:left;background:var(--sheet);border:1px solid var(--control);border-radius:8px;padding:11px 14px;font-size:16px;cursor:pointer;transition:border-color .15s,background .15s} /* taste-skill-ignore: app screen, quiet control borders per app-screens rules */
.opt:hover:not(:disabled){border-color:var(--ink)}
.opt.sel{border-color:var(--accent);background:var(--tint)}
.opt.right{border-color:var(--ok);background:var(--ok-tint)}
.opt.wrong{border-color:var(--fail);background:var(--fail-tint)}
.opt:disabled{cursor:default}
.exp{margin-top:10px;background:var(--panel);border-radius:8px;padding:12px 14px;font-size:15px}

/* tap-a-word inside passages + its popover + translation toggle */
.gw{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;border-radius:2px;text-align:left} /* taste-skill-ignore: inline word button inside running text */
.gw:hover{color:var(--accent)}
.tgl{margin-top:12px}
.wordpop{position:absolute;z-index:60;background:var(--sheet);border:1px solid var(--control);border-radius:8px;padding:10px 14px} /* taste-skill-ignore: floating dialog panel */
.wordpop b{display:block;font-weight:600;margin-bottom:2px}
.wordpop span{font-size:15px}
.result{padding:22px;border-radius:var(--r);background:var(--panel);margin-top:24px}
.result .big{font-size:30px}
textarea,input[type=text],input[type=email],input[type=password]{width:100%;font-size:16px;border:1px solid var(--control);border-radius:8px;padding:11px 13px;background:var(--sheet)} /* taste-skill-ignore: app screen, quiet control borders per app-screens rules */
textarea:focus,input:focus{outline:none;border-color:var(--accent)}
textarea{min-height:220px;resize:vertical;line-height:1.6}
label{font-weight:500;display:block;margin:14px 0 6px;font-size:14px}
.issues{display:grid;gap:8px;margin-top:12px}
.issue{background:var(--panel);border-radius:8px;padding:10px 12px;font-size:15px}
.timer{position:sticky;top:12px;z-index:5;display:inline-flex;gap:8px;align-items:center;background:var(--night);color:#fff;border-radius:8px;padding:6px 12px;font-size:15px}
.timer.low{background:var(--fail)}
.flash{background:var(--raised);border:1px solid var(--border);border-radius:var(--r);min-height:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px;cursor:pointer;user-select:none} /* taste-skill-ignore: app screen, quiet control borders per app-screens rules */
.flash .w{font:400 clamp(36px,5vw,56px)/1 var(--display)}
.flash .m{font-size:22px;margin-top:10px}
.flash .x{margin-top:14px;color:var(--muted);font-style:italic}
.ctrl{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.rec{width:72px;height:72px;border-radius:50%;border:0;background:var(--fail);color:#fff;font-size:15px;cursor:pointer}
.rec.on{outline:4px solid var(--fail-tint)}
.kw{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.kw span{background:var(--panel);border-radius:999px;padding:3px 10px;font-size:14px}

/* paywall, plans, notices */
.paywall{background:var(--panel);border-radius:var(--r);padding:28px;margin-top:20px}
.paywall h2{margin:0 0 6px;font-size:18px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:20px}
.plan{background:var(--panel);border-radius:var(--r);padding:20px;display:flex;flex-direction:column}
.plan.best{background:var(--tint)}
.plan .price{font-size:30px;margin:8px 0 2px}
.plan .price small{font-size:14px;color:var(--muted)}
.plan ul{list-style:none;margin:12px 0 18px;flex:1}
.plan li{padding:4px 0;font-size:15px}
.notice{background:var(--panel);border-radius:8px;padding:12px 14px;margin-top:16px;font-size:15px}
.notice.ok{background:var(--ok-tint);color:var(--ok)}
.notice.bad{background:var(--fail-tint);color:var(--fail)}
.err{color:var(--fail);margin-top:10px;font-size:15px}
.ok{color:var(--ok);margin-top:10px;font-size:15px}
.authform{max-width:400px}

/* standalone document pages (terms): sheet ground, quiet bar */
.doc{background:var(--sheet)}
.doc .top{background:var(--sheet);border-bottom:1px solid var(--border)} /* taste-skill-ignore: document page chrome, quiet rule */
.doc .wrap{max-width:1100px;margin:0 auto;padding:0 24px}
.doc .bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0}
.doc .links{display:flex;gap:20px}
.doc main h1{margin-top:40px}
.doc .panel{margin-top:24px}
.doc .foot{margin-top:48px;border-top:1px solid var(--border);padding:20px 24px 40px;font-size:14px} /* taste-skill-ignore: document page chrome, quiet rule */

@media (max-width:860px){
  .app{display:block}
  .side{position:fixed;inset:0 30% 0 0;z-index:20;background:var(--chrome);transform:translateX(-102%);transition:transform .2s;height:auto}
  .app.menu .side{transform:none}
  .sheet{margin:0;border:0;border-radius:0;min-height:100svh}
  .topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;height:48px;padding:0 16px;background:var(--chrome);position:sticky;top:0;z-index:10;font-size:15px}
  .topbar button{background:none;border:0;min-height:44px;padding:0 6px;cursor:pointer}
  main#view{padding:24px 16px 64px}
  .greet{font-size:26px}
  .g.first{margin-top:28px}
  .s3{grid-column:span 6}.s6,.s9{grid-column:span 12}
  .plans{grid-template-columns:1fr}
  .panel.lesson{padding:18px}
}