/* ==========================================================================
   MoreTech Research Studio — Application Stylesheet
   --------------------------------------------------------------------------
   Every value here comes from tokens.css. No raw hex, no one-off sizes.

   Sections
     1. Foundation          6. Mission Library
     2. Components          7. Workspace — planning
     3. App shell           8. Workspace — running
     4. Control surface     9. Workspace — results & outreach
     5. Hero               10. Motion
                           11. Responsive
   ========================================================================== */

/* ==========================================================================
   1. FOUNDATION
   ========================================================================== */

body {
  background: var(--rf-surface-page);
  color: var(--rf-text);
  font-size: var(--rf-text-body);
  font-family: var(--rf-font-sans);
  /* The page itself carries the template's ambient wash, so every screen
     sits on the same lit surface rather than a flat block of colour. */
  background-image:
    radial-gradient(ellipse 60% 45% at 85% -5%,
      rgba(var(--rf-brand-rgb), .10), transparent 70%),
    radial-gradient(ellipse 55% 45% at 0% 0%,
      rgba(var(--rf-brand-deep-rgb), .22), transparent 72%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

h1, .h1, h2, .h2, h3, .h3, .card-title, .rf-page-title {
  font-family: var(--rf-font-display);
}
h1, .h1 { font-size: var(--rf-text-h1); font-weight: 600; letter-spacing: -.01em; }
h2, .h2 { font-size: var(--rf-text-h2); font-weight: 600; letter-spacing: -.01em; }
h3, .h3 { font-size: var(--rf-text-h3); font-weight: 600; }

.small, small { font-size: var(--rf-text-sm); }

/* The one uppercase label pattern, used product-wide. */
.rf-eyebrow {
  font-size: var(--rf-text-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rf-text-secondary);
}

/* Two greys collapsed into one. `text-muted` is retained as an alias so no
   template silently changes meaning; both now resolve to the same value. */
.text-secondary, .text-muted { color: var(--rf-text-secondary) !important; }
.text-primary { color: var(--rf-brand-strong) !important; }

hr {
  border-color: var(--rf-border);
  opacity: 1;
  margin: var(--rf-space-4) 0;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--rf-border-strong);
  border-radius: var(--rf-radius-pill);
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--rf-text-secondary); }
html { scrollbar-width: thin; scrollbar-color: var(--rf-border-strong) transparent; }

/* ==========================================================================
   2. COMPONENTS
   ========================================================================== */

/* ---- Card: three elevation states, nothing else -------------------------
   The card is where the template's glass treatment does the most work: a
   translucent surface over the page's ambient wash, with a hairline top
   highlight. On dark, that highlight — not a drop shadow — is what reads
   as elevation. */
.card {
  border-radius: var(--rf-radius-lg);
  border-color: var(--rf-border);
  background-color: var(--rf-surface);
  background-image: linear-gradient(180deg,
    rgba(255, 255, 255, .035), rgba(255, 255, 255, .01));
  color: var(--rf-text);
  box-shadow: var(--rf-shadow-flat);
}
.card.shadow-sm { box-shadow: var(--rf-shadow-raised) !important; }

.card-header {
  border-bottom-color: var(--rf-border);
  padding: var(--rf-space-3) var(--rf-space-4);
  min-height: 0;
}
.card-title {
  font-size: var(--rf-text-h3);
  font-weight: 600;
  margin-bottom: 0;
}
.card-body { padding: var(--rf-space-4); }

/* The one active card. At most one per screen (One Primary Card Rule).
   The accent rule plus the template's brand glow make "this one" legible
   without a second colour or a size change. */
.rf-card-featured {
  border-top: 3px solid var(--rf-brand);
  border-radius: var(--rf-radius-lg);
}
.rf-card-active { box-shadow: var(--rf-shadow-active) !important; }

/* Completed / collapsed stage card — recedes. On dark, receding means
   losing the highlight and dropping below the page, not going grey. */
.rf-card-stage {
  box-shadow: var(--rf-shadow-flat) !important;
  border-color: var(--rf-border);
  background-color: var(--rf-surface-sunken);
  background-image: none;
}
.rf-card-stage .card-header {
  background-color: transparent;
  border-bottom-color: var(--rf-border);
}
.rf-card-stage .card-title {
  font-size: var(--rf-text-body);
  font-weight: 500;
  color: var(--rf-text-secondary);
}

.rf-card-header-toggle { cursor: pointer; }
.rf-collapse-chevron { transition: transform var(--rf-dur-quick) var(--rf-ease-in-out); }
.rf-card-header-toggle[aria-expanded="true"] .rf-collapse-chevron { transform: rotate(180deg); }

/* ---- Badge: five roles ------------------------------------------------ */
.badge {
  font-size: var(--rf-text-xs);
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: var(--rf-radius-sm);
  padding: .3em .6em;
}

/* Palette-family aliases collapse onto the semantic roles, so the two
   vocabularies that existed side by side now render identically. */
.badge.bg-success-lt, .badge.bg-green-lt {
  background-color: var(--rf-success-bg) !important;
  color: var(--rf-success) !important;
}
.badge.bg-danger-lt, .badge.bg-red-lt {
  background-color: var(--rf-danger-bg) !important;
  color: var(--rf-danger) !important;
}
.badge.bg-warning-lt, .badge.bg-yellow-lt, .badge.bg-orange-lt {
  background-color: var(--rf-warning-bg) !important;
  color: var(--rf-warning) !important;
}
.badge.bg-secondary-lt, .badge.bg-blue-lt, .badge.bg-purple-lt, .badge.bg-teal-lt {
  background-color: var(--rf-neutral-bg) !important;
  color: var(--rf-neutral) !important;
}
.badge.bg-primary-lt {
  background-color: rgba(var(--rf-brand-rgb), .1) !important;
  color: var(--rf-brand-strong) !important;
}
/* Solid fills use --rf-brand-fill, never --rf-brand-strong: on dark the
   readable-text pair (#60a5fa) carries white at only 2.54:1, while the fill
   pair (#2563eb) carries it at 5.17:1. */
.badge.bg-primary { background-color: var(--rf-brand-fill) !important; color: var(--rf-text-on-brand) !important; }

/* Text-colour aliases, same collapse. */
.text-green, .text-success { color: var(--rf-success) !important; }
.text-red, .text-danger { color: var(--rf-danger) !important; }
.text-yellow, .text-warning { color: var(--rf-warning) !important; }
.text-blue, .text-purple, .text-orange, .text-teal { color: var(--rf-neutral) !important; }

/* ---- Button ----------------------------------------------------------- */
.btn {
  border-radius: var(--rf-radius-md);
  font-size: var(--rf-text-body);
  font-weight: 500;
  transition: background-color var(--rf-dur-instant) var(--rf-ease-in-out),
              border-color var(--rf-dur-instant) var(--rf-ease-in-out),
              color var(--rf-dur-instant) var(--rf-ease-in-out);
}
.btn-sm { font-size: var(--rf-text-sm); border-radius: var(--rf-radius-sm); }
.btn-lg { font-size: var(--rf-text-h3); }

/* Solid brand fill uses --rf-brand-fill (white on #2563eb = 5.17:1 AA).
   The template pairs its primary button with a coloured lift shadow; that
   glow is what makes a single primary action findable on a dark page. */
.btn-primary {
  background-color: var(--rf-brand-fill);
  border-color: var(--rf-brand-fill);
  color: var(--rf-text-on-brand);
  box-shadow: 0 4px 16px rgba(var(--rf-brand-rgb), .28);
}
.btn-primary:hover:not(:disabled):not(.disabled),
.btn-primary:focus:not(:disabled):not(.disabled) {
  background-color: var(--rf-brand-fill-hover);
  border-color: var(--rf-brand-fill-hover);
  color: var(--rf-text-on-brand);
  box-shadow: 0 6px 22px rgba(var(--rf-brand-rgb), .40);
}
.btn-outline-primary {
  color: var(--rf-brand-strong);
  border-color: rgba(var(--rf-brand-rgb), .45);
  background-color: rgba(var(--rf-brand-rgb), .07);
}
.btn-outline-primary:hover:not(:disabled) {
  background-color: var(--rf-brand-fill);
  border-color: var(--rf-brand-fill);
  color: var(--rf-text-on-brand);
}
.btn-outline-secondary {
  color: var(--rf-text-secondary);
  border-color: var(--rf-border-strong);
  background-color: transparent;
}
.btn-outline-secondary:hover:not(:disabled) {
  background-color: var(--rf-glass-strong);
  border-color: var(--rf-border-strong);
  color: var(--rf-text);
}
.btn-danger {
  background-color: var(--rf-danger);
  border-color: var(--rf-danger);
  /* #f87171 is a light red: it needs dark text, not white (white = 2.7:1,
     the page ground = 6.6:1). */
  color: var(--rf-surface-page);
}
.btn-danger:hover:not(:disabled) {
  background-color: var(--rf-danger);
  border-color: var(--rf-danger);
  color: var(--rf-surface-page);
  filter: brightness(1.08);
}
.btn-outline-danger { color: var(--rf-danger); border-color: rgba(248, 113, 113, .45); }
.btn-outline-danger:hover:not(:disabled) {
  background-color: var(--rf-danger);
  border-color: var(--rf-danger);
  color: var(--rf-surface-page);
}
.btn-ghost-secondary, .btn-link { color: var(--rf-text-secondary); }
.btn:disabled, .btn.disabled { opacity: .45; box-shadow: none; }

/* Icon-only controls always meet the touch-target minimum. */
.btn-icon {
  width: var(--rf-touch-target);
  height: var(--rf-touch-target);
  padding: 0;
}

/* A toggle/filter that is currently selected. Distinct from "this is the
   action to take" — primary is no longer overloaded to mean both. */
.rf-toggle-active,
.btn-check:checked + .btn.rf-toggle {
  background-color: rgba(var(--rf-brand-rgb), .1);
  border-color: rgba(var(--rf-brand-rgb), .45);
  color: var(--rf-brand-strong);
  font-weight: 600;
}

