/* ============================================================================
   Femto Login — Material Design 3 (dark)
   Brand teal mapped to the M3 "primary" role. Tonal surfaces, elevation, the M3
   type scale (Roboto), state layers, and emphasized motion. Used by the login
   card, the profile form, the country picker and the in-context modal.
   Tokens are namespaced --md-* so they never collide with the News --bg/--accent.
   ============================================================================ */

:where(.md-card, .femlog-modal__card, body.femlog-page){
	--md-primary:#5ee0b7; --md-on-primary:#00382a;
	--md-primary-container:#1f4f40; --md-on-primary-container:#a9f2d6;
	--md-secondary-container:#22303f; --md-on-secondary-container:#cfe1f3;
	--md-surface:#0c1017; --md-surface-dim:#090d13;
	--md-sc-lowest:#070a10; --md-sc-low:#11151f; --md-sc:#151a25;
	--md-sc-high:#1a2030; --md-sc-highest:#222a3b;
	--md-on-surface:#e6ebf4; --md-on-surface-variant:#aeb8c9;
	--md-outline:#414b5e; --md-outline-variant:#2a3142;
	--md-error:#ffb4ab; --md-on-error-container:#ffdad6; --md-error-container:#3a1714;
	--md-field-bg:var(--md-sc-high);
	--md-elev-1:0 1px 2px rgba(0,0,0,.42), 0 1px 3px 1px rgba(0,0,0,.28);
	--md-elev-2:0 1px 2px rgba(0,0,0,.42), 0 2px 6px 2px rgba(0,0,0,.30);
	--md-elev-3:0 4px 8px 3px rgba(0,0,0,.30), 0 1px 3px rgba(0,0,0,.45);
	--md-shape-xl:28px; --md-shape-l:16px; --md-shape-m:12px; --md-shape-s:8px; --md-shape-full:999px;
	--md-ease-standard:cubic-bezier(.2,0,0,1);
	--md-ease-decel:cubic-bezier(.05,.7,.1,1);
	--md-ease-accel:cubic-bezier(.3,0,.8,.15);
	--md-dur-1:.2s; --md-dur-2:.3s; --md-dur-3:.4s; --md-dur-4:.5s;
	--md-font:'Roboto','Roboto Flex',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* ── Card ──────────────────────────────────────────────────────────────────── */
.md-card{
	box-sizing:border-box; width:100%; max-width:412px; margin:0 auto;
	background:var(--md-sc-high); color:var(--md-on-surface);
	border:1px solid var(--md-outline-variant); border-radius:var(--md-shape-xl);
	padding:36px 32px 28px; box-shadow:var(--md-elev-2);
	font-family:var(--md-font); -webkit-font-smoothing:antialiased; text-align:center;
}
.md-card *{ box-sizing:border-box; }
.md-card__head{ margin:0 0 24px; }
.md-card__headline{ margin:0 0 8px; font-size:26px; line-height:1.2; font-weight:500; letter-spacing:0; color:var(--md-on-surface); }
.md-card__support{ margin:0 auto; max-width:34ch; font-size:14px; line-height:1.5; font-weight:400; color:var(--md-on-surface-variant); letter-spacing:.1px; }
.md-card__badge{ width:56px; height:56px; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; border-radius:var(--md-shape-full); background:var(--md-primary-container); color:var(--md-on-primary-container); }
.md-card__badge svg{ width:28px; height:28px; }
.md-card__foot{ margin:20px 0 0; font-size:12px; line-height:1.5; color:var(--md-on-surface-variant); opacity:.85; }

/* ── Google button (Nextend) ───────────────────────────────────────────────── */
.md-google{ display:flex; flex-direction:column; align-items:stretch; gap:10px; }
.md-google a, .md-google .nsl-button{ width:100%!important; box-sizing:border-box; }
.md-google .nsl-button{ border-radius:var(--md-shape-full)!important; box-shadow:var(--md-elev-1)!important; transition:box-shadow var(--md-dur-1) var(--md-ease-standard), transform var(--md-dur-1) var(--md-ease-standard); }
.md-google .nsl-button:hover{ box-shadow:var(--md-elev-2)!important; }
.md-google .nsl-button:active{ transform:scale(.985); }

/* ── Text fields (M3 outlined) ─────────────────────────────────────────────── */
.md-form{ display:flex; flex-direction:column; gap:20px; text-align:start; margin-top:4px; }
.md-field{ position:relative; display:flex; align-items:center; min-height:56px; border:1px solid var(--md-outline); border-radius:var(--md-shape-s); background:transparent; transition:border-color var(--md-dur-1) var(--md-ease-standard); cursor:text; }
.md-field:hover{ border-color:var(--md-on-surface-variant); }
.md-field:focus-within{ border-color:var(--md-primary); box-shadow:inset 0 0 0 1px var(--md-primary); }
.md-field__icon{ position:absolute; inset-inline-start:14px; top:50%; transform:translateY(-50%); width:22px; height:22px; color:var(--md-on-surface-variant); pointer-events:none; }
.md-field__icon svg{ width:22px; height:22px; }
.md-field__input{ width:100%; border:0!important; outline:0!important; background:transparent!important; box-shadow:none!important; margin:0!important; min-height:auto!important; color:var(--md-on-surface)!important; -webkit-text-fill-color:var(--md-on-surface)!important; caret-color:var(--md-primary); font-family:var(--md-font)!important; font-size:16px!important; line-height:1.4; padding:16px 44px 16px 46px!important; border-radius:inherit; appearance:none; -webkit-appearance:none; }
.md-field__input::placeholder{ color:transparent!important; -webkit-text-fill-color:transparent!important; }
.md-field__input:-webkit-autofill{ -webkit-text-fill-color:var(--md-on-surface)!important; transition:background-color 9999s; }
select.md-field__input option{ color:#111!important; background:#fff; }
.md-field__label{ position:absolute; inset-inline-start:42px; top:50%; transform:translateY(-50%); padding:0 6px; font-size:16px; color:var(--md-on-surface-variant); pointer-events:none; background:var(--md-field-bg); transition:transform var(--md-dur-1) var(--md-ease-standard), font-size var(--md-dur-1) var(--md-ease-standard), color var(--md-dur-1) var(--md-ease-standard); white-space:nowrap; }
.md-field:focus-within .md-field__label,
.md-field__input:not(:placeholder-shown) ~ .md-field__label,
.md-field--select .md-field__label{ top:0; transform:translateY(-50%) scale(.86); font-size:16px; }
.md-field:focus-within .md-field__label{ color:var(--md-primary); }
.md-field--error{ border-color:var(--md-error)!important; box-shadow:inset 0 0 0 1px var(--md-error)!important; }
.md-field--error .md-field__label{ color:var(--md-error)!important; }
.md-field--error .md-field__icon{ color:var(--md-error); }
.md-field__trailing{ position:absolute; inset-inline-end:14px; top:50%; transform:translateY(-50%); width:22px; height:22px; color:var(--md-on-surface-variant); pointer-events:none; transition:transform var(--md-dur-2) var(--md-ease-standard); }
.md-field__trailing svg{ width:22px; height:22px; }
.md-combobox[aria-expanded="true"] .md-field__trailing{ transform:translateY(-50%) rotate(180deg); }
.md-field__line{ display:none; }
select.md-field__input{ cursor:pointer; padding-inline-end:44px; }
select.md-field__input option{ color:#111; }

/* ── Country combobox (enhanced) ───────────────────────────────────────────── */
.md-combobox{ position:relative; }
.femlog-js .md-combobox .md-native{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.md-combobox__menu{ position:absolute; z-index:50; inset-inline:0; top:calc(100% + 6px); margin:0; padding:6px; list-style:none; max-height:288px; overflow-y:auto; background:var(--md-sc-highest); border:1px solid var(--md-outline-variant); border-radius:var(--md-shape-m); box-shadow:var(--md-elev-3); transform-origin:top center; animation:mdMenu var(--md-dur-2) var(--md-ease-decel); scrollbar-width:thin; scrollbar-color:var(--md-outline) transparent; }
.md-combobox__menu::-webkit-scrollbar{ width:8px; }
.md-combobox__menu::-webkit-scrollbar-thumb{ background:var(--md-outline); border-radius:8px; }
.md-combobox__option{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:var(--md-shape-s); font-size:15px; color:var(--md-on-surface)!important; cursor:pointer; position:relative; transition:background-color var(--md-dur-1) var(--md-ease-standard); }
.md-combobox__option .flag{ font-size:20px; line-height:1; width:24px; text-align:center; }
.md-combobox__option:hover,
.md-combobox__option.is-active{ background:color-mix(in srgb, var(--md-on-surface) 8%, transparent); }
.md-combobox__option.is-selected{ background:var(--md-primary-container); color:var(--md-on-primary-container)!important; }
.md-combobox__empty{ padding:14px 12px; color:var(--md-on-surface-variant); font-size:14px; text-align:center; }

/* ── Buttons (M3) ──────────────────────────────────────────────────────────── */
.md-btn{ position:relative; isolation:isolate; overflow:hidden; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:48px; padding:0 24px; margin-top:6px; border:0; border-radius:var(--md-shape-full); font-family:var(--md-font); font-size:15px; font-weight:500; letter-spacing:.1px; text-decoration:none; -webkit-tap-highlight-color:transparent; transition:box-shadow var(--md-dur-1) var(--md-ease-standard), transform var(--md-dur-1) var(--md-ease-standard); }
.md-btn:active{ transform:scale(.985); }
.md-btn--filled{ background:var(--md-primary); color:var(--md-on-primary); box-shadow:var(--md-elev-1); }
.md-btn--filled:hover{ box-shadow:var(--md-elev-2); }
.md-btn--tonal{ background:var(--md-secondary-container); color:var(--md-on-secondary-container); }
.md-btn__label{ position:relative; z-index:1; }
.md-state{ position:absolute; inset:0; z-index:0; background:currentColor; opacity:0; transition:opacity var(--md-dur-1) var(--md-ease-standard); }
.md-btn:hover .md-state{ opacity:.08; }
.md-btn:focus-visible{ outline:none; }
.md-btn:focus-visible .md-state{ opacity:.12; }
.md-btn .md-ripple{ position:absolute; z-index:0; border-radius:50%; background:currentColor; opacity:.22; transform:scale(0); animation:mdRipple .5s var(--md-ease-standard) forwards; pointer-events:none; }
.md-btn__spinner{ display:none; width:20px; height:20px; border-radius:50%; border:2.5px solid currentColor; border-top-color:transparent; animation:mdSpin .7s linear infinite; }
.md-btn.is-loading{ pointer-events:none; }
.md-btn.is-loading .md-btn__label{ visibility:hidden; }
.md-btn.is-loading .md-btn__spinner{ display:block; position:absolute; }

/* ── Info list ─────────────────────────────────────────────────────────────── */
.md-info{ list-style:none; margin:0 0 22px; padding:0; text-align:start; }
.md-info li{ display:flex; justify-content:space-between; gap:14px; align-items:center; padding:13px 2px; border-bottom:1px solid var(--md-outline-variant); font-size:14.5px; }
.md-info li:last-child{ border-bottom:0; }
.md-info li span{ color:var(--md-on-surface-variant); }
.md-info li b{ color:var(--md-on-surface); font-weight:500; word-break:break-word; text-align:end; }

/* ── Alert ─────────────────────────────────────────────────────────────────── */
.md-alert{ margin:0 0 18px; padding:12px 14px; text-align:start; background:var(--md-error-container); color:var(--md-on-error-container); border-radius:var(--md-shape-m); font-size:13.5px; line-height:1.5; }

/* ── Success banner ────────────────────────────────────────────────────────── */
.md-success{ display:flex; align-items:center; gap:10px; margin:0 0 18px; padding:12px 14px; text-align:start; background:var(--md-primary-container); color:var(--md-on-primary-container); border-radius:var(--md-shape-m); font-size:13.5px; line-height:1.4; }
.md-success svg{ width:20px; height:20px; flex:none; }

/* ── Disabled (read-only) field, e.g. email ────────────────────────────────── */
.md-field--disabled{ border-style:dashed; opacity:.72; cursor:default; }
.md-field--disabled:hover{ border-color:var(--md-outline); }
.md-field--disabled .md-field__input{ cursor:default; color:var(--md-on-surface-variant)!important; -webkit-text-fill-color:var(--md-on-surface-variant)!important; }

/* ── Sign out (subtle text link under the account form) ────────────────────── */
.md-account__signout{ display:inline-block; margin-top:18px; font-family:var(--md-font); font-size:14px; font-weight:500; color:var(--md-on-surface-variant); text-decoration:none; transition:color var(--md-dur-1) var(--md-ease-standard); }
.md-account__signout:hover{ color:var(--md-error); }

/* ── Motion ────────────────────────────────────────────────────────────────── */
@keyframes mdCard{ from{ opacity:0; transform:scale(.97); } to{ opacity:1; transform:none; } }
@keyframes mdItem{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes mdMenu{ from{ opacity:0; transform:scaleY(.86); } to{ opacity:1; transform:none; } }
@keyframes mdRipple{ to{ transform:scale(2.6); opacity:0; } }
@keyframes mdSpin{ to{ transform:rotate(360deg); } }
.md-enter{ animation:mdCard var(--md-dur-4) var(--md-ease-decel) both; }
.md-enter > *{ animation:mdItem var(--md-dur-4) var(--md-ease-decel) both; }
.md-enter > *:nth-child(1){ animation-delay:.05s; }
.md-enter > *:nth-child(2){ animation-delay:.11s; }
.md-enter > *:nth-child(3){ animation-delay:.17s; }
.md-enter > *:nth-child(4){ animation-delay:.23s; }
.md-enter > *:nth-child(5){ animation-delay:.29s; }

/* ── In-context modal (M3 dialog) ──────────────────────────────────────────── */
.femlog-modal{ position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; padding:20px; }
.femlog-modal[hidden]{ display:none; }
.femlog-modal__overlay{ position:absolute; inset:0; background:rgba(4,7,12,.6); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); animation:mdCard var(--md-dur-2) var(--md-ease-standard); }
.femlog-modal__card{ position:relative; width:100%; max-width:392px; box-sizing:border-box; background:var(--md-sc-high); color:var(--md-on-surface); border:1px solid var(--md-outline-variant); border-radius:var(--md-shape-xl); padding:32px 28px 24px; text-align:center; box-shadow:var(--md-elev-3); font-family:var(--md-font); animation:mdItem var(--md-dur-3) var(--md-ease-decel); }
.femlog-modal__x{ position:absolute; top:12px; inset-inline-end:14px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:var(--md-shape-full); background:transparent; border:0; color:var(--md-on-surface-variant); font-size:22px; line-height:1; cursor:pointer; transition:background-color var(--md-dur-1) var(--md-ease-standard); }
.femlog-modal__x:hover{ background:color-mix(in srgb, var(--md-on-surface) 8%, transparent); color:var(--md-on-surface); }
.femlog-modal__icon{ width:56px; height:56px; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; border-radius:var(--md-shape-full); background:var(--md-primary-container); color:var(--md-on-primary-container); }
.femlog-modal__title{ margin:0 0 8px; font-size:21px; font-weight:500; line-height:1.3; color:var(--md-on-surface); }
.femlog-modal__sub{ margin:0 auto 20px; max-width:32ch; font-size:14px; line-height:1.5; color:var(--md-on-surface-variant); }
.femlog-modal__providers{ display:flex; flex-direction:column; gap:10px; align-items:stretch; }
.femlog-modal__providers a, .femlog-modal__providers .nsl-button{ width:100%!important; box-sizing:border-box; }
.femlog-modal__providers .nsl-button{ border-radius:var(--md-shape-full)!important; box-shadow:var(--md-elev-1)!important; }
.femlog-modal__foot{ margin:18px 0 0; font-size:12px; color:var(--md-on-surface-variant); line-height:1.5; opacity:.85; }
body.femlog-modal-open{ overflow:hidden; }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width:480px){
	.md-card{ padding:30px 22px 24px; border-radius:var(--md-shape-l); }
	.femlog-modal__card{ padding:28px 20px 20px; border-radius:var(--md-shape-l); }
	.md-card__headline{ font-size:24px; }
}

/* ── Reduced motion ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
	.md-enter, .md-enter > *, .femlog-modal__card, .femlog-modal__overlay, .md-combobox__menu{ animation:none!important; }
	.md-field__label, .md-field__trailing, .md-btn, .md-state, .md-google .nsl-button{ transition:none!important; }
	.md-btn .md-ripple{ display:none!important; }
}