/* Shared small-screen layout. Document pages and print exports keep their size. */
@media screen and (max-width: 900px) {
  body.vp-workspace :is(main, .content, .section, .card, .field, fieldset,
    .grid, .form-grid, .med-settings, .med-result, .mc-tool, .mc-phase,
    .study-factor, .kpi-widget, .bit-photo-row) { min-width: 0; }
  body.vp-workspace .content :is(.table-wrap, .study-table-wrap, .matrix-results,
    .matrix-record-corrections, .admin-samples, .med-loaded-table, .kpi-chart-scroll) {
    min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  body.vp-workspace .content :is(.card-title-row, .med-result-title, .med-lot-head,
    .med-timer, .ari-group-head, .direct-heading, .intake-workflow) { flex-wrap: wrap; }
  body.vp-workspace .content :is(.actions, .med-work-actions, .mc-toolbar) {
    flex-wrap: wrap; min-width: 0;
  }
  body.vp-workspace .content :is(.actions, .card-title-row, .mc-toolbar) > * {
    max-width: 100%; min-width: 0;
  }
  body.vp-workspace .content :is(.btn, .button) { white-space: normal; overflow-wrap:break-word; }
  body.vp-workspace .content :is(h2, h3, h4, p, label, legend, .help) { overflow-wrap:break-word; }
  body.vp-workspace .content :is(.mc-storage-grid, .mc-tool-selector > div,
    .kpi-week-choices, .gmp-document-cards) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  }
  body.vp-workspace .flowmaker-frame { min-height: 640px; height: 85dvh; }
}

@media screen and (max-width: 760px) {
  html { -webkit-text-size-adjust: 100%; scroll-padding-top: 12px; }
  #authScreen {
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
      max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }
  #authScreen .auth-panel { min-width: 0; width: min(460px, 100%); }
  body.vp-workspace.authenticated > main { min-width: 0; width: 100%; padding-top: 8px; }
  body.vp-workspace.authenticated #workspaceBar {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px;
    width: calc(100% - 24px); padding: 10px;
  }
  #workspaceBar #vpNavToggle { grid-column: 1; grid-row: 1; }
  #workspaceBar .workspace-brand {
    grid-column: 2; grid-row: 1; width: min(185px, 100%); max-width: 100%; justify-self: end;
  }
  #workspaceBar .workspace-account-actions {
    grid-column: 1 / -1; grid-row: 2; display: flex; gap: 10px; width: 100%; margin: 0;
  }
  #workspaceBar .workspace-account { flex: 1; max-width: none; min-width: 0; padding: 0; }
  #workspaceBar .workspace-account b { font-size: 12px; }
  #workspaceBar .workspace-account small { font-size: 11px; }
  #workspaceBar .workspace-search {
    grid-column: 1 / -1; grid-row: 3; min-width: 0; width: 100%; margin: 0;
  }
  body.vp-workspace #workspaceBar :is(#customizeEnvironment, #vpNavToggle, #logoutBtn) {
    min-height: 44px; min-width: 44px; padding: 10px;
  }
  body.vp-workspace.authenticated .content {
    padding: 6px max(12px, env(safe-area-inset-right))
      max(32px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }
  body.vp-workspace .workspace-context { width: calc(100% - 24px); gap: 10px; }
  body.vp-workspace .workspace-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.vp-workspace .content .card { padding: 16px; }
  body.vp-workspace .content :is(.grid.cols-2, .grid.cols-3, .form-grid,
    .form-grid.three, .check-grid, .mc-fields, .admin-edit-fields,
    .study-factor, .med-settings, .ari-settings) { grid-template-columns: minmax(0, 1fr); }
  body.vp-workspace .content :is(.form-grid, .med-settings) > .wide { grid-column: 1 / -1; }
  body.vp-workspace :is(.content, dialog, .modal, .med-dialog, #authScreen, #workspaceBar)
    :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]) {
    min-width: 0; max-width: 100%; min-height: 44px;
    font-size: max(16px, calc(16px * var(--ui-scale, 1))) !important;
  }
  body.vp-workspace #workspaceSearch { font-size: 16px !important; }
  #authScreen .field input.entry { font-size: max(16px, calc(16px * var(--ui-scale, 1))); }
  body.vp-workspace .content :is(.btn, .button),
  body.vp-workspace dialog :is(.btn, .button),
  body.vp-workspace .sidebar :is(button, .btn) { min-height: 44px; }
  body.vp-workspace .sidebar { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  body.vp-workspace .content .actions > :is(.btn, .button) { flex: 1 1 145px; }
  body.vp-workspace .vp-module-actions .btn { flex: 1 1 auto; }
  body.vp-workspace .vp-module-account { font-size: 12px; }
  body.vp-workspace .content :is(.table-wrap, .study-table-wrap, .matrix-results):focus-visible {
    outline: 2px solid var(--module-accent, var(--blue)); outline-offset: 2px;
  }
  body.vp-workspace .content .card > table { display: block; min-width: 0; max-width: 100%; overflow-x: auto; }
  body.vp-workspace #section-med > .med-workflow,
  body.vp-workspace .section .mc-steps {
    display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%;
    top: 6px; padding: 7px; gap: 7px; scroll-padding-inline: 7px;
    overscroll-behavior-x: contain; scrollbar-width: thin;
  }
  body.vp-workspace #section-med .med-workflow > button,
  body.vp-workspace .section .mc-steps > button {
    flex: 0 0 auto; min-width: 135px; max-width: 200px; min-height: 48px;
    padding: 9px 12px; font-size: 13px; white-space: normal;
  }
  body.vp-workspace .section .mc-phase,
  body.vp-workspace #section-med :is(#medProductCard, #medAttributeSettings, #medLots, #medResults) {
    scroll-margin-top: 92px;
  }
  body.vp-workspace .med-result-title { align-items: flex-start; padding: 15px; gap: 12px; }
  body.vp-workspace .med-lot-body { padding: 14px; }
  body.vp-workspace .med-chart-expanded { padding: 12px; max-width: 100%; }
  body.vp-workspace :is(.med-chart, .study-charts figure) { overflow-x: auto; overscroll-behavior-x: contain; }
  body.vp-workspace .med-chart > svg, body.vp-workspace .study-charts figure > svg { min-width: 480px; height: auto; }
  body.vp-workspace #section-bitacora .bit-photo-row { padding: 14px; gap: 12px; grid-template-columns: minmax(0, 1fr); }
  body.vp-workspace #section-bitacora .bit-photo-row img { height: auto; max-height: 300px; }
  body.vp-workspace #section-bitacora .bit-layout-tools { padding: 14px; gap: 14px; }
  body.vp-workspace .direct-workspace { padding: 12px; max-height: 70dvh; }
  body.vp-workspace .direct-toolbar { flex-wrap: wrap; gap: 8px; padding: 12px; }
  body.vp-workspace .direct-toolbar select { max-width: 100%; }
  body.vp-workspace .gmp-proof { padding: 10px; margin: 10px; }
  body.vp-workspace :is(dialog, .modal) {
    box-sizing: border-box; min-width: 0; max-width: calc(100vw - 20px);
    max-height: calc(100dvh - 24px); overflow: auto;
  }
  body.vp-workspace :is(.modal-backdrop, .med-dialog) { padding: 10px; }
  body.vp-workspace :is(.modal, dialog.matrix-dialog, #productionDialog, #environmentDialog) { padding: 16px; }
  body.vp-workspace :is(.med-dialog-head, .dialog-head, .admin-edit-head, .admin-edit-foot) {
    flex-wrap: wrap; gap: 10px; padding: 14px;
  }
  body.vp-workspace .med-dialog-card { min-width: 0; max-height: calc(100dvh - 24px); }
  body.vp-workspace .kpi-widget-body > .card { padding: 16px; }
  body.vp-workspace .kpi-widget .kpi-chart-scroll svg { min-width: 520px !important; }
  body.vp-workspace .kpi-widget-tools > button { min-width: 44px; min-height: 44px; }
  body.vp-workspace .kpi-widget-tools { flex-wrap: wrap; }
  body.vp-workspace .kpi-widget-tools > span { flex-basis: 100%; }
  body.vp-workspace #toast, body.vp-workspace .vp-toast-stack {
    max-width: calc(100vw - 24px); right: 12px; left: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
  }
  #vpNotifications { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: min(430px, calc(100vw - 24px)); }
  #vpNotifications .vp-notification { grid-template-columns: 25px minmax(0, 1fr) 36px; gap: 8px; padding: 12px; }
  #vpNotifications .vp-notification-close { width: 36px; min-width: 36px; height: 44px; min-height: 44px; }
}

