/* ============================================================
   engage-runmode.css — Engage "Run Mode" board.

   Spec:   docs/superpowers/specs/2026-08-04-engage-run-mode-design.md
   Values: docs/superpowers/specs/2026-08-04-engage-run-mode/HANDOFF.md
   Target: docs/superpowers/specs/2026-08-04-engage-run-mode/target-run-mode.png

   Everything is scoped under #page-engage so nothing here can leak into
   another pod's surface.
   ============================================================ */

#page-engage {
  /* Values the design uses that the Hub does not already define as tokens. */
  --rm-track: #242424;      /* progress-bar track, scrollbar thumb */
  --rm-divider: #212121;    /* list-row divider, one step softer than --border */
  --rm-row-done: #0f130f;   /* 4%-tinted complete row */
  --rm-row-active: #171307; /* 4%-tinted active row */
  --rm-next-1: #b8b8b8;     /* up-next de-emphasis ramp */
  --rm-next-2: #6e6e6e;
  --rm-next-3: #4e4e4e;
  --rm-green: #6abf7b;
  --rm-red: #d96b6b;
}

#page-engage [class^="eng-rm-"],
#page-engage [class*=" eng-rm-"] { box-sizing: border-box; }

/* Every numeric on this board is compared against its neighbours (counts,
   clocks, block sizes), so they all get tabular figures. */
#page-engage .eng-rm-ring-n,
#page-engage .eng-rm-ring-cap,
#page-engage .eng-rm-duenow,
#page-engage .eng-rm-blockof,
#page-engage .eng-rm-list-head b,
#page-engage .eng-rm-serving b,
#page-engage .eng-rm-sub,
#page-engage .eng-rm-meta .v { font-variant-numeric: tabular-nums; }

/* ── Page header ─────────────────────────────────────────────────────────── */

