/* nf6 skin for the Authelia portal at auth.nf6.sh (Authelia 4.39, MUI 7).
   Loaded by nginx sub_filter as a same-origin <link> (CSP style-src 'self'); no inline styles,
   no scripts. Authelia still renders and decides everything; this file only restyles it.

   Same sky as the nf6 front door (apps/home/internal/web/static/style.css): night sky with a
   planet rising along the bottom, Martian Mono Wide for the wordmark only, system sans for
   everything people read. The planet is the one bold thing; the form stays quiet.

   Selectors: Authelia's emotion styles are single generated classes inserted at the top of
   <head>, so `body .Mui…` (0,1,1) or an id beats them without !important. Pin to ids and
   Mui*-root classes only (stable across 4.39.x); recheck on an Authelia major/MUI upgrade. */

@font-face {
  font-family: "Martian Wide";
  src: url(MartianMono-sWdBd.otf) format("opentype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --sky-top: #070d26;
  --sky-low: #16205a;
  --ink: #eef1fb;
  --muted: #a3aed0;
  --faint: #6f7ba3;
  --surface: rgba(12, 19, 50, 0.72);
  --field: rgba(7, 13, 38, 0.55);
  --line: rgba(143, 160, 220, 0.22);
  --line-hi: rgba(176, 192, 245, 0.45);
  --accent: #8fe3cf;
  --accent-hi: #b4f0e1;
  --on-accent: #06122e;
  --moon: rgba(143, 227, 207, 0.1);
  --error: #ffa3a3;
  --g-body: #0b1440;
  --g-body-lit: #1b2b6c;
  --g-rim: rgba(143, 227, 207, 0.55);
  --glow: rgba(110, 160, 255, 0.24);
  --star: rgba(201, 211, 255, 0.85);
  --shadow: 0 30px 80px -30px rgba(0, 0, 8, 0.75);
  --wide: "Martian Wide", ui-monospace, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --sky-top: #c9d6ea;
    --sky-low: #eef2f8;
    --ink: #121c42;
    --muted: #46547d;
    --faint: #6d7898;
    --surface: rgba(255, 255, 255, 0.82);
    --field: rgba(255, 255, 255, 0.9);
    --line: rgba(30, 50, 110, 0.16);
    --line-hi: rgba(30, 50, 110, 0.34);
    --accent: #0c6b5d;
    --accent-hi: #0a594d;
    --on-accent: #ffffff;
    --moon: rgba(12, 107, 93, 0.09);
    --error: #b42318;
    --g-body: #c3d0e8;
    --g-body-lit: #f3f6fb;
    --g-rim: rgba(255, 255, 255, 0.9);
    --glow: rgba(255, 255, 255, 0.6);
    --star: transparent;
    --shadow: 0 30px 70px -34px rgba(20, 35, 80, 0.45);
    color-scheme: light;
  }
}

/* ---- page: sky, stars, layout ------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  background:
    radial-gradient(120vmax 60vmax at 50% 108%, var(--glow), transparent 62%),
    linear-gradient(180deg, var(--sky-top), var(--sky-low));
  background-color: var(--sky-top);
  background-attachment: fixed;
  min-height: 100%;
}
html body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  overflow-x: hidden;
  color: var(--ink);
  font: 16px/1.5 var(--sans);
  /* a sparse, fixed star field (dark only; --star is transparent in daylight) */
  background:
    radial-gradient(1px 1px at 12% 18%, var(--star), transparent 60%),
    radial-gradient(1px 1px at 27% 62%, var(--star), transparent 60%),
    radial-gradient(1.5px 1.5px at 41% 9%, var(--star), transparent 60%),
    radial-gradient(1px 1px at 58% 33%, var(--star), transparent 60%),
    radial-gradient(1px 1px at 71% 12%, var(--star), transparent 60%),
    radial-gradient(1.5px 1.5px at 86% 41%, var(--star), transparent 60%),
    radial-gradient(1px 1px at 93% 7%, var(--star), transparent 60%),
    radial-gradient(1px 1px at 6% 47%, var(--star), transparent 60%),
    radial-gradient(1px 1px at 49% 52%, var(--star), transparent 60%),
    radial-gradient(1px 1px at 78% 66%, var(--star), transparent 60%),
    transparent;
  background-attachment: fixed;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
}
/* a grid item, so z-index works unpositioned and the language pill anchors to the page */
html body #root { grid-row: 2; z-index: 1; min-width: 0; }
body ::selection { background: var(--accent); color: var(--on-accent); }