@media screen and (max-width: 480px) {
  body.vp-workspace .workspace-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.vp-workspace .workspace-tile { min-height: 154px; padding-top: 26px; }
  body.vp-workspace .workspace-card > .workspace-favorite {
    right: 1px; top: 1px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 13px;
  }
  body.vp-workspace .workspace-favorite svg { width: 18px; height: 18px; }
  body.vp-workspace.authenticated .content .section > .vp-module-header {
    grid-template-columns: 44px minmax(0, 1fr); padding: 14px; gap: 10px;
  }
  body.vp-workspace .vp-module-icon { width: 44px; height: 44px; flex-basis: 44px; border-radius: 12px; }
  body.vp-workspace .vp-module-icon > svg { width: 31px; height: 31px; }
  body.vp-workspace .vp-module-header .vp-module-copy h2 { font-size: calc(22px * var(--ui-scale)); }
  body.vp-workspace .vp-module-account { flex-wrap: wrap; gap: 3px 10px; }
  body.vp-workspace .vp-module-account strong { overflow-wrap:break-word; }
  body.vp-workspace .content :is(.env-type-grid, .kpi-document-filters, .matrix-kv) { grid-template-columns: minmax(0, 1fr); }
  body.vp-workspace #kpiHeadlineMetrics { gap: 10px; }
  body.vp-workspace .content :is(.kpi-board-heading, #kpiPeriodFilter, .mc-toolbar, .mc-tool-selector) { padding: 14px; }
  body.vp-workspace .content .bar-row { grid-template-columns: minmax(90px, 1fr) minmax(45px, 1fr) 35px; gap: 7px; }
  body.vp-workspace .kpi-widget .vp-donut-content { grid-template-columns: minmax(0, 1fr); }
}

@media screen and (pointer: coarse) {
  body.vp-workspace :is(button, .btn, summary) { touch-action: manipulation; }
  body.vp-workspace .env-swatch { min-height: 44px; }
}