/* avr skin for the AVRown sign-in portal (Authelia). nginx links this file into every portal page.
   Colours, type, shapes and motion come from brand/avr.css; here they are mapped onto Authelia's theme variables,
   so the portal's own components pick them up. Files are local only: the portal's CSP allows nothing else
   (no data: images, no other hosts). */

@font-face { font-family: 'Google Sans Flex'; font-style: normal; font-stretch: 100% 112%; font-weight: 400 900; font-display: swap; src: url(fonts/gsf-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Google Sans Flex'; font-style: normal; font-stretch: 100% 112%; font-weight: 400 900; font-display: swap; src: url(fonts/gsf-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Roboto Flex'; font-style: normal; font-stretch: 100% 112%; font-weight: 400 900; font-display: swap; src: url(fonts/rf-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Roboto Flex'; font-style: normal; font-stretch: 100% 112%; font-weight: 400 900; font-display: swap; src: url(fonts/rf-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

/* ---------- theme: the brand's two schemes on Authelia's variables ---------- */
html[data-theme] {
  --avr-font: "Google Sans Flex", "Roboto Flex", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans: var(--avr-font);
  --default-font-family: var(--avr-font);
  --avr-spring: cubic-bezier(.34, 1.56, .64, 1);
  --avr-out: cubic-bezier(.2, .8, .2, 1);
  --radius: 18px;
}
html[data-theme="light"] {
  --background: #E9EFEF; --foreground: #0B4248;
  --card: #F3F7F7; --card-foreground: #0B4248; --popover: #FFFFFF; --popover-foreground: #0B4248;
  --primary: #5A4FC8; --primary-foreground: #FFFFFF; --secondary: #A23F6E; --secondary-foreground: #FFFFFF;
  --muted: #E2EBEC; --muted-foreground: #3E5F63; --accent: #D9E5E6; --accent-foreground: #0B4248;
  --destructive: #BA1A1A; --destructive-foreground: #FFFFFF;
  --border: #BCCFD1; --input: #BCCFD1; --ring: #5A4FC8; --divider: #BCCFD1;
  --custom-icon: #0B4248; --custom-loading-bar: #5A4FC8;
  --avr-card: color-mix(in oklab, #FFFFFF 78%, transparent); --avr-field: #E2EBEC; --avr-field-hover: #D9E5E6;
  --avr-tonal: #CDE2E3; --avr-on-tonal: #062E33; --avr-field-bg-img: url(starfield-light.svg);
}
html[data-theme="dark"], html[data-theme="grey"], html[data-theme="oled"] {
  --background: #0B4248; --foreground: #D3E3E4;
  --card: #0E4A50; --card-foreground: #D3E3E4; --popover: #115158; --popover-foreground: #D3E3E4;
  --primary: #F2A5C3; --primary-foreground: #3B0D26; --secondary: #C4BCFF; --secondary-foreground: #251A7A;
  --muted: #155A62; --muted-foreground: #A9C4C6; --accent: #1A646C; --accent-foreground: #D3E3E4;
  --destructive: #FFB4AB; --destructive-foreground: #690005;
  --border: #2A6168; --input: #2A6168; --ring: #F2A5C3; --divider: #2A6168;
  --custom-icon: #D3E3E4; --custom-loading-bar: #F2A5C3;
  --avr-card: color-mix(in oklab, #0E4A50 86%, transparent); --avr-field: #155A62; --avr-field-hover: #1A646C;
  --avr-tonal: #1E5B62; --avr-on-tonal: #D3E3E4; --avr-field-bg-img: url(starfield-dark.svg);
  color-scheme: dark;
}

/* ---------- the ground: a star field and one huge star turning very slowly ---------- */
html[data-theme] body {
  background: var(--background) var(--avr-field-bg-img) center / cover fixed no-repeat;
  color: var(--foreground);
  font-family: var(--avr-font);
  -webkit-font-smoothing: antialiased;
}
html[data-theme] body::before {
  content: ""; position: fixed; z-index: 0; pointer-events: none;
  width: 130vmax; aspect-ratio: 1; right: -55vmax; top: -55vmax;
  background: url(star.svg) center / contain no-repeat; opacity: .10;
  animation: avr-turn 140s linear infinite;
}
html[data-theme] #root { position: relative; z-index: 1; }
::selection { background: color-mix(in oklab, var(--primary) 40%, transparent); }

/* ---------- the card that holds every step ---------- */
div[id$="-stage"] > div {
  background: var(--avr-card);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-radius: 34px;
  padding: 28px 28px 20px !important;
  max-width: 440px;
  animation: avr-rise .7s var(--avr-out) both;
}
@media (max-width: 480px) {
  div[id$="-stage"] > div { margin: 0 12px; padding: 24px 18px 16px !important; border-radius: 26px; }
}

/* the logo: the brand's star (the bitmap stays hidden inside the img box) */
div[id$="-stage"] img.mx-auto {
  width: 64px; height: 64px;
  object-position: -9999px 0;
  background: url(star.svg) center / contain no-repeat;
  animation: avr-star-in .9s var(--avr-spring) both;
}

/* the first step's heading: "Sign in" is shared with the button, so the heading's words are set here */
#first-factor-stage h5 { font-size: 0 !important; }
#first-factor-stage h5::after { content: "Sign in to avr"; font-size: 28px; }
html[lang|="ru"] #first-factor-stage h5::after { content: "Вход в avr"; }

/* headings: heavy, wide and round */
div[id$="-stage"] h5, div[id$="-stage"] h4, div[id$="-stage"] h6 {
  font: 720 28px/1.2 var(--avr-font);
  font-variation-settings: "wght" 720, "wdth" 110, "ROND" 100;
  letter-spacing: -0.01em;
  margin-top: 6px;
}

/* ---------- fields: filled, rounded, no browser yellow ---------- */
#root input.peer, #root input.h-14, #root input[type="text"], #root input[type="password"], #root input[type="email"] {
  background: var(--avr-field);
  border: 2px solid transparent;
  border-radius: 18px;
  color: var(--foreground);
  font: 420 16px/1.4 var(--avr-font);
  transition: border-color .2s, background .2s, border-radius .35s var(--avr-spring);
}
#root input.peer:hover, #root input.h-14:hover { background: var(--avr-field-hover); }
#root input.h-14:focus { border-color: var(--primary); box-shadow: none; border-radius: 14px; }
/* a label standing above its field (reset password and settings) */
#root label.text-sm { color: var(--muted-foreground); font: 600 13px/1 var(--avr-font); padding: 0 0 8px 6px; }
#root input.peer:focus { border-color: var(--primary); box-shadow: none; border-radius: 14px; }
#root input.peer + label, #root label.text-muted-foreground { color: var(--muted-foreground); }
#root input.peer:focus + label { color: var(--primary); }
#root input:-webkit-autofill,
#root input:-webkit-autofill:hover,
#root input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--foreground);
  -webkit-box-shadow: 0 0 0 1000px var(--avr-field) inset;
  box-shadow: 0 0 0 1000px var(--avr-field) inset;
  caret-color: var(--foreground);
  transition: background-color 600000s 0s, color 600000s 0s;
}

/* checkbox */
#root button[role="checkbox"], #remember-checkbox {
  width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--muted-foreground);
  transition: border-radius .35s var(--avr-spring), background .2s;
}
#root button[role="checkbox"][data-checked], #remember-checkbox[data-checked] { border-color: var(--primary); background: var(--primary); border-radius: 10px; }

/* ---------- buttons: capsules that spring, no capitals ---------- */
#root button.inline-flex.rounded-md {
  height: 52px; border-radius: 999px; padding: 0 24px;
  text-transform: none; letter-spacing: 0;
  font: 620 16px/1 var(--avr-font); font-variation-settings: "wght" 620, "ROND" 50;
  transition: border-radius .35s var(--avr-spring), transform .3s var(--avr-spring), filter .2s, background .2s;
}
#root button.inline-flex.rounded-md:hover { border-radius: 16px; filter: brightness(1.05); }
#root button.inline-flex.rounded-md:active { transform: scale(.95); }
#root button.inline-flex.rounded-md:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; box-shadow: none; }
#root button.bg-primary, #root button.bg-primary:hover { background: var(--primary); color: var(--primary-foreground); }
/* the second way in (passkey) and other secondary actions: tonal */
#root #passkey-sign-in-button, #root #passkey-sign-in-button:hover,
#root button[id*="cancel"], #root button[id*="cancel"]:hover,
#root button.inline-flex.rounded-md.border, #root button.inline-flex.rounded-md.bg-secondary {
  background: var(--avr-tonal); color: var(--avr-on-tonal); border: 0;
}
#root button.inline-flex.rounded-md svg { width: 20px; height: 20px; }

