/* ==========================================================================
   RoCode — "Apple" theme preview for /login?theme=apple
   Loads LAST, after animations.css, style.css, spring-glass.css, motion.css.

   Intent: keep depth and real material, drop the theatre.
   - near-black backdrop with a very subtle vertical gradient
   - one solid card that reads as a physical surface (no bleed-through)
   - exactly ONE filled button on the page; everything else is a quiet surface
   - system font stack, 600 headings with -0.02em tracking, 1.5 body leading
   - violet used twice: the wordmark and the focus ring
   - no tilt, no hover grow, no spotlight, no glow. 160ms ease-out, scale(.98) press.

   !important is used ONLY where the rule being beaten is itself !important:
     animations.css:1-9   .auth-container *  { opacity/transform/animation/transition: ... !important }
     style.css:1225-1229  button:hover       { transform: none !important }
     motion.css:20-23     html.oracle-spring-ui *:not(svg) { transition-duration: 0s !important }
     style.css:230-234    *,*::before,*::after { font-family: var(--font-body) !important }
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Read from /tokens.css (2026-10-02). */
    --a-bg-top:        var(--rc-bg);
    --a-bg-bottom:     var(--rc-bg);
    --a-card:          var(--rc-surface);
    --a-card-top:      var(--rc-surface);
    --a-surface:       var(--rc-bg);                /* inputs sit a step below the card */
    --a-surface-hover: var(--rc-surface-selected);
    --a-surface-down:  var(--rc-surface-selected);
    --a-line:          var(--rc-line);
    --a-line-ui:       var(--rc-line-strong);
    --a-line-ui-hover: var(--rc-line-hover);
    --a-edge:          transparent;
    --a-text:          var(--rc-text);
    --a-text-2:        var(--rc-text-2);
    --a-text-3:        var(--rc-text-3);
    --a-on-fill:       var(--rc-on-accent);
    --a-violet:        var(--rc-focus);
    --a-fill:          var(--rc-accent-fill);
    --a-fill-hover:    var(--rc-accent-fill-hover);
    --a-fill-down:     var(--rc-accent-fill-press);
    --a-radius:        var(--rc-radius-xl);
    --a-radius-sm:     var(--rc-radius-md);
    --a-shadow:        none;
    --a-dur:           var(--rc-dur);
    --a-ease:          var(--rc-ease);

    /* --- overrides of the Spring Glass tokens ------------------------------ */

    /* System stack only. The family is applied through the !important
       `*, *::before, *::after` rule in style.css, so the token is the hook. */
    --font-body: var(--rc-font);
    --font-display: var(--rc-font);
    --font-mono: var(--rc-font-mono);
    --font-weight-base: 400;
    --font-weight-emphasis: 600;
    --font-weight-display: 600;

    /* Crisp type: the global 2px/18px text shadows go. */
    --rc-text-shadow: none;
    --rc-text-filter-shadow: none;

    /* One large soft shadow instead of four stacked ones. */
    --rc-panel-shadow: var(--a-shadow);
    --rc-drop-shadow: none;
    --rc-chip-shadow: none;
    --shadow: var(--a-shadow);
    --glass-shadow: none;

    /* No tilt. button-glass-hover.js reads this and does nothing at 0. */
    --rc-btn-tilt-deg: 0;
    --rc-btn-tilt-now: 0;
    --rc-spot-size: 0px;
    --rc-spot-mask-size: 0px;
    --oracle-spring-scale: 1;

    /* Film grain 7% -> 2.5%: present, not a texture. */
    --rc-noise-opacity: 0;

    /* System cursors. */
    --rc-cursor-hand: pointer;
    --rc-cursor-grab: pointer;

    /* 8px rhythm for this page. */
    --rc-card-padding: 2rem;
    --rc-content-gap: 2rem;
    --rc-page-gutter-x: 1.5rem;

    --border: var(--a-line);
    --border-color: var(--a-line);
    --card-bg: var(--a-card);
    --input-bg: var(--a-surface);
    --text-primary: var(--a-text);
    --text-secondary: var(--a-text-2);
    --text-muted: var(--a-text-3);
    --accent: var(--a-violet);
    --accent-glow: transparent;
    --accent-subtle: transparent;
}

