/* ============================================================================
   /reminders — the public guest-list counter.
   ============================================================================
   Its OWN design language, deliberately, and this file exists to keep it that
   way. The landing page is an editorial spread — Cormorant and Newsreader on
   heavy cream, set for reading. This is a WORKSPACE: a stranger doing careful
   work with their family's guest list, often on a phone, often anxious about
   whether it went through. A serif body face at form sizes reads as dusty and
   scans badly, and the cream ground goes muddy under white input fields.

   So: the house product pairing (Source Sans 3, with Fraunces reserved for the
   page title — the one editorial slot design-principles allows), a brighter
   paper, real white surfaces, and the brand's brass kept as the single accent.
   What it borrows from the landing page is the wax seal and the brass, which
   are the two things that make it unmistakably Izan.

   The metaphor is a counter at the office, not a SaaS wizard: a rail on the
   left showing where you are in the handover, a working surface on the right.
   ============================================================================ */

:root {
  /* Paper, brighter and less yellow than the landing's cream so white cards
     sit ON it rather than muddying into it. */
  --rm-ground:   #FBFAF7;
  --rm-surface:  #FFFFFF;
  --rm-sunk:     #F4F2ED;

  --rm-ink:      #1B1815;
  --rm-ink-2:    #4A443C;
  --rm-ink-3:    #736C60;   /* 4.9:1 on the ground — #7A7367 measured 4.49 */

  --rm-line:     #E6E1D6;
  --rm-line-2:   #D3CCBC;

  /* The brand's brass, deepened until it carries text at 15px. */
  --rm-brass:    #8A6A2F;
  --rm-brass-2:  #B08B47;
  --rm-brass-bg: #FBF4E4;
  --rm-brass-line: #EDDFC0;
  --rm-brass-ink: #6C5220;

  /* The product's own success green, borrowed from tokens.css so a host and an
     admin never see two different greens for the same idea. */
  --rm-done:     #2F7D5B;
  --rm-done-bg:  #EAF3EE;
  --rm-done-line: #CFE4D8;
  --rm-done-ink: #1E5940;

  /* And its oxblood, for the one thing that must not be missed. */
  --rm-stop:     #8C2F2F;
  --rm-stop-bg:  #FBF0EF;
  --rm-stop-line: #EFD9D7;
  --rm-stop-ink: #6E2626;

  --rm-ink-hover: #322C25;

  /* WhatsApp's own colours, so the preview reads as the real thing. */
  --rm-wa-ground: #E7DED4;
  --rm-wa-ink:    #111B21;
  --rm-wa-meta:   #667781;
  --rm-wa-slot:   #FFF6DD;
  --rm-wa-link:   #027EB5;
  --rm-wa-rule:   #E9EDEF;

  --rm-title: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --rm-ui:    "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --rm-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --rm-r:     10px;
  --rm-ctrl:  46px;
}

/* The public chrome above is set in the landing's faces; this page's own body
   overrides it from the root down. */
body.rm-page {
  margin: 0;
  background: var(--rm-ground);
  color: var(--rm-ink);
  font-family: var(--rm-ui);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.rm-page .topbar { background: var(--rm-ground); border-bottom: 1px solid var(--rm-line); }
/* The chrome's rows line up with the working column between them. */
body.rm-page .topbar-inner { max-width: 1180px; padding: 12px 24px; }
body.rm-page .foot { background: var(--rm-ground); border-top: 1px solid var(--rm-line); }
body.rm-page .foot-line { max-width: 1180px; padding: 26px 24px 44px; font: 400 14.5px/1.5 var(--rm-ui); color: var(--rm-ink-3); }
body.rm-page .foot-line a { color: var(--rm-ink-2); }

/* ── Shell ────────────────────────────────────────────────────────────────── */

.rm-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px 100px; }

.rm-masthead { padding: 56px 0 34px; }
.rm-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 16px; padding: 5px 12px 5px 8px;
  background: var(--rm-brass-bg); border: 1px solid var(--rm-brass-line); border-radius: 999px;
  font: 600 12.5px/1 var(--rm-ui); letter-spacing: .01em; color: var(--rm-brass);
}
.rm-kicker svg { flex: none; }
.rm-title {
  margin: 0; font-family: var(--rm-title);
  font-size: clamp(34px, 4.6vw, 50px); font-weight: 600; line-height: 1.05;
  letter-spacing: -.015em; color: var(--rm-ink); text-wrap: balance;
}
.rm-lede { margin: 16px 0 0; max-width: 62ch; font-size: 18px; color: var(--rm-ink-2); }

