/* =========================================================
   Delegee Shield — auth + landing pages.
   Used by: /, /login, /register, /account/password.
   Depends on: tokens.css + layout.css.

   The form-card pattern is adapted from the design system
   preview at docs/design/.../project/preview/forms.html:
   white card, hair-line border, 1-column stack of fields,
   small-caps mono eyebrow + editorial h1 + short lede.
   ========================================================= */

/* ===== Auth page shell =================================== */
/* A shell that vertically parks the form-card mid-viewport
   without fighting the sticky header. `flex: 1` on .page
   (from layout.css) lets us fill the available space between
   header and footer. */
.auth-page {
  display: grid;
  place-items: center;
  padding: 48px 24px 80px;
}

/* ===== Form-card ========================================== */
.auth-card {
  width: 100%;
  max-width: 520px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 40px 44px;
  box-shadow: var(--sh-2);
}

.auth-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}
.auth-head .eyebrow { align-self: flex-start; }
.auth-head h1 {
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0;
}
.auth-head .lede {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--fg-2);
  margin: 0;
}

/* ===== Form ============================================== */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Plain-text inline error above the form fields (pattern study A3+F3, D52):
   two signals — danger hue + a leading glyph — never a filled banner.
   Revealed + filled by shield_auth.js on a failed sign-in. */
.auth-form__error {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--status-error-fg);
}
.auth-form__error[hidden] { display: none; }
.auth-form__error svg { flex: none; margin-top: 2px; }

.field-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Label row with a trailing help affordance (login password label +
   "Why is there no password reset?" — pattern study A3, D52). */
.field__label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}
.field__label-row .forgot-password { margin-top: 0; }
/* Anchored at the row's right edge, the popover opens leftward so it stays
   inside the form column. */
.field__label-row .forgot-password__popover { left: auto; right: 0; }
.field label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--fg-2);
  letter-spacing: 0.02em;
}
.field input {
  font-family: var(--font-sans);
  font-size: 14px;
  background: var(--white);
  border: 1px solid var(--hair-2);
  border-radius: var(--r-md);
  padding: 10px 12px;
  width: 100%;
  color: var(--fg);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
[data-theme="dark"] .field input {
  background: var(--navy-900);
  color: var(--fg);
  border-color: var(--border-strong);
}
.field input:focus {
  border-color: var(--border-focus);
  box-shadow: var(--sh-focus);
}
.field input[aria-invalid="true"],
.field input.error {
  border-color: var(--ent-people-mark);
}
.field .help {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.45;
  color: var(--fg-3);
  margin: 0;
}
.field .help.error { color: var(--status-error-fg); }

/* ===== Action row + footer-link ========================== */
.auth-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}
.auth-actions .btn { min-width: 140px; }

.auth-footer-link {
  margin-top: 24px;
  font-size: 13.5px;
  color: var(--fg-2);
}
.auth-footer-link a {
  color: var(--navy-800);
  text-decoration: underline;
  text-underline-offset: 3px;
}
[data-theme="dark"] .auth-footer-link a { color: var(--gold-400); }
/* Quieter register: the "accounts are provisioned" line shown when
   self-serve registration is off (pattern study A3, D52). */
.auth-footer-link--muted { color: var(--fg-3); font-size: 12.5px; }

/* ===== Support-copy aside (login page "forgot password") === */
.auth-card .support-copy {
  margin-top: 28px;
  padding: 16px 18px;
  background: var(--surface-muted);
  border-left: 3px solid var(--gold-500);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-family: var(--font-serif);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fg-2);
}
.auth-card .support-copy strong {
  display: block;
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  color: var(--fg);
  margin-bottom: 4px;
}
.auth-card .support-copy a {
  color: var(--navy-800);
  text-decoration: underline;
  text-underline-offset: 2px;
}
[data-theme="dark"] .auth-card .support-copy a { color: var(--gold-400); }

/* ===== Forgot-password disclosure popover (login) =========
   Muted link below the password field. Clicking opens a
   disclosure popover explaining that a password reset destroys
   the encrypted document library but leaves the account intact.
   ========================================================= */
