/* Authentication screens — sign in, forgot password, reset password.
   Feature 369 (milestone 3 of the auth module).

   PORTED FROM `docs/auth-template/`, and deliberately NOT all of it. The
   template ships a 97 KB stylesheet whose most frequent selectors are
   `.rn-shell`, `.serp-tab`, `.sidebar` — measured, it is the article writer's
   sheet, not a sign-in page's. The sign-in card's whole design lives in a
   98-line inline block plus a handful of `:root` tokens, so that is what is
   here: the shape, verbatim, and the tokens it actually consumes.

   ⚠ TOKENS ARE SCOPED TO `.au-page`, NEVER `:root`.
   21 of the template's tokens are HOMONYMS of the platform's (`--primary`,
   `--bg`, `--success`, `--danger`…). Declared on `:root` they would silently
   repaint anything else on the page, and a declaration on an element always
   beats one inherited from `:root` regardless of stylesheet order. This is
   ADR-AUTH-10, and it is the lesson of the `.crumbs` collision (feature 046).

   ⚠ EVERY GENERIC CLASS IS PREFIXED `au-`.
   `.card` and `.row` already exist in the platform sheet with different
   definitions. Porting them unprefixed is the same collision by another door.

   ⚠ THE TWO THEME BLOCKS ARE BOTH EXPLICIT.
   The platform serves DARK on `:root` and light under `[data-theme="light"]`
   — the reverse of the reflex — and all three pages stamp `data-theme` before
   first paint. Neither block is allowed to be the implicit default: a missing
   attribute must not produce a half-light, half-dark card. */

/* ── Tokens ─────────────────────────────────────────────────────────── */

html[data-theme="light"] .au-page {
  --au-bg-2: #F6F7F9;
  --au-surface: #FFFFFF;
  --au-ink: #15182B;
  --au-ink-2: #3A3F52;
  /* ⚠ The template says #8A93A6. Measured against its own white surface that
     is 3.09:1, under the 4.5:1 this product holds itself to, and it carries
     12.5px text — the brand subtitle, the card footer, the field hints. Same
     hue, darkened until it passes: 4.81:1. Fidelity to an unreadable template
     is not fidelity worth having (deviation D7). */
  --au-muted: #6A7286;
  --au-muted-2: #AAB1C0;
  --au-line: #ECEEF2;
  --au-line-3: #DCE0E7;
  /* The accent yields to the reader's own when they have one: `--brand` is
     declared only under `html[data-shell-v3][data-accent=…]`, in a sheet these
     three pages do not load, so the template's blue is what shows today. */
  --au-primary: var(--brand, #1668E3);
  --au-primary-strong: #0F55BC;
  --au-primary-weak: #B9CDEA;
  /* ⚠ The accent SURFACE and the link INK are two jobs, and one token cannot
     hold both: what carries white text has to be dark, what reads as text on
     the card has to be light. Measured in a real browser, the single token
     failed on one side or the other in every value we tried — 2.92:1 for
     white on the accent, then 3.26:1 for the accent as link ink. Two tokens,
     each with one job. In the light theme they coincide; in the dark one they
     must not. */
  --au-link: #1668E3;
  --au-link-hover: #0B3F87;
  --au-danger: #C6403B;
  --au-danger-soft: #FDF3F2;
  --au-danger-line: #F0D3D2;
  --au-ok: #2F7D57;
  --au-ok-soft: #EAF6F0;
  --au-ok-line: #C7E4D5;
}

html[data-theme="dark"] .au-page {
  --au-bg-2: var(--bg, #0c0d11);
  --au-surface: var(--bg-card, #15161b);
  --au-ink: var(--text, #f4f5f8);
  /* ⚠ ink/ink-2, muted/muted-2 and line/line-3 are HIERARCHIES in the
     template, not synonyms: ink-2 is label ink against ink for titles,
     muted-2 is ghost text against muted for hints, and line-3 is the border
     of an INPUT against line for card hairlines. Collapsing each pair onto
     one platform token would flatten the card — and for line-3 it would leave
     the fields with no visible edge at all. */
  --au-ink-2: #cfd3de;
  --au-muted: var(--text-muted, #8a93a6);
  --au-muted-2: #6f778a;
  --au-line: var(--border, #262932);
  --au-line-3: #3a3f4d;
  /* ⚠ NOT the platform's #828ff5. Measured in a real browser: white text on
     that indigo is 2.92:1 — the sign-in button, and the brand tile's letter,
     both below the 4.5:1 this screen holds itself to. Darkened until white
     carries: 5.54:1. The light theme's own blue already passes, so only this
     side moves. */
  --au-primary: var(--brand, #4f5bd5);
  /* The template writes these as raw hex (`a:hover`, `.b1:hover`,
     `.b1:disabled`). Carried over literally they would give a hovered link
     DARKER than its own background and a pale-blue disabled button on a black
     card, so they become tokens the dark block can answer. */
  /* ⚠ DARKER than the base, like the light theme's hover — not lighter.
     The reflex on a dark card is to brighten, and the platform's own
     #6e7be8 measures 3.71:1 under white text: a button that becomes
     unreadable at the moment the pointer is on it. Found by the guard, not
     by the browser probe — a probe does not hover. */
  --au-primary-strong: #3f4ac0;
  --au-primary-weak: #2f3350;
  --au-link: #aeb8ff;
  --au-link-hover: #cfd6ff;
  --au-danger: #f26464;
  --au-danger-soft: rgba(242, 100, 100, 0.14);
  --au-danger-line: rgba(242, 100, 100, 0.32);
  --au-ok: #3fb970;
  --au-ok-soft: rgba(63, 185, 112, 0.14);
  --au-ok-line: rgba(63, 185, 112, 0.32);
}

/* ── Page and card ──────────────────────────────────────────────────── */

.au-page {
  /* The template loads Geist from a CDN. This product serves a market with
     constrained network egress, and the card's shape does not depend on that
     face — so the system stack, and no third-party request from the door of
     the product (deviation D6). */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  background: var(--au-bg-2);
  color: var(--au-ink);
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  box-sizing: border-box;
}

.au-page a { color: var(--au-link); text-decoration: none; }
.au-page a:hover { color: var(--au-link-hover); }
.au-page [hidden] { display: none !important; }

.au-card {
  width: 100%;
  max-width: 412px;
  box-sizing: border-box;
  background: var(--au-surface);
  border: 1px solid var(--au-line);
  border-radius: 16px;
  padding: 30px 30px 26px;
  box-shadow: 0 10px 40px rgba(20, 20, 40, .06);
}

/* ── Brand ──────────────────────────────────────────────────────────── */

.au-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  margin-bottom: 22px;
}

.au-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--au-primary);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
  overflow: hidden;
}
.au-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }

.au-brand h1 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--au-ink);
  margin: 0;
  text-align: center;
}

.au-brand p {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--au-muted);
  margin: 0;
  text-align: center;
}

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

