/* ══════════════════════════════════════════════════════════════
   ACCOUNTCHI AUTH

   Two columns: a progress rail on one side, the forms on the other.
   The rail is doing a job — it tracks the three sign-up steps — rather
   than being decoration, and it collapses to a short value panel on
   the sign-in tab.

   Colours come from the theme's own tokens (style.css), so this page
   follows light and dark exactly like the rest of the site. The one
   place that does not is the rail, which stays on brand colour in both
   schemes and therefore fixes its own foreground to white.
   ══════════════════════════════════════════════════════════════ */

.akch-auth-body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: Vazirmatn, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.akch-auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}

/* ─── The rail ──────────────────────────────────────────────── */

.akch-auth-aside {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3.4vw, 48px);
  color: #fff;
  overflow: hidden;
  /* One colour with a single soft light source. A multi-stop rainbow with
     blurred blobs on top is the house style of every generated landing page. */
  background: var(--accent);
  background-image:
    radial-gradient(120% 90% at 78% 12%, rgba(255, 255, 255, .28), transparent 58%),
    radial-gradient(90% 80% at 10% 100%, rgba(0, 0, 0, .22), transparent 62%);
}

.akch-auth-aside-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  text-decoration: none;
}
.akch-auth-aside-brand img { border-radius: 8px; }

.akch-auth-aside-body {
  margin-top: auto;
  max-width: 30rem;
}

.akch-auth-pill {
  display: inline-block;
  padding: 7px 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .26);
  font-size: 12.5px;
  font-weight: 700;
  margin-bottom: 18px;
  backdrop-filter: blur(6px);
}

.akch-auth-aside h1 {
  margin: 0 0 12px;
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -.5px;
}
.akch-auth-aside p {
  margin: 0 0 28px;
  font-size: 14.5px;
  line-height: 2;
  color: rgba(255, 255, 255, .84);
}

/* Steps: horizontal cards at the bottom on wide screens, like a progress
   tray; stacked once there is not room for three readable columns. */
.akch-auth-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}
.akch-auth-step {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .18);
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.akch-auth-step-n {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12.5px;
  font-weight: 800;
  background: rgba(255, 255, 255, .24);
  color: #fff;
}
.akch-auth-step-text { display: flex; flex-direction: column; gap: 4px; }
.akch-auth-step-text strong { font-size: 13px; font-weight: 700; line-height: 1.6; }
.akch-auth-step-text span { font-size: 11.5px; line-height: 1.8; color: rgba(255, 255, 255, .74); }

/**
 * The step the form is actually on.
 *
 * The card is white in *both* schemes, because the rail behind it is brand colour
 * in both. Its text therefore has to be locked to a dark ink rather than inheriting
 * var(--text) — in dark mode that token is near-white, which put white text on a
 * white card and made the active step vanish entirely.
 */
