/* Meridian sign-in experience: every page a person can reach before they
   are inside the app -- login, forgot-password, reset-password, and (added
   2026-09-07) mfa, mfa-enrol, mfa-recovery, first-login and
   account-activation. Those five were left on the old light
   .auth-body/.auth-shell treatment when login was redesigned, which meant
   signing in threw you from a dark card straight onto a white one at the
   two-factor step. They now share this one stylesheet.

   Palette (2026-09-07): a desert oasis at dusk -- warm night sky and muted
   sand, with only a trace of the setting sun -- matching
   public/img/auth/oasis-hero.svg, the artwork beside
   the sign-in form. It replaced a blue/violet scheme that had nothing to do
   with either the artwork or the OASIS mark above the wordmark.

   Layout: /login uses the two-panel .meridian-split (artwork beside form);
   every other auth page keeps the single centred card. Both sit on the same
   background and use the same .meridian-auth-card internals, so the two
   never drift apart. */

:root {
  --meridian-auth-bg: #17130f;        /* deep, neutral warm night */
  --meridian-auth-bg-2: #292118;      /* dusk above the horizon */
  --meridian-auth-card: #262019;
  --meridian-auth-field: #1b1712;
  --meridian-auth-border: #504438;
  --meridian-auth-ink: #f3eadb;       /* sand, lit */
  --meridian-auth-ink-2: #c7b8a2;     /* sand, in shade */
  --meridian-auth-accent-a: #d8c19a;  /* pale, sun-washed sand */
  --meridian-auth-accent-b: #b89d76;  /* shadowed dune */
  --meridian-auth-on-accent: #2b241b; /* ink for use ON the accent */
  --meridian-auth-danger: #ffa892;
  --meridian-auth-danger-bg: #3f1d14;
  --meridian-auth-ok: #93d9b3;
  --meridian-auth-ok-bg: #163024;
}

.meridian-auth-body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--meridian-auth-ink);
  /* Dusk, read top to bottom: night at the top, the last of the sun low and
     to one side. Kept dark enough that the warm bloom behind the form (see
     .meridian-split__panel::before) is what the eye lands on. */
  background:
    radial-gradient(58% 44% at 82% 14%, color-mix(in srgb, var(--meridian-auth-accent-b) 16%, transparent), transparent 70%),
    radial-gradient(70% 46% at 30% 100%, color-mix(in srgb, var(--meridian-auth-accent-b) 14%, transparent), transparent 72%),
    linear-gradient(175deg, #1d1812 0%, var(--meridian-auth-bg) 46%, #100d0a 100%);
}

/* MFA has its own page-level identity placement: the organisation mark sits
   above the work, while the product name anchors the page at top left. */
.meridian-auth-body--mfa { position: relative; }
.meridian-mfa-branding {
  position: absolute;
  z-index: 1;
  top: 34px;
  left: 42px;
  right: 42px;
  min-height: 96px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  pointer-events: none;
}
.meridian-mfa-branding__text {
  grid-column: 1;
  justify-self: start;
  margin: 0;
}
.meridian-mfa-branding__logo {
  grid-column: 2;
  justify-self: center;
  width: 194px;
  transform: none;
}
.meridian-auth-body--mfa .meridian-auth-hero,
/* The acknowledgement gate uses the same pinned branding (variant
   'mfa-external'), so it needs the same room: without it the OASIS mark sat
   on the "Privacy Notice" heading (found 2026-10-09, issuing v1.4). */
.meridian-auth-body--acknowledge .meridian-auth-hero {
  padding-top: 156px;
}

/* ---- Single centred card (every auth page except /login) ---- */
.meridian-auth-hero {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5, 32px) var(--space-4, 20px);
}

.meridian-auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--meridian-auth-card);
  border: 1px solid var(--meridian-auth-border);
  border-radius: 16px;
  padding: 36px 32px 32px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* The MFA step has several equally important controls and explanatory copy.
   A slightly larger tile keeps that short workflow calm rather than crowded. */
