/* Three-channel marker encoding (brief §5.16, plan §5.6):
   shape = kerb classification, fill = status, outline = source.
   The visible glyph is 24×24; a transparent padding ring makes the tap target 44×44. */
.marker {
  width: 24px;
  height: 24px;
  padding: 10px; /* 24 + 10*2 = 44px tap target */
  box-sizing: content-box;
}

.marker svg {
  width: 24px;
  height: 24px;
  overflow: visible;
}

.marker svg .glyph {
  fill: var(--colour-positive);
  stroke: var(--colour-mtk-outline);
  stroke-width: 1.5px;
}

/* Shape channel — distinct geometry per classification (set in markers.js via
   which SVG shape is drawn). Fill colour reinforces but is never the sole signal. */
.marker.kerb-raised svg .glyph {
  fill: var(--colour-warning);
}
.marker.kerb-no svg .glyph {
  fill: var(--colour-absence);
}

/* Status channel — fill style. */
.marker.status-pending svg .glyph {
  fill-opacity: 0.5;
}
.marker.status-placing svg .glyph {
  fill: none;
  stroke: var(--colour-placing);
  stroke-width: 2px;
}

/* Source channel — outline weight. */
.marker.source-osm svg .glyph {
  stroke: var(--colour-osm-outline);
  stroke-width: 3px;
}
.marker.source-mtk svg .glyph {
  stroke: var(--colour-mtk-outline);
  stroke-width: 1.5px;
}

/* Segment / junction styling + the "no kerbs here" assertion tint. */
.segment-line {
  stroke: #3b82f6;
  stroke-width: 3;
}
.junction-area {
  fill: #94a3b8;
  fill-opacity: 0.25;
  stroke: #64748b;
}
/* Pavement footways — the snap target; subtle grey, beneath kerb markers.
   Real OSM footways dashed; pavements synthesised from a road's sidewalk tag
   (estimated position) dotted, to signal they're inferred not surveyed. */
.footway-line {
  stroke: #9ca3af;
  stroke-width: 2;
  stroke-dasharray: 3 3;
  opacity: 0.7;
}
.footway-line-synth {
  stroke: #9ca3af;
  stroke-width: 2;
  stroke-dasharray: 1 4;
  opacity: 0.55;
}
.has-no-kerbs-assertion {
  stroke: var(--colour-assertion);
  stroke-dasharray: 6 4;
}

/* "Needs more reports" cue (Phase 8 §5.7). Dashed amber segment overlay + a small
   junction badge; paired with aria-labels in markers.js (never stroke-only). */
.needs-more-line {
  stroke: var(--colour-placing);
}

.needs-more-badge {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  background: var(--colour-placing);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Snap indicator: a line from the pin to the snap target + a label. */
.snap-indicator-line {
  stroke: var(--colour-placing);
  stroke-width: 2;
  stroke-dasharray: 4 3;
}

.snap-label {
  background: var(--colour-text);
  color: #fff;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  white-space: nowrap;
}