.akch-auth-step.is-active {
  background: #fff;
  border-color: #fff;
  color: #17142a;
  transform: translateY(-3px);
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .45);
}
.akch-auth-step.is-active .akch-auth-step-text strong { color: #17142a; }
.akch-auth-step.is-active .akch-auth-step-text span { color: #56516b; }
.akch-auth-step.is-active .akch-auth-step-n { background: var(--accent); color: #fff; }

/* A completed step stays legible without competing with the active one. */
.akch-auth-step.is-done {
  background: rgba(255, 255, 255, .2);
  border-color: rgba(255, 255, 255, .3);
}
.akch-auth-step.is-done .akch-auth-step-n {
  background: #fff;
  color: var(--accent);
  /* Replaced by a tick once the step is behind us. */
  font-size: 0;
}
.akch-auth-step.is-done .akch-auth-step-n::after {
  content: '';
  width: 6px;
  height: 10px;
  border: 2px solid currentColor;
  border-top: 0;
  border-inline-start: 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

/* Sign-in value list */
.akch-auth-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.akch-auth-points li { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: rgba(255, 255, 255, .9); }
.akch-auth-tick {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  position: relative;
}
.akch-auth-tick::after {
  content: '';
  position: absolute;
  inset-inline-start: 7px; top: 4.5px;
  width: 5px; height: 9px;
  border: 2px solid #fff;
  border-top: 0; border-inline-start: 0;
  transform: rotate(45deg);
}

/* Only the panel for the active tab is shown. */
.akch-auth-body[data-mode="login"] [data-when="signup"],
.akch-auth-body[data-mode="signup"] [data-when="login"] { display: none; }

/* ─── The form column ───────────────────────────────────────── */

.akch-auth-main {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.6vw, 34px) clamp(18px, 3.4vw, 56px) clamp(24px, 3vw, 40px);
  background: var(--bg);
}

.akch-auth-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: clamp(20px, 4vh, 44px);
}
.akch-auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  /* The rail already carries the wordmark on wide screens. */
  visibility: hidden;
}
.akch-auth-brand img { border-radius: 8px; }

.akch-auth-theme {
  width: 38px; height: 38px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.akch-auth-theme:hover { border-color: var(--border2); }
.akch-auth-theme svg { grid-area: 1 / 1; }
:root[data-theme="dark"] .akch-icon-sun,
:root[data-theme="light"] .akch-icon-moon { display: none; }

.akch-auth-card {
  width: 100%;
  max-width: 26.5rem;
  margin: auto;
}

/* ─── Tabs ──────────────────────────────────────────────────── */

/**
 * The switch.
 *
 * The selected tab used to be var(--card) on a var(--surface) track. In dark mode
 * that is #131220 on a faint purple tint over a #0b0a11 page — three near-identical
 * darks, so the control looked like two flat labels and nothing appeared selected.
 * The selected tab now carries the accent, which reads at a glance in both schemes,
 * and a marker slides between the two.
 */
.akch-auth-tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  border-radius: 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  margin-bottom: 26px;
  isolation: isolate;
}
.akch-auth-tab {
  position: relative;
  z-index: 1;
  padding: 11px 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: color .22s ease;
}
.akch-auth-tab:hover { color: var(--text); }
.akch-auth-tab[aria-selected="true"] { color: #fff; }
.akch-auth-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/**
 * Slides under whichever tab is selected.
 *
 * Deliberately a shade darker than --accent. White on the dark-theme accent
 * (#8b5cf6) measures 4.23:1, under the 4.5:1 WCAG AA floor for text this size —
 * 14px bold does not qualify as "large text". Darkening the surface rather than
 * lightening the text is the only move left when the text is already pure white.
 */
.akch-auth-tab-marker {
  position: absolute;
  z-index: 0;
  top: 4px;
  bottom: 4px;
  inset-inline-start: 4px;
  width: calc(50% - 4px);
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 84%, #000);
  box-shadow: 0 6px 16px -8px var(--accent);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
/* RTL: the second tab sits to the left, so the marker travels negatively. */
.akch-auth-body[data-mode="signup"] .akch-auth-tab-marker { transform: translateX(-100%); }
[dir="ltr"] .akch-auth-body[data-mode="signup"] .akch-auth-tab-marker { transform: translateX(100%); }

.akch-auth-sub {
  margin: 0 0 22px;
  font-size: 13.5px;
  line-height: 2;
  color: var(--muted);
}
.akch-auth-sub strong { color: var(--text); font-weight: 700; }

/* ─── Fields ────────────────────────────────────────────────── */

.akch-field { display: block; margin-bottom: 18px; }
.akch-field-label {
  display: block;
  margin-bottom: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
}
.akch-field-wrap { position: relative; display: block; }

.akch-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 15px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.akch-field input::placeholder { color: var(--muted2); opacity: .75; }
.akch-field input:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.akch-field-wrap input { padding-inline-end: 44px; }

.akch-field-hint {
  display: block;
  margin-top: 7px;
  font-size: 11.5px;
  line-height: 1.9;
  color: var(--muted2);
}
.akch-field-hint.is-bad { color: #e5484d; }

/* Availability indicator on the username field. */
.akch-field-state {
  position: absolute;
  inset-inline-end: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
}
.akch-field-state.is-ok::after,
.akch-field-state.is-bad::after {
  content: '';
  position: absolute;
  inset: 0;
}
.akch-field-state.is-ok::after {
  border: 2px solid #12a150;
  border-top: 0; border-inline-start: 0;
  width: 6px; height: 11px;
  inset: 1px auto auto 5px;
  transform: rotate(45deg);
}
.akch-field-state.is-bad::after {
  background:
    linear-gradient(45deg, transparent 44%, #e5484d 44%, #e5484d 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, #e5484d 44%, #e5484d 56%, transparent 56%);
}
.akch-field-state.is-checking::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  border: 2px solid var(--border2);
  border-top-color: var(--accent);
  animation: akchSpin .7s linear infinite;
}

.akch-reveal {
  position: absolute;
  inset-inline-end: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.akch-reveal::before {
  content: '';
  position: absolute;
  inset: 7px;
  background: currentColor;
  color: var(--muted2);
  -webkit-mask: center/contain no-repeat;
  mask: center/contain no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
.akch-reveal.is-on::before { color: var(--accent-text); }
.akch-reveal:hover::before { color: var(--text); }

/* ─── Terms checkbox ────────────────────────────────────────── */

.akch-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 20px;
  font-size: 12.5px;
  line-height: 1.95;
  color: var(--muted);
  cursor: pointer;
}
.akch-check input {
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin-top: 3px;
  accent-color: var(--accent);
  cursor: pointer;
}
.akch-check a { color: var(--accent-text); font-weight: 700; }
.akch-check a:hover { text-decoration: underline; }

/* ─── Code boxes ────────────────────────────────────────────── */

.akch-otp { display: flex; gap: 9px; margin-bottom: 18px; }
.akch-otp-box {
  flex: 1;
  min-width: 0;
  aspect-ratio: 1 / 1.15;
  text-align: center;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 20px;
  font-weight: 800;
  caret-color: var(--accent);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .12s ease;
}
.akch-otp-box:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}
.akch-otp-box:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  transform: scale(1.06);
}
.akch-otp-box.is-filled {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 17%, var(--surface));
  box-shadow: 0 0 0 3px var(--accent-soft);
  transform: scale(1.05);
}
.akch-otp-box.is-filled:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 26%, var(--surface));
  transform: scale(1.08);
}

