/*
 * Your list — the save control, the strip, the list screen and its editor.
 *
 * Every rule here is downstream of one already written for the field rows:
 * a tried place is quiet, everything else is an oat card with an offset shadow,
 * and "ticked" is --condensed because that is what a selected calibration tile
 * already looks like. The list and the field are meant to read as the same kind
 * of object, because they are two views of the same question.
 *
 * Propshaft links every stylesheet under app/assets, so this file needs no
 * registration — see docs/decisions/lists.md.
 */

/* ---------------------------------------------------------------- */
/* The app bar, now that it carries a fourth thing                   */
/* ---------------------------------------------------------------- */

/* "Your list · 12" is the fourth item in a bar that already held the wordmark,
   the city and the auth link, and at 375px the four of them don't fit. Left
   alone, `space-between` squeezed every one of them until each broke mid-phrase
   — "Flavour / Cup", "YOUR LIST / · 2", "SAVE MY / PICKS" — which reads as
   three broken labels rather than as a full bar.

   So the bar wraps as a whole instead: the wordmark keeps its line and the meta
   group drops below it when it has to. Nothing is hidden, nothing is
   abbreviated, and every label stays a label. */
.app-bar { flex-wrap: wrap; }
.wordmark { flex: none; white-space: nowrap; }
.app-bar__meta { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
.app-bar__link { white-space: nowrap; }

/* ---------------------------------------------------------------- */
/* The save control, on a ranked-list row                            */
/* ---------------------------------------------------------------- */

/* All that is left under a row's head is the Maps hand-off, and only on rows
   where the question can be asked. The save control moved up into the head, so
   this no longer pairs two things at opposite ends. */
.field-row__foot { display: flex; align-items: center; }
/* Was `:has(.field-row__lookup)`, and was zero — the foot is the thing that
   takes the card's bottom padding now, and it carries the lookup rather than
   being carried by it. A row without a foot keeps its own padding.

   Not zero any more, because the foot no longer holds only a bare underlined
   link. The pill throws 3px downward, and against a zero-padding card that left
   1px between its shadow and the card's own border — the shadow read as sitting
   *on* the edge rather than in a gap. `--drop-sm` is that room, which is the
   same allowance the rest of the app gives a shadowed object with something
   after it. The link's tap strip is unchanged: padding isn't tappable. */
.field-row:has(.field-row__foot) { padding-bottom: var(--drop-sm); }

/* On an unmarked list the pill rides the head, so it needs the head's own
   alignment rather than the strip's — and the name has to be free to wrap
   around it rather than shoving it off the card. */
.field-row__head > .save-control { align-self: center; }

/* "Tried", on the suburb line. Ink rather than the line's own mono grey, so it
   reads as the one fact on that line rather than as more address — and that is
   the whole marker now: no fill, no border, no second colour. A filled chip in
   the app's own background green was the heaviest object in the row, sitting on
   the state that says the least. */
.mono-meta__mark { color: var(--ink); font-weight: 700; }
.field-row--had .mono-meta__mark { color: var(--on-oat-body); }

.save-control { flex: none; display: inline-flex; }
/* button_to's form would otherwise be the flex item. */
.save-control form.button_to { display: contents; }

/* The target and the ink are two different boxes, which is the whole reason the
   pill stopped looking like a slab. `.save-pill` is the 44px hit area and is
   invisible; `.save-pill__box` is the chip you actually see. Collapsing the two
   made the visible pill 44px tall — a control as tall as two thirds of the card
   it sits in. Same principle as `.field-row__lookup`, where the 44px is the tap
   target and not the spacing. */
.save-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
}

/* Not caramel: the podium has spent that on Share and the standings on
   "Disagree? Play." It is `.map-pin__label`'s weight rather than a card's — a
   2px stroke and a 2px shadow, because a control wearing its container's own
   3px stroke reads as heavy as the container. */
.save-pill__box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--oat);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 7px 11px;
  box-shadow: 2px 2px 0 var(--ink);
  font: 700 10px/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.save-pill__box svg { width: 11px; height: 11px; flex: none; }