/* Two columns once there is room for a rail: where you are, and the work. */
.rm-cols { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 44px; align-items: start; }

/* ── The rail ─────────────────────────────────────────────────────────────── */

.rm-rail { position: sticky; top: 24px; }
.rm-rail-h {
  margin: 0 0 14px; font: 600 11px/1 var(--rm-ui); letter-spacing: .14em;
  text-transform: uppercase; color: var(--rm-ink-3);
}
.rm-rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rm-rail li { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; padding: 9px 0; align-items: start; }
/* The thread running down the rail — the handover in one line. */
.rm-rail li::before {
  content: ""; position: absolute; left: 13px; top: 32px; bottom: -2px;
  width: 1px; background: var(--rm-line);
}
.rm-rail li:last-child::before { display: none; }
.rm-rail li.is-done::before { background: var(--rm-done); opacity: .35; }

.rm-dot {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--rm-line-2); background: var(--rm-surface);
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 12px/1 var(--rm-ui); color: var(--rm-ink-3);
}
.rm-rail li.is-now .rm-dot { border-color: var(--rm-brass); color: var(--rm-brass); box-shadow: 0 0 0 3px var(--rm-brass-bg); }
.rm-rail li.is-done .rm-dot { border-color: var(--rm-done); background: var(--rm-done); color: #fff; }
.rm-rail-t { font-size: 15px; color: var(--rm-ink-3); line-height: 1.3; padding-top: 4px; }
.rm-rail li.is-now .rm-rail-t { color: var(--rm-ink); font-weight: 600; }
.rm-rail li.is-done .rm-rail-t { color: var(--rm-ink-2); }

/* ── Cards ────────────────────────────────────────────────────────────────── */

.rm-card {
  background: var(--rm-surface); border: 1px solid var(--rm-line);
  border-radius: var(--rm-r); padding: 28px 30px; margin: 0 0 18px;
  box-shadow: 0 1px 2px rgba(27, 24, 21, .04);
  container: rm-card / inline-size;   /* the reminder styles lay out by the card's own width */
}
.rm-card.is-waiting { background: transparent; border-style: dashed; box-shadow: none; }
.rm-card.is-waiting .rm-h { color: var(--rm-ink-3); }
/* A finished step steps back, so the one you are on leads. */
.rm-card.is-done { padding-top: 20px; padding-bottom: 20px; }
.rm-card.is-done .rm-h { font-size: 20px; }
.rm-card.is-done .rm-done-line { margin: 8px 0 0; }
.rm-card-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.rm-h { margin: 0; font-family: var(--rm-title); font-size: 25px; font-weight: 600; letter-spacing: -.01em; color: var(--rm-ink); }
.rm-sub { margin: 8px 0 0; max-width: 62ch; color: var(--rm-ink-2); }
.rm-quiet { color: var(--rm-ink-3); font-size: 15px; }
.rm-done-line { display: flex; align-items: center; gap: 9px; color: var(--rm-done); font-weight: 600; }

/* ── The signature: the code, stamped ─────────────────────────────────────── */

.rm-stamp {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center;
  margin: 22px 0 18px; padding: 24px 28px;
  background: linear-gradient(180deg, var(--rm-surface), var(--rm-brass-bg));
  border: 1px solid var(--rm-brass-line); border-radius: var(--rm-r);
}
.rm-seal { width: 62px; height: 62px; flex: none; }
.rm-code {
  display: block; font-family: var(--rm-mono); font-size: clamp(26px, 4vw, 34px);
  font-weight: 500; letter-spacing: .18em; color: var(--rm-ink);
}
.rm-code-cap { display: block; margin-top: 4px; font-size: 14px; color: var(--rm-brass); }

/* ── Controls ─────────────────────────────────────────────────────────────── */

.rm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: var(--rm-ctrl); padding: 0 22px; border: 0; border-radius: 8px;
  background: var(--rm-ink); color: #fff; cursor: pointer;
  font: 600 16px/1 var(--rm-ui); text-decoration: none;
  transition: background .16s ease, transform .16s ease;
}
.rm-btn:hover { background: var(--rm-ink-hover); }
.rm-btn:active { transform: translateY(1px); }
.rm-btn-lg { height: 54px; padding: 0 30px; font-size: 17px; }
.rm-btn-ghost { background: transparent; color: var(--rm-ink); border: 1px solid var(--rm-line-2); }
.rm-btn-ghost:hover { background: var(--rm-sunk); }
.rm-btn[disabled] { opacity: .62; cursor: progress; }
body.rm-page a:focus-visible, body.rm-page button:focus-visible {
  outline: 2px solid var(--rm-brass); outline-offset: 2px; border-radius: 6px;
}