.forgot-password {
  position: relative;
  margin-top: 4px;
}
.forgot-password__link {
  appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--fg-3);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}
.forgot-password__link:hover,
.forgot-password__link:focus-visible {
  color: var(--fg);
  outline: none;
}
.forgot-password__link:focus-visible {
  text-decoration-thickness: 2px;
}
.forgot-password__popover {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 50;
  width: min(360px, 92vw);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  padding: 16px 18px;
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.5;
  animation: forgot-pop-in 160ms var(--ease);
}
.forgot-password__popover[hidden] { display: none; }
@keyframes forgot-pop-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.forgot-password__title {
  margin: 0 0 8px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: var(--fg);
  letter-spacing: 0.01em;
}
.forgot-password__body {
  margin: 0 0 10px;
  color: var(--fg-2);
}
.forgot-password__body strong {
  color: var(--fg);
  font-weight: var(--fw-semibold);
}
.forgot-password__cta {
  margin: 10px 0 0;
  color: var(--fg-2);
}
.forgot-password__cta a {
  color: var(--navy-800);
  text-decoration: underline;
  text-underline-offset: 2px;
}
[data-theme="dark"] .forgot-password__cta a { color: var(--gold-400); }

/* ===== Glossary term + disclosure card (login) ===========
   "Idonym" is a coined word, and sign-in is where a first-time
   visitor meets it. The word itself is the affordance: a dotted
   underline inside the sentence opens a short definition card.
   Same disclosure contract as .forgot-password__popover above —
   Esc / outside click / re-click the trigger; no scrim, no focus
   trap. Markup: partials/_glossary_idonym.html.
   ========================================================= */
.gloss {
  position: relative;
  display: inline-block;
}

/* The trigger is a button so it is keyboard-reachable and announces
   its expanded state, but it must read as a word in running prose —
   hence font: inherit and a dotted underline rather than any .btn. */
.gloss__term {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent-soft-fg);
  transition: color var(--dur-fast) var(--ease),
              text-decoration-color var(--dur-fast) var(--ease);
}
.gloss__term:hover {
  color: var(--fg);
  text-decoration-color: var(--accent);
}
.gloss__term:focus-visible {
  outline: none;
  border-radius: var(--r-sm);
  box-shadow: var(--sh-focus);
}
/* On the navy brand panel the paper-mode underline hue disappears —
   step up to the light gold and brighten the word itself on hover. */
.auth-split__brand .gloss__term {
  text-decoration-color: var(--gold-400);
}
.auth-split__brand .gloss__term:hover {
  color: var(--white);
  text-decoration-color: var(--gold-300);
}

