/* Admin Tools — PM roadmap (#/operations/admin/roadmap). Token-only, no box-shadow. */

/* Queues roadmap: shell content column is full-bleed (iter1a-v3 — no .content-area pad); page chrome aligns to main column edges. */
.content-area:has(> .pg-inset > .oar-wrap) {
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Let the roadmap page fill the shell content column so inner viewports own vertical scroll. */
.pg-inset:has(.oar-wrap) {
  flex: 1;
  min-height: 0;
  gap: var(--s-space-4);
}

.oar-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-4);
  flex: 1;
  min-height: 0;
}

.oar-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.oar-page-footer {
  flex-shrink: 0;
  margin-top: auto;
  padding: var(--s-space-2) var(--s-space-4);
  border-block-start: 1px solid var(--s-color-border-subtle);
}

.oar-page-footer__timestamp {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-caption);
  color: var(--s-color-fg-muted);
}

.oar-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-space-3);
  padding: var(--s-space-2) 0;
  border-bottom: 1px solid var(--s-color-border-subtle);
}

.oar-view-toggle {
  display: inline-flex;
  gap: var(--s-space-1);
  background: var(--s-color-bg-subtle);
  padding: var(--s-space-1);
  border-radius: var(--s-radius-2);
}

.oar-view-toggle button {
  border: none;
  background: transparent;
  color: var(--s-color-fg-muted);
  padding: var(--s-space-1) var(--s-space-3);
  border-radius: var(--s-radius-1);
  font: inherit;
  cursor: pointer;
  transition:
    background var(--s-duration-fast),
    color var(--s-duration-fast);
}

.oar-view-toggle button:hover {
  color: var(--s-color-fg-primary);
}

.oar-view-toggle button.oar-view-toggle--active {
  background: var(--s-color-bg-card);
  color: var(--s-color-fg-primary);
}

.oar-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-2);
  align-items: center;
}

.oar-pill {
  border: 1px solid var(--s-color-border);
  background: var(--s-color-bg-app);
  color: var(--s-color-fg-primary);
  padding: var(--s-space-1) var(--s-space-3);
  border-radius: var(--s-radius-1);
  font: inherit;
  cursor: pointer;
  transition:
    background var(--s-duration-fast),
    border-color var(--s-duration-fast);
}

.oar-pill:hover {
  background: var(--s-color-hover-bg);
}

.oar-pill.oar-pill--active {
  background: var(--s-color-bg-card);
  border-color: var(--s-color-fg-muted);
  color: var(--s-color-fg-primary);
}

.oar-toggle label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-2);
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
  cursor: pointer;
  user-select: none;
}

.oar-kanban {
  display: grid;
  grid-template-columns: repeat(6, minmax(11rem, 1fr));
  gap: var(--s-space-3);
  min-height: 12rem;
  overflow: auto;
}

@media (max-width: 1200px) {
  .oar-kanban {
    grid-template-columns: repeat(3, minmax(10rem, 1fr));
  }
}

.oar-col {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-2);
  min-width: 0;
  background: var(--s-color-bg-subtle);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
  padding: var(--s-space-2);
}

.oar-col h3 {
  margin: 0;
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-muted);
}

.oar-card {
  border: 1px solid var(--s-color-border);
  background: var(--s-color-bg-app);
  border-radius: var(--s-radius-1);
  padding: var(--s-space-2) var(--s-space-3);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: background var(--s-duration-fast);
}

.oar-card:hover {
  background: var(--s-color-hover-bg);
}

.oar-card[data-tier="A"] {
  box-shadow: none;
  padding-left: calc(var(--s-space-3) + var(--s-tier-a-edge-width));
}

.oar-card__id {
  display: block;
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-primary);
}

.oar-card__title {
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
  margin-top: var(--s-space-1);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.oar-card__surfaces {
  display: block;
  margin-top: var(--s-space-2);
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-muted);
  line-height: 1.35;
  word-break: break-word;
}

.oar-toolbar__label {
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
  flex-shrink: 0;
}

.oar-pills--surfaces {
  max-width: 100%;
}

.oar-pill--surface {
  font-size: var(--s-font-size-0);
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oar-surfaces {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-4);
}

.oar-phases {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-4);
}

.oar-batch {
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
  padding: var(--s-space-3);
  background: var(--s-color-bg-panel);
}

.oar-batch h3 {
  margin: 0 0 var(--s-space-2);
  font-size: var(--s-font-size-2);
}

.oar-timeline {
  position: relative;
  padding: var(--s-space-2) 0;
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
}

.oar-timeline__item {
  padding: var(--s-space-2) 0;
  border-left: 2px solid var(--s-color-border);
  padding-left: var(--s-space-3);
  margin-left: var(--s-space-2);
}

.oar-timeline__hint {
  margin-top: var(--s-space-1);
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-muted);
}

.oar-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: var(--s-color-backdrop-scrim);
  z-index: 200;
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
}

.oar-drawer {
  width: min(32rem, 100vw);
  background: var(--s-color-bg-panel);
  border-left: 1px solid var(--s-color-border);
  padding: var(--s-space-4);
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-space-3);
}

/* Briefing peek drawer — width rung (user-resized width applied inline from localStorage). */
@media (min-width: 1024px) and (max-width: 1279px) {
  .oar-drawer-backdrop:has(.oar-briefing-drawer) .oar-briefing-drawer.oar-drawer {
    width: min(480px, 100%);
  }
}

@media (min-width: 1280px) {
  .oar-drawer-backdrop:has(.oar-briefing-drawer) .oar-briefing-drawer.oar-drawer {
    width: min(560px, 100%);
  }
}

.oar-briefing-drawer.oar-drawer {
  position: relative;
  box-sizing: border-box;
  height: 100%;
  max-height: 100vh;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  gap: 0;
}

.oar-briefing-drawer__resize-handle {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: ew-resize;
  z-index: 5;
}

.oar-briefing-drawer__resize-handle:hover,
.oar-briefing-drawer__resize-handle:focus-visible {
  background: var(--s-color-border-strong);
}

.oar-briefing-drawer__inner {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: var(--s-space-4);
  gap: var(--s-space-3);
}

.oar-briefing-drawer__inner--md {
  padding: 0;
  gap: 0;
}

.oar-briefing-drawer__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* Operator surface — block parent scroll chaining + iOS pull-to-refresh
     so dragging the drawer body never bounces the page underneath. */
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 var(--s-space-4) var(--s-space-4);
  box-sizing: border-box;
}

.oar-briefing-drawer__scroll > .oar-briefing-drawer__state {
  flex-shrink: 0;
  margin-top: var(--s-space-3);
}

.oar-briefing-drawer__header-mount {
  flex-shrink: 0;
}

.oar-briefing-drawer__scroll .oar-drawer__header[data-sticky="top"] {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--s-color-bg-panel);
  border-bottom: 1px solid var(--s-color-border-subtle);
  box-shadow: none;
}

.oar-briefing-drawer__scroll .oar-drawer__footer[data-sticky] {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin-top: auto;
  flex-shrink: 0;
  background: var(--s-color-bg-panel);
  border-top: 1px solid var(--s-color-border-subtle);
  box-shadow: none;
  padding: 0;
  /* Sticky footer may reach the viewport bottom when the drawer fills the screen
     (mobile band). Consume safe-area-inset-bottom so iOS home indicator doesn't
     overlap the footer-action buttons. env() returns 0 on non-notched devices. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.oar-briefing-drawer__inner--md .oar-briefing-drawer__body {
  overflow: visible;
  max-height: none;
  padding-top: var(--s-space-2);
  flex: 1 1 auto;
}

.oar-drawer h2 {
  margin: 0;
  font-size: var(--s-font-size-3);
}

.oar-drawer__meta {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
}

.oar-drawer__title {
  margin: 0;
  font-size: var(--s-font-size-2);
  color: var(--s-color-fg-heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oar-drawer__header.oar-drawer__header--compact {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-1);
  align-items: stretch;
}

.oar-drawer__header.oar-drawer__header--compact .oar-drawer__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-space-1);
  color: var(--s-color-fg-muted);
  font-size: var(--s-font-size-0);
}

.oar-drawer__header.oar-drawer__header--compact .oar-drawer__meta {
  color: var(--s-color-fg-soft);
  font-size: var(--s-font-size-0);
}

.oar-drawer__header.oar-drawer__header--compact .oar-drawer__close {
  position: absolute;
  top: var(--s-space-2);
  right: var(--s-space-3);
}

.oar-drawer__header.oar-drawer__header--compact {
  position: relative;
  padding-right: 2.75rem;
}

.oar-drawer-summary {
  margin: 0;
  font-size: var(--s-font-size-1);
  line-height: 1.55;
  color: var(--s-color-fg-primary);
}

.oar-drawer__summary-section {
  margin-bottom: var(--s-space-3);
}

/* Body-section accordions (What to build / Acceptance / Out of scope /
   Pre-spawn / References) — sits in the upper "brief content" zone of the
   drawer. Muted styling distinguishes them from the operational-metadata
   accordions below (Builds / Design discipline / Iteration history / Agent
   payload) which use oar-roadmap-strip. */
.oar-drawer__body-section {
  margin-top: var(--s-space-2);
  padding: var(--s-space-1) 0;
}

.oar-drawer__body-section__summary {
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
  cursor: pointer;
  padding: var(--s-space-1) 0;
}

.oar-drawer__body-section[open] > .oar-drawer__body-section__summary {
  margin-bottom: var(--s-space-1);
}

.oar-drawer__body-section__content {
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-soft);
  padding-left: var(--s-space-3);
}

.oar-drawer__body-section__content > :first-child {
  margin-top: 0;
}

.oar-drawer__body-section__content > :last-child {
  margin-bottom: 0;
}

.oar-drawer__agent-payload__pre {
  margin: var(--s-space-2) 0 0;
  padding: var(--s-space-3);
  overflow-x: auto;
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-0);
  line-height: 1.45;
  color: var(--s-color-fg-muted);
  background: var(--s-color-bg-subtle);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
}

.oar-drawer__agent-payload__pre code {
  white-space: pre-wrap;
  word-break: break-word;
}

.oar-drawer__iter-history__summary {
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-muted);
}

.oar-drawer__footer {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-1);
  width: 100%;
}

.oar-drawer__footer-status {
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-soft);
}

.oar-drawer__primary-action {
  align-self: flex-start;
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-medium);
  color: var(--s-color-fg-primary);
  background: var(--s-color-bg-subtle);
  border: 1px solid var(--s-color-border);
  border-radius: var(--s-radius-1);
  padding: var(--s-space-1) var(--s-space-3);
  cursor: pointer;
}

.oar-drawer__primary-action:hover {
  background: var(--s-color-bg-app);
}

.oar-roadmap-drawer__purpose {
  color: var(--s-color-fg-soft);
}

.oar-roadmap-drawer__sync-hint {
  color: var(--s-color-fg-soft);
  font-size: var(--s-font-size-0);
}

.oar-roadmap-strip__sum,
.oar-brief-body-drawer-sum {
  color: var(--s-color-fg-muted);
}

.oar-drawer__surfaces {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-muted);
  line-height: 1.45;
  word-break: break-word;
}

.oar-drawer__surfaces--empty {
  font-style: italic;
}

.oar-drawer__close {
  align-self: flex-start;
}

.oar-drawer__raw {
  white-space: pre-wrap;
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-0);
  line-height: 1.5;
  color: var(--s-color-fg-primary);
  background: var(--s-color-bg-subtle);
  padding: var(--s-space-3);
  border-radius: var(--s-radius-1);
  border: 1px solid var(--s-color-border-subtle);
}

.oar-empty {
  padding: var(--s-space-5);
  text-align: center;
  color: var(--s-color-fg-muted);
  font-size: var(--s-font-size-1);
}

.oar-group-toggle {
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
}

.oar-group-toggle select {
  font: inherit;
  padding: var(--s-space-1) var(--s-space-2);
  border: 1px solid var(--s-color-border);
  border-radius: var(--s-radius-1);
  background: var(--s-color-bg-app);
  color: var(--s-color-fg-primary);
}

/* ─────────────────────────────────────────────────────────────────────
   RQ-Q: Quick wins — legend, age filter, source colors, surface tag colors.
   Low-chroma OKLCH per calm-UI principle (feedback_calm_ui_principle).
   ───────────────────────────────────────────────────────────────────── */

.oar-age-filter {
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
  padding: var(--s-space-2) var(--s-space-3);
  margin-bottom: var(--s-space-3);
  font-size: var(--s-font-size-1);
}

.oar-age-filter__checkbox {
  cursor: pointer;
  accent-color: var(--s-color-accent-active);
}

.oar-age-filter__label {
  color: var(--s-color-fg-primary);
  cursor: pointer;
}

.oar-age-filter__days {
  font: inherit;
  font-size: var(--s-font-size-1);
  padding: var(--s-space-hair) var(--s-space-2);
  border: 1px solid var(--s-color-border);
  border-radius: var(--s-radius-1);
  background: var(--s-color-bg-app);
  color: var(--s-color-fg-primary);
  cursor: pointer;
}

.oar-age-filter__days:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.oar-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: 1px solid var(--s-color-border);
  border-radius: 50%;
  font-size: var(--s-font-size-density-2);
  font-style: italic;
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-muted);
  cursor: help;
  user-select: none;
  line-height: 1;
}

.oar-info:hover,
.oar-info:focus-visible {
  color: var(--s-color-fg-primary);
  outline: none;
}

.oar-card__head {
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
  margin-bottom: var(--s-space-1);
}

.oar-card__source {
  font-size: var(--s-font-size-0);
  font-weight: var(--s-font-weight-medium);
  padding: var(--s-space-hair) var(--s-space-2);
  border-radius: var(--s-radius-1);
  white-space: nowrap;
}

.oar-src--build {
  background: var(--s-teal-75);
  color: var(--s-teal-850);
}
.oar-src--design {
  background: var(--oar-phase-batch-bg);
  color: var(--oar-phase-batch-fg);
}
.oar-src--testing {
  background: var(--oar-phase-handoff-bg);
  color: var(--oar-phase-handoff-fg);
}
.oar-src--roadmap {
  background: var(--s-green-75);
  color: var(--s-green-850);
}
.oar-src--mock {
  background: var(--s-cream-100);
  color: var(--s-cream-700);
}

/* Event source families (RQ-H part 2) — distinct hue per type, low chroma.
 * Commits don't get their own class here — they reuse the surface-family
 * classes (oar-tag--shell etc.) since commit source is collapsed into the
 * surface tag they touch (Caitlin 2026-04-29: 'commit and commit-legacy
 * tags should be more specific - draw from the other existing ones'). */
.oar-src--brief {
  background: var(--oar-phase-brief-bg);
  color: var(--oar-phase-brief-fg);
}
.oar-src--batch {
  background: var(--oar-phase-batch-bg);
  color: var(--oar-phase-batch-fg);
}
.oar-src--handoff {
  background: var(--oar-phase-handoff-bg);
  color: var(--oar-phase-handoff-fg);
}
.oar-src--lineage {
  background: var(--oar-phase-feature-bg);
  color: var(--oar-phase-feature-fg);
}
.oar-src--decision {
  background: var(--oar-phase-synthesized-bg);
  color: var(--oar-phase-synthesized-fg);
}
.oar-src--workunit {
  background: var(--oar-phase-commit-bg);
  color: var(--oar-phase-commit-fg);
}

/* Active-state pill highlights for event sources */
.oar-pill.oar-src--brief.oar-pill--active { background: var(--oar-pill-src-brief-bg); color: var(--oar-pill-src-brief-fg); }
.oar-pill.oar-src--batch.oar-pill--active { background: var(--oar-pill-src-batch-bg); color: var(--oar-pill-src-batch-fg); }
.oar-pill.oar-src--handoff.oar-pill--active { background: var(--oar-pill-src-handoff-bg); color: var(--oar-pill-src-handoff-fg); }
.oar-pill.oar-src--lineage.oar-pill--active { background: var(--oar-pill-src-lineage-bg); color: var(--oar-pill-src-lineage-fg); }
.oar-pill.oar-src--decision.oar-pill--active { background: var(--oar-pill-src-decision-bg); color: var(--oar-pill-src-decision-fg); }
.oar-pill.oar-src--workunit.oar-pill--active { background: var(--oar-pill-src-workunit-bg); color: var(--oar-pill-src-workunit-fg); }
.oar-pill.oar-tag--shell.oar-pill--active { background: var(--oar-pill-tag-shell-bg); color: var(--oar-pill-tag-shell-fg); }
.oar-pill.oar-tag--page.oar-pill--active { background: var(--oar-pill-tag-page-bg); color: var(--oar-pill-tag-page-fg); }
.oar-pill.oar-tag--cap.oar-pill--active { background: var(--oar-pill-tag-cap-bg); color: var(--oar-pill-tag-cap-fg); }
.oar-pill.oar-tag--site.oar-pill--active { background: var(--oar-pill-tag-site-bg); color: var(--oar-pill-tag-site-fg); }

/* Drawer — retitled note (preserves original id/title with audit trail) */
.oar-drawer__retitled {
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-muted);
  margin-top: var(--s-space-2);
  padding: var(--s-space-2) var(--s-space-3);
  background: var(--s-color-bg-app);
  border-radius: var(--s-radius-1);
}

.oar-drawer__retitled em {
  font-style: italic;
  color: var(--s-color-fg-muted);
}