.au-fld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.au-fld label { font-size: 12px; font-weight: 600; color: var(--au-ink-2); }

.au-fld input,
.au-fld select {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--au-ink);
  background: var(--au-surface);
  border: 1px solid var(--au-line-3);
  border-radius: 9px;
  padding: 10px 12px;
}
.au-fld input:focus,
.au-fld select:focus {
  outline: none;
  border-color: var(--au-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--au-primary) 22%, transparent);
}
.au-fld input::placeholder { color: var(--au-muted-2); }
.au-fld small { font-size: 11px; line-height: 1.45; color: var(--au-muted); }

.au-pwrap { position: relative; }
.au-pwrap input { padding-right: 40px; }

.au-eye {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--au-muted);
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}
.au-eye:hover, .au-eye.on { color: var(--au-primary); }
/* Keyboard reach is not optional: this button changes what the screen shows. */
.au-eye:focus-visible {
  outline: 2px solid var(--au-primary);
  outline-offset: 2px;
  color: var(--au-primary);
}

/* ── Row, checkbox, button ──────────────────────────────────────────── */

.au-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: -4px 0 16px;
  font-size: 12px;
}

.au-chk {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--au-ink-2);
  margin: 0;
  cursor: pointer;
}
.au-chk input {
  flex: none;
  width: 15px;
  height: 15px;
  margin: 1px 0 0;
  accent-color: var(--au-primary);
}

.au-b1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 9px;
  padding: 11px 14px;
  cursor: pointer;
  border: 1px solid transparent;
  background: var(--au-primary);
  color: #fff;
}
/* ⚠ `.au-page a` (0,1,1) outranks `.au-b1` (0,1,0), so an <a> wearing the
   button class took the LINK colour — accent ink on an accent background,
   measured at 1:1. Invisible text, on the button that ends a successful
   password reset, and no guard that reads source could have seen it. */