/* --------------------------------------------------------------------------
   2. Page chassis
   -------------------------------------------------------------------------- */
html {
    background: var(--rc-bg);
}

body {
    color: var(--a-text);
    font-weight: 400;
    letter-spacing: -0.005em;
    line-height: 1.5;
    text-shadow: none;
}

/* Film grain 7% -> 3%. background.js writes --rc-noise-opacity inline on
   <html>, which beats a :root token, so set the value on the layer itself. */
body::after {
    opacity: 0;
}

/* Quiet scrollbars (spring-glass.css paints violet gradient ones). */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--rc-line-hover) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; box-shadow: none; }
*::-webkit-scrollbar-thumb {
    background: var(--rc-line-strong);
    background-image: none;
    border: 3px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
    box-shadow: none;
}
*::-webkit-scrollbar-thumb:hover { background: var(--rc-line-hover); background-clip: padding-box; }

/* --------------------------------------------------------------------------
   3. Header
   -------------------------------------------------------------------------- */
/* animations.css:87 runs `rcNavDrop` / `rcNavSlide` with --rc-dur-slow, which
   motion.css sets to 0s under html.oracle-spring-ui. The zero-length animation
   never advances past its `from` keyframe, so the header sits 28px too high and
   the icon rail 40px too far right — measured on the stock page too. Neutralise
   both here (same 0,2,1 specificity as the rule above, later in the cascade). */
html .navbar-top,
html.rc-animated .navbar-top {
    animation: none;
    transform: none;
    opacity: 1;
}
html .nav-links,
html.rc-animated .nav-links {
    animation: none;
    transform: translateY(-50%);
    opacity: 1;
}

.navbar-top { padding: 1.25rem 1.5rem; }

/* animations.css:115 pulses a violet halo on the wordmark forever. */
html .logo-text,
.navbar-top .logo-text {
    color: var(--a-violet);            /* accent use 1 of 2 */
    font-weight: 600;
    font-size: 1.125rem;
    letter-spacing: -0.015em;
    text-shadow: none;
    animation: none;
}

.product-badge {
    background: transparent;
    border: 1px solid var(--a-line);
    color: var(--a-text-2);
    font-weight: 500;
    font-size: 0.8125rem;
    letter-spacing: -0.005em;
    padding: 0.5rem 0.875rem;
    box-shadow: none;
    text-shadow: none;
    transition: color var(--a-dur) var(--a-ease),
                background-color var(--a-dur) var(--a-ease),
                border-color var(--a-dur) var(--a-ease) !important;
}
.product-badge:hover {
    color: var(--a-text);
    background: var(--rc-hover);
    border-color: var(--rc-line-hover);
}

