/**
 * modal-v2.css — Modal/overlay surface v2 conversion (Phase 5 modal pass)
 *
 * Scope: every modal/overlay surface in the app shell.
 *   - Generic action modal: #modal-overlay > #modal-content
 *   - Legacy confirm: #modal (with #modal-cancel / #modal-confirm)
 *   - #venue-modal, #icon-modal, #mapping-modal (form-bearing, .modal-shell)
 *   - #user-modal, #claim-modal, #flag-modal, #team-modal (preview, .modal-shell)
 *   - #confirm-modal (destructive confirm)
 *   - #welcome-overlay (onboarding splash)
 *   - .modal-bg / .modal-backdrop legacy backdrops (v084-prototype.css residue)
 *
 * Approach: re-skin EXISTING markup using the canonical v2-theme.css token set.
 * No markup or handler changes — every data-action and id is preserved.
 * No invented token names; surface ascendance follows the mockup token contract
 * (--s1 chrome/rails → --s2 cards → --s3 inputs/wells).
 *
 * Loaded AFTER v2-theme.css, AFTER home-v2.css, AFTER team-v2.css so this pass
 * is the LAST modal word. Cascade weight is intentional: higher-specificity
 * selectors here override legacy style.css + v084-prototype.css modal rules.
 *
 * NO fabricated content. Pure styling layer.
 */

/* =============================================================================
   SHARED BACKDROP — every modal-grade overlay
   ========================================================================== */

.modal-overlay,
.modal-bg,
.modal-backdrop,
#welcome-overlay {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
          backdrop-filter: blur(8px) saturate(120%);
}

/* Make sure backdrop sits flush with viewport on mobile + respects safe area */
.modal-overlay,
.modal-bg,
.modal-backdrop {
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

/* =============================================================================
   MODAL CARD SHELL
   ========================================================================== */

.modal,
#modal-content,
.modal-content,
.modal-sheet,
.modal-shell {
  background: var(--s2);
  border: 1px solid var(--line2);
  border-radius: var(--r-md);
  box-shadow: var(--card-shadow);
  color: var(--ink);
  /* overflow-y must stay scrollable: style.css gives .modal `max-height: 85vh;
     overflow-y: auto`, and tall forms (profile edit) depend on it. A blanket
     `overflow: hidden` here clips them with no scrollbar. `auto` still clips
     children at the rounded corners, so the corner treatment is preserved. */
  overflow-x: hidden;
  overflow-y: auto;
}

/* Narrow variant (icon picker, mapping, confirm) */
.modal-shell-narrow,
#icon-modal .modal-shell,
#mapping-modal .modal-shell,
#confirm-modal .modal-shell { max-width: 360px; }

/* Standard variants */
#user-modal .modal-shell,
#claim-modal .modal-shell,
#flag-modal .modal-shell,
#team-modal .modal-shell { max-width: 420px; }

#venue-modal .modal-shell { max-width: 480px; }

/* =============================================================================
   HEADER — title bar + close button
   ========================================================================== */

.modal-header,
.modal > .modal-title,
#modal-content > .modal-title {
  background: var(--s1);
  border-bottom: 1px solid var(--line);
  color: var(--ink-hi);
  font-family: var(--font-display);
  font-size: var(--t-title);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 14px 18px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Header h2 (legacy) */
.modal h2 {
  font-family: var(--font-display);
  font-size: var(--t-title);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-hi);
  margin: 0 0 14px 0;
}

/* Close button in header (icon-btn pattern) */
.modal-header .icon-btn,
.modal-header [data-action$="close"],
.modal-header button.close,
#user-modal-close,
#claim-modal-close,
#flag-modal-close,
#team-modal-close,
#icon-modal-close,
#mapping-modal-close {
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-mid);
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.modal-header .icon-btn:hover,
.modal-header [data-action$="close"]:hover,
#user-modal-close:hover,
#claim-modal-close:hover,
#flag-modal-close:hover,
#team-modal-close:hover,
#icon-modal-close:hover,
#mapping-modal-close:hover {
  background: var(--s3);
  color: var(--ink-hi);
  border-color: var(--line2);
}

.modal-header .icon-btn:active,
#user-modal-close:active,
#claim-modal-close:active,
#flag-modal-close:active,
#team-modal-close:active,
#icon-modal-close:active,
#mapping-modal-close:active {
  background: var(--s2);
}

/* =============================================================================
   BODY — content area
   ========================================================================== */

.modal-body,
#modal-body,
#user-modal-body,
#claim-modal-body,
#flag-modal-body,
#team-modal-body {
  background: var(--s2);
  color: var(--ink);
  padding: 18px;
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: 1.5;
}

.modal-body label,
#modal-body label,
.modal .field label,
.modal label {
  color: var(--ink-mid);
  font-size: var(--t-caption);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}

