/* src/styles/features/map-markers.css — journey-map markers (L.divIcon), leg paths and the legend.
   Built by features/map-markers.js. Tokens only. Region colour arrives through tone-<tone> on the icon
   root / the path (--tone fill, --tone-ink line + label, --on-tone glyphs). Every mark carries a 2px
   --surface halo so it separates from a busy, colourful basemap in both themes.
   Shu (--accent) appears only on: the GPS dot, tonight's ring, visited stamps. */

/* ── Icon roots ──────────────────────────────────────────────── */
.mk { background: none; border: 0; box-sizing: border-box; font-family: var(--font-sans); }
.mk *, .mk *::before, .mk *::after { box-sizing: border-box; }
.mk:focus { outline: none; }

/* 44px transparent tap target, mark centred on the coordinate */
/* Leaflet's own `.leaflet-marker-icon { display: block }` loads later (lazily) at the same specificity: without the
   doubled class it wins, and every mark sits in the top-left corner of its hit box — 9–16px off its coordinate. */
.mk-hit, .leaflet-marker-icon.mk-hit { display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mk-hit:focus-visible > * { outline: 2px solid var(--text); outline-offset: 3px; }

/* zero-size anchor: the child centres itself on the coordinate */
.mk-anchor { overflow: visible; pointer-events: none; }
.mk-anchor > * { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); }

.mk-num {
  font: 600 var(--fs-label)/1 var(--font-sans);
  font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0;
}

/* ── Stay: 26px square (r4), journey number or bed glyph ─────── */
.mk-stay {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--r-1);
  background: var(--tone); color: var(--on-tone);
  box-shadow: 0 0 0 2px var(--surface), var(--shadow-float);
}
.mk-stay .mk-num { font-size: var(--fs-small); }
.mk-stay.is-tonight { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4.5px var(--accent), var(--shadow-float); }
.mk-stay.is-placeholder {
  background: var(--surface); color: var(--tone-ink);
  border: 1.5px dashed var(--tone-ink);
}

/* ── Day stop: 24px circled number ───────────────────────────── */
.mk-stop {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--tone); color: var(--on-tone);
  box-shadow: 0 0 0 2px var(--surface), var(--shadow-float);
  transition: transform var(--dur-1) var(--ease-out);
}
.mk-stop.is-must { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--tone-ink), var(--shadow-float); }
.mk-stop.is-selected {
  transform: scale(1.25);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text), var(--shadow-float);
}
/* must-do star: a small badge on the ring */
.mk-star {
  position: absolute; top: -7px; right: -7px;
  display: flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--surface); color: var(--tone-ink);
  box-shadow: 0 0 0 1px var(--tone-ink);
}
.mk-star .icon { fill: currentColor; stroke-width: 1; }

/* visited: the inked hanko disc (shared #ink-press filter) on paper, set slightly askew */
.mk-stop.is-visited { background: var(--surface); color: var(--on-accent); transform: rotate(-7deg); }
.mk-stop.is-visited.is-selected { transform: rotate(-7deg) scale(1.25); }
.mk-ink { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mk-ink circle { fill: var(--accent); }
.mk-check { position: relative; stroke-width: 2.5; }

/* ── Place pin: 12px dot / square, 18px selected ─────────────── */
.mk-place {
  display: block; width: 12px; height: 12px; border-radius: 50%;
  background: var(--tone);
  box-shadow: 0 0 0 2px var(--surface), var(--shadow-float);
  transition: width var(--dur-1) var(--ease-out), height var(--dur-1) var(--ease-out);
}
.mk-place.is-square { border-radius: 2px; }
.mk-place.is-must { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--tone-ink), var(--shadow-float); }
.mk-place.is-selected {
  width: 18px; height: 18px;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text), var(--shadow-float);
}
.mk-place.is-square.is-selected { border-radius: 3px; }

