/**
 * Sign-in — the standalone page.
 *
 * v3 (2026-09-12). Everything that came before this pass is gone: the page no longer renders
 * `.auth-page`, `.auth-intro`, `.auth-eyebrow`, `.auth-shape`, `.auth-card`, `.auth-debug`,
 * `.auth-chip`, `.auth-back`, `.auth-divider`, `.auth-submit`, `.auth-switch`, `.auth-resend` or
 * `.auth-notice`, and nothing else in the theme or the plugin ever did (grepped). What survives of
 * the old vocabulary is the five names assets/js/auth-client.js queries — `.auth-step`,
 * `.auth-field`, `.auth-field__error`, `.auth-field--invalid` and `.auth-otp` — which the markup
 * still carries beside the kit's own classes. They are hooks, not styles: the look comes from
 * `.iz-field`, `.iz-input`, `.iz-otp` and `.iz-btn`, and only the three bridge rules below read
 * them, because the script writes a class this stylesheet does not own.
 *
 * The file is loaded on the sign-in page alone (functions.php).
 *
 * The `.auth--compact` variant this file used to carry was removed 2026-09-12: six rules for a
 * modifier no template in the theme or the plugin has ever rendered, in a stylesheet that is not
 * even enqueued on the three pages that would use it. The pattern book still describes the variant
 * (Claude outputs/design-system-v3/design-patterns-final.md), so the intent is not lost; whichever
 * page adopts it can write the rules it actually needs and enqueue this file alongside them.
 *
 * v7 (2026-09-28, Platform adoption increment H1, slice A): rebuilt against Platform Auth's REST
 * API — two new steps (password, no longer the first screen a returning visitor sees, and 2fa)
 * plus reset-code/reset-password. Everything above is unchanged; the new rules for the name
 * fields, the remember checkboxes, the resend countdown text and the weak-password reason list
 * are appended at the end rather than interleaved, so the v3/v4 history above stays readable.
 * `.auth__card > .auth__dev` (the local-development debug-code note) is removed: the Platform
 * never returns a code in the response, so there is nothing left to show here — read the
 * Messaging outbox instead (`wp platform messaging outbox` / `email-outbox`).
 */

/* ---------------------------------------------------------------------
 * v3 — sign-in. Ported from Claude outputs/design-system-v3/css/public-v3.css,
 * which is one file for every public surface; the theme serves them on different
 * routes, so it is split the way the site is actually loaded.
 * --------------------------------------------------------------------- */
/* v4 (2026-09-26): the form is now first in source order (page-auth.php), so it is the column that
 * should read as the lead — 1fr against the art panel's .9fr, the reverse of the v3 ratio, which was
 * written when the art panel came first. Left at the v3 ratio, the panel that is only ever a calm
 * illustration and two facts would out-measure the actual form on every screen wide enough to show
 * both. */
.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); max-width: 940px; margin-inline: auto; border-radius: 28px; background: #fff; border: 1px solid var(--iz-line-soft); box-shadow: var(--iz-shadow-3); overflow: hidden; }
/* Grey, not the v3 gradient into `--surface-blue`: the owner's 2026-09-19 direction is tints only on
 * full-width bands, plain white or `--iz-sunk` inside a box — and this panel sits inside `.auth`,
 * itself already inside the page's own tinted band (`.auth-page` below). Two tints nested would also
 * have cost the panel its reason to exist: `--iz-pattern--on-tint`'s ink is calibrated for exactly one
 * tint per view. */
.auth__art { position: relative; display: grid; align-content: start; gap: var(--space-4); padding: var(--space-5); background: var(--iz-sunk); }
.auth__art .art { width: 72%; aspect-ratio: 1.15; justify-self: center; }
.auth__art .art--sprig { width: 38%; aspect-ratio: .8; }
/* A grid item's default min-width is auto, so the card was sized by the widest thing in it — the
 * six-box code row — and grew past a narrow phone's screen instead of letting the row shrink. */
.auth__card { min-width: 0; display: grid; align-content: center; gap: var(--space-3); padding: clamp(var(--space-4), 4vw, var(--space-6)); }
/* Centred (owner, 2026-09-29: "center headline"), and the sentence under it with it: the two are
 * one unit, and a centred title over a right-aligned sentence reads as a mistake. The fields,
 * their labels and the errors stay at the start edge, where a form is read. */
.auth__card h1 { margin: 0; color: var(--iz-ink); font: var(--text-h1); text-align: center; text-wrap: balance; }
/* The card's gap less this is --gap-title: the sentence belongs to the title above it. */
.auth__card > p { margin: calc(-1 * var(--space-2)) 0 0; color: var(--iz-text); font: var(--text-body-s); text-align: center; }
.auth__who { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-inline); padding: var(--space-1) var(--space-2); border-radius: 12px; background: var(--iz-sunk); color: var(--iz-ink); font: var(--text-body-s); font-weight: 600; }
/* 44px, not the ported 32px: account.css's equivalent controls (notice links, compose tool labels,
 * secondary buttons) all land on 44px, and this is the same kind of thing — a real, if occasional,
 * button, not a decorative chip. Measured before: 32px tall, below this site's own floor for a
 * tappable control everywhere else it appears. */
