/*
 * The pre-session surface: the login page and the registration page.
 *
 * Both used to carry their own inline <style> with the palette written out in hex, which is how
 * they ended up dark-only — there was no name to redefine. Everything is a token here, the light
 * theme redefines the tokens rather than the components, and the two pages share the file so they
 * cannot drift apart. They are seen back to back by the same person in the same minute.
 *
 * ── Theme resolution ──────────────────────────────────────────────────────────────────────────
 *   :root                          the LIGHT palette, the OS default for most people
 *   @media (prefers-color-scheme: dark) :root:not([data-theme="light"])   follow the OS
 *   :root[data-theme="dark"] / [data-theme="light"]                       an explicit choice wins
 *
 * The media query is guarded on :not([data-theme="light"]) so choosing light on a dark-set OS
 * actually sticks — an unguarded media block outranks nothing and quietly wins back.
 *
 * ★ `wt_theme` and `wt_language` are the SAME localStorage keys wtStandard uses. Same origin, so a
 * lead who picks Arabic and light here finds the app in Arabic and light after signing in. Picking
 * different key names is how you get a product that forgets what someone just told it.
 */

:root {
  color-scheme: light;

  --bg: #eef1f6;
  --card: #ffffff;
  --field: #f7f9fc;
  --line: #dce1ea;
  --line-strong: #c3cbd9;

  --ink: #111826;
  --ink-soft: #48505f;
  --ink-faint: #636b7e;   /* placeholders live on --field, where #6b7488 measured 4.45:1 */

  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --on-accent: #ffffff;

  --danger: #be123c;
  --notice: #7d5600;
  --notice-bg: #fdf6e3;
  --notice-line: #e8d59b;

  --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 18px 40px -28px rgba(15, 23, 42, .35);
  --radius: 12px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0a0e17;
    --card: #111827;
    --field: #0f1629;
    --line: #1e2d4a;
    --line-strong: #2b3d5e;
    --ink: #e2e8f0;
    --ink-soft: #94a3b8;
    --ink-faint: #8792a8;
    --accent: #3b82f6;
    /* Brighter on hover, not darker: on a dark ground the accent is the LIGHT surface, so the
       light theme's "go darker" would have taken the button the wrong way and dropped its label
       to 3.7:1. */
    --accent-hover: #60a5fa;
    /* ★ The polarity flips. White on #3b82f6 is 3.68:1 — under AA for a 14px label, and this is
       the only button on the page. Dark ink on the same bright blue is 5.25:1, which is the
       pattern wtStandard already uses for text drawn ON a filled accent (--on-fill). Darkening the
       button instead would have cost the accent its job as a link colour, which wants the
       opposite direction on this ground. */
    --on-accent: #0a0e17;
    --danger: #f87171;
    --notice: #fcd34d;
    --notice-bg: #2a2109;
    --notice-line: #6b4f0d;
    --shadow: 0 20px 50px -30px rgba(0, 0, 0, .9);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0e17;
  --card: #111827;
  --field: #0f1629;
  --line: #1e2d4a;
  --line-strong: #2b3d5e;
  --ink: #e2e8f0;
  --ink-soft: #94a3b8;
  --ink-faint: #8792a8;
  --accent: #3b82f6;
  --accent-hover: #60a5fa;   /* see the note in the media block above */
  --on-accent: #0a0e17;
  --danger: #f87171;
  --notice: #fcd34d;
  --notice-bg: #2a2109;
  --notice-line: #6b4f0d;
  --shadow: 0 20px 50px -30px rgba(0, 0, 0, .9);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.wrap {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  overflow: auto;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 30px;
  width: 340px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 6px;
}
.dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  flex: 0 0 auto;
}
.sub { color: var(--ink-faint); font-size: 12px; margin: -6px 0 8px; }

label.field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-soft); }

input, select {
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 12px;
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  width: 100%;
}
input::placeholder { color: var(--ink-faint); }
input:focus, select:focus { outline: none; border-color: var(--accent); }

/* Dialling code beside the number. The code is narrow and fixed — it holds at most five characters
   and reads as a label on the field rather than a field of its own — while the number takes the
   rest. `min-width: 0` because a flex item's default `auto` floors at its content width, which lets
   a long number push the row wider than the card instead of scrolling inside its own input. */
.phone-row { display: flex; gap: 8px; }
.phone-row .dial { flex: 0 0 84px; width: 84px; text-align: center; }
.phone-row input:not(.dial) { flex: 1 1 auto; min-width: 0; }

