/* Compact header; unfolded touch screens show every section in three rows. */
.top-tools,.top-session {display:contents}
@media screen {
  #navTabs {display:flex;flex-wrap:wrap;align-items:stretch;gap:4px;overflow:visible;width:100%;max-width:100%;padding-bottom:0}
  #navTabs button {flex:0 0 auto;max-width:100%;white-space:normal;min-width:0}
  #navTabs .nav-overflowed {display:none!important}
  #navTabs #navMore {font-weight:700}
  .top .page-scale-button {display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:82px;white-space:nowrap;line-height:1.2;touch-action:manipulation}
  .page-scale-button svg {width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;flex:none}
  .page-scale-button span {font-variant-numeric:tabular-nums}
}
.page-control-safe-area {position:fixed;visibility:hidden;pointer-events:none;padding:var(--safe-area-inset-top,env(safe-area-inset-top,0px)) var(--safe-area-inset-right,env(safe-area-inset-right,0px)) var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)) var(--safe-area-inset-left,env(safe-area-inset-left,0px))}
@media screen and (min-width:1101px) {
  .top {grid-template-columns:auto auto auto auto auto auto 1fr auto auto auto auto auto;
    grid-template-areas:"title regions lock slock clock shend . sound scale conn who logout" "nav nav nav nav nav nav nav nav nav nav nav nav"}
  #pageScale {grid-area:scale}
  #navTabs button {padding:6px 8px}
}
@media screen and (max-width:1100px), screen and (any-pointer:coarse) {
  #pageScale {order:7;min-height:44px}
  #conn {order:8}
  #logout {order:9}
  #navTabs {order:10}
  #navTabs button {min-height:44px;padding:8px 10px;font-size:14px}
}
@media screen and (max-width:1100px), screen and (max-width:1600px) and (any-pointer:coarse) {
  .top {display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"regions session" "tools tools" "nav nav";align-items:center;gap:6px;padding:6px 10px}
  html.in-app .top {padding:calc(6px + var(--safe-area-inset-top,env(safe-area-inset-top,0px))) calc(10px + var(--safe-area-inset-right,env(safe-area-inset-right,0px))) 6px calc(10px + var(--safe-area-inset-left,env(safe-area-inset-left,0px)))!important}
  .top h1,.top .spacer,.top .who,.top .top-break {display:none}
  #regionTabs {grid-area:regions;flex-wrap:nowrap;min-width:0}
  .top-tools {grid-area:tools;display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0}
  .top-session {grid-area:session;display:flex;align-items:center;gap:12px;justify-self:end}
  .top-session #conn {margin:0;flex:none}
  .top-session #logout {margin:0}
  .top .btn,#regionTabs button {min-height:44px;padding:8px 10px;font-size:14px}
  #archLock .lk-long,#schLock .lk-long,#cardLock .lk-long {display:none}
  #navTabs {grid-area:nav;min-width:0}
}
@media screen and (max-width:599px) {
  .top,.top-tools {gap:4px}
  .top-tools .btn {min-height:40px;padding:6px 8px;font-size:13px}
  .top-tools #pageScale {min-height:40px;padding:6px 8px}
}
@media screen and (min-width:1101px) and (max-width:1600px) and (any-pointer:coarse) {
  .top {grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"regions tools session" "nav nav nav"}
  .top-tools {justify-content:flex-end}
}
#navTabs.nav-three-rows {display:flex;flex-direction:column;gap:4px}
#navTabs .nav-row {display:flex;align-items:stretch;gap:4px;min-width:0;width:100%}
#navTabs.nav-three-rows button {flex:1 1 auto;min-width:min-content;min-height:44px;padding:6px 3px;font-size:13px;line-height:1.25;overflow-wrap:normal}
@media screen and (max-width:649px) {
  #navTabs .nav-row {gap:2px}
  #navTabs.nav-three-rows button {padding-inline:2px;font-size:12px}
}
.page-control-popover {position:fixed;z-index:90;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden;overscroll-behavior:contain;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);box-shadow:0 10px 32px #123b4a33;font-size:14px;zoom:1}
.page-control-popover[hidden],.page-scale-button[hidden] {display:none!important}
.page-control-popover>header {display:flex;align-items:center;gap:12px;justify-content:space-between;margin-bottom:10px;flex:none}
.page-control-popover>header strong {font-size:15px;line-height:1.3}
.page-control-popover>header>.btn {min-width:40px;min-height:40px;padding:4px;font-size:22px;flex:none}
.page-control-content {min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.page-menu-popover {background:var(--brand);color:var(--brand-ink);border-color:#ffffff40;padding:10px;box-shadow:0 12px 32px #08232d66}
.page-menu-popover>header {margin:0 0 6px;padding:0 2px 6px;border-bottom:1px solid #ffffff26}
.page-menu-popover .page-control-content {display:flex;flex-direction:column;gap:4px;padding:2px;scrollbar-color:#ffffff70 transparent}
.page-menu-popover .btn {flex:none;min-height:44px;white-space:normal;text-align:left;line-height:1.3;padding:10px 12px;border-color:transparent;background:transparent;color:inherit}
.page-menu-popover .btn:hover,.page-menu-popover [aria-current=page] {background:#ffffff29;border-color:#ffffff40}
.page-menu-popover>header>.btn {min-width:44px;text-align:center;border-color:#ffffff40;padding:4px}
.page-menu-popover .btn:focus-visible {outline-color:#a3d5ec;outline-offset:-2px}
@media print {#pageScale,#navMore,.page-control-popover {display:none!important}}