.rm-field { display: grid; gap: 6px; }
.rm-field > span { font: 600 13.5px/1.3 var(--rm-ui); color: var(--rm-ink-2); }
.rm-field em { font-style: normal; color: var(--rm-stop); }
.rm-input, .rm-select {
  width: 100%; height: var(--rm-ctrl); padding: 0 13px;
  font: 400 16px var(--rm-ui); color: var(--rm-ink);
  background: var(--rm-surface); border: 1px solid var(--rm-line-2); border-radius: 8px;
  transition: border-color .14s ease, box-shadow .14s ease;
  appearance: none;
}
.rm-select {
  padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237A7367' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  /* Sized, or an SVG with no intrinsic size fills the whole control. */
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px 14px;
}
.rm-input:focus, .rm-select:focus {
  outline: none; border-color: var(--rm-brass);
  box-shadow: 0 0 0 3px var(--rm-brass-bg);
}
.rm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; align-items: start; }

/* ── The drop zone ────────────────────────────────────────────────────────── */

.rm-drop {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin: 18px 0; padding: 34px 24px; text-align: center;
  background: var(--rm-sunk); border: 1.5px dashed var(--rm-line-2);
  border-radius: var(--rm-r); cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.rm-drop:hover, .rm-drop.is-over { border-color: var(--rm-brass); background: var(--rm-brass-bg); }
.rm-drop-t { font-weight: 600; font-size: 17px; }
.rm-drop-s { font-size: 14.5px; color: var(--rm-ink-3); }
.rm-file { position: absolute; width: 1px; height: 1px; opacity: 0; }
.rm-file:focus-visible + .rm-drop { border-color: var(--rm-brass); box-shadow: 0 0 0 3px var(--rm-brass-bg); }

/* ── Column mapping ───────────────────────────────────────────────────────── */

/* Four fields, two by two — never three and an orphan. */
.rm-map {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px; margin: 20px 0 22px; padding: 18px; background: var(--rm-sunk);
  border: 1px solid var(--rm-line); border-radius: var(--rm-r);
}

/* The preview of THEIR file. One line per guest, columns that actually line up. */
/* A name is never cut short, so a long one scrolls the box sideways — and the
   box says so: a soft shadow at whichever edge has more behind it. The shadows
   are fixed to the box; the covers scroll with the rows and hide them at rest. */
.rm-tablewrap {
  overflow-x: auto; border: 1px solid var(--rm-line); border-radius: var(--rm-r);
  background:
    linear-gradient(90deg, var(--rm-surface) 30%, rgba(255, 255, 255, 0)) left / 36px 100% no-repeat local,
    linear-gradient(270deg, var(--rm-surface) 30%, rgba(255, 255, 255, 0)) right / 36px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(27, 24, 21, .14), transparent) left / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(27, 24, 21, .14), transparent) right / 12px 100% no-repeat scroll;
  background-color: var(--rm-surface);
}
.rm-preview { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.rm-preview th {
  text-align: left; padding: 10px 16px; background: var(--rm-sunk);
  font: 600 11px/1.5 var(--rm-ui); letter-spacing: .1em; text-transform: uppercase;
  color: var(--rm-ink-3); border-bottom: 1px solid var(--rm-line);
  white-space: nowrap;
}
.rm-preview th.rm-r, .rm-preview td.rm-r { text-align: right; }
.rm-preview td {
  padding: 11px 16px; border-bottom: 1px solid var(--rm-line);
  color: var(--rm-ink-2); white-space: nowrap;
}
.rm-preview tr:last-child td { border-bottom: 0; }
.rm-preview .rm-c-name { color: var(--rm-ink); }
/* Tabular figures so the numbers form a column, not a ragged edge. */
.rm-preview .rm-c-num { font-variant-numeric: tabular-nums; font-size: 15px; color: var(--rm-ink); }
.rm-preview .rm-c-miss { color: var(--rm-ink-3); font-style: italic; }
.rm-seats {
  display: inline-block; min-width: 26px; padding: 1px 8px; border-radius: 999px;
  background: var(--rm-sunk); border: 1px solid var(--rm-line);
  font-size: 13px; font-variant-numeric: tabular-nums; color: var(--rm-ink-2); text-align: center;
}
.rm-count { margin: 12px 0 0; font-size: 15px; color: var(--rm-ink-3); }
.rm-count strong { color: var(--rm-ink); }

/* ── The reminder choice ──────────────────────────────────────────────────── */

/* The styles stand side by side and name their difference; the chosen message
   is drawn once below them, across the whole column.
 *
 * Three whole messages never fitted here. The rail and its gutter take 276px
 * of the 1180px shell and the card's padding 60 more, so each of three
 * previews got 215px — a quarter of a phone — and the cards came out 577, 659
 * and 372px tall, the short one leaving a 287px void beside its neighbour.
 * Worse, the side-by-side threshold sat inside that same arithmetic: between
 * 1024 and 1179 the card measured 640px and the styles STACKED, while a 1023px
 * window (no rail yet) stood them side by side — the layout flipped as the
 * window grew. A card carries the choice; the message gets the column. */
.rm-choices {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 12px; margin: 18px 0 0;
}
.rm-choice { display: block; cursor: pointer; }
.rm-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.rm-choice-in {
  display: grid; gap: 6px; align-content: start; height: 100%; padding: 13px 15px 14px;
  border: 1px solid var(--rm-line-2); border-radius: var(--rm-r); background: var(--rm-surface);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.rm-choice:hover .rm-choice-in { border-color: var(--rm-brass-2); }
.rm-choice input:checked + .rm-choice-in { border-color: var(--rm-brass); box-shadow: 0 0 0 3px var(--rm-brass-bg); }
.rm-choice input:focus-visible + .rm-choice-in { outline: 2px solid var(--rm-brass); outline-offset: 2px; }
/* A name may take two lines, so every name is given two: the lines beneath
   them start level across the row. */
.rm-choice-t { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-height: 2.6em; font-weight: 600; font-size: 15.5px; line-height: 1.3; }
.rm-choice-name { min-width: 0; text-wrap: balance; }
.rm-choice-d { font: 400 13.5px/1.45 var(--rm-ui); color: var(--rm-ink-3); }
/* The tick IS the radio's state — one reminder is sent, so ticking one un-ticks
   the others — drawn at the top right, where the eye looks for it. */
.rm-tick {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--rm-line-2); background: var(--rm-surface); color: transparent;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.rm-choice:hover .rm-tick { border-color: var(--rm-brass-2); }
.rm-choice input:checked + .rm-choice-in .rm-tick { background: var(--rm-brass); border-color: var(--rm-brass); color: #fff; }
/* Three cards of about 180px and their gaps is the least a row can hold. Every
   desktop column is far wider than this, so the row cannot flip back to
   stacked as the window grows — the defect above. */
@container rm-card (max-width: 569px) {
  .rm-choices { grid-auto-flow: row; }
}
/* One message, shown across the column. No `display` here on purpose: the
   script hides the styles that are not ticked with [hidden], and a display of
   our own would beat it. */
.rm-shows { margin: 14px 0 0; }
/* Room to the right of the bubble, the way a chat has room — but not the whole
   column: at 794px the ground was half flat ground. With no script every
   style's message is in the page, so they are kept apart. */
.rm-show .rm-bubble-ground { max-width: 520px; }
.rm-show + .rm-show { margin-top: 12px; }
/* A WhatsApp bubble, on WhatsApp's own ground so it reads as the real thing. */
/* Both are spans inside a <label>, so they must be made blocks or the bubble
   breaks into inline fragments around the preview's own divs. */
.rm-bubble-ground { display: block; padding: 14px; border-radius: 8px; background: var(--rm-wa-ground); }
.rm-bubble {
  display: block; max-width: 400px; padding: 9px 11px 7px; border-radius: 8px 2px 8px 8px;
  background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.13);
  font-size: 14.5px; line-height: 1.45; color: var(--rm-wa-ink); white-space: pre-wrap;
}
.rm-bubble .wap-footer { margin-top: 6px; font-size: 12.5px; color: var(--rm-wa-meta); }
.rm-bubble .pv-slot { background: var(--rm-wa-slot); border-radius: 3px; padding: 0 2px; }

/* ── When it should go ────────────────────────────────────────────────────── */

.rm-when { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--rm-line); }
.rm-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0 16px; }
.rm-preset {
  display: grid; gap: 2px; padding: 10px 16px; cursor: pointer; text-align: left;
  background: var(--rm-surface); border: 1px solid var(--rm-line-2); border-radius: 8px;
  font-family: var(--rm-ui);
}
.rm-preset strong { font-size: 15px; font-weight: 600; color: var(--rm-ink); }
.rm-preset span { font-size: 13px; color: var(--rm-ink-3); font-variant-numeric: tabular-nums; }
.rm-preset:hover { border-color: var(--rm-brass-2); }
.rm-preset.is-on { border-color: var(--rm-brass); box-shadow: 0 0 0 3px var(--rm-brass-bg); }

