/* radioctl OPERATOR EDIT UI styles.
 *
 * Every selector is namespaced `rce-` (radioctl edit) so this file can be
 * added to, or removed from, the page without touching style.css. It
 * inherits the app's dark palette through the :root custom properties
 * style.css defines (--bg/--bg2/--bg3/--line/--fg/--muted/--accent/
 * --good/--warn/--bad, --tap); the fallbacks in var() keep the module
 * readable if it is ever loaded on a page without them.
 *
 * Z-INDEX ORDER, above Leaflet (whose panes top out around 700 and whose
 * controls sit at 1000): launcher 3900 < drawer 4000 < modals 5000 <
 * toasts 6000. A confirm dialog raised FROM a picker must sit above it,
 * so .rce-confirm gets its own step.
 *
 * DERIVED vs STORED is carried by the .rce-src pill and nothing else, so
 * the two never drift apart visually: derived is dim with a DASHED
 * border (a thing that was computed), stored is solid accent (a thing a
 * person wrote).
 */

/* ---------- launcher ---------- */
.rce-launch {
  position: fixed;
  right: 14px;
  bottom: 18px;
  z-index: 3900;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap, 28px);
  padding: 5px 12px 5px 10px;
  border: 1px solid var(--line, #323a46);
  border-radius: 999px;
  background: var(--bg2, #1c2027);
  color: var(--muted, #8a93a0);
  font: 13px/1.2 "Segoe UI", system-ui, -apple-system, sans-serif;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.rce-launch:hover { color: var(--accent, #4d9de0);
                    border-color: var(--accent, #4d9de0); }
/* while the drawer is open the launcher steps aside rather than hiding
 * under it - it is also the CLOSE affordance, and a toggle that vanishes
 * when it is on reads as broken */
.rce-launch.on { color: var(--accent, #4d9de0);
                 border-color: var(--accent, #4d9de0);
                 background: var(--bg3, #242a33);
                 right: 454px; }
.rce-launch.rce-gone { display: none; }

/* ---------- drawer ---------- */
/* WIDTHS COME FROM --rce-vw (edit.js sets it to
 * document.documentElement.clientWidth and keeps it in sync on resize),
 * NOT from 100vw. 100vw counts the classic scrollbar gutter, so on a
 * narrow window a "full width" overlay lands 15-25 px wider than the
 * area you can actually see - the right edge of the sheet, and its
 * close button, end up unreachable. The 100vw values are fallbacks for
 * the moment before the first sync. */
.rce-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 440px;
  max-width: var(--rce-vw, 100vw);
  z-index: 4000;
  display: none;
  flex-direction: column;
  background: var(--bg, #14171c);
  border-left: 1px solid var(--line, #323a46);
  box-shadow: -6px 0 24px rgba(0, 0, 0, 0.5);
  color: var(--fg, #d7dce3);
  font: 13px/1.45 "Segoe UI", system-ui, -apple-system, sans-serif;
}
.rce-drawer.open { display: flex; }

.rce-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px 9px 14px;
  background: var(--bg2, #1c2027);
  border-bottom: 1px solid var(--line, #323a46);
  flex: 0 0 auto;
}
.rce-title {
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--muted, #8a93a0);
}
.rce-role {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--line, #323a46);
  color: var(--muted, #8a93a0);
}
.rce-role.ok { color: var(--good, #3fb950); border-color: var(--good, #3fb950); }
.rce-role.ro { color: var(--warn, #e3a13c); border-color: var(--warn, #e3a13c); }
.rce-x {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--muted, #8a93a0);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.rce-x:hover { color: var(--fg, #d7dce3); }

/* THE disclosure. Deliberately not muted into invisibility - an operator
 * must not be able to miss that none of this touches a radio. */
.rce-devnote {
  padding: 6px 14px;
  font-size: 11.5px;
  color: var(--warn, #e3a13c);
  background: rgba(227, 161, 60, 0.08);
  border-bottom: 1px solid var(--line, #323a46);
}

.rce-parkline {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 4px;
}
/* THE COMMUNITY IS A LABEL, NOT A FIELD (see edit.js head()). It is
 * styled as a read-only chip - no input chrome, no focus ring, nothing
 * that invites a click - because the ONE thing it must never suggest is
 * that the operator can retype it into a different community than the
 * one the app opened this drawer for. */
.rce-parklab {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 4px 9px;
  border: 1px solid var(--line, #323a46);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
}
.rce-parkcap {
  flex: 0 0 auto;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #8a93a0);
}
.rce-parkname {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--fg, #d7dce3);
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rce-parklab.none { border-style: dashed; }
.rce-parklab.none .rce-parkname {
  color: var(--muted, #8a93a0);
  font-weight: 400;
  font-style: italic;
}

.rce-search {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--bg3, #242a33);
  color: var(--fg, #d7dce3);
  border: 1px solid var(--line, #323a46);
  border-radius: 6px;
  padding: 5px 9px;
  font: inherit;
  outline: none;
}
.rce-search:focus { border-color: var(--accent, #4d9de0); }
.rce-spin { color: var(--accent, #4d9de0); font-size: 12px; }

.rce-tabs {
  display: flex;
  gap: 4px;
  padding: 6px 14px 0;
  border-bottom: 1px solid var(--line, #323a46);
  flex: 0 0 auto;
  overflow-x: auto;
}
.rce-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted, #8a93a0);
  font: inherit;
  font-size: 12.5px;
  padding: 5px 9px;
  min-height: var(--tap, 28px);
  cursor: pointer;
  white-space: nowrap;
}
.rce-tab:hover { color: var(--fg, #d7dce3); }
.rce-tab.on {
  color: var(--accent, #4d9de0);
  border-bottom-color: var(--accent, #4d9de0);
}

.rce-body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 10px 12px 40px;
}

/* ---------- shared bits ---------- */
.rce-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted, #8a93a0);
  margin: 2px 0 8px;
}
.rce-note {
  font-size: 11.5px;
  color: var(--muted, #8a93a0);
  background: var(--bg2, #1c2027);
  border-left: 2px solid var(--accent, #4d9de0);
  padding: 6px 9px;
  margin: 0 0 9px;
  border-radius: 0 4px 4px 0;
}
.rce-hint { font-size: 11.5px; color: var(--muted, #8a93a0); margin: 3px 0; }
.rce-empty {
  color: var(--muted, #8a93a0);
  text-align: center;
  padding: 26px 10px;
  font-size: 12.5px;
}
/* The no-community state. It carries three sentences and a way out, so
 * it is left-aligned prose rather than the one-line centred .rce-empty -
 * an operator who arrived here without a community needs to be told how
 * to get one, not just that something is missing. */
.rce-nopark {
  text-align: left;
  max-width: 34em;
  margin: 0 auto;
  padding: 22px 16px;
  line-height: 1.5;
}
.rce-nopark b { color: var(--fg, #d7dce3); }
.rce-nopark p { margin: 9px 0; }
.rce-nopark .rce-acts { margin-top: 14px; }
.rce-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 8px;
  font-size: 11.5px;
}
.rce-legend .muted { color: var(--muted, #8a93a0); }
.rce-sub {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted, #8a93a0);
  margin: 8px 0 3px;
}

/* the one pill that carries derived-vs-stored everywhere */
.rce-src {
  font-size: 10.5px;
  padding: 0 6px;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 16px;
  display: inline-block;
}
.rce-src.derived {
  color: var(--muted, #8a93a0);
  border: 1px dashed var(--line, #323a46);
  background: transparent;
}
.rce-src.stored {
  color: #0d1117;
  background: var(--accent, #4d9de0);
  border: 1px solid var(--accent, #4d9de0);
  font-weight: 600;
}

.rce-tag {
  font-size: 10.5px;
  line-height: 16px;
  padding: 0 6px;
  border-radius: 3px;
  background: var(--bg3, #242a33);
  color: var(--muted, #8a93a0);
  white-space: nowrap;
}
.rce-tag.kind { color: var(--fg, #d7dce3); }
.rce-tag.hid { color: var(--warn, #e3a13c); }
.rce-tag.tun { color: #9d6cff; }
.rce-tag.seg { color: var(--bad, #e5534b); }
.rce-tag.rep { color: var(--warn, #e3a13c); }
.rce-tag.set { color: var(--accent, #4d9de0); }
/* the PoP is the root of every blast-radius answer: loud, and unlike any
   other tag here it gets a filled chip, because "which bridge is the
   root" is the one fact a wrong reading of inverts a whole park. */
.rce-tag.pop {
  color: #0b0f14;
  background: var(--good, #3fb950);
  font-weight: 700;
}
/* TYPED, NOT MEASURED - the only hand-entered capacity in the app, so it
   is deliberately the colour of an override, never of a reading. */
.rce-tag.up { color: var(--warn, #e3a13c); }
.rce-tag.on { color: var(--good, #3fb950); }
.rce-tag.off { color: var(--bad, #e5534b); }
.rce-tag.act.create, .rce-tag.act.materialize { color: var(--good, #3fb950); }
.rce-tag.act.delete { color: var(--bad, #e5534b); }
.rce-tag.act.update { color: var(--accent, #4d9de0); }
.rce-badge {
  font-size: 10.5px;
  line-height: 16px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid var(--line, #323a46);
  color: var(--muted, #8a93a0);
}
.rce-badge.hid { color: var(--warn, #e3a13c);
                 border-color: var(--warn, #e3a13c); }

.rce-warn {
  font-size: 11.5px;
  padding: 7px 9px;
  margin: 0 0 8px;
  border-radius: 4px;
  border: 1px solid var(--warn, #e3a13c);
  color: var(--warn, #e3a13c);
  background: rgba(227, 161, 60, 0.09);
}
.rce-warn.bad {
  border-color: var(--bad, #e5534b);
  color: var(--bad, #e5534b);
  background: rgba(229, 83, 75, 0.1);
}

/* ---------- cards / rows ---------- */
.rce-card {
  border: 1px solid var(--line, #323a46);
  border-radius: 5px;
  margin: 0 0 6px;
  background: var(--bg2, #1c2027);
  overflow: hidden;
}
.rce-card.stored { border-left: 2px solid var(--accent, #4d9de0); }
.rce-cardhead {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px 9px;
  min-height: var(--tap, 28px);
  cursor: pointer;
}
.rce-cardhead:hover { background: var(--bg3, #242a33); }
.rce-caret { color: var(--muted, #8a93a0); width: 10px; }
.rce-key { font-weight: 600; font-size: 12.5px; }
/* .mono/.small/.muted are STYLE.CSS's classes and style.css is another
 * agent's file. Reuse the names inside our own containers (so the two
 * surfaces look alike) but never redefine them globally - an unscoped
 * `.mono {}` here would restyle the whole host app the moment this
 * optional stylesheet is added to the page. */
.rce-drawer .mono, .rce-box .mono {
  font-family: Consolas, "Cascadia Mono", monospace;
}
.rce-nick { color: var(--accent, #4d9de0); font-size: 12px; }
.rce-cardbody {
  padding: 6px 9px 9px;
  border-top: 1px solid var(--line, #323a46);
}
.rce-acts {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin: 2px 0 7px;
}
.rce-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 4px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.rce-row:last-child { border-bottom: none; }
.rce-rowname { flex: 1 1 130px; min-width: 0; overflow-wrap: anywhere; }
.rce-rowacts { display: flex; gap: 4px; margin-left: auto; }
.rce-row.rce-off, .rce-item.rce-off, .rce-card.rce-off { display: none; }
.rce-drawer .small, .rce-box .small { font-size: 11.5px; }
.rce-drawer .muted, .rce-box .muted { color: var(--muted, #8a93a0); }

/* ---------- buttons ---------- */
.rce-mini {
  background: var(--bg3, #242a33);
  border: 1px solid var(--line, #323a46);
  color: var(--muted, #8a93a0);
  border-radius: 4px;
  font: inherit;
  font-size: 11.5px;
  padding: 3px 8px;
  min-height: 24px;
  cursor: pointer;
}
.rce-mini:hover { color: var(--fg, #d7dce3);
                  border-color: var(--accent, #4d9de0); }
.rce-mini.on { color: var(--accent, #4d9de0);
               border-color: var(--accent, #4d9de0); }
.rce-mini.primary { color: var(--accent, #4d9de0); }
.rce-mini.danger { color: var(--bad, #e5534b); }
.rce-mini.danger:hover { border-color: var(--bad, #e5534b); }
.rce-chip {
  font-size: 11px;
  border-radius: 999px;
  border: 1px solid var(--warn, #e3a13c);
  color: var(--warn, #e3a13c);
  background: none;
  padding: 1px 8px;
  cursor: pointer;
  font-family: inherit;
}
.rce-btn {
  background: var(--bg3, #242a33);
  border: 1px solid var(--line, #323a46);
  color: var(--fg, #d7dce3);
  border-radius: 5px;
  font: inherit;
  padding: 6px 14px;
  min-height: 32px;
  cursor: pointer;
}
.rce-btn:hover { border-color: var(--accent, #4d9de0); }
.rce-btn.primary {
  border-color: var(--accent, #4d9de0);
  color: var(--accent, #4d9de0);
}
.rce-btn.danger, .rce-btn.primary.danger {
  border-color: var(--bad, #e5534b);
  color: var(--bad, #e5534b);
}

/* ---------- modals (picker, forms, confirm) ---------- */
.rce-modal {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--rce-vw, 100vw);
  z-index: 5000;
  background: rgba(6, 8, 11, 0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.rce-modal.rce-confirm { z-index: 5200; }
.rce-box {
  background: var(--bg, #14171c);
  border: 1px solid var(--line, #323a46);
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
  color: var(--fg, #d7dce3);
  font: 13px/1.45 "Segoe UI", system-ui, -apple-system, sans-serif;
  width: 560px;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.rce-confirmbox { width: 520px; }
.rce-boxhead {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg2, #1c2027);
  border-bottom: 1px solid var(--line, #323a46);
}
.rce-boxtitle { font-weight: 600; }
.rce-boxsub {
  padding: 7px 12px 0;
  font-size: 11.5px;
  color: var(--muted, #8a93a0);
}
.rce-box .rce-note, .rce-box .rce-devnote { margin: 8px 12px; }
.rce-box .rce-devnote { border-bottom: none; border-radius: 4px; }
.rce-boxfoot {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 10px 12px;
  border-top: 1px solid var(--line, #323a46);
  background: var(--bg2, #1c2027);
}

.rce-fields {
  padding: 2px 12px;
  overflow: auto;
  max-height: 46vh;
}
.rce-field { margin: 0 0 9px; }
.rce-field label {
  display: block;
  font-size: 11.5px;
  color: var(--muted, #8a93a0);
  margin: 0 0 3px;
}
.rce-field input, .rce-field select, .rce-field textarea {
  width: 100%;
  background: var(--bg3, #242a33);
  color: var(--fg, #d7dce3);
  border: 1px solid var(--line, #323a46);
  border-radius: 5px;
  padding: 5px 8px;
  font: inherit;
  outline: none;
}
.rce-field input:focus, .rce-field select:focus,
.rce-field textarea:focus { border-color: var(--accent, #4d9de0); }
.rce-chk {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12.5px;
  margin: 0 0 9px;
  cursor: pointer;
}
.rce-autochk { padding: 0 12px; }

/* ---------- `pick` field: a searchable single-select ----------
   A read-only display line plus a button that opens the shared picker
   in single-choice mode. It replaced two <select>s that the eth-bridge
   tier grew past usability (195 bridges on holidayrvvillage). The VALUE
   lives in a hidden input beside this line, so readFields sees a `pick`
   exactly as it sees a `select`. */
.rce-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg3, #242a33);
  border: 1px solid var(--line, #323a46);
  border-radius: 5px;
  padding: 4px 5px 4px 8px;
}
.rce-pickval {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12.5px;
}
/* "nothing chosen" must not read like a value */
.rce-pickval.empty { color: var(--muted, #8a93a0); font-style: italic; }
.rce-pick .rce-mini { flex: 0 0 auto; }

/* ---------- member picker ---------- */
.rce-pickbox { width: 620px; }
.rce-picktools {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-top: 1px solid var(--line, #323a46);
  border-bottom: 1px solid var(--line, #323a46);
  background: var(--bg2, #1c2027);
}
.rce-count { font-size: 11.5px; color: var(--muted, #8a93a0);
             white-space: nowrap; }
.rce-picklist {
  flex: 1 1 auto;
  overflow: auto;
  padding: 4px 12px 10px;
  min-height: 140px;
  max-height: 46vh;
}
.rce-group {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted, #8a93a0);
  padding: 9px 0 3px;
  position: sticky;
  top: 0;
  background: var(--bg, #14171c);
}
.rce-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 4px;
  min-height: var(--tap, 28px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  cursor: pointer;
}
.rce-item:hover { background: var(--bg2, #1c2027); }
/* THE KEYBOARD-ACTIVE ROW. The caret stays in the filter box - typing
   and moving are one gesture - so "where Enter will land" cannot be
   browser focus and has to be drawn. A left rail rather than a
   background, so it is still legible on the hovered row. */
.rce-item.rce-active {
  background: var(--bg2, #1c2027);
  box-shadow: inset 2px 0 0 var(--accent, #4d9de0);
}
.rce-item.disabled { opacity: 0.45; cursor: not-allowed; }
.rce-item input { width: 15px; height: 15px; flex: 0 0 auto; }
.rce-itemmain { flex: 1 1 auto; min-width: 0; }
.rce-itemname { display: block; overflow-wrap: anywhere; }
.rce-itemsub { display: block; font-size: 11px;
               color: var(--muted, #8a93a0); }
.rce-itemtags { display: flex; gap: 4px; align-items: center;
                flex: 0 0 auto; }

/* ---------- the plan, inside the confirm dialog ---------- */
.rce-plan {
  padding: 4px 12px;
  overflow: auto;
  max-height: 42vh;
}
.rce-planline {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 12.5px;
}
.rce-planline.none { color: var(--muted, #8a93a0); }
.rce-planverb {
  flex: 0 0 82px;
  text-align: right;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted, #8a93a0);
}
.rce-plantext { flex: 1 1 auto; overflow-wrap: anywhere; }
.rce-planline.add .rce-planverb, .rce-planline.create .rce-planverb,
.rce-planline.set .rce-planverb { color: var(--good, #3fb950); }
.rce-planline.remove .rce-planverb, .rce-planline.del .rce-planverb {
  color: var(--bad, #e5534b);
}
.rce-planline.tombstone .rce-planverb,
.rce-planline.materialize .rce-planverb,
.rce-planline.revert .rce-planverb { color: var(--warn, #e3a13c); }

/* ---------- change-log diff ---------- */
.rce-diff { display: flex; gap: 8px; }
.rce-diff > div { flex: 1 1 50%; min-width: 0; }
.rce-difftitle {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted, #8a93a0);
}
.rce-diff pre {
  margin: 2px 0 0;
  padding: 6px;
  background: var(--bg, #14171c);
  border: 1px solid var(--line, #323a46);
  border-radius: 4px;
  font: 11px/1.35 Consolas, "Cascadia Mono", monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 220px;
  overflow: auto;
}

/* ---------- toasts ---------- */
#rce-toasts {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 6000;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  pointer-events: none;
  max-width: 92vw;
}
.rce-toast {
  background: var(--bg2, #1c2027);
  border: 1px solid var(--line, #323a46);
  border-left-width: 3px;
  border-radius: 5px;
  padding: 7px 12px;
  font: 12.5px/1.4 "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--fg, #d7dce3);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
  opacity: 1;
  transition: opacity 0.3s ease;
  overflow-wrap: anywhere;
}
.rce-toast.good { border-left-color: var(--good, #3fb950); }
.rce-toast.bad { border-left-color: var(--bad, #e5534b); }
.rce-toast.info { border-left-color: var(--accent, #4d9de0); }
.rce-toast.out { opacity: 0; }

/* ---------- phone ---------- *
 * 375x812 is the target. The drawer becomes the whole screen and every
 * modal goes full-bleed - a 560 px dialog centred in a 375 px viewport
 * is how an editing UI becomes unusable on the one device a technician
 * actually has on the pole. */
@media (max-width: 640px) {
  /* BOTH edges pinned, width auto: `width: 100vw` includes the scrollbar
   * gutter, so on a page that scrolls the drawer ends up wider than the
   * client area and pushes its own right edge off-screen. */
  .rce-drawer { left: 0; right: auto; width: var(--rce-vw, 100vw);
                max-width: none; border-left: none; }
  .rce-launch { right: 10px; bottom: 10px; }
  .rce-launch.on { display: none; }     /* the sheet covers the screen */
  .rce-modal { padding: 0; }
  /* full-bleed sheet. `width: 100%` (of the inset:0 backdrop), NOT
   * `100vw` - see the drawer note above. ONE scroll container for the
   * whole sheet: two independent scroll regions (fields + list) on a
   * phone is how a picker becomes impossible to submit. */
  .rce-box, .rce-pickbox, .rce-confirmbox {
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    border: none;
    overflow-y: auto;
  }
  .rce-fields, .rce-picklist, .rce-plan {
    max-height: none;
    overflow: visible;
    flex: 0 0 auto;
  }
  .rce-boxhead { position: sticky; top: 0; z-index: 2; }
  .rce-picktools { position: sticky; top: 41px; z-index: 1; }
  .rce-group { top: 78px; }
  .rce-diff { flex-direction: column; }
  .rce-boxfoot { position: sticky; bottom: 0; z-index: 2; }
  .rce-planverb { flex-basis: 62px; }
}

@media (prefers-reduced-motion: reduce) {
  .rce-toast { transition: none; }
}