/* Phone layout from TestFlight feedback. Desktop layout stays unchanged. */
.app-only-nav, .login-title { display: none !important; }
.native-app .login-title { display: block !important; }
.native-app .web-login-title { display: none !important; }
.native-app .app-only-nav { display: flex !important; }
.credit:not(button) small { display: none; }
.stats .stat-tile { cursor: default; }
.native-app .stats .stat-tile, .native-app .credit { cursor: pointer; }
.stat-tile { display: flex; align-items: center; gap: 14px; padding: 20px; border: 1px solid #dfe7ee; border-radius: 12px; background: #fff; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.stat-tile:focus-visible, .credit:focus-visible { outline: 3px solid #64b5e4; outline-offset: 3px; }
.credit { appearance: none; border: 0; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.credit small { display: block; margin-top: 5px; opacity: .85; }
.feedback-dialog { width: min(520px, calc(100vw - 24px)); max-height: min(80vh, 700px); padding: 0; border: 0; border-radius: 18px; box-shadow: 0 25px 80px #0a253e55; }
.feedback-dialog .feedback-list { padding: 0 22px; }
.feedback-dialog::backdrop { background: #071a2d99; }
.feedback-dialog .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.feedback-dialog h2 { margin: 0; }
.feedback-dialog .close { border: 0; background: transparent; font-size: 28px; cursor: pointer; }
.feedback-list { display: grid; gap: 10px; margin: 18px 0; max-height: 50vh; overflow-y: auto; }
.feedback-list a, .feedback-list > p { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px; border: 1px solid #dce9f2; border-radius: 10px; color: #163a55; text-decoration: none; }
.feedback-list a { flex-direction: column; align-items: flex-start; }
.feedback-list small { color: #61788d; }
.more-page { display: grid; gap: 12px; padding: 22px; }
.more-page a { display: block; padding: 14px; border: 1px solid #dce9f2; border-radius: 10px; text-decoration: none; color: #163a55; }
.login-title { margin: 0 0 8px; font-size: clamp(21px, 5vw, 30px); line-height: 1.2; }
@media (max-width: 760px) {
  html.native-app, .native-app body { max-width: 100%; overflow-x: clip; }
  .native-app body.portal-readable { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
  .native-app body.portal-readable main { width: 100%; max-width: 100%; min-width: 0; padding: 0 12px 24px; overflow-x: clip; }
  .native-app .sidebar { position: fixed !important; inset: auto 0 0 !important; z-index: 100; display: block !important; width: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 5px 4px calc(5px + env(safe-area-inset-bottom)) !important; border-radius: 0 !important; }
  .native-app .sidebar > .brand, .native-app .sidebar-bottom { display: none !important; }
  .native-app .sidebar nav { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100% !important; overflow: visible !important; gap: 2px !important; }
  .native-app .sidebar nav a { display: none !important; min-width: 0 !important; min-height: 58px; padding: 6px 2px !important; white-space: normal !important; text-align: center; font-size: 11px !important; line-height: 1.2; }
  .native-app .sidebar nav a[data-portal-nav="overview"], .native-app .sidebar nav a[data-portal-nav="projects"], .native-app .sidebar nav a[href="billing.html"], .native-app .sidebar nav a[data-portal-nav="news"], .native-app .sidebar nav a[data-portal-nav="more"] { display: flex !important; flex-direction: column; align-items: center; justify-content: center; }
  .native-app .sidebar nav a > span { display: block !important; font-size: 20px; line-height: 1; }
  .native-app .account-banner, .native-app .panel, .native-app .stats, .native-app .table-wrap, .native-app .portal-projects table { max-width: 100%; min-width: 0; }
  .native-app .stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .native-app .stats .stat-tile { min-width: 0; padding: 14px; }
  .native-app .stats .stat-tile strong { font-size: 23px; }
  .native-app .portal-projects .table-wrap { overflow-x: clip; }
  .native-app .portal-projects table, .native-app .portal-projects tbody, .native-app .portal-projects tbody tr { width: 100%; min-width: 0 !important; }
  .native-app .portal-projects tbody tr { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "project" "status" "manuals" "due" "notes" "actions" !important; }
  .native-app .portal-projects tbody td { min-width: 0; overflow-wrap: anywhere; }
  .native-app .portal-projects .project-actions { flex-wrap: wrap !important; }
  .native-app .portal-projects .panel-head, .native-app .portal-projects .tools { min-width: 0; flex-wrap: wrap; }
  .native-app .portal-projects .tools > * { max-width: 100%; }
  .native-app .auth-shell { display: block; min-height: 100dvh; }
  .native-app body.login-readable:not(.signup-mode) { height: 100dvh; overflow: hidden; }
  .native-app body.login-readable:not(.signup-mode) .auth-shell { height: 100dvh; overflow: hidden; }
  .native-app .auth-brand { min-height: 0 !important; padding: 14px 18px !important; }
  .native-app .auth-brand > div, .native-app .auth-brand ul { display: none !important; }
  .native-app .auth-panel { min-height: calc(100dvh - 58px); padding: 12px 14px 40px !important; align-items: center; }
  .native-app .auth-card { width: min(440px, 100%); padding: 18px !important; box-shadow: none; }
  .native-app .auth-card .sub { margin-bottom: 12px; }
  .native-app .auth-card .tabs { margin-bottom: 12px; }
  .native-app .auth-card form { gap: 10px; }
  .native-app .auth-card input:not([type=checkbox]) { padding: 10px; }
  .native-app .auth-card .divider { height: 24px; }
  .native-app .auth-card .legal { margin: 8px 0 0; }
  .native-app .auth-panel .back { position: static; display: block; margin: 12px auto 0; text-align: center; }
  .native-app body.intake-workflow { overflow-x: clip; }
  .native-app body.intake-workflow main { width: 100% !important; max-width: 100%; overflow-x: clip; }
  .native-app .demo-topbar > div, .native-app .demo-topbar #exit-demo { display: none !important; }
  .native-app .demo-topbar { justify-content: center; }
  .native-app .demo-hero > div { display: none; }
  .native-app .demo-hero { display: block; padding: 12px !important; }
  .native-app .demo-hero aside { padding: 10px 14px; }
  .native-app .demo-hero aside #save-note, .native-app .demo-hero aside .checker-version { display: none; }
  .native-app .steps { display: flex !important; gap: 6px; overflow-x: auto; max-width: 100%; padding: 8px 12px !important; scroll-snap-type: x proximity; }
  .native-app .step-nav-item { flex: 0 0 auto; min-width: 68px; scroll-snap-align: start; }
  .native-app .steps .step-nav-button { min-width: 68px; padding: 8px !important; }
  .native-app .steps .step-nav-button small { display: none !important; }
  .native-app .form-actions { flex-wrap: wrap; gap: 8px; }
  .native-app .form-actions #next { margin-left: auto; min-width: 125px; }
  .native-app .form-grid, .native-app .form-grid.two, .native-app .form-grid.three, .native-app .form-grid.four { min-width: 0; }
  .native-app .step-panel { overflow-x: clip; }
}