/* ════════════════════════════════════════════════════════
   Phonics Masterclass — TT-aligned shell (sidebar · level view · reference host)
   Wraps the existing module SPA. Reuses course.css design tokens.
   ════════════════════════════════════════════════════════ */

/* ── Sidebar (level picker + reference) ── */
#sidebar{padding:10px 8px;}
/* Brand lockup — Crumbs mascot for brand recall (like the teacher-training nav) */
.sb-brand{text-align:center;padding:8px 8px 14px;margin-bottom:8px;border-bottom:1px solid var(--border-mid);}
.sb-brand img{width:74px;height:74px;object-fit:contain;}
.sb-brand-name{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.08rem;color:var(--text);line-height:1;margin-top:2px;}
.sb-brand-name span{color:var(--teal);}
.sb-brand-sub{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-light);margin-top:3px;}
/* "Back to Session Plan" — module-view top bar (Appendix modules → sessions) */
.ps-back{border:1.5px solid var(--teal-border);background:var(--teal-pale);color:var(--teal-dark);font-family:'Fredoka',sans-serif;font-weight:700;font-size:.8rem;border-radius:9px;padding:6px 13px;cursor:pointer;white-space:nowrap;flex-shrink:0;}
.ps-back:hover{background:var(--teal);color:#fff;border-color:var(--teal);}
.sb-group{padding:4px 4px;}
.sb-group + .sb-group{margin-top:6px;border-top:1px solid var(--border-mid);padding-top:10px;}
.sb-lbl{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-light);padding:4px 8px 6px;}
.sb-item{display:flex;align-items:center;gap:10px;padding:9px 9px;border-radius:13px;cursor:pointer;transition:background .15s;}
.sb-item:hover{background:var(--cream);}
.sb-item.active{background:var(--teal-pale);}
.sb-item.active .sb-nm{color:var(--teal-dark);}
.sb-ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.05rem;flex-shrink:0;}
.sb-nm{flex:1;min-width:0;font-weight:700;font-size:.9rem;line-height:1.18;color:var(--text);}
.sb-nm small{display:block;font-weight:600;font-size:.72rem;color:var(--text-light);margin-top:1px;}
.sb-ct{font-size:.72rem;font-weight:700;color:var(--text-light);background:var(--cream);padding:2px 9px;border-radius:11px;flex-shrink:0;}

/* ── Level view + reference host occupy the content column ── */
#level-view,#view-host{flex:1;min-width:0;padding:28px 32px 70px;max-width:1000px;margin:0 auto;width:100%;}

/* level hero */
.lv-hero{border:1.5px solid var(--border-mid);border-radius:20px;padding:26px 28px;margin-bottom:22px;}
.lv-eyebrow{font-weight:700;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--lc);}
.lv-title{font-size:clamp(1.4rem,3.5vw,1.85rem);font-weight:700;margin:5px 0 8px;line-height:1.15;}
.lv-desc{font-family:'Lora',serif;color:var(--text-mid);font-size:.95rem;line-height:1.65;max-width:660px;}
.lv-prog{display:flex;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap;}
.lv-prog-bar{flex:0 0 170px;height:7px;background:rgba(0,0,0,.07);border-radius:4px;overflow:hidden;}
.lv-prog-fill{height:100%;border-radius:4px;transition:width .5s ease;}
.lv-prog-lbl{font-size:.8rem;font-weight:600;color:var(--text-mid);}

