/* ============================================================
   FORONDA COMMAND CENTER — Component Library v1.0
   Cockpit Design System Foundation
   Brand Agent | 2026-05-30
   ============================================================
   Requires: tokens.css (must be loaded first)
   Pure CSS — no JS dependency for styling.
   All components compose via class names only.
   ============================================================ */


/* ════════════════════════════════════════════════════════════
   1. COCKPIT CARD — Core artifact display unit
   ════════════════════════════════════════════════════════════ */

.cockpit-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--glass-2);
  border-radius: var(--radius-lg);
  border: var(--border-dim);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));
  overflow: hidden;
  transition:
    transform var(--dur-normal) var(--ease-spring),
    box-shadow var(--dur-normal) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);

  /* Scan line pseudo-element — cockpit atmosphere */
  &::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
    pointer-events: none;
    animation: scan-line var(--dur-shimmer) var(--ease-linear) infinite;
    animation-play-state: paused; /* Only plays on urgent cards */
  }
}

/* Shimmer top-edge accent line */
.cockpit-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.12) 30%,
    rgba(255,255,255,0.20) 50%,
    rgba(255,255,255,0.12) 70%,
    transparent 100%
  );
  pointer-events: none;
}

.cockpit-card:hover {
  transform: translateY(-3px) scale(1.005);
  box-shadow: var(--shadow-xl);
  border-color: rgba(255,255,255,0.16);
}

.cockpit-card:active {
  transform: translateY(-1px) scale(1.002);
  transition-duration: var(--dur-fast);
}

/* Card states by attention level */
.cockpit-card--now {
  background: linear-gradient(135deg, var(--red-bg) 0%, var(--bg-surface-1) 100%);
  border-color: var(--red-border);
  box-shadow: var(--glow-red);
  animation: urgent-pulse var(--dur-pulse) var(--ease-in-out) infinite;
}
.cockpit-card--now::after {
  animation-play-state: running;
}
.cockpit-card--now:hover {
  box-shadow: 0 0 0 1px var(--red-border),
              0 0 30px rgba(255,45,45,0.60),
              0 0 70px rgba(255,45,45,0.25),
              0 8px 24px rgba(0,0,0,0.8),
              inset 0 1px 0 rgba(255,80,80,0.18);
}

.cockpit-card--soon {
  background: linear-gradient(135deg, var(--cyan-bg) 0%, var(--bg-surface-1) 100%);
  border-color: var(--cyan-border);
  box-shadow: var(--glow-cyan);
}
.cockpit-card--soon:hover {
  box-shadow: 0 0 0 1px var(--cyan-border),
              0 0 20px rgba(0,212,255,0.45),
              0 0 50px rgba(0,212,255,0.15),
              0 8px 24px rgba(0,0,0,0.8),
              inset 0 1px 0 rgba(0,212,255,0.12);
}

.cockpit-card--fyi {
  opacity: 0.8;
}
.cockpit-card--fyi:hover {
  opacity: 1;
}

/* Card — status variants */
.cockpit-card--done {
  opacity: 0.5;
  filter: saturate(0.4);
}
.cockpit-card--killed {
  opacity: 0.35;
  filter: saturate(0);
}

/* Card anatomy sub-elements */
.cockpit-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.cockpit-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.cockpit-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin: 0;
}

.cockpit-card--now .cockpit-card__title {
  color: var(--red-text-on);
}
.cockpit-card--soon .cockpit-card__title {
  color: var(--cyan-text-on);
}

.cockpit-card__summary {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.cockpit-card__body {
  font-size: var(--text-base);
  color: var(--orange-text);
  line-height: var(--leading-relaxed);
}

.cockpit-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-1);
  padding-top: var(--space-3);
  border-top: var(--border-subtle);
}

.cockpit-card__timestamp {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.cockpit-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}


/* ════════════════════════════════════════════════════════════
   2. ATTENTION BADGES
   ════════════════════════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.2em 0.6em;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  white-space: nowrap;
  animation: badge-pop var(--dur-normal) var(--ease-elastic) both;
}

/* Attention level badges */
.badge--now {
  background: var(--red-surface);
  color: var(--red-text);
  border: 1px solid var(--red-border);
  box-shadow: 0 0 8px var(--red-glow-soft);
}
.badge--now::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: var(--radius-full);
  background: var(--red-core);
  box-shadow: 0 0 4px var(--red-core);
  animation: dot-pulse 1.2s var(--ease-in-out) infinite;
}

.badge--soon {
  background: var(--cyan-surface);
  color: var(--cyan-text);
  border: 1px solid var(--cyan-border);
  box-shadow: 0 0 6px var(--cyan-glow-soft);
}
.badge--soon::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: var(--radius-full);
  background: var(--cyan-dim);
}

.badge--fyi {
  background: rgba(255,255,255,0.04);
  color: var(--text-tertiary);
  border: 1px solid rgba(255,255,255,0.07);
}