.meridian-auth-card--mfa {
  max-width: 680px;
  padding: 56px 68px 60px;
}
.meridian-auth-card--mfa .meridian-wordmark {
  gap: 18px;
  margin-bottom: 18px;
}
.meridian-auth-card--mfa .meridian-auth-title {
  margin-bottom: 14px;
  font-size: 28px;
}
.meridian-auth-card--mfa .meridian-auth-copy {
  margin-bottom: 34px;
  font-size: 15.5px;
  line-height: 1.6;
}
.meridian-auth-card--mfa .form-field {
  margin-bottom: 28px;
}
.meridian-auth-card--mfa .form-hint {
  margin-top: 10px;
  line-height: 1.55;
}
.meridian-auth-card--mfa form + form {
  margin-top: 16px;
}

/* ---- /login: artwork panel beside the form ---- */
.meridian-split {
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  padding: 20px;
  box-sizing: border-box;
  min-height: min(760px, calc(100vh - 132px));
}

.meridian-split__art {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: var(--meridian-auth-bg);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.8);
}
.meridian-split__art-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Biased down the illustration rather than centred: a centred crop of a
     tall image in a squarer panel keeps the sky and loses the foreground
     dune, which is what the caption sits on. */
  object-position: center 62%;
}
.meridian-split__art-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px 36px 36px;
  text-align: center;
  /* The artwork's own foreground dune is already dark, but the crop moves
     with the panel's shape -- this keeps the caption readable at any of them. */
  background: linear-gradient(180deg, transparent, rgba(10, 6, 3, 0.72) 55%);
}
.meridian-split__art-headline {
  margin: 0;
  font-size: clamp(21px, 2.2vw, 30px);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: #fdf6ea;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}
.meridian-split__art-sub {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: color-mix(in srgb, #fdf6ea 74%, transparent);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}

.meridian-split__panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
}
/* The quiet sand bloom behind the form echoes the light in the artwork. */
.meridian-split__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 34% at 50% 44%, color-mix(in srgb, var(--meridian-auth-accent-a) 13%, transparent), transparent 70%),
    radial-gradient(62% 54% at 50% 44%, color-mix(in srgb, var(--meridian-auth-accent-b) 17%, transparent), transparent 72%);
}
.meridian-split__panel > * { position: relative; }

/* On /login the form needs no card of its own -- it already has the artwork
   panel beside it to sit against. */
.meridian-auth-card--bare {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  /* Give the sign-in block a little more presence without turning the
     right-hand panel into a full-width form. */
  max-width: 440px;
}

/* ---- Wordmark: the OASIS mark above the Meridian name ---- */
.meridian-wordmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
}
.meridian-wordmark__logo {
  display: block;
  /* 164px is the source file's own width -- asking for more would only
     soften it. */
  width: 194px;
  height: auto;
  /* Already flattened to one sand tone when the file is built; the last of
     the lift comes off here so it settles into the panel rather than
     announcing itself above the wordmark. */
  opacity: 0.9;
}
.meridian-wordmark__text {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  background: linear-gradient(115deg, #fffaf0 8%, var(--meridian-auth-accent-a) 58%, var(--meridian-auth-accent-b) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.meridian-auth-tagline {
  margin: 10px 0 30px;
  text-align: center;
  color: var(--meridian-auth-ink-2);
  font-size: 16px;
}
.meridian-auth-title {
  margin: 0 0 9px;
  color: var(--meridian-auth-ink);
  font-size: 24px;
  letter-spacing: -0.02em;
  text-align: center;
}
.meridian-auth-copy {
  margin: 0 0 26px;
  color: var(--meridian-auth-ink-2);
  font-size: 14.5px;
  line-height: 1.55;
  text-align: center;
}
.meridian-auth-card .form-hint {
  margin: 7px 0 0;
  color: var(--meridian-auth-ink-2);
  font-size: 12.5px;
  line-height: 1.45;
}

/* ---- Form elements ---- */
.meridian-auth-card .form-field { margin-bottom: 20px; }
.meridian-auth-card label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--meridian-auth-ink-2);
}
.meridian-auth-card input[type="email"],
.meridian-auth-card input[type="password"],
.meridian-auth-card input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 15px;
  border-radius: 9px;
  border: 1px solid var(--meridian-auth-border);
  background: var(--meridian-auth-field);
  color: var(--meridian-auth-ink);
  font-size: 16px;
  font-family: inherit;
}
.meridian-auth-card input:focus {
  outline: none;
  border-color: var(--meridian-auth-accent-a);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--meridian-auth-accent-a) 30%, transparent);
}
.meridian-auth-card input::placeholder { color: #887966; }

.meridian-auth-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 17px;
  border: none;
  border-radius: 9px;
  font-size: 16px;
  font-weight: 650;
  color: var(--meridian-auth-on-accent);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  background: linear-gradient(115deg, var(--meridian-auth-accent-a), var(--meridian-auth-accent-b));
  transition: filter 0.15s var(--ease, ease);
}
.meridian-auth-btn:hover { filter: brightness(1.06); }
.meridian-auth-btn:disabled { opacity: 0.6; cursor: default; filter: none; }
.meridian-auth-btn:focus-visible {
  outline: 2px solid var(--meridian-auth-ink);
  outline-offset: 2px;
}

