@import "tailwindcss";

/* ──────────────────────────────────────────────────────────────────────────
   Design tokens. Exposed both as plain CSS variables (for raw `var()` use)
   and as Tailwind theme keys so utilities like `bg-surface-1`, `text-ink-100`,
   `border-stroke` work without a separate config file.

   These map the stats dashboard's flat pink-on-purple palette onto robomp's
   semantic ramp. Dark values are the @theme defaults; unlayered :root /
   [data-theme] blocks below are the authoritative + switchable layer
   (unlayered beats Tailwind's @layer theme so utilities flip at runtime).
   ────────────────────────────────────────────────────────────────────────── */
@theme {
  --font-sans:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Inter", system-ui, sans-serif;
  --font-mono:
    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ink ramp: low = bright text, high = dark surface */
  --color-ink-50: oklch(0.97 0.006 307);
  --color-ink-100: oklch(0.92 0.01 307);
  --color-ink-200: oklch(0.82 0.013 307);
  --color-ink-300: oklch(0.71 0.016 307);
  --color-ink-400: oklch(0.53 0.018 307);
  --color-ink-500: oklch(0.44 0.018 307);
  --color-ink-700: oklch(0.30 0.02 307);
  --color-ink-800: oklch(0.235 0.026 307);
  --color-ink-900: oklch(0.19 0.022 307);
  --color-ink-950: oklch(0.16 0.02 307);

  /* opaque flat surfaces (no translucency, no blur) */
  --color-surface-1: oklch(0.19 0.022 307);
  --color-surface-2: oklch(0.235 0.026 307);
  --color-surface-3: oklch(0.27 0.03 307);
  --color-stroke: oklch(1 0 0 / 9%);
  --color-stroke-soft: oklch(1 0 0 / 6%);

  /* brand accents: pink + cyan link */
  --color-accent: oklch(0.674 0.23 341);
  --color-accent-2: oklch(0.817 0.112 205);
  --color-accent-fg: oklch(0.2 0.07 341);
  --color-accent-muted: oklch(0.674 0.23 341 / 18%);
  --color-ring: oklch(0.817 0.112 205 / 70%);

  /* semantic states */
  --color-ok: oklch(0.76 0.14 150);
  --color-warn: oklch(0.79 0.14 85);
  --color-err: oklch(0.66 0.19 25);
  --color-info: oklch(0.817 0.112 205);

  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 8px;
}

/* ──────────────────────────────────────────────────────────────────────────
   Authoritative theme layer (unlayered → beats @layer theme). Dark is the
   default; [data-theme="light"] + the prefers-color media block flip every
   utility + var() consumer at runtime.
   ────────────────────────────────────────────────────────────────────────── */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --color-ink-50: oklch(0.97 0.006 307);
  --color-ink-100: oklch(0.92 0.01 307);
  --color-ink-200: oklch(0.82 0.013 307);
  --color-ink-300: oklch(0.71 0.016 307);
  --color-ink-400: oklch(0.53 0.018 307);
  --color-ink-500: oklch(0.44 0.018 307);
  --color-ink-700: oklch(0.30 0.02 307);
  --color-ink-800: oklch(0.235 0.026 307);
  --color-ink-900: oklch(0.19 0.022 307);
  --color-ink-950: oklch(0.16 0.02 307);

  --color-surface-1: oklch(0.19 0.022 307);
  --color-surface-2: oklch(0.235 0.026 307);
  --color-surface-3: oklch(0.27 0.03 307);
  --color-stroke: oklch(1 0 0 / 9%);
  --color-stroke-soft: oklch(1 0 0 / 6%);

  --color-accent: oklch(0.674 0.23 341);
  --color-accent-2: oklch(0.817 0.112 205);
  --color-accent-fg: oklch(0.2 0.07 341);
  --color-accent-muted: oklch(0.674 0.23 341 / 18%);
  --color-ring: oklch(0.817 0.112 205 / 70%);

  --color-ok: oklch(0.76 0.14 150);
  --color-warn: oklch(0.79 0.14 85);
  --color-err: oklch(0.66 0.19 25);
  --color-info: oklch(0.817 0.112 205);
}