/* Status badges */
.badge--unread {
  background: var(--orange-surface);
  color: var(--orange-text);
  border: 1px solid var(--orange-border);
  box-shadow: 0 0 6px var(--orange-glow-soft);
}
.badge--read {
  background: rgba(255,255,255,0.04);
  color: var(--text-tertiary);
  border: 1px solid rgba(255,255,255,0.06);
}
.badge--approved {
  background: var(--green-surface);
  color: var(--green-text);
  border: 1px solid var(--green-border);
  box-shadow: 0 0 6px var(--green-glow-soft);
}
.badge--iterate {
  background: var(--cyan-surface);
  color: var(--cyan-text);
  border: 1px solid var(--cyan-border);
}
.badge--killed {
  background: rgba(255,255,255,0.03);
  color: var(--text-disabled);
  border: 1px solid rgba(255,255,255,0.05);
  text-decoration: line-through;
}
.badge--done {
  background: var(--green-surface);
  color: var(--green-dim);
  border: 1px solid rgba(0,232,122,0.15);
  opacity: 0.7;
}


/* ════════════════════════════════════════════════════════════
   3. TYPE BADGES — artifact type labels
   ════════════════════════════════════════════════════════════ */

.type-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.2em 0.55em;
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}

.type-badge--rendering {
  background: rgba(99,102,241,0.12);
  color: var(--indigo-text);
  border-color: var(--indigo-border);
}
.type-badge--document {
  background: rgba(245,158,11,0.10);
  color: var(--amber-text);
  border-color: var(--amber-border);
}
.type-badge--draft {
  background: rgba(141,164,196,0.08);
  color: var(--text-secondary);
  border-color: rgba(141,164,196,0.15);
}
.type-badge--report {
  background: rgba(0,232,122,0.08);
  color: var(--green-text);
  border-color: var(--green-border);
}
.type-badge--alert {
  background: rgba(255,45,45,0.10);
  color: var(--red-text);
  border-color: var(--red-border);
}
.type-badge--approval_request {
  background: rgba(0,212,255,0.10);
  color: var(--cyan-text);
  border-color: var(--cyan-border);
  animation: badge-pop var(--dur-slow) var(--ease-elastic) both;
}
.type-badge--fyi {
  background: rgba(255,255,255,0.04);
  color: var(--text-tertiary);
  border-color: rgba(255,255,255,0.07);
}
.type-badge--message {
  background: rgba(255,140,0,0.08);
  color: var(--orange-text);
  border-color: var(--orange-border);
}


/* ════════════════════════════════════════════════════════════
   4. AGENT CHIP — compact agent identifier with tier color
   ════════════════════════════════════════════════════════════ */

.agent-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.25em 0.65em 0.25em 0.4em;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
  white-space: nowrap;
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

/* The tier color dot inside the chip */
.agent-chip::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--chip-color, var(--text-tertiary));
  box-shadow: 0 0 5px var(--chip-glow, transparent);
  flex-shrink: 0;
}

/* Tier variants — set via --chip-color custom property */
.agent-chip--code {
  --chip-color: var(--tier-code);
  --chip-glow: var(--indigo-glow);
}
.agent-chip--cowork {
  --chip-color: var(--tier-cowork);
  --chip-glow: var(--cyan-glow);
}
.agent-chip--chat {
  --chip-color: var(--tier-chat);
  --chip-glow: var(--green-glow);
}
.agent-chip--hosted {
  --chip-color: var(--tier-hosted);
  --chip-glow: var(--orange-glow);
}
.agent-chip--external {
  --chip-color: var(--tier-external);
  --chip-glow: transparent;
}


/* ════════════════════════════════════════════════════════════
   5. ZONE HEADERS — Needs You (loud) and FYI (calm)
   ════════════════════════════════════════════════════════════ */

.zone-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0 var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid;
  position: relative;
}

.zone-header__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

.zone-header__count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  padding: 0.15em 0.5em;
  border-radius: var(--radius-full);
  letter-spacing: var(--tracking-wide);
}

/* NEEDS YOU zone — loud, urgent */
.zone--needs-you {
  border-color: rgba(255, 45, 45, 0.25);
}
.zone--needs-you .zone-header__label {
  color: var(--red-text);
  text-shadow: 0 0 12px rgba(255,45,45,0.40);
}
.zone--needs-you .zone-header__count {
  background: var(--red-surface);
  color: var(--red-text);
  border: 1px solid var(--red-border);
  box-shadow: 0 0 8px var(--red-glow-soft);
  animation: dot-pulse 1.5s var(--ease-in-out) infinite;
}

/* FYI zone — calm, receded */
.zone--fyi {
  border-color: rgba(255,255,255,0.06);
}
.zone--fyi .zone-header__label {
  color: var(--text-tertiary);
}
.zone--fyi .zone-header__count {
  background: rgba(255,255,255,0.04);
  color: var(--text-tertiary);
  border: 1px solid rgba(255,255,255,0.06);
}