.oar-drawer__retitled code {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-0);
}

/* ─────────────────────────────────────────────────────────────────────
   RQ-J Phase Board PROTOTYPE — visual validation only.
   ───────────────────────────────────────────────────────────────────── */

.oar-kanban {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-3);
  /* 2026-05-20 iter1c: XS side padding so the kanban grid doesn't bleed flush
     against the surrounding shell chrome. Caitlin direct. */
  padding-inline: var(--s-space-1);
}

.oar-kanban-note {
  padding: var(--s-space-2) var(--s-space-3);
  background: var(--s-green-50);
  color: var(--s-green-800);
  border-radius: var(--s-radius-1);
  font-size: var(--s-font-size-0);
}

.oar-kanban-note code {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-0);
}

.oar-queue-triage-viewport.oar-kanban-viewport {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-3);
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.oar-kanban-viewport-grid-host {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Wave 1 — INBOX triage strip (queues Kanban) — DS: .ds-component--triage-strip */
.ds-component--triage-strip {
  flex-shrink: 0;
  border: 1px solid var(--s-color-border);
  border-radius: var(--s-radius-1);
  background: var(--s-color-bg-surface);
  padding: var(--s-space-2) var(--s-space-3);
}

.ds-component--triage-strip--collapsed {
  padding: var(--s-space-hair) var(--s-space-3);
}

.ds-component--triage-strip__head {
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
  margin-bottom: var(--s-space-2);
}

.ds-component--triage-strip--collapsed .ds-component--triage-strip__head {
  margin-bottom: 0;
}

.ds-component--triage-strip__title {
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-semibold);
  letter-spacing: 0.08em;
  color: var(--s-color-fg-muted);
}

.ds-component--triage-strip__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--s-color-border), transparent);
  min-width: var(--s-space-3);
}

.ds-component--triage-strip__collapse,
.ds-component--triage-strip__expand {
  font: inherit;
  font-size: var(--s-font-size-1);
  padding: var(--s-space-hair) var(--s-space-2);
  border-radius: var(--s-radius-1);
  border: 1px solid var(--s-color-border);
  background: var(--s-color-bg-app);
  color: var(--s-color-fg-muted);
  cursor: pointer;
}

.ds-component--triage-strip__collapse:hover,
.ds-component--triage-strip__expand:hover {
  background: var(--s-color-hover-bg);
  color: var(--s-color-fg-primary);
}

.ds-component--triage-strip__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-space-2) var(--s-space-4);
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-primary);
}

.ds-component--triage-strip__metric {
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-hair);
}

.ds-component--triage-strip__metric--alert::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1em;
  font-weight: var(--s-font-weight-bold);
  color: var(--s-color-status-warning);
}

.ds-component--triage-strip__metric--pending::before {
  content: "o";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1em;
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-muted);
}

.ds-component--triage-strip__metric--neutral::before {
  content: "·";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1em;
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-soft);
}

.ds-component--triage-strip .ds-component--triage-strip__briefing-link {
  font: inherit;
  font-size: var(--s-font-size-1);
  padding: 0;
  border: 0;
  background: none;
  color: var(--s-brand-600);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  margin-left: auto;
}

.ds-component--triage-strip a.ds-component--triage-strip__briefing-link {
  text-decoration: underline;
}

.ds-component--triage-strip .ds-component--triage-strip__briefing-link:hover {
  color: var(--s-brand-700);
}

.ds-component--triage-strip__pinned {
  display: flex;
  align-items: center;
  gap: var(--s-space-3);
  flex-wrap: wrap;
}

.ds-component--triage-strip__pinned-label {
  font-size: var(--s-font-size-0);
  font-weight: var(--s-font-weight-semibold);
  letter-spacing: 0.06em;
  color: var(--s-color-fg-muted);
}

.ds-component--triage-strip__pinned-counts {
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-primary);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .ds-component--triage-strip .ds-component--triage-strip__briefing-link {
    margin-left: 0;
    width: 100%;
    text-align: left;
  }
}

/* Done column: cards ordered by completion time, newest first (operations-admin-roadmap.js renderPhaseBoardGrid). */
.oar-kanban-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(220px, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--s-space-3);
  align-items: stretch;
  /* Per-column internal scroll removed iter18 — Caitlin direct 2026-05-24
     prefers page-scroll behavior (whole kanban scrolls together). */
}

.oar-kanban-offboard-matches {
  margin-top: var(--s-space-3);
  padding: var(--s-space-2) var(--s-space-3);
  border-radius: var(--s-radius-1);
  background: var(--s-color-bg-surface);
  border: 1px dashed var(--s-color-border-subtle);
}

.oar-kanban-offboard-matches-label {
  margin: 0 0 var(--s-space-2);
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-muted);
}

.oar-kanban-offboard-matches-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-2);
  align-items: center;
}

.oar-kanban-offboard-match {
  cursor: pointer;
}

.oar-kanban-offboard-matches-more {
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-muted);
}

.oar-kanban-col {
  background: var(--s-color-bg-surface);
  border-radius: var(--s-radius-1);
  padding: var(--s-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-space-2);
  min-height: 240px;
  position: relative;
}

/* Default-substate color repurposed as a column accent (Caitlin 2026-04-29).
 * Design column = green, Build = blue, Test = amber. Subtle 3px top border
 * gives each column a distinct identity without competing with content. */
.oar-kanban-col--accented {
  border-top: 3px solid var(--col-accent);
  padding-top: calc(var(--s-space-3) - 3px);
}

.oar-kanban-col-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-1);
  align-items: stretch;
  padding-bottom: var(--s-space-1);
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--s-color-bg-surface);
  box-shadow: none;
}

.oar-kanban-col-head-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
  gap: var(--s-space-2);
}

.oar-kanban-wip.wip {
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.oar-kanban-wip--over {
  color: var(--s-color-status-danger);
  font-weight: var(--s-font-weight-semibold);
}

.oar-kanban-col--wip-over .oar-kanban-col-title,
.oar-kanban-col--wip-over .oar-kanban-col-count {
  color: var(--s-color-status-danger);
}

.oar-kanban-col-title {
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-primary);
}

.oar-kanban-col-count {
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-muted);
  font-variant-numeric: tabular-nums;
}

.oar-kanban-substates {
  display: flex;
  gap: var(--s-space-1);
  flex-wrap: wrap;
}

.oar-kanban-substate {
  font-size: var(--s-font-size-0);
  padding: var(--s-space-hair) var(--s-space-1);
  border-radius: var(--s-radius-1);
  background: var(--substate-color);
  color: var(--s-color-fg-primary);
  font-weight: var(--s-font-weight-medium);
}

.oar-kanban-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-2);
}

.oar-kanban-empty {
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
  text-align: center;
  padding: var(--s-space-2);
}

/* General view — flat stack of phase cards (M-queue-filter-slate iter 1) */
.oar-general-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-2);
}

/* Phase card — shell via @scilence/primitives Card (card.css); layout chrome below */

.oar-phasecard-head {
  display: flex;
  align-items: center;
  gap: var(--s-space-1);
  flex-wrap: wrap;
}

.oar-phasecard-iter {
  font-size: var(--s-font-size-0);
  padding: var(--s-space-hair) var(--s-space-1);
  border-radius: var(--s-radius-1);
  background: var(--s-green-75);
  color: var(--s-green-800);
  font-weight: var(--s-font-weight-medium);
}

.oar-phasecard-sub {
  font-size: var(--s-font-size-1);
  padding: var(--s-space-hair) var(--s-space-1);
  border-radius: var(--s-radius-1);
  background: var(--substate-color);
  color: var(--s-color-fg-primary);
  font-weight: var(--s-font-weight-medium);
}

.oar-phasecard-conf {
  margin-left: auto;
  font-weight: var(--s-font-weight-semibold);
  font-size: var(--s-font-size-0);
}

.oar-phasecard-conf--on-track { color: var(--oar-conf-on-track-fg); }
.oar-phasecard-conf--at-risk { color: var(--oar-conf-at-risk-fg); }
.oar-phasecard-conf--blocked { color: var(--oar-conf-blocked-fg); }

/* RQ-L — design-column discipline chips */
.oar-disc-chip {
  font-size: var(--s-font-size-0);
  padding: var(--s-space-hair) var(--s-space-1);
  border-radius: var(--s-radius-1);
  font-weight: var(--s-font-weight-semibold);
  letter-spacing: 0.02em;
}

.oar-disc-chip--ux {
  background: var(--oar-pill-src-handoff-bg);
  color: var(--oar-pill-src-handoff-fg);
}

.oar-disc-chip--engineering {
  background: var(--oar-pill-src-batch-bg);
  color: var(--oar-pill-src-batch-fg);
}

.oar-disc-chip--both {
  background: var(--oar-phase-synthesized-bg);
  color: var(--oar-phase-synthesized-fg);
}

.oar-disc-chip--operations,
.oar-disc-chip--strategy,
.oar-disc-chip--business,
.oar-disc-chip--grant,
.oar-disc-chip--science,
.oar-disc-chip--compliance,
.oar-disc-chip--marketing {
  background: var(--s-color-bg-subtle);
  color: var(--s-color-fg-secondary);
}

.oar-disc-chip--more {
  background: transparent;
  color: var(--s-color-fg-muted);
  font-weight: var(--s-font-weight-medium);
}

.oar-phasecard-title {
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-medium);
  color: var(--s-color-fg-primary);
  word-break: break-word;
}

.oar-phasecard-owner {
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
  font-style: italic;
}

.oar-phasecard-tags {
  display: flex;
  gap: var(--s-space-1);
  flex-wrap: wrap;
}

.oar-phasecard-bmle {
  display: flex;
  gap: var(--s-space-twohair);
  margin-top: var(--s-space-1);
}

.oar-phasecard-bmle-dot {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--s-font-size-density-3);
  font-weight: var(--s-font-weight-semibold);
  border-radius: 50%;
  border: 1px solid var(--s-color-border);
  color: var(--s-color-fg-muted);
  background: transparent;
}

.oar-phasecard-bmle-dot--filled {
  background: var(--s-teal-400);
  color: var(--s-teal-975);
  border-color: var(--s-teal-500);
}


/* Cluster parent chip — bright accent so cluster parent briefs stand out
   on the kanban (Caitlin direct 2026-05-24 — make them scannable). */
.oar-phasecard-parent-chip {
  display: inline-block;
  margin-right: var(--s-space-1);
  padding: 0 var(--s-space-1);
  font-size: var(--s-font-size-micro);
  font-weight: var(--s-font-weight-semibold, 600);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--s-teal-500);
  color: var(--s-color-bg-app);
  border-radius: var(--s-radius-1);
  line-height: 1.6;
  vertical-align: middle;
}

.oar-phasecard-footer {
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-muted);
  font-family: var(--s-font-mono);
  margin-top: var(--s-space-1);
  padding-top: var(--s-space-1);
  border-top: 1px solid var(--s-color-border);
}

.oar-pill.oar-src--build.oar-pill--active {
  background: var(--oar-pill-tag-site-bg);
  color: var(--oar-pill-tag-site-fg);
}
.oar-pill.oar-src--design.oar-pill--active {
  background: var(--oar-pill-src-batch-bg);
  color: var(--oar-pill-src-batch-fg);
}
.oar-pill.oar-src--testing.oar-pill--active {
  background: var(--oar-pill-src-handoff-bg);
  color: var(--oar-pill-src-handoff-fg);
}
.oar-pill.oar-src--roadmap.oar-pill--active {
  background: var(--oar-pill-tag-lineage-bg);
  color: var(--oar-pill-tag-lineage-fg);
}

.oar-tag {
  display: inline-block;
  font-size: var(--s-font-size-0);
  padding: var(--s-space-hair) var(--s-space-2);
  margin-right: var(--s-space-1);
  border-radius: var(--s-radius-1);
  font-family: var(--s-font-mono);
}

.oar-tag--shell {
  background: color-mix(in srgb, var(--surface-tag-shell-color) 14%, var(--s-color-bg-card));
  color: var(--surface-tag-shell-fg);
}
.oar-tag--page {
  background: color-mix(in srgb, var(--surface-tag-operations-color) 14%, var(--s-color-bg-card));
  color: var(--surface-tag-operations-fg);
}
.oar-tag--cap {
  background: color-mix(in srgb, var(--surface-tag-routing-color) 14%, var(--s-color-bg-card));
  color: var(--surface-tag-routing-fg);
}
.oar-tag--site {
  background: color-mix(in srgb, var(--surface-tag-marketing-color) 14%, var(--s-color-bg-card));
  color: var(--surface-tag-marketing-fg);
}
.oar-tag--default {
  background: var(--s-color-bg-subtle);
  color: var(--s-color-fg-muted);
}

.oar-card__surfaces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-1);
  margin-top: var(--s-space-1);
}

/* ── RQ-J — Kanban shell + sticky filter chrome ───────────────────────── */

.oar-kanban-shell {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-3);
  min-height: 0;
  flex: 1;
}

/* Sticky stack: queue triage + (legacy views) source / age controls.
 * Spans the roadmap content column (`width: 100%`) — no viewport breakout
 * (`100vw` + negative margins fight sidebar / main layout chrome).
 *
 * History: iter1 spacing used margin + sticky `top` offset below #shellTopCluster;
 * iter1a-v3 (visceral review) flushes this stack to the shell content top
 * (`margin-top`/`top`/`padding-block-start` zero) now that `.content-area` padding
 * is dropped on this route.
 *
 * Iter1 (queues-page-briefing-tab-rethink-iter1): Drop padding-block-start on this
 * strip so pinned chrome is not separated from the toolbar by an extra band.
 *
 * Iter1a-v2: Container `width: 100%` only — remove `100vw` + breakout margins
 * (sidebar-safe); vertical rhythm via `padding-block-end`.
 *
 * Iter1a-v3: Flush sticky stack to shell content top + zero horizontal shell pad on
 * this route; keep bottom padding so the chrome separates from the scrollport below. */
.oar-roadmap-chrome-bleed {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-2);
  position: sticky;
  top: 0;
  margin-top: 0;
  z-index: 30;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding-block: 0 var(--s-space-3);
  background: var(--s-color-bg-page);
  border-bottom: 1px solid var(--s-color-border-subtle);
  box-shadow: none;
}

.oar-roadmap-chrome-bleed .queue-filter-toolbar__sticky {
  position: static;
  top: auto;
  z-index: auto;
  background: transparent;
  padding: 0 var(--s-space-1);
  box-sizing: border-box;
  box-shadow: none;
}

.oar-roadmap-chrome-bleed .queue-filter-toolbar-host {
  width: 100%;
  min-width: 0;
}

.oar-roadmap-chrome-bleed .oar-age-filter {
  margin-bottom: 0;
}

.oar-queue-triage-viewport,
.oar-legacy-roadmap-viewport {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: auto;
}

.oar-kanban-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-space-3);
}

.oar-kanban-titles {
  min-width: 0;
}

.oar-kanban-h1 {
  margin: 0;
  font-size: var(--s-font-size-3);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-primary);
}

.oar-kanban-sub {
  margin: var(--s-space-1) 0 0;
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
  max-width: 36rem;
}

.oar-kanban-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-2);
  align-items: center;
}

/* View-switcher uses shared .pg-view-toggle / .pg-view-btn classes from
 * page-primitives.css — no overrides needed. createViewModeToggle()
 * handles all the styling consistently with list/table/grid switchers
 * elsewhere in the shell. */

/* Page-header right-side: count + reload + switcher (Caitlin 2026-04-29:
 * 'minimize item count and reload affordances, put up next to the header'). */
.oar-header-actions {
  display: flex;
  align-items: center;
  gap: var(--s-space-3);
}

.oar-header-count {
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-muted);
  font-variant-numeric: tabular-nums;
  cursor: help;
  min-width: 2em;
  text-align: right;
}

.oar-header-reload {
  background: transparent;
  border: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--s-font-size-2);
  line-height: 1;
  color: var(--s-color-fg-muted);
  cursor: pointer;
  border-radius: var(--s-radius-1);
  transition: background 120ms ease, color 120ms ease, transform 200ms ease;
}

.oar-header-reload:hover {
  color: var(--s-color-fg-primary);
  background: var(--s-color-bg-app);
  transform: rotate(45deg);
}

.oar-header-reload:focus-visible {
  outline: 2px solid var(--s-color-accent-active);
  outline-offset: 1px;
}

.oar-kanban-page-head--compact {
  padding-bottom: 0;
}

/* BMLE drawer states — empty-state hint vs populated editor */
.oar-bmle-empty-hint {
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-muted);
  font-style: italic;
  padding: var(--s-space-3);
  background: var(--s-color-bg-app);
  border-radius: var(--s-radius-1);
  border-left: 2px solid var(--s-color-border);
  line-height: 1.5;
}

.oar-bmle-heading {
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-primary);
  margin: 0 0 var(--s-space-2);
}

.oar-bmle-editor {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-3);
  padding: var(--s-space-3);
  background: var(--s-color-bg-app);
  border-radius: var(--s-radius-1);
}

.oar-bmle-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-1);
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
  font-weight: var(--s-font-weight-medium);
}

.oar-bmle-field textarea {
  font: inherit;
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-primary);
  padding: var(--s-space-2);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
  background: var(--s-color-bg-page);
  min-height: 60px;
  resize: vertical;
  font-family: inherit;
}

.oar-bmle-field textarea:focus {
  outline: 2px solid var(--s-color-accent-active);
  outline-offset: -1px;
  border-color: transparent;
}