[data-theme="light"] {
  color-scheme: light;

  /* light ramp inverted: low ink = dark text, high ink = light surface */
  --color-ink-50: oklch(0.22 0.03 307);
  --color-ink-100: oklch(0.26 0.03 307);
  --color-ink-200: oklch(0.36 0.03 307);
  --color-ink-300: oklch(0.46 0.03 307);
  --color-ink-400: oklch(0.58 0.025 307);
  --color-ink-500: oklch(0.62 0.02 307);
  --color-ink-700: oklch(0.80 0.01 307);
  --color-ink-800: oklch(0.965 0.006 307);
  --color-ink-900: oklch(1 0 0);
  --color-ink-950: oklch(0.985 0.004 307);

  --color-surface-1: oklch(1 0 0);
  --color-surface-2: oklch(0.965 0.006 307);
  --color-surface-3: oklch(0.93 0.008 307);
  --color-stroke: oklch(0 0 0 / 10%);
  --color-stroke-soft: oklch(0 0 0 / 6%);

  --color-accent: oklch(0.62 0.23 341);
  --color-accent-2: oklch(0.58 0.13 230);
  --color-accent-fg: oklch(0.99 0.01 341);
  --color-accent-muted: oklch(0.62 0.23 341 / 14%);
  --color-ring: oklch(0.58 0.13 230 / 70%);

  --color-ok: oklch(0.55 0.13 150);
  --color-warn: oklch(0.6 0.13 85);
  --color-err: oklch(0.55 0.19 25);
  --color-info: oklch(0.58 0.13 230);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;

    --color-ink-50: oklch(0.22 0.03 307);
    --color-ink-100: oklch(0.26 0.03 307);
    --color-ink-200: oklch(0.36 0.03 307);
    --color-ink-300: oklch(0.46 0.03 307);
    --color-ink-400: oklch(0.58 0.025 307);
    --color-ink-500: oklch(0.62 0.02 307);
    --color-ink-700: oklch(0.80 0.01 307);
    --color-ink-800: oklch(0.965 0.006 307);
    --color-ink-900: oklch(1 0 0);
    --color-ink-950: oklch(0.985 0.004 307);

    --color-surface-1: oklch(1 0 0);
    --color-surface-2: oklch(0.965 0.006 307);
    --color-surface-3: oklch(0.93 0.008 307);
    --color-stroke: oklch(0 0 0 / 10%);
    --color-stroke-soft: oklch(0 0 0 / 6%);

    --color-accent: oklch(0.62 0.23 341);
    --color-accent-2: oklch(0.58 0.13 230);
    --color-accent-fg: oklch(0.99 0.01 341);
    --color-accent-muted: oklch(0.62 0.23 341 / 14%);
    --color-ring: oklch(0.58 0.13 230 / 70%);

    --color-ok: oklch(0.55 0.13 150);
    --color-warn: oklch(0.6 0.13 85);
    --color-err: oklch(0.55 0.19 25);
    --color-info: oklch(0.58 0.13 230);
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   Root + page chrome. Flat page background — no gradient, no blur.
   ────────────────────────────────────────────────────────────────────────── */
html,
body,
#app {
  min-height: 100%;
  margin: 0;
  background-color: var(--color-ink-950);
  color: var(--color-ink-100);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "ss03", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--color-ink-950);
}

#app {
  display: flex;
  flex-direction: column;
}

::selection {
  background: var(--color-accent-muted);
  color: var(--color-ink-50);
}

a {
  color: var(--color-accent-2);
  text-decoration: none;
  transition: color 150ms ease-out;
}
a:hover {
  color: var(--color-info);
}

/* ──────────────────────────────────────────────────────────────────────────
   Reusable utility classes layered on top of Tailwind.
   ────────────────────────────────────────────────────────────────────────── */
.glass,
.glass-flat {
  background: var(--color-surface-1);
  border: 1px solid var(--color-stroke);
}

.hairline {
  border-color: var(--color-stroke-soft);
}

.tabular {
  font-variant-numeric: tabular-nums;
}

.eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-300);
}