/* DECISIONS zone — cyan */
.zone--decisions {
  border-color: rgba(0, 212, 255, 0.20);
}
.zone--decisions .zone-header__label {
  color: var(--cyan-text);
  text-shadow: 0 0 10px rgba(0,212,255,0.30);
}
.zone--decisions .zone-header__count {
  background: var(--cyan-surface);
  color: var(--cyan-text);
  border: 1px solid var(--cyan-border);
  box-shadow: 0 0 6px var(--cyan-glow-soft);
}

/* DONE zone — muted green */
.zone--done {
  border-color: rgba(0, 232, 122, 0.12);
}
.zone--done .zone-header__label {
  color: var(--green-dim);
}
.zone--done .zone-header__count {
  background: var(--green-surface);
  color: var(--green-dim);
  border: 1px solid rgba(0,232,122,0.15);
}


/* ════════════════════════════════════════════════════════════
   6. BUTTONS
   ════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.55em 1.1em;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
  transition:
    transform var(--dur-fast) var(--ease-spring),
    box-shadow var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
}

/* Shimmer on hover */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    transparent 35%,
    rgba(255,255,255,0.07) 50%,
    transparent 65%
  );
  background-size: 200% 100%;
  background-position: 200% center;
  transition: background-position var(--dur-slow) var(--ease-out);
}
.btn:hover::after {
  background-position: -100% center;
}

.btn:active {
  transform: translateY(1px) scale(0.98);
}

/* APPROVE — green */
.btn--approve {
  background: var(--green-surface);
  color: var(--green-text);
  border-color: var(--green-border);
  box-shadow: 0 0 0 0 transparent, var(--shadow-sm);
}
.btn--approve:hover {
  background: rgba(0,232,122,0.15);
  border-color: var(--green-core);
  box-shadow: var(--glow-green), var(--shadow-sm);
  color: var(--green-bright);
  transform: translateY(-2px);
}

/* ITERATE — cyan */
.btn--iterate {
  background: var(--cyan-surface);
  color: var(--cyan-text);
  border-color: var(--cyan-border);
  box-shadow: var(--shadow-sm);
}
.btn--iterate:hover {
  background: rgba(0,212,255,0.13);
  border-color: var(--cyan-core);
  box-shadow: var(--glow-cyan), var(--shadow-sm);
  color: var(--cyan-bright);
  transform: translateY(-2px);
}

/* KILL — red */
.btn--kill {
  background: var(--red-surface);
  color: var(--red-text);
  border-color: var(--red-border);
  box-shadow: var(--shadow-sm);
}
.btn--kill:hover {
  background: rgba(255,45,45,0.14);
  border-color: var(--red-core);
  box-shadow: var(--glow-red), var(--shadow-sm);
  color: var(--red-bright);
  transform: translateY(-2px);
}

/* GHOST — neutral */
.btn--ghost {
  background: transparent;
  color: var(--text-tertiary);
  border-color: rgba(255,255,255,0.08);
  box-shadow: none;
}
.btn--ghost:hover {
  background: rgba(255,255,255,0.05);
  color: var(--text-secondary);
  border-color: rgba(255,255,255,0.14);
  transform: translateY(-1px);
}

/* PRIMARY — indigo filled */
.btn--primary {
  background: linear-gradient(135deg, var(--indigo-dim), var(--indigo-core));
  color: #fff;
  border-color: var(--indigo-border);
  box-shadow: var(--glow-indigo), var(--shadow-sm);
}
.btn--primary:hover {
  background: linear-gradient(135deg, var(--indigo-core), var(--indigo-bright));
  box-shadow: 0 0 0 1px var(--indigo-border), 0 0 20px var(--indigo-glow), var(--shadow-md);
  transform: translateY(-2px);
}

/* Size variants */
.btn--sm {
  font-size: var(--text-xs);
  padding: 0.4em 0.9em;
}
.btn--lg {
  font-size: var(--text-base);
  padding: 0.75em 1.5em;
  border-radius: var(--radius-lg);
}

/* Disabled */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}


/* ════════════════════════════════════════════════════════════
   7. MODAL / SHEET — bottom sheet on mobile, center on desktop
   ════════════════════════════════════════════════════════════ */

.cockpit-modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--bg-scrim);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  z-index: var(--z-overlay);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}

.cockpit-modal {
  position: relative;
  width: 100%;
  max-width: var(--content-panel);
  max-height: 88dvh;
  background: var(--glass-modal);
  border: var(--border-default);
  border-bottom: none;
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  box-shadow: var(--shadow-xl),
              0 -4px 32px rgba(0,0,0,0.6);
  padding: var(--space-6);
  padding-bottom: calc(var(--space-6) + var(--safe-bottom));
  overflow-y: auto;
  animation: slide-in-right var(--dur-slow) var(--ease-out) both;

  /* Glass rim at top */
  &::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(255,255,255,0.15) 30%,
      rgba(255,255,255,0.25) 50%,
      rgba(255,255,255,0.15) 70%,
      transparent 100%
    );
  }
}

/* Modal drag handle */
.cockpit-modal__handle {
  width: 36px;
  height: 4px;
  background: rgba(255,255,255,0.14);
  border-radius: var(--radius-full);
  margin: 0 auto var(--space-5);
}