/* Linked-artifacts panel — single "all empty" empty state instead of 4 */
.oar-linked-empty--all {
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
  font-style: italic;
  padding: var(--s-space-3);
  background: var(--s-color-bg-app);
  border-radius: var(--s-radius-1);
  border-left: 2px solid var(--s-color-border);
  line-height: 1.5;
}

.oar-kanban-save-view {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-2);
  align-items: center;
}

.oar-kanban-save-view-input {
  font: inherit;
  padding: var(--s-space-1) var(--s-space-2);
  border: 1px solid var(--s-color-border);
  border-radius: var(--s-radius-1);
  background: var(--s-color-bg-app);
  color: var(--s-color-fg-primary);
  min-width: 12rem;
}

.oar-phasecard--selected {
  outline: 2px solid var(--oar-column-design-accent);
  outline-offset: 0;
}

.oar-phasecard-sub--truncate {
  max-width: 7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1023px) {
  .oar-kanban-grid {
    grid-template-columns: 1fr;
  }
}

.oar-phase-drawer__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-space-3);
}

.oar-phase-drawer__head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-2);
  align-items: flex-start;
  justify-content: flex-end;
}

.oar-phase-drawer__h2 {
  margin: 0;
  font-size: var(--s-font-size-3);
  font-weight: var(--s-font-weight-semibold);
  flex: 1;
  min-width: 0;
}

.oar-test-panel .oar-phase-drawer__h2 {
  margin-top: var(--s-space-1);
}

.oar-phase-drawer__head--brief-md {
  justify-content: flex-end;
}

.oar-linked-panel {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-2);
}

.oar-linked-section {
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
  padding: var(--s-space-2);
  background: var(--s-color-bg-app);
}

.oar-linked-section summary {
  cursor: pointer;
  font-weight: var(--s-font-weight-semibold);
  font-size: var(--s-font-size-1);
}

.oar-linked-empty {
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
  font-style: italic;
  padding: var(--s-space-2) 0;
}

.oar-linked-row {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: var(--s-font-size-1);
  padding: var(--s-space-2);
  margin-top: var(--s-space-1);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
  background: var(--s-color-bg-subtle);
  color: var(--s-color-fg-primary);
  cursor: pointer;
}

.oar-linked-row:hover {
  background: var(--s-color-hover-bg);
}

.oar-linked-conf--high {
  color: var(--oar-conf-on-track-fg);
}
.oar-linked-conf--med {
  color: var(--oar-substate-iterating-fg);
}
.oar-linked-conf--low {
  color: var(--oar-conf-blocked-fg);
}

/* Conflict resolved 2026-04-29 — keep both RQ-L (drawer__hint, disc-*) and
 * RQ-K (linked-badge, brief-body-drawer*, brief-subheading, brief-pre)
 * additions. Each side added different rules in the same area. */
.oar-drawer__hint {
  margin: var(--s-space-2) 0 var(--s-space-3);
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-muted);
}

/* Parent brief — absorbed children list (child-briefs-in-parent-drawer 2026-05-24). */
.oar-drawer__children-section {
  margin: var(--s-space-3) 0;
  padding: var(--s-space-2) var(--s-space-3);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
  background: var(--s-color-bg-subtle, var(--s-color-bg-app));
}

.oar-drawer__children-heading {
  margin: 0 0 var(--s-space-2);
  font-size: var(--s-font-size-0);
  font-weight: var(--s-font-weight-semibold);
  letter-spacing: 0.02em;
}

.oar-drawer__children-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-1);
}

.oar-drawer__child-row {
  display: grid;
  grid-template-columns: minmax(7rem, 1.1fr) minmax(0, 2.5fr) auto auto;
  gap: var(--s-space-2);
  align-items: center;
  width: 100%;
  margin: 0;
  padding: var(--s-space-2);
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--s-color-bg-app);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
  cursor: pointer;
}

.oar-drawer__child-row:hover {
  border-color: var(--s-teal-500);
  background: var(--s-color-bg-hover, var(--s-color-bg-app));
}

.oar-drawer__child-row:focus-visible {
  outline: 2px solid var(--s-color-focus-ring, var(--s-teal-500));
  outline-offset: 2px;
}

.oar-drawer__child-slug {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-micro);
  color: var(--s-color-fg-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oar-drawer__child-intent {
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oar-drawer__child-validated {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-micro);
  color: var(--s-color-fg-muted);
  white-space: nowrap;
}

.oar-roadmap-drawer__back {
  margin-right: var(--s-space-1);
}

.oar-drawer__disc-wrap {
  margin-bottom: var(--s-space-3);
}

.oar-drawer__disc-label {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-1);
  font-size: var(--s-font-size-0);
  font-weight: var(--s-font-weight-semibold);
}

.oar-linked-badge {
  font-size: var(--s-font-size-micro);
  font-weight: var(--s-font-weight-semibold);
  vertical-align: middle;
}

.oar-linked-conf--tier-med {
  color: var(--oar-substate-awaiting-fg);
}

.oar-linked-conf--tier-low {
  color: var(--oar-conf-at-risk-fg);
}

.oar-brief-body-drawer {
  margin-bottom: var(--s-space-3);
  padding: var(--s-space-3);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
  background: var(--s-color-bg-app);
}

.oar-brief-body-drawer-sum {
  cursor: pointer;
  font-weight: var(--s-font-weight-semibold);
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-primary);
  padding: var(--s-space-1) 0;
  user-select: none;
}

.oar-brief-body-drawer-inner {
  padding-top: var(--s-space-3);
  max-height: 320px;
  overflow-y: auto;
  border-top: 1px solid var(--s-color-border-subtle);
  margin-top: var(--s-space-2);
}

.oar-brief-subheading {
  font-weight: var(--s-font-weight-semibold);
  margin-top: var(--s-space-3);
  margin-bottom: var(--s-space-1);
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-primary);
}

.oar-brief-subbody {
  font-size: var(--s-font-size-1);
  line-height: 1.5;
  color: var(--s-color-fg-primary);
}

.oar-brief-subbody .oar-brief-p {
  margin: var(--s-space-2) 0 0;
  font-weight: var(--s-font-weight-regular);
  color: var(--s-color-fg-primary);
}

.oar-brief-pre {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-0);
  white-space: pre-wrap;
  padding: var(--s-space-2);
  background: var(--s-color-bg-page);
  border-radius: var(--s-radius-1);
  margin: var(--s-space-2) 0;
  overflow-x: auto;
}

.oar-brief-snippet-empty {
  color: var(--s-color-fg-muted);
  font-style: italic;
}

.oar-bmle-editor {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-3);
}

.oar-bmle-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-1);
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-muted);
}

.oar-bmle-field textarea {
  min-height: 4.5rem;
  font: inherit;
  font-weight: var(--s-font-weight-regular);
  padding: var(--s-space-2);
  border: 1px solid var(--s-color-border);
  border-radius: var(--s-radius-1);
  background: var(--s-color-bg-app);
  color: var(--s-color-fg-primary);
  resize: vertical;
}

.oar-phase-drawer__footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-2);
  align-items: center;
  margin-top: var(--s-space-3);
  padding-top: var(--s-space-3);
  border-top: 1px solid var(--s-color-border-subtle);
}

.oar-phase-drawer__select {
  font: inherit;
  padding: var(--s-space-1) var(--s-space-2);
  border: 1px solid var(--s-color-border);
  border-radius: var(--s-radius-1);
  background: var(--s-color-bg-app);
  color: var(--s-color-fg-primary);
}

/* ── RQ-N — Kanban Test column iframe + checklist panel ─────────── */

.oar-drawer.oar-test-panel {
  width: var(--ts-panel-w);
  max-width: 95vw;
  max-height: 100vh;
  min-height: 0;
  gap: var(--s-space-2);
  padding: var(--s-space-3);
  position: relative;
  resize: none;
}

.oar-drawer.oar-test-panel--reshape {
  --ts-panel-w: clamp(720px, 82vw, 1280px);
  width: var(--ts-panel-w);
  display: flex;
  flex-direction: column;
}

.oar-test-panel__body-cols {
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(78vh, 900px);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
  overflow: hidden;
}

.oar-test-panel__col {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-space-2);
}

.oar-test-panel__col--all {
  overflow: auto;
  padding: var(--s-space-2);
  background: var(--s-color-bg-subtle);
  flex: var(--ts-left-col-flex);
}

.oar-test-panel__col--per {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--s-space-2);
  background: var(--s-color-bg-app);
}

.oar-test-panel__split.oar-test-panel__split--cols {
  flex: 0 0 6px;
  width: 6px;
  cursor: col-resize;
  background: var(--s-color-border-subtle);
  border: none;
  margin: 0;
  align-self: stretch;
}

.oar-test-panel__split.oar-test-panel__split--cols:hover,
.oar-test-panel__split.oar-test-panel__split--cols:active {
  background: var(--s-color-border-strong);
}

.oar-test-panel__pane-title {
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-semibold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--s-color-fg-muted);
}

.oar-test-panel__per-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.oar-test-panel__viewport-grid {
  display: flex;
  flex-direction: row;
  gap: var(--s-space-2);
  align-items: flex-start;
  min-width: 0;
}

.oar-test-panel__vp-stack {
  flex: 1 1 200px;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: var(--s-space-twohair);
}

.oar-test-panel__vp-cap {
  font-size: var(--s-font-size-0);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-primary);
}

.oar-test-panel__no-surface-placeholder {
  border: 1px dashed var(--s-color-border);
  border-radius: var(--s-radius-1);
  padding: var(--s-space-3);
  color: var(--s-color-fg-muted);
  font-size: var(--s-font-size-1);
  line-height: 1.4;
}

.oar-test-panel__steps--left {
  max-height: 42vh;
}

.oar-test-panel__resize-handle {
  position: absolute;
  left: -3px;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: ew-resize;
  background: transparent;
  z-index: 1;
}

.oar-test-panel__resize-handle:hover,
.oar-test-panel__resize-handle:active {
  background: var(--s-color-border-strong);
}

.oar-test-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-space-2);
}

.oar-test-panel__action-band {
  border-bottom: 1px solid var(--s-color-border-subtle);
  background: var(--s-color-bg-subtle);
  padding: var(--s-space-3) var(--s-space-4);
}

.oar-test-panel__action-band-inner {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-2);
}

.oar-test-panel__action-band-inner--test {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-space-2) var(--s-space-3);
}

.oar-test-panel__action-band-plain {
  font-size: var(--s-font-size-caption);
  color: var(--s-color-fg-muted);
}

.oar-test-panel__surface-a {
  font-size: var(--s-font-size-caption);
  font-weight: var(--s-font-weight-semibold);
}

.oar-test-panel__answer-question {
  font-weight: var(--s-font-weight-semibold);
}

.oar-test-panel__answer-field,
.oar-test-panel__action-band-textarea {
  width: 100%;
  min-height: 2.75rem;
  font: inherit;
  padding: var(--s-space-2);
  border-radius: var(--s-radius-1);
  border: 1px solid var(--s-color-border-subtle);
}

.oar-test-panel__orient-steps-host {
  margin: var(--s-space-2) 0;
}

.oar-test-panel__orient-steps > summary {
  font-weight: var(--s-font-weight-semibold);
  cursor: pointer;
}

.oar-test-panel__orient-steps-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-twohair);
  margin-top: var(--s-space-2);
}

.oar-test-panel__orient-steps-row {
  display: flex;
  align-items: baseline;
  gap: var(--s-space-2);
  border: none;
  background: none;
  font: inherit;
  text-align: left;
  padding: var(--s-space-twohair) 0;
  cursor: pointer;
  color: inherit;
}

.oar-test-panel__orient-steps-row:hover .oar-test-panel__orient-steps-title {
  text-decoration: underline;
}

.orient-step-chip {
  flex: 0 0 auto;
  font-size: var(--s-font-size-0);
  font-family: var(--s-font-mono);
  font-weight: var(--s-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 1px var(--s-space-twohair);
  border-radius: var(--s-radius-1);
  border: 1px solid transparent;
}

.orient-step-chip--merged {
  background: var(--s-color-info-bg);
  color: var(--s-color-info);
  border-color: var(--s-color-border-subtle);
}

.orient-step-chip--open {
  background: var(--s-color-accent-luminous-warm-subtle);
  border-color: var(--s-color-border-subtle);
}

.orient-step-chip--parked {
  background: var(--s-color-bg-subtle);
  color: var(--s-color-fg-muted);
}

.orient-step-chip--archived {
  opacity: 0.55;
  text-decoration: line-through;
}

.orient-step-chip--tbd {
  background: var(--orient-step-chip-tbd-bg);
}

.oar-test-panel__brief-md-host {
  max-height: min(36vh, 22rem);
  overflow: auto;
  margin-bottom: var(--s-space-2);
  padding: var(--s-space-2);
  border: 1px dashed var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
  font-size: var(--s-font-size-caption);
}

.oar-test-panel__head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-2);
  justify-content: flex-end;
}

/* Test panel stays mounted while Build detail opens the phase drawer on top — hide without tearing down. */
.oar-drawer-backdrop.oar-drawer-backdrop--hidden {
  visibility: hidden;
  pointer-events: none;
}

.oar-test-panel__url-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-2);
  align-items: center;
}

.oar-test-panel__url-select {
  flex: 1 1 12rem;
  min-width: 0;
}

.oar-test-panel__main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
  overflow: hidden;
}

.oar-test-panel__steps {
  min-height: 4rem;
  overflow: auto;
  padding: var(--s-space-2);
  background: var(--s-color-bg-subtle);
}

.oar-test-panel__h3 {
  margin: 0 0 var(--s-space-2);
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-primary);
}

.oar-test-panel__step-heading {
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-muted);
  margin: var(--s-space-2) 0 var(--s-space-twohair);
}

.oar-test-panel__steps-inner > .oar-test-panel__step-heading:first-child {
  margin-top: 0;
}

.oar-test-panel__step {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--s-space-2);
  font-size: var(--s-font-size-1);
  line-height: 1.35;
  margin-bottom: var(--s-space-twohair);
  cursor: pointer;
}

.oar-test-panel__step--auto-verified {
  background: var(--s-color-info-bg);
}

.oar-test-panel__step--otto-tagged .oar-test-panel__step-tag {
  display: inline-block;
  font-size: var(--s-font-size-density-1);
  font-family: var(--s-font-mono);
  padding: 1px 6px;
  background: var(--s-color-accent-luminous-cool-subtle);
  color: var(--s-color-info);
  border-radius: var(--s-radius-1);
  margin-left: var(--s-space-1);
}

.oar-test-panel__step--auto-running {
  background: var(--s-color-info-bg);
  opacity: 0.7;
}

.oar-test-panel__step--auto-running .oar-test-panel__step-tag {
  display: inline-block;
  font-size: var(--s-font-size-density-1);
  font-family: var(--s-font-mono);
  padding: 1px 6px;
  background: var(--s-color-accent-luminous-cool-subtle);
  color: var(--s-color-info);
  border-radius: var(--s-radius-1);
  margin-left: var(--s-space-1);
}

.oar-test-panel__step--auto-failed {
  background: var(--s-color-warning-bg);
}

.oar-test-panel__step--auto-failed .oar-test-panel__step-tag {
  display: inline-block;
  font-size: var(--s-font-size-density-1);
  font-family: var(--s-font-mono);
  padding: 1px 6px;
  background: var(--s-color-error-bg);
  color: var(--s-color-error);
  border-radius: var(--s-radius-1);
  margin-left: var(--s-space-1);
}

.oar-test-panel__step--auto-error {
  background: var(--s-color-warning-bg);
}

.oar-test-panel__step--auto-error .oar-test-panel__step-tag {
  display: inline-block;
  font-size: var(--s-font-size-density-1);
  font-family: var(--s-font-mono);
  padding: 1px 6px;
  background: var(--s-color-warning-bg);
  color: var(--s-color-warning);
  border-radius: var(--s-radius-1);
  margin-left: var(--s-space-1);
}

.oar-test-panel__step-text--stress {
  font-weight: var(--s-font-weight-semibold);
}

.oar-test-panel__step-live-detail {
  flex-basis: 100%;
  width: 100%;
  margin-top: var(--s-space-twohair);
  margin-left: 0;
}

.oar-test-panel__step-live-detail summary {
  cursor: pointer;
  font-size: var(--s-font-size-1);
  color: var(--s-color-warning);
}

.oar-test-panel__step-live-output {
  white-space: pre-wrap;
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-density-2);
  max-height: 8rem;
  overflow: auto;
  margin: var(--s-space-twohair) 0 0;
  padding: var(--s-space-twohair);
  background: var(--s-color-bg-app);
  border-radius: var(--s-radius-1);
  border: 1px solid var(--s-color-border-subtle);
}


.oar-test-panel.non-build-brief-fallback .oar-drawer__meta {
  border-left: 3px solid var(--s-color-border-subtle);
  padding-left: var(--s-space-2);
}

.oar-test-panel__meta .oar-drawer__hint {
  margin-top: var(--s-space-1);
}

.oar-test-panel__split {
  flex-shrink: 0;
  flex-grow: 0;
  flex-basis: var(--s-space-tight-3);
  cursor: ns-resize;
  background: var(--s-color-border-subtle);
}

.oar-test-panel__iframe-host {
  flex: 1 1 auto;
  min-height: 12rem;
  display: flex;
  flex-direction: column;
  background: var(--s-color-bg-app);
}

