/* ==========================================================================
   Fledge — early literacy platform
   Calm, tablet-first, accessible. No framework, no build.
   ========================================================================== */

:root{
  --bg: #f1f5f9;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --text: #0f172a;
  --muted: #64748b;
  --brand: #0f766e;
  --brand-ink: #0b5850;
  --brand-tint: #ccfbf1;
  --accent: #f97316;
  --accent-tint: #ffedd5;

  --secure: #16a34a;   --secure-tint:#dcfce7;
  --emerging: #d97706; --emerging-tint:#fef3c7;
  --notyet: #dc2626;   --notyet-tint:#fee2e2;
  --untested:#94a3b8;  --untested-tint:#f1f5f9;

  --shadow: 0 1px 2px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.06);
  --radius: 16px;
  --radius-sm: 10px;
  --tap: 56px;             /* minimum touch target */
  --maxw: 1080px;
  font-synthesis-weight: none;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0b1220; --surface:#111a2e; --surface-2:#0f1728; --border:#24324c;
    --border-strong:#33415c; --text:#e8eefb; --muted:#93a4c3;
    --brand:#2dd4bf; --brand-ink:#5eead4; --brand-tint:#0e3b38; --accent:#fb923c;
    --accent-tint:#3a2410;
    --secure:#4ade80; --secure-tint:#0f3222; --emerging:#fbbf24; --emerging-tint:#3a2c0a;
    --notyet:#f87171; --notyet-tint:#3a1414; --untested:#64748b; --untested-tint:#1a2438;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --bg:#0b1220; --surface:#111a2e; --surface-2:#0f1728; --border:#24324c;
  --border-strong:#33415c; --text:#e8eefb; --muted:#93a4c3;
  --brand:#2dd4bf; --brand-ink:#5eead4; --brand-tint:#0e3b38; --accent:#fb923c;
  --accent-tint:#3a2410;
  --secure:#4ade80; --secure-tint:#0f3222; --emerging:#fbbf24; --emerging-tint:#3a2c0a;
  --notyet:#f87171; --notyet-tint:#3a1414; --untested:#64748b; --untested-tint:#1a2438;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5; -webkit-text-size-adjust:100%;
  overscroll-behavior-y:none;
}
h1,h2,h3{line-height:1.2;margin:0}
a{color:var(--brand-ink)}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:8px}

/* -------- Layout shell -------- */
.app-shell{min-height:100vh;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:20;background:var(--brand);color:#fff;
  display:flex;align-items:center;gap:14px;padding:10px 16px;
  padding-top:calc(10px + env(safe-area-inset-top));
  box-shadow:0 2px 10px rgba(15,23,42,.12)
}
.topbar .brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px;font-size:19px}
.topbar .brand img{width:30px;height:30px;border-radius:8px;display:block}
.topbar .brand small{font-weight:600;opacity:.85;font-size:12px;display:block;margin-top:-3px}
.topbar .spacer{flex:1}
.topbar .org{font-size:13px;opacity:.9;max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iconbtn{
  min-width:44px;height:44px;border:0;border-radius:12px;background:rgba(255,255,255,.14);
  color:#fff;font-size:18px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center
}
.iconbtn:hover{background:rgba(255,255,255,.24)}

.main{flex:1;width:100%;max-width:var(--maxw);margin:0 auto;padding:18px 16px 120px}

/* bottom tab nav (tablet/phone friendly) */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--surface);
  border-top:1px solid var(--border);display:flex;justify-content:space-around;
  padding:6px 6px calc(6px + env(safe-area-inset-bottom))
}
.tabbar a{
  flex:1;max-width:160px;text-decoration:none;color:var(--muted);
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 4px;border-radius:12px;font-size:12px;font-weight:600
}
.tabbar a .ic{font-size:22px;line-height:1}
.tabbar a.active{color:var(--brand-ink);background:var(--brand-tint)}

