/* ====================================================================
   MemoryVerses — Verse & Friend popups (shared)
   Ported from design_handoff_popups/modals.css (.vm-* prefix), recoloured
   to the app's token system + the "Sapphire & Amber" palette.

   SELF-CONTAINED ON PURPOSE: every popup is a shared include that lands on
   both new "slate" pages and older legacy pages. Rather than depend on the
   46KB marketing token sheet (whose generic .container/.btn/.nav rules would
   collide with legacy hosts), this file carries its own token block, scoped
   to .vm-root[data-palette="sapphire"] so it leaks nothing onto the host.

   Wrapper markup (set by the popup PHP):
     <div class='vm-root theme-light|theme-dark' data-palette='sapphire'> … </div>
   $popup_theme comes from the mv_theme cookie (see popup_head.php); the
   html[data-theme] bridges below correct the "system" case after the
   anti-FOUC script resolves the OS preference — mirrors index_new/styles.css.
   ==================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,500;6..72,600;6..72,700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---------------- Tokens — LIGHT ---------------- */
.vm-root[data-palette="sapphire"].theme-light,
html[data-theme='light'] .vm-root[data-palette="sapphire"],
html:not([data-theme]) .vm-root[data-palette="sapphire"].theme-light {
  --surface: #FFFFFF; --surface-2: #F7F7F2; --bg: #FAFAF6;
  --border: rgba(11,20,38,0.08); --border-strong: rgba(11,20,38,0.14);
  --text-1: #0B1426; --text-2: #3F4A60; --text-3: #6B7790; --text-muted: #94A0B8;
  --accent: #2F4FB8; --accent-strong: #1E3A8A; --accent-soft: rgba(47,79,184,0.10);
  --brand: #B47A1A; --brand-soft: rgba(180,122,26,0.12); --brand-fg: #FFFFFF;
  --success: #059669; --success-soft: rgba(5,150,105,0.10); --danger: #DC2626; --danger-soft: rgba(220,38,38,0.10);
  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 9999px;
  --shadow-card: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 24px -10px rgba(11,20,38,0.08), 0 1px 2px rgba(11,20,38,0.04);
  --shadow-elev: 0 30px 80px -30px rgba(11,20,38,0.20);
  --font-serif: "Newsreader", "Source Serif Pro", Georgia, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
  color-scheme: light;
}

/* ---------------- Tokens — DARK ---------------- */
.vm-root[data-palette="sapphire"].theme-dark,
html[data-theme='dark'] .vm-root[data-palette="sapphire"],
html:not([data-theme]) .vm-root[data-palette="sapphire"].theme-dark {
  --surface: #131E36; --surface-2: #1A2542; --bg: #0B1426;
  --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.14);
  --text-1: #F5F6FA; --text-2: #B6BFD3; --text-3: #7B8AA6; --text-muted: #5A6884;
  --accent: #6B8AFD; --accent-strong: #4E70F0; --accent-soft: rgba(107,138,253,0.16);
  --brand: #E5B45E; --brand-soft: rgba(229,180,94,0.16); --brand-fg: #2A1A00;
  --success: #34D399; --success-soft: rgba(52,211,153,0.15); --danger: #F87171; --danger-soft: rgba(248,113,113,0.16);
  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 9999px;
  --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 32px -16px rgba(0,0,0,0.6);
  --shadow-elev: 0 30px 80px -30px rgba(0,0,0,0.7);
  --font-serif: "Newsreader", "Source Serif Pro", Georgia, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
  color-scheme: dark;
}
/* First-paint OS=dark fallback before the anti-FOUC script sets data-theme */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .vm-root[data-palette="sapphire"]:not(.theme-light):not(.theme-dark) {
    --surface: #131E36; --surface-2: #1A2542; --bg: #0B1426;
    --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.14);
    --text-1: #F5F6FA; --text-2: #B6BFD3; --text-3: #7B8AA6; --text-muted: #5A6884;
    --accent: #6B8AFD; --accent-strong: #4E70F0; --accent-soft: rgba(107,138,253,0.16);
    --brand: #E5B45E; --brand-soft: rgba(229,180,94,0.16); --brand-fg: #2A1A00;
    --success: #34D399; --success-soft: rgba(52,211,153,0.15); --danger: #F87171; --danger-soft: rgba(248,113,113,0.16);
    color-scheme: dark;
  }
}