.gloss__pop {
  /* Explicit: the element is a <span> (see the macro's phrasing-content note),
     so it only honours `width` once it is blockified. Absolute positioning does
     that here, but a static context — the styleguide stage — would not. */
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% + 10px);
  z-index: var(--z-menu);
  /* Narrower than the sibling forgot-password popover (360px): this card is a
     two-sentence definition, and the chip pair fits comfortably at 320. */
  width: min(320px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  padding: var(--sp-4) 18px;
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.5;
  text-align: left;
  animation: gloss-pop-in 160ms var(--ease);
}
.gloss__pop[hidden] { display: none; }
@keyframes gloss-pop-in {
  from { opacity: 0; transform: translate(-50%, 4px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .gloss__pop { animation: none; }
}

/* Both mounts anchor to a STABLE BOX rather than to the linked word. The word's
   position depends on where the sentence happens to wrap — which changes with
   viewport and with translation length — so a word-anchored card can run past
   its column. The enclosing block cannot.

   Form-column mount: centred on the 380px card, which is where the word sits
   anyway (the head is centre-aligned). */
.auth-split__form-head { position: relative; }
.auth-split__form-head .gloss { position: static; }

/* Brand-panel mount: the panel is also overflow:hidden, so a card that ran past
   the column edge would be clipped outright rather than just looking cramped.
   Anchor to the whole feature row — at 360px the text column alone is 234px and
   a 320px card would overhang it, while the row spans the panel's full content
   width at every size. Aligning to the row also squares the card with the
   feature icon rather than starting mid-block. */
.auth-split__features li { position: relative; }
.auth-split__features li .gloss { position: static; }
.auth-split__features li .gloss__pop {
  left: 0;
  transform: none;
  animation-name: gloss-pop-in-start;
}
@keyframes gloss-pop-in-start {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* The card's internals are all <span> (see the macro's phrasing-content note),
   so every former block element re-declares its display here. */
.gloss__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.gloss__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-3);
}
.gloss__close {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 2px;
  margin: -2px -4px -2px 0;
  color: var(--fg-3);
  cursor: pointer;
  line-height: 0;
  border-radius: var(--r-sm);
  transition: color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.gloss__close:hover {
  color: var(--fg);
  background: var(--surface-muted);
}
.gloss__close:focus-visible {
  outline: none;
  box-shadow: var(--sh-focus);
}

/* Dictionary headword — the coinage is the product's positioning, so the
   card states it as a word being defined, not as a FAQ answer. */
.gloss__title {
  display: block;
  margin: 0 0 var(--sp-3);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  color: var(--fg);
}
.gloss__title em {
  font-family: var(--font-doc-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: 12.5px;
  color: var(--fg-3);
  margin-left: 6px;
}

/* The round trip, shown before it is explained: original <-> label. Fits one
   line at every width down to 360px, so no wrap to design around. */
.gloss__trip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px var(--sp-3);
  margin: 0 0 var(--sp-3);
}
/* Both ends of the trip wear ONE treatment — the entity-people tint in Inter,
   which is how a person entity is painted everywhere the user will meet one:
   the panel demo a few hundred lines below (.idn-ent[data-fam="per"]) and the
   review surface itself (.ent.per, review.css). Sans rather than the doc serif
   for the same reason the summary row originals are sans (review.css .ent-item
   .orig-preview, Filip 2026-07-16): this card is chrome, and a serif chip reads
   as a foreign surface inside an Inter component. The chips differ by their
   text, not their treatment — the double arrow carries the relation. */
.gloss__chip {
  padding: 2px 7px;
  border-radius: 3px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  background: var(--ent-people-bg);
  color: var(--ent-people-fg);
}
.gloss__arw {
  color: var(--fg-3);
  flex: none;
}

.gloss__body {
  display: block;
  margin: 0;
  color: var(--fg-2);
}
.gloss__body strong {
  color: var(--fg);
  font-weight: var(--fw-semibold);
}

/* ===== Registration consent row =========================
   Required checkbox: user must confirm they understand that
   password-loss = document-loss (but not account-loss) before
   the submit button becomes enabled. Client-side gate only.
   ========================================================= */
.consent-row {
  margin-top: 4px;
}
.consent-row__label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-2);
}
.consent-row__checkbox {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--navy-800);
  cursor: pointer;
}
[data-theme="dark"] .consent-row__checkbox { accent-color: var(--gold-500); }
.consent-row__text {
  flex: 1 1 auto;
}

/* ===== Landing page ====================================== */
.page.landing {
  max-width: var(--rail-default);
  padding-top: 64px;
}

.landing-hero {
  max-width: 720px;
  margin: 48px auto 0;
}
.landing-hero .eyebrow-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.landing-hero h1 {
  font-size: var(--fs-5xl);
  line-height: 1.08;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0 0 20px;
}
.landing-hero .lede {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  line-height: var(--lh-prose);
  color: var(--fg-2);
  max-width: 640px;
  margin: 0;
}

.landing-cta {
  display: flex;
  gap: 16px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.landing-cta .btn { min-width: 160px; }

/* =========================================================
   Split-layout login — first Shield surface the user sees.
   Left: navy brand panel (product identity + why-it-exists).
   Right: neutral card with the sign-in form.
   Full-bleed: the base layout's app-header/footer are skipped
   on this route (see login.html block overrides).
   ========================================================= */
.auth-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100vh;
  background: var(--bg);
}