/* ──────────────────────────────────────────────────────────────────────────
   Pills — capsule status tags. Tints are flat color-mix backgrounds with a
   matching flat text colour and no border (stats StatusPill convention).
   ────────────────────────────────────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border: none;
  background: var(--color-surface-2);
  color: var(--color-ink-300);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pill.queued,
.pill.open,
.pill.processed {
  background: color-mix(in oklch, var(--color-info) 18%, transparent);
  color: var(--color-info);
}
.pill.running {
  background: color-mix(in oklch, var(--color-warn) 18%, transparent);
  color: var(--color-warn);
}
.pill.done {
  background: color-mix(in oklch, var(--color-ok) 18%, transparent);
  color: var(--color-ok);
}
.pill.failed {
  background: color-mix(in oklch, var(--color-err) 18%, transparent);
  color: var(--color-err);
}
.pill.skipped {
  background: var(--color-surface-2);
  color: var(--color-ink-300);
}
.pill.closed {
  background: color-mix(in oklch, var(--color-accent) 18%, transparent);
  color: var(--color-accent);
}
.pill.dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  display: inline-block;
}

/* Pulsing dot for running pills. */
.pill.running.dot::before {
  animation: pulse-dot 1.8s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.75); }
}

/* Light-mode pill text: the bright dark-mode state colors (warn/info/ok/err/
   accent at L~0.55-0.62) wash out on their own light tints, so darken the TEXT
   to the same hue at a lower L for AA legibility. Dark mode keeps the bright
   tokens. The anti-flash script always sets data-theme, but mirror the system
   fallback for the no-JS first paint. */
[data-theme="light"] .pill.running { color: oklch(0.5 0.13 85); }
[data-theme="light"] .pill.queued,
[data-theme="light"] .pill.open,
[data-theme="light"] .pill.processed { color: oklch(0.36 0.13 230); }
[data-theme="light"] .pill.done { color: oklch(0.47 0.13 150); }
[data-theme="light"] .pill.failed { color: oklch(0.48 0.19 25); }
[data-theme="light"] .pill.closed { color: oklch(0.5 0.2 341); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .pill.running { color: oklch(0.5 0.13 85); }
  :root:not([data-theme]) .pill.queued,
  :root:not([data-theme]) .pill.open,
  :root:not([data-theme]) .pill.processed { color: oklch(0.36 0.13 230); }
  :root:not([data-theme]) .pill.done { color: oklch(0.47 0.13 150); }
  :root:not([data-theme]) .pill.failed { color: oklch(0.48 0.19 25); }
  :root:not([data-theme]) .pill.closed { color: oklch(0.5 0.2 341); }
}

/* ──────────────────────────────────────────────────────────────────────────
   Buttons.
   ────────────────────────────────────────────────────────────────────────── */
button,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: inherit;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-stroke);
  background: var(--color-surface-1);
  color: var(--color-ink-100);
  cursor: pointer;
  transition:
    background 150ms ease-out,
    border-color 150ms ease-out,
    color 150ms ease-out,
    transform 80ms ease-out;
  user-select: none;
}
button:hover:not(:disabled),
.btn:hover:not(:disabled) {
  background: var(--color-surface-2);
  border-color: var(--color-stroke);
}
button:active:not(:disabled),
.btn:active:not(:disabled) {
  transform: translateY(1px);
}
button:disabled,
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
button.primary,
.btn.primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-fg);
}
button.primary:hover:not(:disabled),
.btn.primary:hover:not(:disabled) {
  filter: brightness(1.05);
}
button.ghost,
.btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-ink-300);
}
button.ghost:hover:not(:disabled),
.btn.ghost:hover:not(:disabled) {
  background: var(--color-surface-1);
  color: var(--color-ink-100);
  border-color: var(--color-stroke);
}
button.danger,
.btn.danger {
  color: var(--color-err);
  border-color: color-mix(in oklch, var(--color-err) 32%, transparent);
  background: color-mix(in oklch, var(--color-err) 10%, transparent);
}
button.danger:hover:not(:disabled),
.btn.danger:hover:not(:disabled) {
  background: color-mix(in oklch, var(--color-err) 18%, transparent);
  border-color: color-mix(in oklch, var(--color-err) 60%, transparent);
  color: var(--color-err);
}
button.tiny,
.btn.tiny {
  padding: 3px 9px;
  font-size: 11.5px;
  border-radius: var(--radius-sm);
}

