/* =========================================================================
 * NeverMiss — brand tokens and the Flyer Wall feed.
 *
 * THE BRAND, as documented: red #FF3131 · black · white · cream #FEFFE2 ·
 * Montserrat. None of it was in the app — #FF3131 appeared ZERO times across
 * five pages (they used #ff4444, #ff4d4d, #ff2222 and #f44336 — four different
 * reds), Montserrat was never loaded, and the cream was never used at all.
 * Everything here derives from those four values and nothing else.
 *
 * THE IDEA: an event is a FLYER. Cream stock, one red overprint, pinned very
 * slightly crooked on a dark wall — which is how Vermont actually advertises
 * itself, on the corkboard at the co-op and the library. The cream finally has
 * a reason to exist: it is the paper.
 *
 * THE STRUCTURE: the DAY is the spine, not a sort dropdown. The old feed asked
 * "which of these nine categories?" when people are asking "what's on Friday?"
 * — which is why it read like a parts catalog.
 * ========================================================================= */

:root {
  /* brand, verbatim */
  --red: #FF3131;
  --paper: #FEFFE2;
  --black: #000000;
  --white: #FFFFFF;

  /* neutrals, warm-biased toward the cream so they read as chosen.
     --wall lifted off pure black (was #0B0B0A) as part of softening the
     card-to-background jump. Still reads black; no longer a hard floor. */
  --wall: #14140F;
  --wall-2: #1C1B15;
  --wall-3: #24221A;
  --dust: #9A9583;
  --dust-dim: #6E6A5C;
  --hair: rgba(254, 255, 226, 0.14);
  --hair-strong: rgba(254, 255, 226, 0.30);

  /* semantic — remapped wholesale by the light theme below */
  --bg: var(--wall);
  --bg-raised: var(--wall-2);
  --fg: var(--paper);
  --fg-dim: var(--dust);
  --fg-faint: var(--dust-dim);
  /* Stays the documented brand cream. An earlier pass at softening the
     card-against-black contrast dimmed this to #F6F5DC, and the brand test caught
     it — which is the test doing its job. Quietly editing a brand colour to fix a
     contrast problem is how the app ended up with four different reds in the
     first place. The softening is done with the halo and the lifted wall instead,
     neither of which touches a documented value. */
  --card: var(--paper);
  --card-ink: #14130F;
  --card-dim: #4C4A3E;

  --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --maxw: 1500px;
}

/* Inverse (light) option. Same brand, daylight instead of a dark wall:
   paper becomes the page and the cards become white stock on it. */
:root[data-nm-theme="light"] {
  --bg: #F4F3E4;
  --bg-raised: #FFFFFF;
  --fg: #14130F;
  --fg-dim: #5C5850;
  --fg-faint: #7A756A;
  --card: #FFFFFF;
  --card-ink: #14130F;
  --card-dim: #5C5850;
  --hair: rgba(20, 19, 15, 0.14);
  --hair-strong: rgba(20, 19, 15, 0.28);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 16px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
}