/* ---- Form ------------------------------------------------------------- */
.form-label {
  font-weight: 500;
  font-size: var(--rf-text-sm);
  margin-bottom: var(--rf-space-1);
  color: var(--rf-text);
}
/* Inputs sit in a recessed well, the inverse of the light theme where they
   sat raised on a tinted page. */
.form-control, .form-select {
  border-radius: var(--rf-radius-md);
  border-color: var(--rf-border-strong);
  background-color: var(--rf-surface-sunken);
  color: var(--rf-text);
  font-size: var(--rf-text-body);
  font-family: inherit;
}
.form-control::placeholder, .form-select::placeholder { color: var(--rf-text-faint); }
.form-control:focus, .form-select:focus {
  background-color: var(--rf-surface-sunken);
  color: var(--rf-text);
  border-color: rgba(var(--rf-brand-rgb), .6);
  box-shadow: 0 0 0 3px rgba(var(--rf-brand-rgb), .18);
}
.form-control:disabled, .form-control[readonly],
.form-select:disabled {
  background-color: var(--rf-surface-sunken);
  color: var(--rf-text-secondary);
  opacity: 1;
}
/* Native dropdown lists paint with the UA's own colours unless told
   otherwise, which renders white-on-white in a dark form. */
.form-select option { background-color: var(--rf-surface-overlay); color: var(--rf-text); }
.form-hint, .form-text { font-size: var(--rf-text-sm); color: var(--rf-text-secondary); }
.form-check-input {
  background-color: var(--rf-surface-sunken);
  border-color: var(--rf-border-strong);
}
.form-check-input:checked { background-color: var(--rf-brand-fill); border-color: var(--rf-brand-fill); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(var(--rf-brand-rgb), .18); }
.input-group-text {
  background-color: var(--rf-surface-raised);
  border-color: var(--rf-border-strong);
  color: var(--rf-text-secondary);
}

/* ---- Table ------------------------------------------------------------ */
.table > :not(caption) > * > th {
  font-size: var(--rf-text-xs);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--rf-text-secondary);
  background: var(--rf-surface-sunken);
  border-bottom-color: var(--rf-border);
  padding: var(--rf-space-2) var(--rf-space-3);
  white-space: nowrap;
}
.table > :not(caption) > * > td {
  vertical-align: middle;
  font-size: var(--rf-text-body);
  padding: var(--rf-space-2) var(--rf-space-3);
  border-bottom-color: var(--rf-border);
}
.table { color: var(--rf-text); border-color: var(--rf-border); }
.table > :not(caption) > * > * { background-color: transparent; box-shadow: none; }
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(255, 255, 255, .022) !important;
  color: var(--rf-text);
}
.table .form-check-input { margin: 0; cursor: pointer; }
.rf-result-table tbody tr:hover td { background-color: rgba(var(--rf-brand-rgb), .08) !important; }
.rf-result-table tbody tr:has(.rf-row-select:checked) > td {
  background: rgba(var(--rf-brand-rgb), .07) !important;
}
.rf-cell-truncate { max-width: 16rem; }

/* ---- Alert ------------------------------------------------------------ */
/* Tabler 1.4 ships `.alert { display: flex; flex-direction: row; gap: 1rem }`
   (verified against the served tabler.min.css, not assumed). That turns every
   prose alert into a row of flex items: a leading <strong> becomes its own
   column and a trailing <a> another, which is why the Help page's disclosure
   was rendering as three squeezed columns. Prose alerts are block; the ones
   that genuinely want the icon-and-text row already carry `d-flex` in the
   markup, and Bootstrap's utility is !important so it still wins here. */
.alert {
  display: block;
  border-radius: var(--rf-radius-lg);
  font-size: var(--rf-text-body);
  padding: var(--rf-space-3) var(--rf-space-4);
}
/* Each alert is its own hue at 15% over the page, with a matching hairline.
   Body text stays --rf-text (15.7:1); only the leading icon carries hue. */
.alert-success {
  background: var(--rf-success-bg); border-color: rgba(74, 222, 128, .3); color: var(--rf-text);
}
.alert-success .ti, .alert-success .alert-icon { color: var(--rf-success); }
.alert-danger {
  background: var(--rf-danger-bg); border-color: rgba(248, 113, 113, .3); color: var(--rf-text);
}
.alert-danger .ti, .alert-danger .alert-icon { color: var(--rf-danger); }
.alert-warning {
  background: var(--rf-warning-bg); border-color: rgba(251, 191, 36, .3); color: var(--rf-text);
}
.alert-warning .ti, .alert-warning .alert-icon { color: var(--rf-warning); }
.alert-link { color: var(--rf-brand-strong); }
.btn-close { filter: invert(1) grayscale(1) brightness(2); opacity: .55; }
.btn-close:hover { opacity: .9; }
/* Informational — neutral, so it no longer reads as a brand/success state. */
.alert-info {
  background: var(--rf-neutral-bg) !important;
  border-color: var(--rf-border-strong) !important;
  color: var(--rf-text) !important;
}

/* ---- Modal, dropdown, pagination -------------------------------------- */
.modal-content {
  border-radius: var(--rf-radius-lg);
  border-color: var(--rf-border-strong);
  background-color: var(--rf-surface-overlay);
  background-image: linear-gradient(180deg,
    rgba(255, 255, 255, .05), rgba(255, 255, 255, .01));
  color: var(--rf-text);
  box-shadow: var(--rf-shadow-overlay);
}
.modal-header, .modal-footer { border-color: var(--rf-border); }
.modal-backdrop.show { opacity: .72; }
.modal-title { font-family: var(--rf-font-display); }

.rf-modal-icon {
  display: inline-flex;
  width: 3rem; height: 3rem;
  border-radius: var(--rf-radius-circle);
  align-items: center; justify-content: center;
  font-size: var(--rf-text-h2);
  margin-bottom: var(--rf-space-3);
}
.rf-modal-icon--danger { background: var(--rf-danger-bg); color: var(--rf-danger); }

.dropdown-menu {
  border-radius: var(--rf-radius-md);
  border-color: var(--rf-border-strong);
  background-color: var(--rf-surface-overlay);
  color: var(--rf-text);
  box-shadow: var(--rf-shadow-overlay);
  padding: var(--rf-space-1);
}
.dropdown-item { border-radius: var(--rf-radius-sm); font-size: var(--rf-text-body); color: var(--rf-text); }
.dropdown-item:hover, .dropdown-item:focus {
  background: rgba(var(--rf-brand-rgb), .16); color: var(--rf-brand-strong);
}
.dropdown-divider { border-color: var(--rf-border); margin: var(--rf-space-1) 0; }

.page-link {
  border-radius: var(--rf-radius-sm) !important;
  border-color: var(--rf-border-strong);
  background-color: transparent;
  color: var(--rf-text-secondary);
  transition: background-color var(--rf-dur-instant) var(--rf-ease-in-out),
              border-color var(--rf-dur-instant) var(--rf-ease-in-out),
              color var(--rf-dur-instant) var(--rf-ease-in-out);
}
.page-item.active .page-link {
  background: var(--rf-brand-fill); border-color: var(--rf-brand-fill);
  color: var(--rf-text-on-brand); font-weight: 600; box-shadow: none;
}
.page-item:not(.active):not(.disabled) .page-link:hover {
  background: rgba(var(--rf-brand-rgb), .16);
  border-color: rgba(var(--rf-brand-rgb), .4);
  color: var(--rf-brand-strong);
}
.page-item.disabled .page-link { opacity: .45; }

/* ---- Empty & error state ---------------------------------------------- */
.rf-empty-state {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: var(--rf-space-6) var(--rf-space-4);
}
.rf-empty-state-icon {
  width: 3.5rem; height: 3.5rem;
  border-radius: var(--rf-radius-circle);
  background: var(--rf-surface-sunken);
  border: 1px solid var(--rf-border);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--rf-text-h1);
  color: var(--rf-text-secondary);
  margin-bottom: var(--rf-space-3);
  flex-shrink: 0;
}
.rf-empty-state-title { font-size: var(--rf-text-h3); font-weight: 600; margin-bottom: var(--rf-space-1); }
.rf-empty-state-desc {
  font-size: var(--rf-text-sm); color: var(--rf-text-secondary);
  max-width: 22rem; line-height: 1.55; margin-bottom: 0;
}

.rf-error-state {
  display: flex; align-items: flex-start; gap: var(--rf-space-3);
  padding: var(--rf-space-4);
  background: var(--rf-danger-bg);
  border: 1px solid rgba(248, 113, 113, .3);
  border-radius: var(--rf-radius-lg);
}
.rf-error-state-icon {
  flex-shrink: 0; width: 2.5rem; height: 2.5rem;
  border-radius: var(--rf-radius-md);
  background: rgba(248, 113, 113, .18); color: var(--rf-danger);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--rf-text-h3);
}
.rf-error-state-title { font-size: var(--rf-text-body); font-weight: 600; margin-bottom: var(--rf-space-1); }
.rf-error-state-desc { font-size: var(--rf-text-sm); color: var(--rf-text-secondary); line-height: 1.5; margin-bottom: 0; }

/* ---- Shared small pieces ---------------------------------------------- */
.rf-stat-tile {
  height: 100%;
  padding: var(--rf-space-3);
  border: 1px solid var(--rf-border);
  border-radius: var(--rf-radius-md);
  background: var(--rf-surface-sunken);
}
.rf-stat-tile .rf-stat-label {
  font-size: var(--rf-text-xs); color: var(--rf-text-secondary);
  text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
  margin-bottom: var(--rf-space-1);
}
.rf-stat-tile .rf-stat-value { font-size: var(--rf-text-body); font-weight: 600; color: var(--rf-text); }
.rf-stat-tile .form-select { background-color: var(--rf-surface); }

.rf-output-chip {
  display: inline-flex; align-items: center; gap: var(--rf-space-2);
  padding: var(--rf-space-2) var(--rf-space-3);
  background: var(--rf-surface); border: 1px solid var(--rf-border-strong);
  border-radius: var(--rf-radius-sm);
  font-size: var(--rf-text-sm); font-weight: 500; color: var(--rf-text);
  text-decoration: none;
}
a.rf-output-chip { transition: border-color var(--rf-dur-instant) var(--rf-ease-in-out); }
a.rf-output-chip:hover { border-color: rgba(var(--rf-brand-rgb), .5); color: var(--rf-brand-strong); }
.rf-output-chip i { color: var(--rf-text-secondary); }
a.rf-output-chip:hover i { color: var(--rf-brand-strong); }