/* ──────────────────────────────────────────────────────────────────────────
   Form controls.
   ────────────────────────────────────────────────────────────────────────── */
input[type="text"],
input[type="search"],
input[type="password"],
select {
  font: inherit;
  background: var(--color-surface-1);
  color: var(--color-ink-100);
  border: 1px solid var(--color-stroke);
  border-radius: var(--radius-md);
  padding: 7px 11px;
  outline: none;
  transition:
    border-color 150ms ease-out,
    background 150ms ease-out,
    box-shadow 150ms ease-out;
}
input[type="text"]::placeholder,
input[type="search"]::placeholder {
  color: var(--color-ink-400);
}
input[type="text"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-ring) 45%, transparent);
}
select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-ink-300) 50%),
    linear-gradient(135deg, var(--color-ink-300) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 13px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px;
}
input[type="checkbox"] {
  accent-color: var(--color-accent);
}

/* ──────────────────────────────────────────────────────────────────────────
   Tables.
   ────────────────────────────────────────────────────────────────────────── */
table.t {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
table.t thead th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-300);
  padding: 9px 14px;
  border-bottom: 1px solid var(--color-stroke);
  background: var(--color-surface-2);
  white-space: nowrap;
}
table.t tbody td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--color-stroke-soft);
  vertical-align: top;
  color: var(--color-ink-100);
}
table.t tbody tr {
  transition: background 120ms ease-out;
}
table.t tbody tr:hover td {
  background: var(--color-surface-2);
}
table.t tbody tr:last-child td {
  border-bottom: none;
}
table.t td .meta-line {
  display: block;
  margin-top: 2px;
  color: var(--color-ink-300);
  font-size: 11px;
}
.err-cell {
  color: var(--color-err);
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 460px;
  font-size: 12px;
}

/* ──────────────────────────────────────────────────────────────────────────
   Code chips inline.
   ────────────────────────────────────────────────────────────────────────── */
code,
.code {
  font-family: var(--font-mono);
  font-size: 11.5px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-stroke-soft);
  padding: 1px 6px;
  border-radius: var(--radius-md);
  color: var(--color-ink-200);
}

/* ──────────────────────────────────────────────────────────────────────────
   Error tint — flat 10% background for the needs-attention rows.
   ────────────────────────────────────────────────────────────────────────── */
.tint-err {
  background: color-mix(in oklch, var(--color-err) 10%, transparent);
}

/* ──────────────────────────────────────────────────────────────────────────
   Scrollbar styling on opt-in containers — stats capsule look.
   ────────────────────────────────────────────────────────────────────────── */
.scrollable {
  scrollbar-width: thin;
  scrollbar-color: var(--color-stroke) transparent;
}
.scrollable::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.scrollable::-webkit-scrollbar-track {
  background: transparent;
}
.scrollable::-webkit-scrollbar-thumb {
  background: var(--color-stroke);
  border-radius: 999px;
}
.scrollable::-webkit-scrollbar-thumb:hover {
  background: var(--color-ink-400);
}

/* ──────────────────────────────────────────────────────────────────────────
   Log viewer.
   ────────────────────────────────────────────────────────────────────────── */
.logs {
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.55;
  max-height: 60vh;
  overflow: auto;
}
.log-row {
  display: grid;
  grid-template-columns: 160px 56px 150px 1fr;
  gap: 12px;
  padding: 4px 16px;
  border-bottom: 1px solid var(--color-stroke-soft);
  align-items: baseline;
}
.log-row:hover {
  background: var(--color-surface-2);
}
.log-row .ts {
  color: var(--color-ink-400);
  white-space: nowrap;
}
.log-row .lvl {
  font-weight: 600;
  letter-spacing: 0.04em;
}
.log-row .logger {
  color: var(--color-ink-400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.log-row .msg {
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--color-ink-100);
}
.log-row .extras {
  color: var(--color-ink-300);
  margin-left: 6px;
}
.log-row .extras b {
  color: var(--color-ink-200);
  font-weight: 500;
}
.log-row .exc {
  color: var(--color-err);
  white-space: pre-wrap;
  display: block;
  margin-top: 4px;
}
.lvl.INFO    { color: var(--color-info); }
.lvl.DEBUG   { color: var(--color-ink-400); }
.lvl.WARNING { color: var(--color-warn); }
.lvl.ERROR   { color: var(--color-err); }
.lvl.RAW     { color: var(--color-ink-400); }

/* ──────────────────────────────────────────────────────────────────────────
   Reveal animation for the dashboard's first paint. Honour reduced motion.
   ────────────────────────────────────────────────────────────────────────── */
@keyframes glass-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.glass-rise {
  animation: glass-rise 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Tighter form rows. */
.form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Card section heading. */
.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px 10px 18px;
}
.section-heading h2 {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink-300);
  margin: 0;
}
.section-heading .accessory {
  font-size: 11px;
  color: var(--color-ink-400);
  display: flex;
  align-items: center;
  gap: 10px;
}