.meridian-auth-row-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: -6px 0 20px;
  font-size: 14.5px;
}
.meridian-auth-row-links a {
  color: var(--meridian-auth-accent-a);
  text-decoration: none;
}
.meridian-auth-row-links a:hover { text-decoration: underline; }

.meridian-auth-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
  color: var(--meridian-auth-ink-2);
  font-size: 13.5px;
  text-decoration: none;
}
.meridian-auth-back:hover { color: var(--meridian-auth-ink); }

.meridian-auth-alert {
  padding: 11px 13px;
  border-radius: 9px;
  font-size: 13.5px;
  margin-bottom: 18px;
  border: 1px solid transparent;
}
.meridian-auth-alert--error {
  background: var(--meridian-auth-danger-bg);
  border-color: color-mix(in srgb, var(--meridian-auth-danger) 40%, transparent);
  color: var(--meridian-auth-danger);
}
.meridian-auth-alert--success {
  background: var(--meridian-auth-ok-bg);
  border-color: color-mix(in srgb, var(--meridian-auth-ok) 40%, transparent);
  color: var(--meridian-auth-ok);
}
.meridian-auth-alert--info {
  background: #201a14;
  border-color: var(--meridian-auth-border);
  color: var(--meridian-auth-ink-2);
}

.meridian-auth-hint {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--meridian-auth-ink-2);
  text-align: center;
}

/* ---- Footer ----
   theme.css styles the footer for the app's light canvas: a white surface
   and a dark navy link colour, both of which read as a bright cut-out strip
   under the sign-in pages. These overrides put it on the same dusk palette
   as the rest of the page. `body.` is on the front of each selector to win
   against theme.css's own `[data-theme="dark"] .site-footer ...` rule, which
   otherwise ties on specificity. */
body.meridian-auth-body .site-footer {
  flex: none;
  background: transparent;
  border-top: 1px solid color-mix(in srgb, var(--meridian-auth-border) 70%, transparent);
  color: var(--meridian-auth-ink-2);
  padding: 16px var(--space-4, 20px) 20px;
}
body.meridian-auth-body .site-footer p,
body.meridian-auth-body .site-footer .footer-reg,
body.meridian-auth-body .site-footer .footer-cookie,
body.meridian-auth-body .site-footer .footer-links-row__sep {
  color: var(--meridian-auth-ink-2);
}
body.meridian-auth-body .site-footer .footer-links-row a {
  color: var(--meridian-auth-accent-a);
}
body.meridian-auth-body .site-footer .footer-links-row a:hover,
body.meridian-auth-body .site-footer .footer-links-row a:focus {
  color: var(--meridian-auth-ink);
  text-decoration: underline;
}