.oar-test-panel__iframe {
  flex: 1 1 auto;
  width: 100%;
  min-height: 14rem;
  border: none;
}

.oar-test-panel__footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-2);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--s-space-1);
  padding-top: var(--s-space-2);
  border-top: 1px solid var(--s-color-border-subtle);
}

.oar-test-panel__pass {
  border-color: var(--s-color-border);
}

.oar-pill.oar-pill--primary {
  border-color: var(--substrate-cool-active);
  background: color-mix(in srgb, var(--substrate-cool-rest) 55%, var(--s-color-bg-app));
  color: var(--s-color-fg-primary);
}

.oar-pill.oar-pill--primary:hover {
  border-color: var(--substrate-cool-active);
  background: color-mix(in srgb, var(--substrate-cool-active) 22%, var(--s-color-bg-app));
}

/* RQ-N v2 — viewports + accept chips + comment composer */

.oar-test-panel__viewport-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-2);
  flex-shrink: 0;
  padding-bottom: var(--s-space-2);
  border-bottom: 1px solid var(--s-color-border-subtle);
}

.oar-test-panel__viewport-toggle-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-space-2);
}

.oar-test-panel__viewport-scale {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-muted);
  white-space: nowrap;
}

.oar-test-panel__viewport-toggle.oar-view-toggle {
  flex-wrap: wrap;
}

.oar-test-panel__viewport-segment {
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-twohair);
}

.oar-test-panel__viewport-toggle .oar-test-panel__accept-chip {
  padding: 0 var(--s-space-hair);
  min-width: 1.35rem;
  min-height: 1.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--s-font-size-0);
  line-height: 1;
  border-radius: var(--s-radius-1);
  border: 1px solid var(--s-color-border-subtle);
  color: var(--s-color-fg-muted);
  flex-shrink: 0;
}

.oar-test-panel__accept-chip--ok {
  border-color: var(--substrate-cool-active);
  color: var(--substrate-cool-active);
  background: color-mix(in srgb, var(--substrate-cool-rest) 22%, transparent);
}

.oar-test-panel__accept-chip--warn {
  border-color: var(--focal-point-warm);
  color: var(--focal-point-warm);
  background: color-mix(in srgb, var(--substrate-warm-rest) 35%, transparent);
}

.oar-test-panel__accept-chip--locked {
  opacity: 0.85;
  cursor: default;
}

.oar-test-panel__viewport-toggle .oar-test-panel__accept-chip--rest {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--s-color-border-subtle) 88%, transparent);
  color: color-mix(in srgb, var(--s-color-fg-muted) 55%, transparent);
  background: transparent;
}

.oar-test-panel__accept-chip--draft {
  position: relative;
}

.oar-test-panel__accept-chip-draft-glyph {
  font-size: var(--s-font-size-0);
  line-height: 1;
  margin-inline-start: var(--s-space-hair);
  font-weight: var(--s-font-weight-bold);
  opacity: 0.95;
}

.oar-test-panel__viewport-frame {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* RQ‑N v2.7 — simulated device width inside iframe + transform scale (marker: viewport-frame--simulate + iframeZoomSimulate). */
.oar-test-panel__viewport-frame.viewport-frame--simulate {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  align-self: stretch;
  overflow: auto;
  display: block;
}

.oar-test-panel__iframe-zoom-wrap {
  display: block;
  transform: scale(var(--ts-iframe-scale));
  transform-origin: var(--ts-iframe-transform-origin);
  width: var(--ts-iframe-wrap-w);
  height: var(--ts-iframe-wrap-h);
  flex: var(--ts-iframe-wrap-flex);
}

.oar-test-panel__viewport-frame.viewport-frame--simulate .oar-test-panel__iframe {
  display: block;
  width: var(--ts-iframe-w);
  height: var(--ts-iframe-h);
  max-width: var(--ts-iframe-max-w);
  min-height: unset;
  flex: var(--ts-iframe-flex);
}

.oar-test-panel__comment-composer {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-space-2);
  padding: var(--s-space-2);
  border-radius: var(--s-radius-1);
  background: var(--s-color-bg-subtle);
  border: 1px solid var(--s-color-border-subtle);
}

.oar-test-panel__composer-guard-hint {
  margin: 0;
  font-size: var(--s-font-size-0);
}

.oar-test-panel__comment-label {
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-primary);
}

.oar-test-panel__comment-textarea {
  font: inherit;
  min-height: 4.5rem;
  padding: var(--s-space-2);
  border: 1px solid var(--substrate-cool-rest);
  border-radius: var(--s-radius-1);
  background: var(--s-color-bg-app);
  color: var(--s-color-fg-primary);
  resize: vertical;
  transition: border-color var(--s-duration-fast);
}

.oar-test-panel__comment-textarea:focus {
  outline: none;
  border-color: var(--substrate-cool-active);
}

.oar-test-panel__comment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-2);
}

.oar-test-panel__comment-actions[hidden] {
  display: none;
}

.oar-test-panel__composer-error {
  margin-top: var(--s-space-2);
  padding: var(--s-space-2);
  font-size: var(--s-font-size-1);
  color: var(--s-color-warning-fg);
  background: var(--s-color-warning-bg);
  border-radius: var(--s-radius-1);
  border: 1px solid var(--s-color-warning-border);
}

.oar-test-panel__comment-summary {
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-primary);
  line-height: 1.4;
}

.oar-test-panel__comment-summary a {
  color: var(--substrate-cool-active);
}

.oar-test-panel__add-another-iteration {
  align-self: flex-start;
  margin-top: var(--s-space-hair);
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
}

.oar-test-panel__iter-status {
  margin-top: var(--s-space-2);
  font-size: var(--s-font-size-1);
  line-height: 1.35;
}

.oar-test-panel__preflight-skip {
  display: flex;
  align-items: center;
  gap: var(--s-space-hair);
  margin-top: var(--s-space-hair);
  cursor: pointer;
}

.oar-test-panel__clarify-wrap,
.oar-test-panel__stuck-wrap {
  margin-top: var(--s-space-2);
  padding: var(--s-space-2);
  border-radius: var(--s-radius-1);
  border: 1px solid var(--s-color-border-subtle);
  background: var(--s-color-bg-card);
}

.oar-test-panel__clarify-h,
.oar-test-panel__stuck-h {
  font-weight: 600;
  font-size: var(--s-font-size-1);
  margin-bottom: var(--s-space-2);
}

.oar-test-panel__clarify-q,
.oar-test-panel__stuck-ul {
  margin-bottom: var(--s-space-2);
}

.oar-test-panel__clarify-ta,
.oar-test-panel__stuck-ta {
  display: block;
  width: 100%;
  margin-top: var(--s-space-hair);
  min-height: 3rem;
  box-sizing: border-box;
  font: inherit;
}

.oar-test-panel__clarify-actions,
.oar-test-panel__stuck-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-2);
  margin-top: var(--s-space-2);
}

/* ── M-queue-filter-redesign — two-row sticky toolbar ─ */

.queue-filter-toolbar-host {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  min-width: 0;
}

.queue-filter-toolbar-sentinel {
  width: 100%;
  height: 1px;
  margin: 0;
  pointer-events: none;
  flex-shrink: 0;
}

.queue-filter-toolbar__sticky {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--s-color-bg-page);
  display: flex;
  flex-direction: column;
  gap: var(--s-space-2);
  padding: var(--s-space-2) 0;
  box-sizing: border-box;
  min-width: 0;
}

.queue-filter-toolbar__row1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-space-2);
  width: 100%;
}

.queue-filter-toolbar__search-mount {
  flex: 1 1 14rem;
  min-width: 10rem;
}

.queue-filter-toolbar__phase-mount {
  flex: 0 1 auto;
  min-width: 0;
}

.queue-filter-toolbar__phase {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-space-1);
}

.queue-filter-toolbar__phase-label {
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
  white-space: nowrap;
}

.queue-filter-toolbar__phase-select {
  font: inherit;
  font-size: var(--s-font-size-1);
  min-width: 7rem;
  max-width: 12rem;
  padding: var(--s-space-1);
  border-radius: var(--s-radius-1);
  border: 1px solid var(--s-color-border-subtle);
  background: var(--s-color-bg-page);
  color: var(--s-color-fg-primary);
}

.queue-filter-toolbar__search-mount .ds-search {
  width: 100%;
}

.queue-filter-toolbar__quick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-space-2);
}

.queue-filter-toolbar__count {
  margin-left: auto;
  border: none;
  background: transparent;
  font: inherit;
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-muted);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  padding: var(--s-space-1);
  border-radius: var(--s-radius-1);
}

.queue-filter-toolbar__count:hover {
  color: var(--s-color-fg-primary);
  background: var(--s-color-bg-subtle);
}

.queue-filter-toolbar__count:focus-visible {
  outline: 2px solid var(--s-color-accent-active);
  outline-offset: 1px;
}

.queue-filter-toolbar__row2 {
  width: 100%;
  min-width: 0;
  padding-bottom: var(--s-space-twohair);
  transition: box-shadow 150ms ease;
  overflow: hidden;
}

.queue-filter-toolbar__row2--scrolled {
  box-shadow: none;
}

.queue-filter-toolbar__chips-scroll {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--s-space-2);
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  padding: var(--s-space-twohair) 0;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
  box-sizing: border-box;
}

/* Brief 103 — when the inline surface-chip row is empty (filters live in the
 * section-state FilterRail now), collapse the empty row entirely so the
 * sticky toolbar reads as a single row. */
.queue-filter-toolbar__row2:has(.queue-filter-toolbar__chips-scroll:empty),
.queue-filter-toolbar__chips-scroll:empty {
  display: none;
}

@media (max-width: 480px) {
  .queue-filter-toolbar__row1 {
    flex-direction: column;
    align-items: stretch;
  }

  .queue-filter-toolbar__search-mount {
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
  }

  .queue-filter-toolbar__quick {
    flex: 1 1 100%;
    justify-content: stretch;
  }

  .queue-filter-toolbar__quick .ds-quick-filter-wrap {
    flex: 1 1 0;
    min-width: 0;
  }

  .queue-filter-toolbar__quick .ds-quick-filter {
    width: 100%;
    justify-content: center;
  }

  .queue-filter-toolbar__count {
    margin-left: 0;
    width: 100%;
    text-align: center;
  }
}

/* ── Briefing + Timeline placeholder (orient-snapshot) ───────────────────── */

.oar-briefing__viewport {
  position: relative;
  padding: 0 var(--s-space-4) var(--s-space-4);
  max-width: 64rem;
  flex: 1 1 auto;
  min-width: 0;
}

.oar-briefing__layout {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--s-space-4);
  width: 100%;
}

.oar-briefing__decision-aside {
  flex: 0 0 480px;
  width: 480px;
  max-width: min(480px, 100vw);
  position: sticky;
  top: var(--s-space-3);
  align-self: flex-start;
  min-height: 12rem;
}

.oar-briefing__decision-aside--pinned .oar-drawer-backdrop--briefing-embed {
  position: static;
  inset: auto;
  background: transparent;
  display: block;
  width: 100%;
  min-height: 70vh;
}

.oar-briefing__decision-aside--pinned .oar-briefing__drawer-pinned.oar-drawer {
  width: 100%;
  max-width: 100%;
  height: min(88vh, 900px);
  border-radius: var(--s-radius-2);
  border: 1px solid var(--s-color-border-subtle);
  box-shadow: var(--s-shadow-lg);
}

.oar-briefing__drawer-empty {
  border: 1px dashed var(--s-color-border-subtle);
  border-radius: var(--s-radius-2);
  padding: var(--s-space-6);
  text-align: center;
  background: var(--s-color-bg-subtle);
}

.oar-briefing__drawer-empty-lead {
  margin: 0;
  font-size: var(--s-font-size-2);
  color: var(--s-color-fg-soft);
  line-height: 1.5;
}

.oar-briefing__action-row[aria-current="true"] {
  box-shadow: none;
}

.oar-briefing__answer-inline {
  padding: var(--s-space-3);
  border-top: 1px solid var(--s-color-border-subtle);
}

.oar-briefing__answer-inline-ta {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: var(--s-space-2);
  font: inherit;
  min-height: 6rem;
}

@media (max-width: 1023px) {
  .oar-briefing__layout {
    flex-direction: column;
  }

  .oar-briefing__decision-aside--pinned {
    position: fixed;
    right: var(--s-space-2);
    bottom: var(--s-space-2);
    left: var(--s-space-2);
    top: auto;
    width: auto;
    max-width: none;
    z-index: 40;
    max-height: 55vh;
    overflow: auto;
  }
}

/* Timeline placeholder: no inner viewport wrapper — inset matches Briefing horizontal rhythm. */
.oar-briefing.oar-timeline-soon {
  padding: 0 var(--s-space-4) var(--s-space-4);
}

.oar-briefing__loading,
.oar-briefing__error {
  padding: var(--s-space-4);
  border-radius: var(--s-radius-2);
  border: 1px solid var(--s-color-border-subtle);
  background: var(--s-color-bg-subtle);
}

.oar-briefing__error {
  color: var(--s-color-error);
}

.oar-briefing__h2 {
  font-size: var(--s-font-size-3);
  margin: var(--s-space-6) 0 var(--s-space-3);
  padding-top: var(--s-space-4);
  border-top: 1px solid var(--s-color-border-subtle);
}

.oar-briefing__h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.oar-briefing__h3 {
  font-size: var(--s-font-size-2);
  margin: var(--s-space-4) 0 var(--s-space-2);
}

.oar-briefing__lead {
  margin-bottom: var(--s-space-3);
}

.oar-briefing__list {
  margin: 0 0 var(--s-space-4) var(--s-space-4);
  padding: 0;
  font-size: var(--s-font-size-caption);
}

.oar-briefing__list li {
  margin-bottom: var(--s-space-2);
}

.oar-briefing__muted {
  color: var(--s-color-fg-muted);
  font-size: var(--s-font-size-caption);
  margin: 0 0 var(--s-space-3);
}

.oar-briefing__muted-inline {
  color: var(--s-color-fg-muted);
}

.oar-briefing__small {
  font-size: var(--s-font-size-caption);
  color: var(--s-color-fg-muted);
}

.oar-briefing__drift-grid {
  display: grid;
  gap: var(--s-space-3);
}

@media (min-width: 48rem) {
  .oar-briefing__drift-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.oar-briefing__drift-card {
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-2);
  padding: var(--s-space-3);
  background: var(--s-color-bg-subtle);
}

.oar-briefing__tone {
  display: inline-block;
  width: 1rem;
}

.oar-briefing__anchor {
  margin-top: var(--s-space-2);
  display: inline-flex;
}

.oar-briefing__owed {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-3);
}

.oar-briefing__owed-row {
  display: flex;
  gap: var(--s-space-3);
  align-items: flex-start;
  flex-wrap: wrap;
}

.oar-briefing__owed-text {
  flex: 1 1 22rem;
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
  padding: var(--s-space-2) var(--s-space-3);
  background: var(--s-color-bg-card);
}

.oar-briefing__done-btn {
  flex: 0 0 auto;
  border: 1px solid var(--s-color-border-subtle);
  background: transparent;
  color: inherit;
  border-radius: var(--s-radius-1);
  padding: var(--s-space-2) var(--s-space-4);
  font: inherit;
  cursor: pointer;
}

.oar-briefing__done-btn:hover:not(:disabled) {
  border-color: var(--s-color-fg-muted);
}

.oar-briefing__done-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.oar-briefing__recommendation {
  line-height: 1.55;
  font-size: var(--s-font-size-2);
  padding: var(--s-space-3);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-2);
  background: var(--s-color-bg-card);
}

/* Briefing iter2 — workstream rows + hero (morning orient region) */
.oar-briefing__morning-caption {
  margin: 0 0 var(--s-space-2);
  font: var(--s-font-size-micro);
  font-variant: all-small-caps;
  letter-spacing: 0.06em;
  color: var(--s-color-fg-muted);
}

.oar-briefing__hero {
  margin: 0 0 var(--s-space-5);
  padding: var(--s-space-3) var(--s-space-4);
  border-radius: var(--s-radius-2);
  border: 1px solid var(--s-color-border-subtle);
  background: linear-gradient(
    135deg,
    var(--s-color-bg-subtle) 0%,
    var(--s-color-bg-card) 100%
  );
}

.oar-briefing__hero-primary {
  margin: 0 0 var(--s-space-2);
  font-size: var(--s-font-size-2);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-primary);
}

.oar-briefing__hero-lean {
  margin: 0 0 var(--s-space-2);
  font-size: var(--s-font-size-caption);
  color: var(--s-color-fg-soft);
}

.oar-briefing__today {
  margin: 0 0 var(--s-space-6);
  padding: 0 0 var(--s-space-4);
  border-bottom: 1px solid var(--s-color-border-subtle);
}

.oar-briefing__today-section-title {
  margin: 0 0 var(--s-space-3);
  font-size: var(--s-font-size-3);
  font-weight: var(--s-font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--s-color-fg-soft);
}

.oar-briefing__today-band {
  margin-bottom: var(--s-space-5);
}

.oar-briefing__today-band-title {
  margin: 0 0 var(--s-space-2);
  font-size: var(--s-font-size-2);
  font-weight: var(--s-font-weight-medium);
}