/* -------- Cards & sections -------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.card.pad{padding:18px}
.section-title{display:flex;align-items:center;gap:10px;margin:26px 2px 12px}
.section-title h2{font-size:20px}
.section-title .hint{color:var(--muted);font-size:13px;font-weight:500}
.grid{display:grid;gap:14px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-auto{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
@media (max-width:720px){ .grid.cols-2,.grid.cols-3{grid-template-columns:1fr} }

.muted{color:var(--muted)}
.small{font-size:13px}
.tiny{font-size:12px}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.between{display:flex;align-items:center;justify-content:space-between;gap:12px}
.spread{justify-content:space-between}

/* -------- Buttons -------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--tap);padding:0 20px;border-radius:14px;border:1px solid var(--border-strong);
  background:var(--surface);color:var(--text);font-size:16px;font-weight:700;cursor:pointer;
  transition:transform .04s ease, background .15s ease
}
.btn:active{transform:translateY(1px)}
.btn.block{width:100%}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-ink)}
.btn.accent{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.ghost{background:transparent;border-color:transparent;color:var(--brand-ink)}
.btn.subtle{background:var(--surface-2)}
.btn.sm{min-height:42px;padding:0 14px;font-size:14px;border-radius:11px}
.btn.danger{color:var(--notyet);border-color:var(--notyet)}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* -------- Forms -------- */
label.field{display:block;font-weight:700;font-size:14px;margin-bottom:6px}
.input,select,textarea{
  width:100%;min-height:var(--tap);padding:12px 14px;border-radius:12px;
  border:1px solid var(--border-strong);background:var(--surface);color:var(--text);font-size:16px
}
textarea{min-height:88px;resize:vertical}
.help{color:var(--muted);font-size:13px;margin-top:6px}

/* -------- Pills / badges -------- */
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:12px;font-weight:700;border:1px solid var(--border)}
.pill.secure{background:var(--secure-tint);color:var(--secure);border-color:transparent}
.pill.emerging{background:var(--emerging-tint);color:var(--emerging);border-color:transparent}
.pill.notyet{background:var(--notyet-tint);color:var(--notyet);border-color:transparent}
.pill.untested{background:var(--untested-tint);color:var(--muted);border-color:transparent}
.pill.brand{background:var(--brand-tint);color:var(--brand-ink);border-color:transparent}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.dot.secure{background:var(--secure)} .dot.emerging{background:var(--emerging)}
.dot.notyet{background:var(--notyet)} .dot.untested{background:var(--untested)}

/* -------- Home tiles -------- */
.hero{
  background:linear-gradient(135deg,var(--brand),#0891b2);color:#fff;border-radius:22px;
  padding:22px;box-shadow:var(--shadow);position:relative;overflow:hidden
}
.hero h1{font-size:24px;margin-bottom:6px}
.hero p{opacity:.92;max-width:52ch}
.hero .owl{position:absolute;right:-10px;bottom:-18px;width:130px;opacity:.9}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:720px){.stat-row{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:14px}
.stat .n{font-size:26px;font-weight:800;line-height:1}
.stat .l{color:var(--muted);font-size:13px;margin-top:4px}

.module-card{display:flex;flex-direction:column;gap:8px;padding:18px;text-decoration:none;color:inherit;position:relative}
.module-card .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:24px;background:var(--brand-tint);color:var(--brand-ink)}
.module-card h3{font-size:17px}
.module-card.locked{opacity:.72}
.module-card .flag{position:absolute;top:14px;right:14px}

/* list rows */
.list{display:flex;flex-direction:column}
.list .item{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);text-decoration:none;color:inherit}
.list .item:last-child{border-bottom:0}
.list .item:hover{background:var(--surface-2)}
.list .item .avatar{width:40px;height:40px;border-radius:12px;background:var(--brand-tint);color:var(--brand-ink);display:grid;place-items:center;font-weight:800}
.list .item .grow{flex:1;min-width:0}
.list .item .grow .t{font-weight:700}
.list .item .grow .s{color:var(--muted);font-size:13px}
.chev{color:var(--muted);font-size:20px}

/* -------- Assessment runner -------- */
.assess-wrap{max-width:640px;margin:0 auto}
.progressbar{height:10px;border-radius:999px;background:var(--border);overflow:hidden}
.progressbar > i{display:block;height:100%;background:var(--brand);width:0;transition:width .25s ease}
.assess-card{text-align:center;padding:30px 20px}
.assess-card .kicker{color:var(--muted);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:12px}
.assess-card .glyph{font-size:96px;font-weight:800;letter-spacing:.06em;margin:12px 0 4px;color:var(--brand-ink)}
.assess-card .say{font-size:15px;color:var(--muted)}
.answer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:22px}
@media(max-width:520px){.answer-grid{grid-template-columns:1fr}}
.answer{min-height:84px;border-radius:16px;border:2px solid var(--border-strong);background:var(--surface);
  font-size:17px;font-weight:800;cursor:pointer;display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center}
.answer .em{font-size:26px}
.answer.secure{border-color:var(--secure);color:var(--secure);background:var(--secure-tint)}
.answer.emerging{border-color:var(--emerging);color:var(--emerging);background:var(--emerging-tint)}
.answer.notyet{border-color:var(--notyet);color:var(--notyet);background:var(--notyet-tint)}

