/* Styles for /login.html only — loaded on no other page.

   The Copenhagen Bureau Core two-step sign-in shell. The header is the
   REAL public-site header (site-header container, verbatim from
   index.html — see login.html itself) — no page-specific header styling
   lives here, layout.css/components.css already cover it identically to
   every other page. Below the header: full-viewport Paper background,
   one centred authentication card.

   ONE centred authentication panel — architectural Paper/Line frame, not a
   floating SaaS card. .form-field (inputs) is reused unchanged from
   components.css, including its already-approved validation-error
   treatment (.form-field.is-invalid / .form-field__error).
   .login-form__submit reproduces .contact-flow__primary
   (css/contact-flow.css) — the approved filled form-submit control already
   used in the guided Contact flow — rather than inventing a new button.
   Paper/Ink/Graphite/Line and Inter only. */

.auth-shell-body {
  min-height: 100vh;
  background: var(--cb-color-paper);
  display: flex;
  flex-direction: column;
}

.login-page {
  flex: 1;
  padding-top: clamp(32px, 6vh, 72px);
  padding-bottom: clamp(48px, 10vh, 120px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* .form-field, .cta and the buttons here that reuse `hidden` all declare
   their own `display` as an author style, which always beats the UA
   stylesheet's own `[hidden] { display: none }` regardless of specificity
   — the same fix already required twice in css/expertise.css. One rule,
   scoped to this page, covers every hidden element. */
.login-page [hidden] {
  display: none;
}

/* THE PANEL — centred as a whole; content inside stays left aligned.
   Padding tightened from the first pass (was --cb-space-7/-6, 64/48px) —
   brief: "too tall... reduce the overall vertical footprint substantially,
   mainly by reducing padding/gaps, not type size." Border-radius reuses
   the base --cb-radius (the same token already used for a bordered
   Paper/Line panel elsewhere, e.g. .lang-select__menu) — not
   --cb-radius-button (reserved for buttons) or a new value. 1px Line
   border matches the existing form-input border weight (components.css
   uses a literal 1px there too, not the 0.5px hairline-divider token). */
.login-panel-frame {
  width: 100%;
  max-width: 34rem; /* ~544px, within the requested 500-560px */
  /* Exact same surface as the Featured Project ("Les Clés de Charlotte")
     card on index.html (.feature-panel) — reused verbatim (no dedicated
     token exists for it; it's this same color-mix expression inline
     there too) rather than the previous --cb-color-surface-raised
     (plain white), so this page's own card matches that established
     treatment instead of approximating it. No shadow token exists
     (--cb-shadow: none), so the border alone reads as "raised" —
     deliberately no drop shadow. */
  background: color-mix(in srgb, var(--cb-color-ink) 2%, var(--cb-color-paper));
  border: 1px solid var(--cb-color-line);
  /* 14px, not the sitewide 4px --cb-radius (buttons/inputs) — this page
     leads into Core, so its card matches Core's own card radius exactly
     (workspace.css's --ws-card-radius: 14px). workspace.css itself isn't
     loaded here (it's the full authenticated-dashboard stylesheet), so
     the value is mirrored literally rather than adding that dependency —
     same convention already used for .login-form__submit above. */
  border-radius: 14px;
  padding: var(--cb-space-6) var(--cb-space-5);
}

@media (max-width: 40rem) {
  .login-panel-frame {
    padding: var(--cb-space-4);
  }
}

/* CORE DOT MOTIF — a layered dotted mark, not a new logo. Reuses the
   exact dot-fill formula css/dot-field.css already established (circle,
   fill: var(--cb-color-ink)/graphite), sized to read as a deliberate
   product signature (90-120px desktop, per brief) rather than the earlier
   40px/single-ring pass, which read as a loading spinner at that size.
   Three rings + a solid centre, each step darker/more opaque toward the
   middle — monochrome only (Line/Graphite/Ink via opacity, no colour, no
   gradient, no glow), and static (no rotation), which is what keeps a
   dense dot cluster from reading as a spinner. Centred above the heading,
   same position across every auth state. */
.auth-motif {
  width: clamp(90px, 9vw + 60px, 120px);
  height: clamp(90px, 9vw + 60px, 120px);
  margin: 0 auto var(--cb-space-5);
}

.auth-motif svg {
  display: block;
  width: 100%;
  height: 100%;
}

.auth-motif__dot {
  fill: var(--cb-color-ink);
}

.auth-motif__dot--outer {
  opacity: 0.28;
}

.auth-motif__dot--middle {
  opacity: 0.55;
}

.auth-motif__dot--inner {
  opacity: 0.8;
}

.auth-motif__dot--centre {
  fill: var(--cb-color-ink);
  opacity: 1;
}

@media (max-width: 40rem) {
  .auth-motif {
    width: 72px;
    height: 72px;
    margin-bottom: var(--cb-space-4);
  }
}

.login-panel-frame__heading {
  margin: var(--cb-space-2) 0 0;
  font-family: var(--cb-font-sans);
  font-weight: var(--cb-weight-medium);
  font-size: var(--cb-text-page-heading-size);
  line-height: var(--cb-text-page-heading-leading);
  letter-spacing: var(--cb-text-page-heading-tracking);
  color: var(--cb-color-ink);
  text-align: center;
}

.login-panel-frame__copy {
  margin: var(--cb-space-2) 0 0;
  font-size: var(--cb-text-body-size);
  line-height: var(--cb-text-body-leading);
  color: var(--cb-color-text-secondary);
  text-align: center;
}

.login-panel-frame__copy--muted {
  font-size: var(--cb-text-small-size);
  color: var(--cb-color-ink);
}

/* Sign-in step's own two-line supporting copy — scoped to #auth-copy only
   (not the shared .login-panel-frame__copy rule, which every other auth
   state also uses) since this is the one place it wraps to two lines. */
#auth-copy {
  font-size: var(--cb-text-small-size);
}

/* SESSION-EXPIRED BANNER — quiet, informational; sits above the heading
   only when js/core-login.js's showSessionExpired() has been called (real
   entry point: an expired-session redirect eventually lands on
   #session-expired). Ink/Graphite/Line only, same restraint as the login
   error below. */
.auth-banner {
  margin: 0 0 var(--cb-space-4);
  padding: var(--cb-space-3) var(--cb-space-4);
  border: var(--cb-border-width) solid var(--cb-color-line);
  border-radius: var(--cb-radius);
  font-size: var(--cb-text-small-size);
  line-height: 1.5;
  color: var(--cb-color-text-secondary);
}

/* LOGIN ERROR ("incorrect email/password") — brief: "do not introduce a
   random bright red if no approved error token exists... use Ink/Graphite
   + Line for now." A left accent bar in Ink is the only structural device;
   no red, no fill, no icon. Field-level validation below (.form-field's
   own is-invalid/__error) is a separate, already-approved sitewide
   pattern and is left exactly as-is. */
.auth-error {
  margin: var(--cb-space-4) 0 0;
  padding: var(--cb-space-3) var(--cb-space-4);
  border-left: 2px solid var(--cb-color-ink);
  font-size: var(--cb-text-small-size);
  line-height: 1.5;
  color: var(--cb-color-ink);
}

.login-form {
  margin-top: var(--cb-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--cb-space-4);
}

.login-form__password-wrap {
  position: relative;
}

.login-form__password-wrap input {
  padding-right: 2.75rem;
}

/* Read-only email field on the activation state — same input styling,
   just Graphite text + no pointer/hover affordance, so it reads as
   "shown, not editable" without a separate input language. */
.form-field input[readonly] {
  color: var(--cb-color-text-secondary);
  cursor: default;
}

.form-field input[readonly]:hover {
  border-color: color-mix(in srgb, var(--cb-color-paper) 82%, var(--cb-color-ink) 18%);
}

/* PASSWORD VISIBILITY — a restrained eye icon, replacing the earlier
   "Show" text control. Matches the header account/globe icons' own weight
   (stroke-width 1.5, no fill, no circular background). The slash is drawn
   as a separate line and only shown once the password is visible
   (.is-active, toggled by js/core-login.js), rather than swapping the whole
   icon's markup. */
.auth-visibility-toggle {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  border: none;
  background: none;
  color: var(--cb-color-text-secondary);
  cursor: pointer;
}

.auth-visibility-toggle:hover,
.auth-visibility-toggle:focus-visible {
  color: var(--cb-color-ink);
}

.auth-visibility-toggle__icon {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}

.auth-visibility-toggle__slash {
  opacity: 0;
}

.auth-visibility-toggle.is-active .auth-visibility-toggle__slash {
  opacity: 1;
}

/* PRIMARY SUBMIT — reproduces .contact-flow__primary (css/contact-flow.css),
   the approved filled form-submit control already used in the guided
   Contact flow. Reproduced rather than shared/imported since that
   stylesheet is scoped to contact.html only — same convention already
   used across this codebase for page-specific stylesheets. The `--full`
   modifier stretches it to the same width as the inputs above it (brief:
   "the same width as the inputs... the clear final action of the form") —
   a width-only variant of the existing control, not a new button style. */
.login-form__submit {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  border: none;
  border-radius: var(--cb-radius-button);
  padding: 0.875em 1.5em;
  font-family: var(--cb-font-sans);
  font-weight: var(--cb-weight-semibold);
  font-size: var(--cb-text-body-size);
  background: var(--cb-color-ink);
  color: var(--cb-color-paper);
  text-decoration: none;
  cursor: pointer;
  transition: opacity 200ms var(--cb-ease-standard);
}

.login-form__submit--full {
  width: 100%;
}

.login-form__submit:hover {
  opacity: 0.85;
}

.login-form__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

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

.login-form__quiet-link {
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  font-family: var(--cb-font-sans);
  font-size: var(--cb-text-small-size);
  color: var(--cb-color-text-secondary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.login-form__quiet-link:hover,
.login-form__quiet-link:focus-visible {
  color: var(--cb-color-ink);
}

/* Status line — the frontend-prototype disclosure shown after a demo
   submit succeeds validation (brief: "must NOT claim successful
   authentication"). Plain text, not a banner/toast. */
.login-form__status {
  margin: 0;
  font-size: var(--cb-text-small-size);
  line-height: 1.5;
  color: var(--cb-color-text-secondary);
}

.login-panel-frame__switch {
  margin: var(--cb-space-4) 0 0;
  font-size: var(--cb-text-small-size);
  color: var(--cb-color-text-secondary);
}

.login-panel-frame__switch .login-form__quiet-link {
  margin-left: 0.35em;
}

/* PASSWORD STEP BLOCK — collapsed (max-height:0) in the email step,
   expanded once js/core-login.js's setAuthStep("password") adds .is-visible.
   max-height/opacity, not `hidden`, so the reveal can actually transition;
   the password input's own `disabled` attribute (toggled alongside this,
   in login.js) is what excludes it from constraint validation while
   collapsed — this class controls only the visual transition. Duration
   tokens are already zeroed under prefers-reduced-motion (tokens.css), so
   this is reduced-motion-safe with no extra media query here. */
.auth-password-block {
  display: flex;
  flex-direction: column;
  gap: var(--cb-space-4);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  /* .login-form's own flex `gap` still applies above a collapsed
     (max-height:0) flex child — this negative top margin cancels just
     that one contribution so a collapsed step block takes up no visual
     space (margin-top only, not margin-block: flex item margins don't
     collapse into each other the way block margins do, so negating both
     top AND bottom on multiple stacked collapsed siblings over-cancels —
     confirmed empirically when three collapsed blocks compounded into a
     visible overlap once margin-block was tried). */
  margin-top: calc(var(--cb-space-4) * -1);
  transition:
    max-height var(--cb-duration-base) var(--cb-ease-standard),
    opacity var(--cb-duration-fast) var(--cb-ease-standard),
    margin-top var(--cb-duration-base) var(--cb-ease-standard);
}

.auth-password-block.is-visible {
  max-height: 16rem;
  opacity: 1;
  margin-top: 0;
}

.auth-password-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cb-space-3);
  flex-wrap: wrap;
}

.auth-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--cb-text-small-size);
  color: var(--cb-color-text-secondary);
  cursor: pointer;
}