.oar-briefing__today-empty {
  padding: var(--s-space-3) var(--s-space-twohair);
  border-radius: var(--s-radius-2);
  border: 1px dashed var(--s-color-border-subtle);
  font-size: var(--s-font-size-caption);
  color: var(--s-color-fg-soft);
}

.oar-briefing__today-empty-link {
  color: var(--s-color-accent-active);
}

.oar-briefing__today-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-1);
}

.oar-briefing__today-row {
  display: grid;
  grid-template-columns: minmax(4rem, auto) minmax(0, 1fr) minmax(0, 11rem) auto auto;
  gap: var(--s-space-2) var(--s-space-3);
  align-items: baseline;
  width: 100%;
  text-align: left;
  padding: var(--s-space-2) var(--s-space-twohair);
  border-radius: var(--s-radius-2);
  border: none;
  font: inherit;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.oar-briefing__today-row:hover {
  background: var(--s-color-bg-subtle);
}

.oar-briefing__today-row--tier-a {
  box-shadow: none;
  padding-left: calc(var(--s-space-twohair) + var(--s-tier-a-edge-width));
}

.oar-briefing__today-row-title-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-space-2);
  min-width: 0;
}

.oar-briefing__today-row-meta {
  font-size: var(--s-font-size-caption);
  color: var(--s-color-fg-muted);
  text-align: right;
  justify-self: end;
}

.oar-briefing__today-row-recency {
  font-size: var(--s-font-size-caption);
  color: var(--s-color-fg-muted);
  white-space: nowrap;
}

.oar-briefing__today-row-trail {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-space-2);
  justify-content: flex-end;
  justify-self: end;
  white-space: nowrap;
}

.oar-briefing__today-row-arrow {
  opacity: 0.45;
  font-size: var(--s-font-size-caption);
  justify-self: end;
}

.oar-row-badge {
  font-size: var(--s-font-size-caption);
  font-weight: var(--s-font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.oar-row-badge--new {
  color: var(--s-color-accent-quiet);
}

.oar-briefing__action-band {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-1);
  margin: 0 0 var(--s-space-6);
  padding: var(--s-space-3) 0 var(--s-space-5);
  border-top: 1px solid var(--s-color-border-subtle);
  border-bottom: 1px solid var(--s-color-border-subtle);
}

.oar-briefing__action-row {
  display: grid;
  grid-template-columns: minmax(5rem, auto) 1fr auto;
  gap: var(--s-space-3);
  align-items: baseline;
  width: 100%;
  text-align: left;
  padding: var(--s-space-2) var(--s-space-twohair);
  border-radius: var(--s-radius-2);
  border: none;
  font: inherit;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.oar-briefing__action-row:hover {
  background: var(--s-color-bg-subtle);
}

.oar-briefing__verb {
  font-size: var(--s-font-size-caption);
  font-weight: var(--s-font-weight-semibold);
  font-variant: all-small-caps;
  letter-spacing: 0.08em;
  color: var(--s-color-fg-soft);
}

.oar-briefing__action-title-cluster {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-space-2);
  min-width: 0;
}

.oar-briefing__action-title {
  font-weight: var(--s-font-weight-medium);
  text-wrap: pretty;
}

.oar-briefing__action-drawer-arrow {
  flex-shrink: 0;
  opacity: 0.45;
  font-size: var(--s-font-size-caption);
}

.oar-briefing__action-hint {
  font-size: var(--s-font-size-caption);
  color: var(--s-color-fg-muted);
  justify-self: end;
  text-align: right;
}

.oar-briefing__commitments {
  margin-bottom: var(--s-space-6);
}

.oar-briefing__commitments-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: var(--s-space-3);
  align-items: baseline;
  width: 100%;
  text-align: left;
  padding: var(--s-space-2) var(--s-space-twohair);
  border-radius: var(--s-radius-2);
  border: none;
  font: inherit;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.oar-briefing__commitments-row:hover {
  background: var(--s-color-bg-subtle);
}

.oar-briefing__commitments-title {
  font-weight: var(--s-font-weight-medium);
}

.oar-briefing__commitments-meta {
  font-size: var(--s-font-size-caption);
  color: var(--s-color-fg-muted);
}

.oar-briefing__commitments-drawer-arrow {
  opacity: 0.45;
}

.oar-briefing__section-narrative {
  margin: calc(-1 * var(--s-space-2)) 0 var(--s-space-3);
  padding: 0;
  font-size: var(--s-font-size-2);
  color: var(--s-color-fg-soft);
  line-height: 1.45;
  max-width: 52rem;
}

.oar-briefing__past-heading {
  margin: var(--s-space-5) 0 var(--s-space-3);
  padding: 0;
  border-block: none;
  border-bottom: 1px solid var(--s-color-border-subtle);
  padding-bottom: var(--s-space-2);
  font-size: var(--s-font-size-caption);
  font-weight: var(--s-font-weight-semibold);
  font-variant: all-small-caps;
  letter-spacing: 0.07em;
  color: var(--s-color-fg-muted);
}

.oar-briefing__past-heading-count {
  font-variant-numeric: tabular-nums;
  font-weight: var(--s-font-weight-medium);
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--s-font-size-caption);
}

.oar-briefing__skip-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-2);
  margin: 0 0 var(--s-space-4);
}

.oar-briefing__skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  /* -1px margin: visually-hidden skip-link pattern (off-screen until focus). */
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.oar-briefing__skip-link:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  overflow: visible;
  white-space: normal;
  padding: var(--s-space-2) var(--s-space-3);
  border-radius: var(--s-radius-2);
  background: var(--s-color-bg-card);
  border: 1px solid var(--s-color-border-subtle);
  color: var(--s-color-fg-primary);
  font: inherit;
  font-size: var(--s-font-size-caption);
  text-decoration: none;
}

.oar-briefing__skip-link:focus-visible {
  outline: 2px solid var(--oar-briefing-focus-ring);
  outline-offset: 2px;
}

/* --oar-briefing-focus-ring is defined in admin-tokens.css with light + dark variants. */

.oar-briefing :is(button, summary):focus-visible,
.oar-briefing a[href]:focus-visible,
.oar-briefing-drawer :is(button, a[href]):focus-visible,
.oar-drawer-backdrop:has(.oar-briefing-drawer) :is(button, a[href]):focus-visible {
  outline: 2px solid var(--oar-briefing-focus-ring);
  outline-offset: 2px;
}

.oar-briefing__keys-help-backdrop {
  position: fixed;
  inset: 0;
  z-index: 220;
  background: var(--oar-keys-help-backdrop-scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-space-4);
  box-sizing: border-box;
}

.oar-briefing__keys-help {
  width: min(28rem, 100%);
  max-height: min(80vh, 32rem);
  overflow: auto;
  padding: var(--s-space-4);
  border-radius: var(--s-radius-2);
  border: 1px solid var(--s-color-border-subtle);
  background: var(--s-color-bg-panel);
  box-sizing: border-box;
}

.oar-briefing__keys-help-title {
  margin: 0 0 var(--s-space-2);
  font-size: var(--s-font-size-3);
}

.oar-briefing__keys-help-lead {
  margin: 0 0 var(--s-space-3);
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
  line-height: 1.45;
}

.oar-briefing__keys-help-list {
  margin: 0 0 var(--s-space-4);
  padding-left: 1.25rem;
  font-size: var(--s-font-size-1);
  line-height: 1.5;
}

.oar-briefing__keys-help-list kbd {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-1);
  padding: 0.1rem 0.35rem;
  border-radius: var(--s-radius-1);
  border: 1px solid var(--s-color-border-subtle);
  background: var(--s-color-bg-subtle);
}

.oar-briefing__keys-help-soon-title {
  margin: var(--s-space-4) 0 var(--s-space-2);
  font-size: var(--s-font-size-2);
}

.oar-briefing__keys-help-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--s-space-3);
}

.oar-briefing__keys-help-close {
  appearance: none;
  border: 1px solid var(--s-color-border-strong);
  background: var(--s-color-bg-app);
  color: var(--s-color-fg-primary);
  font: inherit;
  font-weight: var(--s-font-weight-semibold);
  padding: var(--s-space-2) var(--s-space-4);
  border-radius: var(--s-radius-2);
  cursor: pointer;
}

@media (max-width: 1023px) {
  /* Briefing tab mobile fallback (known incomplete — full responsive shell nav is separate work). */
  .admin-shell:has(.main-content .oar-briefing) > .sidebar {
    visibility: hidden;
    pointer-events: none;
  }

  .oar-briefing__viewport {
    max-width: 100%;
    overflow-x: hidden;
    padding-inline: var(--s-space-3);
    box-sizing: border-box;
  }

  .oar-briefing__action-band {
    gap: var(--s-space-2);
  }

  .oar-briefing__action-row {
    grid-template-columns: 1fr;
    align-items: stretch;
    min-height: 44px;
    padding-block: var(--s-space-3);
    box-sizing: border-box;
  }

  .oar-briefing__today-row {
    grid-template-columns: 1fr;
    align-items: stretch;
    min-height: 44px;
    padding-block: var(--s-space-3);
    box-sizing: border-box;
  }

  .oar-briefing__today-row-trail {
    justify-content: flex-start;
    justify-self: start;
  }

  .oar-briefing__today-row-meta {
    text-align: left;
    justify-self: start;
  }

  .oar-briefing__row {
    min-height: 44px;
    box-sizing: border-box;
    align-items: center;
  }

  .oar-briefing__commitments-row {
    min-height: 44px;
    padding-block: var(--s-space-3);
    box-sizing: border-box;
  }

  .oar-briefing__expand-toggle {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .oar-drawer-backdrop:has(.oar-briefing-drawer) {
    justify-content: center;
    align-items: flex-end;
  }

  .oar-drawer-backdrop .oar-briefing-drawer.oar-drawer {
    width: 100%;
    max-width: none;
    max-height: 75vh;
    height: auto;
    border-left: none;
    border-top: 1px solid var(--s-color-border);
    border-radius: var(--s-radius-2) var(--s-radius-2) 0 0;
    align-self: stretch;
  }

  .oar-briefing-drawer__inner--md .oar-briefing-drawer__scroll {
    max-height: calc(75vh - var(--s-space-4));
  }
}

@media (max-width: 480px) {
  .oar-briefing,
  .oar-briefing button,
  .oar-briefing a {
    font-size: max(1rem, var(--s-font-size-2));
  }

  .oar-briefing-drawer .oar-drawer__meta {
    flex-direction: column;
    align-items: flex-start;
  }
}

.oar-briefing__lane-row--past {
  opacity: 0.72;
}

.oar-briefing__lane-row--past .oar-briefing__row-desc {
  font-weight: var(--s-font-weight-regular);
}

.oar-briefing__expand-toggle {
  display: block;
  margin: var(--s-space-2) 0 var(--s-space-4);
  padding: var(--s-space-twohair) var(--s-space-2);
  font: inherit;
  font-size: var(--s-font-size-caption);
  border: none;
  background: transparent;
  color: var(--s-color-accent-active);
  cursor: pointer;
  border-radius: var(--s-radius-2);
  text-align: left;
}

.oar-briefing__expand-toggle:hover {
  background: var(--s-color-bg-subtle);
}

.oar-briefing__row-drawer-arrow {
  margin-left: auto;
  padding-left: var(--s-space-2);
  opacity: 0.4;
  font-size: var(--s-font-size-caption);
  flex-shrink: 0;
}

.oar-briefing__hero-text {
  margin: 0;
  font-size: var(--s-font-size-2);
  line-height: 1.45;
}

.oar-briefing__rec-expand {
  margin-top: var(--s-space-2);
  font-size: var(--s-font-size-caption);
  color: var(--s-color-fg-muted);
}

.oar-briefing__rec-expand .oar-briefing__recommendation {
  margin-top: var(--s-space-2);
  font-size: var(--s-font-size-caption);
}

.oar-briefing__ws-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-2);
  margin-bottom: var(--s-space-4);
}

.oar-briefing__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-space-2) var(--s-space-3);
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: var(--s-space-2) var(--s-space-3);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-2);
  border-left: 3px solid transparent;
  background: var(--s-color-bg-card);
  transition: border-color 0.12s ease, background 0.12s ease;
}

.oar-briefing__row--attention {
  border-left-color: var(--oar-column-inbox-accent);
}

.oar-briefing__row-verb--loud {
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-primary);
}

.oar-briefing__row:hover {
  border-color: var(--s-color-fg-muted);
  background: var(--s-color-bg-subtle);
}

/* Optional leading glyph when briefing payload sets non-empty `icon` (iter6: no discipline letters). */
.oar-briefing__row-icon {
  flex: 0 0 auto;
  font-size: var(--s-font-size-1);
  line-height: 1;
  font-family: var(--s-font-mono);
  font-weight: var(--s-font-weight-semibold);
}

.oar-briefing__row-main {
  flex: 1 1 12rem;
  display: flex;
  flex-direction: column;
  gap: var(--s-space-1);
  min-width: 0;
}

.oar-briefing__row-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-space-1) var(--s-space-2);
  width: 100%;
  min-width: 0;
}

.oar-briefing__row-title-row .oar-briefing__row-title {
  flex: 1 1 8rem;
  min-width: 0;
}

.oar-briefing__row-title-row .oar-briefing__row-verb {
  margin-inline-start: auto;
}

.oar-briefing__row-bucket,
.oar-briefing__row-layer {
  display: inline-flex;
  align-items: center;
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-medium);
  padding: var(--s-space-tight-3) var(--s-space-1);
  border-radius: var(--s-radius-1);
  margin-inline-start: var(--s-space-1);
}

.oar-briefing__row-bucket {
  border: 0.5px solid transparent;
}

.oar-briefing__row-bucket--default {
  background: var(--surface-tag-fallback-color);
  color: var(--surface-tag-fallback-fg);
}

.oar-briefing__row-bucket--design-system {
  background: var(--surface-tag-design-system-color);
  color: var(--surface-tag-design-system-fg);
}

.oar-briefing__row-bucket--operations {
  background: var(--surface-tag-operations-color);
  color: var(--surface-tag-operations-fg);
}

.oar-briefing__row-bucket--provenance {
  background: var(--surface-tag-provenance-color);
  color: var(--surface-tag-provenance-fg);
}

.oar-briefing__row-bucket--marketing {
  background: var(--surface-tag-marketing-color);
  color: var(--surface-tag-marketing-fg);
}

.oar-briefing__row-bucket--macro-and-structures {
  background: var(--surface-tag-macro-color);
  color: var(--surface-tag-macro-fg);
}

.oar-briefing__row-bucket--routing {
  background: var(--surface-tag-routing-color);
  color: var(--surface-tag-routing-fg);
}

.oar-briefing__row-bucket--shell {
  background: var(--surface-tag-shell-color);
  color: var(--surface-tag-shell-fg);
}

.oar-briefing__row-bucket--studio {
  background: var(--surface-tag-studio-color);
  color: var(--surface-tag-studio-fg);
}

.oar-briefing__row-bucket--projects {
  background: var(--surface-tag-projects-color);
  color: var(--surface-tag-projects-fg);
}

/* Secondary IA axis — quieter than workstream bucket chips (iter7). */
.oar-briefing__row-category {
  display: inline-flex;
  align-items: center;
  font-size: var(--s-font-size-micro);
  font-weight: var(--s-font-weight-regular);
  padding: var(--s-space-tight-3) var(--s-space-1);
  border-radius: var(--s-radius-1);
  margin-inline-start: var(--s-space-1);
  background: transparent;
  color: var(--s-color-fg-muted);
  border: 1px solid var(--s-color-border-subtle);
}

.oar-briefing__row-layer {
  background: transparent;
  color: var(--s-color-fg-muted);
  border: 1px solid var(--s-color-border-subtle);
  font-weight: var(--s-font-weight-regular);
}

.oar-briefing__row-title {
  font-weight: var(--s-font-weight-semibold);
  font-size: var(--s-font-size-2);
}

.oar-briefing__row-desc {
  font-size: var(--s-font-size-caption);
  color: var(--s-color-fg-muted);
  line-height: 1.4;
}

.oar-briefing__row-verb {
  flex: 0 0 auto;
  font-size: var(--s-font-size-caption);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--s-color-fg-muted);
}

.oar-briefing__row-surface {
  flex: 0 0 auto;
  font-size: var(--s-font-size-caption);
}

.oar-briefing__badge {
  flex: 0 0 auto;
  font-size: var(--s-font-size-caption);
  padding: 0.1rem var(--s-space-2);
  border-radius: var(--s-radius-1);
  border: 1px solid var(--s-color-border-subtle);
  background: var(--s-color-bg-subtle);
}

.oar-briefing__badge--blocker {
  border-color: color-mix(in oklab, var(--s-color-error) 35%, transparent);
  color: var(--s-color-error);
}

.oar-briefing__badge--ambig {
  font-weight: var(--s-font-weight-bold);
}

.oar-briefing__test-surface-badge {
  flex: 0 0 auto;
  font-size: var(--s-font-size-caption);
  font-weight: var(--s-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.08rem var(--s-space-2);
  border-radius: var(--s-radius-1);
  border: 1px solid var(--s-color-border-strong);
  color: var(--s-color-fg-muted);
  background: var(--s-color-bg-subtle);
}

/* Briefing iter11.0 — read-state triage + ⌘K cheatsheet host */
.oar-briefing__read-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-2);
  align-items: center;
  margin: var(--s-space-2) 0 var(--s-space-3);
}