.auth__who button { display: inline-flex; align-items: center; border: 0; background: none; color: var(--primary-700); font: var(--text-button-s); cursor: pointer; min-height: 44px; }
.auth__or { display: flex; align-items: center; gap: var(--space-2); color: var(--iz-ink-soft); font: var(--text-caption); }
.auth__or::before, .auth__or::after { content: ""; flex: 1; height: 1px; background: var(--iz-line-soft); }
.auth__resend { display: flex; justify-content: center; gap: var(--space-0); color: var(--iz-ink-soft); font: var(--text-caption); }
.auth__step { display: grid; gap: var(--space-3); }
@starting-style {
	.auth__step { opacity: 0; translate: -12px 0; }
}
.auth__step { transition: opacity .32s var(--iz-ease-out), translate .32s var(--iz-ease-out); }
@media (max-width: 760px) {
	.auth { grid-template-columns: 1fr; border-radius: 24px; }
	/* v3 laid this out as a 96px-illustration-plus-one-line-of-copy strip, which is not what the panel
	 * holds any more — an illustration, a two-line fact list and a link. Stacked and centred instead,
	 * the same shape the identifier/OTP steps above it already use on a phone. */
	.auth__art { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: var(--pad-card); gap: var(--space-2); }
	.auth__art .art { width: 88px; }
	.auth__art .art--sprig { width: 64px; }
	.auth__facts { text-align: start; }
}

/* ---------------------------------------------------------------------
 * What the ported block leaves to the page. Each rule below exists because the reference
 * stylesheet has no answer for it, not because the answer it has was disliked.
 * --------------------------------------------------------------------- */

/* The page the card sits on. The ported block centres the card and stops there.
 *
 * Two declarations here exist to stop the card resizing between steps. Measured at 1280px before
 * them, `.auth` came out 940px wide on the identifier step, 680px on the password step and 792px
 * on the code step — the card and the illustration inside it changed size every time the visitor
 * advanced, because the card was being sized by whatever the one visible step happened to contain.
 *
 *   grid-template-columns  an implicit grid column is an `auto` track, and an `auto` track is
 *                          sized to its item's max-content contribution.
 *   .auth { width: 100% }  `justify-self: stretch` is the default, but it does not apply to a box
 *                          with an `auto` margin on that axis, and the ported block gives `.auth`
 *                          `margin-inline: auto`. So the card shrank to fit even in a firm track.
 *                          `.auth-screen` already caps at 940px and centres itself, so the card's
 *                          own centring has nothing left to do and the auto margins resolve to 0. */
.auth-screen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-head); max-width: 940px; margin-inline: auto; }
.auth { width: 100%; }

/* v4: the panel's own content — an illustration, the two facts read from the auth code, and the
 * privacy link. `--iz-ink-soft` is 4.68:1 on every light ground (kit.css), which now includes this
 * panel: it is flat `--iz-sunk`, not v3's gradient into a darker blue that measured under AA. */
.auth__facts { display: grid; gap: var(--space-stack); margin: 0; padding: 0; list-style: none; }
.auth__facts li { display: flex; align-items: flex-start; gap: var(--gap-inline); color: var(--iz-text); font: var(--text-body-s); }
/* An icon glyph's size is not on the type ladder. */
.auth__facts li i { flex: none; margin-top: var(--space-0); color: var(--primary-600); font-size: var(--iz-icon-m); }
.auth__privacy { display: inline-flex; align-items: center; gap: var(--gap-inline); color: var(--primary-700); font: var(--text-caption); font-weight: 600; text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
	.auth__privacy:hover { text-decoration: underline; text-underline-offset: 3px; }
}
.auth__privacy:focus-visible { outline: none; border-radius: 6px; box-shadow: var(--iz-focus); }

/* The page the card sits on: one full-width tinted band (the leaves pattern reads at `--on-tint`
 * only when the ground behind it is actually a tint), tall enough on a real viewport that the form
 * is the only thing in view — the wireframe's own "sign-in feels safe and simple", answered by
 * giving it a calm field of its own rather than a form dropped straight onto the page background. */
.auth-page { background: var(--surface-blue); padding-block: var(--space-band); min-height: min(78vh, 760px); display: flex; align-items: center; }
@media (max-width: 760px) {
	.auth-page { padding-block: var(--space-5); min-height: 0; }
}

/* Only one step is shown at a time. The reference prototype hid the others with `hidden`;
 * auth-client.js has always toggled `is-active` instead, and that is the hook, so the rule reads
 * the class. Written as `:not()` so the visible step keeps the ported `display: grid`. */
.auth__step:not(.is-active) { display: none; }

/* The sentence under a step's heading. `.auth__card > p` cannot reach it — it belongs to the step,
 * because each step says its own thing — so it carries the card paragraph's type on its own name.
 * A separate name, not a `> p` selector, because `.auth__resend` is a paragraph too. */
.auth__lead { margin: calc(-1 * var(--space-2)) 0 0; color: var(--iz-text); font: var(--text-caption); text-align: center; text-wrap: pretty; }

