/**
 * base.css - Universal Layout & Component Styles
 * Shared by all brands and OAuth2 screens (Login, Select Tenant, Consent, Error).
 * STRICT CONSTRAINT: All colors, typography, radii, shadows, and ordering are
 * driven purely by CSS custom properties (var(--...)). Zero brand-specific overrides.
 */

/* ==========================================================================
   1. CSS Reset & Base Elements
   ========================================================================== */

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

html {
  font-size: 14px;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text-primary);
  background-color: var(--color-bg-page);
  min-height: 100vh;
}

a {
  color: var(--color-text-link);
  text-decoration: none;
  transition: color 0.15s ease-in-out, text-decoration 0.15s ease-in-out;
}

a:hover {
  color: var(--color-text-link-hover);
  text-decoration: underline;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

img, svg {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
}

/* ==========================================================================
   2. Layout Containers
   ========================================================================== */

.auth-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-page-gradient, var(--color-bg-page));
  background-image: var(--page-pattern, none);
  background-size: var(--page-pattern-size, auto);
  position: relative;
  overflow-x: hidden;
}

.auth-container {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* Ambient brand glows behind every screen (layout.html). Hidden unless the brand sets
   --ambient-display; three layers, each a radial gradient that drifts on `transform` only, so
   the compositor animates it and the page never repaints while it loads. */
.auth-ambient {
  display: var(--ambient-display, none);
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.auth-glow {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

.auth-glow-a {
  width: var(--glow-a-size, 720px);
  height: var(--glow-a-size, 720px);
  inset: var(--glow-a-inset, 130px -160px auto auto);
  background: radial-gradient(circle, var(--glow-a-color, transparent) 0%, transparent 62%);
  animation: auth-glow-a 12s ease-in-out infinite alternate;
}

.auth-glow-b {
  width: var(--glow-b-size, 300px);
  height: var(--glow-b-size, 300px);
  inset: var(--glow-b-inset, auto auto -40px 50%);
  background: radial-gradient(circle, var(--glow-b-color, transparent) 0%, transparent 62%);
  animation: auth-glow-b 9s ease-in-out infinite alternate;
  animation-delay: -3s;
}

.auth-glow-c {
  width: var(--glow-c-size, 360px);
  height: var(--glow-c-size, 360px);
  inset: var(--glow-c-inset, -140px auto auto 44%);
  background: radial-gradient(circle, var(--glow-c-color, transparent) 0%, transparent 62%);
  animation: auth-glow-c 14s ease-in-out infinite alternate;
  animation-delay: -6s;
}

@keyframes auth-glow-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-140px, 90px, 0) scale(1.18); }
}

@keyframes auth-glow-b {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-90px, -70px, 0) scale(1.25); }
}

@keyframes auth-glow-c {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(110px, 130px, 0) scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
  .auth-glow {
    animation: none;
  }
}

/* Step-to-step transition (login -> tenant -> consent). Same-origin navigations crossfade the
   page root while the ambient glows and the brand wordmark, which sit in the same place on every
   step, are matched by name and stay put: the form fades out and the next step fades in "in
   place". Browsers without cross-document view transitions simply navigate. */
@view-transition {
  navigation: auto;
}

/* The page root only carries the (identical) background on both steps, so its crossfade is
   invisible; the visible motion is on the two step columns, which get their own named groups:
   the outgoing login column lifts and fades, the incoming tenant column rises and fades in. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.2s;
}

/* The transition overlay and the canvas behind the document are painted in the page colour.
   Both default to the browser's white: any pixel a snapshot does not cover for a frame (WebKit
   was measured placing the new snapshot ~70px to the right for one frame) flashed white over a
   dark page. */
html {
  background-color: var(--color-bg-page);
}

::view-transition {
  background-color: var(--color-bg-page);
}

.auth-ambient {
  view-transition-name: auth-ambient;
}

.auth-brand-above {
  view-transition-name: auth-brand;
}

.auth-page-step .auth-wrapper {
  view-transition-name: auth-step;
}

.select-company-content {
  view-transition-name: auth-step-tenant;
}

::view-transition-old(auth-step) {
  animation: auth-step-out var(--step-out-duration, 0.3s) ease-in both;
}

::view-transition-new(auth-step-tenant) {
  animation: auth-step-in var(--step-in-duration, 0.5s) ease-out both;
  animation-delay: var(--step-in-delay, 0.15s);
}

@keyframes auth-step-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-16px); }
}