/* ── Place label: 11px/600, paper halo, hangs right of the pin ─ */
.mk-anchor > .mk-label {
  left: 12px; transform: translateY(-50%);
  max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 2px 3px;                       /* room for the stroke so it is not clipped */
  font: 600 var(--fs-micro)/var(--lh-micro) var(--font-sans);
  color: var(--tone-ink);
  -webkit-text-stroke: 3px var(--surface); paint-order: stroke fill;
  stroke-linejoin: round;
}

/* ── Chapter badge: region name-plate in its tone ────────────── */
.mk-chapter {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px 3px 6px; border-radius: var(--r-1);
  background: var(--tone); color: var(--on-tone);
  box-shadow: 0 0 0 2px var(--surface), var(--shadow-float);
  font: 600 var(--fs-label)/var(--lh-label) var(--font-sans);
  letter-spacing: var(--track-label); text-transform: uppercase; white-space: nowrap;
  pointer-events: auto; cursor: pointer;
}
.mk-chapter::before { content: ''; position: absolute; inset: -11px -6px; }   /* 44px-tall hit area */
.mk-chapter-kanji { font: 800 var(--fs-caption)/var(--lh-label) var(--font-mincho); letter-spacing: 0; }

/* ── "?" chip on an unplanned stretch ────────────────────────── */
.mk-gap {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface); color: var(--text-2);
  border: 1.5px dashed var(--text-3);
  box-shadow: 0 0 0 2px var(--surface), var(--shadow-float);
  font: 600 var(--fs-small)/1 var(--font-sans);
}

/* ── Exit tag: a small name-plate with an arrow, at the map edge ─ */
.mk-exit {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 5px 2px 6px; border-radius: var(--r-1);
  background: var(--surface); color: var(--text-2);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-float);
  font: 600 var(--fs-micro)/var(--lh-micro) var(--font-sans);
  font-variant-numeric: tabular-nums; letter-spacing: var(--track-label); white-space: nowrap;
}
.mk-exit .icon { stroke-width: 2; }

/* ── Mode glyph riding a leg's midpoint ──────────────────────── */
.mk-mode {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface); color: var(--tone-ink);
  border: 1.5px solid var(--tone-ink);
  box-shadow: 0 0 0 2px var(--surface);
}

/* ── You are here: the shu dot with a soft halo ──────────────── */
.mk-me {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--surface), var(--shadow-float);
}
.mk-me::before {
  content: ''; position: absolute; inset: -9px; border-radius: 50%;
  background: var(--accent); opacity: .2; z-index: -1;
  animation: mk-me-pulse 2.4s var(--ease-in-out) infinite;
}
@keyframes mk-me-pulse {
  0%, 100% { transform: scale(.75); opacity: .26; }
  50% { transform: scale(1.1); opacity: .12; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-me::before { animation: none; }
  .mk-stop, .mk-place { transition: none; }
}

/* ── Leg paths (Leaflet SVG renderer; CSS beats the inline stroke attributes) ──
   Stack per leg, bottom first: .map-leg-casing → .map-leg.map-leg-<mode>.tone-<tone> → .map-leg-core */
.map-leg { stroke: var(--tone-ink); stroke-opacity: 1; fill: none; }
.map-leg-casing { stroke: var(--surface); stroke-opacity: .9; fill: none; }
.map-leg-core { stroke: var(--surface); stroke-opacity: .95; fill: none; }

/* dotted and unplanned lines sit on a quieter ribbon */
.map-leg-casing-flight, .map-leg-casing-connector, .map-leg-casing-gap { stroke-opacity: .8; }

/* not a region's line: neutral ink */
.map-leg-gap, .map-leg-connector { stroke: var(--text-3); }

/* suggested / tbd / planned */
.map-leg.is-tentative { stroke-opacity: .55; }
.map-leg-core.is-tentative { stroke-opacity: .6; }

/* ── Legend: collapsible corner card ─────────────────────────── */
.mk-legend {
  width: max-content; max-width: min(240px, calc(100vw - 2 * var(--gutter)));
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-3);
  box-shadow: var(--shadow-float);
  font-family: var(--font-sans);
}
.mk-legend-summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: var(--tap-min); padding: 0 var(--s-3);
  cursor: pointer; list-style: none; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.mk-legend-summary::-webkit-details-marker { display: none; }
