/* Copyright 2026 AIVE. All rights reserved. */
/* Public-preview pages and chrome. Prism tokens only (System B). */
.beta-draft-banner {
  border: 1px solid var(--warning);
  background: var(--warning-soft);
  color: var(--text);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-6);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.beta-draft-banner strong { display: block; margin-bottom: var(--space-1); }
.legal-version { font-variant-numeric: tabular-nums; }
.legal-body ul { padding-left: var(--space-5); margin-bottom: var(--space-4); }
.legal-body table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin-bottom: var(--space-6); }
.legal-body th, .legal-body td { text-align: left; padding: var(--space-2); border-bottom: 1px solid var(--ghost-border); color: var(--text-2); vertical-align: top; }
.legal-body th { color: var(--text); font-weight: 600; }
.legal-body--wide { max-width: 1040px; }
.legal-table-scroll { overflow-x: auto; }

/* Sign-up additions */
.beta-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.beta-turnstile { margin: var(--space-3) 0; }
.beta-note { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.6; }
.beta-msg { font-size: var(--fs-sm); line-height: 1.6; margin-top: var(--space-2); }
.beta-msg--error { color: var(--danger); }
.beta-msg--ok { color: var(--text-2); }
.beta-panel { border: 1px solid var(--ghost-border); background: var(--surface-2); border-radius: var(--radius-md); padding: var(--space-5); margin: var(--space-4) 0; }
.beta-panel h2, .beta-panel h3 { margin: 0 0 var(--space-2); color: var(--text); font-size: var(--fs-lg); }
.beta-panel p { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.6; margin: 0 0 var(--space-3); }
.beta-form-row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.beta-input { flex: 1; min-width: 200px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); border: 1px solid var(--ghost-border); background: var(--bg-deep); color: var(--text); font: inherit; }
.beta-btn { padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); border: 1px solid var(--ghost-border); background: var(--surface-3); color: var(--text); font: inherit; cursor: pointer; }
.beta-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.beta-btn--danger { border-color: var(--danger); color: var(--danger); }

/* Shell chrome */
.beta-chrome { position: fixed; right: calc(var(--space-4) + 64px); bottom: var(--space-4); z-index: var(--z-overlay); display: flex; gap: var(--space-2); align-items: center; }
.beta-label { font-size: var(--fs-2xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); border: 1px solid var(--ghost-border); background: var(--surface-2); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); }
.beta-dialog { position: fixed; right: var(--space-4); bottom: calc(var(--space-4) + 48px); width: min(360px, 90vw); z-index: var(--z-modal); }
.beta-dialog textarea { width: 100%; min-height: 96px; box-sizing: border-box; margin-bottom: var(--space-2); }

/* Keep page content clear of the fixed Public preview and Feedback bar. */
body { padding-bottom: calc(var(--space-4) + 48px); }

/* Inputs never exceed their card, including on narrow screens. */
.login-card .form-group input, .login-card .form-group select { box-sizing: border-box; max-width: 100%; }

/* Base typography and controls for the static public-preview pages. These pages load only
   tokens.v4.css and site.v2.css, which assume a base layer and an action colour that neither
   defines; without them text fell back to Times and the Sign up buttons were unreadable. */
:root {
  --action: var(--accent);
  --action-press: var(--accent-hover);
}
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 { font-family: var(--font-display); line-height: var(--lh-tight); color: var(--text); }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
.site-header__cta, .btn-primary { color: var(--text-on-accent); }
.skip-to-content { position: absolute; left: -10000px; top: 0; padding: var(--space-2) var(--space-4); background: var(--accent); color: var(--text-on-accent); z-index: var(--z-modal); }
.skip-to-content:focus { left: 0; }