/* ═══ The drop-path editor — "Guide Noah to your door" ═══════════════════
   One full-screen sheet (public/js/order/dropPath.js) opened on the light
   ordering pages and on the dark vote page alike, so it carries its own
   tokens instead of borrowing either page's.

   On brand: the kit's navy and orange (tokens.css --brand-*, falling back
   to the same printed hex numbers where a page predates them), Inter for
   text and Montserrat for the display lines (--font-text / --font-display,
   self-hosted; the system stack until those load). Navy is the chrome and
   every action; orange is the route — the glowing line from the street to
   the door, as on the kit's banner — and the moments that need an answer.
   Orange never carries white text (3.4:1); navy on orange is 5.9:1.
   ═══════════════════════════════════════════════════════════════════════ */

.drop-sheet,
.address-photo-dialog,
.finish-sheet {
  --d-navy: var(--brand-navy, #010b1b);
  --d-navy-2: #1a2a45; /* hover; white text 14.4:1 */
  --d-orange: var(--brand-orange, #e8631b);
  --d-orange-soft: #f07b38;
  --d-orange-ink: #b0490f; /* orange as text: 5.5:1 on white */
  --d-orange-wash: #fdf0e7;
  --d-white: var(--brand-white, #ffffff);
  --d-well: #eef2f7;
  --d-hairline: #e3e8ef;
  --d-outline: #8691a5; /* 3.2:1 — control outlines */
  --d-muted: #4a5568; /* 7.5:1 on white */
  --d-faint: #5e6a7e; /* 5.5:1 on white */
  --d-on-navy-muted: #a9b3c4; /* 9.3:1 on navy */
  --d-error: #c62828;
  --d-focus: #4da3ff;
  --d-font-text: var(--font-text, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  --d-font-display: var(--font-display, "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);

  color-scheme: light;
  box-sizing: border-box;
  width: 100vw;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--d-white);
  color: var(--d-navy);
  font-family: var(--d-font-text);
  font-size: 16px;
  line-height: 1.4;
}

.drop-sheet *,
.drop-sheet *::before,
.drop-sheet *::after,
.address-photo-dialog *,
.address-photo-dialog *::before,
.address-photo-dialog *::after,
.finish-sheet *,
.finish-sheet *::before,
.finish-sheet *::after {
  box-sizing: border-box;
}

.drop-sheet[open] {
  display: flex;
  flex-direction: column;
}

.drop-sheet::backdrop {
  background: rgba(1, 11, 27, 0.72);
}

@media (min-width: 900px) {
  .drop-sheet {
    width: min(1180px, calc(100vw - 48px));
    height: min(860px, calc(100dvh - 48px));
    margin: auto;
    border-radius: 24px;
    box-shadow: 0 30px 80px -24px rgba(1, 11, 27, 0.7);
  }
}

/* ── Header + progress: one navy block ─────────────────────────────────── */

.drop-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 8px 16px;
  background: var(--d-navy);
  color: var(--d-white);
}

.drop-head::before {
  content: "";
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--d-white) url("/noah-front.svg") center 60% / 30px no-repeat;
}

.drop-head-text {
  flex: 1 1 auto;
  min-width: 0;
}

.drop-sheet .drop-head h2 {
  margin: 0;
  font-family: var(--d-font-display);
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--d-white);
}

.drop-sheet .drop-address {
  margin: 2px 0 0;
  overflow: hidden;
  font-size: 0.8rem;
  color: var(--d-on-navy-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.drop-head .drop-link {
  flex: none;
  color: var(--d-white);
}

@media (max-width: 359px) {
  .drop-head::before {
    display: none;
  }
}

.drop-progress[hidden] {
  display: none;
}

.drop-progress {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 4px 10px 10px;
  list-style: none;
  background: var(--d-navy);
}

.drop-progress li {
  flex: 1 1 0;
  min-width: 0;
}

/* The question on screen takes the room its name needs; the rest share. */
.drop-progress li.is-current {
  flex: 0 0 auto;
}

.drop-progress button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 36px;
  padding: 4px 6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--d-on-navy-muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.drop-progress-n {
  display: grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
}

.drop-progress-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.drop-progress button.is-done {
  color: var(--d-white);
}

.drop-progress button.is-done .drop-progress-n {
  border-color: var(--d-white);
  background: var(--d-white);
  color: var(--d-navy);
}

.drop-progress button[aria-current="step"] {
  background: var(--d-orange);
  color: var(--d-navy);
  font-weight: 700;
}

.drop-progress button[aria-current="step"] .drop-progress-n {
  border-color: var(--d-navy);
}

.drop-progress button:disabled {
  opacity: 0.55;
  cursor: default;
}

/* Narrow: only the current question keeps its name on screen; the others
   keep theirs for screen readers (the number beside it is aria-hidden). */
@media (max-width: 420px) {
  .drop-progress button:not([aria-current="step"]) .drop-progress-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ── Map stage ───────────────────────────────────────────────────────── */

.drop-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

@media (min-width: 900px) {
  .drop-body {
    flex-direction: row;
  }
}

/* On a phone the map keeps one height through every question: a panel that
   grows as the customer taps would shrink the map and slide the driveway
   out from under their finger. The panel scrolls instead. */
.drop-stage {
  position: relative;
  flex: 0 0 auto;
  height: clamp(240px, 52dvh, 620px);
  overflow: hidden;
  background: #2b2f38;
  outline: none;
}

@media (min-width: 900px) {
  .drop-stage {
    flex: 1 1 auto;
    height: auto;
  }
}

.drop-stage:focus-visible {
  box-shadow: inset 0 0 0 3px var(--d-focus);
}

.drop-map {
  position: absolute;
  inset: 0;
}

.drop-map-tools {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.drop-tool {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--d-white);
  color: var(--d-navy);
  font: 700 1.35rem/1 var(--d-font-text);
  box-shadow: 0 6px 16px -6px rgba(1, 11, 27, 0.6);
  cursor: pointer;
}

.drop-tool:hover {
  background: var(--d-well);
}

.drop-map-messages {
  position: absolute;
  top: 12px;
  right: 68px;
  left: 12px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  pointer-events: none;
}

.drop-sheet .drop-map-status {
  max-width: 100%;
  margin: 0;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(1, 11, 27, 0.82);
  color: var(--d-white);
  font-size: 0.78rem;
  font-weight: 600;
}

.drop-sheet .drop-map-status--hint {
  background: var(--d-white);
  color: var(--d-navy);
  box-shadow: 0 6px 16px -8px rgba(1, 11, 27, 0.7);
}

.drop-sheet .drop-map-note {
  position: absolute;
  bottom: 16px;
  left: 50%;
  z-index: 6;
  max-width: calc(100% - 24px);
  margin: 0;
  padding: 9px 16px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--d-navy);
  color: var(--d-white);
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  transform: translateX(-50%);
  box-shadow: 0 8px 20px -8px rgba(1, 11, 27, 0.7);
  pointer-events: none;
}

.drop-map-status[hidden],
.drop-map-note[hidden] {
  display: none;
}

/* Waiting on the property picture (PRD-61 §4.3): a small spinner leads the line. */
.drop-sheet .drop-map-status.is-waiting:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 8px;
}

.drop-sheet .drop-map-status.is-waiting::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--d-white);
  border-radius: 50%;
  animation: drop-spin 0.9s linear infinite;
}

