/* Lesson and practice pages. Light only, same colours, font and card shape as the site's home page. */
:root { --bg:#f7f8fa; --panel:#ffffff; --ink:#1d2430; --muted:#5d6875; --line:#dfe4ea; --accent:#0f5c8c; --soft:#e8f1f7; --ok:#2e7d4f; --bad:#b3261e; --warn:#a4501f; color-scheme:light; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 Arial, "Hiragino Sans", "Yu Gothic", "PingFang SC", sans-serif; }
.page { max-width:1000px; margin:0 auto; padding-block:28px 80px; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px)); }
.page.wide { max-width:1040px; }
h1 { font-size:30px; line-height:1.2; margin:6px 0 8px; text-wrap:balance; }
h2 { font-size:20px; margin:36px 0 12px; padding-bottom:6px; border-bottom:2px solid var(--line); text-wrap:balance; }
h3 { font-size:17px; margin:0 0 .5rem; display:flex; gap:.5rem; align-items:baseline; }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
.top { font-size:14px; margin-bottom:.8rem; }
.tag { color:var(--warn); font-size:13px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; margin:0; }
.draft { display:inline-block; background:#fff7ef; color:var(--warn); border:1px solid #f0d6bd; border-radius:8px; padding:.2rem .6rem; font-size:13px; }
.how, .small, .note { color:var(--muted); font-size:14px; }
.goals ul { margin:.3rem 0; }
.cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:.6rem; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:.6rem .8rem; display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.card .it, .pat .it, .ex .it { font-weight:600; }
.card .en, .pat .en, .ex .en { color:var(--muted); font-size:.9rem; }
.play { border:1px solid var(--line); background:var(--panel); color:var(--accent); border-radius:999px; width:2rem; height:2rem; cursor:pointer; font-size:.75rem; flex:none; }
.play:hover { border-color:var(--accent); }
.play:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.pat { border-bottom:1px solid var(--line); padding:.4rem 0; }
.pat summary { cursor:pointer; display:flex; gap:.5rem; align-items:center; }
.grammar { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:.2rem 18px 1rem; margin-top:2rem; }
.grammar h2 { margin-top:1rem; }
.ex { margin:.3rem 0; display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.act { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px; margin:16px 0; }
.num { background:var(--soft); color:var(--accent); border-radius:6px; min-width:1.6rem; height:1.6rem; display:inline-grid; place-items:center; font-size:13px; font-weight:700; }
.grammar .num { display:none; }
.rows { display:grid; gap:.4rem; }
.row { display:flex; justify-content:space-between; gap:.6rem; align-items:center; flex-wrap:wrap; padding:.3rem 0; border-bottom:1px solid var(--line); }
.rows .row:last-child { border-bottom:0; }
select, input, textarea { font:inherit; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:6px; padding:.35rem .5rem; max-width:100%; }
textarea { width:100%; }
input.small { width:3.5rem; text-align:center; }
.gap input { width:9rem; margin:0 .3rem; }
fieldset.mc { border:0; border-top:1px solid var(--line); margin:0; padding:.7rem 0 .5rem .6rem; border-left:3px solid transparent; }
fieldset.mc legend { float:left; width:100%; padding:0; margin:0 0 .35rem; display:flex; gap:.5rem; align-items:center; font-weight:600; }
fieldset.mc label { display:inline-flex; align-items:center; gap:.35rem; margin:.15rem 1.2rem .15rem 0; cursor:pointer; }
fieldset.mc legend + label { clear:left; }
.btn { font:inherit; font-size:15px; background:var(--accent); color:#fff; border:1px solid var(--accent); border-radius:6px; padding:5px 14px; cursor:pointer; margin-top:.6rem; }
.score { font-size:14px; color:var(--muted); min-height:1.2rem; margin:.4rem 0 0; }
.right { border-color:var(--ok) !important; background:#f1f8f4; }
fieldset.mc.right { border-left-color:var(--ok) !important; }
.wrong { border-color:var(--bad) !important; background:#fdf2f1; }
fieldset.mc.wrong { border-left-color:var(--bad) !important; }
audio { width:100%; margin:.4rem 0; }
.q { font-weight:600; margin:.8rem 0 .3rem; }
details { margin:.4rem 0; }
details > summary { cursor:pointer; color:var(--accent); }
.tx p, .text p { margin:.3rem 0; }
.text { border-left:3px solid var(--accent); padding-left:.8rem; font-family:Georgia, "Times New Roman", serif; font-size:1.05rem; }
.formbox { border:1px solid var(--line); border-radius:6px; padding:.6rem .8rem; }
.formtitle { font-weight:600; }
.frow span { display:inline-block; min-width:12rem; }
.prompt { font-style:italic; }
.checklist { color:var(--muted); }
.ticks label { display:block; margin:.25rem 0; }
.speak li { margin:.3rem 0; }
.wrap { overflow-x:auto; }
table { border-collapse:collapse; width:100%; font-size:.93rem; }
th, td { border:1px solid var(--line); padding:.4rem .55rem; text-align:left; vertical-align:top; }
th { background:var(--soft); }
.two { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.two > div { min-width:0; }
.lesson { border-top:1px solid var(--line); margin-top:1.5rem; }
@media (max-width:720px) { .two { grid-template-columns:1fr; } .frow span { min-width:0; display:block; } }
/* slides */
.deckbody { overflow:hidden; height:100vh; }
.deckbar { position:fixed; top:0; left:0; right:0; display:flex; gap:.5rem; align-items:center; padding:.5rem max(16px, env(safe-area-inset-left, 0px)); background:var(--panel); border-bottom:1px solid var(--line); z-index:5; }
.deckbar .count { margin-left:auto; color:var(--muted); }
.slide { display:none; height:100vh; padding:4.5rem max(24px, env(safe-area-inset-left, 0px)) 2rem; overflow:auto; }
.slide.on { display:block; }
.slide h1 { font-size:2.4rem; } .slide h2 { font-size:1.6rem; }
.big { font-size:1.4rem; } .huge { font-size:2.2rem; font-weight:600; }
.cards.wide .card { font-size:1.25rem; }
.hide { visibility:hidden; } .show-en .hide { visibility:visible; }
table.big td { font-size:1.2rem; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior:auto; } }