/* Community reports (ROU-62): report button, type picker, "still there?"
 * card, warning strip, map pins. The live colours are the designer's ROU-58
 * tokens (--jj-hazard, --jj-pin, ...); until those land in tokens.css the
 * fallbacks below are the same values. Driver reports wear a dashed ring,
 * official incidents and OSM cameras (ROU-55 / ROU-56) a solid one. */
:root {
  --rep-hazard: var(--jj-hazard, #FFB224);
  --rep-hazard-ink: var(--jj-hazard-ink, #241800);
  --rep-pin: var(--jj-pin, #1A2029);
  --rep-pin-ink: var(--jj-pin-ink, #F3F5F8);
  --rep-ring: var(--jj-pin-ring, rgba(255, 255, 255, 0.92));
}
[data-theme="light"] {
  --rep-pin: var(--jj-pin, #FFFFFF);
  --rep-pin-ink: var(--jj-pin-ink, #0E1420);
  --rep-ring: var(--jj-pin-ring, rgba(14, 20, 32, 0.14));
}
.rep-ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Report button: the bottom of the right-hand FAB stack, where the thumb is. */
.nav-fabs .rep-fab {
  width: 64px; height: 64px; margin-top: var(--jj-space-1);
  display: flex; flex-direction: column; gap: 0;
  background: var(--rep-hazard); color: var(--rep-hazard-ink);
  font-size: 11px; line-height: 13px; font-weight: var(--jj-fw-heavy);
}
.nav-fabs .rep-fab[hidden] { display: none; }
.nav-fabs .rep-fab .rep-ic { width: 26px; height: 26px; }
.nav-fabs .rep-fab[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--jj-focus), var(--jj-shadow-2); }

/* Picker and question: cards above the bottom bar (phone), in the column (wide). */
.rep-pick, .rep-ask {
  position: absolute; left: 0; right: 0; margin: 0 auto; bottom: calc(var(--jj-safe-bottom) + 100px);
  z-index: var(--jj-z-dialog); width: min(440px, calc(100% - 2 * var(--jj-edge)));
  padding: var(--jj-space-3); background: var(--jj-surface);
  animation: rise var(--jj-dur-base) var(--jj-ease-decel);
}
.rep-pick-head { display: flex; align-items: center; justify-content: space-between; padding: 0 0 var(--jj-space-2) var(--jj-space-2); font-size: var(--jj-fs-body-lg); }
.rep-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--jj-space-2); }
.rep-tile {
  min-height: 76px; padding: var(--jj-space-2) 2px; border-radius: var(--jj-radius-md);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--jj-space-1);
  background: var(--jj-surface-2); color: var(--jj-text);
  font-size: var(--jj-fs-caption); line-height: var(--jj-lh-caption); font-weight: var(--jj-fw-bold); text-align: center;
  transition: transform var(--jj-dur-instant) var(--jj-ease-standard);
}
.rep-tile:active { transform: scale(0.95); background: var(--jj-surface-3); }
.rep-tile .rep-ic { width: 30px; height: 30px; }
.rep-tile.hz .rep-ic { color: var(--rep-hazard); }

.rep-ask-top { display: flex; align-items: center; gap: var(--jj-space-3); margin-bottom: var(--jj-space-3); }
.rep-ask-top b { font: var(--jj-fw-heavy) var(--jj-fs-title)/var(--jj-lh-title) var(--jj-font-display); }
.rep-ask-top .s { color: var(--jj-text-2); font-size: var(--jj-fs-label); }
.rep-ask-btns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--jj-space-2); }
.rep-ask-btns .btn { min-height: 60px; font-size: var(--jj-fs-title); }
.rep-ask-btns .yes { background: var(--jj-success-strong); color: var(--jj-text-on-accent); }
.rep-ask-btns .no { background: var(--jj-surface-3); }
.rep-badge {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--rep-hazard); color: var(--rep-hazard-ink); outline: 2px dashed var(--rep-hazard); outline-offset: 3px;
}
.rep-badge.cam, .rep-warn.cam .rep-badge { background: var(--rep-pin); color: var(--rep-pin-ink); outline-color: var(--rep-pin-ink); }