.cockpit-modal__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}

/* Desktop: centered modal */
@media (min-width: 768px) {
  .cockpit-modal-backdrop {
    align-items: center;
    padding: var(--space-8);
  }
  .cockpit-modal {
    border-radius: var(--radius-2xl);
    border: var(--border-default);
    max-height: 80vh;
  }
}


/* ════════════════════════════════════════════════════════════
   8. THUMBNAIL FRAME — for rendering artifacts
   ════════════════════════════════════════════════════════════ */

.thumbnail-frame {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-well);
  border: var(--border-dim);
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
}

.thumbnail-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay on thumbnail */
.thumbnail-frame__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 50%,
    rgba(3,4,10,0.7) 100%
  );
  display: flex;
  align-items: flex-end;
  padding: var(--space-2) var(--space-3);
}

/* Placeholder when no image */
.thumbnail-frame--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xl);
  color: var(--text-tertiary);
  background: linear-gradient(135deg, var(--bg-well), var(--bg-surface-1));
}

/* Compact horizontal thumbnail */
.thumbnail-frame--sm {
  width: 64px;
  height: 48px;
  aspect-ratio: auto;
  border-radius: var(--radius-sm);
}


/* ════════════════════════════════════════════════════════════
   9. COCKPIT APP SHELL — layout primitives
   ════════════════════════════════════════════════════════════ */

/* Full-bleed page wrapper */
.cockpit-shell {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding-top: var(--safe-top);
}

/* Top bar / nav bar */
.cockpit-topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--glass-modal);
  backdrop-filter: blur(var(--blur-lg));
  -webkit-backdrop-filter: blur(var(--blur-lg));
  border-bottom: var(--border-subtle);
  gap: var(--space-3);
}

.cockpit-topbar__wordmark {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-wide);
  color: var(--text-primary);
  text-transform: uppercase;
}

/* Main content scroll area */
.cockpit-content {
  flex: 1;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: var(--content-card);
  margin: 0 auto;
  width: 100%;
}

/* Card list */
.cockpit-card-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Bottom nav bar */
.cockpit-bottom-nav {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: var(--space-2) var(--space-4);
  padding-bottom: calc(var(--space-2) + var(--safe-bottom));
  background: var(--glass-modal);
  backdrop-filter: blur(var(--blur-lg));
  -webkit-backdrop-filter: blur(var(--blur-lg));
  border-top: var(--border-subtle);
}

.cockpit-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.cockpit-nav-item--active {
  color: var(--cyan-text);
}


/* ════════════════════════════════════════════════════════════
   10. STAT / METRIC DISPLAY — hero numbers on dashboard
   ════════════════════════════════════════════════════════════ */

.cockpit-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  background: var(--glass-2);
  border-radius: var(--radius-lg);
  border: var(--border-dim);
  box-shadow: var(--shadow-md);
}

.cockpit-stat__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.cockpit-stat__value {
  font-family: var(--font-display);
  font-size: var(--text-pop);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

.cockpit-stat--urgent .cockpit-stat__value { color: var(--red-text); text-shadow: 0 0 20px var(--red-glow); }
.cockpit-stat--decision .cockpit-stat__value { color: var(--cyan-text); text-shadow: 0 0 16px var(--cyan-glow); }
.cockpit-stat--done .cockpit-stat__value { color: var(--green-text); text-shadow: 0 0 14px var(--green-glow); }

.cockpit-stat__delta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}


/* ════════════════════════════════════════════════════════════
   11. PILL ROW — horizontal filter / tab chips
   ════════════════════════════════════════════════════════════ */

.pill-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: var(--space-1);
}
.pill-row::-webkit-scrollbar { display: none; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.35em 0.85em;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-tertiary);
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.pill:hover {
  background: rgba(255,255,255,0.07);
  color: var(--text-secondary);
  border-color: rgba(255,255,255,0.14);
}
.pill--active {
  background: var(--cyan-surface);
  color: var(--cyan-text);
  border-color: var(--cyan-border);
  box-shadow: 0 0 6px var(--cyan-glow-soft);
}


/* ════════════════════════════════════════════════════════════
   12. DIVIDER + SEPARATOR
   ════════════════════════════════════════════════════════════ */

.divider {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.07) 20%,
    rgba(255,255,255,0.07) 80%,
    transparent 100%
  );
  margin: var(--space-4) 0;
}


/* ════════════════════════════════════════════════════════════
   13. LOADING / SPINNER
   ════════════════════════════════════════════════════════════ */

.cockpit-spinner {
  width: var(--icon-md);
  height: var(--icon-md);
  border: 2px solid rgba(255,255,255,0.08);
  border-top-color: var(--cyan-core);
  border-radius: var(--radius-full);
  animation: spin 0.7s var(--ease-linear) infinite;
}

.cockpit-spinner--sm {
  width: var(--icon-sm);
  height: var(--icon-sm);
  border-width: 1.5px;
}


/* ════════════════════════════════════════════════════════════
   14. EMPTY STATE
   ════════════════════════════════════════════════════════════ */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-6);
  text-align: center;
  color: var(--text-tertiary);
}

