/* DEBONE mobile layer (v54): loaded last on every page. Phones first, then tablets. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
a,button,input,select,textarea,summary,[role=button]{touch-action:manipulation}
img,video,canvas{max-width:100%;height:auto}
iframe[src*="youtube"],iframe[src*="youtu.be"],iframe[src*="vimeo"]{aspect-ratio:16/9;width:100%;height:auto;border:0}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--orange,#E0A800);outline-offset:3px}

/* ---------- Tablets and phones ---------- */
@media (max-width:900px){
  .theme-brand .side{height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior:contain;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
  .theme-brand .topbar{position:sticky;top:0;z-index:50;padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top));gap:8px;flex-wrap:nowrap}
  .theme-brand .topbar .crumb{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .theme-brand .top-actions{flex:0 0 auto;display:flex;align-items:center;gap:6px}
  .theme-brand .top-actions .btn,#logout{white-space:nowrap;min-height:44px;padding:0 14px;font-size:.72rem;letter-spacing:.08em}
  .theme-brand .burger,.menu-btn,.bell,.top-actions button{min-width:44px;min-height:44px}
  .theme-brand .view{padding:18px 14px calc(96px + env(safe-area-inset-bottom))}
  .nav #menu.open{max-height:calc(100dvh - 72px);overflow-y:auto;overscroll-behavior:contain;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
  .nav #menu a,.nav #menu .nav-trigger{min-height:46px;display:flex;align-items:center}
  .ft a{display:inline-block;padding:7px 0}
  [role=dialog],.modal,.modal-card{max-height:92vh;max-height:92dvh;overflow-y:auto;overscroll-behavior:contain}
  .cw-fab{bottom:calc(16px + env(safe-area-inset-bottom))}
  body.has-tabbar .cw-fab{bottom:calc(84px + env(safe-area-inset-bottom))}
  body.has-tabbar .toasts{bottom:calc(88px + env(safe-area-inset-bottom))}
}