/* the planet: a huge disc whose rim rises above the bottom edge, behind everything */
.nf6-planet {
  position: fixed; z-index: 0; pointer-events: none;
  left: 50%; top: calc(100% - clamp(70px, 13vh, 150px));
  width: 360vmax; height: 360vmax; margin-left: -180vmax;
  border-radius: 50%;
  background: radial-gradient(closest-side at 50% 6%, var(--g-body-lit), var(--g-body) 70%);
  box-shadow: 0 -1px 0 0 var(--g-rim), 0 -30px 120px 10px var(--glow);
  animation: nf6-rise 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes nf6-rise { from { transform: translateY(48px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .nf6-planet { animation: none; } }

/* ---- the wordmark (nothing else: the public page says nothing about what nf6 is) ------------- */
.nf6-brand {
  grid-row: 1; position: relative; z-index: 1;
  padding: max(20px, env(safe-area-inset-top)) var(--gutter) 0;
  color: var(--ink);
}
.nf6-mark {
  margin: 0; font: 700 22px/1 var(--wide); letter-spacing: -0.03em;
}
@media (min-width: 960px) {
  /* out of the grid flow so the card centres in the full viewport */
  .nf6-brand { position: absolute; top: 0; left: 0; padding: 40px var(--gutter) 0; }
  .nf6-mark { font-size: 26px; }
}

/* ---- Authelia's frame --------------------------------------------------------------------- */
/* loading screen (before React mounts the stage) */
body #root > .MuiBox-root.hidden,
body #root > .MuiBox-root.hidden .MuiGrid-root { background: transparent; }
body #root .MuiTypography-root,
body .MuiButton-root,
body .MuiInputBase-root,
body .MuiFormLabel-root,
body .MuiMenuItem-root,
body .MuiAlert-root,
body .MuiTooltip-tooltip { font-family: var(--sans); }

/* language switcher: a quiet pill pinned top-right on every width */
body #root header.MuiAppBar-root {
  position: absolute; top: 0; right: 0; width: auto; background: none; box-shadow: none;
  color: var(--muted);
}
body #root header.MuiAppBar-root .MuiToolbar-root { min-height: 0; padding: max(14px, env(safe-area-inset-top)) var(--gutter) 0 0; }
body #language-button {
  color: var(--muted); border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 12px 5px 9px; gap: 6px;
}
body #language-button:hover { color: var(--ink); border-color: var(--line-hi); background: transparent; }
body #language-button svg { width: 18px; height: 18px; }
body #language-button .MuiTypography-root { font-size: 13.5px; margin: 0; }

/* every stage (first factor, second factor, consent, reset, ...) */
body #root [id$="-stage"] {
  min-height: auto;
  padding: 22px 0 calc(clamp(70px, 13vh, 150px) + 24px);
  align-items: flex-start;
}
@media (min-width: 960px) {
  body #root > .MuiBox-root:not(.hidden) { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
  body #root [id$="-stage"] {
    flex: 1; align-items: center;
    padding: 40px var(--gutter) calc(clamp(70px, 13vh, 150px) + 24px);
  }
}

/* the card */
body #root [id$="-stage"] > .MuiContainer-root {
  max-width: 440px;
  margin: 0 var(--gutter);
  padding: 30px 28px 22px;
  background: var(--surface);
  border: 1px solid var(--line-hi);
  border-radius: 24px;
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  color: var(--ink);
}
body #root [id$="-stage"] > .MuiContainer-root { min-width: 0; max-width: min(440px, calc(100% - 2 * var(--gutter))); }
/* the 2FA method panel: Authelia pads it 32px with a grey border, too wide for a phone */
body #root #second-factor-stage .MuiGrid-direction-xs-column > .MuiBox-root {
  padding: 22px 12px; border: 1px solid var(--line); border-radius: 16px;
}
@media (min-width: 520px) {
  body #root [id$="-stage"] > .MuiContainer-root { margin: 0 auto; padding: 38px 36px 26px; }
}
@media (min-width: 960px) {
  body #root [id$="-stage"] > .MuiContainer-root { margin: 0 auto; width: 100%; }
}

/* Authelia's generic person glyph (and the logo slot): the wordmark already says whose this is */
body #root #UserSvg,
body #root [id$="-stage"] img[alt="Logo"] { display: none; }

body #root [id$="-stage"] .MuiTypography-h5 {
  margin: 0 0 4px; color: var(--ink);
  font-size: 26px; line-height: 1.2; font-weight: 650; letter-spacing: -0.02em;
}
body #root [id$="-stage"] .MuiTypography-h6 { color: var(--muted); font-size: 15px; font-weight: 500; }
/* only plain text inherits; MUI's color="error"/"warning" typography keeps its colour */
body #root .MuiTypography-root:not(:where([class*="MuiTypography-color"], [class*="Error"], [class*="error"])) { color: inherit; }
body #root [id$="-stage"] .MuiTypography-body1,
body #root [id$="-stage"] .MuiTypography-body2 { color: var(--ink); }
body #root [id$="-stage"] .MuiFormControlLabel-label { color: var(--ink); font-size: 15px; }