.mk-legend-summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-3); }
.mk-legend-heading {
  font: 600 var(--fs-label)/var(--lh-label) var(--font-sans);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-2);
}
.mk-legend-chevron { color: var(--text-3); transition: transform var(--dur-2) var(--ease-out); }
.mk-legend[open] .mk-legend-chevron { transform: rotate(180deg); }

.mk-legend-body {
  display: grid; gap: var(--s-3);
  max-height: min(56vh, 420px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: var(--s-1) var(--s-3) var(--s-3);
  border-top: 1px solid var(--line);
}
.mk-legend-title {
  margin: var(--s-2) 0 var(--s-1);
  font: 600 var(--fs-micro)/var(--lh-micro) var(--font-sans);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-3);
}
.mk-legend-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.mk-legend-row { display: flex; align-items: center; gap: var(--s-2); min-height: 28px; }
.mk-legend-sample { flex: 0 0 40px; display: flex; align-items: center; justify-content: center; height: 28px; }
.mk-legend-text { font: 400 var(--fs-caption)/var(--lh-caption) var(--font-sans); color: var(--text-2); }

/* line samples: neutral ink (a leg takes its region's tone on the map) */
.mk-legend-line { display: block; overflow: visible; }
.mk-legend-line .map-leg { stroke: var(--text); }
.mk-legend-line .map-leg-gap { stroke: var(--text-3); }
.mk-legend-line .map-leg-casing { stroke: none; }
.mk-legend-line .map-leg-core { stroke: var(--surface); }

/* region tone chip */
.mk-legend-tone {
  width: 22px; height: 14px; border-radius: var(--r-1);
  background: var(--tone); box-shadow: inset 0 0 0 1px var(--tone-ink);
}

/* marker samples reuse the real marks; flatten their floating shadow inside the card */
.mk-swatch { position: relative; display: flex; align-items: center; justify-content: center; width: 30px; height: 28px; }
.mk-swatch .mk-stay, .mk-swatch .mk-stop, .mk-swatch .mk-place { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--line); }
.mk-swatch .mk-stay { width: 22px; height: 22px; }
.mk-swatch .mk-stay.is-tonight { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.mk-swatch .mk-stop { width: 22px; height: 22px; }
.mk-swatch .mk-stop.is-must { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--tone-ink); }
.mk-swatch .mk-me { position: relative; box-shadow: 0 0 0 2px var(--surface); }
.mk-swatch .mk-me::before { animation: none; inset: -6px; z-index: 0; }

@media print {
  .mk-legend { box-shadow: none; }
  .mk-legend-chevron { display: none; }
  .mk-legend-body { max-height: none; overflow: visible; }
  .mk-me::before { animation: none; }
}

/* ══ Map v2.1 — blocks, fanned-out badges, neighbourhood bubbles, street paths ══════════════════ */

/* ── Stay still to book: an empty paper slot with a dashed outline (no tone fill) ─ */
.mk-stay.is-placeholder { box-shadow: 0 0 0 2px var(--surface); }
.mk-stay.is-placeholder.is-tonight { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4.5px var(--accent); }

/* ── Chapter badge, compact: a quiet paper plate beside the stay ─ */
.mk-chapter.is-compact {
  gap: 4px; padding: 1px 6px 1px 5px;
  background: var(--surface); color: var(--tone-ink);
  box-shadow: 0 0 0 1px var(--tone-ink), 0 0 0 3px var(--surface);
  font: 600 var(--fs-micro)/var(--lh-micro) var(--font-sans);
  letter-spacing: var(--track-label);
}
.mk-chapter.is-compact::before { inset: -14px -6px; }
.mk-chapter.is-compact .mk-chapter-kanji { font-size: var(--fs-label); line-height: var(--lh-micro); }

