/*
 * auth.stratamize.com pages. Loaded after fonts/dm-sans.css,
 * stratamize-tokens.css and stratamize-core.css (all verbatim copies of the
 * stratamize.com brand spine; see README "Brand"). This file only composes:
 * every colour, size and space is a var(--stz-*) role, nothing defines a
 * --stz-* variable, and component-local values use --_name.
 *
 * Layout: the agent portal's public split. Wide screens: crimson story panel
 * left, wordmark + white form card right. Phones (< 992px): one column,
 * wordmark, card, then the story as a band. No horizontal overflow at 320px.
 */

*, *::before, *::after { box-sizing: border-box; }

html, body { overflow-x: hidden; }

.auth-body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background-color: var(--stz-surface-canvas);
  color: var(--stz-text-muted);
  font-family: var(--stz-font-body);
  font-size: var(--stz-size-small);
  line-height: var(--stz-lh-label);
}

/* ── Wordmark: lowercase DM Sans 700, the underscore is the crimson dash ── */

.auth-wordmark {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  color: var(--stz-text);
  font-family: var(--stz-font-display);
  font-size: var(--stz-size-title-lg);
  font-weight: var(--stz-weight-bold);
  letter-spacing: var(--stz-tracking-tight);
  line-height: 1;
  text-decoration: none;
}
.auth-wordmark:hover { color: var(--stz-text); }
.auth-wordmark .wordmark-dash { color: var(--stz-dash-color); }

/* ── Split layout ─────────────────────────────────────────────────────── */

.auth-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "story header"
    "story main";
  min-height: 100vh;
  min-height: 100dvh;
}

.auth-header {
  grid-area: header;
  display: flex;
  align-items: center;
  padding: var(--stz-space-6) var(--stz-space-8) 0;
}

.auth-main {
  grid-area: main;
  display: grid;
  place-items: center;
  padding: var(--stz-space-6) var(--stz-space-8) var(--stz-space-10);
  outline: none;
}

.auth-card {
  width: 100%;
  max-width: var(--stz-auth-card-w);
  padding: var(--stz-space-8);
  border: var(--stz-border-width-hairline) solid var(--stz-border-hairline);
  border-radius: var(--stz-radius-card);
  background-color: var(--stz-surface-panel);
  box-shadow: var(--stz-shadow-card);
  overflow-wrap: anywhere;
}

/* The crimson story panel: the brand field and its one legal foreground. */
.auth-story {
  grid-area: story;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--stz-space-8);
  padding: var(--stz-space-10) var(--stz-space-8);
  background-color: var(--stz-surface-brand);
  color: var(--stz-on-surface-brand);
  --_focus-ring: var(--stz-focus-ring-on-brand);
}
.auth-story p { margin: 0; color: var(--stz-on-surface-brand); }
.auth-story__numeral {
  color: transparent;
  -webkit-text-stroke: var(--stz-border-width-hairline) var(--stz-on-surface-brand);
  font-family: var(--stz-font-display);
  font-size: var(--stz-size-numeral);
  font-weight: var(--stz-weight-bold);
  line-height: 1;
  opacity: 0.6;
}
.auth-story__title {
  margin: 0 0 var(--stz-space-4);
  color: var(--stz-on-surface-brand);
  font-size: var(--stz-size-h3);
  font-weight: var(--stz-weight-medium);
  line-height: var(--stz-lh-h3);
  letter-spacing: var(--stz-tracking-h2);
}
.auth-story__body p { font-size: var(--stz-size-body-lg); line-height: var(--stz-lh-lead); }
.auth-story__foot {
  font-size: var(--stz-size-label);
  letter-spacing: var(--stz-tracking-overline);
  text-transform: uppercase;
}

/* ── Card content ─────────────────────────────────────────────────────── */

.auth-eyebrow {
  display: flex;
  align-items: center;
  margin: 0 0 var(--stz-space-3);
  color: var(--stz-text-muted);
  font-size: var(--stz-size-micro);
  font-weight: var(--stz-weight-medium);
  letter-spacing: var(--stz-tracking-overline);
  line-height: var(--stz-lh-label);
  text-transform: uppercase;
}
.auth-eyebrow::before {
  content: "";
  flex: none;
  width: var(--stz-dash-w);
  height: var(--stz-dash-h);
  margin-right: var(--stz-dash-gap);
  background-color: var(--stz-dash-color);
}