.oar-briefing__read-filter-chip {
  border: 1px solid var(--s-color-border-subtle);
  background: var(--s-color-bg-app);
  color: var(--s-color-fg-muted);
  padding: var(--s-space-1) var(--s-space-3);
  border-radius: var(--s-radius-1);
  font: inherit;
  cursor: pointer;
  transition:
    background var(--s-duration-fast),
    border-color var(--s-duration-fast),
    color var(--s-duration-fast);
}

.oar-briefing__read-filter-chip:hover {
  color: var(--s-color-fg-primary);
  background: var(--s-color-hover-bg);
}

.oar-briefing__read-filter-chip--active {
  border-color: var(--s-color-fg-muted);
  background: var(--s-color-bg-card);
  color: var(--s-color-fg-primary);
}

.oar-briefing__read-chip {
  flex: 0 0 auto;
  font-size: var(--s-font-size-caption);
  line-height: 1;
  margin-inline-start: var(--s-space-1);
  opacity: 0.85;
}

.oar-briefing__row[data-read-state="unread"] .oar-briefing__row-title,
.oar-briefing__action-row[data-read-state="unread"] .oar-briefing__action-title,
.oar-briefing__today-row[data-read-state="unread"] .oar-briefing__row-title,
.oar-briefing__commitments-row[data-read-state="unread"] .oar-briefing__commitments-title {
  font-weight: var(--s-font-weight-bold);
}

.oar-briefing__row[data-read-state="read"] .oar-briefing__row-title,
.oar-briefing__action-row[data-read-state="read"] .oar-briefing__action-title,
.oar-briefing__today-row[data-read-state="read"] .oar-briefing__row-title,
.oar-briefing__commitments-row[data-read-state="read"] .oar-briefing__commitments-title {
  font-weight: var(--s-font-weight-regular);
  color: var(--s-color-fg-muted);
}

.oar-briefing__row[data-read-state="acked"] .oar-briefing__row-title,
.oar-briefing__action-row[data-read-state="acked"] .oar-briefing__action-title,
.oar-briefing__today-row[data-read-state="acked"] .oar-briefing__row-title,
.oar-briefing__commitments-row[data-read-state="acked"] .oar-briefing__commitments-title {
  font-weight: var(--s-font-weight-regular);
  color: var(--s-color-fg-muted);
  opacity: 0.88;
}

/* ⌘K palette + cheatsheet layout: guide/shell/css/components/command-palette.css */

/* DS keyboard cheatsheet — ⌘K palette bottom + roadmap help panels */
.ds-component--keyboard-cheatsheet {
  flex: 0 1 auto;
  border-top: 1px solid var(--s-color-border-subtle);
  padding: var(--s-space-3) var(--s-space-4);
  background: var(--s-color-bg-subtle);
  min-height: 7rem;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  width: 100%;
}

.ds-component--keyboard-cheatsheet--compact {
  max-height: 36%;
  min-height: 5.5rem;
  padding-top: var(--s-space-hair);
  padding-bottom: var(--s-space-hair);
}

.ds-component--keyboard-cheatsheet--compact .ds-component--keyboard-cheatsheet-title {
  margin-bottom: var(--s-space-1);
  font-size: var(--s-font-size-caption);
}

.ds-component--keyboard-cheatsheet--compact .ds-component--keyboard-cheatsheet-list li {
  font-size: var(--s-font-size-caption);
  gap: var(--s-space-2);
}

.ds-component--keyboard-cheatsheet-title {
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--s-color-fg-secondary);
  margin-bottom: var(--s-space-3);
}

.ds-component--keyboard-cheatsheet-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-space-2);
}

.ds-component--keyboard-cheatsheet-list li {
  display: flex;
  gap: var(--s-space-4);
  align-items: baseline;
  font-size: var(--s-font-size-2);
  line-height: 1.45;
  min-width: 0;
}

.ds-component--keyboard-cheatsheet-key-slot {
  flex: 0 0 38%;
  min-width: 9rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-space-1);
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-primary);
}

.ds-component--keyboard-cheatsheet-key-sep {
  color: var(--s-color-fg-soft);
}

.ds-component--keyboard-cheatsheet-action {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--s-color-fg-secondary);
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

.ds-component--keyboard-cheatsheet-fallback {
  color: var(--s-color-fg-muted);
  font-style: italic;
}

/* DS key-pill atom */
.ds-component--key-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: baseline;
}

.ds-component--key-pill > kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: var(--s-space-hair) var(--s-space-1);
  min-width: 1.55em;
  font-family: var(--s-font-mono);
  font-size: inherit;
  line-height: 1.25;
  color: var(--s-color-fg-primary);
  background: var(--s-color-bg-surface);
  border: 1px solid var(--s-color-border);
  border-radius: var(--s-radius-1);
  box-shadow: none;
}

.ds-component--key-pill:active > kbd {
  transform: translateY(1px);
  box-shadow: none;
}

.ds-component--key-pill[disabled] > kbd,
.ds-component--key-pill.ds-component--key-pill--disabled > kbd {
  opacity: 0.48;
  pointer-events: none;
}

.oar-briefing-drawer__body {
  padding: var(--s-space-3) var(--s-space-4);
  overflow: auto;
  max-height: min(70vh, 40rem);
}

.oar-briefing-drawer__state {
  font-size: var(--s-font-size-0);
  font-weight: var(--s-font-weight-semibold);
  padding: var(--s-space-2) var(--s-space-3);
  margin: 0;
  border-bottom: 1px solid var(--s-color-border-subtle);
}

.oar-briefing-drawer__state--eyes {
  background: var(--oar-state-eyes-bg);
  color: var(--oar-state-eyes-fg);
}

.oar-briefing-drawer__state--decision {
  background: var(--oar-state-decision-bg);
  color: var(--oar-state-decision-fg);
}

.oar-briefing-drawer__state--informational {
  background: var(--s-color-bg-subtle);
  color: var(--s-color-fg-muted);
}

.oar-briefing-drawer__surface-callout {
  margin: var(--s-space-3) 0;
  padding: var(--s-space-2);
  border-radius: var(--s-radius-1);
  border: 1px solid var(--s-color-border-subtle);
  background: var(--s-color-bg-subtle);
}

.oar-briefing-drawer__surface-callout-label {
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-muted);
  margin-bottom: var(--s-space-1);
}

.oar-briefing-drawer__surface-link {
  font-weight: var(--s-font-weight-semibold);
  word-break: break-all;
}

.oar-briefing-drawer__decision-lead {
  margin: var(--s-space-3) 0;
  font-size: var(--s-font-size-1);
  line-height: 1.35;
}

.oar-briefing-drawer__orient-wrap {
  margin: var(--s-space-2) 0;
}

.oar-briefing-drawer__md-host {
  max-height: none;
  overflow: visible;
  margin: var(--s-space-2) 0 var(--s-space-3);
  padding: var(--s-space-2);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
  background: var(--s-color-bg-subtle);
  font-size: var(--s-font-size-caption);
}

.oar-markdown-scroll__section {
  margin-bottom: var(--s-space-3);
}

.oar-markdown-scroll__h {
  font-size: var(--s-font-size-1);
  margin: var(--s-space-2) 0;
}

.oar-markdown-scroll__body {
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.oar-briefing-drawer__pre {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: var(--s-font-size-caption);
  line-height: 1.45;
  margin: var(--s-space-2) 0 0;
  padding: var(--s-space-2);
  border-radius: var(--s-radius-1);
  background: var(--s-color-bg-subtle);
  border: 1px solid var(--s-color-border-subtle);
}

.oar-briefing-drawer__subh {
  font-size: var(--s-font-size-2);
  margin: var(--s-space-3) 0 var(--s-space-2);
}

.oar-briefing-drawer__dl {
  margin: var(--s-space-2) 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-space-1) var(--s-space-3);
  font-size: var(--s-font-size-caption);
}

.oar-briefing-drawer__dl dt {
  font-weight: var(--s-font-weight-semibold);
}

.oar-briefing-drawer__dl dd {
  margin: 0;
}

.oar-briefing-drawer__rec {
  margin-top: var(--s-space-4);
  font-size: var(--s-font-size-caption);
}

/* Briefing iter11.7 — compact sticky header row + sticky footer actions */
.oar-briefing-drawer .oar-drawer__header.oar-drawer__header--compact {
  padding: var(--s-space-2) var(--s-space-3);
  margin-bottom: 0;
}

.oar-briefing-drawer .oar-drawer__header--compact .oar-drawer__chips {
  flex: 1;
  min-width: 0;
}

.oar-drawer__title--visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.oar-briefing-drawer .oar-drawer__close--icon {
  flex-shrink: 0;
  align-self: flex-start;
  min-width: 2.25rem;
  padding: var(--s-space-1) var(--s-space-2);
  font-size: 1.25rem;
  line-height: 1;
  font-weight: var(--s-font-weight-semibold);
}

.oar-drawer__footer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-space-2);
  padding: var(--s-space-2) var(--s-space-3);
  box-sizing: border-box;
}

.oar-drawer__footer-aux:not(:empty) {
  padding: var(--s-space-2) var(--s-space-3) var(--s-space-1);
  border-top: 1px solid var(--s-color-border-subtle);
}

.oar-drawer__test-mode-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  font-size: var(--s-font-size-1);
  line-height: 1;
  color: var(--s-color-fg-muted);
}

.oar-briefing__surface-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.35rem;
  margin-left: var(--s-space-1);
  border-radius: var(--s-radius-1);
  border: 1px solid var(--s-color-border-subtle);
  font-size: var(--s-font-size-caption);
  font-weight: var(--s-font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--s-color-fg-muted);
  background: var(--s-color-bg-subtle);
}

.oar-briefing-drawer .oar-drawer__body {
  padding: var(--s-space-3) var(--s-space-4);
  box-sizing: border-box;
}

.oar-briefing-drawer .oar-drawer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-space-2);
  font-size: var(--s-font-size-0);
}

.oar-drawer__chip--tier {
  color: var(--s-color-fg-secondary);
}

.oar-drawer__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.45rem;
  border-radius: var(--s-radius-1);
  font-size: var(--s-font-size-caption);
  font-weight: var(--s-font-weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--s-color-border-subtle);
  background: var(--s-color-bg-app);
  color: var(--s-color-fg-muted);
}

.oar-drawer__chip--verb {
  color: var(--s-color-fg-muted);
  border-color: var(--s-color-border-subtle);
  background: var(--s-brand-50);
}

.oar-drawer__chip--workstream {
  font-weight: var(--s-font-weight-medium);
}

.oar-drawer__chip--category {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--s-font-size-caption);
  opacity: 0.92;
}

.oar-drawer__chip--meta {
  text-transform: none;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  font-size: var(--s-font-size-caption);
}

.oar-drawer__chip--tier {
  border-color: var(--s-color-border-strong);
}

.oar-drawer__chip--tier-a {
  border-color: var(--s-tier-a-edge-color);
  box-shadow: none;
}

.oar-drawer__legacy {
  margin-top: var(--s-space-2);
  font-size: var(--s-font-size-caption);
  color: var(--s-color-fg-muted);
  opacity: 0.75;
}

.oar-drawer__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-space-2);
  margin-top: var(--s-space-4);
  justify-content: flex-end;
}

.oar-drawer__info-tip {
  appearance: none;
  margin: 0;
  padding: 0 var(--s-space-1);
  border: none;
  background: transparent;
  cursor: help;
  font: inherit;
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
  line-height: 1.2;
  vertical-align: middle;
}

.oar-drawer__verb-action {
  appearance: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-weight: var(--s-font-weight-semibold);
  font-size: var(--s-font-size-2);
  padding: var(--s-space-2) var(--s-space-4);
  border-radius: var(--s-radius-2);
  color: var(--s-color-on-accent);
  background: var(--s-brand-500);
}

.oar-drawer__verb-action:hover {
  filter: brightness(1.06);
}

.oar-drawer__edit {
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-weight: var(--s-font-weight-medium);
  /* Match .oar-drawer__primary-action sizing — Caitlin 2026-05-21 footer button
     consistency. Both buttons share the same size; primary/secondary distinction
     stays via color + border-radius. */
  font-size: var(--s-font-size-1);
  padding: var(--s-space-1) var(--s-space-3);
  border-radius: var(--s-radius-1);
  border: 1px solid var(--s-color-border-strong);
  background: var(--s-color-bg-panel);
  color: var(--s-color-fg-primary);
}

.oar-drawer__edit:hover {
  background: var(--s-color-bg-subtle);
}

.oar-drawer__body {
  font-size: var(--s-font-size-2);
}

.oar-briefing-drawer .oar-drawer__body {
  padding: var(--s-space-3) var(--s-space-4);
  box-sizing: border-box;
}

.oar-drawer__body-lead {
  margin-bottom: var(--s-space-3);
}

.oar-drawer__why-callout {
  margin: 0 0 var(--s-space-4);
  padding: var(--s-space-3);
  border-radius: var(--s-radius-2);
  border-left: 3px solid var(--s-color-border-strong);
  background: var(--s-color-bg-subtle);
  font-style: italic;
  color: var(--s-color-fg-secondary);
}

.oar-drawer__md-prose {
  line-height: 1.5;
}

.oar-drawer__md-prose :where(p) {
  margin: 0 0 var(--s-space-3);
}

.oar-drawer__md-prose :where(p:last-child) {
  margin-bottom: 0;
}

.oar-drawer__md-prose :where(h1, h2, h3, h4) {
  margin: var(--s-space-4) 0 var(--s-space-2);
  font-weight: var(--s-font-weight-semibold);
  line-height: 1.25;
}

.oar-drawer__md-prose :where(h1) {
  font-size: var(--s-font-size-2);
}

.oar-drawer__md-prose :where(ul, ol) {
  margin: 0 0 var(--s-space-3);
  padding-left: 1.25rem;
}

.oar-drawer__md-prose :where(code) {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-1);
}

.oar-drawer__md-prose :where(pre) {
  overflow: auto;
  padding: var(--s-space-2);
  border-radius: var(--s-radius-1);
  border: 1px solid var(--s-color-border-subtle);
  background: var(--s-color-bg-panel);
  font-size: var(--s-font-size-caption);
}

.oar-drawer__md-prose :where(table) {
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 var(--s-space-3);
  font-size: var(--s-font-size-caption);
}

.oar-drawer__md-prose :where(th, td) {
  border: 1px solid var(--s-color-border-subtle);
  padding: var(--s-space-2);
  text-align: left;
}

.oar-drawer__refs {
  margin-top: var(--s-space-4);
  padding-top: var(--s-space-4);
  border-top: 1px dashed var(--s-color-border-subtle);
}

.oar-drawer__refs-label {
  font-size: var(--s-font-size-caption);
  color: var(--s-color-fg-muted);
  margin-bottom: var(--s-space-2);
}

.oar-drawer__refs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-2);
}

.oar-drawer__refs-chip {
  font-size: var(--s-font-size-caption);
  padding: 0.15rem 0.5rem;
  border-radius: var(--s-radius-1);
  border: 1px solid var(--s-color-border-subtle);
  background: var(--s-color-bg-panel);
  color: var(--s-color-fg-primary);
  text-decoration: none;
  word-break: break-all;
}

.oar-drawer__refs-chip:hover {
  border-color: var(--s-color-accent-active);
}

/* Kanban DnD → brief frontmatter writeback (dev server) */
.oar-roadmap-toast {
  position: fixed;
  z-index: 90;
  inset-block-end: var(--s-space-4);
  inset-inline: 50% auto;
  transform: translateX(-50%);
  max-inline-size: min(90vw, 32rem);
  padding: var(--s-space-3) var(--s-space-4);
  border-radius: var(--s-radius-2);
  border: 1px solid var(--s-color-border-subtle);
  background: var(--s-color-bg-panel);
  color: var(--s-color-fg-primary);
  font-size: var(--s-font-size-caption);
}

.oar-roadmap-toast--error {
  border-color: var(--s-color-error-border);
  color: var(--s-color-error-fg);
  background: var(--s-color-error-bg);
}

.oar-roadmap-toast--info {
  border-color: var(--s-color-border-strong);
}

.oar-phasecard.oar-phasecard--dragging {
  opacity: 0.55;
  cursor: grabbing;
}

.oar-kanban-col--dnd-target {
  outline: 2px dashed var(--s-color-accent-active);
  outline-offset: 2px;
}

.oar-ll-review-verdict {
  margin: var(--s-space-4) 0;
  padding: var(--s-space-3);
  border-radius: var(--s-radius-2);
  border: 1px dashed var(--s-color-border-subtle);
  background: var(--s-color-bg-subtle);
}

.oar-ll-review-verdict summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--s-font-size-caption);
  margin-bottom: var(--s-space-2);
}

.oar-ll-review-verdict__pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-caption);
  line-height: 1.45;
  max-block-size: 16rem;
  overflow: auto;
}

/* Otto spawn affordance (shell dev) */
.oar-spawn-confirm-sub {
  margin: 0;
  font-size: var(--s-font-size-caption);
  color: var(--s-color-fg-muted);
}

.oar-phasecard--spawning,
.oar-briefing__row--spawning,
.oar-briefing__today-row.oar-briefing__row--spawning {
  opacity: 0.65;
  outline: 1px dashed var(--s-color-accent-active);
  outline-offset: 1px;
}

.oar-spawn-aff-ctx {
  min-width: 12rem;
  padding: var(--s-space-1) 0;
  border-radius: var(--s-radius-2);
  border: 1px solid var(--s-color-border-subtle);
  background: var(--s-color-bg-panel);
  box-shadow: none;
}