.rec-bar{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:16px;color:var(--muted);font-size:13px}
.rec-dot{width:12px;height:12px;border-radius:50%;background:var(--notyet)}
.rec-dot.live{animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* -------- Progress grid -------- */
.legend{display:flex;gap:14px;flex-wrap:wrap;align-items:center;color:var(--muted);font-size:13px}
.legend .k{display:inline-flex;align-items:center;gap:6px}
.matrix-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:14px}
table.matrix{border-collapse:separate;border-spacing:0;width:100%;min-width:520px;font-size:13px}
table.matrix th,table.matrix td{padding:8px;text-align:center}
table.matrix thead th{position:sticky;top:0;background:var(--surface);border-bottom:1px solid var(--border);font-size:12px;color:var(--muted)}
table.matrix th.rowhead{position:sticky;left:0;background:var(--surface);text-align:left;z-index:2;min-width:150px;font-weight:700;color:var(--text)}
table.matrix tbody td{border-bottom:1px solid var(--border)}
.cell{width:30px;height:30px;border-radius:8px;display:inline-block;background:var(--untested-tint);border:1px solid var(--border)}
.cell.secure{background:var(--secure)} .cell.emerging{background:var(--emerging)}
.cell.notyet{background:var(--notyet)} .cell.untested{background:var(--untested-tint)}

.masterbar{height:12px;border-radius:999px;background:var(--border);overflow:hidden;display:flex}
.masterbar > i{height:100%}
.masterbar > i.secure{background:var(--secure)}
.masterbar > i.emerging{background:var(--emerging)}
.masterbar > i.notyet{background:var(--notyet)}

/* skill chips (practice picker) */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--border-strong);background:var(--surface);border-radius:999px;padding:8px 14px;font-weight:700;font-size:15px;cursor:pointer;color:var(--text)}
.chip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.chip.status-notyet{border-color:var(--notyet)}
.chip.status-emerging{border-color:var(--emerging)}

/* empty state */
.empty{text-align:center;padding:40px 20px;color:var(--muted)}
.empty .big{font-size:52px;margin-bottom:6px}

/* toast */
#toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(20px);opacity:0;
  background:var(--text);color:var(--bg);padding:12px 18px;border-radius:12px;font-weight:700;font-size:14px;
  box-shadow:var(--shadow);z-index:60;transition:all .25s ease;pointer-events:none;max-width:90vw;text-align:center}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(2,6,23,.55);display:grid;place-items:center;z-index:50;padding:16px}
.modal{background:var(--surface);border-radius:20px;box-shadow:var(--shadow);width:min(520px,100%);max-height:88vh;overflow:auto;padding:20px}
.modal h3{margin-bottom:12px;font-size:19px}

.badge-soon{background:var(--accent-tint);color:var(--accent);font-weight:800;font-size:11px;padding:3px 9px;border-radius:999px}

hr.sep{border:0;border-top:1px solid var(--border);margin:16px 0}

/* ==========================================================================
   PRINT — worksheets only
   ========================================================================== */
