/* ---------- Tile map: where you are on the page ----------
   In each gap between two sections that has no scroll transition. One numbered tile per section, in page order
   (js/tile-map.js builds them from one list): sections behind you in their own colour, the ones ahead grey outlines.
   The section you just left (is-prev) and the one you're entering (is-next) are large, with a red "You are here"
   marker on the line between them. Every tile links to its section.
   The line through the tiles is drawn by the tiles themselves: each one draws the half of the line on either side of
   it (::before and ::after), solid behind you and dashed ahead, so there's nothing to measure. */
.tm {
  --tm-line: var(--ink);
  --tm-empty: color-mix(in srgb, var(--ink) 30%, var(--bg));
  --tm-shadow: var(--ink);
  --tm-rim: var(--ink);
  container-type: inline-size; /* the phone layout below follows the map's own width */
  overflow-x: clip; /* the first and last tiles run the line off both edges of the screen */
  padding-block: clamp(26px, 3.5vw, 44px) clamp(22px, 3vw, 36px);
}
[data-mode="night"] .tm {
  --tm-line: #8376b8;
  --tm-shadow: #3b2f6c;
  --tm-rim: #0b0717;
  --tm-hover: color-mix(in srgb, var(--ink) 72%, var(--bg)); /* night's hover line: a soft grey-white, not white */
}
.tm-list {
  /* tile sizes (owner's picks, 10 November 2026); the phone layout below sets its own */
  --tm-size: 35px;
  --tm-big: 65px;
  --tm-big-shadow: 5px; /* the large tiles' hard shadow; the marker is centred with it in mind */
  --tm-row: calc(var(--tm-big) + 10px); /* height of the row the tiles sit in; the line runs through its middle */
  position: relative; /* js/tile-map.js measures the tiles from here to centre a scrolled row */
  list-style: none;
  margin: 0;
  padding: 26px 0 0; /* room above the tiles for the "You are here" tag */
  display: flex;
}
.tm-item {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
}
.tm-item.is-prev,
.tm-item.is-next {
  flex-grow: 1.5; /* a little wider, so the marker fits between the two large tiles */
}

/* the line, through the middle of the row (the items start below the list's top padding) */
.tm-item::before,
.tm-item::after {
  content: "";
  position: absolute;
  top: calc(var(--tm-row) / 2 - 2px);
  height: 4px;
  background: repeating-linear-gradient(90deg, var(--tm-empty) 0 4px, transparent 4px 8px);
}
.tm-item::before {
  left: 0;
  right: 50%;
}
.tm-item::after {
  left: 50%;
  right: 0;
}
.tm-item:first-child::before {
  left: -100vw;
}
.tm-item:last-child::after {
  right: -100vw;
}
.tm-item.is-past::before,
.tm-item.is-past::after,
.tm-item.is-next::before {
  background: var(--tm-line);
}

/* the tiles */
.tm-link {
  position: relative;
  z-index: 1; /* above the line */
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* a tile wider than its column mustn't widen the link */
  justify-items: center;
  align-content: start;
  text-align: center;
  color: inherit;
  text-decoration: none;
  border-radius: 6px;
  padding-bottom: 4px;
}
.tm-link:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}
.tm-cell {
  /* flex centres a tile that's wider than its column, spilling evenly both ways (grid would push it right) */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: var(--tm-row);
}
.tm-tile {
  flex: none; /* keep it square when it's wider than its column */
  display: grid;
  place-items: center;
  width: var(--tm-size);
  height: var(--tm-size);
  border: 3px solid var(--tm-empty);
  border-radius: 3px;
  background: var(--bg);
  font: 900 calc(var(--tm-size) * 0.57) / 1 var(--font-letters);
  color: var(--tm-empty);
  outline: 1px solid transparent; /* the hover line (below); an outline takes no space, so nothing moves */
  transition: outline-color 0.15s;
}
.is-past .tm-tile,
.is-next .tm-tile {
  background: var(--c);
  color: var(--on);
  border-color: var(--tm-rim);
  box-shadow: 3px 3px 0 var(--tm-shadow);
}
.is-prev .tm-tile,
.is-next .tm-tile {
  width: var(--tm-big);
  height: var(--tm-big);
  font-size: calc(var(--tm-big) * 0.57);
  border-width: 4px;
  border-radius: 5px;
  box-shadow: var(--tm-big-shadow) var(--tm-big-shadow) 0 var(--tm-shadow);
}
/* the footer's golf flag, in place of a number (js/tile-map.js draws it) */
.tm-flag {
  width: 1.15em;
  height: 1.15em;
  fill: currentColor;
}
/* hover: a thin line shows round the tile, just outside its border; nothing else changes. By day it's the section's
   own colour (an ink line would vanish against the ink border); at night the soft grey-white set on .tm above */
