/* Reporting UX additions (sign-in requirement, stale status, pin description, guidance strip).
   Loaded after the main styles. Elements are created by reports.js.
   --report-guidance-bottom (viewport px) is set on <main> while a navigation strip
   (.route-panel.is-reporting-guide) is visible, and removed otherwise. */

.report-auth-banner[hidden], .report-ready[hidden], .reports-map-status[hidden],
.report-locate[hidden], .reports-map-status [hidden] { display: none !important; }

/* Signed-out requirement, shown before the final submit. */
.report-auth-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  margin: 0 0 8px; padding: 8px 10px;
  border: 1px solid #c5d9ce; border-radius: 8px;
  background: #edf4ef; color: var(--green);
  font-size: 0.875rem; line-height: 1.35;
}
.report-auth-banner p { margin: 0; flex: 1 1 14em; }
.report-auth-banner button { min-height: 44px; min-width: 44px; font-weight: 600; }
.report-auth-banner:not(.is-detail) button { display:none; }

.report-ready {
  margin: 0 0 8px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid #1b7a3d; border-left-width: 4px;
  background: #eaf6ee; color: #12341f; font-size: 0.875rem; font-weight: 600;
}

/* Pin description. */
.report-where { margin: 0 0 8px; font-size: 0.875rem; line-height: 1.35; }
.report-where p { margin: 0 0 2px; }
.report-where-text { font-weight: 600; }
.report-where-coords { color: var(--text-muted, #4a5a6a); font-variant-numeric: tabular-nums; }
.report-where-coords:empty, .report-locate-status:empty { display: none; }
.report-locate { min-height: 44px; min-width: 44px; margin-top: 2px; }
.report-locate:disabled { opacity: 0.6; cursor: progress; }
.report-locate-status { color: var(--text-muted, #4a5a6a); }
.report-locate-status.is-error { color: #9c1c1c; font-weight: 600; }

/* Map-level status: visible even when the reports panel is closed. */
.reports-map-status {
  position: absolute; z-index: 5;
  top: calc(max(var(--report-guidance-bottom, 0px), 72px) + 8px);
  left: 50%; transform: translateX(-50%);
  box-sizing: border-box; width: max-content; max-width: min(34rem, calc(100% - 24px));
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  padding: 8px 12px; border-radius: 10px;
  border: 1px solid #b26a00; border-left-width: 4px;
  background: #fff8e6; color: #3a2800;
  font-size: 0.8125rem; line-height: 1.35; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.reports-map-status-text { flex: 1 1 12em; }
.reports-map-status button { min-height: 44px; min-width: 44px; font-weight: 600; }

/* Markers: last-good data is visibly stale; the selected report is emphasised. */
.report-marker.is-data-stale { opacity: 0.6; outline: 2px dashed #b26a00; outline-offset: 2px; filter: grayscale(0.5); }
.report-marker.is-selected {
  z-index: 3; outline: 3px solid #fff; outline-offset: 1px;
  box-shadow: 0 0 0 6px rgba(26, 95, 180, 0.65), 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Keep the sheet clear of the navigation strip and inside small / landscape viewports. */
.reports-panel {
  max-height: calc(100vh - var(--report-guidance-bottom, 0px) - 12px);
  max-height: calc(100dvh - var(--report-guidance-bottom, 0px) - 12px);
  overflow-y: auto; overscroll-behavior: contain;
}
@media (max-width: 600px) {
  .reports-panel, .reports-panel[data-view=quick] { height:auto; max-height: min(62dvh, calc(100dvh - var(--report-guidance-bottom, 0px) - 84px)); }
}
@media (max-height: 480px) {
  .reports-panel, .reports-panel[data-view=quick] { max-height: calc(100dvh - var(--report-guidance-bottom, 0px) - 72px); }
  .report-fine { display: none; }
  .report-auth-banner, .report-ready { padding: 4px 8px; }
  .reports-map-status { top: calc(max(var(--report-guidance-bottom, 0px), 8px) + 8px); }
}
@media (max-height:480px) and (min-width:480px) {
  .reports-panel, .reports-panel[data-view=quick] {
    left:auto; right:8px; top:8px; bottom:8px; width:264px;
    height:auto; max-width:calc(100% - 240px); max-height:calc(100dvh - 16px);
    border-radius:16px; border:1px solid #dfe5e1; padding:10px 12px;
  }
  .reports-head { margin:-10px -12px 0; padding:10px 12px 6px; }
  .route-panel.is-reporting-guide { left:8px; width:calc(100% - 296px); max-width:none; }
}

/* Unsent-draft prompt (Restore report / Discard). Inline at the top of the form, or on the map
   after a reload / email confirmation. Nothing is restored or sent without a tap. */
.report-offer[hidden] { display: none !important; }
.report-offer {
  box-sizing: border-box; display: grid; gap: 6px;
  padding: 10px 12px; border: 1px solid #1a5fb4; border-left-width: 4px; border-radius: 12px;
  background: #f2f7ff; color: #10233f; font-size: 14px; line-height: 1.4;
}
.report-offer p, .report-offer h3 { margin: 0; }
.report-offer .report-offer-title { font-size: 15px; font-weight: 700; color: inherit; }
.report-offer-confirmed { padding: 6px 8px; border-radius: 8px; background: #eaf6ee; color: #12341f; font-weight: 700; }
.report-offer-confirmed::before { content: "✓ "; }
.report-offer-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.report-offer-actions button {
  min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: 10px;
  font: inherit; font-weight: 700; cursor: pointer;
}
.report-offer-restore { border: 0; background: var(--orange, #fd5c25); color: var(--green, #063c2e); }
.report-offer-discard { border: 1px solid #9aa9a2; background: #fff; color: var(--green, #063c2e); }
.report-offer-actions button:focus-visible { outline: 3px solid var(--green, #063c2e); outline-offset: 2px; }
.report-offer.is-floating {
  position: absolute; z-index: 6;
  left: max(12px, env(safe-area-inset-left)); right: calc(max(12px, env(safe-area-inset-right)) + 56px);
  bottom: calc(var(--mf-dock, 36px) + 60px);
  max-width: 26rem; box-shadow: 0 4px 18px rgba(6, 60, 46, 0.25);
}
@media (min-width: 760px) { .report-offer.is-floating { right: auto; width: 22rem; } }
@media (max-height: 480px) and (min-width: 480px) {
  .report-offer.is-floating { bottom: calc(var(--mf-dock, 36px) + 52px); width: min(300px, 60%); right: auto; gap: 4px; padding: 8px 10px; font-size: 13px; }
}

@media (forced-colors: active) {
  .report-offer { border-color: CanvasText; }
  .report-marker.is-selected { outline: 3px solid Highlight; }
  .report-marker.is-data-stale { outline: 2px dashed CanvasText; }
}