/* Diaped — design tokens and app styles.
   The palette is documented in docs/BRAND.md. Change it here, nowhere else. */

:root {
  /* Lavender Nursery. Three colours do the work, and they divide the app up
     between them so nothing has to shout:

       Lavender  #E4D9F5   identity and chrome — header, primary button
       Butter    #FDECC8   the Add place / Rate action, and the "ed"
       Mint      #BFE3D0   "good" — the gauge fill, positive tags

     Behind them sit plums: a deep #423655 for text and a mid #645579 for
     everything quieter. Those are structure, not identity. The three pastels
     are always SURFACES with a plum on top — none of them is ever a text
     colour on white, because none of them is dark enough to be one.

     The audience is new mothers, often one-handed, often at 3am, often in bad
     light. That is the whole argument for low-saturation colour with genuinely
     dark text on it rather than tinted text on tinted backgrounds.

     Unlike the palette this replaced, every single pairing here clears WCAG AA
     outright — there are no accepted exceptions anywhere in the file. Keep it
     that way. Run tools/contrast-check.js. */
  --ground: #fbf7fc;
  --surface: #ffffff;
  --surface-2: #f1eaf9;
  --ink: #423655;
  --muted: #645579;
  --line: #e3d9f0;

  /* Chrome and identity. Lavender is a surface carrying dark plum ink, never
     a saturated block with white knocked out of it. */
  --accent: #e4d9f5;
  --accent-ink: #423655;
  --accent-soft: #f0e9fa;
  --accent-soft-ink: #423655;

  /* The action colour — butter yellow. Warm against all that lavender, which
     is what makes the one button a tired parent needs to find actually findable. */
  --action: #fdecc8;
  --action-ink: #6b4e12;

  --head-bg: #e4d9f5;
  /* The wordmark: plum "Diap", honey "ed", on the lavender bar. Both halves are
     ordinary AA assertions in tools/contrast-check.js (8.22:1 and 4.66:1) —
     this palette needed no brand exception for its own logotype, which the two
     before it both did. */
  --head-ink: #423655;       /* "Diap" */
  --head-body: #423655;      /* everything else on the bar that has to be read */
  --head-muted: #645579;
  --head-field: #ffffff;
  --head-line: #c9b8e4;
  --head-accent: #7a5b14;    /* "ed" — the butter hue taken dark enough to read */
  --chip-on: #bfe3d0;        /* a selected filter: mint, meaning good */
  --chip-on-ink: #22503a;

  /* Tier hues, every one of them derived from the three brand colours above —
     mint darkened for the good end, butter darkened to honey in the middle,
     and a rose that is the warm side of the plum ink for the bad end. No
     olive, no amber, no brick: those were leftovers from an older palette and
     they were what made the app look like two brands stitched together.

     Mostly legacy tokens — the fill-gauge carries the rank now — but --okay
     colours the rating stars, --rough the form errors and "no station" tag,
     and --none every unrated card, so all five are held to AA and checked for
     deuteranopia separation. */
  --great: #1f5e48;   /* mint, deep */
  --good: #37764b;    /* mint */
  --okay: #856517;    /* butter, deep — the star colour */
  --rough: #a03a63;   /* rose, the warm edge of the plum family */
  --none: #665a80;    /* plum grey */

  /* Tier gauge (the filled-diaper rating icon). Plum shell, mint fill, 7.99:1
     between them. Fill vs empty must stay >=3:1; it IS the signal. A pale
     shell is the one change that quietly destroys this icon. */
  --gauge-fill: #bfe3d0;
  --gauge-empty: #423655;

  /* Score-breakdown bars. NOT --accent: lavender on the pale lavender track is
     1.1:1, so the bars would be there and yet not there. A mid-lavender keeps
     them in the family and visible at 3.58:1. */
  --bar-fill: #8b6fb0;

  /* You-are-here. Violet: the lavender taken to full strength, so it belongs to
     this palette rather than being a stock map blue, and it is far enough from
     every tier hue that it can't be read as a rating. */
  --here: #6d4fc4;

  --shadow: 0 10px 30px rgba(66, 54, 85, 0.13);
  --focus: #423655;
  color-scheme: light;
}