button {
  background: var(--accent);
  border: 0;
  border-radius: 8px;
  padding: 11px;
  color: var(--on-accent);
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
button:hover:not(:disabled) { background: var(--accent-hover); }
button:disabled { opacity: .6; cursor: not-allowed; }

/* Reserves its line whether or not there is a message, so the card does not jump the moment one
   appears — which is exactly when a finger is already moving toward the button. */
.err { color: var(--danger); font-size: 13px; min-height: 16px; line-height: 1.45; }
/* Waiting for approval is not an error: the account exists and the password was right. */
.err.pending { color: var(--notice); }

.alt { color: var(--ink-faint); font-size: 12px; text-align: center; }
.alt a { color: var(--accent); text-decoration: none; }
.alt a:hover { text-decoration: underline; }

/* The handle is the ONE thing a new account holder must keep — leads sign in with it, not with
   their email — so it is shown on its own, large, and the form is replaced rather than cleared. */
.done { display: none; flex-direction: column; gap: 10px; }
.handle {
  background: var(--field);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 14px;
  font-size: 20px; font-weight: 700; letter-spacing: .5px;
  text-align: center;
  user-select: all;
}
.note { color: var(--ink-soft); font-size: 12px; line-height: 1.5; }

/* The account exists but does not work yet — neither success nor failure, so it takes neither
   colour. This is the one paragraph on the page a person has to actually take in. */
.review {
  background: var(--notice-bg);
  border: 1px solid var(--notice-line);
  border-radius: 8px;
  padding: 12px 13px;
  color: var(--notice);
  font-size: 12.5px;
  line-height: 1.55;
}

/* ── /geocheck ──────────────────────────────────────────────────────────────────────────────────
   A turnstile, not a page. On the happy path it is on screen for about a tenth of a second, so it
   carries no brand, no heading and no explanation — anything a visitor half-reads before it
   vanishes is worse than nothing. The card keeps the login page's dimensions so the transition to
   it is a fill, not a jump. */
.geo-card { align-items: center; justify-content: center; min-height: 148px; text-align: center; }

.geo-spinner {
  width: 26px; height: 26px;
  border: 2px solid var(--line-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: geo-spin .7s linear infinite;
}
@keyframes geo-spin { to { transform: rotate(360deg); } }

/* Someone who cannot see motion gets a resting ring rather than nothing — the card would otherwise
   look like it had finished loading and shown an empty box. */
@media (prefers-reduced-motion: reduce) {
  .geo-spinner { animation: none; border-top-color: var(--accent); opacity: .6; }
}

/* The one thing on this page anybody is meant to read. Not `.err` red: being outside a served
   market is not an error the visitor made, and colouring it as a fault reads as "you did something
   wrong" to the many people who simply live somewhere. */
.geo-note { color: var(--ink-soft); font-size: 13px; line-height: 1.6; }
.geo-card button[hidden] { display: none; }
.geo-card button { align-self: stretch; }

/* ── page chrome: language + theme ──────────────────────────────────────────────────────────────
   Pinned to the top corner rather than placed in the card: they are settings for the PAGE, not
   fields of the form, and a control that looks like part of the form gets filled in like one.
   Logical inset so it swaps sides under RTL without a second rule. */
.auth-chrome {
  position: fixed;
  top: 14px;
  inset-inline-end: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 10;
}
.chrome-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink-soft);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.chrome-btn:hover { color: var(--ink); border-color: var(--line-strong); background: var(--card); }
.chrome-btn svg { width: 15px; height: 15px; flex: 0 0 auto; }

.lang-wrap { position: relative; }
.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  min-width: 170px;
  padding: 5px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  display: none;
}
.lang-menu.open { display: block; }
.lang-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 9px;
  background: none;
  border: 0;
  border-radius: 7px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
  text-align: start;
  cursor: pointer;
}
.lang-item:hover { background: var(--field); color: var(--ink); }
.lang-item .tick { margin-inline-start: auto; color: var(--accent); opacity: 0; }
.lang-item[aria-selected="true"] { color: var(--ink); }
.lang-item[aria-selected="true"] .tick { opacity: 1; }

/* When the door carries a brand, the shell injects <img class="brand-logo"> at the <!--BRAND_LOGO-->
   placeholder, just above the brand line. The generic blue dot is a stand-in for a mark that is not
   there — so once a real one is, it goes. Sibling selector rather than :has(), which buys nothing
   here and costs older browsers. */
.brand-logo { margin-bottom: 4px; }
.brand-logo ~ .brand .dot { display: none; }

/* Arabic sets dir="rtl" on <html>; the form is logical-property based, so only the few places that
   name a physical side need anything, and those use inset-inline-* above. */
[dir="rtl"] .handle { letter-spacing: 0; }