.auth-split__brand {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(1100px 520px at 12% -8%, rgba(var(--gold-500-rgb), 0.12), transparent 62%),
    linear-gradient(168deg, #1B2C56 0%, #142244 38%, #0E1B36 100%);
  color: #EFEFEA;
  padding: 64px 72px 48px;
  display: flex;
  flex-direction: column;
  gap: 48px;
  overflow: hidden;
}
.auth-split__brand::before {
  /* Slow-shifting wash adds quiet motion behind the content. */
  content: "";
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(40% 35% at 30% 25%, rgba(73, 110, 192, 0.28), transparent 70%),
    radial-gradient(45% 40% at 75% 80%, rgba(var(--gold-500-rgb), 0.10), transparent 70%);
  filter: blur(60px);
  z-index: -1;
  animation: auth-brand-drift 22s ease-in-out infinite alternate;
}
.auth-split__brand::after {
  /* Subtle hair-line at the panel split so the two halves feel joined
     rather than abutting on a blank seam. */
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 1px;
  background: rgba(var(--white-rgb), 0.05);
}

@keyframes auth-brand-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-3%, 2%, 0) scale(1.08); }
  100% { transform: translate3d(2%, -2%, 0) scale(1.04); }
}

/* Floating gold/navy orbs — slow, low-opacity, decorative. */
.auth-split__bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  z-index: -1;
  pointer-events: none;
}
.auth-split__bg-orb--a {
  width: 380px; height: 380px;
  top: -80px; left: -120px;
  background: radial-gradient(circle, rgba(var(--gold-500-rgb), 0.45), transparent 70%);
  animation: auth-orb-float-a 18s ease-in-out infinite alternate;
}
.auth-split__bg-orb--b {
  width: 460px; height: 460px;
  bottom: -160px; right: -140px;
  background: radial-gradient(circle, rgba(73,110,192,0.45), transparent 70%);
  animation: auth-orb-float-b 24s ease-in-out infinite alternate;
}
@keyframes auth-orb-float-a {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(40px, 30px, 0); }
}
@keyframes auth-orb-float-b {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50px, -30px, 0); }
}

.auth-split__brand-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  max-width: 440px;
}
.auth-split__logo { display: inline-flex; }
.auth-split__logo img { display: block; height: 53px; width: auto; }

.auth-split__features {
  list-style: none;
  padding: 0;
  margin: auto 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-self: center;
  max-width: 480px;
  width: 100%;
}
.auth-split__features li {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 18px;
  align-items: flex-start;
}
.auth-split__feat-ico {
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, rgba(var(--gold-500-rgb), 0.16), rgba(var(--gold-500-rgb), 0.04));
  color: var(--gold-400);
  border: 1px solid rgba(var(--gold-500-rgb), 0.28);
  box-shadow: 0 8px 24px -12px rgba(var(--gold-500-rgb), 0.4);
}
.auth-split__feat-ico svg { width: 22px; height: 22px; }
.auth-split__feat-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.auth-split__feat-title {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: var(--fw-semibold);
  color: #F5F5EE;
  letter-spacing: 0.005em;
}
.auth-split__feat-sub {
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.55;
  color: #A9B5CC;
}

.auth-split__footline {
  margin-top: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy-300);
  opacity: 0.75;
}
.auth-split__footline a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease);
}
.auth-split__footline a:hover { color: var(--gold-400); }

.auth-split__form {
  position: relative;
  display: grid;
  place-items: center;
  padding: 56px 48px;
  background: var(--bg-sunken);
}

/* Back-to-login link, anchored top-left of the right panel. */
.auth-split__back {
  position: absolute;
  top: 28px;
  left: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 6px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--fg-2);
  text-decoration: none;
  border-radius: var(--r-md);
  transition: color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}
.auth-split__back svg { width: 16px; height: 16px; }
.auth-split__back:hover {
  color: var(--fg);
  background: rgba(var(--navy-800-rgb), 0.05);
}