/* Section label inside a card body. */
.rf-plan-section-label {
  font-size: var(--rf-text-xs); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--rf-text-secondary);
}

/* Admin stat card number. Replaces `.h1` used as a display size, which made
   the value inherit heading semantics it does not have. */
.rf-stat-number {
  font-size: var(--rf-text-display);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--rf-text);
}

.rf-settings-icon {
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--rf-radius-md);
  background: rgba(var(--rf-brand-rgb), .1); color: var(--rf-brand-strong);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--rf-text-h2); flex-shrink: 0;
}

/* ==========================================================================
   3. APP SHELL
   ========================================================================== */

/* Header — the template's fixed glass navbar treatment (translucent surface
   over a blurred backdrop), applied to our existing authenticated header. */
.rf-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  border-bottom: 1px solid var(--rf-border);
  background: rgba(5, 9, 20, .82);
  -webkit-backdrop-filter: blur(20px) saturate(var(--rf-glass-saturate));
  backdrop-filter: blur(20px) saturate(var(--rf-glass-saturate));
}
.rf-footer {
  border-top: 1px solid var(--rf-border);
  background: rgba(5, 9, 20, .5);
}
.rf-brand-logo { height: 2.75rem; width: auto; display: block; }

/* Page header — one pattern for every screen in the product, including admin. */
.rf-page-header { margin-bottom: var(--rf-space-5); }
.rf-page-title { font-size: var(--rf-text-h1); font-weight: 600; letter-spacing: -.01em; margin-bottom: 0; }
.page-title { font-size: var(--rf-text-h1); font-weight: 600; margin-bottom: 0; }
.subheader {
  font-size: var(--rf-text-xs); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--rf-text-secondary);
}

/* Loading overlay */
.rf-loading-overlay {
  position: fixed; inset: 0;
  background: rgba(5, 9, 20, .88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--rf-text);
  display: flex; align-items: center; justify-content: center;
  z-index: 1055;
}
.rf-loading-overlay .spinner-border { width: 2rem; height: 2rem; border-width: 2px; color: var(--rf-brand-strong) !important; }

/* ==========================================================================
   4. CONTROL SURFACE
   --------------------------------------------------------------------------
   A named, deliberate concept: it marks the moments the system is doing the
   work (planning, running), as distinct from the surfaces where the user
   reads and acts on results.

   REDEFINED for the Techarin dark re-skin (2026-08-13). The concept used to
   be carried by a dark band on a light page; with the whole product dark
   that contrast no longer exists. It is now carried by the template's glass
   treatment plus a brand-lit edge — the control surface is the *brighter,
   glowing* surface, not the darker one. Same meaning, inverted mechanics.
   Text uses the standard tokens, which are AA on every surface here.
   ========================================================================== */

.rf-hero-band,
.rf-planning-state,
.rf-mission-command {
  background-color: var(--rf-glass);
  background-image: linear-gradient(180deg,
    rgba(var(--rf-brand-rgb), .07), rgba(255, 255, 255, .01));
  -webkit-backdrop-filter: blur(var(--rf-glass-blur)) saturate(var(--rf-glass-saturate));
  backdrop-filter: blur(var(--rf-glass-blur)) saturate(var(--rf-glass-saturate));
  color: var(--rf-text);
}

.rf-hero-band .text-secondary,
.rf-planning-state .text-secondary,
.rf-mission-command .text-secondary { color: var(--rf-text-secondary) !important; }

/* ==========================================================================
   5. HERO
   ========================================================================== */

.rf-hero-band {
  border: 1px solid var(--rf-glass-border);
  border-radius: var(--rf-radius-xl);
  margin: 0 var(--rf-space-4) var(--rf-space-5);
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10),
              0 20px 50px rgba(0, 0, 0, .35);
}
.rf-hero-band > .container-xl { position: relative; z-index: 1; }

/* The template's hero composition, reproduced from gradients rather than
   its 488KB photograph: two brand washes plus the 64px grid rhythm, masked
   so it fades out rather than ending on a hard edge. Still a single static
   wash — the four looping background animations it replaced were decoration. */
.rf-hero-band-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(ellipse 55% 60% at 78% 0%,
      rgba(var(--rf-brand-rgb), .22), transparent 68%),
    radial-gradient(ellipse 55% 60% at 5% 100%,
      rgba(var(--rf-brand-deep-rgb), .34), transparent 70%);
}
/* The 64px grid rhythm itself comes from techarin.css's `.tk-grid-overlay`,
   applied alongside this element in the markup — not restated here. */
.rf-hero-band-circle {
  position: absolute; border-radius: var(--rf-radius-circle);
  border: 1px solid rgba(var(--rf-brand-rgb), .16);
}
.rf-hero-band-circle--a { width: 38rem; height: 38rem; left: -14rem; top: -16rem; }
.rf-hero-band-circle--b { width: 24rem; height: 24rem; left: -4rem; bottom: -14rem; }

.rf-hero-title {
  font-family: var(--rf-font-display);
  font-size: var(--rf-text-display);
  font-weight: 700; line-height: 1.15; letter-spacing: -.02em;
  color: var(--rf-text);
}
.rf-hero-lede { max-width: 32rem; color: var(--rf-text-secondary); }
.rf-hero-eyebrow {
  font-size: var(--rf-text-xs); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--rf-text-faint);
}
.rf-hero-label {
  display: inline-flex; align-items: center;
  padding: var(--rf-space-1) var(--rf-space-3);
  border: 1px solid rgba(var(--rf-brand-rgb), .45);
  border-radius: var(--rf-radius-pill);
  background: rgba(var(--rf-brand-rgb), .12);
  color: var(--rf-brand); font-size: var(--rf-text-sm); font-weight: 500;
}

/* Mission input on the dark surface. */
.rf-hero-input-wrap {
  background: var(--rf-glass);
  border: 1px solid var(--rf-glass-border);
  border-radius: var(--rf-radius-md);
  padding: var(--rf-space-4);
  transition: border-color var(--rf-dur-quick) var(--rf-ease-in-out);
}
.rf-hero-input-wrap:focus-within { border-color: rgba(var(--rf-brand-rgb), .6); }
.rf-hero-textarea {
  display: block; width: 100%;
  background: transparent; border: none; outline: none;
  color: var(--rf-text);
  font-size: var(--rf-text-body); font-family: inherit; line-height: 1.55;
  resize: none; padding: 0; min-height: 4.5rem;
}
.rf-hero-textarea::placeholder { color: var(--rf-text-faint); }
.rf-hero-input-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--rf-space-3);
  margin-top: var(--rf-space-3); padding-top: var(--rf-space-3);
  border-top: 1px solid var(--rf-glass-border);
}
.rf-hero-input-hint { font-size: var(--rf-text-sm); color: var(--rf-text-faint); }

/* Value props + capability badges */
.rf-hero-prop { display: flex; align-items: center; gap: var(--rf-space-2); flex-shrink: 0; }
.rf-hero-prop-icon { font-size: var(--rf-text-h2); color: var(--rf-brand); flex-shrink: 0; }
.rf-hero-prop-label { font-size: var(--rf-text-sm); font-weight: 600; color: var(--rf-text); line-height: 1.25; }
.rf-hero-prop-sub { font-size: var(--rf-text-xs); color: var(--rf-text-faint); line-height: 1.25; }
.rf-hero-prop-divider { width: 1px; height: 1.75rem; background: var(--rf-glass-border); flex-shrink: 0; }
.rf-hero-badge {
  display: inline-flex; align-items: center; gap: var(--rf-space-1);
  padding: var(--rf-space-1) var(--rf-space-2);
  border: 1px solid var(--rf-glass-border);
  border-radius: var(--rf-radius-sm);
  font-size: var(--rf-text-xs); color: var(--rf-text-secondary);
  background: var(--rf-glass);
}

/* Live Mission Preview — the demonstration widget. */
.rf-hero-preview-card {
  background: var(--rf-glass);
  border: 1px solid var(--rf-glass-border);
  border-radius: var(--rf-radius-md);
  overflow: hidden;
}
.rf-hero-preview-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--rf-space-3) var(--rf-space-4);
  border-bottom: 1px solid var(--rf-glass-border);
}
.rf-hero-preview-icon { font-size: var(--rf-text-h3); color: var(--rf-brand); }
.rf-hero-preview-status {
  display: inline-flex; align-items: center; gap: var(--rf-space-1);
  font-size: var(--rf-text-sm); font-weight: 500; color: var(--rf-brand);
}
.rf-hero-preview-body { position: relative; padding: var(--rf-space-4); }

/* Static core mark. Its two looping animations were the widget's only
   purely atmospheric motion and are removed; the mark itself remains. */
.rf-hero-core {
  position: absolute; top: var(--rf-space-3); left: 50%;
  transform: translateX(-50%);
  width: 4rem; height: 4rem; opacity: .5;
}
.rf-hero-core-ring { position: absolute; inset: 0; border-radius: var(--rf-radius-circle); border: 1px solid rgba(var(--rf-brand-rgb), .3); }
.rf-hero-core-ring--inner { inset: .75rem; border-color: rgba(var(--rf-brand-rgb), .5); }
.rf-hero-core-spin { position: absolute; inset: 0; }
.rf-hero-core-dot,
.rf-hero-core-orbit-dot {
  position: absolute; border-radius: var(--rf-radius-circle); background: var(--rf-brand);
}
.rf-hero-core-dot { top: 50%; left: 50%; width: .5rem; height: .5rem; margin: -.25rem 0 0 -.25rem; }
.rf-hero-core-orbit-dot { top: -.15rem; left: 50%; width: .35rem; height: .35rem; margin-left: -.175rem; opacity: .6; }