@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --ground: #17131f;
    --surface: #211b2c;
    --surface-2: #2b2338;
    --ink: #f3edfa;
    --muted: #bcafd0;
    --line: #3b3049;
    --accent: #c9b4ec;
    --accent-ink: #1f1a2b;
    --accent-soft: #342a44;
    --accent-soft-ink: #f3edfa;
    --action: #f7dfa8;
    --action-ink: #4a3608;
    --great: #7fd0a8;
    --good: #86c79a;
    --okay: #e8c87a;
    --rough: #e393ae;
    --none: #a99dbe;
    --head-bg: #2e2440;
    --head-ink: #f3edfa;
    --head-body: #f3edfa;
    --head-muted: #c6b8dc;
    --head-field: #221a30;
    --head-line: #4a3c61;
    --head-accent: #f0cf86;
    --chip-on: #bfe3d0;
    --chip-on-ink: #22503a;
    --gauge-fill: #bfe3d0;
    --gauge-empty: #574573;
    --bar-fill: #c9b4ec;
    --here: #a88bf0;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    --focus: #c9b4ec;
    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --ground: #17131f;
  --surface: #211b2c;
  --surface-2: #2b2338;
  --ink: #f3edfa;
  --muted: #bcafd0;
  --line: #3b3049;
  --accent: #c9b4ec;
  --accent-ink: #1f1a2b;
  --accent-soft: #342a44;
  --accent-soft-ink: #f3edfa;
  --action: #f7dfa8;
  --action-ink: #4a3608;
  --great: #7fd0a8;
  --good: #86c79a;
  --okay: #e8c87a;
  --rough: #e393ae;
  --none: #a99dbe;
  --head-bg: #2e2440;
  --head-ink: #f3edfa;
  --head-body: #f3edfa;
  --head-muted: #c6b8dc;
  --head-field: #221a30;
  --head-line: #4a3c61;
  --head-accent: #f0cf86;
  --chip-on: #bfe3d0;
  --chip-on-ink: #22503a;
  --gauge-fill: #bfe3d0;
  --gauge-empty: #574573;
  --bar-fill: #c9b4ec;
  --here: #a88bf0;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  --focus: #c9b4ec;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.top :focus-visible { outline-color: var(--head-accent); }
.display { font-family: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------------------------------------------------------------- shell -- */

.app {
  max-width: 540px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--ground);
  display: flex;
  flex-direction: column;
}
@media (min-width: 560px) {
  body { background: var(--surface-2); }
  .app { box-shadow: 0 0 0 1px var(--line); }
}

.top {
  position: sticky; top: 0; z-index: 500;
  background: var(--head-bg);
  color: var(--head-body);
  padding: 16px 16px 12px;
  /* Lavender on near-white is a gentle step, so the sticky bar keeps its own
     border — it's what separates the header from content scrolling under it. */
  border-bottom: 1px solid var(--head-line);
}
.brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand h1 {
  margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.1; color: var(--head-ink); display: flex; align-items: center; gap: 8px;
}
.brand h1 .mark { flex: 0 0 auto; width: 28px; height: 28px; }
.brand h1 .word span { color: var(--head-accent); }
.brand .city {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--head-muted); font-weight: 700;
}

.search { margin-top: 12px; position: relative; }
.search input {
  width: 100%; height: 48px; border-radius: 12px;
  border: 1px solid var(--head-line); background: var(--head-field);
  color: var(--head-body); padding: 0 42px; font-size: 16px;
}
.search input::placeholder { color: var(--head-muted); }
.search .icon { position: absolute; left: 14px; top: 14px; color: var(--head-muted); }
.search .clear {
  position: absolute; right: 6px; top: 7px; height: 34px; width: 34px;
  border: 0; background: transparent; border-radius: 8px; color: var(--head-muted);
}
.search .clear[hidden] { display: none; }

.filters {
  display: flex; gap: 8px; margin-top: 12px;
  overflow-x: auto; padding-bottom: 2px; scrollbar-width: none;
}
.filters::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; height: 34px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--head-line); background: transparent;
  font-size: 14px; font-weight: 700; color: var(--head-body);
  white-space: nowrap; display: inline-flex; align-items: center;
}
.chip[aria-pressed='true'] {
  background: var(--chip-on); color: var(--chip-on-ink); border-color: var(--head-accent);
}

main { flex: 1; padding: 12px 16px 96px; }
.view[hidden] { display: none; }