/* Card sits flush against the page — no border/shadow. The form fields
   pick up a slight tint so they read as inputs without a container. */
.auth-split__card {
  width: 100%;
  max-width: 380px;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.auth-split__card .field input {
  background: rgba(var(--white-rgb), 0.55);
  border-color: rgba(var(--navy-800-rgb), 0.10);
}
.auth-split__card .field input:focus {
  background: var(--white);
}
[data-theme="dark"] .auth-split__card .field input {
  background: rgba(var(--white-rgb), 0.04);
  border-color: rgba(var(--white-rgb), 0.10);
}

.auth-split__form-head {
  text-align: center;
  margin-bottom: 24px;
}
/* Compact "id" symbol above the heading — shown ONLY on mobile, where the
   navy brand panel (and its lock-up) drops below the form. Hidden on desktop
   so the panel lock-up is the sole mark there. */
.auth-split__form-logo { display: none; }
.auth-split__form-logo img { display: block; width: auto; }

/* Password strength meter — bar + label on the password field.
   The `display: flex` below overrides the UA `[hidden] { display: none }`,
   so the hide-until-typing JS toggle needs an explicit opt-out rule. Same
   story for `.pw-reqs` below. */
.pw-strength {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}
.pw-strength[hidden],
.pw-reqs[hidden] { display: none; }
.pw-strength__bar {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: rgba(var(--navy-800-rgb), 0.08);
  overflow: hidden;
}
.pw-strength__fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--status-error-fg);
  transition: width var(--dur-med) var(--ease),
              background-color var(--dur-med) var(--ease);
}
.pw-strength__label {
  font-family: var(--font-sans);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--fg-3);
  min-width: 64px;
  text-align: right;
  text-transform: uppercase;
}
.pw-strength[data-level="1"] .pw-strength__fill { width: 25%; background: #C44A3A; }
.pw-strength[data-level="2"] .pw-strength__fill { width: 50%; background: #D89A2D; }
.pw-strength[data-level="3"] .pw-strength__fill { width: 75%; background: #B59324; }
.pw-strength[data-level="4"] .pw-strength__fill { width: 100%; background: #4F8C5A; }
.pw-strength[data-level="1"] .pw-strength__label { color: #C44A3A; }
.pw-strength[data-level="2"] .pw-strength__label { color: #B07520; }
.pw-strength[data-level="3"] .pw-strength__label { color: #8C7322; }
.pw-strength[data-level="4"] .pw-strength__label { color: #4F8C5A; }
[data-theme="dark"] .pw-strength__bar { background: rgba(var(--white-rgb), 0.08); }

/* Password requirements checklist — each row toggles to .is-met when
   the corresponding rule passes. The strength meter score is the count
   of rules met, so the bar and the list stay in sync by construction. */
.pw-reqs {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.4;
  color: var(--fg-3);
}
.pw-reqs li {
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color var(--dur-fast) var(--ease);
}
.pw-reqs__dot {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--navy-800-rgb), 0.18);
  background: transparent;
  position: relative;
  transition: border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}
.pw-reqs li.is-met { color: #4F8C5A; }
.pw-reqs li.is-met .pw-reqs__dot {
  background: #4F8C5A;
  border-color: #4F8C5A;
}
.pw-reqs li.is-met .pw-reqs__dot::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 5px;
  width: 6px;
  height: 3px;
  border-left: 1.5px solid var(--white);
  border-bottom: 1.5px solid var(--white);
  transform: rotate(-45deg);
}
[data-theme="dark"] .pw-reqs__dot { border-color: rgba(var(--white-rgb), 0.22); }

/* Match-state hint sits under the confirm field. */
.help[data-pw-match]:empty { display: none; }
.help[data-pw-match].is-ok { color: #4F8C5A; }
.help[data-pw-match].is-bad { color: var(--status-error-fg); }

/* Browser autofill paints inputs gray — force them to read like a normal
   user-typed value (white background, fg-color text). */
.auth-split__card .field input:-webkit-autofill,
.auth-split__card .field input:-webkit-autofill:hover,
.auth-split__card .field input:-webkit-autofill:focus,
.auth-split__card .field input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--white) inset;
  -webkit-text-fill-color: var(--fg);
  caret-color: var(--fg);
  transition: background-color 9999s ease-in-out 0s;
}
[data-theme="dark"] .auth-split__card .field input:-webkit-autofill,
[data-theme="dark"] .auth-split__card .field input:-webkit-autofill:hover,
[data-theme="dark"] .auth-split__card .field input:-webkit-autofill:focus,
[data-theme="dark"] .auth-split__card .field input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--navy-900) inset;
  -webkit-text-fill-color: var(--fg);
}
.auth-split__form-head h1 {
  font-size: 26px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 6px;
  color: var(--fg);
}
.auth-split__form-head p {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--fg-2);
  margin: 0;
}

.auth-split__card .field-link {
  align-self: flex-end;
  margin-top: 4px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--navy-800);
  text-decoration: none;
}
.auth-split__card .field-link:hover { text-decoration: underline; }
[data-theme="dark"] .auth-split__card .field-link { color: var(--gold-400); }

.auth-split__submit { width: 100%; justify-content: center; }

/* Sign-in CTA uses the brand accent (gold) as its primary fill, with dark navy
   text for contrast. Scoped to the login submit so other primary buttons stay
   navy. Focus ring is navy (the gold --sh-focus would vanish on a gold fill). */
.auth-split__submit.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--navy-900);
}
.auth-split__submit.btn-primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}
.auth-split__submit.btn-primary:active {
  background: var(--gold-700);
  border-color: var(--gold-700);
}
.auth-split__submit.btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--navy-800-rgb), 0.4);
}