.eng-rm-header {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 13px; border-bottom: 1px solid var(--border, #2c2c2c);
}
.eng-rm-head-left { display: flex; gap: 13px; align-items: center; }
.eng-rm-pod-tile {
  width: 40px; height: 40px; border-radius: 9px; flex: none; display: grid; place-items: center;
  background: linear-gradient(135deg, #c19a2c, #d4ae52 50%, #b8962e);
}
.eng-rm-pod-tile svg { width: 19px; height: 19px; }
.eng-rm-title-stack { display: flex; flex-direction: column; gap: 5px; }
.eng-rm-title-stack h1 {
  margin: 0; font: 800 24px/1 var(--sans, 'Manrope', system-ui, sans-serif);
  letter-spacing: -.025em; color: var(--white, #f5f5f5);
}
.eng-rm-eyebrow {
  font: 500 9.5px/1 var(--mono, 'JetBrains Mono', monospace);
  letter-spacing: .15em; color: var(--muted2, #5e5e5e);
}
.eng-rm-eyebrow b { color: var(--gold-lt, #d4ae52); font-weight: 500; }

.eng-rm-head-right { display: flex; align-items: center; gap: 16px; }

/* Label sits INLINE to the left of the control, per the handoff. Stacking it
   made this cluster taller than the tab pill beside it, so the select rode low. */
.eng-rm-loc { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.eng-rm-loc-label {
  font: 500 9px/1 var(--mono, 'JetBrains Mono', monospace);
  letter-spacing: .14em; color: var(--muted2, #5e5e5e);
}
/* The select stays a NATIVE select. engage.js binds its change handler by id and
   ensureLocOptions() no-ops once options exist, so replacing it with a custom
   control — or re-rendering it — would break location filtering permanently. */
.eng-rm-select-wrap { position: relative; }
.eng-rm-select-wrap::after {
  content: '▾'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font: 10px/1 var(--mono, 'JetBrains Mono', monospace); color: #b8962e; pointer-events: none;
  right: 12px;
}
#page-engage .eng-loc-filter {
  appearance: none; -webkit-appearance: none;
  background: var(--bg-soft, #131313); border: 1px solid var(--border, #2c2c2c);
  border-radius: 6px;
  /* 32px of right padding, with the caret sitting 12px in: enough that the
     longest clinic name never runs under the arrow. */
  padding: 7px 32px 7px 11px;
  font: 500 10.5px/1 var(--sans, 'Manrope', system-ui, sans-serif); color: var(--text, #ededed);
}

.eng-rm-hold { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.eng-rm-hold input {
  width: 12px; height: 12px; margin: 0; accent-color: #b8962e;
  border: 1px solid #3a3a3a; border-radius: 3px; background: var(--bg, #0a0a0a);
}
.eng-rm-hold span {
  font: 500 9px/1 var(--mono, 'JetBrains Mono', monospace);
  letter-spacing: .13em; color: var(--muted, #8a8a8a);
}

.eng-rm-head-div { width: 1px; height: 26px; background: var(--border, #2c2c2c); flex: none; }

.eng-rm-acting { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.eng-rm-acting-label {
  font: 500 8.5px/1 var(--mono, 'JetBrains Mono', monospace);
  letter-spacing: .18em; color: var(--muted2, #5e5e5e);
}
.eng-rm-acting-name {
  font: 700 12.5px/1 var(--mono, 'JetBrains Mono', monospace); color: var(--gold-lt, #d4ae52);
}

/* The Run Mode header carries the tab bar; engage.js renders the buttons into it. */
#page-engage .eng-rm-head-right .eng-tabs {
  background: var(--bg-soft, #131313); border: 1px solid var(--border, #2c2c2c);
  border-radius: 7px; padding: 2px; display: flex; gap: 2px;
}

/* ── Scrollbars ──────────────────────────────────────────────────────────────
   Board-wide. The Hub's defaults are too bright against #0a0a0a. */

#page-engage *::-webkit-scrollbar { width: 9px; height: 9px; }
#page-engage *::-webkit-scrollbar-track { background: transparent; }
#page-engage *::-webkit-scrollbar-thumb {
  background: var(--rm-track, #242424); border-radius: 5px;
  border: 2px solid transparent; background-clip: content-box;
}
#page-engage *::-webkit-scrollbar-thumb:hover { background: #3a3a3a; background-clip: content-box; }
#page-engage *::-webkit-scrollbar-corner { background: transparent; }
#page-engage * { scrollbar-width: thin; scrollbar-color: var(--rm-track, #242424) transparent; }

/* ── Board grid ──────────────────────────────────────────────────────────── */

.eng-rm-board {
  display: grid; grid-template-columns: 278px 1fr; gap: 14px;
  margin-top: 14px; height: 712px;
}
.eng-rm-left { display: flex; flex-direction: column; gap: 12px; min-height: 0; }

/* A class-level `display` beats the UA [hidden] rule, and .worklist sets
   display:flex — so the hidden legacy column kept its grid cell and pushed
   #eng-cardSlot onto a second row at 278px wide. Force it out of flow. */
.eng-rm-board > [hidden] { display: none !important; }

/* A grid item's default min-width:auto is its CONTENT width, and the action bar
   is seven non-wrapping buttons — so the focus pane refused to shrink and pushed
   the whole page into a horizontal scroll at 1024px. Let the column shrink, and
   let the bar scroll inside itself if it truly cannot fit. Scrolling is not
   wrapping: the single-row rule still holds, and the PAGE never scrolls
   sideways, which matters more. */
.eng-rm-board > * { min-width: 0; }
.eng-rm-focus { min-width: 0; }
.eng-rm-actions { overflow-x: auto; }
.eng-rm-thread-cell { min-width: 0; }

/* ── Progress ring card ──────────────────────────────────────────────────── */

.eng-rm-ring-card {
  background: var(--bg-soft, #131313); border: 1px solid var(--border, #2c2c2c);
  border-radius: 12px; padding: 16px 15px; position: relative; overflow: hidden; flex: none;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
/* Always on, unlike the Hub's hover-in hairline: this card is the primary focus
   object of the board, so the motif stays lit at rest. */
.eng-rm-hairline {
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, #8a6e20 40%, #8a6e20 60%, transparent);
}
.eng-rm-status { align-self: stretch; display: flex; align-items: center; gap: 7px; }
.eng-rm-status > * { white-space: nowrap; flex: none; }
.eng-rm-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--rm-green, #6abf7b); box-shadow: 0 0 8px var(--rm-green, #6abf7b);
  animation: pulse-anim 2s ease-in-out infinite;
}
.eng-rm-live {
  font: 600 9px/1 var(--mono, 'JetBrains Mono', monospace);
  letter-spacing: .16em; color: var(--rm-green, #6abf7b);
}
.eng-rm-blockof, .eng-rm-duenow {
  font: 500 9px/1 var(--mono, 'JetBrains Mono', monospace);
  letter-spacing: .12em; color: var(--muted2, #5e5e5e);
}
.eng-rm-duenow b { font-weight: 700; color: var(--gold-lt, #d4ae52); }
.eng-rm-spacer { flex: 1 !important; }

.eng-rm-ring { width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; }
.eng-rm-ring-in {
  width: 106px; height: 106px; border-radius: 50%; background: var(--bg-soft, #131313);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
.eng-rm-ring-n {
  font: 800 30px/1 var(--sans, 'Manrope', system-ui, sans-serif);
  letter-spacing: -.03em; color: var(--white, #f5f5f5);
}
.eng-rm-ring-cap {
  font: 500 9px/1 var(--mono, 'JetBrains Mono', monospace);
  letter-spacing: .13em; color: var(--muted2, #5e5e5e);
}
.eng-rm-ring-foot {
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
  font: 500 10px/1.4 var(--mono, 'JetBrains Mono', monospace); letter-spacing: .08em;
  color: var(--muted2, #5e5e5e);
}
.eng-rm-ring-foot b { font-weight: 600; color: var(--gold-lt, #d4ae52); }

/* ── Block list ──────────────────────────────────────────────────────────── */

.eng-rm-list {
  background: var(--surface, #181818); border: 1px solid var(--border, #2c2c2c);
  border-radius: 12px; overflow: hidden; display: flex; flex-direction: column;
  min-height: 0; flex: 1;
}
.eng-rm-list-head {
  padding: 10px 13px; border-bottom: 1px solid var(--border, #2c2c2c);
  display: flex; align-items: center; justify-content: space-between;
}
.eng-rm-list-head > * { white-space: nowrap; flex: none; }
.eng-rm-list-head span {
  font: 500 9px/1 var(--mono, 'JetBrains Mono', monospace);
  letter-spacing: .16em; color: var(--muted, #8a8a8a);
}
/* The 246 total is retained but demoted — it is context, not the work unit. */
.eng-rm-list-head b {
  font: 700 9.5px/1 var(--mono, 'JetBrains Mono', monospace); color: var(--muted2, #5e5e5e);
}
.eng-rm-blocks { overflow-y: auto; }

.eng-rm-block {
  display: flex; align-items: center; gap: 10px; padding: 10px 13px;
  border-bottom: 1px solid var(--rm-divider, #212121);
  border-left: 3px solid var(--border, #2c2c2c);
}
.eng-rm-block.complete { border-left-color: var(--rm-green, #6abf7b); background: var(--rm-row-done, #0f130f); }
.eng-rm-block.active   { border-left-color: var(--gold-lt, #d4ae52); background: var(--rm-row-active, #171307); }
.eng-rm-block.upcoming { cursor: pointer; }
.eng-rm-block.upcoming:hover { background: var(--surface2, #202020); }

.eng-rm-mark {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font: 700 8px/1 var(--mono, 'JetBrains Mono', monospace);
}
.eng-rm-mark.done { background: rgba(106,191,123,.16); border: 1px solid rgba(106,191,123,.5); }
.eng-rm-mark.done svg { width: 9px; height: 9px; }
.eng-rm-mark.active { border: 1px solid var(--gold-dim, #8a6e20); background: rgba(184,150,46,.16); color: var(--gold-lt, #d4ae52); }
.eng-rm-mark.upcoming { border: 1px solid #3a3a3a; color: var(--muted2, #5e5e5e); }

.eng-rm-block-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.eng-rm-block-title {
  font: 600 11.5px/1 var(--sans, 'Manrope', system-ui, sans-serif);
  color: #b8b8b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.eng-rm-block.complete .eng-rm-block-title { color: var(--muted, #8a8a8a); text-decoration: line-through; }
.eng-rm-block.active .eng-rm-block-title { font-weight: 700; color: var(--white, #f5f5f5); }
.eng-rm-sub {
  font: 500 8.5px/1 var(--mono, 'JetBrains Mono', monospace);
  letter-spacing: .08em; color: var(--muted2, #5e5e5e);
}
.eng-rm-bar { height: 4px; border-radius: 2px; background: var(--rm-track, #242424); overflow: hidden; }
.eng-rm-bar i { display: block; height: 100%; background: linear-gradient(90deg, #8a6e20, #d4ae52); }

/* ── Pod on shift ────────────────────────────────────────────────────────── */

.eng-rm-pod {
  margin-top: auto; padding: 11px 13px; border-top: 1px solid var(--border, #2c2c2c);
  display: flex; flex-direction: column; gap: 7px; flex: none;
}
.eng-rm-pod-label {
  font: 500 8.5px/1 var(--mono, 'JetBrains Mono', monospace);
  letter-spacing: .15em; color: var(--muted2, #5e5e5e);
}
.eng-rm-pod-row { display: flex; align-items: center; gap: 8px; }
.eng-rm-av {
  width: 19px; height: 19px; border-radius: 50%; flex: none; display: grid; place-items: center;
  border: 1px solid #3a3a3a;
  font: 700 8px/1 var(--mono, 'JetBrains Mono', monospace); color: var(--muted, #8a8a8a);
}
.eng-rm-av.self { border-color: var(--gold-dim, #8a6e20); background: rgba(184,150,46,.16); color: var(--gold-lt, #d4ae52); }
.eng-rm-pod-name { flex: 1; font: 500 10px/1 var(--mono, 'JetBrains Mono', monospace); color: var(--muted, #8a8a8a); }
.eng-rm-pod-row .eng-rm-av.self ~ .eng-rm-pod-name { color: var(--text, #ededed); }
.eng-rm-pod-n { font: 700 10px/1 var(--mono, 'JetBrains Mono', monospace); color: var(--muted, #8a8a8a); }

.eng-rm-empty {
  font: 500 10px/1.5 var(--mono, 'JetBrains Mono', monospace);
  letter-spacing: .06em; color: var(--muted2, #5e5e5e); text-align: center;
}
.eng-rm-empty.pad { padding: 24px 13px; }

/* ── Focus pane ──────────────────────────────────────────────────────────── */

.eng-rm-focus {
  background: var(--surface, #181818); border: 1px solid var(--border, #2c2c2c);
  border-radius: 12px; display: flex; flex-direction: column;
  overflow: hidden; position: relative; min-height: 0; height: 100%;
}

/* Now-serving strip */
.eng-rm-serving {
  padding: 9px 18px; background: var(--bg-soft, #131313);
  border-bottom: 1px solid var(--border, #2c2c2c);
  display: flex; align-items: center; gap: 9px;
}
.eng-rm-serving .lbl {
  font: 500 9px/1 var(--mono, 'JetBrains Mono', monospace);
  letter-spacing: .15em; color: var(--muted2, #5e5e5e); white-space: nowrap; flex: none;
}
.eng-rm-serving b {
  font: 700 9px/1 var(--mono, 'JetBrains Mono', monospace);
  letter-spacing: .1em; color: var(--gold-lt, #d4ae52); white-space: nowrap; flex: none;
}
.eng-rm-serving .segs { flex: 1; display: flex; gap: 3px; min-width: 0; }
.eng-rm-serving .segs i { flex: 1; height: 4px; border-radius: 2px; background: var(--border, #2c2c2c); }
.eng-rm-serving .segs i.done { background: var(--rm-green, #6abf7b); }
.eng-rm-serving .segs i.cur  { background: var(--gold-lt, #d4ae52); box-shadow: 0 0 8px rgba(184,150,46,.6); }
.eng-rm-serving .upnext { display: flex; align-items: center; gap: 6px; flex: none; }
.eng-rm-serving .upnext span { font: 600 10px/1 var(--sans, 'Manrope', system-ui, sans-serif); }
.eng-rm-serving .upnext .n1 { color: var(--rm-next-1, #b8b8b8); }
.eng-rm-serving .upnext .n2 { color: var(--rm-next-2, #6e6e6e); }
.eng-rm-serving .upnext .n3 { color: var(--rm-next-3, #4e4e4e); }
.eng-rm-serving .upnext .sep { font: 9px/1 var(--mono, 'JetBrains Mono', monospace); color: #3a3a3a; }

/* Lead header */
.eng-rm-lead-head {
  padding: 18px 22px 15px; border-bottom: 1px solid var(--border, #2c2c2c);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
}
.eng-rm-lead-left { display: flex; flex-direction: column; gap: 11px; min-width: 0; }
/* flex-end, not center: the chips' bottom edges line up with the bottom of the
   28px lead name rather than floating against its middle. */
.eng-rm-name-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.eng-rm-name {
  font: 700 28px/1 var(--sans, 'Manrope', system-ui, sans-serif);
  letter-spacing: -.03em; color: var(--white, #f5f5f5);
}
/* Given the same chip treatment as CALL TOUCH, but neutral so it reads as
   context rather than competing with the gold touch chip or the red hold. */
.eng-rm-loc-chip {
  font: 700 9px/1 var(--mono, 'JetBrains Mono', monospace);
  letter-spacing: .09em; color: var(--muted, #8a8a8a);
  border: 1px solid #3a3a3a; background: var(--surface2, #202020);
  padding: 5px 8px; border-radius: 4px; white-space: nowrap;
}
.eng-rm-chip {
  font: 700 9px/1 var(--mono, 'JetBrains Mono', monospace);
  letter-spacing: .09em; padding: 5px 8px; border-radius: 4px; white-space: nowrap;
}
.eng-rm-chip.hold  { color: var(--rm-red, #d96b6b); border: 1px solid rgba(217,107,107,.4); background: rgba(217,107,107,.1); }
.eng-rm-chip.touch { color: var(--gold-lt, #d4ae52); border: 1px solid rgba(184,150,46,.32); background: rgba(184,150,46,.1); }

.eng-rm-meta { display: flex; gap: 26px; flex-wrap: wrap; }
.eng-rm-meta-cell { display: flex; flex-direction: column; gap: 6px; }
.eng-rm-meta .k {
  font: 500 8.5px/1 var(--mono, 'JetBrains Mono', monospace);
  letter-spacing: .14em; color: var(--muted2, #5e5e5e);
}
.eng-rm-meta .v {
  font: 500 10.5px/1 var(--mono, 'JetBrains Mono', monospace); color: var(--text, #ededed);
}
.eng-rm-meta .v.overdue { color: var(--rm-red, #d96b6b); font-weight: 700; }
.eng-rm-meta .v.gold { color: var(--gold-lt, #d4ae52); }

.eng-rm-cta-row { display: flex; align-items: center; gap: 9px; flex: none; }
.eng-rm-cta {
  border-radius: 7px; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px;
}
.eng-rm-cta.ghost {
  font: 700 10.5px/1 var(--mono, 'JetBrains Mono', monospace); letter-spacing: .08em;
  color: var(--gold-lt, #d4ae52); background: rgba(184,150,46,.08);
  border: 1px solid var(--gold-dim, #8a6e20); padding: 13px 17px;
}
.eng-rm-cta.ghost:hover { background: rgba(184,150,46,.16); border-color: var(--gold, #b8962e); }
.eng-rm-cta.ghost svg { width: 12px; height: 12px; }
.eng-rm-cta.primary {
  font: 700 11px/1 var(--mono, 'JetBrains Mono', monospace); letter-spacing: .13em;
  color: #141005; background: linear-gradient(135deg, #c19a2c, #d4ae52 50%, #b8962e);
  border: 1px solid var(--gold, #b8962e); padding: 13px 28px;
  box-shadow: 0 2px 16px rgba(184,150,46,.2);
}
.eng-rm-cta.primary:hover { filter: brightness(1.08); }

/* Body grid */
.eng-rm-body { flex: 1; display: grid; grid-template-columns: 1fr 250px; min-height: 0; }
.eng-rm-thread-cell { display: flex; flex-direction: column; padding: 14px 20px 0; min-height: 0; }
.eng-rm-thread-head { display: flex; justify-content: space-between; margin-bottom: 9px; }
.eng-rm-thread-head span {
  font: 500 9px/1 var(--mono, 'JetBrains Mono', monospace);
  letter-spacing: .16em; color: var(--muted, #8a8a8a);
}
.eng-rm-thread-head .hint { letter-spacing: .1em; color: var(--muted2, #5e5e5e); }

/* Dossier rail */
.eng-rm-dossier {
  border-left: 1px solid var(--border, #2c2c2c); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 14px; overflow-y: auto;
}
.eng-rm-sec {
  font: 500 8.5px/1 var(--mono, 'JetBrains Mono', monospace);
  letter-spacing: .16em; color: var(--muted2, #5e5e5e);
}
.eng-rm-div { height: 1px; background: var(--border, #2c2c2c); }
.eng-rm-phone { font: 500 11.5px/1 var(--mono, 'JetBrains Mono', monospace); color: var(--text, #ededed); }
.eng-rm-email { font: 400 11px/1 var(--sans, 'Manrope', system-ui, sans-serif); color: var(--muted, #8a8a8a); }
.eng-rm-nodata { font: 500 11px/1 var(--mono, 'JetBrains Mono', monospace); color: var(--muted2, #5e5e5e); }
.eng-rm-cov b {
  font: 700 19px/1 var(--sans, 'Manrope', system-ui, sans-serif);
  letter-spacing: -.02em; color: var(--white, #f5f5f5);
}

/* ── Action bar ──────────────────────────────────────────────────────────── */

.eng-rm-actions {
  display: flex; gap: 7px; flex-wrap: nowrap; align-items: center;
  padding: 13px 20px 15px; border-top: 1px solid var(--border, #2c2c2c);
  background: var(--bg-soft, #131313);
}
.eng-rm-act {
  white-space: nowrap; flex: none; border-radius: 6px; padding: 11px 15px; cursor: pointer;
  font: 700 10.5px/1 var(--mono, 'JetBrains Mono', monospace); letter-spacing: .07em;
}
.eng-rm-act.gold {
  color: #141005; background: linear-gradient(145deg, #d4ae52, #b8962e);
  border: 1px solid var(--gold, #b8962e); box-shadow: 0 2px 16px rgba(184,150,46,.2);
}
.eng-rm-act.gold:hover { filter: brightness(1.08); }
.eng-rm-act.neutral {
  font-weight: 500; letter-spacing: .04em; color: var(--text, #ededed);
  background: var(--surface2, #202020); border: 1px solid #3a3a3a; padding: 11px 13px;
}
.eng-rm-act.neutral:hover { border-color: var(--muted, #8a8a8a); }
.eng-rm-act.es {
  color: #b3e0c2; background: rgba(74,158,99,.1);
  border: 1px solid rgba(106,191,123,.55); padding: 11px 13px; letter-spacing: .05em;
}
.eng-rm-act.es:hover { background: rgba(74,158,99,.18); }
.eng-rm-act.danger {
  font-weight: 500; letter-spacing: .04em; color: var(--rm-red, #d96b6b);
  background: transparent; border: 1px solid rgba(217,107,107,.5); padding: 11px 14px;
}
.eng-rm-act.danger:hover { background: rgba(217,107,107,.1); }
.eng-rm-act-spacer { flex: 1; min-width: 8px; }

/* ── Thread ──────────────────────────────────────────────────────────────── */

#page-engage .eng-rm-thread-cell .eng-thread {
  background: var(--bg, #0a0a0a); border: 1px solid #3a3a3a; border-radius: 8px; padding: 14px;
  height: 290px; min-height: 160px; max-height: 70vh; overflow-y: auto; resize: vertical;
  display: flex; flex-direction: column; gap: 11px;
}

/* ── Tooltips ────────────────────────────────────────────────────────────── */

.eng-rm-tip {
  position: fixed; z-index: 9999; max-width: 260px; pointer-events: none;
  background: var(--surface2, #202020); border: 1px solid #3a3a3a; border-radius: 6px;
  padding: 8px 11px; box-shadow: 0 8px 24px rgba(0,0,0,.5); color: var(--text, #ededed);
  font: 400 11.5px/1.45 var(--sans, 'Manrope', system-ui, sans-serif); text-wrap: pretty;
  animation: engRmFadeUp .15s cubic-bezier(0.22,1,0.36,1);
}
@keyframes engRmFadeUp {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .eng-rm-tip { animation: none; } }

/* ── Advance loop ────────────────────────────────────────────────────────── */

/* A background transition, so the sweep animates only when the angle really
   changes — re-rendering with the same value stays silent. */
.eng-rm-ring { transition: background .6s cubic-bezier(0.22,1,0.36,1); }
/* The focus pane re-renders on every advance, so the cross-fade comes free. */
.eng-rm-focus { animation: engRmFadeUp .3s cubic-bezier(0.22,1,0.36,1); }
.eng-rm-block { transition: background .35s cubic-bezier(0.22,1,0.36,1),
                            border-left-color .35s cubic-bezier(0.22,1,0.36,1); }
/* Work surfaces, not tiles: the Hub's standard card lift is suppressed here. */
#page-engage .eng-rm-ring-card:hover,
#page-engage .eng-rm-list:hover,
#page-engage .eng-rm-focus:hover { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .eng-rm-ring, .eng-rm-block { transition: none; }
  .eng-rm-focus { animation: none; }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1279px) {
  .eng-rm-body { grid-template-columns: 1fr 210px; }
  .eng-rm-name { font-size: 24px; }
  .eng-rm-act { padding: 11px 11px; }
  .eng-rm-act.neutral, .eng-rm-act.es, .eng-rm-act.danger { padding: 11px 11px; }
}
@media (max-width: 1023px) {
  .eng-rm-board { grid-template-columns: 240px 1fr; }
  .eng-rm-body { grid-template-columns: 1fr; }
  .eng-rm-dossier {
    border-left: 0; border-top: 1px solid var(--border, #2c2c2c);
    flex-direction: row; flex-wrap: wrap; gap: 18px; align-items: baseline;
  }
  .eng-rm-dossier .eng-rm-div { display: none; }
}
@media (max-width: 879px) {
  .eng-rm-board { grid-template-columns: 1fr; height: auto; }
  .eng-rm-left { flex-direction: column; }
  .eng-rm-actions { flex-wrap: wrap; }
}

/* Claimed-by-another banner. The old card had one; the redesign dropped it and a
   rep saw only a missing CLAIM button with no explanation. */
.eng-rm-claimed {
  padding: 8px 18px; background: rgba(217,107,107,.1);
  border-bottom: 1px solid rgba(217,107,107,.4);
  font: 700 9.5px/1 var(--mono, 'JetBrains Mono', monospace);
  letter-spacing: .09em; color: var(--rm-red, #d96b6b);
}

.eng-rm-cleared {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 7px; text-align: center;
}
.eng-rm-cleared .t {
  font: 700 15px/1 var(--sans, 'Manrope', system-ui, sans-serif); color: var(--white, #f5f5f5);
}
.eng-rm-cleared .s {
  font: 500 9.5px/1 var(--mono, 'JetBrains Mono', monospace);
  letter-spacing: .12em; color: var(--muted2, #5e5e5e);
}