.empty-state__icon {
  font-size: var(--text-3xl);
  opacity: 0.4;
}

.empty-state__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}

.empty-state__body {
  font-size: var(--text-sm);
  max-width: 260px;
  line-height: var(--leading-relaxed);
}


/* ════════════════════════════════════════════════════════════
   15. UTILITY — ENTRY ANIMATION HELPERS
   Apply via class to trigger staggered reveal
   ════════════════════════════════════════════════════════════ */

.animate-in {
  animation: fade-in-up var(--dur-slow) var(--ease-out) both;
}
.animate-in--delay-1 { animation-delay: 80ms; }
.animate-in--delay-2 { animation-delay: 160ms; }
.animate-in--delay-3 { animation-delay: 240ms; }
.animate-in--delay-4 { animation-delay: 320ms; }
.animate-in--delay-5 { animation-delay: 400ms; }
.animate-in--delay-6 { animation-delay: 480ms; }


/* ════════════════════════════════════════════════════════════
   16. RESPONSIVE ADJUSTMENTS
   Tablet+ gets some breathing room
   ════════════════════════════════════════════════════════════ */

@media (min-width: 480px) {
  .cockpit-content {
    padding: var(--space-5) var(--space-5);
  }

  .cockpit-card__title {
    font-size: var(--text-xl);
  }
}

@media (min-width: 768px) {
  .cockpit-content {
    padding: var(--space-8) var(--space-6);
    max-width: var(--content-panel);
  }

  .cockpit-card-list {
    gap: var(--space-4);
  }

  /* Two-column stat grid on tablet */
  .cockpit-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
}

@media (min-width: 1024px) {
  .cockpit-content {
    max-width: var(--content-wide);
    padding: var(--space-10) var(--space-8);
  }

  .cockpit-stat-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Cards in wider layout */
  .cockpit-card {
    padding: var(--space-5) var(--space-6);
  }
}


/* ════════════════════════════════════════════════════════════
   17. ACCESSIBILITY — Reduced motion
   ════════════════════════════════════════════════════════════ */

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

/* ════════════════════════════════════════════════════════════
   AGENTS SCREEN — 02-agents.html component classes
   Ported from screen-specific styles into shared library.
   Compose from existing tokens + component classes only.
════════════════════════════════════════════════════════════ */

/* ── Page hero header ── */
.agents-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-2);
}

.agents-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.agents-header__title {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

.agents-header__pop {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}

.agents-header__pop-count {
  font-family: var(--font-mono);
  font-size: var(--text-pop);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--red-text);
  text-shadow: 0 0 24px var(--red-glow), 0 0 48px rgba(255,45,45,0.15);
  animation: urgent-pulse 2.4s ease-in-out infinite;
}

.agents-header__pop-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--red-text);
  opacity: 0.7;
  text-align: right;
}

/* ── Zone section headers ── */
.agents-zone-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  margin-bottom: var(--space-1);
  border-bottom: 1px solid;
}

.agents-zone-header--loud {
  border-color: rgba(255,45,45,0.22);
}
.agents-zone-header--loud .agents-zone-label {
  color: var(--red-text);
  text-shadow: 0 0 10px rgba(255,45,45,0.35);
}
.agents-zone-header--loud .agents-zone-count {
  background: var(--red-surface);
  color: var(--red-text);
  border: 1px solid var(--red-border);
  box-shadow: 0 0 8px var(--red-glow-soft);
  animation: dot-pulse 1.4s ease-in-out infinite;
}

.agents-zone-header--quiet {
  border-color: rgba(255,255,255,0.05);
}
.agents-zone-header--quiet .agents-zone-label {
  color: var(--text-tertiary);
}
.agents-zone-header--quiet .agents-zone-count {
  background: rgba(255,255,255,0.04);
  color: var(--text-tertiary);
  border: 1px solid rgba(255,255,255,0.06);
}

.agents-zone-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

.agents-zone-count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  padding: 0.15em 0.55em;
  border-radius: var(--radius-full);
  letter-spacing: var(--tracking-wide);
}

/* ── Agent card ── */
.agent-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--glass-2);
  border-radius: var(--radius-lg);
  border: var(--border-dim);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));
  overflow: hidden;
  cursor: pointer;
  transition:
    transform var(--dur-normal) var(--ease-spring),
    box-shadow var(--dur-normal) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
  text-decoration: none;
  color: inherit;
}

.agent-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.10) 30%,
    rgba(255,255,255,0.16) 50%,
    rgba(255,255,255,0.10) 70%,
    transparent 100%
  );
  pointer-events: none;
}

.agent-card:hover {
  transform: translateY(-2px) scale(1.004);
  box-shadow: var(--shadow-lg);
  border-color: rgba(255,255,255,0.14);
}

