/* ===== Compact Mobile Modal ===== */
@media (max-width: 640px) {
  /* Modal shell */
  .group-modal { 
    padding: 0; 
    align-items: flex-end; 
    overscroll-behavior-y: contain;
  }
  .group-modal-container {
    width: 100%;
    /* Fallbacks */
    max-block-size: calc(100vh - 8px);
    max-block-size: calc(100svh - 8px);
    border-radius: var(--modal-radius) var(--modal-radius) 0 0;
  }
  @supports (height: 100dvh) {
    .group-modal-container { max-block-size: calc(100dvh - 8px); }
  }
  .group-modal-content {
    border-radius: var(--modal-radius) var(--modal-radius) 0 0;
  }

  /* Header + stepper: denser */
  .group-modal-header { padding: 10px 14px 6px; }
  .modal-handle { height: 3px; width: 36px; top: 6px; }
  .modal-title { font-size: 1rem; line-height: 1.2; }    /* ≈16px */

  .step-progress { margin-bottom: 6px; padding: 0 12px; }
  .step-indicator { gap: 6px; }
  .step-number { width: 20px; height: 20px; font-size: 11px; }
  .step-connector { max-width: 44px; height: 2px; margin: 0 6px; top: -10px; }
  .step-label { 
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Intro note: smaller, lighter, tighter (≈14px) */
  .form-intro { margin-bottom: 10px; gap: 8px; }
  .form-intro::before { font-size: 14px; }
  .form-intro p { font-size: 14px; line-height: 1.35; color: var(--modal-text-muted); }

  /* Body + grid */
  .group-modal-body {
    padding: 12px 14px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable both-edges;
  }
  .form-grid { grid-template-columns: 1fr; gap: 10px; }

  /* Section titles eat vertical space; hide on mobile */
  /* .section-title { display: none; } */

  /* Fields: 44px touch height, thinner borders */
  .form-field { gap: 6px; }
  .field-label { font-size: 13px; }
  .field-input, .field-select, .field-textarea {
    padding: 10px 12px;      /* ~44px tall */
    border-width: 1px;       /* was 2px */
    font-size: 14px;
    min-block-size: 44px;
    line-height: 1.4;
  }
  .field-help { display: none; } /* move "min 6" into label text */

  /* Date row: keep inline to save a row */
  .date-input-group { flex-direction: row; align-items: center; gap: 10px; }
  .date-input { min-width: 0; flex: 1; }
  .date-flexible { margin-inline-start: auto; padding: 0; }

  /* Footer: sticky, compact, safe-area aware */
  .group-modal-footer {
    position: sticky;
    bottom: 0;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: var(--modal-surface);
    border-top: 1px solid var(--modal-border);
  }
  .step-navigation { flex-direction: column; gap: 10px; margin-bottom: 6px; }
  .nav-button, .submit-button {
    width: 100%;
    justify-content: center;
    min-height: 44px;
    border-radius: 10px;
    font-size: 14px;
  }
  /* Focus visibility */
  .nav-button:focus-visible,
  .submit-button:focus-visible,
  .field-input:focus-visible,
  .field-select:focus-visible,
  .field-textarea:focus-visible {
    outline: 2px solid var(--focus-ring, #2563eb);
    outline-offset: 2px;
  }
  .form-note { font-size: 12px; margin-top: 6px; }
}