.auth-checkbox input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--cb-color-ink);
  cursor: pointer;
}

/* PROVIDER SIGN-IN (Google/Microsoft) — restrained text-only buttons, no
   third-party brand marks. Same outlined-secondary treatment as
   .login-form__submit--secondary below, stacked full-width like every
   other primary action on this page — never five equally loud buttons:
   these two sit ABOVE the email field as the lightest-effort path, the
   divider below them hands off cleanly to the email flow. */
.auth-providers {
  display: flex;
  flex-direction: column;
  gap: var(--cb-space-3);
  margin-bottom: var(--cb-space-4);
}

.auth-provider-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: var(--cb-border-width) solid var(--cb-color-line);
  border-radius: var(--cb-radius-button);
  padding: 0.875em 1.5em;
  font-family: var(--cb-font-sans);
  font-weight: var(--cb-weight-medium);
  font-size: var(--cb-text-body-size);
  background: var(--cb-color-paper);
  color: var(--cb-color-ink);
  cursor: pointer;
  transition: background-color 200ms var(--cb-ease-standard);
}

.auth-provider-btn:hover {
  background: var(--cb-color-line);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--cb-space-3);
  color: var(--cb-color-text-secondary);
  font-size: var(--cb-text-small-size);
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: var(--cb-border-width);
  background: var(--cb-color-line);
}

