
/* Layout: one column "school day" — a home picker, a student's week board of subject rows, and a focused lesson reader. */
:root{
  --bg:#F3F6F8; --surface:#FFFFFF; --sunk:#E8EDF1; --ink:#17212B; --muted:#5A6878; --line:#D3DBE2;
  --accent:#2C55C9; --accent-ink:#FFFFFF;
  --eng:#0F7A63; --eng-soft:#DDF1EB;
  --ss:#8A3D88; --ss-soft:#F1E2F0;
  --math:#A86700; --math-soft:#F7EAD2;
  --sci:#1F6FB2; --sci-soft:#DDEBF7;
  --bible:#5B4636; --bible-soft:#EFE6DC;
  --pe:#C2410C; --pe-soft:#FBE4D8;
  --extra:#B4236B; --extra-soft:#F8DDEA;
  --spell:#4A5BB0; --spell-soft:#E2E6F7;
  --good:#1E7D3A; --good-soft:#DCF0E1; --bad:#B3261E; --bad-soft:#F8DEDC; --warn:#8A5A00;
  --f-display:"Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --f-body:"Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --f-read:"Literata", Georgia, "Times New Roman", serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#10161D; --surface:#18212B; --sunk:#0C1117; --ink:#E6ECF2; --muted:#9AA8B6; --line:#2B3744;
  --accent:#7FA0FF; --accent-ink:#0B1220;
  --eng:#4CCBA8; --eng-soft:#123329; --ss:#D58FD3; --ss-soft:#2E1A2E; --math:#F0B04A; --math-soft:#33260F; --sci:#7DB8F0; --sci-soft:#122536; --bible:#D9B99B; --bible-soft:#2E241C; --pe:#FF9A62; --pe-soft:#3A1E10; --extra:#F28BBF; --extra-soft:#3A1528; --spell:#A3B0F5; --spell-soft:#1C2140;
  --good:#6FD38A; --good-soft:#15301D; --bad:#FF8A80; --bad-soft:#3A1715; --warn:#F0B04A; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#10161D; --surface:#18212B; --sunk:#0C1117; --ink:#E6ECF2; --muted:#9AA8B6; --line:#2B3744;
  --accent:#7FA0FF; --accent-ink:#0B1220;
  --eng:#4CCBA8; --eng-soft:#123329; --ss:#D58FD3; --ss-soft:#2E1A2E; --math:#F0B04A; --math-soft:#33260F; --sci:#7DB8F0; --sci-soft:#122536; --bible:#D9B99B; --bible-soft:#2E241C; --pe:#FF9A62; --pe-soft:#3A1E10; --extra:#F28BBF; --extra-soft:#3A1528; --spell:#A3B0F5; --spell-soft:#1C2140;
  --good:#6FD38A; --good-soft:#15301D; --bad:#FF8A80; --bad-soft:#3A1715; --warn:#F0B04A; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.55}
.wrap{max-width:880px;margin:0 auto;padding-inline:16px;padding-block:20px 64px}
h1,h2,h3{font-family:var(--f-display);line-height:1.15;text-wrap:balance;margin:0}
h1{font-size:clamp(1.8rem,5vw,2.6rem);font-weight:800;letter-spacing:-.01em}
h2{font-size:1.5rem;font-weight:800}
h3{font-size:1.15rem;font-weight:600}
p{margin:0}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.brand{font-family:var(--f-display);font-weight:800;font-size:1.05rem;display:flex;align-items:center;gap:10px}
.brand .mark{width:28px;height:28px;border-radius:8px;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-size:.95rem}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:10px 16px;font-weight:700}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted);padding-inline:8px}
.btn.small{padding:6px 12px;font-size:.9rem}
.btn:disabled{opacity:.5;cursor:default}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.muted{color:var(--muted)}
.note{background:var(--sunk);border-radius:10px;padding:12px 14px;font-size:.95rem;color:var(--muted)}
.input{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:10px 12px}
textarea.input{min-height:120px;resize:vertical;line-height:1.5}
textarea.input.long{min-height:220px}