.oar-spawn-aff-ctx__btn {
  display: block;
  width: 100%;
  text-align: start;
  padding: var(--s-space-2) var(--s-space-3);
  border: none;
  background: transparent;
  font: inherit;
  color: var(--s-color-fg-primary);
  cursor: pointer;
}

.oar-spawn-aff-ctx__btn:hover,
.oar-spawn-aff-ctx__btn:focus-visible {
  background: var(--s-color-bg-subtle);
}

.oar-spawn-aff-ctx__hr {
  margin: var(--s-space-1) 0;
  border: none;
  border-top: 1px solid var(--s-color-border-subtle);
}

/* ── Brief drawer iter11.6 — progressive disclosure ───────────────── */

.oar-drawer__brief-summary-line {
  font-size: var(--s-font-size-1);
  line-height: 1.45;
  margin-bottom: var(--s-space-2);
  padding-bottom: var(--s-space-2);
  border-bottom: 1px solid var(--s-color-border-subtle);
  color: var(--s-color-fg-primary);
}

.oar-drawer__brief-summary-line--header {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-secondary);
}

.oar-drawer__prev-version {
  margin: var(--s-space-3) 0;
  padding: var(--s-space-2);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
  background: var(--s-color-bg-subtle);
}

.oar-drawer__prev-version summary {
  cursor: pointer;
  font-size: var(--s-font-size-1);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-muted);
}

.oar-drawer-body-section-collapsed {
  margin: var(--s-space-3) 0;
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
  padding: var(--s-space-2);
  background: var(--s-color-bg-app);
}

.oar-drawer-body-section-collapsed summary {
  cursor: pointer;
  font-weight: var(--s-font-weight-semibold);
  font-size: var(--s-font-size-1);
}

.oar-drawer-body-section-collapsed__inner {
  margin-top: var(--s-space-2);
}

.oar-drawer__pre-wrap {
  position: relative;
}

.oar-drawer__pre-copy {
  position: absolute;
  top: var(--s-space-2);
  right: var(--s-space-2);
  font-size: var(--s-font-size-0);
  padding: 2px var(--s-space-2);
  border-radius: var(--s-radius-1);
  border: 1px solid var(--s-color-border);
  background: var(--s-color-bg-panel);
  cursor: pointer;
}

.oar-drawer__copy-live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.oar-drawer__img-lightbox-backdrop {
  position: fixed;
  inset: 0;
  z-index: 12000;
  background: color-mix(in oklch, var(--s-color-bg-strong) 72%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-space-5);
}

.oar-drawer__img-lightbox-inner {
  position: relative;
  max-width: min(96vw, 1200px);
  max-height: 92vh;
}

.oar-drawer__img-lightbox-inner img {
  max-width: 100%;
  max-height: 92vh;
  display: block;
}

.oar-drawer__img-lightbox-close {
  position: absolute;
  top: -2.25rem;
  right: 0;
  border: none;
  background: transparent;
  color: var(--s-color-fg-on-strong);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}

.oar-briefing-drawer__ship-snapshot {
  margin-top: var(--s-space-4);
  padding-top: var(--s-space-3);
  border-top: 1px solid var(--s-color-border-subtle);
}

.oar-briefing-drawer__ship-snapshot-btn {
  margin-bottom: var(--s-space-2);
}

.oar-ship-snapshot-lightbox {
  max-width: min(96vw, 1200px);
  display: flex;
  flex-direction: column;
  gap: var(--s-space-3);
}

.oar-ship-snapshot-lightbox__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-2);
}

.oar-ship-snapshot-lightbox__tab[aria-pressed="true"] {
  outline: 2px solid var(--s-color-accent-active);
}

/* ── Overview dashboard (#/) ─────────────────────────────────── */
.ov-page {
  max-width: 52rem;
}

.ov-header {
  margin-bottom: var(--s-space-5);
}

.ov-header__primary {
  font-size: var(--s-font-size-2);
  font-weight: var(--s-font-weight-semibold);
  color: var(--s-color-fg-primary);
}

.ov-header__secondary {
  margin-top: var(--s-space-2);
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-muted);
}

.ov-panel {
  margin-bottom: var(--s-space-5);
  padding: var(--s-space-4);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-2);
  background: var(--s-color-bg-panel);
}

.ov-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-space-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-space-3);
}

.ov-panel__h {
  margin: 0;
  font-size: var(--s-font-size-1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--s-color-fg-muted);
}

.ov-panel__link {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: var(--s-color-accent-active);
  text-decoration: underline;
}

.ov-panel__body {
  font-size: var(--s-font-size-1);
  line-height: 1.5;
}

.ov-muted {
  color: var(--s-color-fg-muted);
}

admin-overview-orphan-stashes {
  display: block;
}

admin-overview-orphan-stashes .ov-orphan-stashes {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-2);
  margin-top: var(--s-space-2);
}

.ov-orphan-stashes__row {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 1fr;
  gap: var(--s-space-2);
  align-items: start;
  font-size: var(--s-font-size-1);
}

.ov-orphan-stashes__row-main {
  display: flex;
  gap: var(--s-space-2);
  align-items: flex-start;
  min-width: 0;
}

.ov-orphan-stashes__detail {
  position: relative;
  flex-shrink: 0;
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
  padding: var(--s-space-hair) var(--s-space-1);
  font: inherit;
  font-size: var(--s-font-size-1);
  cursor: default;
  color: var(--oar-pill-stashed-fg);
  background: color-mix(in oklch, var(--oar-pill-stashed-bg) 80%, transparent);
}

.ov-orphan-stashes__detail:focus-visible {
  outline: 2px solid var(--s-color-status-info);
  outline-offset: 2px;
}

.ov-orphan-stashes__idx {
  font-family: ui-monospace, monospace;
  color: var(--oar-pill-stashed-fg);
}

.ov-orphan-stashes__meta {
  flex: 1;
  min-width: 0;
  color: var(--s-color-fg-muted);
}

.ov-today-row {
  display: grid;
  grid-template-columns: 5rem 1fr auto;
  gap: var(--s-space-2);
  padding: var(--s-space-2) 0;
  border-bottom: 1px solid var(--s-color-border-subtle);
}

.ov-today-verb {
  font-family: ui-monospace, monospace;
  font-size: var(--s-font-size-1);
}

.ov-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--s-space-3);
}

.ov-tile {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-1);
  padding: var(--s-space-3);
  border-radius: var(--s-radius-1);
  border: 1px solid var(--s-color-border-subtle);
  text-decoration: none;
  color: inherit;
  background: var(--s-color-bg-app);
}

.ov-tile:hover {
  border-color: var(--s-color-border);
}

/* ── Workshop / Health ──────────────────────────────────────────── */
.wh-page {
  max-width: 56rem;
}

.wh-head {
  display: flex;
  justify-content: space-between;
  gap: var(--s-space-4);
  align-items: flex-start;
  margin-bottom: var(--s-space-4);
}

.wh-h1 {
  margin: 0 0 var(--s-space-2);
  font-size: var(--s-font-size-4);
}

.wh-lead,
.wh-meta {
  margin: 0;
  color: var(--s-color-fg-muted);
  font-size: var(--s-font-size-1);
}

.wh-table {
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-2);
  overflow: hidden;
}

.wh-table__head {
  display: grid;
  grid-template-columns: 1.4fr 0.5fr 1.2fr 0.5fr 0.8fr;
  gap: var(--s-space-2);
  padding: var(--s-space-2) var(--s-space-3);
  font-size: var(--s-font-size-0);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--s-color-bg-subtle);
  color: var(--s-color-fg-muted);
}

.wh-row {
  width: 100%;
  display: grid;
  grid-template-columns: 1.4fr 0.5fr 1.2fr 0.5fr 0.8fr;
  gap: var(--s-space-2);
  align-items: center;
  padding: var(--s-space-2) var(--s-space-3);
  border: none;
  border-top: 1px solid var(--s-color-border-subtle);
  background: var(--s-color-bg-panel);
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.wh-row:hover {
  background: var(--s-color-bg-app);
}

.wh-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}

.wh-dot--g {
  background: color-mix(in oklch, green 55%, var(--s-color-bg-panel));
}

.wh-dot--a {
  background: color-mix(in oklch, orange 70%, var(--s-color-bg-panel));
}

.wh-dot--r {
  background: color-mix(in oklch, red 55%, var(--s-color-bg-panel));
}

.wh-split {
  font-family: ui-monospace, monospace;
  font-size: var(--s-font-size-1);
}

.wh-split__sep {
  opacity: 0.45;
  padding: 0 2px;
}

.wh-chip {
  padding: 1px 6px;
  border-radius: var(--s-radius-1);
  font-weight: var(--s-font-weight-semibold);
}

.wh-chip--g {
  background: color-mix(in oklch, green 22%, transparent);
}

.wh-chip--a {
  background: color-mix(in oklch, orange 28%, transparent);
}

.wh-chip--r {
  background: color-mix(in oklch, red 22%, transparent);
}

.wh-detail {
  padding: var(--s-space-3);
  background: var(--s-color-bg-app);
  border-top: 1px solid var(--s-color-border-subtle);
  font-size: var(--s-font-size-1);
}

.wh-rollup-wrap {
  margin-bottom: var(--s-space-4);
}

.wh-rollup {
  padding: var(--s-space-3);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-2);
}

.wh-rollup__sub {
  display: flex;
  gap: var(--s-space-4);
  flex-wrap: wrap;
  margin-top: var(--s-space-2);
}

.wh-muted {
  color: var(--s-color-fg-muted);
}

/* ── Workshop / Decisions ─────────────────────────────────────── */
.wd-page {
  max-width: 52rem;
}

.wd-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-space-4);
  margin-bottom: var(--s-space-4);
}

.wd-h1 {
  margin: 0 0 var(--s-space-2);
}

.wd-lead {
  margin: 0;
  color: var(--s-color-fg-muted);
}

.wd-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-3);
  margin-bottom: var(--s-space-4);
}

.wd-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
}

.wd-input {
  padding: 6px 8px;
  border-radius: var(--s-radius-1);
  border: 1px solid var(--s-color-border-subtle);
  background: var(--s-color-bg-app);
  color: inherit;
}

.wd-band {
  margin-bottom: var(--s-space-3);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
  padding: var(--s-space-2);
}

.wd-band__sum {
  cursor: pointer;
  font-weight: var(--s-font-weight-semibold);
}

.wd-row {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  text-align: left;
  padding: var(--s-space-2);
  border: none;
  border-top: 1px solid var(--s-color-border-subtle);
  background: transparent;
  cursor: pointer;
  font: inherit;
}

.wd-row__slug {
  font-family: ui-monospace, monospace;
  font-size: var(--s-font-size-1);
}

.wd-row__meta {
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-muted);
}

.wd-row__title {
  font-weight: var(--s-font-weight-semibold);
}

.wd-muted {
  color: var(--s-color-fg-muted);
}

.wd-drawer-root:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 11050;
}

.wd-drawer-root .wd-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in oklch, var(--s-color-bg-strong) 35%, transparent);
}

.wd-drawer-root .wd-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(640px, 96vw);
  overflow: auto;
  padding: var(--s-space-4);
  background: var(--s-color-bg-panel);
  border-left: 1px solid var(--s-color-border-subtle);
}

.wd-drawer__body {
  margin-top: var(--s-space-3);
}

.wd-drawer__body pre {
  overflow-x: auto;
}

/* ── Live-data-layer M1 — kanban tier chrome + Otto agent cards ─────────── */

.oar-kanban-live-status {
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
  padding: 0 var(--s-space-2) var(--s-space-2);
}

.oar-kanban-live-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--s-font-size-caption);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--s-radius-2);
  border: 1px solid var(--s-color-border-subtle);
}

.oar-kanban-live-badge--live {
  border-color: var(--s-color-accent-active);
  color: var(--s-color-accent-active);
  background: color-mix(in oklch, var(--s-brand-400) 12%, transparent);
}

.oar-kanban-live-badge--snapshot {
  color: var(--s-color-fg-muted);
}

/* Reconnecting tier — distinct from snapshot (gray) and live (green): visually
   warm to signal "in-flight, not yet live". Live-data-layer-dev-tier-honesty
   brief: badge should read "Reconnecting (yellow)" when the EventSource is in
   CONNECTING state, so dev visceral can tell the difference between never-tried
   (snapshot) and trying-now (reconnecting). */
.oar-kanban-live-badge--reconnecting {
  border-color: var(--s-color-warning-border);
  color: var(--s-color-warning-fg);
  background: var(--s-color-warning-bg);
}

.oar-kanban-live-badge--paused {
  border-color: var(--s-color-error-border);
  color: var(--s-color-error-fg);
  background: var(--s-color-error-bg);
}

/* Gate-A-asserted hook (verification_asserts: [data-live-badge][data-state="live"]) */
.admin-shell-live-tier-pill[data-state="live"] {
  /* visual treatment already lives on .oar-kanban-live-badge--live — this is the
     selector-stable name the verification_asserts block reads. */
}

/* M2B conflict block — same family as live-status / paused badge */
.oar-kanban-conflict-card {
  font-size: var(--s-font-size-caption);
  padding: var(--s-space-2) var(--s-space-3);
  margin-bottom: var(--s-space-2);
  border-radius: var(--s-radius-2);
  border: 1px solid var(--s-color-error-border);
  color: var(--s-color-error-fg);
  background: var(--s-color-error-bg);
}

.oar-kanban-conflict-card__title {
  font-weight: 600;
  margin-bottom: var(--s-space-1);
}

.oar-kanban-conflict-card__body {
  line-height: 1.35;
  margin-bottom: var(--s-space-2);
}

.oar-kanban-conflict-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-2);
}

.oar-kanban-conflict-card__btn {
  font: inherit;
  font-size: var(--s-font-size-caption);
  font-weight: 600;
  padding: 2px 10px;
  border-radius: var(--s-radius-2);
  border: 1px solid var(--s-color-error-border);
  background: #fff;
  color: var(--s-color-error-fg);
  cursor: pointer;
}

.oar-kanban-conflict-card__btn--ghost {
  background: transparent;
}

.oar-phasecard--otto-agent {
  box-shadow: none;
}

.oar-phasecard-chip--agent {
  font-size: var(--s-font-size-caption);
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--s-radius-1);
  background: color-mix(in oklch, var(--s-brand-500) 18%, transparent);
  color: var(--s-color-fg-primary);
}

/* Brief-level prototype marker (prototype: true frontmatter) — 2026-05-19 doctrine */
.prototype-chip {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  max-height: 22px;
  padding: 0 var(--s-space-2);
  border-radius: var(--s-radius-round);
  border: 1px solid var(--s-status-prototype-border);
  background: var(--s-status-prototype-bg);
  color: var(--s-status-prototype-fg);
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-0);
  font-weight: var(--s-font-weight-semibold);
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* ── Roadmap phase drawer iter11.9 — strip-stack shell ───────────────────── */

.oar-roadmap-shell-drawer.oar-drawer {
  position: relative;
  box-sizing: border-box;
  height: 100%;
  max-height: 100vh;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  gap: 0;
  display: flex;
  flex-direction: column;
  /* Restore opaque panel background — iter11.9 strip-stack shell intended
     inner strips to inherit through, but the wrapper itself must paint
     opaque or kanban columns bleed through. Caught 2026-05-12 by sub-agent
     audit of the phaseboard view.
     NOTE 2026-05-12: --s-color-bg-panel is dead-reference workspace-wide
     (only defined in ds-components dark/light theme scope); fall back to
     --s-cream-50 so the rule actually paints. Re-checked live via Chrome
     MCP — wrapper-only fix at 1131ae3e was rendering transparent because
     the token is undefined. */
  background: var(--s-color-bg-panel);
}

.oar-roadmap-drawer__resize-handle {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: ew-resize;
  z-index: 6;
}

.oar-roadmap-drawer__resize-handle:hover,
.oar-roadmap-drawer__resize-handle:focus-visible {
  background: color-mix(in oklch, var(--s-color-border-strong) 40%, transparent);
}

.oar-roadmap-drawer__inner {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-left: 6px;
  /* Inner strip-stack must paint opaque — wrapper bg alone leaks at strip
     seams due to flex stack stacking-context. Caught 2026-05-12 sub-agent
     re-audit after wrapper-only fix 1131ae3e shipped incomplete.
     Cream-50 fallback because --s-color-bg-panel is undefined globally. */
  background: var(--s-color-bg-panel);
}

.oar-roadmap-drawer__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-space-3);
  flex-shrink: 0;
  padding: var(--s-space-3) var(--s-space-4) var(--s-space-2);
  transition:
    transform var(--s-duration-fast) ease,
    opacity var(--s-duration-fast) ease;
  /* Opaque header — strip-stack child painted transparent by default. */
  background: var(--s-color-bg-panel);
}

.oar-roadmap-drawer__header--sticky-compact {
  transform: translateY(-6px);
  opacity: 0.94;
}

.oar-roadmap-drawer__title-stack {
  flex: 1;
  min-width: 0;
}

.oar-roadmap-drawer__purpose {
  margin: var(--s-space-1) 0 0;
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.oar-roadmap-drawer__head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-2);
  align-items: flex-start;
  justify-content: flex-end;
}

