/* ============================================================
   RM eLearning Studio Assistant — styles.css
   v2.5 — Subtle rose palette. Sibling to the Storyboard Design
   Assistant, retuned for the 3-step ELS workflow.
   ============================================================ */

:root {
  /* Subtle-rose palette (v2.5) — variable names kept from the forest
     palette so the cascade still works; values rebalanced toward warm rose. */
  --rm-moss: #8B4759;            /* PRIMARY — deep rose-mauve (was moss green) */
  --rm-moss-dark: #5C2D3B;       /* deep rose for hover/active */
  --rm-deep: #3B1F2A;            /* near-black with rose cast — header bg */
  --rm-sage: #C9A7A0;            /* dusty rose — mid tone (was sage green) */
  --rm-olive: #A8748A;            /* mauve secondary (was olive) */
  --rm-header-bg: #3B1F2A;       /* deep rose-black header */
  --rm-header-dark: #2A1620;     /* near-black, behind logo */

  /* Surfaces and text */
  --rm-text: #2A2024;            /* warm near-black with rose cast */
  --rm-text-muted: #7A5F65;      /* warm mauve-muted */
  --rm-form-text: #2F2025;       /* dark text for inputs */
  --rm-bg: #FDF6F4;              /* subtle pale rose background */
  --rm-surface: #FFFCFB;         /* near-white warm surface */
  --rm-surface-warm: #F7E9E5;    /* warmer rose for inset panels */
  --rm-border: #EAD2CC;          /* warm rose hairline */
  --rm-border-strong: #D9B7B1;   /* stronger rose hairline */
  --rm-terracotta: #C56F5A;      /* warm coral accent */
  --rm-terracotta-dark: #9D4F3D;
  --rm-terracotta-bright: #D88A78; /* brighter coral on dark bg */
  --rm-warn: #C18F2C;
  --rm-warn-bg: #F5EAD0;
  --rm-error: #9B3B3B;
  --rm-error-bg: #F0DEDA;

  /* Layout */
  --rm-topbar-h: 120px;
  --rm-sidebar-w: 180px;
  --rm-radius: 14px;
  --rm-radius-sm: 8px;

  /* Typography */
  --rm-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --rm-font-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --rm-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--rm-font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--rm-text);
  background: var(--rm-bg);
}

a { color: var(--rm-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================
   Top bar
   ============================================================ */
.rm-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--rm-topbar-h);
  background: linear-gradient(90deg,
    var(--rm-header-dark) 0%,
    var(--rm-header-dark) 30%,
    var(--rm-header-bg) 100%);
  display: flex;
  align-items: center;
  padding: 0 28px;
  border-bottom: 3px solid var(--rm-moss);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.rm-topbar__logo {
  /* v2.8 — reduce 30% from prior 96px and respect intrinsic aspect ratio.
     Forcing width:253px was squashing the new 800x242 PNG (natural ~3.3:1)
     into a 2.6:1 box. */
  height: 64px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  margin-right: 22px;
  margin-top: -8px;
  flex-shrink: 0;
  display: block;
}

.rm-topbar__title {
  font-family: var(--rm-font-serif);
  font-size: 32px;
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: -0.015em;
  margin: 0;
  margin-left: 30px;
  flex: 1;
  line-height: 1.1;
}
.rm-topbar__title__accent {
  font-style: italic;
  color: var(--rm-terracotta-bright);
  font-weight: 500;
}

.rm-topbar__right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.rm-keybadge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
}
.rm-keybadge--ok { color: var(--rm-sage); border-color: rgba(201, 167, 160, 0.5); }
.rm-keybadge--missing { color: #FFD27A; border-color: rgba(244, 163, 0, 0.5); }
.rm-keybadge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.rm-topbar__keystack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.rm-topbar__version {
  font-family: var(--rm-font);
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  user-select: none;
}

.rm-topbar__link {
  display: inline-flex;
  align-items: center;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  text-decoration: none;
  line-height: 1;
  align-self: flex-start;
}
.rm-topbar__link:hover { background: rgba(255, 255, 255, 0.08); text-decoration: none; }

/* ============================================================
   App shell — sidebar + content
   ============================================================ */
.rm-shell {
  display: flex;
  min-height: calc(100vh - var(--rm-topbar-h));
}

.rm-sidebar {
  width: var(--rm-sidebar-w);
  flex-shrink: 0;
  background: var(--rm-surface);
  border-right: 1px solid var(--rm-border);
  padding: 26px 14px 26px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rm-sidebar__heading {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rm-text-muted);
  margin: 0 6px 10px 6px;
}

.rm-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: var(--rm-radius-sm);
  color: var(--rm-text);
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  background: transparent;
  text-align: left;
  width: 100%;
}
.rm-step:hover:not(.rm-step--disabled) { background: var(--rm-bg); text-decoration: none; }
.rm-step--current {
  background: rgba(59, 31, 42, 0.06);
  border-color: rgba(59, 31, 42, 0.2);
  color: var(--rm-deep);
}
.rm-step--disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

.rm-step__num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--rm-bg);
  color: var(--rm-text-muted);
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid var(--rm-border);
}
.rm-step--done .rm-step__num { background: var(--rm-moss); color: #FFFFFF; border-color: var(--rm-moss); }
.rm-step--current .rm-step__num { background: var(--rm-deep); color: #FFFFFF; border-color: var(--rm-deep); }

.rm-sidebar__spacer { flex: 1; }

.rm-sidebar__danger {
  font-size: 12px;
  font-weight: 600;
  color: var(--rm-error);
  background: transparent;
  border: 1px dashed rgba(155, 59, 59, 0.4);
  padding: 8px 10px;
  border-radius: var(--rm-radius-sm);
  cursor: pointer;
  margin-top: 10px;
}
.rm-sidebar__danger:hover { background: var(--rm-error-bg); }

.rm-sidebar__action {
  font-size: 12px;
  font-weight: 600;
  color: var(--rm-deep);
  background: transparent;
  border: 1px solid var(--rm-border);
  padding: 8px 10px;
  border-radius: var(--rm-radius-sm);
  cursor: pointer;
  margin: 2px 0;
  text-align: left;
  font-family: var(--rm-font);
}
.rm-sidebar__action:hover {
  background: var(--rm-surface-warm);
  border-color: var(--rm-border-strong);
}

/* ============================================================
   Main content
   ============================================================ */
.rm-main {
  flex: 1;
  padding: 12px 36px 60px 36px;
  min-width: 0;
}

.rm-page-h1 {
  font-family: var(--rm-font-serif);
  font-size: 29px;
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 4px 0;
  color: var(--rm-text);
  letter-spacing: -0.02em;
}
.rm-page-h1__accent {
  font-style: italic;
  color: var(--rm-terracotta);
  font-weight: 500;
}
.rm-page-eyebrow {
  font-family: var(--rm-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rm-moss-dark);
  margin: 0 0 3px 0;
}
.rm-page-lede {
  font-family: var(--rm-font);
  color: var(--rm-text-muted);
  font-size: 13px;
  line-height: 1.4;
  margin: 0 0 8px 0;
  max-width: 820px;
}

.rm-card {
  background: var(--rm-surface);
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius);
  padding: 14px 18px;
  box-shadow: 0 1px 3px rgba(59, 31, 42, 0.04);
  margin-bottom: 12px;
}
.rm-card--feature { border-left: 4px solid var(--rm-moss); }
.rm-card__title { font-size: 16px; font-weight: 700; margin: 0 0 12px 0; color: var(--rm-deep); }

/* ============================================================
   Buttons
   ============================================================ */
.rm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  font-family: var(--rm-font);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  white-space: nowrap;
}
.rm-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.rm-btn--small { padding: 6px 12px; font-size: 12px; }

.rm-btn--primary {
  background: var(--rm-deep);
  color: #FFFFFF;
  border-color: var(--rm-deep);
}
.rm-btn--primary:hover:not(:disabled) { background: var(--rm-moss-dark); border-color: var(--rm-moss-dark); text-decoration: none; }

.rm-btn--secondary {
  background: var(--rm-moss);
  color: #FFFFFF;
  border-color: var(--rm-moss);
}
.rm-btn--secondary:hover:not(:disabled) { background: var(--rm-moss-dark); border-color: var(--rm-moss-dark); text-decoration: none; }

.rm-btn--ghost {
  background: transparent;
  color: var(--rm-deep);
  border-color: var(--rm-border-strong);
}
.rm-btn--ghost:hover:not(:disabled) { background: var(--rm-surface-warm); text-decoration: none; }

.rm-btn--danger {
  background: transparent;
  color: var(--rm-error);
  border-color: rgba(155, 59, 59, 0.4);
}
.rm-btn--danger:hover:not(:disabled) { background: var(--rm-error-bg); text-decoration: none; }