.empty {
  padding: 24px;
  color: var(--color-ink-400);
  font-style: italic;
  text-align: center;
}

/* ──────────────────────────────────────────────────────────────────────────
   App-shell classes (rail + main + topbar + content). Unlayered so Tailwind
   v4 does not purge them; they consume only existing color and radius tokens
   so light + dark both resolve. Ports the stats shell skeleton (stats- classes
   renamed to rmp-).
   ────────────────────────────────────────────────────────────────────────── */
.rmp-app {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: var(--color-ink-950);
  color: var(--color-ink-100);
}

.rmp-rail {
  width: 248px;
  background: var(--color-surface-1);
  border-right: 1px solid var(--color-stroke);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 100%;
  overflow-y: auto;
}
.rmp-desktop-nav { display: flex; }
@media (max-width: 1023px) {
  .rmp-desktop-nav { display: none; }
}

/* Brand lockup */
.rmp-rail-brand {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-stroke);
  min-height: 56px;
}
.rmp-rail-mark {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: linear-gradient(135deg, #ed4abf 0%, #9b4dff 50%, #5ad8e6 100%);
  flex-shrink: 0;
}
.rmp-rail-wordmark {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.rmp-rail-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-ink-50);
  line-height: 1.1;
}
.rmp-rail-tag {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-ink-400);
  line-height: 1.3;
}

/* Vitals block — always-on glanceable signal */
.rmp-vitals {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-bottom: 1px solid var(--color-stroke);
}
.rmp-vital-sync {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--color-ink-300);
  font-variant-numeric: tabular-nums;
}
.rmp-vital-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  flex-shrink: 0;
}
.rmp-vital-dot.ok { background: var(--color-ok); }
.rmp-vital-dot.warn { background: var(--color-warn); }
.rmp-vital-dot.err { background: var(--color-err); }
.rmp-vital-dot.pulse { animation: pulse-dot 1.8s ease-in-out infinite; }

.rmp-vital-big {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.rmp-vital-big-cell { display: flex; flex-direction: column; gap: 3px; }
.rmp-vital-big-label {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-400);
}
.rmp-vital-big-num {
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-100);
}
.rmp-vital-big-num.failed-nonzero { color: var(--color-err); }
.rmp-vital-big-num.running-nonzero { color: var(--color-warn); }

.rmp-vital-counts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px 14px;
}
.rmp-vital-count { display: flex; flex-direction: column; gap: 1px; }
.rmp-vital-count-label {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-400);
}
.rmp-vital-count-num {
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-200);
}

.rmp-vital-runtime {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.rmp-vital-runtime-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.rmp-vital-runtime-label {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-400);
  flex-shrink: 0;
}
.rmp-vital-runtime-value {
  font-size: 11px;
  color: var(--color-ink-200);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.rmp-vital-runtime-value.mono { font-family: var(--font-mono); font-size: 10.5px; }

/* Nav */
.rmp-nav {
  flex: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rmp-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-ink-300);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: color 150ms ease, background 150ms ease;
}
.rmp-nav-item:hover {
  color: var(--color-ink-100);
  background: var(--color-surface-2);
}
.rmp-nav-item[data-active="true"] {
  color: var(--color-accent);
  background: var(--color-accent-muted);
  position: relative;
}
.rmp-nav-item[data-active="true"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 18px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--color-accent);
  transform: translateY(-50%);
}
.rmp-nav-item[data-locked="true"] { opacity: 0.5; }
.rmp-nav-item-icon { flex-shrink: 0; display: inline-flex; }
.rmp-nav-item-label { flex: 1; min-width: 0; }
.rmp-nav-item-lock { flex-shrink: 0; display: inline-flex; color: var(--color-ink-400); }

