/* Bua 2026 shared experience layer. Existing selectors and JS hooks remain intact. */
:root,
:root[data-theme="dark"] {
  --page-bg: var(--bua-bg);
  --frame-bg: var(--bua-panel);
  --surface-bg: var(--bua-surface);
  --surface-elevated: var(--bua-elevated);
  --text-primary: var(--bua-text);
  --text-secondary: var(--bua-muted);
  --text-tertiary: var(--bua-dim);
  --border-default: color-mix(in srgb, var(--bua-muted) 25%, transparent);
  --border-emphasis: color-mix(in srgb, var(--bua-muted) 48%, transparent);
  --accent-primary: var(--bua-action);
  --accent-hover: color-mix(in srgb, var(--bua-action) 84%, var(--bua-text));
  --accent-ghost: color-mix(in srgb, var(--bua-action) 14%, transparent);
  --status-success: var(--bua-verified);
  --status-warning: var(--bua-action);
  --status-error: var(--bua-dispute);
  --status-info: var(--bua-channel);
  --input-bg: var(--bua-surface-subtle);
  --input-border: var(--border-default);
  --input-border-focus: var(--bua-action);
}

:root[data-theme="light"] {
  --page-bg: var(--bua-bg);
  --frame-bg: var(--bua-panel);
  --surface-bg: var(--bua-surface);
  --surface-elevated: var(--bua-elevated);
  --text-primary: var(--bua-text);
  --text-secondary: var(--bua-muted);
  --text-tertiary: var(--bua-dim);
  --border-default: color-mix(in srgb, var(--bua-muted) 23%, transparent);
  --border-emphasis: color-mix(in srgb, var(--bua-muted) 42%, transparent);
  --accent-primary: var(--bua-action);
  --accent-hover: color-mix(in srgb, var(--bua-action) 86%, var(--bua-text));
  --accent-ghost: color-mix(in srgb, var(--bua-action) 13%, transparent);
  --status-success: var(--bua-verified);
  --status-warning: var(--bua-action);
  --status-error: var(--bua-dispute);
  --status-info: var(--bua-channel);
  --input-bg: var(--bua-surface-subtle);
  --input-border: var(--border-default);
  --input-border-focus: var(--bua-action);
}

html { background: var(--bua-bg); }
body {
  background: var(--bua-bg);
  color: var(--bua-text);
  font-family: 'Archivo', var(--font-body);
  letter-spacing: -0.01em;
}

h1, h2, h3, .dashboard__brand-title {
  font-family: var(--font-display) !important;
  letter-spacing: -0.035em;
}

button, a, input, select, textarea { font: inherit; }
button, input, select, textarea, [role="button"], [role="tab"] { min-height: 44px; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--bua-action); outline-offset: 3px; }
::selection { background: var(--bua-action); color: var(--bua-action-contrast); }
img, svg, video { max-width: 100%; }

.dashboard { max-width: 1440px; padding: clamp(16px, 3vw, 40px); }
.dashboard__header {
  background: var(--bua-panel);
  border: 1px solid var(--border-default);
  border-radius: var(--bua-radius-lg);
  padding: clamp(20px, 4vw, 44px);
  position: relative;
  overflow: hidden;
}
.dashboard__header::after {
  border: 1px solid color-mix(in srgb, var(--bua-action) 28%, transparent);
  border-radius: 50%;
  content: '';
  height: 240px;
  pointer-events: none;
  position: absolute;
  right: -100px;
  top: -130px;
  width: 240px;
}
.dashboard__brand-subtitle,
.dashboard__identity-meta,
.dashboard__subtitle,
.meta-text { color: var(--bua-muted); }
.dashboard__title { font-size: clamp(2rem, 5vw, 4.8rem); line-height: .96; max-width: 12ch; }
.dashboard__brand-logo { border-radius: var(--bua-radius-md); }