.rm-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 14px;
}

.rm-actions-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin: 14px 0;
}

/* v2.15 (item 5) — Step 3 prompt row directly under the page title.
   Reads "Review and generate each page individually, OR [Generate all]".
   The text and button sit on one row, vertically centred.
   v2.16 (item 1): the prompt callout now lives inside .rm-step3-topbar
   alongside the Tools group, on a single horizontal line. The prompt
   takes its natural width; Tools sits at the right. */
.rm-step3-topbar {
  display: flex;
  align-items: stretch;
  gap: 14px;
  flex-wrap: wrap;
  margin: 8px 0 18px 0;
}
.rm-step3-prompt {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: rgba(74, 107, 58, 0.05);
  border-left: 3px solid var(--rm-moss, #4a6b3a);
  border-radius: 4px;
  flex: 1 1 auto;
  min-width: 320px;
}
.rm-step3-topbar .rm-tools-group {
  /* No background fill — sit naturally beside the callout */
  align-self: center;
  margin-left: auto;
}
.rm-step3-prompt__text {
  font-size: 14px;
  color: var(--rm-deep, #1f1f24);
  line-height: 1.4;
}
.rm-step3-prompt__text strong {
  color: var(--rm-moss-dark, #2f4525);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ============================================================
   Forms — Step 1
   ============================================================ */
.rm-form-shell {
  display: grid;
  grid-template-columns: 1fr var(--rm-notes-w, 340px);
  gap: 18px;
  align-items: start;
}

.rm-form-column {
  background: var(--rm-surface);
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius);
  padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(59, 31, 42, 0.04);
}
.rm-form-column__heading {
  font-family: var(--rm-font-serif);
  font-weight: 600;
  font-size: 18px;
  color: var(--rm-deep);
  margin: 0 0 14px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rm-border);
}

/* v2.14 (item 3) — Container title style. Designer asked for Times New
   Roman explicitly, sized to match "Define Your Learning" (18px). Used
   on every container title in Steps 1, 2, and 3 — including h2 page
   sub-headings and h3 panel titles. Overrides the default serif stack
   so TNR is the primary face, not just a fallback. */
.rm-container-title {
  font-family: "Times New Roman", Times, "Source Serif 4", "Source Serif Pro", Georgia, serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--rm-deep);
  margin: 0 0 14px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rm-border);
  line-height: 1.3;
}
/* Step 2 panel h3s use this too, but without the bottom border (each is
   inside its own bordered container, so an extra hairline reads as noise). */
.rm-container-title--inline {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 8px;
}

.rm-form-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* v2.7B+ — duplicate "Generate Sample Definition" button at the bottom of
   the learning-fields form. Sits beneath the form-grid with comfortable
   breathing room so it doesn't read as part of the last field. */
.rm-form-bottom-cta {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--rm-border, #eadfdc);
  display: flex;
  justify-content: flex-end;
}

.rm-field {
  display: flex;
  flex-direction: column;
}
.rm-field--inline { margin-top: 8px; }

.rm-field__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--rm-text);
  margin: 0 0 4px 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.rm-field__required {
  color: var(--rm-terracotta);
  font-weight: 700;
  font-size: 11px;
}
.rm-field__hint {
  font-size: 11.5px;
  color: var(--rm-text-muted);
  margin: 4px 0 0 0;
  font-style: italic;
}

.rm-field__input,
.rm-field__textarea,
.rm-field__select {
  font-family: var(--rm-font);
  font-size: 14px;
  color: var(--rm-form-text);
  background: var(--rm-surface-warm);
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-sm);
  padding: 9px 12px;
  width: 100%;
  outline: none;
  transition: border-color 120ms ease, background 120ms ease;
}
.rm-field__input:focus,
.rm-field__textarea:focus,
.rm-field__select:focus {
  border-color: var(--rm-moss);
  background: var(--rm-surface);
}
.rm-field__textarea {
  resize: vertical;
  min-height: 70px;
  line-height: 1.45;
}
.rm-field__select { cursor: pointer; }

/* ============================================================
   Uploads container (Step 1 + Step 2)
   ============================================================ */
.rm-uploads-container {
  background: var(--rm-surface);
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius);
  padding: 14px 18px 18px 18px;
  margin-bottom: 14px;
  box-shadow: 0 1px 3px rgba(59, 31, 42, 0.04);
}
.rm-uploads-eyebrow {
  font-family: var(--rm-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rm-moss-dark);
  margin: 0 0 12px 0;
}
.rm-uploads-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.rm-upload-card {
  background: var(--rm-surface-warm);
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-sm);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* v2.15 (item 1) — Used to be `font-size: 13px; font-weight: 700` here,
   which overrode the .rm-container-title class applied via item 1. Removed
   those declarations so the class controls type. Left the margin/colour
   defaults; the class supplies its own colour anyway. */
.rm-upload-card__title { margin: 0; color: var(--rm-deep); }
.rm-upload-card__hint { font-size: 11.5px; color: var(--rm-text-muted); margin: 0; line-height: 1.35; }
.rm-upload-card__url {
  font-family: var(--rm-font-mono);
  font-size: 12px;
  padding: 6px 8px;
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-sm);
  background: var(--rm-surface);
  width: 100%;
  outline: none;
}
.rm-upload-card__url:focus { border-color: var(--rm-moss); }

