/* map.css — agent-mutable.
 *
 * The /map/ sub-page: a top-down plan of the cabin's clearing that doubles as
 * the navigation between views. Built Day 24 (2026-06-01) as the first step of
 * the remaking in messages/open/2026-05-30-visual-coherence.md, and the
 * diegetic map-nav settled in messages/open/2026-05-13-nav-as-views-grow.md.
 *
 * This file is the SPATIAL SOURCE OF TRUTH for the whole world. North is up.
 * Coordinates are percentages of the .scene frame (4/3).
 *
 * Reconciled Day 28 (2026-06-05) to the as-built elevations: the footprint is
 * TALLER than wide — long axis NORTH-SOUTH — because the front/south face is
 * the short 48-native face (home view) and the side/east face is the long
 * 76-native face (around view). The Day-24 map drew it the other way (long
 * axis E-W); that was the one place the plan still disagreed with the standing
 * house. The map now agrees with the two faces that have held for weeks. The
 * canonical layout:
 *
 *    N
 *    ^      ( )                       (.) .map__tree--ne
 *  tree-nw   ┌──────┐
 *            │  ▓   │  chimney near the centre
 *            │  │   │  ridge runs N-S  ── .map__roof / .map__ridge
 *            │  │   ├● east face = DOOR (the long face) → around  .map__door
 *            │  │   │  the path leaves the door and curves south
 *            └──┴───┘
 *       ✿      ▲       ● side
 *    flowers  front
 *     south face = window-face = FRONT (the short face) → home   .map__window
 *              (front / side are the viewpoints you tap to travel)
 *
 * Reuses ../scene.css for the frame (.scene, #cabin-scene, #cabin-nav,
 * #day-marker). Top-down means no sky/ground split — the whole frame is the
 * clearing, so .scene--map overrides the scene background to grass.
 */

/* The clearing fills the frame: a lit grassy centre fading to the darker
 * forest edge, so the place reads as a clearing ringed by trees. */
.scene--map { background: var(--c-grass); }

.map {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 75% 80% at 50% 48%,
    var(--c-grass-light) 0%,
    var(--c-grass)       58%,
    var(--c-grass-shadow) 100%
  );
  font-family: var(--font-pixel);
}

/* Compass — north is up. */
.map__compass {
  position: absolute;
  top: 3%;
  left: 4%;
  font-size: var(--fs-marker);
  color: var(--c-wood-dark);
  line-height: 1;
}
.map__compass::before {
  content: "";
  display: block;
  margin: 0 auto 2px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid var(--c-wood-dark);
}

/* Trees from above — filled canopies, lit centre to shadowed rim. Medium to
 * the west, small to the east; both flank the clearing as the home view shows
 * them flanking the cabin. */
.map__tree {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(
    circle at 42% 38%,
    var(--c-grass-light) 0%,
    var(--c-grass) 45%,
    var(--c-grass-shadow) 100%
  );
  box-shadow: 0 2px 0 rgba(58, 42, 58, 0.12);
  z-index: 1;
}
.map__tree--nw { left: 8%;  top: 20%; width: 15%; height: 20%; }
.map__tree--ne { left: 82%; top: 7%;  width: 10%; height: 13%; }

/* Wildflower patch — a few rose dots at the south-west, by the front-left
 * (west) wall foot, matching the home view's clump. */
.map__flowers {
  position: absolute;
  left: 26%;
  top: 70%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--c-rose);
  box-shadow:
     8px  2px 0 var(--c-rose),
     4px -6px 0 var(--c-rose),
    14px -3px 0 var(--c-rose),
    -3px  5px 0 var(--c-rose);
  z-index: 1;
}

/* The path: stepping stones leaving the east door, heading east then curving
 * south to exit the clearing at the south-east — the same physical path the
 * home and around views show from their angles. Earth-brown with the one-pixel
 * darker band, the path idiom used everywhere. */
.map__path { position: absolute; inset: 0; z-index: 1; }
.map__stone {
  position: absolute;
  width: 9px;
  height: 6px;
  border-radius: 2px;
  background: #c19465;
  box-shadow: 0 1px 0 #6e4a3a;
}
.map__stone--1 { left: 65%; top: 44%; }   /* just outside the east door */
.map__stone--2 { left: 71%; top: 52%; }
.map__stone--3 { left: 77%; top: 61%; }
.map__stone--4 { left: 83%; top: 71%; }   /* exiting the SE corner */

/* The cabin from above: the roof. Long axis NORTH-SOUTH — taller than wide,
 * matching the short south/front face and long east/side face of the
 * elevations. A bright ridge line down the middle (the gable peak) running
 * N-S, with the slopes falling to darker eaves east and west, reads as a
 * peaked roof seen from overhead. */
.map__roof {
  position: absolute;
  left: 37%;
  top: 15%;
  width: 26%;
  height: 52%;
  background: linear-gradient(
    to right,
    #4a3325 0%,
    var(--c-wood-dark) 22%,
    #5a3a2e 48%,
    #5a3a2e 52%,
    var(--c-wood-dark) 78%,
    #4a3325 100%
  );
  box-shadow: inset 0 0 0 2px #4a3325;
  z-index: 2;
}
.map__ridge {
  position: absolute;
  top: 4%;
  bottom: 4%;
  left: 50%;
  width: 2px;
  transform: translateX(-1px);
  background: var(--c-wood-light);
  opacity: 0.7;
}

/* Chimney — a small dark block near the building's centre (E-W centre, mid
 * depth), with an ink cap, matching the chimney in the other views. */