/* ── Block name-plate: number disc + title + how many places ─── */
.mk-block {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 3px 0 1px; border-radius: var(--r-pill);
  background: var(--surface); color: var(--tone-ink);
  border: 1.5px solid var(--tone-ink);
  box-shadow: 0 0 0 2px var(--surface), var(--shadow-float);
  white-space: nowrap;
  transition: transform var(--dur-1) var(--ease-out);
}
.mk-block::before { content: ''; position: absolute; inset: -11px -4px; }   /* 44px-tall hit area */
.mk-hit:active > .mk-block, .mk-hit:active > .mk-area { transform: scale(.97); }
.mk-block-n {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--tone); color: var(--on-tone);
}
.mk-block-title {
  max-width: 22ch; overflow: hidden; text-overflow: ellipsis;
  font: 600 var(--fs-label)/var(--lh-label) var(--font-sans); letter-spacing: 0;
}
.mk-block-count {
  flex: none; display: flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 5px; border-radius: var(--r-pill);
  background: var(--tone-wash); color: var(--tone-ink);
  font: 600 var(--fs-micro)/1 var(--font-sans); font-variant-numeric: tabular-nums lining-nums;
}
.mk-block > .mk-star { top: -8px; left: -6px; right: auto; }
/* an undecided block: dashed, the number hollow */
.mk-block.is-optional { border-style: dashed; box-shadow: 0 0 0 2px var(--surface); }
.mk-block.is-optional .mk-block-n { background: none; color: var(--tone-ink); box-shadow: inset 0 0 0 1px var(--tone-ink); }
.mk-block.is-optional .mk-block-title { font-weight: 500; opacity: .85; }
.mk-block.is-optional .mk-block-count { background: none; box-shadow: inset 0 0 0 1px var(--line-strong); }

/* ── Block member: 18px lettered dot ─────────────────────────── */
.mk-member {
  position: relative; flex: none; display: flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: var(--r-pill);
  /* paper with the region's ink: an option inside a stop, a clear step below the solid numbered stops */
  background: var(--surface); color: var(--tone-ink);
  box-shadow: 0 0 0 1.5px var(--tone-ink), var(--shadow-float);
  transition: transform var(--dur-1) var(--ease-out), min-width var(--dur-1) var(--ease-out), height var(--dur-1) var(--ease-out);
}
/* Folded (class `is-dot` on the marker element): the block's places are too close for letters at this zoom */
.mk.is-dot .mk-member:not(.is-selected) {
  min-width: 9px; width: 9px; height: 9px; padding: 0;
  background: var(--tone-ink); box-shadow: 0 0 0 1.5px var(--surface);
}
.mk.is-dot .mk-member:not(.is-selected) > * { display: none; }
.mk.is-dot.is-optional .mk-member:not(.is-selected) { background: var(--surface); border: 0; box-shadow: 0 0 0 1.5px var(--tone-ink); }
.mk-letter { font: 700 var(--fs-micro)/1 var(--font-sans); letter-spacing: 0; text-transform: lowercase; }
.mk-member.is-must { box-shadow: 0 0 0 2.5px var(--tone-ink), var(--shadow-float); }
.mk-member.is-selected {
  transform: scale(1.3);
  background: var(--tone); color: var(--on-tone);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text), var(--shadow-float);
}
.mk-member.is-visited { background: var(--surface); color: var(--on-accent); transform: rotate(-7deg); }
.mk-member.is-visited.is-selected { transform: rotate(-7deg) scale(1.3); }
.mk-member .mk-check { width: 11px; height: 11px; }

/* optional stops / members (class `is-optional` on the marker element): hollow, dashed — not on the path */
.mk.is-optional .mk-stop:not(.is-visited), .mk.is-optional .mk-member:not(.is-visited) {
  background: var(--surface); color: var(--tone-ink);
  border: 1.5px dashed var(--tone-ink);
  box-shadow: 0 0 0 2px var(--surface);
}

/* ── True position of a fanned-out badge: 6px dot ────────────── */
.mk-pin {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--tone-ink);
  box-shadow: 0 0 0 1.5px var(--surface);
}