.rm-knowledge-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.rm-knowledge-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 10px;
  border-radius: 999px;
  background: var(--rm-surface);
  border: 1px solid var(--rm-border);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--rm-text);
}
.rm-knowledge-chip__remove {
  background: transparent;
  border: 0;
  color: var(--rm-text-muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
}
.rm-knowledge-chip__remove:hover { color: var(--rm-error); }

/* ============================================================
   Alerts
   ============================================================ */
.rm-alert {
  padding: 10px 14px;
  border-radius: var(--rm-radius-sm);
  font-size: 13px;
  line-height: 1.45;
  margin-bottom: 12px;
  border: 1px solid;
}
.rm-alert--info    { background: var(--rm-surface-warm); border-color: var(--rm-border); color: var(--rm-text); }
.rm-alert--success { background: rgba(139, 71, 89, 0.10); border-color: rgba(139, 71, 89, 0.35); color: var(--rm-moss-dark); }
.rm-alert--warn    { background: var(--rm-warn-bg); border-color: rgba(193, 143, 44, 0.35); color: #6E5215; }
.rm-alert--error   { background: var(--rm-error-bg); border-color: rgba(155, 59, 59, 0.35); color: var(--rm-error); }

/* ============================================================
   Empty states
   ============================================================ */
.rm-empty {
  background: var(--rm-surface);
  border: 1px dashed var(--rm-border-strong);
  border-radius: var(--rm-radius);
  padding: 30px 28px;
  text-align: center;
}
.rm-empty h3 { font-family: var(--rm-font-serif); font-size: 22px; font-weight: 600; margin: 0 0 6px 0; color: var(--rm-deep); }
.rm-empty p { color: var(--rm-text-muted); font-size: 14px; margin: 0 0 14px 0; }

/* ============================================================
   Landing page
   ============================================================ */
.rm-landing {
  max-width: 980px;
  margin: 30px auto 60px auto;
  text-align: center;
}
.rm-landing__hero h1 {
  font-family: var(--rm-font-serif);
  font-size: 44px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: var(--rm-text);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.rm-landing__hero h1 em {
  font-style: italic;
  color: var(--rm-terracotta);
  font-weight: 500;
}
.rm-landing__hero p {
  font-size: 17px;
  color: var(--rm-text-muted);
  margin: 0 0 30px 0;
  line-height: 1.45;
}
.rm-landing__steps {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.rm-landing__step {
  background: var(--rm-surface);
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius);
  padding: 20px 18px;
  flex: 1;
  min-width: 160px;
  max-width: 240px;
  text-align: left;
  position: relative;
}
.rm-landing__step-num {
  font-family: var(--rm-font-serif);
  font-size: 28px;
  font-weight: 600;
  color: var(--rm-moss);
  display: block;
  line-height: 1;
  margin-bottom: 6px;
}
.rm-landing__step h4 { font-size: 15px; margin: 0 0 4px 0; color: var(--rm-deep); }
.rm-landing__step p  { font-size: 12.5px; color: var(--rm-text-muted); margin: 0; line-height: 1.4; }
.rm-landing__arrow { font-size: 22px; color: var(--rm-border-strong); align-self: center; }
.rm-landing__cta { margin-top: 20px; }

/* ============================================================
   Setup page
   ============================================================ */
.rm-setup {
  max-width: 720px;
  margin: 30px auto 60px auto;
  padding: 0 20px;
}

/* ============================================================
   Modal — Step 1 mode selection
   ============================================================ */
.rm-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(42, 22, 32, 0.55);
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.rm-modal {
  background: var(--rm-surface);
  border-radius: var(--rm-radius);
  max-width: 560px;
  width: 100%;
  padding: 28px 30px 24px 30px;
  box-shadow: 0 20px 60px rgba(42, 22, 32, 0.3);
}
.rm-modal h2 {
  font-family: var(--rm-font-serif);
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: var(--rm-deep);
}
.rm-modal__lede {
  font-size: 14px;
  color: var(--rm-text-muted);
  margin: 0 0 18px 0;
  line-height: 1.5;
}
.rm-modal__choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.rm-modal__choice {
  background: var(--rm-surface-warm);
  border: 2px solid var(--rm-border);
  border-radius: var(--rm-radius-sm);
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
  font-family: var(--rm-font);
}
.rm-modal__choice:hover:not(:disabled) {
  border-color: var(--rm-moss);
  background: var(--rm-surface);
}
.rm-modal__choice:disabled { opacity: 0.5; cursor: not-allowed; }
.rm-modal__choice h3 { font-size: 15px; margin: 0 0 4px 0; color: var(--rm-deep); }
.rm-modal__choice p { font-size: 12.5px; color: var(--rm-text-muted); margin: 0; line-height: 1.4; }
.rm-modal__foot { font-size: 12px; color: var(--rm-text-muted); }

/* ============================================================
   Chat panel — shared by all three steps
   ============================================================ */
.rm-chat-host {
  background: var(--rm-surface);
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  height: 720px;
  position: sticky;
  top: calc(var(--rm-topbar-h) + 12px);
  box-shadow: 0 1px 3px rgba(59, 31, 42, 0.04);
}
/* v2.3 — Step 1 chat is shorter so the input row sits in view on first launch.
   Caps at 540px AND at 65vh, whichever is smaller, so it stays usable on
   13" laptops without forcing scroll to find the Send button. */
.rm-chat-host--step1 {
  height: min(540px, 65vh);
}
.rm-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--rm-border);
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.rm-chat-header__title {
  font-family: var(--rm-font-serif);
  font-weight: 600;
  font-size: 17px;
  color: var(--rm-deep);
  margin: 0;
}
.rm-chat-header__title em { color: var(--rm-terracotta); font-style: italic; font-weight: 500; }
.rm-chat-header__clear {
  background: transparent;
  border: 0;
  color: var(--rm-text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 6px;
}
.rm-chat-header__clear:hover { color: var(--rm-error); }

.rm-chat-msgs {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
}

.rm-chat-msg {
  padding: 10px 12px;
  border-radius: var(--rm-radius-sm);
  font-size: 13.5px;
  line-height: 1.5;
  max-width: 92%;
  word-wrap: break-word;
}
.rm-chat-msg--user {
  background: var(--rm-surface-warm);
  border: 1px solid var(--rm-border);
  align-self: flex-end;
  color: var(--rm-text);
}
.rm-chat-msg--ai {
  background: rgba(139, 71, 89, 0.07);
  border: 1px solid rgba(139, 71, 89, 0.18);
  align-self: flex-start;
  color: var(--rm-text);
}

/* v3.18 (item 2) — Status-role message: green check + the labels of just-
   auto-applied fields. Slim, full-width, distinct from chat bubbles so the
   designer reads it as a system event ("Title updated. Audience updated.")
   rather than conversation. */
.rm-chat-msg--status {
  background: rgba(74, 140, 58, 0.08);
  border: 1px solid rgba(74, 140, 58, 0.28);
  color: #2D6320;
  font-size: 12.5px;
  padding: 6px 12px;
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
}
.rm-chat-msg__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 50%;
  background: #4A8C3A;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

/* v3.18 (item 2) — "End this Conversation ▶" row at the bottom of the
   Step 1 chat composer (storyboard pattern). Full-width primary button
   that triggers rmGoStep2 — generates the General Design and moves the
   designer to Step 2. The conversation ENDING IS the apply gesture. */
.rm-chat-end-row {
  border-top: 1px solid var(--rm-border);
  padding: 10px 12px;
  background: rgba(139, 71, 89, 0.03);
}
.rm-chat-end-btn {
  width: 100%;
  font-size: 14px;
  font-weight: 600;
}

.rm-chat-msg p { margin: 0 0 6px 0; }
.rm-chat-msg p:last-child { margin-bottom: 0; }
.rm-chat-msg ul, .rm-chat-msg ol { margin: 4px 0 4px 18px; padding: 0; }
.rm-chat-msg li { margin-bottom: 2px; }

.rm-chat-input-row {
  border-top: 1px solid var(--rm-border);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rm-chat-input {
  font-family: var(--rm-font);
  font-size: 13.5px;
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-sm);
  padding: 8px 10px;
  resize: vertical;
  min-height: 56px;
  outline: none;
  background: var(--rm-surface-warm);
  color: var(--rm-form-text);
}
.rm-chat-input:focus { border-color: var(--rm-moss); background: var(--rm-surface); }
.rm-chat-send-row {
  display: flex;
  gap: 8px;
  align-items: center;
  /* v3.13 (item 3) — Mic button is justified right inside this row.
     Send sits on the left of the row; mic goes hard right. */
  justify-content: flex-start;
}
.rm-chat-send-row > [data-rm-chat-mic] { margin-left: auto; }

/* v3.13 (item 3) — Mic button for dictation. Circular, icon-only, sits
   to the right of Send. Default state is muted; "listening" state pulses
   to indicate active recognition. Hidden by default; rmAttachMicButton
   reveals it only when the Web Speech API is supported. */
.rm-chat-mic {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--rm-border, #ddd);
  background: var(--rm-surface, #fff);
  color: var(--rm-text-muted, #888);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}
.rm-chat-mic svg { width: 18px; height: 18px; fill: currentColor; }
.rm-chat-mic:hover { background: var(--rm-surface-warm, #f5f0ed); color: var(--rm-moss, #8B4759); }
.rm-chat-mic--listening {
  background: var(--rm-moss, #8B4759);
  color: #fff;
  animation: rm-mic-pulse 1.2s ease-in-out infinite;
}
.rm-chat-mic--listening:hover { background: var(--rm-moss-dark, #5C2D3B); color: #fff; }
@keyframes rm-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139, 71, 89, 0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(139, 71, 89, 0); }
}

.rm-chat-typing {
  font-size: 12px;
  color: var(--rm-text-muted);
  font-style: italic;
  padding: 4px 0;
}

/* Proposal tile — Step 1 interview mode */
.rm-propose {
  background: var(--rm-surface);
  border: 1px solid var(--rm-moss);
  border-left: 4px solid var(--rm-moss);
  border-radius: var(--rm-radius-sm);
  padding: 10px 12px;
  margin: 6px 0;
  font-size: 13px;
}
.rm-propose__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rm-moss-dark);
  margin-bottom: 4px;
}
.rm-propose__field { font-weight: 700; color: var(--rm-deep); }
.rm-propose__value {
  background: var(--rm-surface-warm);
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-sm);
  padding: 6px 8px;
  margin: 6px 0;
  font-size: 12.5px;
  color: var(--rm-form-text);
  white-space: pre-wrap;
}
.rm-propose__actions { display: flex; gap: 6px; }
.rm-propose--applied { opacity: 0.7; }

/* ============================================================
   Step 2 — Page picker grid + sequence
   ============================================================ */
.rm-step2-shell {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 18px;
  align-items: start;
}

.rm-page-picker {
  background: var(--rm-surface);
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius);
  padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(59, 31, 42, 0.04);
}
.rm-page-picker h3 {
  font-family: var(--rm-font-serif);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px 0;
  color: var(--rm-deep);
}
.rm-page-picker__lede { font-size: 13px; color: var(--rm-text-muted); margin: 0 0 14px 0; }

.rm-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}
.rm-type-card {
  background: var(--rm-surface-warm);
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-sm);
  padding: 12px 12px 10px 12px;
  cursor: pointer;
  text-align: left;
  font-family: var(--rm-font);
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rm-type-card:hover {
  border-color: var(--rm-moss);
  background: var(--rm-surface);
  transform: translateY(-1px);
}
.rm-type-card__name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--rm-deep);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
/* v2.8 (item 5) — Small line-art icons in front of page type names.
   currentColor lets them adopt the surrounding text colour in either
   the picker card, the sequence item, or anywhere else they're reused. */
.rm-page-type-icon {
  display: inline-block;
  vertical-align: -2px;
  flex-shrink: 0;
  color: var(--rm-moss-dark);
}
.rm-type-card__name .rm-page-type-icon { color: var(--rm-moss); }
.rm-sequence-item__type .rm-page-type-icon { margin-right: 6px; color: var(--rm-moss-dark); }

/* v2.10 — Slide-in animation when an item is added by the AI sequence
   generator. The host marks the new item with --just-added; the animation
   plays once and the class is cleared after ~600ms. */
@keyframes rm-seq-item-in {
  from { transform: translateX(-40px); opacity: 0; }
  60%  { transform: translateX(4px); opacity: 1; }
  to   { transform: translateX(0); opacity: 1; }
}
.rm-sequence-item--just-added {
  animation: rm-seq-item-in 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
  box-shadow: 0 0 0 2px var(--rm-moss, #4a6b3a), 0 6px 18px rgba(74, 107, 58, 0.18);
}

/* v2.10 — Duration prompt modal (AI sequence generator). */
.rm-mini-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(31, 32, 36, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: rm-mini-modal-fade 180ms ease both;
}
@keyframes rm-mini-modal-fade { from { opacity: 0; } to { opacity: 1; } }
.rm-mini-modal__card {
  background: var(--rm-surface, #fff);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  padding: 22px 24px 18px;
  max-width: 420px;
  width: calc(100% - 32px);
}
.rm-mini-modal__title { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--rm-deep); }
.rm-mini-modal__lede { margin: 0 0 16px; font-size: 13px; color: var(--rm-text-muted); line-height: 1.45; }
.rm-mini-modal__row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.rm-mini-modal__row label { font-size: 13px; font-weight: 600; color: var(--rm-deep); }
.rm-mini-modal__input {
  width: 70px;
  padding: 8px 10px;
  border: 1px solid var(--rm-border, #e5d9d2);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  background: var(--rm-surface, #fff);
  color: var(--rm-deep);
}
.rm-mini-modal__input:focus { outline: 2px solid var(--rm-moss, #4a6b3a); outline-offset: 1px; }
.rm-mini-modal__hint { font-size: 12px; color: var(--rm-text-muted); }
.rm-mini-modal__actions { display: flex; justify-content: flex-end; gap: 8px; }
.rm-type-card__desc { font-size: 11.5px; color: var(--rm-text-muted); line-height: 1.4; }
/* v2.9 (item 5) — subtle topic-aware suggestion line below the description.
   Italic, smaller, low-emphasis so it reads as a hint not a label. */
.rm-type-card__suggest {
  font-size: 10.5px;
  font-style: italic;
  color: var(--rm-sage);
  line-height: 1.35;
  margin-top: 2px;
}
.rm-type-card__add {
  font-size: 11px;
  font-weight: 700;
  color: var(--rm-moss);
  margin-top: 4px;
  letter-spacing: 0.04em;
}

.rm-sequence h3 {
  font-family: var(--rm-font-serif);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px 0;
  color: var(--rm-deep);
}
.rm-sequence__lede { font-size: 13px; color: var(--rm-text-muted); margin: 0 0 12px 0; }

.rm-sequence-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px; /* v1.3: roomy gap so designers can drop between items */
}

/* Drop-zone strips that sit BETWEEN sequence items — half the gap above
   and below each item. Lit up by a pseudo-element on hover. */
.rm-sequence-item {
  position: relative;
}
.rm-sequence-item::before,
.rm-sequence-item::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 14px;
  border-radius: 4px;
  pointer-events: none;
  background: transparent;
  transition: background 120ms ease, height 120ms ease;
}
.rm-sequence-item::before { top: -10px; }
.rm-sequence-item::after  { bottom: -10px; }
.rm-sequence-item.rm-drop-marker::before {
  background: var(--rm-moss);
  height: 4px;
  top: -11px;
}
.rm-sequence-item.rm-drop-marker-below::after {
  background: var(--rm-moss);
  height: 4px;
  bottom: -11px;
}

/* Larger "drop here to append" receptacle at the bottom of the sequence list */
#rm-sequence-host .rm-sequence-tail-drop {
  margin-top: 24px;
  border: 2px dashed var(--rm-moss);
  border-radius: var(--rm-radius-sm);
  padding: 28px 14px;
  text-align: center;
  color: var(--rm-moss-dark);
  font-size: 13px;
  font-style: italic;
  /* v2.3 — same warm sage tint as the sequence items, so empty receptacles
     visually signal "this is where things go". */
  background: rgba(201, 167, 160, 0.12);
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
#rm-sequence-host .rm-sequence-tail-drop.rm-drop-target {
  border-color: var(--rm-moss);
  background: rgba(139, 71, 89, 0.22);
  color: var(--rm-deep);
}
.rm-sequence-item {
  /* v2.3 — distinctive warm sage tint (matches the empty receptacle) so the
     sequence column reads as a single coherent surface. */
  background: rgba(201, 167, 160, 0.12);
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-sm);
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: start;
}
.rm-sequence-item__num {
  font-family: var(--rm-font-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--rm-moss);
  line-height: 1;
  padding-top: 2px;
}
.rm-sequence-item__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rm-sequence-item__type {
  font-size: 13px;
  font-weight: 700;
  color: var(--rm-deep);
}
.rm-sequence-item__notes {
  font-family: var(--rm-font);
  font-size: 12.5px;
  background: var(--rm-surface);
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-sm);
  padding: 6px 8px;
  resize: vertical;
  min-height: 38px;
  outline: none;
  color: var(--rm-form-text);
}
.rm-sequence-item__notes:focus { border-color: var(--rm-moss); }
.rm-sequence-item__actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rm-sequence-item__btn {
  background: transparent;
  border: 1px solid var(--rm-border);
  border-radius: 6px;
  width: 28px;
  height: 24px;
  font-size: 12px;
  color: var(--rm-text-muted);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.rm-sequence-item__btn:hover { color: var(--rm-deep); border-color: var(--rm-border-strong); }
.rm-sequence-item__btn--remove:hover { color: var(--rm-error); border-color: rgba(155, 59, 59, 0.4); }

/* ============================================================
   Step 3 — Three-panel: page list | preview | chat
   ============================================================ */
.rm-step3-shell {
  display: grid;
  grid-template-columns: 240px 1fr 320px;
  gap: 14px;
  align-items: start;
  min-height: 620px;
}

/* ============================================================
   Step 3 v1.5 — Page tiles + two-column workarea + device toggle
   ============================================================ */
.rm-step3-v {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Page tiles row */
.rm-page-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 4px 0 4px 0;
  margin-bottom: 4px;
}
.rm-tile {
  position: relative;
  background: var(--rm-surface);
  border: 1.5px solid var(--rm-border);
  border-radius: var(--rm-radius-sm);
  padding: 10px 14px 10px 18px;
  cursor: pointer;
  text-align: left;
  font-family: var(--rm-font);
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* v3.21 (item 1) — Tile width unchanged at 180px so the row stays
     orderly. min-height bumped from 92 → 110 so a 2-line subtitle fits
     without clipping, and overflow removed so 3+ lines simply grow the
     tile (the row's flex layout keeps neighbors aligned). */
  width: 180px;
  min-height: 110px;
  flex: 0 0 auto;
  transition: border-color 120ms ease, background 120ms ease, transform 80ms ease;
}
.rm-tile:hover { border-color: var(--rm-border-strong); transform: translateY(-1px); }
.rm-tile--current {
  border-color: var(--rm-deep);
  background: var(--rm-surface-warm);
}
/* v2.2: left-edge stripe encodes status (replaces inside-tile status badge for non-current tiles) */
.rm-tile__stripe {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--rm-border);
  transition: background 200ms ease;
}
.rm-tile--pending    .rm-tile__stripe { background: var(--rm-border); }
.rm-tile--planning   .rm-tile__stripe { background: var(--rm-warn); animation: rm-stripe-pulse 1.4s ease-in-out infinite; }
.rm-tile--planned    .rm-tile__stripe { background: var(--rm-sage); }
.rm-tile--generating .rm-tile__stripe { background: var(--rm-warn); animation: rm-stripe-pulse 1.4s ease-in-out infinite; }
.rm-tile--done       .rm-tile__stripe { background: var(--rm-moss); }
.rm-tile--error      .rm-tile__stripe { background: var(--rm-error); }
@keyframes rm-stripe-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
.rm-tile__num {
  font-family: var(--rm-font-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--rm-moss-dark);
  text-transform: uppercase;
}
.rm-tile__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--rm-deep);
  line-height: 1.25;
}
.rm-tile__subtitle {
  font-size: 11.5px;
  font-style: italic;
  color: var(--rm-text-muted);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 1.3em;
}
/* Status text always renders (v2.6) — every tile shows its state at all times */
.rm-tile__status {
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px solid var(--rm-border);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.rm-tile__status--pending    { color: var(--rm-text-muted); }
.rm-tile__status--planning   { color: var(--rm-warn); }
.rm-tile__status--planned    { color: var(--rm-moss-dark); }
.rm-tile__status--generating { color: var(--rm-warn); }
.rm-tile__status--done       { color: var(--rm-moss); font-weight: 700; }
.rm-tile__status--error      { color: var(--rm-error); font-weight: 700; }
/* Interface tile / Title / Outro are chrome bookmarks — push them back visually (v2.2) */
.rm-tile--interface {
  background: rgba(245, 241, 232, 0.5);
  opacity: 0.92;
}
.rm-tile--interface .rm-tile__title { color: var(--rm-moss-dark); }

/* Work area — two columns, persisted split. Animate split changes (v1.9). */
.rm-step3-workarea {
  display: grid;
  gap: 14px;
  align-items: start;
  min-height: 620px;
  margin-top: 8px;
  transition: grid-template-columns 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.rm-workarea--plan-major    { grid-template-columns: 2fr 1fr; }
.rm-workarea--preview-major { grid-template-columns: 1fr 2fr; }

.rm-workarea__plan,
.rm-workarea__preview {
  background: var(--rm-surface);
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius);
  padding: 12px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 620px;
}

.rm-workarea__col-head {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--rm-border);
  padding-bottom: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.rm-workarea__col-title {
  font-size: 14px;
  color: var(--rm-deep);
  font-family: var(--rm-font);
}
.rm-workarea__col-body {
  flex: 1;
  min-width: 0;
  overflow: auto;
}
.rm-workarea__col-body--centered {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12px 0;
}

/* Device toggle */
.rm-device-toggle {
  display: inline-flex;
  border: 1px solid var(--rm-border);
  border-radius: 999px;
  overflow: hidden;
  background: var(--rm-surface-warm);
}
.rm-device-btn {
  background: transparent;
  border: 0;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--rm-text-muted);
  cursor: pointer;
  font-family: var(--rm-font);
}
.rm-device-btn--on {
  background: var(--rm-deep);
  color: #FFFFFF;
}

/* Preview frame — chrome around the iframe at target device size */
.rm-preview-frame {
  background: #FFFFFF;
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-sm);
  box-shadow: 0 4px 20px rgba(59, 31, 42, 0.10);
  overflow: hidden;
  position: relative;
}
.rm-preview-frame--desktop {
  width: 100%;
  max-width: 1450px;
  aspect-ratio: 1450 / 750;   /* v2.7B item 5 — match the generated-page target */
}
.rm-preview-frame--mobile {
  /* v3.17 (item 2) — Designer asked for the mobile preview to match
     iPhone physical proportions (~80mm × 160mm = 1:2 aspect). Earlier
     390×844 (iPhone 12-14 CSS viewport) felt too tall on screen. New
     dimensions 360×720 preserve the 1:2 aspect and still trigger
     generated pages' @media (max-width: 600px) breakpoint. */
  width: 360px;
  height: 720px;
  border-radius: 32px;
  border: 8px solid #2A2A24;
  background: #2A2A24;
}
.rm-preview-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #FFFFFF;
}
.rm-preview-frame--mobile .rm-preview-iframe {
  border-radius: 24px;
}
.rm-preview-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  color: var(--rm-text-muted);
  text-align: center;
  padding: 30px;
}
.rm-preview-frame--mobile .rm-preview-empty { color: #EFE9D9; }

/* When plan column is minor, hide its textarea height bias so the layout
   stays comfortable on narrow widths. */
.rm-workarea--preview-major .rm-plan-textarea { min-height: 180px; }
.rm-workarea--plan-major    .rm-plan-textarea { min-height: 320px; }

@media (max-width: 1100px) {
  .rm-step3-workarea {
    grid-template-columns: 1fr !important;
  }
  .rm-workarea__plan,
  .rm-workarea__preview {
    min-height: 0;
  }
  .rm-preview-frame--desktop {
    aspect-ratio: auto;
    min-height: 520px;
  }
}

/* ============================================================
   Step 3 — Content Plan card (v1.3)
   ============================================================ */
.rm-plan-card {
  background: var(--rm-surface-warm);
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-sm);
  padding: 12px 14px;
  margin-bottom: 12px;
}
.rm-plan-card__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.rm-plan-card__eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--rm-moss-dark);
}
.rm-plan-card__hint {
  font-size: 12px;
  color: var(--rm-text-muted);
  font-style: italic;
}
.rm-plan-textarea {
  font-family: var(--rm-font-mono);
  font-size: 12.5px;
  line-height: 1.5;
  width: 100%;
  min-height: 240px;
  resize: vertical;
  padding: 10px 12px;
  background: var(--rm-surface);
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-sm);
  color: var(--rm-form-text);
  outline: none;
}
.rm-plan-textarea:focus { border-color: var(--rm-moss); }
.rm-plan-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.rm-plan-saved {
  font-size: 11px;
  color: var(--rm-moss);
  font-style: italic;
}
.rm-plan-empty, .rm-plan-error {
  font-size: 13px;
  color: var(--rm-text-muted);
  padding: 12px 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rm-plan-error { color: var(--rm-error); }

/* ============================================================
   Step 3 — v1.7: interface tile, post-gen hint, plan hint, inline link
   ============================================================ */
.rm-tile--interface {
  background: linear-gradient(135deg, var(--rm-surface) 0%, var(--rm-surface-warm) 100%);
  border-style: dashed;
}
.rm-tile--interface .rm-tile__num {
  font-size: 16px;
  color: var(--rm-deep);
}
.rm-tile--interface .rm-tile__subtitle {
  font-style: italic;
}

.rm-plan-postgen-hint {
  background: rgba(139, 71, 89, 0.08);
  border-left: 3px solid var(--rm-moss);
  border-radius: var(--rm-radius-sm);
  padding: 10px 12px;
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--rm-form-text);
}
.rm-plan-postgen-hint strong { color: var(--rm-deep); }
.rm-plan-postgen-hint em { font-style: italic; color: var(--rm-moss-dark); }

