/* The map, drawn — cycle 39, extracted from app.css unchanged.
 *
 * WHY IT IS ITS OWN FILE. Two pages render this map now: index.html's overlay (a card over the
 * street, design-01 §4.4) and welcome.html's survey (where a stranger picks somewhere to
 * stand). One stylesheet, because spine §7.3's one-vocabulary rule has a visual half — a map
 * that reads differently on two surfaces is two maps — and because the alternative is the copy
 * that drifts.
 *
 * EVERY RULE HERE IS DRAWN FOR A DARK GROUND. The strokes and labels are pale ink at low alpha,
 * chosen against `.map`'s glass so they read over a bright noon facade. On `--canvas` they are
 * invisible. That is why welcome.html gives its survey the same dark panel instead of giving
 * this map a second palette: recolouring it would have made two maps out of one.
 *
 * THE OVERLAY IS NOT HERE. `.map`, `.map-body`, `@keyframes map-raise` and the
 * `body[data-map-open="true"]` rules stayed in app.css, because they are about a card hanging
 * over a scene and the welcome page has no scene to hang anything over.
 *
 * Moved verbatim: no value in this file was changed by the extraction, which is what makes
 * tests/test_map.py's whole suite the check that it was byte-neutral.
 */

.map-art { position: absolute; inset: 0; width: 100%; height: 100%; }

/* The ground the neighbourhood sits on. Faint, because on a head-up display the ground
   is context and the places are the message. */
.map-field { fill: rgba(246,239,225,.16); }

/* The edge of the world. design-01 §12: this is where Katong ends, so it is a drawn
   boundary rather than a fade that implies more beyond it. */
.map-edge-of-world {
  fill: none;
  stroke: rgba(246,239,225,.38);
  stroke-width: 1.4;
  stroke-dasharray: 2 6;
}

/* Streets. Three ranks, so the network has a hierarchy to read rather than being an even
   mesh — which is most of what stops a road map looking like graph paper. */
.map-road {
  fill: none;
  stroke: var(--canvas);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.map-road[data-rank="primary"]   { stroke-width: 7.5; opacity: .92; }
.map-road[data-rank="secondary"] { stroke-width: 5;   opacity: .74; }
.map-road[data-rank="minor"]     { stroke-width: 2.8; opacity: .52; }

.map-street {
  position: absolute;
  transform: translate(-50%, -50%) rotate(var(--angle, 0deg));
  transform-origin: center;
  white-space: nowrap;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  /* Ink on the roads, not white on white. The roads are the pale thing on this surface,
     so a pale name on one is invisible — which is exactly what round 7 reported. The halo
     is what keeps it readable where a name overhangs its road onto the darker land. */
  color: var(--ink);
  text-shadow:
    0 0 3px var(--canvas), 0 0 3px var(--canvas),
    0 1px 2px rgba(246,239,225,.9), 0 -1px 2px rgba(246,239,225,.9);
}
.map-street[data-rank="primary"] { font-size: 9px; }
.map-street[data-rank="minor"]   { font-size: 7.5px; color: var(--ink-soft); }

/* The walk. These are the edges you can actually travel, which is a different fact from
   the streets — a street is ground, an edge is a move the world offers you. */
.map-edge {
  stroke: var(--gold);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 1 6;
  opacity: .72;
}

.map-footprint {
  fill: color-mix(in srgb, var(--gold) 26%, transparent);
  stroke: color-mix(in srgb, var(--gold) 72%, transparent);
  stroke-width: 1.5;
}
.map-mark[data-kind="street_segment"] .map-footprint { fill: color-mix(in srgb, var(--gold) 32%, transparent); }
.map-mark[data-here="true"] .map-footprint {
  fill: color-mix(in srgb, var(--clay) 40%, transparent);
  stroke: var(--clay);
  stroke-width: 2;
}
.map-dot { fill: var(--canvas); }
.map-mark[data-here="true"] .map-dot { fill: var(--clay); }

/* The fact layer. Names are DOM over the drawing, never inside it (spine §1.1) — the
   same rule, and the same remedy, as a building's signage in a scene. */
.map-pin {
  position: absolute;
  /* Anchored at the footprint's centre, then dropped by its radius so the label clears
     the circle it belongs to. --drop comes from the projection, so a bigger footprint
     pushes its own name further down without anyone choosing a number per scene. */
  transform: translate(-50%, calc(-50% + var(--drop, 0px) + 13px));
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 3px 7px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--canvas);
  cursor: pointer;
  text-align: center;
}

