/* Shared phone header. The plan table and its phone cards live in plan-table.css. */

@media (max-width: 720px) {
  .hai-page .wg-topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px 8px;
  }

  .hai-page .wg-topbar-l { display: contents; }
  .hai-page .wg-brand {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    white-space: nowrap;
  }
  .hai-page .wg-brand-name { display: inline !important; white-space: nowrap; }
  .hai-page .wg-topbar-r {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .hai-page .wg-nav-tabs {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    margin: 0;
    display: flex;
    flex: none;
    flex-wrap: wrap;
    overflow: visible;
    gap: 0 2px;
  }
  .hai-page .wg-nav-tab { flex: 0 0 auto; white-space: nowrap; }
  .hai-page .wg-topbar-l::after { content: none; }
}

@media (max-width: 640px) {
  .hai-tested-table { min-width: 0 !important; }
  .hai-tested-table thead { display: none; }
  .hai-tested-table tbody, .hai-tested-table tr, .hai-tested-table td { display: block; width: 100%; }
  .hai-tested-table tr { border: 1px solid hsl(var(--border)); margin-bottom: 12px; }
  .hai-tested-table td { padding: 8px 10px !important; white-space: normal !important; }
  .hai-tested-table td::before { content: attr(data-label); display: block; font-weight: 600; }
}

/* s201 brand (Ray picked option B): the H monogram replaces the "hp" text mark. The glyph takes the mark's
   own text colour (currentColor), so light/dark themes and the SPI band carry over unchanged. */
span.wg-brand-mark.wg-brand-glyph::after { display: none; }
span.wg-brand-mark.wg-brand-glyph svg { width: 64%; height: 64%; display: block; }