/* Home */
.kids{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.kid{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:20px;border-radius:14px;border:1px solid var(--line);background:var(--surface);text-align:left}
.kid:hover{border-color:var(--accent)}
.kid .name{font-family:var(--f-display);font-weight:800;font-size:1.5rem}
.meter{height:8px;width:100%;background:var(--sunk);border-radius:99px;overflow:hidden}
.meter>i{display:block;height:100%;background:var(--accent);border-radius:99px}
.addkid{border-style:dashed;justify-content:center}
.addform{display:grid;grid-template-columns:1fr 110px auto;gap:10px;align-items:end}
@media (max-width:520px){.addform{grid-template-columns:1fr 1fr}.addform .btn{grid-column:1/-1}}
label.f{display:flex;flex-direction:column;gap:4px;font-size:.88rem;font-weight:700;color:var(--muted)}

/* Week board */
.subject{display:grid;grid-template-columns:150px 1fr;gap:14px;padding-block:16px;border-top:1px solid var(--line)}
.subject:first-of-type{border-top:0}
@media (max-width:620px){.subject{grid-template-columns:1fr}}
.subj-name{display:flex;flex-direction:column;gap:4px}
.subj-name b{font-family:var(--f-display);font-size:1.15rem}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}
.days{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;min-width:0}
.day{display:flex;flex-direction:column;gap:8px;text-align:left;padding:14px 16px;border-radius:12px;background:var(--surface);border:1px solid var(--line);min-width:0}
.day:hover{border-color:var(--c)}
.day .t{font-weight:700;line-height:1.3}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;padding:3px 10px;border-radius:99px;background:var(--sunk);color:var(--muted);width:fit-content}
.pill.done{background:var(--good-soft);color:var(--good)}
.pill.draft{background:var(--math-soft);color:var(--warn)}
.pill.fb{background:var(--sunk);color:var(--accent)}
.feedback{border-left:3px solid var(--accent);padding:4px 0 4px 12px;font-size:.95rem}

