/*
 * v2-doc.css — the UI v2 styling model for SERVER-RENDERED pages (#1528).
 *
 * Two families of page legitimately stay server-rendered through the v2
 * cutover (docs/UI_V2_PARITY.md "SERVER-PAGE-OK"):
 *
 *   1. the twelve help guides — long-form reading with per-page diagrams;
 *   2. the allauth pages (login / signup / password reset / MFA prompts) —
 *      auth is a server flow and must stay one.
 *
 * Both must LOOK like v2 by cutover, so they render on the same tokens the
 * shell does (static/css/v2-tokens.css, a byte-identical copy of
 * frontend-v2/src/tokens/tokens.css — tests/test_v2_tokens_sync.py fails the
 * merge if they drift) and load NO Tailwind: templates/v2/_doc_base.html is
 * standalone, exactly as templates/v2/shell.html is.
 *
 * Tokens only. Every rule below is geometry/colour from --pa-* / --color-*.
 */

/* ---- fonts (self-hosted, the same files the shell + v1 use) ---- */

@font-face {
  font-family: "B612";
  src: url("/static/vendor/fonts/B612-Regular.45b4844d2444.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "B612";
  src: url("/static/vendor/fonts/B612-Bold.4c32084efe3a.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "B612 Mono";
  src: url("/static/vendor/fonts/B612Mono-Regular.b948a441e9b5.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

/* ---- page skeleton ---- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  box-sizing: border-box;
  /* Clear of the notch and home indicator with viewport-fit=cover (landscape,
     or an install made while classic shipped black-translucent, #2251). */
  padding: var(--pa-safe-top) var(--pa-safe-right) var(--pa-safe-bottom) var(--pa-safe-left);
  font-family: var(--pa-font-body);
  font-size: var(--pa-text-body);
  line-height: 1.5;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  /* Notch-safe, like the shell (viewport-fit=cover). */
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom)
    env(safe-area-inset-left);
}

/* The one door back — a v2 doc must never strand the pilot outside the
 * shell (#1519's exit-door finding, applied in the other direction). */
.pa-doc__back {
  position: sticky;
  top: 0;
  z-index: var(--pa-layer-raised-2);
  display: flex;
  align-items: center;
  gap: var(--pa-space-2);
  min-height: var(--pa-size-touch);
  padding: 0 var(--pa-space-3);
  font-family: var(--pa-font-mono);
  font-size: var(--pa-text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
}
.pa-doc__back:hover {
  color: var(--color-text-primary);
}
.pa-doc__back:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.pa-doc__main {
  max-width: 72ch;
  margin: 0 auto;
  padding: var(--pa-space-4) var(--pa-space-3) var(--pa-space-6);
}

/* ---- auth pages (login / signup / reset / MFA prompts) ---- */

.pa-auth {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: var(--pa-space-4) var(--pa-space-3);
}

.pa-auth__card {
  width: 100%;
  max-width: 420px;
  padding: var(--pa-space-4);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--pa-radius-3);
}

.pa-auth__brand {
  display: block;
  margin-bottom: var(--pa-space-2);
  font-family: var(--pa-font-mono);
  font-size: var(--pa-text-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-accent-strong);
}

.pa-auth__title {
  margin: 0 0 var(--pa-space-2);
  font-size: var(--pa-text-display);
  line-height: 1.2;
}

.pa-auth__lede {
  margin: 0 0 var(--pa-space-3);
  color: var(--color-text-secondary);
  font-size: var(--pa-text-caption);
}

.pa-auth__foot {
  margin-top: var(--pa-space-3);
  padding-top: var(--pa-space-3);
  border-top: 1px solid var(--color-border);
  display: grid;
  gap: var(--pa-space-1);
  text-align: center;
  font-size: var(--pa-text-caption);
  color: var(--color-text-secondary);
}
.pa-auth__foot p {
  margin: 0;
}

/* ---- forms (shared by auth + any server doc that posts) ---- */

.pa-field {
  display: grid;
  gap: var(--pa-space-1);
  margin-bottom: var(--pa-space-3);
}

.pa-field--inline {
  grid-auto-flow: column;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  justify-content: start;
  gap: var(--pa-space-2);
}

.pa-label {
  font-size: var(--pa-text-caption);
  font-weight: 700;
  color: var(--color-text-secondary);
}

.pa-input {
  width: 100%;
  min-height: var(--pa-size-touch);
  padding: 0 var(--pa-space-2);
  font-family: var(--pa-font-body);
  font-size: var(--pa-text-body);
  color: var(--color-text-primary);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--pa-radius-2);
}
.pa-input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

/* One-time codes: mono, spaced, large — read off a phone in a hurry. */
.pa-input--code {
  font-family: var(--pa-font-mono);
  font-size: var(--pa-text-title);
  letter-spacing: 0.3em;
  text-align: center;
}

/* ICAO idents are uppercase everywhere in this app. */
.pa-input--icao {
  text-transform: uppercase;
}

/* The WebAuthn ceremony's carrier form: present in the DOM (the button
   targets it via form=), never shown. */
.pa-hidden {
  display: none;
}

/* TOTP QR: the code itself must stay black-on-white to scan reliably in
   either theme — this is the one deliberate non-token surface. */
.pa-qr {
  width: fit-content;
  margin: 0 auto var(--pa-space-3);
  padding: var(--pa-space-3);
  background: #ffffff;
  border-radius: var(--pa-radius-2);
}

.pa-checkbox {
  width: var(--pa-space-3);
  height: var(--pa-space-3);
  accent-color: var(--color-accent);
}

.pa-help-text {
  font-size: var(--pa-text-caption);
  color: var(--color-text-muted);
}

/* Field + form errors. Never colour alone: allauth's own message text is the
 * carrier, the colour is emphasis (the app's C3 rule). */
.pa-error {
  margin: 0;
  font-size: var(--pa-text-caption);
  color: var(--color-danger);
}

.pa-alert {
  margin: 0 0 var(--pa-space-3);
  padding: var(--pa-space-2);
  border-radius: var(--pa-radius-2);
  font-size: var(--pa-text-caption);
}
.pa-alert--error {
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
}
.pa-alert--info {
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-strong);
}