.tm-link:hover .tm-tile {
  outline-color: var(--tm-hover, var(--c));
}

/* "You are here": a red stem from the line between the two large tiles up to a tag above their tops */
.tm-here {
  position: absolute;
  /* the right edge of the section you just left is halfway between the two tiles' faces; half the shadow further
     right is halfway across the gap you see, since the left tile's shadow reads as part of the tile */
  left: calc(100% + var(--tm-big-shadow) / 2);
  top: calc(var(--tm-row) / 2);
  z-index: 3;
  pointer-events: none;
}
.tm-here-stem {
  position: absolute;
  left: -1px;
  bottom: 2px; /* down to the top of the line */
  width: 2px;
  height: calc(var(--tm-big) / 2 + 6px);
  background: var(--red);
}
.tm-here-tag {
  position: absolute;
  left: 0;
  bottom: calc(var(--tm-big) / 2 + 8px); /* above the tops of the large tiles */
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--red);
  color: var(--on-red);
  font: 700 10px/1 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 9px 5px;
  border-radius: 999px;
}

/* the names */
.tm-name {
  margin-top: 10px;
  padding-inline: 2px;
  font: 600 10px/1.2 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  text-wrap: balance;
}
.is-past .tm-name {
  color: var(--ink);
}
.is-prev .tm-name,
.is-next .tm-name {
  color: var(--ink);
  font-weight: 700;
}
.is-prev .tm-name::before,
.is-next .tm-name::before {
  display: block;
  font-size: 9px;
  letter-spacing: 0.14em;
  margin-bottom: 2px;
}
.is-prev .tm-name::before {
  content: "Just seen";
  color: var(--muted);
}
.is-next .tm-name::before {
  content: "Up next";
  color: var(--red);
}
.tm-link:hover .tm-name {
  color: var(--ink);
}

/* narrow maps (phones, small tablets): bigger tiles in fixed-width columns, so about five and a half show on a phone,
   in a row that scrolls sideways (swipe, or drag with a mouse: js/tile-map.js) and starts centred on You are here */
@container (max-width: 940px) {
  .tm-list {
    /* set here, not on .tm: a container query can't restyle the container itself, only what's inside it */
    --tm-size: 32px;
    --tm-big: 56px;
    margin-inline: calc(-1 * var(--gutter)); /* run to the screen edges */
    padding-bottom: 6px; /* room for the focus ring */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .tm-list::-webkit-scrollbar {
    display: none;
  }
  .tm-item {
    flex: 0 0 72px;
  }
  .tm-item.is-prev,
  .tm-item.is-next {
    flex-basis: 92px;
  }
  .tm-item:first-child::before {
    left: 0; /* the line stops at the row's ends, or the scrolling would run on into the empty line */
  }
  .tm-item:last-child::after {
    right: 0;
  }
  .tm-name {
    font-size: 12px;
    letter-spacing: 0.04em;
  }
  .is-prev .tm-name::before,
  .is-next .tm-name::before {
    font-size: 10px;
  }
}
@media (hover: hover) {
  @container (max-width: 940px) {
    .tm-list {
      cursor: grab;
    }
    .tm-list.is-dragging {
      cursor: grabbing;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .tm-tile {
    transition: none;
  }
}