/* Floating icon rail: quiet surface, no glass. */
.nav-links {
    background: var(--rc-surface);
    border: 1px solid var(--a-line);
    border-width: 1px;
    box-shadow: var(--a-shadow);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* --------------------------------------------------------------------------
   4. Layout — un-fix the scroll container so the card is reachable at 375x667
   -------------------------------------------------------------------------- */
.main-container.auth-container {
    min-height: auto;
    padding: 1.5rem var(--rc-page-gutter-x) calc(3rem + env(safe-area-inset-bottom, 0px));
    gap: 1.5rem;
    justify-content: flex-start;
}

.auth-container .top-text-section {
    position: static;
    inset: auto;
    z-index: auto;
    padding: 0;
    pointer-events: auto;
    max-width: 640px;
}

.auth-container .content-grid {
    position: static;
    inset: auto;
    padding: 0;
    align-items: flex-start;
    z-index: auto;
}

.auth-container .container,
.login-section { max-width: 440px; }

/* Hero headline: it now sits above the card instead of behind it. */
.auth-container .main-title,
.auth-container h1.main-title {
    font-size: var(--rc-fs-page);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: var(--rc-ls-heading);
    text-align: center;
    color: var(--a-text);
    margin-bottom: 0;
    text-shadow: none;
    filter: none;
}
.auth-container .main-title span {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    color: var(--a-text-2);
    filter: none;
    text-shadow: none;
}

/* --------------------------------------------------------------------------
   5. The card — real material, opaque, one soft shadow, hairline top edge
   -------------------------------------------------------------------------- */
.auth-container .card {
    background: var(--a-card);
    border: 1px solid var(--a-line);
    border-width: 1px;
    border-radius: var(--a-radius);
    padding: 2.75rem 2.5rem;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: none;
}
.auth-container .card:hover {
    border-color: var(--a-line);
    box-shadow: inset 0 1px 0 var(--a-edge), var(--a-shadow);
}

/* --------------------------------------------------------------------------
   6. Type inside the card
   -------------------------------------------------------------------------- */
.auth-container h1.form-title,
.auth-container h2.form-title {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    color: var(--a-text);
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 0.5rem;
    text-align: center;
    filter: none;
    text-shadow: none;
}

.auth-container .form-intro,
.auth-container .verification-text {
    color: var(--a-text-2);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.005em;
    margin-bottom: 2rem;
    text-align: center;
    text-shadow: none;
}

.auth-container label {
    color: var(--a-text-2);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: -0.003em;
    margin-bottom: 0.5rem;
    text-shadow: none;
}

.auth-container .form-group { margin-bottom: 1.25rem; }

.auth-container .spam-warning {
    background: var(--rc-surface-raised);
    border: 1px solid var(--a-line);
    border-width: 1px;
    border-radius: var(--a-radius-sm);
    box-shadow: none;
    padding: 0.875rem 1rem;
    margin: 0 0 1.5rem;
    color: var(--a-text-2);
    font-size: 0.9375rem;
    line-height: 1.5;
}
.auth-container .spam-text {
    color: var(--a-text-2);
    font-size: 0.9375rem;
    line-height: 1.5;
    gap: 4px;
}
.auth-container .spam-text strong,
.auth-container .spam-warning strong {
    color: var(--a-text);
    font-size: 0.9375rem;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   7. Inputs
   -------------------------------------------------------------------------- */
.auth-container input,
.auth-container textarea {
    background: var(--a-surface);
    border: 1px solid var(--a-line-ui);
    border-radius: var(--a-radius-sm);
    color: var(--a-text);
    font-size: 1.0625rem;      /* >= 16px: no iOS zoom on focus */
    font-weight: 400;
    letter-spacing: -0.005em;
    padding: 0.8125rem 0.875rem;
    box-shadow: none;
    text-shadow: none;
    transition: border-color var(--a-dur) var(--a-ease),
                background-color var(--a-dur) var(--a-ease) !important;
}
.auth-container input:hover,
.auth-container textarea:hover {
    border-color: var(--a-line-ui-hover);
    background: var(--a-surface);
    box-shadow: none;
}
.auth-container input:focus,
.auth-container textarea:focus {
    border-color: var(--a-violet);
    background: var(--a-surface);
    box-shadow: none;
    outline: none;
}
/* A real, visible focus ring — accent use 2 of 2. 6.6:1 on the card. */
.auth-container input:focus-visible,
.auth-container textarea:focus-visible {
    outline: 2px solid var(--a-violet);
    outline-offset: 2px;
    border-color: var(--a-violet);
}
.auth-container input::placeholder { color: var(--a-text-3); }

/* --------------------------------------------------------------------------
   8. Buttons — strip the glass machinery, then repaint flat and quiet.
      ::before is the specular face, ::after is the pointer spotlight.
      Removing them removes the tilt, the grow, the noise and the glow at once.

      The stock base rule is
        button:not(.model-card):not(.close-modal-btn):not(.model-picker-close):not(.segmented-toggle-btn)
      at specificity (0,4,1) and it sets `background: transparent`. Every repaint
      below therefore carries the same :not() chain so it actually lands.
   -------------------------------------------------------------------------- */
/* Tilt off at the source. button-glass-hover.js reads --rc-btn-tilt-deg with
   getComputedStyle; at 0 it never sets --rc-btn-tilt-now and never adds
   .rc-btn-tilting. The chain is needed to beat the stock (0,4,1) rule that
   sets it to 5, and the :hover rule that copies it into --rc-btn-tilt-now. */
button:not(.model-card):not(.close-modal-btn):not(.model-picker-close):not(.segmented-toggle-btn),
button:not(.model-card):not(.close-modal-btn):not(.model-picker-close):not(.segmented-toggle-btn):hover,
button:not(.model-card):not(.close-modal-btn):not(.model-picker-close):not(.segmented-toggle-btn):hover:not(.rc-btn-tilting),
input[type="submit"],
input[type="submit"]:hover,
a.btn,
a.btn:hover,
a.btn-top-login,
a.btn-top-login:hover,
a.discord-btn,
a.discord-btn:hover {
    --rc-btn-tilt-deg: 0;
    --rc-btn-tilt-now: 0;
    --oracle-spring-scale: 1;
    --rc-spot-size: 0px;
    --rc-spot-mask-size: 0px;
}

/* Kill the specular face and the pointer spotlight outright. Both are purely
   decorative pseudo-elements; no control loses a function. */
.auth-container button:not(.model-card):not(.close-modal-btn):not(.model-picker-close):not(.segmented-toggle-btn)::before,
.auth-container button:not(.model-card):not(.close-modal-btn):not(.model-picker-close):not(.segmented-toggle-btn)::after,
.auth-container button:not(.model-card):not(.close-modal-btn):not(.model-picker-close):not(.segmented-toggle-btn):hover::before,
.auth-container button:not(.model-card):not(.close-modal-btn):not(.model-picker-close):not(.segmented-toggle-btn):hover::after {
    content: none;
    display: none;
    background: none;
    background-image: none;
    box-shadow: none;
    border: 0;
    filter: none;
    opacity: 0;
    transform: none !important;
}

.auth-container button,
.auth-container button .rc-btn-face {
    text-shadow: none;
    transform: none !important;
    letter-spacing: -0.01em;
}

.auth-container button svg { filter: none; }

/* --- the ONE filled button ------------------------------------------------ */
.auth-container button.submit-btn:not(.model-card):not(.close-modal-btn):not(.model-picker-close):not(.segmented-toggle-btn) {
    width: 100%;
    min-height: 48px;
    padding: 0.8125rem 1rem;
    margin-top: 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--rc-radius-md);
    background: var(--a-fill);
    color: var(--rc-on-accent);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    box-shadow: none;
    text-shadow: none;
    cursor: pointer;
    transition: background-color var(--a-dur) var(--a-ease),
                color var(--a-dur) var(--a-ease),
                transform var(--a-dur) var(--a-ease) !important;
}
.auth-container button.submit-btn:not(.model-card):not(.close-modal-btn):not(.model-picker-close):not(.segmented-toggle-btn):not(:disabled):hover {
    background: var(--a-fill-hover);
    color: var(--rc-on-accent);
}

/* Beats style.css:1225 `button:…:hover { transform: none !important }` (0,6,1). */
.auth-container button.submit-btn:not(.model-card):not(.close-modal-btn):not(.model-picker-close):not(.segmented-toggle-btn):not(:disabled):active {
    transform: scale(0.98) !important;
    background: var(--a-fill-down);
    color: var(--rc-on-accent);
}

/* --- quiet surfaces ------------------------------------------------------- */
.auth-container button.oauth-btn:not(.model-card):not(.close-modal-btn):not(.model-picker-close):not(.segmented-toggle-btn) {
    min-height: 48px;
    padding: 0.8125rem 1rem;
    border: 1px solid var(--a-line-ui);
    border-radius: var(--rc-radius-md);
    background: transparent;
    color: var(--a-text);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    box-shadow: none;
    text-shadow: none;
    transition: background-color var(--a-dur) var(--a-ease),
                border-color var(--a-dur) var(--a-ease),
                transform var(--a-dur) var(--a-ease) !important;
}
.auth-container button.oauth-btn:not(.model-card):not(.close-modal-btn):not(.model-picker-close):not(.segmented-toggle-btn):not(:disabled):hover {
    background: var(--rc-hover);
    border-color: var(--a-line-ui-hover);
}
.auth-container button.oauth-btn:not(.model-card):not(.close-modal-btn):not(.model-picker-close):not(.segmented-toggle-btn):not(:disabled):active {
    transform: scale(0.985) !important;
    background: var(--rc-press);
}

/* Discord keeps its identity but stays a quiet surface. Its hidden state is
   untouched — style.css `.oauth-btn[hidden] { display: none }` still rules. */
.auth-container button.oauth-btn-discord:not(.model-card):not(.close-modal-btn):not(.model-picker-close):not(.segmented-toggle-btn) {
    border-color: var(--a-line-ui);
    color: var(--a-text);
}
.auth-container button.oauth-btn-discord:not(.model-card):not(.close-modal-btn):not(.model-picker-close):not(.segmented-toggle-btn):not(:disabled):hover {
    background: var(--a-surface-hover);
    border-color: var(--a-line-ui-hover);
}

.auth-container .oauth-divider {
    color: var(--a-text-3);
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0;
    margin: 1.5rem 0 1rem;
    text-shadow: none;
}
.auth-container .oauth-divider::before,
.auth-container .oauth-divider::after { background: var(--a-line); }

/* --- the reveal link ------------------------------------------------------ */
.auth-container button.oauth-legacy-link:not(.model-card):not(.close-modal-btn):not(.model-picker-close):not(.segmented-toggle-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    width: auto;
    margin: 1rem auto 0;
    padding: 0.5rem 0.75rem;
    background: none;
    border: 0;
    border-radius: 8px;
    color: var(--a-text-2);
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: -0.005em;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--rc-line-hover);
    box-shadow: none;
    text-shadow: none;
    transition: color var(--a-dur) var(--a-ease) !important;
}
.auth-container button.oauth-legacy-link:not(.model-card):not(.close-modal-btn):not(.model-picker-close):not(.segmented-toggle-btn):hover {
    color: var(--a-text);
    background: none;
}