.oar-roadmap-drawer__header-collapsed {
  display: none;
  align-items: center;
  gap: var(--s-space-2);
  padding: var(--s-space-2) var(--s-space-4);
  border-bottom: 1px solid var(--s-color-border-subtle);
  background: var(--s-color-bg-panel);
  position: sticky;
  top: 0;
  z-index: 4;
}

.oar-roadmap-drawer__header-collapsed.is-visible {
  display: flex;
}

.oar-roadmap-drawer__mini-title {
  font-weight: var(--s-font-weight-semibold);
  font-size: var(--s-font-size-1);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oar-roadmap-drawer__mini-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-1);
  max-width: 42%;
}

.oar-roadmap-drawer__sync-hint {
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-muted);
  padding: 0 var(--s-space-4) var(--s-space-2);
  /* Opaque hint strip — strip-stack child painted transparent by default. */
  background: var(--s-color-bg-panel);
}

.oar-roadmap-drawer__tag-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-space-2);
  padding: 0 var(--s-space-4) var(--s-space-3);
  border-bottom: 1px solid var(--s-color-border-subtle);
}

.oar-roadmap-drawer__tag-auto {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-1);
  align-items: center;
  flex: 1;
  min-width: 0;
}

.oar-roadmap-drawer__tag-divider {
  width: 1px;
  align-self: stretch;
  min-height: 1.25rem;
  background: var(--s-color-border-subtle);
}

.oar-roadmap-drawer__tag-user {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-1);
}

.oar-roadmap-drawer__user-tag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 8px;
  border-radius: var(--s-radius-1);
  background: var(--s-color-bg-subtle);
  font-size: var(--s-font-size-0);
}

.oar-roadmap-drawer__user-tag-rm {
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: var(--s-color-fg-muted);
  padding: 0 2px;
}

.oar-roadmap-drawer__tag-add-wrap {
  position: relative;
}

.oar-roadmap-drawer__tag-dd {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  min-width: 14rem;
  max-height: 16rem;
  overflow: auto;
  z-index: 8;
  background: var(--s-color-bg-panel);
  border: 1px solid var(--s-color-border);
  border-radius: var(--s-radius-1);
  padding: var(--s-space-2);
  box-shadow: none;
}

.oar-roadmap-drawer__tag-input {
  width: 100%;
  font: inherit;
  padding: var(--s-space-1) var(--s-space-2);
  margin-bottom: var(--s-space-2);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
}

.oar-roadmap-drawer__tag-suggest {
  list-style: none;
  margin: 0;
  padding: 0;
}

.oar-roadmap-drawer__tag-suggest button {
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: var(--s-font-size-0);
  padding: var(--s-space-1) var(--s-space-2);
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--s-radius-1);
}

.oar-roadmap-drawer__tag-suggest button:hover {
  background: var(--s-color-hover-bg);
}

.oar-roadmap-drawer__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* Operator surface — block parent scroll chaining + iOS pull-to-refresh
     so drawer body never bounces the page underneath. */
  overscroll-behavior: contain;
  padding: var(--s-space-3) var(--s-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-space-2);
  /* Opaque scroll body — the main content region; transparent by default
     was the largest visual leak of the iter11.9 strip-stack. */
  background: var(--s-color-bg-panel);
}

.oar-roadmap-drawer__footer {
  flex-shrink: 0;
  border-top: 1px solid var(--s-color-border-subtle);
  padding: var(--s-space-3) var(--s-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-space-2);
  background: var(--s-color-bg-panel);
  /* When the drawer fills the viewport (mobile band), its footer is at the
     viewport bottom — consume safe-area so the home indicator doesn't overlap
     the primary spawn/save actions. env() returns 0 on non-notched devices. */
  padding-bottom: max(var(--s-space-3), env(safe-area-inset-bottom));
}

.oar-roadmap-drawer__footer-primary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-2);
  align-items: center;
}

.oar-roadmap-drawer__footer-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-2);
  align-items: center;
}

/* Phase C — two-step move-to picker (replaces legacy phase dropdown) */
.oar-move-to-picker {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-2);
  width: 100%;
}

.oar-move-to-picker__primary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-1);
  align-items: center;
}

.oar-move-to-picker__secondary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-1);
  align-items: center;
}

.oar-move-to-picker__secondary-label {
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-muted);
}

.oar-move-to-picker__col--current {
  border-color: var(--s-color-border-strong);
  font-weight: var(--s-font-weight-semibold);
}

.oar-drawer__phase-substrip {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-muted);
}

.oar-roadmap-strip {
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
  padding: var(--s-space-2) var(--s-space-3);
  background: var(--s-color-bg-app);
}

.oar-roadmap-strip__sum {
  cursor: pointer;
  font-weight: var(--s-font-weight-semibold);
  font-size: var(--s-font-size-1);
}

.oar-roadmap-strip__body {
  margin-top: var(--s-space-2);
  font-size: var(--s-font-size-1);
}

.oar-roadmap-test__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-2);
  align-items: center;
  margin-bottom: var(--s-space-2);
}

.oar-roadmap-test__vp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-1);
}

.oar-roadmap-test__automation-panel {
  margin-bottom: var(--s-space-2);
  padding: var(--s-space-2);
  border: 1px dashed var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
  font-size: var(--s-font-size-1);
}

.oar-roadmap-test__fail-row {
  padding: 2px 0;
  font-family: var(--s-font-mono);
}

.oar-roadmap-test__frames {
  display: flex;
  gap: var(--s-space-2);
  min-height: 220px;
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
  overflow: auto;
  margin-bottom: var(--s-space-3);
}

.oar-roadmap-test__frames--triple .oar-roadmap-test__iframe-host {
  flex: 1;
  min-width: 0;
  overflow: auto;
  background: var(--s-color-bg-subtle);
}

.oar-roadmap-test__frames--triple .oar-test-panel__iframe {
  width: 1440px;
  height: 900px;
  transform: scale(0.22);
  transform-origin: top left;
}

.oar-roadmap-test__frames--single .oar-roadmap-test__iframe-host {
  flex: 1;
  min-height: 420px;
}

.oar-roadmap-test__frames--single .oar-test-panel__iframe {
  width: 100%;
  height: min(72vh, 820px);
  border: none;
}

.oar-roadmap-test__composer {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-2);
}

.oar-roadmap-test__composer-input {
  min-height: 5rem;
  font: inherit;
  padding: var(--s-space-2);
  border: 1px solid var(--s-color-border);
  border-radius: var(--s-radius-1);
}

.oar-roadmap-notes__row {
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-1);
  padding: var(--s-space-2);
  margin-bottom: var(--s-space-2);
  background: var(--s-color-bg-app);
}

.oar-roadmap-notes__row--pinned {
  border-color: var(--s-color-accent-active);
}

.oar-roadmap-notes__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-2);
  align-items: center;
  margin-bottom: var(--s-space-1);
}

.oar-roadmap-notes__chip {
  font-size: var(--s-font-size-0);
  font-family: var(--s-font-mono);
  color: var(--s-color-fg-muted);
}

.oar-roadmap-notes__chip--src {
  background: var(--s-color-bg-subtle);
  padding: 1px 6px;
  border-radius: var(--s-radius-1);
}

.oar-roadmap-notes__pin {
  margin-left: auto;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: var(--s-font-size-1);
}

.oar-roadmap-notes__body {
  white-space: pre-wrap;
  font-size: var(--s-font-size-1);
}

.oar-roadmap-notes__ts {
  display: block;
  margin-top: var(--s-space-1);
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-muted);
}

.oar-roadmap-notes__compose-input {
  min-height: 4rem;
  font: inherit;
  padding: var(--s-space-2);
  border: 1px solid var(--s-color-border);
  border-radius: var(--s-radius-1);
}

.oar-roadmap-drawer__spawn-modal {
  position: fixed;
  inset: 0;
  z-index: 220;
  background: var(--s-color-backdrop-scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-space-4);
}

.oar-roadmap-drawer__spawn-modal-inner {
  max-width: 32rem;
  width: 100%;
  background: var(--s-color-bg-panel);
  border: 1px solid var(--s-color-border);
  border-radius: var(--s-radius-2);
  padding: var(--s-space-4);
}

.oar-roadmap-drawer__spawn-title {
  margin: 0 0 var(--s-space-2);
  font-size: var(--s-font-size-3);
}

.oar-roadmap-drawer__spawn-notes {
  margin: var(--s-space-2) 0;
  padding-left: var(--s-space-4);
  max-height: 12rem;
  overflow: auto;
  font-size: var(--s-font-size-1);
}

.oar-roadmap-drawer__spawn-actions {
  display: flex;
  gap: var(--s-space-2);
  justify-content: flex-end;
  margin-top: var(--s-space-3);
}

.oar-roadmap-iterhist {
  margin: 0;
  padding-left: var(--s-space-4);
  font-size: var(--s-font-size-1);
  font-family: var(--s-font-mono);
}

.oar-roadmap-kb-overlay {
  position: fixed;
  inset: 0;
  z-index: 210;
  background: var(--s-color-backdrop-scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-space-4);
}

.oar-roadmap-kb-overlay-inner {
  background: var(--s-color-bg-panel);
  border: 1px solid var(--s-color-border);
  border-radius: var(--s-radius-2);
  padding: var(--s-space-4);
  max-width: 28rem;
}

.oar-roadmap-kb-overlay-h {
  margin: 0 0 var(--s-space-2);
}

.oar-roadmap-kb-overlay-list {
  margin: 0 0 var(--s-space-3);
  padding-left: var(--s-space-4);
  font-size: var(--s-font-size-1);
}

.oar-roadmap-kb-overlay-list kbd {
  font-family: var(--s-font-mono);
  font-size: var(--s-font-size-0);
  padding: 1px 6px;
  border-radius: var(--s-radius-1);
  border: 1px solid var(--s-color-border-subtle);
  background: var(--s-color-bg-subtle);
}

/* Live-mirror Running column + run cards (doctrine 2026-05-18) */
.oar-kanban-col--live-mirror .oar-kanban-list {
  gap: var(--s-space-2, 0.5rem);
}

/* Run cards — compact execution metadata (distinct from .oar-phasecard lifecycle cards) */
.oar-run-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-1);
  min-width: 0;
  padding: var(--s-space-1) var(--s-space-2);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-sm);
  background: var(--s-color-bg-surface);
  box-shadow: none;
  font-size: var(--s-font-size-1);
}

.oar-run-card--highlight,
.oar-phasecard--run-highlight {
  outline: 2px solid var(--oar-column-running-accent);
  outline-offset: 2px;
}

.oar-run-card__head {
  display: flex;
  align-items: center;
  gap: var(--s-space-1);
  min-width: 0;
}

.oar-run-card__badge {
  flex-shrink: 0;
  font: var(--s-font-size-micro);
  padding: var(--s-space-hair) var(--s-space-1);
  border-radius: var(--s-radius-sm);
  background: var(--s-color-bg-subtle);
  color: var(--s-color-fg-muted);
}

.oar-run-card__badge--started,
.oar-run-card__badge--running {
  color: var(--oar-substate-active-fg);
}

.oar-run-card__dur {
  flex-shrink: 0;
  font: var(--s-font-size-micro);
  font-variant-numeric: tabular-nums;
  color: var(--oar-column-running-accent);
  animation: oar-run-card-dur-pulse 1.2s ease-in-out infinite;
}

@keyframes oar-run-card-dur-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

.oar-run-card__id {
  margin-left: auto;
  flex-shrink: 0;
  font-family: ui-monospace, monospace;
  font-size: 0.85em;
  color: var(--s-color-fg-muted);
}

.oar-run-card__slug {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--s-font-weight-medium);
  color: var(--s-color-fg-primary);
}

.oar-run-card__meta {
  display: flex;
  gap: var(--s-space-1);
  color: var(--s-color-fg-muted);
  font-size: var(--s-font-size-0);
}

.oar-run-card__branch {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: ui-monospace, monospace;
  font-size: 0.8em;
  color: var(--s-color-fg-muted);
}

.oar-run-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-2);
}

.oar-run-card__log,
.oar-run-card__brief-link {
  font-size: inherit;
  color: var(--s-color-accent-default);
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.oar-phasecard-running-badge {
  font: var(--s-font-size-micro);
  padding: 0.08rem 0.35rem;
  border-radius: 999px;
  border: 1px solid var(--oar-column-running-accent);
  color: var(--oar-column-running-accent);
  background: color-mix(in srgb, var(--oar-column-running-accent) 12%, transparent);
  cursor: pointer;
  animation: oar-running-badge-pulse 1.2s ease-in-out infinite;
}

@keyframes oar-running-badge-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

/* Briefing tab — substrate strip · Running now · morning brief section rhythm */
.oar-briefing-live-mirror {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: var(--s-space-6);
}

.oar-briefing-live-mirror .oar-substrate-tiles {
  margin-bottom: var(--s-space-6);
}

.oar-briefing-live-mirror .oar-substrate-tiles + .oar-briefing-live-mirror__h2 {
  margin: 0 0 var(--s-space-2);
}

.oar-briefing-live-mirror__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-space-3, 0.75rem);
}

.oar-briefing-live-mirror__h2 {
  font: var(--s-font-size-2);
  margin: 0;
}

.oar-briefing-live-mirror__health-link {
  font: var(--s-font-size-micro);
  color: var(--s-color-fg-muted);
  text-decoration: none;
}

.oar-briefing-live-mirror__health-link:hover {
  color: var(--s-color-accent-default);
}

.oar-substrate-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-space-2, 0.5rem);
}

@media (max-width: 900px) {
  .oar-substrate-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.oar-substrate-tile {
  --oar-substrate-tile-reason-fg: var(--substrate-tile-muted);
  --oar-substrate-tile-reason-size: var(--s-font-size-0, 0.8125rem);
  padding: var(--s-space-2, 0.5rem) var(--s-space-3, 0.75rem);
  border: 1px solid var(--substrate-tile-border);
  border-radius: var(--s-radius-sm, 6px);
  background: var(--substrate-tile-bg);
}

.oar-substrate-tile__label {
  font: var(--s-font-size-micro);
  color: var(--substrate-tile-muted);
  display: block;
  margin-bottom: 0.2rem;
}

.oar-substrate-tile__value {
  font: var(--s-font-size-3);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--substrate-tile-fg);
  display: block;
}

.oar-substrate-tile__reason {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--oar-substrate-tile-reason-size);
  color: var(--oar-substrate-tile-reason-fg);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oar-running-now-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--s-font-size-0, 0.8125rem);
}

.oar-running-now-table th,
.oar-running-now-table td {
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--s-color-border-subtle);
  text-align: left;
}

.oar-running-now-table th {
  font: var(--s-font-size-micro);
  color: var(--s-color-fg-muted);
}

/* ── Briefing three-zone instrument panel ───────────────────────────────── */

.oar-briefing--three-zone .oar-briefing__viewport {
  max-width: 72rem;
}

.oar-briefing-zone {
  margin-bottom: var(--s-space-5);
}

.oar-briefing-zone__label {
  margin: 0 0 var(--s-space-2);
  font-size: var(--s-font-size-0);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--s-color-fg-muted);
}

.oar-briefing-zone-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-2);
}

.oar-briefing-zone-tile {
  flex: 1 1 8.5rem;
  min-width: 7.5rem;
  max-width: 12rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-space-1);
  padding: var(--s-space-2) var(--s-space-3);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-2);
  background: var(--s-color-bg-subtle);
  color: var(--s-color-fg-primary);
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.oar-briefing-zone-tile:hover {
  border-color: var(--s-color-border);
  background: var(--s-color-surface-raised);
}

.oar-briefing-zone-tile--lit {
  border-color: var(--s-color-accent-muted);
  background: color-mix(in oklch, var(--s-color-accent-muted) 12%, var(--s-color-bg-subtle));
}

.oar-briefing-zone-tile__label {
  font-size: var(--s-font-size-0);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--s-color-fg-muted);
}

.oar-briefing-zone-tile__value {
  font-size: var(--s-font-size-3);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--s-color-fg-primary);
}

.oar-briefing-zone-tile--lit .oar-briefing-zone-tile__value {
  color: var(--s-color-accent-active);
}

.oar-briefing-zone-tile__sub {
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-soft);
  line-height: 1.3;
}

.oar-briefing-zone-inbox__clear {
  margin: 0;
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-muted);
}

.oar-briefing-zone-inbox__cards {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-2);
}

.oar-briefing-inbox-card {
  padding: var(--s-space-3);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-2);
  background: var(--s-color-bg-app);
}

.oar-briefing-inbox-card--rollup .oar-briefing-inbox-card__subjects {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-2);
  margin-bottom: var(--s-space-2);
}

.oar-briefing-inbox-card__subject {
  font-size: var(--s-font-size-1);
  color: var(--s-color-fg-primary);
}

.oar-briefing-inbox-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-space-3);
  width: 100%;
}

.oar-briefing-inbox-card__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--s-font-size-1);
}

.oar-briefing-zone-drawer__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-space-3);
  padding: var(--s-space-3);
  border-bottom: 1px solid var(--s-color-border-subtle);
}

.oar-briefing-zone-drawer__body {
  padding: var(--s-space-3);
  overflow: auto;
  max-height: min(70vh, 48rem);
}

.oar-briefing-zone-drawer__row {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--s-space-2) 0;
  border: none;
  background: transparent;
  font: inherit;
  color: var(--s-color-accent-active);
  cursor: pointer;
}

.oar-briefing-zone-drawer__row:hover {
  text-decoration: underline;
}