/* Sacred Login styles. Scoped to .sl-*; values from the Sacred tokens (sacred-design assets/tokens.css).
   Void ground, Linen type, one Crimson action, Montserrat only. No inline styles anywhere (works under style-src 'self'). */
@font-face {
  font-family: 'Montserrat';
  src: url('montserrat-400_900.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

.sl-screen {
  --sl-crimson: #C41230; --sl-crimson-deep: #8B0A20; --sl-crimson-bright: #E63950;
  --sl-void: #0A0B10; --sl-obsidian: #14151A; --sl-graphite: #22252E;
  --sl-linen: #EDE7DA; --sl-linen-mute: #D8D1C0; --sl-linen-soft: #B8B2A6;
  --sl-hairline: rgba(237, 231, 218, 0.14); --sl-hairline-strong: rgba(237, 231, 218, 0.24);
  --sl-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  position: fixed; inset: 0; z-index: 1000; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--sl-void); color: var(--sl-linen); color-scheme: dark;
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
  padding: max(48px, calc(env(safe-area-inset-top) + 32px)) 16px max(32px, calc(env(safe-area-inset-bottom) + 24px));
}
.sl-screen *, .sl-screen *::before, .sl-screen *::after { box-sizing: border-box; }
.sl { width: 100%; max-width: 360px; margin: 0 auto; display: flex; flex-direction: column; }
.sl [hidden] { display: none !important; }
.sl-step { display: flex; flex-direction: column; }

.sl-logo { display: block; width: 128px; height: auto; margin: 0 auto 40px; }
.sl-eyebrow { margin: 0 0 12px; display: flex; align-items: center; gap: 10px; font-size: 0.75rem; line-height: 1; font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--sl-linen-soft); }
.sl-dash { width: 18px; height: 2px; background: var(--sl-crimson); flex: none; }
.sl-h { margin: 0 0 8px; font-size: 2rem; line-height: 1.04; font-weight: 800; letter-spacing: -0.012em; text-transform: uppercase; color: var(--sl-linen); outline: none; }
.sl-deck { margin: 0 0 28px; font-size: 1rem; line-height: 1.5; font-weight: 500; color: var(--sl-linen-mute); overflow-wrap: anywhere; }

.sl-form { display: flex; flex-direction: column; margin: 0; }
.sl-label { display: block; margin: 0 0 8px; font-size: 0.8125rem; line-height: 1.45; font-weight: 600; letter-spacing: 0.015em; color: var(--sl-linen-soft); }
.sl-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sl-input { display: block; width: 100%; min-height: 52px; margin: 0; padding: 0 16px; border-radius: 8px;
  border: 1px solid var(--sl-hairline-strong); background: var(--sl-graphite); color: var(--sl-linen);
  font: 500 16px/1.2 'Montserrat', system-ui, sans-serif; letter-spacing: 0; outline: none; -webkit-appearance: none; appearance: none;
  transition: border-color 160ms var(--sl-ease); }
.sl-input::placeholder { color: var(--sl-linen-soft); opacity: 1; }
.sl-input:focus { border-color: var(--sl-linen); }
.sl-input:-webkit-autofill { -webkit-text-fill-color: var(--sl-linen); -webkit-box-shadow: 0 0 0 100px var(--sl-graphite) inset; caret-color: var(--sl-linen); }
.sl-pw { margin-top: 16px; }

.sl-err { margin: 10px 0 0; min-height: 1.45em; font-size: 0.875rem; line-height: 1.45; font-weight: 500; color: var(--sl-crimson-bright); }
.sl-err:empty { min-height: 0; margin: 0; }

.sl-btn { display: block; width: 100%; min-height: 52px; margin: 20px 0 0; padding: 0 20px; border: 0; border-radius: 8px;
  background: var(--sl-crimson); color: #FFFFFF; cursor: pointer;
  font: 700 0.875rem/1 'Montserrat', system-ui, sans-serif; letter-spacing: 0.1em; text-transform: uppercase;
  transition: transform 100ms var(--sl-ease), background-color 160ms var(--sl-ease), opacity 160ms var(--sl-ease);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.sl-btn:active { transform: scale(0.97); background: var(--sl-crimson-deep); }
.sl-btn:disabled { cursor: default; opacity: 0.6; transform: none; }

.sl-link { display: block; align-self: center; min-height: 44px; margin: 16px 0 0; padding: 0 12px; border: 0; background: transparent; cursor: pointer;
  font: 600 0.875rem/1 'Montserrat', system-ui, sans-serif; color: var(--sl-linen-soft); border-radius: 8px;
  transition: transform 100ms var(--sl-ease), color 160ms var(--sl-ease); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.sl-link:active { transform: scale(0.97); color: var(--sl-linen); }
.sl-link:disabled { cursor: default; opacity: 0.7; transform: none; }
.sl-inline { display: inline; margin: 0; padding: 0 2px; border: 0; background: transparent; cursor: pointer; border-radius: 4px;
  font: inherit; font-weight: 700; color: var(--sl-linen); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--sl-crimson); }

/* Six boxes over one real input: autofill (autocomplete=one-time-code), paste and typing all land in the input. */
.sl-otp { position: relative; width: 100%; cursor: text; }
.sl-cells { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.sl-cells span { display: flex; align-items: center; justify-content: center; height: 60px; border-radius: 8px;
  border: 1px solid var(--sl-hairline-strong); background: var(--sl-graphite); color: var(--sl-linen);
  font-size: 1.625rem; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: border-color 160ms var(--sl-ease); }
.sl-cells span.is-filled { border-color: var(--sl-linen-soft); }
.sl-cells span.is-active { border-color: var(--sl-linen); box-shadow: inset 0 -3px 0 var(--sl-crimson); }
.sl-code { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; outline: none;
  background: transparent; color: transparent; caret-color: transparent; -webkit-text-fill-color: transparent;
  font-size: 16px; letter-spacing: 0; opacity: 0.01; -webkit-appearance: none; appearance: none; }
.sl-code::selection { background: transparent; }

.sl-note { margin: 28px 0 0; min-height: 1.45em; font-size: 0.875rem; line-height: 1.45; font-weight: 500; color: var(--sl-linen-soft); text-align: center; }
.sl-note:empty { visibility: hidden; }

.sl-screen :focus-visible { outline: 2px solid var(--sl-linen); outline-offset: 3px; }
.sl-screen .sl-input:focus-visible, .sl-screen .sl-code:focus-visible { outline: none; }
.sl-otp:focus-within .sl-cells span.is-active { border-color: var(--sl-linen); }

@media (max-width: 340px) {
  .sl-cells { gap: 6px; }
  .sl-cells span { height: 52px; font-size: 1.375rem; }
  .sl-h { font-size: 1.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-screen *, .sl-screen *::before, .sl-screen *::after { transition-property: opacity, color, background-color, border-color !important; transition-duration: 120ms !important; }
  .sl-btn:active, .sl-link:active { transform: none; }
}
@media (prefers-contrast: more) {
  .sl-screen { --sl-hairline-strong: rgba(237, 231, 218, 0.6); --sl-linen-soft: #D8D1C0; }
}