.menu-toggle,.mobile-shortcuts { display:none; }
.navigation-panel[hidden] { display:none; }
.nav { justify-content:flex-start; gap:6px; padding:12px 0; }
.nav-item { padding:10px 14px; border-radius:10px; min-height:44px; }
.nav-item::after { display:none; }
.nav-item.active { background:var(--ink); color:var(--paper); }
.nav-item:hover { background:#e4eee7; color:var(--ink); }
.role-switcher { margin:4px 0 24px; }
.lesson-switcher { display:none; }
body:has(:is(#learning,#sounds,#practice,#dictation,#word-practice).active) .lesson-switcher { display:flex; align-items:center; padding:10px; margin:0 0 24px; border:1px solid var(--line); border-radius:12px; }
.lesson-switcher a { padding:10px 14px; border-radius:8px; }
.lesson-switcher a:first-child { border:0; margin-inline-end:auto; font-weight:500; }
.lesson-catalog-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-block:28px; }
.catalog-lesson { overflow:hidden; border:1px solid var(--line); border-radius:20px; background:var(--paper); }
.catalog-art { position:relative; background:#eee8dc; }
.catalog-art img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.catalog-letter { position:absolute; inset-inline-start:18px; bottom:16px; display:grid; place-items:center; width:64px; height:64px; border-radius:16px; background:var(--paper); color:var(--mint-deep); font:800 2.5rem Vazirmatn,Tahoma,sans-serif; }
.catalog-body { padding:24px; }
.catalog-body h2 { font-size:1.5rem; margin:8px 0; line-height:1.6; }
.catalog-description,.catalog-coming { line-height:1.9; color:var(--muted); }
.catalog-contents { font-size:.85rem; color:var(--mint-deep); line-height:1.8; margin-block:18px; }
.catalog-start { display:inline-flex; align-items:center; min-height:48px; padding:10px 22px; border-radius:10px; background:var(--ink); color:var(--paper); text-decoration:none; font-weight:700; }
.catalog-current { display:inline-block; margin:12px; font-size:.85rem; color:var(--mint-deep); }
.catalog-coming { padding:18px; border-inline-start:3px solid var(--mint-deep); background:var(--paper); }
/* Full-width sound rows leave room for vowel marks, examples and touch targets. */
.sound-tile { gap:12px; align-content:center; }
.sound-tile .sound-letter { font-size:clamp(2.5rem,5vw,4rem); line-height:1.5; }
.sound-tile .sound-tile-copy { display:grid; gap:4px; font-size:1rem; line-height:1.6; }
.sound-tile-copy strong { font-size:1rem; }
.sound-tile-copy small { font:500 1.1rem/1.8 Vazirmatn,Tahoma,sans-serif; }
.sound-tile .sound-play-label { font-size:.8rem; line-height:1.7; }
.sound-intro .section-heading h1 { font-size:clamp(1.6rem,4vw,2.5rem); line-height:1.7; letter-spacing:normal; }
body:has(:is(#sounds,#lessons).active) .pk-launcher { position:static; display:block; margin:24px auto; }
@media(max-width:760px) {
  .app-shell { width:calc(100% - 28px); margin-top:16px; }
  .topbar { display:grid; grid-template-columns:1fr auto; gap:14px; padding-bottom:14px; }
  .menu-toggle { display:inline-flex; gap:8px; align-items:center; justify-content:center; min-height:44px; padding:8px 12px; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:var(--paper); }
  .menu-toggle svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
  .header-tools { grid-column:1/-1; justify-content:space-between; width:100%; }
  .header-tools .child-chip { display:none; }
  .language-switcher { margin:0; }
  .navigation-panel { padding:12px; margin-block:8px 14px; border:1px solid var(--line); border-radius:16px; background:var(--paper); }
  .nav { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:0 0 12px; margin:0; }
  .nav-item { font-size:.9rem; text-align:start; padding:12px; line-height:1.7; }
  .role-switcher { display:grid; grid-template-columns:1fr; gap:6px; margin:14px 0 0; }
  .role-button { text-align:start; padding:10px 12px; border:1px solid var(--line); border-radius:8px; }
  .mobile-shortcuts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; padding:5px; margin:14px 0 20px; border:1px solid var(--line); border-radius:12px; background:var(--paper); }
  .mobile-shortcuts a { display:flex; align-items:center; justify-content:center; min-height:46px; padding:8px 4px; color:var(--muted); text-decoration:none; text-align:center; font-size:.88rem; border-radius:8px; }
  .mobile-shortcuts a[aria-current] { background:var(--ink); color:var(--paper); font-weight:700; }
  .lesson-switcher { gap:6px; }
  .lesson-switcher a { flex:none; padding:8px 10px; font-size:.85rem; }
  .lesson-switcher a:first-child { flex:1; text-align:start; }
  .lesson-catalog-grid { grid-template-columns:1fr; gap:20px; }
  .catalog-body { padding:20px; }
  .catalog-body h2 { font-size:1.3rem; }
  .sound-intro { gap:20px; }
  .sound-lab-grid { grid-template-columns:minmax(0,1fr); }
  .long-sound-card { padding:20px; }
  .long-sound-card > span { font-size:4rem; line-height:1.5; }
  .short-sounds { grid-template-columns:minmax(0,1fr); gap:12px; padding:12px; }
  .sound-tile { grid-template-columns:80px minmax(0,1fr) auto; gap:10px; min-height:112px; padding:12px; text-align:start; }
  .sound-tile .sound-letter { font-size:2.5rem; min-width:0; width:80px; }
  .sound-tile .sound-tile-copy { justify-self:start; }
  .sound-tile .sound-play-label { font-size:.78rem; }
  .sound-mark-legend { padding:16px; }
  .sound-mark-legend b { font-size:.8rem; }
}
@media(max-width:360px) {
  .sound-tile { grid-template-columns:64px minmax(0,1fr); }
  .sound-tile .sound-letter { width:64px; grid-row:span 2; }
  .sound-tile .sound-play-label { grid-column:2; justify-self:start; }
}