/* ═══════════════════════════════════════════════════════════════════════════════════════
   VISIT EDIT MODALS — shared styles
   Companion to shared/visit-modals.js. The modal chrome itself (.pubmodal-*), the row-select
   menu (.rs-*) and the multi-select (.rms-*) are already present on both host pages; only
   the line-items editor was index-only, so it lives here now.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* The shared JS opens a modal with .open. index.html's own rule is that too, but
   voodoo/schedule.html shows its modals with .is-open and scopes the base rule to
   .device-frame — which outranks a bare .pubmodal-overlay.open. Both selectors, so one
   set of handlers drives either page. */
.pubmodal-overlay.open { display: flex; }
.device-frame .pubmodal-overlay.open { display: flex; }
/* Same text-wrap rule as the host pages, for the modals this file styles on its own. */
.vm-modals .pubmodal-title { text-wrap: balance; }
.vm-modals .pubmodal-desc { text-wrap: pretty; }

/* ── Line items edit modal ── */
.li-edit-list { display: flex; flex-direction: column; }
/* Line items read as ONE container of rows: the border and radius live on the group, and rows are
   separated by a hairline rather than each carrying its own box. */
.li-erows { border: 1px solid #cecac7; border-radius: var(--radius-control); overflow: hidden; }
.li-erow {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 12px 12px 16px; background: #fff;   /* 4px tighter than the Figma pane, per review; right side 4px less again, so the trash sits closer to the edge */
}
.li-erow + .li-erow { border-top: 1px solid #cecac7; }
.li-emain { flex: 1; min-width: 0; }
.li-ename { font-size: var(--text-md); line-height: 24px; color: #100f0f; }
/* Hushed grey like the menu's price, but sized to the row's own name (16px/24px) rather than the
   menu's 14px — the two sit side by side here, so they should share a baseline scale. */
.li-eprice {
  font-size: var(--text-md); line-height: 24px; color: #64605e; white-space: nowrap; flex-shrink: 0;
  margin-right: 4px;   /* on top of the row's 8px gap -> 12px before the delete button */
}
.li-edel {
  border: none; background: none; color: #64605e; cursor: pointer; flex-shrink: 0;
  padding: 8px; display: flex; align-items: center; border-radius: var(--radius-control);
}
.li-edel:hover { background: #f2f1f0; color: #100f0f; }
/* Empty state — Figma 947:1992 "input files / states" drop-zone.
   Box: 1px #dadada, 24px/40px padding, 16px gap. Instructions: 8px gap, 16px icon,
   14/24 hushed centred. Action: 40px min-height, 1px #dbdac9, 14/20. */
.li-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 24px 40px; overflow: hidden;
  background: #fff; border: 1px solid #dadada; border-radius: var(--radius-control);
}
.li-empty-ins { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; }
/* hides the button but keeps .li-add-wrap in flow — it anchors the add-services popover */
.li-add-wrap.is-empty > .li-add-btn { display: none; }
.li-empty-txt {
  width: 100%; font-size: var(--text-base); line-height: 24px; color: #64605e; text-align: center;
  overflow: hidden; text-overflow: ellipsis;
}

/* Add-services white button + upward menu */
.li-add-wrap { position: relative; display: inline-block; }
.li-add-btn {
  display: inline-flex; align-items: center; gap: 8px;
  box-sizing: content-box; height: 38px; padding: 0 14px;
  border: 1px solid #cecac7; border-radius: var(--radius-control); background: #fff;
  color: #100f0f; font-family: inherit; font-size: var(--text-base); cursor: pointer;
}
.li-add-btn:hover { background: #f2f1f0; }
.li-add-menu {
  position: absolute; left: 0; right: auto; min-width: 300px; top: calc(100% + 6px); z-index: 20;
  background: #fff; border-radius: var(--radius-control); display: none; flex-direction: column; overflow: hidden;
  box-shadow: 1px 4px 8px rgba(0,0,0,0.15), 2px 12px 24px rgba(0,0,0,0.1), 0 0 0 1px rgba(145,145,123,0.2);
  max-height: 300px;
}
.li-add-menu.open { display: flex; }
.li-add-search { display: flex; align-items: center; gap: 10px; padding: 0 12px; border-bottom: 1px solid #ece9e6; flex-shrink: 0; }
.li-add-search svg { color: #64605e; flex-shrink: 0; }
.li-add-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: var(--text-base); line-height: 20px; color: #100f0f; padding: 12px 0; }
.li-add-search input::placeholder { color: #64605e; }
/* No padding on the list and no radius on the row, so the hover wash runs edge to edge. Both
   were insetting it and rounding its corners. */
.li-add-list { overflow-y: auto; padding: 0; }
.li-add-item { display: flex; align-items: center; gap: 12px; padding: 12px; cursor: pointer; }
.li-add-item:hover { background: #f2f1f0; }
.li-add-item-main { flex: 1; min-width: 0; }
.li-add-item-name { font-size: var(--text-base); line-height: 20px; color: #100f0f; }
.li-add-item-price { font-size: var(--text-base); line-height: 20px; color: #64605e; white-space: nowrap; flex-shrink: 0; }
.li-add-empty { padding: 10px 12px; font-size: var(--text-sm); color: #64605e; }

/* The injected wrapper sits in .device-frame, OUTSIDE the panel, so it cannot inherit the
   tokens .vp-standalone carries. Without these every var() fell through to nothing and the
   modals came out square — --btn-radius alone is the Add button's 4px corner. */
.vm-modals {
  --bg-tertiary: #f3f3ee;
  --border-med: #cecac7;
  --btn-green: #00ab00;
  --btn-green-hover: #008c00;
  --btn-h: 40px;
  --btn-weight: 500;
  --fg-hushed: #64605e;
  --fg-primary: #100f0f;
  --font-sans: 'ABC Oracle', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --green: #00ab00;
  --green-hover: #009400;
  --green-tint: #e4f2e7;
  --icon-sm: 14px;
  --text-2xl: 28px;
  --text-2xs: 10px;
  --text-base: 14px;
  --text-lg: 20px;
  --text-md: 16px;
  --text-sm: 13px;
  --text-xs: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   VENDORED FROM index.html — modals
   The Routes modals exactly as they are: every .pubmodal / .rms / .rs- / line-item rule from
   index.html, scoped to the .vm-modals wrapper the shared JS injects.

   The wrapper is what makes them win. voodoo/schedule.html carries its own ported copies of
   this chrome scoped to .device-frame, which would otherwise outrank a bare selector and leave
   the calendar rendering an approximation of the Routes modals instead of the real thing.
   ═══════════════════════════════════════════════════════════════════════════════ */

.vm-modals .cal-pop { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: #fff; border: 1px solid #cecac7; border-radius: var(--radius-control);
  box-shadow: 0 12px 32px rgba(0,0,0,0.16); padding: 8px; z-index: 1200; display: none; }
.vm-modals .cal-pop.open { display: block; }
.vm-modals .afd-acc:has(.rms.open) .afd-panel > .afd-panel-in { overflow: visible; }
.vm-modals .rs-selectwrap:has(.rs-menu.open) .rs-datefield { border-color: #25292E; }
.vm-modals .rs-group { display: flex; flex-direction: column; gap: 8px; }
.vm-modals .rs-fieldset { display: flex; flex-direction: column; gap: 8px; }
.vm-modals .rs-legend { font-size: var(--text-md); line-height: 24px; letter-spacing: -0.22px; font-weight: 500; color: #100f0f; }
.vm-modals .rs-radio-group { display: flex; flex-direction: column; }
.vm-modals .rs-radio { display: flex; align-items: center; gap: 8px; font-size: var(--text-base); line-height: 20px; color: #100f0f; cursor: pointer; padding: 6px 0; }
   /* was grouped with unrelated selectors in index.html */
.vm-modals .rs-radio input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.vm-modals .rs-radio-mark { position: relative; flex-shrink: 0;
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid #9c968f; background: #fff; }
.vm-modals .rs-datefield { border: 1px solid #cecac7; border-radius: var(--radius-control); background: #fff; box-sizing: content-box; height: 54px; }
.vm-modals .rs-datefield-inner { display: flex; align-items: center; gap: 8px; padding-left: 12px; height: 100%; }
.vm-modals .rs-datefield-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; justify-content: center; }
.vm-modals .rs-datefield-label { font-size: var(--text-xs); line-height: 16px; color: #64605e; }
.vm-modals .rs-datefield-value { font-size: var(--text-base); line-height: 20px; color: #100f0f; }
.vm-modals .rs-datefield-cal { display: flex; align-items: center; padding-right: 12px; color: #100f0f; flex-shrink: 0; }
.vm-modals .rs-datefield { cursor: pointer; }
.vm-modals .rs-datefield:hover { border-color: #9c9591; }
.vm-modals .rs-selectwrap { position: relative; width: 100%; }
/* VoodooInputSelectDropdown (Figma 1255:8134): 1px of padding on the menu so its hairline border
   reads, and rows that are full-bleed — 12px on every side, 44px minimum height — rather than
   inset pills. The old 8px/16px rows sat in from the edges while the field above them started at
   12px, which is the misalignment down the left edge. */
.vm-modals .rs-menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60;
  background: #fff; padding: 1px; display: none; border-radius: var(--radius-control);
  box-shadow: 1px 4px 8px rgba(0,0,0,0.15), 2px 12px 24px rgba(0,0,0,0.1), 0 0 0 1px rgba(145,145,123,0.2); }
.vm-modals .rs-menu.open { display: block; }
.vm-modals .rs-menu-item { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 12px;
  font-size: var(--text-base); line-height: 20px; font-weight: 400; color: #100f0f; cursor: pointer; }
.vm-modals .rs-menu-item:hover { background: #f2f1f0; }
.vm-modals .rs-menu-item.sel { background: #f0efeb; }

/* Visit length: an editable select. The shell is the same .rs-datefield the date and frequency
   rows use, so the three fields in this modal read as one set; the input inside it carries no
   chrome of its own and sizes to its text, so the assistant's star can sit beside the value
   rather than floating at the field's edge. */
.vm-modals .dt-durfield { cursor: text; }
.vm-modals .dt-durval { display: inline-flex; align-items: center; gap: 4px; }
.vm-modals .dt-durval input {
  border: 0; padding: 0; background: transparent; outline: none;
  font-family: inherit; font-size: var(--text-base); line-height: 20px; color: #100f0f;
}
.vm-modals .dt-durval.is-guess input { color: #425e93; }
.vm-modals .dt-durstar { display: inline-flex; align-items: center; }
.vm-modals .dt-durstar svg { width: 12px; height: 12px; }
.vm-modals .dt-durmenu { max-height: 264px; overflow-y: auto; }
/* The suggested length, pinned to the top: blue text with the star at the far end, matching the
   suggested-assignee row in the team picker (.rms-item-ai). No fill and no rule under it — it is
   one more option, offered first, not a section of its own. */
.vm-modals .dt-dursug { color: #425e93; }
.vm-modals .dt-dursug svg { width: 16px; height: 16px; margin-left: auto; flex-shrink: 0; }
.vm-modals .dt-durmenu.dt-up { top: auto; bottom: calc(100% + 4px); }
.vm-modals .rs-radio:hover .rs-radio-mark { box-shadow: 0 0 0 8px rgba(110,106,104,0.10); }
.vm-modals .rs-radio input:checked + .rs-radio-mark,
.vm-modals .ajs-jobrow input:checked + .rs-radio-mark { border: 2px solid var(--green); }
.vm-modals .rs-radio input:checked + .rs-radio-mark::after,
.vm-modals .ajs-jobrow input:checked + .rs-radio-mark::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.vm-modals .rs-radio:hover input:checked + .rs-radio-mark { box-shadow: 0 0 0 8px rgba(0,171,0,0.10); }
.vm-modals .rs-radio input:focus-visible + .rs-radio-mark,
.vm-modals .ajs-jobrow input:focus-visible + .rs-radio-mark { box-shadow: 0 0 0 3px rgba(0,171,0,0.25); }
.vm-modals .rs-cancel { display: inline-flex; }
.vm-modals .rs-submit { box-sizing: content-box; height: 38px; padding: 0 16px; display: inline-flex; align-items: center; border: 1px solid var(--green); border-radius: var(--radius-control); background: var(--green); color: #fff; font-family: inherit; font-size: var(--text-base); line-height: 20px; font-weight: 400; cursor: pointer; }
.vm-modals .rs-submit:hover { background: var(--green-hover); }
   /* was grouped with unrelated selectors in index.html */
.vm-modals .rms-cb,
.vm-modals .pubmodal-check input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; margin: 0;
  border: 1.5px solid #64605e; border-radius: 2px;
  background: #fff; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.1s, border-color 0.1s; }
   /* was grouped with unrelated selectors in index.html */
.vm-modals .pubmodal-check input[type="checkbox"] { appearance: none; -webkit-appearance: none;
  background-repeat: no-repeat; background-position: center; background-size: 14px 14px; }
   /* was grouped with unrelated selectors in index.html */
.vm-modals .rms-cb svg { width: var(--icon-sm); height: var(--icon-sm); }
   /* was grouped with unrelated selectors in index.html */
.vm-modals .pubmodal-check input[type="checkbox"]:checked { background-color: var(--green); border-color: var(--green); }
   /* was grouped with unrelated selectors in index.html */
.vm-modals .pubmodal-check input[type="checkbox"]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23fff' stroke='%23fff' stroke-width='4' stroke-linejoin='round'%3E%3Cpath d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E"); }
.vm-modals #addJobOverlay .rs-legend { font-size: var(--text-lg); line-height: 28px; letter-spacing: -0.28px; font-weight: 600; }
   /* was grouped with unrelated selectors in index.html */
.vm-modals #addJobOverlay .li-add-btn > svg { width: var(--icon-md); height: var(--icon-md); flex-shrink: 0; }
.vm-modals .ajs-jobrow .rs-radio-mark { flex-shrink: 0; }
.vm-modals .rms-foot { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 12px;
  border-top: 1px solid #e7e4e1; background: #fff; cursor: pointer;
  font-size: var(--text-base); line-height: 20px; color: #100f0f; }
.vm-modals .rms-foot:hover { background: #f0efeb; }
.vm-modals .rms-foot svg { width: var(--icon-md); height: var(--icon-md); flex-shrink: 0; }
.vm-modals .rms-item-sub { margin-left: auto; padding-left: 12px; font-size: var(--text-xs); line-height: 16px; color: var(--fg-hushed); flex-shrink: 0; }
.vm-modals .rms-item-ai-badge { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; height: 20px; border-radius: var(--radius-control); background: var(--accent-bg, rgba(170,59,255,0.08)); font-size: 11px; font-weight: 500; color: var(--fg-hushed); flex-shrink: 0; }
.vm-modals .rms-item-ai .rms-item-name { color: #425e93; }
.vm-modals .rms-item-ai-icon { margin-left: auto; flex-shrink: 0; display: flex; align-items: center; }
   /* was grouped with unrelated selectors in index.html */
.vm-modals .pubmodal-close { width: 32px; height: 32px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: 50%;
  color: var(--fg-primary); cursor: pointer; }
   /* was grouped with unrelated selectors in index.html */
.vm-modals .pubmodal-close:hover { background: var(--bg-tertiary); color: #100f0f; }
   /* was grouped with unrelated selectors in index.html */
.vm-modals .pubmodal-close { position: absolute; top: 8px; right: 8px; }
   /* was grouped with unrelated selectors in index.html */
.vm-modals .pubmodal-cancel,
.vm-modals .rs-cancel { box-sizing: border-box; height: 40px; padding: 8px 10px;
  align-items: center; border-radius: var(--radius-control);   
  border: none; background: none; color: #100f0f;
  font-family: inherit; font-size: var(--text-base); line-height: 20px; cursor: pointer;
  text-decoration: underline; }
.vm-modals .pubmodal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
  display: none; align-items: center; justify-content: center; padding: 24px; z-index: 2000;
  overflow-y: auto; overscroll-behavior: contain; align-items: safe center; }   /* see index.html .pubmodal-overlay */
.vm-modals .pubmodal { width: 500px; max-width: calc(100vw - 32px); background: #fff; border-radius: var(--radius-modal);
  box-shadow: 10px 16px 40px rgba(0,0,0,0.16), 40px 60px 72px rgba(0,0,0,0.08),
              84px 124px 90px rgba(0,0,0,0.05), 0 0 0 1px rgba(145,145,123,0.2);
  display: flex; flex-direction: column; }
.vm-modals .pubmodal-header { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 16px; }
.vm-modals .pubmodal-title { font-size: var(--text-lg); line-height: 28px; font-weight: 600; letter-spacing: -0.28px; color: #100f0f; }
/* Modal body copy — Ryu Body 4, size S (ryuText/s): 14/20, Light, case-sensitive forms, text primary. */
.vm-modals .pubmodal-desc { font-size: 14px; line-height: 20px; font-weight: 300; color: #1A1919; font-feature-settings: 'case' on; }
.vm-modals .pubmodal-sublabel { font-size: var(--text-xs); line-height: 16px; font-weight: 500; color: #64605e; margin-bottom: 8px; }
.vm-modals .pubmodal-desc:empty { display: none; }
.vm-modals .pubmodal-body { display: flex; flex-direction: column; gap: 16px; padding: 0 16px 16px; }
.vm-modals .pubmodal-caption { font-size: var(--text-xs); line-height: 16px; color: #64605e; }
.vm-modals .pubmodal-line { color: #100f0f; font-size: var(--text-base); line-height: 22px; font-weight: 400; }
.vm-modals .pubmodal-check { display: flex; align-items: center; gap: 10px; font-size: var(--text-base); color: #100f0f; cursor: pointer; }
.vm-modals .pubmodal-footer { display: flex; align-items: center; justify-content: space-between;
  box-shadow: 0 -1px 0 #e5e1de; padding: 16px; }
.vm-modals .pubmodal-cancel { display: inline-flex; }
/* Send reminder — the sentence above the select, and the Preview/Send pair on the right.
   The body is a 16px flex column, so the paragraph needs no margin of its own. */
.vm-modals .vm-modal-desc { margin: 0; max-width: 52ch;
  font-family: inherit; font-size: var(--text-base); line-height: 20px; color: #64605e; }
.vm-modals .vm-modal-actions { display: flex; align-items: center; gap: 8px; }
.vm-modals .rs-secondary { box-sizing: content-box; height: 38px; padding: 0 16px;
  display: inline-flex; align-items: center; border: 1px solid #cecac7; border-radius: var(--radius-control);
  background: #fff; color: #100f0f; font-family: inherit; font-size: var(--text-base); line-height: 20px;
  font-weight: 500; cursor: pointer; }
.vm-modals .rs-secondary:hover { background: #f2f1f0; }
.vm-modals .pubmodal-submit { box-sizing: content-box; height: 38px; padding: 0 16px; display: inline-flex; align-items: center; border: 1px solid var(--green);
  background: var(--green); color: #fff; font-family: inherit; font-size: var(--text-base); line-height: 20px;
  cursor: pointer; }
.vm-modals .pubmodal-submit:hover { background: var(--green-hover); border-color: var(--green-hover); }
.vm-modals .rms { position: relative; width: 100%; font-family: inherit; }
.vm-modals .rms-box { display: flex; align-items: center; gap: 8px; padding: 0 12px;
  min-height: 54px;
  border: 1px solid #cecac7; background: #fff; cursor: pointer; border-radius: var(--radius-control); }
.vm-modals .rms-box:hover { border-color: #9c9591; }
.vm-modals .rms.open .rms-box { border-color: #25292E; }
.vm-modals .rms:not(.filled) .rms-pills { display: none; }   /* empty pill row lifted the placeholder 2px */
.vm-modals .rms-content { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 8px 0; overflow: hidden; }
.vm-modals .rms-label { font-size: 16px; line-height: 20px; color: #64605e;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: font-size 0.15s ease, line-height 0.15s ease, color 0.15s ease; }
.vm-modals .rms.filled .rms-label { font-size: var(--text-xs); line-height: 16px; color: #64605e; }
.vm-modals .rms-placeholder { font-size: var(--text-base); color: #9c9591; pointer-events: none; }
.vm-modals .rms-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vm-modals .rms-pill { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; background: #e5e1de; border-radius: var(--radius-control); font-size: var(--text-base); color: #100f0f; }
.vm-modals .rms-pill-x { display: flex; cursor: pointer; color: #64605e; }
.vm-modals .rms-pill-x:hover { color: #100f0f; }
.vm-modals .rms-pill-ai { background: rgba(66, 94, 147, 0.10); color: #425e93; }
.vm-modals .rms-caret { display: flex; align-items: center; color: #64605e; flex-shrink: 0; }
.vm-modals .rms-dd { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60;
  background: #fff; padding: 1px; display: none; border-radius: var(--radius-control);
  box-shadow: 1px 4px 8px rgba(0,0,0,0.15), 2px 12px 24px rgba(0,0,0,0.1), 0 0 0 1px rgba(145,145,123,0.2); }
.vm-modals .rms.open .rms-dd { display: block; }
.vm-modals .rms-inline > .rms-box { display: none; }
.vm-modals .rms-inline > .rms-dd { display: block; position: static; margin: 0;
  border: 1px solid #cecac7; border-radius: 8px; box-shadow: none; }
.vm-modals .rms-inline .rms-list { max-height: 300px; }
.vm-modals #lineItemsModal .pubmodal-body { position: relative; }
.vm-modals .rms-search { display: flex; align-items: center; gap: 12px; padding: 0 12px; border-bottom: 1px solid #e7e4e1; min-height: 40px; }
.vm-modals .rms-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: var(--text-base); line-height: 20px; color: #100f0f; padding: 8px 0; }
.vm-modals .rms-search input::placeholder { color: #64605e; }
.vm-modals .rms-search-clear { display: none; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: var(--radius-control); background: #f0efeb; color: #64605e; cursor: pointer; flex-shrink: 0; }
.vm-modals .rms-search.has-text .rms-search-clear { display: flex; }
.vm-modals .rms-search-ico { color: #100f0f; display: flex; flex-shrink: 0; }
.vm-modals .rms-list { max-height: 264px; overflow-y: auto; }
.vm-modals .rms-item { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 12px; background: #fff; cursor: pointer; }
.vm-modals .rms-item:hover { background: #f0efeb; }
.vm-modals .rms-cb { margin-right: 6px; color: transparent; }
.vm-modals .rms-item.sel .rms-cb { background-color: var(--green); border-color: var(--green); color: #fff; }
.vm-modals .rms-single .rms-cb { display: none; }
.vm-modals .rms-single .rms-item.sel .rms-item-name { font-weight: 500; }
.vm-modals .rms-avatar { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: var(--text-2xs); font-weight: 400; }
.vm-modals .rms-item-name { flex: 1; min-width: 0; font-size: var(--text-base); line-height: 20px; color: #100f0f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vm-modals .rms-item-price { margin-left: auto; padding-left: 12px; flex-shrink: 0;
  font-size: var(--text-base); line-height: 20px; color: #100f0f; white-space: nowrap; }
   /* was grouped with unrelated selectors in index.html */
.vm-modals .pubmodal-submit,
.vm-modals .rs-cancel,
.vm-modals .rs-submit { border-radius: var(--radius-control); }
   /* was grouped with unrelated selectors in index.html */
.vm-modals .pubmodal-submit,
.vm-modals .rs-submit,
.vm-modals .li-add-btn { box-sizing: border-box;          
  height: var(--btn-h); padding: 8px 16px;
  border-radius: var(--btn-radius);
  font-family: var(--font-sans); font-size: var(--text-base); line-height: 20px;
  font-weight: var(--btn-weight);
  cursor: pointer; white-space: nowrap; }
   /* was grouped with unrelated selectors in index.html */
.vm-modals .pubmodal-submit,
.vm-modals .rs-submit { background: var(--btn-green); border: 1px solid var(--btn-green); color: #fff; }
   /* was grouped with unrelated selectors in index.html */
.vm-modals .pubmodal-submit:hover,
.vm-modals .rs-submit:hover { background: var(--btn-green-hover); border-color: var(--btn-green-hover); }
   /* was grouped with unrelated selectors in index.html */
.vm-modals .li-add-btn { background: #fff; border: 1px solid var(--border-med); color: var(--fg-primary); }
   /* was grouped with unrelated selectors in index.html */
.vm-modals .li-add-btn:hover { background: var(--bg-tertiary); }
   /* was grouped with unrelated selectors in index.html */
.vm-modals .rs-cancel,
.vm-modals .pubmodal-cancel { font-family: var(--font-sans); font-size: var(--text-base); line-height: 20px;
  font-weight: var(--btn-weight);
  color: var(--fg-primary); text-decoration: underline; text-underline-offset: 2px;
  background: transparent; border: none; cursor: pointer; }
   /* was grouped with unrelated selectors in index.html */
.vm-modals .rs-cancel:hover,
.vm-modals .pubmodal-cancel:hover { color: var(--fg-primary); background: var(--bg-tertiary); }
   /* was grouped with unrelated selectors in index.html */
.vm-modals .pubmodal-submit:disabled,
.vm-modals .rs-submit:disabled { opacity: 0.5; cursor: default; }

@media (max-width: 680px) {
.vm-modals .cal-pop { top: calc(100% + 8px); bottom: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   Dialog transition — fade only
   ═══════════════════════════════════════════════════════════════════════════════════════
   No scale. iOS presents an alert by scaling down from ~1.2, but at this dialog's size that
   reads as the whole panel lurching rather than the small pop it is on a phone, so the
   geometry stays put and only opacity moves.

   The overlay still has to stay in the box tree for a fade OUT to be possible at all — a
   display:none/flex swap has nothing to animate — hence the visibility model. Scoped to
   .vm-modals, so the visit modals fade and every other .pubmodal on either page is left
   exactly as it was.

   Plain ease-out rather than the spring: a spring curve describes something travelling, and
   with the scale gone there is nothing here that travels.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.vm-modals .pubmodal-overlay {
  display: flex !important;          /* beats the host's display:none/flex pair outright */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--ios-dismiss-dur) ease-out,
              visibility 0s linear var(--ios-dismiss-dur);
}
.vm-modals .pubmodal-overlay.open,
.vm-modals .pubmodal-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--ios-dialog-dur) ease-out,
              visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .vm-modals .pubmodal-overlay,
  .vm-modals .pubmodal-overlay.open,
  .vm-modals .pubmodal-overlay.is-open {
    transition: opacity 120ms linear, visibility 0s;
  }
}

/* Line items (edit modal + add menu): tabular figures so the prices line up. */
.li-edit-list, .li-erows, .li-add-list { font-variant-numeric: tabular-nums lining-nums; }

/* Reminders modal: a row per recipient — when, and how — side by side, stacked on a phone. */
.rem-body { display: flex; flex-direction: column; gap: 16px; }
.rem-row { display: flex; flex-direction: column; gap: 8px; }
.rem-row[hidden] { display: none; }
/* Channel menus: a checkbox per channel; the menu stays open while you tick. */
.rs-menu-item.rem-ch { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.rs-menu-item.rem-ch input { position: absolute; opacity: 0; pointer-events: none; }