.auth-card h1,
.auth-app h1 {
  margin: 0 0 var(--stz-space-3);
  color: var(--stz-text);
  font-size: var(--stz-size-h5);
  font-weight: var(--stz-weight-medium);
  line-height: var(--stz-lh-h5);
  letter-spacing: var(--stz-tracking-tight);
}

.auth-lead { margin: 0 0 var(--stz-space-5); color: var(--stz-text-muted); }

.auth-form { display: grid; gap: var(--stz-space-1); margin-bottom: var(--stz-space-4); }
.auth-form .stz-field { margin-bottom: var(--stz-space-3); }

.auth-code {
  font-family: var(--stz-font-utility);
  font-size: var(--stz-size-title);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--stz-tracking-ui);
  text-align: center;
}
.auth-code--recovery { font-size: var(--stz-size-body-sm); }

.auth-check {
  display: flex;
  align-items: center;
  gap: var(--stz-space-2);
  min-height: var(--stz-control-h-sm);
  margin-bottom: var(--stz-space-3);
  color: var(--stz-text);
  font-size: var(--stz-size-label);
  cursor: pointer;
}
.auth-check input {
  flex: none;
  width: var(--stz-icon-sm);
  height: var(--stz-icon-sm);
  margin: 0;
  accent-color: var(--stz-accent);
}

/* Buttons are the core .stz-btn; long labels may wrap on a narrow phone. */
.auth-body .stz-btn { white-space: normal; min-height: var(--stz-control-h-md); }
.auth-google { gap: var(--stz-space-2); background-color: var(--stz-surface-panel); }
.auth-google .auth-google-icon { flex: none; }

.auth-foot {
  margin: var(--stz-space-3) 0 0;
  color: var(--stz-text-muted);
  font-size: var(--stz-size-label);
  text-align: center;
}
.auth-foot a,
.auth-panel a:not(.stz-btn),
.auth-app > .auth-foot a {
  color: var(--stz-text);
  text-decoration: underline;
  text-decoration-color: var(--stz-dash-color);
  text-underline-offset: var(--stz-focus-offset);
}
.auth-foot a:hover { color: var(--stz-link-hover); }

/* Alerts: meaning carried by text and a bar, not colour alone. */
.auth-alert {
  margin: 0 0 var(--stz-space-4);
  padding: var(--stz-space-3) var(--stz-space-4);
  border-left: var(--stz-dash-h) solid var(--stz-status-danger);
  border-radius: var(--stz-radius-control);
  background-color: var(--stz-status-danger-subtle);
  color: var(--stz-text);
  font-size: var(--stz-size-label);
}
.auth-alert--info { border-left-color: var(--stz-status-info); background-color: var(--stz-status-info-subtle); }
.auth-alert--warning { border-left-color: var(--stz-status-warning); background-color: var(--stz-status-warning-subtle); }

/* Enrollment */
.auth-steps { margin: 0 0 var(--stz-space-4); padding-left: var(--stz-space-5); color: var(--stz-text-muted); }
.auth-steps li + li { margin-top: var(--stz-space-1); }
.auth-qr {
  display: flex;
  justify-content: center;
  margin: 0 0 var(--stz-space-4);
  padding: var(--stz-space-3);
  border: var(--stz-border-width-hairline) solid var(--stz-border-hairline);
  border-radius: var(--stz-radius-card);
  background-color: var(--stz-white);
}
.auth-qr img { display: block; width: 200px; max-width: 100%; height: auto; }
.auth-secret {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--stz-space-2);
  margin: 0 0 var(--stz-space-4);
  padding: var(--stz-space-2) var(--stz-space-3);
  border-radius: var(--stz-radius-control);
  background-color: var(--stz-surface-sunken);
}
.auth-secret__label {
  font-size: var(--stz-size-micro);
  letter-spacing: var(--stz-tracking-overline);
  text-transform: uppercase;
}
.auth-secret code,
.auth-codes code {
  color: var(--stz-text);
  font-family: var(--stz-font-utility);
  font-size: var(--stz-size-small);
  overflow-wrap: anywhere;
}