@keyframes drop-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .drop-sheet .drop-map-status.is-waiting::before {
    animation: none;
  }
}

/* The public imagery's own credit, on the map (PRD-61 §4.3, §3): top
   left, clear of the tool switch below and the zoom tools right, so a
   licence term stays readable at every width. */
.drop-sheet .drop-attribution {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  max-width: calc(100% - 12px);
  margin: 0;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(1, 11, 27, 0.6);
  color: var(--d-white);
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.3;
  pointer-events: none;
}

/* Keyboard users drop points where this sits; it shows only for them. */
.drop-crosshair {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.drop-crosshair::before,
.drop-crosshair::after {
  content: "";
  position: absolute;
  background: var(--d-white);
  box-shadow: 0 0 0 1.5px var(--d-navy);
}

.drop-crosshair::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 3px;
  transform: translateY(-50%);
}

.drop-crosshair::after {
  top: 0;
  left: 50%;
  width: 3px;
  height: 100%;
  transform: translateX(-50%);
}

.drop-stage:focus-visible .drop-crosshair {
  display: block;
}

@media (max-width: 899px) {
  .drop-sheet.is-cal[data-phase="intro"] .drop-stage {
    height: clamp(140px, 24dvh, 220px);
  }
}

/* ── The line and the markers on the map ─────────────────────────────── */

