/* Layout and learning surfaces only. Palette, typography and components come from ui/. */
body { min-width: 280px; }
button, a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.btn { min-height: 50px; padding: 12px 19px; line-height: 1.5; }
.btn:disabled { opacity: .45; cursor: default; }
.bar { display:flex; align-items:center; gap:16px; padding:12px clamp(14px,4vw,36px); background:color-mix(in srgb,var(--bg) 82%,transparent); backdrop-filter:blur(14px); }
.brand { display:flex; align-items:center; gap:8px; text-decoration:none; direction:ltr; flex:none; }
.brand .mk { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:var(--accent-fill); color:var(--accent-ink); font:var(--head-w) 17px var(--head); }
.brand .wd { font:var(--head-w) 22px var(--head); color:var(--text); }
.brand .wd b { font-weight:inherit; }
.section-nav { display:flex; gap:4px; }
.section-nav a { padding:8px 14px; min-height:48px; display:flex; align-items:center; border-radius:999px; text-decoration:none; font-weight:700; color:var(--muted); }
.section-nav a[aria-current] { background:var(--surface); color:var(--text); box-shadow:var(--shadow); }
#lookSlot { display:flex; margin-inline-start:auto; }
.looks button { width:44px; height:44px; min-height:44px; box-shadow:none; }
html[data-look="bold"] .bar { border-bottom:3px solid var(--border); background:var(--bg); }
html[data-look="bold"] .brand .mk, html[data-look="bold"] .section-nav a[aria-current] { border:3px solid var(--border); box-shadow:3px 3px 0 var(--border); }
html[data-look="night"] .bar { border-bottom:1px solid var(--border); }
.shell { max-width:1160px; margin:auto; padding:clamp(22px,4vw,44px) clamp(16px,4vw,40px) 30px; }
main:focus { outline:none; }
h1 { font-size:clamp(32px,5vw,54px); margin:8px 0 12px; }
h2 { font-size:clamp(22px,2.8vw,30px); margin:8px 0; }
h3 { margin:8px 0; }
p { line-height:1.8; margin:10px 0; }
small { color:var(--muted); }
.eyebrow { color:var(--accent-text); font-weight:800; font-size:14px; }
.hero { display:grid; grid-template-columns:1.6fr 1fr; align-items:center; gap:24px; padding:30px; margin-bottom:28px; }
.hero .eyebrow { color:inherit; }
.hero-art { display:flex; align-items:end; justify-content:center; gap:12px; height:155px; direction:ltr; }
.step { width:66px; background:var(--surface); color:var(--text); border:var(--bw) solid var(--border); box-shadow:var(--shadow); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font:var(--head-w) 36px var(--head); }
.step:nth-child(1) { height:62px; transform:rotate(-5deg); }
.step:nth-child(2) { height:101px; background:var(--accent-2); color:var(--accent-text); }
.step:nth-child(3) { height:143px; transform:rotate(4deg); }
.toolbar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:22px 0; }
.toolbar label { display:flex; align-items:center; gap:8px; }
select,input,textarea { border:max(1px,var(--bw)) solid var(--border-2); border-radius:var(--r-sm); background:var(--bg); color:var(--text); min-height:50px; padding:10px 12px; max-width:100%; }
select option { background:var(--bg); color:var(--text); }
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.track { padding:24px; min-height:242px; gap:8px; }
.track .icon { width:60px; height:60px; border-radius:var(--r-sm); font-size:32px; }
.track h2 { font-size:24px; }
.track p { font-size:16px; margin:0 0 14px; color:inherit; }
.track small { margin-top:auto; color:inherit; }
.icon { width:60px; height:60px; flex:none; border-radius:var(--r-sm); display:grid; place-items:center; font:var(--head-w) 32px var(--head); background:var(--c,var(--accent-fill)); color:var(--tile-ink); }
.toolbar .icon { color:var(--text); background:var(--accent-2); border:var(--bw) solid var(--border); box-shadow:var(--shadow); }
.review { display:flex; justify-content:space-between; align-items:center; gap:16px; background:var(--accent-2); color:var(--text); border:var(--bw) solid var(--border); border-radius:var(--r); box-shadow:var(--shadow); padding:20px 24px; margin:26px 0; }
.review p { margin:0; }
.stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:24px 0; }
.stat { text-align:center; padding:16px 10px; }
.stat b { display:block; font:var(--head-w) 30px var(--head); }
.stat span { font-size:14px; color:var(--muted); }
.panel { padding:28px; margin:18px 0; }
.panel p { font-size:17px; line-height:1.8; margin:10px 0; color:var(--text); }
.panel p.muted { color:var(--muted); }
.lesson { max-width:700px; margin:auto; }
.lesson-head { display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap; }
.lesson-head a,.back { display:inline-flex; align-items:center; min-height:48px; font-weight:700; }
.pips { display:flex; gap:7px; margin:20px 0; }
.pips span { height:8px; flex:1; background:var(--track); border-radius:9px; }
.pips .on { background:var(--accent-fill); }
.big-word { font-family:Tajawal,serif; font-size:clamp(44px,11vw,76px); line-height:1.8; text-align:center; margin:22px 0; overflow-wrap:anywhere; }
.hint { background:var(--accent-2); color:var(--text); border-inline-start:4px solid var(--accent); padding:14px; border-radius:var(--r-sm); font-size:18px; }
.actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }
.actions .primary { flex:1; }
.feedback { border-radius:var(--r-sm); background:var(--ok-bg); color:var(--ok-ink); padding:18px; margin:18px 0; line-height:1.8; }
.feedback.error,#storage-warning { background:var(--bad-bg); color:var(--text); border-inline-start:4px solid var(--bad); }
.answer { width:100%; font-size:32px; text-align:center; margin:14px 0; }
.groups { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin:20px 0; }
.group { display:flex; flex-wrap:wrap; justify-content:center; width:100px; padding:10px; gap:6px; border:2px solid var(--ok); background:var(--ok-bg); border-radius:var(--r-sm); }
.dot { width:13px; height:13px; background:var(--ok-ink); border-radius:50%; }
.items { display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); margin:20px 0; }
.item { display:flex; gap:12px; padding:16px; align-items:center; min-height:84px; }
.item .num { width:40px; height:40px; flex-shrink:0; border-radius:50%; background:var(--accent-2); color:var(--accent-text); display:grid; place-items:center; font-weight:800; }
.item small { display:block; margin-top:5px; }
.item b { overflow-wrap:anywhere; }
.poem { text-align:center; font-size:27px; line-height:2.1; padding:12px; }
.poem .fade { color:var(--muted); }
.tiles { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin:16px 0; }
.tiles .btn { min-width:52px; font-size:24px; background:var(--surface-2); color:var(--text); border:max(1px,var(--bw)) solid var(--border-2); box-shadow:var(--shadow); }
/* A real paper surface stays light in every look; the handwriting sample never loses contrast. */
.drawing { --pen-ink:#14161F; position:relative; height:260px; background:repeating-linear-gradient(#fff,#fff 64px,#d4d8df 65px,#fff 66px); border:2px solid var(--border-2); border-radius:var(--r-sm); overflow:hidden; margin:18px 0; }
.drawing .model { position:absolute; inset:0; text-align:center; font-size:140px; line-height:260px; color:#a3adba; font-family:'Noto Naskh Arabic',serif; pointer-events:none; }
.drawing canvas { position:absolute; inset:0; width:100%; height:100%; touch-action:none; }
.copy-model { text-align:center; font-size:64px; line-height:1.6; }
.check { display:flex; gap:12px; align-items:center; min-height:50px; line-height:1.6; }
.check input { min-height:24px; width:24px; flex-shrink:0; accent-color:var(--accent); }
.notice { font-size:15px; border-inline-start:3px solid var(--accent); padding:8px 14px; margin:20px 0; line-height:1.8; background:var(--surface-2); border-radius:var(--r-sm); }
.source { font-size:13px; color:var(--muted); margin-top:22px; }
.gate { border:max(2px,var(--bw)) solid var(--accent); }
footer { padding:28px 0; text-align:center; color:var(--muted); font-size:14px; line-height:1.9; }
#storage-warning { padding:18px; border-radius:var(--r-sm); }
audio { width:100%; max-width:100%; margin:12px 0; }
textarea { width:100%; min-height:130px; }
.field { display:block; margin:15px 0; }
.field span { display:block; margin-bottom:8px; }
.done { text-align:center; }
.done .seal { display:grid; place-items:center; margin:15px auto; width:90px; height:90px; border:3px solid var(--ok); color:var(--ok-ink); border-radius:50%; font-size:45px; background:var(--ok-bg); }
#relearn { margin-top:20px; width:100%; }
.print-sheet { display:none; }
@media(max-width:700px) {
  .bar { display:flex; flex-wrap:wrap; gap:10px; padding:12px 16px; }
  .brand { flex:1; }
  #family { flex:none; }
  .section-nav { flex:1; min-width:112px; }
  .section-nav a { padding:6px 10px; }
  #lookSlot { flex:none; margin-inline-start:0; }
  .shell { padding:22px 16px; }
  .hero { grid-template-columns:1fr; padding:24px; }
  .hero-art { display:none; }
  .grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .track { padding:18px; min-height:235px; }
  .track h2 { font-size:21px; }
  .panel { padding:20px; }
  .items { grid-template-columns:1fr; }
  .review { align-items:flex-start; flex-direction:column; }
  .review .btn { width:100%; }
  .toolbar { gap:9px; }
}
@media(max-width:360px) {
  .grid { grid-template-columns:1fr; }
  .shell,.bar { padding-inline:12px; }
  .section-nav a { padding-inline:7px; font-size:15px; }
  .track { min-height:180px; }
  .panel { padding:16px; }
  .stats { gap:7px; }
  .stat span { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }
@media print {
  body { background:white!important; color:black!important; }
  .shell,.bar { display:none; }
  .print-sheet { display:block; color:black; }
  .print-sheet h1 { text-align:center; }
  .practice-line { height:100px; border-bottom:1px solid #999; font-size:60px; text-align:right; padding:10px 30px; }
}

/* Same four destinations as the student hub; a lesson keeps its local back link. */
.student-dock{display:none}
@media(max-width:1000px){
 .section-nav{display:none}.shell{padding-bottom:130px}.bar{flex-wrap:wrap}
 .student-dock{position:fixed;z-index:30;inset-inline:12px;bottom:calc(12px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;padding:6px;border-radius:22px;background:var(--surface);border:var(--bw) solid var(--border);box-shadow:var(--shadow-hi)}
 .student-dock a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;min-height:44px;border-radius:16px;text-decoration:none;font-size:11.5px;font-weight:700;color:var(--muted)}
 .student-dock i{font-style:normal;font-size:18px;line-height:1.1}
 .student-dock a[aria-current]{color:var(--accent-text);background:var(--accent-2)}
}
@media print{.student-dock{display:none}}