/* ── Time pill riding a path ("7 min") ───────────────────────── */
.mk-time {
  display: inline-flex; align-items: center; height: 16px; padding: 0 5px; border-radius: var(--r-pill);
  background: var(--surface); color: var(--tone-ink);
  box-shadow: 0 0 0 1px var(--line-strong);
  font: 600 var(--fs-micro)/1 var(--font-sans);
  font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0; white-space: nowrap;
}

/* ── Neighbourhood bubble: name + count, the days we are there ─ */
.mk-area {
  position: relative; flex: none; display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 3px 9px 3px 3px; border-radius: 14px;
  background: var(--surface); color: var(--text);
  border: 1.5px solid var(--tone-ink);
  box-shadow: 0 0 0 2px var(--surface), var(--shadow-float);
  white-space: nowrap;
  transition: transform var(--dur-1) var(--ease-out);
}
.mk-area::before { content: ''; position: absolute; inset: -8px; }   /* generous hit area */
.mk-area:not(.is-undated) { padding: 3px 8px 5px; border-radius: var(--r-3); }
.mk-area-head { display: inline-flex; align-items: center; gap: 5px; }
.mk-area-count {
  flex: none; display: flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-pill);
  background: var(--tone); color: var(--on-tone);
}
.mk-area-label {
  max-width: 18ch; overflow: hidden; text-overflow: ellipsis;
  font: 600 var(--fs-label)/var(--lh-label) var(--font-sans); letter-spacing: 0;
}
.mk-area-must { display: flex; color: var(--tone-ink); }
.mk-area-must .icon { fill: currentColor; stroke-width: 1; }
.mk-area-dates { display: inline-flex; align-items: center; gap: 4px; }
.mk-area-more { font: 600 var(--fs-micro)/1 var(--font-sans); color: var(--text-3); }

/* mini hanko date stamp (the shared .stamp look at map size): weekday kanji over the day number */
.mk-date {
  position: relative; flex: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 20px; height: 24px; color: var(--text-2); line-height: 1;
  transform: rotate(var(--rot, 0deg));
}
.mk-date-ink { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mk-date-ink rect { fill: var(--surface); stroke: var(--text-3); stroke-width: 1.25; }
.mk-date-wd { position: relative; font: 800 8px/1 var(--font-mincho); margin-bottom: 1px; }
.mk-date-num { position: relative; font: 600 var(--fs-micro)/1 var(--font-serif); font-variant-numeric: lining-nums; }

/* ── Block patch + leader lines (Leaflet SVG renderer) ───────── */
.map-hull {
  fill: var(--tone); fill-opacity: .16;   /* the region's own colour, thin: --tone-wash turns dark in the dark theme and muddies a light basemap */
  stroke: var(--tone-ink); stroke-opacity: .5; stroke-width: 1.5;
  stroke-linejoin: round; stroke-linecap: round;
}
.map-hull.is-optional { fill-opacity: .08; stroke-dasharray: 5 5; stroke-opacity: .45; }
.map-leader { stroke: var(--tone-ink, var(--text)); stroke-opacity: .85; stroke-width: 1.25; fill: none; stroke-linecap: round; }

/* ── Day paths: walk (region ink, via .map-leg) and hop (neutral) ─ */
.map-leg-hop { stroke: var(--text-3); }
.map-leg-casing-walk { stroke-opacity: .85; }
.map-leg-casing-hop { stroke-opacity: .7; }

/* ── Legend additions ────────────────────────────────────────── */
.mk-legend-line .map-leg-hop { stroke: var(--text-3); }
.mk-legend-hull { position: relative; display: block; width: 30px; height: 18px; }
.mk-legend-hull svg { display: block; overflow: visible; }
.mk-legend-dots { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; }
.mk-legend-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 0 1px var(--surface); }
.mk-swatch .mk-member { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--line); }
.mk-swatch .mk-stay.is-placeholder { box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .mk-member, .mk-block, .mk-area { transition: none; }
}