@keyframes auth-step-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Tenant rows enter one after another (select-tenant.html sets --row-index per row) — the
   reveal also works where cross-document view transitions are unsupported. */
.company-item-label {
  animation: auth-row-in 0.45s ease-out both;
  animation-delay: calc(var(--step-in-delay, 0.15s) + var(--row-index, 0) * 60ms);
}

@keyframes auth-row-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*),
  .company-item-label {
    animation: none !important;
  }
}

/* Stacked action buttons (device confirmation) */
.auth-form-actions {
  display: flex;
  flex-direction: column;
  gap: var(--form-actions-gap, 0.5rem);
}

/* While the credentials POST is in flight the form fades (login.html adds the class on submit),
   so the click is acknowledged before the server answers and the step transition takes over. */
.auth-form {
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.auth-form.is-submitting {
  opacity: 0.3;
  transform: translateY(-4px);
  pointer-events: none;
}

/* Step screens (body.auth-page-step: login, device confirmation): a brand may drop the card and left-align the
   column (Syrix "editorial" login). Defaults reproduce the carded, centered layout. */
.auth-page-step .auth-container {
  justify-content: var(--login-justify, center);
  align-items: var(--login-container-align, center);
  padding: var(--login-container-padding, 2rem 1rem);
}

.auth-page-step .auth-wrapper {
  align-items: var(--login-wrapper-align, center);
  max-width: var(--login-max-width, var(--card-max-width, 460px));
  margin: var(--login-wrapper-margin, 0 auto);
}

.auth-page-step .auth-brand-above {
  margin-top: var(--login-brand-margin-top, 0);
}

.auth-page-step .auth-card {
  background-color: var(--login-card-bg, var(--color-bg-card));
  border-color: var(--login-card-border, var(--color-border-default));
  border-radius: var(--login-card-radius, var(--radius-card, 8px));
  box-shadow: var(--login-card-shadow, var(--shadow-card));
  padding: var(--login-card-padding, var(--card-padding, 2rem));
  margin-bottom: var(--login-card-margin-bottom, 0);
}

.auth-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--card-max-width, 460px);
  margin: 0 auto;
  z-index: 10;
}

/* Brand Display Above Card (Syrix Style) */
.auth-brand-above {
  display: var(--logo-above-display, none);
  flex-direction: var(--brand-above-direction, column);
  align-items: center;
  justify-content: var(--brand-above-justify, center);
  gap: var(--brand-above-gap, 0);
  margin-bottom: var(--brand-above-margin, 1.5rem);
  text-align: center;
}

.brand-above-logo {
  width: var(--brand-above-logo-size, 44px);
  height: var(--brand-above-logo-size, 44px);
  margin-bottom: var(--brand-above-logo-margin, 0.5rem);
  border-radius: var(--brand-above-logo-radius, 0);
  object-fit: contain;
}

.brand-above-wordmark {
  font-size: var(--brand-wordmark-size, 1.5rem);
  font-weight: var(--brand-wordmark-weight, 800);
  letter-spacing: var(--brand-wordmark-tracking, -0.02em);
  background: var(--brand-wordmark-gradient, none);
  -webkit-background-clip: text;
  background-clip: text;
  /* A gradient wordmark needs `transparent` here or the solid colour paints over the gradient */
  color: var(--brand-wordmark-color, var(--brand-title-color, var(--color-text-primary)));
  display: inline-block;
}

/* Main Card */
.auth-card {
  width: 100%;
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-card, 8px);
  box-shadow: var(--shadow-card);
  padding: var(--card-padding, 2rem);
  position: relative;
}

/* ==========================================================================
   3. Card Header
   ========================================================================== */

.auth-card-header {
  margin-bottom: var(--card-header-margin, 1.5rem);
  text-align: var(--card-header-align, left);
}

.auth-card-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.auth-card-header-text {
  flex: 1;
}

/* Brand Display Inside Card Header (XCORP Style) */
.brand-logo-inside {
  display: var(--logo-inside-display, flex);
  align-items: center;
  justify-content: flex-end;
}

.brand-logo-inside img {
  height: 2.25rem;
  width: auto;
}

.auth-title {
  font-size: var(--auth-title-size, 1.75rem);
  font-weight: var(--auth-title-weight, 700);
  letter-spacing: var(--auth-title-tracking, normal);
  color: var(--brand-title-color, var(--color-text-primary));
  line-height: var(--auth-title-line-height, 1.25);
  margin-bottom: var(--auth-title-margin, 0.35rem);
}