/* ---------------- Wrapper — token carrier only ---------------- */
.vm-root { font-family: var(--font-sans); }
.vm-root *, .vm-root *::before, .vm-root *::after { box-sizing: border-box; }

/* Robust hidden state: .vm-modal sets display:flex, which would otherwise win
   over a NON-!important .display-none (some pages — e.g. the games shells —
   define `.display-none{display:none}` without !important and load it before
   this file). Guarantee the toggle classes always hide a vm popup, on every
   host, regardless of cascade order. */
.vm-scrim.display-none, .vm-modal.display-none, .vm-overlay.display-none,
.vm-scrim.display-none-important, .vm-modal.display-none-important, .vm-overlay.display-none-important {
  display: none !important;
}

/* ====================================================================
   Scrim + modal shell (production positioning — replaces the demo canvas)
   The scrim (#…-popup) and the card (#…-content) are siblings, both toggled
   by the existing JS via .display-none (which is display:none !important, so
   the .vm-modal{display:flex} below yields to it correctly).
   ==================================================================== */
.vm-scrim {
  position: fixed; inset: 0; z-index: 1000000;
  background: rgba(11,20,38,0.55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
/* Centering overlay variant — for single-unit modals (invite, confirm) that
   are toggled as ONE element and contain their own card (vs the add-verse /
   add-friend pattern of a separate scrim sibling + fixed card). */
.vm-overlay {
  position: fixed; inset: 0; z-index: 1000001;
  background: rgba(11,20,38,0.55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 40px;
}
.vm-overlay .vm-modal { position: static; transform: none; top: auto; left: auto; }

.vm-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  z-index: 1000001;
  width: 520px; max-width: calc(100vw - 32px);
  max-height: calc(100vh - 40px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elev);
  display: flex; flex-direction: column; min-height: 0;
  overflow: hidden;                 /* clip head/foot to the radius; body scrolls */
  color: var(--text-1);
  font-family: var(--font-sans);
}
.vm-modal.wide { width: 600px; }

/* head */
.vm-head {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 24px 24px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.vm-head .ic {
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--accent-soft); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.vm-head .htext { flex: 1; min-width: 0; }
.vm-head h3 {
  font-family: var(--font-serif);
  font-size: 23px; font-weight: 600; letter-spacing: -0.015em;
  color: var(--text-1); margin: 0 0 3px; line-height: 1.12;
}
.vm-head .sub { font-size: 13.5px; color: var(--text-3); margin: 0; line-height: 1.4; }
.vm-head .close {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-3);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; transition: all .14s; padding: 0;
}
.vm-head .close:hover { color: var(--text-1); border-color: var(--border-strong); }

/* generic body */
.vm-content { padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; min-height: 0; }
.vm-label {
  font-size: 13px; font-weight: 600; color: var(--text-1);
  display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px;
}
.vm-label .opt { font-size: 11px; font-weight: 500; color: var(--text-3); }
/* .req asterisk styled in the wizard section below (accent) */

.vm-input, .vm-select, .vm-textarea {
  width: 100%; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 13px 15px; font-family: var(--font-sans); font-size: 14px;
  color: var(--text-1); outline: 0; transition: border-color .14s, background .14s, box-shadow .14s;
}
.vm-input:focus, .vm-select:focus, .vm-textarea:focus {
  border-color: var(--accent); background: var(--surface);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.vm-input::placeholder, .vm-textarea::placeholder { color: var(--text-muted); }
.vm-select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7790' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 40px;
}
.vm-textarea {
  font-family: var(--font-serif); font-size: 17px; line-height: 1.6;
  min-height: 150px; resize: vertical; color: var(--text-1);
}

/* search field with leading icon */
.vm-search { position: relative; }
.vm-search .ico {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none; display: inline-flex;
}
.vm-search input { padding-left: 44px; }

/* footer */
.vm-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 24px 20px; border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.vm-foot.split { justify-content: space-between; }
.vm-foot .grow { flex: 1; }
.vm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px 22px; border-radius: var(--radius-md);
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  border: 1px solid transparent; cursor: pointer; transition: all .14s;
  text-decoration: none; line-height: 1;
}
.vm-btn.primary { background: var(--accent); color: #fff; }
.vm-btn.primary:hover { background: var(--accent-strong); }
.vm-btn.primary:disabled, .vm-btn.primary[disabled] { background: var(--surface-2); color: var(--text-muted); border-color: var(--border); cursor: not-allowed; }
.vm-btn.ghost { background: var(--surface-2); border-color: var(--border); color: var(--text-2); }
.vm-btn.ghost:hover { color: var(--text-1); border-color: var(--border-strong); }
.vm-btn.text { background: transparent; color: var(--accent); padding-left: 10px; padding-right: 10px; }
.vm-btn.text:hover { color: var(--accent-strong); }
.vm-btn.full { width: 100%; }

/* ------- Segmented tabs ------- */
.vm-tabs {
  display: flex; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 4px; gap: 4px;
}
.vm-tabs button {
  flex: 1; background: transparent; border: 0;
  padding: 9px 14px; border-radius: var(--radius-pill);
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  color: var(--text-3); cursor: pointer; transition: all .14s;
}
.vm-tabs button.active { background: var(--surface); color: var(--text-1); box-shadow: var(--shadow-card); }

/* ------- Suggested verse cards ------- */
.vm-sugg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vm-sugg {
  position: relative; text-align: left;
  border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--radius-md); padding: 14px 15px; cursor: pointer;
  transition: border-color .14s, background .14s, transform .14s;
}
.vm-sugg:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.vm-sugg.on { border-color: var(--accent); background: var(--accent-soft); }
.vm-sugg .ref { font-family: var(--font-serif); font-size: 15px; font-weight: 600; color: var(--accent); margin-bottom: 1px; }
.vm-sugg .tr { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 9px; }
.vm-sugg .text {
  font-family: var(--font-serif); font-size: 13px; line-height: 1.5; color: var(--text-2); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.vm-sugg .tick {
  position: absolute; top: 12px; right: 12px;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--border-strong); background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; opacity: 0; transition: opacity .14s;
}
.vm-sugg.on .tick { opacity: 1; background: var(--accent); border-color: var(--accent); }

/* loading row */
.vm-loading { display: flex; align-items: center; justify-content: center; gap: 11px; color: var(--text-3); font-size: 13px; padding: 28px 2px; }
.vm-spin {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid var(--accent-soft); border-top-color: var(--accent);
  animation: vm-rot .8s linear infinite;
}
@keyframes vm-rot { to { transform: rotate(360deg); } }

/* ------- Radio option cards (destination) ------- */
.vm-opts { display: flex; flex-direction: column; gap: 12px; }
.vm-opt {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 16px; cursor: pointer; transition: border-color .14s, background .14s;
}
.vm-opt.on { border-color: var(--accent); background: var(--accent-soft); }
.vm-opt-head { display: flex; align-items: center; gap: 12px; }
.vm-radio {
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--border-strong); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .14s;
}
.vm-opt.on .vm-radio { border-color: var(--accent); }
.vm-radio span { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform .14s; }
.vm-opt.on .vm-radio span { transform: scale(1); }
.vm-opt .ot { font-size: 14.5px; font-weight: 600; color: var(--text-1); }
.vm-opt .os { font-size: 12.5px; color: var(--text-3); margin-top: 1px; }
.vm-opt-field { margin-top: 13px; padding-left: 32px; }