.save-pill:active .save-pill__box { transform: translate(2px, 2px); box-shadow: none; }
/* Saved. --condensed is the token that already means "ticked" on the
   calibration tiles, so no new colour is spent saying it here. */
.save-pill__box--on { background: var(--condensed); }
/* Nothing here keys off whether the row is tried. Saved looked one way on a
   tried card and another way on an untried one, which made a control's
   appearance carry a fact that has nothing to do with it — so the same chip
   reads the same everywhere it appears. */
.save-pill:focus-visible { outline: none; }
.save-pill:focus-visible .save-pill__box {
  outline: var(--stroke) solid var(--amber);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- */
/* The save strip (design 05/06)                                     */
/* ---------------------------------------------------------------- */

/* Welded to the viewport bottom, exactly where .signin-sheet__card lands —
   which is why save_strip_controller stands that sheet down for the visit.
   Fixed inside .app, the same arrangement 08b already proves works against the
   shell's overflow clip.

   No scrim, and nothing under it is gated: the save is committed before this
   renders and every chip is its own write, so the page behind stays live. */
.save-strip {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 21;
  margin: 0 auto;
  max-width: 430px;
  background: var(--oat);
  color: var(--ink);
  border-top: var(--stroke) solid var(--ink);
  border-radius: 22px 22px 0 0;
  padding: 13px 16px calc(20px + env(safe-area-inset-bottom));

  /* No animation at all, in either direction. It renders in its final state,
     which keeps motion.md's two-sequences rule intact and makes "nothing hidden
     is pressable" true by construction rather than by a gate — and it leaves in
     one frame when you close it, for the same reason. */
}

/* Dismissal is a checkbox and a label, exactly as 08b does it, so the way out
   survives with the stylesheet alone — a panel over the bottom of the screen
   that only JavaScript can close is a trap. The next save replaces the whole
   `#save-strip` block, which is what resets this. */
.save-strip__dismiss {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
.save-strip__dismiss:checked ~ .save-strip { display: none; }
.save-strip__dismiss:focus-visible ~ .save-strip .save-strip__close {
  outline: var(--stroke) solid var(--amber);
  outline-offset: 2px;
}

/* The third save's ask, waiting behind the strip. One control closes the strip
   and brings the ask up, so the two can never be on screen at once and there is
   no JavaScript in the arrival at all.

   It follows the strip rather than replacing it because the strip's one job is
   catching a tag, and the ask's one job is asking at the calmest moment on the
   screen — which is the moment after somebody has finished tagging and closed
   it. Interrupting the tag would cost the strip its whole purpose and get the
   ask the worse hearing; this way each surface gets the moment it was designed
   for.

   **Only "Close" raises it, never the outside tap**, which is why the slot
   renders a second checkbox for the third save rather than reusing
   `#save_strip_dismiss`. The reveal is synchronous on `pointerdown`, so hanging
   it on the outside-tap path put the sheet's scrim under a tap already
   travelling towards a Save pill: the click was swallowed and the next save
   never posted. An outside tap is somebody getting on with something else, and
   this strip's standing promise is that such a tap still does what it was going
   to do. It closes the strip and asks nothing.

   `display` and nothing else. The card and the scrim are `position: fixed`, so
   the wrapper is only ever a switch. */
.signin-sheet--after-strip { display: none; }
#keep_list_ask:checked ~ .signin-sheet--after-strip { display: block; }

/* The reason a save didn't take. Same slot, same clock, no controls. */
.save-strip--flat {
  font: 500 14px/1.35 var(--font-body);
  padding-top: 16px;
}

/* The confirmation, and the whole of the strip's top line. `.save-strip__head`
   went with Undo: a flex row exists to sit two things beside each other, and
   there is only one thing here now. */
.save-strip__said {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font: 800 15px/1.1 var(--font-display);
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.save-strip__tick {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--amber);
}
.save-strip__tick svg { width: 11px; height: 11px; }

.save-strip__ask {
  font: 500 12px/1 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--on-oat-mono);
  margin: 11px 0 0;
}

/* Scrolls sideways rather than wrapping, so the strip keeps one height —
   otherwise how much of the page it covers would depend on how many tags you
   happen to own. */
/* The gap is measured from the shadow, not the border. Each chip throws 3px to
   its right, so a bare 8px gap left 5px of daylight and every chip's shadow
   landed on its neighbour — they read as touching. Same fix, same reason, as
   `.map-card__head`. */
.save-strip__tags {
  display: flex;
  gap: calc(8px + var(--drop-sm));
  margin-top: 9px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.save-strip__tags::-webkit-scrollbar { display: none; }
.save-strip__tags form.button_to { display: contents; }

.save-strip__chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  background: var(--oat);
  color: var(--ink);
  border: var(--stroke) solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink);
  padding: 11px 14px;
  font: 700 13px/1 var(--font-body);
  cursor: pointer;
  white-space: nowrap;
}
.save-strip__chip--on {
  background: var(--condensed);
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}

