/*
 * login.css: the sign-in page (unit U08, DESIGN 6.1).
 * Split cover and form card: two columns from 960px (cover 55 percent), one
 * column below with the cover compressed and the steps kept as a compact row.
 *
 * Cover contrast: the field is the guarded accent fill and the text is the
 * guarded on-accent color, both written by theme-boot.js before first paint
 * (white or ink, at least 4.5:1, the same in both themes). The subtle gradient
 * is drawn in the text color inside an inverted layer, so it can only
 * push the field away from the text, never lower that contrast, whatever the
 * profile colors are. All cover text uses the full text color.
 *
 * Page classes only (login-*); shared components are used as they are.
 */

/* ---------- Frame ---------- */
.login {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); flex: 1 0 auto;
  min-height: 100vh; min-height: 100dvh;
}
.login-tools {
  display: flex; justify-content: flex-end; padding: var(--sp-2) var(--gutter) 0;
}
/* Beside the form column only once there is one; above the cover on narrower screens. */
@media (min-width: 960px) {
  .login-tools { position: absolute; top: var(--sp-3); right: var(--gutter); z-index: var(--z-sticky); padding: 0; }
}
/* Theme: System / Light / Dark, a labeled segmented control on a surface chip. */
.login-theme {
  display: inline-flex; align-items: center; gap: var(--sp-1); margin: 0; padding: var(--sp-1);
  border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); background: var(--c-surface);
  color: var(--c-ink-2); box-shadow: var(--e-1); font-size: var(--fs-small);
}
.login-theme[hidden] { display: none; }
.login-theme__label { padding: 0 var(--sp-2); color: var(--c-muted); font-weight: var(--fw-semibold); }
.login-theme__option {
  display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 32px; padding: 0 var(--sp-3);
  border: 0; border-radius: var(--r-pill); background: transparent; color: var(--c-ink-2); font: inherit; cursor: pointer;
}
.login-theme__option .icon { width: 16px; height: 16px; }
.login-theme__option:hover { background: var(--c-surface-2); color: var(--c-ink); }
.login-theme__option[aria-pressed="true"] { background: var(--c-accent); color: var(--c-on-accent); }
@media (max-width: 420px) {
  .login-theme__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .login-theme__option { padding: 0 var(--sp-2); }
}

/* ---------- Cover ---------- */
.login-cover {
  --login-field: var(--c-accent-light, var(--c-brand));
  --login-on-field: var(--c-on-accent-light, var(--c-on-accent));
  position: relative; isolation: isolate; display: flex; min-width: 0; overflow: hidden;
  background-color: var(--login-field); color: var(--login-on-field);
}

/* A quiet tonal field keeps the text clear and preserves the guarded contrast. */
.login-cover::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; color: var(--login-on-field); pointer-events: none;
  background: linear-gradient(155deg, transparent 10%, color-mix(in srgb, currentColor 24%, transparent));
  filter: invert(1);
}

.login-cover__inner {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-7);
  width: 100%; max-width: 46rem; padding: var(--sp-7) clamp(var(--sp-6), 5vw, var(--sp-8));
}
.login-lockup { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.login-lockup__logo {
  flex: none; width: auto; height: 40px; max-width: 8rem; padding: 3px; border-radius: var(--r-2);
  background: var(--c-surface); object-fit: contain;
}
.login-lockup__name { min-width: 0; font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: 1.3; overflow-wrap: anywhere; }

.login-cover__story { display: grid; justify-items: start; gap: var(--sp-4); max-width: 36rem; }
.login-cover__title {
  color: inherit; font-family: var(--font-serif); font-size: var(--fs-display); line-height: var(--lh-display);
  font-weight: var(--fw-display); letter-spacing: -0.01em; overflow-wrap: anywhere;
}
.login-cover__subtitle { max-width: 30em; font-family: var(--font-serif); font-size: var(--fs-deck); line-height: var(--lh-deck); }
.login-cover__data { display: grid; justify-items: start; gap: var(--sp-2); margin-top: var(--sp-2); }
.login-cover__note, .login-cover__synthetic { max-width: 34rem; font-size: var(--fs-ui); line-height: var(--lh-ui); }
.login-cover__synthetic strong { font-weight: var(--fw-bold); }

/* ---------- Read, Ask, Prove ---------- */
.login-steps__label {
  margin-bottom: var(--sp-3); font-size: var(--fs-label); line-height: var(--lh-label);
  font-weight: var(--fw-semibold); letter-spacing: var(--ls-label); text-transform: uppercase;
}
.login-steps__list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5);
  margin: 0; padding: var(--sp-4) 0 0; counter-reset: login-step;
}
.login-step { display: grid; align-content: start; gap: var(--sp-2); min-width: 0; counter-increment: login-step; }
.login-step__head { display: flex; align-items: center; gap: var(--sp-2); }
.login-step__head .icon { width: 22px; height: 22px; }
.login-step__num {
  display: inline-grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem;
  border: 1.5px solid currentColor; border-radius: 50%; font-size: var(--fs-small);
  font-weight: var(--fw-semibold); font-variant-numeric: lining-nums tabular-nums; line-height: 1;
}
.login-step__num::before { content: counter(login-step); }
.login-step__title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-semibold); }
.login-step__text { font-size: var(--fs-small); line-height: var(--lh-small); }

