/* =============================================================
   BRIDGLY UTILITIES · v0.3
   A working CSS library for organizational intelligence interfaces.

   Animations, layout, components, and state utilities for real-time
   dashboards, agent interfaces, and collaborative surfaces.

   License: internal · Authors: Bridgly Design
   Docs: ./Bridgly Utilities.html
   ============================================================= */

/* -----------------------------------------------------------
   TABLE OF CONTENTS
   -----------------------------------------------------------
   01  Tokens (:root + prefers-color-scheme)
   02  Reset & base
   03  Layout utilities        .dashboard-grid, .split, etc.
   04  Spacing & sizing        .p-*, .gap-*, .w-*
   05  Component classes       .agent-card, .metric-widget, .stream-list
   06  State utilities         .is-live, .is-stale, .is-offline, .is-collab
   07  Presence primitives     .presence-cursor, .avatar-dock, .typing-dots
   08  Animation utilities     .fade-in, .slide-in-data, .pulse-update, .ticker
   09  Agent choreography      .reveal-step, .step-sequence
   10  Sparkline & chart       .sparkline, .bar-row, .dot-live
   11  Accessibility           focus-visible, reduced-motion, sr-only
   12  Error & offline         .agent-disconnected, .sync-failed, .offline
   13  Responsive              @media (max-width: 768px)
   ----------------------------------------------------------- */


/* =============================================================
   01 · TOKENS
   ============================================================= */

:root {
  /* Surface (dark default) */
  --b-bg:            #0A0A0A;
  --b-bg-elev:       #111111;
  --b-bg-elev-2:     #161616;
  --b-bg-inset:      #050505;

  /* Hairlines */
  --b-border:        rgba(255,255,255,0.08);
  --b-border-strong: rgba(255,255,255,0.14);
  --b-border-accent: rgba(90,168,255,0.35);

  /* Text */
  --b-fg:        #F2F2F2;
  --b-fg-muted:  #A3A3A3;
  --b-fg-subtle: #6F6F6F;
  --b-fg-faint:  #4A4A4A;

  /* Accent (singular, surgical) */
  --b-accent:      #5AA8FF;
  --b-accent-soft: rgba(90,168,255,0.14);
  --b-accent-glow: rgba(90,168,255,0.28);

  /* Semantic */
  --b-success: #4ADE80;
  --b-warn:    #FBBF24;
  --b-danger:  #F87171;
  --b-info:    #A78BFA;

  /* Data viz */
  --b-data-1: #5AA8FF;
  --b-data-2: #A78BFA;
  --b-data-3: #4ADE80;
  --b-data-4: #FBBF24;
  --b-data-5: #F87171;

  /* Spacing (4pt scale) */
  --b-space-1:  4px;
  --b-space-2:  8px;
  --b-space-3:  12px;
  --b-space-4:  16px;
  --b-space-5:  20px;
  --b-space-6:  24px;
  --b-space-8:  32px;
  --b-space-10: 40px;
  --b-space-12: 48px;
  --b-space-16: 64px;

  /* Radius */
  --b-radius-xs: 3px;
  --b-radius-sm: 6px;
  --b-radius-md: 8px;
  --b-radius-lg: 12px;

  /* Type */
  --b-font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --b-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Motion */
  --b-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --b-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --b-ease-spring: cubic-bezier(0.5, 1.5, 0.3, 1);
  --b-dur-fast: 120ms;
  --b-dur-med:  240ms;
  --b-dur-slow: 480ms;
  --b-dur-pulse: 2200ms;

  /* Elevation (used sparingly) */
  --b-shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --b-shadow-md: 0 8px 24px rgba(0,0,0,0.35);
  --b-shadow-lg: 0 20px 60px rgba(0,0,0,0.4);

  /* Focus ring */
  --b-focus-ring: 0 0 0 2px var(--b-bg), 0 0 0 4px var(--b-accent);
}