.auth-subtitle {
  font-size: var(--auth-subtitle-size, 0.925rem);
  line-height: var(--auth-subtitle-line-height, 1.5);
  color: var(--color-text-secondary);
}

.client-app-badge {
  display: var(--client-badge-display, inline-flex);
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-sm, 4px);
  background-color: var(--color-bg-subtle);
  border: 1px solid var(--color-border-subtle);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.client-app-badge .client-icon {
  width: 14px;
  height: 14px;
  color: var(--color-primary);
}

/* ==========================================================================
   4. Card Body & Dynamic Ordering
   ========================================================================== */

.auth-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--card-body-gap, 1.25rem);
}

.auth-form-section {
  order: var(--form-order, 1);
  display: flex;
  flex-direction: column;
}

.auth-divider {
  order: var(--divider-order, 2);
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--color-text-tertiary);
  font-size: var(--divider-font-size, 0.825rem);
  text-transform: var(--divider-transform, lowercase);
  margin: var(--divider-margin, 0.25rem 0);
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--color-border-default);
}

.auth-divider span {
  padding: 0 var(--divider-gap, 0.75rem);
  color: var(--color-text-tertiary);
}

.auth-social-section {
  order: var(--social-order, 3);
  display: flex;
  flex-direction: column;
  gap: max(0.75rem, calc(var(--btn-google-height, var(--btn-height, 2.75rem)) * 0.1));
}

/* ==========================================================================
   5. Form Controls & Inputs
   ========================================================================== */

.form-group {
  margin-bottom: var(--form-group-gap, 1.15rem);
  display: flex;
  flex-direction: column;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--label-gap, 0.4rem);
}

.form-label {
  font-size: var(--label-size, 0.875rem);
  font-weight: var(--label-weight, 600);
  color: var(--label-color, var(--color-text-primary));
}

/* "Forgot password?" sits on the password label row (same place as the FE login) */
.forgot-link {
  font-size: var(--forgot-link-size, 0.875rem);
  font-weight: var(--forgot-link-weight, 500);
}

.form-required {
  color: var(--color-error);
  margin-left: 2px;
  font-weight: bold;
}

.form-control-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.form-input {
  width: 100%;
  height: var(--input-height, 2.75rem);
  padding: 0.5rem var(--input-padding-x, 0.875rem);
  font-family: inherit;
  font-size: var(--input-font-size, 0.95rem);
  line-height: 1.5;
  color: var(--color-text-primary);
  background-color: var(--color-bg-input);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-input, 4px);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.form-control-wrapper.has-leading-icon .form-input {
  padding-left: var(--input-leading-padding, 2.6rem);
}

.form-control-wrapper.has-trailing-icon .form-input {
  padding-right: var(--input-trailing-padding, 2.6rem);
}

.form-input::placeholder {
  color: var(--color-text-tertiary);
  opacity: 0.8;
}

.form-input:hover:not(:focus):not(:disabled) {
  border-color: var(--color-border-hover, var(--color-border-secondary));
}

.form-input:focus {
  outline: none;
  border-color: var(--color-border-focus);
  background-color: var(--color-bg-input-focus, var(--color-bg-input));
  box-shadow: var(--input-focus-shadow, var(--shadow-focus));
}

.form-input.is-invalid,
.form-input[aria-invalid="true"] {
  border-color: var(--color-border-error);
}

.form-input:disabled {
  background-color: var(--color-bg-disabled);
  color: var(--color-text-disabled);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Input Icons */
.input-icon-leading,
.input-icon-trailing {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
  pointer-events: none;
}

.input-icon-leading {
  left: var(--input-icon-left, 0.875rem);
}

.input-icon-trailing {
  right: var(--input-icon-right, 0.875rem);
}

.input-icon-leading svg,
.input-icon-trailing svg {
  width: var(--input-icon-size, 18px);
  height: var(--input-icon-size, 18px);
  stroke-width: var(--input-icon-stroke, 2);
}

/* Password Visibility Toggle Button */
.password-toggle-btn {
  background: transparent;
  border: none;
  padding: 0.35rem;
  color: var(--color-text-tertiary);
  cursor: pointer;
  pointer-events: auto;
  border-radius: var(--radius-xs, 2px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
}

.password-toggle-btn:hover {
  color: var(--color-text-primary);
}

/* Only one eye at a time: the toggle script flips these two, so the "hidden" glyph starts hidden */
.password-toggle-btn .eye-off-icon {
  display: none;
}

.password-toggle-btn:focus-visible {
  outline: 2px solid var(--color-primary);
}

/* Submit button spacing below the last field */
.auth-form > .btn-primary {
  margin-top: var(--submit-margin-top, 0);
}

.form-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  color: var(--color-text-secondary);
  user-select: none;
  font-size: 0.875rem;
}

.form-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-xs, 2px);
  background-color: var(--color-bg-input);
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.form-checkbox::before {
  content: "";
  width: 9px;
  height: 9px;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--color-text-inverse);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.form-checkbox:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.form-checkbox:checked::before {
  transform: scale(1);
}