/* ---- Two-factor set-up, recovery codes, first sign-in ----
   These carry more than a login form does -- a QR code, a secret key, ten
   recovery codes -- so they get a wider card rather than a cramped one. */
.meridian-auth-card--wide { max-width: 520px; }

.meridian-auth-btn--ghost {
  background: none;
  border: 1px solid var(--meridian-auth-border);
  color: var(--meridian-auth-ink-2);
  font-weight: 600;
}
.meridian-auth-btn--ghost:hover {
  filter: none;
  color: var(--meridian-auth-ink);
  border-color: var(--meridian-auth-ink-2);
}
.meridian-auth-card form + form { margin-top: 12px; }

/* The QR code is a black-on-white image. Sitting it directly on the dark
   card would leave a white block with no edge; the plate gives it a quiet
   border and keeps the quiet zone a scanner needs. */
.meridian-auth-qr {
  display: block;
  width: 200px;
  height: 200px;
  margin: 18px auto;
  padding: 12px;
  box-sizing: content-box;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--meridian-auth-border);
}

.meridian-auth-card input[readonly] {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 1px;
  color: var(--meridian-auth-ink-2);
}

.meridian-auth-codes {
  margin: 0 0 20px;
  padding: 16px 16px 16px 40px;
  border-radius: 10px;
  border: 1px solid var(--meridian-auth-border);
  background: var(--meridian-auth-field);
  color: var(--meridian-auth-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
  line-height: 2;
  letter-spacing: 1px;
}
.meridian-auth-codes li::marker { color: var(--meridian-auth-ink-2); font-size: 12px; }

.meridian-auth-steps {
  margin: 0 0 20px;
  padding: 0 0 0 18px;
  color: var(--meridian-auth-ink-2);
  font-size: 14px;
  line-height: 1.65;
}
.meridian-auth-steps li { margin-bottom: 6px; }
.meridian-auth-steps strong { color: var(--meridian-auth-ink); font-weight: 600; }

/* ---- Narrow screens ----
   The two panels stack: the artwork becomes a banner over the form rather
   than disappearing, so the page keeps its identity on a phone. The banner
   crop is pulled down the artwork (object-position) because a wide, short
   crop through the middle of a tall illustration would land on empty sky. */
@media (max-width: 900px) {
  .meridian-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 14px;
    min-height: 0;
  }
  .meridian-split__art {
    height: clamp(150px, 26vh, 240px);
    border-radius: 16px;
  }
  .meridian-split__art-image { object-position: center 62%; }
  .meridian-split__art-caption { padding: 22px 20px 18px; }
  .meridian-split__art-headline { font-size: 18px; }
  .meridian-split__art-sub { margin-top: 7px; font-size: 12.5px; }
  .meridian-split__panel { padding: 8px 8px 28px; }
  .meridian-auth-card--bare { max-width: 440px; }
}

/* Short landscape phones: the banner would eat the form, so it goes. */
@media (max-width: 900px) and (max-height: 460px) {
  .meridian-split__art { display: none; }
}