/* ---- buttons + links ---- */

.pa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--pa-size-touch);
  padding: 0 var(--pa-space-3);
  font-family: var(--pa-font-body);
  font-size: var(--pa-text-body);
  font-weight: 700;
  border-radius: var(--pa-radius-2);
  cursor: pointer;
  text-decoration: none;
}
.pa-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.pa-btn--primary {
  color: var(--color-on-accent);
  background: var(--color-accent-strong);
  border: 1px solid var(--color-accent-strong);
}
.pa-btn--primary:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.pa-btn--secondary {
  color: var(--color-text-primary);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
}
.pa-btn--secondary:hover {
  border-color: var(--color-accent);
}

.pa-btn--danger {
  color: var(--color-danger);
  background: transparent;
  border: 1px solid var(--color-danger);
}

.pa-btn + .pa-btn {
  margin-top: var(--pa-space-2);
}

.pa-link {
  color: var(--color-accent-strong);
  text-decoration: none;
}
.pa-link:hover {
  text-decoration: underline;
}
.pa-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--pa-radius-1);
}

/* ---- lists (MFA authenticators, recovery codes) ---- */

.pa-doc__section {
  margin-bottom: var(--pa-space-4);
}

.pa-doc__section-title {
  margin: 0 0 var(--pa-space-2);
  font-size: var(--pa-text-title);
}

.pa-list {
  display: grid;
  gap: var(--pa-space-2);
  margin: 0 0 var(--pa-space-3);
  padding: 0;
  list-style: none;
}

.pa-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pa-space-2);
  padding: var(--pa-space-2) var(--pa-space-3);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--pa-radius-2);
}

.pa-list__meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.pa-list__name {
  font-weight: 700;
  overflow-wrap: anywhere;
}
.pa-list__sub {
  font-size: var(--pa-text-caption);
  color: var(--color-text-muted);
}

/* Recovery codes: a mono block the pilot copies once and stores. Scrolls
 * inside its own container — never widens the page (#1522 rule 2). */
.pa-codes {
  overflow-x: auto;
  margin: 0 0 var(--pa-space-3);
  padding: var(--pa-space-3);
  font-family: var(--pa-font-mono);
  font-size: var(--pa-text-body);
  line-height: 1.8;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--pa-radius-2);
}

.pa-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pa-space-2);
}
.pa-inline-actions .pa-btn {
  width: auto;
}

/* PWA import landing (#1547) — the file_handlers page, which is a status line
   and an exit door, nothing more. The error modifier exists so a refused
   import READS as a refusal rather than sitting in body text. */
.pa-doc__status {
  color: var(--color-text-secondary);
}
.pa-doc__status--error {
  color: var(--color-danger);
  font-weight: 700;
}