/* Active operator-page responsive layouts. The fullscreen wall editor and
   sandboxed plugin operators own separate responsive shells. */

.wrap, .workspace, .list, .row, .row > *, .card { min-width: 0; }
.row h2, .row .name, .row .meta, .perm, .sync-warn { overflow-wrap: anywhere; }

@media (max-width: 640px) {
  body {
    padding: calc(68px + env(safe-area-inset-top, 0px))
      max(12px, env(safe-area-inset-right, 0px))
      max(24px, env(safe-area-inset-bottom, 0px))
      max(12px, env(safe-area-inset-left, 0px)) !important;
  }

  .page-head { align-items: stretch; }
  .page-head > div { min-width: 0; }
  .page-head > a, .page-head > button, .page-head > label { flex: 1 1 100%; }
  .page-head > a > button, .page-head > label > button { width: 100%; min-height: 44px; }

  button, input, select { min-height: 44px; }
  .card { padding: 16px; }
  .row { align-items: stretch; gap: 12px; }
  .row .name, .row .scoreline, .row .meta { min-width: 0; }
  .row .meta { flex: 1 1 100%; }
  .row .row-actions { width: 100%; margin-left: 0; flex-wrap: wrap; }
  .row .row-actions > a, .row .row-actions > button { flex: 1 1 auto; }
  .row .row-actions > a > button { width: 100%; }
  .bulk-bar, .section-head, .grant, .panel-head { flex-wrap: wrap; }

  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal {
    width: 100% !important;
    max-width: none;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 12px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 10px 10px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding: 20px max(16px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions button { min-width: 110px; }

  .new-wall, .invite, .create, .add-row, .token-form, .token-reveal-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }
  .new-wall button, .invite button, .create button, .add-row button, .token-form button { width: 100%; }

  .filters { flex-wrap: nowrap !important; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .filters::-webkit-scrollbar { display: none; }
  .filters button { white-space: nowrap; flex: 0 0 auto; }

  .preview-head > select { min-width: 0 !important; flex-basis: 100%; }
  .preview-head > button { flex: 1 1 auto; }
  #frame { min-height: 300px !important; height: min(58dvh, 620px) !important; }

  .display-row { grid-template-columns: 1fr 1fr !important; }
  .display-row > div { grid-column: 1 / -1; }
  .display-row > button { width: 100%; }
  .qr img { width: min(220px, 70vw) !important; height: auto !important; aspect-ratio: 1; }

  .kv { flex-direction: column; gap: 2px !important; }
  .kv .k { width: auto !important; }
  .token-form input { width: 100%; }
  .token-reveal-row code { min-width: 0; }

  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .metric .num { font-size: 23px !important; }
  .panel { padding: 14px !important; }
  .source-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
  .location-row { flex-direction: column; gap: 6px !important; }
  .location-values { justify-content: space-between; flex-wrap: wrap; gap: 8px !important; }
  .timeline { height: 150px !important; }

  #qrModal { padding: 12px; }
  #qrBox { width: min(100%, 300px); padding: 16px !important; }
  #qrImg { width: 100%; height: auto; aspect-ratio: 1; }
}

@media (max-width: 350px) {
  .cards { grid-template-columns: 1fr !important; }
  .tile-grid { grid-template-columns: 1fr !important; }
  .modal-actions button { flex-basis: 100%; }
}