/* Secondary submit — same shape as .login-form__submit, outline instead
   of filled, for a second-priority action sitting directly beneath a
   primary one (e.g. "Use password" beneath "Email me a sign-in code"). */
.login-form__submit--secondary {
  background: var(--cb-color-paper);
  color: var(--cb-color-ink);
  border: var(--cb-border-width) solid var(--cb-color-line);
}

.login-form__submit--secondary:hover {
  opacity: 1;
  background: var(--cb-color-line);
}

/* CHOOSE-METHOD / OTP STEP BLOCKS — same collapse mechanics as
   .auth-password-block above (max-height/opacity, not `hidden`, so the
   reveal transitions; `inert` blocks interaction while collapsed). */
.auth-method-block,
.auth-otp-block {
  display: flex;
  flex-direction: column;
  gap: var(--cb-space-3);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  /* See .auth-password-block's own comment above — same flex-gap
     cancellation (margin-top only), now load-bearing for real since the
     email/choose/otp steps stack THREE of these collapsed blocks at
     once. */
  margin-top: calc(var(--cb-space-4) * -1);
  transition:
    max-height var(--cb-duration-base) var(--cb-ease-standard),
    opacity var(--cb-duration-fast) var(--cb-ease-standard),
    margin-top var(--cb-duration-base) var(--cb-ease-standard);
}