.auth-split__legal {
  font-family: var(--font-sans);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--fg-3);
  text-align: center;
  margin: 16px 0 0;
}
.auth-split__legal a {
  color: var(--fg-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.auth-split__card .auth-footer-link {
  text-align: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(var(--navy-800-rgb), 0.08);
  font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
  .auth-split__brand::before,
  .auth-split__bg-orb--a,
  .auth-split__bg-orb--b { animation: none; }
}

/* Collapse to stacked layout on narrow viewports. The navy panel
   compresses into a short hero, the form card sits below. */
@media (max-width: 860px) {
  .auth-split { grid-template-columns: 1fr; min-height: unset; }
  /* Sign-in form first, brand panel becomes a context hero below it.
     Extra top padding drops the centered wordmark + heading below the
     fixed EN/HR locale pill (top-right). */
  .auth-split__form { order: 1; padding: 56px 20px 48px; }
  /* Swap the mark: panel lock-up hides, form shows the compact "id" symbol. */
  .auth-split__brand-head { display: none; }
  .auth-split__form-logo { display: inline-flex; margin: 0 0 16px; }
  .auth-split__form-logo img { height: 48px; }
  .auth-split__brand {
    order: 2;
    padding: 36px 28px 32px;
    gap: 28px;
  }
  .auth-split__brand::after { display: none; }
  .auth-split__features { gap: 16px; }
  .auth-split__footline { display: none; }
}

/* The `full_bleed` base-template flag isn't being set here because we
   skip the chrome blocks directly in login.html; keep the selector
   available for future callers that want the same shell without
   duplicating the block-override dance. */
.app-shell--full-bleed { padding: 0; margin: 0; }

/* =========================================================================
   Live-idonymisation demo — the "watch it work" card on the login brand
   panel, above the feature list. A warm-paper legal document whose personal
   data is redacted into typed, entity-coloured pseudonyms (idonymise_preview.js
   drives the loop). Entity styling mirrors the review surface (review.css .ent
   + the --ent-* family tokens); text is Inter throughout.
   ========================================================================= */

/* When the demo is present, let the logo, demo and features flow from the top
   and pin the footline to the bottom (instead of vertically centring features).
   :has() scopes this to the login panel — register.html keeps its centring. */
.auth-split__brand:has(.idn-demo) { gap: 28px; }
/* Centre the demo + features block vertically: the logo stays pinned at the top
   and the footline at the bottom, and the two auto top-margins split the free
   space so the middle content sits centred rather than crowding the logo. */
.auth-split__brand:has(.idn-demo) .idn-demo { margin-top: auto; }
.auth-split__brand:has(.idn-demo) .auth-split__features { margin: 0; }  /* keep base align-self:center */
.auth-split__brand:has(.idn-demo) .auth-split__footline { margin-top: auto; }

.idn-demo {
  align-self: center;
  width: 100%;
  max-width: 480px;
  font-family: var(--font-sans);
}

/* The paper document sheet, sitting on the navy panel. */
.idn-doc {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--r-lg);
  padding: 20px 22px 18px;
  box-shadow:
    0 0 0 1px rgba(var(--black-rgb), 0.04),
    0 2px 4px rgba(var(--black-rgb), 0.22),
    0 24px 50px -20px rgba(var(--black-rgb), 0.5);
}
.idn-doc::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 22px;
  width: 40px;
  height: 4px;
  background: var(--gold-500);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
}
.idn-doc__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--hair);
  padding-bottom: 10px;
  margin-bottom: 12px;
}
.idn-doc__title {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
}
.idn-doc__ref {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.idn-doc__body {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ink-2);
  text-align: left;
}