.rf-hero-feed {
  list-style: none; padding: 0; margin: 0;
  min-height: 14rem;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: var(--rf-space-3); overflow: hidden;
}
.rf-hero-feed-item {
  display: flex; align-items: flex-start; gap: var(--rf-space-2);
  animation: rf-fade-in var(--rf-dur-enter) var(--rf-ease-out) both;
}
.rf-hero-feed-icon {
  flex-shrink: 0; width: 1.5rem; height: 1.5rem;
  border-radius: var(--rf-radius-circle);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--rf-text-sm); margin-top: 1px;
}
.rf-hero-feed-icon--ghost { background: rgba(var(--rf-brand-rgb), .16); color: var(--rf-brand); }
.rf-hero-feed-icon--spin { background: transparent; }
.rf-hero-feed-content { flex: 1; min-width: 0; }
.rf-hero-feed-text { display: block; font-size: var(--rf-text-sm); color: var(--rf-text-secondary); line-height: 1.35; }
.rf-hero-feed-text--complete { color: var(--rf-brand); font-weight: 600; }
.rf-hero-feed-sub { display: block; font-size: var(--rf-text-xs); color: var(--rf-text-faint); margin-top: 2px; }
.rf-hero-feed-elapsed {
  font-size: var(--rf-text-xs); color: var(--rf-text-faint);
  flex-shrink: 0; margin-left: var(--rf-space-1); font-variant-numeric: tabular-nums;
}
.rf-hero-live-dot {
  display: inline-block; width: .375rem; height: .375rem;
  border-radius: var(--rf-radius-circle); background: currentColor;
  margin-right: var(--rf-space-1);
  animation: rf-pulse 1.8s var(--rf-ease-in-out) infinite;
}
/* The scanning bar became a static rule: it implied measured progress. */
.rf-hero-preview-progress-bar { height: 2px; background: rgba(var(--rf-brand-rgb), .3); }

/* ==========================================================================
   6. MISSION LIBRARY
   ========================================================================== */

.rf-quickstart { margin-top: var(--rf-space-6); }
.rf-missions-header { margin-bottom: var(--rf-space-4); }
.rf-missions-title { font-size: var(--rf-text-h2); font-weight: 600; letter-spacing: -.01em; margin-bottom: var(--rf-space-1); }
.rf-missions-sub { color: var(--rf-text-secondary); font-size: var(--rf-text-sm); margin-bottom: 0; }

/* Carries `tk-glow-card` in the markup: the template's diagonal accent wash
   and coloured lift shadow on hover. Only the vertical accent rule and the
   surface itself are defined here. */
.rf-mission-template {
  display: flex; flex-direction: column;
  padding: var(--rf-space-5);
  background: var(--rf-surface);
  background-image: linear-gradient(180deg,
    rgba(255, 255, 255, .035), rgba(255, 255, 255, .01));
  border: 1px solid var(--rf-border);
  border-radius: var(--rf-radius-lg);
  cursor: pointer; height: 100%; outline: none; position: relative;
  transition: border-color var(--rf-dur-enter) var(--rf-ease-out),
              transform var(--rf-dur-enter) var(--rf-ease-out),
              box-shadow var(--rf-dur-enter) var(--rf-ease-out);
}
/* The vertical accent rule uses ::before; the template's hover wash
   (tk-glow-card, applied in the markup) uses ::after. */
.rf-mission-template::before {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
  z-index: 2;
  background: var(--rf-brand); transform: scaleY(0); transform-origin: bottom;
  transition: transform var(--rf-dur-quick) var(--rf-ease-out);
}
.rf-mission-template:hover,
.rf-mission-template:focus-visible { transform: translateY(-2px); }
.rf-mission-template:hover::before,
.rf-mission-template:focus-visible::before { transform: scaleY(1); }
.rf-mt-icon {
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--rf-radius-md);
  background: rgba(var(--rf-brand-rgb), .1); color: var(--rf-brand-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--rf-text-h2); margin-bottom: var(--rf-space-4); flex-shrink: 0;
}
.rf-mt-body { flex: 1; }
.rf-mt-category {
  font-size: var(--rf-text-xs); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--rf-text-secondary); margin-bottom: var(--rf-space-1);
}
.rf-mt-title { font-size: var(--rf-text-h3); font-weight: 600; margin-bottom: var(--rf-space-1); line-height: 1.3; }
.rf-mt-desc { font-size: var(--rf-text-sm); color: var(--rf-text-secondary); line-height: 1.55; }
/* Always visible — the hover-only reveal was invisible on every touch device. */
.rf-mt-action {
  display: flex; align-items: center; gap: var(--rf-space-1);
  margin-top: var(--rf-space-4); padding-top: var(--rf-space-3);
  border-top: 1px solid var(--rf-border);
  font-size: var(--rf-text-sm); font-weight: 600; color: var(--rf-brand-strong);
}
.rf-mt-arrow { display: inline-block; transition: transform var(--rf-dur-quick) var(--rf-ease-out); }
.rf-mission-template:hover .rf-mt-arrow,
.rf-mission-template:focus-visible .rf-mt-arrow { transform: translateX(3px); }

/* ==========================================================================
   7. WORKSPACE — PLANNING
   ========================================================================== */

.rf-workspace-band {
  padding: var(--rf-space-3) 0 var(--rf-space-4);
  border-bottom: 1px solid var(--rf-border);
  margin-bottom: var(--rf-space-5);
}
.rf-workspace-mission { font-size: var(--rf-text-body); font-weight: 500; line-height: 1.4; }

.rf-planning-state {
  border: 1px solid rgba(var(--rf-brand-rgb), .22);
  border-radius: var(--rf-radius-lg);
  padding: var(--rf-space-5);
  position: relative; overflow: hidden;
}
.rf-planning-state > * { position: relative; z-index: 1; }

.rf-planning-state-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--rf-space-3); margin-bottom: var(--rf-space-4);
}
.rf-planning-state-title { font-size: var(--rf-text-h3); font-weight: 600; color: var(--rf-text); }
.rf-elapsed-badge {
  font-size: var(--rf-text-sm); color: var(--rf-brand);
  background: rgba(var(--rf-brand-rgb), .12);
  border: 1px solid rgba(var(--rf-brand-rgb), .3);
  border-radius: var(--rf-radius-pill);
  padding: var(--rf-space-1) var(--rf-space-3);
  font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0;
}
.rf-planning-mission-box {
  background: var(--rf-glass);
  border: 1px solid var(--rf-glass-border);
  border-radius: var(--rf-radius-md);
  padding: var(--rf-space-3) var(--rf-space-4);
  font-size: var(--rf-text-body); color: var(--rf-text-secondary);
  margin-bottom: var(--rf-space-5); line-height: 1.5;
}

/* The one live indicator: represents genuine ongoing work. */
.rf-ai-status-dot {
  display: inline-block; width: .5rem; height: .5rem;
  border-radius: var(--rf-radius-circle); background: var(--rf-brand); flex-shrink: 0;
  animation: rf-pulse 1.8s var(--rf-ease-in-out) infinite;
}

/* 4-step tracker */
.rf-planning-steps { display: flex; justify-content: space-between; align-items: flex-start; }
.rf-planning-step { flex: 0 1 7rem; min-width: 0; text-align: center; }
.rf-planning-connector {
  flex: 1 1 auto; align-self: flex-start; margin-top: 1rem; min-width: 1rem;
  border-top: 2px dashed var(--rf-glass-border);
}
.rf-planning-step-avatar,
.rf-planning-step-icon,
.rf-planning-step-label {
  transition: color var(--rf-dur-enter) var(--rf-ease-in-out),
              background-color var(--rf-dur-enter) var(--rf-ease-in-out);
}
.rf-planning-step-avatar {
  background-color: var(--rf-glass) !important;
  color: var(--rf-text-faint) !important;
  border: 1px solid var(--rf-glass-border);
}
.rf-planning-step-icon { margin-top: var(--rf-space-2); font-size: var(--rf-text-h3); color: var(--rf-text-faint) !important; }
.rf-planning-step-label {
  line-height: 1.3; margin-top: var(--rf-space-1);
  font-size: var(--rf-text-xs); color: var(--rf-text-faint) !important;
}
.rf-planning-step.is-active .rf-planning-step-avatar {
  background-color: rgba(var(--rf-brand-rgb), .2) !important;
  color: var(--rf-brand) !important;
  border-color: rgba(var(--rf-brand-rgb), .5);
}
.rf-planning-step.is-active .rf-planning-step-icon { color: var(--rf-brand) !important; }
.rf-planning-step.is-active .rf-planning-step-label {
  color: var(--rf-text) !important; font-weight: 600;
}

.rf-planning-status-row {
  display: flex; align-items: flex-start; gap: var(--rf-space-5);
  padding-top: var(--rf-space-4); margin-top: var(--rf-space-5);
  border-top: 1px solid var(--rf-glass-border);
}
.rf-planning-status-text { font-size: var(--rf-text-sm); color: var(--rf-text-secondary); }
.rf-planning-cancel-btn {
  color: var(--rf-text-secondary) !important;
  border-color: var(--rf-glass-border) !important;
  background: transparent !important;
  font-size: var(--rf-text-sm);
}
.rf-planning-cancel-btn:hover:not(:disabled) {
  color: var(--rf-text) !important;
  border-color: rgba(255, 255, 255, .3) !important;
  background: var(--rf-glass) !important;
}