/* ---------- Form side ---------- */
.login-side { display: flex; flex-direction: column; min-width: 0; background: var(--c-canvas); }
.login-main {
  display: flex; flex: 1 0 auto; align-items: center; justify-content: center;
  padding: var(--sp-8) var(--gutter) var(--sp-6);
}
.login-card {
  width: min(100%, 27rem); padding: var(--sp-6); border: 1px solid var(--c-line); border-radius: var(--r-4);
  background: var(--c-surface); box-shadow: var(--e-2);
}
.login-card > * + * { margin-top: var(--sp-4); }
.login-card > .login-card__ready:empty { margin-top: 0; }
.login-card > .login-card__lead { margin-top: var(--sp-1); }
.login-card__title { font-size: var(--fs-h1); line-height: var(--lh-h1); }
.login-card__lead { color: var(--c-ink-2); font-size: var(--fs-ui); line-height: var(--lh-ui); }
.login-card__error-help { color: var(--c-ink-2); font-size: var(--fs-small); line-height: var(--lh-small); }
.login-card__error-text + .login-card__error-help { margin-top: var(--sp-1); }
.login-card .alert code { font-size: 0.9em; overflow-wrap: anywhere; }

.login-form { display: grid; gap: var(--sp-4); }
.login-secret { position: relative; }
.login-secret__input { padding-right: calc(var(--hit) + var(--sp-2)); }
.login-secret__toggle { position: absolute; top: 50%; right: 2px; transform: translateY(-50%); }
.login-secret__toggle:not([aria-pressed="true"]) .login-secret__eye-off,
.login-secret__toggle[aria-pressed="true"] .login-secret__eye { display: none; }
.login-caps { color: var(--c-watch-ink); font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: var(--lh-small); }
.login-caps:empty { display: none; }
.login-form__submit {
  min-height: calc(var(--control-h) + var(--sp-2)); margin-top: var(--sp-1);
  font-size: var(--fs-body); font-weight: var(--fw-semibold);
}

/* AI and privacy notice (templates/_ai_notice.html) */
.login-notice {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  color: var(--c-ink-2); font-size: var(--fs-small); line-height: var(--lh-small);
}
.login-notice .icon { flex: none; width: 16px; height: 16px; margin-top: 1px; }

/* ---------- Account help ---------- */
.login-request { display: grid; gap: var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--c-line); }
.login-request__title { font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: var(--fw-semibold); }
.login-request__help { color: var(--c-ink-2); font-size: var(--fs-small); line-height: var(--lh-small); }
.login-request__email { overflow-wrap: anywhere; }