/* THE NAME, WHERE A SURFACE ASKS FOR ONE — cycle 40, review round 2. Same pill the "you are
   here" label uses, in the world's own ink rather than the pink that means you: this says what
   a place IS, and that one says where you are. */
.map-name {
  order: 2;
  max-width: 9rem;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 78%, transparent);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* AND THE PIN READS AS SOMETHING YOU PRESS. The human's note was that these did not look like
   links; they were a transparent button over a drawing, which is exactly what they looked like.
   A ring under the miniature is the smallest thing that says "this one is a target" without
   putting a box around artwork the map is otherwise careful to let breathe. */
.map-pin[data-linked="true"] .map-name { background: color-mix(in srgb, var(--ink) 82%, transparent); }

.map-mark[data-linked="true"] .map-footprint {
  fill: color-mix(in srgb, var(--gold) 34%, transparent);
  stroke: var(--gold);
  stroke-width: 2.2;
}

.map-pin:hover .map-name,
.map-pin:focus-visible .map-name { background: var(--tile-teal-deep); }

.map-pin:focus-visible { outline: 2px solid var(--canvas); outline-offset: 2px; border-radius: 999px; }

/* The place's mark. Drawn, not named — round 7: icons are told apart at a glance and
   three identical dots with three names are not. The name lives on the button's
   accessible label and in the list view (design-01 §9). */
.map-glyph {
  fill: var(--canvas);
  stroke: var(--ink);
  stroke-width: 0.8;
  stroke-linejoin: round;
  paint-order: stroke;
}
.map-mark[data-here="true"] .map-glyph { fill: var(--tile-pink); }

/* "Something is going on here" and deliberately nothing more precise. design-01 §4.4
   asks for a light indication; a number would be a count, and an unbacked count is an
   automatic failure in the trust rubric. There is nowhere here to put one. */
.map-pin[data-has-content="true"]::after {
  content: "";
  position: absolute;
  top: calc(50% - var(--drop, 0px) - 15px);
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 1.5px rgba(31,44,38,.55);
}

.map-here {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--tile-pink);
  padding: 1px 6px;
  border-radius: 999px;
}

.map-caveat {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: .03em;
  color: rgba(246,239,225,.66);
  text-align: center;
}

/* North, on a map whose grid is not square to the screen.
   The streets meet the frame at about 30 degrees because Katong's grid does, and the
   needle is how a person finds that out without being told. Turning the map until the
   roads were level would have squared the picture and un-squared the compass, and
   design-01 §3.4 makes direction the one thing that may never be elided. */
/* BIGGER SINCE CYCLE 40, on the human's note: "the button on the map is too small, I didn't
   notice they're there." It was the tap minimum, which is a FLOOR for reachability and was
   never an argument that a control should sit at it. This one also has a job nobody guesses —
   design-01 §3.4 makes direction the thing that may never be elided, and a needle nobody
   notices elides it just as well as no needle. */
.map-north {
  position: absolute;
  left: 14px;
  bottom: 52px;
  width: 56px;
  height: 56px;
  padding: 9px;
  border: 1px solid rgba(246,239,225,.55);
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 62%, transparent);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
  cursor: pointer;
}
.map-north-art { width: 100%; height: 100%; display: block; }
.map-north-needle { fill: var(--canvas); }
.map-north-pip { fill: var(--tile-pink); }
/* Squared up: north is no longer up, so the control says so rather than looking the same
   in both states. */
.map-north[data-squared="true"] {
  background: color-mix(in srgb, var(--tile-pink) 30%, transparent);
  border-color: color-mix(in srgb, var(--tile-pink) 65%, transparent);
}