/* ---- fields ------------------------------------------------------------------------------- */
body .MuiOutlinedInput-root {
  border-radius: 12px; background: var(--field); color: var(--ink);
}
body .MuiOutlinedInput-notchedOutline { border-color: var(--line-hi); }
body .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline { border-color: var(--muted); }
body .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: var(--accent); border-width: 2px; }
body .MuiOutlinedInput-root.Mui-error .MuiOutlinedInput-notchedOutline { border-color: var(--error); }
body .MuiInputBase-input { color: var(--ink); caret-color: var(--accent); }
body .MuiInputBase-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px var(--field) inset; -webkit-text-fill-color: var(--ink);
  border-radius: inherit;
}
body .MuiInputLabel-root { color: var(--muted); }
body .MuiInputLabel-root.Mui-focused { color: var(--accent); }
body .MuiInputLabel-root.Mui-error { color: var(--error); }
body .MuiFormHelperText-root { color: var(--muted); }
body .MuiFormHelperText-root.Mui-error { color: var(--error); }
body .MuiInputAdornment-root .MuiIconButton-root { color: var(--muted); }

body .MuiCheckbox-root { color: var(--faint); }
body .MuiCheckbox-root.Mui-checked { color: var(--accent); }

/* ---- buttons ------------------------------------------------------------------------------ */
body .MuiButton-root {
  min-height: 48px; border-radius: 12px; box-shadow: none;
  text-transform: none; font-size: 16px; font-weight: 600; letter-spacing: 0;
  transition: background-color 120ms ease, border-color 120ms ease, transform 80ms ease;
}
body .MuiButton-root:active { transform: scale(0.985); }
body .MuiButton-root:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
body .MuiButton-contained,
body .MuiButton-contained:hover { box-shadow: none; }
body .MuiButton-containedPrimary { background: var(--accent); color: var(--on-accent); }
body .MuiButton-containedPrimary:hover { background: var(--accent-hi); }
body .MuiButton-root.Mui-disabled { background: var(--moon); color: var(--faint); }
/* second choices: the passkey button, deny, cancel */
body #passkey-sign-in-button,
body #cancel-button,
body .MuiButton-outlined,
body .MuiButton-containedSecondary {
  background: transparent; color: var(--ink); border: 1px solid var(--line-hi);
}
body #passkey-sign-in-button:hover,
body #cancel-button:hover,
body .MuiButton-outlined:hover,
body .MuiButton-containedSecondary:hover { background: var(--moon); border-color: var(--accent); }
/* Logout | Switch user | Methods: small text actions, not buttons */
body #root [id$="-stage"] .MuiButton-text {
  min-height: 0; padding: 4px 8px; border-radius: 8px;
  color: var(--accent); background: transparent; font-size: 14.5px; font-weight: 500;
}
body #root [id$="-stage"] .MuiButton-text:hover { background: var(--moon); }

body .MuiDivider-root::before,
body .MuiDivider-root::after { border-color: var(--line); }
body .MuiDivider-root { border-color: var(--line); }
body #root .MuiDivider-wrapper .MuiTypography-root {
  color: var(--faint); text-transform: none; font-size: 14px;
}

/* links ("Reset password?", "Methods", "Powered by Authelia") */
body #root .MuiLink-root {
  color: var(--accent); font-size: 14.5px; text-decoration: none; text-underline-offset: 3px;
}
body #root .MuiLink-root:hover { text-decoration: underline; }
body #root .MuiLink-root:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
/* the credit stays, quieter */
body #root [id$="-stage"] a.MuiLink-root[href*="authelia.com"] { color: var(--faint); font-size: 12px; }
body #root [id$="-stage"] a.MuiLink-root[href*="authelia.com"]:hover { color: var(--muted); }