.save-strip__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
}
/* "Add a note", not "Notes & tags": the chips above *are* the tags. */
.save-strip__more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 700 13px/1 var(--font-body);
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.save-strip__more:hover { color: var(--caramel); }
.save-strip__more span { margin-left: 5px; text-decoration: none; }

/* Where the clock used to be. The same weight as "Add a note" across from it —
   two plain controls at either end of the strip's last line, neither of them
   the point of the surface. */
.save-strip__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  font: 700 13px/1 var(--font-body);
  color: var(--on-oat-mono);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.save-strip__close:hover { color: var(--ink); }

/* ---------------------------------------------------------------- */
/* Your list (design 02)                                             */
/* ---------------------------------------------------------------- */

.your-list { display: flex; flex-direction: column; flex: 1; }

.your-list__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
}
.your-list__title { color: var(--oat); }
.your-list__meta {
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--on-green-mono);
  margin: 8px 0 0;
}
.your-list__meta b { color: var(--amber); font-weight: 700; }

/* The screen's one caramel. Adding is what this page is for; filtering and the
   map only rearrange what adding put here. */
.add-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  background: var(--caramel);
  color: var(--oat);
  border: var(--stroke) solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  padding: 12px 16px;
  font: 800 14px/1 var(--font-display);
  letter-spacing: -.01em;
  cursor: pointer;
}
.add-btn svg { width: 13px; height: 13px; flex: none; }
.add-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }

.your-list__filtered {
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--on-green-mono);
  margin: 14px 0 0;
}

.your-list__keep {
  margin-top: auto;
  padding-top: 24px;
}
.your-list__keep-line {
  font: 500 14px/1.4 var(--font-body);
  color: var(--on-green-body);
  margin: 0;
  text-align: center;
}

/* --- the tag filter ------------------------------------------------ */

/* Links, not checkboxes: a chip carries the URL it would produce, so one tap
   filters. Selection is a class rather than `:has(:checked)`, because the
   selected set lives in the query string now — which is also what makes a
   filtered view a place you can come back to. */
.tag-filter { margin-top: 20px; }
/* Shadowed chips again, so the gap is measured from the shadow — and the row
   wraps, so it owes the same allowance downward as it does sideways. */
.tag-filter__chips {
  display: flex;
  flex-wrap: wrap;
  column-gap: calc(8px + var(--drop-sm));
  row-gap: calc(8px + var(--drop-sm));
}

.tag-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  background: var(--oat);
  color: var(--ink);
  border: var(--stroke) solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink);
  padding: 11px 14px;
  font: 700 13px/1 var(--font-body);
  cursor: pointer;
}
/* The editor still uses checkboxes — there the chips are part of a form that
   saves, not a filter that navigates. */