#print-root{display:none}
@media print{
  @page{size:A4;margin:14mm}
  body{background:#fff}
  .app-shell,.tabbar,.topbar,#toast,.modal-backdrop{display:none !important}
  #print-root{display:block}
  .sheet{page-break-after:always;color:#000}
  .sheet:last-child{page-break-after:auto}
}

/* Worksheet visual styles (shared for on-screen preview + print) */
.sheet{
  background:#fff;color:#111;width:210mm;min-height:296mm;margin:0 auto 18px;padding:16mm;
  box-shadow:var(--shadow);border-radius:6px
}
@media print{ .sheet{width:auto;min-height:auto;margin:0;padding:0;box-shadow:none;border-radius:0} }
/* on-screen preview reflows to fit small screens; print still uses true A4 */
@media screen and (max-width:840px){ .sheet{width:100%;min-height:auto;padding:18px} }
.sheet .ws-head{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:3px solid #0f766e;padding-bottom:8px;margin-bottom:16px}
.sheet .ws-head .ttl{font-size:22px;font-weight:800;color:#0f766e}
.sheet .ws-head .sub{font-size:13px;color:#475569}
.sheet .ws-name{font-size:13px;color:#334155}
.sheet .ws-name b{display:inline-block;min-width:180px;border-bottom:1.5px dotted #94a3b8}
.sheet .ws-foot{margin-top:18px;border-top:1px solid #cbd5e1;padding-top:8px;display:flex;justify-content:space-between;font-size:11px;color:#64748b}
.trace-row{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 18px}
.trace-letter{font-size:74px;font-weight:800;color:#cbd5e1;-webkit-text-stroke:2px #94a3b8;line-height:1;font-family:"Comic Sans MS","Segoe Print",Georgia,serif}
.trace-guide{height:70px;flex:1;min-width:120px;border-bottom:2px solid #94a3b8;border-top:2px dashed #cbd5e1;position:relative}
.word-line{display:flex;flex-wrap:wrap;gap:18px;font-size:30px;font-weight:700;margin:8px 0 20px;font-family:"Comic Sans MS","Segoe Print",Georgia,serif}
.word-line .w{padding:6px 4px;border-bottom:2px solid #e2e8f0}
.sound-buttons .w{display:inline-flex;gap:2px}
.sound-buttons .gp{position:relative;padding-bottom:14px}
.sound-buttons .gp::after{content:"";position:absolute;left:50%;bottom:2px;width:8px;height:8px;border-radius:50%;background:#0f766e;transform:translateX(-50%)}
.write-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:10px}
.write-box{border:1.5px solid #94a3b8;border-radius:8px;height:70px;display:flex;align-items:center;padding:0 12px;font-size:20px;color:#94a3b8;font-weight:700}
.tricky-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;margin-top:8px}
.tricky-word{display:flex;align-items:center;gap:12px;font-size:22px;font-weight:800;color:#0f172a;padding:8px 0;border-bottom:1.5px dotted #cbd5e1;font-family:"Comic Sans MS","Segoe Print",Georgia,serif}
.tricky-word .blanks{flex:1;color:#cbd5e1;letter-spacing:6px}
.ws-instr{background:#f0fdfa;border:1px solid #99f6e4;border-radius:8px;padding:8px 12px;font-size:13px;color:#0b5850;margin-bottom:12px}
.brandmark{display:flex;align-items:center;gap:6px;font-weight:800;color:#0f766e}
.brandmark img{width:16px;height:16px}

/* make sheet backgrounds/fills actually print */
.sheet, .sheet *{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }

/* report sheet bits */
.rp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0}
.rp-stat{border:1px solid #cbd5e1;border-radius:8px;padding:10px 12px;text-align:center}
.rp-stat .n{font-size:24px;font-weight:800;color:#0f766e;line-height:1}
.rp-stat .l{font-size:11px;color:#475569;margin-top:4px}
.rp-cat{margin:12px 0}
.rp-cat .lab{display:flex;justify-content:space-between;font-size:14px;font-weight:700;color:#0f172a;margin-bottom:4px}
.rp-bar{height:13px;border-radius:999px;background:#e5e7eb;overflow:hidden;display:flex}
.rp-bar > i{height:100%}
.rp-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.rp-chip{border:1.5px solid #cbd5e1;border-radius:999px;padding:3px 11px;font-size:14px;font-weight:700;color:#0f172a;font-family:"Comic Sans MS","Segoe Print",Georgia,serif}
.rp-chip.gap{border-color:#f59e0b;background:#fffbeb}
.rp-h{color:#0f766e;font-size:15px;font-weight:800;margin:16px 0 6px}
.rp-tips{margin:6px 0 0 18px;padding:0}
.rp-tips li{margin:7px 0;font-size:13px;color:#1f2937}
.rp-note{border:1px dashed #94a3b8;border-radius:8px;min-height:56px;padding:8px 12px;font-size:12px;color:#94a3b8;margin-top:6px}
.rp-sign{margin-top:18px;display:flex;gap:30px}
.rp-sign .line{flex:1;border-top:1px solid #94a3b8;padding-top:4px;font-size:11px;color:#64748b}
.rp-dist{display:flex;height:22px;border-radius:6px;overflow:hidden;border:1px solid #cbd5e1;margin:6px 0}
.rp-dist > i{display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:800}
.rp-table{width:100%;border-collapse:collapse;font-size:13px;margin-top:6px}
.rp-table th,.rp-table td{border:1px solid #cbd5e1;padding:6px 8px;text-align:left}
.rp-table th{background:#f0fdfa;color:#0b5850;font-size:12px}

/* dashboard */
.dash-stat{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px}
.dash-stat .n{font-size:28px;font-weight:800;line-height:1;color:var(--brand-ink)}
.dash-stat .l{color:var(--muted);font-size:13px;margin-top:4px}
.needlist .item .pct{font-weight:800}
.weakgrid{display:flex;flex-wrap:wrap;gap:8px}
.weakchip{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:56px;border:1px solid var(--border);border-radius:10px;padding:8px 6px;background:var(--surface)}
.weakchip .g{font-size:20px;font-weight:800}
.weakchip .p{font-size:11px;font-weight:700}