.rm-inline-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--rm-moss);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.rm-inline-link:hover { color: var(--rm-moss-dark); }

.rm-plan-hint {
  font-size: 12px;
  color: var(--rm-text-muted);
  font-style: italic;
  margin-bottom: 8px;
}

/* ============================================================
   v2.1 — choice modal, in-place definition editor
   ============================================================ */

/* Choice modal (rmChoiceModal helper) */
.rm-choice-modal {
  position: fixed;
  inset: 0;
  background: rgba(59, 31, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 24px;
  animation: rm-fade-in 200ms ease;
}
@keyframes rm-fade-in { from { opacity: 0; } to { opacity: 1; } }
.rm-choice-modal__card {
  background: var(--rm-surface);
  border-radius: var(--rm-radius);
  padding: 24px 28px;
  max-width: 560px;
  width: 100%;
  box-shadow: 0 14px 40px rgba(0,0,0,0.25);
  border: 1px solid var(--rm-border);
}
.rm-choice-modal__title {
  margin: 0 0 12px 0;
  font-size: 17px;
  color: var(--rm-deep);
}
.rm-choice-modal__body {
  font-size: 14px;
  color: var(--rm-form-text);
  margin-bottom: 18px;
  line-height: 1.5;
}
.rm-choice-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
.rm-choice-modal__actions .rm-btn {
  text-align: center;
  justify-content: center;
}

/* Step 2 — in-place definition editor */
.rm-def-edit {
  width: 100%;
  font-family: var(--rm-font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: 12.5px;
  line-height: 1.45;
  padding: 10px 12px;
  background: var(--rm-surface-warm);
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-sm);
  color: var(--rm-form-text);
  resize: vertical;
  min-height: 100px;
  max-height: 280px;
  box-sizing: border-box;
}
.rm-def-edit:focus {
  outline: none;
  border-color: var(--rm-deep);
  box-shadow: 0 0 0 3px rgba(59, 31, 42, 0.08);
}
.rm-def-saved {
  font-size: 11px;
  color: var(--rm-moss-dark);
  font-style: italic;
}

/* v3.4 (item 1) — General Design title row: title on the left, saved
   indicator centred-right, primary action button hard right. Replaces the
   previous separate bottom-actions row, recovering one row of vertical
   space. The title h3 has its own margin reset inline; this rule just
   aligns the row's items. */
.rm-gd-titlerow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.rm-gd-titlerow > h3 {
  flex: 1 1 auto;
  min-width: 0; /* allow text to shrink */
}
.rm-gd-titlerow > .rm-def-saved {
  flex: 0 0 auto;
}
.rm-gd-titlerow > .rm-btn {
  flex: 0 0 auto;
  margin-left: auto;
}

/* v2.3 — inline horizontal Tools group (replaces v2.2 dropdown) */
.rm-tools-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 14px;
  margin-left: 10px;
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-sm);
  background: rgba(245, 241, 232, 0.4);
}
.rm-tools-group__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rm-text-muted);
  padding-right: 6px;
  border-right: 1px solid var(--rm-border);
  margin-right: 2px;
}
.rm-tools-group .rm-btn--small {
  padding: 4px 10px;
}