/* ----- The animated entity slot: original text -> redaction sweep -> chip -----
   `display: inline` keeps natural word spacing (a fixed-width inline-block eats
   the trailing space). The bar is a family-coloured overlay that scaleX-sweeps. */
.idn-ent {
  position: relative;
  display: inline;
  white-space: nowrap;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.idn-ent__c { position: relative; z-index: 1; }

.idn-ent.on { padding: 2px 6px 2px 4px; font-weight: var(--fw-semibold); }
.idn-ent.on[data-fam="per"] { background: var(--ent-people-bg);   color: var(--ent-people-fg); }
.idn-ent.on[data-fam="org"] { background: var(--ent-org-bg);      color: var(--ent-org-fg); }
.idn-ent.on[data-fam="loc"] { background: var(--ent-location-bg); color: var(--ent-location-fg); }
.idn-ent.on[data-fam="id"]  { background: var(--ent-id-bg);       color: var(--ent-id-fg); }

.idn-ent__tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 8.5px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--white);
  padding: 1px 4px;
  border-radius: var(--r-sm);
  margin-right: 5px;
  vertical-align: 1.5px;
  line-height: 1.35;
}
.idn-ent.on[data-fam="per"] .idn-ent__tag { background: var(--ent-people-mark); }
.idn-ent.on[data-fam="org"] .idn-ent__tag { background: var(--ent-org-mark); }
.idn-ent.on[data-fam="loc"] .idn-ent__tag { background: var(--ent-location-mark); }
.idn-ent.on[data-fam="id"]  .idn-ent__tag { background: var(--ent-id-mark); }

.idn-ent__bar {
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: 3px;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.44s var(--ease);
  box-shadow: 2px 0 0 0 var(--gold-500);   /* gold leading edge */
}
.idn-ent[data-fam="per"] .idn-ent__bar { background: var(--ent-people-mark); }
.idn-ent[data-fam="org"] .idn-ent__bar { background: var(--ent-org-mark); }
.idn-ent[data-fam="loc"] .idn-ent__bar { background: var(--ent-location-mark); }
.idn-ent[data-fam="id"]  .idn-ent__bar { background: var(--ent-id-mark); }

@media (prefers-reduced-motion: reduce) {
  .idn-ent__bar { transition: none; }
}

/* Narrow / stacked panel: tighten the card. */
@media (max-width: 860px) {
  .idn-demo { max-width: 520px; }
  .idn-doc { padding: 16px 16px 14px; }
  .idn-doc__body { font-size: 13px; line-height: 1.8; }
}