/* ------- Privacy toggle (existing flow keeps this) ------- */
.vm-toggle { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 3px; gap: 3px; }
.vm-toggle button {
  border: 0; background: transparent; cursor: pointer;
  padding: 7px 16px; border-radius: var(--radius-pill);
  font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--text-3);
  transition: all .14s;
}
.vm-toggle button.on { background: var(--accent); color: #fff; }

/* ------- Review verse chip ------- */
.vm-vchip {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 11px;
}
.vm-vchip-ref { font-family: var(--font-serif); font-size: 17px; font-weight: 600; color: var(--text-1); white-space: nowrap; }
.vm-vchip-tr {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--accent); background: var(--accent-soft); padding: 3px 8px; border-radius: 6px;
}
.vm-hint { font-size: 12.5px; color: var(--text-3); display: flex; align-items: center; gap: 7px; margin-top: 12px; opacity: 0; transition: opacity .2s; }
.vm-hint.show { opacity: 1; }
.vm-hint .d { width: 5px; height: 5px; border-radius: 50%; background: var(--success); flex-shrink: 0; }

/* ------- Friend result rows ------- */
.vm-friends { display: flex; flex-direction: column; gap: 10px; }
.vm-frow {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--radius-md); padding: 13px 15px;
  transition: border-color .14s, background .14s;
}
.vm-frow:hover { border-color: var(--border-strong); background: var(--surface-2); }
.vm-frow .av {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: 16px; font-family: var(--font-sans);
  overflow: hidden; background-size: cover; background-position: center;
  background-image: linear-gradient(135deg, var(--accent), var(--brand));
}
.vm-frow .av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.vm-frow .finfo { flex: 1; min-width: 0; }
.vm-frow .fname { font-size: 15px; font-weight: 600; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-frow .fuser { font-size: 13px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-frow .fmeta {
  font-size: 12px; color: var(--text-muted); margin-top: 2px;
  display: flex; align-items: center; gap: 6px;
}
.vm-frow .fmeta i { width: 12px; height: 12px; color: var(--text-muted); display: inline-flex; flex-shrink: 0; }
.vm-addbtn {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 9px 16px; border-radius: var(--radius-pill);
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  cursor: pointer; transition: all .14s;
}
.vm-addbtn:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.vm-addbtn.added, .vm-addbtn.is-friend {
  background: var(--success-soft); color: var(--success);
  border-color: transparent; cursor: default;
}
.vm-addbtn.pending {
  background: var(--surface-2); color: var(--text-3);
  border-color: var(--border); cursor: default;
}
.vm-addbtn.accept { background: var(--success); border-color: var(--success); }
.vm-addbtn.accept:hover { filter: brightness(1.05); }

/* empty / hint states */
.vm-empty {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center; padding: 30px 24px 22px; color: var(--text-3);
}
.vm-empty .glyph {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted);
}
.vm-empty .et { font-size: 14px; font-weight: 600; color: var(--text-2); }
.vm-empty .es { font-size: 12.5px; color: var(--text-3); max-width: 280px; line-height: 1.5; }

/* error banner inside a modal */
.vm-content > .js-show-errors:empty, .vm-content > .js-show-errors > :empty { display: none; }
.vm-error { background: var(--accent-soft); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 15px; }
.vm-error.danger { background: rgba(220,38,38,0.08); }
.vm-error p { margin: 0; font-size: 13.5px; font-weight: 500; color: var(--danger); }

/* info card (e.g. external-translation links) */
.vm-info { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 15px; }
.vm-info .it { font-size: 13px; font-weight: 600; color: var(--text-1); margin: 0 0 4px; }
.vm-info .is { font-size: 12.5px; color: var(--text-3); margin: 0; line-height: 1.5; }
.vm-linkrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.vm-linkrow a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px; border-radius: var(--radius-md);
  background: var(--surface); border: 1px solid var(--border);
  font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; transition: all .14s;
}
.vm-linkrow a:hover { border-color: var(--accent); }