/* Sidebar inline action — Edit page sequence link styled like a workflow item */
.rm-sidebar__action--inline {
  text-decoration: none;
  display: block;
  text-align: left;
  margin: 4px 0 0 0;
  font-size: 12px;
  color: var(--rm-moss-dark);
  padding: 6px 10px;
  border-radius: var(--rm-radius-sm);
  border: 1px dashed var(--rm-border);
  background: transparent;
  transition: background 100ms ease, border-color 100ms ease;
}
.rm-sidebar__action--inline:hover {
  background: var(--rm-surface-warm);
  border-color: var(--rm-border-strong);
}

/* Large spinner for the planning blocker */
.rm-spinner--lg {
  width: 32px;
  height: 32px;
  border-width: 3px;
}

/* Interface-planning blocker: takes over the workarea while iface is planning */
.rm-iface-blocker {
  display: block;
  background: var(--rm-surface);
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius);
  padding: 40px 32px;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rm-iface-blocker__card {
  max-width: 580px;
  text-align: center;
}
.rm-iface-blocker__spinner-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 14px;
}
.rm-iface-blocker__title {
  margin: 0;
  font-size: 22px;
  color: var(--rm-deep);
}
.rm-iface-blocker__lede {
  font-size: 14px;
  color: var(--rm-form-text);
  line-height: 1.55;
  margin: 6px 0 18px 0;
}
.rm-iface-blocker__progress {
  font-size: 13px;
  color: var(--rm-moss-dark);
  font-style: italic;
  margin: 0 0 6px 0;
}
.rm-iface-blocker__hint {
  font-size: 12px;
  color: var(--rm-text-muted);
  margin: 0;
}