.form-checkbox:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ==========================================================================
   6. Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: var(--btn-height, 2.75rem);
  padding: 0 1.25rem;
  font-family: inherit;
  font-size: var(--btn-font-size, 0.95rem);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  border-radius: var(--radius-button, 4px);
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
  text-decoration: none !important;
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn-block {
  width: 100%;
}

/* Primary Button */
.btn-primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-border);
  box-shadow: var(--btn-primary-shadow);
}

.btn-primary:hover:not(:disabled) {
  background-color: var(--btn-primary-hover-bg);
  color: var(--btn-primary-text);
}

.btn-primary:active:not(:disabled) {
  background-color: var(--btn-primary-active-bg);
}

/* Secondary Button */
.btn-secondary {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border-color: var(--btn-secondary-border);
}

.btn-secondary:hover:not(:disabled) {
  background-color: var(--btn-secondary-hover-bg);
  color: var(--btn-secondary-hover-text, var(--btn-secondary-text));
  border-color: var(--btn-secondary-hover-border, var(--btn-secondary-border));
}

/* Federated provider buttons: shared structure here, per-provider colors under btn-<style token> */
.btn-federated {
  font-weight: 500;
}

.federated-provider-icon {
  width: var(--federated-provider-icon-size, 18px);
  height: var(--federated-provider-icon-size, 18px);
  flex-shrink: 0;
}

/* The title copies Apple's 43% so the stacked providers read alike (product choice over Google's ~35%
   spec); Google forbids resizing the G logo, so the icon keeps its fixed size. */
.btn-google {
  height: var(--btn-google-height, var(--btn-height, 2.75rem));
  font-size: calc(var(--btn-google-height, var(--btn-height, 2.75rem)) * 0.43);
  background-color: var(--btn-google-bg);
  color: var(--btn-google-text);
  border-color: var(--btn-google-border);
  box-shadow: var(--btn-google-shadow);
  font-weight: var(--btn-google-weight, 500);
}

.btn-google:hover:not(:disabled) {
  background-color: var(--btn-google-hover-bg);
  color: var(--btn-google-text);
}

/* Apple's guidelines fix this button: black or white only, Apple's own logo artwork at full height,
   hover changes the bezel (shadow) never the fill, and the title keeps the system ~43% of the
   height -- Google's title follows this size, never the reverse. */
.btn-apple {
  height: var(--btn-google-height, var(--btn-height, 2.75rem));
  font-size: calc(var(--btn-google-height, var(--btn-height, 2.75rem)) * 0.43);
  gap: 0;
  background-color: var(--btn-apple-bg);
  color: var(--btn-apple-text);
  border-color: var(--btn-apple-border);
  box-shadow: var(--btn-apple-shadow, none);
  font-weight: var(--btn-google-weight, 500);
}

.btn-apple:hover:not(:disabled) {
  background-color: var(--btn-apple-bg);
  color: var(--btn-apple-text);
  box-shadow: var(--btn-apple-hover-shadow, var(--btn-apple-shadow, none));
}

/* Apple's left-aligned medium logo is 31x44 with its padding built in; it fills the button's
   height inside the border (its white backing would otherwise cover the outline). */
.btn-apple .federated-provider-icon {
  width: auto;
  height: 100%;
  aspect-ratio: 31 / 44;
}

/* Relay refusal notice: guidance in the brand's info colors, not an error */
.alert-guidance {
  background-color: var(--color-info-bg);
  border-color: var(--color-info-border);
  color: var(--color-text-secondary);
}

.alert-guidance-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--color-primary);
}

.alert-guidance-title {
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 0.25rem;
}

.alert-guidance-steps {
  margin: 0.25rem 0 0.5rem;
  padding-left: 1.25rem;
}