/* ----------------------------------------------------------------- list -- */

.listhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin: 2px 0 10px;
}
.listhead .count { color: var(--muted); font-size: 14px; }
.segment {
  display: inline-flex; border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; background: var(--surface);
}
.segment button {
  border: 0; background: transparent; height: 34px; padding: 0 12px;
  font-size: 14px; font-weight: 600; color: var(--muted);
}
.segment button[aria-pressed='true'] { background: var(--accent-soft); color: var(--accent-soft-ink); }

.cards { display: flex; flex-direction: column; gap: 10px; }
.card {
  display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px;
  width: 100%; text-align: left; border: 1px solid var(--line);
  border-radius: 16px; background: var(--surface); padding: 12px; color: inherit;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
@media (prefers-reduced-motion: no-preference) {
  .card { transition: transform 0.08s ease; }
  .card:active { transform: scale(0.995); }
}

.score {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 12px; background: var(--surface-2); padding: 6px 4px;
  min-height: 74px; font-variant-numeric: tabular-nums;
}
.score .num {
  font-family: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif;
  font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: -0.02em;
}
.score .tier {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; margin-top: 4px; white-space: nowrap;
}
/* The gauge carries the rank now, so the tile itself is neutral — tinting it
   per tier would re-introduce the colour coding the gauge replaced, and the two
   would disagree. Number and word stay, because the gauge alone is not enough. */
.score .gauge { display: block; margin-bottom: 2px; }
.score.great { background: var(--surface-2); color: var(--ink); }
.score.good { background: var(--surface-2); color: var(--ink); }
.score.okay { background: var(--surface-2); color: var(--ink); }
.score.rough { background: var(--surface-2); color: var(--ink); }
.score.none { color: var(--none); }
.score.none .num { font-size: 22px; }
.score.nostation { background: color-mix(in srgb, var(--rough) 8%, var(--surface)); color: var(--rough); }
.score.nostation .num { font-size: 15px; line-height: 1.1; text-align: center; }
.score.nostation .tier { font-size: 10px; letter-spacing: 0.03em; }

.card .body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.card .name {
  font-size: 17px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em;
}
.card .meta {
  color: var(--muted); font-size: 13.5px;
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
.card .meta .dot::before { content: '·'; }

.tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.tag {
  font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 6px;
  background: var(--surface-2); color: var(--muted);
}
.tag.yes { background: var(--accent-soft); color: var(--accent-soft-ink); }
.tag.warn { background: color-mix(in srgb, var(--rough) 10%, var(--surface)); color: var(--rough); }

.empty { text-align: center; color: var(--muted); padding: 40px 16px; }
.empty strong { color: var(--ink); display: block; font-size: 18px; margin-bottom: 6px; }
.loading { color: var(--muted); text-align: center; padding: 30px; }

/* ------------------------------------------------------------------ map -- */

.maptools { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.maphint { color: var(--muted); font-size: 13px; }

#map {
  height: min(60vh, 460px);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface-2);
  /* Its own stacking context, so Leaflet's internal z-indices (panes 200–700,
     controls 800–1000) can't climb over the sticky header or the tab bar. */
  position: relative;
  z-index: 0;
  isolation: isolate;
}
.leaflet-container { font: inherit; background: var(--surface-2); }
.leaflet-control-attribution { font-size: 10px; }

.pin-wrap { background: none; border: 0; }
.pin { position: relative; cursor: pointer; }
.pin-label {
  position: absolute; left: calc(100% + 2px); top: 50%; transform: translateY(-50%);
  font-size: 11px; font-weight: 700; color: var(--ink);
  paint-order: stroke; white-space: nowrap;
  text-shadow: 0 0 3px var(--surface), 0 0 3px var(--surface), 0 0 3px var(--surface);
}
.here-wrap { background: none; border: 0; }
.here { position: relative; width: 24px; height: 24px; }
.here-dot {
  position: absolute; inset: 5px; border-radius: 50%;
  background: var(--here); border: 3px solid var(--surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.here-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--here) 28%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .here-ring { animation: herepulse 2s ease-out infinite; }
  @keyframes herepulse {
    0% { transform: scale(0.6); opacity: 0.9; }
    100% { transform: scale(1.7); opacity: 0; }
  }
}

.legend {
  display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px;
  font-size: 13px; color: var(--muted);
}
.legend span { display: inline-flex; align-items: center; gap: 4px; }

/* ----------------------------------------------------------------- tabs -- */

.tabs {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 900;
  display: flex; justify-content: center; pointer-events: none;
}
.tabs-inner {
  pointer-events: auto; width: 100%; max-width: 540px;
  background: var(--surface); border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
}
.tab {
  border: 0; background: transparent; display: flex; flex-direction: column;
  align-items: center; gap: 2px; padding: 8px 4px; border-radius: 12px;
  font-size: 12px; font-weight: 700; color: var(--muted);
}
.tab svg { width: 24px; height: 24px; }
.tab[aria-pressed='true'] { color: var(--accent-soft-ink); background: var(--accent-soft); }
.tab.add { color: var(--action-ink); background: var(--action); font-weight: 800; }

/* --------------------------------------------------------------- panels -- */

.panel {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; justify-content: center;
  background: color-mix(in srgb, var(--ink) 30%, transparent);
}
.panel[hidden] { display: none; }
.sheet {
  position: relative; width: 100%; max-width: 540px; height: 100%;
  background: var(--ground); display: flex; flex-direction: column; overflow: hidden;
}
@media (min-width: 560px) {
  .sheet { margin: 12px 0; height: calc(100% - 24px); border-radius: 20px; box-shadow: var(--shadow); }
}
.sheet-head {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-bottom: 1px solid var(--line); background: var(--surface);
}
.sheet-head h2 {
  margin: 0; font-size: 18px; font-weight: 700; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.iconbtn {
  height: 40px; width: 40px; border: 0; background: transparent; border-radius: 10px;
  display: inline-grid; place-items: center; color: var(--ink); flex: 0 0 auto;
}
.iconbtn svg { width: 22px; height: 22px; }
.sheet-body { flex: 1; overflow-y: auto; padding: 16px 16px 110px; }
.sheet-foot {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--ground) 70%, transparent);
}