.tag-chip__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
.tag-chip--on,
.tag-chip:has(.tag-chip__input:checked) {
  background: var(--condensed);
  box-shadow: inset 3px 3px 0 rgba(23, 19, 15, .12);
  transform: translate(2px, 2px);
}
.tag-chip:has(.tag-chip__input:focus-visible) {
  outline: var(--stroke) solid var(--amber);
  outline-offset: 2px;
}
.tag-chip__count {
  font: 700 10px/1 var(--font-mono);
  color: var(--on-oat-mono);
}
/* Nothing on the filtered list carries this tag. It holds its place — the row
   must not change shape while you are aiming at it — and stops looking
   pressable, which is the honest thing for a chip that would empty the screen. */
.tag-chip--empty {
  background: none;
  border-color: var(--on-green-rule);
  border-style: dashed;
  box-shadow: none;
  color: var(--on-green-mono);
  cursor: default;
}
.tag-chip--empty .tag-chip__count { color: var(--on-green-rule); }
.tag-chip--on .tag-chip__count,
.tag-chip:has(.tag-chip__input:checked) .tag-chip__count { color: var(--on-condensed-mono); }

.tag-filter__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
}
.tag-filter__clear {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 600 13px/1 var(--font-body);
  color: var(--on-green-mono);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* --- the cards ----------------------------------------------------- */

.list-cards {
  list-style: none;
  margin: 0;
  padding: 16px 0 0;
  display: flex;
  flex-direction: column;
}

/* .field-row's numbers, on purpose: same radius, same stroke, same shadow, same
   padding. The list and the field are two views of one question, so they are
   the same object twice. */
.list-card {
  background: var(--oat);
  color: var(--ink);
  border: var(--stroke) solid var(--ink);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  /* The foot's Been pill throws 3px downward, so the card owes it that room —
     at zero the shadow sat on the card's own border rather than in a gap. */
  padding: 12px 14px var(--drop-sm);
  margin-bottom: calc(8px + var(--drop-sm));
}
/* Been there recedes, exactly as .field-row--had does — making the
   opportunities the loud objects is a job for the layout, not a label. */
.list-card--tried {
  background: var(--canvas);
  border-color: var(--on-oat-rule);
  box-shadow: none;
  color: var(--on-oat-body);
  margin-bottom: 8px;
}
.list-cards > .list-card:last-child { margin-bottom: 0; }

/* The ranked row's head, on the list: body takes the room, chip holds its
   size, and a long name wraps around it rather than shoving it off the card. */
.list-card__head { display: flex; align-items: center; gap: 11px; }
.list-card__head form.button_to { display: contents; }
.list-card__body { flex: 1; min-width: 0; display: block; }
.list-card__name { display: block; font: 800 17px/1 var(--font-display); overflow-wrap: anywhere; }
.list-card--tried .list-card__name { color: var(--on-oat-body); }
.list-card__meta { margin-top: 5px; }

.list-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.list-card__tag {
  font: 700 9px/1 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--on-oat-mono);
  border: 1px solid var(--on-oat-rule);
  border-radius: 6px;
  padding: 5px 7px;
}

/* Your words, in your voice. Not italic and not quoted — a note is the one
   thing on the screen that isn't ours to style into a pull quote. */
.list-card__note {
  margin: 9px 0 0;
  font: 500 13px/1.4 var(--font-body);
  color: var(--on-oat-body);
  text-wrap: pretty;
}

/* One quiet link under everything, and the card gives up its bottom padding so
   the 42px target is the spacing rather than sitting on top of it. The chip
   that used to share this line has moved up into the head. */