/* Planning engine mark — static rings, one animated element (the bars). */
.rf-plan-loader-wrap { flex-shrink: 0; }
.rf-plan-info { flex: 1; min-width: 0; }
.rf-plan-engine { position: relative; width: 6rem; height: 6rem; }
.rf-plan-engine-glow {
  position: absolute; inset: -.5rem; border-radius: var(--rf-radius-circle);
  background: radial-gradient(circle, rgba(var(--rf-brand-rgb), .22), transparent 65%);
  pointer-events: none;
}
.rf-plan-engine-ring { position: absolute; border-radius: var(--rf-radius-circle); }
.rf-plan-engine-ring--outer { inset: 0; border: 1px solid rgba(var(--rf-brand-rgb), .38); }
.rf-plan-engine-ring--dash { inset: .5rem; border: 1px dashed rgba(var(--rf-brand-rgb), .3); }
.rf-plan-engine-ring--inner { inset: 1.25rem; border: 1px solid rgba(var(--rf-brand-rgb), .6); }
.rf-plan-bars {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 3px;
}
.rf-plan-bar { width: 3px; border-radius: var(--rf-radius-pill); background: var(--rf-brand); animation: rf-bar 1.2s var(--rf-ease-in-out) infinite; }
.rf-plan-bar:nth-child(1) { height: .75rem; animation-delay: 0s; }
.rf-plan-bar:nth-child(2) { height: 1.25rem; animation-delay: .18s; }
.rf-plan-bar:nth-child(3) { height: 1.5rem; animation-delay: .36s; }
.rf-plan-bar:nth-child(4) { height: 1.25rem; animation-delay: .18s; }
.rf-plan-bar:nth-child(5) { height: .75rem; animation-delay: 0s; }

.rf-plan-info-title { font-size: var(--rf-text-h3); font-weight: 600; color: var(--rf-text); margin-bottom: var(--rf-space-1); line-height: 1.3; }
.rf-plan-info-desc { font-size: var(--rf-text-sm); color: var(--rf-text-secondary); line-height: 1.5; margin-bottom: var(--rf-space-3); }
.rf-plan-progress-bar {
  height: 3px; background: var(--rf-glass-border);
  border-radius: var(--rf-radius-pill); overflow: hidden;
  margin-bottom: var(--rf-space-3); position: relative;
}
.rf-plan-progress-fill {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--rf-brand) 50%, transparent);
  animation: rf-scan 2.2s var(--rf-ease-in-out) infinite;
}
.rf-plan-status-dots { display: flex; flex-wrap: wrap; gap: var(--rf-space-2) var(--rf-space-4); }
.rf-plan-status-dot {
  display: inline-flex; align-items: center; gap: var(--rf-space-1);
  font-size: var(--rf-text-sm); font-weight: 500; color: var(--rf-text-secondary);
}
.rf-plan-status-dot .rf-ai-status-dot { width: .375rem; height: .375rem; }
.rf-plan-status-dots .rf-plan-status-dot:nth-child(2) .rf-ai-status-dot { animation-delay: .6s; }
.rf-plan-status-dots .rf-plan-status-dot:nth-child(3) .rf-ai-status-dot { animation-delay: 1.2s; }

/* Execution Plan card internals */
.rf-plan-summary {
  padding: var(--rf-space-3) var(--rf-space-4);
  background: var(--rf-surface-sunken);
  border: 1px solid var(--rf-border);
  border-left: 3px solid rgba(var(--rf-brand-rgb), .5);
  border-radius: var(--rf-radius-md);
}
.rf-plan-insight {
  background: rgba(var(--rf-brand-rgb), .04);
  border: 1px solid rgba(var(--rf-brand-rgb), .14);
  border-left: 3px solid rgba(var(--rf-brand-rgb), .45);
  border-radius: var(--rf-radius-md);
  box-shadow: none;
}
.rf-controls-group {
  padding: var(--rf-space-3) var(--rf-space-4);
  background: var(--rf-surface-sunken);
  border: 1px solid var(--rf-border);
  border-radius: var(--rf-radius-md);
}
.rf-controls-group .form-select { background-color: var(--rf-surface); }
.rf-objective-list { border-top: 1px solid var(--rf-border); }
.rf-objective-item {
  display: flex; align-items: flex-start; gap: var(--rf-space-3);
  padding: var(--rf-space-3) 0;
  border-bottom: 1px solid var(--rf-border);
}
.rf-objective-number {
  flex-shrink: 0;
  background-color: rgba(var(--rf-brand-rgb), .1) !important;
  color: var(--rf-brand-strong) !important;
  font-weight: 700 !important;
}
.rf-objective-text { padding-top: 2px; font-size: var(--rf-text-body); line-height: 1.55; }

/* Mission textarea in the light card */
#mission-textarea:read-only {
  background-color: var(--rf-surface-sunken);
  color: var(--rf-text-secondary);
  cursor: default;
}
.card #mission-textarea:not(:read-only) {
  transition: border-color var(--rf-dur-quick) var(--rf-ease-in-out),
              box-shadow var(--rf-dur-quick) var(--rf-ease-in-out);
}

/* Planning-mode card: joins the control surface while the system works. */
.rf-card-planning {
  background: var(--rf-surface-raised) !important;
  border-color: rgba(var(--rf-brand-rgb), .22) !important;
  box-shadow: var(--rf-shadow-active) !important;
  position: relative; overflow: hidden;
}
.rf-card-planning > .card-body { position: relative; z-index: 1; }
.rf-card-planning h1, .rf-card-planning h2 { color: var(--rf-text); }
.rf-card-planning .text-secondary { color: var(--rf-text-secondary) !important; }
.rf-card-planning .form-label { color: var(--rf-text-faint); }
.rf-card-planning #mission-textarea:read-only {
  background: var(--rf-glass) !important;
  border-color: var(--rf-glass-border) !important;
  color: var(--rf-text-secondary) !important;
}
.rf-card-planning .rf-planning-state {
  background: var(--rf-glass);
  border-color: var(--rf-glass-border);
}

/* ==========================================================================
   8. WORKSPACE — RUNNING
   ========================================================================== */

.rf-card-running {
  border-top: 3px solid var(--rf-brand);
  box-shadow: var(--rf-shadow-active) !important;
}
.rf-live-chip {
  display: inline-flex; align-items: center; gap: var(--rf-space-1);
  font-size: var(--rf-text-xs); font-weight: 600; color: var(--rf-brand-strong);
  background: rgba(var(--rf-brand-rgb), .1);
  border: 1px solid rgba(var(--rf-brand-rgb), .25);
  border-radius: var(--rf-radius-pill);
  padding: var(--rf-space-1) var(--rf-space-3); flex-shrink: 0;
}
.rf-live-chip .rf-ai-status-dot { width: .375rem; height: .375rem; }