.btn {
  height: 50px; width: 100%; border-radius: 14px; border: 0;
  background: var(--accent); color: var(--accent-ink);
  font-size: 17px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn.secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.btn.small { height: 40px; font-size: 15px; width: auto; padding: 0 14px; border-radius: 10px; }

/* --------------------------------------------------------------- detail -- */

.hero { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; }
.hero .score { min-height: 96px; }
.hero .score .num { font-size: 40px; }
.hero h3 {
  margin: 0; font-size: 22px; font-weight: 800; line-height: 1.15;
  letter-spacing: -0.02em; text-wrap: balance;
}
.hero .addr { color: var(--muted); font-size: 14px; margin-top: 4px; }
.hero .n { color: var(--muted); font-size: 13px; margin-top: 4px; }

.section { margin-top: 22px; }
.section h4 {
  margin: 0 0 10px; font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--muted); font-weight: 700;
}
.bars { display: grid; gap: 8px; }
.bar {
  display: grid; grid-template-columns: minmax(96px, 36%) minmax(0, 1fr) 34px;
  align-items: center; gap: 10px; font-size: 13.5px; line-height: 1.2;
}
.bar .track { height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.bar .fill { height: 100%; border-radius: 5px; background: var(--bar-fill); }
.bar .val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
/* A factor nobody has answered yet: a dashed empty track, not a bar at zero.
   The dash is paired with visually-hidden text so it isn't a bare glyph to a
   screen reader. */
.bar.blank { color: var(--muted); }
.bar.blank .track {
  background: transparent; border: 1px dashed var(--line); height: 10px;
  box-sizing: border-box;
}
.bar.blank .val { font-weight: 600; }

/* Visually hidden, still read aloud. */
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* "optional" beside a field label — quieter than the label, same baseline. */
.opt {
  font-weight: 600; font-size: 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em; margin-left: 6px;
}

.facts { display: flex; flex-wrap: wrap; gap: 8px; }
.fact {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 10px; font-size: 14px;
}
.fact b {
  display: block; font-size: 12px; color: var(--muted);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}

.photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.photos button {
  border: 0; padding: 0; border-radius: 10px; overflow: hidden;
  aspect-ratio: 1; background: var(--surface-2); max-width: 100%;
}
.photos img { width: 100%; height: 100%; object-fit: cover; display: block; }

.reviews { display: grid; gap: 10px; }
.review { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.review .rh { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.review .who { font-weight: 700; }
.review .when { color: var(--muted); font-size: 13px; }
.review .stars { color: var(--okay); font-size: 14px; letter-spacing: 0.05em; margin-top: 2px; }
.review p { margin: 6px 0 0; }
.review .rphotos { display: flex; gap: 6px; margin-top: 8px; }
.review .rphotos button {
  border: 0; padding: 0; width: 64px; height: 64px;
  border-radius: 8px; overflow: hidden; background: var(--surface-2);
}
.review .rphotos img { width: 100%; height: 100%; object-fit: cover; display: block; }

.seednote {
  background: var(--accent-soft); color: var(--accent-soft-ink);
  border-radius: 12px; padding: 10px 12px; font-size: 14px; margin-top: 14px;
}

.seednote .osmcredit { display: inline-block; margin-top: 6px; font-size: 12px; opacity: 0.8; }
.sharerow { margin-top: 14px; }
.showall { margin: 8px 0 24px; }

/* ---------------------------------------------------------------- forms -- */

.field { margin-bottom: 16px; }
.field label, .field .lbl { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.field .hint { color: var(--muted); font-size: 13px; margin-top: 4px; }
.field input[type='text'],
.field input[type='number'],
.field select,
.field textarea {
  width: 100%; min-height: 46px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); padding: 10px 12px; font-size: 16px;
}
.field textarea { min-height: 90px; resize: vertical; }

.toggle-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.toggle {
  min-height: 52px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px;
}
.toggle[aria-pressed='true'] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-soft-ink); }
.toggle.bad[aria-pressed='true'] {
  border-color: var(--rough);
  background: color-mix(in srgb, var(--rough) 10%, var(--surface));
  color: var(--rough);
}

.starrow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line);
}
.starrow:last-child { border-bottom: 0; }
.starrow .lbl { font-weight: 700; font-size: 15px; margin: 0; }
.starrow .sub { color: var(--muted); font-size: 12.5px; display: block; font-weight: 400; }
.stars-in { display: flex; gap: 2px; }
.stars-in button {
  width: 40px; height: 44px; border: 0; background: transparent;
  color: var(--line); padding: 0; display: grid; place-items: center;
}
.stars-in button svg { width: 30px; height: 30px; }
.stars-in button.on { color: var(--okay); }