.drop-layer {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.drop-layer--google {
  width: 0;
  height: 0;
  overflow: visible;
}

.drop-layer--maplibre {
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.drop-line {
  position: absolute;
  overflow: visible;
  pointer-events: none;
}

/* The glow, the navy edge that keeps it readable on pale concrete, and the
   orange route itself. */
.drop-line-casing {
  fill: none;
  stroke: var(--d-navy);
  stroke-opacity: 0.8;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(232, 99, 27, 0.75));
}

.drop-line-core {
  fill: none;
  stroke: var(--d-orange);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Marking steps: the line is the target, so it grows. */
.drop-line.is-tappable .drop-line-casing {
  stroke: var(--d-white);
  stroke-opacity: 0.9;
  stroke-width: 15;
}

.drop-line.is-tappable .drop-line-core {
  stroke-width: 7;
}

/* Past the beta drop-off: dashed and dimmed, over the orange it covers. */
.drop-line-beyond {
  fill: none;
  stroke: var(--d-white);
  stroke-opacity: 0.8;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 2 9;
}

/* Our replayed route to the secondary zone: thinner dashed orange. */
.drop-line-replay {
  fill: none;
  stroke: var(--d-orange);
  stroke-opacity: 0.85;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 4 3;
}

/* The trip player's car, parked where the route starts. */
.drop-car {
  position: absolute;
  z-index: 5;
  width: 20px;
  height: 20px;
  color: var(--d-navy);
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(1, 11, 27, 0.45));
}

/* ── The first-tap guide (PRD-36 §9.8) ────────────────────────────────── */

.drop-guide {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 20px;
  overflow-y: auto;
  background: rgba(1, 11, 27, 0.6);
}

.drop-guide[hidden] {
  display: none;
}

.drop-guide-card {
  width: min(420px, 100%);
  padding: 20px 20px 18px;
  border-radius: 20px;
  background: var(--d-white);
  box-shadow: 0 30px 80px -24px rgba(1, 11, 27, 0.7);
}

.drop-sheet .drop-guide-card h3 {
  margin: 0 0 10px;
  font-family: var(--d-font-display);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--d-navy);
}