.rf-mission-command {
  border: 1px solid rgba(var(--rf-brand-rgb), .22);
  border-radius: var(--rf-radius-md);
  padding: var(--rf-space-4);
  position: relative; overflow: hidden;
}
.rf-mission-command > * { position: relative; z-index: 1; }
.rf-mission-command-state {
  font-size: var(--rf-text-sm); font-weight: 700; color: var(--rf-brand);
  letter-spacing: .05em; text-transform: uppercase;
}
.rf-mission-engine-tag {
  font-size: var(--rf-text-xs); color: var(--rf-text-secondary);
  background: var(--rf-glass); border: 1px solid var(--rf-glass-border);
  border-radius: var(--rf-radius-sm); padding: 2px var(--rf-space-2); white-space: nowrap;
}
.rf-mission-cmd-stat { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.rf-mission-cmd-value {
  font-size: var(--rf-text-h3); font-weight: 700; color: var(--rf-text);
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.rf-mission-cmd-label {
  font-size: var(--rf-text-xs); color: var(--rf-text-faint);
  text-transform: uppercase; letter-spacing: .05em;
}
.rf-mission-cmd-divider { width: 1px; height: 1.75rem; background: var(--rf-glass-border); flex-shrink: 0; }

.rf-running-objectives { display: flex; flex-direction: column; }
.rf-running-objective {
  display: flex; align-items: flex-start; gap: var(--rf-space-3);
  padding: var(--rf-space-3) 0;
  border-bottom: 1px solid var(--rf-border);
}
.rf-running-objective:last-child { border-bottom: none; }
.rf-running-obj-num {
  flex-shrink: 0; width: 1.5rem; height: 1.5rem;
  border-radius: var(--rf-radius-circle);
  background: rgba(var(--rf-brand-rgb), .1);
  border: 1px solid rgba(var(--rf-brand-rgb), .22);
  color: var(--rf-brand-strong);
  font-size: var(--rf-text-xs); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; margin-top: 1px;
}
/* One dot per active worker — represents real concurrent work. */
.rf-worker-pulse { display: inline-flex; align-items: center; flex-shrink: 0; margin-top: var(--rf-space-1); }
.rf-worker-pulse::before {
  content: ''; display: block; width: .375rem; height: .375rem;
  border-radius: var(--rf-radius-circle); background: var(--rf-brand);
  animation: rf-pulse 2.4s var(--rf-ease-in-out) infinite;
}
/* Mission Activity live feed states (Release Closure, 2026-08-12). Three real states
   reported by the engine — pending, running, done — and nothing in between. */
.rf-obj-state {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  min-width: 1rem; margin-top: var(--rf-space-1);
}
.rf-obj-state--done { color: var(--rf-brand-strong); }
.rf-obj-state--pending::before {
  content: ''; display: block; width: .375rem; height: .375rem;
  border-radius: var(--rf-radius-circle); border: 1px solid var(--rf-border-strong);
}
.rf-running-objective--pending .rf-running-obj-num {
  background: var(--rf-neutral-bg); border-color: var(--rf-border-strong);
  color: var(--rf-text-secondary);
}
.rf-running-objective--pending .rf-obj-label { color: var(--rf-text-secondary); }
.rf-running-objective--done .rf-obj-label { color: var(--rf-text); }
.rf-running-objective .rf-obj-label { transition: color var(--rf-dur-quick) var(--rf-ease-out); }

.rf-running-objective:nth-child(2) .rf-worker-pulse::before { animation-delay: .48s; }
.rf-running-objective:nth-child(3) .rf-worker-pulse::before { animation-delay: .96s; }
.rf-running-objective:nth-child(4) .rf-worker-pulse::before { animation-delay: 1.44s; }
.rf-running-objective:nth-child(5) .rf-worker-pulse::before { animation-delay: 1.92s; }
.rf-running-objective:nth-child(6) .rf-worker-pulse::before { animation-delay: 2.4s; }

/* ==========================================================================
   9. WORKSPACE — RESULTS & OUTREACH
   ========================================================================== */

.rf-completion-briefing {
  padding-bottom: var(--rf-space-5);
  border-bottom: 1px solid var(--rf-border);
  margin-bottom: var(--rf-space-5);
}
/* The rings are centred on this wrap, so it has to be wide enough to contain
   them — at the previous 10rem/6.5rem they overhung the card's left edge and
   drew on the page background. Invisible on the light theme, obvious once the
   ring had contrast against a dark surface. */
.rf-completion-count-wrap { position: relative; display: inline-block; padding: var(--rf-space-3) var(--rf-space-5); }
.rf-completion-count {
  font-size: var(--rf-text-count); font-weight: 700; line-height: 1;
  color: var(--rf-brand-strong); letter-spacing: -.02em; position: relative; z-index: 1;
  animation: rf-rise var(--rf-dur-deliberate) var(--rf-ease-out) both;
}
.rf-completion-label { font-size: var(--rf-text-body); color: var(--rf-text-secondary); margin: var(--rf-space-1) 0 var(--rf-space-3); }
.rf-completion-ring {
  position: absolute; border-radius: var(--rf-radius-circle);
  top: 50%; left: 50%; pointer-events: none;
  animation: rf-rise var(--rf-dur-deliberate) var(--rf-ease-out) both;
}
.rf-completion-ring--outer {
  width: 6rem; height: 6rem; margin: -3rem 0 0 -3rem;
  border: 1px solid rgba(var(--rf-brand-rgb), .22); animation-delay: 120ms;
}
.rf-completion-ring--inner {
  width: 4.25rem; height: 4.25rem; margin: -2.125rem 0 0 -2.125rem;
  border: 1px solid rgba(var(--rf-brand-rgb), .34); animation-delay: 60ms;
}

/* Outreach packages */
.rf-pkg-item {
  background: var(--rf-surface);
  border: 1px solid var(--rf-border);
  border-left: 3px solid var(--rf-border-strong);
  border-radius: var(--rf-radius-lg);
  padding: var(--rf-space-4);
  margin-bottom: var(--rf-space-3);
}
.rf-pkg-item:last-of-type { margin-bottom: 0; }
.rf-pkg-details--action { border-left-color: var(--rf-brand); }
.rf-pkg-details--done { border-left-color: var(--rf-border-strong); }
.rf-pkg-summary { cursor: pointer; list-style: none; }
.rf-pkg-summary::-webkit-details-marker { display: none; }
.rf-pkg-summary-chevron {
  transition: transform var(--rf-dur-quick) var(--rf-ease-in-out);
  color: var(--rf-text-secondary); flex-shrink: 0;
}
details.rf-pkg-item[open] > .rf-pkg-summary .rf-pkg-summary-chevron { transform: rotate(90deg); }
.rf-pkg-body { margin-top: var(--rf-space-4); }
.rf-pkg-company { font-size: var(--rf-text-body); font-weight: 600; color: var(--rf-text); }
.rf-pkg-analysis {
  background: var(--rf-surface-sunken);
  border: 1px solid var(--rf-border);
  border-radius: var(--rf-radius-md);
  padding: var(--rf-space-4); margin-bottom: var(--rf-space-4);
}
.rf-pkg-next-step {
  display: flex; align-items: flex-start; gap: var(--rf-space-2);
  padding: var(--rf-space-3);
  background: rgba(var(--rf-brand-rgb), .04);
  border: 1px solid rgba(var(--rf-brand-rgb), .14);
  border-radius: var(--rf-radius-md);
  font-size: var(--rf-text-sm); color: var(--rf-text); line-height: 1.5;
}
.rf-pkg-next-step > i { flex-shrink: 0; color: var(--rf-brand-strong); margin-top: 2px; }
.rf-smtp-from-banner {
  background: var(--rf-surface-sunken);
  border: 1px solid var(--rf-border);
  border-radius: var(--rf-radius-md);
}
.rf-email-subject, .rf-email-body {
  border-color: var(--rf-border-strong) !important;
  background: var(--rf-surface) !important;
  cursor: default;
}
.rf-email-subject { font-weight: 600; font-size: var(--rf-text-body) !important; }
.rf-email-body { font-size: var(--rf-text-sm) !important; line-height: 1.65 !important; resize: none; }

/* Downloads */
.rf-deliverable-row {
  display: flex; align-items: center; gap: var(--rf-space-4);
  padding-bottom: var(--rf-space-4); margin-bottom: var(--rf-space-4);
  border-bottom: 1px solid var(--rf-border);
  flex-wrap: wrap;
}
.rf-deliverable-icon {
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--rf-radius-md);
  background: rgba(var(--rf-brand-rgb), .1); color: var(--rf-brand-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--rf-text-h2); flex-shrink: 0;
}
.rf-deliverable-meta { flex: 1; min-width: 9rem; }
.rf-deliverable-name { font-size: var(--rf-text-body); font-weight: 600; margin-bottom: 2px; }
.rf-deliverable-desc { font-size: var(--rf-text-sm); color: var(--rf-text-secondary); }
.rf-deliverable-btn { flex-shrink: 0; }

/* Settings — engine option cards */
.rf-engine-option { white-space: normal; }

/* ---- Remaining stock Tabler components ---------------------------------
   Grouped here rather than scattered, so a component that renders white on
   the dark page has one obvious place to be fixed. */

/* The utility form, not just the badge form: index.html uses
   `avatar bg-primary text-white` directly. */
.bg-primary { background-color: var(--rf-brand-fill) !important; }
.bg-primary-lt { background-color: rgba(var(--rf-brand-rgb), .16) !important; color: var(--rf-brand-strong) !important; }
.bg-success-lt { background-color: var(--rf-success-bg) !important; color: var(--rf-success) !important; }
.bg-danger-lt  { background-color: var(--rf-danger-bg)  !important; color: var(--rf-danger)  !important; }
.bg-warning-lt { background-color: var(--rf-warning-bg) !important; color: var(--rf-warning) !important; }
.bg-secondary-lt { background-color: var(--rf-neutral-bg) !important; color: var(--rf-neutral) !important; }

.avatar {
  background-color: var(--rf-surface-raised);
  color: var(--rf-text-secondary);
  border-radius: var(--rf-radius-md);
}
.avatar.bg-primary { color: var(--rf-text-on-brand) !important; }

.status-dot { background-color: var(--rf-text-secondary); }
.status-dot-animated::before { background-color: currentColor; }

.progress { background-color: var(--rf-surface-sunken); border-radius: var(--rf-radius-pill); }
.progress-bar { background-color: var(--rf-brand-fill); }

.list-group, .list-group-item {
  background-color: transparent;
  border-color: var(--rf-border);
  color: var(--rf-text);
}

.hr-text { color: var(--rf-text-secondary); }
.hr-text::before, .hr-text::after { border-color: var(--rf-border); }

/* Timeline (Mission Activity, completed) */
.timeline-event-card.card { box-shadow: none; border-color: var(--rf-border); background-image: none; }
.timeline-event-card .card-body { padding: var(--rf-space-2) var(--rf-space-3); font-size: var(--rf-text-sm); }
.timeline-event-icon { box-shadow: 0 0 0 4px var(--rf-surface-page); }

/* Focus is never removed, only restyled — it has to be visible on dark. */
:focus-visible {
  outline: 2px solid var(--rf-brand-strong);
  outline-offset: 2px;
}
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible { outline: none; }

/* Text selection, matching the template's own accent selection. */
::selection { background: rgba(var(--rf-brand-rgb), .35); color: var(--rf-text); }

/* Quill (Review & Send) brought onto the system. Quill ships a light theme
   only, so its surface, text and picker chrome are all restated here. */
.ql-toolbar.ql-snow, .ql-container.ql-snow { border-color: var(--rf-border-strong); }
.ql-toolbar.ql-snow { border-radius: var(--rf-radius-md) var(--rf-radius-md) 0 0; background: var(--rf-surface-raised); }
.ql-container.ql-snow {
  border-radius: 0 0 var(--rf-radius-md) var(--rf-radius-md);
  background: var(--rf-surface-sunken);
  color: var(--rf-text);
  font-family: inherit; font-size: var(--rf-text-body);
}
.ql-editor { min-height: 14rem; line-height: 1.65; }
.ql-editor.ql-blank::before { color: var(--rf-text-faint); font-style: normal; }
.ql-snow .ql-stroke { stroke: var(--rf-text-secondary); }
.ql-snow .ql-fill { fill: var(--rf-text-secondary); }
.ql-snow .ql-active .ql-stroke, .ql-snow .ql-toolbar button:hover .ql-stroke { stroke: var(--rf-brand-strong); }
.ql-snow .ql-active .ql-fill, .ql-snow .ql-toolbar button:hover .ql-fill { fill: var(--rf-brand-strong); }
.ql-snow .ql-picker { color: var(--rf-text-secondary); }
.ql-snow .ql-picker-options {
  background: var(--rf-surface-overlay);
  border-color: var(--rf-border-strong);
  border-radius: var(--rf-radius-sm);
}

/* ==========================================================================
   9b. ADMIN PANEL
   --------------------------------------------------------------------------
   Section navigation and the dashboard's charts. Added 2026-08-13, when
   Settings moved inside the admin panel and the dashboard was rebuilt from
   ten equal-weight counters into a real dashboard.

   This is a section nav inside the page body, scoped to the admin panel — it
   is not the global header, so DESIGN_RULES.md's "no navigation in the
   header" rule is unaffected.
   ========================================================================== */

.rf-admin-nav {
  display: flex;
  gap: var(--rf-space-1);
  margin-bottom: var(--rf-space-5);
  padding: var(--rf-space-1);
  background: var(--rf-surface-sunken);
  border: 1px solid var(--rf-border);
  border-radius: var(--rf-radius-md);
  overflow-x: auto;
  scrollbar-width: none;
}
.rf-admin-nav::-webkit-scrollbar { display: none; }
.rf-admin-nav-item {
  display: inline-flex;
  align-items: center;
  gap: var(--rf-space-2);
  padding: var(--rf-space-2) var(--rf-space-3);
  border-radius: var(--rf-radius-sm);
  font-size: var(--rf-text-sm);
  font-weight: 500;
  color: var(--rf-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color var(--rf-dur-instant) var(--rf-ease-in-out),
              color var(--rf-dur-instant) var(--rf-ease-in-out);
}
.rf-admin-nav-item:hover { background: var(--rf-glass-strong); color: var(--rf-text); }
.rf-admin-nav-item.is-active {
  background: rgba(var(--rf-brand-rgb), .16);
  color: var(--rf-brand-strong);
  font-weight: 600;
}
.rf-admin-nav-item i { font-size: var(--rf-text-h3); }

/* ---- KPI row ----------------------------------------------------------- */
.rf-kpi-value {
  font-family: var(--rf-font-display);
  font-size: var(--rf-text-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--rf-text);
  font-variant-numeric: tabular-nums;
}
.rf-kpi-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--rf-space-2);
  margin-top: var(--rf-space-2);
  font-size: var(--rf-text-sm);
  min-height: 1.5rem;
}
/* Status wears a label, never colour alone. */
.rf-kpi-badge {
  display: inline-flex; align-items: center; gap: var(--rf-space-1);
  font-size: var(--rf-text-xs); font-weight: 600;
  padding: 2px var(--rf-space-2);
  border-radius: var(--rf-radius-sm);
}
.rf-kpi-badge--good { background: var(--rf-success-bg); color: var(--rf-success); }
.rf-kpi-badge--live { background: rgba(var(--rf-brand-rgb), .16); color: var(--rf-brand-strong); }