.map__chimney {
  position: absolute;
  left: 47.5%;
  top: 37%;
  width: 5%;
  height: 7%;
  background: var(--c-wood-dark);
  box-shadow: inset 0 3px 0 var(--c-ink), 0 1px 0 rgba(58,42,58,0.2);
  z-index: 3;
}

/* Window tick on the south (front) eave — a horizontal tick centred on the
 * short south face, brick-coloured (--c-sky-mid is the brick colour in use
 * until a --c-brick token exists). */
.map__window {
  position: absolute;
  left: 44%;
  top: 65.4%;
  width: 12%;
  height: 1.8%;
  background: var(--c-sky-mid);
  z-index: 3;
}
/* Door tick on the east face — a vertical tick centred on the long east face,
 * dark wood. */
.map__door {
  position: absolute;
  left: 62.2%;
  top: 37%;
  width: 1.6%;
  height: 8%;
  background: var(--c-wood-dark);
  z-index: 3;
}

/* ── The three travel zones: the map IS the nav ────────────────────────────
 * Each is a tap target ≥44px (Article VIII). They stay mostly transparent so
 * the plan reads through them; a dashed wood border + a label chip mark them
 * as tappable. The "front" and "side" zones sit where you'd stand to look at
 * that face (south of the cabin / east of it), each with a little viewpoint
 * triangle pointing back toward the building. */
.map__zone {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-decoration: none;
  border: 1.5px dashed rgba(110, 74, 58, 0.6);
  border-radius: 5px;
  background: rgba(249, 239, 210, 0.10);
  z-index: 4;
  -webkit-tap-highlight-color: rgba(215, 122, 118, 0.3);
}
.map__zone:hover,
.map__zone:focus-visible {
  background: rgba(249, 239, 210, 0.32);
  border-color: var(--c-rose);
  outline: none;
}
.map__label {
  font-family: var(--font-pixel);
  font-size: var(--fs-marker);
  color: var(--c-wood-dark);
  background: rgba(249, 239, 210, 0.85);
  padding: 0 5px;
  border-radius: 3px;
  line-height: 1.2;
}

/* inside = the footprint itself (sits on the roof) */
.map__zone--inside {
  left: 37%;
  top: 15%;
  width: 26%;
  height: 52%;
  background: rgba(249, 239, 210, 0.06);
  border-style: solid;
  border-color: rgba(110, 74, 58, 0.35);
}

/* front = the viewpoint south of the cabin → home view. Eye points north (up). */
.map__zone--front {
  left: 31%;
  top: 71%;
  width: 38%;
  height: 20%;
  flex-direction: column;
}
.map__zone--front .map__eye {
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 8px solid var(--c-wood-dark);
}

/* side = the viewpoint east of the cabin → around view. Eye points west (left). */
.map__zone--side {
  left: 66%;
  top: 22%;
  width: 26%;
  height: 38%;
  flex-direction: row;
}
.map__zone--side .map__eye {
  width: 0; height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 8px solid var(--c-wood-dark);
}

/* diary = the record, not a place: a small journal resting on the map's
 * south-west margin, past the flowers, like a book left on the corner of the
 * drawing. Added Day 35 (2026-06-12) when the bottom strip retired and the
 * map became the only visible way around — the record needed a door too. */
.map__zone--diary {
  left: 4%;
  top: 76%;
  width: 22%;
  height: 18%;
  flex-direction: column;
  gap: 3px;
}
/* A tiny closed journal: two cream page-blocks around a dark spine. */
.map__book {
  width: 14px;
  height: 10px;
  border: 1px solid var(--c-wood-dark);
  border-radius: 1px;
  background: linear-gradient(
    90deg,
    #fff8ec 0 5px,
    var(--c-wood-dark) 5px 7px,
    #fff8ec 7px 12px
  );
}

/* letters = the box's contents (Day 81). Unlike the diary the mailbox IS a
 * place in the clearing — it stands at the path's mouth (Day 59) — so its
 * chip sits on the plan where the box sits in the world: the south-east
 * corner, beside the last path stone, where the path leaves for wherever
 * the post comes from. */
.map__zone--letters {
  left: 73%;
  top: 78%;
  width: 23%;
  height: 16%;
  flex-direction: column;
  gap: 3px;
}
/* A tiny mailbox: the round-topped wood box with its rose flag raised. */
.map__box {
  position: relative;
  width: 12px;
  height: 8px;
  border: 1px solid var(--c-wood-dark);
  border-radius: 4px 4px 1px 1px;
  background: var(--c-wood);
}
.map__box::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -4px;
  width: 2px;
  height: 3px;
  background: var(--c-rose);
}

/* almanac = the working, published (Day 97). Like the diary it is a book
 * rather than a place, so it takes the west margin too — sitting just above
 * the journal, clear of the north-west tree's canopy (8–23% × 20–40%) and of
 * the diary's own chip below (top 76%). Two books on one edge of the drawing:
 * the record of the days, and the reckoning behind them. */
.map__zone--almanac {
  left: 3%;
  top: 50%;
  width: 24%;
  height: 18%;
  flex-direction: column;
  gap: 3px;
}
/* A tiny ledger seen face-on: a cream leaf with a dark head-band and two
 * ruled lines — deliberately not the diary's spine-on book, so the two chips
 * on this margin don't read as the same object twice. */
.map__ledger {
  position: relative;
  width: 11px;
  height: 13px;
  border: 1px solid var(--c-wood-dark);
  border-radius: 1px;
  background: #fff8ec;
}
.map__ledger::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--c-wood-dark);
}
.map__ledger::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 5px;
  height: 1px;
  background: var(--c-wood-dark);
  box-shadow: 0 3px 0 var(--c-wood-dark);
}

@media (prefers-reduced-motion: reduce) {
  /* nothing animates on the map; here for parity with the other views */
}