/* Mobile + tablet refinements. Loaded last. Solid surfaces only, no gradients. */
@media(max-width:850px){
  html{-webkit-text-size-adjust:100%}
  img,svg,canvas,video{max-width:100%}
  #toast{bottom:max(25px,calc(env(safe-area-inset-bottom) + 16px))}
  .lesson-body,.lesson h2,.flash-face strong,.answer-option,.feedback,.revealed{overflow-wrap:anywhere}
  .lesson pre,.lesson code,.revealed pre{max-width:100%;overflow-x:auto}
  .hero-visual{max-width:320px}
  .revision-tabs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
  .revision-tabs::-webkit-scrollbar{display:none}
  .revision-tabs button{min-height:44px;height:44px;flex:0 0 auto;scroll-snap-align:start;white-space:nowrap}
}

@media(max-width:600px){
  /* Hero: compact, text-first; decorative illustration drops out so tracks sit in the first screen */
  .hero{padding:28px 20px 24px;gap:0}
  .hero h1{font-size:44px;letter-spacing:-2px;margin:12px 0 12px}
  .hero-description{line-height:1.65}
  .hero-cta{width:100%;min-height:48px;margin-top:20px}
  .hero-proof{flex-wrap:wrap;gap:6px 14px;margin-top:16px}
  .hero-visual{display:none}

  /* Buttons and form controls: 44px targets, 16px inputs avoid iOS zoom */
  .primary,.secondary,.text-btn,.tool-close,.lesson-tools button,.priority-actions button,.self-check button,.switch-tabs button,.sheet-actions a,.sheet-actions button,#view-more-revisions{min-height:44px}
  .tool-close{width:44px;height:44px}
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important;min-height:44px}
  textarea{min-height:96px}
  .last-checklist summary{min-height:44px}
  .checklist-grid label{min-height:44px;align-items:center}
  .checklist-grid input,.adaptive-concepts input,.topic-choice input{min-width:22px;min-height:22px}
  .persona select,.library-heading select,.topic-toolbar select{width:100%}

  /* Compact pack cards; preserve the responsive grid and single-line names. */
  .quick-start{padding:28px 16px 22px}
  .section-heading h2{font-size:24px;line-height:1.25}
  .quick-grid{gap:10px;margin-top:18px}
  .quick-card,.track-card,.topic-card,.topic-choice{min-width:0}
  .quick-card{min-height:140px}
  .quick-card strong{min-width:0}
  .quick-card p{font-size:13px;line-height:1.5}
  .toolbox{padding:16px}
  .tool-actions>button{min-height:84px}
  .quick-footer .text-btn{min-height:44px}

  /* Pack topics and picker */
  .pack-topics{padding:16px 16px calc(40px + env(safe-area-inset-bottom))}
  .pack-topics-heading h2{font-size:24px;line-height:32px}
  .pack-topics-heading p{font-size:15px;line-height:24px}
  .pack-navigation .secondary{min-height:44px}
  .overall-revision{flex-direction:column;align-items:stretch;gap:14px}
  .overall-revision .primary{width:100%}
  .topic-picker-head{gap:12px}
  .topic-search{width:100%}
  .topic-options{grid-template-columns:minmax(0,1fr)}
  .topic-options>*{min-height:56px}
  #show-all-topics{min-height:44px}
  .topic-selection{position:sticky;bottom:0;z-index:6;background:#fff;margin-left:-4px;margin-right:-4px;padding:12px 4px calc(12px + env(safe-area-inset-bottom))}
  .topic-selection-actions{width:100%;flex-wrap:wrap;gap:8px}
  .topic-selection-actions .primary{flex:1 1 100%;min-height:48px;white-space:normal}
  .selected-topic-chips{max-height:84px;overflow-y:auto}
  .selected-topic-chips button{min-height:36px}

  /* Session */
  .session,.results{padding:14px 14px calc(40px + env(safe-area-inset-bottom))}
  .session-bar{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;margin-bottom:16px}
  .session-bar .session-name{grid-column:1/-1;order:-1;min-width:0}
  .session-bar .secondary{min-height:44px;padding:8px 12px}
  .timer{min-height:44px;display:inline-flex;align-items:center;margin-left:0;justify-self:end}
  .session-progress{margin-bottom:16px}
  .lesson{padding:20px 16px;min-height:0;border-radius:14px}
  .lesson h2{font-size:21px}
  .lesson-body{font-size:16px;line-height:1.75}
  .lesson-tools{flex-wrap:wrap}
  .lesson-footer{position:sticky;bottom:0;background:#fff;flex-direction:column-reverse;gap:8px;margin:20px -16px -20px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);border-radius:0 0 14px 14px;z-index:5}
  .lesson-footer .primary,.lesson-footer .secondary{width:100%;min-height:48px}
  .answer-option{min-height:52px;padding:12px}
  .self-check button{flex:1 1 calc(50% - 8px)}
  .results-stats{flex-wrap:wrap;gap:16px 24px}

  /* Adaptive hash / route editor */
  .adaptive-shell{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));padding-bottom:calc(48px + env(safe-area-inset-bottom))}
  .adaptive-top{position:sticky;top:0;z-index:8;background:#fff;padding-top:max(8px,env(safe-area-inset-top))}
  .adaptive-top .secondary,.adaptive-top .text-btn,.adaptive-top>button{min-height:44px}
  .adaptive-top>.adaptive-timer{min-height:44px}
  .adaptive-top>button{font-size:13px}
  .adaptive-brief,.adaptive-lesson p{font-size:16px;line-height:1.7}
  .adaptive-lesson{grid-template-columns:minmax(0,1fr)}
  .adaptive-lesson>*,.adaptive-example{min-width:0;max-width:100%}
  .adaptive-example pre{width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
  .adaptive-trap{overflow-wrap:anywhere}
  .adaptive-progress{grid-template-columns:auto minmax(0,1fr)}
  .adaptive-progress progress{min-width:0}
  .adaptive-summary{grid-template-columns:minmax(0,1fr)}
  .adaptive-options button,.adaptive-answers button,.adaptive-time-options button{min-height:48px}
  .adaptive-time-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .adaptive-time-options button{min-width:0;padding:12px 6px}
  .adaptive-concepts label{min-height:56px}
  .adaptive-tools .text-btn{min-height:44px;font-size:14px}
  .adaptive-study>.adaptive-actions{bottom:max(8px,env(safe-area-inset-bottom))}
  .adaptive-study>.adaptive-actions>.primary{font-size:14px;min-height:48px}
  .adaptive-study>.adaptive-actions>.text-btn{font-size:13px;min-height:44px}
  .adaptive-route-footer{position:sticky;bottom:max(8px,env(safe-area-inset-bottom));background:#fff;z-index:5}
  .adaptive-route-footer .primary{min-height:48px}
  .adaptive-coverage>summary,.adaptive-coverage details>summary{min-height:48px}

  /* Dialogs */
  dialog{width:calc(100vw - 24px);max-width:none;max-height:calc(100dvh - 24px - env(safe-area-inset-bottom))}
  .dialog-inner{padding:22px 18px}
  .dialog-actions button{width:100%;min-height:48px}
  .tool-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);padding:16px 14px calc(16px + env(safe-area-inset-bottom));overscroll-behavior:contain}
  .tool-head{gap:10px}
  .tool-head h2{font-size:20px}
  .tool-topic-label{flex-direction:column;align-items:stretch;gap:8px}
  .tool-topic-label select{max-width:none;width:100%}
  .flash-actions{gap:8px}
  .flash-actions button{flex:1 1 calc(50% - 8px);min-height:48px}
  .flash-deck .flash-card{min-height:0}
  .flash-count-options button{min-height:88px}
  .sheet-actions{flex-direction:column;align-items:stretch}
  .sheet-actions a,.sheet-actions button{width:100%;justify-content:center;text-align:center}
  .sheet-actions>span{text-align:center}
  .sheet-preview{overflow:auto}
}

@media(max-width:360px){
  .hero h1{font-size:38px}
  .quick-card{padding:13px 10px}
  .tool-actions{grid-template-columns:1fr}
  .adaptive-top{grid-template-columns:auto minmax(0,1fr) auto}
  .flash-actions button{flex-basis:100%}
  .flash-count-picker{padding:16px 12px}
  .flash-count-options{gap:6px}
  .flash-count-options button{padding:12px 4px}
}

@media(min-width:601px) and (max-width:850px){
  .hero{padding:44px 5% 36px}
  .topic-options{grid-template-columns:repeat(2,minmax(0,1fr))}
  .primary,.secondary,.text-btn{min-height:44px}
  .session{padding-left:24px;padding-right:24px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}