/* ---- Column chart -------------------------------------------------------
   Marks are capped at 24px and never fill their slot — the leftover is air.
   The data-end is rounded 4px and square at the baseline, so a bar reads as
   growing from the axis rather than floating. */
.rf-chart-cols {
  display: flex;
  align-items: flex-end;
  gap: 2px;                      /* the surface gap between adjacent marks */
  height: 11rem;
}
.rf-chart-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rf-space-2);
  height: 100%;
}
.rf-chart-col-track {
  flex: 1;
  width: 100%;
  max-width: 24px;
  display: flex;
  align-items: flex-end;
  /* One recessive hairline, solid, standing in for the axis. */
  border-bottom: 1px solid var(--rf-border-strong);
}
.rf-chart-col-bar {
  width: 100%;
  background: var(--rf-brand);
  border-radius: var(--rf-radius-mark) var(--rf-radius-mark) 0 0;
  min-height: 2px;
  transition: background-color var(--rf-dur-instant) var(--rf-ease-in-out);
}
.rf-chart-col:hover .rf-chart-col-bar { background: var(--rf-brand-strong); }
/* A zero day is drawn as a real zero, not a minimum-height stub that would
   read as one mission. */
.rf-chart-col-bar.is-empty { min-height: 0; background: transparent; }
.rf-chart-col-label {
  font-size: var(--rf-text-xs);
  color: var(--rf-text-faint);
  font-variant-numeric: tabular-nums;
}
.rf-chart-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--rf-space-2);
  margin-top: var(--rf-space-3);
  padding-top: var(--rf-space-3);
  border-top: 1px solid var(--rf-border);
  font-size: var(--rf-text-xs);
  color: var(--rf-text-secondary);
}
.rf-chart-peak { color: var(--rf-text-faint); }
.rf-chart-note {
  margin: var(--rf-space-4) 0 0;
  font-size: var(--rf-text-xs);
  color: var(--rf-text-faint);
  line-height: 1.5;
}

/* ---- Funnel + horizontal bars -------------------------------------------
   One hue throughout: stage order is already carried by vertical position
   and the labels, so colour is not spent re-encoding it. */
.rf-funnel { display: flex; flex-direction: column; gap: var(--rf-space-3); }
.rf-funnel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--rf-space-2); margin-bottom: var(--rf-space-1);
}
.rf-funnel-stage { font-size: var(--rf-text-sm); color: var(--rf-text); }
.rf-funnel-value {
  font-size: var(--rf-text-sm); font-weight: 600; color: var(--rf-text);
  font-variant-numeric: tabular-nums;
}
.rf-funnel-track {
  height: .5rem;
  background: var(--rf-surface-sunken);
  border-radius: var(--rf-radius-pill);
  overflow: hidden;
}
.rf-funnel-bar {
  height: 100%;
  background: var(--rf-brand);
  border-radius: var(--rf-radius-pill);
  min-width: 0;
}

.rf-hbars { display: flex; flex-direction: column; gap: var(--rf-space-3); }
.rf-hbar-row {
  display: grid;
  grid-template-columns: 5.5rem 1fr 2rem;
  align-items: center;
  gap: var(--rf-space-3);
}
.rf-hbar-label {
  font-size: var(--rf-text-sm); color: var(--rf-text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rf-hbar-track {
  height: .5rem;
  background: var(--rf-surface-sunken);
  border-radius: var(--rf-radius-pill);
  overflow: hidden;
}
.rf-hbar-bar { height: 100%; background: var(--rf-brand); border-radius: var(--rf-radius-pill); }
.rf-hbar-value {
  font-size: var(--rf-text-sm); font-weight: 600; color: var(--rf-text);
  text-align: right; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Currency needs more room than a count — "$9.200" wrapped to two lines in the
   default track sized for "7". */
.rf-hbars--money .rf-hbar-row { grid-template-columns: 5.5rem 1fr 4rem; }

/* ---- Compact supporting stats ------------------------------------------- */
.rf-mini-stats {
  margin-top: var(--rf-space-5);
  padding-top: var(--rf-space-4);
  border-top: 1px solid var(--rf-border);
  display: flex; flex-direction: column; gap: var(--rf-space-2);
}
.rf-mini-stat { display: flex; align-items: baseline; justify-content: space-between; gap: var(--rf-space-3); }
.rf-mini-stat-label { font-size: var(--rf-text-sm); color: var(--rf-text-secondary); }
.rf-mini-stat-value {
  font-size: var(--rf-text-sm); font-weight: 600; color: var(--rf-text);
  font-variant-numeric: tabular-nums;
}

.rf-link { color: var(--rf-text); text-decoration: none; }
.rf-link:hover { color: var(--rf-brand-strong); }

/* ---- History / listing tables -------------------------------------------
   `table-layout: fixed` is the whole fix. With the default `auto` algorithm a
   long mission title simply widens its column, the table grows past the
   container, and the row actions end up off-screen behind a horizontal
   scrollbar — reachable only if you happen to scroll right and discover they
   exist. `text-truncate` cannot help there: it needs a constrained width, and
   an auto-layout table gives it none (a `max-width` on a <td> is advisory and
   the table algorithm is free to override it).

   Fixed layout means the column widths in each table's <colgroup> are binding,
   so the table can never exceed 100% and the actions are always visible. */
.rf-data-table { table-layout: fixed; width: 100%; }
.rf-data-table > :not(caption) > * > td,
.rf-data-table > :not(caption) > * > th {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The identifying cell: two lines, then ellipsis. One line loses too much on a
   history screen where several missions legitimately start with the same words;
   two is enough to tell them apart while keeping rows scannable. The full text
   stays available via the cell's title attribute. */
.rf-title-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  line-height: 1.4;
}
/* Rows are taller now that the title can wrap to two lines, so they get a
   little more breathing room. Vertical alignment is left to Tabler's
   `table-vcenter`, which these tables already carry — restating it here would
   just be two rules disagreeing. */
.rf-data-table td { padding-top: var(--rf-space-3); padding-bottom: var(--rf-space-3); }
.rf-td-meta { font-size: var(--rf-text-sm); color: var(--rf-text-secondary); }
/* Actions must never wrap onto a second line and must never be clipped. */
.rf-data-table .rf-td-actions { overflow: visible; white-space: nowrap; }

/* ---- AI budget ----------------------------------------------------------
   The strip is a link to Admin → Usage; the note is the read-only line the
   mission form shows every user. */
.rf-budget-strip {
  display: block;
  padding: var(--rf-space-3) var(--rf-space-4);
  background: var(--rf-surface);
  border: 1px solid var(--rf-border);
  border-radius: var(--rf-radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--rf-dur-instant) var(--rf-ease-in-out);
}
.rf-budget-strip:hover { border-color: rgba(var(--rf-brand-rgb), .4); }
.rf-budget-head {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: var(--rf-space-2) var(--rf-space-3);
  margin-bottom: var(--rf-space-2);
}
.rf-budget-figure {
  font-size: var(--rf-text-h3); font-weight: 700; color: var(--rf-text);
  font-variant-numeric: tabular-nums; margin-right: auto;
}
.rf-kpi-badge--warn { background: var(--rf-warning-bg); color: var(--rf-warning); }

.rf-budget-note {
  display: inline-flex; align-items: center; gap: var(--rf-space-2);
  padding: var(--rf-space-2) var(--rf-space-3);
  border: 1px solid var(--rf-glass-border);
  border-radius: var(--rf-radius-sm);
  background: var(--rf-glass);
  font-size: var(--rf-text-sm);
  color: var(--rf-text-secondary);
}
.rf-budget-note i { color: var(--rf-brand-strong); }
.rf-budget-note strong { color: var(--rf-text); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   10. MOTION
   --------------------------------------------------------------------------
   Eight keyframes, down from twenty. Every one marks a real state:
   arrival, ongoing work, or a one-shot completion. No decorative loops.
   ========================================================================== */

@keyframes rf-fade-in {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rf-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rf-pulse {
  0%, 100% { opacity: .35; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1); }
}
@keyframes rf-bar {
  0%, 100% { transform: scaleY(.4); opacity: .6; }
  50%      { transform: scaleY(1);  opacity: 1; }
}
@keyframes rf-scan {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}
@keyframes rf-field-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--rf-brand-rgb), .35); }
  100% { box-shadow: 0 0 0 6px rgba(var(--rf-brand-rgb), 0); }
}

.rf-stagger { animation: rf-fade-in var(--rf-dur-enter) var(--rf-ease-out) both; }
.rf-stagger-0 { animation-delay: 0ms; }
.rf-stagger-1 { animation-delay: 40ms; }
.rf-stagger-2 { animation-delay: 80ms; }
.rf-stagger-3 { animation-delay: 120ms; }
.rf-stagger-4 { animation-delay: 160ms; }
.rf-field-pulse { animation: rf-field-pulse var(--rf-dur-deliberate) var(--rf-ease-out); }