/* Field group spacing */
.modal-body .field,
.modal .field { margin-bottom: 16px; }

/* Inline help / hint text */
.modal-body .hint,
.modal-body .help {
  color: var(--ink-mid);
  font-size: var(--t-caption);
  margin-top: 6px;
}

/* Error inline */
.modal-body .error,
.modal-body .field-error {
  color: var(--bad);
  font-size: var(--t-caption);
  margin-top: 6px;
}

/* =============================================================================
   INPUTS inside modals
   ========================================================================== */

.modal-body input[type="text"],
.modal-body input[type="email"],
.modal-body input[type="search"],
.modal-body input[type="number"],
.modal-body input[type="tel"],
.modal-body input[type="url"],
.modal-body input[type="password"],
.modal-body textarea,
.modal-body select,
.modal-body .input,
.modal-backdrop .input {
  background: var(--s3);
  border: 1px solid var(--line2);
  color: var(--ink-hi);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-family: var(--font-ui);
  font-size: var(--t-body);
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.modal-body input::placeholder,
.modal-body textarea::placeholder {
  color: var(--ink-low);
}

.modal-body input:focus,
.modal-body textarea:focus,
.modal-body select:focus,
.modal-body .input:focus,
.modal-backdrop .input:focus {
  border-color: var(--olive);
  outline: none;
  box-shadow: 0 0 0 3px var(--olive-dim);
}

.modal-body input:disabled,
.modal-body textarea:disabled,
.modal-body select:disabled {
  background: var(--s2);
  color: var(--ink-low);
  cursor: not-allowed;
}

/* Checkbox / radio inside modal body — recolor accent */
.modal-body input[type="checkbox"],
.modal-body input[type="radio"] {
  accent-color: var(--olive);
  width: auto;
}

/* =============================================================================
   FOOTER — action row
   ========================================================================== */

.modal-footer,
.modal-actions {
  background: var(--s1);
  border-top: 1px solid var(--line);
  padding: 12px 16px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}

/* =============================================================================
   BUTTONS in modal footer / actions
   ========================================================================== */

.modal-btn,
.modal-footer button,
.modal-actions button {
  font-family: var(--font-ui);
  font-weight: 600;
  padding: 9px 18px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 14px;
  letter-spacing: 0.02em;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  min-height: 40px; /* touch target */
}

/* Primary CTA (olive) — for submit / confirm */
.modal-btn.primary,
.modal-footer button.primary,
.modal-footer button[type="submit"],
.modal-actions button.primary,
.modal-actions button[type="submit"],
#modal-confirm {
  background: var(--olive);
  color: var(--bg);
  border-color: var(--olive);
}

.modal-btn.primary:hover,
.modal-footer button.primary:hover,
.modal-footer button[type="submit"]:hover,
.modal-actions button.primary:hover,
#modal-confirm:hover {
  background: var(--olive-hi);
  border-color: var(--olive-hi);
}

.modal-btn.primary:active,
.modal-footer button[type="submit"]:active,
#modal-confirm:active {
  background: var(--olive);
  filter: brightness(0.92);
}

/* Secondary / cancel — outlined */
.modal-btn.secondary,
.modal-footer button.secondary,
.modal-actions button.secondary,
#modal-cancel {
  background: transparent;
  color: var(--ink);
  border-color: var(--line2);
}

.modal-btn.secondary:hover,
.modal-footer button.secondary:hover,
.modal-actions button.secondary:hover,
#modal-cancel:hover {
  background: var(--s3);
  color: var(--ink-hi);
  border-color: var(--line2);
}

/* Destructive — bad (red) */
.modal-btn.danger,
.modal-footer button.danger,
.modal-actions button.danger,
.modal-footer button[data-variant="danger"] {
  background: var(--bad);
  color: var(--bg);
  border-color: var(--bad);
}

.modal-btn.danger:hover,
.modal-footer button.danger:hover {
  background: var(--bad);
  border-color: var(--bad);
  filter: brightness(1.15);
}

/* Ghost (tertiary text link) */
.modal-btn.ghost,
.modal-footer button.ghost {
  background: transparent;
  color: var(--ink-mid);
  border-color: transparent;
}
.modal-btn.ghost:hover { color: var(--ink-hi); background: var(--s3); }

/* =============================================================================
   ICON BUTTON variant inside backdrop (legacy v084-prototype usage)
   ========================================================================== */

.modal-backdrop .icon-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-mid);
  border-radius: var(--r-sm);
}
.modal-backdrop .icon-btn:hover {
  background: var(--s3);
  color: var(--ink-hi);
  border-color: var(--line2);
}

/* =============================================================================
   WELCOME OVERLAY — onboarding splash
   ========================================================================== */

#welcome-overlay > .welcome-card,
#welcome-overlay > div {
  background: var(--s2);
  border: 1px solid var(--line2);
  border-radius: var(--r-lg);
  box-shadow: var(--card-shadow);
  color: var(--ink);
}

