@media (max-width: 520px) {
  html.legacy-webview [hidden] {
    display: none !important;
  }

  html.legacy-webview .auth-screen {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 0;
    background: var(--ui-surface, #fff);
  }

  html.legacy-webview .auth-card {
    order: 2;
    flex: 1 1 auto;
    display: block;
    width: 100%;
    min-height: 0;
    padding: 12px 20px 28px;
    border: 0;
  }

  html.legacy-webview .auth-card > div {
    width: 100%;
    max-width: none;
  }

  html.legacy-webview .auth-form {
    display: grid;
    gap: 14px;
  }

  html.legacy-webview .auth-card .field {
    display: grid;
    gap: 4px;
    margin: 0;
  }

  html.legacy-webview .incident-form > *,
  html.legacy-webview .settings-form > * { display: block; margin-bottom: 12px; }
  html.legacy-webview .auth-card input {
    width: 100%;
    min-height: 40px;
    padding: 8px 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--ui-border-strong, #cbd3dd);
    border-radius: 0;
  }

  html.legacy-webview .auth-form .primary-action {
    min-height: 44px;
    margin-top: 4px;
  }

  html.legacy-webview .auth-showcase {
    order: 1;
    display: block;
    min-height: 0;
    margin: 0;
    padding: 58px 20px 10px;
    background: var(--ui-surface, #fff);
  }

  html.legacy-webview .auth-showcase-inner {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    transform: none;
    text-align: left;
  }

  html.legacy-webview .auth-showcase-mark {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border-radius: 10px;
  }

  html.legacy-webview .auth-showcase-copy {
    display: block;
    min-width: 0;
    margin: 0;
  }

  html.legacy-webview .auth-showcase-copy strong,
  html.legacy-webview .auth-showcase-copy span {
    display: block;
    white-space: nowrap;
  }

  html.legacy-webview .auth-showcase-copy strong {
    font-size: 22px;
    line-height: 1.15;
  }

  html.legacy-webview .auth-showcase-copy span {
    margin-top: 3px;
    font-size: 13px;
  }

  html.legacy-webview .auth-product-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 5px;
    color: var(--ui-text-subtle, #6b7280);
    font-size: 9px;
    line-height: 1.3;
  }

  html.legacy-webview .auth-product-meta b { color: inherit; font: inherit; }
  html.legacy-webview .auth-product-meta i { font-style: normal; opacity: .55; }

  html.legacy-webview .app-shell,
  html.legacy-webview .workspace,
  html.legacy-webview main,
  html.legacy-webview .panel,
  html.legacy-webview .operator-layout,
  html.legacy-webview .incident-form { display: block; width: 100%; }

  html.legacy-webview .page {
    display: none;
    width: 100%;
  }

  html.legacy-webview .page.active-page {
    display: block;
  }

  html.legacy-webview body.atol-tsd #operator-page.showing-active > .page-header,
  html.legacy-webview body.atol-tsd #operator-page.showing-active > .operator-steps,
  html.legacy-webview body.atol-tsd #operator-page.showing-active > .operator-layout {
    display: none !important;
  }

  html.legacy-webview body.atol-tsd #operator-page.showing-active > .active-card {
    display: block;
  }

  html.legacy-webview .mobile-header,
  html.legacy-webview .archive-page-header,
  html.legacy-webview .recording-head,
  html.legacy-webview .camera-readiness,
  html.legacy-webview .readiness-body,
  html.legacy-webview .readiness-summary { display: flex; }

  html.legacy-webview .mobile-nav {
    display: flex;
    width: 100%;
    background: var(--ui-surface, #fff);
  }
  html.legacy-webview .mobile-nav .nav-btn { flex: 1 1 0; }

  html.legacy-webview .archive-toolbar {
    display: flex;
    align-items: center;
  }
  html.legacy-webview .archive-search {
    flex: 1 1 auto;
    height: 48px;
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  html.legacy-webview .archive-search input {
    height: 46px;
    min-height: 46px;
  }
  html.legacy-webview .tsd-archive-filter-toggle { flex: 0 0 46px; margin-left: 7px; }
  html.legacy-webview #incident-table-head.tsd-open { display: block !important; }
  html.legacy-webview #incident-table-head.tsd-open > * { display: block; margin-bottom: 7px; }

  html.legacy-webview body.atol-tsd .incident-row,
  html.legacy-webview body.atol-tsd.role-operator .incident-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px 8px;
    padding: 12px 8px;
  }

  html.legacy-webview body.atol-tsd .incident-main {
    order: 1;
    flex: 1 0 100%;
    display: flex;
    align-items: center;
    margin: 0;
  }

  html.legacy-webview body.atol-tsd .incident-record-status {
    order: 4;
    flex: 0 0 auto;
    margin: 0;
  }

  html.legacy-webview body.atol-tsd .incident-zone {
    order: 2;
    flex: 1 1 190px;
    min-width: 0;
    margin: 0;
  }

  html.legacy-webview body.atol-tsd .incident-review-status {
    order: 5;
    flex: 0 0 auto;
    margin: 0;
  }

  html.legacy-webview body.atol-tsd .incident-duration {
    order: 3;
    flex: 0 0 auto;
    margin: 0;
  }

  html.legacy-webview body.atol-tsd .incident-actions {
    display: none;
  }

  html.legacy-webview body.atol-tsd .incident-record-status,
  html.legacy-webview body.atol-tsd .incident-review-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 4px 8px;
    line-height: 18px;
  }

  /* Android 7 WebView (Chrome 52) has no CSS Grid support. */
  html.legacy-webview body.atol-tsd .entity-drawer {
    top: 0;
    bottom: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  html.legacy-webview body.atol-tsd .entity-drawer-header,
  html.legacy-webview body.atol-tsd .entity-drawer-actions {
    flex: 0 0 auto;
  }

  html.legacy-webview body.atol-tsd .entity-drawer-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  html.legacy-webview body.atol-tsd .entity-drawer-actions {
    display: flex;
    flex-wrap: wrap;
  }

  html.legacy-webview body.atol-tsd .entity-drawer-actions button {
    flex: 1 1 130px;
  }

  html.legacy-webview body.atol-tsd .entity-overview,
  html.legacy-webview body.atol-tsd .operation-summary-head {
    display: flex;
    align-items: center;
  }

  html.legacy-webview body.atol-tsd .entity-hero-icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  html.legacy-webview body.atol-tsd .operation-summary-head > div {
    flex: 1 1 auto;
  }

  html.legacy-webview body.atol-tsd .operation-status-stack {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  html.legacy-webview body.atol-tsd .operation-facts,
  html.legacy-webview body.atol-tsd .operation-evidence-facts {
    display: flex;
    flex-wrap: wrap;
  }

  html.legacy-webview body.atol-tsd .operation-facts > div,
  html.legacy-webview body.atol-tsd .operation-evidence-facts > span {
    box-sizing: border-box;
    flex: 1 1 50%;
  }

  html.legacy-webview body.atol-tsd .mobile-app-qr-frame {
    width: 180px;
    height: 180px;
    margin: 0 auto;
  }

  html.legacy-webview body.atol-tsd .mobile-app-install-grid {
    display: block;
  }

  html.legacy-webview body.atol-tsd .mobile-app-details {
    margin-top: 18px;
  }

  html.legacy-webview body.atol-tsd .mobile-app-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  html.legacy-webview body.atol-tsd .mobile-app-heading > div {
    flex: 1 1 190px;
  }

  html.legacy-webview body.atol-tsd .mobile-app-heading > .network-setting-status {
    flex: 0 0 auto;
    margin-top: 10px;
  }

  html.legacy-webview body.atol-tsd .mobile-app-meta {
    display: block;
  }

  html.legacy-webview body.atol-tsd .record-controls {
    background: var(--ui-surface-elevated, #fff);
  }

  html.legacy-webview .record-controls { display: flex; flex-wrap: wrap; }
  html.legacy-webview .record-controls button { flex: 1 1 44%; margin: 3px; }
  html.legacy-webview .record-controls .record-start { flex-basis: 94%; }
}