/* module grid */
.lv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:12px;}
.lv-card{background:#fff;border:1.5px solid var(--border-mid);border-radius:14px;padding:15px 16px;cursor:pointer;display:flex;align-items:center;gap:13px;transition:all .18s;box-shadow:var(--shadow-sm);}
.lv-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--lc);}
.lv-card.active{border-color:var(--lc);box-shadow:0 0 0 2px var(--lc) inset;}
.lv-card.done{background:#F6FEFB;}
.lv-card-num{width:36px;height:36px;border-radius:11px;font-weight:700;font-size:.95rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.lv-card-body{flex:1;min-width:0;}
.lv-card-title{font-weight:700;font-size:.92rem;line-height:1.28;color:var(--text);}
.lv-card-open{font-size:.76rem;font-weight:700;color:var(--lc);white-space:nowrap;flex-shrink:0;}

/* ── "Go Deeper" button ── */
.lv-deeper{border:1.5px solid var(--lc,#0D9488);background:#fff;color:var(--lc,#0D9488);font-family:'Fredoka',sans-serif;font-weight:700;font-size:.82rem;border-radius:11px;padding:8px 15px;cursor:pointer;transition:all .15s;white-space:nowrap;}
.lv-deeper:hover{background:var(--lc,#0D9488);color:#fff;}
.lv-deeper.back{background:transparent;border-style:dashed;margin-top:16px;}

/* ── Personalised greeting at the top of the roadmap (like teacher training) ── */
.rm-greeting{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.05rem;color:var(--text);margin:0 0 14px;}

/* ── LEVEL TABS — all four levels in one place (teacher-roadmap style) ── */
.ses-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:18px;}
.ses-tab{position:relative;text-align:left;background:#fff;border:1.5px solid var(--border-mid);border-radius:14px;padding:11px 14px;cursor:pointer;transition:all .15s;font-family:'Fredoka',sans-serif;display:flex;flex-direction:column;gap:1px;box-shadow:var(--shadow-sm);}
.ses-tab:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--lc,var(--teal));}
.ses-tab.active{border-color:var(--lc,var(--teal));box-shadow:0 0 0 2px var(--lc,var(--teal)) inset;background:#fff;}
.ses-tab-top{font-weight:700;font-size:.95rem;color:var(--lc,var(--teal-dark));}
.ses-tab-sub{font-size:.72rem;font-weight:600;color:var(--text-mid);line-height:1.2;}
.ses-tab-ct{margin-top:4px;font-size:.66rem;font-weight:700;color:var(--text-light);}
.ses-tab.active .ses-tab-ct{color:var(--lc,var(--teal-dark));}

/* ── LEVEL HEADER — band above the grid, with the level's Crumbs mascot ── */
.lv-header{display:flex;justify-content:space-between;align-items:center;gap:20px;border:1.5px solid var(--border-mid);border-radius:18px;padding:20px 24px;margin-bottom:20px;background:linear-gradient(135deg,var(--lbg,#fff) 0%,#fff 62%);}
.lv-header-main{flex:1;min-width:0;}
.lv-header .lv-eyebrow{font-weight:700;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--lc);}
.lv-header .lv-title{font-size:clamp(1.3rem,3vw,1.7rem);font-weight:700;margin:3px 0 6px;line-height:1.15;}
.lv-header .lv-desc{font-family:'Lora',serif;color:var(--text-mid);font-size:.9rem;line-height:1.6;max-width:560px;margin-bottom:14px;}
.lv-header .lv-prog{margin:0 0 14px;}
.lv-header-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.lv-continue{border:none;background:var(--lc,var(--teal));color:#fff;font-family:'Fredoka',sans-serif;font-weight:700;font-size:.9rem;border-radius:12px;padding:11px 20px;cursor:pointer;box-shadow:0 4px 14px rgba(28,25,23,.16);transition:transform .12s;}
.lv-continue:hover{transform:translateY(-1px);}
.lv-complete{font-family:'Fredoka',sans-serif;font-weight:700;color:var(--lc,var(--teal));font-size:.92rem;}
.lv-header-mascot{width:96px;height:96px;object-fit:contain;flex-shrink:0;}

/* ── SESSION GRID — multi-column chips, dividers/milestones span the row ── */
.ses-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:12px;}
.ses-partbar{grid-column:1/-1;display:flex;flex-direction:column;gap:1px;margin:10px 0 0;padding:9px 15px;border-left:4px solid var(--teal);background:var(--teal-pale);border-radius:0 10px 10px 0;}
.ses-partbar b{font-family:'Fredoka',sans-serif;font-size:.9rem;color:var(--teal-dark);text-transform:uppercase;letter-spacing:.04em;}
.ses-partbar span{font-size:.74rem;color:var(--text-mid);font-family:'Lora',serif;font-style:italic;}
/* TIER divider — app tier name + emoji + colour, spans the grid row */
.ses-tier{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:16px 0 4px;padding:10px 16px;border-radius:12px;background:var(--tbg);border-left:5px solid var(--tc);}
.ses-tier-ic{font-size:1.2rem;line-height:1;flex-shrink:0;}
.ses-tier b{font-family:'Fredoka',sans-serif;font-size:1rem;font-weight:700;color:var(--tc);}
.ses-tier-sub{font-size:.76rem;color:var(--text-mid);font-family:'Lora',serif;font-style:italic;}
@media(max-width:520px){ .ses-tier-sub{display:none;} }
.ses-chip{position:relative;background:#fff;border:1.5px solid var(--border-mid);border-radius:14px;padding:13px 14px;cursor:pointer;transition:all .16s;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;}
.ses-chip:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--lc,var(--teal));}
.ses-chip.stub{cursor:default;opacity:.55;box-shadow:none;}
.ses-chip.stub:hover{transform:none;box-shadow:none;border-color:var(--border-mid);}
.ses-chip.done{background:#F6FEFB;border-color:var(--teal-border);}
.ses-num{font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-light);display:flex;align-items:center;gap:5px;}
.ses-tick{color:var(--teal-dark);}
.ses-focus{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1rem;color:var(--lc,var(--teal-dark));margin:2px 0 1px;}
.ses-label{font-size:.74rem;color:var(--text-mid);line-height:1.35;flex:1;}
.ses-open{display:inline-block;align-self:flex-start;margin-top:9px;font-size:.64rem;font-weight:700;color:#fff;background:var(--lc,var(--teal));border-radius:999px;padding:3px 11px;}
.ses-open.soon{color:var(--text-light);background:var(--cream-dark);}
.ses-milestone{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:10px;margin:4px 0;padding:8px 18px;font-family:'Fredoka',sans-serif;font-size:.78rem;font-weight:600;color:var(--teal-dark);background:linear-gradient(90deg,rgba(0,168,150,0),var(--teal-pale) 18%,var(--teal-pale) 82%,rgba(0,168,150,0));}
.ses-milestone::before,.ses-milestone::after{content:"";flex:0 0 24px;height:1.5px;background:var(--teal-border);border-radius:2px;}
.ms-link{border:1.5px solid var(--teal);background:var(--teal);color:#fff;font-family:'Fredoka',sans-serif;font-weight:700;font-size:.72rem;border-radius:999px;padding:5px 13px;cursor:pointer;white-space:nowrap;}
.ms-link:hover{background:var(--teal-dark);border-color:var(--teal-dark);}
/* mobile: stack the milestone vertically so the line never squishes into a one-word column */
@media(max-width:600px){
  .ses-milestone{flex-direction:column;gap:8px;padding:12px 16px;text-align:center;line-height:1.45;}
  .ses-milestone::before,.ses-milestone::after{display:none;}
  .ms-link{white-space:normal;}
}
/* Decodable-readers callout at the end of a tier (e.g. consonant-blend books) */
.ses-books{grid-column:1/-1;display:flex;align-items:center;gap:12px;margin:6px 0 2px;padding:12px 18px;border:1.5px solid var(--border-mid);border-left:4px solid var(--tc);background:var(--cream);border-radius:0 12px 12px 0;}
.ses-books-ic{font-size:1.4rem;flex-shrink:0;}
.ses-books-txt{display:flex;flex-direction:column;gap:2px;min-width:0;}
.ses-books-txt b{font-family:'Fredoka',sans-serif;font-size:.84rem;color:var(--tc);}
.ses-books-list{font-family:'Lora',serif;font-style:italic;font-size:.82rem;color:var(--text-mid);line-height:1.4;}

/* ── "Coming soon" panel for levels without packs yet ── */
.ses-soon{text-align:center;padding:48px 24px;border:1.5px dashed var(--border-mid);border-radius:18px;background:var(--cream);}
.ses-soon-emoji{font-size:2.4rem;margin-bottom:10px;}
.ses-soon-txt{font-family:'Lora',serif;color:var(--text-mid);font-size:.95rem;line-height:1.6;margin-bottom:18px;}
.ses-soon-txt b{font-family:'Fredoka',sans-serif;color:var(--text);}
.ses-soon .lv-deeper{display:inline-block;}

/* ── SESSION VIEW = a right-aligned, full-height slide-out DRAWER ──
   Both the drawer and its close button are anchored to the VIEWPORT (position:fixed),
   NOT to the tint layer — so neither can be pushed off-screen if the page has any
   horizontal overflow. The overlay is just the dimmed backdrop (also the click target).
   openSession/closeSession only toggle .open — zero JS logic change. */
/* The drawer fills the whole MAIN-CONTENT area — its left edge meets the 260px sidebar,
   so the session grid behind is fully hidden (a parent asked to focus on one session,
   not the dimmed grid). The sidebar stays OUT of the overlay (un-dimmed, still usable).
   On ≤860px the sidebar is hidden, so the drawer + overlay go full-width (left:0). */
.session-overlay{position:fixed;top:0;right:0;bottom:0;left:260px;z-index:400;background:rgba(28,25,23,0);visibility:hidden;transition:background .3s ease, visibility 0s linear .34s;}
.session-overlay.open{visibility:visible;background:rgba(28,25,23,.45);transition:background .3s ease, visibility 0s linear 0s;}
/* The drawer is a soft cream CANVAS with a FAINT Crumbs doodle pattern (a translucent
   cream wash over doodle.webp fades it to a whisper), so the centred column's side margins
   read as a delightful branded backdrop on wide screens; content sits in WHITE cards on top. */
.sview{position:fixed;top:0;left:260px;right:0;height:100vh;height:100dvh;max-width:none;background-color:var(--cream-mid);background-image:linear-gradient(rgba(245,240,232,.84),rgba(245,240,232,.84)),url('/phonics-course/images/crumbs/doodle.webp');background-repeat:repeat;background-size:auto,440px;border-radius:0;padding:0 24px 60px;overflow-y:auto;-webkit-overflow-scrolling:touch;box-shadow:-14px 0 44px rgba(28,25,23,.20);transform:translateX(100%);transition:transform .34s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;}
.session-overlay.open .sview{transform:translateX(0);}
/* content sits in a centred reading column so it doesn't stretch across the wide panel */
.sv-inner{width:100%;max-width:920px;margin:0 auto;display:flex;flex-direction:column;}
/* sticky top bar: a clear "← Level N sessions" back button + the ✕, always reachable */
/* sticky top bar: top padding lives HERE (not on .sview) so the bar's background
   covers the panel's very top edge — no content peeks above it when scrolling. */
.sv-topbar{position:sticky;top:0;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--cream-mid);padding:16px 0 10px;margin-bottom:2px;}
.sv-back{display:inline-flex;align-items:center;gap:6px;border:none;background:none;cursor:pointer;font-family:'Fredoka',sans-serif;font-weight:700;font-size:.82rem;color:var(--svc,var(--teal-dark));padding:6px 8px 6px 0;border-radius:8px;}
.sv-back:hover{color:var(--svc-solid,var(--teal));text-decoration:underline;}
/* close = a sticky flex item pinned to the drawer's top-right. Plain normal-flow
   positioning (no fixed/absolute) so it can never be pushed off-screen; sticky keeps
   it visible as the drawer content scrolls. Negative margins keep it from adding a gap. */
.sv-close{border:none;background:var(--cream);color:var(--text-mid);border-radius:50%;width:32px;height:32px;font-size:1rem;font-weight:700;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(28,25,23,.22);flex:0 0 auto;}
.sv-close:hover{background:var(--svc-solid,var(--teal));color:#fff;}
/* Session header — a contained gradient card so the title block reads as one tidy
   unit in the now-wide drawer (matches the module-header gradient look). */
/* gradient/border/eyebrow inherit the LEVEL's colour via --svc / --svc-bg, set inline
   on .sv-header by openSession (LEVEL_META). Falls back to teal if unset. */
.sv-header{background:linear-gradient(135deg,var(--svc-bg,var(--teal-pale)) 0%,#fff 72%);border:1px solid var(--svc-bg,var(--teal-border));border-color:color-mix(in srgb,var(--svc,#3BBCB8) 30%,#fff);border-radius:14px;padding:14px 18px 15px;margin-bottom:12px;}
.sv-eyebrow{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--svc,var(--teal-dark));}
.sv-title{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.4rem;line-height:1.2;margin:3px 0 5px;}
.sv-obj{font-family:'Lora',serif;font-style:italic;color:var(--text-mid);font-size:.92rem;line-height:1.5;margin-bottom:0;max-width:660px;}
.sv-sec{background:#fff;border:1.5px solid var(--border);border-radius:12px;padding:14px;margin-bottom:12px;box-shadow:0 1px 3px rgba(28,25,23,.045);}
.sv-sec h3{font-family:'Fredoka',sans-serif;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--svc,var(--teal-dark));margin-bottom:8px;display:flex;gap:8px;align-items:center;}
.sv-sec h3 .t{margin-left:auto;font-size:.66rem;background:var(--svc-bg,var(--teal-pale));color:var(--svc,var(--teal-dark));border-radius:12px;padding:2px 9px;}
.sv-sec p,.sv-sec li{font-family:'Lora',serif;font-size:.86rem;color:var(--text-mid);line-height:1.6;}
.sv-sec.exit{background:var(--svc-bg,var(--teal-pale));border-color:var(--svc-bd,var(--teal-border));}
.sv-sec.deeper{background:#F7F6F5;}
.sv-deeper-link{display:inline-flex;align-items:center;margin:0 0 14px;padding:7px 14px;border:1px dashed var(--border-mid);border-radius:20px;background:#F7F6F5;color:var(--text-mid);font-family:'Fredoka',sans-serif;font-weight:600;font-size:.78rem;cursor:pointer;text-decoration:none;transition:all .15s;}
.sv-deeper-link:hover{border-color:var(--svc-solid,var(--teal));color:var(--svc,var(--teal-dark));background:var(--svc-bg,var(--teal-pale));}
.script{background:var(--svc-bg,var(--teal-pale));border-radius:8px;padding:8px 12px;font-style:italic;display:block;margin-top:6px;}
.act{border:1.5px solid var(--border);border-radius:12px;margin:10px 0;background:#fff;overflow:hidden;box-shadow:0 1px 4px rgba(28,25,23,.05);}
.act-head{display:flex;align-items:center;gap:10px;background:var(--svc-bg,var(--teal-pale));padding:8px 12px;border-bottom:1.5px solid var(--svc-bd,var(--teal-border));}
.act-num{width:22px;height:22px;border-radius:50%;background:var(--svc-solid,var(--teal));color:#fff;font-weight:700;font-size:.74rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.act-head b{font-family:'Fredoka',sans-serif;color:var(--svc,var(--teal-dark));font-size:.88rem;}
.act-time{margin-left:auto;font-size:.66rem;font-weight:700;background:#fff;color:var(--svc,var(--teal-dark));border:1px solid var(--svc-bd,var(--teal-border));border-radius:12px;padding:2px 9px;white-space:nowrap;}
.act-body{padding:10px 14px;}
.act-body p{font-family:'Lora',serif;font-size:.86rem;color:var(--text-mid);line-height:1.6;margin:0;}
.ws-btn{display:inline-flex;gap:8px;align-items:center;border:2px solid var(--svc-bd,var(--teal-border));background:var(--svc-bg,var(--teal-pale));color:var(--svc,var(--teal-dark));font-weight:700;font-family:'Fredoka',sans-serif;border-radius:10px;padding:9px 16px;cursor:pointer;font-size:.85rem;margin:0 4px 6px 0;}
.ws-btn.deeper-btn{border-color:var(--border-mid);background:#fff;color:var(--text);}
.blendbtn{border:2px solid var(--svc-bd,var(--teal-border));background:#fff;border-radius:10px;padding:8px 13px;font-family:'Fredoka',sans-serif;font-weight:700;color:var(--svc,var(--teal-dark));cursor:pointer;font-size:.9rem;margin:4px 4px 0 0;text-align:left;}
.sv-foot{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;}
.btn-done{flex:1;min-width:160px;border:none;background:var(--svc-solid,var(--teal));color:#fff;font-weight:700;font-family:'Fredoka',sans-serif;border-radius:12px;padding:13px;cursor:pointer;font-size:.92rem;}
.btn-next{display:inline-flex;align-items:center;text-decoration:none;border:2px solid var(--border-mid);background:#fff;border-radius:12px;padding:13px 18px;cursor:pointer;font-family:'Fredoka',sans-serif;font-weight:700;color:var(--text-mid);}
.bigcards{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 16px;}
.bigcard{flex:1 1 140px;min-width:140px;border:2.5px solid var(--svc-bd,var(--teal-border));background:var(--svc-bg,var(--teal-pale));border-radius:16px;text-align:center;padding:18px 10px 12px;cursor:pointer;transition:transform .12s;}
.bigcard:active{transform:scale(.96);}
.bigcard .L{font-family:'Fredoka',sans-serif;font-size:4.2rem;font-weight:700;color:var(--svc,var(--teal-dark));line-height:1;}
.bigcard .L small{font-size:2.6rem;color:var(--coral);}
.bigcard .L small.lowblend{font-size:1.5rem;vertical-align:.18em;}
.bigcard .me{position:relative;display:inline-block;white-space:nowrap;font-size:2.7rem;}
.bigcard .me .me-hl{color:var(--coral);}
.bigcard .me-arc{position:absolute;left:-4%;width:108%;top:-.30em;height:.5em;overflow:visible;pointer-events:none;}
.bigcard .me-pic{display:block;font-size:2rem;line-height:1;margin-bottom:3px;text-align:center;}
.bigcard .L small.me-low{font-size:1.7rem;color:var(--coral);}
.bigcard .syl{display:inline-flex;align-items:baseline;font-size:2.3rem;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.bigcard .syl .syl-chunk{padding-bottom:1px;border-bottom:3px solid transparent;transition:border-color .25s ease;}
.bigcard .syl .syl-dot{color:var(--coral);opacity:0;max-width:0;display:inline-block;overflow:hidden;transform:scale(.3);transition:opacity .28s ease,max-width .28s ease,margin .28s ease,transform .28s ease;}
.bigcard .syl.split .syl-dot{opacity:1;max-width:1.2em;margin:0 .14em;transform:scale(1);}
.bigcard .syl.split .syl-chunk{border-bottom-color:var(--coral);}
.bigcard.wide{flex:1 1 100%;}
.bigcard .hint{font-size:.7rem;color:var(--text-mid);margin-top:6px;}

/* ── Dashboard level cards now open the session plan (cursor cue only) ── */
@media(max-width:900px){
  #level-view,#view-host{padding:20px 16px 80px;}
  .lv-grid{grid-template-columns:1fr;}
  .sb-nm small{display:none;}
  .lv-header-mascot{width:68px;height:68px;}
  .ses-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
  /* drawer becomes a full-screen focus view on mobile */
  .sview{max-width:100%;border-radius:0;padding:22px 16px 60px;}
}
/* once the sidebar is hidden (≤860px) the drawer + overlay span the full width */
@media(max-width:860px){ .sview{left:0;} .session-overlay{left:0;} }
@media(max-width:520px){ .lv-header-mascot{display:none;} }