/* GemSignal Mobile/PWA UX — staged 2026-09-18 */
:root{--mobile-tab-h:68px}
html{scroll-padding-bottom:calc(var(--mobile-tab-h) + env(safe-area-inset-bottom))}
body{overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent}
#mobile-tabbar,#mobile-menu-button{display:none}
#mobile-more-sheet:not([open]){display:none}
/* A showModal() dialog must never be display:none: it would still make the page inert. */
#mobile-more-sheet[open]{display:block}

@media(max-width:760px){
  body{padding-bottom:calc(var(--mobile-tab-h) + env(safe-area-inset-bottom))}
  body.motion-off .oracle-field{display:none}
  .sidebar{
    position:sticky;top:0;width:100%;height:auto;z-index:24;
    padding:calc(9px + env(safe-area-inset-top)) 12px 9px;
    display:flex;flex-direction:row;align-items:center;justify-content:space-between;
    border-right:0;border-bottom:1px solid var(--line);
    background:#07100df2;backdrop-filter:blur(12px)
  }
  .sidebar>.eyebrow,.sidebar .nav-label,.sidebar nav,.sidebar-bottom{display:none!important}
  #mobile-menu-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px}
  .brand{font-size:19px}.gem{font-size:23px}
  .workspace{margin-left:0}
  .workspace>header{
    position:sticky;top:calc(62px + env(safe-area-inset-top));z-index:23;
    height:48px;padding:0 12px;background:#07100de8;backdrop-filter:blur(12px)
  }
  .breadcrumb{display:none}.top-actions{width:100%;justify-content:flex-end;gap:8px}
  .top-actions button{min-height:40px;padding:7px 10px}
  .preview-banner{padding:10px 12px}
  main{padding:16px 10px calc(20px + env(safe-area-inset-bottom))}
  .heading{gap:4px}.heading>button{width:100%;min-height:46px;margin-bottom:14px}
  .filters{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;padding:10px;gap:8px}
  .filters .search{grid-column:1/-1;min-width:0;min-height:46px}
  .filters>label{min-width:0}.filters>label select{width:100%}
  .filters>button{width:100%;min-height:44px;height:auto}
  input,select,textarea{font-size:16px!important;min-height:44px}
  button,.nav-item{min-height:44px}
  .tiny-button{min-height:40px;padding:8px 10px}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .metric{padding:12px}.metric strong{font-size:21px}
  .columns,.research-grid,.status-grid,.gs-call-grid{grid-template-columns:1fr!important}
  .panel{margin-bottom:12px;border-radius:9px}
  .panel-heading{padding:12px}.panel-body{padding:14px}
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  table{min-width:max-content}
  th,td{padding:11px 12px}
  .table-wrap th:first-child,.table-wrap td:first-child{
    position:sticky;left:0;z-index:1;background:#081710
  }
  dialog{
    width:calc(100vw - 12px)!important;
    max-width:none!important;
    max-height:calc(100dvh - 12px)!important;
    margin:6px;border-radius:12px
  }
  dialog form,dialog .body{padding:16px}
  .dossier-grid{grid-template-columns:1fr}
  #terminal-form{gap:8px;padding:10px}#terminal-form button{min-width:64px}
  #log{height:min(26vh,180px)}
  #toast{bottom:calc(var(--mobile-tab-h) + env(safe-area-inset-bottom) + 10px)}

  #mobile-tabbar{
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    display:grid;grid-template-columns:repeat(5,1fr);
    min-height:var(--mobile-tab-h);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line);
    background:#06100def;backdrop-filter:blur(16px)
  }
  #mobile-tabbar button{
    min-width:0;min-height:52px;padding:5px 3px;border:0;background:transparent;
    color:#9bb4a6;border-radius:8px;font-size:10px;line-height:1.15
  }
  #mobile-tabbar button .mi{display:block;font-size:18px;line-height:1.2;margin-bottom:2px}
  #mobile-tabbar button.active{color:var(--green);background:#173425}
  #mobile-more-sheet{
    width:calc(100vw - 12px)!important;max-width:none!important;
    margin:auto 6px max(6px,env(safe-area-inset-bottom));max-height:78vh!important;max-height:78dvh!important;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch
  }
  #mobile-more-sheet .mobile-sheet-body{padding:14px}
  #mobile-more-sheet .mobile-sheet-head{
    position:sticky;top:0;z-index:2;background:#09150f;
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:14px;border-bottom:1px solid var(--line)
  }
  #mobile-more-links{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  #mobile-more-links a{
    display:flex;align-items:center;gap:8px;min-height:48px;padding:10px;
    border:1px solid var(--line);border-radius:8px;text-decoration:none;color:var(--text)
  }
  #mobile-install{width:100%;margin:12px 0 0;display:none}
  #mobile-ios-install{display:none;color:var(--muted);font-size:12px;margin:10px 0 0}
}
@media(max-width:420px){
  .filters{grid-template-columns:1fr}
  .filters .search{grid-column:auto}
  .metrics{grid-template-columns:1fr 1fr}
  #mobile-more-links{grid-template-columns:1fr}
}
@media(display-mode:standalone) and (max-width:760px){
  .sidebar{padding-top:calc(9px + env(safe-area-inset-top))}
}

@media(max-width:760px) and (prefers-reduced-motion:reduce){.oracle-field{display:none!important}}

/* Native horizontal scrolling is isolated to the intended panel, never the page. */
.vi-pipeline{max-width:100%;touch-action:pan-x pan-y;overscroll-behavior-x:contain;scrollbar-width:thin}
.vi-grid>*{min-width:0}
.gs-monitor-control{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 18px}
.gs-monitor-switch{display:inline-flex;gap:12px;align-items:center;min-height:44px;touch-action:manipulation}
.gs-monitor-track{display:inline-flex;align-items:center;width:44px;height:24px;padding:3px;background:#293b32;border:1px solid var(--line);border-radius:20px;flex-shrink:0}
.gs-monitor-knob{display:block;width:16px;height:16px;border-radius:50%;background:var(--muted);transition:transform .15s}
.gs-monitor-switch[aria-checked="true"] .gs-monitor-track{background:#234e35}
.gs-monitor-switch[aria-checked="true"] .gs-monitor-knob{background:var(--green);transform:translateX(18px)}
.gs-monitor-status{font-size:12px;color:var(--muted)}
@media(prefers-reduced-motion:reduce){.gs-monitor-knob{transition:none}}

#mobile-more-links a[aria-current=page]{border-color:#5a9d76;background:#153823;color:var(--green)}

/* Informational toast text must not intercept navigation or touch gestures. */
#toast{pointer-events:none}