/* --------------------------------------------------------------------------
   9. Footer links, messages, disabled states
   -------------------------------------------------------------------------- */
.auth-container .footer-link {
    color: var(--a-text-2);
    font-size: 0.9375rem;
    margin-top: 1rem;
    text-shadow: none;
}
.auth-container .footer-link a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.25rem;
    color: var(--a-text);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--rc-line-hover);
    border-radius: 6px;
    transition: color var(--a-dur) var(--a-ease) !important;
}
.auth-container .footer-link a:hover { color: var(--a-violet); }

.auth-container #auth-message,
.auth-container #otp-message,
.auth-container #oauth-message,
.auth-container #add-email-message {
    border-radius: var(--a-radius-sm);
    font-size: 0.9375rem;
    line-height: 1.5;
    padding: 0.75rem 0.875rem;
    margin-top: 0.875rem;
    text-shadow: none;
}
.auth-container #auth-message.error,
.auth-container #otp-message.error,
.auth-container #oauth-message.error,
.auth-container #add-email-message.error {
    background: var(--rc-danger-soft);
    border-color: var(--rc-danger-line);
    color: var(--rc-danger);
}
.auth-container #auth-message.success,
.auth-container #otp-message.success,
.auth-container #oauth-message.success,
.auth-container #add-email-message.success {
    background: var(--rc-success-soft);
    border-color: var(--rc-success-line);
    color: var(--rc-success);
}