/* Complete coverage — every animation and transition, one rule. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .rf-stagger, .rf-hero-feed-item, .rf-completion-count, .rf-completion-ring {
    opacity: 1 !important; transform: none !important;
  }
  .rf-ai-status-dot, .rf-worker-pulse::before, .rf-hero-live-dot { opacity: 1 !important; transform: none !important; }
  .rf-plan-progress-fill { background: rgba(var(--rf-brand-rgb), .45); }
  .rf-plan-bar { transform: scaleY(.8); }
}

/* ==========================================================================
   11. RESPONSIVE
   --------------------------------------------------------------------------
   Three breakpoints, grouped by component instead of by historical pass.
     sm  <576px   phone
     md  <768px   large phone / small tablet
     lg  <992px   tablet
   ========================================================================== */

/* ---- Tablet and below -------------------------------------------------- */
@media (max-width: 991.98px) {
  .rf-hero-visual-col, .rf-hero-illustration { display: none; }
  .rf-hero-band > .container-xl {
    padding-top: var(--rf-space-5) !important;
    padding-bottom: var(--rf-space-5) !important;
  }
  .rf-hero-band .col-lg-7 { text-align: center; }
  .rf-hero-lede { margin-left: auto; margin-right: auto; }
  .rf-hero-input-wrap, .rf-hero-textarea, .rf-hero-input-hint { text-align: left; }
  .rf-hero-input-footer { flex-direction: column-reverse; align-items: stretch; gap: var(--rf-space-2); }
  .rf-hero-input-footer .btn { width: 100%; }
}

/* ---- Phone and small tablet -------------------------------------------- */
@media (max-width: 767.98px) {
  /* Header — full-bleed hero, tighter chrome, real touch targets */
  .rf-hero-band {
    margin-left: 0; margin-right: 0;
    border-left: none; border-right: none; border-radius: 0;
  }
  .rf-hero-band > .container-xl {
    padding-left: var(--rf-space-4) !important;
    padding-right: var(--rf-space-4) !important;
  }
  .rf-hero-title { font-size: var(--rf-text-h1); }
  .rf-brand-logo { height: 2.25rem; }

  /* Long readonly content is capped rather than allowed to grow forever */
  #mission-textarea[readonly] { max-height: 12rem; overflow-y: auto; }
  .rf-planning-mission-box { max-height: 6rem; overflow-y: auto; }

  /* Planning: stacked loader, 2x2 tracker */
  .rf-planning-state { padding: var(--rf-space-4); }
  .rf-planning-status-row { flex-direction: column; align-items: center; text-align: center; gap: var(--rf-space-4); }
  .rf-plan-engine { width: 5rem; height: 5rem; }
  .rf-plan-info { width: 100%; }
  .rf-plan-status-dots { justify-content: center; }
  .rf-planning-steps { display: grid; grid-template-columns: repeat(2, 1fr); row-gap: var(--rf-space-4); }
  .rf-planning-connector { display: none; }
  .rf-planning-step { flex-basis: auto; }

  /* Mission Library: compact horizontal cards */
  .rf-mission-template { padding: var(--rf-space-4); flex-direction: row; align-items: center; gap: var(--rf-space-3); }
  .rf-mt-icon { width: 2.5rem; height: 2.5rem; font-size: var(--rf-text-h3); margin-bottom: 0; }
  .rf-mt-action { margin-top: 0; padding-top: 0; border-top: none; flex-shrink: 0; }
  .rf-mt-action span { display: none; }
  .rf-quickstart { margin-top: var(--rf-space-5); }

  /* Completion moment scales down */
  .rf-completion-count { font-size: var(--rf-text-display); }
  .rf-completion-ring { display: none; }

  /* Deliverable rows stack */
  .rf-deliverable-row { gap: var(--rf-space-3); }
  .rf-deliverable-btn { width: 100%; }

  /* ---- Data tables become record cards ------------------------------
     A 5-7 column table in a horizontal scroller is unreadable on a phone,
     and this is the product's primary output. Each row is re-rendered as a
     stacked label/value record using the header text carried in data-label.
     Same markup, same data, no horizontal scrolling, nothing hidden. */
  .rf-table-cards thead { display: none; }
  .rf-table-cards, .rf-table-cards tbody, .rf-table-cards tr, .rf-table-cards td { display: block; width: 100%; }
  /* display:block would otherwise beat the UA's [hidden] rule and reveal
     JS-collapsed detail rows on phones. */
  .rf-table-cards tr[hidden], .rf-table-cards td[hidden] { display: none !important; }
  .rf-table-cards tr {
    background: var(--rf-surface);
    border: 1px solid var(--rf-border);
    border-radius: var(--rf-radius-md);
    padding: var(--rf-space-3);
    margin-bottom: var(--rf-space-3);
  }
  .rf-table-cards tr:last-child { margin-bottom: 0; }
  .rf-table-cards td {
    border: none !important;
    padding: var(--rf-space-1) 0 !important;
    display: flex; gap: var(--rf-space-3); align-items: baseline;
  }
  .rf-table-cards td::before {
    content: attr(data-label);
    flex: 0 0 40%;
    font-size: var(--rf-text-xs); font-weight: 600; letter-spacing: .05em;
    text-transform: uppercase; color: var(--rf-text-secondary);
  }
  .rf-table-cards td:empty { display: none; }
  .rf-table-cards td[data-label=""]::before { display: none; }
  .rf-table-cards .rf-cell-truncate { max-width: none; white-space: normal; }
  /* The record card's identifying cell leads, full width, without a label. */
  .rf-table-cards td.rf-td-title {
    display: block;
    font-weight: 600;
    padding-bottom: var(--rf-space-2) !important;
    margin-bottom: var(--rf-space-2);
    border-bottom: 1px solid var(--rf-border) !important;
  }
  .rf-table-cards td.rf-td-title::before { display: none; }
  .rf-table-cards td.rf-td-title .text-truncate { white-space: normal; }
  .rf-table-cards td.rf-td-actions { justify-content: flex-end; padding-top: var(--rf-space-3) !important; }
  .rf-table-cards td.rf-td-actions::before { display: none; }
  .table-responsive:has(.rf-table-cards) { overflow-x: visible; }

  /* Outreach package summary: one status + one action, rest inside */
  .rf-pkg-item { padding: var(--rf-space-3); }
  .rf-pkg-summary .rf-pkg-open-btn { width: 100%; margin-top: var(--rf-space-2); }

  /* Filters scroll horizontally rather than wrapping unpredictably */
  .rf-pkg-filters .btn-group { width: 100%; }
  .rf-pkg-filter-scroll {
    display: flex; gap: var(--rf-space-2);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: var(--rf-space-1); margin-bottom: var(--rf-space-1);
    scrollbar-width: none;
  }
  .rf-pkg-filter-scroll::-webkit-scrollbar { display: none; }
  .rf-pkg-filter-scroll > * { flex-shrink: 0; }

  /* Every interactive control clears the touch-target minimum */
  .btn:not(.btn-sm):not(.rf-pkg-open-btn) { min-height: var(--rf-touch-target); }
  .form-control, .form-select { min-height: var(--rf-touch-target); }

  /* Admin nav wraps rather than scrolls. Horizontally scrolling it pushed
     Settings off-screen with no affordance — the exact discoverability problem
     moving Settings into the admin panel was meant to solve. */
  .rf-admin-nav { flex-wrap: wrap; overflow-x: visible; }
  .rf-admin-nav-item { flex: 1 1 auto; justify-content: center; }

  /* A right-aligned column keeps its alignment in the table, but in the record
     card the value sits beside its label and must read left. */
  .rf-table-cards td.text-end { text-align: left !important; }

  /* Charts stay legible rather than being squeezed to the column width. */
  .rf-chart-cols { height: 9rem; }
  .rf-hbar-row { grid-template-columns: 4.5rem 1fr 1.75rem; }
}

/* ---- Phone ------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .card-body { padding: var(--rf-space-3); }
  .rf-hero-title { font-size: var(--rf-text-h1); }
  .rf-stat-tile { padding: var(--rf-space-2); }
  .rf-table-cards td::before { flex-basis: 45%; }
}

/* ---- Header AI usage chip (2026-08-14) -------------------------------------
   A compact, always-visible read of the SAME budget.status() figures the Usage
   & Budget page renders. Admin only (see base.html). Static: the fill width is
   set from real data and changes only when the data does — no animation, per
   the "never for decoration" rule. */
.rf-usage-chip {
  padding: var(--rf-space-1) var(--rf-space-2);
  border: 1px solid var(--rf-border);
  border-radius: var(--rf-radius-sm);
  text-decoration: none;
  color: var(--rf-text-secondary);
  font-size: var(--rf-text-sm);
  white-space: nowrap;
}
.rf-usage-chip:hover { background: var(--rf-surface-raised); color: var(--rf-text); }
.rf-usage-chip-label { font-size: var(--rf-text-xs); letter-spacing: .04em; }
.rf-usage-chip-track {
  display: block;
  width: 64px;
  height: 4px;
  border-radius: var(--rf-radius-pill);
  background: var(--rf-surface-sunken);
  overflow: hidden;
}
.rf-usage-chip-fill {
  display: block;
  height: 100%;
  background: var(--rf-brand);
  border-radius: var(--rf-radius-pill);
}
/* Over budget is a state, not a series — it takes the status colour. */
.rf-usage-chip-fill[data-over="1"] { background: var(--rf-danger); }
.rf-usage-chip-value { font-variant-numeric: tabular-nums; }

/* ---- Danger Zone (Factory Reset, 2026-08-14) --------------------------------
   Visually separates the one irreversible action in the product from the ordinary
   settings above it. Static treatment only — no animation, no attention-seeking. */
.rf-danger-zone {
  border: 1px solid var(--rf-danger);
  border-radius: var(--rf-radius-sm);
  padding: var(--rf-space-4);
  background: var(--rf-surface-sunken);
}
.rf-eyebrow--danger { color: var(--rf-danger); }