/* ─── Buttons ───────────────────────────────────────────────── */

/* Same contrast reasoning as the tab marker: white on the raw accent is 4.23:1. */
.akch-auth-btn {
  width: 100%;
  padding: 14px 18px;
  border: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 84%, #000);
  color: #fff;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition: filter .18s ease, transform .1s ease;
}
.akch-auth-btn:hover:not(:disabled) { filter: brightness(1.08); }
.akch-auth-btn:active:not(:disabled) { transform: translateY(1px); }
.akch-auth-btn:disabled { cursor: not-allowed; opacity: .75; }

.akch-spinner {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  animation: akchSpin .7s linear infinite;
}
@keyframes akchSpin { to { transform: rotate(360deg); } }

.akch-auth-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted2);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.akch-auth-back:hover { color: var(--text); }

.akch-auth-resend {
  margin: 14px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--muted2);
}
.akch-auth-resend button {
  border: 0;
  background: none;
  padding: 0;
  color: var(--accent-text);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.akch-auth-resend button:hover { text-decoration: underline; }

.akch-auth-note {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.9;
  color: var(--muted);
  text-align: center;
}

.akch-auth-error {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(229, 72, 77, .1);
  border: 1px solid rgba(229, 72, 77, .3);
  color: #e5484d;
  font-size: 12.5px;
  line-height: 1.85;
}

.akch-auth-verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(18, 161, 80, .12);
  color: #12a150;
  font-size: 11.5px;
  font-weight: 700;
  margin-inline-end: 6px;
}

/* ─── Divider and Google ────────────────────────────────────── */

.akch-auth-or {
  position: relative;
  text-align: center;
  margin: 20px 0;
}
.akch-auth-or::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 1px;
  background: var(--border);
}
.akch-auth-or span {
  position: relative;
  padding: 0 12px;
  background: var(--bg);
  font-size: 12px;
  color: var(--muted2);
}

.akch-auth-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 18px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease;
}
.akch-auth-google:hover { border-color: var(--border2); background: var(--surface); }

/* ─── Success ───────────────────────────────────────────────── */