/* Locked states while Interface is planning */
.rm-actions-row--locked {
  opacity: 0.55;
  pointer-events: none;
}
.rm-page-tiles--locked {
  opacity: 0.45;
  pointer-events: none;
  filter: grayscale(0.4);
}

/* ============================================================
   v2.4 — Alternatives compare view (three house styles side-by-side)
   ============================================================ */
.rm-iface-style-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--rm-surface-warm);
  color: var(--rm-moss-dark);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: middle;
  border: 1px solid var(--rm-border);
}
.rm-alts-head {
  margin: 0 0 14px 0;
}
.rm-alts-head__title {
  font-size: 18px;
  color: var(--rm-deep);
  margin: 0 0 4px 0;
}
.rm-alts-head__lede {
  font-size: 13px;
  color: var(--rm-text-muted);
  margin: 0;
  line-height: 1.5;
}
.rm-alts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  align-items: stretch;
}
@media (max-width: 980px) {
  .rm-alts-grid { grid-template-columns: 1fr; }
}
.rm-alts-cell {
  margin: 0;
  background: var(--rm-surface);
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 120ms ease, transform 80ms ease;
}
.rm-alts-cell:hover { border-color: var(--rm-deep); transform: translateY(-2px); }
.rm-alts-cell__cap {
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--rm-border);
  background: var(--rm-surface-warm);
}
.rm-alts-cell__style {
  font-weight: 700;
  font-size: 13px;
  color: var(--rm-deep);
}
.rm-alts-cell__badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rm-moss);
  background: rgba(139, 71, 89, 0.12);
  padding: 2px 8px;
  border-radius: 999px;
}
.rm-alts-cell__frame {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #FFFFFF;
  overflow: hidden;
}
.rm-alts-cell__iframe {
  width: 100%; height: 100%;
  border: 0;
  pointer-events: none;
  transform: scale(0.55);
  transform-origin: top left;
  width: calc(100% / 0.55);
  height: calc(100% / 0.55);
}
.rm-alts-cell__empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
  padding: 16px;
  font-size: 12px;
  color: var(--rm-text-muted);
  text-align: center;
  background: var(--rm-surface-warm);
}
.rm-alts-cell__empty p { margin: 0; }
.rm-alts-cell__actions {
  padding: 10px 14px;
  display: flex;
  gap: 8px;
  border-top: 1px solid var(--rm-border);
}
.rm-alts-cell--error { border-color: var(--rm-error); }
.rm-alts-cell--planning .rm-alts-cell__frame,
.rm-alts-cell--generating .rm-alts-cell__frame {
  background: var(--rm-surface-warm);
}

/* Thumbnail grid (Show all pages) */
.rm-thumb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  padding: 4px;
}
.rm-thumb {
  background: var(--rm-surface);
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius);
  margin: 0;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 120ms ease, transform 80ms ease;
}
.rm-thumb:hover { border-color: var(--rm-deep); transform: translateY(-2px); }
.rm-thumb__frame {
  position: relative;
  background: #FFFFFF;
  overflow: hidden;
}
/* v3.16 (item 1) — Device-aware frame aspects. Desktop: landscape 16:10
   (matches generated-page target 1450:750). Mobile: portrait phone with
   bezel (matches the single-page preview's 390:844 with phone-frame
   styling). The bezel + border-radius reuses the same look as the
   single-page mobile preview so designers see consistent device cues. */
.rm-thumb__frame--desktop {
  aspect-ratio: 16 / 10;
}
.rm-thumb__frame--mobile {
  /* v3.17 (item 2) — Match the single-page mobile preview's new 1:2
     aspect (was 390/844). The card height adapts. */
  aspect-ratio: 1 / 2;
  width: 60%;
  margin: 8px auto;
  border-radius: 24px;
  border: 6px solid #2A2A24;
  background: #2A2A24;
}
.rm-thumb__iframe {
  border: 0;
  pointer-events: none;
  display: block;
}
/* Desktop thumb: render at 1450×750 (page's target) and scale down to fit. */
.rm-thumb__iframe--desktop {
  width: 200%;
  height: 200%;
  transform: scale(0.5);
  transform-origin: top left;
}
/* Mobile thumb: render at full 390×844 and scale to fit the card. The
   parent frame is roughly 168px wide × 364px tall at a typical card size,
   so 390 → 168 is ~43% scale. Use 50% as a sensible round number; the
   transform-origin keeps it pinned. */
.rm-thumb__iframe--mobile {
  width: 200%;
  height: 200%;
  transform: scale(0.5);
  transform-origin: top left;
  border-radius: 18px;
}
.rm-thumb__overlay {
  position: absolute;
  inset: 0;
  background: rgba(59, 31, 42, 0);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 10px;
  opacity: 0;
  transition: opacity 150ms ease, background 150ms ease;
}
.rm-thumb:hover .rm-thumb__overlay {
  opacity: 1;
  background: rgba(59, 31, 42, 0.20);
}
.rm-thumb__overlay > button { pointer-events: auto; }
.rm-thumb__empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--rm-text-muted);
  background: var(--rm-surface-warm);
  text-align: center;
  padding: 16px;
}
.rm-thumb__cap {
  padding: 10px 12px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  border-top: 1px solid var(--rm-border);
  background: var(--rm-surface);
}
.rm-thumb__num {
  font-family: var(--rm-font-serif);
  font-size: 11px;
  font-weight: 700;
  color: var(--rm-moss-dark);
  letter-spacing: 0.04em;
}
.rm-thumb__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--rm-deep);
  line-height: 1.3;
  flex: 1;
}
.rm-thumb__type {
  font-size: 11px;
  font-style: italic;
  color: var(--rm-text-muted);
}
/* v3.16 (item 1) — Small device-indicator pill on each thumbnail so the
   designer sees at a glance which device the page was generated for. */
.rm-thumb__dev {
  font-size: 10px;
  color: var(--rm-text-muted);
  font-weight: 500;
  padding: 2px 6px;
  border: 1px solid var(--rm-border);
  border-radius: 999px;
  margin-left: auto;
  white-space: nowrap;
}
.rm-thumb--error .rm-thumb__cap { background: rgba(184, 103, 74, 0.06); }