.drop-guide-diagram {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.drop-guide-list {
  margin: 12px 0 14px;
  padding-left: 22px;
  font-size: 0.93rem;
  line-height: 1.45;
  color: var(--d-muted);
}

.drop-guide-list li + li {
  margin-top: 6px;
}

/* 36 px to press and drag; the dots inside stay small enough that
   waypoints a couple of meters apart on a walkway don't swallow each other. */
.drop-marker {
  position: absolute;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--d-navy);
  font-family: var(--d-font-text);
  pointer-events: none;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.drop-marker.is-interactive {
  pointer-events: auto;
  cursor: grab;
}

.drop-marker--step.is-interactive {
  cursor: pointer;
}

.drop-marker.is-dragging {
  z-index: 3;
  cursor: grabbing;
}

.drop-marker-dot {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 2px solid var(--d-navy);
  border-radius: 50%;
  background: var(--d-white);
  color: var(--d-navy);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(1, 11, 27, 0.55);
}

.drop-marker--start .drop-marker-dot {
  width: 22px;
  height: 22px;
  border-color: var(--d-white);
  background: var(--d-navy);
  color: var(--d-white);
}

.drop-marker--end .drop-marker-dot {
  width: 30px;
  height: 30px;
  border-color: var(--d-white);
  background: var(--d-orange);
  color: var(--d-navy);
}

.drop-marker--end .drop-marker-dot svg {
  width: 15px;
  height: 15px;
}

/* Step marks are pills that say what they are ("1 step", "2+ steps"), so
   they never read as a numbered waypoint. */
.drop-marker--step .drop-marker-dot {
  width: auto;
  min-width: 26px;
  height: 24px;
  padding: 0 8px;
  border-color: var(--d-orange);
  border-radius: 999px;
  background: var(--d-navy);
  color: var(--d-white);
  font-size: 11px;
  white-space: nowrap;
}

.drop-marker--step.is-waiting .drop-marker-dot {
  border-color: var(--d-white);
  background: var(--d-orange);
  color: var(--d-navy);
  animation: drop-pulse 1.1s ease-in-out infinite;
}

.drop-marker.is-selected .drop-marker-dot {
  box-shadow:
    0 0 0 3px var(--d-white),
    0 0 0 7px var(--d-orange);
}

.drop-marker:focus {
  outline: none;
}

.drop-marker:focus-visible .drop-marker-dot {
  box-shadow:
    0 0 0 3px var(--d-white),
    0 0 0 6px var(--d-focus);
}

.drop-marker-caption {
  position: absolute;
  bottom: calc(50% + 15px);
  left: 50%;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--d-navy);
  color: var(--d-white);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  transform: translateX(-50%);
  box-shadow: 0 2px 8px rgba(1, 11, 27, 0.5);
  pointer-events: none;
}

.drop-marker--end .drop-marker-caption {
  bottom: calc(50% + 19px);
  background: var(--d-white);
  color: var(--d-navy);
}

.drop-marker-caption.is-below {
  top: calc(50% + 15px);
  bottom: auto;
}

.drop-marker--end .drop-marker-caption.is-below {
  top: calc(50% + 19px);
}

.drop-marker-caption[hidden] {
  display: none;
}

@keyframes drop-pulse {
  50% {
    box-shadow:
      0 0 0 8px rgba(232, 99, 27, 0.35),
      0 2px 8px rgba(1, 11, 27, 0.55);
  }
}

/* ── The panel: one question at a time ───────────────────────────────── */

.drop-panel {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  padding: 10px 16px 0;
  overflow-y: auto;
  border-top: 1px solid var(--d-hairline);
  background: var(--d-white);
  box-shadow: 0 -12px 28px -20px rgba(1, 11, 27, 0.6);
}

@media (min-width: 900px) {
  .drop-panel {
    flex: 0 0 390px;
    padding: 18px 22px 0;
    border-top: 0;
    border-left: 1px solid var(--d-hairline);
    box-shadow: none;
  }
}

/* Each question's main button stays in reach while the panel scrolls. */
.drop-cta {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 0 -16px;
  padding: 10px 16px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--d-white) 12px);
}

@media (min-width: 900px) {
  .drop-cta {
    margin: 0 -22px;
    padding: 12px 22px 22px;
  }
}

.drop-cta .drop-btn--block {
  margin-top: 0;
}

.drop-step[hidden],
.drop-panel [hidden] {
  display: none !important;
}

.drop-sheet .drop-step h3 {
  margin: 2px 0 6px;
  font-family: var(--d-font-display);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.22;
  color: var(--d-navy);
}

.drop-step h3:focus {
  outline: none;
}

.drop-sheet .drop-step p {
  margin: 0 0 10px;
  font-size: 0.93rem;
  line-height: 1.45;
  color: var(--d-muted);
}

