/* ── Structured field editors ────────────────────────────────────────────────
   The chrome for the type-aware editors in app/views/orders/fields/ — the
   inputs, rows, add/remove buttons and either/or pills every editor is built
   from (OrdersHelper's field_*_classes put an `rf-` hook on each), the
   timeline's per-row icon swatch, the drag-to-reorder state and the
   required-field highlight.

   They wear the storefront's pop look: 2px ink outlines, rounded-xl corners,
   a sky focus ring, butter for whatever is chosen, pink for taking away.

   Loaded globally by `stylesheet_link_tag :app`, so anywhere that renders an
   orders/fields partial gets the full editor. The rules here are deliberately
   NOT inside a cascade layer: Tailwind's utilities are layered, so a plain
   `.rf-field` here outranks the order-form utilities the helpers still list
   (bg-cream-50, border-ink-900/15 …) without an !important in sight.

   Three places host these editors:
     · the old order form and the guided steps — the base rules below;
     · the customer builders' side panel (.bx-shell .bx-rich) — the same look,
       compacted, in the second block;
     · the admin builders (.bx-shell.bx-dark) — left to builder.css's dark
       skin, which out-ranks the base rules here on specificity.
   ────────────────────────────────────────────────────────────────────────── */

/* Required-field highlight (empty on "Preview my newspaper"). */
.rf-missing {
  border-radius: 1rem;
  box-shadow: 0 0 0 3px var(--color-pop-pink, #ff9ec0), 0 0 0 5px var(--color-pop-ink, #121212);
  scroll-margin-top: 5rem;
}
.rf-missing > label { color: var(--color-pop-ink, #121212); text-decoration: underline wavy var(--color-pop-pink, #ff9ec0); }

/* ── The parts every editor is made of ─────────────────────────────────── */

/* A field: the storefront's input-pop. */
.rf-field {
  width: 100%;
  border: 2px solid var(--color-pop-ink, #121212);
  border-radius: 0.75rem;
  background: #fff;
  color: var(--color-pop-ink, #121212);
  font-family: var(--font-pop, "Bricolage Grotesque", sans-serif);
  font-size: 1rem;
  line-height: 1.4;
  padding: 0.7rem 0.9rem;
  transition: box-shadow 0.12s ease;
}
.rf-field::placeholder { color: #6b6255; opacity: 1; }
.rf-field:focus {
  outline: none;
  border-color: var(--color-pop-ink, #121212);
  box-shadow: 0 0 0 4px var(--color-pop-sky, #8fb3ff);
}
textarea.rf-field { resize: vertical; }
/* The compact one, for rows where several sit side by side. */
.rf-field-sm { font-size: 0.875rem; padding: 0.5rem 0.7rem; }
/* A figure, not a sentence — the stats editor's left-hand box. */
.rf-field-num { width: 4.5rem; flex: none; text-align: center; font-weight: 700; }

/* One row of a repeatable list. */
.rf-card {
  border: 2px solid var(--color-pop-ink, #121212);
  border-radius: 1rem;
  background: var(--color-pop-cream, #fff6e5);
  padding: 0.75rem;
}

/* The ✕ on a row. Pink is the one colour that means "take this away". */
.rf-remove {
  width: 1.85rem; height: 1.85rem; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--color-pop-ink, #121212);
  border-radius: 999px;
  background: #fff;
  color: var(--color-pop-ink, #121212);
  font-size: 0.72rem; font-weight: 700; line-height: 1;
  cursor: pointer;
  transition: background-color 0.12s ease, transform 0.12s ease;
}
.rf-remove:hover, .rf-remove:focus-visible { background: var(--color-pop-pink, #ff9ec0); color: var(--color-pop-ink, #121212); }
.rf-remove:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-pop-sky, #8fb3ff); }

/* "➕ Add …" beneath a list: a dashed sticker that fills butter on hover. */
.rf-add {
  display: inline-flex; align-items: center; gap: 0.4rem;
  border: 2px dashed var(--color-pop-ink, #121212);
  border-radius: 999px;
  background: #fff;
  color: var(--color-pop-ink, #121212);
  padding: 0.4rem 0.95rem;
  font-family: var(--font-label, "DM Mono", monospace);
  font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.12s ease, transform 0.12s ease;
}
.rf-add:hover, .rf-add:focus-visible {
  border-style: solid; background: var(--color-pop-butter, #ffd445);
  box-shadow: 2px 2px 0 var(--color-pop-ink, #121212); transform: translate(-1px, -1px);
}
.rf-add:focus-visible { outline: none; }

/* The grip that drags a row up and down. */
.rf-handle { color: rgba(18, 18, 18, 0.55); }
.rf-handle:hover { color: var(--color-pop-cobalt, #1f3fd1); }

/* An editor's own words. */
.rf-note {
  font-family: var(--font-pop, "Bricolage Grotesque", sans-serif);
  font-size: 0.8rem; line-height: 1.45; color: #4a4a4a;
}
.rf-sublabel, .rf-choice-label {
  font-family: var(--font-label, "DM Mono", monospace);
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-pop-ink, #121212);
}
.rf-grouplabel {
  font-family: var(--font-pop, "Bricolage Grotesque", sans-serif);
  font-size: 0.9rem; font-weight: 800; letter-spacing: -0.01em;
  color: var(--color-pop-ink, #121212);
}

/* A sunken panel inside an editor: the puzzle previews, the map's frame. */
.rf-panel {
  border: 2px solid var(--color-pop-ink, #121212);
  border-radius: 1rem;
  background: var(--color-pop-cream, #fff6e5);
  padding: 0.75rem;
}

/* Either/or choices — the crossword's looks, the map's outlines — as a little
   row of stickers. The chosen one is butter. The editors' controllers mark the
   chosen one by toggling `bg-ink-900` (they never touch `rf-pill-on`, which
   only says what was chosen when the page was drawn), so that is the class
   that means "on" here. */
.rf-pill {
  display: inline-flex; align-items: center;
  border: 2px solid var(--color-pop-ink, #121212);
  border-radius: 999px;
  background: #fff;
  color: var(--color-pop-ink, #121212);
  padding: 0.22rem 0.75rem;
  font-family: var(--font-pop, "Bricolage Grotesque", sans-serif);
  font-size: 0.78rem; font-weight: 600; line-height: 1.3;
  cursor: pointer;
  transition: background-color 0.12s ease, transform 0.12s ease;
}
.rf-pill:hover { background: var(--color-pop-sky, #8fb3ff); color: var(--color-pop-ink, #121212); }
.rf-pill.bg-ink-900, .rf-pill.bg-ink-900:hover {
  background: var(--color-pop-butter, #ffd445);
  color: var(--color-pop-ink, #121212);
  font-weight: 800;
  box-shadow: 2px 2px 0 var(--color-pop-ink, #121212);
}
.rf-pill:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-pop-sky, #8fb3ff); }

/* A button that does something inside an editor — the map's "＋ Add pin". */
.rf-action {
  border: 2px solid var(--color-pop-ink, #121212);
  border-radius: 999px;
  background: var(--color-pop-butter, #ffd445);
  color: var(--color-pop-ink, #121212);
  font-family: var(--font-pop, "Bricolage Grotesque", sans-serif);
  font-weight: 800;
  box-shadow: 2px 2px 0 var(--color-pop-ink, #121212);
  cursor: pointer;
  transition: transform 0.12s ease;
}
.rf-action:hover { background: var(--color-pop-butter, #ffd445); color: var(--color-pop-ink, #121212); transform: translate(-1px, -1px); }
/* …and the map's "Put the venue on the map" offer, which is the same class on
   a full-width, left-aligned sentence. */
[data-map-pins-target="venue"] .rf-action {
  border-style: dashed; background: #fff; box-shadow: none; font-weight: 500; border-radius: 0.75rem;
}
[data-map-pins-target="venue"] .rf-action:hover { border-style: solid; background: var(--color-pop-butter, #ffd445); transform: none; }

/* A dropdown under a field — the map's search suggestions. */
.rf-menu {
  border: 2px solid var(--color-pop-ink, #121212);
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: 4px 4px 0 var(--color-pop-ink, #121212);
}
.rf-menu > button { border-bottom: 1px solid rgba(18, 18, 18, 0.12); font-family: var(--font-pop, "Bricolage Grotesque", sans-serif); }
.rf-menu > button:hover { background: var(--color-pop-butter, #ffd445); }
.rf-menu > button span { color: var(--color-pop-ink, #121212); font-family: inherit; }
.rf-menu > button span + span { color: #4a4a4a; }

/* A word that acts as a button — the dateline's "type it instead". */
.rf-link {
  color: var(--color-pop-cobalt, #1f3fd1);
  font-family: var(--font-pop, "Bricolage Grotesque", sans-serif);
  font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
.rf-link:hover { color: var(--color-pop-ink, #121212); }

/* ── Markup the editors' controllers write themselves ─────────────────────
   The crossword's clue rows, the word search's chips, the map's pin rows and
   the photo's text blocks are drawn by their Stimulus controllers rather than
   by a partial, so they carry no `rf-` hooks — scoped by controller instead. */

/* Every hand-rolled field in them is an rf-field. */
:is([data-puzzle-editor-target="editor"], [data-map-pins-target="list"], [data-photo-overlay-target="list"])
  :is(input[type="text"], select) {
  border: 2px solid var(--color-pop-ink, #121212);
  border-radius: 0.75rem;
  background-color: #fff;
  color: var(--color-pop-ink, #121212);
  font-family: var(--font-pop, "Bricolage Grotesque", sans-serif);
}
:is([data-puzzle-editor-target="editor"], [data-map-pins-target="list"], [data-photo-overlay-target="list"])
  :is(input[type="text"], select):focus {
  outline: none; box-shadow: 0 0 0 4px var(--color-pop-sky, #8fb3ff);
}
:is([data-puzzle-editor-target="editor"], [data-map-pins-target="list"], [data-photo-overlay-target="list"])
  input::placeholder { color: #6b6255; opacity: 1; }
[data-puzzle-editor-target="editor"] [data-role="answer"] { font-family: var(--font-label, "DM Mono", monospace); }
/* An input won't shrink below its intrinsic width unless told it may — without
   this a clue row is wider than a phone and its remove button falls off. */
[data-puzzle-editor-target="editor"] [data-role="rows"] input { min-width: 0; }
@media (max-width: 480px) {
  [data-puzzle-editor-target="editor"] [data-role="answer"] { width: 6.5rem; }
}

/* Their little remove buttons are rf-removes. */
[data-puzzle-editor-target="editor"] [data-role="rows"] button,
[data-map-pins-target="list"] button,
[data-photo-overlay-target="list"] [data-action="photo-overlay#remove"] {
  width: 1.85rem; height: 1.85rem; padding: 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--color-pop-ink, #121212); border-radius: 999px;
  background: #fff; color: var(--color-pop-ink, #121212);
  font-size: 0.8rem; font-weight: 700; line-height: 1;
}
[data-puzzle-editor-target="editor"] [data-role="rows"] button:hover,
[data-map-pins-target="list"] button:hover,
[data-photo-overlay-target="list"] [data-action="photo-overlay#remove"]:hover {
  background: var(--color-pop-pink, #ff9ec0); color: var(--color-pop-ink, #121212);
}

/* The crossword's "+ Add clue" is an rf-add. */
[data-puzzle-editor-target="editor"] [data-role="add"] {
  border: 2px dashed var(--color-pop-ink, #121212); background: #fff; color: var(--color-pop-ink, #121212);
  font-family: var(--font-label, "DM Mono", monospace); font-size: 0.7rem; letter-spacing: 0.1em;
}
[data-puzzle-editor-target="editor"] [data-role="add"]:hover {
  border-style: solid; background: var(--color-pop-butter, #ffd445); color: var(--color-pop-ink, #121212);
}
/* Their hints read as rf-notes. */
:is([data-puzzle-editor-target="editor"], [data-controller~="map-pins"], [data-controller~="photo-overlay"]) p {
  font-family: var(--font-pop, "Bricolage Grotesque", sans-serif); color: #4a4a4a;
}
[data-controller~="map-pins"] p[data-map-pins-target="status"] { color: var(--color-pop-cobalt, #1f3fd1); }

/* The word search's chip box is a field; each word in it a butter sticker,
   and one that won't fit a pink one. */
[data-puzzle-editor-target="editor"] [data-role="chips"] {
  border: 2px solid var(--color-pop-ink, #121212); border-radius: 0.75rem; background: #fff;
}
[data-puzzle-editor-target="editor"] [data-role="chips"]:focus-within { box-shadow: 0 0 0 4px var(--color-pop-sky, #8fb3ff); }
[data-puzzle-editor-target="editor"] [data-role="chip-input"] {
  border: 0; box-shadow: none; font-family: var(--font-pop, "Bricolage Grotesque", sans-serif);
}
[data-puzzle-editor-target="editor"] [data-role="chip-input"]:focus { box-shadow: none; }
[data-puzzle-editor-target="editor"] [data-word] {
  border: 2px solid var(--color-pop-ink, #121212);
  background: var(--color-pop-butter, #ffd445); color: var(--color-pop-ink, #121212);
  font-family: var(--font-label, "DM Mono", monospace); font-weight: 500;
}
[data-puzzle-editor-target="editor"] [data-word].bg-amber-100 { background: var(--color-pop-pink, #ff9ec0); }

/* The pin beside each map row. */
[data-map-pins-target="list"] [data-pin-row] > span { filter: none; }

/* The photo's text blocks: each block a row card, the chosen one butter-edged;
   their alignment buttons a segmented control. */
[data-photo-overlay-target="list"] [data-ov-row] {
  border: 2px solid var(--color-pop-ink, #121212); border-radius: 0.85rem; background: #fff;
}
[data-photo-overlay-target="list"] [data-ov-row].border-blush-700 {
  background: var(--color-pop-cream, #fff6e5); box-shadow: 3px 3px 0 var(--color-pop-ink, #121212);
}
[data-photo-overlay-target="list"] [data-action="photo-overlay#editAlign"] {
  border: 2px solid var(--color-pop-ink, #121212); background: #fff; color: var(--color-pop-ink, #121212);
  border-radius: 0.4rem;
}
[data-photo-overlay-target="list"] [data-action="photo-overlay#editAlign"].bg-ink-900 { background: var(--color-pop-butter, #ffd445); font-weight: 800; }
[data-photo-overlay-target="list"] [data-action="photo-overlay#editColor"] { border: 2px solid var(--color-pop-ink, #121212); }
[data-photo-overlay-target="list"] [data-action="photo-overlay#editColor"].ring-2 { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-pop-cobalt, #1f3fd1); }
[data-photo-overlay-target="list"] label { font-family: var(--font-pop, "Bricolage Grotesque", sans-serif); color: var(--color-pop-ink, #121212); }
[data-photo-overlay-target="list"] input[type="checkbox"] { accent-color: var(--color-pop-cobalt, #1f3fd1); }

/* ── Per-row icon override (timelines) ─────────────────────────────────── */
/* What each box in a timeline row is for, over the box. */
.rf-row-label {
  display: block; margin: 0 0 0.15rem;
  font-family: var(--font-label, "DM Mono", monospace); font-size: 0.6rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--color-ink-500, #6b6459);
}
.rf-icon-swatch {
  width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--color-pop-ink, #121212); border-radius: 0.75rem; background: #fff;
  color: var(--color-pop-ink, #121212); cursor: pointer;
  transition: background-color 0.12s ease;
}
.rf-icon-swatch:hover { background: var(--color-pop-sky, #8fb3ff); }
.rf-icon-swatch:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-pop-sky, #8fb3ff); }
.rf-icon-glyph { width: 1.4rem; height: 1.4rem; }
.rf-icon-auto {
  font-family: var(--font-label, "DM Mono", monospace);
  font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-pop-ink, #121212);
}
.rf-icon-menu {
  position: absolute; top: 100%; left: 0; z-index: 20; margin-top: 0.35rem;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.2rem;
  width: 14rem; padding: 0.45rem; background: #fff;
  border: 2px solid var(--color-pop-ink, #121212);
  border-radius: 0.85rem; box-shadow: 4px 4px 0 var(--color-pop-ink, #121212);
}
.rf-icon-opt {
  display: inline-flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1;
  border: 2px solid transparent; border-radius: 0.5rem; background: transparent;
  color: var(--color-pop-ink, #121212); cursor: pointer;
}
.rf-icon-opt:hover { background: var(--color-pop-butter, #ffd445); border-color: var(--color-pop-ink, #121212); }
.rf-icon-opt .rf-icon-glyph { width: 1.3rem; height: 1.3rem; }
.rf-icon-auto-opt {
  font-family: var(--font-label, "DM Mono", monospace);
  font-size: 0.5rem; text-transform: uppercase; color: var(--color-pop-ink, #121212);
}
/* Drag-to-reorder: the row being dragged dims; the grip shows a grabbing cursor. */
.rf-dragging { opacity: 0.45; }
[data-rf-handle]:active { cursor: grabbing; }

/* ── In the customer builders' side panel ─────────────────────────────────
   The same pieces at panel size: the sidebar is ~300px, so fields are a step
   smaller and rows tighter, but the outline, corners, focus ring and chosen
   state are the storefront's. Prefixed past builder.css's own reskin of the
   hooks (`.bx-shell .bx-rich .rf-…`), and kept off the admin's dark shell. */
.bx-shell:not(.bx-dark) .bx-rich .rf-field {
  border: 2px solid var(--color-pop-ink, #121212);
  border-radius: 0.7rem;
  background: #fff;
  color: var(--color-pop-ink, #121212);
  font-family: var(--font-pop, "Bricolage Grotesque", sans-serif);
  font-size: 0.85rem; line-height: 1.4;
  padding: 0.45rem 0.6rem;
}
.bx-shell:not(.bx-dark) .bx-rich .rf-field::placeholder { color: #6b6255; }
.bx-shell:not(.bx-dark) .bx-rich .rf-field:focus {
  outline: none; border-color: var(--color-pop-ink, #121212);
  box-shadow: 0 0 0 3px var(--color-pop-sky, #8fb3ff);
}
.bx-shell:not(.bx-dark) .bx-rich .rf-field-num { width: 3.8rem; }
.bx-shell:not(.bx-dark) .bx-rich .rf-card {
  padding: 0.55rem; border: 2px solid var(--color-pop-ink, #121212); border-radius: 0.85rem;
  background: var(--color-pop-cream, #fff6e5);
}
.bx-shell:not(.bx-dark) .bx-rich .rf-card.relative { padding-right: 2.3rem; }
.bx-shell:not(.bx-dark) .bx-rich [data-rf-rows] > * + * { margin-top: 0.5rem; }
.bx-shell:not(.bx-dark) .bx-rich .rf-remove {
  width: 1.6rem; height: 1.6rem;
  border: 2px solid var(--color-pop-ink, #121212); border-radius: 999px;
  background: #fff; color: var(--color-pop-ink, #121212); font-size: 0.65rem;
}
.bx-shell:not(.bx-dark) .bx-rich .rf-remove:hover { background: var(--color-pop-pink, #ff9ec0); color: var(--color-pop-ink, #121212); }
.bx-shell:not(.bx-dark) .bx-rich .rf-add {
  margin-top: 0.6rem; padding: 0.35rem 0.8rem;
  border: 2px dashed var(--color-pop-ink, #121212); border-radius: 999px;
  background: #fff; color: var(--color-pop-ink, #121212);
  font-family: var(--font-label, "DM Mono", monospace);
  font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.bx-shell:not(.bx-dark) .bx-rich .rf-add:hover {
  border-style: solid; background: var(--color-pop-butter, #ffd445); color: var(--color-pop-ink, #121212);
}
.bx-shell:not(.bx-dark) .bx-rich .rf-handle { color: rgba(18, 18, 18, 0.55); }
.bx-shell:not(.bx-dark) .bx-rich .rf-handle:hover { color: var(--color-pop-cobalt, #1f3fd1); }
.bx-shell:not(.bx-dark) .bx-rich .rf-note {
  font-family: var(--font-pop, "Bricolage Grotesque", sans-serif); font-size: 0.74rem; color: #4a4a4a;
}
.bx-shell:not(.bx-dark) .bx-rich .rf-sublabel,
.bx-shell:not(.bx-dark) .bx-rich .rf-choice-label {
  font-family: var(--font-label, "DM Mono", monospace);
  font-size: 0.62rem; letter-spacing: 0.12em; color: var(--color-pop-ink, #121212);
}
.bx-shell:not(.bx-dark) .bx-rich .rf-grouplabel {
  font-family: var(--font-pop, "Bricolage Grotesque", sans-serif);
  font-size: 0.78rem; font-weight: 800; color: var(--color-pop-ink, #121212);
}
.bx-shell:not(.bx-dark) .bx-rich .rf-panel {
  padding: 0.55rem; border: 2px solid var(--color-pop-ink, #121212); border-radius: 0.85rem;
  background: var(--color-pop-cream, #fff6e5);
}
.bx-shell:not(.bx-dark) .bx-rich .rf-pill,
.bx-shell:not(.bx-dark) .bx-rich .rf-pill-on {
  padding: 0.18rem 0.62rem; border: 2px solid var(--color-pop-ink, #121212); border-radius: 999px;
  background: #fff; color: var(--color-pop-ink, #121212);
  font-family: var(--font-pop, "Bricolage Grotesque", sans-serif); font-size: 0.72rem; font-weight: 600;
  box-shadow: none;
}
.bx-shell:not(.bx-dark) .bx-rich .rf-pill:hover { background: var(--color-pop-sky, #8fb3ff); color: var(--color-pop-ink, #121212); }
.bx-shell:not(.bx-dark) .bx-rich .rf-pill.bg-ink-900,
.bx-shell:not(.bx-dark) .bx-rich .rf-pill.bg-ink-900:hover {
  background: var(--color-pop-butter, #ffd445); color: var(--color-pop-ink, #121212); font-weight: 800;
  box-shadow: 2px 2px 0 var(--color-pop-ink, #121212);
}
.bx-shell:not(.bx-dark) .bx-rich .rf-action {
  padding: 0.35rem 0.75rem; border: 2px solid var(--color-pop-ink, #121212); border-radius: 999px;
  background: var(--color-pop-butter, #ffd445); color: var(--color-pop-ink, #121212);
  font-family: var(--font-pop, "Bricolage Grotesque", sans-serif); font-size: 0.74rem; font-weight: 800;
}
.bx-shell:not(.bx-dark) .bx-rich .rf-action:hover { filter: none; background: var(--color-pop-butter, #ffd445); color: var(--color-pop-ink, #121212); }
.bx-shell:not(.bx-dark) .bx-rich [data-map-pins-target="venue"] .rf-action {
  border-style: dashed; border-radius: 0.7rem; background: #fff; font-weight: 500; box-shadow: none;
}
.bx-shell:not(.bx-dark) .bx-rich [data-map-pins-target="venue"] .rf-action:hover { border-style: solid; background: var(--color-pop-butter, #ffd445); }
.bx-shell:not(.bx-dark) .bx-rich .rf-menu {
  border: 2px solid var(--color-pop-ink, #121212); border-radius: 0.7rem; background: #fff;
  box-shadow: 3px 3px 0 var(--color-pop-ink, #121212);
}
.bx-shell:not(.bx-dark) .bx-rich .rf-link {
  color: var(--color-pop-cobalt, #1f3fd1); font-family: var(--font-pop, "Bricolage Grotesque", sans-serif);
  font-size: 0.7rem; font-weight: 600;
}
.bx-shell:not(.bx-dark) .bx-rich .rf-icon-swatch { width: 2.1rem; height: 2.1rem; border-radius: 0.6rem; }

/* The controllers' own fields, at panel size. */
.bx-shell:not(.bx-dark) .bx-rich :is([data-puzzle-editor-target="editor"], [data-map-pins-target="list"])
  input[type="text"] { font-size: 0.85rem; padding: 0.4rem 0.55rem; border-radius: 0.7rem; }
.bx-shell:not(.bx-dark) .bx-rich [data-puzzle-editor-target="editor"] [data-role="rows"] > div {
  padding: 0.45rem; border: 2px solid var(--color-pop-ink, #121212); border-radius: 0.85rem;
  background: var(--color-pop-cream, #fff6e5);
}
.bx-shell:not(.bx-dark) .bx-rich [data-puzzle-editor-target="editor"] [data-role="rows"] > div + div { margin-top: 0.4rem; }
.bx-shell:not(.bx-dark) .bx-rich [data-puzzle-editor-target="editor"] [data-role="rows"] button { width: 1.6rem; height: 1.6rem; font-size: 0.7rem; }
.bx-shell:not(.bx-dark) .bx-rich [data-puzzle-editor-target="editor"] [data-role="add"] { padding: 0.35rem 0.8rem; font-size: 0.64rem; }
.bx-shell:not(.bx-dark) .bx-rich [data-puzzle-editor-target="editor"] p,
.bx-shell:not(.bx-dark) .bx-rich [data-controller~="map-pins"] p { font-size: 0.72rem; }
.bx-shell:not(.bx-dark) .bx-rich [data-puzzle-editor-target="editor"] [data-role="chip-input"] { border: 0; padding: 0.25rem; }

/* Phones: 16px on every field, at this specificity, or iOS zooms the page in
   when one takes focus and never zooms back out (builder.css says the same
   for its own fields at the same breakpoint). */
@media (max-width: 1024px) {
  .bx-shell:not(.bx-dark) .bx-rich .rf-field,
  .bx-shell:not(.bx-dark) .bx-rich :is([data-puzzle-editor-target="editor"], [data-map-pins-target="list"]) input[type="text"] { font-size: 16px; }
  .bx-shell:not(.bx-dark) .bx-rich .rf-field-num { width: 4.5rem; }
  .bx-shell:not(.bx-dark) .bx-rich .rf-remove { width: 2rem; height: 2rem; }
}