agent-embassy 1.0.0

package/assets/live-dashboard/app.css

@@ -0,0 +1,1610 @@
+/* ==========================================================================
+   Embassy live dashboard — app.css
+   Served at the instance-scoped app.css route. Self-contained by contract:
+   zero imports, zero font files, zero asset references, zero external hosts.
+   Section order follows integration spec section 5.
+   1 Tokens · 2 Base · 3 Layout · 4 Chips · 5 Components
+   6 Tooltip · 7 Responsive · 8 Reduced motion · 9 Forced colors
+   ========================================================================== */
+
+/* ==========================================================================
+   1. TOKENS (spec §5.1) — light only, system fonts only
+   ========================================================================== */
+
+:root {
+  color-scheme: light;
+
+  /* Surfaces */
+  --canvas: #ffffff;
+  --soft-stone: #eeece7;
+  --pale-blue: #f1f5ff;
+  --pale-green: #edfce9;
+
+  /* Ink & rules */
+  --ink: #212121;
+  --body-muted: #616161;
+  --slate: #75758a;
+  --muted: #93939f;
+  --hairline: #d9d9dd;
+  --border-light: #e5e7eb;
+  --card-border: #f2f2f2;
+
+  /* Accents */
+  --cohere-black: #000000;
+  --dark-navy: #071829;
+  --deep-green: #003c33;
+  --action-blue: #1863dc;
+  --coral: #ff7759;
+  --coral-soft: #ffad9b;
+  --error: #b30000;
+  --primary: #17171c;
+  --on-primary: #ffffff;
+  --on-dark: #ffffff;
+  --focus-blue: #4c6ee6;
+  --form-focus: #9b60aa;
+
+  /* Chip tints (spec §3.1 — new) */
+  --coral-tint: rgba(255, 119, 89, .12);
+  --coral-deep: #9a3a20;
+  /* Prototype's claude-side accent (RoutesTab CORAL, oklch ≈ #d95737). */
+  --coral-accent: oklch(0.62 0.17 35);
+  /* Canonical coral washes: .10 topo-chip highlight, .06 warning banner. */
+  --coral-wash-hl: rgba(255, 119, 89, .10);
+  --coral-wash-soft: rgba(255, 119, 89, .06);
+  --purple-tint: rgba(155, 96, 170, .10);
+  --purple-deep: #7d4390;
+  --error-tint: rgba(179, 0, 0, .07);
+
+  /* Semantic aliases (tokens/colors.css) — the retheming seam. */
+  --surface-page: var(--canvas);
+  --surface-card: var(--canvas);
+  --surface-warm: var(--soft-stone);
+  --surface-band-green: var(--deep-green);
+  --surface-band-navy: var(--dark-navy);
+  --surface-footer: var(--primary);
+  --text-body: var(--ink);
+  --text-muted: var(--body-muted);
+  --text-meta: var(--muted);
+  --rule: var(--hairline);
+  --link: var(--action-blue);
+  --cta-bg: var(--primary);
+  --cta-text: var(--on-primary);
+
+  /* Radii */
+  --radius-xs: 4px;
+  --radius-sm: 8px;
+  --radius-md: 16px;
+  --radius-lg: 22px;
+  --radius-xl: 30px;
+  --radius-pill: 32px;
+  --radius-full: 9999px;
+
+  /* Spacing scale (tokens/spacing.css) */
+  --space-xxs: 2px;
+  --space-xs: 6px;
+  --space-sm: 8px;
+  --space-md: 12px;
+  --space-lg: 16px;
+  --space-xl: 24px;
+  --space-xxl: 32px;
+  --space-section: 80px;
+
+  /* Type */
+  --type-body-size: 16px;
+  --type-body-lh: 1.5;
+  --type-feature-size: 24px;
+  --type-feature-lh: 1.3;
+  --type-caption-size: 14px;
+  --type-caption-lh: 1.4;
+  --type-button-size: 14px;
+  --type-button-lh: 1.71;
+  --type-button-weight: 500;
+  --type-mono-size: 14px;
+  --type-mono-lh: 1.4;
+  --type-mono-ls: 0.28px;
+  --type-micro-size: 12px;
+  --type-micro-lh: 1.4;
+  --mono-ls: var(--type-mono-ls);
+  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  --font-display: "Space Grotesk", var(--font-body);
+}
+
+/* ==========================================================================
+   2. BASE
+   ========================================================================== */
+
+*,
+*::before,
+*::after { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  background: var(--surface-page);
+  color: var(--text-body);
+  font-family: var(--font-body);
+  font-size: var(--type-body-size);
+  line-height: var(--type-body-lh);
+  -webkit-font-smoothing: antialiased;
+}
+
+h1, h2, h3, h4 { font-weight: 400; margin: 0; }
+p { margin: 0; }
+code, pre, kbd, samp { font-family: var(--font-mono); }
+pre { margin: 0; }
+
+a {
+  color: var(--ink);
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+}
+a:hover { color: var(--action-blue); }
+
+::selection { background: var(--pale-blue); }
+
+/* Focus is never removed — inputs included (spec §5.2). */
+:focus-visible {
+  outline: 2px solid var(--focus-blue);
+  outline-offset: 2px;
+}
+
+input, select, textarea, button { font: inherit; color: inherit; }
+/* Form focus tint on any focus (mouse included), matching tokens/base.css;
+   the keyboard outline above stays untouched. */
+input:focus,
+textarea:focus,
+select:focus { border-color: var(--form-focus); }
+
+/* Uniform press feedback on every enabled button (prototype index.html). */
+button:not(:disabled):hover { opacity: .92; }
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/* Text utilities */
+.mono {
+  font-family: var(--font-mono);
+  font-size: 13px;
+  letter-spacing: var(--mono-ls);
+}
+.mono-label {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  letter-spacing: var(--mono-ls);
+  text-transform: uppercase;
+  color: var(--muted);
+}
+.section-label { margin-bottom: 14px; }
+/* Per-surface eyebrow gaps (deliveries detail rail). */
+.section-label--lifecycle { margin-bottom: 12px; }
+.section-label--frames { margin-bottom: 10px; }
+.section-label--body { margin-bottom: 8px; }
+/* Eyebrow row: info-dot/lower-bound hugs the label (prototype gap 8px). */
+.row.section-head { gap: 8px; }
+.section-title {
+  font-family: var(--font-body);
+  font-size: var(--type-feature-size);
+  line-height: var(--type-feature-lh);
+  color: var(--ink);
+}
+.text-muted { color: var(--muted); }
+.text-body-muted { color: var(--body-muted); }
+.text-sm { font-size: 14px; }
+.text-xs { font-size: 13px; }
+.footnote { font-size: 12px; line-height: 1.5; color: var(--muted); }
+.rule {
+  margin: 0;
+  border: 0;
+  border-top: 1px solid var(--rule);
+  height: 0;
+}
+
+/* ==========================================================================
+   3. LAYOUT
+   ========================================================================== */
+
+.app-shell {
+  min-height: 100vh;
+  background: var(--canvas);
+}
+
+.app-header { border-bottom: 1px solid var(--hairline); }
+
+.header-bar {
+  max-width: 1320px;
+  margin: 0 auto;
+  padding: 20px 40px 0;
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  flex-wrap: wrap;
+}
+
+.brand {
+  display: flex;
+  align-items: baseline;
+  gap: 14px;
+  flex-wrap: wrap;
+  row-gap: 4px;
+}
+/* Posture label: 11px, no forced caps (prototype App.jsx). */
+.brand .mono-label {
+  font-size: 11px;
+  text-transform: none;
+}
+.brand-mark { align-self: center; flex-shrink: 0; }
+.brand-wordmark {
+  font-family: var(--font-display);
+  font-size: 26px;
+  letter-spacing: -0.52px;
+  color: var(--ink);
+}
+.brand-posture {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.header-spacer { flex: 1 1 0%; }
+
+.header-meta {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+
+.as-of {
+  font-size: 13px;
+  color: var(--muted);
+  white-space: nowrap;
+}
+/* Second header row: staleness note left, connection controls right — the
+   primary row keeps the prototype's single-line composition. */
+.header-subrow {
+  flex-basis: 100%;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding-bottom: 2px;
+}
+.staleness {
+  font-size: 13px;
+  color: var(--coral-deep);
+}
+.staleness--quiet { color: var(--muted); }
+
+.conn-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+.conn-controls {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+}
+
+.lang-toggle {
+  display: flex;
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius-xl);
+  overflow: hidden;
+}
+.lang-toggle__btn {
+  font-family: var(--font-body);
+  font-size: 12px;
+  font-weight: 400;
+  padding: 5px 12px;
+  border: none;
+  background: transparent;
+  color: var(--ink);
+  cursor: pointer;
+}
+.lang-toggle__btn[aria-pressed="true"] {
+  font-weight: 500;
+  background: var(--cta-bg);
+  color: var(--cta-text);
+}
+/* Keep the ring inside the clipped pill. */
+.lang-toggle__btn:focus-visible { outline-offset: -3px; }
+
+.app-nav {
+  max-width: 1320px;
+  margin: 0 auto;
+  padding: 18px 40px 0;
+  display: flex;
+  gap: 28px;
+  flex-wrap: wrap;
+}
+.tab {
+  font-family: var(--font-body);
+  font-size: 15px;
+  font-weight: 400;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  padding: 0 2px 14px;
+  color: var(--muted);
+  cursor: pointer;
+}
+.tab[aria-selected="true"] {
+  color: var(--ink);
+  border-bottom-color: var(--ink);
+}
+.tab:focus-visible { outline-offset: 1px; }
+
+.app-main {
+  max-width: 1320px;
+  margin: 0 auto;
+  padding: 40px 40px 80px;
+}
+
+/* Every tab panel is a 48px section stack. */
+.tab-panel { display: grid; gap: 48px; }
+.tab-panel--narrow { max-width: 860px; }
+.section { display: block; }
+/* Subordinated sub-section (routes CLI panel under the topology card). */
+.section__sub { margin-top: 20px; }
+.stack { display: grid; gap: 12px; }
+/* register-codex teaching block at the foot of the Codex routes section. */
+.routes-register { gap: 10px; margin-top: 16px; }
+.stack-sm { display: grid; gap: 8px; }
+.stack-lg { display: grid; gap: 20px; }
+.row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.row-baseline {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.row-baseline--split {
+  justify-content: space-between;
+  align-items: center;
+}
+.grid-2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  align-items: start;
+}
+.grid-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 16px;
+  align-items: start;
+}
+
+.app-footer {
+  max-width: 1320px;
+  margin: 0 auto;
+  padding: 0 40px 40px;
+  display: grid;
+  gap: 6px;
+  color: var(--muted);
+  font-size: 12px;
+}
+.footer-diagnostic {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: var(--mono-ls);
+  color: var(--muted);
+}
+
+/* Any table, pre or wide block scrolls inside itself — the page never does. */
+.table-wrap { overflow-x: auto; }
+
+/* ==========================================================================
+   4. CHIPS (spec §3.1) — 8 kinds + loud unknown fallback
+   ========================================================================== */
+
+.chip {
+  display: inline-block;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  line-height: 1.5;
+  letter-spacing: var(--mono-ls);
+  text-transform: uppercase;
+  white-space: nowrap;
+  padding: 3px 9px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--ink);
+}
+.chip--small {
+  font-size: 11px;
+  padding: 2px 7px;
+}
+
+.chip[data-kind="positive"]      { background: var(--pale-green); color: var(--deep-green); }
+.chip[data-kind="qualified"]     { background: transparent;       color: var(--deep-green); border-color: var(--deep-green); }
+.chip[data-kind="active"]        { background: var(--pale-blue);  color: var(--action-blue); }
+.chip[data-kind="progress"]      { background: var(--soft-stone); color: var(--slate); }
+.chip[data-kind="warning"]       { background: var(--coral-tint); color: var(--coral-deep); }
+.chip[data-kind="indeterminate"] { background: var(--purple-tint); color: var(--purple-deep); }
+.chip[data-kind="failure"]       { background: var(--error-tint); color: var(--error); }
+.chip[data-kind="inert"]         { background: transparent;       color: var(--muted); border-color: var(--hairline); }
+
+/* An unrecognised protocol token must be noticed, never camouflaged. */
+.chip[data-kind="unknown"] {
+  background: transparent;
+  color: var(--error);
+  border: 1px dashed var(--error);
+}
+
+.chip-row {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+/* Activity entries breathe wider than the exchange-node chip row (6px). */
+.activity-row .chip-row { gap: 10px; }
+.lower-bound {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: var(--mono-ls);
+  color: var(--slate);
+  border: 1px dashed var(--hairline);
+  border-radius: var(--radius-xs);
+  padding: 1px 6px;
+  white-space: nowrap;
+}
+
+/* ==========================================================================
+   5. COMPONENTS
+   ========================================================================== */
+
+/* --- 5.1 Buttons ---------------------------------------------------------- */
+
+.btn {
+  font-family: var(--font-body);
+  font-size: 13px;
+  line-height: 1.5;
+  padding: 5px 16px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-pill);
+  background: transparent;
+  color: var(--ink);
+  cursor: pointer;
+  white-space: nowrap;
+}
+.btn--primary {
+  font-weight: 500;
+  border: none;
+  background: var(--cta-bg);
+  color: var(--cta-text);
+}
+.btn--ghost { border-color: var(--hairline); }
+.btn:disabled {
+  cursor: default;
+  background: var(--hairline);
+  color: var(--muted);
+  border-color: transparent;
+}
+/* Inline text button ("show raw", "hide") */
+.toggle-link {
+  background: none;
+  border: none;
+  padding: 0;
+  font-family: var(--font-body);
+  font-size: 14px;
+  color: var(--action-blue);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  cursor: pointer;
+}
+
+/* --- 5.2 Inputs ----------------------------------------------------------- */
+
+.text-input {
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-xs);
+  padding: 8px 12px;
+  font-family: var(--font-body);
+  font-size: 13px;
+  background: var(--canvas);
+  color: var(--ink);
+}
+.text-input::placeholder { color: var(--muted); }
+/* content-box keeps the prototype's 326px outer width (300 + padding +
+   border, canonical base has no box-sizing reset); appearance reset drops
+   the UA search-cancel affordance the prototype's plain text input lacks. */
+.header-search {
+  width: 300px;
+  max-width: 100%;
+  box-sizing: content-box;
+  appearance: none;
+}
+.header-search::-webkit-search-cancel-button { display: none; }
+.filter-input {
+  width: 100%;
+  padding: 10px 14px;
+  font-size: 14px;
+}
+
+/* --- 5.3 Cards & panels --------------------------------------------------- */
+
+.card {
+  border: 1px solid var(--card-border);
+  border-radius: var(--radius-sm);
+  padding: 20px;
+  display: grid;
+  gap: 12px;
+  align-content: start;
+  font-size: 14px;
+  background: var(--canvas);
+}
+.card--hairline { border-color: var(--hairline); }
+.card--warn { border-color: var(--coral-soft); }
+.card__head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+.card__title { font-size: 16px; line-height: 1.4; }
+.card__body { font-size: 14px; color: var(--body-muted); }
+
+.panel {
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius-lg);
+  padding: 24px 28px;
+  background: var(--canvas);
+}
+.panel--warm {
+  background: var(--soft-stone);
+  border-color: transparent;
+  border-radius: var(--radius-lg);
+  padding: 32px;
+}
+
+/* Status strip (Overview) */
+.status-strip {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.status-card {
+  border: 1px solid var(--card-border);
+  border-radius: var(--radius-sm);
+  padding: 14px 18px;
+  display: grid;
+  gap: 6px;
+  flex: 1 1 170px;
+}
+.status-card__head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+.status-card__label { font-size: 14px; color: var(--body-muted); }
+.status-card__detail { font-size: 13px; color: var(--muted); }
+
+/* --- 5.4 Bounded operator actions ----------------------------------------- */
+
+.action-panel {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 16px;
+  align-items: start;
+}
+.action-card {
+  border: 1px solid var(--card-border);
+  border-radius: var(--radius-sm);
+  padding: 18px 20px;
+  display: grid;
+  gap: 12px;
+  align-content: start;
+}
+.action-card__title {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  letter-spacing: var(--mono-ls);
+  text-transform: uppercase;
+  color: var(--muted);
+}
+.action-card__consequence,
+.section-teaching {
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--body-muted);
+}
+.section-teaching { margin-bottom: 12px; }
+.action-card__status {
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+.action-card__status[data-action-result="success"] { color: var(--deep-green); }
+.action-card__status[data-action-result="failure"] { color: var(--coral-deep); }
+.action-card__buttons { display: flex; flex-wrap: wrap; gap: 8px; }
+.section__sub .action-card { padding: 16px 18px; }
+
+/* Honest-absent card: never a dead control. */
+.absent-feature {
+  border: 1px dashed var(--hairline);
+  border-radius: var(--radius-sm);
+  padding: 20px;
+  display: grid;
+  gap: 10px;
+  align-content: start;
+}
+/* Card title (the MonoLabel eyebrow above it already carries the mono
+   "not in this build" treatment). */
+.absent-feature__title {
+  font-family: var(--font-body);
+  font-size: 18px;
+  line-height: 1.4;
+  color: var(--ink);
+}
+.absent-feature__body {
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--body-muted);
+}
+.absent-feature__note {
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--muted);
+}
+
+/* --- 5.5 CopyCmd ---------------------------------------------------------- */
+
+.copy-cmd {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: var(--primary);
+  color: rgba(255, 255, 255, .85);
+  border-radius: var(--radius-xs);
+  padding: 8px 12px;
+  font-family: var(--font-mono);
+  font-size: 13px;
+  letter-spacing: 0.1px;
+  max-width: 100%;
+}
+/* The command scrolls; the button stays reachable. */
+.copy-cmd__code {
+  flex: 1 1 0%;
+  min-width: 0;
+  overflow-x: auto;
+  white-space: nowrap;
+  color: inherit;
+}
+.copy-cmd__button {
+  flex-shrink: 0;
+  font-family: var(--font-body);
+  font-size: 12px;
+  font-weight: 500;
+  background: var(--canvas);
+  color: var(--ink);
+  border: none;
+  border-radius: var(--radius-pill);
+  padding: 3px 12px;
+  cursor: pointer;
+}
+.copy-cmd__button:focus-visible { outline-offset: 2px; }
+.copy-cmd__status {
+  flex-shrink: 0;
+  font-family: var(--font-body);
+  font-size: 12px;
+  color: rgba(255, 255, 255, .85);
+  white-space: nowrap;
+}
+.copy-cmd__status[data-tone="error"] { color: var(--coral-soft); }
+
+/* --- 5.6 Pills (filters) -------------------------------------------------- */
+
+.filters {
+  display: flex;
+  gap: 28px;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  margin-bottom: 20px;
+}
+.filter-group { display: grid; gap: 8px; }
+/* Deliveries rail: state block and search get their own bottom rhythm. */
+.filters-block { margin-bottom: 20px; }
+.filters-search { margin-bottom: 24px; }
+.pill-row {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.pill {
+  font-family: var(--font-body);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.4;
+  padding: 5px 14px;
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius-xl);
+  background: transparent;
+  color: var(--ink);
+  cursor: pointer;
+}
+.pill[aria-pressed="true"] {
+  font-weight: 500;
+  border-color: var(--cta-bg);
+  background: var(--cta-bg);
+  color: var(--cta-text);
+}
+.pill__count {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  letter-spacing: var(--mono-ls);
+  color: inherit;
+  opacity: .7;
+}
+
+/* --- 5.7 Notices ---------------------------------------------------------- */
+
+.notice {
+  display: flex;
+  gap: 12px;
+  align-items: baseline;
+  flex-wrap: wrap;
+  border: 1px solid var(--hairline);
+  border-left-width: 3px;
+  border-radius: var(--radius-sm);
+  padding: 12px 16px;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--ink);
+}
+.notice[data-tone="info"] {
+  border-color: var(--border-light);
+  border-left-color: var(--action-blue);
+  background: var(--pale-blue);
+}
+.notice[data-tone="warning"] {
+  border-color: var(--coral-soft);
+  border-left-color: var(--coral);
+  background: var(--coral-wash-soft);
+}
+.notice[data-tone="error"] {
+  border-color: var(--coral-soft);
+  border-left-color: var(--error);
+  background: var(--error-tint);
+}
+.notice__label {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: var(--mono-ls);
+  text-transform: uppercase;
+  color: var(--slate);
+  white-space: nowrap;
+}
+
+/* --- 5.8 Exchange board (Overview) --------------------------------------- */
+
+.exchange-board {
+  background: var(--soft-stone);
+  border-radius: var(--radius-lg);
+  padding: 32px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: stretch;
+  justify-content: center;
+}
+.exchange-node {
+  background: var(--canvas);
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius-sm);
+  padding: 20px;
+  min-width: 210px;
+  display: grid;
+  gap: 10px;
+  align-content: start;
+}
+.exchange-node__title {
+  font-family: var(--font-mono);
+  font-size: 14px;
+  letter-spacing: var(--mono-ls);
+  color: var(--ink);
+}
+.exchange-node__sub {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: var(--mono-ls);
+  text-transform: uppercase;
+  color: var(--muted);
+  margin-top: 4px;
+}
+.exchange-node__line { font-size: 13px; color: var(--body-muted); }
+
+.exchange-edges {
+  display: grid;
+  align-content: center;
+  gap: 10px;
+}
+.exchange-edge {
+  display: grid;
+  gap: 6px;
+  justify-items: center;
+  align-self: center;
+  padding: 0 8px;
+}
+.edge-label {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: var(--mono-ls);
+  text-transform: uppercase;
+  color: var(--muted);
+}
+.edge-line {
+  width: 110px;
+  border-top: 1px solid var(--hairline);
+  position: relative;
+}
+.edge-arrow {
+  position: absolute;
+  top: -8px;
+  color: var(--slate);
+}
+.edge-arrow--in { left: -2px; }
+.edge-arrow--out { right: -2px; }
+.edge-queue {
+  font-size: 13px;
+  color: var(--muted);
+  text-align: center;
+}
+.edge-queue[data-active="true"] { color: var(--ink); }
+
+/* Legible "no pair" state — informative, not alarming. */
+.no-pair {
+  display: grid;
+  align-content: center;
+  justify-items: center;
+  padding: 0 16px;
+  max-width: 200px;
+}
+.no-pair__label {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: var(--mono-ls);
+  text-transform: uppercase;
+  color: var(--slate);
+  border: 1px dashed var(--hairline);
+  border-radius: var(--radius-xs);
+  padding: 4px 10px;
+}
+.no-pair__body {
+  font-size: 12px;
+  color: var(--body-muted);
+  text-align: center;
+  margin-top: 8px;
+}
+/* Long next-action / no-pair sentences render once beneath the board. */
+.exchange-notes { margin-top: 14px; }
+.inbound-policy {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 14px;
+  padding: 9px 12px;
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius-xs);
+  color: var(--body-muted);
+  font-size: 12px;
+}
+.inbound-policy[data-inbound-mode="open"] {
+  border-color: var(--coral-deep);
+  background: var(--coral-wash-soft);
+  color: var(--ink);
+}
+
+/* --- 5.9 Attention list --------------------------------------------------- */
+
+.attention-list { display: grid; gap: 12px; }
+.attention-list + .footnote { margin-top: 12px; }
+.attention-item {
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius-sm);
+  padding: 18px 20px;
+  display: grid;
+  gap: 12px;
+}
+.attention-item__head {
+  display: flex;
+  gap: 12px;
+  align-items: baseline;
+  flex-wrap: wrap;
+}
+.attention-item__title { font-size: 16px; line-height: 1.5; }
+.attention-item__body { font-size: 14px; line-height: 1.5; color: var(--body-muted); }
+.attention-item__scope {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  letter-spacing: var(--mono-ls);
+  color: var(--slate);
+}
+.attention-item__action { min-width: 340px; }
+
+/* --- 5.10 Pulse bars ------------------------------------------------------ */
+
+.pulse {
+  display: flex;
+  gap: 28px;
+  align-items: flex-end;
+  flex-wrap: wrap;
+}
+.pulse-bar-btn {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  display: grid;
+  gap: 8px;
+  justify-items: center;
+}
+.pulse-count { font-size: 14px; color: var(--ink); }
+/* Height comes from the React style prop (dynamic numeric). content-box
+   restores the prototype's geometry (44px + border = 46px, height H + 2px). */
+.pulse-bar {
+  display: block;
+  box-sizing: content-box;
+  width: 44px;
+  min-height: 6px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-xs);
+  background: var(--soft-stone);
+}
+.pulse-bar[data-kind="positive"]      { background: var(--pale-green); }
+.pulse-bar[data-kind="qualified"]     { background: transparent; border-color: var(--deep-green); }
+.pulse-bar[data-kind="active"]        { background: var(--pale-blue); }
+.pulse-bar[data-kind="progress"]      { background: var(--soft-stone); }
+.pulse-bar[data-kind="warning"]       { background: var(--coral-tint); }
+.pulse-bar[data-kind="indeterminate"] { background: var(--purple-tint); }
+.pulse-bar[data-kind="failure"]       { background: var(--error-tint); }
+.pulse-bar[data-kind="inert"]         { background: transparent; border-color: var(--hairline); }
+.pulse-bar[data-empty="true"] { border-color: var(--hairline); }
+.pulse-caption { font-size: 12px; color: var(--muted); margin-top: 14px; }
+.pulse-empty {
+  font-size: 14px;
+  color: var(--body-muted);
+  margin-bottom: 14px;
+}
+
+/* --- 5.11 Topology (Routes) ---------------------------------------------- */
+
+.topology {
+  background: var(--canvas);
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius-lg);
+  padding: 24px 28px;
+}
+.topology__heads {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 2px;
+}
+.topology__head--claude { color: var(--coral-accent); }
+.topology__head--codex { color: var(--action-blue); }
+.topology__cols {
+  display: flex;
+  align-items: flex-start;
+}
+.topology__col {
+  flex: 1 1 0;
+  min-width: 0;
+  padding-top: 18px;
+}
+.topology__svg {
+  flex-shrink: 0;
+  display: block;
+}
+.topology__empty {
+  font-size: 13px;
+  color: var(--body-muted);
+  padding-top: 8px;
+}
+.topology__edge-list {
+  display: grid;
+  gap: 8px;
+  margin: 16px 0 0;
+  padding: 14px 0 0;
+  border-top: 1px solid var(--hairline);
+  list-style: none;
+}
+.topology__edge-list li {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  color: var(--body-muted);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+.topo-row {
+  height: 64px;
+  display: flex;
+  align-items: center;
+}
+.topo-row--left { justify-content: flex-end; }
+.topo-row--right { justify-content: flex-start; }
+.topo-chip {
+  font-family: var(--font-mono);
+  font-size: 13px;
+  letter-spacing: var(--mono-ls);
+  padding: 7px 15px;
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius-xl);
+  background: var(--canvas);
+  color: var(--ink);
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: default;
+  transition: background-color .15s, border-color .15s, color .15s, opacity .15s;
+}
+.topo-chip[data-side="claude"] { border-color: var(--coral-accent); color: var(--ink); }
+.topo-chip[data-side="codex"] { border-color: var(--action-blue); color: var(--action-blue); }
+.topo-chip[data-candidate="true"] { border-style: dashed; color: var(--slate); }
+.topo-chip[data-highlight="on"][data-side="claude"] { background: var(--coral-wash-hl); }
+.topo-chip[data-highlight="on"][data-side="codex"] { background: var(--pale-blue); }
+.topo-chip[data-highlight="off"] {
+  border-color: var(--hairline);
+  color: var(--muted);
+  opacity: .45;
+}
+
+/* --- 5.12 Accordion (Routes detail) -------------------------------------- */
+
+.accordion { display: block; }
+.accordion__row {
+  width: 100%;
+  display: flex;
+  gap: 14px;
+  align-items: center;
+  padding: 16px 8px;
+  border: none;
+  border-top: 1px solid var(--hairline);
+  background: transparent;
+  color: var(--ink);
+  text-align: left;
+  cursor: pointer;
+}
+.accordion__alias {
+  font-family: var(--font-mono);
+  font-size: 14px;
+  letter-spacing: var(--mono-ls);
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.accordion__marker {
+  color: var(--muted);
+  flex-shrink: 0;
+}
+/* Green presence dot: selected sessions and registered codex routes. */
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-full);
+  background: #1e8e5a;
+  display: inline-block;
+  flex-shrink: 0;
+}
+.accordion__panel {
+  padding: 4px 8px 20px;
+  display: grid;
+  gap: 8px;
+  font-size: 14px;
+  color: var(--body-muted);
+}
+.accordion__panel .details-block { margin: 4px -8px 0; }
+.accordion__panel .details-block > summary { padding-left: 8px; }
+.detail-list { display: grid; gap: 8px; }
+.detail-row { font-size: 14px; color: var(--body-muted); }
+.detail-label { color: var(--muted); }
+.detail-value { color: var(--ink); }
+.detail-value--mono {
+  font-family: var(--font-mono);
+  font-size: 13px;
+  letter-spacing: var(--mono-ls);
+}
+
+/* --- 5.13 Deliveries layout, rows, lifecycle ------------------------------ */
+
+.deliveries-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 360px;
+  gap: 48px;
+  align-items: start;
+}
+.deliveries-main { min-width: 0; }
+.deliveries-rail {
+  border-left: 1px solid var(--hairline);
+  padding-left: 32px;
+  min-height: 300px;
+  min-width: 0;
+}
+
+.watch-register {
+  margin: 24px 0 32px;
+  padding: 20px;
+  border: 1px solid var(--hairline);
+  background: var(--surface-warm);
+}
+.watch-register h2 { margin: 4px 0 0; font-size: 20px; }
+.watch-register__empty { margin: 16px 0 0; color: var(--body-muted); }
+.watch-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  margin-top: 16px;
+}
+.watch-card {
+  min-width: 0;
+  padding: 16px;
+  border: 1px solid var(--hairline);
+  background: var(--surface-card);
+}
+.watch-card[data-phase="episode"] { border-left: 3px solid var(--coral); }
+.watch-card__head { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
+.watch-card > strong { display: block; margin-top: 10px; overflow-wrap: anywhere; }
+.watch-card__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 0; }
+.watch-card__facts div { min-width: 0; }
+.watch-card__facts dt { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
+.watch-card__facts dd { margin: 3px 0 0; font-size: 13px; overflow-wrap: anywhere; }
+.watch-history { margin-top: 16px; color: var(--body-muted); }
+.watch-history summary { cursor: pointer; }
+.watch-history ol { margin: 10px 0 0; padding-left: 22px; }
+.watch-history li { margin: 5px 0; }
+
+.delivery-group { margin-bottom: 28px; }
+.delivery-group__head {
+  display: flex;
+  gap: 10px;
+  align-items: baseline;
+  margin-bottom: 4px;
+  flex-wrap: wrap;
+}
+.delivery-group__key {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  letter-spacing: var(--mono-ls);
+  color: var(--slate);
+}
+
+.delivery-list { display: block; }
+.delivery-row {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 150px minmax(0, 1fr) auto auto;
+  gap: 16px;
+  align-items: center;
+  padding: 16px 8px;
+  border: none;
+  border-top: 1px solid var(--hairline);
+  background: transparent;
+  color: var(--ink);
+  text-align: left;
+  cursor: pointer;
+}
+.delivery-row[aria-selected="true"] { background: var(--pale-blue); }
+.delivery-row__id {
+  font-family: var(--font-mono);
+  font-size: 13px;
+  letter-spacing: var(--mono-ls);
+}
+.delivery-row__route {
+  font-size: 14px;
+  color: var(--body-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.delivery-row__time { white-space: nowrap; }
+
+.detail-pane {
+  display: grid;
+  gap: 20px;
+  align-content: start;
+}
+.detail-pane__id {
+  font-family: var(--font-mono);
+  font-size: 14px;
+  letter-spacing: var(--mono-ls);
+}
+.detail-pane__head { display: grid; gap: 6px; }
+.detail-pane__sub { font-size: 13px; color: var(--muted); }
+.detail-pane__empty {
+  font-size: 14px;
+  color: var(--muted);
+  padding-top: 8px;
+}
+
+/* Lifecycle timeline: 8px dots + 1px connector */
+.lifecycle { display: grid; gap: 0; }
+.lifecycle-item {
+  display: grid;
+  grid-template-columns: 14px minmax(0, 1fr);
+  gap: 14px;
+}
+.lifecycle-rail {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  justify-items: center;
+}
+.lifecycle-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-full);
+  margin-top: 6px;
+  background: var(--hairline);
+}
+.lifecycle-dot[data-kind="positive"]      { background: var(--deep-green); }
+.lifecycle-dot[data-kind="qualified"]     { background: var(--deep-green); }
+.lifecycle-dot[data-kind="active"]        { background: var(--action-blue); }
+.lifecycle-dot[data-kind="progress"]      { background: var(--slate); }
+.lifecycle-dot[data-kind="warning"]       { background: var(--coral-deep); }
+.lifecycle-dot[data-kind="indeterminate"] { background: var(--purple-deep); }
+.lifecycle-dot[data-kind="failure"]       { background: var(--error); }
+.lifecycle-dot[data-kind="inert"]         { background: var(--muted); }
+.lifecycle-dot[data-kind="unknown"]       { background: var(--canvas); box-shadow: inset 0 0 0 1px var(--error); }
+.lifecycle-connector {
+  width: 1px;
+  height: 100%;
+  background: var(--hairline);
+}
+.lifecycle-body { padding-bottom: 16px; }
+.lifecycle-item:last-child .lifecycle-body { padding-bottom: 0; }
+.lifecycle-head {
+  display: flex;
+  gap: 10px;
+  align-items: baseline;
+  flex-wrap: wrap;
+}
+.lifecycle-abs { font-size: 12px; color: var(--muted); }
+.lifecycle-note { font-size: 13px; color: var(--body-muted); margin-top: 4px; }
+.lifecycle-meaning { font-size: 12px; color: var(--muted); margin-top: 2px; }
+.truncation-note { font-size: 12px; color: var(--muted); margin-top: 8px; }
+
+/* Frames (safe codes) */
+.frames-list { display: grid; gap: 6px; }
+.frame-item {
+  display: flex;
+  gap: 12px;
+  align-items: baseline;
+  flex-wrap: wrap;
+}
+.frame-code {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  letter-spacing: var(--mono-ls);
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius-xs);
+  padding: 2px 8px;
+  white-space: nowrap;
+}
+
+.raw-json {
+  background: var(--soft-stone);
+  border-radius: var(--radius-xs);
+  padding: 12px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  line-height: 1.5;
+  overflow-x: auto;
+  margin: 10px 0 0;
+}
+
+.empty-state {
+  display: grid;
+  gap: 12px;
+  padding: 24px 0;
+}
+.empty-state__text { font-size: 14px; color: var(--body-muted); }
+.empty-state--activity { padding: 16px 0; max-width: none; }
+
+/* --- 5.14 Activity -------------------------------------------------------- */
+
+.activity-list { display: block; }
+.activity-row {
+  display: grid;
+  grid-template-columns: 110px 110px minmax(0, 1fr);
+  gap: 16px;
+  align-items: baseline;
+  padding: 14px 8px;
+  border-top: 1px solid var(--hairline);
+}
+.activity-kind {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: var(--mono-ls);
+  text-transform: uppercase;
+  color: var(--slate);
+}
+.activity-text { font-size: 14px; line-height: 1.5; }
+
+/* --- 5.15 Tables & counters (Diagnostics) --------------------------------- */
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: left;
+}
+.data-table th,
+.data-table td {
+  padding: 12px 8px;
+  font-size: 14px;
+  font-weight: 400;
+  text-align: left;
+  border-top: 1px solid var(--hairline);
+  vertical-align: baseline;
+}
+.data-table thead th {
+  border-top: none;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  letter-spacing: var(--mono-ls);
+  text-transform: uppercase;
+  color: var(--muted);
+  white-space: nowrap;
+}
+.data-table td.is-mono,
+.data-table .cell-mono {
+  font-family: var(--font-mono);
+  font-size: 14px;
+  letter-spacing: 0;
+}
+.data-table caption.table-caption {
+  caption-side: top;
+  text-align: left;
+  padding: 0 0 8px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  letter-spacing: var(--mono-ls);
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+/* Disclosure reads as a text link ("counters · show"), not a block header. */
+.details-block { border-top: none; }
+.details-block > summary {
+  width: fit-content;
+  list-style: none;
+  cursor: pointer;
+  padding: 0;
+  font-family: var(--font-body);
+  font-size: 14px;
+  letter-spacing: normal;
+  text-transform: none;
+  color: var(--action-blue);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+.details-block > summary::-webkit-details-marker { display: none; }
+.details-block > summary:hover { opacity: .92; color: var(--action-blue); }
+.details-block > summary:focus-visible { outline-offset: 2px; }
+.details-block__content { padding: 14px 0 20px; }
+
+/* Counters render as a real table (caption + row headers kept for AT) with
+   the prototype's list geometry. */
+.counters-list { max-width: 480px; }
+.data-table--counters th,
+.data-table--counters td { padding: 10px 8px; }
+.data-table--counters th[scope="row"] { color: var(--body-muted); }
+.data-table--counters td { text-align: right; }
+
+.env-name {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  letter-spacing: var(--mono-ls);
+  color: var(--body-muted);
+}
+.setting-list { display: grid; gap: 12px; }
+.setting-row {
+  display: grid;
+  gap: 6px;
+  padding: 12px 0;
+  border-top: 1px solid var(--hairline);
+  font-size: 14px;
+}
+
+/* --- 5.16 Misc affordances ------------------------------------------------ */
+
+/* The small round "i" that carries a tooltip; focusable for keyboard users. */
+.info-dot {
+  box-sizing: content-box; /* 16px + 1px border = the prototype's 18px dot */
+  width: 16px;
+  height: 16px;
+  border-radius: var(--radius-full);
+  border: 1px solid var(--hairline);
+  color: var(--muted);
+  font-family: var(--font-body);
+  font-size: 10px;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: default;
+  flex-shrink: 0;
+}
+.time-ago {
+  color: var(--muted);
+  font-size: 14px;
+  white-space: nowrap;
+}
+.succession-card {
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius-sm);
+  padding: 20px;
+  display: grid;
+  gap: 8px;
+  font-size: 14px;
+  max-width: 640px;
+}
+.succession-card__head {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.succession-card__title { font-size: 14px; line-height: 1.4; }
+.succession-note {
+  font-size: 14px;
+  color: var(--body-muted);
+  font-style: italic;
+}
+
+/* ==========================================================================
+   6. TOOLTIP (tokenized; hover AND keyboard)
+   ========================================================================== */
+
+[data-tip] { position: relative; }
+
+/* Focusable tooltip wrapper hugs its dot so the anchor and focus ring trace
+   the circle, not the line box. */
+.tooltip {
+  display: inline-flex;
+  align-items: center;
+  border-radius: var(--radius-full);
+}
+
+[data-tip]:hover::after,
+[data-tip]:focus-visible::after {
+  content: attr(data-tip);
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  background: var(--primary);
+  color: var(--on-primary);
+  font: 400 12px/1.4 var(--font-body);
+  padding: 4px 10px;
+  border-radius: var(--radius-xs);
+  white-space: nowrap;
+  z-index: 10;
+  pointer-events: none;
+}
+
+[data-tip-wrap][data-tip]:hover::after,
+[data-tip-wrap][data-tip]:focus-visible::after {
+  white-space: normal;
+  width: 320px;
+  max-width: 80vw;
+  left: 0;
+  right: auto;
+}
+
+/* ==========================================================================
+   7. RESPONSIVE — single breakpoint
+   ========================================================================== */
+
+@media (max-width: 760px) {
+  .header-bar { padding: 16px 20px 0; gap: 16px; }
+  .app-nav { padding: 14px 20px 0; gap: 18px; }
+  .app-main { padding: 28px 20px 64px; }
+  .app-footer { padding: 0 20px 32px; }
+
+  .header-spacer { display: none; }
+  .header-search { width: 100%; flex: 1 1 100%; box-sizing: border-box; }
+  .header-meta { width: 100%; }
+
+  .grid-2 { grid-template-columns: 1fr; }
+  .action-panel { grid-template-columns: 1fr; }
+  .grid-cards { grid-template-columns: 1fr; }
+
+  .deliveries-layout {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 28px;
+  }
+  .watch-grid { grid-template-columns: minmax(0, 1fr); }
+  .deliveries-rail {
+    border-left: none;
+    border-top: 1px solid var(--hairline);
+    padding-left: 0;
+    padding-top: 24px;
+    min-height: 0;
+  }
+
+  .delivery-row {
+    grid-template-columns: minmax(0, 1fr) auto;
+    row-gap: 8px;
+  }
+  .activity-row {
+    grid-template-columns: 96px minmax(0, 1fr);
+    grid-template-areas: "time kind" "time text";
+  }
+  .activity-row > .time-ago { grid-area: time; }
+  .activity-kind { grid-area: kind; }
+  .activity-row > .activity-text { grid-area: text; }
+
+  .exchange-board { padding: 20px; }
+  .panel { padding: 20px; }
+  .panel--warm { padding: 20px; }
+  .topology { padding: 18px 16px; }
+  .topology__cols { flex-wrap: wrap; }
+  .topology__svg { display: none; }
+  .topology__col { flex: 1 1 100%; padding-top: 8px; }
+  .topo-row { height: auto; padding: 6px 0; justify-content: flex-start; }
+
+  .filters { gap: 18px; }
+  .pulse { gap: 16px; }
+}
+
+/* ==========================================================================
+   8. REDUCED MOTION
+   ========================================================================== */
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    transition: none !important;
+    animation: none !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* ==========================================================================
+   9. FORCED COLORS — meaning must never rest on background alone
+   ========================================================================== */
+
+@media (forced-colors: active) {
+  .chip { border: 1px solid ButtonText; }
+  .pill[aria-pressed="true"] { outline: 2px solid Highlight; }
+  .lifecycle-dot {
+    forced-color-adjust: none;
+    border: 1px solid ButtonText;
+  }
+  .pulse-bar {
+    forced-color-adjust: none;
+    border: 1px solid ButtonText;
+  }
+  .topo-chip {
+    border: 1px solid ButtonText;
+    opacity: 1;
+  }
+  .topo-chip[data-highlight="on"] { outline: 2px solid Highlight; }
+  .delivery-row[aria-selected="true"] { outline: 2px solid Highlight; }
+  .notice { border: 1px solid CanvasText; }
+}