.alert-guidance-steps li + li {
  margin-top: 0.15rem;
}

.alert-guidance-cta {
  font-weight: 600;
  color: var(--color-text-link);
}

.alert-guidance-cta:hover {
  color: var(--color-text-link-hover);
}

/* Link Apple ID page */
.link-identity-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem;
  margin-bottom: 1rem;
  background-color: var(--color-bg-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm, 4px);
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.link-identity-badge svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-text-tertiary);
}

.link-identity-badge strong {
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}

.link-security-note {
  margin-top: 0.85rem;
  font-size: 0.8rem;
  text-align: center;
  color: var(--color-text-muted);
}

.linked-success-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 1rem;
  border-radius: var(--radius-full, 9999px);
  background-color: var(--color-success-bg);
  color: var(--color-success);
}

.linked-success-badge svg {
  width: 22px;
  height: 22px;
}

/* Quiet / Link Button */
.btn-quiet {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-secondary);
}

.btn-quiet:hover:not(:disabled) {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

/* ==========================================================================
   7. Alert Messages (Error / Status)
   ========================================================================== */

.alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: var(--alert-padding, 0.875rem 1rem);
  border-radius: var(--alert-radius, var(--radius-sm, 4px));
  font-size: 0.875rem;
  line-height: 1.4;
  margin-bottom: var(--alert-margin, 1.25rem);
  border: 1px solid transparent;
}

.alert-error {
  background-color: var(--color-error-bg);
  border-color: var(--color-error-border);
  color: var(--color-error-text);
}

.alert-error-icon {
  display: var(--alert-icon-display, inline-block);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.alert-content {
  flex: 1;
}

.alert-title {
  display: var(--alert-title-display, block);
  font-weight: 600;
  margin-bottom: 0.15rem;
}

/* ==========================================================================
   8. Card Footer & Meta Links
   ========================================================================== */

.auth-card-footer {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border-subtle);
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.auth-card-footer .footer-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.75rem;
  font-size: 0.8rem;
}

.auth-card-footer .footer-nav a {
  color: var(--color-text-tertiary);
}

.auth-card-footer .footer-nav a:hover {
  color: var(--color-text-primary);
}

/* Footer BELOW the card (Syrix): sign-up line + legal links, same rhythm as the FE login page */
.auth-page-footer {
  display: flex;
  flex-direction: var(--page-footer-direction, column);
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--page-footer-gap, 0.75rem);
  margin-top: var(--page-footer-margin, 1.5rem);
  text-align: center;
  font-size: var(--page-footer-size, 0.875rem);
  color: var(--color-text-secondary);
}

.auth-page-footer .bold-link {
  font-weight: 500;
}

.auth-page-footer .footer-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: var(--page-footer-legal-size, 0.75rem);
}

/* The FE legal row separates the two links with whitespace only, no bullet */
.auth-page-footer .footer-nav span {
  display: none;
}

.auth-page-footer .footer-nav a {
  color: var(--color-text-tertiary);
}

.auth-page-footer .footer-nav a:hover {
  color: var(--color-text-body, var(--color-text-primary));
  text-decoration: none;
}

/* ==========================================================================
   9. SELECT-TENANT Screen Styles
   ========================================================================== */

.select-company-wrapper {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: var(--tenant-wrapper-align, center);
  justify-content: center;
  padding: var(--tenant-padding, 2rem 1rem 6rem);
  background: var(--color-bg-page-gradient, var(--color-bg-page));
  background-image: var(--page-pattern, none);
  background-size: var(--page-pattern-size, auto);
}

.select-company-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: var(--tenant-content-align, center);
  width: 100%;
  max-width: var(--company-content-max-width, 1060px);
  z-index: 10;
}

.select-company-logo {
  display: var(--logo-inside-display, flex);
  margin-bottom: 1.5rem;
}

.select-company-logo img {
  height: 3rem;
  width: auto;
}

.select-company-title {
  font-size: var(--tenant-title-size, 2.25rem);
  font-weight: 700;
  letter-spacing: var(--tenant-title-tracking, normal);
  line-height: var(--tenant-title-line-height, 1.2);
  color: var(--brand-title-color, var(--color-primary));
  text-align: var(--tenant-text-align, center);
  margin-bottom: var(--tenant-title-margin, 0.5rem);
}

