/* mobile.css — PWA-only responsive overlay. The desktop styles.css/monitor.css
   are UNCHANGED copies from the Electron app; everything phone-shaped
   lives here so the two codebases stay easy to diff. */

@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; gap: 8px 12px; padding: 10px 14px; }
  .topbar h1 { font-size: 1.05rem; }
  .topbar .subtitle { font-size: .7rem; }
  /* the desktop centers this absolutely — on phones it becomes a normal row */
  .realm-ind {
    position: static; transform: none;
    order: 3; width: 100%; max-width: 100%;
    justify-content: flex-start;
  }

  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    white-space: nowrap;
    flex-wrap: nowrap;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; padding: 10px 14px; }

  main { padding: 12px; }
  .card { padding: 14px; }

  /* connection form collapses to one column */
  form.grid { grid-template-columns: 1fr !important; }
  form.grid .actions { flex-wrap: wrap; }

  .realm-stats { flex-wrap: wrap; gap: 10px; }
  .rstat { min-width: 40%; }

  /* comfortable touch targets */
  button, .tab { min-height: 42px; }
  input, select { min-height: 40px; font-size: 16px; } /* 16px stops iOS zoom-on-focus */
}

/* iOS safe areas (notch / home indicator) in standalone mode */
@supports (padding: env(safe-area-inset-top)) {
  .topbar { padding-top: calc(10px + env(safe-area-inset-top)); }
  main { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}

/* ---- phone type scale ----------------------------------------------------
   The desktop stylesheets use 9–14px information-density type. On a phone
   that reads as tiny, so scale the known classes up (~+15–25%). */
@media (max-width: 760px) {
  body { font-size: 16px; }

  .brand h1 { font-size: 18px; }
  .subtitle { font-size: 13px; }
  .realm-lbl { font-size: 11px; }
  .realm-host { font-size: 15px; }
  .state-pill { font-size: 13px; }

  .card h2 { font-size: 15px; }
  label { font-size: 14px; }
  .status-grid dt { font-size: 14px; }
  .status-grid dd { font-size: 15px; }
  .mono { font-size: 13px; }
  .log { font-size: 13px; }
  .muted-note { font-size: 13px; }

  .rstat-n { font-size: 30px; }
  .rstat-l { font-size: 13px; }

  .mv .note { font-size: 14px; }
  .mv .tile .v { font-size: 28px; }
  .mv .tile .l { font-size: 13px; }
  .mv .group-head .cp { font-size: 15px; }
  .mv .group-head .title { font-size: 13.5px; }
  .mv .group-head .count { font-size: 13.5px; }
  .mv .pty-sys { font-size: 15px; }
  .mv .pty-node { font-size: 13.5px; }
  .mv .pty-role { font-size: 11px; }
  .mv .ctx-tag { font-size: 11px; }
  .mv .ctx-name { font-size: 14px; }
  .mv .cmeta { font-size: 13px; }
  .mv .chip { font-size: 13px; padding: 4px 11px; }
  .mv table.props th { font-size: 12px; }
  .mv table.props td { font-size: 14.5px; padding: 10px 12px; }
  .mv .pname { font-size: 14px; }
  .mv .pdesc { font-size: 13px; }
  .mv .fl { font-size: 15px; }
  .mv .foot-note { font-size: 13px; }
  .mv .sys-card .sname { font-size: 16px; }
  .mv .sys-card .sid { font-size: 12px; }
  .mv .sys-card .scounts { font-size: 13.5px; gap: 14px; }
  .mv .crumb-lnk { font-size: 15px; }
  .mv .go-config { font-size: inherit; }
}

/* ---- tab bar: no hidden tabs on phones -----------------------------------
   Horizontal scrolling hid tabs past the right edge. Wrap into rows instead:
   all six sections always visible, each a comfortable touch target. */
@media (max-width: 760px) {
  .tabs {
    flex-wrap: wrap;
    overflow-x: visible;
    white-space: normal;
    padding: 8px 10px 6px;
    gap: 4px;
  }
  .tab {
    flex: 1 1 30%;
    text-align: center;
    padding: 10px 4px;
    border-radius: 8px;
  }
  /* guard against any wide content (tables, long ids) panning the page */
  main { overflow-x: hidden; }
  .mv table.props { display: block; overflow-x: auto; }
}