/*
 * modern-responsive.css — cross-cutting responsive breakpoints + animations:
 * the @media rules that reflow the POS / builder / payment grids and the
 * login / device-auth layouts, plus the shared @keyframes (scale-modern-shake,
 * scale-modern-spin) referenced app-wide. GLOBAL (spans multiple components).
 *
 * Phase 6 split: peeled verbatim off modern-base.css (was lines 11039-11129).
 * Loaded via index.html AFTER modern-dialog-skins.css and BEFORE
 * modern-payment-keypad.css. Its position between those two is load-bearing —
 * the original file interleaves it inside the payment-dialog region, so do NOT
 * reorder the <link> tags.
 */

@media (max-width: 980px) {
  .scale-modern-pos {
    min-height: 720px;
    overflow: auto;
  }

  .scale-modern-pos-grid,
  .scale-modern-builder {
    grid-template-columns: minmax(360px, 35%) minmax(540px, 65%);
  }

  .scale-modern-payment-grid {
    grid-template-columns: 460px minmax(480px, 1fr);
  }

  .scale-modern-builder {
    left: 2%;
    right: 2%;
    min-width: 900px;
  }

  .scale-modern-payment {
    min-width: 900px;
  }
}

@keyframes scale-modern-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

@keyframes scale-modern-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (max-width: 980px) {
  .scale-modern-device-auth,
  .scale-modern-login {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(260px, 36vh) auto;
    overflow: auto;
  }

  .scale-modern-brand-panel {
    min-height: 260px;
    padding: 32px;
  }

  .scale-modern-brand-panel__eyebrow {
    margin-top: 42px;
  }

  .scale-modern-brand-panel__title {
    font-size: var(--scale-type-title-1-size);
    line-height: var(--scale-leading-snug);
  }

  .scale-modern-brand-panel__footer {
    display: none;
  }

  .scale-modern-auth-form-panel,
  .scale-modern-login-panel {
    min-height: 520px;
    padding: 76px 24px 32px;
  }
}

@media (max-width: 620px) {
  .scale-modern-switcher {
    top: 10px;
    right: 10px;
    gap: 5px;
  }

  .scale-modern-switcher__button {
    min-width: 58px;
    padding-inline: 8px;
  }

  .scale-modern-brand-panel {
    padding: 28px 22px;
  }

  .scale-modern-auth-form__title {
    font-size: var(--scale-type-title-1-size);
    line-height: var(--scale-leading-snug);
  }
}