.select-company-message {
  font-size: var(--tenant-message-size, 1rem);
  line-height: var(--tenant-message-line-height, 1.5);
  color: var(--color-text-secondary);
  text-align: var(--tenant-text-align, center);
  max-width: 540px;
  margin-bottom: var(--tenant-message-margin, 2.5rem);
}

/* Company Grid / Row Layout */
.company-lists-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: var(--tenant-content-align, center);
}

.company-lists {
  display: flex;
  flex-direction: var(--company-list-direction, row);
  flex-wrap: var(--company-list-wrap, wrap);
  gap: var(--company-list-gap, 18px);
  justify-content: var(--tenant-list-justify, center);
  align-items: var(--company-list-align, center);
  width: 100%;
  max-width: var(--company-list-max-width, 100%);
  margin-bottom: var(--company-list-margin-bottom, 2.5rem);
  max-height: var(--tenant-list-max-height, none);
  overflow-y: var(--tenant-list-overflow, visible);
  padding: var(--tenant-list-padding, 0);
  -webkit-mask-image: var(--tenant-list-mask, none);
  mask-image: var(--tenant-list-mask, none);
  /* Still scrollable (touch/wheel/arrow keys); the bottom fade mask is the scroll hint. */
  scrollbar-width: none;
}

.company-lists::-webkit-scrollbar {
  display: none;
}

/* Individual Company Card */
.company-item-label {
  display: block;
  cursor: pointer;
  position: relative;
  width: var(--company-item-width, auto);
}

.company-radio-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.company-item-card {
  padding: var(--company-card-padding, 1.25rem 1rem);
  display: flex;
  flex-direction: var(--company-card-flex-direction, column);
  align-items: var(--company-card-align, center);
  justify-content: var(--company-card-justify, center);
  gap: var(--company-card-gap, 0);
  border: var(--company-card-border-width, 1px) solid var(--company-card-border);
  border-radius: var(--company-card-radius, var(--radius-md, 6px));
  background-color: var(--company-card-bg);
  position: relative;
  height: var(--company-card-height, 220px);
  width: var(--company-card-width, 200px);
  text-align: var(--company-card-text-align, center);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.company-item-card:hover {
  border-color: var(--company-card-hover-border);
  background-color: var(--color-bg-hover);
  transform: translateY(var(--company-card-hover-lift, -2px));
  box-shadow: var(--company-card-hover-shadow, var(--shadow-sm));
}

.company-radio-input:checked + .company-item-card {
  border-color: var(--company-card-selected-border);
  background-color: var(--company-card-selected-bg);
  box-shadow: var(--company-card-selected-ring, 0 0 0 2px var(--company-card-selected-border));
}

.company-radio-input:focus-visible + .company-item-card {
  box-shadow: var(--shadow-focus);
}

.company-logo-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--company-logo-margin-bottom, 0.75rem);
  flex: var(--company-logo-flex, 1);
  flex-shrink: 0;
}

.default-company-logo {
  width: var(--company-avatar-size, 90px);
  height: var(--company-avatar-size, 90px);
  border-radius: var(--company-avatar-radius, 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--company-avatar-font-size, 2rem);
  font-weight: 700;
  color: var(--company-avatar-text);
  background-color: var(--company-avatar-bg);
  text-transform: uppercase;
  user-select: none;
  flex-shrink: 0;
}

.company-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: var(--company-info-align, center);
  text-align: var(--company-card-text-align, center);
}

.company-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: var(--company-text-max-width, 170px);
  margin-bottom: 0.2rem;
}

.company-domain {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: var(--company-text-max-width, 170px);
}

.company-default-star {
  display: var(--company-default-star-display, flex);
  position: absolute;
  top: 10px;
  right: 10px;
  color: var(--company-star-inactive);
  align-items: center;
  justify-content: center;
}

.company-default-star.is-default {
  color: var(--company-star-color);
}

.company-default-star svg {
  width: 20px;
  height: 20px;
}

.company-default-badge {
  display: var(--company-default-badge-display, none);
  align-items: center;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full, 9999px);
  background-color: var(--company-default-badge-bg, var(--color-primary-subtle));
  color: var(--company-default-badge-color, var(--color-primary));
  margin-top: 0.35rem;
  width: fit-content;
}

.company-selected-check {
  display: var(--company-selected-check-display, none);
  margin-left: auto;
  color: var(--color-primary);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.company-selected-check svg {
  width: 20px;
  height: 20px;
}

.company-radio-input:checked + .company-item-card .company-selected-check {
  opacity: 1;
}

/* Disabled Company Row/Card */
.company-radio-input:disabled + .company-item-card,
.company-item-card.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background-color: var(--color-bg-disabled);
  border-color: var(--color-border-subtle);
  transform: none !important;
  box-shadow: none !important;
}