#welcome-overlay h1,
#welcome-overlay h2 {
  font-family: var(--font-display);
  color: var(--ink-hi);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

#welcome-overlay p {
  color: var(--ink);
}

#welcome-overlay button {
  font-family: var(--font-ui);
  font-weight: 600;
  background: var(--olive);
  color: var(--bg);
  border: 1px solid var(--olive);
  border-radius: var(--r-sm);
  padding: 10px 20px;
  min-height: 44px;
  cursor: pointer;
}
#welcome-overlay button:hover { background: var(--olive-hi); border-color: var(--olive-hi); }

/* =============================================================================
   ACCESSIBILITY + MOTION
   ========================================================================== */

.modal:focus,
.modal-shell:focus,
.modal-content:focus { outline: none; }

.modal *:focus-visible,
.modal-shell *:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 2px;
}

/* Subtle entry animation — respects reduced-motion preference */
@media (prefers-reduced-motion: no-preference) {
  .modal-overlay:not(.hidden),
  .modal-bg.open,
  .modal-backdrop.open {
    animation: modalv2-fade 0.18s ease-out;
  }
  .modal-overlay:not(.hidden) .modal,
  .modal-overlay:not(.hidden) #modal-content,
  .modal-bg.open .modal-sheet,
  .modal-backdrop.open .modal-sheet,
  .modal-shell {
    animation: modalv2-rise 0.22s cubic-bezier(0.16, 0.84, 0.44, 1);
  }
  @keyframes modalv2-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes modalv2-rise {
    from { opacity: 0; transform: translateY(12px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
}

/* =============================================================================
   SAFE AREA — bottom inset for mobile gestures
   ========================================================================== */

@supports (padding: max(0px)) {
  .modal-footer,
  .modal-actions {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
}

/* =============================================================================
   TABLET / WIDE — modal max-width grows so it doesn't look stretched
   ========================================================================== */

@media (min-width: 768px) {
  .modal-overlay,
  .modal-bg,
  .modal-backdrop {
    padding: 24px;
  }
  .modal,
  .modal-shell,
  #modal-content {
    margin-inline: auto;
  }
}

/* =============================================================================
   .modal-card / .modal-card-head / .modal-card-body / .modal-card-foot
   .modal-close (standalone class)

   Ed 2026-06-22: "weird X button with white background above 'cqb loadout'".
   loadout-send.js and drill-send.js use the `.modal-card-*` shell with a
   standalone `.modal-close` button. Pre-fix there were ZERO rules for any of
   these classes — buttons fell back to the UA default (white background on
   macOS Chrome) and the header was layout-less so the X floated above the
   title instead of sitting next to it.
   ========================================================================== */

.modal-card {
  background: var(--s2);
  border: 1px solid var(--line2);
  border-radius: var(--r-md);
  box-shadow: var(--card-shadow);
  color: var(--ink);
  overflow-x: hidden;
  overflow-y: auto;
  max-width: 480px;
  width: 100%;
  margin-inline: auto;
}

.modal-card-head {
  background: var(--s1);
  border-bottom: 1px solid var(--line);
  color: var(--ink-hi);
  font-family: var(--font-display);
  padding: 14px 18px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.modal-card-head h3,
.modal-card-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-title);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-hi);
}

.modal-card-body {
  background: var(--s2);
  color: var(--ink);
  padding: 18px;
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: 1.5;
}

.modal-card-foot {
  background: var(--s1);
  border-top: 1px solid var(--line);
  padding: 12px 16px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}

.modal-close,
.modal-card-head .modal-close,
.modal-card-head [data-action$="close"],
.modal-card-head [data-action^="close-"] {
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-mid);
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 22px;
  line-height: 1;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.modal-close:hover,
.modal-card-head .modal-close:hover,
.modal-card-head [data-action$="close"]:hover,
.modal-card-head [data-action^="close-"]:hover {
  background: var(--s3);
  color: var(--ink-hi);
  border-color: var(--line2);
}

.modal-close:active,
.modal-card-head .modal-close:active {
  background: var(--s2);
}

@supports (padding: max(0px)) {
  .modal-card-foot {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
}

/* =============================================================================
   GEAR MAT preview modal (js/gear-mat.js)
   The flat-lay is composited client-side into a PNG and shown in a .modal-card
   shell. The preview well is monochrome dark to match the mat itself; the image
   is capped so a tall (20-item) mat scrolls inside the modal body instead of
   blowing the viewport. NO amber/gold — mat palette is v2-theme tokens only.
   ========================================================================== */
.gear-mat-modal .gear-mat-preview {
  max-height: 62vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.gear-mat-modal .gear-mat-preview img {
  display: block;
  width: 100%;
  height: auto;
}