.grid { gap: 18px; margin-top: 18px; }
.card, .surface {
  background: var(--bua-panel);
  border: 1px solid var(--border-default);
  border-radius: var(--bua-radius-lg);
  box-shadow: none;
}
.card { padding: clamp(18px, 2.5vw, 28px); }
.card h3 { font-size: 1.1rem; }
.widget { background: var(--bua-surface-subtle); border-radius: var(--bua-radius-md); }
.widget__row { border-color: var(--border-default); min-height: 48px; }
.widget__value, code, .badge { font-family: var(--font-data); }

.cta-button {
  background: transparent;
  border: 1px solid var(--border-emphasis);
  border-radius: var(--bua-radius-sm);
  color: var(--bua-text);
  min-height: 44px;
  padding: 10px 16px;
}
.cta-button:hover { background: var(--bua-surface); border-color: var(--bua-muted); }
.cta-button--primary {
  background: var(--bua-action);
  border-color: var(--bua-action);
  color: var(--bua-bg);
  font-weight: 800;
}
.cta-button--danger { background: transparent; border-color: var(--bua-dispute); color: var(--bua-dispute); }
.cta-button:disabled { cursor: not-allowed; opacity: .52; }

.status-indicator--active,
.status-indicator--locked { background: var(--bua-verified); }
.status-indicator--warning { background: var(--bua-action); }
.status-indicator--error { background: var(--bua-dispute); }

.chat { max-width: 860px; padding: clamp(12px, 3vw, 28px); }
.chat__topbar { background: var(--bua-panel); border-radius: var(--bua-radius-lg); }
.bubble { background: var(--bua-surface); border-radius: var(--bua-radius-lg); }
.msg--out .bubble { background: var(--bua-action); color: var(--bua-bg); }
.bubble--system { border-color: var(--bua-ledger); }
.composer { background: var(--bua-panel); border-radius: var(--bua-radius-lg); }
.badge { border-radius: var(--bua-radius-sm); }
.badge--verified { border-color: var(--bua-verified); color: var(--bua-verified); }
.badge--channel { border-color: var(--bua-channel); color: var(--bua-channel); }
.badge--ledger { border-color: var(--bua-ledger); color: var(--bua-ledger); }
.badge--dispute { border-color: var(--bua-dispute); color: var(--bua-dispute); }
.channel-heading { align-items: flex-start; display: flex; gap: 16px; justify-content: space-between; }
.channel-kicker { color: var(--bua-channel); font-family: var(--font-data); font-size: .72rem; letter-spacing: .09em; margin: 0 0 6px; text-transform: uppercase; }
.channel-heading h3 { margin: 0; }
.sequence-meter { display: grid; gap: 8px; grid-template-columns: repeat(6, 1fr); margin: 20px 0; }
.sequence-meter span { border-top: 2px solid var(--bua-channel); color: var(--bua-muted); font-family: var(--font-data); font-size: .7rem; padding-top: 9px; }
.channel-rules { display: flex; flex-wrap: wrap; gap: 8px; }

/* Blueprint primitives shared by authentication, chat, dashboards and admin. */
.bua-product-mark { display: block; height: auto; width: clamp(36px, 6vw, 64px); }
.bua-wordmark { color: var(--bua-text); font-family: var(--font-display); font-weight: 800; letter-spacing: -.05em; }
.bua-system-label,
.bua-kicker,
.bua-state-label { color: var(--bua-dim); font-family: var(--font-data); font-size: .72rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }

.bua-shell { background: var(--bua-bg); color: var(--bua-text); min-height: 100dvh; }
.bua-shell__content { margin-inline: auto; max-width: 1440px; padding: clamp(16px, 3vw, 40px); }
.bua-grid { display: grid; gap: clamp(12px, 2vw, 24px); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.bua-panel {
  background: var(--bua-panel);
  border: 1px solid var(--bua-line-subtle);
  border-radius: var(--bua-radius-lg);
  color: var(--bua-text);
  padding: clamp(16px, 2.4vw, 28px);
}
.bua-panel--quiet { background: var(--bua-surface-subtle); }
.bua-panel--verified { border-color: var(--bua-verified-edge); }
.bua-panel--unverified { border-color: var(--bua-dispute); border-style: dashed; }
.bua-panel--disputed { border-color: var(--bua-dispute); }

.bua-button,
.button,
.primary-button,
.ghost-button {
  align-items: center;
  border-radius: var(--bua-radius-sm);
  display: inline-flex;
  font-weight: 750;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
}
.bua-button--primary { background: var(--bua-action); border: 1px solid var(--bua-action); color: var(--bua-action-contrast); }
.bua-button--secondary { background: transparent; border: 1px solid var(--bua-line); color: var(--bua-text); }
.bua-button--danger { background: transparent; border: 1px solid var(--bua-dispute); color: var(--bua-dispute); }
.bua-button[disabled], .bua-button[aria-disabled="true"] { cursor: not-allowed; opacity: .48; }

.bua-tabs { background: var(--bua-bg); border-top: 1px solid var(--bua-line-subtle); display: grid; min-height: 68px; }
.bua-tabs--chat { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bua-tabs--speak { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bua-tab { align-items: center; color: var(--bua-dim); display: flex; flex-direction: column; font-family: var(--font-data); font-size: .68rem; gap: 4px; justify-content: center; letter-spacing: .05em; min-height: 52px; text-transform: uppercase; }
.bua-tab[aria-current="page"], .bua-tab[aria-selected="true"] { color: var(--bua-action); }
.bua-tab img { height: 24px; width: 24px; }

.bua-intents { display: flex; flex-wrap: wrap; gap: 8px; }
.bua-intent { background: transparent; border: 1px solid var(--bua-line); border-radius: var(--bua-radius-sm); color: var(--bua-muted); min-height: 44px; padding: 8px 12px; }
.bua-intent[aria-pressed="true"] { background: var(--bua-action-soft); border-color: var(--bua-action); color: var(--bua-action); }

.bua-sequence { counter-reset: sequence; display: grid; gap: 8px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bua-sequence__step { border-top: 2px solid var(--bua-line); color: var(--bua-dim); font-family: var(--font-data); font-size: .68rem; padding-top: 8px; }
.bua-sequence__step[data-state="complete"] { border-color: var(--bua-verified); color: var(--bua-verified); }
.bua-sequence__step[data-state="active"] { border-color: var(--bua-action); color: var(--bua-action); }
.bua-sequence[data-trust="unverified"] .bua-sequence__step { border-color: var(--bua-dispute); border-top-style: dashed; color: var(--bua-dispute); }

.bua-composer { background: var(--bua-panel); border: 1px solid var(--bua-line); border-radius: var(--bua-radius-lg); display: grid; gap: 12px; padding: 12px; }
.bua-composer[data-locked="true"] { border-color: var(--bua-dispute); border-style: dashed; }
.bua-composer[data-locked="true"] :is(input, textarea, button[type="submit"]) { cursor: not-allowed; opacity: .48; pointer-events: none; }
.bua-composer__lock { color: var(--bua-dispute); display: none; font-family: var(--font-data); font-size: .72rem; }
.bua-composer[data-locked="true"] .bua-composer__lock { display: block; }

.bua-ledger-entry { border-left: 2px solid var(--bua-ledger); padding: 10px 0 10px 16px; }
.bua-ledger-entry code { color: var(--bua-ledger); overflow-wrap: anywhere; }
.bua-dispute-notice { background: var(--bua-dispute-soft); border: 1px solid var(--bua-dispute); border-radius: var(--bua-radius-md); color: var(--bua-text); padding: 14px; }
.bua-dispute-notice strong { color: var(--bua-dispute); }

.sr-only { clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }

@media (max-width: 720px) {
  .dashboard { padding: 12px; }
  .dashboard__header-top, .dashboard__actions, .dashboard__header-actions { align-items: stretch; }
  .cta-button { width: 100%; }
  .card { grid-column: 1 / -1; }
  .channel-heading { flex-direction: column; }
  .sequence-meter { grid-template-columns: repeat(2, 1fr); }
  .bua-grid { grid-template-columns: 1fr; }
  .bua-grid > * { grid-column: 1 !important; }
  .bua-sequence { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bua-tabs--speak { overflow-x: auto; }
}

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