/* the "or" divider: quiet, lower-case */
#root .relative.flex.items-center.py-2 > span { text-transform: none; letter-spacing: 0; font: 500 14px/1 var(--avr-font); color: var(--muted-foreground); }
#root .bg-border { background: var(--border); }

/* links */
#reset-password-button, #root a.text-primary, #root button.text-primary {
  color: var(--primary); font: 620 15px/1 var(--avr-font); text-decoration: none;
  transition: opacity .2s;
}
#reset-password-button:hover { text-decoration: none; opacity: .8; }

/* language switch: a round chip */
#language-button { background: var(--avr-tonal); color: var(--avr-on-tonal); border-radius: 999px; padding: 8px 12px; transition: border-radius .35s var(--avr-spring); }
#language-button:hover { border-radius: 12px; }

/* menus and dialogs */
#root [role="menu"], [role="menu"], [role="dialog"], [role="listbox"] { border-radius: 18px; background: var(--popover); color: var(--popover-foreground); border: 0; }

/* alerts keep their meaning but get the brand's shape */
#root [role="alert"] { border-radius: 18px; }

/* "powered by" — the portal is ours */
#root a[href*="authelia.com"] { display: none; }

/* loading bars: the brand's colour */
#root .animate-scale-loader { background: var(--primary); border-radius: 999px; }

/* ---------- motion ---------- */
@keyframes avr-turn { to { rotate: 360deg; } }
@keyframes avr-star-in { from { transform: rotate(-120deg) scale(.2); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes avr-rise { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html[data-theme] body::before, div[id$="-stage"] > div, div[id$="-stage"] img.mx-auto { animation: none; }
}