.drop-sheet .drop-tip {
  padding: 10px 12px 10px 38px;
  border-radius: 12px;
  background: var(--d-well)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23010b1b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M8 3 5 21M16 3l3 18M12 4v3M12 11v3M12 18v2'/%3E%3C/svg%3E")
    12px 11px / 18px no-repeat;
  color: var(--d-navy);
  font-size: 0.86rem;
}

.drop-sheet .drop-meta {
  font-weight: 700;
  color: var(--d-navy);
  font-variant-numeric: tabular-nums;
}

.drop-choices {
  display: grid;
  gap: 10px;
  margin: 12px 0 6px;
}

.drop-choices--pair {
  grid-template-columns: 1fr 1fr;
}

.drop-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 10px 14px;
  border: 1.5px solid var(--d-hairline);
  border-radius: 16px;
  background: var(--d-white);
  color: var(--d-navy);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(1, 11, 27, 0.06);
}

.drop-choice:hover {
  border-color: var(--d-outline);
}

.drop-choice[aria-pressed="true"] {
  border: 2px solid var(--d-navy);
  padding: 9.5px 13.5px;
}

.drop-choice-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--d-well);
  color: var(--d-navy);
}

.drop-choice[aria-pressed="true"] .drop-choice-icon {
  background: var(--d-orange);
}

.drop-choice-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.drop-choice-text strong {
  font-family: var(--d-font-display);
  font-size: 1rem;
  font-weight: 800;
}

.drop-choice-text span {
  font-size: 0.83rem;
  color: var(--d-muted);
}

.drop-choice--short {
  justify-content: center;
  min-height: 56px;
  font-weight: 700;
  text-align: center;
}

.drop-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.drop-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 0.93rem;
  font-weight: 700;
  cursor: pointer;
}

.drop-btn--primary {
  background: var(--d-navy);
  color: var(--d-white);
}

.drop-btn--primary:hover {
  background: var(--d-navy-2);
}

.drop-btn--ghost {
  border-color: var(--d-outline);
  background: var(--d-white);
  color: var(--d-navy);
}

.drop-btn--ghost:hover {
  border-color: var(--d-navy);
}

.drop-btn--choice {
  flex: 1 1 0;
  min-height: 48px;
  border-color: var(--d-navy);
  background: var(--d-white);
  color: var(--d-navy);
}

.drop-btn--choice[aria-pressed="true"] {
  background: var(--d-navy);
  color: var(--d-white);
}

.drop-btn--block {
  width: 100%;
  margin-top: 6px;
}

.drop-btn--small {
  min-height: 38px;
  padding: 0 14px;
  font-size: 0.86rem;
}

.drop-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.drop-link {
  min-height: 44px;
  padding: 6px 4px;
  border: 0;
  background: none;
  color: var(--d-navy);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* Back sits beside the question rather than on a row of its own: on a
   phone every line the panel spends is a line of map it scrolls away. */
.drop-back {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0 0 2px;
  border: 1.5px solid var(--d-hairline);
  border-radius: 50%;
  background: var(--d-white);
  color: var(--d-navy);
  font: 700 1.35rem/1 var(--d-font-text);
  cursor: pointer;
}

.drop-back:hover {
  border-color: var(--d-outline);
}

.drop-back[hidden] {
  display: none;
}

.drop-sheet:not([data-phase="spot"]) .drop-step h3 {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding-left: 52px;
}

@media (min-width: 900px) {
  .drop-back {
    top: 16px;
    left: 18px;
  }
}

.drop-btn:focus-visible,
.drop-choice:focus-visible,
.drop-link:focus-visible,
.drop-back:focus-visible,
.drop-tool:focus-visible,
.drop-progress button:focus-visible,
.drop-sheet textarea:focus-visible {
  outline: 3px solid var(--d-focus);
  outline-offset: 2px;
}

.drop-question {
  margin: 10px 0;
  padding: 12px 14px;
  border: 1.5px solid var(--d-orange);
  border-radius: 14px;
  background: var(--d-orange-wash);
}

.drop-sheet .drop-question-text {
  margin: 0 0 6px;
  font-family: var(--d-font-display);
  font-weight: 800;
  color: var(--d-navy);
}

.drop-question .drop-row {
  margin: 6px 0 2px;
}

.drop-step-list {
  display: grid;
  gap: 6px;
  margin: 8px 0;
  padding: 0;
  list-style: none;
}

.drop-step-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 12px;
  border-radius: 10px;
  background: var(--d-well);
  font-size: 0.86rem;
}

