/* xAgent shared UI system
 * Loaded after page-specific styles so every public surface resolves to the
 * same enterprise vocabulary without taking over company-specific card art. */

:is(body) {
    background: var(--bg);
    color: var(--text-secondary);
  }

/* Compatibility aliases while legacy page styles are migrated. These map
 * old page-local names to one semantic product palette. */
body.agent-home {
  --home-ink: var(--text-primary);
  --home-muted: var(--text-muted);
  --home-blue: var(--brand-primary);
  --home-blue-hover: var(--brand-primary-hover);
  --home-green: var(--success);
  --home-paper: var(--surface);
  --home-soft: var(--bg-subtle);
  --home-line: var(--border);
}

body[data-gtm-page] {
  --ink: var(--text-primary);
  --muted: var(--text-muted);
  --paper: var(--bg);
  --surface: var(--surface-raised);
  --line: var(--border);
  --accent: var(--brand-primary);
  --accent-dark: var(--brand-primary-hover);
}

body:is(.dashboard-page, .policy-page, .checkout-page) {
  --ink: var(--text-primary);
  --muted: var(--text-muted);
  --paper: var(--bg);
  --surface: var(--surface-raised);
  --line: var(--border);
  --forest: var(--ink-strong);
  --leaf: var(--success);
  --focus: var(--brand-primary);
}

  :is(.shell, .gtm-shell, .recovery-shell, .policy-main) {
    width: min(calc(100% - (var(--gutter) * 2)), var(--content-max));
    margin-inline: auto;
  }

  :is(.site-header, .topbar, .gtm-nav) {
    position: sticky;
    z-index: 50;
    top: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    background: var(--material-chrome);
    -webkit-backdrop-filter: var(--material-blur);
    backdrop-filter: var(--material-blur);
    box-shadow:none;
  }

  :is(.nav, .gtm-nav-inner) {
    min-height: 4.25rem;
  }

  .gtm-nav nav {
    margin-left: auto;
    display: flex;
    align-items: center;
  }

  .gtm-nav .site-language-control {
    margin-left: 0;
  }

  :is(.brand, .gtm-brand) {
    color: var(--text-primary);
    text-decoration: none;
  }

  :is(.brand small, .gtm-brand small) {
    color: var(--text-muted);
  }

  :is(.nav-links, .gtm-nav-links) a {
    color: var(--text-secondary);
    font-weight: 600;
    text-decoration: none;
  }

  :is(.nav-links, .gtm-nav-links) a:hover {
    color: var(--brand-primary);
  }

  :is(.button, .btn, .gtm-button, .primary-action, .plan-cta, .dashboard-logout) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--control-min);
    padding: 0.72rem var(--control-pad-x);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: var(--type-small);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    text-decoration: none;
    cursor: pointer;
    transition:
      transform var(--response-fast) var(--ease-out),
      border-color var(--response-base) var(--ease-out),
      background-color var(--response-base) var(--ease-out),
      color var(--response-base) var(--ease-out),
      box-shadow var(--response-base) var(--ease-out);
  }

  :is(.button.primary, .btn.primary, .gtm-button, .primary-action, .plan-cta.featured) {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    color: var(--text-inverse);
  }

  :is(.button.primary, .btn.primary, .gtm-button, .primary-action, .plan-cta.featured):hover {
    border-color: var(--brand-primary-hover);
    background: var(--brand-primary-hover);
    color: var(--text-inverse);
  }

  :is(.button.secondary, .btn.secondary, .gtm-button.secondary, .plan-cta) {
    border-color: var(--border-strong);
    background: var(--surface);
    color: var(--brand-primary);
  }

  :is(.button.secondary, .btn.secondary, .gtm-button.secondary, .plan-cta):hover {
    border-color: color-mix(in srgb, var(--brand-primary) 48%, var(--border));
    background: color-mix(in srgb, var(--brand-primary) 5%, var(--surface));
  }

  :is(.button.tertiary, .btn.tertiary, .button.ghost, .btn.ghost) {
    border-color: transparent;
    background: transparent;
    color: var(--brand-primary);
  }

  :is(.button.danger, .btn.danger) {
    border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
    background: var(--surface);
    color: var(--danger);
  }

  :is(.button, .btn, .gtm-button, .primary-action, .plan-cta, .dashboard-logout):active {
    transform: scale(0.98);
  }

  :is(button, .button, .btn, .gtm-button)[disabled],
  :is(button, .button, .btn, .gtm-button)[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.5;
    transform: none;
  }

  :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
    width: 100%;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-primary);
    box-shadow:none;
    transition:
      border-color var(--response-fast) var(--ease-out),
      box-shadow var(--response-fast) var(--ease-out),
      background-color var(--response-fast) var(--ease-out);
  }

  :is(input:not([type="checkbox"]):not([type="radio"]), textarea) {
    padding: 0.72rem 0.85rem;
  }

  :is(select) {
    padding-inline: 0.8rem 2.1rem;
  }

  :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus {
    border-color: var(--brand-primary);
    outline: 0;
    box-shadow:none;
  }

  :is(input, textarea, select)[aria-invalid="true"] {
    border-color: var(--danger);
    box-shadow:none;
  }

  :is(label) {
    color: var(--text-secondary);
    font-size: var(--type-small);
    font-weight: 700;
  }

  :is(.field, .gtm-field) {
    display: grid;
    gap: var(--space-2xs);
  }

  :is(.panel, .gtm-report, .claim-form, .challenge-panel, .recovery-panel,
    .policy-grid article, .checkout-state, .card-result, .install-panel,
    .dashboard-login, .dashboard-empty) {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: none;
  }

  :is(.panel, .claim-form, .challenge-panel, .recovery-panel,
    .policy-grid article, .checkout-state, .dashboard-login, .dashboard-empty) {
    padding: clamp(var(--space-s), 2.4vw, var(--space-l));
  }

  :is(.eyebrow, .kicker, .gtm-kicker) {
    color: var(--brand-primary);
    font-size: var(--type-label);
    font-weight: 750;
    letter-spacing: var(--tracking-label);
  }

  :is(.status-pill, .challenge-status, .contract-state, .preview-badge,
    .release-state, .trust-chip, .ui-status) {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    width: max-content;
    max-width: 100%;
    min-height: 1.75rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--bg-subtle);
    color: var(--trust-observed);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
  }

  :is(.status-pill, .challenge-status, .contract-state, .preview-badge,
    .release-state, .trust-chip, .ui-status)::before {
    width: 0.45rem;
    height: 0.45rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: currentColor;
    content: "";
  }

  :is([data-status="verified"], [data-status="connected"], [data-status="complete"],
    .is-ready, .is-success, .ui-status.is-success) {
    border-color: color-mix(in srgb, var(--trust-verified) 28%, var(--border));
    background: color-mix(in srgb, var(--trust-verified) 9%, var(--surface));
    color: var(--trust-verified);
  }

  :is([data-status="pending"], [data-status="expired"], .ui-status.is-warning) {
    border-color: color-mix(in srgb, var(--trust-expired) 30%, var(--border));
    background: color-mix(in srgb, var(--trust-expired) 9%, var(--surface));
    color: var(--trust-expired);
  }

  :is([data-status="revoked"], [data-status="error"], .ui-status.is-danger) {
    border-color: color-mix(in srgb, var(--trust-revoked) 28%, var(--border));
    background: color-mix(in srgb, var(--trust-revoked) 8%, var(--surface));
    color: var(--trust-revoked);
  }

  :is(.table-wrap, .gtm-table-wrap, .ui-table-wrap) {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
  }

  :is(table) {
    width: 100%;
    border-collapse: collapse;
    color: var(--text-secondary);
  }

  :is(th, td) {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
  }

  :is(th) {
    background: var(--bg-subtle);
    color: var(--text-muted);
    font-size: var(--type-label);
    font-weight: 750;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }

  :is(tr:last-child td) { border-bottom: 0; }

  :is(.audience-tabs, .page-tabs, .ui-tabs) {
    display: flex;
    gap: var(--space-3xs);
    width: max-content;
    max-width: 100%;
    padding: var(--space-3xs);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-subtle);
  }

  :is(.audience-tabs, .page-tabs, .ui-tabs) button {
    min-height: 2.5rem;
    padding: 0.55rem 0.85rem;
    border: 0;
    border-radius: calc(var(--radius-sm) - 0.15rem);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: var(--type-small);
    font-weight: 700;
    cursor: pointer;
  }

  :is(.page-tabs, .ui-tabs) > a {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0.55rem 0.85rem;
    border-radius: calc(var(--radius-sm) - 0.15rem);
    color: var(--text-muted);
    font-size: var(--type-small);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
  }

  :is(.page-tabs, .ui-tabs) > a:hover,
  :is(.page-tabs, .ui-tabs) > a:focus-visible {
    background: var(--surface);
    color: var(--text-primary);
  }

  :is(.audience-tabs, .page-tabs, .ui-tabs) button[aria-selected="true"] {
    background: var(--surface);
    color: var(--text-primary);
    box-shadow:none;
  }

  :is(.wizard-progress, .install-wizard-steps, .ui-stepper) {
    counter-reset: xagent-step;
  }

  :is(.wizard-progress, .install-wizard-steps, .ui-stepper) > * {
    counter-increment: xagent-step;
  }

  :is(.ui-empty, .ui-error, .ui-loading) {
    display: grid;
    justify-items: start;
    gap: var(--space-2xs);
    padding: var(--space-l);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
  }

  :is(.ui-empty, .ui-error, .ui-loading) h2,
  :is(.ui-empty, .ui-error, .ui-loading) h3,
  :is(.ui-empty, .ui-error, .ui-loading) p { margin: 0; }

  .ui-error {
    border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
    background: color-mix(in srgb, var(--danger) 5%, var(--surface));
  }

  .ui-skeleton {
    overflow: hidden;
    min-height: 1rem;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--bg-subtle) 25%, var(--surface) 50%, var(--bg-subtle) 75%);
    background-size: 200% 100%;
    animation: ui-skeleton 1.4s linear infinite;
  }

  .ui-loading > .ui-skeleton {
    width: min(18rem, 70vw);
    height: 0.75rem;
  }

  .ui-connection-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-s);
  }

  .ui-connection-tile {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) auto;
    gap: var(--space-s);
    align-items: center;
    padding: var(--space-s);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
  }

  .ui-connection-grid > article {
    display: grid;
    align-content: start;
    gap: var(--space-2xs);
    min-width: 0;
    padding: var(--space-s);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
  }

  .ui-connection-grid > article > :is(span, b, small) {
    margin: 0;
  }

  .ui-connection-grid > article > small {
    color: var(--text-muted);
  }

  .dashboard-page-tabs {
    position: sticky;
    z-index: 20;
    top: 4.75rem;
    width: 100%;
    margin-bottom: var(--space-m);
    overflow-x: auto;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .ui-connection-tile h3,
  .ui-connection-tile p { margin: 0; }

  .ui-connection-tile p {
    margin-top: var(--space-3xs);
    color: var(--text-muted);
    font-size: var(--type-small);
  }

  :is(.site-footer, .gtm-footer) {
    border-top: 1px solid var(--border);
  }

  :is(.card-result) {
    overflow: clip;
    padding: clamp(var(--space-s), 3vw, var(--space-xl));
  }

  :is(.dashboard-page main, .dashboard-page .dash-main) {
    display: grid;
    gap: var(--space-m);
  }

  :is(.dashboard-page .metric-grid, .dashboard-page .score-grid) {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-s);
  }

  :is(.dashboard-page .score-card) {
    min-width: 0;
  }

  @keyframes ui-skeleton {
    to { background-position: -200% 0; }
  }

  @media (max-width: 900px) {
    :is(.ui-connection-grid, .dashboard-page .metric-grid, .dashboard-page .score-grid) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 680px) {
    :is(.shell, .gtm-shell, .recovery-shell, .policy-main) {
      width: min(calc(100% - 2rem), var(--content-max));
    }

    :is(.nav-links, .gtm-nav-links) { display: none; }

    :is(.ui-connection-grid, .dashboard-page .metric-grid, .dashboard-page .score-grid) {
      grid-template-columns: 1fr;
    }

    :is(.ui-connection-tile) {
      grid-template-columns: 2.5rem minmax(0, 1fr);
    }

    :is(.ui-connection-tile .ui-status) {
      grid-column: 2;
    }

    :is(.button, .btn, .gtm-button, .primary-action) {
      max-width: 100%;
    }

    :is(th, td) { min-width: 8rem; }

    /* Grid items otherwise keep their max-content width. That is invisible
       on desktop but pushes a dashboard header and tab rail outside a phone. */
    :is(.shell, .gtm-shell, .recovery-shell, .policy-main) > * {
      min-width: 0;
      max-width: 100%;
    }

    .dashboard-page main.shell {
      grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-page main.shell > *,
    .dashboard-page .dash-header,
    .dashboard-page .dash-title,
    .dashboard-page .dashboard-controls,
    .dashboard-page .dashboard-mode-banner,
    .dashboard-page .dashboard-audit,
    .dashboard-page .dashboard-page-tabs {
      min-width: 0;
      width: 100%;
      max-width: 100%;
    }
  }

@media (prefers-reduced-motion: reduce) {
  .ui-skeleton { animation: none; }
}

/* Dashboard follows the public xAgent surface while preserving its dense
 * evidence layout. Machine error codes never become part of the UI. */
body.dashboard-page {
  background: var(--bg);
  color: var(--text-secondary);
}

.dashboard-page main.shell {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.dashboard-page .dash-header {
  padding: 0 0 var(--space-m);
}

.dashboard-page .dash-title h1 {
  color: var(--text-primary);
  font-size: clamp(2.75rem, 6vw, 4.75rem);
  letter-spacing: 0;
}

.dashboard-page .dashboard-auth-state {
  max-width: 58rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow:none;
}

.dashboard-page .dashboard-auth-state h2 {
  color: var(--text-primary);
}

.dashboard-page .dashboard-auth-reason {
  margin-top: var(--space-s);
  color: var(--text-muted);
  font: 600 var(--type-small)/1.55 var(--font-body);
}

.dashboard-page .dashboard-auth-reason:empty {
  display: none;
}

/* ── One brand lockup ────────────────────────────────────────────────
 * The mark was rendering at four sizes, the name in two spellings, the
 * tagline in seven variants, and on five of nine pages a hue-rotate filter
 * repainted the same PNG blue. The mark also carried the default
 * flex-shrink, so between the mobile breakpoint and a wide desktop the
 * header ran out of room and squeezed it to zero width: measured 0x36 on
 * both the home page and the dashboard at an 800px viewport.
 *
 * Declared here because this sheet loads last on every page, so one rule
 * settles it whether the page styles .brand or .gtm-brand. */
:is(.brand, .gtm-brand) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  text-decoration: none;
  color: var(--text-primary);
}
:is(.brand, .gtm-brand) img {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  object-fit: contain;
  filter: none;
}
:is(.brand, .gtm-brand) > span {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}
:is(.brand, .gtm-brand) b {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.1;
  color: var(--text-primary);
}
:is(.brand, .gtm-brand) small {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1.3;
  /* gtm.css shouts this in uppercase mono, which turned a sentence-long
   * tagline into a row of capitals on the card and report pages only. */
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The wordmark alone identifies the page below this width; the tagline is
 * the first thing to go, and the mark never is. */
@media (max-width: 47rem) {
  :is(.brand, .gtm-brand) small { display: none; }
}