/* Caddy serves this at Authelia's entry CSS URL. The query bypasses the wrapper. */
@import url('?upstream=1');

@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/branding/inter-latin-wght-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/branding/inter-latin-ext-wght-normal.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+2020-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Match packages/ui/src/styles.css. Unlayered rules override upstream Tailwind layers. */
:root,
body[data-theme] {
  --font-sans: 'Inter Variable', ui-sans-serif, system-ui, sans-serif;
  --background: oklch(0.985 0.002 260);
  --foreground: oklch(0.21 0.02 265);
  --card: oklch(1 0 0);
  --card-foreground: var(--foreground);
  --popover: var(--card);
  --popover-foreground: var(--foreground);
  --primary: oklch(0.47 0.16 268);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.52 0.02 265);
  --secondary-foreground: var(--foreground);
  --muted: oklch(0.965 0.005 265);
  --muted-foreground: oklch(0.52 0.02 265);
  --accent: oklch(0.955 0.012 268);
  --accent-foreground: oklch(0.3 0.06 268);
  --destructive: oklch(0.58 0.22 27);
  --success: oklch(0.6 0.15 155);
  --border: oklch(0.915 0.007 265);
  --input: oklch(0.9 0.008 265);
  --ring: oklch(0.6 0.14 268);
  --radius: 0.75rem;
  --custom-icon: var(--primary);
  --custom-loading-bar: var(--primary);
  --divider: var(--border);
  color-scheme: light;
}

/* Authelia resolves the configured/system theme on the html element. */
:root[data-theme='dark'],
:root[data-theme='dark'] body,
:root[data-theme='grey'],
:root[data-theme='grey'] body {
  --background: oklch(0.16 0.012 265);
  --foreground: oklch(0.96 0.005 265);
  --card: oklch(0.2 0.014 265);
  --primary: oklch(0.7 0.14 268);
  --primary-foreground: oklch(0.16 0.012 265);
  --secondary: oklch(0.7 0.015 265);
  --muted: oklch(0.25 0.012 265);
  --muted-foreground: oklch(0.7 0.015 265);
  --accent: oklch(0.28 0.03 268);
  --accent-foreground: oklch(0.94 0.02 268);
  --destructive: oklch(0.65 0.2 25);
  --success: oklch(0.7 0.15 155);
  --border: oklch(1 0 0 / 9%);
  --input: oklch(1 0 0 / 13%);
  --ring: oklch(0.6 0.12 268);
  color-scheme: dark;
}

body {
  background: radial-gradient(ellipse at 50% 0%, oklch(0.55 0.18 268 / 6%), transparent 55%)
    var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-feature-settings: 'cv11', 'ss01';
}

#root header {
  border-bottom: 1px solid var(--border);
  background: var(--background);
}

#root header > div {
  min-height: 76px;
  max-width: 1200px;
  padding: 16px 24px;
}

#root header .grow {
  min-height: 36px;
  padding-inline-start: 46px;
  background: url('/branding/logo.svg') left center / 36px no-repeat;
  text-align: start;
}

#root header .grow::before {
  content: 'VC Sandbox';
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.025em;
}

#root header .grow::after {
  content: 'Secure access';
  display: block;
  color: var(--muted-foreground);
  font-size: 12px;
}

#language-button {
  margin-inline-start: 12px;
  border-radius: 8px;
  color: var(--muted-foreground);
  font-size: 13px;
}

:is(#first-factor-stage, #second-factor-stage) {
  min-height: calc(100svh - 77px);
  padding: 40px 20px 64px;
}

:is(#first-factor-stage, #second-factor-stage) > div:first-child {
  max-width: 448px;
  padding: 36px 40px 28px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--card);
  box-shadow:
    0 4px 6px -4px oklch(0.16 0.02 265 / 6%),
    0 20px 60px -24px oklch(0.16 0.02 265 / 18%);
}