.auth-method-block.is-visible {
  max-height: 12rem;
  opacity: 1;
  margin-top: 0;
}

.auth-otp-block.is-visible {
  max-height: 24rem;
  opacity: 1;
  margin-top: 0;
}

.auth-otp-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cb-space-3);
  flex-wrap: wrap;
}

#auth-otp-code {
  letter-spacing: 0.3em;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.auth-passkey-btn {
  display: block;
  margin: var(--cb-space-5) auto 0;
  text-align: center;
}

/* INVITATION CONTEXT — a small nested read-only panel reusing the exact
   same Paper/Line/radius formula as .login-panel-frame itself (not a new
   card language, just the same bordered-panel pattern at a smaller
   scale). Values are populated by js/core-login.js from the real invitation
   payload (or, on localhost only, the #activate-demo preview data) — see
   that file's own comments. */
.invitation-context {
  margin: var(--cb-space-4) 0 0;
  padding: var(--cb-space-3) var(--cb-space-4);
  border: 1px solid var(--cb-color-line);
  border-radius: var(--cb-radius);
  display: flex;
  flex-direction: column;
  gap: var(--cb-space-2);
}

.invitation-context__row {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cb-space-3);
  font-size: var(--cb-text-small-size);
}

.invitation-context__label {
  color: var(--cb-color-text-secondary);
}

