/* Phone-only presentation. Desktop and print styles remain unchanged. */
@media screen and (max-width: 600px) {
  .top-inner { gap: 10px; padding: 12px 16px; }
  .topnav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; overflow: visible; }
  .topnav .nav { min-width: 0; min-height: 44px; padding: 10px 3px; font-size: 13px; white-space: normal; word-break: keep-all; }
  .topnav .nav.active:after { left: 4px; right: 4px; }
  #login { min-height: 44px; }
  .steps-live { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; gap: 8px; }
  .steps-live button { min-width: 0; min-height: 48px; padding: 10px 8px; white-space: normal; word-break: keep-all; line-height: 1.5; font-size: 13px; }
  .btn, .file-list button, .mapping-field-tabs button { min-height: 44px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; justify-content: center; }
  .actions > .btn { flex: 1 1 140px; }
  .actions > .checkline { flex-basis: 100%; }
  .condition-card .row { flex-wrap: wrap; }
  .explain-btn, .evidence-btn, .field button { min-height: 44px; }
  .upload { padding: 22px 12px; }
  .file-list button { text-align: left; }
  .panel, .tile, .work > *, .mapping-work > *, .finance-card, .document-sheet { min-width: 0; }
  .panel h2, .tile h2, .completion-head h1 { overflow-wrap: anywhere; word-break: keep-all; }
  input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px; }
  .checkline { line-height: 1.7; }
  .document-sheet { padding: 18px 12px; }
  .document-sheet table, .final-table, .credit-message table { width: 100%; table-layout: fixed; }
  .document-sheet td, .final-table td, .credit-message td { padding: 10px 8px; overflow-wrap: anywhere; }
  .document-sheet td:first-child, .final-table td:first-child, .credit-message td:first-child { width: 32%; word-break: keep-all; }
  .preview iframe { height: 380px; height: min(55svh, 440px); }
  dialog { width: calc(100% - 24px); max-width: calc(100% - 24px); max-height: 90vh; max-height: 90dvh; padding: 18px; overflow-x: hidden; overflow-y: auto; overflow-wrap: anywhere; }
  dialog .close { width: 44px; height: 44px; }
  dialog h2 { font-size: 23px; padding-right: 6px; }
  dialog table { width: 100%; table-layout: fixed; }
  dialog td { overflow-wrap: anywhere; }
  .mapping-controls select { max-width: 100%; }
  .mapping-controls label { flex-wrap: wrap; max-width: 100%; }
  .contact-links a { overflow-wrap: anywhere; }
  .packing-list > div { flex-wrap: wrap; gap: 8px; }
  .portal-bar { flex-wrap: wrap; gap: 14px; }
  .portal-bar > div { min-width: 0; flex-wrap: wrap; }
  .portal-text-button { min-height: 44px; }
  .trade-entry { grid-template-columns: minmax(0, 1fr) 100px; padding: 20px; }
  .trade-entry .mascot-art { width: 120px; height: 180px; }
  .entry-copy h2 { font-size: 23px; }
  .history-switch { flex-wrap: wrap; }
  .history-switch button { min-height: 44px; padding: 10px 12px; }
  .dashboard-stats > article > strong { white-space: normal; overflow-wrap: anywhere; }
  .accuracy-stat { gap: 12px; flex-wrap: wrap; }
  .rank-row { flex-wrap: wrap; }
  .rank-company { flex-basis: 120px; }
  .profile-heading { flex-wrap: wrap; }
  .profile-focus > div { min-width: 0; }
  .exchange-table-scroll { -webkit-overflow-scrolling: touch; }
  /* Keep the video available without covering forms or completion buttons. */
  .brand-video, .brand-video.is-mini { position: relative; inset: auto; width: calc(100% - 32px); max-width: 356px; margin: 16px auto 24px; }
  .video-toolbar button { min-width: 44px; min-height: 44px; }
  .video-reopen { position: relative; inset: auto; display: block; margin: 16px auto 24px; min-height: 44px; }
  .video-reopen[hidden] { display: none; }
  footer { padding-bottom: 24px; }
}