/* ============================================================================
   Township & Borough — The Strip
   A film strip through time at one place. Phone-first; see MOBILE.md §4.

   The image stays in the gate. A projector does not slide frames past your
   eye — it holds each one still and swaps them, and that is also what makes
   the comparison work: translating the image destroys the very thing you flick
   for. So the strip metaphor lives in the RAIL (sprockets, years advancing)
   and in the GESTURE (vertical flick), while the frame cross-dissolves in
   place. Dragging halfway between two years shows you half of each.
   ========================================================================== */

.strip {
  position: relative;
  overflow: hidden;
  background: var(--paper-deep);
  touch-action: none;              /* every gesture is ours; see js/strip.js */
  user-select: none;
  -webkit-user-select: none;
}
.strip__map { position: absolute; inset: 0; }
.ol-viewport { cursor: grab; }
.strip.is-scrubbing .ol-viewport { cursor: ns-resize; }

/* ---- the gate ------------------------------------------------------------
   Softly rounded corners and a faint inset vignette, so the strip reads as
   film rather than as a stack of map screenshots. Two constraints, because
   this is imagery people are trying to READ: keep it faint (a heavy vignette
   hides the corners of an atlas plate, which is where the marginalia lives),
   and fade it out once the reader zooms past rest — at rest they are browsing
   and the furniture earns its keep; leaning in, any darkening is pure cost. */
.strip__gate {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(42,38,32,0.22);
  background: radial-gradient(118% 92% at 50% 50%,
              transparent 58%, rgba(20,17,12,0.16) 100%);
  opacity: 1;
  transition: opacity .25s ease;
}
.strip.is-zoomed .strip__gate { opacity: 0; }

/* ---- caption: year in the gate's own hand ------------------------------- */
.strip__caption {
  position: absolute; z-index: 8; left: 0; right: 4.2rem;
  bottom: calc(0.9rem + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  pointer-events: none; text-align: center;
}
.strip__year {
  font-family: var(--mono); font-size: 1.6rem; line-height: 1;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  border: 1px solid var(--rule);
  padding: 0.28rem 0.75rem 0.34rem;
  letter-spacing: 0.02em;
}
.strip__label {
  font-variant: small-caps; letter-spacing: 0.14em; font-size: 0.76rem;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  padding: 0.1rem 0.5rem;
  max-width: 88%;
}
/* a year can hold more than one sheet over the same ground — the Lathrop
   plates overlap by up to 55%. The chooser only appears when it applies. */
.strip__alt {
  pointer-events: auto;
  margin-top: 0.28rem; min-height: 34px;
  font: inherit; font-variant: small-caps; letter-spacing: 0.12em; font-size: 0.72rem;
  color: var(--oxblood); background: color-mix(in srgb, var(--paper) 88%, transparent);
  border: 1px solid var(--lathrop); border-radius: 3px;
  padding: 0 0.6rem; cursor: pointer;
}
.strip__alt[hidden] { display: none; }

/* while scrubbing, the label is noise — the year is the signal */
.strip.is-scrubbing .strip__label,
.strip.is-scrubbing .strip__alt { opacity: 0; }
.strip__label { transition: opacity .16s ease; }

/* ---- the gap notice: an absence is information -------------------------- */
.strip__gap {
  position: absolute; z-index: 8; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  margin: 0; max-width: 15rem; text-align: center;
  font-family: var(--archive); font-style: italic; font-size: 0.95rem;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border: 1px solid var(--rule); border-radius: 2px;
  padding: 0.7rem 1rem;
  pointer-events: none;
}
.strip__gap[hidden] { display: none; }
/* the notice is a way out, not a dead end */
.gap__to {
  pointer-events: auto;
  display: block; margin: 0.6rem auto 0; min-height: 44px;
  font: inherit; font-style: normal; font-variant: small-caps;
  letter-spacing: 0.12em; font-size: 0.82rem;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--ink-soft); box-shadow: 2px 2px 0 rgba(42,38,32,0.22);
  padding: 0 1rem; cursor: pointer;
}

/* ============================================================================
   THE RAIL — the sprocket edge
   Years ticked in proportion to DATE, not evenly. The record is bimodal
   (11 sheets 1885-1906, 8 more 1927-1963) and its thinnest stretch is
   1980-2007, so proportional spacing makes the two survey booms visible and
   the 27-year hole conspicuous. That is worth saying out loud.
   ========================================================================== */