.company-item-label.is-disabled {
  cursor: not-allowed;
}

.company-disabled-note {
  display: inline-flex;
  align-items: center;
  font-size: 0.725rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-full, 9999px);
  background-color: var(--color-bg-subtle);
  border: 1px solid var(--color-border-default);
  color: var(--color-text-muted);
  margin-top: 0.35rem;
  width: fit-content;
}

/* Tenant Filter Search Input */
.company-filter-wrapper {
  width: 100%;
  max-width: var(--company-list-max-width, 460px);
  margin-bottom: 1.5rem;
}

/* Tenant palette (Syrix): the search field leads, rows filter live, keyboard hints below.
   Rendered only by the Syrix branch of select-tenant.html; sizes are brand tokens. */
.tenant-palette {
  width: 100%;
  max-width: var(--company-list-max-width, 460px);
  margin-bottom: var(--tenant-palette-margin, 0.75rem);
}

.tenant-palette-field .form-input {
  height: var(--tenant-palette-height, var(--input-height, 2.75rem));
  font-size: var(--tenant-palette-font-size, var(--input-font-size, 0.95rem));
  padding-left: var(--tenant-palette-leading-padding, var(--input-leading-padding, 2.6rem));
  padding-right: 7rem;
  border-radius: var(--tenant-palette-radius, var(--radius-input, 4px));
}

.tenant-palette-field .input-icon-leading {
  left: var(--tenant-palette-icon-left, var(--input-icon-left, 0.875rem));
}

.tenant-palette-field .form-input:focus {
  box-shadow: var(--tenant-palette-focus-shadow, var(--input-focus-shadow, var(--shadow-focus)));
}

.tenant-palette-count {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--color-text-tertiary);
  pointer-events: none;
  white-space: nowrap;
}

.tenant-palette-empty {
  width: 100%;
  max-width: var(--company-list-max-width, 460px);
  margin: 0.25rem 0 0;
  font-size: 14px;
  color: var(--color-text-secondary);
}

.tenant-palette-hints {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: var(--company-list-max-width, 460px);
  margin-top: 0.75rem;
  font-size: 12px;
  color: var(--color-text-tertiary);
}

.tenant-palette-hints kbd {
  font-family: inherit;
  font-size: 11px;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: 5px;
  padding: 1px 5px;
  margin-right: 4px;
}

/* Keyboard highlight = the checked look, without checking the radio (which would submit) */
.company-item-card.is-active {
  border-color: var(--company-card-selected-border);
  background-color: var(--company-card-selected-bg);
}

/* The search keeps focus so typing always works, but while the pointer is over the rows only the
   hovered row should light up: the field drops its focus colour and ring, and the keyboard
   highlight yields to the hover (the checked row keeps its own selected look). */
.select-company-content:has(.company-lists:hover) .tenant-palette-field .form-input:focus {
  border-color: var(--color-border-secondary);
  box-shadow: none;
}

.company-lists:hover .company-item-card.is-active:not(:hover) {
  border-color: var(--company-card-border);
  background-color: var(--company-card-bg);
}

.company-lists:hover .company-radio-input:checked + .company-item-card.is-active:not(:hover) {
  border-color: var(--company-card-selected-border);
  background-color: var(--company-card-selected-bg);
}

/* Tenant Bottom Actions */
.company-submit-bar {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 320px;
}

/* Corner Illustrations (XCORP Style) */
.corner-left, .corner-right {
  display: var(--corner-illustration-display, block);
  position: absolute;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

.corner-left {
  left: 0;
}

.corner-right {
  right: 0;
}

.corner-svg {
  width: 200px;
  height: auto;
  display: block;
}

/* Empty State */
.company-empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  background-color: var(--color-bg-card);
  border: 1px dashed var(--color-border-default);
  border-radius: var(--radius-card, 8px);
  max-width: 460px;
  margin: 0 auto;
}

.company-empty-icon {
  width: 48px;
  height: 48px;
  color: var(--color-text-tertiary);
  margin-bottom: 1rem;
}

/* ==========================================================================
   10. CONSENT Screen Styles
   ========================================================================== */

.consent-client-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background-color: var(--color-bg-subtle);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md, 6px);
  margin-bottom: 1.25rem;
}

