/* SEO411 app: phone rules (0.5.0). Everything here applies at 640px and under only, so nothing
   changes on the desktop. The Cards or Table switch and the bottom bar are hidden above that width. */
.e8-pwa-view { display: none; }
.e8-pwa-bar { display: none; }
.e8-pwa-steps { margin: 12px 0; padding-left: 22px; }
.e8-pwa-steps li { margin: 0 0 10px; line-height: 1.5; }
.e8-pwa-version { margin-top: 18px; }
.e8-pwa-release { margin-bottom: 12px; }
.e8-pwa-release .e8-card-head h3 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.e8-pwa-release-title { font-weight: 600; margin: 0 0 8px; }
.e8-pwa-release-items { margin: 0; padding-left: 18px; }
.e8-pwa-release-items li { margin: 0 0 6px; }

@media (max-width: 640px) {
  /* thumb sized controls; 16px type so the iPhone does not zoom on focus */
  .e8-root input:not([type=checkbox]):not([type=radio]), .e8-root select, .e8-root textarea { min-height: 40px; font-size: 16px; }
  .e8-root .e8-btn { min-height: 40px; font-size: 16px; }
  .e8-root .e8-btn-sm { min-height: 40px; font-size: 15px; }
  .e8-root .e8-icon-btn, .e8-root .e8-avatar { width: 40px; height: 40px; }
  .e8-root .e8-menu a, .e8-root .e8-menu button { min-height: 40px; font-size: 16px; }
  .e8-root .e8-table-tools input[type=search] { max-width: 100%; }

  /* the bottom bar */
  .e8-content { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .e8-pwa-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: var(--e8-glass); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-top: 1px solid var(--e8-line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); }
  .e8-pwa-bar a, .e8-pwa-bar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 48px; padding: 4px 2px; border: 0; border-radius: 10px; background: none; color: var(--e8-muted); font: 600 11px var(--e8-font); text-decoration: none; cursor: pointer; }
  .e8-pwa-bar a .e8-ic, .e8-pwa-bar button .e8-ic { width: 22px; height: 22px; }
  .e8-pwa-bar a.is-active { color: var(--e8-side-active); background: linear-gradient(90deg, rgba(82,104,169,.12), rgba(217,0,0,.06)); }
  .e8-shell.nav-open ~ .e8-pwa-bar, .e8-shell.is-client-view ~ .e8-pwa-bar { display: none; }
  .e8-side { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  .e8-toasts { bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }

  /* the Cards or Table switch */
  .e8-pwa-view { display: inline-flex; }
  .e8-table-tools .e8-pwa-view { margin-left: auto; }
  .e8-pwa-view + .e8-table-wrap { margin-top: 8px; }

  /* tables as cards: one card per row, the first column as the title, every other cell labeled */
  .e8-table-wrap:not(.e8-pwa-astable) .e8-pwa-cardable { display: block; }
  .e8-table-wrap:not(.e8-pwa-astable) .e8-pwa-cardable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .e8-table-wrap:not(.e8-pwa-astable) .e8-pwa-cardable tbody, .e8-table-wrap:not(.e8-pwa-astable) .e8-pwa-cardable tbody tr { display: block; }
  .e8-table-wrap:not(.e8-pwa-astable) .e8-pwa-cardable tbody tr { padding: 10px 14px; border-bottom: 1px solid var(--e8-line); }
  .e8-table-wrap:not(.e8-pwa-astable) .e8-pwa-cardable tbody tr:last-child { border-bottom: 0; }
  .e8-table-wrap:not(.e8-pwa-astable) .e8-pwa-cardable tbody tr:hover td { background: none; }
  .e8-table-wrap:not(.e8-pwa-astable) .e8-pwa-cardable td { display: grid; grid-template-columns: minmax(96px, 38%) minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 5px 0; border: 0; text-align: left; }
  .e8-table-wrap:not(.e8-pwa-astable) .e8-pwa-cardable td::before { content: attr(data-l); font-size: 12px; font-weight: 600; color: var(--e8-muted); }
  .e8-table-wrap:not(.e8-pwa-astable) .e8-pwa-cardable td:first-child { display: block; font-weight: 700; font-size: 15px; color: var(--e8-heading); padding: 0 0 6px; }
  .e8-table-wrap:not(.e8-pwa-astable) .e8-pwa-cardable td:first-child::before { content: none; }
  .e8-table-wrap:not(.e8-pwa-astable) .e8-pwa-cardable td.num { text-align: left; }
  .e8-table-wrap:not(.e8-pwa-astable) .e8-pwa-cardable td.url { max-width: none; white-space: normal; overflow: visible; word-break: break-all; }
  .e8-table-wrap:not(.e8-pwa-astable) .e8-pwa-cardable td.e8-pwa-acts { grid-template-columns: minmax(0, 1fr); padding-top: 8px; }
  .e8-table-wrap:not(.e8-pwa-astable) .e8-pwa-cardable td.e8-pwa-acts::before { content: none; }
  .e8-table-wrap:not(.e8-pwa-astable) .e8-pwa-cardable td.e8-pwa-acts .e8-btn { margin: 0 6px 6px 0; }
  .e8-table-wrap:not(.e8-pwa-astable) .e8-pwa-cardable td[colspan] { display: block; }
  .e8-table-wrap:not(.e8-pwa-astable) .e8-pwa-cardable td[colspan]::before { content: none; }
  .e8-table-wrap:not(.e8-pwa-astable) .e8-pwa-cardable .e8-locked-rows { display: none; }

  /* the table view of a card table, and wider tables: scroll sideways, first column and header held */
  .e8-table-wrap.e8-pwa-astable, .e8-table-wrap.e8-pwa-wide { overflow-x: auto; -webkit-overflow-scrolling: touch; max-height: 80vh; }
  .e8-table-wrap.e8-pwa-astable .e8-table th, .e8-table-wrap.e8-pwa-wide .e8-table th { position: sticky; top: 0; z-index: 2; }
  .e8-table-wrap.e8-pwa-astable .e8-table th:first-child, .e8-table-wrap.e8-pwa-wide .e8-table th:first-child { left: 0; z-index: 3; }
  .e8-table-wrap.e8-pwa-astable .e8-table td:first-child, .e8-table-wrap.e8-pwa-wide .e8-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--e8-card); box-shadow: 1px 0 0 var(--e8-line); }
  .e8-table-wrap.e8-pwa-astable .e8-table td, .e8-table-wrap.e8-pwa-wide .e8-table td { white-space: nowrap; }
}