/* Batch progress strip (Generate all) */
.rm-batch-progress {
  background: var(--rm-surface);
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius);
  padding: 20px 24px;
  min-height: 620px;
}
.rm-batch-progress__title {
  margin: 0 0 4px 0;
  color: var(--rm-deep);
  font-size: 18px;
}
.rm-batch-progress__sub {
  margin: 0 0 6px 0;
  color: var(--rm-text-muted);
  font-size: 13px;
  font-style: italic;
}
.rm-batch-progress__time {
  margin: 0 0 14px 0;
  font-size: 13px;
  color: var(--rm-text);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
}
.rm-batch-progress__time strong { color: var(--rm-deep); }
.rm-batch-progress__bar {
  height: 6px;
  background: var(--rm-surface-warm);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 20px;
}
.rm-batch-progress__bar-fill {
  height: 100%;
  background: var(--rm-moss);
  border-radius: 999px;
  transition: width 400ms ease;
}
.rm-batch-progress__rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rm-batch-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--rm-radius-sm);
  font-size: 13px;
  background: transparent;
  transition: background 150ms ease;
}
.rm-batch-row__mark {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.rm-batch-row--pending    .rm-batch-row__mark { color: var(--rm-text-muted); }
.rm-batch-row--pending    .rm-batch-row__label { color: var(--rm-text-muted); }
.rm-batch-row--inflight   { background: rgba(139, 71, 89, 0.08); }
.rm-batch-row--inflight   .rm-batch-row__mark { color: var(--rm-warn); animation: rm-pulse 1.4s ease-in-out infinite; }
.rm-batch-row--done       .rm-batch-row__mark { color: var(--rm-moss); }
.rm-batch-row--done       .rm-batch-row__label { color: var(--rm-form-text); }
.rm-batch-row--fail       .rm-batch-row__mark { color: var(--rm-error); }
.rm-batch-row--fail       .rm-batch-row__label { color: var(--rm-error); }
@keyframes rm-pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
.rm-step3-list {
  background: var(--rm-surface);
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 720px;
  overflow-y: auto;
  position: sticky;
  top: calc(var(--rm-topbar-h) + 12px);
}
.rm-step3-list__heading {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rm-text-muted);
  margin: 4px 6px 8px 6px;
}
.rm-step3-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--rm-radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
  font-size: 12.5px;
  text-align: left;
  background: transparent;
  width: 100%;
  font-family: var(--rm-font);
  color: var(--rm-text);
}
.rm-step3-list-item:hover { background: var(--rm-bg); }
.rm-step3-list-item--current { background: rgba(59, 31, 42, 0.07); border-color: rgba(59, 31, 42, 0.2); color: var(--rm-deep); font-weight: 600; }
.rm-step3-list-item__num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--rm-bg);
  color: var(--rm-text-muted);
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid var(--rm-border);
}
.rm-step3-list-item--done .rm-step3-list-item__num {
  background: var(--rm-moss);
  color: #FFFFFF;
  border-color: var(--rm-moss);
}
.rm-step3-list-item--current .rm-step3-list-item__num {
  background: var(--rm-deep);
  color: #FFFFFF;
  border-color: var(--rm-deep);
}
.rm-step3-list-item__label {
  flex: 1;
  min-width: 0;
  /* v3.21 (item 1) — Allow page name to wrap to multiple lines rather
     than ellipsis-truncating. Designer asked repeatedly for full names
     to be visible. The tile height grows to fit. */
  white-space: normal;
  line-height: 1.3;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.rm-step3-list-item__status {
  font-size: 10px;
  color: var(--rm-text-muted);
  font-style: italic;
}

.rm-step3-preview {
  background: var(--rm-surface);
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 620px;
}
.rm-step3-preview__toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.rm-step3-preview__iframe-wrap {
  flex: 1;
  background: #FFFFFF;
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-sm);
  overflow: hidden;
  min-height: 540px;
}
.rm-step3-preview__iframe {
  width: 100%;
  height: 100%;
  min-height: 540px;
  border: 0;
  display: block;
}
.rm-step3-preview__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 540px;
  flex-direction: column;
  gap: 12px;
  color: var(--rm-text-muted);
  text-align: center;
  padding: 30px;
}

/* ============================================================
   Generation overlay
   ============================================================ */
.rm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(42, 22, 32, 0.65);
  z-index: 6000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.rm-overlay__card {
  background: var(--rm-surface);
  border-radius: var(--rm-radius);
  padding: 28px 32px;
  max-width: 560px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(42, 22, 32, 0.3);
}
.rm-overlay__title {
  font-family: var(--rm-font-serif);
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 6px 0;
  color: var(--rm-deep);
}
.rm-overlay__phase {
  font-size: 13px;
  color: var(--rm-text-muted);
  margin: 0 0 14px 0;
}
.rm-overlay__bar {
  height: 6px;
  background: var(--rm-border);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 10px;
}
.rm-overlay__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--rm-moss) 0%, var(--rm-sage) 100%);
  width: 0%;
  transition: width 400ms ease;
}
.rm-overlay__hint { font-size: 12px; color: var(--rm-text-muted); margin: 0; font-style: italic; }

/* v3.15 (item 3) — Per-page progress list inside the batch overlay.
   Each row shows a tick + page number + page title. Status flips as
   pages complete: '·' (pending), '●' (in-flight), '✓' green (done),
   '✗' red (failed). Scrollable when the list is long. */
