/*
 * wpagently admin base: the one token block and the shared primitives for every
 * wpagently screen inside wp-admin.
 *
 * Provenance: the colour values below are a hand copy of the canonical tokens
 * printed by `node scripts/build-site.mjs --print-tokens` (source:
 * scripts/site/tokens.mjs, copied 2026-08-19). A plugin cannot import that module,
 * so the copy is checked back by packages/wp-agent/test/brand-tokens.mjs, which
 * fails with a per-token diff as soon as the two drift apart. Do not edit a value
 * here by hand: change tokens.mjs, re-run the command, copy again.
 *
 * The light column is the base, because the wp-admin chrome is light. The dark
 * signature appears only as an evidence island (--wpa-term-*, the dark column),
 * used for machine text: transcripts, payloads, the agent's own voice in the chat.
 *
 * Rules that apply to every file consuming these tokens (see DESIGN.md and
 * docs/design-admin.md): no raw hex outside this block, no `transition: all`,
 * no glassmorphism, no decorative numbering, no emoji. Green and red are semantic
 * and never the only carrier of a state, so every badge also has a text label.
 */

.wpagently-admin {
  /* Light column ("Tageslicht"), the wp-admin base. */
  --wpa-bg: #f5f5f9;
  --wpa-bg-alt: #ebebf2;
  --wpa-surface: #ffffff;
  --wpa-surface-2: #e8e8f0;
  --wpa-border: rgba(23, 23, 31, 0.12);
  --wpa-border-strong: rgba(23, 23, 31, 0.26);
  --wpa-text: #17171f;
  --wpa-muted: #4d4e5e;
  --wpa-faint: #5f6070;
  --wpa-accent: #4149c8;
  --wpa-accent-strong: #303ba6;
  --wpa-accent-solid: #17171f;
  --wpa-accent-contrast: #f2f3fa;
  --wpa-safe: #22693c;
  --wpa-risk: #a03a20;

  /* Dark column ("Nachthimmel"), used only for evidence islands inside the
     light chrome. Every documented pair clears AA in this palette, including
     --wpa-term-risk on --wpa-term-surface-2. */
  --wpa-term-bg: #0a0a10;
  --wpa-term-surface: #14141e;
  --wpa-term-surface-2: #1b1b28;
  --wpa-term-border: rgba(238, 239, 250, 0.10);
  --wpa-term-text: #f1f2f9;
  --wpa-term-muted: #a6a8c0;
  --wpa-term-accent: #9aa3ff;
  --wpa-term-safe: #6cc189;
  --wpa-term-risk: #e2765b;

  /* Structure, motion and type. The sans stack stays whatever wp-admin uses; a
     wpagently webfont in wp-admin would be a download for no argument. The mono
     stack is deliberately not the site's --font-mono (that one starts with the
     self-hosted IBM Plex Mono, which the plugin does not ship). */
  --wpa-radius-sm: 6px;
  --wpa-radius: 10px;
  --wpa-radius-lg: 16px;
  --wpa-space-1: 4px;
  --wpa-space-2: 8px;
  --wpa-space-3: 12px;
  --wpa-space-4: 16px;
  --wpa-space-5: 24px;
  --wpa-space-6: 32px;
  --wpa-ease: cubic-bezier(0.2, 0, 0.38, 0.9);
  --wpa-dur-1: 120ms;
  --wpa-dur-2: 180ms;
  --wpa-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* Page head: eyebrow, title, standfirst. */

.wpagently-admin__head {
  border-bottom: 1px solid var(--wpa-border);
  margin-bottom: var(--wpa-space-5);
  max-width: 1480px;
  padding-bottom: var(--wpa-space-4);
}

.wpagently-admin__eyebrow {
  color: var(--wpa-accent);
  font-family: var(--wpa-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  margin: 0;
  text-transform: uppercase;
}

.wpagently-admin__head h1 {
  color: var(--wpa-text);
  margin-bottom: var(--wpa-space-1);
}

.wpagently-admin__head p {
  color: var(--wpa-muted);
  margin: 0;
  max-width: 44rem;
}

/* Card: wraps an existing .form-table or .widefat, never replaces it. */

.wpagently-card {
  background: var(--wpa-surface);
  border: 1px solid var(--wpa-border);
  border-radius: var(--wpa-radius);
  margin: var(--wpa-space-4) 0;
  max-width: 1480px;
  padding: var(--wpa-space-5);
}

.wpagently-card > :first-child {
  margin-top: 0;
}

.wpagently-card > :last-child {
  margin-bottom: 0;
}

/* Reading width for form and status cards. wp-admin form tables get unreadable
   long before the full container width, which is why these exist at all. */
.wpagently-card--narrow {
  max-width: 960px;
}

.wpagently-card--tight {
  max-width: 760px;
}

.wpagently-card .widefat {
  border: 1px solid var(--wpa-border);
}

.wpagently-card .widefat th,
.wpagently-card .widefat thead td {
  background: var(--wpa-surface-2);
  color: var(--wpa-text);
}

/* Status badge. Colour is never the only signal: the label carries the state. */

.wpagently-badge {
  border: 1px solid var(--wpa-border-strong);
  border-radius: var(--wpa-radius-sm);
  color: var(--wpa-muted);
  display: inline-block;
  font-family: var(--wpa-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  padding: 2px 7px;
  text-transform: uppercase;
  white-space: nowrap;
}

.wpagently-badge--safe {
  border-color: var(--wpa-safe);
  color: var(--wpa-safe);
}

.wpagently-badge--risk {
  border-color: var(--wpa-risk);
  color: var(--wpa-risk);
}

.wpagently-badge--neutral {
  border-color: var(--wpa-border-strong);
  color: var(--wpa-muted);
}

/* Evidence island: machine text on the dark signature palette. */

.wpagently-evidence {
  background: var(--wpa-term-bg);
  border: 1px solid var(--wpa-term-border);
  border-radius: var(--wpa-radius-sm);
  color: var(--wpa-term-text);
  display: block;
  font-family: var(--wpa-font-mono);
  font-size: 12px;
  line-height: 1.55;
  overflow: auto;
  padding: var(--wpa-space-3);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Inline machine text: an ability name, an identifier, a single command.
   Applied by selector rather than by class, because three integration tests match
   on a bare `<code>` element (two of them with doesNotMatch, which a class
   attribute would satisfy silently). CSS-first keeps those assertions honest. */
.wpagently-admin td > code,
.wpagently-admin h3 > code,
.wpagently-admin summary > code,
.wpagently-code {
  background: var(--wpa-term-bg);
  border-radius: var(--wpa-radius-sm);
  color: var(--wpa-term-text);
  font-family: var(--wpa-font-mono);
  font-size: 12px;
  padding: 2px 6px;
}

/* A readonly field whose content is machine text, not a value being edited. */
.wpagently-admin input[type="text"].wpagently-endpoint {
  background: var(--wpa-term-bg);
  border-color: var(--wpa-term-border);
  color: var(--wpa-term-text);
  font-family: var(--wpa-font-mono);
}

.wpagently-admin .wpagently-key-input,
.wpagently-admin .wpagently-code-input {
  font-family: var(--wpa-font-mono);
}

.wpagently-admin .wpagently-code-input {
  font-size: 16px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* JSON and other structured input stays legible as machine text. */
.wpagently-admin textarea.code {
  background: var(--wpa-surface-2);
  color: var(--wpa-text);
  font-family: var(--wpa-font-mono);
}

/* A colour sample carries its value in the title attribute, never in colour alone. */
.wpagently-swatch {
  border: 1px solid var(--wpa-border-strong);
  display: inline-block;
  height: 28px;
  margin-right: var(--wpa-space-2);
  width: 28px;
}

.wpagently-evidence code,
.wpagently-evidence pre {
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  margin: 0;
  padding: 0;
}

/* Rails: a 4px edge that repeats a state already named in the adjacent text.
   Scoped so they win against WordPress' own .notice-* left border. */

.wpagently-admin .wpagently-rail--safe {
  border-left: 4px solid var(--wpa-safe);
}

.wpagently-admin .wpagently-rail--risk {
  border-left: 4px solid var(--wpa-risk);
}

/* WordPress paints its own success green; this is the same signal in our palette. */
.wpagently-admin .notice-success {
  border-left-color: var(--wpa-safe);
}

/* Status cell of a diagnostics table: fixed label column, badge in the value. */
.wpagently-status-label {
  width: 220px;
}

.wpagently-admin .wpagently-form--narrow {
  max-width: 960px;
}

.wpagently-admin .wpagently-form--tight {
  margin-top: var(--wpa-space-5);
  max-width: 760px;
}

/* OAuth consent and device screens (migrated out of an inline <style> block). */

.wpagently-oauth-consent {
  max-width: 760px;
}

.wpagently-oauth-client {
  background: var(--wpa-surface-2);
  border-radius: var(--wpa-radius-sm);
  font-family: var(--wpa-font-mono);
  padding: 3px 7px;
}

/* The scope box states what the grant covers; its rail comes from
   .wpagently-rail--safe on the same element, so the state has one source. */
.wpagently-oauth-scope {
  background: var(--wpa-surface-2);
  margin: var(--wpa-space-5) 0;
  padding: var(--wpa-space-3) var(--wpa-space-4);
}

.wpagently-oauth-actions {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-top: 22px;
}

.wpagently-oauth-actions .button {
  margin: 0;
}

.wpagently-oauth-detail {
  color: var(--wpa-muted);
}

/* Focus is always visible, on top of whatever wp-admin draws.
   The second selector exists because `.wp-core-ui .button:focus` sets
   `outline: 1px solid transparent` at a higher specificity than the bare
   `:focus-visible` rule, so buttons would otherwise fall back to WordPress'
   blue box-shadow ring. Matching that specificity and dropping the shadow makes
   the accent outline the single focus indicator inside our screens. */

.wpagently-admin :focus-visible {
  outline: 2px solid var(--wpa-accent);
  outline-offset: 2px;
}

.wpagently-admin .button:focus-visible,
.wpagently-admin .button-primary:focus-visible,
.wpagently-admin input:focus-visible,
.wpagently-admin select:focus-visible,
.wpagently-admin textarea:focus-visible {
  box-shadow: none;
  outline: 2px solid var(--wpa-accent);
  outline-offset: 2px;
}

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

@media (max-width: 782px) {
  .wpagently-admin__head {
    margin-bottom: var(--wpa-space-4);
  }

  .wpagently-card {
    padding: var(--wpa-space-4);
  }

  .wpagently-oauth-actions {
    align-items: stretch;
    flex-direction: column;
  }
}