/* The client's error banner: it writes plain text into this element and toggles `is-active`, so
 * there is no icon and no action to lay out — one column, and nothing shown until there is
 * something to say. */
.auth__alert { grid-template-columns: minmax(0, 1fr); }
.auth__alert:not(.is-active) { display: none; }

/* The identifier row, now that the client actually writes the identifier into it. The ported rule
 * lays the row out for a short label; a real address is neither short nor guaranteed to break. As
 * one unshrinkable flex item it pushed «تغییر…» out through the card's `overflow: hidden`: measured
 * at 380px an 86-character email put the whole control outside the card, and at 320px an ordinary
 * 23-character one already clipped it — the visitor who mistyped had no way back. So the identifier
 * may shrink and break anywhere, and the row may put the control on a second line. */
.auth__who { flex-wrap: wrap; }
.auth__who b { min-width: 0; overflow-wrap: anywhere; }

/* The invalid state. kit.css answers `.iz-field.is-invalid`; the script writes
 * `auth-field--invalid`, and the script is the contract. */
.auth-field--invalid .iz-input,
.auth-field--invalid .iz-otp input { border-color: var(--accent-500); background: var(--accent-50); }

/* The error line is always in the markup so `aria-describedby` always resolves; it takes up room
 * only when it has something in it. */
.auth-field__error:empty { display: none; }

/* Two controls the kit styles but does not cover in these positions: the «تغییر…» button inside the
 * identifier row has no focus ring of its own, and the resend link gives no sign that it is
 * disabled while the code is being sent. */
.auth__who button:focus-visible { outline: none; border-radius: 8px; box-shadow: var(--iz-focus); }
.auth__resend .iz-link:disabled { color: var(--iz-ink-soft); cursor: default; }
/* The question and the resend control share this line, and the control is 44px tall, so without an
 * alignment the question would sit on the line's top edge beside it. */
.auth__resend { align-items: center; flex-wrap: wrap; }

/* Everything the client disables while a request is in flight — every input in the step — has to
 * look disabled. `.iz-btn` is deliberately not named here any more: chrome.css now gives
 * `.iz-btn:disabled` its own solid, tuned look (measured 5.08:1, this page's submit button), written
 * expressly to replace the opacity-based version this rule used to carry, one of the three route
 * rules its own comment names. Stacking this rule's opacity on top of that solid look composited the
 * button toward the card's white a second time — measured 2.37:1, most of the way to invisible.
 * `.iz-input`/`.iz-otp input` keep the opacity: chrome.css and kit.css give neither a disabled look
 * of their own. */
.auth .iz-input:disabled,
.auth .iz-otp input:disabled { opacity: .6; cursor: default; }

/* ---------------------------------------------------------------------
 * v7 — the code step's optional name fields, sign-up only. Two columns wide enough for a name
 * each; auto-fit rather than a fixed 1fr 1fr so the pair still wraps to one column on its own
 * once the card gets narrow, the same floor `.auth__art` already gives itself at 760px.
 * --------------------------------------------------------------------- */
.auth__names { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); }

/* The two "remember" checkboxes (password step, 2fa step): a native checkbox plus its own label
 * text, not a kit component this site has elsewhere — the choice-chip pattern (`.iz-choice`) is
 * for picking one of several options, not for a single yes/no next to a sentence. 44px, the same
 * tap-target floor as every other control on this page (`.auth__who button` above). */
.auth__remember { display: flex; align-items: center; gap: var(--gap-inline); min-height: 44px; color: var(--iz-ink); font: var(--text-body-s); cursor: pointer; }
.auth__remember input { flex: none; width: 20px; height: 20px; accent-color: var(--primary-600); }
.auth__remember input:disabled { opacity: .6; cursor: default; }
.auth__remember input:focus-visible { outline: none; box-shadow: var(--iz-focus); }

/* The resend countdown text (auth-api.js's countdown(), ADR-0041 gap auth-06's resend_in made
 * real): it replaces the resend button in place, on the same line, while the wait runs. */
.auth__countdown { color: var(--iz-ink-soft); }

/* weak_password's data.reasons, a real list rather than one run-on sentence — see
 * setFieldErrorList() in auth-client.js. Nested one level inside `.auth-field__error`, which
 * already carries the field's own spacing, so the list itself stays unindented and unbulleted; a
 * bullet would repeat the "this is a problem" signal the red border and the icon-less banner
 * already give. */
.auth__reasons { margin: var(--gap-title) 0 0; padding: 0; list-style: none; display: grid; gap: 2px; }

/* CAPTCHA: a real but dormant hook (brief-common rule 4) — the site runs no provider today, so
 * every one of these containers is empty and should take up no room until a widget is actually
 * mounted into it. */
.auth__captcha:empty { display: none; }
.auth__captcha:not(:empty) { margin-block: var(--space-0); }

/* An empty LTR field shows its Persian placeholder from the right; typing switches it back to LTR. */
.auth .iz-input.iz-ltr:placeholder-shown { direction: rtl; text-align: right; }