@media (max-width: 420px) {
  .meridian-auth-card { padding: 28px 20px 24px; }
  .meridian-auth-card--mfa { padding: 38px 28px 34px; }
  .meridian-mfa-branding { top: 20px; left: 20px; right: 20px; min-height: 74px; }
  .meridian-mfa-branding__text { font-size: 30px; }
  /* Centred, the mark ran into "Meridian" on a phone (two-factor and the
     acknowledgement gate, found 2026-10-09): on a narrow screen it sits right. */
  .meridian-mfa-branding__logo { width: 128px; grid-column: 3; justify-self: end; }
  .meridian-auth-body--mfa .meridian-auth-hero,
  .meridian-auth-body--acknowledge .meridian-auth-hero { padding-top: 112px; }
  .meridian-wordmark__logo { width: 152px; }
  .meridian-wordmark__text { font-size: 31px; }
  .meridian-split__art-headline { font-size: 16.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .meridian-auth-btn { transition: none; }
}

/* ── Acknowledgement gate ──────────────────────────────────────────────────
   Two panes between MFA and the app: the Privacy Notice, then the User
   Declaration. Wider than the MFA tile because the whole document is on the
   page -- a gate that asks someone to confirm they have read something has to
   actually show it, not link to it.

   The document itself is preformatted: the extracts are space-aligned and
   their tables only line up in a monospace box, so the issued layout is
   preserved rather than re-flowed. */
/* Wide enough that the notice's widest issued line (108 columns at 11.5px)
   fits without sideways scrolling, including where ui-monospace resolves to a
   wider face than Consolas. */
.meridian-auth-card--acknowledge {
  max-width: 920px;
  padding: 48px 56px 52px;
}
.meridian-auth-card--acknowledge .meridian-auth-title {
  margin-bottom: 6px;
  font-size: 28px;
}
.meridian-auth-card--acknowledge .meridian-auth-copy {
  margin-bottom: 4px;
  font-size: 15.5px;
  line-height: 1.6;
}

.meridian-ack-step {
  margin: 0 0 10px;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--meridian-auth-accent-a);
}

.meridian-ack-reference {
  margin: 0 0 22px;
  font-size: 13px;
  color: var(--meridian-auth-ink-2);
}

/* Fixed height with its own scrollbar: the button stays visible while the
   document is read, so nobody has to scroll a long notice to find out how to
   continue. Focusable so it can be scrolled from the keyboard alone. */
.meridian-ack-document {
  max-height: 46vh;
  min-height: 220px;
  overflow-y: auto;
  /* Sideways scrolling is opt-in per layout: only the space-aligned notice may
     be wider than the box. Prose must never scroll horizontally. */
  overflow-x: hidden;
  padding: 20px 22px;
  background: var(--meridian-auth-field);
  border: 1px solid var(--meridian-auth-border);
  border-radius: 10px;
}
.meridian-ack-document:focus-visible {
  outline: 2px solid var(--meridian-auth-accent-a);
  outline-offset: 2px;
}

.meridian-ack-text {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  line-height: 1.65;
  color: var(--meridian-auth-ink);
}

/* Space-aligned extract (the Privacy Notice). Its version-history and approval
   tables are columns of padding spaces. `pre-wrap` re-flowed them: a long
   Change cell wrapped back to the left margin and then sat level with the next
   row's Role/Version, so the two columns read as if printed on top of each
   other. `pre` keeps every issued line intact; if a line is still too wide for
   the box, the box scrolls sideways instead of breaking the column. The
   slightly smaller type means the widest issued line (108 columns) fits
   without needing that scroll on a normal desktop. */
.meridian-ack-text--aligned {
  font-size: 11.5px;
  white-space: pre;
}
.meridian-ack-document--aligned {
  overflow-x: auto;
}

/* Prose extract (the User declaration). No columns depend on its line breaks,
   and some commitments are long single lines, so these must wrap. `break-word`
   is deliberately absent: it split mid-word where a normal wrap would do. */
.meridian-ack-text--prose {
  font-size: 12.5px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.meridian-ack-form {
  margin-top: 24px;
}

.meridian-ack-attribution {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--meridian-auth-ink-2);
}

.meridian-auth-card--acknowledge form + form {
  margin-top: 14px;
}

@media (max-width: 720px) {
  .meridian-auth-card--acknowledge {
    padding: 32px 22px 34px;
  }
  .meridian-ack-document {
    max-height: 50vh;
    padding: 14px 14px;
  }
  /* On a phone the notice cannot fit 108 columns at any readable size, so it
     scrolls sideways -- which is the point of `pre`: the tables stay aligned
     and legible rather than being re-flowed into each other. */
  .meridian-ack-text--aligned {
    font-size: 11px;
  }
  .meridian-ack-text--prose {
    font-size: 11.5px;
  }
}