/* small/upgrade panels reuse the same vocabulary */
.vm-list { display: flex; flex-direction: column; gap: 14px; }
.vm-list .li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--text-2); }
.vm-list .li svg { color: var(--accent); flex-shrink: 0; }
.vm-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--brand-soft); color: var(--brand);
  border-radius: var(--radius-pill); padding: 3px 10px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}

/* misc */
.vm-rot90 { transform: rotate(90deg); }
.vm-center { text-align: center; }

/* ====================================================================
   Picture pickers + simple form modals (batch 2)
   ==================================================================== */
.vm-modal.sm { width: 460px; }
.vm-modal.pic { width: 660px; max-height: calc(100vh - 64px); }
.vm-content.scroll { gap: 18px; overflow-y: auto; }

.vm-foot-note { font-size: 12.5px; color: var(--text-muted); }

.vm-subhead {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 11px;
}

/* category filter pills */
.vm-pick-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.vm-cat {
  padding: 7px 14px; border-radius: var(--radius-pill);
  background: var(--surface-2); border: 1px solid var(--border);
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600;
  color: var(--text-2); cursor: pointer; transition: all .14s; white-space: nowrap;
}
.vm-cat:hover { border-color: var(--border-strong); color: var(--text-1); }
.vm-cat.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* swatch / thumbnail grid */
.vm-pick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.vm-swatch {
  position: relative; aspect-ratio: 4 / 3; width: 100%;
  border-radius: var(--radius-md); border: 1px solid transparent;
  padding: 0; cursor: pointer; overflow: hidden;
  transition: transform .14s, box-shadow .14s; background-size: cover; background-position: center;
}
.vm-swatch:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.vm-swatch.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.vm-swatch img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vm-swatch .tick {
  position: absolute; top: 8px; right: 8px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.7); transition: all .14s;
}
.vm-swatch.on .tick { opacity: 1; transform: scale(1); }