/* Recovery codes */
.auth-codes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--stz-space-2);
  margin: 0 0 var(--stz-space-5);
  padding: var(--stz-space-3);
  border-radius: var(--stz-radius-control);
  background-color: var(--stz-surface-sunken);
  list-style: none;
}
.auth-codes li { text-align: center; }

/* ── Full-width pages: signed-in and account security ────────────────── */

.auth-app { min-height: 100vh; min-height: 100dvh; }
.auth-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--stz-space-4) var(--stz-space-8);
  border-bottom: var(--stz-border-width-strong) solid var(--stz-surface-brand);
  background-color: var(--stz-surface-panel);
}
.auth-app__main {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: var(--stz-space-8) var(--stz-space-8) var(--stz-space-12);
  outline: none;
  overflow-wrap: anywhere;
}
.auth-mast {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--stz-space-4);
  margin-bottom: var(--stz-space-6);
}
.auth-mast__text { min-width: 0; }
.auth-panel {
  margin-bottom: var(--stz-space-5);
  padding: var(--stz-space-6);
  border: var(--stz-border-width-hairline) solid var(--stz-border-hairline);
  border-radius: var(--stz-radius-card);
  background-color: var(--stz-surface-panel);
}
.auth-panel h2 {
  margin: 0 0 var(--stz-space-3);
  color: var(--stz-text);
  font-size: var(--stz-size-title);
  font-weight: var(--stz-weight-medium);
  line-height: var(--stz-lh-label);
  letter-spacing: var(--stz-tracking-normal);
}
.auth-panel p { margin: 0 0 var(--stz-space-3); }
.auth-panel form { margin: 0 0 var(--stz-space-3); }
.auth-hint { color: var(--stz-text-muted); font-size: var(--stz-size-caption); }

/* position: relative keeps the visually-hidden column label (absolute) inside the scroller. */
.auth-table-wrap { position: relative; max-width: 100%; margin-bottom: var(--stz-space-3); overflow-x: auto; }
.auth-table { width: 100%; border-collapse: collapse; font-size: var(--stz-size-label); }
.auth-table th,
.auth-table td {
  padding: var(--stz-space-2) var(--stz-space-3);
  border-bottom: var(--stz-border-width-hairline) solid var(--stz-border-hairline);
  text-align: left;
  vertical-align: middle;
  overflow-wrap: normal;
}
.auth-table th { color: var(--stz-text); font-weight: var(--stz-weight-medium); white-space: nowrap; }
.auth-table form { margin: 0; }

.auth-pill { text-transform: none; }

/* ── Phones and narrow tablets: one column, story below ──────────────── */

@media (max-width: 991.98px) {
  .auth-split {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "header"
      "main"
      "story";
  }
  .auth-header { justify-content: center; padding: var(--stz-space-5) var(--stz-space-4) 0; }
  .auth-main { place-items: start center; padding: var(--stz-space-5) var(--stz-space-4) var(--stz-space-8); }
  .auth-story { gap: var(--stz-space-3); padding: var(--stz-space-6) var(--stz-space-4); }
  .auth-story__numeral { display: none; }
  .auth-story__title { font-size: var(--stz-size-h6); line-height: var(--stz-lh-h6); letter-spacing: var(--stz-tracking-tight); }
  .auth-story__body p { font-size: var(--stz-size-small); line-height: var(--stz-lh-label); }
  .auth-topbar { padding: var(--stz-space-3) var(--stz-space-4); }
  .auth-app__main { padding: var(--stz-space-6) var(--stz-space-4) var(--stz-space-10); }
}

@media (max-width: 479.98px) {
  .auth-card { padding: var(--stz-space-5) var(--stz-space-4); }
  .auth-card h1,
  .auth-app h1 { font-size: var(--stz-size-h6); line-height: var(--stz-lh-h6); }
  .auth-panel { padding: var(--stz-space-4); }
}