.au-page a.au-b1, .au-page a.au-b1:hover { color: #fff; }
.au-b1:hover { background: var(--au-primary-strong); }
.au-b1:disabled { background: var(--au-primary-weak); cursor: not-allowed; }
.au-b1:focus-visible { outline: 2px solid var(--au-primary); outline-offset: 2px; }

.au-foot {
  font-size: 12.5px;
  color: var(--au-muted);
  text-align: center;
  margin: 16px 0 0;
}

/* ── Messages ───────────────────────────────────────────────────────────
   The template has no error area at all — it is a mock, so it never gets
   anything wrong. A sign-in screen with nowhere to say "wrong password" is
   not portable, so this block is a named addition (deviation D2). */

.au-msg {
  font-size: 12.5px;
  line-height: 1.5;
  border-radius: 9px;
  padding: 10px 12px;
  margin: 0 0 14px;
  border: 1px solid transparent;
}
.au-msg-err {
  color: var(--au-danger);
  background: var(--au-danger-soft);
  border-color: var(--au-danger-line);
}
.au-msg-ok {
  color: var(--au-ok);
  background: var(--au-ok-soft);
  border-color: var(--au-ok-line);
}

/* The submit button's in-flight spinner. Same shape as the platform's, local
   so these three pages do not depend on a class defined for the console. */
.au-spin {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: au-spin .7s linear infinite;
}
@keyframes au-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .au-spin { animation: none; }
}


/* ── The sign-up screens (feature 371, milestone 4) ─────────────────────
 *
 * Every selector below is prefixed `au-` and lives under `.au-page`, like
 * everything above it. That is ADR-AUTH-10, and it is not a style rule: 21 of
 * the template's tokens are HOMONYMS of the platform's, and a declaration on
 * an element always beats one inherited from `:root`, whatever the stylesheet
 * order. Unprefixed, these rules would repaint pages this feature never
 * touched — with valid CSS and green guards (the `.crumbs` collision of
 * feature 046).
 *
 * ⚠ No token is DECLARED here. They all come from the two theme blocks above,
 * so a colour added later cannot be half-defined in one theme.
 */

.au-page .au-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 420px) {
  .au-page .au-two { grid-template-columns: 1fr; }
}

/* The strength gauge. It reads the SERVER's floor, so its four steps describe
   a rule that is actually enforced. */
.au-page .au-pw {
  margin-top: 8px;
  font-size: 12px;
  color: var(--au-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.au-page .au-pw::before {
  content: "";
  flex: 0 0 auto;
  width: 72px;
  height: 4px;
  border-radius: 3px;
  background: var(--au-line-3);
}

.au-page .au-pw[data-step="1"]::before { background: var(--au-danger); }
.au-page .au-pw[data-step="2"]::before { background: var(--au-primary-weak); }
.au-page .au-pw[data-step="3"]::before { background: var(--au-ok); }

.au-page .au-gen {
  margin-top: 8px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 12px;
  color: var(--au-link);
  cursor: pointer;
  text-decoration: underline;
}

.au-page .au-gen:hover { color: var(--au-link-hover); }

.au-page .au-match {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--au-danger);
}

.au-page .au-match[data-ok="1"] { color: var(--au-ok); }

/* ⚠ THE HONEYPOT. Off-screen rather than `display:none`: several form-fillers
 * skip a field they can see is hidden, and the whole value of this field is
 * that a machine treats it as ordinary. `aria-hidden` and `tabindex=-1` in the
 * markup keep it away from anyone using assistive technology, so nobody can
 * fill it by accident. */
.au-page .au-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.au-page .au-sent {
  margin: 4px 0 2px;
  font-size: 15px;
  color: var(--au-ink);
  word-break: break-all;
}

.au-page .au-note {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--au-muted);
}

/* ── The country picker (fix 377) ──────────────────────────────────────────
   Every rule is scoped under `.au-page` and every colour reads a token this
   sheet already declares — ADR-AUTH-10: a declaration that reached `:root`
   here would repaint the rest of the page, with valid CSS and green tests. */
.au-page .au-cbx { position: relative; }

