/* System pages — auth, recovery and status screens (P1-FND-19).
   Built against Docs/DS/handoff-REVISED-26.08.12/system-pages/src/SystemPages.jsx.txt
   (SysShell / SysBrand / card / StatusPage). These screens render OUTSIDE the app
   shell: no sidebar, no topbar, no tenant context — so this sheet owns its own
   centering rather than reusing any panel geometry. It is loaded per-page from
   system_base.html, after the P1-FND-10 device ladder.

   Shared verbatim with platform admin (README rule 2) — only the wordmark line
   under the logo changes, via the `product` block. Do not fork per app.

   All positioning uses logical properties (README rule 4): both `ar` and `ckb`
   are RTL and these are the first screens a user ever sees. */

/* ---- shell ---- */

.sys-page { min-block-size: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--space-6);
  padding: var(--space-6); background: var(--surface-page); }

.sys-brand { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sys-brand__name { font: var(--weight-bold) var(--text-xl)/1 var(--font-core);
  letter-spacing: var(--tracking-tight); color: var(--text-primary); }
/* The product line is a machine-ish label, not prose: it stays LTR and mono in
   every locale so "STMS"/"PLATFORM" never reshape under an RTL script. */
.sys-brand__product { font: var(--weight-medium) var(--text-2xs)/1 var(--font-mono);
  letter-spacing: .22em; color: var(--amber-600); direction: ltr; unicode-bidi: isolate; }

.sys-foot { font: var(--type-caption); color: var(--text-muted); text-align: center; }

/* ---- card ---- */

.sys-card { inline-size: 400px; max-inline-size: 100%; background: var(--surface-raised);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4); }
/* Status variant (404/403/500/503): centred, tighter rhythm. */
.sys-card--status { align-items: center; text-align: center; gap: var(--space-3); }

/* P4-SEC-04: the document variant (privacy policy). Wider than the auth
   card because it holds prose, and the prose scale is the DS body scale —
   a policy read on a phone is still a page, not a form. */
.sys-card--doc { inline-size: 720px; }
.sys-prose { display: flex; flex-direction: column; gap: var(--space-3);
  font: var(--type-body); color: var(--text-primary); }
.sys-prose h2 { font: var(--type-h3); color: var(--text-primary);
  margin-block-start: var(--space-3); }
.sys-prose p, .sys-prose li { color: var(--text-secondary); }
.sys-prose ul { padding-inline-start: var(--space-5); display: flex;
  flex-direction: column; gap: var(--space-2); }
.sys-prose strong { color: var(--text-primary); font: var(--type-body-strong); }
/* The quiet link that rides beside the footer caption on every system page. */
.sys-foot__link { color: inherit; text-decoration: underline;
  margin-inline-start: var(--space-2); }

.sys-head { display: flex; flex-direction: column; gap: 4px; }
.sys-title { font: var(--type-h1); color: var(--text-primary); }
.sys-sub { font: var(--type-small); color: var(--text-secondary); }

/* The big numeric HTTP code. aria-hidden in markup — the <h1> carries the meaning. */
.sys-code { font: var(--weight-bold) 64px/1 var(--font-mono);
  letter-spacing: -.02em; color: var(--ink-300); direction: ltr; }

/* ---- inline banners ---- */

.sys-alert { display: flex; gap: var(--space-2); align-items: flex-start;
  border-radius: var(--radius-md); padding: var(--space-2) var(--space-3);
  font: var(--type-small); }
/* P1-FND-35 (user-identity CHANGES.md 18): semantic pairs, not raw tints —
   raw ramp steps never theme, so these banners rendered light-on-light in
   dark mode; --status-emergency-* and --info-* are themed by theme.dark.css.
   This also retires the old --red-800 token-gap note: the semantic pair is
   the DS's own answer to it. */
.sys-alert--error { background: var(--status-emergency-bg); color: var(--status-emergency-fg); }
.sys-alert--info { background: var(--info-bg); color: var(--info-fg); }

/* The card's own gap gets one child when the fields live in a <form>, so the
   form carries the rhythm itself rather than collapsing to default block flow. */
.sys-form { display: flex; flex-direction: column; gap: var(--space-4); }

/* ---- actions ---- */

/* DS Button size="lg" / block — general vocabulary, but first needed here. */
.btn--lg { padding: var(--space-3) var(--space-4); }
.btn--block { display: flex; inline-size: 100%; justify-content: center; }

/* The ghost pair under the primary action ("OTP instead" / "Forgot password?").
   Wraps rather than overflowing: the Kurdish and Arabic strings are longer. */
.sys-links { display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-2); flex-wrap: wrap; }
.sys-actions { display: flex; gap: var(--space-2); margin-block-start: var(--space-2);
  flex-wrap: wrap; justify-content: center; }

/* ---- controls ---- */

/* P1-FND-19 originally typed these two modifiers as `input.x` rather than
   `.x`. At the time, components.css styled controls with the descendant
   selector `.form-row input, .form-row textarea, .input` — specificity
   (0,1,1), setting the `font` SHORTHAND (which carries font-family with
   it) — so a bare `.input--mono` at (0,1,0) lost outright: the class
   applied cleanly in the markup and changed nothing on screen, and the
   phone field rendered in the sans stack in every locale. Adding the
   element name escalated these to (0,1,1) too, so the later equal-
   specificity rule (system.css loads after components.css) won instead.

   P1-FND-18 deleted that descendant selector: components.css now styles
   controls with the plain classes `.input, .select` at (0,1,0) — the same
   specificity as a bare modifier. With no higher-specificity rule left to
   defeat them, `.input--lg`/`.input--mono` win purely on source order
   (system.css after components.css), same as `.input--mono` already does
   in settings.css. The `input.` escalation is no longer load-bearing, so
   it is removed here to match the plain-class convention used everywhere
   else — kept typed, it would still work (higher specificity never loses),
   but it would misdocument the reason as still live. Evidence and the
   cascade math are recorded in
   `tests/test_system_pages.py::test_control_modifiers_are_plain_classes`. */

/* DS Input size="lg". The cap is on the CONTROL, never on a column — the lesson
   P1-SET-01 paid for when --panel-w on a rail broke the phone tier. */
.input--lg { padding: var(--space-3); font: var(--type-body); }
/* README rule 1: phone and OTP inputs are dir="ltr" + mono even in RTL layouts.
   `dir="ltr"` is set in markup (it is behaviour, not decoration); this is the face. */
.input--mono { font-family: var(--font-mono); }
.input--code { text-align: center; letter-spacing: .4em; }