.agent-card--now {
  background: linear-gradient(135deg, var(--red-bg) 0%, var(--bg-surface-1) 70%);
  border-color: var(--red-border);
  box-shadow: var(--glow-red);
  animation: urgent-pulse var(--dur-pulse) ease-in-out infinite;
}
.agent-card--now:hover {
  box-shadow:
    0 0 0 1px var(--red-border),
    0 0 28px rgba(255,45,45,0.55),
    0 0 60px rgba(255,45,45,0.20),
    0 8px 24px rgba(0,0,0,0.8),
    inset 0 1px 0 rgba(255,80,80,0.15);
}

.agent-card--soon {
  background: linear-gradient(135deg, var(--cyan-bg) 0%, var(--bg-surface-1) 70%);
  border-color: var(--cyan-border);
  box-shadow: var(--glow-cyan);
}
.agent-card--soon:hover {
  box-shadow:
    0 0 0 1px var(--cyan-border),
    0 0 18px rgba(0,212,255,0.40),
    0 0 40px rgba(0,212,255,0.14),
    0 8px 24px rgba(0,0,0,0.8),
    inset 0 1px 0 rgba(0,212,255,0.10);
}

.agent-card--quiet {
  opacity: 0.52;
  filter: saturate(0.6);
  transition:
    opacity var(--dur-normal) var(--ease-out),
    filter var(--dur-normal) var(--ease-out),
    transform var(--dur-normal) var(--ease-spring),
    box-shadow var(--dur-normal) var(--ease-out);
}
.agent-card--quiet:hover {
  opacity: 0.85;
  filter: saturate(0.9);
}

/* ── Agent avatar ── */
.agent-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  background: var(--avatar-bg, var(--bg-surface-2));
  border: 1px solid var(--avatar-border, rgba(255,255,255,0.08));
  box-shadow: 0 0 8px var(--avatar-glow, transparent);
  position: relative;
  overflow: hidden;
}

.agent-avatar--code {
  --avatar-bg: rgba(99,102,241,0.15);
  --avatar-border: var(--indigo-border);
  --avatar-glow: var(--indigo-glow-soft);
  color: var(--indigo-bright);
}
.agent-avatar--cowork {
  --avatar-bg: rgba(0,212,255,0.13);
  --avatar-border: var(--cyan-border);
  --avatar-glow: var(--cyan-glow-soft);
  color: var(--cyan-bright);
}
.agent-avatar--chat {
  --avatar-bg: rgba(0,232,122,0.11);
  --avatar-border: var(--green-border);
  --avatar-glow: var(--green-glow-soft);
  color: var(--green-bright);
}
.agent-avatar--hosted {
  --avatar-bg: rgba(255,140,0,0.13);
  --avatar-border: var(--orange-border);
  --avatar-glow: var(--orange-glow-soft);
  color: var(--orange-bright);
}
.agent-avatar--external {
  --avatar-bg: rgba(180,180,180,0.10);
  --avatar-border: rgba(255,255,255,0.08);
  --avatar-glow: transparent;
  color: var(--text-secondary);
}

/* ── Agent card body ── */
.agent-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.agent-card__name-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.agent-card__name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agent-card--now .agent-card__name { color: var(--red-text-on); }
.agent-card--soon .agent-card__name { color: var(--cyan-text-on); }

.tier-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.tier-dot--code   { background: var(--tier-code);   box-shadow: 0 0 4px var(--indigo-glow); }
.tier-dot--cowork { background: var(--tier-cowork); box-shadow: 0 0 4px var(--cyan-glow); }
.tier-dot--chat   { background: var(--tier-chat);   box-shadow: 0 0 4px var(--green-glow); }
.tier-dot--hosted { background: var(--tier-hosted); box-shadow: 0 0 4px var(--orange-glow); }
.tier-dot--external { background: rgba(180,180,180,0.5); }

.agent-card__tier {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.agent-card__status {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agent-card--now .agent-card__status { color: var(--red-text); }
.agent-card--soon .agent-card__status { color: var(--cyan-text); }

.status-clear { color: var(--green-dim); }

/* ── Agent card right side ── */
.agent-card__right {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
}

.agent-count-bubble {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
}

.agent-count-bubble--now {
  background: var(--red-surface);
  color: var(--red-text);
  border: 1px solid var(--red-border);
  box-shadow: 0 0 10px var(--red-glow-soft);
  animation: badge-pop var(--dur-normal) var(--ease-elastic) both;
}

.agent-count-bubble--soon {
  background: var(--cyan-surface);
  color: var(--cyan-text);
  border: 1px solid var(--cyan-border);
  box-shadow: 0 0 8px var(--cyan-glow-soft);
  animation: badge-pop var(--dur-slow) var(--ease-elastic) both;
}

/* ── List containers ── */
.agents-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.agents-list > .agent-card:nth-child(1)  { animation: fade-in-up var(--dur-slow) var(--ease-out) 40ms both; }
.agents-list > .agent-card:nth-child(2)  { animation: fade-in-up var(--dur-slow) var(--ease-out) 100ms both; }
.agents-list > .agent-card:nth-child(3)  { animation: fade-in-up var(--dur-slow) var(--ease-out) 160ms both; }
.agents-list > .agent-card:nth-child(4)  { animation: fade-in-up var(--dur-slow) var(--ease-out) 220ms both; }
.agents-list > .agent-card:nth-child(n+5){ animation: fade-in-up var(--dur-slow) var(--ease-out) 280ms both; }

.agents-quiet-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.agents-quiet-list .agent-card {
  padding: var(--space-2) var(--space-3);
}
.agents-quiet-list .agent-avatar {
  width: 32px;
  height: 32px;
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
}
.agents-quiet-list .agent-card__name {
  font-size: var(--text-sm);
}

/* ── Expand toggle ── */
.quiet-expand-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-tertiary);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  margin-top: var(--space-2);
}
.quiet-expand-btn:hover {
  color: var(--text-secondary);
  background: rgba(255,255,255,0.03);
}

