/* Shared touch-device layout; loaded after page themes. */
html{-webkit-text-size-adjust:100%;scroll-padding-top:20px}
button,a,input,select,textarea{touch-action:manipulation}
img{max-width:100%}
button,a.button{min-height:44px}
.leaderboard-dialog th,.leaderboard-dialog td{padding:12px 8px;white-space:nowrap}
.leaderboard-dialog .current-student{background:#f7e0e5!important;font-weight:750;outline:2px solid #800000;outline-offset:-2px}
.leaderboard-dialog>button{position:sticky;bottom:0;min-width:120px}
dialog{overscroll-behavior:contain;max-height:calc(100dvh - 32px);box-sizing:border-box}
body:has(dialog[open]){overflow:hidden}
@media(max-width:1024px){
  input,textarea,select{font-size:16px!important}
  button,.small,.topbar nav a,.toplink,.home{min-height:44px}
  .topbar,.chrome-header{height:auto;flex-wrap:wrap;gap:12px;padding:14px 20px}
  .topbar .brand{white-space:normal;line-height:1.5;min-width:0}
  .topbar nav{flex-wrap:wrap;gap:6px;max-width:100%}
  .topbar nav a{display:inline-flex;align-items:center}
  .wrap,.shell{width:calc(100% - 32px)}
  .bank-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{gap:24px}body:not([data-bank]) .hero{grid-template-columns:1fr}
  .hero-note{transform:none}
  body[data-bank] .hero{padding:28px 24px 210px;margin-top:22px}
  body[data-bank] .hero>div{padding:24px;max-width:740px}
  body[data-bank] .hero-note{left:24px;right:24px;bottom:20px}
  body[data-bank] .hero h1{font-size:clamp(25px,4vw,36px);letter-spacing:.025em}
  .manual-dialog,#create-bank-dialog{width:min(680px,calc(100% - 28px));max-height:calc(100dvh - 28px);padding:24px}
  .manual-dialog input{min-height:48px}
  .quiz-card{padding:24px}.quiz-card h2{overflow-wrap:anywhere;line-height:1.65}
  .choice{min-height:58px;text-align:left;white-space:normal;overflow-wrap:anywhere;font-size:17px}
  .choice .letter{flex-shrink:0}
  .question-photo{max-height:40dvh}
  .quiz-actions,.result-buttons,.import-actions,.editor-head,.section-heading,.row{flex-wrap:wrap;gap:12px}
  .quiz-timer{flex-wrap:wrap;align-items:center;gap:6px;font-size:14px}
  .quiz-timer strong{font-size:20px}
  .chrome{height:100dvh}.chrome-header .brand{flex-wrap:wrap;letter-spacing:.06em}
  .chrome-nav{flex-wrap:wrap;max-width:100%;border-radius:14px}
  .chrome-nav a{min-height:44px;display:inline-flex;align-items:center;padding:8px 12px}
  .chrome-main{padding:20px 16px 32px}.page-head{flex-wrap:wrap}
  .btn,.btn-icon{min-height:44px;min-width:44px}
}
@media(max-width:600px){
  .topbar{padding:12px 16px}.topbar nav{width:100%}.student-nav{margin-left:0;gap:8px}
  .bank-grid,.tools,.roles{grid-template-columns:1fr}
  #admin-banks{grid-template-columns:minmax(0,1fr)}
  .panel,.quiz-card{padding:18px}.admin-heading{flex-wrap:wrap;padding:28px 0 20px}
  .question-photo-manager{grid-template-columns:minmax(0,1fr)}
  .question-photo-manager .field-note{grid-column:auto}
  body[data-bank] .hero{padding:20px 12px 0;background-position:center;margin-top:16px}
  body[data-bank] .hero>div{padding:22px 16px}
  body[data-bank] .hero-note{position:relative;inset:auto;margin:150px 0 12px;padding:16px}
  body[data-bank] .hero .eyebrow{font-size:12px;letter-spacing:.06em}
  body[data-bank] .hero h1{font-size:25px;line-height:1.55}
  body[data-bank] #banks{padding:20px 0 0}#f1-start{width:100%;min-height:52px}
  .session-top{flex-wrap:wrap;gap:10px}.session-top>span{overflow-wrap:anywhere}
  .choices{grid-template-columns:minmax(0,1fr)}
  .quiz-actions{align-items:stretch}.quiz-actions>button,.result-buttons>button{width:100%;min-height:50px}
  .manual-dialog,#create-bank-dialog{padding:20px 16px;border-radius:14px}
  .manual-dialog h2{font-size:22px}.manual-dialog form button{width:100%;align-self:stretch}
  .leaderboard-dialog table{font-size:13px}.leaderboard-dialog th,.leaderboard-dialog td{padding:10px 6px}
  .footer{flex-wrap:wrap;gap:12px;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
}
@media(max-width:1024px) and (orientation:portrait){
  .display-root{align-items:flex-start;overflow:auto}
  .display-root .aspect-ratio-box{width:100%;height:auto;min-height:100dvh;overflow:visible}
  .display-stage{position:relative;min-height:100dvh;padding:70px 16px 24px;grid-template-rows:auto 1fr}
  .display-stage>.display-nav{top:12px;left:16px;right:16px;flex-wrap:wrap}
  .display-nav-link{min-height:44px;padding:10px 12px;font-size:14px}
  .display-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
  .display-brand .brand-name{font-size:18px}.display-status{font-size:15px}
  .timer-value{font-size:28px}.timer-unit{font-size:14px}
  .team-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px}
  .team-card{max-width:none;max-height:none;min-height:150px;padding:16px}
  .team-name{font-size:18px}.team-score{font-size:30px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}