/* photo placeholder tile */
.vm-swatch.photo {
  background-color: var(--surface-2);
  background-image: repeating-linear-gradient(45deg, var(--border) 0 1px, transparent 1px 9px);
  border: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: var(--text-muted);
}
.vm-swatch.photo:hover { border-color: var(--border-strong); }
.vm-swatch.photo .ph-ic { opacity: .55; }
.vm-swatch.photo .ph-cap { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .04em; color: var(--text-muted); }

/* upload dropzone */
.vm-drop {
  width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; text-align: center; cursor: pointer;
  padding: 26px 20px; border-radius: var(--radius-md);
  background: var(--surface-2); border: 1.5px dashed var(--border-strong);
  color: var(--text-3); transition: border-color .14s, background .14s;
}
.vm-drop.tall { padding: 40px 20px; }
.vm-drop.dragover, .vm-drop:hover { border-color: var(--accent); background: var(--accent-soft); }
.vm-drop .glyph {
  width: 48px; height: 48px; border-radius: 13px;
  background: var(--surface); border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent); margin-bottom: 3px;
}
.vm-drop .dt { font-size: 14px; font-weight: 600; color: var(--text-1); }
.vm-drop .ds { font-size: 12px; color: var(--text-muted); }
/* preview thumb shown after a file is chosen/dropped */
.vm-drop-preview { width: 96px; height: 96px; border-radius: var(--radius-md); object-fit: cover; border: 1px solid var(--border); }

/* ---------------- Phone portrait ---------------- */
@media (max-width: 560px) {
  .vm-modal, .vm-modal.wide, .vm-modal.pic, .vm-modal.sm { width: auto; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); }
  .vm-head { padding: 18px 18px 14px; gap: 12px; }
  .vm-head h3 { font-size: 20px; }
  .vm-head .ic { width: 36px; height: 36px; }
  .vm-content { padding: 16px 18px; gap: 14px; }
  .vm-foot { padding: 14px 18px 18px; }
  .vm-sugg-grid { grid-template-columns: 1fr; }
  .vm-pick-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ====================================================================
   Start-a-Challenge wizard (cohesive additions)
   Ported from design_handoff_challenge_modals/modals.css. Continues the
   vm- vocabulary; used by the 3-step create-challenge modal.
   ==================================================================== */