/* Auto light-mode via prefers-color-scheme, unless explicitly overridden */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --b-bg:            #FAFAFA;
    --b-bg-elev:       #FFFFFF;
    --b-bg-elev-2:     #F4F4F4;
    --b-bg-inset:      #EDEDED;

    --b-border:        rgba(0,0,0,0.08);
    --b-border-strong: rgba(0,0,0,0.16);
    --b-border-accent: rgba(0,102,204,0.35);

    --b-fg:        #0A0A0A;
    --b-fg-muted:  #555555;
    --b-fg-subtle: #8A8A8A;
    --b-fg-faint:  #BABABA;

    --b-accent:      #0066CC;
    --b-accent-soft: rgba(0,102,204,0.10);
    --b-accent-glow: rgba(0,102,204,0.22);

    --b-shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
    --b-shadow-md: 0 8px 24px rgba(0,0,0,0.08);
    --b-shadow-lg: 0 20px 60px rgba(0,0,0,0.12);
  }
}

/* Explicit overrides win over media query */
[data-theme="light"] {
  --b-bg:            #FAFAFA;
  --b-bg-elev:       #FFFFFF;
  --b-bg-elev-2:     #F4F4F4;
  --b-bg-inset:      #EDEDED;
  --b-border:        rgba(0,0,0,0.08);
  --b-border-strong: rgba(0,0,0,0.16);
  --b-border-accent: rgba(0,102,204,0.35);
  --b-fg:        #0A0A0A;
  --b-fg-muted:  #555555;
  --b-fg-subtle: #8A8A8A;
  --b-fg-faint:  #BABABA;
  --b-accent:      #0066CC;
  --b-accent-soft: rgba(0,102,204,0.10);
  --b-accent-glow: rgba(0,102,204,0.22);
}


/* =============================================================
   02 · RESET & BASE
   ============================================================= */

.bridgly-root,
.bridgly-root * { box-sizing: border-box; }

.bridgly-root {
  font-family: var(--b-font-sans);
  color: var(--b-fg);
  background: var(--b-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "ss02", "cv11";
}

.bridgly-root :is(h1, h2, h3, h4, h5, h6, p, figure, blockquote) { margin: 0; }
.bridgly-root ::selection { background: var(--b-accent-glow); color: var(--b-fg); }


/* =============================================================
   03 · LAYOUT UTILITIES
   -----------------------------------------------------------
   Atomic grids + a handful of named dashboard layouts.
   ============================================================= */

.stack          { display: flex; flex-direction: column; }
.row            { display: flex; flex-direction: row; }
.row-center     { display: flex; align-items: center; }
.row-between    { display: flex; align-items: center; justify-content: space-between; }
.row-end        { display: flex; align-items: center; justify-content: flex-end; }
.grid           { display: grid; }

.grid-2         { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--b-space-4); }
.grid-3         { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--b-space-4); }
.grid-4         { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--b-space-4); }
.grid-6         { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--b-space-4); }
.grid-auto      { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--b-space-4); }

/* Named dashboard layouts — the most common shapes in Bridgly portals. */

/* 1:2:1 rail / canvas / rail — the standard ops dashboard */
.dashboard-grid {
  display: grid;
  grid-template-columns: 260px 1fr 320px;
  gap: var(--b-space-4);
  min-height: 100vh;
  padding: var(--b-space-4);
  background: var(--b-bg);
}

/* Metrics strip + main canvas */
.dashboard-split {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  gap: var(--b-space-4);
}
.dashboard-split > .metric-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--b-space-3);
}

/* Agent registry: list + detail drawer */
.agent-registry {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 0;
  border: 1px solid var(--b-border);
  border-radius: var(--b-radius-md);
  overflow: hidden;
  background: var(--b-bg-elev);
}
.agent-registry > aside { border-left: 1px solid var(--b-border); background: var(--b-bg-elev-2); }

/* Full-bleed canvas for network graphs */
.canvas-full {
  position: relative;
  width: 100%;
  min-height: 480px;
  background: var(--b-bg-inset);
  border: 1px solid var(--b-border);
  border-radius: var(--b-radius-md);
  overflow: hidden;
}


/* =============================================================
   04 · SPACING & SIZING
   ============================================================= */

.gap-1 { gap: var(--b-space-1); }
.gap-2 { gap: var(--b-space-2); }
.gap-3 { gap: var(--b-space-3); }
.gap-4 { gap: var(--b-space-4); }
.gap-5 { gap: var(--b-space-5); }
.gap-6 { gap: var(--b-space-6); }
.gap-8 { gap: var(--b-space-8); }