/* Footer */
.rmp-rail-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--color-stroke);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.rmp-rail-footer-tag {
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-500);
  font-variant-numeric: tabular-nums;
}

/* Main pane */
.rmp-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}
.rmp-topbar {
  height: 56px;
  background: var(--color-surface-1);
  border-bottom: 1px solid var(--color-stroke);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  flex-shrink: 0;
}
.rmp-topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.rmp-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rmp-page-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-ink-50);
  margin: 0;
}
.rmp-mobile-menu-btn {
  display: none;
  background: transparent;
  border: none;
  color: var(--color-ink-200);
  padding: 4px;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
@media (max-width: 1023px) {
  .rmp-mobile-menu-btn { display: inline-flex; }
}

/* Content — the only vertical scroller */
.rmp-content {
  flex: 1;
  overflow-y: auto;
}
.rmp-content-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (max-width: 767px) {
  .rmp-content-inner { padding: 16px; gap: 16px; }
  .rmp-topbar { padding: 0 16px; }
}

/* View panes — all mounted, visibility toggled (state persists, no refetch).
   Base is flex; inactive views get inline display:none. The enter animation
   restarts automatically when an element flips none→flex (CSS animations
   restart when re-entering the render tree) — so it fires on first paint +
   view-switch ONLY, never on the 3s poll (polls never change display). */
.rmp-view { display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 767px) { .rmp-view { gap: 16px; } }

@keyframes rmp-view-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.rmp-view-enter {
  animation: rmp-view-rise 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Trigger bar — slim command row for Operations */
.rmp-trigger-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--color-surface-1);
  border: 1px solid var(--color-stroke);
  border-radius: var(--radius-lg);
  flex-wrap: wrap;
}
.rmp-trigger-bar-status {
  font-size: 11.5px;
  color: var(--color-ink-300);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

/* Activity view — shared trigger status surfaced under the events table so a
   retry fired from this view shows success/error where the button was clicked. */
.rmp-activity-status {
  font-size: 12px;
  color: var(--color-ink-300);
  font-variant-numeric: tabular-nums;
}

/* Mobile drawer */
.rmp-mobile-drawer-overlay {
  position: fixed;
  inset: 0;
  background: oklch(0 0 0 / 45%);
  z-index: 100;
}
.rmp-mobile-drawer {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 280px;
  max-width: 86vw;
  background: var(--color-surface-1);
  border-right: 1px solid var(--color-stroke);
  display: flex;
  flex-direction: column;
  z-index: 101;
  animation: rmp-slide-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Inside the drawer the rail fills and is non-sticky */
.rmp-mobile-drawer .rmp-rail {
  width: 100%;
  position: relative;
  height: 100%;
  border-right: none;
}
@keyframes rmp-slide-in {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
.rmp-drawer-close {
  background: transparent;
  border: none;
  color: var(--color-ink-300);
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  border-radius: var(--radius-sm);
}
.rmp-drawer-close:hover { color: var(--color-ink-100); background: var(--color-surface-2); }

/* Read-only chip */
.rmp-readonly-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  background: var(--color-surface-2);
  color: var(--color-ink-300);
  border: 1px solid var(--color-stroke);
  white-space: nowrap;
}

/* First-run panel (Triage read-only) */
.rmp-firstrun {
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rmp-firstrun-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rmp-firstrun-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink-100);
  margin: 0;
}
.rmp-firstrun-body {
  font-size: 13px;
  color: var(--color-ink-300);
  line-height: 1.6;
  margin: 0;
}
.rmp-firstrun-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 0 0;
  padding: 0;
  list-style: none;
}
.rmp-firstrun-steps li {
  font-size: 12.5px;
  color: var(--color-ink-300);
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}
.rmp-firstrun-steps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--color-accent);
}
.rmp-firstrun-note {
  font-size: 11.5px;
  color: var(--color-ink-400);
  margin: 0;
}