/* animations.css:1-9 forces `opacity: 1 !important` on `.auth-container *`,
   which cancels every disabled dim. Repaint the disabled state instead of
   fighting over opacity, and restore a visible dim with matching weight. */
.auth-container button:disabled:not(.model-card):not(.close-modal-btn):not(.model-picker-close):not(.segmented-toggle-btn) {
    opacity: 1 !important;
    background: var(--rc-surface-raised);
    border: 1px solid transparent;
    color: var(--rc-text-3);
    box-shadow: none;
    filter: none;
    text-shadow: none;
    cursor: default;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   10. Turnstile — constrain and centre it inside the content column
   -------------------------------------------------------------------------- */
.auth-container .turnstile-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    margin: 0.25rem 0 0;
}
.auth-container .turnstile-wrap > .cf-turnstile {
    max-width: 100%;
    margin: 0 auto;
}
.auth-container .turnstile-wrap iframe {
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   11. Focus ring — one visible ring everywhere, 6.6:1 on the card
   -------------------------------------------------------------------------- */
.auth-container a:focus-visible,
.auth-container button:focus-visible,
.navbar-top a:focus-visible,
.nav-links a:focus-visible {
    outline: 2px solid var(--a-violet);
    outline-offset: 3px;
    border-radius: var(--a-radius-sm);
}
.auth-container .submit-btn:focus-visible {
    outline: 2px solid var(--a-violet);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   12. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .navbar-top { padding: 1rem 1rem; gap: 0.75rem; }
    .product-badge { min-height: 44px; }
    .main-container.auth-container { padding-inline: 1rem; }
}

@media (max-width: 480px) {
    .main-container.auth-container {
        padding: 1rem 1rem calc(2.5rem + env(safe-area-inset-bottom, 0px));
        gap: 1.25rem;
    }
    .auth-container .card { padding: 1.5rem; border-radius: 16px; }
    .auth-container h1.form-title,
    .auth-container h2.form-title { font-size: 1.5rem; }
    .auth-container .form-intro,
    .auth-container .verification-text { margin-bottom: 1.5rem; font-size: 0.9375rem; }
}

/* Below ~390px the card's content column must still clear Turnstile's
   300px minimum: 375 - 32 (gutter) - 40 (padding) = 303px. */
@media (max-width: 390px) {
    .auth-container .card { padding-inline: 1.25rem; }
}

/* --------------------------------------------------------------------------
   13. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .auth-container *,
    .auth-container *::before,
    .auth-container *::after,
    .navbar-top *,
    .product-badge {
        transition: none !important;
        animation: none !important;
        transform: none !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   9. Verification-code step
   The code is the whole content of this screen, so it gets the emphasis and
   everything around it steps back.
   -------------------------------------------------------------------------- */
.auth-container #otp-step .form-title {
    margin-bottom: 0.625rem;
}