.consent-client-icon-box {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm, 4px);
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.consent-client-icon-box img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.consent-client-info {
  flex: 1;
  min-width: 0;
}

.consent-client-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.verified-icon {
  width: 16px;
  height: 16px;
  color: var(--color-primary);
}

.consent-client-domain {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

/* Account / Tenant Context Pill */
.consent-context-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0.875rem;
  background-color: var(--color-bg-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm, 4px);
  margin-bottom: 1.25rem;
  font-size: 0.85rem;
}

.consent-user-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-text-primary);
  font-weight: 500;
}

.consent-tenant-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-xs, 2px);
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border-default);
  font-size: 0.775rem;
  color: var(--color-text-secondary);
}

/* Scopes List */
.consent-scopes-heading {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 0.75rem;
}

.consent-scopes-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.consent-scope-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  background-color: var(--scope-item-bg, var(--color-bg-card));
  border: 1px solid var(--scope-item-border, var(--color-border-default));
  border-radius: var(--radius-sm, 4px);
  transition: background-color 0.15s ease;
}

.consent-scope-item:hover {
  background-color: var(--scope-item-hover-bg, var(--color-bg-hover));
}

.consent-scope-item.is-approved {
  opacity: 0.85;
  background-color: var(--color-bg-subtle);
}

.consent-scope-checkbox {
  margin-top: 3px;
  flex-shrink: 0;
}

.consent-scope-content {
  flex: 1;
  min-width: 0;
}

.consent-scope-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.15rem;
}

.consent-scope-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.scope-badge-approved {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-xs, 2px);
  background-color: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  color: var(--color-success-text);
  white-space: nowrap;
}

.consent-scope-desc {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  line-height: 1.35;
}

/* Security Reassurance Box */
.consent-reassurance {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 0.875rem;
  border-radius: var(--radius-sm, 4px);
  background-color: var(--color-bg-subtle);
  border: 1px solid var(--color-border-subtle);
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  margin-bottom: 1.5rem;
}

.consent-reassurance svg {
  width: 18px;
  height: 18px;
  color: var(--color-primary);
  flex-shrink: 0;
}

/* Consent Action Buttons */
.consent-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.consent-actions .btn {
  flex: 1;
}

/* ==========================================================================
   11. ERROR Screen Styles
   ========================================================================== */

.error-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem 0.5rem;
}

.error-icon-wrapper {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  color: var(--color-error);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.error-icon-wrapper svg {
  width: 32px;
  height: 32px;
}

.error-heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
}

.error-message {
  font-size: 0.925rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-bottom: 1.5rem;
  max-width: 380px;
}

.error-code-box {
  width: 100%;
  background-color: var(--color-bg-subtle);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm, 4px);
  padding: 0.75rem 1rem;
  margin-bottom: 1.75rem;
  text-align: left;
}

.error-code-label {
  font-size: 0.725rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--color-text-tertiary);
  margin-bottom: 0.35rem;
}

.error-code-text {
  font-family: var(--font-family-mono);
  font-size: 0.8rem;
  color: var(--color-error-text);
  word-break: break-all;
  display: block;
}

.error-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ==========================================================================
   12. Responsive Breakpoints
   ========================================================================== */

@media (max-width: 640px) {
  html {
    font-size: 13px;
  }

  .auth-card {
    padding: var(--card-padding-mobile, 1.5rem 1.25rem);
  }

  .auth-page-step .auth-card {
    padding: var(--login-card-padding-mobile, var(--card-padding-mobile, 1.5rem 1.25rem));
  }

  .auth-title {
    font-size: var(--auth-title-size-mobile, 1.5rem);
  }

  .select-company-title {
    font-size: 1.75rem;
  }

  .select-company-content {
    padding: 0 0.5rem;
  }

  .company-lists {
    display: var(--company-list-mobile-display, grid);
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    gap: 12px;
  }

  .company-item-card {
    width: 100%;
    height: var(--company-card-mobile-height, 180px);
    padding: var(--company-card-mobile-padding, 1rem 0.5rem);
  }

  .default-company-logo {
    width: var(--company-avatar-mobile-size, 70px);
    height: var(--company-avatar-mobile-size, 70px);
    font-size: var(--company-avatar-mobile-font-size, 1.5rem);
  }

  .corner-svg {
    width: 100px;
  }

  .consent-actions {
    flex-direction: column-reverse;
  }

  .consent-actions .btn {
    width: 100%;
  }
}