.p-1 { padding: var(--b-space-1); } .p-2 { padding: var(--b-space-2); }
.p-3 { padding: var(--b-space-3); } .p-4 { padding: var(--b-space-4); }
.p-5 { padding: var(--b-space-5); } .p-6 { padding: var(--b-space-6); }
.p-8 { padding: var(--b-space-8); }

.px-3 { padding-inline: var(--b-space-3); } .px-4 { padding-inline: var(--b-space-4); }
.py-2 { padding-block: var(--b-space-2); }   .py-3 { padding-block: var(--b-space-3); }

.w-full { width: 100%; }
.h-full { height: 100%; }
.flex-1 { flex: 1; }
.flex-auto { flex: 0 0 auto; }

.sticky-top { position: sticky; top: 0; z-index: 10; background: var(--b-bg); }


/* =============================================================
   05 · COMPONENT CLASSES
   -----------------------------------------------------------
   Domain-specific components for organizational intelligence UIs.
   ============================================================= */

/* ── Agent card ── */
.agent-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--b-space-4);
  padding: var(--b-space-4) var(--b-space-5);
  background: var(--b-bg-elev);
  border: 1px solid var(--b-border);
  border-radius: var(--b-radius-md);
  transition: border-color var(--b-dur-fast) var(--b-ease-out),
              background  var(--b-dur-fast) var(--b-ease-out);
}
.agent-card:hover {
  border-color: var(--b-border-strong);
  background: var(--b-bg-elev-2);
}
.agent-card__icon {
  width: 36px; height: 36px;
  border-radius: var(--b-radius-sm);
  background: var(--b-accent-soft);
  border: 1px solid var(--b-border-accent);
  display: flex; align-items: center; justify-content: center;
  color: var(--b-accent);
  flex-shrink: 0;
}
.agent-card__title {
  font-size: 14px; font-weight: 500;
  letter-spacing: -0.005em;
  margin-bottom: 3px;
}
.agent-card__meta {
  font-family: var(--b-font-mono);
  font-size: 11px;
  color: var(--b-fg-subtle);
  letter-spacing: 0.02em;
}
.agent-card__trust {
  font-family: var(--b-font-mono);
  font-size: 13px;
  color: var(--b-fg);
  text-align: right;
}
.agent-card__trust small {
  display: block;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--b-fg-subtle);
  text-transform: uppercase;
  margin-bottom: 2px;
}

/* ── Metric widget ── */
.metric-widget {
  padding: var(--b-space-4) var(--b-space-5);
  background: var(--b-bg-elev);
  border: 1px solid var(--b-border);
  border-radius: var(--b-radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--b-space-2);
  min-height: 96px;
  position: relative;
  overflow: hidden;
}
.metric-widget__label {
  font-family: var(--b-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--b-fg-subtle);
  text-transform: uppercase;
}
.metric-widget__value {
  font-family: var(--b-font-mono);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--b-fg);
  line-height: 1;
}
.metric-widget__delta {
  font-family: var(--b-font-mono);
  font-size: 11px;
  color: var(--b-fg-muted);
}
.metric-widget__delta.is-positive { color: var(--b-success); }
.metric-widget__delta.is-negative { color: var(--b-danger); }
.metric-widget__spark {
  position: absolute;
  right: var(--b-space-5);
  bottom: var(--b-space-4);
  width: 90px; height: 28px;
  pointer-events: none;
}

/* ── Stream list ── */
.stream-list {
  display: flex;
  flex-direction: column;
  background: var(--b-bg-elev);
  border: 1px solid var(--b-border);
  border-radius: var(--b-radius-md);
  overflow: hidden;
}
.stream-list__head {
  padding: var(--b-space-3) var(--b-space-4);
  border-bottom: 1px solid var(--b-border);
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--b-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--b-fg-subtle);
  text-transform: uppercase;
}
.stream-list__body { max-height: 320px; overflow-y: auto; }
.stream-list__item {
  padding: var(--b-space-3) var(--b-space-4);
  border-bottom: 1px solid var(--b-border);
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: center;
  gap: var(--b-space-3);
  font-size: 12.5px;
  transition: background var(--b-dur-fast) var(--b-ease-out);
}
.stream-list__item:last-child { border-bottom: none; }
.stream-list__item:hover { background: var(--b-bg-elev-2); }
.stream-list__time {
  font-family: var(--b-font-mono);
  font-size: 11px;
  color: var(--b-fg-subtle);
}