/* ---------- header ---------- */
.nm-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--hair);
  padding: 14px 0;
}
.nm-shell { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.nm-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.nm-wordmark {
  font-weight: 900; font-size: 21px; letter-spacing: -0.02em;
  color: var(--fg); text-decoration: none; white-space: nowrap;
}
.nm-wordmark .miss { color: var(--red); }
.nm-bar-spacer { flex: 1; }

.nm-btn {
  font-family: var(--font); font-weight: 600; font-size: 13px;
  padding: 8px 14px; border-radius: 4px; cursor: pointer;
  background: none; color: var(--fg); border: 1px solid var(--hair-strong);
  text-decoration: none; display: inline-block; white-space: nowrap;
}
.nm-btn:hover { border-color: var(--red); color: var(--red); }
.nm-btn.primary { background: var(--red); border-color: var(--red); color: #fff; }
.nm-btn.primary:hover { background: #E82626; border-color: #E82626; color: #fff; }
.nm-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* Signed-in vs signed-out buttons. `.hidden` must beat the flex display, so the
   two states can never both appear (they did — an inline style outranked the class). */
.nm-authbox { display: flex; gap: 8px; }
.nm-authbox.hidden { display: none !important; }

.nm-search {
  flex: 1 1 260px; min-width: 180px; max-width: 420px;
  padding: 9px 14px; border-radius: 4px;
  background: var(--bg-raised); border: 1px solid var(--hair-strong);
  color: var(--fg); font: 400 14px var(--font); outline: none;
}
.nm-search::placeholder { color: var(--fg-faint); }
.nm-search:focus { border-color: var(--red); }

/* ---------- the question + when-chips ---------- */
.nm-ask {
  font-weight: 900; letter-spacing: -0.03em; line-height: 1.02;
  font-size: clamp(26px, 4.4vw, 44px); padding: 30px 0 8px;
}
.nm-ask .q { color: var(--red); }
.nm-tagline {
  margin: 2px 0 0; font-weight: 600; font-size: 15px; letter-spacing: 0.01em;
  color: var(--fg-dim);
}
.nm-count { color: var(--fg-dim); font-size: 14px; font-weight: 300; padding: 10px 0 16px; }

/* ---------- sort ---------- */
.nm-sortrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.nm-sort { display: inline-flex; gap: 0; margin-bottom: 18px; border: 1px solid var(--hair-strong); }
.nm-sortbtn {
  font: 700 11.5px/1 var(--font); letter-spacing: 0.1em; text-transform: uppercase;
  padding: 11px 18px; cursor: pointer; background: none; color: var(--fg-dim); border: 0;
}
.nm-sortbtn + .nm-sortbtn { border-left: 1px solid var(--hair-strong); }
.nm-sortbtn[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.nm-sortbtn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* Category chips sit on their own line and read quieter than the when-chips,
   because time is the primary axis and subject is the secondary one. */
.nm-subjects { padding-bottom: 24px; }
.nm-chip.subj { font-size: 11px; opacity: 0.82; }
.nm-chip.subj[aria-pressed="true"] { opacity: 1; }
.nm-count strong { font-weight: 700; color: var(--fg); }

.nm-chips { display: flex; gap: 8px; padding-bottom: 22px; overflow-x: auto; scrollbar-width: none; }
.nm-chips::-webkit-scrollbar { display: none; }
.nm-chip {
  flex: 0 0 auto; padding: 8px 15px; cursor: pointer; white-space: nowrap;
  font: 700 11.5px/1 var(--font); letter-spacing: 0.1em; text-transform: uppercase;
  background: none; color: var(--fg); border: 1px solid var(--hair-strong);
}
.nm-chip:hover { border-color: var(--red); }
.nm-chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.nm-chip.free[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #fff; }
.nm-chip:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* ---------- the day spine ---------- */
.nm-day {
  display: flex; align-items: baseline; gap: 14px;
  padding: 30px 0 14px; border-top: 1px solid var(--hair);
  position: sticky; top: 62px; z-index: 20;
  background: linear-gradient(var(--bg) 74%, transparent);
}
.nm-day .dnum {
  font-weight: 900; font-size: clamp(30px, 5vw, 46px); line-height: 0.8;
  letter-spacing: -0.05em; font-variant-numeric: tabular-nums;
}
.nm-day .dwrap { display: flex; flex-direction: column; gap: 2px; }
.nm-day .dow {
  font-weight: 700; font-size: 11px; letter-spacing: 0.17em;
  text-transform: uppercase; color: var(--red);
}
.nm-day .dmon {
  font-weight: 600; font-size: 11.5px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--fg-faint);
}
.nm-day .dcount {
  margin-left: auto; font-weight: 600; font-size: 11.5px;
  letter-spacing: 0.08em; color: var(--fg-faint);
}

/* FOUR across, not five. Five at 1500px gave 228px cards and Bill's word for the
   result was "dizzying" — too many things asking for attention at once, each too
   small to actually look at. 300px minimum lands on four columns of ~350px at the
   container's max width, which is a poster you can read. */
.nm-flyers {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* ---------- THE FLYER ---------- */
/* SOFTENING THE EDGE. Paper-white on near-black was too abrupt a jump: Bill's
   note was that the cards "seem to have a bit too much contrast". Three changes,
   none of which touch the brand colours: the wall lifts slightly off pure black
   (see --wall), the card sits a shade below full cream, and a warm halo bleeds
   out from behind it so the eye has somewhere to land between the two. The paper
   still reads as paper; it just is not a cut-out any more. */
.nm-flyer {
  position: relative; display: block; text-decoration: none;
  background: var(--card); color: var(--card-ink);
  padding-bottom: 14px; cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(254, 255, 226, 0.10),
    0 0 26px 6px rgba(254, 255, 226, 0.055),
    0 8px 22px rgba(0, 0, 0, 0.5);
  transform: rotate(var(--tilt, -0.4deg));
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
/* Varied tilt so a grid of paper doesn't look machine-stamped. */
.nm-flyer:nth-child(3n+1) { --tilt: 0.5deg; }
.nm-flyer:nth-child(3n+2) { --tilt: -0.6deg; }
.nm-flyer:nth-child(4n)   { --tilt: 0.3deg; }
.nm-flyer:hover, .nm-flyer:focus-visible {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55);
  outline: none;
}
.nm-flyer:focus-visible { box-shadow: 0 0 0 3px var(--red), 0 14px 32px rgba(0, 0, 0, 0.55); }

.nm-poster { position: relative; height: 172px; overflow: hidden; background: var(--wall-3); }
.nm-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The halftone dot screen is GONE.
   It was the newsprint texture that made a card read as print, and on a real
   poster it looked good. On a scraped event image it sat on top of the artist's
   name and the tour dates, and Bill's report was exact: "impossible to read the
   words on the images and make things feel blurry". A texture that eats the
   information the image exists to carry is decoration winning over content, and
   the flyer idea does not depend on it — the cream stock, the tilt and the
   shadow already do that work. */
/* Subject-coded fallback art for the ~1% with no image. */
.nm-poster.ph-music  { background: linear-gradient(122deg, #FF3131, #B31212 62%, #2A0808); }
.nm-poster.ph-arts   { background: linear-gradient(118deg, #1E2A55, #4A3A7A); }
.nm-poster.ph-night  { background: linear-gradient(120deg, #4A1E52, #1E0A26); }
.nm-poster.ph-food   { background: linear-gradient(126deg, #C6541A, #8A2E0C); }
.nm-poster.ph-sport  { background: linear-gradient(124deg, #0F5C74, #08303D); }
.nm-poster.ph-learn  { background: linear-gradient(122deg, #4A2352, #22102A); }
.nm-poster.ph-comm   { background: linear-gradient(118deg, #6B5A1E, #372C0A); }
.nm-poster.ph-craft  { background: linear-gradient(120deg, #7A4A1E, #3A210A); }
.nm-poster.ph-family { background: linear-gradient(120deg, #1F6E4A, #0E3A28); }

.nm-stamp-time {
  position: absolute; left: 11px; bottom: 11px;
  background: #0B0B0A; color: var(--paper);
  font: 700 11px/1 var(--font); letter-spacing: 0.09em;
  padding: 5px 8px; font-variant-numeric: tabular-nums;
}
/* ---------- the date, on the card itself ----------
   A torn calendar page pinned to the corner. Bill's idea, and it solves a real
   structural problem: the feed grouped by day, so a Tuesday with one event
   produced a whole row containing one card, then another, then another. Pages of
   single cards. Once each card carries its own date, events can flow in rows
   regardless of when they are, and the day spine becomes a choice instead of a
   constraint. Sits top-left, which the action buttons just vacated. */
.nm-datechip {
  position: absolute; left: 10px; top: 10px; width: 46px;
  background: var(--card); color: var(--card-ink);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.45);
  transform: rotate(-2.5deg); overflow: hidden; text-align: center;
  border-radius: 2px 2px 3px 3px;
}
.nm-datechip .m {
  display: block; background: var(--red); color: #fff;
  font: 800 9px/1 var(--font); letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 0 3px;
}
.nm-datechip .d {
  display: block; font: 900 21px/1 var(--font); letter-spacing: -0.03em;
  padding: 5px 0 2px; font-variant-numeric: tabular-nums;
}
.nm-datechip .w {
  display: block; font: 700 8px/1 var(--font); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--card-dim); padding: 0 0 5px;
}
/* The torn edge: a row of notches bitten out of the bottom. */
.nm-datechip::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 5px;
  background: radial-gradient(circle at 3px 0, transparent 3px, var(--card) 3px);
  background-size: 7px 7px;
}
/* A multi-date run says so rather than pretending to be one night. */
.nm-datechip.run .d { font-size: 17px; padding-top: 6px; }
.nm-datechip.run .w { color: var(--red); }

.nm-stamp-free {
  position: absolute; right: 9px; top: 9px;
  border: 2px solid var(--red); color: var(--red); background: rgba(254, 255, 226, 0.94);
  font: 900 10.5px/1 var(--font); letter-spacing: 0.13em;
  padding: 4px 7px; transform: rotate(6deg);
}

/* Age sits under the Free stamp so the two never collide on a free 21+ show. */
.nm-stamp-age {
  position: absolute; right: 9px; top: 9px;
  border: 2px solid var(--ink, #222); color: var(--ink, #222); background: rgba(254, 255, 226, 0.94);
  font: 900 10.5px/1 var(--font); letter-spacing: 0.13em;
  padding: 4px 7px; transform: rotate(-4deg);
  /* A stamp is a stamp. The venue's own wording runs to 59 characters
     ("All Ages (ticket required for children 12 months and older)"), which wrapped onto a
     second line and covered the torn-calendar date on the opposite corner of the card.
     shortAge() in index.html shortens the text; this makes the geometry impossible to
     break regardless of what any venue publishes next. */
  max-width: 40%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nm-stamp-free ~ .nm-stamp-age { top: 38px; }

.nm-f-body { padding: 13px 14px 0; }
.nm-f-sub {
  font: 700 9.5px/1 var(--font); letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--red); margin-bottom: 8px;
}
.nm-f-title {
  font-weight: 900; font-size: 16.5px; line-height: 1.17;
  letter-spacing: -0.018em; margin-bottom: 9px;
}
.nm-f-where { font-size: 12.5px; line-height: 1.35; color: var(--card-dim); font-weight: 500; }
.nm-f-where .town { font-weight: 700; color: var(--card-ink); }
.nm-f-price { margin-top: 9px; font-weight: 700; font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* A run of shows looks like a stack of paper — because that is what it is. */
.nm-flyer.run::before, .nm-flyer.run::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.nm-flyer.run::before { background: #EFF0D2; transform: rotate(2deg) translate(4px, 4px); }
.nm-flyer.run::after  { background: #E3E4C2; transform: rotate(-1.6deg) translate(-3px, 7px); }
.nm-run {
  display: inline-block; margin-top: 9px; padding-top: 6px;
  border-top: 1.5px solid var(--card-ink);
  font-weight: 700; font-size: 11px; letter-spacing: 0.05em;
}

/* In daylight the heavy dark-wall shadow reads as grime, and white-on-cream is a
   deliberately quiet contrast — so cards get a hairline to define their own edge
   and a softer lift instead. */
:root[data-nm-theme="light"] .nm-flyer {
  border: 1px solid rgba(20, 19, 15, 0.10);
  box-shadow: 0 3px 10px rgba(20, 19, 15, 0.10);
}
:root[data-nm-theme="light"] .nm-flyer:hover {
  box-shadow: 0 10px 24px rgba(20, 19, 15, 0.18);
}
:root[data-nm-theme="light"] .nm-flyer.run::before { background: #F0EFE0; }
:root[data-nm-theme="light"] .nm-flyer.run::after  { background: #E7E6D6; }

/* Blue cheese — a wildcard has to LOOK like one, and say why. */
.nm-flyer.blue { box-shadow: 0 0 0 2px var(--red), 0 6px 18px rgba(0, 0, 0, 0.42); }
.nm-flyer.blue:hover { box-shadow: 0 0 0 2px var(--red), 0 14px 32px rgba(0, 0, 0, 0.55); }
.nm-blue-flag {
  background: var(--red); color: #fff;
  font: 700 9.5px/1 var(--font); letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 14px;
}
.nm-blue-why {
  padding: 9px 14px 0; font-size: 11.5px; line-height: 1.35;
  color: var(--card-dim); font-style: italic;
}

/* ---------- card actions ----------
   BOTTOM RIGHT, not top left. Bill: "Top left is a bad spot for buttons. most
   people are right handed and thats a reach across a phone with your thumb just
   to tap one of the icons." He is right, and it is worse than a reach — on a
   phone held in the right hand the top-left corner is the single hardest pixel
   to reach on the screen, and it is where we put the three controls the whole
   feed runs on. Bottom right is where the thumb already rests. */
.nm-acts {
  position: absolute; bottom: 9px; right: 9px; display: flex; gap: 6px;
  opacity: 0; transition: opacity 0.15s;
}
.nm-flyer:hover .nm-acts, .nm-flyer:focus-within .nm-acts { opacity: 1; }
@media (hover: none) { .nm-acts { opacity: 1; } }
.nm-act {
  width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer;
  background: rgba(11, 11, 10, 0.82); border: 0; color: var(--paper); border-radius: 2px;
}
.nm-act:hover { background: var(--red); }
.nm-act.on { background: var(--red); color: #fff; }
.nm-act svg { width: 15px; height: 15px; }
.nm-act:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }

/* ---------- states ---------- */
.nm-empty, .nm-loading {
  padding: 60px 0; text-align: center; color: var(--fg-dim); font-weight: 300;
}
.nm-more { display: flex; justify-content: center; padding: 40px 0 70px; }
.nm-end {
  text-align: center; padding: 46px 0 70px; color: var(--fg-faint);
  font-size: 13px; letter-spacing: 0.04em;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .nm-flyer { transform: none; }
  .nm-flyer:hover { transform: translateY(-2px); }
}

/* =========================================================================
 * SHARED PAGE FURNITURE
 *
 * Login, onboarding, profile and submit-event each carried their own copy of
 * a panel, a form field and a button — four slightly different versions of
 * the same three things, in four slightly different reds. Everything below is
 * defined once so a brand change is a one-file change.
 * ========================================================================= */

.nm-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 20px 80px;
}
.nm-page-narrow { width: 100%; max-width: 460px; }
.nm-page-wide { width: 100%; max-width: 880px; }

/* Wordmark used as a page header rather than a nav bar. */
.nm-mark {
  font-weight: 900; font-size: 26px; letter-spacing: -0.025em;
  text-decoration: none; color: var(--fg); display: inline-block; margin-bottom: 6px;
}
.nm-mark .miss { color: var(--red); }
.nm-tag {
  color: var(--fg-dim); font-size: 13.5px; font-weight: 300;
  margin-bottom: 34px; text-align: center;
}

.nm-h1 {
  font-weight: 900; font-size: clamp(24px, 4vw, 34px);
  line-height: 1.06; letter-spacing: -0.03em; margin: 0 0 8px;
  text-wrap: balance;
}
.nm-h2 {
  font-weight: 900; font-size: 19px; letter-spacing: -0.02em; margin: 0 0 6px;
}
.nm-eyebrow {
  font-weight: 700; font-size: 10.5px; letter-spacing: 0.17em;
  text-transform: uppercase; color: var(--red); margin-bottom: 8px;
}
.nm-note {
  color: var(--fg-dim); font-size: 13.5px; font-weight: 300;
  line-height: 1.55; margin: 0 0 22px; max-width: 54ch;
}

.nm-panel {
  width: 100%;
  background: var(--bg-raised);
  border: 1px solid var(--hair);
  padding: 30px;
}
.nm-panel + .nm-panel { margin-top: 18px; }

.nm-field { margin-bottom: 18px; }
.nm-label {
  display: block; margin-bottom: 7px;
  font-weight: 700; font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-dim);
}
/* 16px is not a style choice. iOS Safari zooms the entire page in when you focus
 * an input whose text is under 16px, and it does NOT zoom back out — you are left
 * scrolling a page that no longer fits, mid-signup. Every field in the app was
 * 15px. One pixel, five forms. */
.nm-input, .nm-textarea, .nm-select {
  width: 100%; padding: 12px 14px;
  background: var(--bg); border: 1px solid var(--hair-strong);
  color: var(--fg); font: 400 16px var(--font); outline: none;
}
.nm-input::placeholder, .nm-textarea::placeholder { color: var(--fg-faint); }
.nm-input:focus, .nm-textarea:focus, .nm-select:focus { border-color: var(--red); }
.nm-textarea { min-height: 110px; resize: vertical; }

.nm-btn-lg {
  width: 100%; padding: 14px 18px; cursor: pointer;
  background: var(--red); color: #fff; border: 1px solid var(--red);
  font: 700 15px var(--font); letter-spacing: 0.02em;
}
.nm-btn-lg:hover { background: #E82626; border-color: #E82626; }
.nm-btn-lg:disabled { opacity: 0.55; cursor: default; }
.nm-btn-lg.ghost { background: none; color: var(--fg); border-color: var(--hair-strong); }
.nm-btn-lg.ghost:hover { border-color: var(--red); color: var(--red); background: none; }
.nm-btn-lg:focus-visible, .nm-input:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.nm-links { text-align: center; margin-top: 18px; font-size: 13.5px; color: var(--fg-dim); }
.nm-links a { color: var(--red); text-decoration: none; font-weight: 600; }
.nm-links a:hover { text-decoration: underline; }

.nm-error {
  display: none; margin-top: 14px; padding: 11px 13px;
  background: rgba(255, 49, 49, 0.10); border-left: 2px solid var(--red);
  color: var(--fg); font-size: 13px; line-height: 1.45;
}
.nm-error.show { display: block; }
.nm-ok {
  display: none; margin-top: 14px; padding: 11px 13px;
  background: rgba(120, 200, 120, 0.10); border-left: 2px solid #6FBF6F;
  color: var(--fg); font-size: 13px; line-height: 1.45;
}
.nm-ok.show { display: block; }

/* Progress through a multi-step flow. Steps are a genuine sequence, so
   numbering them carries real information rather than decorating. */
.nm-steps { display: flex; gap: 6px; margin-bottom: 30px; width: 100%; }
.nm-step-bar { flex: 1; height: 3px; background: var(--hair); }
.nm-step-bar.done { background: var(--red); }

/* Distance, shown only when we know where the reader is. */
.nm-f-miles {
  margin-top: 8px; font-weight: 700; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--red);
}

/* "Confirm your email" nudge. Deliberately a nudge, not a wall — an unverified
   account still works; we are guarding against someone registering an address
   that isn't theirs, since user records are keyed on the email. */
.nm-verify {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 22px 0 0; padding: 13px 16px;
  background: rgba(255, 49, 49, 0.09);
  border-left: 3px solid var(--red);
  font-size: 13.5px; color: var(--fg);
}

/* =========================================================================
 * PHONES
 *
 * ONE COLUMN, not two. Measured on a 393px iPhone, the old two-up grid gave
 * each event a 170px-wide card with a 105px poster — a thumbnail. The whole
 * design argument is that an event is a FLYER you look at, and at that size
 * you cannot look at anything: the poster is too small to read, the title
 * wraps to three lines, and the wall stops looking like paper and starts
 * looking like a contact sheet.
 *
 * The cost of one column is scroll length, and the day spine already pays it
 * back — the feed is chunked by day, so you are scrolling through Friday,
 * not through 624 undifferentiated cards. Roughly two and a half cards per
 * screen, which is the density people already scroll past happily elsewhere.
 * ========================================================================= */
@media (max-width: 560px) {
  .nm-flyers { grid-template-columns: 1fr; gap: 18px; }
  .nm-poster { height: 200px; }
  .nm-f-title { font-size: 17.5px; }
  .nm-day { top: 58px; }

  /* Thumbs, not cursors. 44px is Apple's minimum and the forgiving one; the
     when-chips were 30px tall, which is a mis-tap every few taps. */
  .nm-chip { padding: 13px 16px; font-size: 12.5px; }
  .nm-chips { gap: 9px; }
  .nm-btn { padding: 12px 15px; font-size: 13.5px; }
  .nm-label { font-size: 11.5px; }
  .nm-links { font-size: 14px; }
  /* Footer and inline links sit in a row of small text; give them height to
     hit without widening the visible text. */
  .nm-links a, footer a { display: inline-block; padding: 7px 2px; }

  /* The day spine is the thing you read most and it was the smallest text on
     the page — 11px uppercase with 0.17em tracking, which is a squint. */
  .nm-day .dow { font-size: 12.5px; }
  .nm-day .dmon, .nm-day .dcount { font-size: 12.5px; }
  .nm-count { font-size: 15px; }
}