/* ──────────────────────────────────────────────────────────────────────────
   Operations pipeline — unified issue-lifecycle cards. Replaces the old
   working / needs-attention / active-issues tables. Token-only colours so
   both themes resolve; flat (no shadow), full borders (no side-stripe),
   radius capped at var(--radius-lg). State tint via [data-bucket].
   ────────────────────────────────────────────────────────────────────────── */
.rmp-pipeline-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 2px 0;
}
.rmp-pipeline-head-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink-300);
}
.rmp-pipeline-head-count {
  font-size: 11px;
  color: var(--color-ink-400);
}

/* Breakpoint-free responsive grid (impeccable). */
.rmp-card-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}

.rmp-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: var(--color-surface-1);
  border: 1px solid var(--color-stroke);
  transition:
    border-color 160ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rmp-card:hover {
  border-color: color-mix(in oklch, var(--color-ink-400) 30%, var(--color-stroke));
}
.rmp-card[data-bucket="failed"] {
  background: color-mix(in oklch, var(--color-err) 9%, var(--color-surface-1));
  border-color: color-mix(in oklch, var(--color-err) 22%, var(--color-stroke));
}
.rmp-card[data-bucket="running"] {
  border-color: color-mix(in oklch, var(--color-accent) 22%, var(--color-stroke));
}

.rmp-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.rmp-card-id {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.rmp-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--color-ink-200);
}
.rmp-card-meta > :not(:first-child)::before {
  content: "·";
  margin: 0 8px;
  color: var(--color-ink-500);
}
.rmp-card-meta-dim {
  color: var(--color-ink-200);
}

.rmp-card-error {
  margin-top: 0;
  max-width: none;
}
.rmp-card-actions {
  display: flex;
  gap: 8px;
}

/* Lifecycle stepper — horizontal dot/segment/label track. Equal-width cells
   keep dot centres evenly spaced; each cell's connector is absolutely placed
   from its dot centre to the next, and the dot paints over it. */
.rmp-step {
  display: flex;
  align-items: flex-start;
}
.rmp-step-cell {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.rmp-step-seg {
  position: absolute;
  top: 4px;
  left: 50%;
  width: 100%;
  height: 1px;
  background: var(--color-stroke);
}
.rmp-step-seg[data-state="complete"] {
  background: var(--color-accent);
}
.rmp-step-node {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  box-sizing: border-box;
  flex-shrink: 0;
}
.rmp-step-node[data-state="complete"] {
  background: var(--color-accent);
}
.rmp-step-node[data-state="current"] {
  background: var(--color-surface-1);
  border: 2px solid var(--color-accent);
}
.rmp-step-node[data-state="failed"] {
  background: var(--color-err);
}
.rmp-step-node[data-state="pending"] {
  background: var(--color-surface-1);
  border: 1px solid var(--color-ink-500);
}
.rmp-step-node[data-live="true"] {
  animation: pulse-dot 1.8s ease-in-out infinite;
}
.rmp-step-label {
  max-width: 100%;
  font-size: 10.5px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-ink-200);
}
.rmp-step-label[data-reached="true"] {
  color: var(--color-ink-200);
}

/* First-load skeleton — calm opacity pulse, never a spinner. */
@keyframes rmp-skeleton {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.rmp-card-skeleton {
  height: 138px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-stroke);
  background: var(--color-surface-1);
  animation: rmp-skeleton 1.8s ease-in-out infinite;
}

/* Teaching empty state. */
.rmp-pipeline-empty {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 32px 20px;
  text-align: center;
}
.rmp-pipeline-empty-title {
  font-size: 13px;
  color: var(--color-ink-300);
}
.rmp-pipeline-empty-sub {
  font-size: 12px;
  color: var(--color-ink-400);
}

@media (prefers-reduced-motion: reduce) {
  .rmp-nav-item,
  .rmp-mobile-menu-btn,
  .rmp-drawer-close,
  .rmp-readonly-chip { transition: none; }
  .rmp-mobile-drawer,
  .rmp-view-enter { animation: none; }
  .rmp-vital-dot.pulse { animation: none; }
  .rmp-card { transition: none; }
  .rmp-card-skeleton,
  .rmp-step-node[data-live="true"] { animation: none; }
}