.list-card__foot { display: flex; align-items: center; }
.list-card__edit {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  font: 700 13px/1 var(--font-body);
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.list-card--tried .list-card__edit { color: var(--on-oat-body); }
.list-card__edit:hover { color: var(--caramel); }

/* The same two boxes as the save control, and deliberately the same chip: the
   list and the field are two views of one question, so their controls are one
   object. Target here, ink in `.save-pill__box`. */
.tried-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
}
.tried-pill:active .save-pill__box { transform: translate(2px, 2px); box-shadow: none; }
/* Been is a completed fact, not a claim to make in a shadow. */
.list-card--tried .save-pill__box {
  background: none;
  border-color: var(--on-oat-rule);
  box-shadow: none;
  color: var(--on-oat-mono);
}
.tried-pill:focus-visible { outline: none; }
.tried-pill:focus-visible .save-pill__box {
  outline: var(--stroke) solid var(--amber);
  outline-offset: 2px;
}
.tried-pill__tick {
  width: 11px;
  height: 11px;
  border: 2px solid currentColor;
  border-radius: 3px;
  flex: none;
}

/* ---------------------------------------------------------------- */
/* The list map — a second view of the list, never a second list     */
/* ---------------------------------------------------------------- */

/* A list has no rank, so the card's badge carries no numeral. Still the pin,
   still round, still green: the card doesn't change colour, it contains the
   pin. */
.map-card__rank--blank { font-size: 0; }

/* The card's head holds a control now, so it needs the row's own arrangement:
   body takes the room, control holds its size. */
.map-card__head > .save-control { align-self: center; }
.map-card__edit {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 700 13px/1 var(--font-body);
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.map-card--had .map-card__edit { color: var(--on-oat-body); }
.map-card__edit:hover { color: var(--caramel); }

.map-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.map-card__note {
  margin: 9px 0 0;
  font: 500 13px/1.4 var(--font-body);
  color: var(--on-oat-body);
  text-wrap: pretty;
}

/* Said out loud rather than hidden. A place with no shopfront we can put on a
   map keeps its row and loses its pin, and a map quietly showing nine of twelve
   reads as a bug. */
.results-map__gap {
  font: 500 11px/1.4 var(--font-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--on-green-mono);
  margin: 10px 0 0;
}
.is-map-open .results-map__gap { display: none; }

/* ---------------------------------------------------------------- */
/* The entry editor (design 03)                                      */
/* ---------------------------------------------------------------- */

.entry-editor { display: flex; flex-direction: column; flex: 1; padding-bottom: 20px; }

.entry-editor__back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 8px;
  font: 700 10px/1 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-green-mono);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.entry-editor__back:hover { color: var(--oat); }

.entry-editor__title { color: var(--oat); margin-top: 14px; }
.entry-editor__sub {
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--on-green-mono);
  margin: 9px 0 0;
}

.entry-editor__label {
  font: 700 10px/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--on-green-mono);
  margin: 26px 0 9px;
}

.entry-editor__field {
  display: block;
  width: 100%;
  background: var(--oat);
  color: var(--ink);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 13px 14px;
  font: 500 15px/1.45 var(--font-body);
  resize: none;
}
.entry-editor__field::placeholder { color: var(--on-oat-mono); }
.entry-editor__field--tag { margin-top: 10px; }

.entry-editor__hint {
  font: 500 12px/1.4 var(--font-body);
  color: var(--on-green-mono);
  margin: 11px 0 0;
  text-wrap: pretty;
}

/* --- the tried switch ---------------------------------------------- */

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
  background: var(--oat);
  color: var(--ink);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 13px 14px;
  cursor: pointer;
}
.toggle-row__text { font: 800 15px/1.1 var(--font-display); }
/* Both readings are in the markup and the checkbox picks one, so the words
   never sit a save behind the thumb that moved them. */
.toggle-row__on { display: none; }
.toggle-row:has(.toggle-row__input:checked) .toggle-row__on { display: inline; }
.toggle-row:has(.toggle-row__input:checked) .toggle-row__off { display: none; }
.toggle-row__meta {
  display: block;
  font: 500 11px/1.3 var(--font-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--on-oat-mono);
  margin-top: 5px;
}
.toggle-row__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
.toggle-row__switch {
  position: relative;
  flex: none;
  width: 58px;
  height: 34px;
  border: var(--stroke) solid var(--ink);
  border-radius: 999px;
  background: var(--canvas);
}
.toggle-row__switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ink);
  transition: translate .12s ease;
}
.toggle-row:has(.toggle-row__input:checked) .toggle-row__switch { background: var(--condensed); }
.toggle-row:has(.toggle-row__input:checked) .toggle-row__switch::after { translate: 24px 0; }
.toggle-row:has(.toggle-row__input:focus-visible) {
  outline: var(--stroke) solid var(--amber);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .toggle-row__switch::after { transition: none; }
}

