/* Reporting sheet layout (UX14). Link AFTER mobile-first.css and navigation.css.
   Self-contained and phone first; tablet/desktop and landscape-phone overrides follow.
   reports.js moves the submit button, form messages and fine print into .report-footer (outside
   the scrolling form, still submitting it via form="report-form"). While the on-screen keyboard
   covers part of the layout viewport it sets on <main>: .is-report-keyboard and
   --report-kb (px hidden at the bottom), --report-vv-top (visual viewport offset) and
   --report-avail (height the sheet may use, already below the next-turn strip). */

/* ---- Stable header and footer, only the content scrolls ---- */
main .reports-panel[data-view]:not([hidden]) {
  display: flex; flex-direction: column;
  overflow: hidden; padding-bottom: 0;
}
main .reports-panel[data-view]::after { content: none; display: none; }
main .reports-panel > .reports-head { position: relative; top: auto; flex: none; z-index: 1; background: #fff; }
main .reports-panel > #report-form,
main .reports-panel > #report-receipt,
main .reports-panel > #reports-list-view,
main .reports-panel > #report-detail {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  /* Full-bleed scroller so 3px focus outlines are not clipped at the sheet edge. */
  margin: 0 calc(var(--mf-pad, 16px) * -1);
  padding: 4px var(--mf-pad, 16px) max(12px, env(safe-area-inset-bottom));
  scroll-padding: 8px;
}
main .reports-panel > #report-form { align-content: start; padding-bottom: 10px; }
main .reports-panel > [hidden] { display: none !important; }

.report-footer {
  flex: none; display: grid; gap: 6px;
  margin: 0 calc(var(--mf-pad, 16px) * -1);
  padding: 8px var(--mf-pad, 16px) max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--mf-line, #dfe5e1);
  background: #fff;
}
.report-footer[hidden] { display: none !important; }
.report-footer > * { margin: 0; }
.report-footer .reports-error { max-height: 4.4em; overflow-y: auto; font-size: 14px; line-height: 1.4; }
.report-footer .reports-error:empty { display: none; }
.report-footer .report-ready { padding: 6px 10px; font-size: 14px; line-height: 1.35; }
.report-footer .report-go {
  position: static; bottom: auto; width: 100%; min-height: 52px;
  font-size: 17px; box-shadow: none;
}
.report-footer .report-go:disabled { box-shadow: none; }
.report-footer .report-fine { font-size: 12px; line-height: 1.3; text-align: center; }

/* 16px text fields so phones don't zoom on focus; 44px touch targets. */
main .reports-panel textarea { font-size: 16px; }
main .reports-panel .reports-link, main .reports-panel .report-type,
main .reports-panel .reports-secondary, main .reports-panel .reports-primary { min-height: 44px; }

.reports-crosshair.is-covered { visibility: hidden; }

/* ---- Phone keyboard open: sheet sits above the keyboard and below the next-turn strip ---- */
main.is-report-keyboard .reports-panel[data-view]:not([hidden]) {
  top: auto; bottom: var(--report-kb, 0px);
  max-height: var(--report-avail, 60dvh);
}
main.is-report-keyboard .reports-head { padding-top: 2px; padding-bottom: 2px; }
main.is-report-keyboard .report-footer { gap: 4px; padding-top: 6px; padding-bottom: 6px; }
main.is-report-keyboard .report-footer .report-go { min-height: 44px; }
main.is-report-keyboard .report-footer .report-fine,
main.is-report-keyboard .report-form .report-hint,
main.is-report-keyboard .reports-map-status { display: none; }
main.is-report-keyboard .report-type { min-height: 44px; }
main.is-report-keyboard .report-details textarea { min-height: 64px; }

/* ---- Tablet / desktop: floating card, same structure ---- */
@media (min-width: 760px) {
  .report-footer { padding-bottom: 12px; }
  /* A map-load warning must not cover the reporting card's Close control. */
  main.is-reporting .reports-map-status {
    left: calc(var(--mf-l, 24px) + 400px); right: 16px;
    transform: none; width: auto; max-width: 34rem;
  }
}

/* ---- Landscape phones: right-hand column, full height, compact chrome ---- */
@media (max-height: 480px) and (min-width: 480px) {
  .report-footer { gap: 4px; padding: 6px var(--mf-pad, 12px) max(8px, env(safe-area-inset-bottom)); }
  .report-footer .report-go { min-height: 44px; font-size: 16px; }
  .report-footer .report-fine { display: none; }
  main.is-report-keyboard .reports-panel[data-view]:not([hidden]) {
    top: calc(var(--report-vv-top, 0px) + 8px); bottom: auto;
    max-height: var(--report-avail, calc(100dvh - 16px));
  }
  /* Typing the note on a 320px-high screen: give the note the room; the rest returns on blur. */
  main.is-report-keyboard .report-form:has(#report-note:focus) > :not(#report-details) { display: none; }
  main.is-report-keyboard .report-details textarea { min-height: 44px; }
  main.is-report-keyboard .report-footer .report-ready { display: none; }
}

@media (forced-colors: active) {
  .report-footer { border-top-color: CanvasText; }
}

/* Refresh failures are map information, not a blocking layer over Search,
   Directions, guidance or camera controls. Editors retain their higher layer. */
main > .reports-map-status {
  z-index: 1;
  top: calc(var(--stack-top, 72px) + 64px);
}
main[data-map-phase="navigate"] > .reports-map-status {
  top: auto;
  bottom: calc(max(var(--route-bottom-inset, 0px), 112px) + 12px);
}