.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.checks label {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px;
  padding: 0 12px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); font-weight: 600; font-size: 14px; cursor: pointer;
  margin-bottom: 0;
}
/* Checked amenities are the light green, same as the wordmark's "ed" and the
   Add place action — a parent ticking "paper liners" is reporting something
   good, and that green means good everywhere in this app.
   The tick glyph is the browser's own, which picks a dark ink on a fill this
   light. Text stays --ink so it flips correctly in dark mode, where the mint
   tint sits over a dark surface. */
.checks input { accent-color: var(--action); width: 18px; height: 18px; margin: 0; }
.checks label:has(input:checked) {
  border-color: var(--action);
  background: color-mix(in srgb, var(--action) 18%, var(--surface));
  color: var(--ink);
}

.photo-in { display: flex; gap: 8px; flex-wrap: wrap; }
.photo-in .thumb {
  position: relative; width: 84px; height: 84px; border-radius: 10px;
  overflow: hidden; background: var(--surface-2);
}
.photo-in .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-in .thumb button {
  position: absolute; top: 4px; right: 4px; width: 24px; height: 24px;
  border-radius: 50%; border: 0; background: var(--ink); color: var(--ground);
  font-size: 14px; line-height: 1; display: grid; place-items: center;
}
.photo-add {
  width: 84px; height: 84px; border-radius: 10px; border: 2px dashed var(--line);
  background: var(--surface); display: grid; place-items: center;
  color: var(--muted); font-size: 12px; font-weight: 700; text-align: center; cursor: pointer;
}
.photo-add input { display: none; }

.form-err { color: var(--rough); font-weight: 700; font-size: 14px; margin-top: 8px; min-height: 1.2em; }
.stationq { margin-bottom: 14px; }
.stationq .lbl { font-size: 17px; font-weight: 800; margin-bottom: 8px; display: block; }
details.adv summary { cursor: pointer; color: var(--muted); font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

/* ------------------------------------------------------------ overlays -- */

.lightbox {
  position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, 0.92);
  display: grid; place-items: center; padding: 16px;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 90vh; border-radius: 8px; }