/* ---- General show/hide util (self-contained; do not rely on host CSS) ---- */
.vm-root .vm-hide { display: none !important; }
/* vertical spacing stack (form + each wizard step manage their own gap) */
.vm-root .vm-stack { display: flex; flex-direction: column; gap: 18px; }
.vm-root .vm-stack.tight { gap: 12px; }
/* positioned so the visually-hidden native radio/checkbox stays contained */
.vm-root .js-opt-card { position: relative; }
/* native form control visually hidden behind the custom .vm-radio visual,
   but kept in the DOM + tab order (sr-only clip) so it stays keyboard-operable */
.vm-native {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; margin: -1px; padding: 0; border: 0;
}
/* visible focus ring on the card when its native control is keyboard-focused */
.vm-root .js-opt-card:focus-within { box-shadow: 0 0 0 3px var(--accent-soft); }
.vm-root .vm-opt.js-opt-card:focus-within { border-color: var(--accent); }

/* ---- Required-field asterisk on labels (accent, per handoff) ---- */
.vm-fieldhead .req, .vm-label .req { color: var(--accent); font-weight: 700; }

/* ---- Stepper (Details · Memorize · Duration) ---- */
.vm-steps {
  display: flex; align-items: flex-start;
  padding: 22px 30px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.vm-step {
  display: flex; flex-direction: column; align-items: center;
  gap: 9px; flex-shrink: 0; width: 64px;
}
.vm-step .node {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-size: 14px; font-weight: 700;
  background: var(--surface-2); border: 1.5px solid var(--border);
  color: var(--text-muted); transition: all .16s;
}
.vm-step .lbl {
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600;
  color: var(--text-muted); white-space: nowrap;
}
.vm-step.active .node { background: var(--accent); border-color: var(--accent); color: #fff; }
.vm-step.active .lbl { color: var(--accent); }
.vm-step.done .node { background: var(--accent); border-color: var(--accent); color: #fff; }
.vm-step.done .lbl { color: var(--text-2); }
/* connector line sits between nodes, vertically centred on the 34px node */
.vm-step-line {
  flex: 1; height: 2px; border-radius: 2px;
  background: var(--border); margin: 16px 2px 0;
  min-width: 26px;
}
.vm-step-line.done { background: var(--accent); }

/* ---- Section heading inside body (e.g. "Challenge Scope *") ---- */
.vm-fieldhead {
  font-size: 13px; font-weight: 600; color: var(--text-1);
  display: flex; align-items: baseline; gap: 5px; margin-bottom: 11px;
}

/* ---- Option cards laid out in a 2-up grid (Challenge Scope) ---- */
.vm-opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vm-opt.compact { padding: 15px; }
.vm-opt.compact .vm-opt-head { align-items: flex-start; }
.vm-opt.compact .ot { font-size: 14px; }
.vm-opt.compact .os { font-size: 12px; line-height: 1.4; }

/* ---- Field label + sub-fields row ---- */
.vm-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vm-input[type="date"] {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .01em;
  color: var(--text-1);
}
.vm-input[type="date"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }

/* ---- Read-only readout strip (duration / passage preview) ---- */
.vm-readout {
  display: flex; align-items: center; gap: 9px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 13px 15px;
  font-family: var(--font-sans); font-size: 14px; color: var(--text-3);
}
.vm-readout .ico { color: var(--text-muted); display: inline-flex; flex-shrink: 0; }
.vm-readout b { color: var(--text-1); font-weight: 700; }
/* accent variant — used for the live passage preview */
.vm-readout.is-accent {
  background: var(--accent-soft); border-color: transparent; color: var(--accent);
}
.vm-readout.is-accent .ico { color: var(--accent); }
.vm-readout.is-accent b { color: var(--accent); }

/* ---- Duration preset pills ---- */
.vm-presets { display: flex; flex-wrap: wrap; gap: 9px; }
.vm-preset {
  flex: 1; min-width: 64px;
  padding: 10px 14px; border-radius: var(--radius-md);
  background: var(--surface-2); border: 1px solid var(--border);
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  color: var(--text-2); cursor: pointer; transition: all .14s;
  text-align: center; white-space: nowrap;
}
.vm-preset:hover { border-color: var(--border-strong); color: var(--text-1); }
.vm-preset.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---- Info / note banner (amber) ---- */
.vm-note {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-soft); /* fallback for browsers without color-mix() */
  border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent);
  border-radius: var(--radius-md); padding: 13px 15px;
  font-size: 12.5px; line-height: 1.45; color: var(--text-2);
}
.vm-note .ico { color: var(--brand); flex-shrink: 0; margin-top: 1px; }

/* footer buttons sit left-aligned for the wizard (primary then secondary) */
.vm-foot.wizard { justify-content: flex-start; }

/* ---- Wizard phone-portrait tweaks ---- */
@media (max-width: 560px) {
  .vm-steps { padding: 18px 18px 18px; }
  .vm-step { width: 54px; }
  .vm-step .node { width: 30px; height: 30px; }
  .vm-step .lbl { font-size: 11.5px; }
  .vm-opt-grid { grid-template-columns: 1fr; }
  .vm-grid-2 { grid-template-columns: 1fr; }
  .vm-foot.wizard { flex-direction: column-reverse; align-items: stretch; }
  .vm-foot.wizard .vm-btn { width: 100%; }
}

/* ====================================================================
   Confirm / destructive mini-popups (batch 3)
   Delete Collection, Remove Verse, Delete Group, Leave Track, End Plan,
   Remove Family, Delete Account, Fresh Slate, etc. Continues the vm-
   vocabulary; reuses .vm-overlay > .vm-modal + .vm-head/.vm-content/.vm-foot.
   ==================================================================== */

/* Destructive primary button (delete / remove / leave) */
.vm-btn.danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.vm-btn.danger:hover { filter: brightness(0.94); }
.vm-btn.danger:disabled, .vm-btn.danger[disabled] {
  background: var(--surface-2); color: var(--text-muted);
  border-color: var(--border); cursor: not-allowed; filter: none;
}

/* Head icon-badge tints (default = accent; these recolour for context) */
.vm-head .ic.danger { background: var(--danger-soft); color: var(--danger); }
.vm-head .ic.brand  { background: var(--brand-soft);  color: var(--brand);  }
.vm-head .ic.success{ background: var(--success-soft);color: var(--success);}

/* Warning note banner — the danger sibling of .vm-note (amber) */
.vm-note.danger {
  background: var(--danger-soft);
  border: 1px solid color-mix(in srgb, var(--danger) 26%, transparent);
  color: var(--text-2);
}
.vm-note.danger .ico { color: var(--danger); }

/* Plain body copy inside a confirm modal's .vm-content */
.vm-root .vm-body-text { font-size: 14px; line-height: 1.55; color: var(--text-2); margin: 0; }
/* Strong emphasis (the name/target the user is confirming) inside copy */
.vm-root .vm-confirm-name { color: var(--text-1); font-weight: 700; }

/* Inline field error (validation message under an input) */
.vm-root .vm-field-error { font-size: 12.5px; font-weight: 600; color: var(--danger); margin-top: 8px; }

/* Stacked rows inside a multi-item edit body (e.g. Edit Verse textareas) */
.vm-root .vm-edit-row + .vm-edit-row { margin-top: 16px; }

/* Draggable reorder row (Rearrange Verses) */
.vm-root .vm-sortrow {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; margin-bottom: 8px;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface);
  transition: border-color .14s, background .14s;
}
.vm-root .vm-sortrow:hover { border-color: var(--border-strong); background: var(--surface-2); }
.vm-root .vm-sortrow .grab { flex-shrink: 0; cursor: grab; color: var(--text-muted); display: inline-flex; padding: 4px 0; }
.vm-root .vm-sortrow .grab:active { cursor: grabbing; }
.vm-root .vm-sortrow.sortable-ghost { opacity: .5; }

/* Footer button layout helpers for confirm modals */
.vm-foot.equal .vm-btn { flex: 1; }
.vm-foot.end { justify-content: flex-end; }

/* Phone: confirm-modal footers stack full-width (primary action on top) */
@media (max-width: 560px) {
  .vm-foot.equal { flex-direction: column-reverse; align-items: stretch; }
  .vm-foot.equal .vm-btn { width: 100%; }
}