/* ── Chip (status) ── */
.chip-b {
  display: inline-flex;
  align-items: center;
  gap: var(--b-space-2);
  height: 22px;
  padding: 0 var(--b-space-3);
  border-radius: 999px;
  border: 1px solid var(--b-border);
  background: var(--b-bg-elev);
  font-family: var(--b-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--b-fg-muted);
  white-space: nowrap;
}
.chip-b::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--b-fg-subtle);
}
.chip-b.is-ok     { color: #A7F3D0; border-color: rgba(74,222,128,0.25); }
.chip-b.is-ok::before    { background: var(--b-success); }
.chip-b.is-warn   { color: #FCD34D; border-color: rgba(251,191,36,0.25); }
.chip-b.is-warn::before  { background: var(--b-warn); }
.chip-b.is-danger { color: #FCA5A5; border-color: rgba(248,113,113,0.25); }
.chip-b.is-danger::before{ background: var(--b-danger); }
.chip-b.is-info   { color: #93C5FD; border-color: rgba(90,168,255,0.25); }
.chip-b.is-info::before  { background: var(--b-accent); }

[data-theme="light"] .chip-b.is-ok     { color: #065F46; }
[data-theme="light"] .chip-b.is-warn   { color: #92400E; }
[data-theme="light"] .chip-b.is-danger { color: #991B1B; }
[data-theme="light"] .chip-b.is-info   { color: #1E3A8A; }

/* ── Button ── */
.btn-b {
  display: inline-flex;
  align-items: center;
  gap: var(--b-space-2);
  height: 32px;
  padding: 0 var(--b-space-4);
  background: var(--b-bg-elev);
  border: 1px solid var(--b-border);
  border-radius: var(--b-radius-sm);
  color: var(--b-fg);
  font-family: var(--b-font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--b-dur-fast) var(--b-ease-out),
              border-color var(--b-dur-fast) var(--b-ease-out),
              transform var(--b-dur-fast) var(--b-ease-out);
}
.btn-b:hover    { border-color: var(--b-border-strong); background: var(--b-bg-elev-2); }
.btn-b:active   { transform: translateY(0.5px); }
.btn-b.is-primary {
  background: var(--b-fg); color: var(--b-bg);
  border-color: var(--b-fg);
}
.btn-b.is-primary:hover { background: color-mix(in srgb, var(--b-fg) 85%, transparent); }
.btn-b.is-ghost {
  background: transparent; border-color: transparent; color: var(--b-fg-muted);
}
.btn-b.is-ghost:hover { color: var(--b-fg); background: var(--b-bg-elev); }
.btn-b:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Panel ── */
.panel-b {
  background: var(--b-bg-elev);
  border: 1px solid var(--b-border);
  border-radius: var(--b-radius-md);
  overflow: hidden;
}
.panel-b__head {
  padding: var(--b-space-3) var(--b-space-4);
  border-bottom: 1px solid var(--b-border);
  display: flex; align-items: center; justify-content: space-between;
}
.panel-b__title { font-size: 13px; font-weight: 500; }
.panel-b__body { padding: var(--b-space-4); }


/* =============================================================
   06 · STATE UTILITIES
   -----------------------------------------------------------
   Apply to any element to express organizational intelligence state.
   ============================================================= */

/* Live — data is streaming in real time */
.is-live {
  position: relative;
}
.is-live::after {
  content: "";
  position: absolute;
  top: var(--b-space-3);
  right: var(--b-space-3);
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--b-success);
  box-shadow: 0 0 8px color-mix(in srgb, var(--b-success) 50%, transparent);
  animation: b-pulse var(--b-dur-pulse) var(--b-ease-out) infinite;
}

/* Stale — data is outdated / last known state */
.is-stale {
  opacity: 0.7;
  position: relative;
}
.is-stale::before {
  content: "STALE";
  position: absolute;
  top: var(--b-space-3);
  right: var(--b-space-3);
  font-family: var(--b-font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--b-warn);
  background: rgba(251,191,36,0.12);
  padding: 1px 6px;
  border-radius: 3px;
}

/* Offline — no connection */
.is-offline {
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent 0 8px,
      var(--b-border) 8px 9px
    );
  opacity: 0.6;
  pointer-events: none;
}

/* Collaborative — multiple users are viewing */
.is-collab {
  border-color: var(--b-border-accent);
}
.is-collab::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--b-border-accent);
  border-radius: inherit;
  pointer-events: none;
  animation: b-collab-shimmer 3s var(--b-ease-in-out) infinite;
}

/* Interactive — clickable/pressable affordance */
.is-interactive {
  cursor: pointer;
  transition: transform var(--b-dur-fast) var(--b-ease-out),
              border-color var(--b-dur-fast) var(--b-ease-out);
}
.is-interactive:hover { border-color: var(--b-border-strong); }
.is-interactive:active { transform: translateY(1px); }

/* Loading / skeleton */
.is-loading {
  position: relative;
  overflow: hidden;
  color: transparent !important;
  background: var(--b-bg-elev-2);
  border-radius: var(--b-radius-xs);
}
.is-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--b-border-strong) 50%,
    transparent 100%
  );
  animation: b-shimmer 1.4s linear infinite;
}

/* Pending / awaiting council */
.is-pending {
  border-color: var(--b-border-accent);
  background: linear-gradient(135deg, var(--b-accent-soft), transparent 70%), var(--b-bg-elev);
}

/* Approved */
.is-approved {
  border-color: rgba(74,222,128,0.25);
}

/* Revoked */
.is-revoked {
  opacity: 0.5;
  text-decoration: line-through;
  text-decoration-color: var(--b-danger);
}


/* =============================================================
   07 · PRESENCE PRIMITIVES (collaborative interfaces)
   ============================================================= */

/* Collaborative cursor */
.presence-cursor {
  position: absolute;
  pointer-events: none;
  z-index: 100;
  transition: transform 80ms linear;
  will-change: transform;
}
.presence-cursor__pointer {
  width: 14px; height: 14px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.presence-cursor__label {
  display: inline-block;
  margin-top: -2px;
  margin-left: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: var(--b-font-mono);
  font-size: 10px;
  color: #fff;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Presence dock — who is currently viewing */
.avatar-dock {
  display: inline-flex;
  align-items: center;
  padding-left: 6px;
}
.avatar-dock__slot {
  width: 24px; height: 24px;
  border-radius: 999px;
  border: 2px solid var(--b-bg-elev);
  margin-left: -6px;
  background: var(--b-bg-elev-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
  font-family: var(--b-font-mono);
  font-weight: 500;
  color: #fff;
  animation: b-avatar-enter var(--b-dur-slow) var(--b-ease-spring) both;
}
.avatar-dock__more {
  width: 24px; height: 24px;
  border-radius: 999px;
  border: 1px solid var(--b-border);
  margin-left: -6px;
  background: var(--b-bg-elev);
  color: var(--b-fg-muted);
  font-family: var(--b-font-mono);
  font-size: 10px;
  display: flex; align-items: center; justify-content: center;
}

/* Typing indicator */
.typing-dots {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  padding: 6px 10px;
  background: var(--b-bg-elev-2);
  border-radius: 999px;
}
.typing-dots span {
  width: 4px; height: 4px;
  border-radius: 999px;
  background: var(--b-fg-subtle);
  animation: b-typing 1.2s var(--b-ease-in-out) infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }

/* Selection highlight (when someone else is focused on an element) */
.presence-selection {
  position: relative;
}
.presence-selection::after {
  content: attr(data-presence-name);
  position: absolute;
  top: -20px; left: -1px;
  padding: 2px 6px;
  font-family: var(--b-font-mono);
  font-size: 10px;
  color: #fff;
  background: var(--presence-color, var(--b-accent));
  border-radius: 3px 3px 3px 0;
  letter-spacing: 0.02em;
}
.presence-selection {
  outline: 2px solid var(--presence-color, var(--b-accent));
  outline-offset: 2px;
  border-radius: var(--b-radius-xs);
}


/* =============================================================
   08 · ANIMATION UTILITIES
   -----------------------------------------------------------
   Entry, exit, pulse, update. Every animation respects
   prefers-reduced-motion (see § 11).
   ============================================================= */

.fade-in        { animation: b-fade-in var(--b-dur-med) var(--b-ease-out) both; }
.fade-out       { animation: b-fade-out var(--b-dur-med) var(--b-ease-out) both; }
.slide-in-data  { animation: b-slide-in-data var(--b-dur-med) var(--b-ease-out) both; }
.slide-in-up    { animation: b-slide-in-up var(--b-dur-med) var(--b-ease-out) both; }
.slide-in-right { animation: b-slide-in-right var(--b-dur-med) var(--b-ease-out) both; }
.scale-in       { animation: b-scale-in var(--b-dur-med) var(--b-ease-spring) both; }
.pulse-update   { animation: b-pulse-update var(--b-dur-slow) var(--b-ease-out); }
.flash-ok       { animation: b-flash-ok var(--b-dur-slow) var(--b-ease-out); }
.flash-warn     { animation: b-flash-warn var(--b-dur-slow) var(--b-ease-out); }

/* Staggered children — add index via CSS var or style */
.stagger > * { animation-delay: calc(var(--i, 0) * 60ms); }

/* Number ticker — updates without layout shift */
.ticker {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-family: var(--b-font-mono);
  transition: color var(--b-dur-med) var(--b-ease-out);
}
.ticker.is-updating {
  animation: b-pulse-update var(--b-dur-slow) var(--b-ease-out);
}

/* Sparkline draw-in */
.sparkline-draw path,
.sparkline-draw polyline {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: b-sparkline-draw var(--b-dur-slow) var(--b-ease-out) forwards;
}


/* =============================================================
   09 · AGENT CHOREOGRAPHY
   -----------------------------------------------------------
   Step-by-step reveal for agent run logs, workflow visualizations.
   Pair with JS that advances an --i index OR add .is-active.
   ============================================================= */

.step-sequence {
  display: flex;
  flex-direction: column;
  gap: var(--b-space-2);
  font-family: var(--b-font-mono);
  font-size: 12px;
}
.step-sequence > .reveal-step {
  opacity: 0;
  transform: translateX(-8px);
  animation: b-reveal-step var(--b-dur-med) var(--b-ease-out) both;
  animation-delay: calc(var(--i, 0) * 300ms);
}
.reveal-step {
  display: flex;
  align-items: center;
  gap: var(--b-space-3);
  color: var(--b-fg-muted);
}
.reveal-step__dot {
  width: 14px; height: 14px;
  border-radius: 999px;
  border: 1px solid var(--b-border);
  background: var(--b-bg-inset);
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.reveal-step.is-done  { color: var(--b-fg-subtle); }
.reveal-step.is-done .reveal-step__dot {
  background: rgba(74,222,128,0.15);
  border-color: rgba(74,222,128,0.3);
  color: var(--b-success);
}
.reveal-step.is-active { color: var(--b-fg); }
.reveal-step.is-active .reveal-step__dot {
  background: var(--b-accent-soft);
  border-color: var(--b-border-accent);
}
.reveal-step.is-active .reveal-step__dot::after {
  content: "";
  width: 4px; height: 4px;
  border-radius: 999px;
  background: var(--b-accent);
  animation: b-pulse var(--b-dur-pulse) var(--b-ease-out) infinite;
}


/* =============================================================
   10 · SPARKLINE, BARS, LIVE DOT
   ============================================================= */

.sparkline { width: 100%; height: 36px; display: block; }

.bar-row { display: flex; align-items: flex-end; gap: 3px; height: 60px; }
.bar-row > div {
  flex: 1;
  background: var(--b-accent);
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  animation: b-slide-in-up var(--b-dur-med) var(--b-ease-out) both;
  animation-delay: calc(var(--i, 0) * 30ms);
}

.dot-live {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--b-success);
  box-shadow: 0 0 8px color-mix(in srgb, var(--b-success) 50%, transparent);
  animation: b-pulse var(--b-dur-pulse) var(--b-ease-out) infinite;
}
.dot-live.is-accent {
  background: var(--b-accent);
  box-shadow: 0 0 8px var(--b-accent-glow);
}


/* =============================================================
   11 · ACCESSIBILITY
   ============================================================= */

/* Screen-reader only */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Visible focus ring on keyboard nav only */
.bridgly-root :focus-visible {
  outline: none;
  box-shadow: var(--b-focus-ring);
  border-radius: var(--b-radius-xs);
}

/* Respect user motion preference */
@media (prefers-reduced-motion: reduce) {
  .bridgly-root *,
  .bridgly-root *::before,
  .bridgly-root *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .dot-live, .is-live::after { animation: none !important; }
}

/* High-contrast mode hint */
@media (prefers-contrast: more) {
  :root {
    --b-border:        rgba(255,255,255,0.2);
    --b-border-strong: rgba(255,255,255,0.35);
    --b-fg-muted:      #C4C4C4;
    --b-fg-subtle:     #999999;
  }
}


/* =============================================================
   12 · ERROR & OFFLINE STATES
   ============================================================= */

.agent-disconnected {
  position: relative;
  opacity: 0.6;
}
.agent-disconnected::after {
  content: "⚠ DISCONNECTED";
  position: absolute;
  top: var(--b-space-3);
  right: var(--b-space-3);
  font-family: var(--b-font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--b-danger);
  background: rgba(248,113,113,0.12);
  border: 1px solid rgba(248,113,113,0.25);
  padding: 2px 6px;
  border-radius: 3px;
}

.sync-failed {
  border-color: rgba(248,113,113,0.35) !important;
  background: linear-gradient(135deg, rgba(248,113,113,0.05), transparent 60%), var(--b-bg-elev);
}

.intelligence-stale {
  filter: grayscale(1);
  opacity: 0.75;
}

.offline-banner {
  padding: var(--b-space-2) var(--b-space-4);
  background: rgba(251,191,36,0.1);
  border-top: 1px solid rgba(251,191,36,0.25);
  border-bottom: 1px solid rgba(251,191,36,0.25);
  font-family: var(--b-font-mono);
  font-size: 11px;
  color: var(--b-warn);
  letter-spacing: 0.04em;
  text-align: center;
}
.offline-banner::before {
  content: "● ";
  color: var(--b-warn);
}


/* =============================================================
   13 · RESPONSIVE (desktop-first, breaks at 768px)
   ============================================================= */

@media (max-width: 768px) {
  .dashboard-grid { grid-template-columns: 1fr; padding: var(--b-space-3); }
  .dashboard-split > .metric-strip { grid-template-columns: repeat(2, 1fr); }
  .agent-registry { grid-template-columns: 1fr; }
  .agent-registry > aside {
    border-left: none;
    border-top: 1px solid var(--b-border);
  }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-6 { grid-template-columns: repeat(2, 1fr); }
  .agent-card { grid-template-columns: auto 1fr; }
  .agent-card__trust { grid-column: 1 / -1; text-align: left; }
  .metric-widget__value { font-size: 22px; }
}


/* =============================================================
   KEYFRAMES
   ============================================================= */

@keyframes b-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes b-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes b-slide-in-data {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes b-slide-in-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes b-slide-in-right {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes b-scale-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes b-pulse {
  0%   { transform: scale(1);   opacity: 1; }
  50%  { transform: scale(1.3); opacity: 0.6; }
  100% { transform: scale(1);   opacity: 1; }
}
@keyframes b-pulse-update {
  0%   { background-color: var(--b-accent-soft); }
  100% { background-color: transparent; }
}
@keyframes b-flash-ok {
  0%   { background-color: rgba(74,222,128,0.2); }
  100% { background-color: transparent; }
}
@keyframes b-flash-warn {
  0%   { background-color: rgba(251,191,36,0.2); }
  100% { background-color: transparent; }
}
@keyframes b-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@keyframes b-collab-shimmer {
  0%,100% { opacity: 0.5; }
  50%     { opacity: 1; }
}
@keyframes b-avatar-enter {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes b-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-3px); opacity: 1; }
}
@keyframes b-reveal-step {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes b-sparkline-draw {
  to { stroke-dashoffset: 0; }
}