.auth-container #otp-step .verification-text {
    margin-bottom: 2rem;
    font-size: 0.9375rem;
    /* Long addresses shouldn't blow out the card. */
    overflow-wrap: anywhere;
}
.auth-container #otp-step .verification-text strong {
    color: var(--a-text);
    font-weight: 600;
}

/* One tidy field: big, evenly spaced digits, centred, tabular so the six
   characters keep their rhythm as they're typed. */
.auth-container #otp {
    /* No mono stack here: style.css sets font-family with !important on every
       element, so the system face wins anyway — tabular-nums is what actually
       keeps the six digits on an even rhythm. */
    font-size: 1.625rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.4em;
    text-indent: 0.4em;          /* re-centres despite the trailing gap */
    text-align: center;
    padding-block: 0.875rem;
    caret-color: var(--a-violet);
}
.auth-container #otp::placeholder {
    color: color-mix(in srgb, var(--a-text-3) 40%, transparent);
    letter-spacing: 0.4em;
    font-weight: 500;
}

.auth-container #otp-step label {
    display: block;
    text-align: center;
}

.auth-container .otp-hint {
    margin: 0.625rem 0 0;
    color: var(--a-text-3);
    font-size: 0.8125rem;
    line-height: 1.45;
    text-align: center;
    text-shadow: none;
}

/* Resend and go-back sit on one quiet line under the button rather than
   stacking into two competing rows. */
.auth-container #otp-step .otp-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: var(--a-text-3);
}
.auth-container #otp-step .otp-actions a {
    min-height: 40px;
    color: var(--a-text-2);
    font-weight: 500;
    text-decoration-color: color-mix(in srgb, var(--a-text-3) 55%, transparent);
}
.auth-container #otp-step .otp-actions a:hover { color: var(--a-text); }
.auth-container #otp-step .otp-actions .otp-actions-sep {
    color: color-mix(in srgb, var(--a-text-3) 75%, transparent);
    user-select: none;
}

@media (max-width: 380px) {
    .auth-container #otp {
        font-size: 1.375rem;
        letter-spacing: 0.3em;
        text-indent: 0.3em;
    }
    .auth-container #otp-step .otp-actions { gap: 0.375rem; font-size: 0.8125rem; }
}

