/* ============================================================================
   ResponseMate design system: shared components.
   Source of truth: .mdd/design/handoff/design/design-guidelines.dc.html and
   design/components/*.dc.html (v4 bundle). Governed by
   .mdd/docs/00-design-system.md. Everything is prefixed .rm-; since the M8
   teardown this is the only stylesheet layer in the product.
   ========================================================================== */

/* ---- Base ------------------------------------------------------------------
   The [hidden] rule used to come from the Metronic/Bootstrap reboot, which
   deleted in M8. Without it a class that sets `display` (grids, flex rows)
   beats the UA default `[hidden] { display: none }`, so every page that
   toggles the attribute would keep showing the hidden element. The rm layer
   owns the rule now. Pages that need a hidden element to stay in flow use
   visibility, not [hidden]. */

[hidden] { display: none !important; }

/* ---- Page scope ------------------------------------------------------------
   Wrap page content in .rm-page; body.rm-screen (set via theme.addHtmlClass)
   paints the content area in the rm page color. */

body.rm-screen {
  background: var(--rm-page);
}

.rm-page {
  font-family: var(--rm-font-body);
  color: var(--rm-ink);
  font-size: 14px;
  line-height: 1.5;
}
/* Plain links are green. Wrapped in :where() so this base rule has the
   specificity of a single class and any .rm-* link component declared below
   (pills, ctas, tabs) wins without needing a `.rm-page a.x` override. */
.rm-page :where(a) { color: #12855A; text-decoration: none; }
.rm-page :where(a:hover) { color: #0B6E4C; }
/* Anchors styled as buttons or row/card surfaces keep their own colors; the
   green link color above is for inline text links only. */
.rm-page a.rm-btn--primary, .rm-page a.rm-btn--primary:hover,
.rm-page a.rm-btn--ai, .rm-page a.rm-btn--ai:hover,
.rm-page a.rm-btn--danger, .rm-page a.rm-btn--danger:hover,
.rm-page a.rm-btn--hero-ghost, .rm-page a.rm-btn--hero-ghost:hover { color: #fff; }
.rm-page a.rm-btn--secondary, .rm-page a.rm-btn--secondary:hover { color: var(--rm-slate); }
.rm-page a.rm-btn--ghost { color: var(--rm-muted); }
.rm-page a.rm-btn--ghost:hover { color: var(--rm-ink); }
.rm-page a.rm-btn--danger-soft, .rm-page a.rm-btn--danger-soft:hover { color: #D81E46; }
.rm-page a.rm-btn--icon, .rm-page a.rm-btn--icon:hover { color: var(--rm-muted); }
.rm-page a.rm-ql-card, .rm-page a.rm-ql-card:hover,
.rm-page a.rm-ql-row, .rm-page a.rm-ql-row:hover { color: inherit; }
.rm-page [data-lucide], .rm-page svg.lucide { display: inline-block; vertical-align: middle; flex: none; }

.rm-container { max-width: var(--rm-container-max); margin: 0 auto; padding: var(--rm-page-top) var(--rm-container-pad) var(--rm-page-bottom); }
/* Split frame: a page whose hero partial and body live in two containers
   (the questionnaire family) uses --head on the first and --body on the
   second so the gutters add up to a single frame. */
.rm-container--head { padding-bottom: 0; }
.rm-container--body { padding-top: 24px; }

/* ---- Typography roles ------------------------------------------------------ */

.rm-h1 { font-family: var(--rm-font-heading); font-weight: 800; font-size: 42px; letter-spacing: -.025em; color: var(--rm-ink); margin: 0; }
.rm-h2 { font-family: var(--rm-font-heading); font-weight: 800; font-size: 26px; letter-spacing: -.02em; color: var(--rm-ink); margin: 0; }
.rm-card-title { font-family: var(--rm-font-heading); font-weight: 800; font-size: 17px; color: var(--rm-ink); }
.rm-metric { font-family: var(--rm-font-heading); font-weight: 800; font-size: 26px; color: var(--rm-ink); line-height: 1; }
.rm-body { font-family: var(--rm-font-body); font-weight: 500; font-size: 14px; color: var(--rm-slate); }
.rm-label { font-family: var(--rm-font-body); font-weight: 700; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--rm-label); }
.rm-mono { font-family: var(--rm-font-mono); font-weight: 500; font-size: 12px; color: var(--rm-muted); }
.rm-muted-text { color: var(--rm-soft); }

/* ---- Buttons ---------------------------------------------------------------- */

.rm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--rm-font-body); font-weight: 700; font-size: 14px;
  padding: 11px 18px; border-radius: 12px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: filter .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease, border-color .15s ease;
}
.rm-btn:focus-visible { outline: none; box-shadow: var(--rm-focus-ring); }

.rm-btn--primary { background: var(--rm-grad-primary); color: #fff; border: none; padding: 11px 20px; }
.rm-btn--primary:hover { filter: brightness(1.06); box-shadow: 0 12px 26px -8px rgba(11, 138, 99, .5); color: #fff; }

.rm-btn--ai { background: var(--rm-grad-ai); color: #fff; border: none; padding: 11px 20px; }
.rm-btn--ai:hover { filter: brightness(1.06); color: #fff; }

.rm-btn--secondary { background: #fff; color: var(--rm-slate); border-color: var(--rm-border); }
.rm-btn--secondary:hover { background: var(--rm-fill); color: var(--rm-slate); }

.rm-btn--ghost { background: var(--rm-ghost-fill); color: var(--rm-muted); border-color: var(--rm-border); }
.rm-btn--ghost:hover { background: var(--rm-page); color: var(--rm-ink); }

/* Soft danger trigger (opens the confirmation) */
.rm-btn--danger-soft { background: #FEECEF; color: #D81E46; border-color: #FBD5DE; }
.rm-btn--danger-soft:hover { background: #FEECEF; filter: brightness(.98); color: #D81E46; }

/* Solid danger confirm (components/danger-button): the confirming button in
   any removal. Solid #E11D48, trash icon, hover darkens with lifted shadow. */
.rm-btn--danger {
  background: var(--rm-danger); color: #fff; border: none;
  font-size: 13.5px; padding: 10px 16px; border-radius: var(--rm-radius-input);
  box-shadow: 0 1px 2px rgba(225, 29, 72, .2);
}
.rm-btn--danger:hover { background: var(--rm-danger-deep); box-shadow: 0 8px 18px -8px rgba(180, 18, 63, .6); color: #fff; }
.rm-btn--danger:active { transform: translateY(1px); }

.rm-btn--icon { width: 42px; height: 42px; padding: 0; border-radius: 12px; background: #fff; border-color: var(--rm-border); color: var(--rm-muted); }
.rm-btn--icon:hover { background: var(--rm-fill); }

.rm-btn--sm { font-size: 13.5px; padding: 10px 15px; border-radius: var(--rm-radius-input); }
/* Text button (2026-08-21): the quiet tier below --ghost, for an inline
   action that opens something rather than doing it - "Add an alternative
   phrasing", "Add another variant". --sm was the floor of the scale and
   still drew a filled, bordered box for what is really a link with an
   icon. No fill, no border; the hover tint is the affordance. */
.rm-btn--text {
  font-size: 12.5px; font-weight: 700; padding: 5px 8px;
  color: var(--rm-ai-cobalt); background: none; border: 1px solid transparent;
  border-radius: 8px; gap: 5px;
}
.rm-btn--text:hover { background: var(--rm-tone-cobalt-bg); color: var(--rm-ai-cobalt-deep); }
.rm-btn--text[disabled] { opacity: .5; }
.rm-kl-alts--shut { margin-left: -8px; }

/* Glass ghost button on dark heroes (secondary action that changes what the
   page is doing) */
.rm-btn--hero-ghost { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .16); }
.rm-btn--hero-ghost:hover { background: rgba(255, 255, 255, .14); color: #fff; }

/* ---- Forms ------------------------------------------------------------------ */

.rm-field-label { display: block; font-size: 12.5px; font-weight: 700; color: var(--rm-slate); }
.rm-input, .rm-textarea {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--rm-input-border); background: var(--rm-input-bg);
  border-radius: var(--rm-radius-input); padding: 12px 14px;
  font-family: var(--rm-font-body); font-size: 14px; font-weight: 500; color: var(--rm-ink);
  outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.rm-input::placeholder, .rm-textarea::placeholder { color: var(--rm-placeholder); opacity: 1; }
.rm-input:focus, .rm-textarea:focus { border-color: var(--rm-green); box-shadow: var(--rm-focus-ring); }
.rm-input.rm-invalid, .rm-textarea.rm-invalid { border-color: var(--rm-danger); background: #FEF2F4; }

.rm-field-error { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 11.5px; font-weight: 600; color: var(--rm-danger); }

/* Toggle */
/* Switch: geometry derives from --sw-w/--sw-h/--sw-pad so every size keeps
   the knob inside the track (a hard-coded 20px knob in a 21px-high inline
   variant is what pushed the knob out of its track, 2026-08-18). */
.rm-switch { --sw-w: 44px; --sw-h: 26px; --sw-pad: 3px; position: relative; display: inline-block; width: var(--sw-w); height: var(--sw-h); flex: none; }
.rm-switch--sm { --sw-w: 34px; --sw-h: 20px; --sw-pad: 2px; }
.rm-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.rm-switch .rm-switch-track { position: absolute; inset: 0; border-radius: var(--rm-radius-pill); background: #DCE2EC; transition: background .15s ease; pointer-events: none; }
.rm-switch .rm-switch-track::after {
  content: ''; position: absolute; top: var(--sw-pad); left: var(--sw-pad); width: calc(var(--sw-h) - var(--sw-pad) * 2); height: calc(var(--sw-h) - var(--sw-pad) * 2); border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .15s ease;
}
.rm-switch input:checked + .rm-switch-track { background: var(--rm-green); }
.rm-switch input:checked + .rm-switch-track::after { transform: translateX(calc(var(--sw-w) - var(--sw-h))); }
.rm-switch input:focus-visible + .rm-switch-track { box-shadow: var(--rm-focus-ring); }

/* ---- Cards ------------------------------------------------------------------ */

.rm-card {
  background: #fff; border: 1px solid var(--rm-border); border-radius: var(--rm-radius-card);
  box-shadow: var(--rm-shadow-resting); padding: 20px;
}
.rm-card--pad-lg { padding: 22px 24px; }
.rm-card--interactive { transition: transform var(--rm-ease), box-shadow var(--rm-ease), border-color var(--rm-ease); }
.rm-card--interactive:hover { transform: translateY(-3px); box-shadow: var(--rm-shadow-lifted); }

.rm-icon-tile {
  width: 46px; height: 46px; flex: none; border-radius: var(--rm-radius-tile);
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---- Section header (components/section-header) ----------------------------- */

.rm-section-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rm-section-header__title { font-family: var(--rm-font-heading); font-weight: 800; font-size: 17px; color: var(--rm-ink); letter-spacing: -.01em; }
.rm-section-header__subtitle { font-size: 13px; color: var(--rm-soft); margin-top: 3px; line-height: 1.5; }
.rm-section-header__action { flex: none; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--rm-ai-cobalt); cursor: pointer; }
.rm-page .rm-section-header__action { color: var(--rm-ai-cobalt); }

/* ---- Status pill (components/status-pill) ----------------------------------- */

.rm-pill {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: var(--rm-font-body); font-size: 12px; font-weight: 700;
  border-radius: var(--rm-radius-pill); padding: 4px 11px; border: 1px solid transparent; cursor: default;
}
.rm-pill--sm { font-size: 11px; padding: 3px 9px; gap: 5px; }
.rm-pill .rm-pill__dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: currentColor; }
.rm-pill--green   { color: var(--rm-tone-green-fg);   background: var(--rm-tone-green-bg);   border-color: var(--rm-tone-green-bd); }
.rm-pill--amber   { color: var(--rm-tone-amber-fg);   background: var(--rm-tone-amber-bg);   border-color: var(--rm-tone-amber-bd); }
.rm-pill--rose    { color: var(--rm-tone-rose-fg);    background: var(--rm-tone-rose-bg);    border-color: var(--rm-tone-rose-bd); }
.rm-pill--cobalt  { color: var(--rm-tone-cobalt-fg);  background: var(--rm-tone-cobalt-bg);  border-color: var(--rm-tone-cobalt-bd); }
.rm-pill--violet  { color: var(--rm-tone-violet-fg);  background: var(--rm-tone-violet-bg);  border-color: var(--rm-tone-violet-bd); }
.rm-pill--cyan    { color: var(--rm-tone-cyan-fg);    background: var(--rm-tone-cyan-bg);    border-color: var(--rm-tone-cyan-bd); }
.rm-pill--neutral { color: var(--rm-tone-neutral-fg); background: var(--rm-tone-neutral-bg); border-color: var(--rm-tone-neutral-bd); }

/* ---- Expiration chip (components/expiration-chip) ---------------------------- */

.rm-exp-chip {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-family: var(--rm-font-body); font-size: 11.5px; font-weight: 700;
  border-radius: 7px; padding: 3px 8px; border: 1px solid transparent; cursor: default;
}
.rm-exp-chip--expired { color: var(--rm-tone-rose-fg);    background: var(--rm-tone-rose-bg);    border-color: var(--rm-tone-rose-bd); }
.rm-exp-chip--soon    { color: var(--rm-tone-amber-fg);   background: var(--rm-tone-amber-bg);   border-color: var(--rm-tone-amber-bd); }
.rm-exp-chip--valid   { color: var(--rm-tone-neutral-fg); background: var(--rm-tone-neutral-bg); border-color: var(--rm-tone-neutral-bd); }
.rm-exp-chip--none    { color: var(--rm-label);           background: var(--rm-tone-neutral-bg); border-color: var(--rm-tone-neutral-bd); }

/* ---- Usage chip (components/usage-chip): always words, never "7 x" ----------- */

.rm-usage-chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: var(--rm-font-body); font-size: 11.5px; font-weight: 700;
  color: var(--rm-tone-cobalt-fg); background: var(--rm-tone-cobalt-bg); border: 1px solid #C7DBFF;
  border-radius: var(--rm-radius-pill); padding: 4px 10px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.rm-usage-chip[href]:hover, .rm-usage-chip.rm-clickable:hover { color: #12296B; background: #DCE8FF; border-color: #B9D0FF; cursor: pointer; }

/* ---- User avatar (components/user-avatar) ------------------------------------ */

.rm-avatar {
  position: relative; flex: none; border-radius: 50%;
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--rm-font-heading); font-weight: 700; text-decoration: none;
  /* The presence dot carries z-index 2. Without a stacking context here that
     z-index competes in the ANCESTOR's context, so in an overlapping stack
     the dot painted OVER the next avatar and read as that person being
     online (2026-08-21). Isolating keeps every dot inside its own avatar. */
  isolation: isolate;
}
.rm-avatar[href], .rm-avatar[data-rm-user] { cursor: pointer; transition: filter .15s ease, box-shadow .15s ease; }
.rm-avatar[href]:hover, .rm-avatar[data-rm-user]:hover { filter: brightness(1.06); box-shadow: 0 0 0 2px rgba(47, 107, 255, .4); color: #fff; }
/* Picture over initials: the img covers the disc when it loads; a 404 (no
   picture) removes it and the initials underneath show. */
.rm-avatar { overflow: visible; }
.rm-avatar__txt { position: relative; z-index: 0; line-height: 1; }
.rm-avatar__img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; z-index: 1; }
/* A loaded picture owns the whole tile: no gradient or border rim around it
   (the profile page showed the name gradient as a coloured border, 2026-08-19). */
.rm-avatar--haspic { background: transparent !important; border-color: transparent !important; }
.rm-avatar--haspic .rm-avatar__img { inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); }
/* ONE presence dot for the whole site (2026-08-21). Three implementations had
   drifted apart: this one, the topbar's and the combobox fallback's - same
   green, but different sizes, different ring colours and a glow on only one of
   them. They share these declarations now and set only --rm-dot-ring, which is
   the surface the dot sits on, so a dot on the dark hero rings dark instead of
   punching a white hole in it. Size still follows the renderers' max(8, px*.28)
   and the offset their px >= 40 ? 0 : -1px. */
.rm-avatar__dot,
.rm-topbar__avatar-dot,
.rm-combobox__avatar-dot {
  position: absolute; z-index: 2; border-radius: 50%;
  background: var(--rm-dot, #22C55E);
  border: 2px solid var(--rm-dot-ring, #fff);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, .18);
}
.rm-avatar--ring { border: 2px solid #fff; }
/* Square tile variant (account hero): the dot sits on the tile's corner. */
.rm-avatar--tile { border-radius: 14px; }
.rm-avatar--tile .rm-avatar__dot { right: -3px !important; bottom: -3px !important; }

/* Overlapping avatar stacks paint FIRST-ON-TOP. Isolating the avatar stops a
   dot leaking onto its neighbour, but left to source order the next avatar
   would then cover the dot of the one before it - an online person reading as
   offline. Descending z-index keeps every dot clear of the avatar overlapping
   it. Bounded lists (these cap at 3-5 plus a "+N" chip), so nth-child is
   enough and needs no markup change. */
.rm-ql-team .rm-avatar:nth-child(1), .rm-qh__avatars .rm-avatar:nth-child(1), .rm-kl-metastack .rm-avatar:nth-child(1), .rm-ar-person:nth-child(1) { z-index: 8; }
.rm-ql-team .rm-avatar:nth-child(2), .rm-qh__avatars .rm-avatar:nth-child(2), .rm-kl-metastack .rm-avatar:nth-child(2), .rm-ar-person:nth-child(2) { z-index: 7; }
.rm-ql-team .rm-avatar:nth-child(3), .rm-qh__avatars .rm-avatar:nth-child(3), .rm-kl-metastack .rm-avatar:nth-child(3), .rm-ar-person:nth-child(3) { z-index: 6; }
.rm-ql-team .rm-avatar:nth-child(4), .rm-qh__avatars .rm-avatar:nth-child(4), .rm-kl-metastack .rm-avatar:nth-child(4), .rm-ar-person:nth-child(4) { z-index: 5; }
.rm-ql-team .rm-avatar:nth-child(5), .rm-qh__avatars .rm-avatar:nth-child(5), .rm-kl-metastack .rm-avatar:nth-child(5), .rm-ar-person:nth-child(5) { z-index: 4; }
.rm-ql-team .rm-avatar:nth-child(6), .rm-qh__avatars .rm-avatar:nth-child(6), .rm-kl-metastack .rm-avatar:nth-child(6), .rm-ar-person:nth-child(6) { z-index: 3; }
.rm-ql-team .rm-avatar:nth-child(7), .rm-qh__avatars .rm-avatar:nth-child(7), .rm-kl-metastack .rm-avatar:nth-child(7), .rm-ar-person:nth-child(7) { z-index: 2; }
.rm-ql-team .rm-avatar:nth-child(n+8), .rm-qh__avatars .rm-avatar:nth-child(n+8), .rm-kl-metastack .rm-avatar:nth-child(n+8), .rm-ar-person:nth-child(n+8) { z-index: 1; }
/* Approver stack on the AI usage report rows. */
.rm-avatar.rm-ar-person { margin-left: -6px; }

/* ---- Empty state (components/empty-state) ------------------------------------ */

.rm-empty { font-family: var(--rm-font-body); text-align: center; padding: 60px 20px; color: var(--rm-label); }
.rm-empty--compact { padding: 34px 20px; }
.rm-empty__icon { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 15px; display: flex; align-items: center; justify-content: center; }
.rm-empty__icon--search { background: var(--rm-tone-cobalt-bg); color: var(--rm-tone-cobalt-fg); }
.rm-empty__icon--done   { background: var(--rm-tone-green-bg); color: var(--rm-green-deep); }
.rm-empty__icon--empty  { background: var(--rm-fill); color: var(--rm-muted); }
.rm-empty__title { font-family: var(--rm-font-heading); font-weight: 700; font-size: 17px; color: var(--rm-ink); }
.rm-empty__body { font-size: 13.5px; margin-top: 5px; line-height: 1.5; }

/* ---- Module & tag chips ------------------------------------------------------- */

.rm-module-chip {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700;
  padding: 6px 12px; border-radius: var(--rm-radius-pill);
  background: rgba(106, 69, 224, .10); border: 1px solid rgba(106, 69, 224, .30); color: var(--rm-module);
}
.rm-module-chip--addable { background: var(--rm-ghost-fill); border: 1px dashed #DDE3EC; color: var(--rm-muted); font-weight: 600; font-size: 12px; padding: 5px 11px; cursor: pointer; }
.rm-module-chip__x { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; opacity: .55; cursor: pointer; }
.rm-module-chip__x:hover { opacity: 1; background: rgba(14, 21, 37, .10); }

.rm-tag-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: var(--rm-radius-pill); background: var(--rm-fill); border: 1px solid #E1E7F0; color: #3A4453; white-space: nowrap; }
.rm-tag-chip--excluded { background: #FDF0F2; border-color: #F6D2D9; color: #B23A54; text-decoration: line-through; }
.rm-tag-chip--off { background: #F8FAFD; border-color: #E4E9F1; color: var(--rm-placeholder); }
/* Size variants mirror .rm-module-chip--sm / --xs so tags and modules shown
   side by side (knowledge cards and rows, questionnaire card tag panel) sit
   on one baseline at one size (2026-08-19; tags used to render a step
   larger than the module chips next to them). */
.rm-tag-chip--sm { font-size: 11px; gap: 4px; padding: 3px 9px; }
.rm-tag-chip--xs { font-size: 10.5px; gap: 3px; padding: 2px 8px; }

/* ---- Hero banner --------------------------------------------------------------
   Recipe from design-guidelines.dc.html "Hero banner". Gradient + border fixed;
   meta chips, progress widget and tabs are optional. */

.rm-hero {
  background: var(--rm-hero-gradient);
  border: 1px solid var(--rm-hero-border);
  border-radius: var(--rm-radius-hero);
  overflow: hidden; position: relative;
  box-shadow: var(--rm-shadow-resting);
  color: #fff;
}
.rm-hero__glow { position: absolute; right: -40px; top: -60px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(70, 210, 150, .3), transparent 70%); pointer-events: none; }
.rm-hero__body { padding: 26px 28px 22px; position: relative; }
.rm-hero__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.rm-hero__lead { display: flex; gap: 16px; min-width: 0; }
.rm-hero__tile {
  width: 50px; height: 50px; flex: none; border-radius: 14px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18);
  display: flex; align-items: center; justify-content: center;
}
.rm-hero__back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .58); transition: color .15s ease; }
.rm-page .rm-hero__back { color: rgba(255, 255, 255, .58); }
.rm-page .rm-hero__back:hover { color: #fff; }
.rm-hero__title { margin: 0; font-family: var(--rm-font-heading); font-weight: 800; font-size: 26px; letter-spacing: -.02em; color: #fff; }
.rm-hero__subtitle { margin: 6px 0 0; font-size: 14px; color: rgba(255, 255, 255, .7); max-width: 560px; }
.rm-hero__context { display: flex; align-items: center; gap: 8px; margin-top: 9px; font-size: 13.5px; color: rgba(255, 255, 255, .7); font-weight: 500; }
.rm-hero__context .rm-hero__context-strong { font-weight: 600; color: #fff; }
.rm-hero__context [data-lucide] { color: rgba(255, 255, 255, .6); }
.rm-hero__actions { display: flex; align-items: center; gap: 10px; flex: none; }
.rm-hero__action-note { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .5); }
.rm-hero__action-note--pill {
  display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: #F7CE8A;
  background: rgba(224, 161, 30, .16); border: 1px solid rgba(224, 161, 30, .3);
  border-radius: 999px; padding: 8px 13px;
}

/* Meta chips: glass fill for read-only info; anything clickable becomes a light
   filled tile with an arrow (info versus action rule). */
.rm-hero__meta { display: flex; align-items: center; gap: 16px; margin-top: 22px; flex-wrap: wrap; }
.rm-hero__chip {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 14px; padding: 12px 16px;
}
.rm-hero__chip-icon { width: 38px; height: 38px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.rm-hero__chip-value { font-family: var(--rm-font-heading); font-weight: 700; font-size: 15px; color: #fff; }
.rm-hero__chip-label { font-size: 12px; color: rgba(255, 255, 255, .55); }
/* A chip that links somewhere is the same glass as every other hero tile (the
   dashboard's stat tiles, the knowledge hero's tiles), not a white card: only
   the arrow and the hover say it is clickable (owner, 2026-09-08). */
.rm-hero__chip--action { cursor: pointer; text-decoration: none; transition: background .16s ease; }
.rm-hero__chip--action:hover { background: rgba(255, 255, 255, .1); }
.rm-hero__chip--action .rm-hero__chip-arrow { color: rgba(255, 255, 255, .6); }

/* Progress ring card */
.rm-hero__ring-card {
  margin-left: auto; flex: none; width: 300px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 16px; padding: 14px 18px; display: flex; align-items: center; gap: 16px;
}
.rm-ring { position: relative; width: 64px; height: 64px; flex: none; }
.rm-ring svg { transform: rotate(-90deg); display: block; }
.rm-ring circle { fill: none; stroke-width: 8; }
.rm-ring__track { stroke: rgba(255, 255, 255, .16); }
.rm-ring__done { stroke: var(--rm-green); stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.rm-ring__progress { stroke: #A7E8CE; stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.rm-ring__hub {
  position: absolute; inset: 8px; border-radius: 50%; background: var(--rm-hero-hub);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--rm-font-heading); font-weight: 800; font-size: 16px; color: var(--rm-mint);
}

/* Tab strip on a full-width top border */
.rm-hero__tabs { display: flex; gap: 26px; padding: 0 28px; border-top: 1px solid rgba(255, 255, 255, .1); position: relative; }
.rm-hero__tab--right { margin-left: auto; }
.rm-hero__tab { padding: 15px 2px; font-size: 14.5px; font-weight: 600; color: rgba(255, 255, 255, .6); border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; text-decoration: none; }
.rm-page .rm-hero__tab { color: rgba(255, 255, 255, .6); }
.rm-page .rm-hero__tab:hover { color: rgba(255, 255, 255, .85); }
.rm-hero__tab--active, .rm-page .rm-hero__tab--active { color: #fff; font-weight: 700; border-bottom-color: var(--rm-green); }
/* One count pill for every hero tab (design: 11px/700, white on rgba(255,255,255,.16), 1px 7px, no border) — the questionnaire header's .rm-qh__tab-count is the same rule. */
.rm-hero__tab-count, .rm-qh__tab-count { display: inline-flex; align-items: center; justify-content: center; padding: 1px 7px; border-radius: var(--rm-radius-pill); background: rgba(255, 255, 255, .16); border: 0; font-size: 11px; font-weight: 700; line-height: 1.5; color: #fff; }

/* ---- Rich-text formatting bar (js/custom/richTextField.js) --------------------
   ONE fixed bar on <body> for every contenteditable answer field (question
   cells, Q&A editor, Save-to-Q&A modal): white pill, Lucide icons on rm
   tokens, below the field's bottom-left corner (the question cell's hover
   toolbar is top-right), above when there is no room (2026-08-19). */
.rm-fmtbar {
  position: fixed; left: 0; top: 0; z-index: var(--rm-z-fmtbar);
  display: inline-flex; align-items: center; gap: 2px; padding: 4px 5px;
  background: #fff; border: 1px solid var(--rm-border); border-radius: 11px;
  box-shadow: 0 12px 26px -10px rgba(14, 21, 37, .35);
}
.rm-fmtbar[hidden] { display: none; }
.rm-fmtbar__btn {
  width: 28px; height: 28px; border: none; border-radius: 8px; background: transparent;
  color: var(--rm-muted); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; font: inherit; transition: background .13s ease, color .13s ease;
}
.rm-fmtbar__btn:hover { background: var(--rm-fill); color: var(--rm-ai-cobalt); }
.rm-fmtbar__btn:focus-visible { outline: none; box-shadow: var(--rm-focus-ring); }
.rm-fmtbar__sep { width: 1px; height: 18px; background: var(--rm-border); margin: 0 3px; flex: none; }
/* Editable content: lists and paragraphs inside a contenteditable field */
.rtf-editable ul, .rtf-editable ol { margin: 0 0 0 1.1rem; padding-left: .4rem; }
.rtf-editable p { margin: 0 0 .35rem; }
.rtf-editable p:last-child { margin-bottom: 0; }

/* ---- Tooltips: dark bubble, above, wrapping ----------------------------------- */
/* Rendered by rm.js into ONE fixed layer (.rm-tip) appended to <body>, so no
   overflow:hidden card, table row, scroll container or modal body can clip
   it (the old CSS pseudo-element tooltip was clipped everywhere,
   2026-08-18). Positioned above the target, flips below near the top edge,
   clamped to the viewport; hover and keyboard focus both open it.
   The positioning hook is wrapped in :where() (zero specificity) so any
   positioned component that also carries a tip (the account hero's
   presence dot, 2026-08-19) keeps its own position; the old bare
   attribute rule came later in the file and beat .rm-avatar__dot. */
:where([data-rm-tip]) { position: relative; }
.rm-tip {
  position: fixed; left: 0; top: 0;
  background: var(--rm-ink); color: #fff;
  font-family: var(--rm-font-body); font-size: 11.5px; font-weight: 600;
  white-space: normal; width: max-content; max-width: 240px; text-align: center; line-height: 1.4;
  padding: 5px 9px; border-radius: 7px;
  pointer-events: none; z-index: var(--rm-z-tip);
  opacity: 0; transform: translateY(4px);
  transition: opacity .14s ease, transform .14s ease;
}
.rm-tip--on { opacity: 1; transform: translateY(0); }
.rm-tip--below { transform: translateY(-4px); }
.rm-tip--below.rm-tip--on { transform: translateY(0); }

/* Rich tooltip ([data-rm-tip-html], 2026-08-21): a left-aligned breakdown
   rather than one centred sentence. Used by the answer-confidence badge to
   show the four subscores, each tinted by its own level so the weak factor is
   the one that catches the eye. */
.rm-tip--rich { text-align: left; max-width: 300px; padding: 9px 11px; }
.rm-tipc__head { display: flex; align-items: baseline; gap: 8px; font-size: 12px; font-weight: 800; margin-bottom: 7px; }
.rm-tipc__score { margin-left: auto; font-variant-numeric: tabular-nums; opacity: .85; }
.rm-tipc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.rm-tipc__row { display: grid; grid-template-columns: 15px 1fr auto; align-items: center; column-gap: 7px; }
.rm-tipc__ic { display: inline-flex; align-items: center; justify-content: center; }
.rm-tipc__name { font-weight: 700; }
.rm-tipc__val { font-variant-numeric: tabular-nums; font-weight: 800; }
.rm-tipc__why { grid-column: 2 / -1; font-weight: 500; font-size: 10.5px; opacity: .6; line-height: 1.3; }
.rm-tipc__note { margin-top: 7px; font-weight: 500; opacity: .82; line-height: 1.35; }
.rm-tipc__note--warn { opacity: 1; color: #F2909F; font-weight: 700; }

/* ---- Modals --------------------------------------------------------------------
   Layering: primary 250-290, modal-from-modal 420-460 (lighter scrim so the
   parent still reads behind it), confirmations 520-560 (always topmost). */

.rm-modal-overlay {
  position: fixed; inset: 0; z-index: var(--rm-z-modal);
  background: rgba(10, 20, 35, .55); backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 110px 20px 40px; overflow-y: auto;
  font-family: var(--rm-font-body);
  animation: rmFade .2s ease both;
}
.rm-modal-overlay--stacked { z-index: var(--rm-z-modal-2); background: rgba(10, 20, 35, .4); }
.rm-modal-overlay--confirm { z-index: var(--rm-z-confirm); }
.rm-modal-overlay[hidden] { display: none; }

.rm-modal {
  width: 100%; max-width: 440px; background: #fff; border-radius: var(--rm-radius-hero);
  box-shadow: 0 40px 90px -30px rgba(10, 20, 35, .6);
  animation: rmModalIn .28s cubic-bezier(.2, .9, .3, 1.1) both;
  /* Fits the viewport (2026-08-19): a flex column capped at the overlay's
     inner height (100vh minus its 110px top + 40px bottom padding). The
     head never scrolls; the body is the ONE scroll region and uses all the
     room there is. Before, bodies capped themselves at 56-66vh and grew a
     scrollbar while screen space was still free, hiding footers and drop
     zones under it. */
  display: flex; flex-direction: column; max-height: calc(100vh - 150px);
}
.rm-modal-head { flex: none; }
.rm-modal-body, .rm-qq-modal__body, .rm-qf-modal__body, .rm-kl-cu__body, .rm-cl-cmprows, .rm-al-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
@keyframes rmFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rmModalIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* Confirm modal (components/confirm-modal) */
.rm-confirm__head { padding: 22px 22px 8px; display: flex; gap: 14px; }
.rm-confirm__icon { width: 44px; height: 44px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.rm-confirm__icon--remove          { background: #FEECEF; color: #D81E46; }
.rm-confirm__icon--edit            { background: #FEF9C3; color: #A16207; }
.rm-confirm__icon--ai              { background: var(--rm-tone-violet-bg); color: var(--rm-tone-violet-fg); }
.rm-confirm__icon--exclude         { background: var(--rm-fill); color: var(--rm-muted); }
.rm-confirm__icon--exclude-answer  { background: var(--rm-fill); color: var(--rm-muted); }
.rm-confirm__icon--keep            { background: var(--rm-tone-green-bg); color: var(--rm-green-deep); }
.rm-confirm__icon--generic         { background: #FDF3E7; color: #B7791F; }
.rm-confirm__title { font-family: var(--rm-font-heading); font-weight: 700; font-size: 17px; color: var(--rm-ink); line-height: 1.3; }
.rm-confirm__body { font-size: 13.5px; color: var(--rm-muted); line-height: 1.5; margin-top: 5px; }
.rm-confirm__warn {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 12px;
  background: #FDF8EC; border: 1px solid #F3DFAE; border-radius: 10px; padding: 10px 12px;
  font-size: 12.5px; font-weight: 600; color: var(--rm-tone-amber-fg); line-height: 1.5;
}
.rm-confirm__footer { display: flex; justify-content: flex-end; gap: 9px; padding: 16px 22px 20px; }
.rm-confirm__cancel { background: var(--rm-ghost-fill); color: var(--rm-muted); border: 1px solid var(--rm-border); font-family: var(--rm-font-body); font-weight: 700; font-size: 13.5px; padding: 10px 15px; border-radius: var(--rm-radius-input); cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.rm-confirm__cancel:hover { background: #EDF1F8; border-color: #CBD5E3; color: var(--rm-ink); }
.rm-confirm__go { display: inline-flex; align-items: center; gap: 7px; color: #fff; border: none; font-family: var(--rm-font-body); font-weight: 700; font-size: 13.5px; padding: 10px 16px; border-radius: var(--rm-radius-input); cursor: pointer; transition: filter .15s ease; }
.rm-confirm__go:hover { filter: brightness(1.06); }
.rm-confirm__go--ai     { background: var(--rm-grad-ai-violet); }
.rm-confirm__go--edit   { background: linear-gradient(120deg, #EAB308, #CA8A04); }
.rm-confirm__go--safe   { background: var(--rm-grad-ai); }

/* User modal (user-modal.js shell) */
.rm-user-modal { max-width: 460px; border-radius: 18px; }
.rm-user-modal__head { display: flex; align-items: center; gap: 13px; padding: 18px 20px; border-bottom: 1px solid var(--rm-tone-neutral-bd); }
.rm-user-modal__name { font-family: var(--rm-font-heading); font-weight: 800; font-size: 17px; color: var(--rm-ink); }
.rm-user-modal__meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--rm-soft); }
.rm-user-modal__close { width: 32px; height: 32px; flex: none; border-radius: 9px; background: var(--rm-ghost-fill); border: 1px solid var(--rm-border); display: flex; align-items: center; justify-content: center; color: var(--rm-muted); cursor: pointer; transition: .15s ease; }
.rm-user-modal__close:hover { background: #EDF0F5; border-color: #D3DAE6; color: var(--rm-ink); }
.rm-user-modal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; border: 1px solid var(--rm-tone-neutral-bd); background: #FAFBFE; border-radius: 12px; padding: 14px 16px; margin: 15px 20px 4px; }
.rm-user-modal__field-label { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--rm-label); }
.rm-user-modal__field-value { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--rm-ink); min-width: 0; }
.rm-user-modal__field-value > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-user-modal__footer { display: flex; justify-content: flex-end; padding: 14px 20px 18px; }

/* ---- Bulk action bar (components/bulk-bar) ------------------------------------ */

.rm-bulk-bar {
  display: flex; align-items: flex-start; gap: 12px; padding: 11px 16px;
  background: linear-gradient(120deg, #0B1B2B, #164E38);
  border-radius: var(--rm-radius-tile); box-shadow: 0 12px 28px -16px rgba(11, 40, 30, .7);
  flex-wrap: wrap; font-family: var(--rm-font-body);
}
.rm-bulk-bar__count { display: inline-flex; align-items: center; gap: 9px; height: 33px; flex: none; color: #fff; font-weight: 700; font-size: 14px; }
.rm-bulk-bar__count-num { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 7px; background: rgba(255, 255, 255, .16); display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; }
.rm-bulk-bar__divider { width: 1px; height: 22px; margin-top: 6px; flex: none; background: rgba(255, 255, 255, .18); }
.rm-bulk-bar__actions { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rm-bulk-bar__action {
  display: inline-flex; align-items: center; gap: 7px; color: #fff; font-weight: 700; font-size: 13px;
  padding: 8px 13px; border-radius: 9px; cursor: pointer; border: none;
  background: rgba(255, 255, 255, .12);
  transition: background .14s ease, filter .14s ease;
}
.rm-bulk-bar__action:hover { background: rgba(255, 255, 255, .24); }
.rm-bulk-bar__action--green { background: var(--rm-green); }
.rm-bulk-bar__action--green:hover { background: var(--rm-green); filter: brightness(1.1); }
.rm-bulk-bar__action--ai { background: var(--rm-grad-ai-violet); }
.rm-bulk-bar__action--ai:hover { background: var(--rm-grad-ai-violet); filter: brightness(1.1); }
.rm-bulk-bar__action--danger { background: rgba(244, 86, 107, .9); }
.rm-bulk-bar__action--danger:hover { background: rgba(244, 86, 107, 1); }
.rm-bulk-bar__clear { flex: none; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .85); font-weight: 600; font-size: 13px; padding: 7px 11px; border-radius: 9px; cursor: pointer; border: none; background: transparent; transition: background .14s ease, color .14s ease; }
.rm-bulk-bar__clear:hover { background: rgba(255, 255, 255, .16); color: #fff; }

/* ---- Combobox select (components/combobox-select) ------------------------------ */

.rm-combobox { position: relative; font-family: var(--rm-font-body); }
.rm-combobox__trigger {
  width: 100%; box-sizing: border-box; border: 1.5px solid #E4E9F1; border-radius: var(--rm-radius-input);
  padding: 12px 14px; font-size: 14px; color: var(--rm-ink); background: #fff;
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.rm-combobox__trigger--multi { padding: 6px 8px; flex-wrap: wrap; gap: 6px; min-height: 46px; }
.rm-combobox--open .rm-combobox__trigger { border-color: var(--rm-ai-cobalt); }
.rm-combobox--invalid:not(.rm-combobox--open) .rm-combobox__trigger { border-color: var(--rm-danger); background: #FEF2F4; box-shadow: 0 0 0 3px rgba(225, 29, 72, .11); }
.rm-combobox__value { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-combobox__value--placeholder { color: var(--rm-placeholder); }
.rm-combobox__chevron { flex: none; color: var(--rm-label); transition: transform .2s ease; margin-left: auto; }
.rm-combobox--open .rm-combobox__chevron { transform: rotate(180deg); }
/* Open list: position:fixed, placed by rm-combobox.js from the trigger rect
   (never clipped by a scrolling modal body); flips above when needed. */
.rm-combobox__backdrop { position: fixed; inset: 0; z-index: 640; }
.rm-combobox__list {
  position: fixed; z-index: 641;
  background: #fff; border: 1px solid var(--rm-border); border-radius: var(--rm-radius-input);
  box-shadow: 0 16px 34px -14px rgba(14, 21, 37, .4); padding: 5px; max-height: 420px; overflow: auto;
}
.rm-combobox--inline .rm-combobox__list { position: static; margin-top: 8px; box-shadow: none; max-height: 300px; }
.rm-combobox__search { display: flex; align-items: center; gap: 8px; background: var(--rm-ghost-fill); border: 1px solid var(--rm-tone-neutral-bd); border-radius: 9px; padding: 0 10px; height: 36px; margin: 2px 2px 6px; color: var(--rm-label); }
.rm-combobox__search input { flex: 1; border: none; outline: none; background: transparent; font-family: inherit; font-size: 13px; color: var(--rm-ink); }
.rm-combobox__search input::placeholder { color: var(--rm-placeholder); opacity: 1; }
.rm-combobox__heading { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--rm-placeholder); padding: 6px 10px 5px; }
.rm-combobox__row { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--rm-radius-chip); font-size: 13.5px; font-weight: 600; color: var(--rm-ink); cursor: pointer; }
.rm-combobox__row:hover, .rm-combobox__row--hi { background: #F4FBF8; }
.rm-combobox__row-label { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rm-combobox__row-label > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-combobox__row-sub { font-size: 11.5px; font-weight: 500; color: var(--rm-soft); }
.rm-combobox__row-check { flex: none; color: var(--rm-ai-cobalt); }
.rm-combobox__mono { width: 22px; height: 22px; flex: none; border-radius: 6px; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--rm-font-heading); font-weight: 800; font-size: 11px; }
.rm-combobox__avatar { position: relative; width: 26px; height: 26px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 11px; }
.rm-combobox__avatar-dot { right: -1px; bottom: -1px; width: 8px; height: 8px; }
.rm-combobox__empty { padding: 10px; font-size: 12.5px; color: var(--rm-label); }
.rm-combobox__footer { display: flex; align-items: center; gap: 9px; margin-top: 5px; border-top: 1px solid var(--rm-tone-neutral-bd); padding: 9px 10px 6px; border-radius: var(--rm-radius-chip); cursor: pointer; color: var(--rm-ai-cobalt); font-size: 13px; font-weight: 700; }
.rm-combobox__footer:hover { background: #EEF3FF; }
.rm-combobox__chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 5px 6px 5px 11px; border-radius: var(--rm-radius-pill); white-space: nowrap; }
.rm-combobox__chip-x { width: 17px; height: 17px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: .55; }
.rm-combobox__chip-x:hover { opacity: 1; background: rgba(14, 21, 37, .10); }

/* Collaborator picker (components/collab-picker) */
.rm-collab { display: flex; flex-direction: column; gap: 8px; font-family: var(--rm-font-body); }
.rm-collab__label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--rm-label); }
.rm-collab__row { display: flex; align-items: center; gap: 12px; background: var(--rm-ghost-fill); border: 1px solid var(--rm-border); border-radius: var(--rm-radius-input); padding: 9px 12px; }
.rm-collab__row-name { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--rm-ink); }
.rm-collab__owner-pill { flex: none; font-size: 11px; font-weight: 700; color: var(--rm-muted); background: var(--rm-fill); border: 1px solid var(--rm-border); border-radius: var(--rm-radius-pill); padding: 4px 10px; cursor: default; }
.rm-collab__remove { width: 30px; height: 30px; flex: none; border-radius: var(--rm-radius-chip); background: #fff; border: 1px solid var(--rm-border); display: flex; align-items: center; justify-content: center; color: var(--rm-danger); cursor: pointer; transition: background .14s ease, border-color .14s ease; }
.rm-collab__remove:hover { background: #FFF1F3; border-color: #F5B9C6; }
.rm-collab__empty { font-size: 13px; color: var(--rm-soft); font-style: italic; padding: 2px 0 4px; }
.rm-collab__none-addable { text-align: center; padding: 16px; color: var(--rm-soft); font-size: 13px; background: var(--rm-ghost-fill); border: 1px dashed #DDE3EC; border-radius: var(--rm-radius-input); }

/* ---- News page (pilot screen, news.dc.html) ------------------------------------ */

.rm-news-container { max-width: var(--rm-container-max); margin: 0 auto; padding: var(--rm-page-top) var(--rm-container-pad) var(--rm-page-bottom); }
.rm-news-list { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.rm-news-card {
  background: #fff; border: 1px solid var(--rm-border); border-radius: var(--rm-radius-card);
  padding: 20px 22px; box-shadow: var(--rm-shadow-resting);
  display: flex; gap: 16px; align-items: flex-start;
  transition: border-color var(--rm-ease), box-shadow var(--rm-ease), transform var(--rm-ease);
}
.rm-news-card:hover { border-color: #CBD9F5; box-shadow: 0 16px 34px -22px rgba(20, 40, 80, .34); transform: translateY(-2px); }
.rm-news-card__icon { width: 44px; height: 44px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.rm-news-card__main { min-width: 0; flex: 1; }
.rm-news-card__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rm-news-card__tag { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; border-radius: var(--rm-radius-pill); padding: 2px 9px; }
.rm-news-card__date { font-size: 12px; color: var(--rm-label); }
.rm-news-card__title { font-family: var(--rm-font-heading); font-weight: 800; font-size: 17px; color: var(--rm-ink); margin-top: 10px; }
.rm-news-card__desc { font-size: 13.5px; color: var(--rm-muted); line-height: 1.55; margin-top: 5px; }
/* A pinned notice (2026-09-08): the hero's dark ground, so it reads as the
   one to know about, with a Pinned pill; the accent tile stays. */
.rm-news-card--pinned { background: var(--rm-hero-gradient); border-color: rgba(255, 255, 255, .14); }
.rm-news-card--pinned:hover { border-color: rgba(255, 255, 255, .3); }
.rm-news-card--pinned .rm-news-card__title { color: #fff; font-size: 19px; }
.rm-news-card--pinned .rm-news-card__desc { color: rgba(255, 255, 255, .78); }
.rm-news-card--pinned .rm-news-card__date { color: rgba(255, 255, 255, .55); }
.rm-news-card__pin { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #FFD166; background: rgba(255, 209, 102, .16); border-radius: var(--rm-radius-pill); padding: 2px 9px; }
/* AI entries wear the violet accent; everything else cobalt-blue */
.rm-news-card--ai .rm-news-card__icon, .rm-news-card--ai .rm-news-card__tag { background: #F1ECFF; color: var(--rm-module); }
.rm-news-card--std .rm-news-card__icon, .rm-news-card--std .rm-news-card__tag { background: var(--rm-tone-cobalt-bg); color: var(--rm-tone-cobalt-fg); }
/* What's new page since 2026-09-03 (11-news-notices): the latest updates
   capped with a fold-out, then the feature catalogue by area. */
.rm-news-section { margin-top: 26px; scroll-margin-top: calc(var(--rm-topbar-h) + 16px); }
.rm-news-section + .rm-news-section { margin-top: 40px; }
.rm-news-section .rm-news-list { margin-top: 16px; }
.rm-news-more { margin-top: 14px; }
.rm-news-more[hidden] { display: none; }
.rm-news-toggle { margin-top: 16px; }
.rm-news-toggle svg { transition: transform var(--rm-ease); }
.rm-news-toggle--open svg { transform: rotate(180deg); }
/* Flowing columns rather than a grid: groups differ a lot in length (three
   features vs nine), and a grid row would leave a hole under the short one. */
.rm-feat-groups { columns: 2; column-gap: 16px; margin-top: 18px; }
@media (max-width: 900px) { .rm-feat-groups { columns: 1; } }
.rm-feat-group { padding: 18px 20px 10px; break-inside: avoid; margin-bottom: 16px; display: block; }
.rm-feat-group__head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--rm-border); }
.rm-feat-group__icon { width: 38px; height: 38px; flex: none; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--rm-tone-cobalt-bg); color: var(--rm-tone-cobalt-fg); }
.rm-feat-group--ai .rm-feat-group__icon { background: #F1ECFF; color: var(--rm-module); }
.rm-feat-group__title { font-family: var(--rm-font-heading); font-weight: 800; font-size: 16px; color: var(--rm-ink); }
.rm-feat-group__sub { font-size: 12.5px; color: var(--rm-soft); margin-top: 2px; }
.rm-feat-list { list-style: none; margin: 0; padding: 0; }
.rm-feat { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rm-border); color: inherit; text-decoration: none; }
.rm-feat-list > li:last-child .rm-feat { border-bottom: 0; }
/* Rows unfold in place (2026-09-08): the row is a button, the chevron turns,
   and the detail sits under it with the way to the feature at its foot. */
.rm-feat[role="button"] { cursor: pointer; }
.rm-feat[role="button"]:hover .rm-feat__title, .rm-feat--open .rm-feat__title { color: var(--rm-ai-cobalt); }
.rm-feat[role="button"]:hover .rm-feat__arrow, .rm-feat--open .rm-feat__arrow { color: var(--rm-ai-cobalt); }
.rm-feat--open .rm-feat__arrow { transform: rotate(180deg); }
.rm-feat--open { border-bottom-color: transparent; }
.rm-feat:focus-visible { outline: 2px solid var(--rm-ai-cobalt); outline-offset: 2px; border-radius: 8px; }
.rm-feat__detail { margin: 0 0 12px 42px; padding: 12px 14px 14px; background: var(--rm-fill); border-radius: 12px; border-bottom: 0; }
.rm-feat__detail[hidden] { display: none; }
.rm-feat-list > li:not(:last-child) .rm-feat__detail { margin-bottom: 12px; }
.rm-feat__text { margin: 0; font-size: 13px; line-height: 1.6; color: var(--rm-ink); }
.rm-feat__example { margin-top: 10px; padding: 8px 12px; border-left: 3px solid #C9B8FF; background: #fff; border-radius: 8px; font-size: 12.5px; line-height: 1.55; color: var(--rm-muted); }
.rm-feat__example-k { font-weight: 700; color: var(--rm-module); margin-right: 4px; }
.rm-feat__image { display: block; width: 100%; margin-top: 12px; border-radius: 10px; border: 1px solid var(--rm-border); }
.rm-feat__foot { margin-top: 12px; display: flex; align-items: center; }
.rm-feat__where { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--rm-muted); }
.rm-feat__icon { width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--rm-fill); color: var(--rm-slate); display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.rm-feat__body { min-width: 0; flex: 1; }
.rm-feat__title { display: block; font-weight: 700; font-size: 14px; color: var(--rm-ink); transition: color var(--rm-ease); }
.rm-feat__blurb { display: block; font-size: 13px; color: var(--rm-muted); line-height: 1.5; margin-top: 2px; }
.rm-feat__arrow { flex: none; color: var(--rm-soft); margin-top: 8px; transition: color var(--rm-ease), transform var(--rm-ease); }

/* ---- "Wide" container: since 2026-08-18 an alias of the one page frame ------
   (kept for markup stability; every screen shares --rm-container-max). */

.rm-container--wide { max-width: var(--rm-container-max); margin: 0 auto; padding: var(--rm-page-top) var(--rm-container-pad) var(--rm-page-bottom); }

/* ---- List toolbar (controls bar between hero and content) --------------------- */

.rm-toolbar { display: flex; align-items: center; gap: 8px; margin: 22px 0 18px; flex-wrap: wrap; }
.rm-toolbar__right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rm-toolbar__btn {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600;
  color: var(--rm-muted); height: 36px; box-sizing: border-box; white-space: nowrap;
  background: #fff; border: 1px solid var(--rm-border); border-radius: var(--rm-radius-input);
  padding: 8px 13px; cursor: pointer; transition: border-color .15s ease;
  font-family: var(--rm-font-body);
}
.rm-toolbar__btn:hover { border-color: #CBD5E3; }
.rm-toolbar__btn--open { border-color: var(--rm-ai-cobalt); }
/* A pressed toolbar toggle / an active filter reads as ON (2026-08-25): a
   blue fill and text, not just a border a shade off the hover one. */
.rm-toolbar__btn--filtered { border-color: #C7DBFF; background: #EBF1FF; color: #1E50C8; }
.rm-toolbar__btn--filtered:hover { border-color: #A9C7FF; background: #E1EAFF; }
/* Compact icon-only toolbar toggle (the questionnaires list's Deactivated
   switch beside the search, 2026-08-19): 36px square, small count badge,
   pressed = cobalt tint. */
.rm-toolbar__chev { color: var(--rm-label); transition: transform .2s ease; }
.rm-toolbar__btn--open .rm-toolbar__chev { transform: rotate(180deg); }
.rm-toolbar__search {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; box-sizing: border-box;
  background: #fff; border: 1px solid var(--rm-border); border-radius: var(--rm-radius-input);
  padding: 9px 13px; min-width: 220px;
}
.rm-toolbar__search input {
  border: none; outline: none; background: transparent; font-family: inherit;
  font-size: 13.5px; color: var(--rm-ink); width: 100%;
}
.rm-toolbar__search input::placeholder { color: var(--rm-placeholder); }

/* ---- Segmented view switcher --------------------------------------------------- */

.rm-seg {
  position: relative; display: inline-flex; box-sizing: border-box; background: #fff;
  border: 1px solid var(--rm-border); border-radius: var(--rm-radius-input); padding: 4px; height: 40px;
}
.rm-seg__thumb {
  position: absolute; top: 4px; left: 4px; width: 86px; height: 30px; border-radius: 9px;
  background: var(--rm-grad-ai); transition: left .32s cubic-bezier(.34, 1.3, .5, 1);
  box-shadow: 0 3px 8px -2px rgba(20, 30, 60, .35);
}
.rm-seg__opt {
  position: relative; z-index: 1; width: 86px; display: flex; align-items: center; justify-content: center;
  gap: 7px; font-size: 13px; font-weight: 700; color: var(--rm-muted); cursor: pointer; transition: color .25s ease;
}
.rm-seg__opt--on { color: #fff; }

/* ---- Pop menu (in-page action/option dropdowns: sort, filters, kebabs) ---------
   For action menus only; anything that picks a VALUE for a form uses the
   combobox. Pair with a backdrop; one menu open at a time; Escape closes. */

.rm-popmenu-backdrop { position: fixed; inset: 0; z-index: 60; }
.rm-popmenu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 61; width: 230px; background: #fff;
  border: 1px solid var(--rm-border); border-radius: 12px;
  box-shadow: 0 18px 40px -16px rgba(14, 21, 37, .4); padding: 5px;
  font-family: var(--rm-font-body);
}
.rm-popmenu--right { left: auto; right: 0; }
.rm-popmenu--up { top: auto; bottom: calc(100% + 6px); }
.rm-popmenu--wide { width: 236px; border-radius: 13px; padding: 6px; box-shadow: 0 20px 44px -18px rgba(14, 21, 37, .45); }
.rm-popmenu-backdrop--overlay { z-index: 120; }
.rm-popmenu--overlay { z-index: 121; }
.rm-popmenu__item {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px; width: 100%;
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--rm-ink); transition: background .12s ease;
}
.rm-popmenu__item:hover { background: var(--rm-page); }
.rm-popmenu__item--active { background: #EFF4FF; color: var(--rm-tone-cobalt-fg); font-weight: 700; }
.rm-popmenu__item--danger { color: var(--rm-danger); }
.rm-popmenu__item--danger:hover { background: #FEECEF; }
.rm-popmenu__item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-popmenu__count { font-size: 11px; font-weight: 700; color: var(--rm-soft); background: var(--rm-fill); border-radius: var(--rm-radius-pill); padding: 1px 7px; }
.rm-popmenu__sep { height: 1px; background: #EEF1F7; margin: 5px 6px; }
.rm-popmenu__hint { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--rm-label); padding: 7px 11px 4px; }
/* rm.suggestInput list: fixed under its input, above modals (same layer as the combobox list) */
.rm-suggest { z-index: 641; max-height: 240px; overflow-y: auto; }
.rm-suggest .rm-popmenu__item { padding: 8px 11px; font-size: 13px; }
.rm-popmenu__tile { width: 28px; height: 28px; flex: none; border-radius: var(--rm-radius-chip); display: flex; align-items: center; justify-content: center; }

/* ---- Pagination ---------------------------------------------------------------- */

.rm-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.rm-pager__left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rm-pager__info { font-size: 12.5px; color: var(--rm-soft); font-weight: 500; }
.rm-pager__size {
  display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--rm-border);
  border-radius: 9px; padding: 6px 10px; font-size: 12.5px; font-weight: 600; color: #3A4453;
  cursor: pointer; transition: border-color .14s ease; font-family: var(--rm-font-body);
}
.rm-pager__size:hover { border-color: var(--rm-ai-cobalt); }
.rm-pager__nav { display: flex; align-items: center; gap: 6px; }
.rm-pager__btn {
  box-sizing: border-box; width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--rm-border);
  background: #fff; display: flex; align-items: center; justify-content: center; color: var(--rm-muted); cursor: pointer;
}
.rm-pager__btn:hover { border-color: #CBD5E3; }
.rm-pager__page {
  box-sizing: border-box; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 9px;
  background: #fff; border: 1px solid var(--rm-border); color: var(--rm-muted); font-weight: 600; font-size: 13px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; font-family: var(--rm-font-body);
}
.rm-pager__page:hover { border-color: #CBD5E3; }
.rm-pager__page--active { background: var(--rm-grad-ai); border: none; color: #fff; font-weight: 700; }
.rm-pager__gap { min-width: 22px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--rm-soft); font-weight: 700; font-size: 13px; }

/* ---- Toast ---------------------------------------------------------------------- */

.rm-toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 300;
  display: flex; align-items: center; gap: 10px; background: var(--rm-ink); color: #fff;
  font-size: 13.5px; font-weight: 600; font-family: var(--rm-font-body); padding: 12px 18px;
  border-radius: 12px; box-shadow: 0 18px 40px -14px rgba(14, 21, 37, .6); animation: rmFade .2s ease both;
}
.rm-toast [data-lucide], .rm-toast svg { color: #5BE3A9; }

/* ---- Date picker (rm-datepick.js renders into .rm-datepick) --------------------- */

.rm-datepick { font-family: var(--rm-font-body); }
.rm-datepick__head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 12px; }
.rm-datepick__nav {
  width: 30px; height: 30px; border-radius: 9px; background: var(--rm-ghost-fill); border: 1px solid var(--rm-border);
  display: flex; align-items: center; justify-content: center; color: var(--rm-muted); cursor: pointer;
  transition: border-color .15s ease;
}
.rm-datepick__nav:hover { border-color: var(--rm-ai-cobalt); }
.rm-datepick__month { min-width: 118px; text-align: center; font-family: var(--rm-font-heading); font-weight: 700; font-size: 13.5px; color: var(--rm-ink); }
.rm-datepick__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.rm-datepick__dow { text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--rm-placeholder); padding: 4px 0 6px; }
.rm-datepick__dow--weekend { color: #CBD3DE; }
.rm-datepick__day {
  height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 500; color: #3A4453; cursor: pointer; border: 1.5px solid transparent;
  transition: background .12s ease, transform .12s ease; background: transparent;
  font-family: var(--rm-font-body);
}
.rm-datepick__day:hover { background: #EEF3FF; transform: translateY(-1px); }
.rm-datepick__day--weekend { color: #AAB4C4; }
.rm-datepick__day--today { color: var(--rm-tone-cobalt-fg); font-weight: 700; border-color: #C7DBFF; }
.rm-datepick__day--selected {
  background: linear-gradient(135deg, #2F6BFF, #1E4FD1); color: #fff; font-weight: 700;
  box-shadow: 0 4px 10px -3px rgba(47, 107, 255, .55);
}
.rm-datepick__day--selected:hover { background: linear-gradient(135deg, #2F6BFF, #1E4FD1); transform: none; }
.rm-datepick__day--blank { cursor: default; }
.rm-datepick__day--blank:hover { background: transparent; transform: none; }

/* ---- Shared editor-modal shell (list edit/bulk modals; later screens reuse) ----- */

.rm-modal--lg { max-width: 520px; overflow: visible; }
.rm-modal-head { display: flex; align-items: center; gap: 12px; padding: 20px 22px; border-bottom: 1px solid #EEF1F7; }
.rm-modal-head__icon { width: 40px; height: 40px; flex: none; border-radius: var(--rm-radius-input); display: flex; align-items: center; justify-content: center; color: #fff; }
.rm-modal-head__titles { flex: 1; min-width: 0; }
.rm-modal-head__title { font-family: var(--rm-font-heading); font-weight: 700; font-size: 17px; color: var(--rm-ink); }
.rm-modal-head__sub { font-size: 12.5px; color: var(--rm-soft); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-modal-head__x {
  width: 34px; height: 34px; border-radius: 9px; background: var(--rm-ghost-fill); border: 1px solid var(--rm-border);
  display: flex; align-items: center; justify-content: center; color: var(--rm-muted); cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.rm-modal-head__x:hover { background: #EDF0F5; border-color: #D3DAE6; color: var(--rm-ink); }
/* Locked (busy) modal: rm.lockModal. The X and the scrim stop reacting; the
   page's buttons carry the spinner; a progress cursor says "working". */
.rm-modal-overlay--locked { cursor: progress; }
.rm-modal-overlay--locked .rm-modal-head__x { opacity: .35; cursor: not-allowed; pointer-events: none; }
.rm-modal-overlay--locked .rm-modal { outline: none; }
.rm-modal-busynote { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--rm-muted); }
.rm-modal-busynote[hidden] { display: none; }
.rm-modal-body { padding: 20px 22px; }
.rm-modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* Dense-context modifiers for shared chips */
.rm-module-chip--sm { font-size: 11px; font-weight: 600; gap: 4px; padding: 3px 9px; background: #F1EEFC; border: 1px solid #E4DBFB; }
.rm-module-chip--xs { font-size: 10.5px; font-weight: 600; gap: 3px; padding: 2px 8px; background: #F1EEFC; border: 1px solid #E4DBFB; }
.rm-switch--violet input:checked + .rm-switch-track { background: var(--rm-module); }

/* ---- Questionnaires list (questionnaires.dc.html, M3) --------------------------- */

@keyframes rmQlIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Hero body (rendered into the hero bodyHtml slot). Statboxes + on-track
   donut since 2026-08-24: the three filter buttons became read-only tiles
   in the questionnaire hero's .rm-qh__tile dialect, and the deadline band
   bar became the dashboard's On track? donut restyled for the dark hero.
   (The 2026-08-20 tile/side-toggle rules that sat here were dead - no
   renderer had used them since 2026-08-21.) */
.rm-ql-tiles { margin-top: 18px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.rm-ql-herostats { display: flex; flex-wrap: wrap; gap: 14px; }
/* Boxed like every other hero graphic (2026-08-25): the single-questionnaire
   hero's .rm-qh__progress dialect - glass fill, hairline border. */
.rm-ql-donut { display: flex; align-items: center; gap: 16px; margin-left: auto; flex: none; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .13); border-radius: var(--rm-radius-card); padding: 14px 18px; }
@media (max-width: 1100px) { .rm-ql-donut { margin-left: 0; } }
.rm-ql-donut__ring { position: relative; width: 96px; height: 96px; flex: none; }
.rm-ql-donut__ring path { cursor: default; transition: filter .15s ease; }
.rm-ql-donut__ring path:hover { filter: brightness(1.15); }
.rm-ql-donut__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.rm-ql-donut__n { font-family: var(--rm-font-heading); font-weight: 800; font-size: 22px; line-height: 1; color: #fff; }
.rm-ql-donut__label { font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .55); margin-top: 3px; }
.rm-ql-donut__legend { display: flex; flex-direction: column; gap: 6px; min-width: 170px; }
.rm-ql-donut__row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255, 255, 255, .7); }
.rm-ql-donut__key { flex: 1; }
.rm-ql-donut__row b { font-family: var(--rm-font-heading); font-weight: 800; font-size: 13px; padding-left: 10px; font-variant-numeric: tabular-nums; }
.rm-ql-donut__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.rm-ql-donut__empty { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255, 255, 255, .6); }

/* Card grid */
.rm-ql-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(340px, calc((100% - 36px) / 3)), 1fr)); gap: 18px; }
.rm-ql-card {
  position: relative; z-index: 0; text-decoration: none; color: inherit; background: #fff;
  border: 1px solid var(--rm-border); border-radius: 18px; box-shadow: var(--rm-shadow-resting);
  cursor: pointer; animation: rmQlIn .35s ease; display: flex; flex-direction: column;
  transition: transform .2s cubic-bezier(.2, .9, .3, 1.1), box-shadow .2s ease, border-color .2s ease;
}
.rm-ql-card:hover { transform: translateY(-5px); box-shadow: 0 24px 46px -22px rgba(14, 21, 37, .42); border-color: #CBD5E3; z-index: 40; }
.rm-ql-card--lock, .rm-ql-card--lock:hover { transform: translateY(-5px) !important; z-index: 50; box-shadow: 0 24px 46px -22px rgba(14, 21, 37, .42) !important; border-color: #CBD5E3 !important; }
.rm-ql-card__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 15px; color: #fff; border-radius: 17px 17px 0 0; }
.rm-ql-card__flag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .02em; border-radius: var(--rm-radius-pill); }
/* The bar's left slot (2026-08-31): the state flag and the deadline pill
   together; the right slot keeps only the kebab / select control. */
.rm-ql-card__barleft { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.rm-ql-card__barright { display: inline-flex; align-items: center; gap: 8px; }
.rm-ql-card__due { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; background: rgba(255, 255, 255, .22); color: #fff; border-radius: var(--rm-radius-pill); padding: 3px 9px; cursor: default; }
.rm-ql-kebab { width: 26px; height: 26px; flex: none; border-radius: 7px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; background: rgba(255, 255, 255, .18); transition: background .15s ease; border: none; }
.rm-ql-kebab:hover { background: rgba(255, 255, 255, .34); }
.rm-ql-card__body { padding: 15px 17px 15px; display: flex; flex-direction: column; flex: 1; }
.rm-ql-card__lead { display: flex; gap: 12px; align-items: flex-start; }
.rm-ql-card__client-tile { width: 40px; height: 40px; flex: none; border-radius: var(--rm-radius-input); display: flex; align-items: center; justify-content: center; font-family: var(--rm-font-heading); font-weight: 800; font-size: 16px; cursor: default; }
.rm-ql-clientline { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--rm-soft); cursor: default; max-width: 100%; }
.rm-ql-clientline span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-ql-card__title { margin: 2px 0 0; font-family: var(--rm-font-heading); font-weight: 700; font-size: 16px; line-height: 1.3; color: var(--rm-ink); letter-spacing: -.01em; }
.rm-ql-card__progress { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.rm-ql-ring { position: relative; width: 62px; height: 62px; flex: none; }
.rm-ql-ring svg { transform: rotate(-90deg); }
.rm-ql-ring circle { transition: stroke-dashoffset .6s cubic-bezier(.4, 0, .2, 1); }
.rm-ql-ring__pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--rm-font-heading); font-weight: 800; font-size: 15px; color: var(--rm-ink); }
.rm-ql-card__stats { flex: none; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
/* Modules fill the space to the right of the ring and the stat chips; past MOD_CARD_CAP they fold out (see rm-questionnaires.js). */
/* Modules stack vertically against the right edge (2026-08-21). They used
   to wrap as a row that fought the stat list for the same line; stacked and
   right-aligned they read as a column of scope beside a column of facts. */
.rm-ql-card__mods { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px; }
.rm-ql-card__mods--none { align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--rm-faint); }
.rm-ql-card__mods--none [data-lucide], .rm-ql-card__mods--none svg { color: var(--rm-faint); }
.rm-ql-modmore { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--rm-radius-pill); cursor: pointer; background: var(--rm-ghost-fill); color: var(--rm-muted); border: 1px solid #EEF1F7; }
.rm-ql-modmore:hover { border-color: #CBD5E3; color: var(--rm-ink); }
.rm-ql-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.rm-ql-kbchip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--rm-muted); background: var(--rm-fill); border: 1px solid #DDE3EC; border-radius: var(--rm-radius-pill); padding: 3px 9px; cursor: default; }
.rm-ql-card__meta { display: flex; align-items: center; gap: 7px; margin-top: 12px; }
/* Three facts, listed (2026-08-21). They were badges - pill, fill, border -
   which is emphasis a question count does not need, and each carried a
   tooltip that restated the label it sat on. */
.rm-ql-stat { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--rm-muted); white-space: nowrap; }
.rm-ql-stat b { font-family: var(--rm-font-heading); font-weight: 800; color: var(--rm-ink); font-variant-numeric: tabular-nums; }
.rm-ql-mchip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--rm-muted); background: var(--rm-ghost-fill); border: 1px solid #EEF1F7; border-radius: 7px; padding: 3px 8px; cursor: default; }
.rm-ql-mchip [data-lucide], .rm-ql-mchip svg { color: var(--rm-label); }
.rm-ql-card__updated { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--rm-label); font-weight: 600; cursor: default; white-space: nowrap; }
.rm-ql-card__chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 13px; }
.rm-ql-tagspec { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--rm-radius-pill); cursor: pointer; background: var(--rm-ghost-fill); color: var(--rm-muted); border: 1px solid #EEF1F7; }
.rm-ql-tagspec--xs { font-size: 10.5px; gap: 4px; padding: 2px 8px; }
.rm-ql-tagspec__chev { transition: transform .18s ease; }
.rm-ql-tagspec--open .rm-ql-tagspec__chev { transform: rotate(180deg); }
.rm-ql-tagpanel { margin-top: 9px; padding: 10px 11px; background: #FAFBFE; border: 1px solid #EEF1F7; border-radius: 10px; }
.rm-ql-tagpanel__hint { font-size: 11px; color: var(--rm-soft); line-height: 1.5; margin-bottom: 7px; }
.rm-ql-tagpanel__chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rm-ql-tagpanel .rm-tag-chip { font-size: 11px; padding: 3px 9px; }
.rm-ql-card__main { padding-bottom: 16px; }
.rm-ql-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rm-fill); }
.rm-ql-footleft { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rm-ql-team { display: flex; align-items: center; }
.rm-ql-team .rm-avatar { margin-left: -8px; border: 2px solid #fff; }
.rm-ql-footbtns { display: flex; align-items: center; gap: 8px; }
.rm-ql-open { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--rm-ai-cobalt); background: var(--rm-tone-cobalt-bg); border: 1px solid var(--rm-tone-cobalt-bd); border-radius: 9px; padding: 7px 12px; transition: all .15s ease; }
.rm-ql-card:hover .rm-ql-open { background: var(--rm-ai-cobalt); color: #fff; border-color: var(--rm-ai-cobalt); }
/* Finished: Open is green, matching the completed state everywhere else on
   the site, and Export is blue. The two are equals on a finished
   questionnaire, so they are told apart by colour rather than by which one
   shouts (2026-08-21). */
.rm-ql-open--done { color: var(--rm-green-deep); background: var(--rm-tone-green-bg); border-color: #C4EBD9; }
.rm-ql-card:hover .rm-ql-open--done { background: var(--rm-green); color: #fff; border-color: var(--rm-green); }
.rm-ql-export--done { color: var(--rm-ai-cobalt); background: var(--rm-tone-cobalt-bg); border-color: var(--rm-tone-cobalt-bd); }
.rm-ql-export--done:hover { background: var(--rm-ai-cobalt); color: #fff; border-color: var(--rm-ai-cobalt); }
.rm-ql-export { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--rm-green-deep); background: var(--rm-tone-green-bg); border: 1px solid #C4EBD9; border-radius: 9px; padding: 7px 12px; cursor: pointer; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; }
.rm-ql-export:hover { background: #D6F0E4; border-color: #9FE0C6; box-shadow: 0 4px 12px -4px rgba(11, 138, 99, .4); }

/* Selection checkboxes (hover-revealed; always visible in select mode) */
.rm-ql-selfade { opacity: 0; transition: opacity .15s ease; }
.rm-ql-card:hover .rm-ql-selfade, .rm-ql-row:hover .rm-ql-selfade, .rm-ql-thead:hover .rm-ql-selfade,
.rm-ql-selmode .rm-ql-selfade, .rm-ql-selfade--on { opacity: 1; }
.rm-ql-cardsel { width: 22px; height: 22px; flex: none; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; background: rgba(255, 255, 255, .22); border: 1.5px solid rgba(255, 255, 255, .85); }
.rm-ql-cardsel--on { background: #fff; border-color: #fff; }
.rm-ql-selbox { width: 18px; height: 18px; flex: none; border-radius: 5px; border: 1.5px solid #CBD5E3; background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.rm-ql-selbox--on { background: var(--rm-ai-cobalt); border-color: var(--rm-ai-cobalt); }

/* Table view */
.rm-ql-tablewrap { background: #fff; border: 1px solid var(--rm-border); border-radius: 18px; box-shadow: var(--rm-shadow-resting); overflow-x: auto; }
.rm-ql-thead, .rm-ql-row { display: grid; grid-template-columns: 30px 1.7fr 165px 105px 115px 130px 90px 36px; gap: 16px; padding: 12px 22px; align-items: center; min-width: 1040px; }
.rm-ql-thead { background: #FAFBFE; border-radius: 18px 18px 0 0; border-bottom: 1px solid #EEF1F7; font-family: var(--rm-font-mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--rm-label); }
.rm-ql-thead span { min-width: 0; }
.rm-ql-row { text-decoration: none; color: inherit; padding: 15px 22px; border-top: 1px solid var(--rm-fill); position: relative; z-index: 0; transition: background .14s ease; }
.rm-ql-row:first-of-type { border-top: none; }
.rm-ql-row:hover { background: #F8FAFF; z-index: 40; }
.rm-ql-row__accent { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.rm-ql-row__titleline { display: flex; align-items: center; gap: 9px; }
.rm-ql-row__title { font-family: var(--rm-font-heading); font-weight: 700; font-size: 14.5px; color: var(--rm-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-ql-row__flagicon { flex: none; display: inline-flex; align-items: center; cursor: default; }
.rm-ql-row__kbicon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; color: var(--rm-muted); background: var(--rm-fill); border: 1px solid #DDE3EC; cursor: default; }
.rm-ql-row__chips { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
.rm-ql-progresshead { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; font-weight: 700; margin-bottom: 5px; }
.rm-ql-progresshead .rm-ql-progresscount { color: var(--rm-soft); }
.rm-ql-progresshead .rm-ql-progresspct { font-family: var(--rm-font-heading); font-weight: 800; color: var(--rm-green); }
/* Approved or not (2026-08-21): one filled span, the track showing the rest.
   The paler second span for "answered but not approved" is gone from every
   progress read on the site. */
.rm-ql-progressbar { display: flex; height: 6px; border-radius: var(--rm-radius-pill); background: #EEF1F7; overflow: hidden; }
.rm-ql-progressbar span { background: var(--rm-green); }
.rm-ql-row__contents { display: flex; align-items: center; gap: 8px; }
.rm-ql-row__contents .rm-ql-cchip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--rm-muted); cursor: default; }
.rm-ql-row__contents [data-lucide], .rm-ql-row__contents svg { color: var(--rm-label); }
.rm-ql-due { justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; border-radius: var(--rm-radius-pill); padding: 3px 10px; cursor: default; color: var(--rm-muted); background: var(--rm-ghost-fill); border: 1px solid #EEF1F7; white-space: nowrap; }
.rm-ql-due--overdue { color: #C81E46; background: var(--rm-tone-rose-bg); border-color: var(--rm-tone-rose-bd); }
.rm-ql-due--soon { color: #B7791F; background: #FFF7E8; border-color: #FBE7C0; }
.rm-ql-due--completed { color: var(--rm-green-deep); background: var(--rm-tone-green-bg); border-color: #CDEEDF; }
.rm-ql-row__updated { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--rm-muted); cursor: default; min-width: 0; }
.rm-ql-row__updated span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-ql-rowarrow { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--rm-radius-chip); color: var(--rm-label); transition: background .15s ease, color .15s ease, transform .15s ease; }
.rm-ql-row:hover .rm-ql-rowarrow { background: var(--rm-tone-cobalt-bg); color: var(--rm-ai-cobalt); }
.rm-ql-rowarrow:hover { transform: translateX(3px); }

/* Calendar view */
.rm-ql-cal { background: #fff; border: 1px solid var(--rm-border); border-radius: 18px; box-shadow: var(--rm-shadow-resting); padding: 20px 22px; }
.rm-ql-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rm-ql-cal__title { font-family: var(--rm-font-heading); font-weight: 800; font-size: 17px; color: var(--rm-ink); }
.rm-ql-cal__sub { font-size: 12.5px; color: var(--rm-soft); margin-top: 2px; }
.rm-ql-cal__nav { display: flex; align-items: center; gap: 6px; flex: none; }
.rm-ql-cal__navbtn { width: 30px; height: 30px; border-radius: 9px; background: var(--rm-ghost-fill); border: 1px solid var(--rm-border); display: flex; align-items: center; justify-content: center; color: var(--rm-muted); cursor: pointer; transition: border-color .15s ease; }
.rm-ql-cal__navbtn:hover { border-color: var(--rm-ai-cobalt); }
.rm-ql-cal__month { min-width: 118px; text-align: center; font-family: var(--rm-font-heading); font-weight: 700; font-size: 13.5px; color: var(--rm-ink); }
.rm-ql-cal__today { margin-left: 4px; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 9px; background: var(--rm-tone-cobalt-bg); border: 1px solid var(--rm-tone-cobalt-bd); font-size: 12.5px; font-weight: 700; color: var(--rm-tone-cobalt-fg); cursor: pointer; transition: border-color .15s ease; }
.rm-ql-cal__today:hover { border-color: var(--rm-ai-cobalt); }
.rm-ql-cal__dows { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.rm-ql-cal__dow { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--rm-faint); padding-bottom: 8px; border-bottom: 1px solid #EEF1F7; }
.rm-ql-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.rm-ql-cal__day { min-height: 104px; display: flex; flex-direction: column; gap: 6px; border-radius: 12px; background: #FBFCFE; border: 1px solid var(--rm-fill); padding: 8px; }
.rm-ql-cal__day--has { background: #FCFDFF; }
.rm-ql-cal__day--today { background: var(--rm-tone-cobalt-bg); border: 2px solid var(--rm-ai-cobalt); }
.rm-ql-cal__day--blank { background: transparent; border-color: transparent; }
.rm-ql-cal__dayhead { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.rm-ql-cal__daynum { font-family: var(--rm-font-heading); font-weight: 600; font-size: 12.5px; color: var(--rm-faint); }
.rm-ql-cal__day--has .rm-ql-cal__daynum { font-weight: 800; color: var(--rm-ink); }
.rm-ql-cal__day--today .rm-ql-cal__daynum { color: var(--rm-tone-cobalt-fg); }
.rm-ql-cal__more { font-size: 10px; font-weight: 700; color: var(--rm-muted); background: #EEF1F7; border: 1px solid transparent; border-radius: var(--rm-radius-pill); padding: 1px 7px; cursor: pointer; }
.rm-ql-cal__more--open { color: var(--rm-ai-cobalt-deep); background: #EEF3FF; border-color: var(--rm-tone-cobalt-bd); }
.rm-ql-cal__item { display: block; text-decoration: none; border-radius: 9px; padding: 5px 7px; border: 1px solid transparent; }
.rm-ql-cal__item:hover { filter: brightness(.98); }
.rm-ql-cal__itemtitle { font-size: 11px; font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-ql-cal__itemprog { display: flex; align-items: center; gap: 5px; margin-top: 3px; }
.rm-ql-cal__itembar { flex: 1; min-width: 0; display: flex; height: 4px; border-radius: var(--rm-radius-pill); background: #fff; overflow: hidden; }
.rm-ql-cal__itembar span { background: var(--rm-green); }
.rm-ql-cal__itempct { flex: none; font-size: 9.5px; font-weight: 700; color: var(--rm-muted); }
.rm-ql-cal__itemclient { font-size: 10px; font-weight: 600; color: var(--rm-soft); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-ql-cal__legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #EEF1F7; }
.rm-ql-cal__legenditem { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--rm-muted); }

/* Modal internals shared across the list's edit/bulk/export modals */
.rm-ql-opt { display: flex; align-items: center; gap: 11px; border: 1.5px solid var(--rm-border); background: #fff; border-radius: 12px; padding: 12px 14px; cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.rm-ql-opt--on { border-color: var(--rm-ai-cobalt); background: #F5F8FF; }
.rm-ql-opt__tile { width: 34px; height: 34px; flex: none; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.rm-ql-opt__title { font-size: 13.5px; font-weight: 700; color: var(--rm-ink); }
.rm-ql-opt__sub { font-size: 12px; color: var(--rm-soft); }
.rm-ql-note { display: flex; align-items: flex-start; gap: 11px; border-radius: 12px; padding: 13px 14px; font-size: 13px; font-weight: 600; line-height: 1.5; }
.rm-ql-note--warn { background: #FFF7E8; border: 1px solid #FBE7C0; color: #8A5A0B; font-size: 12.5px; border-radius: var(--rm-radius-input); padding: 11px 13px; gap: 9px; }
.rm-ql-note--danger { background: var(--rm-tone-rose-bg); border: 1px solid var(--rm-tone-rose-bd); color: #C81E46; }
.rm-ql-note--rose { background: #FDF0F2; border: 1px solid #F6D2D9; color: #8A4257; font-size: 12px; border-radius: var(--rm-radius-input); padding: 11px 13px; gap: 9px; line-height: 1.55; }
.rm-ql-note--rose strong { color: #B23A54; }
.rm-ql-note--green { background: var(--rm-tone-green-bg); border: 1px solid #C4EBD9; color: #0B6B4E; font-size: 13.5px; }
.rm-ql-note--info { background: #EEF3FF; border: 1px solid var(--rm-tone-cobalt-bd); color: #33415C; font-size: 13.5px; }
.rm-ql-note--plain { background: var(--rm-ghost-fill); border: 1px solid var(--rm-border); color: var(--rm-muted); font-size: 13px; align-items: center; }
.rm-ql-modal-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--rm-label); margin-bottom: 9px; }
.rm-ql-tagmode { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 8px; }
.rm-ql-tagmode__label { font-size: 11.5px; font-weight: 700; color: var(--rm-muted); }
.rm-ql-scopegroup { margin-bottom: 14px; }
.rm-ql-scopegroup__head { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.rm-ql-scopegroup__name { font-size: 12.5px; font-weight: 700; color: var(--rm-slate); }
.rm-ql-scopegroup__used { font-size: 11px; font-weight: 600; color: var(--rm-placeholder); }
.rm-ql-scopegroup__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.rm-ql-scopemore { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: var(--rm-radius-pill); background: var(--rm-ghost-fill); border: 1px dashed #DDE3EC; color: var(--rm-muted); cursor: pointer; }
.rm-ql-scopesummary { font-size: 12px; color: var(--rm-label); margin-top: 6px; }
.rm-ql-taghead { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; margin-top: 2px; }
.rm-ql-taghead__chev { flex: none; color: var(--rm-placeholder); transition: transform .2s ease; }
.rm-ql-taghead--open .rm-ql-taghead__chev { transform: rotate(180deg); }

/* ---- Questionnaire detail shell (questionnaire-header.dc.html, M3) -------------- */

.rm-qh { background: var(--rm-hero-gradient); border: 1px solid var(--rm-hero-border); border-radius: var(--rm-radius-hero); overflow: hidden; box-shadow: var(--rm-shadow-resting); }
.rm-qh__head { padding: 26px 28px 22px; position: relative; }
.rm-qh__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.rm-qh__back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .58); cursor: pointer; text-decoration: none; transition: color .15s ease; }
.rm-qh__back:hover { color: #fff; }
.rm-qh__title { margin: 0; font-family: var(--rm-font-heading); font-weight: 800; font-size: 26px; letter-spacing: -.02em; color: #fff; }
.rm-qh__subrow { display: flex; align-items: center; gap: 10px; margin-top: 9px; flex-wrap: wrap; }
.rm-qh__client { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: rgba(255, 255, 255, .7); font-weight: 500; cursor: default; background: none; border: none; padding: 0; font-family: var(--rm-font-body); }
.rm-qh__client strong { font-weight: 600; color: #fff; }
.rm-qh__client--link { cursor: pointer; }
.rm-qh__client--link:hover strong { text-decoration: underline; }
.rm-qh__mini { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--rm-radius-chip); cursor: pointer; color: rgba(255, 255, 255, .8); font-size: 12.5px; font-weight: 600; font-family: var(--rm-font-body); transition: background .15s ease, color .15s ease; }
.rm-qh__mini:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.rm-qh__actions { display: flex; align-items: center; gap: 9px; flex: none; flex-wrap: wrap; }
.rm-qh__kb { display: inline-flex; align-items: center; gap: 8px; border-radius: 12px; padding: 11px 14px; cursor: pointer; white-space: nowrap; border: 1px solid transparent; background: none; font-family: var(--rm-font-body); transition: background .15s ease, border-color .15s ease; }
.rm-qh__kb--in { background: rgba(18, 168, 122, .12); border-color: rgba(91, 227, 169, .34); }
.rm-qh__kb--out { background: rgba(240, 169, 59, .1); border-color: rgba(245, 201, 122, .38); }
.rm-qh__kb-title { font-size: 13.5px; font-weight: 700; color: #fff; }
.rm-qh__meta { display: flex; align-items: center; gap: 16px; margin-top: 22px; flex-wrap: wrap; }
.rm-qh__tile { display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .13); border-radius: 14px; padding: 12px 16px; }
.rm-qh__tile-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.rm-qh__tile-value { font-family: var(--rm-font-heading); font-weight: 700; font-size: 15px; color: #fff; }
.rm-qh__tile-sub { font-size: 12px; color: rgba(255, 255, 255, .55); }
.rm-qh__avatars { display: flex; align-items: center; }
/* Completion sign, where the progress ring used to be (2026-08-21). A ring
   stuck at 100% charts a question nobody is asking any more, and it took the
   hero's largest block to say "done". */
.rm-qh__done { display: flex; align-items: center; gap: 13px; min-width: 0; }
.rm-qh__done-mark {
  width: 48px; height: 48px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(74, 222, 158, .16); color: #4ADE9E; border: 1px solid rgba(74, 222, 158, .3);
}
.rm-qh__done-title { font-family: var(--rm-font-heading); font-weight: 800; font-size: 16px; color: #fff; }
.rm-qh__done-sub { font-size: 12px; color: rgba(255, 255, 255, .62); margin-top: 2px; }

.rm-qh__avatars .rm-avatar { width: 34px; height: 34px; font-size: 13px; border: 2px solid var(--rm-hero-hub); margin-left: -10px; --rm-dot-ring: var(--rm-hero-hub); }
.rm-qh__invite { width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .12); border: 2px solid var(--rm-hero-hub); margin-left: -10px; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .75); cursor: pointer; transition: background .15s ease, color .15s ease; }
.rm-qh__invite:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.rm-qh__progress { margin-left: auto; flex: none; width: 300px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .13); border-radius: var(--rm-radius-card); padding: 14px 18px; display: flex; align-items: center; gap: 16px; }
@media (max-width: 900px) { .rm-qh__progress { margin-left: 0; width: 100%; } }
.rm-qh__ring { position: relative; width: 64px; height: 64px; flex: none; }
.rm-qh__ring svg { transform: rotate(-90deg); }
.rm-qh__ring circle { transition: stroke-dashoffset .6s cubic-bezier(.4, 0, .2, 1); }
.rm-qh__ring-hub { position: absolute; inset: 8px; border-radius: 50%; background: var(--rm-hero-hub); display: flex; align-items: center; justify-content: center; font-family: var(--rm-font-heading); font-weight: 800; font-size: 16px; color: #8FEBC4; }
.rm-qh__progress-title { font-weight: 700; font-size: 14px; color: #fff; }
.rm-qh__progress-rows { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
/* "N to go" is grey on the dark hero (2026-08-25); it inherited the page's
   near-black ink. */
.rm-qh__progress-row { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .6); }
.rm-qh__progress-row--done { color: #5BE3A9; }
.rm-qh__progress-row--prog { color: #A7E8CE; }
.rm-qh__tabs { display: flex; gap: 26px; padding: 0 28px; border-top: 1px solid rgba(255, 255, 255, .1); }
.rm-qh__tab { text-decoration: none; padding: 15px 2px; font-size: 14.5px; font-weight: 600; color: rgba(255, 255, 255, .6); border-bottom: 2.5px solid transparent; display: inline-flex; align-items: center; gap: 7px; transition: color .15s ease, border-color .15s ease; }
.rm-qh__tab:hover { color: #fff; }
.rm-qh__tab--active { font-weight: 700; color: #fff; border-bottom-color: #5BE3A9; }
/* A tab parked at the far right of the strip (2026-09-07: AI insights), the
   same idiom as .rm-hero__tab--right. */
.rm-qh__tab--right { margin-left: auto; }

/* AI insights tab (2026-09-07, 05-questionnaires "AI insights tab"). */
@keyframes rmQaiSpin { to { transform: rotate(360deg); } }
.rm-qai-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.rm-qai-tile { background: #fff; border: 1px solid #E7ECF3; border-radius: 14px; padding: 14px 16px; min-width: 0; }
.rm-qai-tile__label { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #8A94A6; }
.rm-qai-tile__value { font-family: var(--rm-font-heading); font-weight: 800; font-size: 28px; letter-spacing: -.03em; color: var(--rm-ink); margin-top: 8px; line-height: 1; font-variant-numeric: tabular-nums; }
.rm-qai-tile__sub { font-size: 12px; color: #5A6577; margin-top: 8px; line-height: 1.4; }
.rm-qai-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.rm-qai-card { padding: 18px 20px; min-width: 0; }
.rm-qai-card__head { margin-bottom: 12px; }
.rm-qai-card__title { font-family: var(--rm-font-heading); font-weight: 800; font-size: 15.5px; color: var(--rm-ink); }
.rm-qai-card__sub { font-size: 12px; color: #8A94A6; margin-top: 2px; }
.rm-qai-mini { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #8A94A6; margin-bottom: 8px; }
.rm-qai-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.rm-qai-empty { font-size: 12.5px; color: #8A94A6; padding: 10px 0; }
.rm-qai-note { font-size: 11.5px; color: #8A94A6; margin-top: 10px; }
.rm-qai-stack { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: #F1F4F9; }
.rm-qai-stack__seg { display: block; height: 100%; }
.rm-qai-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12px; color: #5A6577; }
.rm-qai-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.rm-qai-legend__dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.rm-qai-bars { display: flex; flex-direction: column; gap: 7px; }
.rm-qai-bar { display: grid; grid-template-columns: 120px 1fr 64px; align-items: center; gap: 10px; font-size: 12px; color: #5A6577; }
.rm-qai-bar__track { height: 9px; border-radius: 5px; background: #F1F4F9; overflow: hidden; }
.rm-qai-bar__fill { display: block; height: 100%; border-radius: 5px; }
.rm-qai-bar__value { text-align: right; font-variant-numeric: tabular-nums; color: var(--rm-ink); font-weight: 600; white-space: nowrap; }
.rm-qai-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rm-qai-table th { text-align: left; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #8A94A6; padding: 6px 8px; border-bottom: 1px solid #E7ECF3; }
.rm-qai-table td { padding: 7px 8px; border-bottom: 1px solid #F1F4F9; color: var(--rm-ink); font-variant-numeric: tabular-nums; }
.rm-qai-table td:first-child { display: flex; align-items: center; gap: 7px; }
.rm-qai-list { display: flex; flex-direction: column; }
.rm-qai-list__row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; margin: 0 -6px; border-top: 1px solid #F1F4F9; text-decoration: none; color: inherit; border-radius: 8px; }
.rm-qai-list__row:first-child { border-top: 0; }
a.rm-qai-list__row:hover { background: #F8FAFF; }
.rm-qai-list__icon { flex: none; width: 26px; height: 26px; border-radius: 8px; background: #EEF1F7; color: #5A6577; display: inline-flex; align-items: center; justify-content: center; }
.rm-qai-list__text { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--rm-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-qai-list__count { flex: none; font-size: 11.5px; color: #8A94A6; white-space: nowrap; }
.rm-qai-step { width: 100%; height: 90px; display: block; }
.rm-qai-step__axis { display: flex; justify-content: space-between; font-size: 11px; color: #8A94A6; margin-top: 4px; }
@media (max-width: 980px) { .rm-qai-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rm-qai-grid, .rm-qai-two { grid-template-columns: 1fr; } }
/* .rm-qh__tab-count: shared with .rm-hero__tab-count above (one count pill everywhere). */

/* Completion celebration (confetti canvas + green banner with KB toggle) */
@keyframes rmQhBannerIn { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes rmQhRing { from { opacity: .7; transform: scale(.6); } to { opacity: 0; transform: scale(1.5); } }
@keyframes rmQhBadgePop { 0% { transform: scale(0); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.rm-qh-confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 400; }
.rm-qh-celebrate { position: fixed; top: 96px; left: 50%; transform: translateX(-50%); z-index: 420; pointer-events: none; }
.rm-qh-celebrate__card { pointer-events: auto; animation: rmQhBannerIn .5s cubic-bezier(.2, .9, .3, 1.2) both; display: flex; align-items: center; gap: 16px; background: linear-gradient(120deg, #12A87A, #0B8A63); color: #fff; padding: 16px 24px 16px 18px; border-radius: 18px; box-shadow: 0 24px 50px -18px rgba(11, 138, 99, .75); max-width: calc(100vw - 40px); font-family: var(--rm-font-body); }
.rm-qh-celebrate__badge-wrap { position: relative; width: 52px; height: 52px; flex: none; display: flex; align-items: center; justify-content: center; }
.rm-qh-celebrate__pulse { position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .6); animation: rmQhRing 1s ease-out .15s both; }
.rm-qh-celebrate__pulse--late { border-color: rgba(255, 255, 255, .4); animation: rmQhRing 1.1s ease-out .35s both; }
.rm-qh-celebrate__badge { width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .18); display: flex; align-items: center; justify-content: center; animation: rmQhBadgePop .6s cubic-bezier(.2, .9, .3, 1.4) both; }
.rm-qh-celebrate__title { font-family: var(--rm-font-heading); font-weight: 800; font-size: 18px; letter-spacing: -.01em; }
.rm-qh-celebrate__sub { font-size: 13px; color: #DFF6EC; font-weight: 500; margin-top: 2px; }
.rm-qh-celebrate__divider { width: 1px; height: 46px; background: rgba(255, 255, 255, .22); }
.rm-qh-celebrate__kb { cursor: pointer; display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .24); border-radius: var(--rm-radius-tile); padding: 10px 13px; }
.rm-qh-celebrate__kb-title { font-size: 12.5px; font-weight: 700; color: #fff; line-height: 1.25; }
.rm-qh-celebrate__kb-sub { font-size: 11px; color: #DFF6EC; line-height: 1.3; }
.rm-qh-celebrate__track { position: relative; width: 38px; height: 22px; flex: none; border-radius: var(--rm-radius-pill); background: rgba(255, 255, 255, .25); transition: background .2s ease; }
.rm-qh-celebrate__track--on { background: #5FD9A8; }
.rm-qh-celebrate__knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .2s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.rm-qh-celebrate__track--on .rm-qh-celebrate__knob { left: 18px; }

/* Shell modal internals (scope + notes read views) */
.rm-qh-scope__label { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--rm-label); margin-bottom: 9px; }
.rm-qh-scope__hint { font-size: 12.5px; color: var(--rm-muted); line-height: 1.55; margin-bottom: 10px; }
.rm-qh-scope__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.rm-qh-note__box { font-size: 13.5px; color: var(--rm-slate); line-height: 1.55; white-space: pre-wrap; background: var(--rm-ghost-fill); border: 1px solid #EEF1F7; border-radius: var(--rm-radius-input); padding: 11px 13px; }
.rm-qh-note__empty { font-size: 13px; color: var(--rm-placeholder); font-style: italic; }
.rm-qh-note__edit { width: 100%; min-height: 96px; resize: vertical; font-size: 13.5px; line-height: 1.55; margin-top: 6px; }
.rm-qh-edit-link { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: #8A5A0B; background: #FFF7E8; border: 1px solid #FBE0B0; border-radius: 10px; padding: 9px 14px; text-decoration: none; cursor: pointer; transition: background .14s ease, border-color .14s ease, color .14s ease; }
.rm-qh-edit-link:hover { background: #FDEDD1; border-color: #F2C97A; color: #6E4508; }
.rm-page a.rm-qh-edit-link, .rm-page a.rm-qh-edit-link:hover { color: #8A5A0B; }
.rm-page a.rm-qh-edit-link:hover { color: #6E4508; }
.rm-page a.rm-qh__tab { color: rgba(255, 255, 255, .6); }
.rm-page a.rm-qh__tab:hover { color: #fff; }
.rm-page a.rm-qh__tab--active { color: #fff; }
.rm-page a.rm-qh__back, .rm-page a.rm-qh__back:hover { color: rgba(255, 255, 255, .58); }
.rm-page a.rm-qh__back:hover { color: #fff; }

/* ---- Questionnaire Questions tab (questionnaire-questions.dc.html, M3) ---------- */

.rm-qq { background: #fff; border: 1px solid var(--rm-border); border-radius: var(--rm-radius-hero); overflow: hidden; box-shadow: var(--rm-shadow-resting); }
.rm-qq__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 26px 18px; flex-wrap: wrap; }
.rm-qq__title-wrap { display: flex; align-items: center; gap: 12px; }
.rm-qq__title-tile { width: 40px; height: 40px; flex: none; border-radius: var(--rm-radius-input); background: var(--rm-grad-mark); display: flex; align-items: center; justify-content: center; color: #fff; }
.rm-qq__title { margin: 0; font-family: var(--rm-font-heading); font-weight: 700; font-size: 19px; color: var(--rm-ink); }
.rm-qq__subtitle { font-size: 13px; color: var(--rm-soft); margin-top: 3px; }
.rm-qq__controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rm-qq__ctrl { display: inline-flex; align-items: center; gap: 8px; height: 36px; box-sizing: border-box; background: var(--rm-ghost-fill); border: 1px solid var(--rm-border); border-radius: var(--rm-radius-input); padding: 9px 13px; font-size: 13.5px; font-weight: 600; color: var(--rm-muted); cursor: pointer; font-family: var(--rm-font-body); transition: border-color .15s ease; }
.rm-qq__ctrl:hover { border-color: #CBD5E3; }
.rm-qq__search { display: inline-flex; align-items: center; gap: 8px; height: 36px; box-sizing: border-box; background: var(--rm-ghost-fill); border: 1px solid var(--rm-border); border-radius: var(--rm-radius-input); padding: 9px 13px; font-size: 13.5px; color: var(--rm-muted); min-width: 220px; }
.rm-qq__search input { border: none; outline: none; background: transparent; font-family: inherit; font-size: 13.5px; color: var(--rm-ink); width: 100%; }
.rm-qq__search input::placeholder { color: var(--rm-placeholder); }
.rm-qq__search-clear { cursor: pointer; color: var(--rm-label); display: inline-flex; flex: none; }
.rm-qq__gear { width: 36px; height: 36px; box-sizing: border-box; border-radius: var(--rm-radius-input); background: var(--rm-ghost-fill); border: 1px solid var(--rm-border); display: flex; align-items: center; justify-content: center; color: var(--rm-muted); cursor: pointer; transition: border-color .15s ease; }
.rm-qq__gear:hover { border-color: #CBD5E3; }
.rm-qq__seg { position: relative; display: inline-flex; background: var(--rm-fill); border: 1px solid #E4E9F1; border-radius: 12px; padding: 4px; height: 40px; box-sizing: border-box; }
.rm-qq__seg-thumb { position: absolute; top: 4px; left: 4px; width: 86px; height: 30px; border-radius: 9px; background: var(--rm-grad-ai); transition: left .32s cubic-bezier(.34, 1.3, .5, 1); box-shadow: 0 3px 8px -2px rgba(20, 30, 60, .35); }
.rm-qq__seg-opt { position: relative; z-index: 1; width: 86px; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--rm-muted); cursor: pointer; transition: color .25s ease; }
.rm-qq__seg-opt--on { color: #fff; }

/* Sheet pills */
.rm-qq__sheets { display: flex; align-items: center; gap: 10px; padding: 0 26px 16px; flex-wrap: wrap; }
/* The sheet pills sat flush against each other (the wrapper had no layout
   of its own, 2026-08-25): a flex row with a gap. */
.rm-qq__sheets #rm_qq_sheet_pills { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.rm-qq__sheets-label { display: inline-flex; align-items: center; gap: 6px; font-family: var(--rm-font-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--rm-label); margin-right: 2px; }
.rm-qq__sheet { display: inline-flex; align-items: center; gap: 7px; background: #EEF1F6; color: var(--rm-muted); font-weight: 600; font-size: 13.5px; padding: 8px 15px; border-radius: 10px; cursor: pointer; border: none; font-family: var(--rm-font-body); transition: background .15s ease, color .15s ease; }
.rm-qq__sheet:hover { background: #E2E7F0; color: var(--rm-ink); }
.rm-qq__sheet--active, .rm-qq__sheet--active:hover { background: var(--rm-grad-ai); color: #fff; font-weight: 700; }
.rm-qq__bulkwrap { margin: 0 26px 14px; }

/* Horizontal scroller + custom scrollbar */
.rm-qq-scroller { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; animation: rmFade .3s ease both; }
.rm-qq-scroller::-webkit-scrollbar { height: 0; width: 0; display: none; }
.rm-qq-hbar { padding: 14px max(26px, var(--rm-qq-actw, 26px)) 16px 26px; display: flex; align-items: center; gap: 12px; }
.rm-qq-hbar [data-lucide] { color: var(--rm-label); }
.rm-qq-htrack { position: relative; flex: 1; height: 12px; border-radius: var(--rm-radius-pill); background: #E3E8F0; cursor: pointer; }
.rm-qq-hthumb { position: absolute; top: 0; left: 0; height: 12px; min-width: 48px; border-radius: var(--rm-radius-pill); background: linear-gradient(90deg, #5B8CFF, #2F6BFF); cursor: grab; }
/* The horizontal scrollbar is one element that follows the table's own bar
   position and clamps at the fold (2026-08-21, see wireScrollbars). The docked
   bar stays in flow purely to reserve the space, so nothing shifts; only the
   chrome changes when the bar lifts off, and it cross-fades. */
.rm-qq-hbar--spacer { visibility: hidden; }
.rm-qq-hfloat { display: none; position: fixed; top: 0; z-index: 60; align-items: center; gap: 12px; padding: 9px 26px; box-sizing: border-box; background: transparent; border: 1px solid transparent; box-shadow: none; border-radius: 14px; transition: background .18s ease, box-shadow .18s ease, border-color .18s ease; }
.rm-qq-hfloat--lifted { background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px); border-color: #EAEEF5; box-shadow: 0 10px 28px -10px rgba(14, 21, 37, .32); }
@media (prefers-reduced-motion: reduce) { .rm-qq-hfloat { transition: none; } }

/* Table grid */
/* width 100% + an inline min-width from the tracks' floors (2026-08-31,
   item 19). Under the old width:max-content the flexible question track
   resolved PER ROW to the question's unwrapped length, so a long question
   pushed its own row's answer cells out of column with every other row.
   At 100% every row resolves the same track sizes: questions wrap at the
   360px floor, and sheets wider than the panel still scroll (the inline
   min-width keeps every fixed track whole). */
.rm-qq-thead { display: grid; width: 100%; gap: 16px; padding: 11px 0 11px 20px; background: #FAFBFE; border-top: 1px solid #EEF1F7; border-bottom: 1px solid #EEF1F7; font-family: var(--rm-font-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--rm-label); text-transform: uppercase; }
.rm-qq-thead > div { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
/* Questions skeleton (page opens instantly; rows shimmer until /questions-data lands) */
.rm-skel { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #EEF1F7 25%, #F6F8FC 37%, #EEF1F7 63%); background-size: 400% 100%; animation: rmSkelShimmer 1.4s ease infinite; }
.rm-skel--box { height: 44px; border-radius: 10px; }
/* On dark surfaces (the dashboard hero skeleton, 2026-08-19) */
.rm-skel--dark { background: linear-gradient(90deg, rgba(255, 255, 255, .08) 25%, rgba(255, 255, 255, .17) 37%, rgba(255, 255, 255, .08) 63%); background-size: 400% 100%; }
.rm-skel--circle { border-radius: 50%; }
@keyframes rmSkelShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
/* Shared spinner (2026-08-19): pages used to each declare their own
   rmXxSpin keyframes in a <style> block, so a partial shared across pages
   (the questionnaire header's export modal) spun nowhere. */
@keyframes rmSpin { to { transform: rotate(360deg); } }
.rm-spin { animation: rmSpin .8s linear infinite; }
.rm-qq-skel { border-top: 1px solid #EEF1F7; }
.rm-qq-skel__head { display: flex; gap: 24px; align-items: center; padding: 14px 24px; background: #FAFBFE; border-bottom: 1px solid #EEF1F7; }
.rm-qq-skel__row { display: grid; grid-template-columns: 1.1fr 1.4fr 180px; gap: 24px; align-items: center; padding: 18px 24px; border-bottom: 1px solid #F1F4F9; }
.rm-qq-skel__row > div { display: flex; flex-direction: column; gap: 9px; }
.rm-qq-skel__acts { flex-direction: row !important; justify-content: flex-end; align-items: center; }
@media (prefers-reduced-motion: reduce) { .rm-skel { animation: none; } }
.rm-qq-tactions-head { position: sticky; right: 0; z-index: 12; background: #FAFBFE; border-left: 1px solid #EEF1F7; box-shadow: -12px 0 16px -15px rgba(14, 21, 37, .10); padding: 0 24px 0 18px; }
.rm-qq-row { display: grid; width: 100%; gap: 16px; padding: 22px 0 22px 20px; border-bottom: 1px solid #EEF1F7; position: relative; background: #fff; }
/* Grid items keep min-width:auto by default, so one unbreakable token could
   still blow a cell past its track; and the question text itself must be
   allowed to break anywhere (2026-08-31, item 19). */
.rm-qq-row > div { min-width: 0; }
.rm-qq-row--sel { background: #EFF5FF; }
.rm-qq-row__spine { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.rm-qq-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; position: sticky; right: 0; z-index: 12; background: #fff; border-left: 1px solid #EEF1F7; box-shadow: -12px 0 16px -15px rgba(14, 21, 37, .10); padding: 0 22px 0 18px; }
.rm-qq-row--sel .rm-qq-actions { background: #EFF5FF; }

/* Selection boxes (hover-reveal) */
.rm-qq-selbox { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #CBD3DE; background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .15s ease; }
.rm-qq-selbox--on { border-color: var(--rm-ai-cobalt); background: var(--rm-ai-cobalt); }
/* The list view's cards show their box on hover too (2026-08-25; only the
   table rows did). */
.rm-qq-row:hover .rm-qq-selbox, .rm-qq-thead:hover .rm-qq-selbox, .rm-qq-card:hover .rm-qq-selbox, .rm-qq-list:hover .rm-qq-list__selall .rm-qq-selbox, .rm-qq-selmode .rm-qq-selbox, .rm-qq-selbox--on { opacity: 1; }

/* Question cell */
.rm-qq-qtext { font-weight: 600; font-size: 14.5px; color: var(--rm-ink); line-height: 1.45; overflow-wrap: anywhere; }
.rm-qq-cell { position: relative; }
.rm-qq-tb { position: absolute; top: -16px; right: 6px; display: flex; gap: 6px; background: #fff; padding: 6px; border-radius: 12px; box-shadow: 0 12px 26px -10px rgba(14, 21, 37, .35); border: 1px solid #EAEEF5; opacity: 0; transform: translateY(5px); pointer-events: none; transition: .15s ease; z-index: 9; }
.rm-qq-cell:hover .rm-qq-tb { opacity: 1; transform: none; pointer-events: auto; }
.rm-qq-tb--pinned { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
.rm-qq-tb > span { width: 30px; height: 30px; border-radius: var(--rm-radius-chip); display: flex; align-items: center; justify-content: center; color: var(--rm-muted); background: var(--rm-ghost-fill); cursor: pointer; transition: background .13s ease, color .13s ease, box-shadow .13s ease, transform .1s ease; }
.rm-qq-tb > span:hover { background: #E7ECF4; color: var(--rm-ai-cobalt); box-shadow: 0 2px 6px -2px rgba(14, 21, 37, .2); transform: translateY(-1px); }
.rm-qq-tb__ai, .rm-qq-tb > span.rm-qq-tb__ai { color: #fff; background: linear-gradient(135deg, #7A5AF8, #2F6BFF); }
.rm-qq-tb > .rm-qq-tb__sep { width: 1px; height: 20px; background: var(--rm-border); margin: 0 3px; align-self: center; flex: none; cursor: default; box-shadow: none; transform: none; border-radius: 0; }
.rm-qq-tb > .rm-qq-tb__sep:hover { background: var(--rm-border); }

/* Editable cells */
.rm-qq-editcell { font-size: 13.5px; color: #3A4453; line-height: 1.5; background: #fff; border: 1.5px dashed #AFC0DE; border-radius: var(--rm-radius-chip); padding: 8px 10px; min-height: 38px; cursor: text; transition: all .2s ease; }
.rm-qq-editcell:hover { background: #F4F8FF; border: 1.5px dashed var(--rm-ai-cobalt); box-shadow: 0 0 0 3px rgba(47, 107, 255, .12); }
.rm-qq-editcell:focus { outline: none; border: 1.5px dashed var(--rm-ai-cobalt); background: #F2F7FF; box-shadow: 0 2px 8px rgba(47, 107, 255, .22); }
.rm-qq-editcell--locked, .rm-qq-editcell--locked:hover { background: var(--rm-ghost-fill); color: #7B8698; border: 1px solid #EEF1F7; cursor: not-allowed; box-shadow: none; }
.rm-qq-cell__ph { position: absolute; top: 9px; left: 11px; font-size: 13.5px; font-style: italic; color: var(--rm-placeholder); pointer-events: none; }
/* No ring around the triangle (2026-08-25): the white halo read as a border. */
.rm-qq-unsourced { position: absolute; top: -9px; left: -9px; z-index: 4; display: inline-flex; align-items: center; justify-content: center; color: #E8890C; background: #fff; border-radius: 50%; padding: 1px; cursor: default; }
/* AI answer confidence band (26-answer-confidence.md): how well the AI's
   draft is grounded in the knowledge base. ONE corner badge on the editable
   field, in the same corner (and the same shape) as the unsourced warning it
   replaces - the "No sources" band IS that warning. Shown only while the cell
   still holds the AI's draft; the breakdown is in the data-rm-tip tooltip.
   Costs no vertical space, so it scales to a wide grid. */
/* Three dots, filled 3/2/1 for high/medium/low (2026-08-21). Light tones so
   a grid full of them stays quiet; the unfilled dots keep a faint track so the
   count is readable rather than just a wider or narrower blob. "No sources"
   is not a level on this scale, so it keeps the round amber warning badge.
   The badge used a 2px white halo (box-shadow 0 0 0 2px #fff) to separate
   itself from the cell. It sits on the cell's top-left corner, so that halo
   painted OUT the corner of the 1.5px dashed edge underneath (2026-08-21).
   A 1px tinted border does the separating instead, and the dashed corner
   stays whole. --rm-conf-edge is set per band so the ring belongs to the
   badge rather than reading as a second, unrelated outline. */
.rm-qq-conf { position: absolute; top: -9px; left: -9px; z-index: 4; display: inline-flex; align-items: center; justify-content: center; gap: 2px; background: #fff; border: 1px solid var(--rm-conf-edge, #E3E8EF); border-radius: 999px; padding: 3px 4px; box-shadow: 0 1px 3px rgba(14, 21, 37, .14); cursor: default; }
.rm-qq-conf--high { color: #6BC29E; --rm-conf-edge: #CDE9DE; }
.rm-qq-conf--medium { color: #E0B968; --rm-conf-edge: #F4E2C2; }
.rm-qq-conf--low { color: #EC9AA8; --rm-conf-edge: #F9D9DF; }
/* The scored "No sources" triangle wears no ring either (2026-08-25). */
.rm-qq-conf--none { color: #E8890C; --rm-conf-edge: transparent; border-radius: 50%; padding: 1px; gap: 0; box-shadow: none; }
.rm-qq-conf__dot { width: 4px; height: 4px; border-radius: 50%; background: #E4E9F0; flex: none; }
.rm-qq-conf__dot--on { background: currentColor; }
.rm-qq-lockfield { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #7B8698; background: var(--rm-ghost-fill); border: 1px solid #EEF1F7; border-radius: var(--rm-radius-chip); padding: 8px 10px; min-height: 38px; box-sizing: border-box; }

/* Select-type answer */
.rm-qq-seltrigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13.5px; color: #3A4453; background: #fff; border: 1.5px dashed #AFC0DE; border-radius: var(--rm-radius-chip); padding: 9px 12px; cursor: pointer; transition: all .2s ease; }
.rm-qq-seltrigger:hover { background: #F4F8FF; border: 1.5px dashed var(--rm-ai-cobalt); box-shadow: 0 0 0 3px rgba(47, 107, 255, .12); }
.rm-qq-seltrigger--locked, .rm-qq-seltrigger--locked:hover { background: var(--rm-ghost-fill); color: #7B8698; border: 1px solid #EEF1F7; cursor: not-allowed; box-shadow: none; }
.rm-qq-seltrigger--empty { color: var(--rm-placeholder); font-style: italic; }
.rm-qq-selmenu { position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 61; /* above its .rm-popmenu-backdrop (z 60), 2026-09-08 */ background: #fff; border: 1px solid var(--rm-border); border-radius: 9px; box-shadow: 0 14px 30px -12px rgba(14, 21, 37, .35); padding: 4px; }
.rm-qq-selmenu__opt { padding: 8px 10px; border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--rm-ink); cursor: pointer; transition: background .15s ease, color .15s ease; }
.rm-qq-selmenu__opt:hover { background: #EFF5FF; color: var(--rm-ai-cobalt); }

/* Sources */
.rm-qq-srcchip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--rm-ai-violet); background: #F3EEFF; border: 1px solid #E2D6FB; padding: 5px 10px; border-radius: var(--rm-radius-chip); cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.rm-qq-srcchip:hover { background: #ECE4FF; border-color: #C9B6F7; }
.rm-qq-srcchip__count { background: #fff; border-radius: var(--rm-radius-pill); padding: 0 6px; font-size: 10px; }
.rm-qq-srcchip__chev { display: inline-flex; transition: transform .25s ease; }
.rm-qq-src { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .32s ease, opacity .25s ease; }
.rm-qq-src--open { max-height: 680px; opacity: 1; }
.rm-qq-srclist { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; }
.rm-qq-srcrow { display: flex; gap: 10px; align-items: center; border: 1px solid rgba(14, 21, 37, .06); border-radius: 10px; padding: 9px 11px; cursor: pointer; transition: filter .15s ease; }
.rm-qq-srcrow:hover { filter: brightness(.97); }
.rm-qq-srcrow__icon { width: 28px; height: 28px; flex: none; border-radius: var(--rm-radius-chip); background: #fff; display: flex; align-items: center; justify-content: center; }
.rm-qq-srcrow__title { font-size: 12.5px; font-weight: 700; color: var(--rm-ink); }
.rm-qq-srcrow__meta { display: flex; align-items: center; gap: 7px; margin-top: 4px; }
.rm-qq-srcrow__type { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: var(--rm-muted); background: #fff; border: 1px solid rgba(14, 21, 37, .08); padding: 2px 7px; border-radius: 6px; }
.rm-qq-srcrow__match { display: inline-flex; flex-direction: column; gap: 4px; }
.rm-qq-srcrow__matchpct { font-size: 10.5px; font-weight: 700; }
.rm-qq-srcrow__bar { width: 72px; height: 5px; border-radius: var(--rm-radius-pill); background: rgba(14, 21, 37, .09); overflow: hidden; display: inline-block; }
.rm-qq-srcrow__bar span { display: block; height: 100%; border-radius: var(--rm-radius-pill); }
.rm-qq-srcrow__open { flex: none; width: 26px; height: 26px; border-radius: 7px; background: #fff; display: flex; align-items: center; justify-content: center; }
.rm-qq-nosrc { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-family: var(--rm-font-mono); font-size: 11px; font-weight: 500; color: var(--rm-label); background: #F1F3F8; padding: 5px 9px; border-radius: 7px; cursor: default; }

/* Row action buttons */
.rm-qq-done--frozen, .rm-qq-act--frozen { cursor: not-allowed !important; opacity: .55; }
.rm-qq-done--frozen:hover, .rm-qq-act--frozen:hover { transform: none !important; }
.rm-qq-done { cursor: pointer; flex: none; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--rm-muted); background: #fff; border: 1px solid #DCE2EC; padding: 8px 13px; border-radius: 10px; font-family: var(--rm-font-body); transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease; }
.rm-qq-done:hover { background: #F0FBF5; border-color: var(--rm-green); color: var(--rm-green-deep); }
.rm-qq-done:active { transform: translateY(1px); }
.rm-qq-done--on { color: var(--rm-green-deep); background: var(--rm-tone-green-bg); border-color: #B9EAD6; }
.rm-qq-act { position: relative; flex: none; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--rm-border); background: transparent; display: flex; align-items: center; justify-content: center; color: var(--rm-label); cursor: pointer; font-family: var(--rm-font-body); transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease; }
.rm-qq-act:hover { background: #EEF3FF; border-color: var(--rm-ai-cobalt); color: var(--rm-ai-cobalt); }
.rm-qq-act:active { transform: translateY(1px); }
.rm-qq-act--attach-on { background: var(--rm-tone-cobalt-bg); border-color: #C7DBFF; color: var(--rm-ai-cobalt); }
.rm-qq-act--srci { background: #fff; border-color: #DCE2EC; color: var(--rm-muted); }
.rm-qq-act--srcx { background: var(--rm-fill); border-color: #DDE3EC; color: var(--rm-muted); }
.rm-qq-act__badge { position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--rm-radius-pill); background: var(--rm-ai-cobalt); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.rm-qq-act__badge--sugg { top: auto; bottom: -6px; background: #F59E0B; }
.rm-qq-assignee { width: 34px; height: 34px; border-radius: 9px; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 12px; box-shadow: 0 0 0 1px var(--rm-border); cursor: pointer; flex: none; }
.rm-qq-locked .rm-qq-flagbtn, .rm-qq-locked .rm-qq-assignbtn { display: none !important; }
.rm-qq-empty-filtered { padding: 44px 26px; text-align: center; color: var(--rm-soft); font-size: 14px; font-weight: 500; }
.rm-qq-pager-pad { padding: 4px 26px 20px; }

/* List view */
.rm-qq-list { padding: 20px 24px 26px; background: #FAFBFE; border-top: 1px solid #EEF1F7; display: flex; flex-direction: column; gap: 14px; animation: rmFade .3s ease both; }
.rm-qq-list__selall { display: flex; align-items: center; gap: 10px; padding: 0 2px 0 22px; min-height: 20px; }
.rm-qq-list__selall-label { font-family: var(--rm-font-mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--rm-label); opacity: 0; transition: opacity .15s ease; }
.rm-qq-list:hover .rm-qq-list__selall-label, .rm-qq-selmode .rm-qq-list__selall-label { opacity: 1; }
.rm-qq-card { background: #fff; border: 1px solid #EAEEF5; border-radius: var(--rm-radius-card); position: relative; box-shadow: 0 1px 2px rgba(14, 21, 37, .03); }
.rm-qq-card--sel { background: #EFF5FF; border-color: #9CC0FF; }
.rm-qq-card__spine { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; border-radius: var(--rm-radius-card) 0 0 var(--rm-radius-card); }
.rm-qq-card__head { display: flex; align-items: center; gap: 14px; padding: 18px 20px 18px 22px; cursor: pointer; }
.rm-qq-card__expand { width: 30px; height: 30px; flex: none; border-radius: var(--rm-radius-chip); background: var(--rm-ghost-fill); display: flex; align-items: center; justify-content: center; color: var(--rm-muted); cursor: pointer; }
.rm-qq-card__expand span { display: inline-flex; transition: transform .25s ease; }
.rm-qq-card__q { font-weight: 600; font-size: 15px; color: var(--rm-ink); }
.rm-qq-card__preview { font-size: 13px; color: var(--rm-soft); margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-qq-card__right { display: flex; align-items: center; gap: 10px; flex: none; }
.rm-qq-fold { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .38s cubic-bezier(.4, 0, .2, 1), opacity .3s ease; }
.rm-qq-fold--open { max-height: 1400px; opacity: 1; }
.rm-qq-fold__body { padding: 2px 20px 20px 22px; }
.rm-qq-fold__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .rm-qq-fold__grid { grid-template-columns: 1fr; } }
.rm-qq-fold__label { display: flex; align-items: center; gap: 7px; font-family: var(--rm-font-mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--rm-label); text-transform: uppercase; margin-bottom: 8px; }
.rm-qq-fold__actions { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #EEF1F7; flex-wrap: wrap; }
.rm-qq-chipbtn { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--rm-muted); background: var(--rm-ghost-fill); border: 1px solid var(--rm-border); padding: 6px 11px; border-radius: 9px; cursor: pointer; font-family: var(--rm-font-body); transition: background .15s ease, border-color .15s ease; }
.rm-qq-chipbtn:hover { background: #EEF3FF; border-color: var(--rm-ai-cobalt); }
.rm-qq-filerow { display: flex; align-items: center; gap: 11px; background: var(--rm-ghost-fill); border: 1px solid var(--rm-border); border-radius: var(--rm-radius-input); padding: 9px 11px; }
.rm-qq-filerow--sugg { background: #FFFBF0; border-color: #FBE7BE; }
.rm-qq-filerow__name { font-size: 13px; font-weight: 600; color: var(--rm-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-qq-filerow__size { font-size: 11px; color: var(--rm-soft); }
.rm-qq-filerow__iconbtn { width: 26px; height: 26px; flex: none; border-radius: 7px; background: #fff; border: 1px solid var(--rm-border); display: flex; align-items: center; justify-content: center; color: var(--rm-muted); cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.rm-qq-filerow__iconbtn:hover { border-color: var(--rm-ai-cobalt); color: var(--rm-ai-cobalt); }
.rm-qq-suggbadge { display: inline-flex; align-items: center; gap: 3px; font-size: 9.5px; font-weight: 700; color: #B7791F; background: #FEF3E0; border: 1px solid #FBE7BE; padding: 2px 6px; border-radius: 6px; flex: none; }

/* Questions modals (on the shared rm-modal shell; wider) */
.rm-qq-modal { max-width: 560px; }
.rm-qq-modal__body { padding: 20px 22px; }
/* Attach-a-file step: the body is a flex column so the library list (its own
   scroll) shrinks before the body does and the drop zone stays in view. */
.rm-qq-modal__body--fit { display: flex; flex-direction: column; }
.rm-qq-modal__body--fit > * { min-height: 0; }
.rm-qq-modalrow { display: flex; align-items: center; gap: 12px; background: var(--rm-ghost-fill); border: 1px solid var(--rm-border); border-radius: var(--rm-radius-input); padding: 11px 13px; transition: border-color .15s ease, box-shadow .15s ease; }
.rm-qq-modalrow:hover { border-color: #C7DBFF; box-shadow: 0 6px 16px -10px rgba(20, 30, 60, .4); }
.rm-qq-modalrow--sugg { background: #FFFBF0; border-color: #FBE7BE; }
.rm-qq-modalrow--plain { background: #fff; }
.rm-qq-modal-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--rm-label); }
.rm-qq-dropzone { border: 2px dashed #C7DBFF; background: #F7FAFF; border-radius: 14px; padding: 26px; text-align: center; cursor: pointer; }
.rm-qq-dropzone__icon { width: 46px; height: 46px; margin: 0 auto 10px; border-radius: 12px; background: var(--rm-tone-cobalt-bg); display: flex; align-items: center; justify-content: center; color: var(--rm-ai-cobalt); }
.rm-qq-or { display: flex; align-items: center; gap: 10px; color: #B7C0D0; font-size: 12px; font-weight: 600; }
.rm-qq-or span { flex: 1; height: 1px; background: #EEF1F7; }
.rm-qq-flagopt { display: flex; align-items: center; gap: 12px; border: 1px solid var(--rm-border); border-radius: var(--rm-radius-input); padding: 11px 12px; cursor: pointer; background: #fff; transition: background .14s ease, border-color .14s ease, box-shadow .14s ease; }
.rm-qq-flagopt:hover { background: var(--rm-page); border-color: #C6CDDA; box-shadow: 0 4px 12px -8px rgba(14, 21, 37, .3); }
.rm-qq-flagopt--dashed { border-style: dashed; border-color: #DDE3EC; color: var(--rm-soft); }
.rm-qq-flagopt__tile { width: 32px; height: 32px; flex: none; border-radius: var(--rm-radius-chip); display: flex; align-items: center; justify-content: center; }
.rm-qq-simcard { border: 1px solid var(--rm-border); border-radius: 12px; padding: 13px 14px; }
.rm-qq-simcard__match { flex: none; font-size: 11px; font-weight: 700; color: var(--rm-green-deep); background: var(--rm-tone-green-bg); padding: 3px 8px; border-radius: 6px; }
.rm-qq-usepill { display: inline-flex; align-items: center; gap: 7px; background: var(--rm-tone-cobalt-bg); color: var(--rm-ai-cobalt); border: 1px solid #C7DBFF; font-weight: 700; font-size: 12.5px; padding: 7px 12px; border-radius: 9px; cursor: pointer; font-family: var(--rm-font-body); transition: background .15s ease, border-color .15s ease; }
.rm-qq-usepill:hover { background: #DCE8FF; border-color: #9EC0FF; }
.rm-qq-colgrid-head { display: grid; grid-template-columns: 1fr 62px 62px 62px; gap: 8px; padding: 9px 14px; background: #FAFBFE; border-bottom: 1px solid #EEF1F7; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--rm-label); }
.rm-qq-colgrid-row { display: grid; grid-template-columns: 1fr 62px 62px 62px; gap: 8px; padding: 11px 14px; align-items: center; border-bottom: 1px solid #F3F5F9; }
.rm-qq-toggle { width: 36px; height: 21px; border-radius: var(--rm-radius-pill); background: #CBD3DE; position: relative; cursor: pointer; transition: background .2s; display: inline-block; }
.rm-qq-toggle__knob { position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: left .2s; }
.rm-qq-toggle--on .rm-qq-toggle__knob { left: 17px; }
.rm-qq-toggle--dis { cursor: not-allowed; opacity: .5; }
.rm-qq-aiseg { position: relative; display: flex; background: var(--rm-fill); border: 1px solid #E4E9F1; border-radius: 10px; padding: 4px; width: 100%; max-width: 320px; }
.rm-qq-aiseg__thumb { position: absolute; top: 4px; left: 4px; width: calc(50% - 4px); height: calc(100% - 8px); border-radius: var(--rm-radius-chip); background: var(--rm-grad-ai); transition: left .32s cubic-bezier(.34, 1.3, .5, 1); box-shadow: 0 3px 8px -2px rgba(20, 30, 60, .35); }
.rm-qq-aiseg__opt { position: relative; z-index: 1; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--rm-muted); padding: 8px 14px; border-radius: var(--rm-radius-chip); cursor: pointer; transition: color .25s ease; }
.rm-qq-aiseg__opt--on { color: #fff; }
.rm-qq-aiact { display: flex; align-items: center; gap: 12px; border: 1px solid var(--rm-border); border-radius: var(--rm-radius-input); padding: 11px 12px; cursor: pointer; background: #fff; transition: background .14s ease, border-color .14s ease, box-shadow .14s ease; }
.rm-qq-aiact:hover { background: var(--rm-page); border-color: #C6CDDA; box-shadow: 0 4px 12px -8px rgba(14, 21, 37, .3); }
.rm-qq-aiact__tile { width: 32px; height: 32px; flex: none; border-radius: var(--rm-radius-chip); display: flex; align-items: center; justify-content: center; }
.rm-qq-airesult { background: linear-gradient(135deg, #F3EEFF, #EBF1FF); border: 1px solid #E2D6FB; border-radius: 12px; padding: 13px 14px; }

/* ---- Questions tab: answer variants (design questionnaire-questions.dc.html,
   verSrc chip + segmented switcher + fixed "use it everywhere" prompt) ---- */
.rm-qq-verchip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: #1E4FD1;
  background: #EBF1FF; border: 1px solid #D5E3FF; border-radius: 999px;
  padding: 3px 10px; cursor: pointer; white-space: nowrap;
}
.rm-qq-verchip:hover { background: #DFE9FF; }
.rm-qq-verrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.rm-qq-verseg {
  position: relative; display: inline-flex;
  background: #F6F8FC; border: 1px solid #E7ECF3; border-radius: 9px; padding: 3px;
}
.rm-qq-verseg__thumb {
  position: absolute; top: 3px; height: 22px; border-radius: 7px;
  background: linear-gradient(120deg, #2F6BFF, #1E4FD1);
  transition: left .32s cubic-bezier(.34, 1.3, .5, 1);
  box-shadow: 0 2px 6px -2px rgba(20, 30, 60, .4);
}
.rm-qq-verseg__tab {
  position: relative; z-index: 1; height: 22px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; white-space: nowrap; cursor: pointer;
  transition: color .25s ease;
}
.rm-qq-versrc {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; color: #1E4FD1; text-decoration: none;
}
.rm-qq-versrc:hover { color: #1E4FD1; text-decoration: underline; }
.rm-qq-varprompt {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  z-index: 130; display: flex; align-items: flex-start; gap: 13px;
  background: #fff; border: 1px solid #E4E9F1; border-radius: 14px;
  padding: 15px 17px; box-shadow: 0 24px 50px -20px rgba(14, 21, 37, .45);
  max-width: 560px; animation: rmQqPromptIn .28s cubic-bezier(.2, .9, .3, 1.2) both;
}
.rm-qq-varprompt[hidden] { display: none; }
.rm-qq-varprompt__tile {
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  background: #EBF1FF; color: #1E4FD1;
  display: flex; align-items: center; justify-content: center;
}
.rm-qq-varprompt__title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 14px; color: #0E1525; line-height: 1.35; }
.rm-qq-varprompt__body { font-size: 12.5px; color: #5A6577; line-height: 1.5; }
.rm-qq-varprompt__cta {
  display: inline-flex; align-items: center; gap: 7px;
  background: linear-gradient(120deg, #2F6BFF, #1E4FD1); color: #fff; border: none;
  font-family: inherit; font-weight: 700; font-size: 12.5px;
  padding: 9px 13px; border-radius: 10px; cursor: pointer;
}
.rm-qq-varprompt__dismiss {
  background: #F6F8FC; color: #5A6577; border: 1px solid #E7ECF3;
  font-family: inherit; font-weight: 700; font-size: 12.5px;
  padding: 9px 13px; border-radius: 10px; cursor: pointer;
}
@keyframes rmQqPromptIn { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---- Files tab (design questionnaire-files.dc.html) ---- */
.rm-qf { max-width: var(--rm-container-max); margin: 0 auto; padding: 24px var(--rm-container-pad) var(--rm-page-bottom); }
.rm-qf__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.rm-qf__title { margin: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 20px; color: #0E1525; }
.rm-qf__subtitle { font-size: 13.5px; color: #8A94A6; margin-top: 4px; }
.rm-qf__count {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: #5A6577;
  background: #fff; border: 1px solid #E7ECF3; border-radius: 10px; padding: 8px 13px;
}
.rm-qf__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.rm-qf-card {
  position: relative; background: #fff; border: 1px solid #E7ECF3; border-radius: 16px;
  padding: 26px 20px 18px; text-align: center; box-shadow: 0 1px 2px rgba(14, 21, 37, .04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.rm-qf-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -20px rgba(14, 21, 37, .35); border-color: #CBD9EE; }
.rm-qf-card--import { background: #F5FCF8; border: 1.5px solid #9FE3C6; }
.rm-qf-card__kebab {
  position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 8px;
  background: #F6F8FC; border: 1px solid #E7ECF3; display: flex; align-items: center; justify-content: center;
  color: #5A6577; cursor: pointer; z-index: 4; transition: background .15s ease, border-color .15s ease;
}
.rm-qf-card__kebab:hover { background: #EEF1F7; border-color: #CBD5E3; }
.rm-qf-card__origin { position: absolute; top: 10px; left: 10px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: #6A45E0; z-index: 4; }
.rm-qf-menu {
  position: absolute; top: 42px; right: 10px; z-index: 60; width: 154px;
  background: #fff; border: 1px solid #E7ECF3; border-radius: 11px;
  box-shadow: 0 16px 34px -14px rgba(14, 21, 37, .4); padding: 5px; text-align: left;
}
.rm-qf-menu__item {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: #0E1525; cursor: pointer; transition: background .12s ease;
}
.rm-qf-menu__item:hover { background: #F4F6FB; }
.rm-qf-menu__item--danger { color: #E11D48; }
.rm-qf-menu__item--danger i { color: #E11D48; }
.rm-qf-menu__sep { height: 1px; background: #EEF1F7; margin: 5px 6px; }
.rm-qf-card__main { cursor: pointer; }
.rm-qf-card__icon { width: 56px; height: 56px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; }
.rm-qf-card__name { font-size: 14.5px; font-weight: 700; color: #0E1525; line-height: 1.3; margin-bottom: 6px; word-break: break-word; }
.rm-qf-card__meta { font-size: 12px; font-weight: 500; color: #8A94A6; min-height: 15px; }
.rm-qf-card__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 14px; }
.rm-qf-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
}
.rm-qf-chip--import { color: #0B8A63; background: #E7F7F0; border: 1px solid #C4EBD9; }
.rm-qf-chip--attach { color: #2F6BFF; background: #EBF1FF; border: 1px solid #C7DBFF; cursor: pointer; }
.rm-qs-card--frozen { opacity: .62; }
.rm-qs-card--frozen > *:not([data-qs-frozen-note]) { pointer-events: none; }
.rm-qs-card--frozen [data-qs-frozen-note] { pointer-events: auto; }
.rm-qf-attachcard--frozen { cursor: default !important; opacity: .7; }
.rm-qf-attachcard--frozen:hover { border-color: inherit; transform: none; }
.rm-qf-attachcard {
  cursor: pointer; background: #F5F8FF; border: 1.5px dashed #A9C5F5; border-radius: 16px;
  padding: 26px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; min-height: 200px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.rm-qf-attachcard:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -20px rgba(14, 21, 37, .35); border-color: #7FA8EF; }
.rm-qf-attachcard__icon {
  width: 54px; height: 54px; border-radius: 14px; background: #E4EEFF;
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px; color: #2F6BFF;
}
.rm-qf-attachcard__title { font-size: 14.5px; font-weight: 700; color: #2F6BFF; }
.rm-qf-attachcard__sub { font-size: 12px; color: #8A94A6; margin-top: 4px; }
.rm-qf-modal__body { padding: 18px 22px 22px; }
.rm-qf-metachip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: #5A6577;
  background: #F6F8FC; border: 1px solid #EEF1F7; border-radius: 8px; padding: 5px 10px;
}
.rm-qf-librow { display: flex; align-items: center; gap: 12px; border: 1px solid #E7ECF3; border-radius: 11px; padding: 10px 12px; }
.rm-qf-librow__btn {
  width: 30px; height: 30px; flex: none; border-radius: 7px;
  background: #F6F8FC; border: 1px solid #E7ECF3;
  display: flex; align-items: center; justify-content: center; color: #5A6577; cursor: pointer;
}
.rm-qf-librow__btn--add { background: #EBF1FF; border-color: #C7DBFF; color: #2F6BFF; }
.rm-qf-librow__added {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  border-radius: 7px; background: #E7F7F0; border: 1px solid #C4EBD9;
  padding: 0 10px; height: 30px; color: #0B8A63; font-size: 11.5px; font-weight: 700;
}
.rm-qf-dropzone { border: 2px dashed #C7DBFF; background: #F7FAFF; border-radius: 14px; padding: 26px; text-align: center; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.rm-qf-dropzone--over, .rm-qf-dropzone:hover { border-color: #7FA8EF; background: #EFF5FF; }
.rm-qf-dropzone__icon { width: 46px; height: 46px; margin: 0 auto 10px; border-radius: 12px; background: #EBF1FF; display: flex; align-items: center; justify-content: center; color: #2F6BFF; }
.rm-qf-confirmbox { display: flex; align-items: flex-start; gap: 11px; border: 1px solid; border-radius: 12px; padding: 13px 14px; }
.rm-qf-qrow { display: flex; align-items: flex-start; gap: 11px; background: #F9FAFD; border: 1px solid #EEF1F7; border-radius: 11px; padding: 11px 13px; }
.rm-qf-qrow__icon { width: 22px; height: 22px; flex: none; border-radius: 6px; background: #EBF1FF; color: #2F6BFF; display: flex; align-items: center; justify-content: center; margin-top: 1px; }

/* ---- Activity tab (design questionnaire-activity.dc.html) ---- */
.rm-qa { max-width: var(--rm-container-max); margin: 0 auto; padding: 24px var(--rm-container-pad) var(--rm-page-bottom); }
.rm-qa__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.rm-qa__title { margin: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 20px; color: #0E1525; }
.rm-qa__subtitle { font-size: 13.5px; color: #8A94A6; margin-top: 4px; }
.rm-qa__controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* The tab's timeline, controls and range popover are the activity page's since 2026-08-25 (.rm-ah-*). */

/* ---- Settings tab (design questionnaire-settings.dc.html) ---- */
.rm-qs { max-width: var(--rm-container-max); margin: 0 auto; padding: 24px var(--rm-container-pad) var(--rm-page-bottom); }
.rm-qs__title { margin: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 20px; color: #0E1525; }
.rm-qs__subtitle { font-size: 13.5px; color: #8A94A6; margin-top: 4px; }
.rm-qs__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 980px) { .rm-qs__grid { grid-template-columns: 1fr; } }
/* The sticky settings column parks below the sticky top bar (66px) plus a
   breathing gap; `top` must clear the bar or the column slides under it. */
.rm-qs__side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: calc(var(--rm-topbar-h) + 20px); }
.rm-qs-card { background: #fff; border: 1px solid #E7ECF3; border-radius: 18px; padding: 22px 24px; box-shadow: 0 1px 2px rgba(14, 21, 37, .04); }
.rm-qs-card--danger { border-color: #FBD5DC; }
.rm-qs-card__h { margin: 0 0 18px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 16px; color: #0E1525; }
.rm-qs-cardicon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.rm-qs-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .rm-qs-two { grid-template-columns: 1fr; } }
.rm-qs-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #95A0B2; margin-bottom: 7px; }
.rm-qs-label__hint { font-weight: 600; text-transform: none; letter-spacing: 0; color: #B4BCC8; }
.rm-qs-textarea { height: 80px; resize: vertical; line-height: 1.5; font-family: inherit; }
.rm-qs-datefield { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.rm-qs-datepop {
  /* Above the .rm-popmenu-backdrop (z 60) that closes it, or every click on a day lands on the backdrop (2026-09-08). */
  position: absolute; top: calc(100% + 5px); left: 0; z-index: 61; width: 294px;
  background: #fff; border: 1px solid #E7ECF3; border-radius: 14px;
  box-shadow: 0 16px 34px -14px rgba(14, 21, 37, .4); padding: 14px;
}
.rm-qs-runbox {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #F6F8FC; border: 1px solid #EEF1F7; border-radius: 12px; padding: 11px 14px; margin-bottom: 16px;
}
.rm-qs-scopechip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; color: #B7791F;
  background: #FEF3E0; border: 1px solid #FBE7BE; padding: 4px 9px; border-radius: 7px; cursor: help;
}
.rm-qs-tagtoggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.rm-qs-tagtoggle .rm-qs-label { margin-bottom: 0; }
.rm-qs-switch {
  position: relative; width: 34px; height: 20px; flex: none; border-radius: 999px;
  background: #D6DCE6; cursor: pointer; transition: background .2s ease; display: inline-block;
}
.rm-qs-switch__knob {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(14, 21, 37, .3); transition: left .2s ease;
}
.rm-qs-switch--on { background: #2F6BFF; }
.rm-qs-switch--on .rm-qs-switch__knob { left: 16px; }
.rm-qs-tagchip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; cursor: pointer;
  background: #F6F8FC; border: 1px solid #E7ECF3; color: #5A6577;
  transition: filter .12s ease, transform .1s ease;
}
.rm-qs-tagchip:hover { filter: brightness(.97); }
.rm-qs-tagchip--on { background: #E7F7F0; border-color: #C4EBD9; color: #0B8A63; }
.rm-qs-tagchip--ex { background: #FDF0F2; border-color: #F6D2D9; color: #B23A54; text-decoration: line-through; }
.rm-qs-exnote { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; background: #FDF0F2; border: 1px solid #F6D2D9; border-radius: 11px; padding: 11px 13px; }
.rm-qs-rerunbtn {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: linear-gradient(120deg, #7A5AF8, #5B3EE0); color: #fff; border: none;
  font-family: inherit; font-weight: 700; font-size: 13.5px; padding: 12px; border-radius: 11px; cursor: pointer;
  transition: filter .15s ease;
}
.rm-qs-rerunbtn:hover { filter: brightness(1.08); }
.rm-qs-sheet { background: #F9FAFD; border: 1px solid #EEF1F7; border-radius: 12px; padding: 12px 14px; }
.rm-qs-sheet__icon { width: 32px; height: 32px; flex: none; border-radius: 9px; background: #fff; border: 1px solid #E7ECF3; display: flex; align-items: center; justify-content: center; color: #5A6577; }
.rm-qs-chipbtn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #F6F8FC; color: #5A6577; border: 1px solid #E7ECF3;
  font-family: inherit; font-weight: 700; font-size: 12.5px; padding: 7px 11px; border-radius: 9px; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.rm-qs-chipbtn:hover { background: #EEF2F8; border-color: #CBD4E0; }
.rm-qs-chipbtn--ai { background: #F3EEFF; color: #6A45E0; border-color: #E2D6FB; }
.rm-qs-chipbtn--ai:hover { background: #EBE1FE; border-color: #D2BEF7; }
.rm-qs-colgrid { margin-top: 12px; border: 1px solid #E7ECF3; border-radius: 11px; overflow: visible; background: #fff; }
.rm-qs-colgrid__head {
  display: grid; grid-template-columns: 1fr 58px 62px 44px; gap: 6px; padding: 8px 13px;
  background: #FAFBFE; border-bottom: 1px solid #EEF1F7; border-radius: 11px 11px 0 0;
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #95A0B2;
}
.rm-qs-colgrid__row { display: grid; grid-template-columns: 1fr 58px 62px 44px; gap: 6px; padding: 10px 13px; align-items: center; border-bottom: 1px solid #F3F5F9; }
.rm-qs-savebtn {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: linear-gradient(120deg, #2F6BFF, #1E4FD1); color: #fff; border: none;
  font-family: inherit; font-weight: 700; font-size: 14px; padding: 13px; border-radius: 12px; cursor: pointer;
  margin-bottom: 10px; transition: filter .15s ease, box-shadow .15s ease;
}
.rm-qs-savebtn:hover { filter: brightness(1.07); box-shadow: 0 8px 20px -6px rgba(47, 107, 255, .5); }
.rm-qs-savebtn:disabled { opacity: .7; cursor: default; }
.rm-qs-warnbtn {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: #FEF3E0; color: #B7791F; border: 1px solid #FBE7BE;
  font-family: inherit; font-weight: 700; font-size: 13.5px; padding: 12px; border-radius: 12px; cursor: pointer;
}
.rm-qs-dangerbtn {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: #fff; color: #E11D48; border: 1.5px solid #FBD5DC;
  font-family: inherit; font-weight: 700; font-size: 13.5px; padding: 12px; border-radius: 12px; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.rm-qs-dangerbtn:hover { background: #FEECEF; border-color: #F5A9B8; }
.rm-qs-delnote { display: flex; align-items: flex-start; gap: 11px; background: #FEECEF; border: 1px solid #FBD5DC; border-radius: 12px; padding: 13px 14px; }
.rm-qs-warnnote { display: flex; align-items: flex-start; gap: 11px; background: #FFF7EA; border: 1px solid #FBE7BE; border-radius: 12px; padding: 13px 14px; }

/* ---- Import wizard (design questionnaire-import.dc.html) ---- */
.rm-qi { max-width: var(--rm-container-max); margin: 0 auto; padding: var(--rm-page-top) var(--rm-container-pad) var(--rm-page-bottom); }
.rm-qi__hero {
  background: linear-gradient(135deg, #0B1B2B, #113A2C);
  border-radius: 20px; padding: 28px 30px; color: #fff;
}
.rm-qi__back { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, .66); text-decoration: none; margin-bottom: 10px; }
.rm-qi .rm-qi__back:hover { color: #fff; }
.rm-qi__title { margin: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 26px; color: #fff; }
.rm-qi__subtitle { font-size: 14px; color: rgba(255, 255, 255, .68); margin-top: 6px; max-width: 620px; line-height: 1.55; }
/* Method tab bar inside the hero: only rendered on the upload / setup steps
   (design questionnaire-import lines 64-70); slides in once, not per switch. */
.rm-qi__hero { padding-bottom: 0; }
.rm-qi__hero > div:first-child { padding-bottom: 28px; }
.rm-qi__tabs { display: flex; gap: 26px; padding: 0 0; margin: 0 -30px; padding: 0 30px; border-top: 1px solid rgba(255, 255, 255, .1); animation: rmQiTabsIn .3s cubic-bezier(.2, .7, .3, 1) both; }
.rm-qi__tabs[hidden] { display: none; }
.rm-qi__tab { display: inline-flex; align-items: center; gap: 7px; padding: 15px 2px; font-size: 14.5px; font-weight: 600; color: rgba(255, 255, 255, .6); border: 0; border-bottom: 2px solid transparent; background: none; font-family: inherit; cursor: pointer; transition: color .15s ease, border-color .15s ease; }
.rm-qi__tab:hover { color: #fff; }
.rm-qi__tab--on { color: #fff; font-weight: 700; border-bottom-color: #12A87A; }
@keyframes rmQiTabsIn { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
.rm-qi__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
@media (max-width: 720px) { .rm-qi__cards { grid-template-columns: 1fr; } }
.rm-qi-opt {
  background: #fff; border: 1px solid #E7ECF3; border-radius: 18px; padding: 22px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(14, 21, 37, .04); position: relative;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.rm-qi-opt:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -20px rgba(14, 21, 37, .35); border-color: #CBD9EE; }
.rm-qi-opt--soon { background: #F8FAFD; border-style: dashed; opacity: .72; cursor: default; }
.rm-qi-opt--soon:hover { transform: none; box-shadow: none; border-color: #E7ECF3; }
.rm-qi-opt__soon { position: absolute; top: 16px; right: 16px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #95A0B2; background: #EEF1F7; border-radius: 999px; padding: 3px 9px; }
.rm-qi-opt__icon { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; }
.rm-qi-opt__title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 17px; color: #0E1525; margin-top: 14px; }
.rm-qi-opt__desc { font-size: 13.5px; color: #5A6577; line-height: 1.55; margin-top: 5px; }
.rm-qi-opt__cta { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; margin-top: 14px; }
.rm-qi-panel { margin-top: 24px; background: #fff; border: 1px solid #E7ECF3; border-radius: 18px; padding: 26px; box-shadow: 0 1px 2px rgba(14, 21, 37, .04); }
.rm-qi-panel__h { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 18px; color: #0E1525; }
.rm-qi-drop {
  margin-top: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  border: 2px dashed #CBD5E3; background: #FAFBFE; border-radius: 16px; padding: 44px 20px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease; text-align: center;
}
.rm-qi-drop:hover, .rm-qi-drop--over { border-color: #2F6BFF; background: #F5F9FF; }
.rm-qi-drop__icon { width: 56px; height: 56px; border-radius: 15px; background: #EBF1FF; color: #2F6BFF; display: flex; align-items: center; justify-content: center; }
.rm-qi-textarea {
  margin-top: 14px; width: 100%; min-height: 200px; box-sizing: border-box;
  border: 1px solid #E2E7F0; background: #FAFBFE; border-radius: 12px; padding: 14px 16px;
  font-family: inherit; font-size: 14px; line-height: 1.6; color: #0E1525; outline: none; resize: vertical;
}
.rm-qi-textarea:focus { border-color: #2F6BFF; background: #fff; box-shadow: 0 0 0 3px rgba(47, 107, 255, .12); }
.rm-qi-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(120deg, #2F6BFF, #1E4FD1); color: #fff; border: none;
  font-family: inherit; font-weight: 700; font-size: 14px; padding: 12px 20px; border-radius: 11px; cursor: pointer;
  transition: filter .15s ease;
}
.rm-qi-primary:hover { filter: brightness(1.07); }
.rm-qi-primary:disabled { opacity: .75; cursor: default; }
.rm-qi-banner { display: flex; align-items: center; gap: 12px; border: 1px solid; border-radius: 14px; padding: 13px 16px; }
.rm-qi-banner__icon { width: 34px; height: 34px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.rm-qi-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
@media (max-width: 720px) { .rm-qi-form { grid-template-columns: 1fr; } }
.rm-qi-scope { background: #FCFCFE; border: 1px solid #EEF1F7; border-radius: 14px; padding: 18px 20px; }

/* ---- Questions tab: manual import mapping modal (questionnaire-import.dc.html step) ---- */
.rm-qq-mapsheet {
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; padding: 10px 14px; border-radius: 11px;
  background: #F6F8FC; color: #5A6577; border: 1px solid #E7ECF3; transition: .14s ease;
}
.rm-qq-mapsheet:hover { border-color: #CBD5E3; }
.rm-qq-mapsheet--on { background: #EFF4FF; color: #1E4FD1; border-color: #B9D0FF; }
.rm-qq-maprow { display: flex; align-items: stretch; cursor: pointer; background: #fff; border-top: 1px solid #F1F4F9; min-width: max-content; }
.rm-qq-maprow:first-child { border-top: none; }
.rm-qq-maprow:hover { background: #FAFBFE; }
.rm-qq-maprow--on { background: #EFF4FF; }
.rm-qq-maprow--on:hover { background: #EFF4FF; }
.rm-qq-maprow__num {
  width: 44px; flex: none; position: sticky; left: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600; color: #95A0B2;
  background: #F6F8FC; border-right: 1px solid #F1F4F9;
}
.rm-qq-maprow--on .rm-qq-maprow__num { color: #1E4FD1; background: #E4EEFF; }
.rm-qq-maprow__cell {
  width: 150px; flex: none; padding: 9px 12px; font-size: 12.5px; color: #3A4453;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-right: 1px solid #F4F6FB;
}
.rm-qq-maprow--on .rm-qq-maprow__cell { font-weight: 700; color: #0E1525; }
.rm-qq-maprow__tag { width: 100px; flex: none; display: flex; align-items: center; justify-content: flex-end; padding-right: 12px; font-size: 11.5px; font-weight: 700; color: #2F6BFF; }
.rm-qq-mapopt {
  cursor: pointer; white-space: nowrap; font-size: 12px; font-weight: 700; padding: 7px 11px; border-radius: 9px;
  background: #F6F8FC; color: #5A6577; border: 1px solid #E7ECF3; transition: .14s ease;
}
.rm-qq-mapopt:hover { border-color: #CBD5E3; }
.rm-qq-mapopt--on { background: linear-gradient(120deg, #2F6BFF, #1E4FD1); color: #fff; border-color: transparent; }

/* ============================================================================
   Knowledge screen (M4a, design: knowledge-dashboard.dc.html). Page prefix
   .rm-kl-*; hero tabs reuse .rm-hero__tab with a per-source accent set by JS. */

.rm-kl-stack { display: flex; flex-direction: column; gap: 12px; }

.rm-kl-card {
  position: relative; background: #fff; border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-card); padding: 18px 20px 16px 24px; cursor: pointer;
  box-shadow: var(--rm-shadow-resting); transition: box-shadow .16s ease, transform .16s ease, border-color .14s ease;
  overflow: hidden;
}
.rm-kl-card:hover { box-shadow: var(--rm-shadow-lifted); transform: translateY(-2px); }
.rm-kl-card--locked { border-color: #B9D0FF; }
.rm-kl-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #CBD5E1; }

.rm-kl-row {
  position: relative; display: flex; align-items: center; gap: 12px; background: #fff;
  border: 1px solid var(--rm-border); border-radius: 13px; padding: 12px 16px 12px 20px;
  cursor: pointer; transition: box-shadow .16s ease, border-color .14s ease; overflow: hidden;
}
.rm-kl-row:hover { box-shadow: var(--rm-shadow-resting); border-color: #DCE3EE; }
.rm-kl-row--locked { border-color: #B9D0FF; }

.rm-kl-typetile {
  width: 30px; height: 30px; flex: none; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
}
.rm-kl-typetile--qa { background: var(--rm-src-qna-bg); color: var(--rm-src-qna-fg); }
.rm-kl-typetile--file { background: var(--rm-src-file-bg); color: var(--rm-src-file-fg); }
.rm-kl-typetile--link { background: var(--rm-src-link-bg); color: var(--rm-src-link-fg); }
.rm-kl-typetile--past { background: var(--rm-src-past-bg); color: var(--rm-src-past-fg); }

.rm-kl-selbox {
  width: 24px; height: 24px; flex: none; border-radius: 7px; border: 1.5px solid #C6CDDA;
  background: #fff; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; cursor: pointer; opacity: 0; transition: opacity .14s ease, background .14s ease, border-color .14s ease;
}
.rm-kl-card:hover .rm-kl-selbox, .rm-kl-row:hover .rm-kl-selbox,
.rm-kl-filecard:hover .rm-kl-selbox, .rm-kl-selmode .rm-kl-selbox { opacity: 1; }
.rm-kl-selbox--on { opacity: 1; background: linear-gradient(120deg, #2F6BFF, #1E4FD1); border-color: transparent; }
/* Add-from-SharePoint modal (2026-09-07): clickable crumbs and the search box. */
.rm-kl-spcrumbs { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px; min-width: 0; }
.rm-kl-spcrumb { border: 0; background: transparent; padding: 2px 4px; border-radius: 6px; font: inherit; font-size: 12.5px; color: #5A6577; cursor: pointer; }
.rm-kl-spcrumb:hover { background: #F1F4F9; color: var(--rm-ink); }
.rm-kl-spcrumb:focus-visible { outline: 2px solid var(--rm-ai-cobalt); outline-offset: 1px; }
.rm-kl-spcrumb--here { color: var(--rm-ink); font-weight: 700; }
.rm-kl-spcrumb__sep { color: #C6CDDA; font-size: 12px; }
.rm-kl-spsearch { display: flex; align-items: center; gap: 8px; border: 1px solid #E7ECF3; border-radius: 11px; padding: 6px 8px 6px 12px; margin-bottom: 12px; background: #fff; }
.rm-kl-spsearch:focus-within { border-color: var(--rm-ai-cobalt); }
.rm-kl-spsearch__input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13.5px; color: var(--rm-ink); }
.rm-kl-spsearch__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.rm-kl-selectall {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 12.5px;
  font-weight: 700; color: var(--rm-muted); cursor: pointer; user-select: none;
}

.rm-kl-q { font-size: 15px; font-weight: 700; color: var(--rm-ink); min-width: 0; }
.rm-kl-answer { font-size: 13.5px; color: var(--rm-muted); line-height: 1.55; margin-top: 8px; }
.rm-kl-answer p { margin: 0 0 4px; }
.rm-kl-answer ul, .rm-kl-answer ol { margin: 4px 0; padding-left: 20px; }

.rm-kl-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; min-width: 0; }
.rm-kl-more {
  font-size: 11.5px; font-weight: 700; color: var(--rm-muted); background: var(--rm-ghost-fill);
  border: 1px dashed #DDE3EC; border-radius: var(--rm-radius-pill); padding: 3px 9px; cursor: pointer;
}
.rm-kl-author { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--rm-soft); white-space: nowrap; }

.rm-kl-variant { display: inline-flex; align-items: center; gap: 9px; margin-top: 9px; }
.rm-kl-variant__type {
  display: inline-flex; align-items: center; gap: 5px; font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--rm-label);
}
.rm-kl-variant__seg {
  display: inline-flex; background: var(--rm-fill); border: 1px solid #E4E9F1; border-radius: 9px; padding: 3px; gap: 2px;
}
.rm-kl-variant__opt {
  font-size: 11.5px; font-weight: 700; color: var(--rm-muted); padding: 4px 10px; border-radius: 7px;
  cursor: pointer; transition: .14s ease; white-space: nowrap;
}
.rm-kl-variant__opt--on { background: linear-gradient(120deg, #2F6BFF, #1E4FD1); color: #fff; box-shadow: 0 2px 6px -2px rgba(20, 30, 60, .35); }

/* Four file cards per row (2026-08-20), which divides the page sizes (8 /
   16 / 32) evenly: the column floor is the width four columns need, so the
   grid can never fit a fifth, and it still collapses to 3/2/1 as the
   container narrows past the 232px card minimum. */
.rm-kl-filegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(232px, calc((100% - 48px) / 4)), 1fr)); gap: 16px; }
.rm-kl-filecard {
  position: relative; background: #fff; border: 1px solid var(--rm-border); border-radius: var(--rm-radius-card);
  padding: 16px 16px 14px; text-align: center; cursor: pointer; overflow: hidden;
  box-shadow: var(--rm-shadow-resting); transition: box-shadow .16s ease, transform .16s ease, border-color .14s ease;
}
.rm-kl-filecard:hover { box-shadow: var(--rm-shadow-lifted); transform: translateY(-2px); }
.rm-kl-filecard--locked { border-color: #B9D0FF; }
.rm-kl-filecard .rm-kl-spine { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 4px; }
.rm-kl-filecard__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }

/* A block: as an inline <span> the 44x54 box collapsed to nothing in the card
   grid, so the page glyph vanished and the badge floated over the title. */
.rm-kl-fileicon { position: relative; display: block; width: 44px; height: 54px; margin: 6px auto 10px; }
.rm-kl-fileicon--sm { width: 27px; height: 34px; margin: 0; flex: none; }
.rm-kl-fileicon__page {
  position: absolute; inset: 0; background: #FBFCFE; border: 1.5px solid #D8DFEA; border-radius: 6px;
}
.rm-kl-fileicon__page::before {
  content: ''; position: absolute; top: -1.5px; right: -1.5px; width: 12px; height: 12px;
  background: #EDF1F7; border-left: 1.5px solid #D8DFEA; border-bottom: 1.5px solid #D8DFEA; border-radius: 0 6px 0 6px;
}
.rm-kl-fileicon--sm .rm-kl-fileicon__page::before { width: 8px; height: 8px; }
.rm-kl-fileicon__badge {
  position: absolute; left: -4px; bottom: 7px; padding: 1px 5px; border-radius: 4px;
  font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 600; color: #fff; letter-spacing: .02em;
}
.rm-kl-fileicon--sm .rm-kl-fileicon__badge { bottom: 4px; font-size: 7.5px; padding: 1px 3px; }

.rm-kl-kebab {
  width: 28px; height: 28px; flex: none; border-radius: 8px; display: inline-flex; align-items: center;
  justify-content: center; color: var(--rm-soft); cursor: pointer; transition: .14s ease; background: transparent; border: none;
}
.rm-kl-kebab:hover { background: var(--rm-ghost-fill); color: var(--rm-ink); }

.rm-kl-url { font-size: 12.5px; color: var(--rm-ai-cobalt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.rm-kl-typeseg { display: flex; background: var(--rm-fill); border: 1px solid #E4E9F1; border-radius: 11px; padding: 4px; gap: 3px; }
.rm-kl-typeseg__opt {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 13px; font-weight: 700; color: var(--rm-muted); padding: 9px 12px; border-radius: 8px;
  cursor: pointer; transition: .14s ease; white-space: nowrap;
}
.rm-kl-typeseg__opt--on { background: linear-gradient(120deg, #2F6BFF, #1E4FD1); color: #fff; box-shadow: 0 3px 8px -2px rgba(20, 30, 60, .35); }

.rm-kl-drop {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 16px;
  border: 1.5px dashed #C9D3E2; border-radius: 13px; background: #FBFCFE; cursor: pointer;
  color: var(--rm-muted); text-align: center; transition: border-color .14s ease, background .14s ease;
}
.rm-kl-drop:hover, .rm-kl-drop--over { border-color: var(--rm-ai-cobalt); background: #F6F9FF; }

.rm-kl-tile {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--rm-border);
  border-radius: 12px; background: var(--rm-ghost-fill); cursor: pointer; transition: border-color .14s ease, background .14s ease;
  text-align: left; width: 100%;
}
.rm-kl-tile:hover { border-color: #CBD5E3; background: #fff; }

/* Source metadata panel (design detailRows/previewMetaRows, 2026-08-18): one
   card, a two-column grid inside it, cells top-aligned and min-width:0 so long
   values ellipsize; label 10px uppercase, value 12.5px/600, chips 11.5px/700. */
.rm-kl-metapanel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; align-items: start; border: 1px solid #EEF1F7; background: #FAFBFE; border-radius: 12px; padding: 14px 16px; }
.rm-kl-metacell { min-width: 0; }
.rm-kl-metalabel { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #95A0B2; }
.rm-kl-metavalue { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; font-weight: 600; line-height: 1.35; min-width: 0; }
.rm-kl-metatext { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-kl-metatext--click { cursor: pointer; border-bottom: 1px dashed currentColor; }
.rm-kl-metaav { font-size: 8px !important; }
.rm-kl-metastack { display: inline-flex; align-items: center; padding-left: 6px; flex: none; }
.rm-kl-metastack .rm-avatar { margin-left: -6px; border: 2px solid #FAFBFE; --rm-dot-ring: #FAFBFE; }
/* Freshness readout (2026-08-21): a word, a short tube filled by the score
   and the date it is measured from. No percentage - the fade is a straight
   line over 90 days, not a measurement precise enough to quote. */
/* Dashboard freshness footer (2026-08-21): the room under the legend, spent
   on what is about to need attention rather than restating the ring. */
.rm-db-freshfoot {
  display: flex; flex-direction: column; gap: 6px; margin-top: 14px; padding-top: 13px;
  border-top: 1px solid #EEF1F7; text-decoration: none;
}
.rm-db-freshfoot:hover .rm-db-freshfoot__cta { color: var(--rm-ai-cobalt-deep); }
.rm-db-freshfoot__row { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #5A6577; }
.rm-db-freshfoot__row b { font-family: var(--rm-font-heading); font-weight: 800; color: #0E1525; }
.rm-db-freshfoot__cta {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 2px;
  font-size: 11.5px; font-weight: 700; color: var(--rm-ai-cobalt);
}

/* Freshness tab overview (2026-08-21): the bank's own reading, opening a tab
   that used to start with a calendar of dates. One stacked bar over the three
   states of the curve, and the three counts under it. */
/* Freshness overview (redesigned 2026-08-24): full-width across the tab's
   two columns - ring, five-band spread, action figures - so no short card
   shares a row with the tall renew-first list. The old margin-bottom (a
   leftover from a stacked layout) is gone; the grid gap spaces it. */
.rm-kl-fresh { grid-column: 1 / -1; background: #fff; border: 1px solid #E7ECF3; border-radius: 16px; padding: 18px 20px; display: flex; align-items: center; gap: 22px; }
.rm-kl-fresh__ring { position: relative; width: 84px; height: 84px; flex: none; cursor: default; }
.rm-kl-fresh__ringhub { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.rm-kl-fresh__ringhub b { font-family: var(--rm-font-heading); font-weight: 800; font-size: 17px; color: #0E1525; }
.rm-kl-fresh__ringhub span { font-size: 9.5px; color: #8A94A6; margin-top: 3px; }
.rm-kl-fresh__main { flex: 1; min-width: 0; }
.rm-kl-fresh__figs { flex: none; display: flex; gap: 14px; padding-left: 22px; border-left: 1px solid #EEF1F7; }
.rm-kl-fresh__fig { display: flex; flex-direction: column; align-items: flex-start; min-width: 92px; cursor: default; }
.rm-kl-fresh__fignum { font-family: var(--rm-font-heading); font-weight: 800; font-size: 24px; line-height: 1; }
.rm-kl-fresh__figlabel { font-size: 11.5px; color: #8A94A6; margin-top: 5px; line-height: 1.3; }
@media (max-width: 900px) { .rm-kl-fresh { flex-wrap: wrap; } .rm-kl-fresh__figs { border-left: 0; padding-left: 0; width: 100%; } }
.rm-kl-expiry__side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.rm-kl-fresh__head { display: flex; align-items: flex-start; gap: 12px; }
.rm-kl-fresh__title { display: block; font-family: var(--rm-font-heading); font-weight: 800; font-size: 17px; color: #0E1525; }
.rm-kl-fresh__sub { display: block; font-size: 12.5px; color: #8A94A6; line-height: 1.5; margin-top: 3px; }
.rm-kl-fresh__bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: #F1F4F9; margin-top: 16px; }
.rm-kl-fresh__bar span { display: block; height: 100%; }
.rm-kl-fresh__tallies { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 12px; }
.rm-kl-fresh__tally { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #5A6577; }
.rm-kl-fresh__tally b { font-family: var(--rm-font-heading); font-weight: 800; color: #0E1525; }
.rm-kl-fresh__empty { font-size: 12.5px; color: #8A94A6; margin-top: 14px; }

/* Hero "most used" tiles (2026-08-21): a top-3 list, each row an icon, a
   name, a bar scaled to the leader and the count. Replaces two tiles that
   repeated numbers already on the tabs and on the Cleanup button. Kept to
   three rows and one line each - the hero is a glance, not a report. */

/* Open cleanup items, as a corner badge on the button you press to deal with
   them - it used to be a stat tile beside it saying the same number. Since
   2026-09-04 a second, blue badge sits beside it with the suggested-additions
   count: the cleanup page's two-colour read (cleanup yellow, suggestions
   blue) on the button that opens it. The yellow one keeps the corner. */
.rm-kl-badges { position: absolute; top: -7px; right: -7px; display: flex; gap: 3px; pointer-events: none; }
.rm-kl-cleanbadge {
  min-width: 19px; height: 19px; padding: 0 5px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  background: #F5B44C; color: #4A3208;
  border: 2px solid var(--rm-hero-hub);
  border-radius: var(--rm-radius-pill);
  font-family: var(--rm-font-heading); font-weight: 800; font-size: 10.5px; line-height: 1;
  font-variant-numeric: tabular-nums; pointer-events: auto;
}
.rm-kl-cleanbadge--suggest { background: var(--rm-ai-cobalt); color: #fff; }
/* A cleanup-page card or side that opens its entry on a plain click
   (2026-09-04, data-kc-open): the knowledge screen's detail or preview. */
.rm-kc-sug[data-kc-open], .rm-kc-side[data-kc-open] { cursor: pointer; }
.rm-btn--hero-ghost:has(.rm-kl-badges) { position: relative; overflow: visible; }

/* The freshness leaf: one glyph on every source row in every view,
   coloured by band. Sits with the usage chip, not in the status pill -
   status is about whether the AI can read a source at all. */
.rm-kl-leaf { display: inline-flex; align-items: center; flex: none; cursor: default; }
.rm-kl-freshbar { display: inline-flex; height: 6px; border-radius: 999px; background: #EEF1F7; overflow: hidden; flex: none; margin-left: 2px; }
.rm-kl-freshbar span { display: block; height: 100%; border-radius: 999px; }
.rm-kl-freshwhen { font-size: 11.5px; font-weight: 600; color: #95A0B2; white-space: nowrap; }
.rm-kl-metastack__more { margin-left: -6px; width: 22px; height: 22px; border-radius: 50%; background: #EEF1F7; color: #5A6577; font-size: 9px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #FAFBFE; }
.rm-kl-metachips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.rm-kl-metachip { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.rm-kl-metachip--module { color: #6A45E0; background: #F3EEFF; border: 1px solid #E2D6FB; }
.rm-kl-metachip--tag { color: #5A6577; background: #F6F8FC; border: 1px solid #E7ECF3; }
.rm-kl-metachip--more { color: #5A6577; background: #F1F4F9; border: 1px solid #E4E9F1; cursor: pointer; }
.rm-kl-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rm-border); border: 1px solid var(--rm-border); border-radius: 13px; overflow: hidden; }
.rm-kl-meta-cell { background: #fff; padding: 12px 14px; min-width: 0; }
.rm-kl-meta-cell--span { grid-column: 1 / -1; }
.rm-kl-meta-cell--click { cursor: pointer; transition: background .14s ease; }
.rm-kl-meta-cell--click:hover { background: #FAFBFE; }

/* Cleanup modal (design knowledge-dashboard conflicts modal, 2026-08-18):
   white modal -> faint amber item card -> white side cards. Amber only on the
   card tint, the kind icon and the pills; type scale 10px pills..14.5px title;
   rhythm 12 between cards, 13 head->grid, 10 between columns, 7 in a side,
   11 above the footer. */
.rm-kl-cu__body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 12px; }
.rm-kl-cu__scan { display: flex; align-items: center; gap: 9px; background: #F6F8FC; border: 1px solid #EEF1F7; border-radius: 11px; padding: 10px 13px; cursor: default; }
/* Cleanup entries share the suggestion card (.rm-kc-sug) since 2026-08-25;
   the .rm-kl-cu* card rules that lived here are gone. */
.rm-kl-varblock { border: 1px solid var(--rm-border); border-radius: 13px; padding: 14px; margin-top: 12px; }
/* Link creation (2026-08-19): duplicate notice, site discovery checklist,
   empty-source notice in the preview modal */
.rm-kl-fieldnote { font-size: 12px; color: var(--rm-soft); margin-top: 6px; line-height: 1.5; }
.rm-kl-dupnote { display: flex; align-items: flex-start; gap: 9px; margin-top: 9px; background: #FFF7E8; border: 1px solid #FBE0B0; border-radius: 11px; padding: 11px 13px; font-size: 12px; line-height: 1.5; }
.rm-kl-discover { margin-top: 14px; border: 1px solid var(--rm-border); border-radius: 13px; overflow: hidden; }
.rm-kl-discover__wait { display: flex; align-items: center; gap: 9px; margin-top: 14px; padding: 14px; border: 1px dashed #D9E0EC; border-radius: 13px; font-size: 12.5px; color: var(--rm-muted); }
.rm-kl-discover__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 13px; background: #FAFBFE; border-bottom: 1px solid var(--rm-border); font-size: 12px; font-weight: 700; color: var(--rm-muted); }
.rm-kl-discover__link { background: none; border: none; font-family: inherit; font-size: 12px; font-weight: 700; color: var(--rm-ai-cobalt); cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.rm-kl-discover__link:hover { background: #EBF1FF; }
.rm-kl-discover__list { max-height: 300px; overflow-y: auto; }
.rm-kl-discover__row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 13px; border-top: 1px solid #F1F4F9; cursor: pointer; }
.rm-kl-discover__row:first-child { border-top: none; }
.rm-kl-discover__row:hover { background: #FAFBFE; }
.rm-kl-discover__row--on { background: #F5F8FF; }
.rm-kl-discover__row--have { opacity: .62; cursor: default; }
.rm-kl-discover__cb { width: 16px; height: 16px; margin: 2px 0 0; flex: none; accent-color: #2F6BFF; cursor: pointer; }
.rm-kl-discover__title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; font-weight: 700; color: var(--rm-ink); }
.rm-kl-discover__url { display: block; font-size: 11.5px; color: var(--rm-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'IBM Plex Mono', monospace; }
.rm-kl-discover__why { display: block; font-size: 11.5px; color: var(--rm-soft); margin-top: 1px; }
.rm-kl-discover__ai { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #5B3EE0; background: #F3EEFF; border: 1px solid #E2D6FB; border-radius: 999px; padding: 1px 7px; }
.rm-kl-discover__have { font-size: 10.5px; font-weight: 700; color: var(--rm-soft); background: var(--rm-fill); border-radius: 999px; padding: 1px 7px; }
.rm-kl-emptysrc { display: flex; align-items: flex-start; gap: 11px; background: #F6F8FC; border: 1px dashed #C9D2E0; border-radius: 13px; padding: 13px 15px; margin-bottom: 14px; }
.rm-kl-emptysrc__ic { flex: none; width: 34px; height: 34px; border-radius: 10px; background: #E7ECF3; color: #5A6577; display: inline-flex; align-items: center; justify-content: center; }
.rm-kl-emptysrc__title { font-size: 13.5px; font-weight: 700; color: var(--rm-ink); }
.rm-kl-emptysrc__sub { font-size: 12.5px; color: var(--rm-muted); margin-top: 3px; line-height: 1.5; }
/* Answer(s) head row of the Q&A form: label left, "Add another variant"
   right, with breathing room above (was squeezed against the field above). */
.rm-kl-answerhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; margin-bottom: 2px; }
.rm-kl-answerhead .rm-field-label { margin: 0; }
/* Alternative phrasings (question variation) in the Q&A form and detail */
.rm-kl-alts { margin-top: 16px; padding: 12px 14px 14px; border: 1px dashed #D9E0EC; border-radius: 13px; background: #FBFCFE; }
.rm-kl-alts__list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rm-kl-alts__chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; font-size: 12.5px; font-weight: 600; color: var(--rm-ink); background: #fff; border: 1px solid var(--rm-border); border-radius: 999px; padding: 4px 6px 4px 11px; }
.rm-kl-alts__chip--ro { padding-right: 11px; }
.rm-kl-alts__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-kl-alts__x { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; border: none; background: transparent; color: var(--rm-soft); cursor: pointer; font-family: inherit; }
.rm-kl-alts__x:hover { background: #FEECEF; color: var(--rm-danger); }
.rm-kl-alts__add { display: flex; gap: 8px; margin-top: 10px; }
.rm-kl-alts__add .rm-input { flex: 1; min-width: 0; }
.rm-kl-alts__ideas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.rm-kl-alts__ideaslabel { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--rm-ai-violet); margin-right: 2px; }
.rm-kl-alts__idea { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: #5B3EE0; background: #F3EEFF; border: 1px solid #E2D6FB; border-radius: 999px; padding: 4px 11px; cursor: pointer; font-family: inherit; text-align: left; }
.rm-kl-alts__idea:hover { background: #EAE2FF; }
.rm-kl-alts__ideasx { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: none; background: transparent; color: var(--rm-soft); cursor: pointer; font-family: inherit; margin-left: 2px; }
.rm-kl-alts__ideasx:hover { background: var(--rm-fill); color: var(--rm-ink); }
.rm-kl-alts__note { font-size: 12px; color: var(--rm-soft); margin-top: 8px; }
/* "Also asked as" line on Q&A cards */
.rm-kl-altline { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 6px; margin-top: 6px; font-size: 12px; color: var(--rm-muted); }
.rm-kl-altline i { color: var(--rm-soft); flex: none; }
.rm-kl-altline__label { font-weight: 700; color: var(--rm-soft); }
.rm-kl-altline__item { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--rm-fill); border-radius: 999px; padding: 1px 9px; }
.rm-kl-altline__more { font-weight: 700; color: var(--rm-soft); }

.rm-kl-status {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700;
  border-radius: var(--rm-radius-pill); padding: 3px 10px; white-space: nowrap;
}

/* Past questionnaires tab (M4b) */
.rm-kl-pastgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(340px, calc((100% - 36px) / 3)), 1fr)); gap: 18px; }
.rm-kl-pastcard {
  background: #fff; border: 1px solid var(--rm-border); border-radius: var(--rm-radius-card);
  overflow: hidden; cursor: pointer; box-shadow: var(--rm-shadow-resting);
  transition: box-shadow .16s ease, transform .16s ease;
}
.rm-kl-pastcard:hover { box-shadow: var(--rm-shadow-lifted); transform: translateY(-2px); }
.rm-kl-pastcard__band {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: linear-gradient(120deg, #0B8A63, #12A87A); color: #fff; padding: 10px 16px;
}
.rm-kl-pastcard__body { padding: 16px; }
.rm-kl-clienttile {
  width: 40px; height: 40px; flex: none; border-radius: 11px; display: inline-flex; align-items: center;
  justify-content: center; color: #fff; font-weight: 800; font-size: 15px;
}
.rm-kl-pasttable { background: #fff; border: 1px solid var(--rm-border); border-radius: var(--rm-radius-card); overflow: hidden; }
.rm-kl-pasttable__head, .rm-kl-pastrow {
  display: grid; grid-template-columns: 1.6fr 1.2fr 110px 120px 130px; gap: 16px; align-items: center; padding: 12px 20px;
}
.rm-kl-pasttable__head {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--rm-label); border-bottom: 1px solid var(--rm-border); background: var(--rm-ghost-fill);
}
.rm-kl-pastrow { border-top: 1px solid #F1F4F9; cursor: pointer; transition: background .14s ease; }
.rm-kl-pastrow:first-of-type { border-top: none; }
.rm-kl-pastrow:hover { background: #FAFBFE; }
.rm-kl-ansrow {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid #F1F4F9;
  border-radius: 11px; margin-bottom: 8px;
}
.rm-kl-ansrow--excluded { background: var(--rm-ghost-fill); }
.rm-kl-ansrow__toggle {
  flex: none; width: 28px; height: 28px; border-radius: 8px; border: none; background: transparent;
  display: inline-flex; align-items: center; justify-content: center; color: #C6CDDA; cursor: pointer; transition: .14s ease;
}
.rm-kl-ansrow__toggle--in { color: #0B8A63; }
.rm-kl-ansrow__toggle--in:hover { background: #FDF0F2; color: var(--rm-danger); }
.rm-kl-ansrow__toggle--x { color: var(--rm-danger); }
.rm-kl-ansrow__toggle--x:hover { background: #E7F7F0; color: #0B8A63; }
.rm-kl-anslist { display: flex; flex-direction: column; max-height: 46vh; overflow-y: auto; padding-right: 2px; }

/* Hero expiration donut + expiry calendar view (M4c closing) */
/* Design (knowledge.dc.html hero): the two action tiles sit left, compact and
   vertically centred; the freshness ring is pushed to the right edge under
   the header actions, with the two glass stat tiles on its left
   (2026-08-20). */
.rm-kl-herostats { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 18px; }
.rm-kl-donut {
  display: flex; align-items: center; gap: 14px; width: 340px; max-width: 100%;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px; padding: 13px 16px; cursor: pointer; transition: background .15s ease;
}
.rm-kl-donut:hover { background: rgba(255, 255, 255, .1); }
/* Action tiles size to their copy (the modifier must follow the base rule,
   or the base 340px width wins by source order and the row overflows). */
.rm-kl-donut--action { width: auto; min-width: 250px; padding: 11px 14px; align-self: center; }
.rm-kl-donut--expiry { margin-left: auto; }
@media (max-width: 1100px) { .rm-kl-donut--expiry { margin-left: 0; } }
.rm-kl-donut__legend { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; font-size: 11.5px; color: rgba(255, 255, 255, .72); }
.rm-kl-donut__dot { display: inline-block; width: 8px; height: 8px; border-radius: 3px; margin-right: 5px; }
/* Hero stat tiles (2026-08-20): read-only glass info, per "Info versus
   action" - the hero's Cleanup ghost button is the action. */
/* (The knowledge hero's stat tiles are .rm-qh__tile since 2026-08-24 - the
   old stat-tile rules, dead since the 2026-08-21 rework, are gone.) */

.rm-kl-expiry { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; align-items: start; margin-top: 22px; }
@media (max-width: 1100px) { .rm-kl-expiry { grid-template-columns: 1fr; } }
.rm-kl-cal { background: #fff; border: 1px solid var(--rm-border); border-radius: var(--rm-radius-card); padding: 18px 20px; }
.rm-kl-cal__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
/* Seven equal columns whatever the chip titles say (2026-09-03): a bare
   1fr track is minmax(auto, 1fr), so one long nowrap title widened its
   day and squeezed the others to slivers. minmax(0, 1fr) plus min-width: 0
   on the cell and on the chip's text block let the ellipsis do its job. */
.rm-kl-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-left: 1px solid #F1F4F9; border-top: 1px solid #F1F4F9; }
.rm-kl-cal__dow {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--rm-label); padding: 7px 8px; border-right: 1px solid #F1F4F9; border-bottom: 1px solid #F1F4F9;
  background: var(--rm-ghost-fill);
}
.rm-kl-cal__day { min-height: 104px; min-width: 0; padding: 7px 8px; border-right: 1px solid #F1F4F9; border-bottom: 1px solid #F1F4F9; }
.rm-kl-cal__day--out { background: #FAFBFD; }
.rm-kl-cal__num { font-size: 11.5px; font-weight: 700; color: var(--rm-muted); display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: 7px; }
.rm-kl-cal__num--today { background: #EBF1FF; color: #1E4FD1; box-shadow: 0 0 0 1.5px #2F6BFF inset; }
.rm-kl-cal__item {
  display: flex; align-items: flex-start; gap: 5px; font-size: 10.5px; font-weight: 600; line-height: 1.3;
  border-radius: 7px; padding: 4px 6px; margin-top: 4px; cursor: pointer; min-width: 0;
}
.rm-kl-cal__item > span { flex: 1 1 auto; min-width: 0; }
.rm-kl-cal__item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-kl-cal__more {
  display: inline-block; font-size: 10px; font-weight: 700; color: var(--rm-muted); background: var(--rm-ghost-fill);
  border: 1px dashed #DDE3EC; border-radius: 999px; padding: 1px 7px; margin-top: 4px; cursor: pointer;
}
.rm-kl-cal__legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 11.5px; color: var(--rm-muted); }
.rm-kl-never { background: #fff; border: 1px solid var(--rm-border); border-radius: var(--rm-radius-card); padding: 16px 18px; }
.rm-kl-never__rows { max-height: 430px; overflow: auto; margin-top: 10px; }
.rm-kl-never__row {
  display: flex; align-items: center; gap: 9px; padding: 8px 6px; border-top: 1px solid #F4F6FB; cursor: pointer;
  border-radius: 8px;
}
.rm-kl-never__row:hover { background: #FAFBFE; }

/* Modules & tags screen (M4f, design: modules-tags.dc.html). Prefix .rm-mt-* */
/* Jump-to-a-module bar (2026-08-21): the manage list runs to dozens on a real
   tenant, and finding one meant scrolling past all the others. */
.rm-mt-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 24px; }
.rm-mt-jump__label { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--rm-label); margin-right: 4px; }
.rm-mt-jump__btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: inherit; font-size: 12px; font-weight: 600; color: var(--rm-muted);
  background: var(--rm-ghost-fill); border: 1px solid #EEF1F7; border-radius: 999px;
  padding: 4px 10px; cursor: pointer; transition: all .15s ease;
}
.rm-mt-jump__btn:hover { color: var(--rm-module); border-color: #E2D6FB; background: #F7F4FF; }
/* Landing highlight: which of several similar cards did I just arrive at? */
.rm-mt-card--lit { box-shadow: 0 0 0 2px var(--rm-module); transition: box-shadow .3s ease; }
@media (prefers-reduced-motion: reduce) { .rm-mt-card--lit { transition: none; } }

.rm-mt-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; align-items: start; }
@media (max-width: 900px) { .rm-mt-charts { grid-template-columns: 1fr; } }
.rm-mt-bar { height: 9px; border-radius: 6px; background: var(--rm-fill); overflow: hidden; }
.rm-mt-bar__fill { height: 100%; border-radius: 6px; opacity: .55; }
.rm-mt-card {
  background: #fff; border: 1px solid var(--rm-border); border-radius: var(--rm-radius-card);
  padding: 20px 22px; box-shadow: var(--rm-shadow-resting); transition: border-color .16s ease, box-shadow .16s ease;
}
.rm-mt-card:hover { border-color: #D8CCF6; box-shadow: 0 14px 30px -22px rgba(60, 30, 120, .4); }
.rm-mt-statchip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  border-radius: 8px; padding: 5px 10px; transition: filter .14s ease;
}
.rm-mt-statchip:hover { filter: brightness(.97); }
.rm-mt-tagrow { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 9px; }
.rm-mt-tagrow:hover { background: #FAF8FF; }
.rm-mt-tagrow .rm-mt-tagact { opacity: 0; transition: opacity .14s ease; }
.rm-mt-tagrow:hover .rm-mt-tagact { opacity: 1; }
.rm-mt-tagact { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.rm-mt-iconbtn {
  width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer; border: 1px solid transparent; transition: .14s ease;
}
.rm-mt-addtag {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  color: var(--rm-ai-cobalt); background: #fff; border: 1px dashed #B9D0FF; border-radius: var(--rm-radius-pill);
  padding: 6px 12px; cursor: pointer; transition: .15s ease;
}
.rm-mt-addtag:hover { background: #EBF1FF; border-color: #9EC0FF; }
.rm-mt-mergerow {
  display: flex; align-items: center; gap: 12px; padding: 12px 13px; border: 1px solid #EEF1F7;
  border-radius: 12px; cursor: pointer; transition: background .14s ease;
}
.rm-mt-mergerow:hover { background: #F5F2FF; }

/* Small input modifier (shared, introduced with the M5 clients form). */
.rm-input--sm { font-size: 13.5px; padding: 9px 11px; }

/* Clients screen (M5, design: clients.dc.html + components/client-form). Prefix .rm-cl-* */
.rm-cl-herostats { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
.rm-cl-herostat {
  display: flex; align-items: center; gap: 12px; min-width: 200px; padding: 12px 16px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13); border-radius: 14px;
}
.rm-cl-herostat__icon { width: 38px; height: 38px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.rm-cl-herostat__num { font-family: var(--rm-font-heading); font-weight: 700; font-size: 15px; color: #fff; }
.rm-cl-herostat__label { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 2px; }

.rm-cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(340px, calc((100% - 36px) / 3)), 1fr)); gap: 18px; }
.rm-cl-card { display: flex; flex-direction: column; padding: 17px; border-radius: 18px; }
.rm-cl-cardhead { display: flex; align-items: flex-start; gap: 13px; }
.rm-cl-cardtitles { min-width: 0; flex: 1; }
.rm-cl-cardname {
  margin: 0; font-family: var(--rm-font-heading); font-weight: 700; font-size: 16.5px; line-height: 1.25;
  color: var(--rm-ink); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rm-cl-cardloc { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--rm-soft); }
.rm-cl-cardloc i { color: var(--rm-faint); }
.rm-cl-logo { position: relative; display: inline-block; flex: none; }
.rm-cl-logo img { object-fit: cover; border: 1px solid #EEF1F7; }
/* Logo over monogram (rm.clientLogo): the img covers the tile when it loads and removes itself on error. */
.rm-cl-logo__img { position: absolute; inset: 0; width: 100%; height: 100%; background: #fff; }
.rm-cl-monogram {
  display: flex; align-items: center; justify-content: center; color: #fff;
  font-family: var(--rm-font-heading); font-weight: 800; letter-spacing: -.02em;
}
.rm-cl-kebabwrap { position: relative; display: inline-flex; flex: none; }
.rm-cl-kebab {
  width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--rm-faint); background: var(--rm-ghost-fill); border: 1px solid #EEF1F7;
  transition: background .15s ease, color .15s ease;
}
.rm-cl-kebab:hover { background: #EEF1F7; color: var(--rm-ai-cobalt); }

.rm-cl-contactbox { margin-top: 14px; background: #FAFBFE; border: 1px solid #F1F4F9; border-radius: 14px; }
.rm-cl-contactmain { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.rm-cl-cavatar {
  width: 34px; height: 34px; flex: none; border-radius: 50%; color: #fff; display: flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 13px;
}
.rm-cl-cavatar--sm { width: 28px; height: 28px; font-size: 11px; }
.rm-cl-cmeta { min-width: 0; flex: 1; }
.rm-cl-cname { font-size: 13.5px; font-weight: 700; color: var(--rm-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-cl-cmail { font-size: 12px; color: var(--rm-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-cl-morebtn {
  flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700;
  color: var(--rm-ai-cobalt); background: #EBF1FF; border: 1px solid #C7DBFF; border-radius: 999px;
  padding: 4px 9px; cursor: pointer; transition: .14s ease; font-family: inherit;
}
.rm-cl-morebtn:hover { filter: brightness(.98); border-color: #B9CCFF; }
.rm-cl-morebtn--sm { font-size: 10.5px; padding: 3px 7px; }
.rm-cl-morechev { display: inline-flex; transition: transform .2s ease; }
.rm-cl-onecontact {
  width: 26px; height: 26px; flex: none; border-radius: 8px; background: #EBF1FF; color: var(--rm-ai-cobalt);
  display: flex; align-items: center; justify-content: center; cursor: default;
}
.rm-cl-eclist { border-top: 1px solid #EEF1F7; padding: 5px; display: flex; flex-direction: column; gap: 1px; }
.rm-cl-ecrow { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 9px; transition: background .12s ease; }
.rm-cl-ecrow:hover { background: var(--rm-page); }
.rm-cl-ecavatar {
  width: 30px; height: 30px; flex: none; border-radius: 50%; background: #EEF1F7; color: var(--rm-muted);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px;
}
.rm-cl-ecmeta { min-width: 0; flex: 1; }
.rm-cl-ecname { font-size: 12.5px; font-weight: 600; color: var(--rm-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-cl-ecmail { font-size: 11px; color: var(--rm-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-cl-ecrole { flex: none; font-size: 10px; font-weight: 700; color: var(--rm-muted); background: var(--rm-fill); border-radius: 999px; padding: 2px 8px; }

.rm-cl-pills { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.rm-cl-pill {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--rm-muted);
  background: var(--rm-ghost-fill); border: 1px solid #EEF1F7; border-radius: 8px; padding: 5px 10px;
  cursor: pointer; transition: .14s ease; font-family: inherit; text-decoration: none;
}
.rm-cl-pill i { color: var(--rm-faint); }
.rm-cl-pill:hover { filter: brightness(.98); border-color: #B9CCFF; }
.rm-cl-pill--add { color: var(--rm-ai-cobalt); background: #EEF3FF; border: 1px dashed #A9C5F5; font-weight: 700; }
.rm-cl-pill--add i { color: var(--rm-ai-cobalt); }
.rm-cl-pill--add:hover { background: #E1EAFF; border-color: #7FA6FF; }
.rm-cl-pill--count { color: #1E50C8; background: #EEF3FF; border: 1px solid #D5E3FF; font-weight: 700; font-size: 12.5px; }
.rm-cl-pill--count i { color: #1E50C8; }
.rm-cl-lastact { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--rm-faint); font-weight: 600; cursor: default; }
.rm-cl-modrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 16px; }
.rm-cl-modchip {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 3px 9px;
  border-radius: 999px; background: #F1EEFC; color: var(--rm-module); border: 1px solid #E4DBFB;
}
.rm-cl-modchip--sm { font-size: 10.5px; padding: 2px 8px; }
.rm-cl-nomods { font-size: 11px; color: var(--rm-faint); font-weight: 600; }
.rm-cl-menucount { font-size: 11px; font-weight: 700; color: var(--rm-soft); background: var(--rm-fill); border-radius: 999px; padding: 1px 7px; }

.rm-cl-tablecard { background: #fff; border: 1px solid var(--rm-border); border-radius: 18px; box-shadow: var(--rm-shadow-resting); }
.rm-cl-thead {
  display: grid; grid-template-columns: 1.5fr 1.4fr 1fr 130px 90px 150px; gap: 16px; padding: 12px 22px;
  background: #FAFBFE; border-radius: 18px 18px 0 0; border-bottom: 1px solid #EEF1F7;
  font-family: var(--rm-font-mono); font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--rm-faint); align-items: center;
}
.rm-cl-trow {
  display: grid; grid-template-columns: 1.5fr 1.4fr 1fr 130px 90px 150px; gap: 16px; align-items: center;
  padding: 14px 22px; border-top: 1px solid #F1F4F9; transition: background .14s ease;
}
.rm-cl-trow:first-of-type { border-top: none; }
.rm-cl-trow:hover { background: #F8FAFF; }
.rm-cl-tclient { display: flex; align-items: center; gap: 11px; min-width: 0; }
.rm-cl-tclientmeta { min-width: 0; }
.rm-cl-tclientname { font-family: var(--rm-font-heading); font-weight: 700; font-size: 14px; color: var(--rm-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-cl-tclientloc { font-size: 11.5px; color: var(--rm-faint); }
.rm-cl-tcontact { display: flex; align-items: center; gap: 9px; min-width: 0; }
.rm-cl-tmods { display: flex; flex-wrap: wrap; gap: 5px; }
.rm-cl-tactions { display: flex; align-items: center; gap: 7px; justify-content: flex-end; }
.rm-cl-iconbtn {
  width: 32px; height: 32px; flex: none; border-radius: 9px; background: #fff; border: 1px solid #E4E9F1;
  display: flex; align-items: center; justify-content: center; color: var(--rm-faint); cursor: pointer; transition: all .15s ease;
}
.rm-cl-iconbtn:hover { border-color: var(--rm-ai-cobalt); background: #EEF3FF; color: var(--rm-ai-cobalt); }
.rm-cl-texpand { padding: 0 22px 12px; background: #FCFDFE; }
.rm-cl-texpandrow { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 2px; }
.rm-cl-ecchip { min-width: 210px; background: #fff; border: 1px solid #EEF1F7; border-radius: 11px; padding: 2px 6px; }

.rm-cl-logoedit { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.rm-cl-swatches { display: flex; align-items: center; gap: 7px; margin-top: 9px; }
.rm-cl-swatch { width: 24px; height: 24px; border-radius: 7px; cursor: pointer; transition: transform .12s ease; display: inline-block; }
.rm-cl-swatch:hover { transform: scale(1.08); }
.rm-cl-formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rm-cl-echead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 22px 0 12px; }
.rm-cl-eccards { display: flex; flex-direction: column; gap: 12px; }
.rm-cl-eccard { border: 1px solid #EEF1F7; border-radius: 12px; padding: 12px; background: #FAFBFE; }
.rm-cl-eccardhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.rm-cl-ecdel {
  width: 28px; height: 28px; flex: none; border-radius: 8px; background: #FFF1F3; border: 1px solid #FBD5DC;
  display: flex; align-items: center; justify-content: center; color: var(--rm-danger); cursor: pointer; transition: .15s ease;
}
.rm-cl-ecdel:hover { background: #FFE4E9; border-color: #F5A9B8; }
.rm-cl-ecgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rm-cl-ecempty { font-size: 12.5px; color: var(--rm-faint); }
.rm-cl-formfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid #EEF1F7; }
.rm-cl-warn {
  display: flex; align-items: flex-start; gap: 11px; background: #FEECEF; border: 1px solid #FBD5DC;
  border-radius: 12px; padding: 13px 14px; font-size: 13px; color: #7A2233; line-height: 1.5;
}
.rm-cl-confirmfoot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }

.rm-cl-drop {
  border: 2px dashed #C7DBFF; background: #F7FAFF; border-radius: 14px; padding: 24px; text-align: center;
  cursor: pointer; margin-bottom: 18px; transition: .15s ease;
}
.rm-cl-drop:hover { border-color: var(--rm-ai-cobalt); background: #F2F7FF; }
.rm-cl-dropicon {
  width: 46px; height: 46px; margin: 0 auto 10px; border-radius: 12px; background: #EBF1FF;
  display: flex; align-items: center; justify-content: center; color: var(--rm-ai-cobalt);
}
.rm-cl-droptitle { font-size: 14px; font-weight: 700; color: var(--rm-ink); }
.rm-cl-dropsub { font-size: 12px; color: var(--rm-soft); margin-top: 3px; }
.rm-cl-fileslabel {
  font-family: var(--rm-font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--rm-faint); margin-bottom: 10px;
}
.rm-cl-frows { display: flex; flex-direction: column; gap: 8px; }
.rm-cl-frow { display: flex; align-items: center; gap: 12px; border: 1px solid #EEF1F7; border-radius: 11px; padding: 11px 13px; transition: background .14s ease; }
.rm-cl-frow:hover { background: #F8FAFF; }
.rm-cl-fclick { cursor: pointer; }
.rm-cl-fmeta { flex: 1; min-width: 0; }
.rm-cl-fname { font-size: 13.5px; font-weight: 600; color: var(--rm-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-cl-fsub { font-size: 11.5px; color: var(--rm-soft); }
.rm-cl-fbtn {
  width: 30px; height: 30px; flex: none; border-radius: 8px; background: var(--rm-ghost-fill); border: 1px solid var(--rm-border);
  display: flex; align-items: center; justify-content: center; color: var(--rm-muted); cursor: pointer;
  opacity: 0; transition: opacity .15s ease;
}
.rm-cl-frow:hover .rm-cl-fbtn { opacity: 1; }
.rm-cl-fbtn--danger { background: #FFF1F3; border-color: #FBD5DC; color: var(--rm-danger); }
.rm-cl-previewpane { border: 1px solid var(--rm-border); border-radius: 12px; background: #EEF0F4; padding: 18px; max-height: 420px; overflow-y: auto; overflow-x: hidden; }
.rm-cl-previewpaper { background: #fff; border: 1px solid #E4E9F1; border-radius: 6px; box-shadow: 0 6px 18px -10px rgba(14,21,37,.3); padding: 24px 26px; overflow-x: auto; }
.rm-cl-previewnote {
  display: flex; align-items: flex-start; gap: 9px; background: #FFF7E8; border: 1px solid #FBE0B0;
  border-radius: 11px; padding: 11px 13px; font-size: 12px; color: #8A5A0B; line-height: 1.5; margin-bottom: 14px;
}

.rm-cl-cmphint {
  display: flex; align-items: center; gap: 10px; background: var(--rm-ghost-fill); border: 1px solid #EEF1F7;
  border-radius: 11px; padding: 10px 13px; margin-bottom: 12px; font-size: 12.5px; color: var(--rm-muted); line-height: 1.5;
}
.rm-cl-qrows { display: flex; flex-direction: column; gap: 8px; }
.rm-cl-qrow { display: flex; align-items: center; gap: 12px; border: 1px solid #EEF1F7; background: #fff; border-radius: 11px; padding: 11px 13px; transition: background .14s ease; }
.rm-cl-qrow--on { background: #F5F9FF; border-color: #CFE0FF; }
.rm-cl-qcheck {
  width: 20px; height: 20px; flex: none; border-radius: 6px; border: 1.5px solid #D3DAE6; background: #fff;
  display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer;
}
.rm-cl-qcheck--on { background: var(--rm-ai-cobalt); border-color: var(--rm-ai-cobalt); }
.rm-cl-qlink { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.rm-cl-qicon { width: 34px; height: 34px; flex: none; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.rm-cl-qmeta { flex: 1; min-width: 0; }
.rm-cl-qtitle { font-size: 13.5px; font-weight: 600; color: var(--rm-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-cl-qsub { font-size: 11.5px; color: var(--rm-soft); }
.rm-cl-qpillstatus { flex: none; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 10px; }

.rm-cl-cmpband { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #EEF1F7; }
.rm-cl-cmpside { padding: 14px 22px; }
.rm-cl-cmpsidelabel { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--rm-faint); }
.rm-cl-cmpsidetitle { font-size: 14px; font-weight: 700; color: var(--rm-ink); margin-top: 4px; }
.rm-cl-cmpsidedate { font-size: 11.5px; color: var(--rm-soft); margin-top: 2px; }
.rm-cl-cmpcounts { display: flex; align-items: center; gap: 9px; padding: 12px 22px; background: #FAFBFE; border-bottom: 1px solid #EEF1F7; flex-wrap: wrap; }
.rm-cl-cmpcount { font-size: 12px; font-weight: 700; border: 1px solid; border-radius: 999px; padding: 4px 11px; white-space: nowrap; }
.rm-cl-cmprows { padding: 14px 22px 22px; display: flex; flex-direction: column; gap: 12px; }
.rm-cl-cmprow { border: 1px solid; border-radius: 13px; overflow: hidden; }
.rm-cl-cmprowhead { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-bottom: 1px solid; }
.rm-cl-cmpref { font-family: var(--rm-font-mono); font-size: 11px; color: var(--rm-soft); }
.rm-cl-cmpq { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--rm-ink); }
.rm-cl-cmptag { flex: none; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 10px; }
.rm-cl-cmpanswers { display: grid; grid-template-columns: 1fr 1fr; }
.rm-cl-cmpans { padding: 12px 14px; font-size: 12.5px; line-height: 1.6; color: var(--rm-slate); }
.rm-cl-cmpfoot { display: flex; align-items: center; gap: 9px; justify-content: space-between; padding: 14px 22px; border-top: 1px solid #EEF1F7; }

@media (max-width: 900px) {
  .rm-cl-thead, .rm-cl-trow { grid-template-columns: 1.5fr 1.4fr 90px; }
  .rm-cl-thead span:nth-child(3), .rm-cl-thead span:nth-child(5), .rm-cl-thead span:nth-child(6),
  .rm-cl-trow > div:nth-child(3), .rm-cl-trow > div:nth-child(5), .rm-cl-trow > div:nth-child(6) { display: none; }
  .rm-cl-cmpband, .rm-cl-cmpanswers { grid-template-columns: 1fr; }
}

/* Account screen (M5, design: account.dc.html). Prefix .rm-ac-* */
.rm-ac-hero {
  background: var(--rm-hero-gradient); border: 1px solid var(--rm-hero-border); border-radius: 20px;
  padding: 26px 30px 0; position: relative; overflow: hidden;
}
.rm-ac-hero__row { display: flex; align-items: center; gap: 18px; position: relative; flex-wrap: wrap; }
.rm-ac-hero__avatar {
  width: 66px; height: 66px; flex: none; border-radius: 18px; background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center;
  font-family: var(--rm-font-heading); font-weight: 800; font-size: 26px; color: #fff; position: relative; cursor: pointer;
}
.rm-ac-hero__dot { right: -3px !important; bottom: -3px !important; width: 15px; height: 15px; border-color: #123C2E; box-shadow: none; }
.rm-ac-hero__id { flex: 1; min-width: 0; }
.rm-ac-hero__name { margin: 0; font-family: var(--rm-font-heading); font-weight: 800; font-size: 25px; letter-spacing: -.02em; color: #fff; }
.rm-ac-hero__meta { display: flex; align-items: center; gap: 14px; margin-top: 5px; font-size: 13.5px; color: rgba(255,255,255,.72); flex-wrap: wrap; }
.rm-ac-hero__meta i { color: #8FB2FF; }
.rm-ac-continue {
  margin-left: auto; flex: none; display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18); border-radius: 14px; padding: 10px 13px; text-decoration: none;
  max-width: 330px; transition: background .15s ease, border-color .15s ease;
}
.rm-ac-continue:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.34); }
.rm-ac-continue__icon { width: 38px; height: 38px; flex: none; border-radius: 11px; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; color: #fff; }
.rm-ac-continue__meta { min-width: 0; display: flex; flex-direction: column; }
.rm-ac-continue__label { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #C4CDDA; }
.rm-ac-continue__title { font-size: 13.5px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-ac-continue__sub { font-size: 11px; color: rgba(255,255,255,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-ac-hero__divider { height: 1px; background: rgba(255,255,255,.14); margin-top: 22px; }
.rm-ac-hero__tabs { display: flex; gap: 4px; position: relative; overflow-x: auto; }
.rm-ac-tab {
  padding: 13px 15px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.6); background: none; border: none;
  border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  white-space: nowrap; font-family: inherit; transition: color .15s ease, border-color .15s ease;
}
.rm-ac-tab:hover { color: #fff; }
.rm-ac-tab--on { color: #fff; font-weight: 800; border-bottom-color: var(--rm-green); }

/* The provider chip Responsemate's own account runs on (2026-08-24). */
.rm-ac-provdefault { margin-left: 6px; font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--rm-ai-cobalt); background: rgba(47, 107, 255, .1); border-radius: 999px; padding: 1px 6px; }
/* Disabled accounts on the members tab (2026-09-07): a collapsed group
   under the active members, cards and rows dimmed, an Inactive pill. */
.rm-ac-memcard--off { opacity: .72; }
.rm-ac-memcard--off .rm-ac-memname { color: var(--rm-muted); }
.rm-ac-rolepill--off { color: #B45309; background: #FEF3C7; border-color: #FDE68A; }
.rm-ac-disabledtoggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 16px; border: 1px dashed #D6DEEA; border-radius: 12px; background: transparent; color: var(--rm-ink); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; text-align: left; }
.rm-ac-disabledtoggle:hover { background: #F8FAFF; }
.rm-ac-disabledtoggle:focus-visible { outline: 2px solid var(--rm-ai-cobalt); outline-offset: 2px; }
.rm-ac-disabledhint { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--rm-muted); }
.rm-ac-accountblock { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
/* Generate a document (2026-09-07): the preview and its source keys. */
.rm-ac-docmeta { font-size: 12px; color: #5A6577; display: flex; align-items: center; gap: 6px; }
.rm-ac-docpreview { max-height: 52vh; overflow: auto; border: 1px solid #E7ECF3; border-radius: 12px; padding: 18px 22px; font-size: 13.5px; line-height: 1.6; color: var(--rm-ink); background: #fff; }
.rm-ac-docpreview h1 { font-size: 20px; margin: 0 0 10px; }
.rm-ac-docpreview h2 { font-size: 15.5px; margin: 18px 0 6px; }
.rm-ac-docpreview h3 { font-size: 14px; margin: 14px 0 4px; }
.rm-ac-docpreview p { margin: 0 0 10px; }
.rm-ac-docpreview ul, .rm-ac-docpreview ol { margin: 0 0 10px 20px; padding: 0; }
.rm-ac-docpreview blockquote { margin: 8px 0; padding: 8px 12px; border-left: 3px solid #F5B44C; background: #FFF8E8; color: #8A5A00; border-radius: 6px; font-style: italic; }
.rm-ac-docsources { display: flex; flex-wrap: wrap; gap: 6px; }
.rm-ac-docsource { font-size: 11.5px; color: #5A6577; background: #F1F4F9; border-radius: 999px; padding: 3px 9px; }
/* Responsemate help in chat (2026-09-07): the AI tab's switch. */
.rm-ac-helptoggle { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid #E7ECF3; border-radius: 12px; background: #F8FAFF; margin-top: 14px; cursor: pointer; }
.rm-ac-helptoggle input { margin-top: 3px; accent-color: #2F6BFF; }
.rm-ac-helptoggle__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rm-ac-helptoggle__label { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--rm-ink); }
.rm-ac-helptoggle__note { font-size: 12px; color: #5A6577; line-height: 1.5; }
/* What each role can do (2026-09-07): a collapsed matrix under the role picker. */
.rm-ac-caps { margin-top: 10px; }
.rm-ac-caps__toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--rm-ai-cobalt); cursor: pointer; list-style: none; }
.rm-ac-caps__toggle::-webkit-details-marker { display: none; }
.rm-ac-caps__toggle:focus-visible { outline: 2px solid var(--rm-ai-cobalt); outline-offset: 2px; border-radius: 4px; }
.rm-ac-caps__wrap { overflow-x: auto; margin-top: 8px; border: 1px solid #E7ECF3; border-radius: 10px; }
.rm-ac-caps__table { border-collapse: collapse; width: 100%; font-size: 12px; }
.rm-ac-caps__table th { text-align: center; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #5A6577; padding: 7px 8px; background: #F8FAFF; border-bottom: 1px solid #E7ECF3; white-space: nowrap; }
.rm-ac-caps__table td { padding: 6px 8px; border-bottom: 1px solid #F1F4F9; }
.rm-ac-caps__table tr:last-child td { border-bottom: 0; }
.rm-ac-caps__what { text-align: left !important; color: var(--rm-ink); min-width: 200px; }
.rm-ac-caps__cell { text-align: center; color: #C6CDDA; }
.rm-ac-caps__cell--on { color: #0B8A63; }
.rm-ac-accountnote { font-size: 12.5px; color: var(--rm-muted); margin-top: 3px; max-width: 34ch; }
.rm-ac-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.rm-ac-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.rm-ac-card { padding: 22px; }
.rm-ac-cardtitle { font-family: var(--rm-font-heading); font-weight: 800; font-size: 16px; color: var(--rm-ink); }
.rm-ac-cardsub { font-size: 13px; color: var(--rm-soft); margin-top: 2px; margin-bottom: 16px; }
.rm-ac-sectiontitle { font-family: var(--rm-font-heading); font-weight: 800; font-size: 18px; color: var(--rm-ink); }
.rm-ac-sectionsub { font-size: 13px; color: var(--rm-soft); margin-top: 2px; }
.rm-ac-hairline { height: 1px; background: var(--rm-fill); margin: 16px 0 13px; }
.rm-ac-lockedfield {
  display: flex; align-items: center; gap: 9px; border: 1px solid var(--rm-border); background: var(--rm-ghost-fill);
  border-radius: 11px; padding: 11px 13px; font-size: 14px; font-weight: 700; color: var(--rm-muted);
}
.rm-ac-lockedfield i { color: var(--rm-faint); flex: none; }
.rm-ac-lockednote { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--rm-faint); }
.rm-ac-roleability { font-size: 11.5px; color: var(--rm-soft); margin-top: 7px; line-height: 1.5; }
.rm-ac-prefrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid #F1F4F9; }
.rm-ac-prefrow:last-child { border-bottom: none; }
.rm-ac-preflabel { font-size: 13.5px; font-weight: 600; color: var(--rm-ink); }
.rm-ac-prefsub { font-size: 12px; color: var(--rm-soft); margin-top: 1px; }
/* Link status under "Mentions in Slack": muted line with an inline text
   button to self-link; green check once linked (2026-08-19). */
.rm-ac-linkline { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 5px; font-size: 12px; color: var(--rm-muted); }
.rm-ac-linkline--ok { color: var(--rm-green-deep); font-weight: 600; }
.rm-ac-linkbtn { border: none; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--rm-ai-cobalt); cursor: pointer; }
.rm-ac-linkbtn:hover { text-decoration: underline; }
.rm-ac-linkbtn:disabled { color: var(--rm-muted); cursor: default; text-decoration: none; }
.rm-ac-linkline__msg { flex-basis: 100%; color: var(--rm-danger); }
.rm-ac-lockchip {
  display: inline-flex; align-items: center; gap: 6px; flex: none; white-space: nowrap; font-size: 11.5px;
  font-weight: 700; color: var(--rm-muted); background: var(--rm-ghost-fill); border: 1px solid var(--rm-border);
  border-radius: 999px; padding: 4px 10px; cursor: default;
}
.rm-ac-switch {
  width: 42px; height: 24px; flex: none; border-radius: 999px; background: #CBD5E3; position: relative;
  cursor: pointer; transition: background .18s ease; display: inline-block;
}
.rm-ac-switch--on { background: var(--rm-green); }
.rm-ac-switch__knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .18s ease; }
.rm-ac-switch--on .rm-ac-switch__knob { left: 20px; }
.rm-ac-intchips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border: 1px solid var(--rm-border); background: #FBFCFE; border-radius: 11px; padding: 11px 12px; cursor: pointer; transition: background .15s ease; }
.rm-ac-intchips:hover { background: #EDF0F5; }
.rm-ac-intchip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--rm-slate); background: #fff; border: 1px solid var(--rm-border); border-radius: 999px; padding: 4px 10px; }
.rm-ac-manage { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--rm-ai-cobalt-deep); white-space: nowrap; }

.rm-ac-workcard { margin-top: 18px; padding: 0; overflow: hidden; }
.rm-ac-workhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #EEF1F7; }
.rm-ac-countpill { font-size: 12px; font-weight: 700; color: var(--rm-soft); background: var(--rm-page); border-radius: 999px; padding: 4px 11px; }
.rm-ac-workcols, .rm-ac-collabcols {
  display: grid; gap: 16px; padding: 12px 22px; background: #FAFBFE; border-bottom: 1px solid #EEF1F7;
  font-family: var(--rm-font-mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--rm-faint); align-items: center;
}
.rm-ac-workcols { grid-template-columns: 1fr 230px 170px 116px; }
.rm-ac-collabcols { grid-template-columns: 1.7fr 1fr 130px 140px; }
.rm-ac-workrow, .rm-ac-collabrow {
  display: grid; gap: 16px; align-items: center; padding: 15px 22px 15px 19px; border-top: 1px solid #F1F4F9;
  border-left: 3px solid transparent; color: inherit; text-decoration: none; transition: background .14s ease;
}
.rm-ac-workrow { grid-template-columns: 1fr 230px 170px 116px; }
.rm-ac-collabrow { grid-template-columns: 1.7fr 1fr 130px 140px; }
.rm-ac-workrow:hover, .rm-ac-collabrow:hover, .rm-ac-memrow:hover, .rm-ac-mdqrow:hover, .rm-ac-mdrecent:hover { background: #F8FAFF; }
.rm-ac-workq { min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--rm-ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.rm-ac-workqnr { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-family: var(--rm-font-heading); font-weight: 700; font-size: 12.5px; color: var(--rm-ai-cobalt-deep); text-decoration: none; }
.rm-ac-workqnr i { color: #8FA8D8; flex: none; }
.rm-ac-workqnr span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-ac-workby { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12.5px; color: var(--rm-muted); }
.rm-ac-workby span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-ac-duepill { justify-self: start; font-size: 11.5px; font-weight: 700; border: 1px solid; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.rm-ac-collabtitle { min-width: 0; font-family: var(--rm-font-heading); font-weight: 700; font-size: 14.5px; color: var(--rm-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-ac-collabclient { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--rm-soft); }
.rm-ac-collabclient i { color: var(--rm-faint); flex: none; }
.rm-ac-collabclient span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-ac-collabrole { font-size: 12.5px; font-weight: 600; color: var(--rm-muted); }
.rm-ac-showmore { display: flex; width: 100%; align-items: center; justify-content: center; gap: 7px; padding: 13px; border: none; border-top: 1px solid #F1F4F9; background: none; font-size: 12.5px; font-weight: 700; color: var(--rm-muted); cursor: pointer; font-family: inherit; transition: background .14s ease; }
.rm-ac-showmore:hover { background: #F8FAFF; }
.rm-ac-empty { padding: 18px 22px; font-size: 13px; color: var(--rm-faint); }

.rm-ac-orghead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.rm-ac-memgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.rm-ac-memcard { padding: 18px; cursor: pointer; }
.rm-ac-memcard--hl { background: #FFF9E8; border-color: #D6DEEA; }
.rm-ac-memname { font-size: 15px; font-weight: 800; font-family: var(--rm-font-heading); color: var(--rm-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-ac-memtitle { font-size: 12px; font-weight: 600; color: var(--rm-soft); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-ac-memmail { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--rm-soft); margin-top: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-ac-memmail i { color: var(--rm-faint); }
.rm-ac-memwork { font-size: 12.5px; font-weight: 600; color: var(--rm-slate); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-ac-memtable { background: #fff; border: 1px solid var(--rm-border); border-radius: 16px; overflow: hidden; }
.rm-ac-memcols {
  display: grid; grid-template-columns: 1.5fr 1.1fr 1fr 104px 1.2fr; gap: 16px; padding: 12px 20px; background: #FAFBFE;
  border-bottom: 1px solid #EEF1F7; font-family: var(--rm-font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--rm-faint);
}
.rm-ac-memrow { cursor: pointer; display: grid; grid-template-columns: 1.5fr 1.1fr 1fr 104px 1.2fr; gap: 16px; align-items: center; padding: 13px 20px; border-top: 1px solid #F1F4F9; transition: background .14s ease; }
.rm-ac-rolepill { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; border: 1px solid; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.rm-ac-rolechip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 9px 14px;
  border-radius: 10px; cursor: pointer; background: #FBFCFE; color: var(--rm-muted); border: 1px solid #EAEEF5;
  transition: .14s ease; font-family: inherit;
}
.rm-ac-rolechip--on { background: #EBF1FF; color: var(--rm-ai-cobalt-deep); border-color: #B9D0FF; }
.rm-ac-inviterow { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid #F1F4F9; }
.rm-ac-inviteicon { width: 32px; height: 32px; flex: none; border-radius: 9px; background: #EBF1FF; color: var(--rm-ai-cobalt); display: flex; align-items: center; justify-content: center; }
.rm-ac-avwrap { position: relative; }

.rm-ac-mdfacts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; border: 1px solid #EEF1F7; background: #FAFBFE; border-radius: 12px; padding: 14px 16px; }
.rm-ac-mdfact { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--rm-ink); min-width: 0; }
.rm-ac-mdfact i { color: var(--rm-faint); flex: none; }
.rm-ac-mdfact span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-ac-mdqrow { display: flex; align-items: center; gap: 10px; border: 1px solid #EEF1F7; border-radius: 11px; padding: 10px 12px; text-decoration: none; color: inherit; transition: background .14s ease; }
.rm-ac-mdqicon { width: 28px; height: 28px; flex: none; border-radius: 9px; background: #EBF1FF; color: var(--rm-ai-cobalt); display: flex; align-items: center; justify-content: center; }
.rm-ac-mdqtitle { font-size: 13px; font-weight: 700; color: var(--rm-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-ac-mdqsub { font-size: 11.5px; color: var(--rm-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-ac-mdrecent { display: flex; align-items: center; gap: 12px; padding: 11px 8px; border-radius: 11px; color: inherit; text-decoration: none; transition: background .14s ease; }

.rm-ac-healthbtn {
  flex: none; display: inline-flex; align-items: center; gap: 8px; background: #F3FBF7; color: #0B6E4F;
  border: 1px solid #C6EDD9; font-family: inherit; font-weight: 700; font-size: 12.5px; padding: 9px 13px;
  border-radius: 10px; cursor: pointer; transition: .15s ease;
}
.rm-ac-healthbtn--warn { background: #FDF3E7; color: #8A5A0B; border-color: #F3DFAE; }
.rm-ac-healthdot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.rm-ac-healthsep { display: inline-flex; align-items: center; gap: 4px; padding-left: 8px; border-left: 1px solid #C6EDD9; }
.rm-ac-stattitle { display: flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--rm-faint); }
.rm-ac-statvalue { font-family: var(--rm-font-heading); font-weight: 800; font-size: 19px; color: var(--rm-ink); margin-top: 9px; overflow: hidden; text-overflow: ellipsis; }
.rm-ac-statsub { font-size: 12px; color: var(--rm-soft); margin-top: 3px; }
.rm-ac-modelgrid { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rm-ac-modelbtn {
  display: flex; width: 100%; align-items: center; gap: 8px; border: 1px solid var(--rm-input-border);
  background: var(--rm-input-fill); border-radius: 10px; padding: 10px 13px; cursor: pointer; font-family: inherit;
}
.rm-ac-modelbtn .rm-mono { font-size: 13px; color: var(--rm-ink); }
.rm-ac-keynote { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--rm-faint); margin-top: 7px; }

/* AI tab: operational readiness + server env defaults (restored from the
   pre-redesign AI page). */
.rm-ac-health { background: linear-gradient(135deg, #F3F7FF, #FAFBFF); border-color: #DCE6FA; }
.rm-ac-health__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .rm-ac-health__grid { grid-template-columns: 1fr; } }
.rm-ac-health__tiles { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.rm-ac-health__tile { border: 1px dashed #B9CDF5; background: #fff; border-radius: 10px; padding: 9px 12px; min-width: 150px; }
.rm-ac-health__val { font-family: var(--rm-font-heading); font-weight: 800; font-size: 15px; color: var(--rm-ink); margin-top: 3px; }
.rm-ac-health__test { background: #fff; border: 1px solid var(--rm-border); border-radius: 12px; padding: 14px 16px; }
.rm-ac-health__result { font-size: 12.5px; font-weight: 700; color: var(--rm-muted); }
.rm-ac-health__log { font-size: 11.5px; color: var(--rm-soft); margin-top: 10px; line-height: 1.5; word-break: break-word; }
.rm-ac-health__sub { font-size: 11.5px; color: var(--rm-soft); margin-top: 2px; }
.rm-ac-healthbtn--static { cursor: default; }
/* Readiness list (2026-08-19): one line per fact, toned by importance. */
.rm-ac-hl { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rm-ac-hl__item { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid #EEF1F7; background: #FAFBFE; }
.rm-ac-hl__item--error { background: #FFF3F5; border-color: #F7CDD6; }
.rm-ac-hl__item--warn { background: #FFF8EE; border-color: #F3DFAE; }
.rm-ac-hl__item--ok { background: #F3FBF7; border-color: #D4EFE2; }
.rm-ac-hl__ic { flex: none; display: inline-flex; margin-top: 1px; }
.rm-ac-hl__body { min-width: 0; flex: 1; }
.rm-ac-hl__title { font-size: 12.5px; font-weight: 700; color: var(--rm-ink); line-height: 1.35; }
.rm-ac-hl__detail { font-size: 11.5px; color: var(--rm-muted); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; line-height: 1.4; }
.rm-ac-hl__ago { color: var(--rm-soft); }
.rm-ac-hl__mono { font-size: 11px; color: var(--rm-muted); word-break: break-all; }
.rm-ac-hl__more { margin-top: 4px; font-size: 11.5px; }
.rm-ac-hl__more summary { cursor: pointer; color: var(--rm-ai-cobalt-deep); font-weight: 700; }
.rm-ac-hl__err { margin-top: 4px; font-size: 11px; color: var(--rm-muted); white-space: pre-wrap; word-break: break-word; max-height: 160px; overflow-y: auto; }
/* Calls vs successes chart in the health card */
.rm-ac-hchart { margin-top: 14px; background: #fff; border: 1px solid var(--rm-border); border-radius: 12px; padding: 12px 14px 10px; }
.rm-ac-hchart__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.rm-ac-hchart__legend { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--rm-soft); }
.rm-ac-hchart__legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-left: 6px; }
.rm-ac-hchart__legend i:first-child { margin-left: 0; }
.rm-ac-hchart__legend-line { width: 14px !important; height: 0 !important; border-top: 2px dashed #7A5AF8; border-radius: 0 !important; }
.rm-ac-hchart__plot { position: relative; }
.rm-ac-hchart__yl, .rm-ac-hchart__yr { position: absolute; top: 0; bottom: 0; font-size: 9.5px; font-weight: 700; color: #B4BECC; pointer-events: none; }
.rm-ac-hchart__yl { left: 0; }
.rm-ac-hchart__yl span { padding-right: 6px; }
.rm-ac-hchart__yr { right: 0; }
.rm-ac-hchart__yr span { padding-left: 6px; color: #A99BE8; }
.rm-ac-hchart__xl { position: absolute; bottom: 0; height: 16px; font-size: 9.5px; font-weight: 700; color: #B4BECC; }
.rm-ac-hchart__xl span { position: absolute; bottom: 0; white-space: nowrap; }
/* Provider logos: single-colour brand marks painted through a mask */
.rm-ac-provlogo { display: inline-block; flex: none; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.rm-ac-provchip { padding-left: 11px; }
.rm-ac-provsub { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 12px; color: var(--rm-muted); }
.rm-ac-fieldnote { font-size: 11.5px; color: #95A0B2; margin-top: 5px; }
.rm-ac-optional { font-weight: 600; font-size: 11px; color: var(--rm-soft); text-transform: none; letter-spacing: 0; margin-left: 4px; }
.rm-ac-modelbtn--locked { cursor: default; background: #F6F8FC; border-style: dashed; color: var(--rm-muted); }
.rm-ac-modelbtn--locked .rm-mono { color: var(--rm-muted); }
.rm-ac-lockpill { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--rm-soft); background: #F1F4F9; border-radius: 6px; padding: 2px 6px; margin-left: 6px; vertical-align: middle; }
.rm-ac-modelfree { display: flex; gap: 8px; align-items: stretch; }
.rm-ac-modelfree .rm-input { flex: 1; min-width: 0; }
.rm-ac-modelbtn--sugg { width: auto; flex: none; padding: 10px 11px; }
.rm-ac-envtable { width: 100%; border-collapse: collapse; font-size: 13px; }
.rm-ac-envtable th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--rm-label); padding: 6px 8px 8px 0; border-bottom: 1px solid var(--rm-border); }
.rm-ac-envtable td { padding: 8px 8px 8px 0; border-bottom: 1px dashed #EEF1F7; vertical-align: middle; }
.rm-ac-envvar { font-weight: 700; color: var(--rm-ink); white-space: nowrap; }
.rm-ac-envtable code { background: #F6F2FB; color: #B0246E; padding: 2px 7px; border-radius: 6px; font-size: 12px; }
.rm-ac-envpill { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.rm-ac-envpill--ok { background: #E4F6EE; color: #0B8A63; }
.rm-ac-envpill--no { background: #FDECEF; color: #D81E46; }
/* AI tab: models per feature (2026-08-20) */
.rm-ac-featgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin-top: 12px; }
@media (max-width: 980px) { .rm-ac-featgrid { grid-template-columns: 1fr; } }
.rm-ac-featrow { display: flex; align-items: center; gap: 12px; border: 1px solid var(--rm-border); border-radius: 12px; padding: 10px 12px; background: #FBFCFE; }
.rm-ac-featrow__text { flex: 1; min-width: 0; }
.rm-ac-featrow__name { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--rm-ink); }
.rm-ac-featrow__desc { font-size: 11.5px; color: var(--rm-muted); margin-top: 2px; line-height: 1.45; }
.rm-ac-featrow__input { width: 190px; flex: none; }
.rm-ac-feattier { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #5A6577; background: var(--rm-fill); border-radius: 999px; padding: 2px 7px; cursor: default; }
.rm-ac-feattier--light { color: #0B6E4F; background: #E7F7F0; }

.rm-ac-clearrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* Integration config modals: setup guides, scope table, field helpers */
.rm-ac-cfgbody { display: flex; flex-direction: column; gap: 14px; }
/* Integration switched off: the form is dimmed and inert, but the setup
   guides stay readable (you read them BEFORE turning it on). MCP keeps its
   read-only URLs selectable. */
.rm-ac-cfgbody--off > :not(.rm-ac-guide) { opacity: .55; }
.rm-ac-cfgbody--off:not(.rm-ac-cfgbody--mcp) > :not(.rm-ac-guide) { pointer-events: none; }
.rm-ac-fieldgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .rm-ac-fieldgrid { grid-template-columns: 1fr; } }
.rm-ac-fieldsub { font-size: 11.5px; color: var(--rm-soft); margin-top: 5px; line-height: 1.5; }
.rm-ac-fieldsub code, .rm-ac-guide code { background: #F6F2FB; color: #B0246E; padding: 1px 6px; border-radius: 5px; font-family: var(--rm-font-mono); font-size: 11.5px; }
.rm-ac-tip { display: inline-flex; vertical-align: middle; color: #95A0B2; cursor: help; }
.rm-ac-guide { border: 1px solid #EEF1F7; border-radius: 12px; background: #FBFCFE; }
.rm-ac-guide[open] { background: #fff; }
.rm-ac-guide__sum { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 12.5px; font-weight: 700; color: var(--rm-muted); cursor: pointer; list-style: none; user-select: none; }
.rm-ac-guide__sum::-webkit-details-marker { display: none; }
.rm-ac-guide__sum:hover { color: var(--rm-ink); }
.rm-ac-guide[open] .rm-ac-guide__sum svg:last-child { transform: rotate(180deg); }
.rm-ac-guide__body { padding: 2px 14px 14px; font-size: 12.5px; color: var(--rm-slate); line-height: 1.55; }
.rm-ac-guide__p { margin: 0 0 10px; }
.rm-ac-guide__ol { margin: 0 0 10px; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; }
.rm-ac-scopes { width: 100%; border-collapse: collapse; font-size: 12px; }
.rm-ac-scopes th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--rm-label); padding: 4px 6px 6px 0; border-bottom: 1px solid var(--rm-border); }
.rm-ac-scopes td { padding: 5px 6px 5px 0; border-bottom: 1px dashed #EEF1F7; vertical-align: middle; }
.rm-ac-testline { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; padding: 8px 11px; border-radius: 9px; }
.rm-ac-testline--ok { background: #E4F6EE; color: #0B8A63; }
.rm-ac-testline--warn { background: #FFF4E0; color: #B7791F; }
.rm-ac-testline--err { background: #FDECEF; color: #D81E46; }
.rm-ac-syncline { font-size: 12px; color: var(--rm-muted); margin-top: 10px; line-height: 1.5; }
.rm-ac-newtoken { border: 1px solid #BFD1EC; background: #EFF4FF; border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
.rm-ac-newtoken__title { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12.5px; color: var(--rm-ink); margin-bottom: 8px; }

.rm-ac-intcard { padding: 20px; }
.rm-ac-intlogo { width: 46px; height: 46px; flex: none; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; }
.rm-ac-intstatus { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; margin-top: 3px; }
.rm-ac-intdesc { font-size: 13px; color: var(--rm-muted); line-height: 1.55; margin-top: 13px; }
.rm-ac-confignote {
  display: flex; align-items: flex-start; gap: 10px; background: var(--rm-ghost-fill); border: 1px solid #EEF1F7;
  border-radius: 12px; padding: 12px 14px; font-size: 12.5px; color: var(--rm-muted); line-height: 1.55;
}
.rm-ac-confignote i { flex: none; margin-top: 1px; color: var(--rm-faint); }
.rm-ac-sprow { display: flex; align-items: center; gap: 8px; border: 1px solid #EEF1F7; border-radius: 10px; padding: 8px 11px; }
.rm-ac-spdel { width: 24px; height: 24px; flex: none; border-radius: 7px; background: #FFF1F3; border: 1px solid #FBD5DC; display: flex; align-items: center; justify-content: center; color: var(--rm-danger); cursor: pointer; }

@media (max-width: 900px) {
  .rm-ac-grid2, .rm-ac-grid3, .rm-ac-modelgrid { grid-template-columns: 1fr; }
  .rm-ac-workcols, .rm-ac-workrow { grid-template-columns: 1fr 116px; }
  .rm-ac-workcols span:nth-child(2), .rm-ac-workcols span:nth-child(3),
  .rm-ac-workrow > .rm-ac-workqnr, .rm-ac-workrow > .rm-ac-workby { display: none; }
  .rm-ac-collabcols, .rm-ac-collabrow { grid-template-columns: 1.7fr 140px; }
  .rm-ac-collabcols span:nth-child(2), .rm-ac-collabcols span:nth-child(3),
  .rm-ac-collabrow > .rm-ac-collabclient, .rm-ac-collabrow > .rm-ac-collabrole { display: none; }
  .rm-ac-memcols, .rm-ac-memrow { grid-template-columns: 1.5fr 104px; }
  .rm-ac-memcols span:nth-child(2), .rm-ac-memcols span:nth-child(3), .rm-ac-memcols span:nth-child(5),
  .rm-ac-memrow > div:nth-child(2), .rm-ac-memrow > div:nth-child(3), .rm-ac-memrow > div:nth-child(5) { display: none; }
}

/* Activity history screen (M5, design: activity-history.dc.html). Prefix .rm-ah-* */
.rm-ah-filters { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.rm-ah-filters .rm-toolbar__search { flex: 1; min-width: 200px; max-width: 360px; margin-left: auto; }
/* (The bespoke two-button actors toggle that sat here is gone since
   2026-08-24: both the activity page and the questionnaire tab use the
   site's blue .rm-seg slider - see .rm-seg--wide.) */
.rm-ah-filters .rm-seg { margin-right: auto; }
.rm-ah-filters--tab { margin-top: 0; }
.rm-ah-timeline { margin-top: 20px; padding: 24px 26px; border-radius: 20px; }
.rm-ah-day { margin-bottom: 8px; display: inline-flex; align-items: center; gap: 9px; }
.rm-ah-daypill {
  font-family: var(--rm-font-mono); font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--rm-slate); background: var(--rm-fill); border: 1px solid #E2E7F0;
  padding: 4px 10px; border-radius: 8px;
}
.rm-ah-daysummary { font-size: 13px; font-weight: 600; color: var(--rm-muted); }
.rm-ah-dayitems { padding: 6px 0 4px; }
.rm-ah-item { display: grid; grid-template-columns: 64px 32px minmax(0, 1fr); gap: 14px; align-items: stretch; }
.rm-ah-item + .rm-ah-item { margin-top: 16px; }
.rm-ah-time { text-align: right; padding-top: 4px; }
.rm-ah-timevalue { font-weight: 700; color: var(--rm-ink); font-size: 13px; }
.rm-ah-timezone { color: var(--rm-placeholder); font-size: 11px; }
.rm-ah-line { position: relative; display: flex; justify-content: center; padding-top: 2px; }
.rm-ah-line::before { content: ""; position: absolute; left: 15px; top: 36px; bottom: -20px; width: 2px; background: #EAEEF5; }
.rm-ah-item:last-child .rm-ah-line::before { display: none; }
.rm-ah-dot { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; z-index: 1; }
.rm-ah-card { background: #FAFBFE; border: 1px solid #EEF1F7; border-radius: 14px; padding: 14px 16px; }
.rm-ah-cardtop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.rm-ah-cardmain { min-width: 0; flex: 1; }
.rm-ah-tag {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
  border: 1px solid; padding: 3px 9px; border-radius: 7px; margin-bottom: 7px;
}
.rm-ah-headline { font-family: var(--rm-font-heading); font-weight: 700; font-size: 15px; color: var(--rm-ink); margin-bottom: 4px; }
.rm-ah-target { color: var(--rm-ink); text-decoration: underline; text-decoration-color: #CBD5E1; text-underline-offset: 2px; }
.rm-ah-target:hover { color: var(--rm-ai-cobalt-deep); }
.rm-ah-detail { font-size: 13.5px; color: var(--rm-muted); line-height: 1.5; }
/* Renamed from .rm-ah-actor (2026-08-24): that name was ALSO the actors
   toggle button's, and the later rule silently turned the buttons into flex
   boxes. The toggle is the site's .rm-seg now. */
.rm-ah-actorline { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.rm-ah-actorname { font-size: 12px; color: var(--rm-soft); }
.rm-ah-repeat { font-family: var(--rm-font-mono); font-size: 10.5px; font-weight: 700; color: var(--rm-muted); background: var(--rm-fill); border-radius: 999px; padding: 2px 7px; }
/* What an answer edit changed: old -> new, one line, clamped. */
.rm-ah-change { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; font-size: 12.5px; line-height: 1.45; }
.rm-ah-change__from { color: #B4123F; text-decoration: line-through; text-decoration-color: rgba(180, 18, 63, .45); min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; flex: 1; }
.rm-ah-change__to { color: #0B6E4C; font-weight: 600; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; flex: 1; }
.rm-ah-change i { font-style: italic; color: var(--rm-faint); font-weight: 500; text-decoration: none; }
/* A grouped entry unfolds to its members. */
.rm-ah-fold { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 3px 8px; font-family: var(--rm-font-body); font-size: 12px; font-weight: 700; color: var(--rm-ai-cobalt); background: transparent; border: 1px dashed #D5E3FF; border-radius: 8px; cursor: pointer; }
.rm-ah-fold:hover { background: #EBF1FF; }
.rm-ah-members { margin-top: 8px; border-left: 2px solid #E4E9F1; padding-left: 12px; display: flex; flex-direction: column; gap: 6px; }
.rm-ah-member { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; color: var(--rm-ink); line-height: 1.45; }
.rm-ah-member__time { flex: none; width: 44px; font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--rm-faint); padding-top: 1px; }
.rm-ah-member__text { flex: 1; min-width: 0; }
.rm-ah-member--more { color: var(--rm-faint); font-style: italic; }
/* Hero: the activity-volume graph beside the date button (2026-08-24). */
.rm-ah-hero { margin-top: 18px; }
.rm-ah-graph { position: relative; }
.rm-ah-graph__legend { display: flex; align-items: center; gap: 16px; font-size: 11.5px; color: rgba(255, 255, 255, .7); margin-bottom: 6px; }
.rm-ah-graph__legend span { display: inline-flex; align-items: center; gap: 6px; }
.rm-ah-graph__legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.rm-ah-graph__legend b { font-family: var(--rm-font-heading); font-weight: 800; color: #fff; }
.rm-ah-graph__unit { margin-left: auto; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: rgba(255, 255, 255, .5); }
.rm-ah-graph__plot { position: relative; padding-bottom: 16px; }
.rm-ah-graph__plot rect { cursor: default; }
.rm-ah-graph__xl { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; font-size: 10.5px; color: rgba(255, 255, 255, .5); }
.rm-ah-graph__max { position: absolute; right: 0; top: 0; font-size: 10.5px; font-weight: 700; color: rgba(255, 255, 255, .55); cursor: default; }
.rm-ah-graph__empty { font-size: 12.5px; color: rgba(255, 255, 255, .55); padding: 26px 0; }
/* Group menu: one row per category (2026-08-25 second cut). */
.rm-ah-menu--tall { max-height: min(70vh, 560px); overflow-y: auto; }
/* Wider segmented control for two-word options (the actors slider: All
   events / User actions / System actions). */
.rm-seg--wide .rm-seg__opt, .rm-seg--wide .rm-seg__thumb { width: 118px; }
.rm-ah-empty { border: 1px dashed #D8DEE9; border-radius: 16px; padding: 40px; text-align: center; }
.rm-ah-emptytitle { font-size: 15px; font-weight: 700; color: var(--rm-ink); }
.rm-ah-emptysub { font-size: 13px; color: var(--rm-soft); margin-top: 5px; }
.rm-ah-menucount { font-size: 12px; font-weight: 700; color: var(--rm-faint); }
/* Date-range menu (presets + the shared range calendar + All time / Done
   foot). Shared since 2026-08-19 (.rm-datemenu*, used by activity history
   and the AI logs); the rm-ah-* names stay as aliases. */
.rm-ah-datemenu, .rm-datemenu { width: 320px; padding: 8px; }
.rm-ah-datefoot, .rm-datemenu__foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #EEF1F7; }
.rm-ah-datelink, .rm-datemenu__link { background: none; border: none; font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--rm-muted); cursor: pointer; padding: 4px 6px; }
.rm-ah-datelink--primary, .rm-datemenu__link--primary { color: var(--rm-ai-cobalt); }
.rm-datemenu__link:disabled { opacity: .45; cursor: default; }
.rm-ah-ellipsis { min-width: 20px; text-align: center; color: var(--rm-faint); font-weight: 700; }
.rm-datepick__day--inrange { background: #EBF1FF; color: var(--rm-ai-cobalt-deep); border-radius: 0; }
@media (max-width: 640px) {
  .rm-ah-item { grid-template-columns: 52px 28px minmax(0, 1fr); gap: 10px; }
}

/* ============================================================
   Site dashboard (M6, design: site-dashboard.dc.html)
   Structural classes for views/layout/dashboard.ejs + rm-dashboard.js.
   ============================================================ */

/* Hero */
.rm-db-hero {
  background: var(--rm-hero-gradient); border: 1px solid var(--rm-hero-border);
  border-radius: 20px; padding: 28px 30px; position: relative;
}
.rm-db-hero__glow { position: absolute; inset: 0; overflow: hidden; border-radius: 20px; pointer-events: none; }
.rm-db-hero__glow::before {
  content: ""; position: absolute; right: -50px; top: -90px; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(70, 210, 150, .26), transparent 70%);
}
.rm-db-hero__glow::after {
  content: ""; position: absolute; left: 38%; bottom: -160px; width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 107, 255, .18), transparent 70%);
}
.rm-db-hero__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; position: relative; }
.rm-db-hero__intro { flex: 1 1 340px; min-width: 0; }
.rm-db-hero__title { margin: 0; font-family: var(--rm-font-heading); font-weight: 800; font-size: 30px; letter-spacing: -.025em; color: #fff; }
.rm-db-hero__summary { margin: 8px 0 0; font-size: 14.5px; color: rgba(255, 255, 255, .72); max-width: 620px; line-height: 1.6; }
.rm-db-hero__grid {
  display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1fr);
  gap: 14px; margin-top: 24px; position: relative; align-items: stretch;
}
.rm-db-hero__right { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* What's new dropdown in the hero */
.rm-db-news { position: relative; flex: none; width: 290px; max-width: 100%; }
.rm-db-news__head {
  display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; padding: 9px 12px;
  text-decoration: none; transition: background .16s ease, border-color .16s ease;
}
.rm-db-news:hover .rm-db-news__head { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); }
.rm-db-news__icon {
  width: 26px; height: 26px; flex: none; border-radius: 8px; background: rgba(255, 255, 255, .12);
  color: var(--rm-mint); display: flex; align-items: center; justify-content: center;
}
.rm-db-news__icon--row { background: rgba(255, 255, 255, .1); }
.rm-db-news__headtext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rm-db-news__kicker { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.rm-db-news__lead { font-size: 12.5px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Hover popup. The 8px gap to the head is bridged by the panel's own top
   padding (no dead zone between box and popup), and closing waits 300ms so
   the cursor can travel to the popup or come back (2026-08-18). */
.rm-db-news__panel {
  position: absolute; top: 100%; right: 0; width: 330px; padding-top: 8px; opacity: 0; visibility: hidden;
  transform: translateY(-6px) scale(.98); transform-origin: top right;
  transition: opacity .18s ease .3s, transform .18s ease .3s, visibility 0s linear .48s; z-index: 90;
}
.rm-db-news:hover .rm-db-news__panel, .rm-db-news:focus-within .rm-db-news__panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.rm-db-news__kdate { text-transform: none; letter-spacing: 0; color: rgba(255, 255, 255, .5); }
.rm-db-news__panelbox {
  background: #0C1D2A; border: 1px solid rgba(255, 255, 255, .15); border-radius: 14px;
  box-shadow: 0 28px 58px -22px rgba(3, 10, 18, .9); padding: 13px 14px; display: flex; flex-direction: column; gap: 4px;
}
.rm-db-news__row { display: flex; align-items: flex-start; gap: 10px; border-radius: 10px; padding: 9px 10px; text-decoration: none; transition: background .15s ease; }
.rm-db-news__row:hover { background: rgba(255, 255, 255, .09); }
.rm-db-news__rowtext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rm-db-news__rowhead { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.rm-db-news__rowtitle { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; color: #fff; line-height: 1.35; }
.rm-db-news__rowdate { flex: none; font-size: 10.5px; font-weight: 600; color: rgba(255, 255, 255, .45); white-space: nowrap; }
.rm-db-news__rowexcerpt {
  font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, .5); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rm-db-news__all {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 5px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px;
  padding: 7px; font-size: 11.5px; font-weight: 700; color: #fff; text-decoration: none;
  transition: background .16s ease, border-color .16s ease;
}
.rm-db-news__all:hover { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .3); color: #fff; }

/* Glass panels inside the hero */
.rm-db-glass {
  display: flex; flex-direction: column; background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .13); border-radius: 16px; padding: 15px 18px; min-width: 0;
}
.rm-db-glass--link { flex: 1; text-decoration: none; transition: background .16s ease, border-color .16s ease; }
.rm-db-glass--link:hover { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .3); }
.rm-db-glass__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rm-db-glass__title { font-family: var(--rm-font-heading); font-weight: 800; font-size: 16px; letter-spacing: -.015em; color: #fff; }
.rm-db-glassbtn, .rm-page a.rm-db-glassbtn {
  flex: none; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); border-radius: 10px;
  padding: 6px 13px; font-size: 11.5px; font-weight: 700; color: #fff; text-decoration: none; white-space: nowrap;
  transition: background .16s ease, border-color .16s ease;
}
.rm-db-glassbtn:hover, .rm-page a.rm-db-glassbtn:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.rm-db-heroacts { padding-bottom: 8px; }
/* flex + hidden overflow so fitHeroActs can clip WHOLE rows against the
   stats column's height (2026-09-01), the activity card's trim rule. */
.rm-db-heroacts__list { display: flex; flex-direction: column; margin-top: 6px; flex: 1; min-height: 0; overflow: hidden; }
.rm-db-heroact {
  display: flex; align-items: center; gap: 10px; padding: 9px 8px; margin: 0 -8px;
  border-top: 1px solid rgba(255, 255, 255, .09); text-decoration: none; min-width: 0; border-radius: 9px;
  transition: background .15s ease;
}
.rm-db-heroact:hover { background: rgba(255, 255, 255, .09); }
.rm-db-heroact__dot {
  width: 28px; height: 28px; flex: none; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .24);
  color: #fff; display: flex; align-items: center; justify-content: center;
}
.rm-db-heroact__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rm-db-heroact__actor { font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, .55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-db-heroact__line { font-family: var(--rm-font-heading); font-weight: 700; font-size: 12.5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-db-heroact__count {
  flex: none; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); border-radius: 7px;
  padding: 3px 7px; font-family: var(--rm-font-heading); font-weight: 800; font-size: 11px; color: #fff;
}
.rm-db-heroact__when { flex: none; font-size: 10.5px; font-weight: 700; color: rgba(255, 255, 255, .45); white-space: nowrap; }
/* Skeleton rows keep the live row's box (56px) so the hero opens at its final height */
.rm-db-heroact--skel { cursor: default; min-height: 56px; }
.rm-db-heroact--skel .rm-db-heroact__text { gap: 6px; }
/* Hero stats grid (2026-08-31 redesign): six glass tiles - the three
   attention counts stacked in the LEFT column, the three AI readings with
   mini charts stacked in the RIGHT (2026-09-01: two columns of three, not
   three over three - the wide row tiles sat half empty). Column flow fills
   left first, so DOM order stays counts-then-charts; equal rows let the
   charts stretch into the height instead of leaving dead space. */
.rm-db-herostats {
  flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr)); grid-auto-flow: column;
  gap: 10px; min-height: 0;
}
.rm-db-stat {
  min-width: 0; display: flex; align-items: center; gap: 10px; padding: 11px 13px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 14px; text-decoration: none; transition: background .16s ease;
}
.rm-db-stat:hover { background: rgba(255, 255, 255, .1); }
.rm-db-stat__icon { width: 30px; height: 30px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.rm-db-stat__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rm-db-stat__n { font-family: var(--rm-font-heading); font-weight: 800; font-size: 20px; line-height: 1; color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rm-db-stat__label { min-width: 0; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .55); line-height: 1.3; text-wrap: pretty; }
/* Multi-figure count tiles (2026-09-03; recomposed 2026-09-04): the group
   label on top beside a small icon, the figures bottom-aligned and large -
   the same top/bottom build as the chart tiles beside them (label on top,
   chart at the bottom), so the two columns read as one grid. At 18px right
   under the label, the figures left the lower half of every tile empty. */
.rm-db-stat--multi { flex-direction: column; align-items: stretch; gap: 10px; }
.rm-db-stat__head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rm-db-stat--multi .rm-db-stat__icon { width: 24px; height: 24px; border-radius: 8px; }
.rm-db-stat__figs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; min-width: 0; margin-top: auto; }
.rm-db-stat__fig { display: inline-flex; flex-direction: column; gap: 3px; min-width: 0; }
.rm-db-stat--multi .rm-db-stat__n { font-size: 27px; letter-spacing: -.03em; }
.rm-db-stat__figlabel { font-size: 9.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: rgba(255, 255, 255, .5); line-height: 1.2; white-space: nowrap; }
.rm-db-stat--chart { flex-direction: column; align-items: stretch; gap: 7px; }
.rm-db-stat__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.rm-db-stat__val { flex: none; font-family: var(--rm-font-heading); font-weight: 800; font-size: 15px; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
/* The value and its secondary readout stay together on the right (2026-09-03: the confidence tile's "N% unsourced"). */
.rm-db-stat__vals { flex: none; display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
.rm-db-stat__sub { flex: none; font-size: 10px; font-weight: 700; color: rgba(255, 255, 255, .55); letter-spacing: .02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Fixed chart height (2026-09-01): the wrapper used to flex into whatever
   the row offered, which made the chart tiles - and with them every row,
   count tiles included - as tall as the hero. Capped, the rows compress. */
/* Four tiles (2026-09-07): the chart grows with its tile (the minis are
   preserveAspectRatio none) so a taller row is a taller chart, not dead space. */
.rm-db-stat__chartwrap { flex: 1; min-height: 56px; max-height: 120px; margin-top: auto; display: flex; }
.rm-db-stat__chart { width: 100%; height: 100%; display: block; }
.rm-db-stat__nochart { flex: 1; display: flex; align-items: flex-end; font-size: 10px; font-weight: 600; color: rgba(255, 255, 255, .4); line-height: 1.4; }
.rm-db-stat--skel { pointer-events: none; }
/* A hero tile may glide to one card rather than a group (2026-09-03: the
   freshness tile lands on its card), so cards clear the sticky top bar too. */
.rm-db-card { scroll-margin-top: calc(var(--rm-topbar-h) + 16px); }
@media (max-width: 640px) { .rm-db-herostats { grid-auto-flow: row; grid-template-rows: none; } }

/* Group frames */
.rm-db-group { margin-top: 22px; border-radius: 22px; padding: 16px; border: 1px solid; scroll-margin-top: calc(var(--rm-topbar-h) + 16px); }
.rm-db-group--work { background: #E9F5F0; border-color: #D3E9DF; margin-top: 26px; }
.rm-db-group--q { background: #EAF0FB; border-color: #D9E4F6; }
.rm-db-group--k { background: #F0EDFA; border-color: #E2DBF6; }
.rm-db-group--ai { background: #EDE9F9; border-color: #DDD5F3; }
.rm-db-group--org { background: #E8F3F7; border-color: #D5E7EE; }
.rm-db-group__head {
  display: flex; align-items: center; gap: 13px; border-radius: 16px; padding: 15px 18px;
  margin-bottom: 16px; position: relative; overflow: hidden;
}
.rm-db-group__head--work { background: linear-gradient(112deg, #0B1B2B 0%, #0F2A2A 52%, #146046 100%); }
.rm-db-group__head--q { background: linear-gradient(112deg, #0B1B2B 0%, #122A50 52%, #1E4FD1 100%); }
.rm-db-group__head--k { background: linear-gradient(112deg, #130E28 0%, #291A5B 52%, #5B3EE0 100%); }
.rm-db-group__head--ai { background: linear-gradient(112deg, #0F0B24 0%, #241A5B 52%, #4A3EE0 100%); }
.rm-db-group__head--org { background: linear-gradient(112deg, #08202B 0%, #0D3A49 52%, #0B7C93 100%); }
.rm-db-group__icon {
  width: 40px; height: 40px; flex: none; border-radius: 11px; background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .2); display: flex; align-items: center; justify-content: center;
}
.rm-db-group__headtext { flex: 1; min-width: 0; }
.rm-db-group__title { font-family: var(--rm-font-heading); font-weight: 800; font-size: 19px; letter-spacing: -.015em; color: #fff; }
.rm-db-group__sub { font-size: 12.5px; color: rgba(255, 255, 255, .62); margin-top: 2px; }
.rm-db-group__cta {
  flex: none; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: #fff;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px;
  padding: 7px 13px; text-decoration: none; transition: background .15s ease;
}
.rm-db-group__cta:hover { background: rgba(255, 255, 255, .18); color: #fff; }

/* Grids + cards */
.rm-db-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.rm-db-gridq { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
/* Three AI cards since 2026-08-29 (as-is, answer confidence, hours saved); the
   step chart keeps the widest track. Below 1180px the two column charts share
   a row and the hours chart takes the next one whole. */
.rm-db-gridai { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: 18px; align-items: stretch; }
.rm-db-gridorg { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.rm-db-stack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.rm-db-card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--rm-border);
  border-radius: 18px; padding: 20px 22px; box-shadow: 0 1px 2px rgba(14, 21, 37, .04); min-width: 0;
}
.rm-db-card--ai { background: #FDFCFF; border-color: #E2DBF6; }
.rm-db-card__head { display: flex; align-items: center; gap: 12px; }
.rm-db-card__title { font-family: var(--rm-font-heading); font-weight: 800; font-size: 17px; }
.rm-db-card__count { font-family: var(--rm-font-heading); font-weight: 800; font-size: 17px; }
.rm-db-card__sub { font-size: 12.5px; color: var(--rm-soft); margin-top: 2px; }
/* Tertiary link-button in every dashboard panel header (site-dashboard
   .db-seeall, 9 instances). Scoped under .rm-page so it beats the
   `.rm-page a` link colour: it is a filled pill, never a green text link. */
.rm-db-seeall, .rm-page a.rm-db-seeall {
  flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; background: var(--rm-fill);
  border: 1px solid var(--rm-border); border-radius: 10px; padding: 6px 12px; font-size: 11.5px; font-weight: 700;
  color: var(--rm-muted); text-decoration: none; box-shadow: none;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.rm-db-seeall:hover, .rm-page a.rm-db-seeall:hover { background: #E7EEFA; border-color: #BFD1EC; color: var(--rm-ink); }

/* List rows (assigned questions, day-pick items, news items) */
.rm-db-row {
  display: flex; align-items: center; gap: 12px; border: 1px solid #EEF1F7; border-radius: 13px;
  padding: 11px 13px; text-decoration: none; color: inherit;
  transition: background .15s ease, border-color .15s ease;
}
.rm-db-row:hover { background: #F4F7FD; border-color: #D3DEEE; }
.rm-db-row__spine { width: 6px; height: 34px; flex: none; border-radius: 999px; }
.rm-db-row__main { flex: 1; min-width: 0; }
.rm-db-row__title { font-size: 13.5px; font-weight: 600; color: var(--rm-ink); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-db-row__meta { display: flex; align-items: center; gap: 10px; margin-top: 4px; min-width: 0; }
.rm-db-row__metaitem { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font-size: 11.5px; font-weight: 600; color: var(--rm-soft); }
.rm-db-row__metaitem span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-db-pill {
  flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700;
  border: 1px solid; border-radius: 999px; padding: 4px 10px; white-space: nowrap;
}
.rm-db-legend { display: flex; align-items: center; gap: 14px; font-size: 11.5px; font-weight: 700; color: var(--rm-muted); }
.rm-db-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rm-db-swatch { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

/* Open questionnaires table */
.rm-db-qhead, .rm-db-qrow {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 2.1fr) 46px 108px 60px;
  gap: 14px; align-items: center;
}
.rm-db-qhead { margin-top: 16px; padding: 0 10px 8px; border-bottom: 1px solid #EEF1F7; }
.rm-db-qhead span { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--rm-faint); }
.rm-db-qrow { border: 1px solid transparent; border-radius: 12px; padding: 9px 10px; text-decoration: none; color: inherit; transition: background .15s ease, border-color .15s ease; }
.rm-db-qrow:hover { background: #F4F7FD; border-color: #D3DEEE; }
.rm-db-qbar { min-width: 0; display: flex; height: 22px; border-radius: 7px; overflow: hidden; background: #EEF1F7; cursor: default; }
.rm-db-avatar, .rm-avatar.rm-db-avatar {
  width: 24px; height: 24px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--rm-font-heading); font-weight: 700; font-size: 9.5px; border: 2px solid #fff; margin-left: -7px;
}

/* Donut + legend layout */
.rm-db-donutwrap { display: flex; align-items: center; gap: 18px; margin-top: 14px; }
.rm-db-donut { position: relative; flex: none; }
.rm-db-donut__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.rm-db-donut__n { font-family: var(--rm-font-heading); font-weight: 800; line-height: 1; }
.rm-db-donut__label { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--rm-label); margin-top: 3px; }
.rm-db-donutlegend { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.rm-db-donutlegend__row { display: flex; align-items: center; gap: 9px; }
.rm-db-donutlegend__label { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--rm-muted); }
.rm-db-arc { transition: filter .15s ease; cursor: default; pointer-events: stroke; }
.rm-db-arc:hover { filter: brightness(1.1) saturate(1.15) drop-shadow(0 2px 7px rgba(14, 21, 37, .45)); }

/* Deadline calendar */
.rm-db-cal__nav {
  width: 26px; height: 26px; border-radius: 8px; background: var(--rm-ghost-fill); border: 1px solid var(--rm-border);
  display: flex; align-items: center; justify-content: center; color: var(--rm-muted); cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.rm-db-cal__nav:hover { background: #EEF3FF; border-color: #C9DCF8; color: var(--rm-ai-cobalt-deep); }
.rm-db-cal__weekdays, .rm-db-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.rm-db-cal__weekdays { margin-top: 14px; }
.rm-db-cal__wd { text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--rm-faint); }
.rm-db-cal__grid { flex: 1; grid-auto-rows: minmax(30px, 1fr); margin-top: 6px; }
.rm-db-cal__day {
  position: relative; display: flex; align-items: center; justify-content: center; border-radius: 9px;
  font-size: 11.5px; text-decoration: none;
}
.rm-db-cal__day:hover { filter: brightness(.96); }
.rm-db-cal__badge {
  position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  color: #fff; font-size: 9.5px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.rm-db-cal__legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 13px; padding-top: 12px; border-top: 1px solid #EEF1F7; }
.rm-db-cal__legenditem { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--rm-muted); }
.rm-db-cal__legendswatch { width: 10px; height: 10px; border-radius: 3px; border: 1px solid; }

/* Knowledge review rows (conflicts amber / suggestions blue) */
.rm-db-conf, .rm-db-sugg {
  display: flex; align-items: center; gap: 11px; border-radius: 12px; padding: 10px 12px; text-decoration: none;
  transition: background .16s ease, border-color .16s ease; border: 1px solid;
}
.rm-db-conf { background: #FFFDF7; border-color: #F3DFAE; }
.rm-db-conf:hover { background: #FFF9EC; border-color: #EBD49A; }
.rm-db-sugg { background: #FAFCFF; border-color: #D5E3FF; }
.rm-db-sugg:hover { background: #F3F7FF; border-color: #C2D6FA; }

/* Top sources usage bars */
.rm-db-source { display: block; border: 1px solid transparent; border-radius: 11px; padding: 7px 9px; text-decoration: none; color: inherit; transition: background .15s ease, border-color .15s ease; }
.rm-db-source:hover { background: #F4F7FD; border-color: #D3DEEE; }
.rm-db-source__top { display: flex; align-items: center; gap: 8px; }
.rm-db-source__name { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--rm-slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-db-source__uses { flex: none; font-size: 11.5px; font-weight: 700; color: var(--rm-ink); }
.rm-db-source__track { height: 8px; border-radius: 999px; background: var(--rm-fill); margin-top: 6px; overflow: hidden; }
.rm-db-source__bar { height: 100%; border-radius: 999px; }

/* Split tables next to donuts */
.rm-db-splithead, .rm-db-splitrow { display: flex; align-items: center; gap: 9px; }
.rm-db-splithead { padding-bottom: 7px; border-bottom: 1px solid #EEF1F7; }
.rm-db-splithead span { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--rm-faint); }
.rm-db-splitrow { cursor: default; }
.rm-db-splitrow__label { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--rm-slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-db-splitrow__n { flex: none; text-align: right; font-family: var(--rm-font-heading); font-weight: 800; font-size: 13px; color: var(--rm-ink); }
.rm-db-splitrow__pct { flex: none; text-align: right; font-size: 11.5px; font-weight: 600; color: var(--rm-label); }
/* The freshness card explains its own rule: the reading is new (fresh until the date, then fading), not a value the reader can infer from the ring. */
.rm-db-freshnote { margin-top: 2px; padding-top: 9px; border-top: 1px solid #F1F4F9; font-size: 10.5px; line-height: 1.45; color: var(--rm-faint); }

/* Organization activity timeline */
.rm-db-act { display: grid; grid-template-columns: 58px 32px minmax(0, 1fr); gap: 12px; align-items: stretch; }
.rm-db-act + .rm-db-act { margin-top: 14px; }
.rm-db-act__when { text-align: right; padding-top: 5px; }
.rm-db-act__time { font-weight: 700; color: var(--rm-ink); font-size: 12px; }
.rm-db-act__day { color: var(--rm-placeholder); font-size: 10.5px; }
.rm-db-act__linecol { position: relative; display: flex; justify-content: center; padding-top: 2px; }
.rm-db-act__linecol::before { content: ""; position: absolute; left: 15px; top: 36px; bottom: -16px; width: 2px; background: #EAEEF5; }
.rm-db-act:last-child .rm-db-act__linecol::before { display: none; }
.rm-db-act__dot { width: 32px; height: 32px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; z-index: 1; }
.rm-db-act__card { background: #FAFBFE; border: 1px solid #EEF1F7; border-radius: 14px; padding: 12px 14px; }
.rm-db-act__tag { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; border: 1px solid; padding: 3px 8px; border-radius: 7px; }
.rm-db-act__repeat { display: inline-flex; font-size: 10.5px; font-weight: 700; color: var(--rm-muted); background: #EEF1F6; border: 1px solid #E1E6EF; padding: 3px 8px; border-radius: 7px; cursor: default; }
.rm-db-act__headline { font-family: var(--rm-font-heading); font-weight: 600; font-size: 12.5px; color: #3A4454; line-height: 1.45; margin-top: 7px; }
.rm-db-act__target { color: var(--rm-ink); font-weight: 700; text-decoration: none; border-bottom: 1px solid #D3DAE6; }
.rm-db-act__target:hover { border-bottom-color: var(--rm-soft); color: var(--rm-ink); }
.rm-db-act__actor { display: flex; align-items: center; gap: 7px; flex-shrink: 0; font-size: 11.5px; color: var(--rm-soft); }

/* Team pulse per-person table */
.rm-db-teamhead, .rm-db-teamrow { display: flex; align-items: center; gap: 10px; }
.rm-db-teamhead span, .rm-db-teamrow .rm-db-teamnum { flex: none; width: 56px; text-align: right; }
.rm-db-teamhead span { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--rm-faint); }
.rm-db-teamname { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--rm-slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-db-teamnum { font-size: 12.5px; font-weight: 700; color: var(--rm-ink); }

/* What's new card items */
.rm-db-newslist { flex: 1; display: flex; flex-direction: column; gap: 9px; margin-top: 15px; }
.rm-db-newsitem { align-items: flex-start; }
.rm-db-newsitem__text { flex: 1; min-width: 0; }
.rm-db-newsitem__head { display: flex; align-items: center; gap: 8px; }
.rm-db-newsitem__title { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--rm-ink); line-height: 1.35; }
.rm-db-newsitem__date { flex: none; font-size: 11px; font-weight: 600; color: var(--rm-label); white-space: nowrap; }
.rm-db-newsitem__excerpt {
  font-size: 11.5px; font-weight: 600; color: var(--rm-soft); line-height: 1.45; margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Pinned chart tooltip (the design's arc tooltip) */
.rm-db-charttip {
  position: fixed; transform: translate(-50%, -100%); background: var(--rm-ink); color: #fff;
  line-height: 1.45; padding: 10px 12px; border-radius: 10px; pointer-events: none; min-width: 172px; max-width: 290px;
  z-index: 200; box-shadow: 0 16px 34px -16px rgba(14, 21, 37, .7);
}
.rm-db-charttip__title { font-family: var(--rm-font-heading); font-weight: 800; font-size: 13px; }
.rm-db-charttip__sub { font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, .55); margin-top: 2px; }
.rm-db-charttip__metric { display: flex; align-items: baseline; gap: 6px; margin-top: 7px; }
.rm-db-charttip__metricval { font-family: var(--rm-font-heading); font-weight: 800; font-size: 19px; line-height: 1; }
.rm-db-charttip__metricnote { font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, .6); }
.rm-db-charttip__lines {
  display: flex; flex-direction: column; gap: 3px; margin-top: 8px; padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, .16); font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, .7);
}

/* Day-pick modal */
.rm-db-daypick {
  width: 430px; max-width: 100%; background: #fff; border-radius: 18px;
  box-shadow: 0 34px 76px -30px rgba(14, 21, 37, .62); padding: 20px 22px;
}
.rm-db-daypick__head { display: flex; align-items: center; gap: 11px; }
.rm-db-daypick__title { font-family: var(--rm-font-heading); font-weight: 800; font-size: 16px; }
.rm-db-daypick__sub { font-size: 12.5px; color: var(--rm-soft); margin-top: 2px; }
.rm-db-daypick__list { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }

/* Empty slices */
.rm-db-empty { border: 1px dashed #D8DEE9; border-radius: 13px; padding: 22px 16px; text-align: center; }
.rm-db-empty__title { font-size: 13.5px; font-weight: 700; color: var(--rm-ink); }
.rm-db-empty__sub { font-size: 12px; color: var(--rm-soft); margin-top: 4px; line-height: 1.5; }

@media (max-width: 1180px) {
  .rm-db-gridai { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rm-db-gridai > #rm_db_hours { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .rm-db-hero__grid, .rm-db-grid2, .rm-db-gridq, .rm-db-gridai, .rm-db-gridorg { grid-template-columns: minmax(0, 1fr); }
  .rm-db-gridai > #rm_db_hours { grid-column: auto; }
}


/* ============================================================
   AI usage report (M6, design: ai-usage-report.dc.html)
   Structural classes for views/layout/ai-usage-report.ejs + rm-ai-report.js.
   Reuses .rm-db-charttip (pinned chart tooltip) from the dashboard block.
   ============================================================ */

.rm-ar-hero {
  background: var(--rm-hero-gradient); border: 1px solid var(--rm-hero-border);
  border-radius: 20px; padding: 26px 30px 28px; position: relative;
}
.rm-ar-hero__glow { position: absolute; inset: 0; border-radius: 20px; overflow: hidden; pointer-events: none; }
.rm-ar-hero__glow::before {
  content: ""; position: absolute; right: -30px; top: -50px; width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(70, 210, 150, .3), transparent 70%);
}
.rm-ar-hero__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; position: relative; }
.rm-ar-hero__tile {
  width: 50px; height: 50px; flex: none; border-radius: 14px; background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18); display: flex; align-items: center; justify-content: center;
}
.rm-ar-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .58); transition: color .15s ease; }
.rm-ar-back:hover { color: #fff; }
.rm-ar-hero__title { margin: 2px 0 0; font-family: var(--rm-font-heading); font-weight: 800; font-size: 28px; letter-spacing: -.02em; color: #fff; }
.rm-ar-hero__sub { margin: 6px 0 0; font-size: 14px; color: rgba(255, 255, 255, .7); max-width: 560px; }
.rm-ar-rangebtn {
  display: inline-flex; align-items: center; gap: 7px; font-family: inherit; font-size: 13px; font-weight: 600; color: #fff;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px; padding: 9px 13px; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.rm-ar-rangebtn:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); }
.rm-ar-rangemenu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 61; width: 308px; background: #fff;
  border: 1px solid var(--rm-border); border-radius: 14px; box-shadow: 0 24px 50px -18px rgba(14, 21, 37, .5); padding: 14px;
}
.rm-ar-rangeitem { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px; cursor: pointer; }
.rm-ar-rangeitem:hover { background: var(--rm-page); }
.rm-ar-rangeitem--active { background: #EFF4FF; }
.rm-ar-hero__stats { display: flex; align-items: center; gap: 16px; margin-top: 26px; flex-wrap: wrap; position: relative; }
.rm-ar-stat {
  display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .13); border-radius: 14px; padding: 14px 18px; cursor: default;
}
.rm-ar-stat__icon { width: 38px; height: 38px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.rm-ar-stat__n { font-family: var(--rm-font-heading); font-weight: 700; font-size: 17px; color: #fff; line-height: 1; }
.rm-ar-stat__label { font-size: 12px; color: rgba(255, 255, 255, .55); margin-top: 5px; }
.rm-ar-donutcard {
  margin-left: auto; flex: none; width: 330px; background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .13); border-radius: 16px; padding: 14px 18px; display: flex; align-items: center; gap: 18px;
}

/* Running-average readout beside the per-questionnaire charts (2026-09-01):
   the trend's current level as one number, on the report and (same figure)
   in the dashboard hero's AI tiles. */
.rm-ar-runavg { display: inline-flex; align-items: baseline; gap: 8px; cursor: help; }
.rm-ar-runavg__val { font-family: var(--rm-font-heading); font-weight: 800; font-size: 26px; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rm-ar-runavg__label { font-size: 11.5px; font-weight: 700; color: #8A94A6; }
.rm-ar-panel { background: #fff; border: 1px solid var(--rm-border); border-radius: 18px; padding: 22px 24px; margin-top: 22px; }

/* Answer confidence on the usage report (2026-08-21, 26-answer-confidence).
   The band row doubles as the legend AND the table: every segment of the bar
   is named and numbered here, so identity never rests on colour, and the
   figures are readable without hovering. */
.rm-ar-confgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 18px; margin-top: 14px; }
.rm-ar-confrow { display: flex; align-items: center; gap: 8px; font-size: 12.5px; max-width: 250px; }
.rm-ar-confrow__name { font-weight: 700; color: #0E1525; }
.rm-ar-confrow__n { margin-left: auto; font-weight: 800; color: #0E1525; font-variant-numeric: tabular-nums; }
.rm-ar-confrow__pct { color: #8A94A6; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.rm-ar-factors { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 26px; margin-top: 16px; }
.rm-ar-factor__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rm-ar-factor__name { font-size: 12.5px; font-weight: 700; color: #0E1525; display: inline-flex; align-items: center; gap: 7px; }
.rm-ar-factor__flag { font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #A31234; background: #FCE9ED; border-radius: 5px; padding: 2px 5px; }
.rm-ar-factor__val { font-size: 13px; font-weight: 800; color: #0E1525; font-variant-numeric: tabular-nums; display: inline-flex; align-items: baseline; gap: 6px; }
.rm-ar-factor__band { font-size: 10.5px; font-weight: 700; color: #8A94A6; }
.rm-ar-factor__track { height: 10px; border-radius: 5px; background: #F1F4F9; margin-top: 7px; overflow: hidden; }
.rm-ar-factor__why { font-size: 11.5px; color: #8A94A6; margin-top: 6px; line-height: 1.45; }
.rm-ar-sechead { font-family: var(--rm-font-heading); font-weight: 800; font-size: 17px; color: var(--rm-ink); }
.rm-ar-secsub { font-size: 12.5px; color: var(--rm-soft); margin-top: 3px; line-height: 1.5; max-width: 760px; }
.rm-ar-legend { display: flex; align-items: center; gap: 16px; font-size: 12px; font-weight: 600; color: var(--rm-muted); flex-wrap: wrap; }
.rm-ar-legend span { display: inline-flex; align-items: center; gap: 6px; }

/* As many cards as there are source types with data (2026-08-25): a fixed
   four-track grid left an empty track when only three kinds were cited. */
.rm-ar-typegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 16px; }
.rm-ar-typecard {
  background: #fff; border: 1px solid var(--rm-border); border-radius: 16px; padding: 18px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.rm-ar-typecard:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -20px rgba(14, 21, 37, .32); border-color: #D8CCF6; }

.rm-ar-bucketgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; align-items: start; }
.rm-ar-bucket { background: #fff; border: 1px solid var(--rm-border); border-radius: 16px; overflow: hidden; }
.rm-ar-bucket__head { display: flex; align-items: center; gap: 11px; padding: 16px 18px; border-bottom: 1px solid #EEF1F7; }
.rm-ar-bucket__rows { padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.rm-ar-row { display: flex; align-items: center; gap: 11px; padding: 10px 11px; border-radius: 11px; text-decoration: none; color: inherit; }
.rm-ar-row:hover { background: #F8FAFF; }
/* Age, not freshness (2026-08-21): one neutral tone, because how old a
   source is is context rather than a verdict. It used to be traffic-lit in
   the freshness palette, which made 'three years old' look like a fault. */
/* Completed / All scope switch on the report hero (2026-08-21). Sits beside
   the range picker because it is the same kind of question: which slice of
   the work am I reading? */
.rm-ar-scope { display: inline-flex; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--rm-radius-pill); padding: 3px; gap: 2px; }
.rm-ar-scope__opt {
  font-family: inherit; font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .66);
  background: none; border: none; border-radius: var(--rm-radius-pill); padding: 5px 12px; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.rm-ar-scope__opt:hover { color: #fff; }
.rm-ar-scope__opt--on { background: rgba(255, 255, 255, .16); color: #fff; }

.rm-ar-agepill { font-size: 10px; font-weight: 700; border-radius: 999px; padding: 1px 7px; color: #5A6577; background: #F1F4F9; }

.rm-ar-tilegrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 16px; }
.rm-ar-exptile { border: 1px solid; border-radius: 16px; padding: 16px 18px; cursor: default; }
.rm-ar-expgrid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 16px; margin-top: 16px; align-items: start; }
.rm-ar-atthead, .rm-ar-attrow { display: grid; grid-template-columns: minmax(180px, 1fr) 132px 92px 116px; gap: 12px; align-items: center; }
.rm-ar-atthead { padding: 10px 18px; border-bottom: 1px solid #F1F4F9; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--rm-label); }
.rm-ar-attrow { padding: 11px 12px; border-radius: 11px; text-decoration: none; color: inherit; }
.rm-ar-attrow:hover { background: #F8FAFF; }

@media (max-width: 1100px) {
  .rm-ar-bucketgrid, .rm-ar-expgrid { grid-template-columns: 1fr; }
  .rm-ar-tilegrid { grid-template-columns: repeat(2, 1fr); }
}
/* The hero's controls: scope toggle, date range, print-to-PDF (2026-08-25). */
.rm-ar-hero__controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rm-ar-printhead { display: none; }

/* Download as PDF (2026-08-25, 24-ai-usage-report "Print"): the page laid
   out for paper - the browser's print dialog saves it as a PDF, so there is
   no server-side renderer to deploy. The dark hero goes light, the controls
   and the chrome go, every panel keeps to one page where it can. */
@media print {
  @page { margin: 12mm; }
  body:has(#rm_ar_page) { background: #fff !important; }
  body:has(#rm_ar_page) .rm-topbar, body:has(#rm_ar_page) .rm-as-fab, body:has(#rm_ar_page) .rm-as-panel, body:has(#rm_ar_page) .rm-as-scrim,
  #rm_ar_page .rm-ar-hero__controls, #rm_ar_page .rm-ar-back, #rm_ar_page .rm-asis-axis, #rm_ar_page .rm-db-charttip,
  #rm_ar_page #rm_ar_loading, #rm_ar_page #rm_ar_error { display: none !important; }
  #rm_ar_page { max-width: none; padding: 0; }
  #rm_ar_page .rm-ar-hero { background: #fff !important; color: #0E1525 !important; border: 1px solid #DDE3EC; border-radius: 12px; box-shadow: none; }
  #rm_ar_page .rm-ar-hero__glow { display: none; }
  #rm_ar_page .rm-ar-hero *, #rm_ar_page .rm-ar-hero .rm-ar-stat__n, #rm_ar_page .rm-ar-hero .rm-ar-stat__label { color: #0E1525 !important; }
  #rm_ar_page .rm-ar-hero__tile, #rm_ar_page .rm-ar-stat, #rm_ar_page .rm-ar-donutcard, #rm_ar_page .rm-ar-stat__icon { background: #F4F6FA !important; border-color: #DDE3EC !important; }
  #rm_ar_page .rm-ar-printhead { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #5A6577 !important; margin: 8px 0 4px; }
  #rm_ar_page .rm-ar-panel, #rm_ar_page .rm-ar-typecard, #rm_ar_page .rm-ar-bucket, #rm_ar_page #rm_ar_types, #rm_ar_page #rm_ar_confidence { break-inside: avoid; page-break-inside: avoid; box-shadow: none; }
  #rm_ar_page .rm-ar-typecard:hover { transform: none; }
  #rm_ar_page svg, #rm_ar_page .rm-ar-panel, #rm_ar_page .rm-ar-typecard, #rm_ar_page .rm-ar-bucket, #rm_ar_page .rm-ar-factor__track div, #rm_ar_page .rm-ar-hero { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #rm_ar_page a { text-decoration: none; color: inherit; }

  /* Paper layout (2026-08-29). Chromium lays A4 out at 794px, ~644px inside
     the hero's padding, and the screen layout misbehaved at that width:
     - the tooltip layer is position:fixed, and a fixed box prints on EVERY
       page; the PDF button has a tip of its own, so it was on screen at the
       moment of printing and turned up five times;
     - the hero's flex wrap put two figures on one row, the third beside the
       330px donut card;
     - the time-saved chart's 420px screen minimum pushed it under the
       summary box, leaving the box alone beside a blank block;
     - three source-type cards at minmax(240px) went two plus one, the lone
       card stretched to its neighbour's height;
     - a section head ("Source effectiveness") could end a page on its own. */
  .rm-tip { display: none !important; }
  #rm_ar_page .rm-ar-hero__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #rm_ar_page .rm-ar-donutcard { width: auto; margin-left: 0; }
  #rm_ar_page .rm-ar-secrow { break-after: avoid; page-break-after: avoid; }
  /* !important: the text block carries flex:1 / min-width:260px inline. */
  #rm_ar_page .rm-ar-secrow > div:first-child { flex-basis: 100% !important; min-width: 0 !important; }
  #rm_ar_page .rm-ar-bucketgrid > .rm-ar-bucket:first-child { break-before: avoid; page-break-before: avoid; }
  /* The summary box becomes a strip above the chart: its figures in one
     row, the chart full width below (a half-width chart would print its
     axis text at ~4px). */
  #rm_ar_page .rm-ar-tsbox { width: auto !important; flex: 1 1 100% !important; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 26px; padding: 12px 18px !important; }
  #rm_ar_page .rm-ar-tsbox > div:first-child { flex-basis: 100%; }
  #rm_ar_page .rm-ar-tsbox > div:last-child { flex-direction: row !important; gap: 26px !important; }
  #rm_ar_page .rm-ar-tschart { min-width: 0 !important; flex-basis: 100%; }
  #rm_ar_page .rm-ar-typegrid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}


/* ============================================================
   Responsemate assistant panel (M6, design: app-nav.dc.html "CHAT PANEL")
   views/partials/rm/assistant.ejs + rm-assistant.js. Blues only: the
   assistant is an AI surface (00-design-system, info vs action).
   ============================================================ */

/* The FAB is a pill anchored bottom-right whose width follows its content in
   BOTH states (never a hard width), so the fold-out and the fold-back are the
   same continuous motion: the icon lives in a fixed 58px slot at the right end
   and never leaves the bubble; only the label's max-width/padding animate
   (2026-08-18: a snapping width on mouse-leave used to throw the icon out). */
.rm-as-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 205;
  width: auto; min-width: 58px; height: 58px; padding: 0; border-radius: 29px; border: none; cursor: pointer;
  background: linear-gradient(120deg, var(--rm-ai-cobalt), var(--rm-ai-cobalt-deep));
  box-shadow: 0 16px 34px -10px rgba(47, 107, 255, .6);
  display: inline-flex; align-items: center; justify-content: flex-end; color: #fff; overflow: hidden;
  transition: transform .16s ease, filter .16s ease;
}
.rm-as-fab:hover { transform: translateY(-2px); filter: brightness(1.06); }
.rm-as-fab__icon { flex: none; width: 58px; height: 58px; display: inline-flex; align-items: center; justify-content: center; }
/* Hover-expands into a pill with a label, so a first-time user reads what the
   button is for (a conversation with the AI about their own data). */
.rm-as-fab__label {
  flex: none; max-width: 0; padding-left: 0; overflow: hidden; white-space: nowrap; opacity: 0;
  font-family: var(--rm-font-body); font-weight: 700; font-size: 13.5px; line-height: 58px;
  transition: max-width .22s ease, opacity .18s ease, padding .22s ease;
}
.rm-as-fab:hover .rm-as-fab__label,
.rm-as-fab:focus-visible .rm-as-fab__label { max-width: 160px; opacity: 1; padding-left: 20px; }
.rm-as-fab--open .rm-as-fab__label { display: none; }
.rm-as-scrim { position: fixed; inset: 0; z-index: 210; background: rgba(10, 14, 23, .34); animation: rmAsFade .2s ease; }
.rm-as-panel {
  position: fixed; top: 0; right: 0; z-index: 211; height: 100vh; width: 400px; max-width: 100vw;
  font-family: var(--rm-font-body); font-size: 14px; color: var(--rm-ink);
  background: #fff; box-shadow: -24px 0 60px -20px rgba(14, 30, 70, .4);
  display: flex; flex-direction: column; animation: rmAsIn .26s cubic-bezier(.22, .61, .36, 1);
}
.rm-as-panel[hidden], .rm-as-scrim[hidden] { display: none; }
@keyframes rmAsIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rmAsFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rmAsSpin { to { transform: rotate(360deg); } }
@keyframes rmAsPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes rmAsWave { 0%, 100% { transform: scaleY(.55); } 50% { transform: scaleY(1); } }

.rm-as-head { display: flex; align-items: center; gap: 11px; padding: 18px 20px; background: linear-gradient(120deg, #101A34, #203A7E); flex: none; }
.rm-as-head__tile {
  width: 40px; height: 40px; flex: none; border-radius: 12px; background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .18); display: flex; align-items: center; justify-content: center; color: #fff;
}
.rm-as-head__text { flex: 1; min-width: 0; }
.rm-as-head__title { font-family: var(--rm-font-heading); font-weight: 800; font-size: 15.5px; color: #fff; }
.rm-as-head__sub { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: rgba(255, 255, 255, .7); }
.rm-as-head__btn {
  width: 32px; height: 32px; flex: none; border-radius: 9px; border: none; background: rgba(255, 255, 255, .12);
  display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; transition: background .15s ease;
}
.rm-as-head__btn:hover { background: rgba(255, 255, 255, .22); }
.rm-as-head__btn--on { background: rgba(127, 166, 255, .35); }

.rm-as-scope { display: flex; align-items: center; gap: 7px; padding: 10px 16px 0; flex-wrap: wrap; flex: none; }
.rm-as-scope__pill {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700;
  border: 1px solid var(--rm-border); background: #fff; color: var(--rm-muted);
  border-radius: 999px; padding: 5px 11px; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.rm-as-scope__pill--on { background: #EBF1FF; border-color: #B9D0FF; color: var(--rm-ai-cobalt-deep); }
.rm-as-scope__pill--off, .rm-as-scope__pill:disabled { color: #B4BECC; opacity: .55; cursor: not-allowed; }
.rm-as-cellctx { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 11.5px; color: #8A94A6; }
.rm-as-cellctx > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* task card (design app-nav task mode) */
.rm-as-task { display: flex; flex-direction: column; gap: 12px; }
.rm-as-task__action { align-self: flex-end; display: inline-flex; align-items: center; gap: 7px; background: #EEF3FF; border: 1px solid #D5E3FF; color: #1E4FD1; font-size: 11.5px; font-weight: 700; padding: 6px 12px; border-radius: 999px; }
.rm-as-task__warn { display: flex; align-items: flex-start; gap: 9px; background: #FFF7E8; border: 1px solid #FBE0B0; border-radius: 11px; padding: 10px 12px; font-size: 12.5px; color: #8A5A0B; line-height: 1.5; }
.rm-as-task__block { display: flex; align-items: flex-start; gap: 9px; background: #FDF0F2; border: 1px solid #F6D2D9; border-radius: 11px; padding: 11px 13px; font-size: 12.5px; color: #8A4257; line-height: 1.5; }
.rm-as-task__btns { display: flex; gap: 8px; align-items: center; }
.rm-as-task__confirm { display: inline-flex; align-items: center; gap: 7px; background: linear-gradient(120deg, #7A5AF8, #5B3EE0); color: #fff; border: none; font-family: inherit; font-weight: 700; font-size: 13px; padding: 9px 15px; border-radius: 10px; cursor: pointer; }
.rm-as-task__confirm:disabled { opacity: .45; cursor: not-allowed; }
.rm-as-task__dismiss { background: #fff; color: #5A6577; border: 1px solid #E4E9F1; font-family: inherit; font-weight: 700; font-size: 13px; padding: 9px 15px; border-radius: 10px; cursor: pointer; }
.rm-as-task__running, .rm-as-task__done { display: inline-flex; align-items: center; gap: 7px; background: #EEF3FF; border: 1px solid #D5E3FF; color: #1E4FD1; font-size: 11.5px; font-weight: 700; padding: 6px 12px; border-radius: 999px; }
.rm-as-task__done { background: #E7F7F0; border-color: #C4EBD9; color: #0B8A63; }

.rm-as-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.rm-as-msg { display: flex; align-items: flex-start; gap: 9px; max-width: 92%; }
.rm-as-msg--user { align-self: flex-end; flex-direction: row-reverse; align-items: flex-end; max-width: 88%; }
.rm-as-msg__avatar {
  width: 30px; height: 30px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--rm-font-heading); font-weight: 700; font-size: 12px;
}
/* Company mark (responsemate-mark.svg, fill = currentColor, which resolves to
   black inside an <img>): tiles render it white via filter. */
.rm-brandmark { display: block; filter: brightness(0) invert(1); }
/* The mark in a colour: painted through a CSS mask of the same SVG (the
   brand blue #00A7E5 on the black top-bar tile, and on white next to AI
   messages in the assistant, 2026-08-19). */
.rm-brandmark--blue { display: block; filter: none; background: #00A7E5; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.rm-as-msg__avatar--ai { background: #fff; border: 1px solid #DCE3EE; box-shadow: 0 4px 10px -4px rgba(14, 30, 70, .25); }
/* The system as an actor (2026-09-04): the company mark in a white disc
   where a person's avatar would be, on every timeline - the assistant's
   AI-message avatar reused as an actor. rm-activity-style.js renders it. */
.rm-sysavatar { flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: transparent; border: 0; box-shadow: none; vertical-align: middle; } /* the isolated blue mark, no white disc (2026-09-08) */
.rm-sysavatar .rm-brandmark { display: block; }
.rm-as-msg__avatar--user { background: linear-gradient(135deg, #5B8CFF, #12B5D6); }
.rm-as-bubble { background: var(--rm-fill); color: var(--rm-slate); font-size: 13.5px; line-height: 1.55; padding: 11px 13px; border-radius: 14px 14px 14px 4px; min-width: 0; overflow-wrap: break-word; }
.rm-as-bubble--user { background: linear-gradient(120deg, #2F6BFF, #1E4FD1); color: #fff; border-radius: 14px 14px 4px 14px; }
.rm-as-bubble p { margin: 0 0 8px; }
.rm-as-bubble p:last-child { margin-bottom: 0; }
.rm-as-bubble ul, .rm-as-bubble ol { margin: 6px 0; padding-left: 20px; }
.rm-as-bubble code { font-family: var(--rm-font-mono); font-size: 12px; background: rgba(14, 21, 37, .06); border-radius: 4px; padding: 1px 4px; }
.rm-as-cite {
  display: inline-flex; align-items: center; font-size: 10px; font-weight: 800; color: var(--rm-ai-cobalt-deep);
  background: #EBF1FF; border: 1px solid #D5E3FF; border-radius: 6px; padding: 0 5px; margin: 0 2px;
  cursor: pointer; vertical-align: baseline;
}
.rm-as-srctoggle {
  display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--rm-label); cursor: pointer; width: max-content; border: none; background: none; padding: 0;
}
.rm-as-srctoggle i { transition: transform .18s ease; }
.rm-as-srctoggle[aria-expanded="true"] i { transform: rotate(90deg); }
.rm-as-source {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--rm-slate);
  background: #fff; border: 1px solid var(--rm-border); border-radius: 9px; padding: 7px 10px; text-decoration: none;
}
.rm-as-source:hover { border-color: #B9D0FF; color: var(--rm-slate); }
.rm-as-source__icon { width: 22px; height: 22px; flex: none; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
/* The panel's source rows reuse the knowledge page's type tiles (2026-08-25)
   at the row's smaller size; the colours come from .rm-kl-typetile--*. */
.rm-as-source__tile.rm-kl-typetile { width: 22px; height: 22px; border-radius: 6px; }
.rm-as-suggest {
  display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--rm-slate);
  background: #fff; border: 1px solid var(--rm-border); border-radius: 11px; padding: 9px 12px; cursor: pointer;
  transition: background .15s ease, border-color .15s ease; text-align: left; font-family: inherit;
}
.rm-as-suggest:hover { background: var(--rm-page); }
.rm-as-tool {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700;
  background: #fff; border: 1px solid; border-radius: 9px; padding: 6px 11px; cursor: pointer;
  transition: background .15s ease; font-family: inherit;
}
.rm-as-tool--g { color: #0B6E4F; border-color: #C6EDD9; } .rm-as-tool--g:hover { background: #E8FFF5; }
.rm-as-tool--p { color: #6A45E0; border-color: #E2D6FB; } .rm-as-tool--p:hover { background: #F3EEFF; }
.rm-as-tool--y { color: #8A5A0B; border-color: #FBE0B0; } .rm-as-tool--y:hover { background: #FFF7E8; }
.rm-as-typing { display: inline-flex; align-items: center; gap: 4px; padding: 12px 13px; }
.rm-as-typing span { width: 6px; height: 6px; border-radius: 50%; background: #9DB4E8; animation: rmAsPulse 1s ease-in-out infinite; }
.rm-as-typing span:nth-child(2) { animation-delay: .18s; }
.rm-as-typing span:nth-child(3) { animation-delay: .36s; }

.rm-as-composer { flex: none; padding: 10px 16px 14px; border-top: 1px solid #EEF1F7; }
/* Context strip above the composer (2026-08-19): focused-cell indicator + retrieval scope toggle */
.rm-as-context { display: flex; flex-direction: column; gap: 6px; margin-bottom: 9px; }
.rm-as-context__cell { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; color: #1E4FD1; background: #EBF1FF; border: 1px solid #C7DBFF; border-radius: 10px; padding: 6px 8px 6px 10px; }
/* Action proposal card (27-assistant-actions): the assistant asking before it
   changes anything. Deliberately not styled as a normal bubble - it is a
   decision, so it reads as a form with the promise written out. */
.rm-as-prop { border: 1px solid #C7DBFF; background: #F7FAFF; border-radius: 13px; padding: 12px 13px; min-width: 0; flex: 1; }
.rm-as-prop__head { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; color: #1E4FD1; }
.rm-as-prop__sum { font-size: 12px; color: #3A4453; line-height: 1.45; margin-top: 6px; }
.rm-as-prop__rows { display: flex; flex-direction: column; gap: 7px; margin-top: 11px; }
.rm-as-prop__row { display: flex; flex-direction: column; gap: 2px; }
.rm-as-prop__label { font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #8A94A6; }
.rm-as-prop__value { font-size: 12.5px; color: #0E1525; line-height: 1.45; overflow-wrap: anywhere; }
.rm-as-prop__actions { display: flex; align-items: center; gap: 8px; margin-top: 13px; }
.rm-as-prop__go { display: inline-flex; align-items: center; gap: 6px; border: none; border-radius: 9px; padding: 7px 12px; font-family: inherit; font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(120deg, #2F6BFF, #1E4FD1); cursor: pointer; }
.rm-as-prop__go:disabled { opacity: .6; cursor: default; }
.rm-as-prop__no { border: 1px solid #D8E2F2; background: #fff; border-radius: 9px; padding: 7px 11px; font-family: inherit; font-size: 12px; font-weight: 700; color: #5A6577; cursor: pointer; }
.rm-as-prop__state { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; font-size: 12px; font-weight: 700; color: #5A6577; }
.rm-as-prop__state--ok { color: #0B8A63; }
.rm-as-prop__state--bad { color: var(--rm-danger); }
.rm-as-prop__state--off { color: #8A94A6; }
.rm-as-prop__link { color: #1E4FD1; font-weight: 700; text-decoration: underline; }
.rm-as-prop__undo { border: none; background: none; padding: 0; font-family: inherit; font-size: 12px; font-weight: 700; color: #5A6577; text-decoration: underline; cursor: pointer; }

.rm-as-context__dot { width: 7px; height: 7px; border-radius: 50%; background: #2F6BFF; box-shadow: 0 0 0 3px rgba(47, 107, 255, .18); flex: none; }
.rm-as-context__label { font-weight: 700; white-space: nowrap; flex: none; }
.rm-as-context__x { margin-left: auto; flex: none; width: 20px; height: 20px; border-radius: 6px; border: none; background: transparent; color: #5A6577; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-family: inherit; }
.rm-as-context__x:hover { background: #D5E3FF; color: #0E1525; }
.rm-as-context__scope { display: flex; align-items: center; gap: 4px; font-size: 11.5px; }
.rm-as-context__scopelabel { display: inline-flex; align-items: center; gap: 4px; color: #95A0B2; font-weight: 700; margin-right: 4px; }
.rm-as-context__opt { font-family: inherit; font-size: 11.5px; font-weight: 700; color: #5A6577; background: transparent; border: 1px solid transparent; border-radius: 999px; padding: 3px 9px; cursor: pointer; }
.rm-as-context__opt:hover { background: var(--rm-fill); }
.rm-as-context__opt--on { background: #EBF1FF; color: #1E4FD1; border-color: #C7DBFF; }
/* The focused cell lifted out of the page dim: ring above the scrim, below the panel */
.rm-as-cellring { position: fixed; z-index: 210; pointer-events: none; border-radius: 10px; box-shadow: 0 0 0 2px #2F6BFF, 0 0 0 7px rgba(47, 107, 255, .22), 0 12px 30px -10px rgba(47, 107, 255, .5); transition: left .12s ease, top .12s ease, width .12s ease, height .12s ease; }
.rm-as-cellring[hidden] { display: none; }
.rm-as-cell-lit { position: relative; z-index: 1; }
.rm-as-msg__avatar--pic { background: transparent; overflow: hidden; }
.rm-as-msg__avatar--pic .rm-avatar { width: 30px !important; height: 30px !important; font-size: 12px !important; }
.rm-as-composer__row { display: flex; align-items: center; gap: 9px; }
.rm-as-input {
  flex: 1; box-sizing: border-box; border: 1px solid var(--rm-input-border); background: var(--rm-input-bg);
  border-radius: 11px; padding: 11px 13px; font-family: inherit; font-size: 13.5px; color: var(--rm-ink); outline: none;
}
.rm-as-input:focus { border-color: var(--rm-ai-cobalt); }
.rm-as-micbtn, .rm-as-sendbtn {
  width: 42px; height: 42px; flex: none; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-family: inherit; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.rm-as-micbtn { background: var(--rm-input-bg); border: 1px solid var(--rm-input-border); color: var(--rm-muted); }
.rm-as-micbtn:hover { background: var(--rm-fill); border-color: #CBD5E3; }
.rm-as-micbtn--recording { background: #FDF0F2; border-color: #F6D2D9; color: #D81E46; }
.rm-as-micbtn--transcribing { background: #EEF3FF; border-color: #D5E3FF; color: var(--rm-ai-cobalt-deep); }
.rm-as-sendbtn { background: linear-gradient(120deg, #2F6BFF, #1E4FD1); border: none; color: #fff; }
.rm-as-sendbtn:hover { filter: brightness(1.07); }
.rm-as-micbar {
  display: flex; align-items: center; gap: 10px; border-radius: 12px; padding: 9px 12px; margin-bottom: 9px;
  font-size: 12.5px; font-weight: 700;
}
.rm-as-micbar--recording { background: #FDF0F2; border: 1px solid #F6D2D9; color: #8A4257; }
.rm-as-micbar--transcribing { background: #EEF3FF; border: 1px solid #D5E3FF; color: var(--rm-ai-cobalt-deep); }
.rm-as-micbar--error { background: #FDF0F2; border: 1px solid #F6D2D9; color: #8A4257; font-weight: 500; align-items: flex-start; line-height: 1.5; }
.rm-as-micdot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: #D81E46; animation: rmAsPulse 1.1s ease-in-out infinite; }
.rm-as-wave { display: flex; align-items: flex-end; gap: 2.5px; height: 20px; }
.rm-as-wave span { width: 3px; border-radius: 2px; background: #D81E46; opacity: .8; transform-origin: bottom; animation: rmAsWave 1s ease-in-out infinite; }
.rm-as-micstop {
  display: inline-flex; align-items: center; gap: 6px; background: #D81E46; color: #fff; border: none; border-radius: 9px;
  padding: 6px 11px; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.rm-as-miccancel {
  width: 28px; height: 28px; flex: none; border-radius: 8px; background: #fff; border: 1px solid #F6D2D9;
  display: flex; align-items: center; justify-content: center; color: #8A4257; cursor: pointer;
}
.rm-as-applybtn {
  display: inline-flex; align-items: center; gap: 7px; background: linear-gradient(120deg, #7A5AF8, #5B3EE0); color: #fff;
  border: none; font-family: inherit; font-weight: 700; font-size: 13px; padding: 9px 15px; border-radius: 10px; cursor: pointer;
  transition: filter .15s ease;
}
.rm-as-applybtn:hover { filter: brightness(1.07); }

body.rm-as-pinned { padding-right: 400px; transition: padding-right .26s cubic-bezier(.22, .61, .36, 1); }
@media (max-width: 640px) { body.rm-as-pinned { padding-right: 0; } }


/* ============================================================
   Knowledge Coverage screen (M7, knowledge-coverage.dc.html) — .rm-kc-*
   ============================================================ */

/* Shared hero stat tiles (glass, on the dark hero) — used by the add-on
   screens (coverage, alignment, vendors). --5 makes a five-column row. */
.rm-hstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 22px; }
.rm-hstats--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 980px) { .rm-hstats, .rm-hstats--5 { grid-template-columns: repeat(2, 1fr); } }
.rm-hstat {
  display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .13); border-radius: 14px; padding: 13px 16px;
}
.rm-hstat__icon {
  width: 38px; height: 38px; flex: none; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.rm-hstat__value { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 22px; color: #fff; line-height: 1; }
.rm-hstat__label { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .6); margin-top: 3px; }

/* Shared controls row between hero and content on the add-on screens
   (coverage, vendors): borderless row with a bordered search box and the
   soft segmented tab groups. */
.rm-ctl { display: flex; align-items: center; gap: 10px; margin: 22px 0 16px; flex-wrap: wrap; }
.rm-ctl__search {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; box-sizing: border-box;
  background: #fff; border: 1px solid var(--rm-border); border-radius: 11px; padding: 0 13px; min-width: 280px;
  transition: border-color .15s ease;
}
.rm-ctl__search:hover { border-color: #C4CCD8; }
.rm-ctl__search i, .rm-ctl__search svg { color: var(--rm-muted); }
.rm-ctl__search input {
  border: none; outline: none; background: transparent; font-family: inherit;
  font-size: 13.5px; color: var(--rm-ink); width: 100%;
}
.rm-ctl__search input::placeholder { color: var(--rm-placeholder); }
.rm-ctl__tabs { position: relative; display: inline-flex; gap: 3px; background: #EDF1F6; border-radius: 10px; padding: 3px; }
.rm-ctl__tab {
  position: relative; z-index: 1;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700;
  padding: 6px 12px; border-radius: 8px; background: transparent; color: var(--rm-soft);
  border: none; font-family: inherit; transition: color .25s ease;
}
/* The active tab rides the sliding blue thumb of the site's segmented
   controls (.rm-seg__thumb motion), placed by rm.js (rm.ctlTabs) from the
   active tab's box; the tab itself only changes colour (2026-08-19). */
.rm-ctl__tab--on { color: #fff; }
.rm-ctl__thumb {
  position: absolute; z-index: 0; left: 3px; top: 3px; width: 0; height: 0; border-radius: 8px; pointer-events: none;
  background: var(--rm-grad-ai); box-shadow: 0 3px 8px -2px rgba(20, 30, 60, .35);
  transition: left .32s cubic-bezier(.34, 1.3, .5, 1), width .32s cubic-bezier(.34, 1.3, .5, 1), top .2s ease, height .2s ease, opacity .2s ease;
}
.rm-ctl__thumb--init { transition: none; }
.rm-ctl__tab-count {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; background: rgba(255, 255, 255, .55);
  color: var(--rm-soft); border-radius: 999px; padding: 1px 6px;
}
.rm-ctl__tab--on .rm-ctl__tab-count { background: rgba(255, 255, 255, .22); color: #fff; }
.rm-ctl__sortlabel { font-size: 12.5px; color: var(--rm-soft); font-weight: 600; }

.rm-kc-list { display: flex; flex-direction: column; gap: 10px; }
.rm-kc-row {
  background: #fff; border: 1px solid var(--rm-border); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(14, 21, 37, .04); padding: 16px 18px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.rm-kc-row:hover { border-color: #C9B4F5; box-shadow: 0 14px 30px -22px rgba(14, 21, 37, .4); }
.rm-kc-row__main { display: flex; align-items: center; gap: 18px; }
.rm-kc-asks {
  width: 44px; height: 44px; flex: none; border-radius: 11px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
}
.rm-kc-asks__count { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 17px; }
.rm-kc-asks__unit { font-size: 8.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-top: 2px; }
.rm-kc-asks--high, .rm-kc-impact--high { background: #FEECEF; color: #D81E46; }
.rm-kc-asks--medium, .rm-kc-impact--medium { background: #FDF3E7; color: #D97814; }
.rm-kc-asks--low, .rm-kc-impact--low { background: #E7F7F0; color: #0B8A63; }
.rm-kc-q { font-size: 14.5px; font-weight: 700; color: var(--rm-ink); line-height: 1.4; }
.rm-kc-meta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px;
  font-size: 12px; color: var(--rm-soft); font-weight: 600;
}
.rm-kc-meta__item { display: inline-flex; align-items: center; gap: 5px; }
.rm-kc-meta__item i, .rm-kc-meta__item svg { color: var(--rm-faint); }
.rm-kc-meta__module { color: var(--rm-module); }
.rm-kc-meta__module i, .rm-kc-meta__module svg { color: var(--rm-module); }
.rm-kc-meta__state { font-weight: 700; }
.rm-kc-meta__state i, .rm-kc-meta__state svg { color: currentColor; }
.rm-kc-impact {
  flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
  padding: 5px 10px; border-radius: 999px;
}
.rm-kc-impact__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.rm-kc-draft { background: #FAF8FF; border: 1px solid #E9E2FB; border-radius: 12px; padding: 13px 15px; margin-top: 13px; }
.rm-kc-draft__head { display: flex; align-items: center; gap: 8px; }
.rm-kc-draft__label {
  display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--rm-module);
}
.rm-kc-conf { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 8px; }
.rm-kc-conf--high { color: #0B8A63; background: #E7F7F0; }
.rm-kc-conf--medium { color: #B7791F; background: #FDF3E7; }
.rm-kc-conf--low { color: var(--rm-muted); background: var(--rm-fill); }
.rm-kc-draft__src { margin-left: auto; font-size: 11.5px; color: var(--rm-label); }
.rm-kc-draft__text { font-size: 13px; line-height: 1.6; color: #3A4453; margin-top: 9px; }

.rm-kc-actions { display: flex; align-items: center; gap: 8px; margin-top: 13px; flex-wrap: wrap; }
.rm-kc-btn {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-family: inherit;
  font-size: 13px; font-weight: 700; padding: 9px 14px; border-radius: 10px; cursor: pointer;
  background: #fff; transition: filter .15s ease, background .15s ease;
}
.rm-kc-btn:hover { filter: brightness(.97); }
.rm-kc-btn--create { color: #fff; background: linear-gradient(120deg, #7A5AF8, #5B3EE0); border: none; }
.rm-kc-btn--create:hover { filter: brightness(1.06); }
.rm-kc-btn--resolve { color: #0B8A63; border: 1px solid #C6EDD9; }
.rm-kc-btn--snooze { color: #B7791F; border: 1px solid #F3D89A; }
.rm-kc-btn--dismiss { color: var(--rm-muted); border: 1px solid #E4E9F1; margin-left: auto; }
.rm-kc-btn--restore { color: var(--rm-ai-cobalt); border: 1px solid #CFE0FF; margin-left: auto; padding: 8px 13px; }

.rm-kc-archived {
  display: flex; align-items: center; gap: 9px; margin-top: 13px; padding-top: 13px;
  border-top: 1px solid var(--rm-fill);
}
.rm-kc-archived__note { font-size: 12.5px; color: var(--rm-soft); }

.rm-kc-empty { background: #fff; border: 1px solid var(--rm-border); border-radius: 16px; padding: 54px 20px; text-align: center; }
.rm-kc-empty__icon {
  width: 52px; height: 52px; border-radius: 15px;
  display: inline-flex; align-items: center; justify-content: center;
}
.rm-kc-empty__title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 17px; color: var(--rm-ink); margin-top: 13px; }
.rm-kc-empty__sub { font-size: 13px; color: var(--rm-soft); margin-top: 4px; }

@keyframes rmKcSpin { to { transform: rotate(360deg); } }
.rm-kc-scanning i, .rm-kc-scanning svg { animation: rmKcSpin .9s linear infinite; }

/* ============================================================
   Control Alignment screen (M7, control-alignment.dc.html) — .rm-ca-*
   ============================================================ */

.rm-ca-legend { display: flex; align-items: center; gap: 18px; margin: 20px 2px 16px; flex-wrap: wrap; }
.rm-ca-legend__label {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--rm-label);
}
.rm-ca-legend__item { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--rm-muted); }
.rm-ca-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }

.rm-ca-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(340px, calc((100% - 32px) / 3)), 1fr)); gap: 16px; }
.rm-ca-fwcard {
  background: #fff; border: 1px solid var(--rm-border); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(14, 21, 37, .04); padding: 20px; cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.rm-ca-fwcard:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -20px rgba(14, 21, 37, .32); border-color: #B7E3DB; }
.rm-ca-fwicon {
  width: 44px; height: 44px; flex: none; border-radius: 12px; background: #F1F7F5;
  display: inline-flex; align-items: center; justify-content: center; font-size: 22px;
}
.rm-ca-fwicon--sm { width: 38px; height: 38px; border-radius: 11px; font-size: 19px; }
.rm-ca-dotlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.rm-ca-dotlist li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--rm-muted); }
.rm-ca-dotlist .rm-ca-dot { width: 8px; height: 8px; }
.rm-ca-fwfoot {
  display: flex; align-items: center; justify-content: space-between; margin-top: 16px;
  padding-top: 14px; border-top: 1px solid #EEF1F7;
}
.rm-ca-reviewlink { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: #0B8A63; cursor: pointer; }
.rm-ca-reviewlink:hover { color: #0A6E64; }

.rm-ca-viewhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 20px 0 16px; }
.rm-ca-viewtitle { margin: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 22px; letter-spacing: -.02em; color: var(--rm-ink); }
.rm-ca-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #0E8C7F; cursor: pointer; white-space: nowrap; }
.rm-ca-back:hover { color: #0A6E64; }

.rm-ca-btn {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-family: inherit;
  font-weight: 700; font-size: 13px; padding: 10px 15px; border-radius: 11px; cursor: pointer;
  transition: filter .15s ease;
}
.rm-ca-btn:hover { filter: brightness(1.05); }
.rm-ca-btn:disabled { opacity: .55; cursor: default; }
.rm-ca-btn--ai { background: linear-gradient(120deg, #2F6BFF, #1E4FD1); color: #fff; border: none; }
.rm-ca-btn--queue { background: #FDF3E7; color: #B7791F; border: 1px solid #F3DFAE; }
.rm-ca-btn--neutral { background: var(--rm-ghost-fill); color: #3A4453; border: 1px solid var(--rm-border); }
.rm-ca-btn--confirm, .rm-ca-btn--confirmall { background: linear-gradient(120deg, #12A87A, #0B8A63); color: #fff; border: none; }
.rm-ca-btn--confirm { padding: 9px 15px; border-radius: 10px; }
.rm-ca-btn--reject { background: #fff; color: var(--rm-muted); border: 1px solid #E4E9F1; padding: 9px 15px; border-radius: 10px; }
.rm-ca-queuecount { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; background: #fff; border-radius: 999px; padding: 1px 7px; }
.rm-ca-progress { font-size: 12.5px; font-weight: 600; color: var(--rm-muted); background: #EEF3FF; border: 1px solid #D5E3FF; border-radius: 11px; padding: 10px 14px; margin-bottom: 14px; }

.rm-ca-summary {
  display: flex; align-items: center; gap: 18px; background: #fff; border: 1px solid var(--rm-border);
  border-radius: 16px; box-shadow: 0 1px 2px rgba(14, 21, 37, .04); padding: 18px 22px; margin-bottom: 16px; flex-wrap: wrap;
}
.rm-ca-bignum { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 22px; }
.rm-ca-bigcap { font-size: 12px; color: var(--rm-soft); font-weight: 600; margin-top: 2px; }
.rm-ca-suggestpill {
  margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--rm-module);
  background: #F1ECFF; border: 1px solid #E4DBFB; border-radius: 999px; padding: 6px 12px;
}

.rm-ca-theme { background: #fff; border: 1px solid var(--rm-border); border-radius: 14px; box-shadow: 0 1px 2px rgba(14, 21, 37, .04); overflow: hidden; }
.rm-ca-theme__head { display: flex; align-items: center; gap: 12px; padding: 15px 18px; cursor: pointer; }
.rm-ca-minipill { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 8px; }
.rm-ca-control { display: flex; align-items: center; gap: 13px; padding: 13px 18px; border-bottom: 1px solid #F4F6FB; cursor: pointer; }
.rm-ca-control:hover { background: #F7FBFA; }
.rm-ca-statuspill { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 4px 10px; }

.rm-ca-awaitpill {
  font-size: 12.5px; font-weight: 700; color: #B7791F; background: #FDF3E7;
  border: 1px solid #F3DFAE; border-radius: 999px; padding: 7px 13px;
}
.rm-ca-qcard { background: #fff; border: 1px solid var(--rm-border); border-radius: 16px; box-shadow: 0 1px 2px rgba(14, 21, 37, .04); padding: 18px 20px; }
.rm-ca-qicon {
  width: 36px; height: 36px; flex: none; border-radius: 10px; background: #F1F7F5; color: #0E8C7F;
  display: flex; align-items: center; justify-content: center;
}
.rm-ca-confpill { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 4px 10px; }
.rm-ca-preview { background: #FAFBFE; border: 1px solid #EEF1F7; border-radius: 12px; padding: 13px 15px; margin-top: 13px; }
.rm-ca-preview__label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--rm-label);
}

.rm-ca-empty {
  background: #fff; border: 1px solid var(--rm-border); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(14, 21, 37, .04); padding: 56px 20px; text-align: center;
}
.rm-ca-empty__icon {
  width: 54px; height: 54px; border-radius: 15px; background: #E7F7F0; color: #0B8A63;
  display: inline-flex; align-items: center; justify-content: center;
}
.rm-ca-empty__title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 17px; color: var(--rm-ink); margin-top: 13px; }
.rm-ca-empty__sub { font-size: 13px; color: var(--rm-soft); margin-top: 4px; }

.rm-ca-modalsub { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 13.5px; color: var(--rm-ink); margin: 18px 0 9px; }
.rm-ca-maprow { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid #F4F6FB; }

/* ============================================================
   Vendor Intelligence screens (M7, vendors / vendors-profile /
   vendors-network dc.html) — .rm-vl-* / .rm-vp-* / .rm-vn-*
   ============================================================ */

.rm-vl-table { background: #fff; border: 1px solid var(--rm-border); border-radius: 18px; box-shadow: 0 1px 2px rgba(14, 21, 37, .04); }
.rm-vl-scroll { overflow-x: auto; }
.rm-vl-head, .rm-vl-row {
  display: grid; min-width: 980px; grid-template-columns: 230px 108px 150px 62px 92px 150px 116px;
  gap: 14px; align-items: center; padding: 13px 22px;
}
.rm-vl-head {
  background: #FAFBFE; border-radius: 18px 18px 0 0; border-bottom: 1px solid #EEF1F7;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--rm-label);
}
.rm-vl-row { padding: 14px 22px; border-top: 1px solid var(--rm-fill); transition: background .14s ease; }
.rm-vl-row:hover { background: #F7FBFA; }
.rm-vl-row:hover .rm-vl-rescan { opacity: 1; }
.rm-vl-avatar {
  width: 38px; height: 38px; flex: none; border-radius: 10px; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 14px; letter-spacing: -.02em;
}
.rm-vl-riskpill {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px; width: fit-content;
}
.rm-vl-comp { flex: 1; height: 7px; border-radius: 5px; background: #EEF1F7; overflow: hidden; min-width: 60px; }
.rm-vl-failpill {
  display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700;
  color: #D81E46; background: #FEECEF; border-radius: 999px; padding: 2px 7px; width: fit-content;
}
.rm-vl-view {
  font-size: 12.5px; font-weight: 700; color: var(--rm-muted); background: #fff;
  border: 1px solid #E4E9F1; border-radius: 9px; padding: 7px 13px; transition: all .15s ease;
}
.rm-vl-view:hover { background: #E1F3F0; color: #0A6E64; border-color: #9BD8CF; }
.rm-vl-rescan {
  width: 32px; height: 32px; flex: none; border-radius: 9px; background: var(--rm-ghost-fill);
  border: 1px solid var(--rm-border); display: flex; align-items: center; justify-content: center;
  color: var(--rm-muted); cursor: pointer; opacity: .65;
  transition: opacity .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.rm-vl-rescan:hover { background: #E1F3F0; color: #0A6E64; border-color: #9BD8CF; }
.rm-vl-rescan:disabled { cursor: default; }
.rm-vl-rescan--spin i, .rm-vl-rescan--spin svg { animation: rmVlSpin .8s linear infinite; }

.rm-vp-headcard {
  background: #fff; border: 1px solid var(--rm-border); border-radius: 20px;
  box-shadow: 0 1px 2px rgba(14, 21, 37, .04); padding: 24px 26px;
}
.rm-vp-avatar {
  width: 64px; height: 64px; flex: none; border-radius: 16px;
  background: linear-gradient(135deg, #12A87A, #0EA5C4); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 24px; letter-spacing: -.02em;
}
.rm-vp-stats { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; margin-top: 22px; }
@media (max-width: 1100px) { .rm-vp-stats { grid-template-columns: repeat(4, 1fr); } }
.rm-vp-stat { border: 1px dashed #DCE3EC; border-radius: 12px; padding: 13px 14px; }
.rm-vp-tabs { display: flex; gap: 26px; border-bottom: 1px solid #E4E9F1; margin: 26px 2px 0; overflow-x: auto; }
.rm-vp-tab {
  display: inline-flex; align-items: center; gap: 7px; padding: 12px 2px; font-size: 14px;
  font-weight: 600; color: var(--rm-soft); border-bottom: 2px solid transparent; white-space: nowrap;
  cursor: pointer; transition: color .15s ease, border-color .15s ease;
}
.rm-vp-tab:hover { color: var(--rm-ink); }
.rm-vp-tab--on { font-weight: 700; color: var(--rm-ink); border-bottom-color: #0E8C7F; }
.rm-vp-tab__badge { font-size: 11px; font-weight: 700; color: var(--rm-muted); background: var(--rm-fill); border-radius: 999px; padding: 1px 8px; }
.rm-vp-fieldlabel { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--rm-placeholder); }
.rm-vp-srcchip {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid #E4E9F1; border-radius: 10px;
  padding: 9px 13px; font-size: 12.5px; font-weight: 600; color: var(--rm-muted); transition: all .15s ease;
}
.rm-vp-srcchip:hover { border-color: #9BD8CF; color: #0A6E64; }
.rm-vp-srcchip__tier { font-size: 10.5px; font-weight: 700; color: var(--rm-soft); background: var(--rm-fill); border-radius: 999px; padding: 2px 7px; }
.rm-vp-certgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1000px) { .rm-vp-certgrid { grid-template-columns: repeat(2, 1fr); } }
.rm-vp-subtable { background: #fff; border: 1px solid var(--rm-border); border-radius: 16px; box-shadow: 0 1px 2px rgba(14, 21, 37, .04); overflow-x: auto; }
.rm-vp-subhead, .rm-vp-subrow {
  display: grid; grid-template-columns: 1.3fr 2fr 1fr 1.2fr 90px; gap: 14px; align-items: center;
  padding: 13px 22px; min-width: 760px;
}
.rm-vp-subhead {
  background: #FAFBFE; border-radius: 16px 16px 0 0; border-bottom: 1px solid #EEF1F7;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--rm-label);
}
.rm-vp-subrow { padding: 14px 22px; border-top: 1px solid var(--rm-fill); }
.rm-vp-field { position: relative; }
.rm-vp-editbtn {
  margin-left: auto; width: 24px; height: 24px; border-radius: 7px; background: var(--rm-ghost-fill);
  border: 1px solid var(--rm-border); display: flex; align-items: center; justify-content: center;
  color: var(--rm-muted); cursor: pointer; opacity: 0;
  transition: opacity .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.rm-vp-field:hover .rm-vp-editbtn { opacity: 1; }
.rm-vp-editbtn:hover { background: #EAF0FE; border-color: #CFE0FF; color: #2F6BFF; }
.rm-vp-editedpill {
  display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700;
  color: var(--rm-module); background: #F3EEFF; border: 1px solid #E2D6FB; border-radius: 999px;
  padding: 2px 7px; white-space: nowrap;
}
.rm-vp-revert { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--rm-soft); cursor: pointer; }
.rm-vp-revert:hover { color: #2F6BFF; }
.rm-vp-alert {
  background: #fff; border: 1px solid var(--rm-border); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(14, 21, 37, .04); padding: 18px 20px; margin-bottom: 12px;
}
@media (max-width: 760px) { .rm-vp-alertdiff, .rm-vp-overview, .rm-vp-fieldgrid { grid-template-columns: 1fr !important; } }
.rm-vp-ackbtn {
  flex: none; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  background: #fff; color: #0E8C7F; border: 1px solid #B9E5DD; font-family: inherit;
  font-weight: 700; font-size: 13px; padding: 9px 14px; border-radius: 10px; cursor: pointer; transition: .15s ease;
}
.rm-vp-ackbtn:hover { background: #F0FBF8; border-color: #8FD8CB; }

.rm-vn-stage { overflow-x: auto; padding-bottom: 8px; }
.rm-vn-org {
  width: min(400px, 100%); text-align: center; background: linear-gradient(120deg, #0A1B26, #0E6B62);
  border-radius: 16px; padding: 22px 26px; position: relative; box-shadow: 0 14px 30px -18px rgba(14, 107, 98, .7);
}
.rm-vn-org__kicker {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: #8EF0DA;
}
.rm-vn-org__name { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 22px; color: #fff; margin-top: 6px; letter-spacing: -.01em; }
.rm-vn-org__sub { font-size: 12.5px; color: rgba(255, 255, 255, .68); margin-top: 6px; line-height: 1.5; }
.rm-vn-rail { position: absolute; transform: translateX(-50%); width: 2px; background: #CBD5E1; }
.rm-vn-vcard {
  background: #fff; border: 1px solid var(--rm-border); border-radius: 15px;
  box-shadow: 0 1px 2px rgba(14, 21, 37, .04); padding: 16px; position: relative;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.rm-vn-vcard:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -20px rgba(14, 21, 37, .3); border-color: #B7E3DB; }
.rm-vn-avatar {
  width: 46px; height: 46px; flex: none; border-radius: 12px; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 16px; letter-spacing: -.02em;
}
.rm-vn-open {
  font-size: 12px; font-weight: 700; color: #0E8C7F; background: #E9F7F4;
  border: 1px solid #C6EAE3; border-radius: 8px; padding: 5px 12px; transition: all .15s ease;
}
.rm-vn-open:hover { background: #E1F3F0; color: #0A6E64; border-color: #9BD8CF; }
.rm-vn-subcard { background: #F8FAF9; border: 1px solid #EAEFED; border-radius: 12px; padding: 12px 14px; }
.rm-vn-nosubs {
  background: #F8FAFC; border: 1px dashed #E2E8F0; border-radius: 12px; padding: 14px;
  text-align: center; font-size: 11.5px; color: var(--rm-placeholder);
}

@keyframes rmVlSpin { to { transform: rotate(360deg); } }

/* ============================================================
   Page shell (M8). Replaces the Metronic app-shell wrappers
   (.app-root/.app-page/.app-wrapper/.app-main/.app-container) that every
   layout used to open. The top bar is sticky above it; .rm-page paints the
   content area and .rm-container sets the width.
   ============================================================ */
.rm-shell { display: flex; flex-direction: column; min-height: calc(100vh - var(--rm-topbar-h, 66px)); }

/* ============================================================
   Library entry editor + bulk import pages (M8):
   /library/edit/:id (.rm-le-*) and /library/create (.rm-li-*).
   ============================================================ */
.rm-le-card { margin-top: 18px; }
.rm-le-field { margin-top: 16px; }
.rm-le-field .rm-field-label { margin-bottom: 6px; }
.rm-le-field .rm-input { width: 100%; }
.rm-le-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
.rm-le-field--wide { grid-column: 1 / -1; }
@media (max-width: 860px) { .rm-le-grid { grid-template-columns: 1fr; } }
.rm-le-subtle { font-size: 12.5px; color: var(--rm-soft); margin-top: 3px; }
.rm-le-alts { display: flex; flex-direction: column; gap: 8px; }
.rm-le-altrow { display: flex; gap: 8px; align-items: center; }
.rm-le-altrow .rm-input { flex: 1; }
.rm-le-altremove { width: 34px; height: 34px; border-radius: 10px; flex: none; }
.rm-le-editor { min-height: 140px; line-height: 1.55; overflow-y: auto; max-height: 420px; }
.rm-le-editor:focus { outline: none; border-color: var(--rm-green); box-shadow: var(--rm-focus-ring); }
.rm-le-footer { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.rm-le-alignhead { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.rm-le-alignbadges { display: flex; gap: 6px; flex-wrap: wrap; }
.rm-le-aligntable { margin-top: 14px; display: flex; flex-direction: column; }
.rm-le-alignrow {
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-top: 1px solid #F0F3F8; font-size: 13px;
}
.rm-le-alignref { font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 600; color: var(--rm-slate); min-width: 74px; }
.rm-le-aligntitle { font-weight: 600; color: var(--rm-ink); }
.rm-le-alignfw { font-size: 11.5px; font-weight: 700; color: var(--rm-muted); white-space: nowrap; }
.rm-li-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
@media (max-width: 900px) { .rm-li-grid { grid-template-columns: 1fr; } }
.rm-li-drop {
  margin-top: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; min-height: 140px; border: 2px dashed var(--rm-border); border-radius: 14px;
  background: var(--rm-ghost-fill); color: var(--rm-muted); font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: all var(--rm-ease); text-align: center; padding: 18px;
}
.rm-li-drop:hover, .rm-li-drop--over { border-color: var(--rm-green); background: #F2FBF7; color: var(--rm-ink); }
.rm-li-bar { height: 8px; border-radius: 999px; background: var(--rm-fill); margin-top: 12px; overflow: hidden; }
.rm-li-bar__fill { height: 100%; border-radius: 999px; background: var(--rm-grad-primary); transition: width .4s ease; }
.rm-li-counts { display: flex; gap: 18px; margin-top: 10px; font-size: 12.5px; color: var(--rm-muted); }
.rm-li-counts strong { color: var(--rm-ink); font-weight: 800; }
.rm-li-cleanup { margin-top: 18px; padding-top: 14px; border-top: 1px solid #F0F3F8; }
.rm-li-prevrow { padding: 10px 0; border-top: 1px solid #F0F3F8; }
.rm-li-prevq { font-weight: 700; font-size: 13px; color: var(--rm-ink); }
.rm-li-preva { font-size: 12.5px; color: var(--rm-slate); margin-top: 3px; }

/* Source editor (M8): /source/edit/:id (.rm-se-*) */
.rm-se-identity {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-bottom: 16px; border-bottom: 1px solid #F0F3F8;
}
.rm-se-filename { font-weight: 700; font-size: 14px; color: var(--rm-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-se-collapse {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; background: none; border: none; padding: 0; color: var(--rm-muted); cursor: pointer;
}
.rm-se-collapse svg { transition: transform var(--rm-ease); }
.rm-se-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 16px; }
@media (max-width: 900px) { .rm-se-meta { grid-template-columns: repeat(2, 1fr); } }
.rm-se-meta__v { font-size: 13px; font-weight: 600; color: var(--rm-ink); margin-top: 3px; }
.rm-se-sections { margin-top: 16px; border-top: 1px solid #F0F3F8; }
.rm-se-section { padding: 12px 0; border-bottom: 1px solid #F0F3F8; }
.rm-se-sectitle { font-size: 13px; font-weight: 700; color: var(--rm-ink); }
.rm-se-previewbox { margin-top: 14px; }
.rm-se-docpreview {
  max-height: 560px; overflow: auto; border: 1px solid var(--rm-border); border-radius: 12px;
  padding: 16px; background: #fff; font-size: 13px; color: var(--rm-slate);
}
.rm-se-docpreview table { width: 100%; border-collapse: collapse; }
.rm-se-docpreview td, .rm-se-docpreview th { border: 1px solid var(--rm-border); padding: 6px 8px; }
/* Knowledge preview modal, "Original document" for docx/xlsx (2026-09-03):
   the same server conversion the edit page shows above, in the modal's box. */
.rm-kl-docpreview {
  max-height: 420px; overflow: auto; border: 1px solid #E7ECF3; border-radius: 12px;
  padding: 14px 16px; background: #fff; font-size: 12.5px; line-height: 1.55; color: var(--rm-slate);
}
.rm-kl-docpreview table { width: 100%; border-collapse: collapse; font-size: 12px; }
.rm-kl-docpreview td, .rm-kl-docpreview th { border: 1px solid #E7ECF3; padding: 5px 7px; vertical-align: top; }
.rm-kl-docpreview img { max-width: 100%; }
.rm-kl-docpreview h1, .rm-kl-docpreview h2, .rm-kl-docpreview h3 { font-size: 14px; margin: 12px 0 6px; }
.rm-kl-docpreview p { margin: 0 0 8px; }

/* ============================================================
   System pages (M8): error / not-found.
   ============================================================ */
.rm-sys {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; background: var(--rm-page); font-family: var(--rm-font-body); padding: 24px;
}
.rm-sys__card { max-width: 460px; width: 100%; text-align: center; padding: 40px 36px; }
.rm-sys__icon {
  width: 64px; height: 64px; border-radius: 18px; background: #EEF3FF; color: #2F5FD7;
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.rm-sys__icon--error { background: #FEECEF; color: #D81E46; }
.rm-sys__title { font-family: var(--rm-font-heading); font-weight: 800; font-size: 24px; letter-spacing: -.02em; color: var(--rm-ink); margin: 0 0 8px; }
.rm-sys__text { font-size: 14px; font-weight: 500; color: var(--rm-muted); margin: 0 0 22px; }
.rm-sys__footer { font-size: 12.5px; color: var(--rm-soft); }
.rm-sys__footer a { color: var(--rm-muted); font-weight: 600; }

/* ============================================================
   AI logs (M8): internal observability table at /ailogs.
   ============================================================ */
.rm-al-dbline { margin-top: 14px; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .55); font-family: var(--rm-font-mono, 'IBM Plex Mono', monospace); }
.rm-al-tablecard { margin-top: 18px; padding: 6px 0 0; overflow: hidden; }
.rm-al-table { width: 100%; overflow-x: auto; }
.rm-al-row {
  display: grid;
  grid-template-columns: 150px minmax(120px, 1fr) minmax(110px, auto) minmax(110px, auto) minmax(140px, 1fr) 84px 110px 74px 44px;
  gap: 10px; align-items: center;
  padding: 10px 18px; font-size: 13px; color: var(--rm-slate);
  border-bottom: 1px solid #F0F3F8; min-width: 980px;
}
.rm-al-row:not(.rm-al-row--head):hover { background: #F8FAFD; cursor: pointer; }
.rm-al-row--head {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--rm-label); border-bottom: 1px solid var(--rm-border); cursor: default;
}
.rm-al-num { text-align: right; font-variant-numeric: tabular-nums; }
.rm-al-dim { color: var(--rm-placeholder); font-size: 12px; }
.rm-al-chip {
  display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--rm-ghost-fill); border: 1px solid var(--rm-border); border-radius: 8px;
  padding: 3px 9px; font-size: 12px; font-weight: 600; color: var(--rm-muted);
}
.rm-al-chip--op { background: #EEF3FF; border-color: #DCE6FF; color: #2F5FD7; }
.rm-al-model { font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-al-pill {
  display: inline-block; border-radius: 999px; padding: 3px 10px;
  font-size: 11.5px; font-weight: 700;
}
.rm-al-pill--ok { background: #E7F7F0; color: #0B8A63; }
.rm-al-pill--err { background: #FEECEF; color: #D81E46; }
.rm-al-view {
  width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--rm-border);
  background: #fff; color: var(--rm-muted); display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--rm-ease);
}
.rm-al-view:hover { background: var(--rm-fill); color: var(--rm-ink); }
.rm-al-tablecard .rm-pager { padding: 12px 18px; margin-top: 0; }
.rm-al-loading { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 160px; padding: 20px; }
/* Quality by model (28-ai-evals.md): the card between the hero and the toolbar */
.rm-al-quality { margin-top: 18px; padding: 18px 20px 6px; }
.rm-al-quality__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rm-al-quality__sub { margin-top: 4px; font-size: 13px; color: var(--rm-soft); max-width: 720px; }
.rm-al-quality__body { margin-top: 12px; }
.rm-al-quality__guide { margin-top: 14px; }
.rm-al-quality__guidecols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.rm-al-quality__guide code { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; background: var(--rm-ghost-fill); border-radius: 6px; padding: 1px 6px; }
.rm-al-qrow--head [data-rm-tip] { cursor: help; text-decoration: underline dotted; text-decoration-color: #C5CCD9; text-underline-offset: 3px; }
/* The four kinds of drift, each a small figure: before in slate, after in the
   AI cobalt, so the shift is the one thing the eye lands on. */
.rm-al-drift__title { margin: 4px 0 10px; }
.rm-al-drift { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.rm-al-drift__item { border: 1px solid #EEF1F7; border-radius: 12px; padding: 12px 14px 14px; background: #fff; color: var(--rm-slate); }
.rm-al-drift__fig { display: block; width: 100%; height: auto; max-height: 104px; color: var(--rm-ai-cobalt); }
.rm-al-drift__axis { stroke: #D5DBE6; stroke-width: 1.5; }
.rm-al-drift__curve { fill: none; stroke-width: 2.25; stroke-linecap: round; }
.rm-al-drift__curve--before { stroke: #B7C0D0; stroke-dasharray: 4 4; }
.rm-al-drift__curve--after { stroke: var(--rm-ai-cobalt); }
.rm-al-drift__bar { rx: 3; }
.rm-al-drift__bar--before { fill: #CBD3E0; }
.rm-al-drift__bar--after { fill: var(--rm-ai-cobalt); }
.rm-al-drift__arrow { fill: none; stroke: currentColor; stroke-width: 1.75; }
.rm-al-drift__dots--a circle { fill: #CBD3E0; }
.rm-al-drift__dots--b circle { fill: var(--rm-tone-amber-fg); }
.rm-al-drift__boundary { stroke-width: 2.25; stroke-linecap: round; }
.rm-al-drift__boundary--before { stroke: #B7C0D0; stroke-dasharray: 4 4; }
.rm-al-drift__boundary--after { stroke: var(--rm-ai-cobalt); }
.rm-al-drift__lbl { font-family: var(--rm-font-body); font-size: 8.5px; font-weight: 600; fill: var(--rm-placeholder); letter-spacing: .01em; }
.rm-al-drift__name { margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--rm-ink); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rm-al-drift__formula { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 500; color: var(--rm-placeholder); }
.rm-al-drift__desc { margin-top: 4px; font-size: 12px; color: var(--rm-muted); line-height: 1.5; }
.rm-al-drift__here { margin-top: 8px; font-size: 12px; color: var(--rm-slate); line-height: 1.5; border-top: 1px dashed #EEF1F7; padding-top: 8px; }
.rm-al-drift__legend { display: flex; align-items: center; gap: 6px; margin: 10px 0 14px; font-size: 11.5px; color: var(--rm-placeholder); }
.rm-al-drift__swatch { display: inline-block; width: 14px; height: 4px; border-radius: 2px; }
.rm-al-drift__swatch--before { background: #B7C0D0; }
.rm-al-drift__swatch--after { background: var(--rm-ai-cobalt); }
.rm-al-quality__loading { min-height: 90px; }
.rm-al-quality__section { margin: 12px -20px 0; padding: 0 20px 12px; }
.rm-al-quality__section + .rm-al-quality__section { border-top: 1px solid #F0F3F8; padding-top: 12px; }
.rm-al-quality__title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.rm-al-quality__hint { font-size: 12px; color: var(--rm-placeholder); }
.rm-al-qtable { width: 100%; overflow-x: auto; }
.rm-al-qrow {
  display: grid; gap: 10px; align-items: center;
  padding: 8px 0; font-size: 13px; color: var(--rm-slate);
  border-bottom: 1px solid #F0F3F8; min-width: 860px;
}
.rm-al-qrow--models { grid-template-columns: minmax(150px, 1.3fr) minmax(150px, 1.2fr) 70px 90px 70px 90px 80px 80px minmax(150px, 1fr) 90px; }
.rm-al-qrow--runs { grid-template-columns: 150px minmax(150px, 1.4fr) minmax(120px, 1fr) 90px 70px 110px; }
.rm-al-qrow--head {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--rm-label); border-bottom: 1px solid var(--rm-border);
}
.rm-al-qrow:last-child { border-bottom: none; }
.rm-al-qbands { display: inline-flex; gap: 6px; font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--rm-muted); }
.rm-al-qbands span { background: var(--rm-ghost-fill); border: 1px solid var(--rm-border); border-radius: 7px; padding: 2px 6px; white-space: nowrap; }
.rm-al-qwarn { color: #B54708; font-weight: 700; }
.rm-al-qempty { padding: 10px 0 6px; font-size: 13px; color: var(--rm-soft); }
.rm-al-qempty code { font-family: 'IBM Plex Mono', monospace; font-size: 12px; background: var(--rm-ghost-fill); border-radius: 6px; padding: 1px 6px; }
/* AI logs filter menu: four facet groups (operation, model, caller, user) */
.rm-al-filtermenu { width: 340px; padding: 8px; max-height: min(70vh, 560px); overflow-y: auto; }
.rm-al-filtergroup { padding-bottom: 4px; }
.rm-al-filtergroup + .rm-al-filtergroup { border-top: 1px solid #EEF1F7; margin-top: 4px; padding-top: 4px; }
.rm-al-filtergroup .rm-popmenu__hint { display: flex; align-items: center; justify-content: space-between; }
.rm-al-filterreset { background: none; border: none; font-family: inherit; font-size: 10.5px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--rm-ai-cobalt); cursor: pointer; padding: 0 2px; }
.rm-al-filtergroup .rm-popmenu__item { padding: 7px 11px; }
.rm-al-modal { max-width: 760px; }
/* .rm-al-modal-body: height now governed by .rm-modal (flex column capped at the viewport) */
.rm-al-prompt { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.rm-al-bubble { border-radius: 12px; padding: 10px 12px; font-size: 12.5px; }
.rm-al-bubble__role { display: inline-block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 5px; opacity: .7; }
.rm-al-bubble__text { white-space: pre-wrap; word-break: break-word; color: var(--rm-slate); }
.rm-al-bubble--system { background: var(--rm-ghost-fill); border: 1px solid var(--rm-border); }
.rm-al-bubble--user { background: #EEF3FF; border: 1px solid #DCE6FF; }
.rm-al-bubble--assistant { background: #E9F7F1; border: 1px solid #CDEEDF; }
.rm-al-bubble--tool { background: #FFF6E6; border: 1px solid #F6E3BC; }
.rm-al-pre {
  background: var(--rm-ghost-fill); border: 1px solid var(--rm-border); border-radius: 12px;
  padding: 12px 14px; margin: 8px 0 0; font-size: 12px; white-space: pre-wrap; word-break: break-word;
  max-height: 300px; overflow-y: auto; color: var(--rm-slate);
}

/* MCP log (29-mcp-log.md): the admin page at /mcplog, on the AI logs classes
   above plus its own row grid, usage tables and modal caller list. */
.rm-ml-row {
  display: grid;
  grid-template-columns: 150px minmax(120px, 1fr) minmax(120px, auto) minmax(150px, auto) minmax(220px, 2fr) 84px 74px 44px;
  gap: 10px; align-items: center;
  padding: 10px 18px; font-size: 13px; color: var(--rm-slate);
  border-bottom: 1px solid #F0F3F8; min-width: 1040px;
}
.rm-ml-row:not(.rm-ml-row--head):hover { background: #F8FAFD; cursor: pointer; }
.rm-ml-row--head {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--rm-label); border-bottom: 1px solid var(--rm-border); cursor: default;
}
.rm-ml-what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--rm-ink); }
.rm-ml-urow {
  display: grid; gap: 10px; align-items: center;
  padding: 8px 0; font-size: 13px; color: var(--rm-slate);
  border-bottom: 1px solid #F0F3F8; min-width: 860px;
}
.rm-ml-urow--tools { grid-template-columns: minmax(180px, 1.4fr) 60px minmax(110px, 1fr) 60px 60px 60px 80px 150px; }
.rm-ml-urow--users { grid-template-columns: minmax(150px, 1.2fr) minmax(130px, 1fr) 60px minmax(110px, 1fr) 60px minmax(220px, 2fr) 150px; }
.rm-ml-urow:last-child { border-bottom: none; }
.rm-ml-share { display: flex; align-items: center; gap: 8px; }
.rm-ml-share__bar { flex: 1; height: 6px; border-radius: 3px; background: #EEF1F7; overflow: hidden; }
.rm-ml-share__fill { display: block; height: 100%; border-radius: 3px; background: var(--rm-ai-cobalt); }
.rm-ml-share__pct { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--rm-muted); min-width: 40px; text-align: right; }
.rm-ml-tools { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 0; }
.rm-ml-tools .rm-al-chip { font-size: 11px; padding: 2px 7px; }
.rm-ml-modal-what { margin-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--rm-ink); line-height: 1.5; }
.rm-ml-modal-kv { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; margin: 8px 0 0; font-size: 12.5px; }
.rm-ml-modal-kv dt { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--rm-label); padding-top: 2px; }
.rm-ml-modal-kv dd { margin: 0; color: var(--rm-slate); word-break: break-word; }
.rm-ml-pre--error { color: #B5123C; background: #FFF4F6; border-color: #F5C2CE; }

/* ============================================================
   Auth screens (M8): sign-in, forgot-password, new-password.
   Split layout: white form panel left, dark interactive aside right.
   The aside effect classes (.auth-aside__*) moved here from the
   retired css/custom/pages/auth.css; behavior stays in
   js/custom/authentication/interactive-aside.js.
   ============================================================ */
.rm-auth { display: flex; min-height: 100vh; background: var(--rm-page); font-family: var(--rm-font-body); }
.rm-auth__panel { flex: 1 1 52%; display: flex; flex-direction: column; align-items: center; padding: 40px 24px 26px; }
.rm-auth__form { width: 100%; max-width: 400px; margin: auto 0; }
.rm-auth__title {
  font-family: var(--rm-font-heading); font-weight: 800; font-size: 26px;
  letter-spacing: -.02em; color: var(--rm-ink); margin: 0 0 6px; text-align: center;
}
.rm-auth__sub { font-size: 14px; font-weight: 500; color: var(--rm-muted); text-align: center; margin: 0 0 24px; }
.rm-auth__field { margin-bottom: 16px; }
.rm-auth__field .rm-field-label { margin-bottom: 6px; }
.rm-auth__field .rm-input { width: 100%; }
.rm-auth__row { display: flex; justify-content: flex-end; margin: 4px 0 20px; font-size: 13.5px; }
.rm-auth__link { color: var(--rm-green-deep); font-weight: 700; }
.rm-auth__link:hover { color: var(--rm-green-deep); text-decoration: underline; }
.rm-auth__submit { width: 100%; justify-content: center; }
.rm-auth__sso { width: 100%; justify-content: center; gap: 10px; }
.rm-auth__divider {
  display: flex; align-items: center; gap: 12px; margin: 20px 0;
  color: var(--rm-soft); font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
}
.rm-auth__divider::before, .rm-auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--rm-border); }
.rm-auth__alert {
  display: flex; align-items: flex-start; gap: 8px; margin-bottom: 16px;
  background: #FEF2F4; border: 1px solid #FBD5DE; color: #D81E46;
  border-radius: 11px; padding: 10px 12px; font-size: 13px; font-weight: 600;
}
.rm-auth__alert[hidden] { display: none; }
.rm-auth__alert i { flex: none; margin-top: 1px; }
.rm-auth__below { margin-top: 18px; text-align: center; font-size: 13.5px; }
.rm-auth__hint { font-size: 12px; color: var(--rm-soft); margin-top: 6px; }
.rm-auth__meter { display: flex; gap: 6px; margin-top: 8px; }
.rm-auth__meter span { flex: 1; height: 4px; border-radius: 999px; background: var(--rm-fill); transition: background var(--rm-ease); }
.rm-auth__meter span.rm-auth__meter-on { background: var(--rm-green); }
.rm-auth__done { max-width: 400px; margin: auto 0; text-align: center; }
.rm-auth__done[hidden] { display: none; }
.rm-auth__done-icon {
  width: 56px; height: 56px; border-radius: 16px; background: #E7F7F0; color: var(--rm-green-deep);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.rm-auth__footer { display: flex; gap: 18px; padding-top: 24px; font-size: 12.5px; font-weight: 500; color: var(--rm-soft); }
.rm-auth__footer a { color: var(--rm-muted); font-weight: 600; }
.rm-auth__footer a:hover { color: var(--rm-ink); }
.rm-auth__aside {
  flex: 1 1 48%; position: relative; display: flex; align-items: center; justify-content: center;
  background: var(--rm-hero-gradient); border-left: 1px solid var(--rm-hero-border, #0C2620);
}
.rm-auth__aside-content { display: flex; flex-direction: column; align-items: center; padding: 48px 40px; width: 100%; }
.rm-auth__aside-logo { height: 76px; }
.rm-auth__aside-img { width: min(72%, 500px); margin-top: 56px; filter: drop-shadow(0 24px 48px rgba(0, 0, 0, .35)); }
@media (max-width: 1020px) { .rm-auth__aside { display: none; } }

/* Interactive aside effect layers (cursor-reactive constellation). */
.auth-aside {
  position: relative;
  overflow: hidden;
  /* Colour of the particle field / links, as an "r, g, b" triplet read by JS. */
  --auth-fx-rgb: 127, 227, 182;
}
.auth-aside__canvas {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; pointer-events: none;
}
.auth-aside__spotlight {
  position: absolute; z-index: 0; left: 0; top: 0;
  width: 46vmax; height: 46vmax; pointer-events: none; border-radius: 50%;
  opacity: 0;
  transform: translate3d(calc(var(--spot-x, 50%) - 50%), calc(var(--spot-y, 50%) - 50%), 0);
  background: radial-gradient(circle at center, rgba(var(--auth-fx-rgb), 0.22), rgba(var(--auth-fx-rgb), 0) 62%);
  mix-blend-mode: soft-light;
  transition: opacity 0.5s ease;
  will-change: transform;
}
.auth-aside--active .auth-aside__spotlight { opacity: 1; }
.auth-aside__content { position: relative; z-index: 1; }
.auth-aside__parallax { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .auth-aside__spotlight { display: none; }
  .auth-aside__parallax { transition: none; transform: none !important; }
}

/* Account: page-level save bar, profile picture card + crop, folded AI settings (2026-08-18) */
.rm-ac-savebar { position: sticky; bottom: 16px; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 24px; padding: 12px 16px 12px 18px; background: #0E1525; color: #fff; border-radius: 14px; box-shadow: 0 18px 40px -18px rgba(14, 21, 37, .55); }
.rm-ac-savebar__msg { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; }
.rm-ac-savebar__btns { display: flex; gap: 8px; align-items: center; }
.rm-ac-savebar .rm-btn--secondary { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #fff; }
.rm-ac-avatarcard { display: flex; align-items: center; gap: 16px; }
.rm-ac-avatarcard__tile { width: 84px; height: 84px; border-radius: 22px; font-size: 28px; flex: none; }
.rm-ac-avatarcard__tile .rm-avatar__img { border-radius: 22px; }
.rm-ac-avatarcard__body { flex: 1; min-width: 0; }
.rm-ac-prefrow--off .rm-ac-preflabel, .rm-ac-prefrow--off .rm-ac-prefsub { color: #A3ACBA; }
.rm-ac-switch[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.rm-ac-ssonote { display: flex; align-items: flex-start; gap: 11px; background: #F6F8FC; border: 1px solid #E7ECF3; border-radius: 12px; padding: 12px 14px; }
.rm-ac-crop { display: flex; flex-direction: column; gap: 12px; }
.rm-ac-crop__stage { position: relative; width: 280px; height: 280px; margin: 0 auto; border-radius: 16px; overflow: hidden; background: #EEF1F7; }
.rm-ac-crop__canvas { display: block; width: 280px; height: 280px; cursor: grab; touch-action: none; }
.rm-ac-crop__canvas:active { cursor: grabbing; }
.rm-ac-crop__ring { position: absolute; inset: 0; border-radius: 16px; box-shadow: inset 0 0 0 2px rgba(47, 107, 255, .55); pointer-events: none; }
.rm-ac-crop__zoom { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.rm-ac-crop__zoom input[type="range"] { flex: 1; accent-color: #2F6BFF; }
.rm-ac-fold__head { display: flex; align-items: center; gap: 10px; }

/* ---- Knowledge cleanup page (/knowledge/cleanup, 2026-08-19) ------------ */
.rm-kc-body { margin-top: 22px; }
.rm-btn--disabled { opacity: .55; pointer-events: none; }
.rm-kc-wait { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 140px; }
.rm-kc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.rm-kc-note { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--rm-muted); }
/* Tab headline (2026-08-24): the questionnaire tabs' title + subtitle
   pattern (.rm-qf__head dialect) on every cleanup tab, with the filter,
   sort and bulk controls in the right slot. */
.rm-kc-head--titled { align-items: flex-end; margin-bottom: 16px; }
/* The title/description block yields before the controls wrap (2026-08-31):
   without a flex basis it sits at content width (a 760px description), and a
   wide filter label ("Unused entries, files & links") pushed the whole
   controls row onto a second line. Shrinking here makes the description wrap
   its text instead. */
.rm-kc-head--titled > div:first-child { flex: 1 1 320px; min-width: 0; }
.rm-kc-head__title { margin: 0; font-family: var(--rm-font-heading); font-weight: 700; font-size: 20px; color: #0E1525; }
.rm-kc-head__sub { font-size: 13.5px; color: #8A94A6; margin-top: 4px; max-width: 760px; line-height: 1.5; }
.rm-kc-head__controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* The fold-out toggle under a duplicate card: quiet, full-width, the
   copies list opens beneath it. */
.rm-kc-fold {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  margin-top: 10px; padding: 6px 8px; font-family: var(--rm-font-body);
  font-size: 12px; font-weight: 700; color: #5A6577;
  background: transparent; border: 1px dashed #E4E9F1; border-radius: 9px; cursor: pointer;
}
.rm-kc-fold:hover { background: #F6F8FC; }
/* What tells one copy apart from the original: added date, own usage. */
.rm-kc-copies__diff { font-size: 11px; color: #8A94A6; margin-top: 3px; }
/* Clamped answer text on cards; Show more lifts the clamp. */
.rm-kc-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Manual questions (2026-08-24, 05-questionnaires "Manual questions"). The
   Questions tab's no-questions state offers the two ways to fill an empty
   questionnaire; the composer (Questions tab + Settings tab) is rows of
   question + optional answer; the Settings card lists them with a remove. */
.rm-qq-empty-manual { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 46px 20px 40px; border-top: 1px solid #EEF1F7; }
.rm-qq-empty-manual__title { font-family: var(--rm-font-heading); font-weight: 800; font-size: 17px; color: var(--rm-ink); margin-top: 4px; }
.rm-qq-empty-manual__sub { font-size: 13.5px; color: var(--rm-muted); max-width: 520px; line-height: 1.55; }
.rm-qq-empty-manual__acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.rm-qq-manual { display: flex; flex-direction: column; gap: 10px; }
.rm-qq-manual__row { display: flex; align-items: flex-start; gap: 10px; }
.rm-qq-manual__n { flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--rm-fill); color: var(--rm-muted); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 6px; font-variant-numeric: tabular-nums; }
.rm-qq-manual__row textarea.rm-input { resize: vertical; line-height: 1.5; min-height: 0; }
.rm-qq-manual__x { flex: none; width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--rm-border); background: transparent; color: var(--rm-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; margin-top: 6px; }
.rm-qq-manual__x:hover { background: var(--rm-fill); color: #E11D48; }
.rm-qs-mqlist { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; max-height: 420px; overflow-y: auto; }
.rm-qs-mqrow { display: flex; align-items: center; gap: 10px; border: 1px solid #EEF1F7; background: #FAFBFE; border-radius: 10px; padding: 8px 10px; }
.rm-qs-mqrow__state { flex: none; display: inline-flex; }
.rm-qs-mqrow__text { flex: 1; min-width: 0; font-size: 13px; color: var(--rm-ink); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-qs-mqrow__x { flex: none; width: 28px; height: 28px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: #95A0B2; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.rm-qs-mqrow__x:hover { background: #FEECEF; color: #E11D48; border-color: #F6D2D9; }
.rm-kc-items { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 1020px) { .rm-kc-items { grid-template-columns: 1fr; } }
/* Per-tab loading (2026-09-03): a tab whose fetch has not landed shimmers in
   its own grid, so the page never waits on the slowest fetch to show the
   default tab. Same shimmer as the dashboard and questionnaire skeletons. */
.rm-kc-skel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rm-kc-skel--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rm-kc-skel__card { display: flex; flex-direction: column; gap: 9px; min-height: 150px; padding: 18px; background: #fff; border: 1px solid var(--rm-border); border-radius: 16px; }
@media (max-width: 1240px) { .rm-kc-skel--three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1020px) { .rm-kc-skel, .rm-kc-skel--three { grid-template-columns: 1fr; } }
/* A suggestion with no draft because the existing answers CONTRADICT each
   other (2026-08-21). Toned like a contradiction rather than a draft, because
   that is what it is - the most useful thing on the card, not a gap in it. */
/* The base draft box clamps to four lines because a draft is a preview.
   This is the whole message, so it is not clamped. */
.rm-kc-sug__draft--clash { background: #FDF0F2 !important; border-color: #F6D2D9 !important; color: #7A2338 !important; display: block; -webkit-line-clamp: none; overflow: visible; }
.rm-kc-sug__draft--clash .rm-kc-sug__draftlabel { color: #B4123F !important; }
.rm-kc-sug__clashlink { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 11.5px; font-weight: 700; color: #B4123F; text-decoration: none; }
.rm-kc-sug__clashlink:hover { text-decoration: underline; }

/* Add-a-suggestion form (2026-08-21): a focused Q&A form on the cleanup page,
   so accepting a suggestion no longer means leaving it. */
.rm-kc-addlabel { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--rm-label); }
.rm-kc-addchips { display: flex; flex-wrap: wrap; gap: 6px; }
.rm-kc-addchip--on { color: #fff !important; background: var(--rm-ai-cobalt) !important; border-color: var(--rm-ai-cobalt) !important; }
/* A suggested tag is MARKED, not selected: the module is inferred from real
   context, a tag is only a habit of entries filed nearby. */
.rm-kc-addchip--hint { border-style: dashed !important; border-color: var(--rm-ai-cobalt) !important; color: var(--rm-ai-cobalt) !important; }
.rm-kc-addhint { font-size: 12.5px; color: var(--rm-faint); }
@keyframes rmKcSpin { to { transform: rotate(360deg); } }

/* (The suggestions hero tile is a plain readout since 2026-08-24 - the tab
   strip is the way in - so its cursor/hover rules are gone.) */
/* The client under a forgotten questionnaire's name: the same quiet
   building-2 line the knowledge screen's past-questionnaire cards use. */
.rm-kc-client { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #8A94A6; margin-top: 3px; }
/* Text-improvement cards: the suggested rewrite is the payload, so it gets
   its own quiet block under the reason line. */
.rm-kc-ti__text { display: block; font-size: 13px; color: var(--rm-ink); font-weight: 600; line-height: 1.45; margin-top: 2px; }
/* Suggestions tabs are a different KIND of tab (additions, not cleanups).
   The split is carried by colour: blue TEXT against the yellow cleanup
   accents, sitting with the other tabs, always last. The filled glass
   background is gone (2026-08-24) - a filled tab read as the ACTIVE tab
   next to six flat ones; the active state is the underline + white text,
   same as every other tab. */
.rm-hero__tab--suggest,
.rm-page .rm-hero__tab--suggest { color: #A9C3FF; }
.rm-hero__tab--suggest:hover,
.rm-page .rm-hero__tab--suggest:hover { color: #CDDCFF; }
.rm-hero__tab--suggest.rm-hero__tab--active,
.rm-page .rm-hero__tab--suggest.rm-hero__tab--active { color: #fff; }

/* Cleanup: each side shows the modules and tags it carries (2026-08-20),
   because an overlap can be nothing more than two modules answering the
   same question for themselves. */
.rm-kc-scope { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.rm-kc-scope__mod { color: var(--rm-module); background: rgba(106, 69, 224, .08); border-color: rgba(106, 69, 224, .18); }

/* Grouped duplicates (2026-08-20): one card per duplicated source - the
   original above, its extra copies listed below with a Remove each. */
.rm-kc-copies { border-top: 1px solid var(--rm-border); margin-top: 12px; padding-top: 10px; display: flex; flex-direction: column; gap: 7px; }
.rm-kc-copies__label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--rm-label); }
.rm-kc-copies__row { display: flex; align-items: center; gap: 10px; justify-content: space-between; background: var(--rm-ghost-fill); border: 1px solid #EEF1F7; border-radius: 9px; padding: 7px 9px; }
.rm-kc-copies__name { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12.5px; font-weight: 600; color: #3A4453; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-kc-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 38px 20px; }
.rm-kc-empty__title { font-family: var(--rm-font-heading); font-weight: 800; font-size: 16px; color: var(--rm-ink); margin-top: 6px; }
.rm-kc-empty__sub { font-size: 13px; color: var(--rm-muted); max-width: 520px; line-height: 1.5; }
.rm-kc-sug__when { flex: none; margin-left: 8px; font-size: 11px; font-weight: 600; color: var(--rm-soft); white-space: nowrap; cursor: default; }
.rm-kc-suglist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .rm-kc-suglist { grid-template-columns: 1fr; } }
/* The merged Suggested-additions tab packs three up (2026-08-24). */
.rm-kc-suglist--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1240px) { .rm-kc-suglist--three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .rm-kc-suglist--three { grid-template-columns: 1fr; } }
.rm-kc-sug { padding: 16px 18px; display: flex; flex-direction: column; justify-content: space-between; }
.rm-kc-sug__kind { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--rm-label); }
.rm-kc-sug__name { font-size: 14px; font-weight: 700; color: var(--rm-ink); margin-top: 3px; line-height: 1.4; }
.rm-kc-sug__reason { font-size: 12px; color: var(--rm-soft); margin-top: 3px; line-height: 1.5; }
/* One card for every entry (2026-08-25, item 31): the suggestion dialect -
   tile, mono kind line, name, reason, kind-specific body, real buttons
   right-aligned - carried by the cleanup entries too. The two themes
   survive as colour: cleanup cards are amber-tinted with an amber tile,
   suggestion cards white with the blue type tiles. */
.rm-kc-sug--cleanup { background: #FFFDF8; border-color: #F1E2BC; }
.rm-kc-sug--cleanup .rm-kc-sug__kind { color: #8A5A0B; }
.rm-kc-sug__top { display: flex; align-items: flex-start; gap: 12px; }
.rm-kc-sug__tile { flex: none; width: 34px; height: 34px; border-radius: 10px; background: #FDF3E7; color: #B7791F; display: inline-flex; align-items: center; justify-content: center; }
.rm-kc-sug__text { flex: 1; min-width: 0; }
.rm-kc-sug__meta { font-size: 11.5px; color: #8A94A6; margin-top: 6px; line-height: 1.45; }
.rm-kc-sug__excerpt { font-size: 12px; color: #3A4453; line-height: 1.5; margin-top: 8px; overflow-wrap: anywhere; }
.rm-kc-sug__excerptlabel { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #B4BECC; margin-bottom: 3px; }
/* A pair (overlap, conflict): the two sides as plain boxes inside the card. */
.rm-kc-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; align-items: stretch; }
@media (max-width: 760px) { .rm-kc-sides { grid-template-columns: 1fr; } }
.rm-kc-side { min-width: 0; border: 1px solid #EEF1F7; background: #fff; border-radius: 12px; padding: 11px 12px; display: flex; flex-direction: column; gap: 6px; }
.rm-kc-side__type { display: flex; align-items: center; gap: 6px; font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.rm-kc-side__title { font-size: 13px; font-weight: 700; color: var(--rm-ink); line-height: 1.35; overflow-wrap: anywhere; }
.rm-kc-side .rm-kc-sug__excerpt { margin-top: 2px; }
.rm-kc-side__acts { display: flex; flex-wrap: wrap; gap: 2px; margin-top: auto; padding-top: 4px; }
/* Quiet in-card text actions (per side, per copy). */
.rm-kc-link { display: inline-flex; align-items: center; gap: 5px; font-family: var(--rm-font-body); font-size: 11.5px; font-weight: 700; color: #3A4453; background: transparent; border: 0; border-radius: 7px; padding: 4px 7px; cursor: pointer; text-decoration: none; }
.rm-kc-link:hover { background: #EEF2F8; }
.rm-kc-link[disabled] { opacity: .5; cursor: default; }
/* The copies fold toggle sits left in the actions row, like the SharePoint
   open link. */
.rm-kc-foldlink { display: inline-flex; align-items: center; gap: 5px; margin-right: auto; font-family: var(--rm-font-body); font-size: 12px; font-weight: 700; color: var(--rm-ai-cobalt-deep); background: none; border: 0; padding: 4px 0; cursor: pointer; }
.rm-kc-foldlink:hover { text-decoration: underline; }
.rm-kc-sug__acts .rm-btn[disabled] { opacity: .55; }
.rm-kc-sug__draft { margin-top: 9px; font-size: 12.5px; color: var(--rm-muted); line-height: 1.5; background: #FAFBFE; border: 1px dashed #E4E9F1; border-radius: 10px; padding: 9px 11px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.rm-kc-sug__draftlabel { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--rm-ai-violet); margin-right: 6px; }
/* Merge preview modal body (2026-08-31): the merged entry as it will land -
   question, answer, filing chips, expiry - inside the confirmation shell. */
.rm-kc-mergeprev { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; text-align: left; }
/* Which copy stays (2026-09-07): two selectable options in the merge preview. */
.rm-kc-keepopts { display: flex; flex-direction: column; gap: 6px; }
.rm-kc-keepopt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 11px; border: 1px solid #E7ECF3; border-radius: 11px; background: #fff; font: inherit; cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.rm-kc-keepopt:hover { background: #F8FAFF; }
.rm-kc-keepopt:focus-visible { outline: 2px solid var(--rm-ai-cobalt); outline-offset: 2px; }
.rm-kc-keepopt--on { border-color: #7A5AF8; background: #F6F3FF; }
.rm-kc-keepopt__radio { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #C9D2E0; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: #fff; }
.rm-kc-keepopt--on .rm-kc-keepopt__radio { border-color: #7A5AF8; background: #7A5AF8; }
.rm-kc-keepopt__title { display: block; font-family: var(--rm-font-heading); font-weight: 700; font-size: 13px; color: var(--rm-ink); line-height: 1.35; overflow-wrap: anywhere; }
.rm-kc-keepopt__meta { display: block; font-size: 11.5px; color: #8A94A6; overflow-wrap: anywhere; }
.rm-kc-keepopt__tag { flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #8A94A6; }
.rm-kc-keepopt--on .rm-kc-keepopt__tag { color: #0B6E4C; }
.rm-kc-mergeprev__label { display: inline-flex; align-items: center; gap: 5px; font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--rm-ai-violet); }
.rm-kc-mergeprev__q { font-family: var(--rm-font-heading); font-weight: 700; font-size: 14px; color: var(--rm-ink); line-height: 1.4; overflow-wrap: anywhere; }
.rm-kc-mergeprev__a { font-size: 12.5px; color: #3A4453; line-height: 1.55; max-height: 180px; overflow: auto; background: #F9FAFD; border: 1px solid #EEF1F7; border-radius: 10px; padding: 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Suggestions tab groups (2026-08-24). The tab carries two kinds of addition
   once SharePoint is connected - answer gaps to write, files to add - so each
   list gets a quiet header with its own count. Without the integration there
   is only one kind and no header is drawn. */
.rm-kc-suggroup {
  display: flex; align-items: center; gap: 8px; margin: 18px 0 10px;
  font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--rm-label);
}
.rm-kc-suggroup:first-of-type { margin-top: 4px; }
.rm-kc-suggroup__n {
  font-family: var(--rm-font-heading); font-weight: 800; font-size: 11px; letter-spacing: 0;
  color: var(--rm-muted); background: var(--rm-fill); border-radius: 999px; padding: 2px 8px;
}
/* Where a suggested file lives: site / library / folder, size, last change. */
.rm-kc-sug__where { font-size: 11.5px; color: var(--rm-faint); margin-top: 6px; line-height: 1.5; }
.rm-kc-sug__acts { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }
.rm-kc-sug__open {
  display: inline-flex; align-items: center; gap: 5px; margin-right: auto;
  font-size: 12px; font-weight: 700; color: var(--rm-ai-cobalt-deep); text-decoration: none;
}
.rm-kc-sug__open:hover { text-decoration: underline; }

/* Coverage list cap note */
.rm-kc-cap { margin-top: 14px; font-size: 12.5px; color: var(--rm-soft); text-align: center; }
/* Clients: logo note in the form; compare mode rows */
.rm-cl-logonote { display: flex; align-items: flex-start; gap: 6px; font-size: 11.5px; color: var(--rm-soft); margin-top: 8px; line-height: 1.45; max-width: 420px; }
.rm-cl-logonote i { flex: none; margin-top: 2px; color: var(--rm-ai-violet); }
/* Expiration modals: the fresh-until note */
.rm-kl-freshnote { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; color: var(--rm-muted); line-height: 1.45; background: #F6F8FC; border: 1px solid #E7ECF3; border-radius: 10px; padding: 8px 11px; margin-bottom: 12px; }
.rm-kl-freshnote i { flex: none; margin-top: 2px; color: var(--rm-soft); }
/* "AI answers used as-is" x-axis switcher (dashboard hero + card, AI report) */
.rm-asis-axis { display: inline-flex; gap: 2px; background: #EDF1F6; border-radius: 8px; padding: 2px; }
.rm-asis-axis__opt { display: inline-flex; align-items: center; gap: 4px; font-family: inherit; font-size: 10.5px; font-weight: 700; color: var(--rm-muted); background: transparent; border: none; border-radius: 6px; padding: 3px 7px; cursor: pointer; line-height: 1; }
.rm-asis-axis__opt--on { background: #fff; color: #5B3EE0; box-shadow: 0 1px 2px rgba(14, 21, 37, .12); }
.rm-asis-axis--dark { background: rgba(255, 255, 255, .12); }
.rm-asis-axis--dark .rm-asis-axis__opt { color: rgba(255, 255, 255, .65); }
.rm-asis-axis--dark .rm-asis-axis__opt--on { background: rgba(255, 255, 255, .22); color: #fff; box-shadow: none; }
/* Questionnaire hero: client tile inside the client chip */
.rm-qh__clienttile { flex: none; }
.rm-qh__clienttile .rm-cl-monogram { font-family: var(--rm-font-heading); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
/* "Check SharePoint" strip in the file preview modal (2026-09-06,
   09-integrations-sharepoint.md "Checking a file for newer versions"): the
   empty-source banner's shape with the SharePoint glyph, one state line and
   the action on the right; candidate rows list under it. */
/* Version history of a file in the preview modal (2026-09-07): one row per
   version, newest first, the current one pilled, earlier ones previewable. */
/* Suggested / accepted as an attachment chip on file cards (2026-09-07). */
.rm-usage-chip--sug { color: #7A5AF8; }
.rm-usage-chip--off { color: #B45309; }
/* The two purposes of a file (2026-09-07): add/edit modals, the edit page and the preview. */
.rm-kl-purposes { display: flex; flex-direction: column; gap: 8px; }
.rm-kl-purposes--inline { margin-top: 10px; }
.rm-kl-purpose { display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px; border: 1px solid #E7ECF3; border-radius: 11px; background: #fff; cursor: pointer; font: inherit; text-align: left; width: 100%; }
.rm-kl-purpose input { margin-top: 3px; accent-color: #2F6BFF; }
.rm-kl-purpose--btn { color: #8A94A6; }
.rm-kl-purpose--on { color: #2F6BFF; border-color: #C9D8FF; background: #F5F8FF; }
.rm-kl-purpose__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rm-kl-purpose__label { font-size: 13px; font-weight: 700; color: var(--rm-ink); }
.rm-kl-purpose__note { font-size: 11.5px; color: #8A94A6; }
.rm-kl-versions { margin-top: 14px; border: 1px solid #E7ECF3; border-radius: 13px; padding: 12px 14px 6px; }
.rm-kl-versions__count { display: inline-block; margin-left: 4px; font-size: 10.5px; font-weight: 800; color: #5A6577; background: #EEF1F7; border-radius: 999px; padding: 1px 7px; vertical-align: middle; }
.rm-kl-versions__row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid #F1F4F9; }
.rm-kl-versions__row:first-of-type { border-top: 0; }
.rm-kl-versions__n { flex: none; width: 34px; font-size: 11.5px; font-weight: 800; color: #5A6577; font-variant-numeric: tabular-nums; }
.rm-kl-versions__row--current .rm-kl-versions__n { color: #0B6E4C; }
.rm-kl-versions__name { font-size: 13px; font-weight: 600; color: var(--rm-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-kl-versions__meta { font-size: 11.5px; color: #8A94A6; }
.rm-kl-versions__pill { flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #0B6E4C; background: #E7F7F0; border: 1px solid #C6EDD9; border-radius: 999px; padding: 2px 8px; }
.rm-kl-spcheck { display: flex; align-items: flex-start; gap: 11px; background: #F6F8FC; border: 1px dashed #C9D2E0; border-radius: 13px; padding: 12px 14px; margin-top: 14px; }
.rm-kl-spcheck__ic { flex: none; width: 34px; height: 34px; border-radius: 10px; background: #E3EEFA; color: #0364B8; display: inline-flex; align-items: center; justify-content: center; }
.rm-kl-spcheck__body { flex: 1; min-width: 0; }
.rm-kl-spcheck__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rm-kl-spcheck__title { font-size: 13px; font-weight: 700; color: var(--rm-ink); display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.rm-kl-spcheck__title--ok { color: #0B8A63; }
.rm-kl-spcheck__title--warn { color: #B4540A; }
.rm-kl-spcheck__title--bad { color: #D81E46; }
.rm-kl-spcheck__sub { font-size: 12.5px; color: var(--rm-muted); margin-top: 3px; line-height: 1.5; }
.rm-kl-spcheck__actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.rm-kl-spcheck__list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rm-kl-spcheck__cand { display: flex; flex-direction: column; gap: 7px; background: #fff; border: 1px solid #E7ECF3; border-radius: 10px; padding: 9px 11px; }
.rm-kl-spcheck__candtop { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rm-kl-spcheck__candbottom { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rm-kl-spcheck__candname { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--rm-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-kl-spcheck__candmeta { font-size: 11.5px; font-weight: 500; color: var(--rm-muted); }
.rm-kl-spcheck__actions .rm-btn--sm { font-size: 12px; padding: 6px 10px; }
.rm-kl-spcheck__candtag { flex: none; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #EEF4FF; color: #2F6BFF; }
.rm-kl-spcheck__candtag--same { background: #FFF4E5; color: #B4540A; }
.rm-kl-spcheck__candtag--moved { background: #FDE8EC; color: #B4173A; }
/* SharePoint FAQ inside the Account integration modal (2026-09-06) */
.rm-ac-faqlist { display: flex; flex-direction: column; gap: 12px; }
.rm-ac-faq__q { font-size: 12.5px; font-weight: 700; color: var(--rm-ink); }
.rm-ac-faq__a { font-size: 12.5px; color: var(--rm-muted); line-height: 1.55; margin-top: 3px; }