/* ---- second factor, consent, notifications ----------------------------------------------- */
/* the method panel inside the card: no box-in-a-box, just a hairline above it */
body #root [id$="-stage"] .MuiPaper-root:not(.MuiAppBar-root):not(.MuiAlert-root) {
  background: transparent; color: var(--ink); border: 0; border-top: 1px solid var(--line);
  border-radius: 0; box-shadow: none;
}
/* consent: the scopes being granted */
body #root [id$="-stage"] .MuiList-root {
  background: var(--field); border: 1px solid var(--line); border-radius: 14px; text-align: left;
}
body #root [id$="-stage"] .MuiList-root:empty { display: none; }
/* the TOTP countdown (PieChartIcon: ring, disc, sweeping pie) and method glyphs, in the accent */
body #root [id="2fa-container"] svg circle:nth-child(1) { stroke: var(--line-hi); }
body #root [id="2fa-container"] svg circle:nth-child(2) { fill: var(--moon); }
body #root [id="2fa-container"] svg circle:nth-child(3) { stroke: var(--accent); }
body #root [id$="-stage"] .MuiList-root .MuiListItem-root,
body #root [id$="-stage"] .MuiListItemText-primary { color: var(--ink); }
body #root [id$="-stage"] .MuiListItemIcon-root,
/* accent only for neutral glyphs (consent scopes, list icons); success/failure icons keep their colour */
body #root [id$="-stage"] .MuiListItemIcon-root .MuiSvgIcon-root { color: var(--accent); }
/* PasskeyIcon hard-codes fill="#e8eaed", invisible on the daylight card */
body #passkey-sign-in-button svg { fill: currentColor; }
body #root [id$="-stage"] .MuiCheckbox-root .MuiSvgIcon-root { color: inherit; }
body #root [id$="-stage"] .MuiInputAdornment-root .MuiSvgIcon-root { color: inherit; }

/* TOTP digit boxes (react-otp-input renders plain inputs) */
body #root [id$="-stage"] input.otp-container,
body #root [id$="-stage"] .otp-container input,
body #root [id$="-stage"] input[autocomplete="one-time-code"] {
  background: var(--field); color: var(--ink); border: 1px solid var(--line-hi); border-radius: 10px;
  font: 600 22px/1 var(--sans); caret-color: var(--accent);
}
body #root [id$="-stage"] .otp-container input:focus,
body #root [id$="-stage"] input[autocomplete="one-time-code"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

body .MuiAlert-root { border-radius: 12px; }
body .MuiTooltip-tooltip { border-radius: 8px; font-size: 13px; }
body .MuiMenu-paper, body .MuiPopover-paper {
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-hi); border-radius: 14px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}

/* ---- account settings (/settings): its own app-bar-and-drawer layout ----------------------------
   No brand column here (the person is signed in); just the sky, and Authelia's grey chrome swapped
   for the nf6 surfaces. :has() is progressive: without it the page keeps the two-column frame. */
body:has(#settings-menu) .nf6-brand { display: none; }
html body:has(#settings-menu) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
html body:has(#settings-menu) #root { grid-row: 1; grid-column: 1; }
body #root nav.MuiPaper-root:has(#settings-menu) {
  background: var(--surface); color: var(--ink); box-shadow: none; border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
body:has(#settings-menu) #root main .MuiPaper-root {
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-hi); border-radius: 20px;
  box-shadow: var(--shadow); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
body:has(#settings-menu) .MuiDrawer-paper { background: var(--surface); color: var(--ink); border-color: var(--line); }
body:has(#settings-menu) #root .MuiTypography-root { color: inherit; }

/* Authelia's "Authenticated" view is <Box id="authenticated-stage"> inside the method panel, so the
   [id$="-stage"] page rules above (padding, flex) caught it and pushed the tick off centre */
body #root #authenticated-stage { min-height: 0; padding: 0; flex: none; text-align: center; }

/* "Methods" dialog: MUI portals it outside #root, so none of the card rules reach it */
body .MuiBackdrop-root:not(.MuiBackdrop-invisible) { background: rgba(3, 6, 20, 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
body .MuiDialog-paper {
  background: linear-gradient(var(--surface), var(--surface)), var(--sky-top);
  color: var(--ink); border: 1px solid var(--line-hi); border-radius: 20px;
  box-shadow: var(--shadow); width: min(400px, calc(100% - 2 * var(--gutter))); margin: var(--gutter);
  font-family: var(--sans);
}
body .MuiDialogContent-root { padding: 22px 20px 6px; }
body #methods-dialog .method-option .MuiButton-root {
  background: var(--field); color: var(--ink); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: none; padding: 18px 16px; text-transform: none;
}
body #methods-dialog .method-option .MuiButton-root:hover { background: var(--moon); border-color: var(--accent); }
body #methods-dialog .method-option .MuiButton-root:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body #methods-dialog .method-option .MuiTypography-root { font: 500 15px/1.4 var(--sans); color: var(--ink); margin-top: 8px; }
body #methods-dialog .method-option svg { fill: var(--accent); color: var(--accent); }
body #methods-dialog svg circle:nth-child(1) { stroke: var(--line-hi); }
body #methods-dialog svg circle:nth-child(2) { fill: var(--moon); }
body #methods-dialog svg circle:nth-child(3) { stroke: var(--accent); }
body .MuiDialogActions-root { padding: 6px 14px 14px; }
body .MuiDialogActions-root .MuiButton-root { color: var(--accent); text-transform: none; font: 500 15px var(--sans); border-radius: 10px; }
body .MuiDialogActions-root .MuiButton-root:hover { background: var(--moon); }