.drop-step-item span {
  flex: 1 1 auto;
}

.drop-step-item .drop-link {
  min-height: 36px;
  font-size: 0.8rem;
}

/* Noah's own voice for the one thing he can't do yet. */
.drop-warning {
  /* Clears the pinned Done button when scrolled into view. */
  scroll-margin-bottom: 84px;
  margin: 10px 0;
  padding: 12px 14px 12px 60px;
  border-radius: 14px;
  background: var(--d-navy) url("/noah-front.svg") 12px 12px / 36px no-repeat;
  color: var(--d-white);
}

.drop-sheet .drop-warning p {
  margin: 0 0 8px;
  color: var(--d-on-navy-muted);
}

.drop-warning strong {
  color: var(--d-white);
}

.drop-warning .drop-btn--ghost {
  border-color: var(--d-orange);
  background: var(--d-orange);
  color: var(--d-navy);
}

.drop-warning .drop-btn--ghost:hover {
  background: var(--d-orange-soft);
}

.drop-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  margin: 8px 0 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--d-well);
  font-size: 0.9rem;
}

.drop-summary dt {
  font-weight: 700;
}

.drop-summary dd {
  margin: 0;
  color: var(--d-muted);
}

.drop-label {
  display: block;
  margin: 0 0 6px;
  font-size: 0.9rem;
  font-weight: 700;
}

.drop-label span {
  font-weight: 500;
  color: var(--d-faint);
}

.drop-sheet textarea {
  width: 100%;
  min-height: 76px;
  padding: 10px 12px;
  border: 1.5px solid var(--d-outline);
  border-radius: 12px;
  background: var(--d-white);
  color: var(--d-navy);
  font: inherit;
  /* 16px keeps iOS from zooming the sheet on focus. */
  font-size: 1rem;
  resize: vertical;
}

.drop-count {
  margin: 4px 0 6px;
  font-size: 0.75rem;
  color: var(--d-faint);
  text-align: right;
}

.drop-sheet .drop-error {
  margin: 0 0 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fdecec;
  color: var(--d-error);
  font-size: 0.88rem;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .drop-marker--step.is-waiting .drop-marker-dot {
    animation: none;
  }
}

/* Calibration guide (PRD-61 PR C): walkthrough, tool switch, brush circle,
   corner dots and edge handles, hollow waypoints, review notes, legend. */

.drop-progress--cal button {
  font-size: 0.72rem;
}

.drop-tools {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  max-width: calc(100% - 24px);
}

.drop-tools[hidden] {
  display: none;
}

.drop-tools-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

/* Highlight · Eraser · Corners: one segmented switch, the tool in use
   orange. */
.drop-tools-switch {
  flex-wrap: nowrap;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(1, 11, 27, 0.82);
  box-shadow: 0 6px 16px -6px rgba(1, 11, 27, 0.6);
}

.drop-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--d-white);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.drop-tool-btn[aria-pressed="true"] {
  background: var(--d-orange);
  color: var(--d-navy);
}

.drop-tool-btn--undo {
  min-height: 42px;
  padding: 0 14px 0 12px;
  background: rgba(1, 11, 27, 0.82);
  box-shadow: 0 6px 16px -6px rgba(1, 11, 27, 0.6);
}

.drop-tool-btn--undo:disabled {
  opacity: 0.45;
  cursor: default;
}