/* ---------- Phones ---------- */
@media (max-width:820px){
  /* Fields: 16px stops iPhones zooming in, 48px is easy to hit */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea,.input{font-size:16px;min-height:48px}
  textarea{min-height:96px}
  .btn{min-height:48px}
  .btn-sm{min-height:44px;padding:0 16px}

  /* Tables turn into cards. Without this a 760px table pushes amounts and buttons off the screen. */
  .dt-wrap,.table-wrap,.theme-brand .dt-wrap{overflow:visible!important;border:0!important;background:none!important;border-radius:0!important}
  table.dt,table.table,table.tbl,.theme-brand .dt{min-width:0!important;width:100%!important;display:block}
  table.dt thead,table.table thead,table.tbl thead,table.tbl thead{display:none}
  table.dt tbody,table.table tbody,table.tbl tbody{display:grid;gap:12px}
  table.dt tr,table.table tr,table.tbl tr{display:grid;gap:2px;padding:14px 16px;border:1px solid var(--line,#2a2a2a);border-radius:18px;background:#121212;min-width:0}
  table.dt td,table.table td,table.tbl td{display:flex!important;justify-content:space-between;align-items:center;gap:14px;border:0!important;padding:7px 0!important;text-align:right;min-width:0;overflow-wrap:anywhere}
  table.dt td::before,table.table td::before,table.tbl td::before{content:attr(data-label);flex:0 0 auto;font:700 .66rem Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ash,#9a9a9a);text-align:left}
  table.dt td[data-label=""]::before,table.dt td:not([data-label])::before,table.table td[data-label=""]::before,table.tbl td[data-label=""]::before,table.table td:not([data-label])::before,table.tbl td:not([data-label])::before{display:none}
  table.dt td:first-child,table.table td:first-child,table.tbl td:first-child{display:block!important;text-align:left;font-size:1.02rem;padding-top:0!important}
  table.dt td[colspan],table.table td[colspan],table.tbl td[colspan]{display:block!important;text-align:left}
  table.dt .dt-act,table.table .dt-act,table.tbl .dt-act,table.dt td:last-child:has(.btn),table.table td:last-child:has(.btn),table.tbl td:last-child:has(.btn){justify-content:stretch;display:flex!important;flex-wrap:wrap;gap:8px}
  table.dt .dt-act .btn,table.table td:last-child .btn,table.tbl td:last-child .btn{flex:1 1 auto}
  table.dt tbody tr,.sub-row{animation:none}

  table.dt td:first-child::before,table.table td:first-child::before,table.tbl td:first-child::before{display:none!important}
  table.tbl tr,table.dt tr,table.table tr{transition:border-color .3s,transform .3s}
  .table-wrap .tbl,.table-wrap table{min-width:0!important}
  .table-wrap{overflow:visible!important}
  table.tbl tbody tr{animation:none}
  table.tbl tr+tr{margin-top:0}
  .box,.panel,.lv-card{padding:18px 14px}
  .box>h2,.panel>h2{font-size:1.5rem;margin-bottom:12px}
  /* Admin live classes */
  .lv-compose{position:static}
  .lv-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lv-actions{width:100%;display:flex;flex-wrap:wrap;gap:8px}
  .lv-actions .lv-btn{flex:1 1 auto;min-height:46px;justify-content:center}
  .lv-two{grid-template-columns:1fr!important}

  /* Lessons and journey */
  .lesson-pane{padding:16px}
  .finish-bar{flex-direction:column;align-items:stretch}
  .finish-bar .btn{width:100%;justify-content:center}
  .stage-rail,.lv-life{max-width:none}

  /* Long words and wide content never create sideways scroll */
  h1,h2,h3,p,li,td,.muted{overflow-wrap:anywhere}
  pre,code{white-space:pre-wrap;word-break:break-word}
}

/* ---------- Small phones ---------- */
@media (max-width:420px){
  .theme-brand .view-head h1,.theme-brand .view h1{font-size:clamp(1.8rem,9vw,2.4rem)}
  .theme-brand .top-actions .btn,#logout{padding:0 10px}
  .lv-stats{gap:10px}
  .container{width:min(var(--max,1200px),100% - 24px)}
}

/* ---------- Touch devices: no stuck hover effects ---------- */
@media (hover:none){
  .sub-row:hover,.bx-card:hover,.lv-stat:hover,.card:hover{transform:none!important}
  .theme-brand .dt tbody tr:hover td{background:none}
  .wa2-drop{display:none!important}
}

/* ---------- Bottom tab bar (student dashboard and admin, phones only) ---------- */
.m-tabs{display:none}
@media (max-width:900px){
  .m-tabs{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:rgba(14,14,14,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line,#2a2a2a);transition:transform .35s cubic-bezier(.2,.7,.1,1)}
  body.side-open .m-tabs,body.kbd-open .m-tabs{transform:translateY(110%)}
  .m-tabs a,.m-tabs button{position:relative;display:grid;justify-items:center;align-content:center;gap:3px;min-height:54px;padding:6px 2px;border:0;border-radius:14px;background:none;color:var(--ash,#9a9a9a);font:600 .66rem Inter,sans-serif;text-decoration:none;cursor:pointer;transition:color .25s,background .25s,transform .15s}
  .m-tabs svg{width:22px;height:22px;display:block}
  .m-tabs a:active,.m-tabs button:active{transform:scale(.92)}
  .m-tabs a.on{color:var(--orange,#E0A800);background:rgba(224,168,0,.12)}
  .m-tabs a.on::before{content:"";position:absolute;top:-7px;width:22px;height:3px;border-radius:3px;background:var(--orange,#E0A800)}
}
@media (prefers-reduced-motion:reduce){.m-tabs,.m-tabs *{transition:none!important}}

/* Summary cards sit two per row on phones so pages do not become one long column */
@media (max-width:900px){
  .theme-brand .kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
  .theme-brand .kpis .kpi,.theme-brand .kpis .stat-card{padding:16px 14px;border-radius:20px;min-width:0}
  .theme-brand .kpis .kpi b,.theme-brand .kpis .stat-card b{font-size:clamp(1.5rem,7vw,2.1rem);overflow-wrap:anywhere}
  .theme-brand .view-head{padding:22px 18px;border-radius:24px}
  .theme-brand .view-head h1{font-size:clamp(1.9rem,8.5vw,2.6rem)}
}
@media (max-width:420px){.theme-brand .kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}}


/* ---------- Help button must never cover the Community Send button (v55) ---------- */
body.on-community .cw-fab,
body:has(.wa2-shell) .cw-fab,
body.kbd-open .cw-fab{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:scale(.6)!important}
@media (max-width:900px){
  /* the composer always clears the bottom tab bar and the phone home indicator */
  .theme-brand .wa2-shell .wa-composer{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  .theme-brand .wa-form{gap:6px}
  .theme-brand .wa-send{flex:0 0 48px;width:48px;height:48px}
}