/* ════════════════════════════════════════════════════════════
   ARTIFACT DETAIL SCREEN — 03-artifact.html component classes
════════════════════════════════════════════════════════════ */

/* ── Hero thumbnail (full-width) ── */
.hero-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  margin-bottom: var(--space-4);
  border: 1px solid var(--indigo-border);
  box-shadow:
    0 0 0 1px rgba(99,102,241,0.20),
    0 0 40px rgba(99,102,241,0.18),
    var(--shadow-xl);
  background: var(--bg-well);
}

/* ── Detail header ── */
.detail-header {
  margin-bottom: var(--space-4);
}

.detail-header-row1 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.detail-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  flex: 1;
}

.detail-badges {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

/* ── Detail body ── */
.detail-body {
  background: rgba(18, 9, 0, 0.6);
  border: 1px solid var(--orange-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  position: relative;
  overflow: hidden;
}

.detail-body::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(to bottom, var(--orange-core), var(--orange-dim));
  border-radius: var(--radius-xs) 0 0 var(--radius-xs);
}

.detail-body-text {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--orange-text);
  line-height: var(--leading-relaxed);
  padding-left: var(--space-3);
}

/* ── Metadata table ── */
.detail-meta {
  background: var(--glass-1);
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-4);
}

.meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}

.meta-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.meta-value {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  letter-spacing: var(--tracking-wide);
}

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

.meta-tag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--indigo-text);
  background: rgba(99,102,241,0.08);
  border: 1px solid var(--indigo-border);
  padding: 0.15em 0.45em;
  border-radius: var(--radius-xs);
}

/* ── Gate disclaimer ── */
.gate-disclaimer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: rgba(0, 9, 15, 0.6);
  border: 1px solid rgba(0, 212, 255, 0.12);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.gate-disclaimer__icon {
  font-size: var(--text-base);
  flex-shrink: 0;
}

.gate-disclaimer__text {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-relaxed);
}

.gate-disclaimer__text strong {
  color: var(--cyan-text);
  font-weight: var(--weight-semibold);
}

/* ── Sticky action bar (detail page) ── */
.sticky-action-bar {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
  background: rgba(4, 7, 18, 0.97);
  backdrop-filter: blur(var(--blur-lg));
  -webkit-backdrop-filter: blur(var(--blur-lg));
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: var(--space-4);
  padding-bottom: calc(var(--space-4) + var(--safe-bottom));
}

.sticky-action-bar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--cyan-border) 30%,
    rgba(255,255,255,0.12) 50%,
    var(--cyan-border) 70%,
    transparent 100%
  );
}

.action-bar-inner {
  display: flex;
  gap: var(--space-3);
  max-width: 480px;
  margin: 0 auto;
  align-items: stretch;
}

/* ════════════════════════════════════════════════════════════
   APPROVAL MODAL SHEET — 04-approval.html component classes
════════════════════════════════════════════════════════════ */

/* ── Modal backdrop ── */
.approval-backdrop {
  position: fixed;
  inset: 0;
  background: var(--bg-scrim);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  z-index: var(--z-overlay);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: backdrop-in var(--dur-slow) var(--ease-out) both;
}

@keyframes backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Approval sheet ── */
.approval-sheet {
  position: relative;
  width: 100%;
  max-width: 430px;
  max-height: 88dvh;
  background: var(--glass-modal);
  border: var(--border-default);
  border-bottom: none;
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  box-shadow:
    var(--shadow-xl),
    0 -4px 32px rgba(0,0,0,0.65),
    0 -1px 0 rgba(255,255,255,0.06),
    0 0 60px rgba(0,232,122,0.06);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: sheet-rise var(--dur-slow) var(--ease-out) 80ms both;
}

@keyframes sheet-rise {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

.approval-sheet::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.12) 25%,
    rgba(255,255,255,0.22) 50%,
    rgba(255,255,255,0.12) 75%,
    transparent 100%
  );
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  pointer-events: none;
  z-index: 1;
}

/* ── Sheet inner padding ── */
.sheet-inner {
  padding: var(--space-5);
  padding-bottom: calc(var(--space-6) + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: relative;
  z-index: 2;
}

/* ── Grab handle ── */
.sheet-handle {
  width: 36px;
  height: 4px;
  background: rgba(255,255,255,0.15);
  border-radius: var(--radius-full);
  margin: 0 auto;
  flex-shrink: 0;
}

/* ── Sheet header ── */
.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.sheet-header__left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ── Title pop ── */
.sheet-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin: 0;
}

