/* ════════════════════════════════════════════════════════════════════
   Citizens Connect — Report dialog (issue #160)
   ------------------------------------------------------------------
   Loaded from index.html on every visit.

   The dialog defines no tokens of its own: it reads the Map v2 tokens (--surface-1,
   --sheet-radius, --elev-2, --z-viewer, --scrim, and the type, space and radius scales),
   which assets/map-v2.css owns, light and dark (app/map-v2-lib.jsx sets data-theme from
   the phone's own setting and loads that stylesheet on every page).

   Bump the ?v= on the index.html <link> when this file changes.
   ════════════════════════════════════════════════════════════════════ */

/* ── Dialog. Tokens only below this line. ── */
@keyframes cc-report-scrim-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes cc-report-in {
  from { opacity: 0; transform: translateY(var(--space-3)); }
  to { opacity: 1; transform: none; }
}
[data-mv2='report'] {
  position: fixed;
  inset: 0;
  z-index: var(--z-viewer);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: max(var(--space-3), env(safe-area-inset-top, 0px)) var(--space-3) max(var(--space-3), env(safe-area-inset-bottom, 0px));
  background: var(--scrim);
  -webkit-backdrop-filter: blur(var(--scrim-blur));
  backdrop-filter: blur(var(--scrim-blur));
  touch-action: none;
  font-family: var(--font-body);
  animation: cc-report-scrim-in var(--dur-base) var(--ease-enter) both;
}
[data-mv2='report-card'] {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--reader-w);
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--sheet-radius);
  background: var(--surface-1);
  color: var(--text-1);
  box-shadow: var(--elev-2);
  animation: cc-report-in var(--dur-base) var(--ease-enter) both;
}
[data-mv2='report-head'] {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-1) var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--divider);
}
[data-mv2='report-title'] {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-3);
  line-height: var(--lh-3);
  font-weight: var(--fw-semibold);
  overflow-wrap: anywhere;
}
[data-mv2='report-scroll'] {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y pinch-zoom;
  padding: var(--space-4);
}
[data-mv2='report-why'],
[data-mv2='report-field-label'] {
  margin: 0;
  font-size: var(--fs-2);
  line-height: var(--lh-2);
  font-weight: var(--fw-semibold);
}
[data-mv2='report-reasons'] {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
[data-mv2='report-reason'] {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  box-sizing: border-box;
  width: 100%;
  min-height: var(--hit);
  margin: 0;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-2);
  line-height: var(--lh-2);
  cursor: pointer;
}
[data-mv2='report-reason']:focus-within {
  outline: var(--focus-w) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}
[data-mv2='report-reason'] input {
  flex: none;
  width: var(--space-4);
  height: var(--space-4);
  margin: 0;
  accent-color: var(--accent);
}
[data-mv2='report-reason'] input:focus {
  outline: none;
}
[data-mv2='report-field'] {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
[data-mv2='report-input'] {
  box-sizing: border-box;
  width: 100%;
  min-height: calc(var(--space-8) + var(--space-8));
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--divider);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text-1);
  font-family: inherit;
  font-size: var(--fs-2);
  line-height: var(--lh-2);
  resize: vertical;
}
[data-mv2='report-count'] {
  align-self: flex-end;
  font-size: var(--fs-1);
  line-height: var(--lh-1);
  color: var(--text-2);
}
[data-mv2='report-alert'] {
  margin: 0;
  font-size: var(--fs-2);
  line-height: var(--lh-2);
  color: var(--error);
}
[data-mv2='report-actions'] {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}
/* Close, Cancel and Send live in this card. Scoped so the old map does not
   need the Map v2 sheet rules, and so those sheet rules stay flag-only. */
[data-mv2='report'] [data-mv2='icon-btn'] {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--hit);
  height: var(--hit);
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  color: var(--text-1);
  cursor: pointer;
}
[data-mv2='report'] [data-mv2='action'] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: var(--hit);
  min-height: var(--hit);
  box-sizing: border-box;
  padding: 0 var(--space-4);
  border: 1px solid var(--divider);
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--text-1);
  font-family: inherit;
  font-size: var(--fs-2);
  line-height: var(--lh-2);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  cursor: pointer;
}
[data-mv2='report'] [data-mv2='action'][data-primary] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
}
[data-mv2='report'] [data-mv2='icon-btn']:focus-visible,
[data-mv2='report'] [data-mv2='action']:focus-visible,
[data-mv2='report-input']:focus-visible {
  outline: var(--focus-w) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}
[data-mv2='report'] [data-mv2='action'],
[data-mv2='report'] [data-mv2='icon-btn'],
[data-mv2='report-reason'] {
  transition: transform var(--dur-fast) var(--ease-enter), opacity var(--dur-fast) linear;
}
[data-mv2='report'] [data-mv2='action']:active,
[data-mv2='report'] [data-mv2='icon-btn']:active {
  transform: scale(0.97);
}
@media (hover: hover) {
  [data-mv2='report'] [data-mv2='action']:hover {
    border-color: var(--accent-ink);
  }
  [data-mv2='report'] [data-mv2='action'][data-primary]:hover {
    opacity: 0.9;
  }
  [data-mv2='report'] [data-mv2='icon-btn']:hover,
  [data-mv2='report-reason']:hover {
    background: var(--surface-2);
  }
}
@media (prefers-reduced-transparency: reduce) {
  [data-mv2='report'] {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}