/* Warning strip under the maneuver banner. */
.rep-warn {
  margin: var(--jj-space-2) 0 0; align-self: stretch;
  display: flex; align-items: center; gap: var(--jj-space-3);
  padding: var(--jj-space-2) var(--jj-space-3); border-radius: var(--jj-radius-md);
  background: var(--jj-surface-glass-strong); color: var(--jj-text); box-shadow: var(--jj-shadow-2);
  -webkit-backdrop-filter: var(--jj-backdrop); backdrop-filter: var(--jj-backdrop);
  font-weight: var(--jj-fw-bold); animation: fadein var(--jj-dur-base) var(--jj-ease-decel);
}
.rep-warn[hidden] { display: none; }
.rep-warn .rep-badge { width: 36px; height: 36px; outline-offset: 2px; }
.rep-warn .rep-badge .rep-ic { width: 22px; height: 22px; }
.rep-warn .grow { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rep-warn b { font: var(--jj-fw-heavy) var(--jj-fs-title)/1 var(--jj-font-display); font-variant-numeric: var(--jj-num); white-space: nowrap; }

/* Map pins: hazard badge, or the neutral camera pin; dashed ring = reported by drivers. */
.rep-pin {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; cursor: default;
  background: var(--rep-hazard); color: var(--rep-hazard-ink);
  box-shadow: 0 0 0 2px var(--rep-ring), var(--jj-shadow-1);
  outline: 2px dashed var(--rep-hazard); outline-offset: 3px;
}
.rep-pin.cam { background: var(--rep-pin); color: var(--rep-pin-ink); outline-color: var(--rep-pin-ink); }
.rep-pin .rep-ic { width: 20px; height: 20px; }
.rep-pin.demo { opacity: 0.85; }
.rep-pin.tap { cursor: pointer; }
/* Gone before a timed route gets there: dimmed like the notice clock (jjb-off; ROU-77 R1). */
.rep-pin.off { opacity: 0.45; filter: grayscale(1); outline-style: dotted; }

.sum-meta.rep-sum { display: flex; align-items: center; gap: var(--jj-space-1); }
.sum-meta.rep-sum .rep-ic { width: 16px; height: 16px; color: var(--rep-hazard); }

.nav.done :is(.rep-warn, .rep-pick, .rep-ask, .rep-fab) { opacity: 0; pointer-events: none; }
/* Phone: while the strip shows, the demo pill and toasts move below it. */
.nav:has(#rep-warn:not([hidden])) .toast { top: calc(var(--jj-safe-top) + 216px); }
.nav:has(#rep-warn:not([hidden])) .demo-ctl { top: calc(var(--jj-safe-top) + var(--jj-edge) + 212px); }
.nav:has(#rep-warn:not([hidden])):has(#demo-ctl:not([hidden])) .toast { top: calc(var(--jj-safe-top) + var(--jj-edge) + 272px); }

@media (min-width: 900px), (orientation: landscape) and (max-height: 540px) {
  .rep-pick, .rep-ask {
    left: calc(var(--jj-edge) + var(--jj-safe-left)); right: auto; margin: 0; width: var(--jj-col);
    bottom: calc(var(--jj-safe-bottom) + var(--jj-edge) + 84px);
  }
}
@media (min-width: 900px) {
  .rep-pick, .rep-ask { bottom: calc(var(--jj-edge) + 100px); }
  /* The strip is in the column; the demo pill and toasts are not. */
  .nav:has(#rep-warn:not([hidden])) .demo-ctl { top: calc(var(--jj-edge) + 112px); }
  .nav:has(#rep-warn:not([hidden])) .toast, .nav:has(#rep-warn:not([hidden])):has(#demo-ctl:not([hidden])) .toast { top: calc(var(--jj-edge) + 40px); }
}
@media (orientation: landscape) and (max-height: 540px) {
  .rep-tile { min-height: 60px; }
  .rep-ask-btns .btn { min-height: 48px; }
  .nav-fabs .rep-fab { width: var(--jj-hit-lg); height: var(--jj-hit-lg); font-size: 0; }
  /* The demo pill stays above the trip bar (style.css), strip or not. */
  .nav:has(#rep-warn:not([hidden])) .demo-ctl { top: auto; }
  .nav:has(#rep-warn:not([hidden])) .toast, .nav:has(#rep-warn:not([hidden])):has(#demo-ctl:not([hidden])) .toast { top: calc(var(--jj-safe-top) + var(--jj-edge) + 168px); }
}