.rm-consent { display: flex; gap: 11px; align-items: flex-start; margin: 26px 0 0; color: var(--rm-ink-2); }
.rm-consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--rm-brass); flex: none; }

/* ── Messages ─────────────────────────────────────────────────────────────── */

.rm-note {
  display: flex; gap: 11px; margin: 0 0 18px; padding: 14px 18px;
  border-radius: var(--rm-r); font-size: 16px;
  background: var(--rm-stop-bg); border: 1px solid var(--rm-stop-line); color: var(--rm-stop-ink);
}
.rm-note-ok { background: var(--rm-done-bg); border-color: var(--rm-done-line); color: var(--rm-done-ink); }
.rm-note-brass { background: var(--rm-brass-bg); border-color: var(--rm-brass-line); color: var(--rm-brass-ink); }

.rm-finish { text-align: center; padding: 44px 30px; }
.rm-finish .rm-seal { width: 76px; height: 76px; margin: 0 auto 18px; display: block; }
.rm-finish .rm-h { font-size: 32px; }
.rm-finish .rm-sub { margin-left: auto; margin-right: auto; }
.rm-finish .rm-note { max-width: 62ch; margin: 20px auto; }

/* A guest's calendar page (/cal): the finish card, with two ways in. */
.rm-link .rm-kicker { margin-bottom: 12px; }
.rm-link .rm-title { font-size: clamp(30px, 5vw, 42px); }
.rm-link-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 26px 0 14px; }
/* These pages have no masthead to hold the card off the topbar. */
.rm-link { margin-top: 48px; }

