/* auth.css — the sign-in, sign-up, email-link, password, MFA and onboarding pages
     (launch L11). Moved out of Login.html so every one of those pages shares it.
     Authored here rather than as Tailwind utilities: the vendored tailwind.css is
     purged, so any size, colour or spacing it does not already carry would silently
     do nothing (see class-contract.test.js).

     WAVE 6-LITE (2026-11-02): the console prototype's signed-out frame
     (E:/echocalls-console-design src/pages/auth/AuthFrame.tsx): the warm-grey ground,
     the Echo Calls lockup top-start, language + theme (+ the way back to the website)
     top-end, a centred white card (28px), and on desk one quiet panel beside it. Light
     and dark. Every colour below is a token from echo-tokens.css (the prototype's own,
     copied by script); the --lg-* names are kept so nothing else had to change.
     Logical properties throughout, so Arabic mirrors without a second set of rules. */
  :root {
    --lg-canvas:    var(--ground);
    --lg-surface:   var(--surface);
    --lg-ink:       var(--ink);
    --lg-ink-2:     var(--ink-2);
    --lg-muted:     var(--ink-2);
    --lg-faint:     var(--ink-3);
    --lg-line:      var(--line);
    --lg-field:     var(--line-strong);
    --lg-field-hov: var(--ink-3);
    --lg-echo:      var(--ember-ink);
    --lg-echo-2:    var(--ember-ink);
    --lg-ring:      color-mix(in oklab, var(--focus) 22%, transparent);
    --lg-crit:      var(--danger-ink);  --lg-crit-soft: var(--danger-wash);  --lg-crit-line: color-mix(in oklab, var(--danger) 35%, var(--surface));
    --lg-warn:      var(--warn);        --lg-warn-soft: var(--warn-soft);    --lg-warn-line: color-mix(in oklab, var(--warn) 30%, var(--surface));
    --lg-info:      var(--info);        --lg-info-soft: var(--info-soft);    --lg-info-line: color-mix(in oklab, var(--info) 25%, var(--surface));
    --lg-ok:        var(--ok);          --lg-ok-soft:   var(--ok-wash);      --lg-ok-line:   color-mix(in oklab, var(--ok) 30%, var(--surface));
    --lg-r-control: 16px;
    --lg-r-card:    28px;
  }

  html, body, #root { min-height: 100%; }
  html { background: var(--lg-canvas); }
  body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: var(--lh-body);
    background: var(--lg-canvas);
    color: var(--lg-ink);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  html:lang(ar) body { font-family: var(--font-arabic); }
  /* Never letter-space Arabic, never change its case (the prototype's base rule). */
  html:lang(ar) .lg * { letter-spacing: 0 !important; text-transform: none !important; }
  .lg ::selection { background: var(--selection); }

  /* ---- page frame --------------------------------------------------------- */
  .lg {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    position: relative;
    isolation: isolate;
  }
  /* The old echo rings behind the card are gone: the prototype keeps the frame quiet. */
  .lg__echo { display: none; }

  .lg-top {
    width: 100%; max-width: 1200px; margin: 0 auto; box-sizing: border-box;
    min-height: 80px; padding: 0 32px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
  }
  .lg-brand {
    display: inline-flex; align-items: center; min-height: 44px;
    color: var(--lg-ink); text-decoration: none;
    border-radius: 12px; margin: -6px; padding: 6px;
  }
  .lg-top__end { display: inline-flex; align-items: center; gap: 4px; }
  .lg-back {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 0 14px; border-radius: 999px;
    color: var(--lg-ink-2); text-decoration: none;
    font-size: var(--text-small); font-weight: 600;
    transition: background-color .15s ease, color .15s ease;
  }
  .lg-back:hover { background: var(--surface-2); color: var(--lg-ink); }
  [dir="rtl"] .lg-back svg { transform: scaleX(-1); }
  /* The language switch and the theme button: the prototype's round ghost controls. */
  .lg-lang, .lg-tool {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; padding: 0 14px; border-radius: 999px;
    border: 0; background: transparent; cursor: pointer;
    font: inherit; font-size: var(--text-small); font-weight: 700; color: var(--lg-ink);
    transition: background-color var(--motion-fast) var(--motion-ease-standard), transform var(--motion-fast) var(--motion-ease-spring);
  }
  .lg-tool { padding: 0; }
  .lg-lang:hover, .lg-tool:hover { background: var(--surface-2); }
  :root[data-theme="dark"] .lg-lang:hover, :root[data-theme="dark"] .lg-tool:hover { background: var(--surface-3); }
  .lg-lang:active, .lg-tool:active { transform: scale(var(--motion-press-scale)); transition-timing-function: var(--motion-ease-out); }
  .lg-toolwrap { position: relative; }
  .lg-menu {
    position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 20;
    width: 232px; padding: 6px; border-radius: 18px;
    background: var(--lg-surface); box-shadow: var(--sh-float);
  }
  :root[data-theme="dark"] .lg-menu { background: var(--surface-2); }
  .lg-menu__item {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px;
    padding: 0 12px; border: 0; border-radius: 12px; background: none; cursor: pointer;
    font: inherit; font-size: var(--text-small); font-weight: 600; color: var(--lg-ink); text-align: start;
  }
  .lg-menu__item:hover { background: var(--surface-2); }
  :root[data-theme="dark"] .lg-menu__item:hover { background: var(--surface-3); }
  .lg-menu__item[aria-checked="true"] { font-weight: 800; }
  .lg-menu__check { margin-inline-start: auto; display: inline-flex; color: var(--ember-ink); }

  /* ---- main composition: the card first, the quiet panel beside it (desk) -- */
  .lg-main {
    flex: 1;
    width: 100%; max-width: 1200px; margin: 0 auto; box-sizing: border-box;
    padding: 24px 32px 64px;
    display: grid;
    grid-template-columns: 440px minmax(0, 1fr);
    align-items: center;
    gap: 64px;
  }
  .lg-panel { width: 100%; grid-column: 1; grid-row: 1; }
  .lg-intro { grid-column: 2; grid-row: 1; max-width: 460px; }
  .lg-eyebrow {
    margin: 0 0 16px;
    font-size: var(--text-meta); font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--lg-echo);
  }
  .lg-intro__title {
    margin: 0;
    font-size: 2rem; line-height: var(--lh-head); font-weight: 800; letter-spacing: -0.03em;
    color: var(--lg-ink);
    text-wrap: balance;
  }
  .lg-facts {
    list-style: none; margin: 28px 0 0; padding: 20px; display: grid; gap: 12px;
    background: var(--lg-surface); border-radius: 24px; box-shadow: var(--sh-card);
  }
  :root[data-theme="dark"] .lg-facts { background: var(--surface-2); }
  .lg-facts li {
    display: flex; align-items: center; gap: 12px;
    font-size: var(--text-small); line-height: var(--lh-small); color: var(--lg-ink-2);
  }
  /* The live dot: Ember, the one signal colour. */
  .lg-facts__dot {
    width: 8px; height: 8px; flex: none; border-radius: 999px;
    background: var(--ember); box-shadow: 0 0 0 4px color-mix(in oklab, var(--ember) 18%, transparent);
  }

  /* ---- the card ----------------------------------------------------------- */
  .lg-card {
    background: var(--lg-surface);
    border-radius: var(--lg-r-card);
    box-shadow: var(--sh-card);
    padding: 32px;
    animation: motion-fade-rise-in var(--motion-slow) var(--motion-ease-out) both;
  }
  :root[data-theme="dark"] .lg-card { background: var(--surface); }
  .lg-card--status {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 180px; box-sizing: border-box;
    font-size: var(--text-body); color: var(--lg-muted);
  }
  @media (prefers-reduced-motion: reduce) {
    .lg-card { animation: none; }
    .lg-back svg, .lg-btn, .lg-lang, .lg-tool { transition: none; }
  }
  html[data-shot="1"] .lg-card { animation: none; }
  .lg-card__title {
    margin: 0;
    font-size: var(--text-head); line-height: var(--lh-head); font-weight: 800; letter-spacing: -0.03em;
    color: var(--lg-ink);
    text-wrap: balance;
  }
  .lg-card__sub { margin: 8px 0 0; font-size: var(--text-body); line-height: var(--lh-body); color: var(--lg-ink-2); text-wrap: pretty; }

  /* ---- notices and errors ------------------------------------------------- */
  .lg-msg {
    margin-top: 22px;
    display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px;
    padding: 12px 16px;
    border-radius: 18px; border: 0;
    font-size: var(--text-small); line-height: var(--lh-small);
  }
  .lg-msg__ico { padding-top: 2px; }
  .lg-msg__text { margin: 0; min-width: 0; }
  .lg-msg__title { display: block; font-weight: 700; }
  .lg-msg__body { display: block; margin-top: 2px; color: var(--lg-ink-2); overflow-wrap: anywhere; }
  .lg-msg--crit { background: var(--lg-crit-soft); }
  .lg-msg--crit .lg-msg__ico, .lg-msg--crit .lg-msg__title { color: var(--lg-crit); }
  .lg-msg--warn { background: var(--lg-warn-soft); }
  .lg-msg--warn .lg-msg__ico, .lg-msg--warn .lg-msg__title { color: var(--lg-warn); }
  .lg-msg--info { background: var(--surface-2); }
  .lg-msg--info .lg-msg__ico, .lg-msg--info .lg-msg__title { color: var(--lg-ink); }
  .lg-msg--ok { background: var(--lg-ok-soft); }
  .lg-msg--ok .lg-msg__ico, .lg-msg--ok .lg-msg__title { color: var(--lg-ok); }

  /* ---- form --------------------------------------------------------------- */
  .lg-form { margin-top: 24px; display: grid; gap: 20px; }
  .lg-field { display: grid; gap: 6px; }
  .lg-label { font-size: var(--text-small); font-weight: 600; color: var(--lg-ink); }
  html:lang(ar) .lg-label { font-weight: 700; }
  .lg-control { position: relative; }
  .lg-input {
    display: block; width: 100%; box-sizing: border-box;
    height: 48px; padding: 0 16px;
    font: inherit; font-size: 1rem; color: var(--lg-ink);
    background: var(--lg-surface);
    border: 1px solid var(--lg-field); border-radius: var(--lg-r-control);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
    -webkit-appearance: none; appearance: none;
  }
  :root[data-theme="dark"] .lg-input { background: var(--surface-2); }
  .lg-input--pw { padding-inline-end: 56px; }
  .lg-input::placeholder { color: var(--ink-3); opacity: 1; }
  .lg-input:hover { border-color: var(--lg-field-hov); }
  .lg-input:focus { border-color: var(--focus); box-shadow: 0 0 0 3px var(--lg-ring); }
  .lg-input[aria-invalid="true"] { border-color: var(--lg-crit); }
  .lg-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 20%, transparent); }
  .lg-input[readonly] { color: var(--lg-muted); }
  /* An email, a phone, a code in an Arabic page: LTR, aligned to the reading side. */
  html[dir="rtl"] .lg-input[dir="ltr"] { text-align: end; }
  /* Browser autofill keeps the field the card's colour instead of the browser's own tint;
     the inset shadow is the one paint autofill cannot override, so the focus ring is
     repeated alongside it. */
  .lg-input:-webkit-autofill,
  .lg-input:-webkit-autofill:hover {
    -webkit-box-shadow: 0 0 0 1000px var(--lg-surface) inset;
    -webkit-text-fill-color: var(--lg-ink);
    caret-color: var(--lg-ink);
  }
  .lg-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--lg-surface) inset, 0 0 0 3px var(--lg-ring);
    -webkit-text-fill-color: var(--lg-ink);
  }
  .lg-input::-ms-reveal, .lg-input::-ms-clear { display: none; }

  .lg-eye {
    position: absolute; top: 4px; inset-inline-end: 4px;
    width: 40px; height: 40px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent; color: var(--lg-ink-2); cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
  }
  .lg-eye:hover { background: var(--surface-2); color: var(--lg-ink); }
  .lg-hint { font-size: var(--text-meta); line-height: var(--lh-meta); color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
  .lg-hint--crit { color: var(--lg-crit); font-weight: 600; }
  .lg-hint--warn { color: var(--lg-warn); }

  /* The main action: the prototype's large Ember pill with ink text. */
  .lg-btn {
    margin-top: 4px;
    width: 100%; height: 56px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    border: 0; cursor: pointer;
    font: inherit; font-size: var(--text-body); font-weight: 700;
    color: var(--on-ember); background: var(--ember-fill);
    box-shadow: var(--sh-press);
    transition: background-color var(--motion-fast) var(--motion-ease-standard), transform var(--motion-fast) var(--motion-ease-spring);
  }
  html:lang(ar) .lg-btn { font-weight: 800; }
  .lg-btn:hover { background: var(--ember-hover); }
  .lg-btn:active:not([aria-disabled="true"]):not([disabled]) { transform: scale(var(--motion-press-scale)); transition-timing-function: var(--motion-ease-out); }
  .lg-btn[aria-disabled="true"] { cursor: not-allowed; opacity: .45; }
  .lg-btn[aria-busy="true"] { cursor: progress; opacity: 1; background: var(--ember-fill); }

  .lg-help {
    margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--lg-line);
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px;
    font-size: var(--text-small); line-height: var(--lh-small); color: var(--lg-muted);
  }

  /* Text links in running copy (the prototype's `.link`): ink, underlined, Ember ink on hover. */
  .lg-link {
    color: var(--lg-ink); font-weight: 700;
    text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .22em;
    text-decoration-color: color-mix(in oklab, var(--lg-ink) 35%, transparent);
    border-radius: 4px;
    transition: color .15s ease, text-decoration-color .15s ease;
  }
  .lg-link:hover { color: var(--ember-ink); text-decoration-color: currentColor; }
  .lg-help--plain { margin: 12px 0 0; padding-top: 0; border-top: 0; justify-content: flex-start; gap: 4px; }
  .lg-link--button { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; cursor: pointer; }

  .lg-after {
    margin: 24px 0 0; text-align: center;
    font-size: var(--text-small); color: var(--lg-ink-2);
  }

  /* Focus: one treatment for every link and button on the page. */
  .lg a:focus-visible, .lg button:focus-visible, .lg summary:focus-visible {
    outline: 2px solid var(--focus); outline-offset: 2px;
  }
  .lg .lg-eye:focus-visible { outline-offset: -2px; }

  .lg-foot {
    width: 100%; max-width: 1200px; margin: 0 auto; box-sizing: border-box;
    padding: 20px 32px; border-top: 1px solid var(--lg-line);
    font-size: var(--text-meta); color: var(--lg-ink-2);
  }

  /* Developer demo shortcuts (DEMO builds only). */
  .lg-demo { margin-top: 16px; font-size: var(--text-meta); color: var(--lg-muted); }
  .lg-demo summary { list-style: none; cursor: pointer; text-align: center; border-radius: 6px; }
  .lg-demo summary::-webkit-details-marker { display: none; }
  .lg-demo__list { margin-top: 10px; display: grid; gap: 6px; padding: 12px; border: 1px solid var(--lg-line); border-radius: 18px; background: var(--lg-surface); }
  .lg-demo__row { display: flex; justify-content: space-between; gap: 12px; border: 0; background: none; padding: 4px 0; font: inherit; font-size: var(--text-meta); color: var(--lg-ink-2); cursor: pointer; text-align: start; }
  .lg-demo__row code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: var(--lg-muted); }

  /* ---- tablet and phone: one column, the form only ------------------------ */
  @media (max-width: 1023px) {
    .lg-main {
      grid-template-columns: minmax(0, 1fr);
      justify-items: center; align-items: start;
      padding: 8px 16px 40px; gap: 0;
    }
    .lg-intro { display: none; }
    .lg-panel { max-width: 440px; grid-column: 1; }
  }
  @media (max-width: 767px) {
    .lg-top { min-height: 72px; padding: 0 16px; }
    .lg-foot { padding: 20px 16px; }
  }
  @media (max-width: 520px) {
    /* The words step back to a screen-reader-only name at this width (axe link-name). */
    .lg-back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .lg-card { padding: 24px; }
    .lg-input { height: 48px; font-size: 16px; }  /* 16px stops iOS zooming into the field */
    .lg-foot { text-align: center; }
  }

  /* ---- launch L11: Google, captcha, codes ---------------------------------- */
  .lg-or, .lg-or--soon {
    display: flex; align-items: center; gap: 12px; margin: 20px 0 0;
    font-size: var(--text-meta); font-weight: 600; color: var(--ink-3);
  }
  .lg-or::before, .lg-or::after { content: ""; flex: 1; height: 1px; background: var(--lg-line); }
  /* The second action (Google): the prototype's white pill with a hairline ring. */
  .lg-btn--ghost {
    margin-top: 16px; color: var(--lg-ink); background: var(--lg-surface);
    box-shadow: inset 0 0 0 1px var(--lg-line), var(--sh-card);
  }
  :root[data-theme="dark"] .lg-btn--ghost { background: var(--surface-2); }
  .lg-btn--ghost:hover { background: var(--surface-2); }
  .lg-btn--ghost[aria-disabled="true"] { color: var(--lg-muted); background: var(--lg-surface); opacity: 1; }
  /* "Soon" (Wave 6-Lite): a sign-in the console will offer, not yet switched on (Google waits for
     the owner's OAuth client). Shown where the design has it, disabled, with the badge. */
  .lg-btn--soon, .lg-btn--soon:hover { cursor: not-allowed; color: var(--ink-3); background: var(--lg-surface); }
  :root[data-theme="dark"] .lg-btn--soon, :root[data-theme="dark"] .lg-btn--soon:hover { background: var(--surface-2); }
  .lg-btn--soon:active { transform: none !important; }
  .lg-captcha { min-height: 65px; display: flex; justify-content: center; }
  .lg-check { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start;
    font-size: var(--text-small); line-height: var(--lh-small); color: var(--lg-ink-2); }
  /* The box is the console's own (form-controls.css), set on the first line. */
  .lg-check .sd-check { margin-block-start: calc((var(--text-small) * var(--lh-small) - 20px) / 2); }
  .lg-select { height: 48px; padding: 0 14px; }
  /* SELF-SERVE: the kind of business, four radios as tiles (one tap each on a phone). */
  .lg-kinds { border: 0; margin: 0; padding: 0; min-width: 0; }
  .lg-kinds legend { padding: 0; margin-bottom: 6px; }
  .lg-kinds__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .lg-kind {
    display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 14px; box-sizing: border-box;
    font-size: var(--text-small); line-height: var(--lh-small); color: var(--lg-ink); cursor: pointer;
    background: var(--lg-surface); border: 1px solid var(--lg-field); border-radius: var(--lg-r-control);
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  :root[data-theme="dark"] .lg-kind { background: var(--surface-2); }
  .lg-kind:hover { border-color: var(--lg-field-hov); }
  .lg-kind:has(input:checked) { border-color: var(--ember-fill); box-shadow: inset 0 0 0 1px var(--ember-fill); }
  .lg-kind:has(input:focus-visible) { border-color: var(--focus); box-shadow: 0 0 0 3px var(--lg-ring); }
  .lg-kind:has(input[aria-invalid="true"]) { border-color: var(--lg-crit); }
  .lg-kind:has(input:disabled) { cursor: default; }
  .lg-code { letter-spacing: .3em; text-align: center; font-size: 20px; font-family: 'JetBrains Mono', ui-monospace, monospace; }
  .lg-qr { display: flex; justify-content: center; margin: 18px 0 6px; }
  .lg-qr img { width: 180px; height: 180px; border: 1px solid var(--lg-line); border-radius: 18px; background: #fff; }
  .lg-secret { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; overflow-wrap: anywhere;
    color: var(--lg-ink-2); background: var(--surface-2); border-radius: 12px; padding: 8px 12px; }
  .lg-steps { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
  .lg-steps li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; font-size: var(--text-small); line-height: var(--lh-small); color: var(--lg-ink-2); }
  .lg-steps__n { width: 24px; height: 24px; border-radius: 999px; background: var(--surface-2); color: var(--lg-ink);
    font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }

  /* ---- AUTH group, UI audit F08/F09 ----------------------------------------
     A secondary step inside a card (a new confirmation link, setting a password),
     and a link that does a button's job (contact, set a password). */
  .lg-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--lg-line); }
  .lg-section__title { margin: 0; font-size: var(--text-lead); line-height: var(--lh-lead); font-weight: 700; color: var(--lg-ink); }
  .lg-section .lg-card__sub { margin-top: 6px; font-size: var(--text-small); }
  a.lg-btn { text-decoration: none; }
  a.lg-btn--ghost { color: var(--lg-ink); }
  .lg-soon {
    display: inline-flex; align-items: center; min-height: 22px; padding: 1px 9px; border-radius: 999px;
    border: 1px dashed var(--line-strong); font-size: .75rem; font-weight: 700; color: var(--ink-2);
  }