/* Terms / Privacy under the card — the icon rail that used to carry them is gone. */
.auth-legal {
    max-width: 24rem;
    margin: 1.5rem auto 2.5rem;
    padding-inline: 1.5rem;
    color: var(--a-text-3);
    font-size: 0.8125rem;
    line-height: 1.5;
    text-align: center;
    text-shadow: none;
}
.auth-legal a {
    color: var(--a-text-2);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.auth-legal a:hover { color: var(--a-text); }

/* --------------------------------------------------------------------------
   14. Sign in with Roblox (hidden until Roblox approves the app)
   The button is a plain .oauth-btn. Shown next to a revealed Discord button,
   the three stack instead of leaving one orphan in the two-column grid.
   -------------------------------------------------------------------------- */
.auth-container .oauth-buttons:has(> .oauth-btn-roblox:not([hidden])) {
    grid-template-columns: 1fr;
}
/* While Roblox stays hidden, style.css's `:has(> .oauth-btn[hidden])` single
   column would also match after Discord is revealed. Put Google and Discord
   back side by side above 480px, as before the Roblox button existed. */
@media not all and (max-width: 480px) {
    .auth-container .oauth-buttons:has(> .oauth-btn-roblox[hidden]):has(> .oauth-btn-discord:not([hidden])) {
        grid-template-columns: 1fr 1fr;
    }
}
/* .card p here: app-landing.css sizes every card paragraph at (0,2,2). */
.auth-container .card p.oauth-roblox-note {
    margin: 0.75rem 0 0;
    color: var(--a-text-3);
    font-size: 0.8125rem;
    line-height: 1.45;
    text-align: center;
    text-shadow: none;
}

/* One-time "Add your email" step after an email-less (Roblox) sign-in. Same
   rhythm as the code step; its message box is otherwise unstyled because
   style.css only lists the older message ids. */
.auth-container #add-email-step .form-title {
    margin-bottom: 0.625rem;
}
.auth-container #add-email-step .verification-text {
    margin-bottom: 2rem;
    font-size: 0.9375rem;
    overflow-wrap: anywhere;
}
.auth-container #add-email-step .verification-text strong {
    color: var(--a-text);
    font-weight: 600;
}
/* Sent state: the button's own top margin is the gap. */
.auth-container #add-email-sent .verification-text {
    margin-bottom: 0.5rem;
}
.auth-container #add-email-message {
    display: none;
    border: 1px solid transparent;
    text-align: center;
    overflow-wrap: anywhere;
}
.auth-container #add-email-step .add-email-actions {
    display: flex;
    justify-content: center;
    margin-top: 0.75rem;
}

/* --------------------------------------------------------------------------
   15. System pass (2026-10-02)
   The page title above the card says what the page is ("Sign in to RoCode"),
   so the email step's "Welcome" heading inside the card would repeat it. The
   code and add-email steps keep their own headings.
   -------------------------------------------------------------------------- */
.auth-container .top-text-section { margin: 0 auto; text-align: center; }
.auth-container #email-step > .form-title { display: none; }
.auth-container .card { padding: var(--rc-sp-8); }
.auth-container .form-intro { margin-bottom: var(--rc-sp-6); font-size: var(--rc-fs-ui); }
.auth-container .oauth-divider { margin: var(--rc-sp-6) 0 var(--rc-sp-4); font-size: var(--rc-fs-caption); }
.auth-container button.submit-btn:not(.model-card):not(.close-modal-btn):not(.model-picker-close):not(.segmented-toggle-btn) { min-height: var(--rc-tap); margin-top: var(--rc-sp-5); font-size: var(--rc-fs-ui); }
.auth-container button.oauth-btn:not(.model-card):not(.close-modal-btn):not(.model-picker-close):not(.segmented-toggle-btn) { min-height: var(--rc-tap); font-size: var(--rc-fs-ui); }
.auth-container input { font-size: var(--rc-fs-body); }
@media (max-width: 480px) {
    .auth-container .card { padding: var(--rc-sp-6) var(--rc-sp-5); }
    .auth-container .main-title, .auth-container h1.main-title { font-size: 24px; }
}