.lightbox button { position: absolute; top: 14px; right: 14px; color: var(--surface); }

.toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 3000;
  background: var(--ink); color: var(--ground); padding: 10px 16px;
  border-radius: 12px; font-weight: 700; font-size: 14px;
  box-shadow: var(--shadow); max-width: calc(100% - 32px);
}
.toast[hidden] { display: none; }

/* Lavender, not amber. This carries ordinary notices ("solo mode", "one place
   isn't on the map") far more often than warnings, and an olive box was the
   loudest thing on an otherwise soft first screen. The one genuine warning it
   carries — "no changing station here" — leads with those words in bold, so it
   doesn't need the colour to do the shouting. */
.banner {
  background: var(--accent-soft);
  color: var(--accent-soft-ink);
  border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 12px; font-size: 14px; margin-bottom: 12px;
}
.banner[hidden] { display: none; }

.tile-warning {
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 600;
  max-width: 190px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* ------------------------------------------------------- stations & QA/QC -- */

/* Picking which restroom, in the rate form. */
.stationlist { display: grid; gap: 8px; }
.stationopt {
  text-align: left; border: 1px solid var(--line); background: var(--surface);
  border-radius: 12px; padding: 10px 12px; font-size: 14.5px; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.stationopt .sl { font-weight: 600; }
.stationopt .sx {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--rough); white-space: nowrap;
}
.stationopt[aria-pressed='true'] {
  border-color: var(--action); background: color-mix(in srgb, var(--action) 22%, var(--surface));
}
.stationopt.add { font-weight: 700; color: var(--muted); border-style: dashed; }

/* Per-restroom scores on the detail page. */
.stations { display: grid; gap: 8px; }
.stationrow {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px;
  align-items: center; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); padding: 10px;
}
.stationrow .score { min-height: 62px; }
.stationrow .score .num { font-size: 22px; }
.sbody { min-width: 0; }
.sname { font-weight: 700; font-size: 14.5px; line-height: 1.25; }
.smeta { color: var(--muted); font-size: 12.5px; margin-top: 2px; }

/* A photo and its report flag. The flag is small but always reachable —
   someone who spots their own child must not have to hunt for it. */
.photowrap { position: relative; }
.photowrap > button:first-child { width: 100%; }
.reportbtn {
  position: absolute; top: 4px; right: 4px; width: 26px; height: 26px;
  border: 0; border-radius: 50%; background: color-mix(in srgb, var(--ink) 72%, transparent);
  color: var(--surface); font-size: 13px; line-height: 1;
  display: grid; place-items: center; padding: 0;
}
.reportlink {
  border: 0; background: transparent; padding: 6px 0 0; margin-top: 4px;
  color: var(--muted); font-size: 12.5px; font-weight: 600; text-decoration: underline;
}

/* The photo confirmation gate and the report sheet are short dialogs, not
   full-height panels. */
.sheet.confirm { height: auto; max-height: 100%; margin: auto 0; border-radius: 20px; }
.sheet.confirm .sheet-body { padding-bottom: 16px; }
.sheet.confirm .sheet-foot { position: static; background: none; padding-top: 0; }
.sheet-foot.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.po-preview {
  width: 100%; max-height: 40vh; object-fit: contain;
  border-radius: 12px; background: var(--surface-2); display: block; margin-bottom: 14px;
}
.checks.stack { flex-direction: column; align-items: stretch; }
.checks.stack label { justify-content: flex-start; }

/* ------------------------------------------------------- money, kept quiet -- */
.kit { margin-top: 18px; }
.kit .kitnote { margin: 0 0 8px; font-size: 14px; color: var(--muted); }
.kitlinks { display: flex; flex-wrap: wrap; gap: 8px; }
.kitlinks a {
  display: inline-block; padding: 8px 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink); font-weight: 600; font-size: 14px; text-decoration: none;
}
.kit .disclosure { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.ownerline { margin: 16px 0 8px; font-size: 13px; color: var(--muted); }
.ownerline a { color: var(--ink); font-weight: 700; }
.tag.verified { background: var(--chip-on); color: var(--chip-on-ink); }