.entry-editor__go {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 18px;
  font: 700 13px/1 var(--font-body);
  color: var(--on-green-body);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.entry-editor__go:hover { color: var(--oat); }
.entry-editor__go span { margin-left: 5px; text-decoration: none; }

.entry-editor__save { margin-top: 26px; }

/* ---------------------------------------------------------------- */
/* Finding a place we already hold (the Add a place screen)          */
/* ---------------------------------------------------------------- */

.place-search { margin-top: 22px; }
.place-search__row { display: flex; align-items: stretch; gap: 10px; }
.place-search__field { flex: 1; min-width: 0; }

/* Not caramel — "Add to my list" at the foot of this screen is its one action,
   and looking something up is not a second one. */
.place-search__go {
  flex: none;
  min-height: 52px;
  background: none;
  border: 2px solid var(--on-green-ghost);
  border-radius: var(--radius-md);
  padding: 0 16px;
  font: 700 13px/1 var(--font-body);
  color: var(--on-green-body);
  cursor: pointer;
}
.place-search__go:hover { border-color: var(--amber); color: var(--oat); }

.place-search__results {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* .list-card's numbers, because it is the same object: a place, and one control
   for what to do about it. */
.place-result {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--oat);
  color: var(--ink);
  border: var(--stroke) solid var(--ink);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  padding: 11px 14px;
  margin-bottom: calc(8px + var(--drop-sm));
}
.place-search__results > .place-result:last-child { margin-bottom: 0; }
.place-result__body { flex: 1; min-width: 0; }
.place-result__name { display: block; font: 800 16px/1.05 var(--font-display); overflow-wrap: anywhere; }
.place-result__meta { margin-top: 5px; }
/* Says which of two identically-named rows is the one that keys to a ranking.
   Green rather than amber — this is a fact about the row, not a winner — and
   it sits inline after the name so a long name wraps around it rather than
   pushing it off the card. */
.place-result__flag {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 8px;
  background: var(--green);
  color: var(--oat);
  border-radius: 999px;
  font: 700 9px/1 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.place-result form.button_to { display: contents; }

.place-search__empty {
  font: 500 14px/1.5 var(--font-body);
  color: var(--on-green-body);
  margin: 16px 0 0;
  text-wrap: pretty;
}

/* Typing a place in is the exception — we hold the places already — so it sits
   behind a tap and stays shut until somebody has looked. `<details>`, so that
   is true with no JavaScript, exactly as the sign-up screen's email form is.
   Quieter than that one: a dashed outline rather than a card, because this is
   the way out of the ordinary path rather than a second offer of equal weight. */
.own-place { margin-top: 26px; }
.own-place__summary {
  list-style: none;
  display: block;
  min-height: 44px;
  border: 2px dashed var(--on-green-rule);
  border-radius: 16px;
  padding: 14px;
  text-align: center;
  font: 600 14px/1.2 var(--font-body);
  color: var(--on-green-body);
  cursor: pointer;
}
.own-place__summary::-webkit-details-marker { display: none; }
.own-place__summary:hover { border-color: var(--on-green-ghost); color: var(--oat); }
.own-place[open] .own-place__summary {
  border-style: solid;
  border-bottom-width: 0;
  border-radius: 16px 16px 0 0;
}
.own-place__card {
  border: 2px solid var(--on-green-rule);
  border-top: 0;
  border-radius: 0 0 16px 16px;
  padding: 4px 14px 18px;
}
/* The first label inside sits under the summary's own border, so it doesn't
   need the full run-up a label gets between two fields. */
.own-place__card .entry-editor__label:first-of-type { margin-top: 18px; }