.akch-auth-done { text-align: center; padding: 30px 0; }
.akch-auth-check {
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: rgba(18, 161, 80, .12);
  color: #12a150;
}
.akch-auth-done h2 { margin: 0 0 6px; font-size: 21px; font-weight: 800; color: var(--text); }

.akch-auth-home {
  margin-top: 26px;
  text-align: center;
  font-size: 12.5px;
  color: var(--muted2);
  text-decoration: none;
}
.akch-auth-home:hover { color: var(--text); }

/* ─── Responsive ────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .akch-auth-steps { grid-template-columns: 1fr; }
  .akch-auth-step { flex-direction: row; align-items: center; gap: 12px; }
}

@media (max-width: 900px) {
  .akch-auth-shell { grid-template-columns: 1fr; }
  /* The rail is the first thing in the source, but on a phone the form is what
     the visitor came for — so it leads, and the rail becomes a short header. */
  .akch-auth-aside {
    order: 2;
    padding: 26px clamp(18px, 5vw, 28px) 30px;
  }
  .akch-auth-aside-brand { display: none; }
  .akch-auth-aside-body { margin-top: 0; max-width: none; }
  .akch-auth-aside h1 { font-size: clamp(24px, 6vw, 32px); }
  .akch-auth-aside p { margin-bottom: 20px; }
  .akch-auth-main { order: 1; min-height: auto; justify-content: flex-start; }
  .akch-auth-brand { visibility: visible; }
  .akch-auth-card { margin: 0 auto; }
}

@media (max-width: 480px) {
  .akch-otp { gap: 6px; }
  .akch-otp-box { font-size: 17px; }
  .akch-auth-main { padding: 16px 16px 26px; }
}

/* ══════════════════════════════════════════════════════════════
   MOTION

   Deliberately restrained: things move once, on arrival or on a state
   change, and then stop. Nothing loops, nothing floats, nothing pulses
   forever — an auth screen is a place people are trying to leave.
   ══════════════════════════════════════════════════════════════ */

@keyframes akchRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes akchSlideIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes akchFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* The rail arrives first, then the form column, so the eye lands on the
   heading before the fields. */
.akch-auth-aside-body > * {
  animation: akchRise .5s cubic-bezier(.22, 1, .36, 1) both;
}
.akch-auth-aside-body > :nth-child(2) { animation-delay: .05s; }
.akch-auth-aside-body > :nth-child(3) { animation-delay: .1s; }
.akch-auth-aside-body > :nth-child(4) { animation-delay: .15s; }

.akch-auth-step { animation: akchRise .45s cubic-bezier(.22, 1, .36, 1) both; }
.akch-auth-step:nth-child(1) { animation-delay: .16s; }
.akch-auth-step:nth-child(2) { animation-delay: .22s; }
.akch-auth-step:nth-child(3) { animation-delay: .28s; }

.akch-auth-tabs { animation: akchRise .45s cubic-bezier(.22, 1, .36, 1) both; animation-delay: .06s; }
.akch-auth-card > .akch-pane { animation: akchFadeIn .3s ease both; }

/* Each form step announces itself when it takes over from the previous one. */
.akch-step:not([hidden]) { animation: akchSlideIn .34s cubic-bezier(.22, 1, .36, 1) both; }

/* The code boxes fill in sequence rather than appearing as a block. */
.akch-otp-box { animation: akchRise .3s cubic-bezier(.22, 1, .36, 1) both; }
.akch-otp-box:nth-child(1) { animation-delay: .02s; }
.akch-otp-box:nth-child(2) { animation-delay: .05s; }
.akch-otp-box:nth-child(3) { animation-delay: .08s; }
.akch-otp-box:nth-child(4) { animation-delay: .11s; }
.akch-otp-box:nth-child(5) { animation-delay: .14s; }
.akch-otp-box:nth-child(6) { animation-delay: .17s; }

/* A box that has a digit in it reads as filled. */
.akch-otp-box:not(:placeholder-shown),
.akch-otp-box.is-filled { border-color: var(--border2); }