.drop-tool-btn:focus-visible,
.drop-brush-size:focus-visible {
  outline: 2px solid var(--d-white);
  outline-offset: 2px;
}

/* The five brush sizes: dots that grow with the brush. */
.drop-brush-sizes {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(1, 11, 27, 0.82);
  box-shadow: 0 6px 16px -6px rgba(1, 11, 27, 0.6);
}

.drop-brush-sizes[hidden] {
  display: none;
}

.drop-brush-size {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.drop-brush-dot {
  display: block;
  border-radius: 50%;
  background: var(--d-white);
}

.drop-brush-size[data-brush-step="-2"] .drop-brush-dot {
  width: 5px;
  height: 5px;
}

.drop-brush-size[data-brush-step="-1"] .drop-brush-dot {
  width: 9px;
  height: 9px;
}

.drop-brush-size[data-brush-step="0"] .drop-brush-dot {
  width: 14px;
  height: 14px;
}

.drop-brush-size[data-brush-step="1"] .drop-brush-dot {
  width: 20px;
  height: 20px;
}

.drop-brush-size[data-brush-step="2"] .drop-brush-dot {
  width: 27px;
  height: 27px;
}

.drop-brush-size[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px var(--d-orange);
}

.drop-brush-size[aria-pressed="true"] .drop-brush-dot {
  background: var(--d-orange);
}

.drop-brush {
  position: absolute;
  z-index: 6;
  border: 2px solid var(--d-white);
  border-radius: 50%;
  box-shadow:
    0 0 0 1.5px var(--d-navy),
    inset 0 0 0 1.5px rgba(1, 11, 27, 0.4);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.drop-brush[hidden] {
  display: none;
}

/* The eraser's circle is dashed: it takes paint off, it doesn't lay any. */
.drop-brush.is-erase {
  border-style: dashed;
}

/* A new size, shown for a moment mid-map with its width in words. */
.drop-brush.is-preview {
  background: rgba(255, 255, 255, 0.18);
}

.drop-brush.is-preview::after {
  content: attr(data-label);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 8px);
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(1, 11, 27, 0.86);
  color: var(--d-white);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

/* The highlight being painted (dropMap.js `drawPaint`). */
.drop-paint {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.drop-area {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.drop-shape-label {
  font-family: var(--d-font-text);
  font-size: 11px;
  font-weight: 800;
  fill: var(--d-white);
  stroke: var(--d-navy);
  stroke-width: 3px;
  paint-order: stroke;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

.drop-marker--corner {
  z-index: 3;
}

.drop-marker--corner .drop-marker-dot {
  width: 14px;
  height: 14px;
  border-width: 2.5px;
  font-size: 0;
}

.drop-marker--edge {
  z-index: 2;
}

.drop-marker--edge .drop-marker-dot {
  width: 18px;
  height: 18px;
  border-style: dashed;
  font-size: 11px;
  line-height: 1;
}

.drop-marker--house .drop-marker-dot {
  width: 24px;
  height: 24px;
  border-color: var(--d-white);
  background: var(--d-navy);
  color: var(--d-white);
  font-size: 13px;
}

.drop-marker--drop .drop-marker-dot {
  width: 26px;
  height: 26px;
  border-color: var(--d-white);
  background: #22c55e;
  color: var(--d-white);
  font-size: 13px;
}

.drop-marker--alert .drop-marker-dot {
  width: 24px;
  height: 24px;
  border-color: var(--d-white);
  background: var(--d-orange);
  color: var(--d-navy);
  font-size: 14px;
}

.drop-marker.is-hollow .drop-marker-dot {
  background: transparent;
  border-style: dashed;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7);
}

/* Heads-up pins (PRD-61 §10, PR E): 12 px badges, amber on navy. */
.drop-marker--pin .drop-marker-dot {
  width: 22px;
  height: 22px;
  border-color: var(--d-white);
  background: var(--d-navy);
  color: #f5c542;
  font-size: 12px;
}

.drop-marker--pin .drop-marker-dot svg {
  width: 12px;
  height: 12px;
}

/* "Watch Noah's trip" (PRD-61 §5.6, PR E): Noah rides the map, 28 px. */
.drop-noah {
  position: absolute;
  z-index: 5;
  width: 28px;
  height: 28px;
  object-fit: contain;
  transform: translate(-50%, -90%);
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(1, 11, 27, 0.45));
}

.drop-trip-list {
  margin: 0 0 12px;
  padding-left: 22px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--d-muted);
}

.drop-trip-list li + li {
  margin-top: 6px;
}

.drop-how-list {
  margin: 0 0 10px;
  padding-left: 22px;
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--d-muted);
}

.drop-how-list li + li {
  margin-top: 8px;
}

.drop-how-list strong {
  color: var(--d-navy);
}

.drop-review-notes {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.drop-review-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--d-well);
  font-size: 0.9rem;
  line-height: 1.4;
}