/* ── Render preview in modal ── */
.render-preview {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(99,102,241,0.20);
  box-shadow:
    0 0 0 1px rgba(99,102,241,0.10),
    0 4px 20px rgba(0,0,0,0.60),
    inset 0 1px 0 rgba(255,255,255,0.06);
  aspect-ratio: 16 / 9;
  background: var(--bg-well);
}

/* ── Summary section ── */
.sheet-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sheet-summary__line {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  letter-spacing: var(--tracking-normal);
}

.sheet-summary__body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--orange-text);
  line-height: var(--leading-relaxed);
}

/* ── Trust anchor ── */
.trust-anchor {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: rgba(0,232,122,0.04);
  border: 1px solid rgba(0,232,122,0.10);
  border-radius: var(--radius-md);
}

.trust-anchor__icon {
  font-size: var(--text-sm);
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.75;
}

.trust-anchor__text {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--green-dim);
  line-height: var(--leading-snug);
}

/* ── Note field ── */
.sheet-note-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sheet-note-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.sheet-note {
  width: 100%;
  min-height: 72px;
  padding: var(--space-3) var(--space-4);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  resize: none;
  outline: none;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
  box-sizing: border-box;
}

.sheet-note::placeholder {
  color: var(--text-disabled);
  font-style: italic;
}

.sheet-note:focus {
  border-color: rgba(0,212,255,0.35);
  background: rgba(0,212,255,0.03);
  box-shadow:
    0 0 0 3px rgba(0,212,255,0.06),
    inset 0 1px 0 rgba(255,255,255,0.03);
}

/* ── Sheet divider ── */
.sheet-divider {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.07) 20%,
    rgba(255,255,255,0.07) 80%,
    transparent 100%
  );
}

/* ── Sheet actions ── */
.sheet-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.sheet-action-approve {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(140deg, rgba(0,232,122,0.14) 0%, rgba(0,232,122,0.08) 100%);
  border: 1.5px solid var(--green-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--green-text);
  box-shadow: var(--glow-green), inset 0 1px 0 rgba(0,232,122,0.10);
  position: relative;
  overflow: hidden;
  transition:
    transform var(--dur-fast) var(--ease-spring),
    box-shadow var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.sheet-action-approve:hover {
  background: linear-gradient(140deg, rgba(0,232,122,0.20) 0%, rgba(0,232,122,0.12) 100%);
  border-color: var(--green-core);
  box-shadow:
    0 0 0 1px var(--green-border),
    0 0 28px rgba(0,232,122,0.45),
    0 8px 24px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(0,232,122,0.16);
  color: var(--green-bright);
  transform: translateY(-2px) scale(1.01);
}

.sheet-action-approve:active {
  transform: translateY(1px) scale(0.99);
  transition-duration: var(--dur-instant);
}

.sheet-action-approve:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.sheet-actions-secondary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.sheet-action-iterate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3);
  background: var(--cyan-surface);
  border: 1px solid var(--cyan-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--cyan-text);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur-fast) var(--ease-spring),
    box-shadow var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.sheet-action-iterate:hover {
  background: rgba(0,212,255,0.12);
  border-color: var(--cyan-core);
  box-shadow: var(--glow-cyan), var(--shadow-sm);
  color: var(--cyan-bright);
  transform: translateY(-2px);
}

.sheet-action-iterate:active { transform: translateY(1px) scale(0.98); }
.sheet-action-iterate:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.sheet-action-kill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3);
  background: var(--red-surface);
  border: 1px solid var(--red-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--red-text);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur-fast) var(--ease-spring),
    box-shadow var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.sheet-action-kill:hover {
  background: rgba(255,45,45,0.12);
  border-color: var(--red-core);
  box-shadow: var(--glow-red), var(--shadow-sm);
  color: var(--red-bright);
  transform: translateY(-2px);
}

.sheet-action-kill:active { transform: translateY(1px) scale(0.98); }
.sheet-action-kill:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ── Action label anatomy ── */
.approve-icon {
  font-size: 1.4em;
  line-height: 1;
  filter: drop-shadow(0 0 8px rgba(0,232,122,0.6));
}

.approve-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.approve-label__main {
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-wide);
  line-height: 1;
}

.approve-label__sub {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-normal);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--green-dim);
  line-height: 1;
}

.action-icon {
  font-size: 1.1em;
  line-height: 1;
  flex-shrink: 0;
}

.action-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.action-label__main {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  line-height: 1;
}

.action-label__sub {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: var(--weight-normal);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  opacity: 0.65;
  line-height: 1;
}

/* ── Topbar back button (artifact detail) ── */
.topbar__back {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--text-tertiary);
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: var(--border-subtle);
  background: rgba(255,255,255,0.02);
  transition:
    color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}

.topbar__back:hover {
  color: var(--text-secondary);
  background: rgba(255,255,255,0.05);
}