.invitation-context__value {
  font-weight: var(--cb-weight-medium);
  color: var(--cb-color-ink);
  text-align: right;
}

/* SUPPORT LINK — outside the bordered panel entirely (brief), centred
   beneath it, small Graphite text. */
.login-support {
  margin-top: var(--cb-space-5);
  max-width: 34rem;
  text-align: center;
  font-size: var(--cb-text-small-size);
  color: var(--cb-color-text-secondary);
}

.login-support__link {
  margin-left: 0.35em;
  font-size: var(--cb-text-small-size);
}

/* ---------------------------------------------------------------------
   FORGOT PASSWORD — typography/rhythm PROTOTYPE (this pass only).
   Every rule below is scoped to #auth-state-forgot specifically, so the
   shared .login-panel-frame__heading/__copy/.login-form rules that every
   OTHER auth state (login, check-inbox, reset-password, activate, etc.)
   still relies on are completely untouched — this state gets its own
   tuned values without becoming the new shared default yet. If this
   composition is approved, a later pass can promote it to the shared
   rules deliberately.
   --------------------------------------------------------------------- */

/* Motif -> H1 gap, pulled back substantially from an earlier, oversized
   pass (52px H1, 58px intro-to-form) — restrained/editorial, not
   landing-page-scale, inside a compact auth panel. */
#auth-state-forgot .login-panel-frame__heading {
  margin-top: 10px;
  /* Reuses the sitewide page-heading size/tracking tokens directly
     (32-40px, resolving to 40px at typical desktop widths — inside the
     38-42px target) rather than a bespoke display-size clamp. Still a
     real headline, not oversized. */
  font-size: var(--cb-text-page-heading-size);
  letter-spacing: var(--cb-text-page-heading-tracking);
  line-height: 1.1;
}

/* H1 -> supporting copy. Reuses --cb-text-body-size directly (16-17px —
   exactly the target range) instead of a larger bespoke size; only
   line-height is tightened from that token's own paragraph-tuned 1.7
   default. */
#auth-state-forgot .login-panel-frame__copy {
  margin-top: 18px;
  max-width: 26rem; /* keeps the 2-3 line wrap restrained rather than spanning the full panel width */
  margin-left: auto;
  margin-right: auto;
  font-size: var(--cb-text-body-size);
  font-weight: var(--cb-weight-regular);
  line-height: 1.55;
}

/* Intro group -> form: a deliberate but modest pause — connected, not a
   large display-style gap. #login-form-forgot's own id, not the shared
   .login-form class, so every other state's form keeps its existing
   spacing. */
#login-form-forgot {
  margin-top: 36px;
}

/* "Back to log in" reads as a quieter secondary action once it has its
   own breathing room from the form above it, rather than sitting flush
   against the submit button. */
#auth-state-forgot > .login-form__quiet-link {
  display: block;
  margin-top: 20px;
}

@media (max-width: 40rem) {
  #auth-state-forgot .login-panel-frame__heading {
    margin-top: 10px;
    font-size: clamp(1.75rem, 1.6rem + 1vw, 2rem); /* ~28-32px */
  }
  #auth-state-forgot .login-panel-frame__copy {
    margin-top: 16px;
    max-width: none;
  }
  #login-form-forgot {
    margin-top: 32px;
  }
  #auth-state-forgot > .login-form__quiet-link {
    margin-top: 16px;
  }
}