.au-page .au-cbx-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 13.5px;
  text-align: left;
  color: var(--au-ink);
  background: var(--au-surface);
  border: 1px solid var(--au-line-3);
  border-radius: 9px;
  padding: 10px 12px;
  cursor: pointer;
}
.au-page .au-cbx-btn:focus-visible {
  outline: none;
  border-color: var(--au-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--au-primary) 22%, transparent);
}
.au-page .au-cbx-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-page .au-cbx-caret { color: var(--au-muted); font-size: 11px; }

.au-page .au-cbx-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  min-width: 21px;
  height: 15px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--au-bg-2);
}
.au-page .au-cbx-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The badge the image falls back to — an emoji flag does not render on
   Windows, which is why the flag is an <img> in the first place. */
.au-page .au-cbx-flag-fb {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--au-muted);
}

.au-page .au-cbx-pop {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--au-surface);
  border: 1px solid var(--au-line);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
  padding: 8px;
}
/* ⚠ The list rises ABOVE its button when there is no room below. The
   decision is MEASURED at each opening (`place()` in auth-signup.js), never
   forced: a menu that always rose would climb off the top of a tall screen
   just as surely as it fell off the bottom of a short one.

   Without it, the last row's list covered the « Créer mon projet » button and
   spilled past the card — which is how it was reported. Note it is NOT the
   clipping defect of fix 352: nothing here hides its overflow, so an absolute
   popup with a flipped anchor is enough, and `position: fixed` would buy
   nothing but an ancestor-capture risk.

   The rule is COPIED from the real « Nouveau projet » form's PSelect, numbers
   included, because a module may not import from another module's page. A
   drift guard recalculates both sides. */
.au-page .au-cbx.is-up .au-cbx-pop { top: auto; bottom: calc(100% + 4px); }

.au-page .au-cbx-search { width: 100%; box-sizing: border-box; }

.au-page .au-cbx-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  max-height: 232px;
  overflow-y: auto;
}
.au-page .au-cbx-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 7px;
  font-size: 13.5px;
  color: var(--au-ink);
  cursor: pointer;
}
.au-page .au-cbx-opt:hover,
.au-page .au-cbx-opt.is-active { background: var(--au-primary-weak); }

.au-page .au-cbx-empty {
  margin: 10px 4px 4px;
  font-size: 12px;
  color: var(--au-muted);
}

/* The popup must not survive its own `hidden` attribute: `display:flex` on a
   container beats the UA sheet's `[hidden]{display:none}`, and this module
   watched exactly that keep an empty banner permanently on screen (227). */
.au-page .au-cbx-pop[hidden],
.au-page .au-cbx-empty[hidden] { display: none; }


/* ── The sign-up's project form (feature 378) ─────────────────────────────
   Same two rules as the picker above and for the same reason: every selector
   is scoped under `.au-page`, and every colour reads a token this sheet
   already declares. ADR-AUTH-10 — a declaration that reached `:root` from
   here would repaint the rest of the console, with valid CSS and green tests
   (the collision feature 046 met on `.crumbs`).

   ⚠ And no `var(--x)` here names a token nobody declares. A fallback is a net
   for a token that exists; for a token that does not, it IS the rendering —
   which is how PR #1277 shipped a panel at 1.11:1 through every guard. */

.au-page .au-card-wide { max-width: 720px; }

.au-page .au-sec {
  margin: 22px 0 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--au-line);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--au-muted);
}
.au-page .au-sec:first-of-type { margin-top: 6px; }

.au-page .au-three {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

/* A required field says so, and the mark is decoration: the label already
   carries the name, and the asterisk is `aria-hidden` in the markup. */
.au-page .au-req { color: var(--au-danger); font-weight: 700; }

/* The ⓘ. `title` is set from `data-i18n-title` by the i18n engine, so the
   note is trilingual by construction — a hard-coded one would be French on a
   screen this platform serves in forty-three languages. */
.au-page .au-tip {
  display: inline-block;
  margin-left: 3px;
  color: var(--au-muted-2);
  cursor: help;
  font-size: 11px;
  font-weight: 400;
}
.au-page .au-tip:hover { color: var(--au-primary); }

/* The address field. The scheme is SHOWN, never typed: `normalise_site` on
   the server adds it, and a person who pastes a full URL is normalised there
   too — one rule, one home. */
.au-page .au-url {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--au-line-3);
  border-radius: 9px;
  overflow: hidden;
  background: var(--au-surface);
}
.au-page .au-url-pfx {
  display: flex;
  align-items: center;
  padding: 0 9px;
  font-size: 12.5px;
  color: var(--au-muted);
  background: var(--au-bg-2);
  border-right: 1px solid var(--au-line-3);
  white-space: nowrap;
}
.au-page .au-url input {
  border: 0;
  border-radius: 0;
  flex: 1;
  min-width: 0;
}
.au-page .au-url input:focus { box-shadow: none; }
.au-page .au-url:focus-within {
  border-color: var(--au-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--au-primary) 22%, transparent);
}

