/* Switchyard theme: shared by the dashboard, the forms and the chat widget. */
:root {
  /* Google's product palette: white surfaces on a light grey page, one
     blue for everything you can act on, and Google red, yellow and green
     for a violation, a person's turn and a verified result. */
  --bg: #f8f9fa;
  --surface: #ffffff;
  --surface-2: #f1f3f4;
  --surface-3: #e8eaed;
  --ink: #202124;
  --ink-2: #3c4043;
  --muted: #5f6368;
  --line: #dadce0;
  --line-strong: #bdc1c6;
  --focus: #1a73e8;
  --accent: #1a73e8;
  --accent-soft: #e8f0fe;
  --on-accent: #ffffff;

  --agent: #9334e6;
  --agent-soft: #f3e8fd;
  --person: #b06000;
  --person-soft: #fef7e0;
  --act: #188038;
  --act-soft: #e6f4ea;
  --stop: #d93025;
  --stop-soft: #fce8e6;
  --yard: #5f6368;
  --yard-soft: #f1f3f4;
  --on-act: #ffffff;

  --radius: 8px;
  --radius-sm: 4px;
  --shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
  --font: "Google Sans Text", "Google Sans", Roboto, "Segoe UI", Arial, sans-serif;
  --display: "Google Sans", "Google Sans Text", Roboto, "Segoe UI", Arial, sans-serif;
  --mono: "Roboto Mono", "SF Mono", ui-monospace, Menlo, monospace;
  color-scheme: light;
}
/* Dark: graphite and deep navy. Cyan is the accent (focus, selection,
   links); amber is uncertainty and a person's turn; red a violation; green
   verified. The dashboard is always dark (data-theme="dark" on its page);
   forms and the widget follow the visitor's setting. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0e16; --surface: #0f1520; --surface-2: #141b28; --surface-3: #1a2333; --ink: #e4e9f2; --ink-2: #a9b4c6;
    --muted: #76839a; --line: #1f2939; --line-strong: #2c384c; --focus: #38d0f0; --accent: #38d0f0; --accent-soft: #0c2a35;
    --agent: #a594ff; --agent-soft: #1c1838; --person: #f2b544; --person-soft: #2e2410;
    --act: #3ccf8e; --act-soft: #0c2a1d; --on-act: #062014; --on-accent: #031820; --stop: #ff6b5b; --stop-soft: #34130f; --yard: #9fb0c8; --yard-soft: #18202d;
    --shadow: 0 1px 0 rgba(255, 255, 255, .02) inset, 0 8px 24px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0a0e16; --surface: #0f1520; --surface-2: #141b28; --surface-3: #1a2333; --ink: #e4e9f2; --ink-2: #a9b4c6;
  --muted: #76839a; --line: #1f2939; --line-strong: #2c384c; --focus: #38d0f0; --accent: #38d0f0; --accent-soft: #0c2a35;
  --agent: #a594ff; --agent-soft: #1c1838; --person: #f2b544; --person-soft: #2e2410;
  --act: #3ccf8e; --act-soft: #0c2a1d; --on-act: #062014; --on-accent: #031820; --stop: #ff6b5b; --stop-soft: #34130f; --yard: #9fb0c8; --yard-soft: #18202d;
  --shadow: 0 1px 0 rgba(255, 255, 255, .02) inset, 0 8px 24px rgba(0, 0, 0, .35);
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { font: 14px/1.5 var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
code, .mono { font-family: var(--mono); font-size: .92em; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
button { font: inherit; color: inherit; }

.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; letter-spacing: -.01em; text-decoration: none; }
.brand svg { flex: none; }

.pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px;
  font-size: 12px; font-weight: 550; white-space: nowrap; background: var(--yard-soft); color: var(--yard); }
.pill.agent { background: var(--agent-soft); color: var(--agent); }
.pill.person { background: var(--person-soft); color: var(--person); }
.pill.act { background: var(--act-soft); color: var(--act); }
.pill.stop { background: var(--stop-soft); color: var(--stop); }
.pill.neutral { background: var(--yard-soft); color: var(--yard); }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill .dot.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .pill .dot.pulse { animation: none; } }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }

/* Forms (also used by the chat widget). */
.page-narrow { max-width: 560px; margin: 0 auto; padding: 40px 16px 64px; }
.form-card { padding: 28px; }
.form-card h1 { font-size: 22px; letter-spacing: -.02em; margin: 14px 0 4px; }
.form-card .lede { color: var(--ink-2); margin: 0 0 18px; }
.field { display: block; margin-top: 16px; }
.field span { display: block; font-weight: 550; font-size: 13px; margin-bottom: 6px; }
.field input, .field textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font: inherit; background: var(--surface-2); color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 20%, transparent); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border: 0;
  border-radius: var(--radius-sm); background: var(--ink); color: var(--bg); font-weight: 600; cursor: pointer; transition: transform .1s, opacity .15s; }
.btn:hover { opacity: .9; } .btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: progress; }
.notice { margin-top: 16px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid; font-size: 13px; }
.notice.error { background: var(--stop-soft); border-color: color-mix(in srgb, var(--stop) 30%, transparent); color: var(--stop); }
.notice.ok { background: var(--act-soft); border-color: color-mix(in srgb, var(--act) 30%, transparent); color: var(--act); }
.fineprint { color: var(--muted); font-size: 12px; margin-top: 18px; display: flex; gap: 8px; align-items: flex-start; }

.ico { width: 16px; height: 16px; flex: none; vertical-align: -3px; }
.t-act { color: var(--act); } .t-stop { color: var(--stop); } .t-person { color: var(--person); }
.t-agent { color: var(--agent); } .t-yard { color: var(--yard); } .t-muted { color: var(--muted); }