:is(#first-factor-stage, #second-factor-stage) img[alt='Logo'] {
  width: 48px;
  height: 48px;
  margin-block: 0 12px;
}

:is(#first-factor-stage, #second-factor-stage) h5 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.35;
}

#first-factor-stage h5::after {
  content: 'Your workspace for verifiable credentials.';
  display: block;
  margin-top: 10px;
  color: var(--muted-foreground);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.6;
}

#form-login {
  margin-block: 20px 16px;
  text-align: start;
}

#form-login input {
  height: 52px;
  border-radius: 10px;
  background: var(--card);
  font-size: 14px;
}

#form-login label {
  font-size: 13px;
}

#sign-in-button {
  height: 44px;
  margin-top: 4px;
  border-radius: 10px;
  text-transform: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: normal;
}

:is(#logout-button, #methods-button, #register-link) {
  text-transform: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: normal;
}

/* The outer card is shared by both steps; remove the nested MFA card. */
#second-factor-stage div:has(> #one-time-password-method) {
  width: 100%;
  min-width: 0;
  margin: 12px 0 20px;
  padding: 24px 0 0;
  border-width: 1px 0 0;
  border-radius: 0;
}

#one-time-password-method h6 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

#one-time-password-method input {
  border-radius: 8px;
  background: var(--background);
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
}

#otp-input {
  display: block;
  width: min(100%, 288px);
  margin: 16px auto 0;
}

#one-time-password-method [id='2fa-container'] > div > div {
  width: 100%;
}

#otp-input [role='group'] {
  display: flex;
  gap: 8px;
}

#otp-input [role='group'] > input {
  flex: 1;
  min-width: 0;
  width: 0;
  height: 44px;
  margin: 0;
  border-color: var(--input);
}

#otp-input input:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

#otp-input input[aria-invalid='true'] {
  border-color: var(--destructive);
}

/* A compact status pill; Authelia still drives the actual countdown and resets. */
#one-time-password-method div:has(> svg > circle[stroke='#FFFFFF']) {
  width: fit-content;
  height: auto;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--background);
}

#one-time-password-method div:has(> svg > circle[stroke='#FFFFFF'])::after {
  content: 'Code refreshes automatically';
  color: var(--muted-foreground);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
}

#one-time-password-method svg:has(> circle[stroke='#FFFFFF']) {
  width: 24px;
  height: 24px;
  flex: none;
  overflow: visible;
}

#one-time-password-method svg[data-totp-state='warning'] {
  --totp-color: light-dark(oklch(0.58 0.15 65), oklch(0.8 0.16 80));
}

#one-time-password-method svg[data-totp-state='critical'] {
  --totp-color: var(--destructive);
}

#one-time-password-method svg circle[stroke='#000'] {
  r: 10px;
  stroke: var(--border);
  stroke-width: 1.5px;
}

#one-time-password-method svg circle[fill='#000'] {
  fill: none;
}

#one-time-password-method svg circle[stroke='#FFFFFF'] {
  stroke: var(--totp-color, var(--primary));
  stroke-width: 0.75px;
  stroke-linecap: round;
  transform-box: view-box;
  transform-origin: center;
  transform: rotate(-90deg) scale(2);
}

#one-time-password-method svg[data-totp-state] circle[stroke='#FFFFFF'] {
  stroke-dasharray: var(--totp-remaining);
}

#one-time-password-method p {
  color: var(--muted-foreground);
  font-size: 13px;
}

:is(#first-factor-stage, #second-factor-stage) a[href*='authelia.com'] {
  color: var(--muted-foreground);
  font-size: 11px;
}

@media (max-width: 480px) {
  #root header > div {
    padding-inline: 20px;
  }

  #language-button span {
    display: none;
  }

  :is(#first-factor-stage, #second-factor-stage) {
    padding: 24px 16px 40px;
  }

  :is(#first-factor-stage, #second-factor-stage) > div:first-child {
    padding: 28px 24px 24px;
    border-radius: 16px;
  }
}