.au-page .au-fld textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--au-ink);
  background: var(--au-surface);
  border: 1px solid var(--au-line-3);
  border-radius: 9px;
  padding: 10px 12px;
  resize: vertical;
  min-height: 68px;
}
.au-page .au-fld textarea:focus {
  outline: none;
  border-color: var(--au-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--au-primary) 22%, transparent);
}
.au-page .au-fld textarea::placeholder { color: var(--au-muted-2); }

/* What a refusal marks. The screen flags EVERY missing field at once: on a
   nine-field form, naming one gap at a time is nine trips through the same
   sentence. */
.au-page .au-missing,
.au-page .au-missing:focus {
  border-color: var(--au-danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--au-danger) 18%, transparent);
}

/* The « your project already exists » block, shown INSTEAD of the form. */
.au-page #have-project { text-align: center; }
.au-page #have-project p { margin: 0 0 14px; }

/* The engine logo is a data-URI the registry stores; it is not a flag, so it
   is not cropped to a circle's centre. */
.au-page .au-cbx-flag img[src^="data:"] { object-fit: contain; }

@media (max-width: 720px) {
  .au-page .au-three { grid-template-columns: 1fr; }
  .au-page .au-card-wide { max-width: 460px; }
}

/* ── The code step (feature 383) ─────────────────────────────────────────
   Six digits read off a phone and typed on a keyboard: legibility IS the
   design. Wide tracking, a monospaced face, centred. `.au-link-btn` is a
   button that reads as a link — the two actions under the field navigate
   nowhere, so an <a> would be a lie to the keyboard. */
.au-page .au-code {
  font-family: Consolas, Menlo, "SF Mono", monospace;
  font-size: 1.5rem;
  letter-spacing: .35em;
  text-align: center;
}
.au-page .au-link-btn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--au-link);
  font: inherit;
}
.au-page .au-link-btn:hover { color: var(--au-link-hover); }
.au-page .au-link-btn:disabled { opacity: .6; cursor: default; }
.au-page .au-link-btn:focus-visible { outline: 2px solid var(--au-primary); outline-offset: 2px; }


/* ── The Google door (feature 398, milestone 9) ─────────────────────────
   The template's `.or` + `.socs .bg`, re-scoped like everything else on
   these screens. ⚠ Only the tokens change: `--line-2` does not exist in
   this sheet (the template has a hierarchy of three line tokens and this
   scoped copy kept two), so the rule uses the hairline `--au-line` it
   already has rather than inventing a third. */
.au-or {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 16px 0;
  font-size: 11px;
  /* ⚠ The template writes this in its GHOST token (`--muted-2`). Computed
     from this sheet's own values it lands at 2.15:1 in the light theme and
     4.03:1 in the dark one — unreadable text, on both. The screens of
     milestone 3 already deviate where the template's colours fail (its dark
     accent was darkened for exactly this reason), so the separator takes the
     readable token instead. Found by `check_contrast`, not by looking. */
  color: var(--au-muted);
}
.au-or::before, .au-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--au-line);
}

.au-socs { display: grid; gap: 8px; }

/* The secondary button: the platform's own surface and ink, NOT Google's
   colours. Only the logo is Google's, which is what its brand guidelines
   ask for and what keeps the button legible in both themes. */
.au-bg {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  border-radius: 9px;
  padding: 11px 14px 11px 16px;
  cursor: pointer;
  background: var(--au-surface);
  color: var(--au-ink);
  border: 1px solid var(--au-line-3);
}
.au-bg svg { flex: none; }
.au-bg:hover { border-color: var(--au-muted-2); background: var(--au-bg-2); }
.au-bg:focus-visible { outline: 2px solid var(--au-primary); outline-offset: 2px; }