/* Shared phone layout. Desktop styles remain owned by each page. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-wrap:anywhere}
img,video{max-width:100%}
pre,code{white-space:pre-wrap;overflow-wrap:anywhere}
.pad button,.action,.exit,.exit-link,.testlink{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

@media (max-width:700px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  body{min-width:0}
  .page,.container,.wrapper,.shell,.site,.app{width:calc(100% - 12px)!important;max-width:none!important;margin-left:auto!important;margin-right:auto!important}
  .layout,.content,.columns,.main-layout{min-width:0}
  main,.main,.main-content,.sidebar,.side,section,article,aside{min-width:0;max-width:100%}
  h1{font-size:clamp(28px,10vw,42px)!important;line-height:1.12}
  h2{font-size:clamp(21px,7vw,29px);line-height:1.25}
  h3{line-height:1.3}
  p,li{line-height:1.65}
  a,button,input,select,textarea,summary{touch-action:manipulation}
  button,input,select,textarea{max-width:100%;font-size:16px}
  button,.btn,.button,[role="button"],input[type="button"],input[type="submit"]{min-height:44px}
  nav a,.nav a,.menu a{min-height:40px;padding-top:9px!important;padding-bottom:9px!important}
  table{display:block;width:100%!important;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  th,td{min-width:82px}
  iframe{max-width:100%}
  .window,.dialog,.modal .box,.key-dialog{max-width:calc(100vw - 16px)!important;max-height:calc(100dvh - 16px)!important}
  .titlebar button,[data-close]{min-width:44px;min-height:36px;font-size:20px}
  .taskbar{height:auto!important;min-height:46px;gap:4px!important;padding-bottom:max(4px,env(safe-area-inset-bottom))!important}
  .taskbar a,.taskbar span{min-width:0;padding:6px!important;font-size:11px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .taskbar .clock{flex:0 0 auto}
  .photo-grid{grid-template-columns:1fr!important}
  .file-meta{gap:8px;flex-wrap:wrap}
  .route-map,.map{max-width:100%;touch-action:manipulation}
  .match-row{grid-template-columns:1fr!important}
  .key-options{display:grid!important;grid-template-columns:1fr;width:100%}
  .key-options button{min-width:0!important;width:100%}
  .socials,.help-links{grid-template-columns:1fr!important}
  .testlink{top:52px!important;right:5px!important}
}

@media (max-width:700px) and (orientation:portrait){
  .container>.content{display:block!important}
  .container .sidebar{width:100%!important;padding:8px!important;border-right:0!important;border-bottom:1px dotted #777}
  .container .main-content{width:100%!important;padding:8px 0 0!important}
  .container .menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
  .container .menu li{margin:0!important}
}

@media (max-width:420px){
  .page,.container,.wrapper,.shell,.site,.app{width:100%!important;border-left-width:0!important;border-right-width:0!important}
  .box,.panel,.block,.intro-copy,.final-quiz,.final-result,.links-panel{padding-left:12px!important;padding-right:12px!important}
  .container .menu{grid-template-columns:1fr}
}