.strip__rail {
  position: absolute; z-index: 9; top: 0; bottom: 0; right: 0;
  width: 3.5rem;
  overflow: hidden;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  border-left: 1px solid var(--rule);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  touch-action: none;
  cursor: ns-resize;
}
/* perforations down both edges, drawn rather than imaged */
.strip__rail::before, .strip__rail::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 5px;
  background-image: radial-gradient(circle at 50% 50%,
    rgba(42,38,32,0.30) 0 1.6px, transparent 1.7px);
  background-size: 5px 13px;
  pointer-events: none;
}
.strip__rail::before { left: 3px; }
.strip__rail::after  { right: 3px; }

.rail__track { position: absolute; inset: 0; }

/* One element per epoch: always a tick at its true position, a label only
   where there is room for one. Dense years become a band of ticks under a
   single label — which is the information, not a defect. */
.rail__year {
  position: absolute; left: 8px; right: 12px; height: 0;
  display: flex; align-items: center; justify-content: flex-end;
  font-family: var(--mono); font-size: 0.62rem; line-height: 1;
  color: var(--ink-faint);
}
.rail__year::before {                      /* the tick */
  content: ""; position: absolute; left: 0; top: -0.5px; width: 7px;
  border-top: 1px solid var(--ink-soft); opacity: 0.5;
}
.rail__year > span { display: none; }
.rail__year.has-label > span { display: block; }
/* a sheet with nothing over this ground: the flick still lands there, and
   says so, but the rule shows it coming */
.rail__year.is-empty { opacity: 0.3; }
.rail__year.is-empty::before { border-top-style: dotted; }
.rail__year.is-cur { color: var(--ink); z-index: 3; }
.rail__year.is-cur::before {
  width: 11px; border-top-width: 2px; border-color: var(--oxblood); opacity: 1;
}
.rail__year.is-cur > span {
  display: block; font-size: 0.68rem; color: var(--ink);
  background: color-mix(in srgb, var(--lathrop-peach) 62%, transparent);
  box-shadow: 0 0 0 1px var(--lathrop); border-radius: 2px;
  padding: 1.5px 3px;
}

/* the cursor: a hairline that slides along the rule to where you are */
.rail__index {
  position: absolute; left: 0; right: 0; top: 0; height: 0;
  border-top: 1px solid var(--oxblood);
  pointer-events: none;
  transition: top .06s linear;
}
.strip.is-scrubbing .rail__index { transition: none; }
.rail__index::before, .rail__index::after {
  content: ""; position: absolute; top: -3.5px;
  border: 3.5px solid transparent;
}
.rail__index::before { left: 0;  border-left-color: var(--oxblood); }
.rail__index::after  { right: 0; border-right-color: var(--oxblood); }

/* ============================================================================
   TOOLS + COACH
   ========================================================================== */
.strip__tools {
  position: absolute; z-index: 10; right: 4.2rem;
  top: calc(0.7rem + env(safe-area-inset-top));
  display: flex; flex-direction: column; gap: 0.5rem;
}
.tool {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font: inherit; font-size: 1.1rem; color: var(--ink-soft);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  border: 1px solid var(--rule); border-radius: 3px;
  box-shadow: 2px 2px 0 rgba(42,38,32,0.14);
  cursor: pointer;
}
.tool[hidden] { display: none; }
.tool__i { width: 21px; height: 21px; display: block; }
.tool.is-done {
  color: var(--oxblood); border-color: var(--lathrop);
  background: color-mix(in srgb, var(--lathrop-peach) 55%, var(--paper));
}

.strip__coach {
  position: absolute; inset: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.2rem;
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  text-align: center; padding: 2rem;
}
.strip__coach[hidden] { display: none; }
.strip__coach p {
  margin: 0.35rem 0; font-variant: small-caps; letter-spacing: 0.12em;
  font-size: 0.92rem; color: var(--ink-soft);
}
.strip__coach .g {
  display: inline-block; min-width: 1.7rem;
  font-family: var(--mono); font-variant: normal; color: var(--oxblood);
  border: 1px solid var(--rule); border-radius: 3px;
  margin-right: 0.5rem; padding: 0 0.25rem;
}
.coach__ok {
  margin-top: 1.4rem;
  font: inherit; font-variant: small-caps; letter-spacing: 0.18em; font-size: 0.9rem;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--ink-soft); box-shadow: 3px 3px 0 rgba(42,38,32,0.28);
  padding: 0.55rem 1.6rem; cursor: pointer; min-height: 44px;
}

/* ---- roomier screens: the strip is a phone idea, but it should not look
        broken on a tablet or a desktop that follows a shared link ---------- */
@media (min-width: 700px) {
  .strip__rail { width: 4.25rem; }
  .rail__year { font-size: 0.7rem; }
  .strip__year { font-size: 2rem; }
  .strip__gate { border-radius: 14px; }
}