.rm-overlay__pages {
  list-style: none;
  margin: 12px 0 0 0;
  padding: 10px 0 0 0;
  border-top: 1px solid var(--rm-border, #eadfdc);
  max-height: 240px;
  overflow-y: auto;
  font-size: 13px;
  text-align: left;
}
.rm-overlay__page {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  color: var(--rm-text-muted, #888);
  line-height: 1.3;
}
.rm-overlay__page-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  font-weight: 700;
  font-size: 14px;
  color: var(--rm-text-muted, #b8a39a);
}
.rm-overlay__page-num { color: var(--rm-text-muted, #b8a39a); font-variant-numeric: tabular-nums; flex: 0 0 auto; min-width: 24px; }
.rm-overlay__page-title {
  flex: 1 1 auto;
  /* v3.21 (item 1) — Was overflow: hidden; text-overflow: ellipsis;
     white-space: nowrap. Designer wants full page names visible. The
     overlay card max-height + overflow-y is on .rm-overlay__pages, so
     long titles wrapping to 2 lines just consume a bit more list height. */
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.3;
}
.rm-overlay__page--inflight { color: var(--rm-deep, #3b1f2a); font-weight: 500; }
.rm-overlay__page--inflight .rm-overlay__page-tick { color: var(--rm-moss, #8B4759); animation: rm-overlay-pulse 1.2s ease-in-out infinite; }
.rm-overlay__page--done { color: var(--rm-deep, #3b1f2a); }
.rm-overlay__page--done .rm-overlay__page-tick { color: #4A8C3A; }
.rm-overlay__page--failed { color: #C13B2A; }
.rm-overlay__page--failed .rm-overlay__page-tick { color: #C13B2A; }
@keyframes rm-overlay-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}
/* v2.9 (item 8) — optional Cancel button at the bottom of the overlay card.
   Only rendered when an onCancel callback is supplied to rmShowOverlay. */
.rm-overlay__actions {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--rm-border, #eadfdc);
  display: flex;
  justify-content: center;
}
.rm-overlay__actions .rm-btn { min-width: 110px; }
.rm-overlay__time {
  font-size: 13px;
  color: var(--rm-text);
  margin: 0 0 8px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
}
.rm-overlay__time-label {
  font-size: 11px;
  color: var(--rm-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}
.rm-overlay__time-sep {
  color: var(--rm-border-strong);
}
.rm-overlay__time strong { color: var(--rm-deep); }

/* ============================================================
   Loading spinner inline
   ============================================================ */
.rm-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--rm-border);
  border-top-color: var(--rm-moss);
  border-radius: 50%;
  animation: rm-spin 700ms linear infinite;
  vertical-align: middle;
}
@keyframes rm-spin { to { transform: rotate(360deg); } }

/* ============================================================
/* ============================================================
   Utility
   ============================================================ */
.rm-hidden { display: none !important; }
.rm-mt-sm { margin-top: 8px; }
.rm-mt-md { margin-top: 16px; }
.rm-mt-lg { margin-top: 24px; }

.rm-monospace {
  font-family: var(--rm-font-mono);
  font-size: 12.5px;
}

/* ============================================================
   Slide-out chat drawer (Step 2 & Step 3) — handle on right edge
   ============================================================ */
.rm-drawer {
  position: fixed;
  top: var(--rm-topbar-h);
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 90vw;
  background: var(--rm-surface);
  border-left: 1px solid var(--rm-border);
  box-shadow: -8px 0 24px rgba(42, 22, 32, 0.10);
  transform: translateX(100%);
  transition: transform 240ms ease;
  z-index: 200;
  display: flex;
  flex-direction: column;
}
.rm-drawer--open { transform: translateX(0); }

.rm-drawer__handle {
  position: absolute;
  top: 24px;
  left: -34px;
  width: 34px;
  height: 100px;
  background: var(--rm-moss);
  color: #FFFFFF;
  border: 0;
  border-radius: 8px 0 0 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--rm-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  box-shadow: -4px 0 8px rgba(42, 22, 32, 0.08);
  padding: 12px 0;
}
.rm-drawer__handle:hover { background: var(--rm-moss-dark); }
.rm-drawer__handle__badge {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rm-terracotta-bright);
  margin-bottom: 6px;
}

.rm-drawer__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 14px;
  overflow: hidden;
}

/* When drawer pattern is used, the chat host has different positioning
   than the sticky version used in Step 1. */
.rm-drawer .rm-chat-host {
  position: static;
  height: 100%;
  box-shadow: none;
  border: 0;
  padding: 0;
}

/* ============================================================
   Brand fallback chip (Step 1)
   ============================================================ */
.rm-brand-fallback {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  background: rgba(139, 71, 89, 0.08);
  border: 1px solid rgba(139, 71, 89, 0.3);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--rm-moss-dark);
  margin-top: 6px;
}
.rm-brand-fallback img {
  /* v2.8 — v2.7C switched this chip from the dark variant on dark-pill
     backdrop to the LIGHT variant (black artwork on transparent).
     The light artwork sits directly on the cream chip surface; no backdrop
     needed. Respect aspect: 800x242 ~= 3.3:1, so 36-wide at natural ratio
     is ~11px tall. */
  height: 14px;
  width: auto;
  max-width: 50px;
  object-fit: contain;
}
/* v2.15 (item 2) — text-only variant for the "no brand uploaded" hint.
   Drops the image padding compensation since there's no logo image. */
.rm-brand-fallback--empty {
  padding: 4px 12px;
  font-style: italic;
}

/* ============================================================
   Responsive — collapse to single column on narrow viewports
   (overrides earlier section)
   ============================================================ */
@media (max-width: 1100px) {
  .rm-form-shell {
    grid-template-columns: 1fr;
  }
  .rm-chat-host {
    height: 480px;
    position: static;
  }
  .rm-step3-list {
    max-height: 280px;
    position: static;
  }
  .rm-uploads-grid {
    grid-template-columns: 1fr;
  }
  .rm-step2-cols {
    grid-template-columns: 1fr !important;
  }
  .rm-drawer {
    width: 100vw;
    max-width: 100vw;
  }
  .rm-drawer__handle {
    left: -32px;
  }
}

/* ============================================================
   Step 2 — two-column picker + sequence
   ============================================================ */
.rm-step2-cols {
  display: grid;
  /* v2.14 (item 6) — three-column grid: select pages | arrow | your sequence.
     The middle column is narrow and holds a centred right-facing arrow
     that visually connects the two containers. */
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: stretch;
}
.rm-step2-cols__arrow {
  /* v3.12 — Now uses inline SVG (designer-supplied, same shape as the
     down arrows, rotated 90° CCW). Container rule just handles position
     within the grid; svg sizing/rotation in the shared rule above. */
  align-self: start;
  margin-top: 28px;
  line-height: 1;
  color: var(--rm-moss, #4a6b3a);
  opacity: 0.7;
  user-select: none;
  padding: 0 2px;
}
@media (max-width: 900px) {
  .rm-step2-cols {
    grid-template-columns: 1fr;
  }
  .rm-step2-cols__arrow {
    /* On narrow screens, the columns stack vertically — show a down arrow
       instead of a right arrow. The SVG starts pre-rotated -90° (right-
       pointing); resetting to 0° makes it point down again. */
    text-align: center;
    margin: 4px 0;
  }
  .rm-step2-cols__arrow svg {
    transform: rotate(0deg);
  }
}

/* v3.2 (items 4 + 5) — Vertical flow arrow connecting two stacked
   containers. Used between General Design → Select Your Pages (Step 2)
   and between Get Started → Define Your Learning (Step 1). Short, centred,
   moss-tinted. Half the size of the horizontal arrow because the visual
   distance between stacked containers is shorter.
   v3.3 — Default is full-width centred. Two modifiers position the arrow
   at specific horizontal points to align with column boundaries in the
   container ABOVE or columns BELOW. */
.rm-flow-arrow-down {
  /* v3.12 — Switched from Unicode ↓ glyph to inline SVG. Designer supplied
     the exact arrow shape they want (a chunky stem with a wide chevron
     head). Unicode glyphs can't match this look reliably across fonts
     and platforms — SVG renders pixel-identical everywhere.
     The container is block-level for layout positioning (centering via
     text-align, or via padding-left for the --third/--quarter modifiers).
     The SVG inside gets a fixed pixel size to control the visual weight. */
  display: block;
  text-align: center;
  line-height: 1;
  color: var(--rm-moss, #4a6b3a);
  opacity: 0.7;
  user-select: none;
  margin: 4px 0;
  padding: 0;
}
.rm-flow-arrow-down svg,
.rm-step2-cols__arrow svg {
  /* Both arrows share the SAME svg sizing so they're visually identical
     in stem thickness and head size — only the rotation differs. */
  width: 32px;
  height: 32px;
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
}
.rm-step2-cols__arrow svg {
  transform: rotate(-90deg); /* right arrow = down arrow rotated 90° CCW */
}
/* v3.3 (item 1) — At the 1/3 horizontal mark. Used in Step 1 to sit at
   the boundary between Client Branding (card 1) and Content Brief (card 2)
   in the 3-column uploads grid above, flowing down to the Define Your
   Learning container below. */
.rm-flow-arrow-down--third {
  text-align: left;
  padding-left: calc(33.33% - 16px);
}
/* v3.3 (item 2) — At the 1/4 horizontal mark. Used in Step 2 to sit
   centred above the Select Your Pages container (which is the LEFT 1fr
   of a 1fr | auto | 1fr grid, so its centre is approximately at 25% of
   the page width). */
.rm-flow-arrow-down--quarter {
  text-align: left;
  padding-left: calc(25% - 16px);
}
/* On narrow screens both modifiers collapse to centred — the columns
   are stacking anyway so the specific position no longer aligns with
   anything meaningful above. */
@media (max-width: 900px) {
  .rm-flow-arrow-down--third,
  .rm-flow-arrow-down--quarter {
    padding-left: 0;
    text-align: center;
  }
}
.rm-step2-col {
  background: var(--rm-surface);
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius);
  padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(59, 31, 42, 0.04);
}
/* v2.15 (item 1) — Previously this rule set font-family + font-size + weight
   on every h3 in a step2 column. That OVERRODE the .rm-container-title
   class because the descendant selector had higher specificity. Removed
   the typography declarations so .rm-container-title (applied directly on
   the h3) controls font/size. Left only spacing-related rules that don't
   conflict. */
.rm-step2-col h3 {
  margin: 0 0 4px 0;
}
.rm-step2-col__lede { font-size: 13px; color: var(--rm-text-muted); margin: 0 0 14px 0; }

/* Tighter type grid for the narrower picker column */
.rm-step2-col .rm-type-grid {
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 0;
}
.rm-step2-col .rm-type-card {
  padding: 10px 12px 8px 12px;
}
.rm-step2-col .rm-type-card__name { font-size: 13px; }
.rm-step2-col .rm-type-card__desc { font-size: 11px; }

/* ============================================================
   Drag-to-add (Step 2 v1.2)
   ============================================================ */
.rm-type-card--draggable {
  cursor: grab;
  user-select: none;
}
.rm-type-card--draggable:active { cursor: grabbing; }
.rm-type-card.rm-dragging { opacity: 0.5; }

.rm-seq-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.rm-seq-empty {
  list-style: none;
  border: 2px dashed var(--rm-border-strong);
  border-radius: var(--rm-radius-sm);
  padding: 24px 16px;
  text-align: center;
  color: var(--rm-text-muted);
  font-size: 13px;
  font-style: italic;
  background: var(--rm-bg);
}

/* Drag handle */
.rm-sequence-item {
  /* Re-grid to fit handle + num + body + remove */
  grid-template-columns: 22px 28px 1fr 28px;
}
.rm-sequence-item__handle {
  background: transparent;
  border: 1px solid transparent;
  cursor: grab;
  color: var(--rm-text-muted);
  font-size: 14px;
  letter-spacing: -2px;
  font-weight: 700;
  padding: 0;
  width: 22px;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
.rm-sequence-item__handle:hover {
  color: var(--rm-deep);
  background: var(--rm-bg);
}
.rm-sequence-item__handle:active { cursor: grabbing; }

.rm-sequence-item.rm-dragging {
  opacity: 0.4;
}

/* Drop target on the sequence host itself (drop in empty space) */
.rm-step2-col.rm-drop-target {
  outline: 2px dashed var(--rm-moss);
  outline-offset: -8px;
}