/* LoginScreenViewModel.kt: backgroundImageResource switches between first_page_vertical
   (isPortrait, height > width) and first_page_horizontal (landscape).

   In Compose, the Image is pinned to the screen (fillMaxSize, Crop) and the content Column
   scrolls *over* it independently. Without background-attachment:fixed, this div is both the
   background layer and the scrolling content container, so on a small screen with tall stacked
   content (title + subtitle + 3 cards + sign-in card) it grows well past 100vh and cover scales
   the image to fill that whole tall box instead of just the viewport — much more zoomed in than
   the real app. Fixed attachment pins the image to the viewport regardless of this element's
   actual height, matching Compose's behavior. */
.hero {
    position: relative;
    min-height: 100vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #000000;
    background-image: url('first_page_vertical.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

@media (orientation: landscape) {
    .hero {
        background-image: url('first_page_horizontal.jpeg');
    }
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
}

/* Flex items default to min-width:auto (their content's natural single-line width). Combined
   with .hero-content's align-items:center (which shrink-wraps children instead of stretching
   them), long text refuses to wrap and overflows past the viewport instead. */
.hero-content > * {
    min-width: 0;
}

.benefit-card > * {
    min-width: 0;
}

/* LoginScreen.kt: topPadding = screenH * (0.18 / 0.20 / 0.14 depending on height tier), clamped [60dp, 220dp] */
.hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: clamp(60px, 20vh, 220px) 4px 32px;
}

@media (max-height: 599px) {
    .hero-content {
        padding-top: clamp(60px, 18vh, 220px);
    }
}

@media (min-height: 1101px) {
    .hero-content {
        padding-top: clamp(60px, 14vh, 220px);
    }
}

/* YourValueSection.kt: fontSize = 28sp * typographyScale, lineHeight = 34sp * typographyScale.
   ResponsiveTypography scale: 1x (<800dp width), 1.3x (>=800dp), 1.6x (>=1200dp) */
.hero-title {
    color: white;
    font-size: 28px;
    line-height: 34px;
    font-weight: 400;
    text-align: center;
    margin: 0 12px 12px;
}

.hero-subtitle {
    color: rgba(255, 255, 255, 0.85);
    font-size: 16px;
    text-align: center;
    margin: 0 24px 48px;
}

@media (min-width: 800px) {
    .hero-title {
        font-size: 36.4px;
        line-height: 44.2px;
    }

    .hero-subtitle {
        font-size: 20.8px;
    }
}

@media (min-width: 1200px) {
    .hero-title {
        font-size: 44.8px;
        line-height: 54.4px;
    }

    .hero-subtitle {
        font-size: 25.6px;
    }
}

/* LoginScreen.kt: isSmallScreen = maxWidth < 600dp shows a "Start now" button that jumps to the
   sign-in card. The real component (CardButton/PrimaryButton) is a fixed 280x60dp. Keeping the
   real 280px width (it reads as a wide pill, matching the real screen) but a shorter 44px height
   instead of the literal 60dp, since the full height felt too chunky in this tight hero context. */
.start-now-button {
    display: none;
    width: 280px;
    height: 44px;
    margin: 30px 0 0;
    transition: filter 0.15s ease;
    background: #006a8e;
    color: white;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

@media (max-width: 599px) {
    .start-now-button {
        display: flex;
    }
}

.start-now-button:hover {
    filter: brightness(1.1);
}

/* BenefitsStrip.kt: isWide = maxWidth > 520dp, cardHeight = 130dp, maxCardWidth = 500dp.
   BoxWithConstraints has its own padding(horizontal=8dp) on top of the outer Column's 4dp —
   reducing width (rather than padding) lets align-items:center on the parent center the gutter
   automatically. The wide-mode Row has an *additional* 12dp padding of its own. */
.benefits {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: calc(100% - 16px);
    box-sizing: border-box;
    margin: 60px 0;
}

@media (min-width: 521px) {
    .benefits {
        flex-direction: row;
        gap: 40px;
        padding: 0 12px;
    }

    /* flex:1 only makes sense as a width rule in row mode — in column mode (small screens)
       it sets flex-basis:0% on the main (vertical) axis, which fights the explicit height
       and collapses the cards. */
    .benefit-card {
        flex: 1;
    }
}

.benefit-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    padding: 12px;
    width: 100%;
    height: 130px;
    max-width: 500px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.benefit-card svg {
    flex-shrink: 0;
}

.benefit-title {
    color: white;
    font-weight: 600;
    font-size: 18px;
    margin: 0 0 6px;
}

.benefit-text {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    margin: 0;
}

/* SignInButtonsContainer: outer Box widthIn(max=680dp) with its own padding(horizontal=8dp) on
   top of the outer Column's 4dp, Card fillMaxWidth, Column padding 24dp gap 16dp. Same
   width-reduction approach as .benefits so the 8dp gutter is centered, not just on one side. */
.signin-card {
    background: rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: calc(100% - 16px);
    max-width: 664px;
    box-sizing: border-box;
}

.signin-title {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    font-size: 20px;
    text-align: center;
    margin: 0;
    width: 100%;
}

.signin-subtitle {
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    text-align: center;
    margin: 0;
    width: 100%;
}

/* Fixed 300dp button width in Compose, regardless of card width. Text uses Material3's
   LabelLarge token exactly: fontSize 14sp, lineHeight 20sp, letterSpacing 0.1sp,
   fontWeight Medium (500, not Bold), fontFamily FontFamily.SansSerif. Shape isn't customized
   in the app's theme, so Button/OutlinedButton use Material3's default fully-rounded ("pill")
   shape, not a subtly-rounded rectangle. */
.signin-button {
    width: 300px;
    padding: 10px 16px;
    border-radius: 9999px;
    border: none;
    font-family: sans-serif;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.1px;
    font-weight: 400;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 16px;
    box-sizing: border-box;
    transition: filter 0.15s ease, background-color 0.15s ease;
}

/* Google and Email are OutlinedButton in the real screen. ButtonDefaults.outlinedButtonBorder()
   uses ColorSchemeKeyTokens.OutlineVariant, NOT the theme's "outline" color — and this app's
   LightColorsNew never overrides outlineVariant, so it falls back to Material3's default
   (PaletteTokens.NeutralVariant80 = rgb(202,196,208) ≈ #cac4d0, a light gray), even with a
   custom containerColor. */
.signin-button.google {
    background: #ffffff;
    color: #1f1f1f;
    border: 1px solid #cac4d0;
}

.signin-button.google:hover {
    background: #f7f7f7;
}

.signin-button.facebook {
    background: #1877f2;
    color: #ffffff;
}

.signin-button.facebook:hover {
    filter: brightness(1.08);
}

.signin-button.email {
    background: #006a8e;
    color: #ffffff;
    border: 1px solid #cac4d0;
}

.signin-button.email:hover {
    filter: brightness(1.1);
}

.signin-button svg {
    flex-shrink: 0;
}

.legal-links {
    color: rgba(255, 255, 255, 0.65);
    font-size: 12px;
    text-align: center;
    margin: 24px 0 0;
    width: 100%;
}

.legal-links a {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    text-decoration: underline;
}

/* EmailPasswordSignInScreen.kt: AuthPageLayout (Box contentAlignment=TopCenter fillMaxSize,
   Column padding 16dp/16dp/70dp-top, widthIn max=420dp). The Column's verticalArrangement is
   Center, but since the Column has no height modifier it's only as tall as its content, so
   Center has no visible effect — the card is pinned near the top by the 70dp padding, not
   centered in the viewport. No hero image here — the page sits on the app's plain
   MaterialTheme background (BackgroundLight, #fefefe). */
/* EmailPasswordSignInScreen.kt wraps its Content in AnimatedVisibility with a 400ms fadeIn. */
@keyframes auth-page-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.auth-page {
    min-height: 100vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fefefe;
    padding: 70px 16px 32px;
    animation: auth-page-fade-in 0.4s ease;
}

.auth-page > * {
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
}

/* LogoComponent.kt: 56dp Image + 8dp spacer + titleMedium text (Color(0xFF3A352F) @ 85% alpha)
   + 16dp spacer. */
.auth-logo {
    width: 56px;
    height: 56px;
    display: block;
    margin: 0 auto 8px;
}

.auth-brand {
    color: rgba(58, 53, 47, 0.85);
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    margin: 0 0 16px;
}

/* FormSectionCard.kt: Card(containerColor=surface #fefefd, elevation 4dp, shape 20dp radius),
   inner Column padding 24dp, items centered, margin-bottom 24dp. */
.form-section-card {
    background: #fefefd;
    border-radius: 20px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
}

/* Wraps the email/password fields + submit button in a real <form> (for native Enter-to-submit
   behavior) without changing the visual layout — needs its own width/flex since
   .form-section-card uses align-items: center, not stretch, so an unstyled <form> would
   otherwise shrink-to-fit instead of taking the full width its children expect. */
.auth-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* headlineSmall, onSurface (#2e2c28), bottom padding 4dp. */
.form-title {
    color: #2e2c28;
    font-size: 24px;
    font-weight: 400;
    margin: 0 0 4px;
    width: 100%;
    text-align: center;
}

/* ForgotPasswordScreen.kt's subtitle: bodyMedium, onSurface @ 70% alpha, bottom padding 4dp. */
.form-subtitle {
    color: rgba(46, 44, 40, 0.7);
    font-size: 14px;
    margin: 0 0 4px;
    width: 100%;
    text-align: center;
}

/* ErrorRow: colorScheme.error (#b00020), bottom padding 16dp when present; reserves a 20dp-tall
   Spacer when empty so the card doesn't jump once an error appears. Always rendering this
   (rather than conditionally) reproduces that reserved space. */
.auth-error {
    color: #b00020;
    font-size: 14px;
    min-height: 20px;
    margin: 0 0 16px;
    width: 100%;
    text-align: center;
}

/* EmailRow/PasswordRow: Material3 OutlinedTextField — extraSmall shape (4dp), outline border
   (#005b6e unfocused / primary #006a8e focused), fillMaxWidth, default 56dp height, with a
   label that floats above the border instead of vanishing like a plain HTML placeholder. The
   input's placeholder is a single space (set in EmailSignInPage.kt) purely so :placeholder-shown
   reflects emptiness — it's never actually displayed. */
.auth-input-wrapper {
    position: relative;
    width: 100%;
    margin: 6px 0;
}

.auth-input {
    width: 100%;
    height: 56px;
    box-sizing: border-box;
    border: 1px solid #005b6e;
    border-radius: 4px;
    padding: 0 16px;
    font-size: 16px;
    font-family: sans-serif;
    color: #2e2c28;
    background: transparent;
}

.auth-input:focus {
    outline: none;
    border: 2px solid #006a8e;
}

.auth-input-label {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: rgba(46, 44, 40, 0.6);
    background: #fefefd;
    padding: 0 4px;
    pointer-events: none;
    transition: top 0.15s ease, font-size 0.15s ease, color 0.15s ease;
}

.auth-input:focus + .auth-input-label,
.auth-input:not(:placeholder-shown) + .auth-input-label {
    top: 0;
    font-size: 12px;
}

.auth-input:focus + .auth-input-label {
    color: #006a8e;
}

/* ForgotPasswordRow: Row fillMaxWidth, Arrangement.End, top padding 8dp. */
.forgot-password-row {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

/* TextButton default styling: primary-colored label, no background. Material3's TextButton
   shows a hover/pressed state-layer overlay (primary @ low alpha) — reproduced here as a
   background tint, since a plain color-only label gave no feedback on hover. */
.text-button {
    background: none;
    border: none;
    border-radius: 8px;
    color: #006a8e;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    padding: 8px 12px;
    transition: background-color 0.15s ease;
}

.text-button:hover {
    background: rgba(0, 106, 142, 0.08);
}

/* Auth pages deviate from shared.css .primary-button: no border/shadow (sits on a
   translucent card over a dark hero image — a border would add noise), top margin to
   separate from the form fields above, and brightness hover (more visible on dark). */
.auth-page .primary-button,
.auth-message-page .primary-button {
    margin: 24px 0 0;
    border: none;
    box-shadow: none;
    transition: filter 0.15s ease;
}

.auth-page .primary-button:not(:disabled):not(.loading):hover,
.auth-message-page .primary-button:not(:disabled):not(.loading):hover {
    opacity: 1;
    filter: brightness(1.08);
    box-shadow: 0 2px 8px rgba(0, 106, 142, 0.4);
}

/* PrimaryButton shows a 24dp CircularProgressIndicator (contentColor = white) in place of the
   label while isLoading, not a relabeled button. */
.button-spinner {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 2.5px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: button-spinner-spin 0.7s linear infinite;
}

@keyframes button-spinner-spin {
    to {
        transform: rotate(360deg);
    }
}

/* "Don't have an account? Create account" row below the card. */
.create-account-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.create-account-row p {
    color: rgba(30, 30, 30, 0.7);
    font-size: 14px;
    margin: 0;
}

/* VerifyEmailScreen.kt / ResetPasswordConfirmationScreen.kt: a plain Box(TopCenter) + Column,
   no card and no logo — padding top 80dp, max-width 400dp, fade-in matches .auth-page. */
.auth-message-page {
    min-height: 100vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fefefe;
    padding: 80px 16px 32px;
    animation: auth-page-fade-in 0.4s ease;
}

.auth-message-page > * {
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
    text-align: center;
}

.auth-message-title {
    color: #2e2c28;
    font-size: 24px;
    font-weight: 400;
    margin: 0 0 24px;
}

.auth-message-text {
    color: #1e1e1e;
    font-size: 16px;
    margin: 0 0 8px;
}

.auth-message-bold {
    font-weight: 600;
}

.auth-message-small {
    color: #1e1e1e;
    font-size: 13px;
    margin: 16px 0 32px;
}

.auth-message-info {
    color: #006a8e;
    font-weight: 600;
    margin: 8px 0 0;
}

.auth-message-page .primary-button {
    margin: 0 0 8px; /* overrides the 24px-top from the combined auth rule above */
}