/* ── Small pieces the markup leans on ─────────────────────────────────────── */

.rm-work { min-width: 0; }
.rm-gap { margin-top: 14px; }
.rm-h-sm { margin: 30px 0 0; padding-top: 24px; border-top: 1px solid var(--rm-line); font-size: 21px; }
.rm-field-label { margin: 0; font: 600 13.5px/1.3 var(--rm-ui); color: var(--rm-ink-2); }
.rm-field-narrow { max-width: 320px; }
.rm-submit { display: grid; gap: 10px; justify-items: start; margin-top: 26px; }
.rm-turnstile:empty { display: none; }
/* The pulse, the words (free to wrap), and "Check now" — one row where there is
   room, and on a phone the button drops UNDER the words, never between them. */
.rm-waiting {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  column-gap: 10px; row-gap: 8px; margin: 14px 0 0; font-size: 15px; color: var(--rm-brass);
}
.rm-waiting[hidden] { display: none; }
.rm-pulse {
  width: 9px; height: 9px; border-radius: 50%; background: var(--rm-brass-2);
  box-shadow: 0 0 0 0 rgba(176, 139, 71, .5); animation: rmPulse 1.6s ease-out infinite;
}
@keyframes rmPulse { 0% { box-shadow: 0 0 0 0 rgba(176,139,71,.45); } 100% { box-shadow: 0 0 0 10px rgba(176,139,71,0); } }
/* "Check now" — small, quiet, beside the line it answers. */
.rm-check {
  display: inline-flex; align-items: center; gap: 6px; justify-self: end;
  padding: 5px 12px; border: 1px solid var(--rm-brass-line); border-radius: 999px;
  background: var(--rm-surface); color: var(--rm-brass-ink); font: 600 13px var(--rm-ui); cursor: pointer;
  transition: border-color .14s ease;
}
.rm-check:hover { border-color: var(--rm-brass-2); }
.rm-check:focus-visible { outline: none; border-color: var(--rm-brass); box-shadow: 0 0 0 3px var(--rm-brass-bg); }
.rm-check:disabled { cursor: default; }
.rm-check svg { flex: none; }
.rm-check.is-busy svg { animation: rmSpin .8s linear infinite; }
@keyframes rmSpin { to { transform: rotate(360deg); } }

/* The date and time picker (assets/css/date-picker.css) in this page's own
   palette. Its calendar hangs off <body>, so it is themed from the body class. */
