/* Phone layout: keep navigation and every table value on the page, not in a sideways pane. */
@media (max-width: 640px) {
  html, body { width: 100%; max-width: 100%; overflow-x: clip; }
  .topbar, main, .footer { min-width: 0; max-width: 100%; }
  .topnav {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    flex: 1 1 100%; width: 100%; gap: 4px; margin: 0;
    overflow: visible; white-space: normal;
  }
  .topnav a {
    display: flex; align-items: center; justify-content: center;
    min-width: 0; min-height: 44px; padding: 6px 3px;
    text-align: center; white-space: normal; overflow-wrap: anywhere;
  }
  .search { min-width: 0; }
  .search input { min-width: 0; width: 0; font-size: 16px; }
  .search button { min-height: 44px; }
  main > *, .note, .sec-row, .overview, .cards, .card { min-width: 0; max-width: 100%; }
  .note, .card, .kv .val { overflow-wrap: anywhere; }

  /* mobile-tables.js supplies the existing header text as each cell's label. */
  main .tblscroll { max-width: 100%; overflow-x: visible; }
  main table.tbl, main .tblscroll > table.tbl,
  main .tblscroll.narrow > table.tbl {
    display: block; width: 100%; min-width: 0; border: 0; background: transparent;
  }
  main table.tbl thead {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  main table.tbl tbody { display: grid; gap: 10px; min-width: 0; }
  main table.tbl tbody tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0; overflow: hidden; background: var(--panel);
    border: 1px solid var(--line); border-radius: var(--r);
  }
  main table.tbl tbody td,
  main table.tbl tbody td.num,
  main table.tbl tbody td.right {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 3px; min-width: 0; width: auto; padding: 8px 10px;
    border-bottom: 1px solid var(--line); text-align: left;
    white-space: normal; overflow-wrap: anywhere; word-break: break-word;
  }
  main table.tbl tbody td:first-child,
  main table.tbl tbody td[colspan] { grid-column: 1 / -1; }
  main table.tbl tbody td::before {
    content: attr(data-mobile-label); display: block; color: var(--mut);
    font: 600 10px/1.35 system-ui, sans-serif; letter-spacing: .04em;
    text-transform: uppercase;
  }
  main table.tbl tbody td[data-mobile-label=""]::before { display: none; }
  main table.tbl tbody td a.hash { white-space: normal; overflow-wrap: anywhere; }
  main pre, main code { max-width: 100%; overflow-wrap: anywhere; }
  main pre { white-space: pre-wrap; }
}
@media (max-width: 360px) {
  .topnav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}