/* Lesson */
.lesson-head{padding:22px;border-radius:16px;background:var(--soft);display:flex;flex-direction:column;gap:8px}
.lesson-head .eyebrow{color:var(--c)}
.goal{font-size:1.02rem}
.steps{display:flex;gap:8px;flex-wrap:wrap;font-size:.85rem}
.steps span{background:var(--surface);border-radius:99px;padding:3px 10px;color:var(--muted)}
.block{display:flex;flex-direction:column;gap:12px}
.block h3{color:var(--c)}
.learn p+p{margin-top:10px}
.learn ul,.learn ol{margin:6px 0 0;padding-left:22px}
.learn li{margin:4px 0}
.vocab{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.vocab div{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:.95rem}
.vocab b{display:block}
.example{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:.98rem}
.example b{color:var(--c)}
.passage{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px clamp(16px,4vw,32px);font-family:var(--f-read);font-size:1.08rem;line-height:1.75;max-width:68ch}
.passage p+p{margin-top:12px}
.passage .src{font-family:var(--f-body);font-size:.85rem;color:var(--muted);margin-top:14px}
.poem p{margin:0}
.poem p+p{margin-top:16px}
.poem .ln{display:block}
table.data{border-collapse:collapse;font-variant-numeric:tabular-nums;background:var(--surface)}
table.data td,table.data th{border:1px solid var(--line);padding:6px 14px;text-align:center}
table.data th{background:var(--sunk)}
.tablewrap{overflow-x:auto}
.q{display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.q .qn{font-size:.8rem;font-weight:700;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.q .prompt{font-weight:700}
.q .prompt .sub{font-weight:400;display:block;margin-top:4px}
.opts{display:flex;flex-direction:column;gap:8px}
.opt{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.opt input{margin-top:5px;accent-color:var(--accent)}
.opt.right{border-color:var(--good);background:var(--good-soft)}
.opt.wrong{border-color:var(--bad);background:var(--bad-soft)}
.numrow{display:flex;gap:8px;align-items:center}
.numrow .input{max-width:180px;font-variant-numeric:tabular-nums}
.verdict{font-weight:700;font-size:.95rem}
.verdict.ok{color:var(--good)} .verdict.no{color:var(--bad)}
.explain{font-size:.95rem;color:var(--muted)}
.wc{font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}
.bar{position:sticky;bottom:0;padding-block:12px calc(12px + env(safe-area-inset-bottom,0px));background:linear-gradient(transparent,var(--bg) 30%);display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.score{display:flex;align-items:baseline;gap:10px;padding:18px 20px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.score .big{font-family:var(--f-display);font-size:2.4rem;font-weight:800;font-variant-numeric:tabular-nums}

/* Parent */
.ptable{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:.95rem}
.ptable th,.ptable td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.ptable th{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.resp{background:var(--sunk);border-radius:10px;padding:12px 14px;white-space:pre-wrap;font-size:.95rem}
.look{font-size:.9rem;color:var(--muted);border-left:3px solid var(--line);padding-left:10px}
.pinbox{max-width:320px}
.banner{background:var(--math-soft);color:var(--warn);border-radius:10px;padding:10px 14px;font-size:.92rem;margin-bottom:18px}
@media (prefers-reduced-motion:no-preference){.fade{animation:fade .25s ease-out}@keyframes fade{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:none}}}

html,body{margin:0}
button.linkish{background:none;border:0;padding:0;color:var(--accent);font-weight:700;text-decoration:underline}
.err{color:var(--bad);font-weight:700;font-size:.95rem}
.ok{color:var(--good);font-weight:700;font-size:.95rem}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px}
.authbox{max-width:420px;margin-inline:auto}
select.input{appearance:auto}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:520px){.grid2{grid-template-columns:1fr}}
/* Day tabs */
.daytabs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.daytab{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);text-align:left;min-width:0}
.daytab b{font-family:var(--f-display);font-size:1.05rem}
.daytab span{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.daytab[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.daytab.complete span{color:var(--good)}
@media (max-width:520px){.daytabs{gap:5px}.daytab{padding:8px}.daytab b{font-size:.92rem}}
.subjects{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.scard{display:flex;flex-direction:column;gap:8px;text-align:left;padding:16px;border-radius:14px;background:var(--surface);border:1px solid var(--line);border-top:5px solid var(--c);min-width:0}
.scard:hover{box-shadow:0 0 0 1px var(--c)}
.scard .t{font-weight:700;line-height:1.3}
.weeksel{display:flex;gap:8px;flex-wrap:wrap}
/* Tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto}
.tab{background:none;border:0;border-bottom:3px solid transparent;padding:10px 14px;font-weight:700;color:var(--muted);white-space:nowrap}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.grid-week{border-collapse:collapse;width:100%;font-size:.9rem;font-variant-numeric:tabular-nums}
.grid-week th,.grid-week td{border:1px solid var(--line);padding:8px;text-align:center}
.grid-week th{background:var(--sunk);font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.grid-week td.s{text-align:left;font-weight:700;white-space:nowrap}
.cell-done{background:var(--good-soft);color:var(--good);font-weight:700}
.cell-draft{background:var(--math-soft);color:var(--warn);font-weight:700}
.cell-none{color:var(--muted)}
.cell-review{box-shadow:inset 0 0 0 2px var(--accent)}
/* Workout & recipe */
.wlist{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.wlist li{display:grid;grid-template-columns:1fr auto;gap:4px 12px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 14px}
.wlist li b{font-weight:700}
.wlist li .amt{font-weight:700;color:var(--c);text-align:right;font-variant-numeric:tabular-nums}
.wlist li .how{grid-column:1/-1;font-size:.92rem;color:var(--muted)}
.recipe{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:18px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px}
@media (max-width:640px){.recipe{grid-template-columns:1fr}}
.recipe ul,.recipe ol{margin:6px 0 0;padding-left:20px}
.recipe li{margin:5px 0}
.checkline{display:flex;gap:10px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);font-weight:700}
.checkline input{width:22px;height:22px;accent-color:var(--good)}
/* Portfolio (print) */
.portfolio{background:#fff;color:#111;border-radius:12px;padding:28px;border:1px solid var(--line)}
.portfolio h1,.portfolio h2,.portfolio h3{color:#111}
.portfolio table{width:100%;border-collapse:collapse;font-size:.88rem}
.portfolio th,.portfolio td{border:1px solid #bbb;padding:6px 8px;text-align:left;vertical-align:top}
.portfolio th{background:#eee}
.portfolio .sample{border:1px solid #ccc;border-radius:8px;padding:12px;margin-top:10px;break-inside:avoid}
.portfolio .sample pre{white-space:pre-wrap;font-family:inherit;margin:6px 0 0}
.portfolio .meta{color:#444;font-size:.9rem}
@media print{
  body{background:#fff}
  .noprint,.topbar,.tabs{display:none!important}
  .wrap{max-width:none;padding:0}
  .portfolio{border:0;padding:0}
}
/* Week 2+: quizzes, drills, spelling, lesson plans */
.pill.quiz{background:var(--ink);color:var(--bg)}
.q.drill{border-color:var(--c);border-width:2px}
.drill-live{display:flex;flex-direction:column;gap:10px;max-width:420px}
.drill-time{font-family:var(--f-display);font-weight:800;font-size:1.3rem;font-variant-numeric:tabular-nums}
.drill-prob{font-family:var(--f-display);font-weight:800;font-size:clamp(1.8rem,7vw,2.6rem);font-variant-numeric:tabular-nums;text-align:center;padding:10px 0}
.drill-ans{display:inline-block;min-width:3ch;border-bottom:3px solid var(--c);text-align:center}
.drill-flash{text-align:center;font-weight:700;min-height:1.4em;margin:0}
.drill-flash.ok{color:var(--good)} .drill-flash.no{color:var(--bad)}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.key{font-family:var(--f-display);font-weight:800;font-size:1.4rem;padding:14px 0;border-radius:12px;border:1px solid var(--line);background:var(--bg);touch-action:manipulation}
.key:active{background:var(--sunk)}
.key.enter{grid-column:1/-1;background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-size:1.1rem}
.spellin{max-width:260px!important;font-size:1.1rem}
.spellin.right{border-color:var(--good);background:var(--good-soft)}
.spellin.wrong{border-color:var(--bad);background:var(--bad-soft)}
.speak{white-space:nowrap}
.plan{display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:14px;background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--c);break-inside:avoid}
.plan h3{font-size:1.1rem}
.plan ul,.plan ol{margin:0;padding-left:22px}
.plan li{margin:3px 0}
.akey{columns:2 220px;column-gap:24px;font-size:.92rem;margin:0;padding-left:22px}
.akey li{break-inside:avoid;margin:2px 0}
.wordlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:6px 18px;font-size:.95rem;margin:0;padding-left:0;list-style-position:inside}
@media print{.plan{border:1px solid #bbb;border-left:5px solid #888;background:#fff;color:#111}}

/* Subject on/off switches in parent Settings */
.subjtoggles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; max-width: 680px; }
.subjtoggles .checkline .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }

/* Week 3+: fraction-bar pictures and step-by-step worked examples */
.fbars{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}
.fbar{display:inline-flex;border:2px solid var(--ink);border-radius:4px;overflow:hidden;height:26px}
.fbar i{display:block;width:22px;border-right:1px solid var(--ink)}
.fbar i:last-child{border-right:0}
.fbar i.on{background:var(--math)}
.fbar i.x{background:repeating-linear-gradient(45deg,var(--math-soft),var(--math-soft) 4px,var(--bad) 4px,var(--bad) 6px)}
.grid100{display:inline-grid;grid-template-columns:repeat(10,12px);gap:1px;background:var(--ink);border:2px solid var(--ink);margin:6px 0}
.grid100 i{width:12px;height:12px;background:var(--surface)}
.grid100 i.on{background:var(--math)}
.steps3{display:grid;gap:10px}
.steps3 .st{border-left:4px solid var(--c, var(--accent));background:var(--surface);border-radius:0 10px 10px 0;padding:10px 14px}
.steps3 .st b.tag{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.solve{font-family:ui-monospace,Consolas,monospace;font-size:1rem;line-height:1.8;background:var(--sunk);border-radius:8px;padding:8px 12px;margin:6px 0;white-space:pre-wrap}

/* ================= FAMILY WORKOUT ================= */
.fitentry{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;padding:18px 20px;border-radius:14px;border:1px solid var(--line);border-left:6px solid var(--pe);background:var(--pe-soft);text-align:left;margin-top:6px}
.fitentry .t{font-family:var(--f-display);font-weight:800;font-size:1.3rem}
.fitentry:hover{border-color:var(--pe)}
.fitkid.won{border-color:var(--good);box-shadow:0 0 0 2px var(--good-soft)}
.fitdots{display:inline-flex;gap:4px}
.fitdots i{font-style:normal;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:.72rem;font-weight:700;background:var(--sunk);color:var(--muted)}
.fitdots i.on{background:var(--good);color:var(--surface)}
.fitdots i.part{background:var(--math-soft);color:var(--warn)}
.fitbanner{background:var(--good-soft);color:var(--good);border-radius:12px;padding:14px 16px;font-weight:700}
.fitboard td:not(:first-child),.fitboard th:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:520px){.grid3{grid-template-columns:1fr 1fr}.grid3 label:first-child{grid-column:1/-1}}
.fitboard{width:100%}
table.data.fitboard td,table.data.fitboard th{padding:6px 8px;font-size:.95rem}