.rm-page .dp-panel {
  --dp-surface: var(--rm-surface); --dp-line: var(--rm-line); --dp-ink: var(--rm-ink);
  --dp-muted: var(--rm-ink-3); --dp-on: var(--rm-ink); --dp-hover: var(--rm-brass-bg);
  --dp-mark: var(--rm-brass); --dp-font: var(--rm-ui);
}
.rm-page .dp-trigger { cursor: pointer; }
/* The control itself sits in the page, not the panel: its placeholder and glyph
   take the page's muted ink, as the other fields' placeholders do. */
.rm-page { --dp-placeholder: var(--rm-ink-3); --dp-icon: var(--rm-ink-3); }
.rm-input::placeholder { color: var(--rm-ink-3); }
.rm-bubble .wap-body { white-space: normal; }
.rm-bubble .pv-empty { color: var(--rm-brass); font-style: italic; }
/* The variable-number badges are for whoever builds templates, not for a host. */
.rm-bubble .pv-badge { display: none; }
/* Link buttons sit under the message, the way WhatsApp draws them. */
.rm-bubble .wap-buttons { display: grid; margin: 8px -11px -7px; white-space: normal; }
.rm-bubble .wap-btn {
  display: block; padding: 9px 10px; border-top: 1px solid var(--rm-wa-rule);
  text-align: center; font-size: 14px; font-weight: 600; color: var(--rm-wa-link);
}
.rm-presets-hint { margin: 0; grid-column: 1 / -1; }

/* A picture reminder's card: a slimmer drop zone, and the picture itself at the
   top of the bubble, where WhatsApp puts it. */
.rm-card-field { margin: 16px 0 4px; }
.rm-field-label em { font-style: normal; color: var(--rm-stop); }
.rm-drop-sm { flex-direction: row; gap: 12px; margin: 8px 0 0; padding: 14px 18px; text-align: left; }
.rm-drop-sm .rm-drop-s { margin-left: auto; }
.rm-bubble .wap-img { margin: -4px -6px 8px; }
.rm-bubble .wap-img img { display: block; width: 100%; max-height: 320px; object-fit: cover; border-radius: 6px; }
.rm-bubble .wap-media-ph {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 120px; margin: -4px -6px 8px;
  border-radius: 6px; background: var(--rm-sunk); color: var(--rm-ink-3); font-size: 13.5px; white-space: normal;
}

/* ── Narrow ───────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .rm-cols { grid-template-columns: 1fr; gap: 22px; }
  /* The rail becomes a strip: the same four states, read across. */
  .rm-rail { position: static; }
  .rm-rail ol { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; }
  .rm-rail li { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 7px; padding: 0; }
  .rm-rail li::before { left: 50%; right: -50%; top: 13px; bottom: auto; width: auto; height: 1px; }
  .rm-rail li:not(:last-child)::before { display: block; }
  .rm-rail-t { font-size: 12.5px; padding-top: 0; }
}
@media (max-width: 719px) {
  .rm-wrap { padding: 0 18px 72px; }
  .rm-card { padding: 22px 20px; border-radius: 8px; }
  .rm-grid, .rm-map, .rm-presets { grid-template-columns: 1fr; }
  .rm-masthead { padding: 36px 0 26px; }
  .rm-stamp { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 14px; }
  /* On a phone only the step you are on is named; the dots carry the rest. */
  .rm-rail li:not(.is-now) .rm-rail-t { display: none; }
  .rm-rail li.is-now .rm-rail-t { white-space: nowrap; }
  .rm-rail li { padding-bottom: 4px; }
  body.rm-page .topbar-inner { padding: 10px 18px; }
  body.rm-page .foot-line { padding: 22px 18px 36px; }
  .rm-link { margin-top: 24px; }
  /* Two ways in, one width each — never a short button over a long one. */
  .rm-link-actions { flex-direction: column; align-items: stretch; }
  .rm-drop-sm { flex-wrap: wrap; }
  .rm-drop-sm .rm-drop-s { margin-left: 0; width: 100%; }
  /* The words may take two lines here, so everything hangs from the top and
     the pulse sits on the FIRST line (1lh is that line's height). */
  .rm-waiting { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .rm-pulse { margin-top: calc((1lh - 9px) / 2); }
  .rm-check { grid-column: 2; justify-self: start; min-height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .rm-btn, .rm-drop, .rm-choice-in, .rm-tick, .rm-input, .rm-select { transition: none; }
  .rm-pulse, .rm-check.is-busy svg { animation: none; }
}