/* The success tick draws itself rather than popping in. */
.akch-auth-check svg path {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  animation: akchDraw .45s ease .12s forwards;
}
@keyframes akchDraw { to { stroke-dashoffset: 0; } }
.akch-auth-check { animation: akchPop .4s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes akchPop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }

/* A wrong code should be felt, not just read. */
@keyframes akchShake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
.akch-otp.is-wrong { animation: akchShake .5s cubic-bezier(.36, .07, .19, .97) both; }

.akch-auth-btn { transition: filter .18s ease, transform .1s ease, box-shadow .2s ease; }
.akch-auth-btn:hover:not(:disabled) { box-shadow: 0 10px 24px -12px var(--accent); }

/* ─── Reduced motion ───
   The theme also exposes a global [data-motion="off"] switch; both are honoured. */
@media (prefers-reduced-motion: reduce) {
  .akch-auth-aside-body > *,
  .akch-auth-step,
  .akch-auth-tabs,
  .akch-auth-card > .akch-pane,
  .akch-step:not([hidden]),
  .akch-otp-box,
  .akch-auth-check,
  .akch-auth-check svg path,
  .akch-otp.is-wrong,
  .akch-auth-tab-marker {
    animation: none;
    transition: none;
  }
  .akch-auth-check svg path { stroke-dashoffset: 0; }
  .akch-auth-btn,
  .akch-field input,
  .akch-otp-box { transition: none; }
  .akch-spinner,
  .akch-field-state.is-checking::after { animation: none; }
}

/* The [hidden] attribute is a UA-stylesheet rule, so any author rule that gives
   .akch-pane an explicit display beats it. During a password reset the sign-in
   pane is marked hidden and was still rendering underneath the reset card. */
.akch-pane[hidden] { display: none !important; }

/* ═══ Toasts — mobile-style notifications pinned to the top ═══
   Failures, successes and server-side notices appear here instead of
   inline text paragraphs. Follows the theme's light/dark tokens. */

.akch-toast-root {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: min(94vw, 400px);
  pointer-events: none;
}

.akch-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .16);
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.85;
  animation: akch-toast-in .3s cubic-bezier(.2, .9, .28, 1.15) both;
}

.akch-toast.is-leaving {
  animation: akch-toast-out .22s ease forwards;
}

@keyframes akch-toast-in {
  from { opacity: 0; transform: translateY(-14px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes akch-toast-out {
  to { opacity: 0; transform: translateY(-10px) scale(.97); }
}

.akch-toast-icon {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.akch-toast-text {
  flex: 1;
  min-width: 0;
}

.akch-toast-close {
  flex: none;
  border: 0;
  background: none;
  padding: 4px;
  color: var(--muted2);
  cursor: pointer;
  border-radius: 8px;
  display: grid;
  place-items: center;
  transition: color .2s ease, background .2s ease;
}
.akch-toast-close:hover {
  color: var(--text);
  background: var(--bg2);
}

.akch-toast--error   .akch-toast-icon { background: rgba(229, 72, 77, .14); color: #e5484d; }
.akch-toast--success .akch-toast-icon { background: rgba(46, 158, 91, .14); color: #2e9e5b; }
.akch-toast--info    .akch-toast-icon { background: var(--accent-soft); color: var(--accent-text); }

.akch-toast--error {
  border-color: rgba(229, 72, 77, .35);
}
.akch-toast--success {
  border-color: rgba(46, 158, 91, .35);
}

@media (prefers-reduced-motion: reduce) {
  .akch-toast,
  .akch-toast.is-leaving { animation: none; }
}
/* Field wrapper anchors the email-domain suggestion dropdown. */
.akch-field { position: relative; }

/* Email-domain autocomplete dropdown under the identifier fields. */
.akch-email-suggest {
  position: absolute;
  top: calc(100% - 6px);
  inset-inline-start: 0;
  inset-inline-end: 0;
  z-index: 40;
  margin: 0;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  max-height: 240px;
  overflow-y: auto;
}
.akch-email-suggest-item {
  display: block;
  width: 100%;
  padding: 9px 12px;
  margin: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  text-align: start;
  direction: ltr;
  cursor: pointer;
}
.akch-email-suggest-item:hover,
.akch-email-suggest-item.is-active {
  background: var(--surface);
  color: var(--accent);
}