/**
 * Bridge AI OS — shared page shell (uses bridge-design-tokens.css)
 * Animated nav styles load via bridge-nav.js → bridge-nav-animated.css
 */
@import url('/bridge-nav-animated.css');
body.bridge-shell {
  margin: 0;
  min-height: 100vh;
  background: var(--theme-bg-primary);
  color: var(--theme-text-primary);
  font-family: var(--font-ui, system-ui, -apple-system, sans-serif);
  font-size: var(--text-base, 15px);
  line-height: 1.5;
}

.bridge-page {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-6, 24px) var(--space-4, 16px) var(--space-12, 48px);
}

.bridge-page--wide {
  max-width: 1120px;
}

.bridge-page--narrow {
  max-width: 640px;
}

.bridge-page h1 {
  margin: 0 0 var(--space-2, 8px);
  font-size: clamp(1.35rem, 4vw, 1.75rem);
  color: var(--theme-primary);
  font-weight: var(--weight-bold, 700);
}

.bridge-lede {
  margin: 0 0 var(--space-6, 24px);
  color: var(--theme-text-muted);
  font-size: var(--text-sm, 13px);
  line-height: 1.6;
}

.bridge-card {
  background: var(--theme-bg-secondary);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-5, 20px);
  margin-bottom: var(--space-4, 16px);
}

.bridge-card--accent {
  border-color: var(--theme-primary);
  background: var(--theme-primary-muted);
}

.bridge-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, 12px);
  align-items: center;
  margin-top: var(--space-4, 16px);
}

.bridge-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, 12px);
  margin-top: var(--space-6, 24px);
}

.bridge-link-row a {
  color: var(--theme-primary);
  text-decoration: none;
}

.bridge-link-row a:hover {
  text-decoration: underline;
}

.bridge-link-row a:focus-visible {
  outline: 2px solid var(--theme-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 4px);
}

.bridge-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: var(--radius-full, 9999px);
  font-size: var(--text-xs, 11px);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-weight: var(--weight-semibold, 600);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--theme-border);
}

.status-live {
  background: rgba(74, 222, 128, 0.12);
  color: var(--status-success, #4ade80);
  border-color: rgba(74, 222, 128, 0.25);
}

.status-demo {
  background: rgba(251, 191, 36, 0.12);
  color: var(--status-warning, #fbbf24);
  border-color: rgba(251, 191, 36, 0.25);
}

.status-degraded {
  background: rgba(251, 191, 36, 0.1);
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.2);
}

.status-offline,
.status-muted {
  background: rgba(100, 116, 139, 0.12);
  color: var(--status-offline, #64748b);
  border-color: rgba(100, 116, 139, 0.25);
}

.bridge-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--space-4, 16px) 0;
}

.bridge-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: var(--text-sm, 13px);
}

.bridge-table th,
.bridge-table td {
  border: 1px solid var(--theme-border);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

.bridge-table th {
  background: var(--theme-bg-secondary);
  color: var(--theme-primary);
  font-size: var(--text-xs, 11px);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.bridge-table code,
.bridge-mono {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.92em;
  word-break: break-all;
}

.bridge-qr-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3, 12px);
  margin: var(--space-4, 16px) 0;
}

.bridge-qr-wrap canvas,
.bridge-qr-wrap img {
  display: block;
  width: 220px;
  height: 220px;
  border-radius: var(--radius-lg, 12px);
  background: #fff;
  object-fit: contain;
}

@media (max-width: 480px) {
  .bridge-page {
    padding-top: var(--space-4, 16px);
  }
  .bridge-qr-wrap canvas,
  .bridge-qr-wrap img {
    width: 200px;
    height: 200px;
  }
}