.drop-review-note span {
  flex: 1 1 auto;
}

.drop-kept {
  flex: none;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--d-navy);
  color: var(--d-white);
  font-size: 0.75rem;
  font-weight: 700;
}

.drop-sheet #cal-safe-note {
  width: 100%;
  min-height: 44px;
  margin: 0 0 8px;
  padding: 10px 12px;
  border: 1.5px solid var(--d-outline);
  border-radius: 12px;
  background: var(--d-white);
  color: var(--d-navy);
  font: inherit;
  font-size: 1rem;
}

/* The walkthrough's legend: the palette's colours with their labels, for
   pages without account.css (checkout, the track page, /vote). */
.drop-sheet .route-card-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
  color: var(--d-muted);
}

.drop-sheet .route-card-legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.drop-sheet .route-card-chip {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: none;
}

/* ── Address photos: the dialog + the after-save sheet (PRD-36 §9.9) ────
 * Self-sufficient on purpose: both open on pages without account.css
 * (checkout, the track page, /vote), so every rule they need lives here on
 * the --d-* vars, beside the editor's own. On /account the generic .btn /
 * .micro / .error / .link-btn classes resolve from that page's sheets, the
 * way the profile-photo dialog's do. */

.address-photo-dialog,
.finish-sheet {
  max-width: 24rem;
  width: calc(100vw - 2rem);
  border: 1px solid var(--d-outline);
  border-radius: 16px;
  padding: 1.25rem;
  color: var(--d-navy);
  background: var(--d-white);
}

.address-photo-dialog::backdrop,
.finish-sheet::backdrop {
  background: rgba(1, 11, 27, 0.5);
}

.address-photo-dialog h2,
.finish-sheet h2 {
  margin: 0;
  font-family: var(--d-font-display);
  font-size: 1.25rem;
}

.address-photo-dialog .micro,
.finish-sheet .micro {
  margin: 0.35rem 0 0;
}

.address-photo-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 1rem 0 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--d-well);
  border: 1px solid var(--d-outline);
}

.address-photo-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.address-photo-frame img[hidden] {
  display: none;
}

.address-photo-dialog .photo-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--d-faint);
}

.address-photo-dialog .photo-placeholder[hidden] {
  display: none;
}

.address-photo-dialog .photo-pick {
  display: flex;
  justify-content: center;
  margin-top: 0.9rem;
}

.address-photo-dialog .photo-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 1rem;
}

.address-photo-dialog .photo-remove {
  margin-top: 0.75rem;
}

.address-photo-dialog .photo-remove-confirm {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--d-outline);
}

.address-photo-dialog .photo-remove-confirm[hidden] {
  display: none;
}

.address-photo-dialog .photo-remove-confirm p {
  margin: 0;
  font-weight: 700;
}

.finish-slots {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.finish-slot {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--d-outline);
  border-radius: 12px;
}

.finish-slot-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.finish-slot-state {
  white-space: nowrap;
  color: var(--d-muted);
}

.finish-sheet .sheet-confirm-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 1rem;
}