/* Small screens keep the original Schlumpy colours, type and table borders. */
.mobile-jump { display: none; }
.more-nav-wrapper:focus-within .more-dropdown,
.user-nav-wrapper:focus-within .user-dropdown,
.more-nav-wrapper.menu-open .more-dropdown,
.user-nav-wrapper.menu-open .user-dropdown { display: block; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible { outline: 2px dotted #ffcc00; outline-offset: 2px; }
@media (max-width: 700px) {
  html { -webkit-text-size-adjust: 100%; }
  body { padding: 4px; }
  #site-shell, #site-shell > tbody > tr > td > table,
  #site-header table, #site-footer table { width: 100% !important; max-width: 100% !important; }
  #site-shell { table-layout: fixed; }
  #site-header { table-layout: fixed; }
  #site-header td { min-width: 0; overflow-wrap: anywhere; }
  #site-brand { table-layout: fixed; }
  #site-brand td:first-child { width: 105px; }
  #site-brand td:last-child { width: auto; }
  #site-brand img { max-width: 95px !important; }
  #site-brand marquee, #site-brand .site-ticker { max-width: 100%; }
  #site-nav > tbody, #site-nav > tbody > tr { display: block; }
  #site-nav > tbody > tr { display: flex; flex-wrap: wrap; gap: 3px; padding: 3px; }
  #site-nav > tbody > tr > td { box-sizing: border-box; flex: 1 0 28%; width: auto; padding: 0; }
  .nav-btn, .more-nav-wrapper .nav-btn { padding: 12px 3px; min-height: 18px; }
  .dropdown-item { padding: 13px 10px; font-size: 12px; }
  .more-dropdown, .user-dropdown { min-width: 145px; left: auto; }
  .more-nav-wrapper:not(.menu-open) .more-dropdown,
  .user-nav-wrapper:not(.menu-open) .user-dropdown { display: none; }
  .mobile-jump { display: block; padding: 10px; font-size: 12px; text-align: center; background: #000011; border-bottom: 1px solid #333366; }
  #site-layout, #site-layout > tbody { display: block; }
  #site-layout > tbody > tr { display: flex; flex-direction: column; }
  #site-content, #site-sidebar { display: block; box-sizing: border-box; width: 100% !important; min-width: 0; }
  #site-content { order: 0; overflow-wrap: anywhere; }
  #site-sidebar { order: 1; margin-top: 10px; }
  #site-spacer { display: none; }
  #site-sidebar table, #site-content table { width: 100% !important; max-width: 100% !important; table-layout: fixed; }
  #site-sidebar a { display: inline-block; padding-top: 7px; padding-bottom: 7px; }
  #site-content td, #site-content th { overflow-wrap: anywhere; min-width: 0; width: auto !important; }
  #site-content img { max-width: 100% !important; height: auto; }
  #site-content iframe, #site-content video, #site-content canvas { max-width: 100% !important; }
  #site-content iframe { width: 100% !important; }
  #site-content pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  #site-content input, #site-content select, #site-content textarea { box-sizing: border-box; max-width: 100%; font-size: 16px !important; }
  #site-content input:not([type=checkbox]):not([type=radio]):not([type=color]), #site-content select { min-height: 38px; }
  #site-content button, #site-content input[type=submit], .hotbar-btn { min-height: 36px; }
  .auth-box { padding: 12px 8px; }
  .auth-box tr, .auth-box td { display: block; width: auto !important; }
  .auth-box td:first-child { text-align: left; padding-bottom: 0; white-space: normal; }
  .mobile-table-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
  #site-content .mobile-table-scroll > table { min-width: 500px; table-layout: auto; }
  .mobile-table-scroll:focus { outline: 1px dotted #ffcc00; }
  /* download category buttons: two to a row, sized to the screen instead of 226px each */
  #site-content a.dl-cat { display: block !important; width: auto !important; box-sizing: border-box; padding: 14px 4px !important; }
  /* forum posts: the fixed column widths beat the 100% table rule, so release them and stack
     the poster column above the post on phones; images then shrink to the post width */
  #site-content colgroup col:first-child { width: 100% !important; }
  #site-content colgroup col + col { width: 0 !important; }
  #site-content table:has(> tbody > tr > td.post-main), #site-content table:has(> tbody > tr > td.post-main) > tbody,
  #site-content tr:has(> td.post-main) { display: block; width: 100% !important; }
  #site-content td.post-user, #site-content td.post-main { display: block; width: 100% !important; box-sizing: border-box; }
  #site-content td.post-user { border-bottom: 1px dotted #333366; padding-bottom: 6px; }
  #site-content .post-body img { max-width: 100% !important; height: auto !important; box-sizing: border-box; }
  #global-hover-card { display: none !important; }
}