.login-help { padding-top: var(--sp-3); border-top: 1px solid var(--c-line); }
.login-help__summary {
  display: flex; align-items: center; gap: var(--sp-2); min-height: var(--hit); border-radius: var(--r-1);
  color: var(--c-accent-ink); font-size: var(--fs-ui); font-weight: var(--fw-semibold); list-style: none;
}
.login-help__summary::-webkit-details-marker { display: none; }
.login-help__summary .icon { width: 18px; height: 18px; }
.login-help__summary:hover span { text-decoration: underline; text-underline-offset: 3px; }
.login-help__chevron { margin-left: auto; }
.login-help[open] .login-help__chevron { transform: rotate(180deg); }
.login-help__body {
  display: grid; gap: var(--sp-3); padding-top: var(--sp-3);
  color: var(--c-ink-2); font-size: var(--fs-small); line-height: 1.5;
}
.login-help__body code { color: var(--c-ink); font-size: 0.95em; overflow-wrap: anywhere; }
.login-help__list { display: grid; gap: var(--sp-1); margin: 0; padding-left: 1.1em; }
.login-code {
  display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-3);
  border: 1px solid var(--c-line); border-radius: var(--r-2); background: var(--c-surface-2);
}
.login-code .login-code__text { flex: 1 1 auto; min-width: 0; padding-block: 6px; color: var(--c-ink); font-size: var(--fs-small); line-height: 1.5; }

.login-foot {
  padding: var(--sp-4) var(--gutter) max(var(--sp-4), env(safe-area-inset-bottom));
  color: var(--c-muted); font-size: var(--fs-small); line-height: var(--lh-small);
}
.login-foot__line { display: flex; align-items: flex-start; justify-content: center; gap: var(--sp-2); text-align: center; }
.login-foot__line .icon { width: 16px; height: 16px; margin-top: 1px; }

/* ---------- Desktop: split cover ---------- */
@media (min-width: 960px) {
  .login { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); }
  .login-cover { justify-content: center; }
}
@media (min-width: 1280px) {
  .login-cover__inner { padding-block: var(--sp-8); }
}

/* ---------- Tablet and phone: compressed cover ---------- */
@media (max-width: 959.98px) {
  .login-cover__inner { gap: var(--sp-5); max-width: none; padding: var(--sp-5) var(--gutter) var(--sp-6); }
  .login-lockup { padding-right: calc(var(--hit) + var(--sp-5)); }
  .login-cover__story { gap: var(--sp-3); max-width: 40rem; }
  .login-main { padding: var(--sp-6) var(--gutter); }
}
@media (max-width: 599.98px) {
  .login-cover__title { font-size: clamp(1.875rem, 1.1rem + 4vw, 2.5rem); }
  .login-cover__subtitle { font-size: var(--fs-body); line-height: var(--lh-ui); }
  .login-lockup__logo { height: 32px; }
  .login-lockup__name { font-size: var(--fs-ui); }
  .login-steps__label { margin-bottom: var(--sp-2); }
  .login-steps__list { gap: var(--sp-2); padding-top: var(--sp-3); }
  .login-step { justify-items: start; gap: var(--sp-1); }
  .login-step__head .icon { width: 18px; height: 18px; }
  .login-step__num { width: 1.5rem; height: 1.5rem; }
  /* The one-line descriptions stay available to assistive technology. */
  .login-step__text {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .login-main { padding: var(--sp-5) var(--gutter) var(--sp-4); }
  .login-card { padding: var(--sp-5) var(--sp-4); border-radius: var(--r-3); }
}

/* ---------- Motion: one short fade on load ---------- */
@media (prefers-reduced-motion: no-preference) {
  .login-cover__inner, .login-card { animation: login-fade var(--dur-2) var(--ease-out) both; }
  .login-help__chevron { transition: transform var(--dur-2) var(--ease-out); }
}
@keyframes login-fade { from { opacity: 0; } }

/* ---------- Forced colors ---------- */
@media (forced-colors: active) {
  .login-cover {
    border-right: 1px solid CanvasText; border-bottom: 1px solid CanvasText; background: Canvas; color: CanvasText;
  }
  .login-cover::before { display: none; }
  .login-card { border-color: CanvasText; }
  .login-theme { border-color: ButtonText; }
}

/* ---------- Print ---------- */
@media print {
  .login { display: block; min-height: 0; }
  .login-tools, .login-help, .login-card__ready, .login-form__submit { display: none !important; }
  .login-cover { display: block; background: none; color: var(--c-ink); }
  .login-cover::before { display: none; }
  .login-cover__inner { padding: 0 0 var(--sp-5); }
  .login-main { display: block; padding: 0; }
  .login-card { width: auto; padding: 0; border: 0; }
}