/*
 * KINESIS paper-edition overlay for the Authelia 4.39.20 portal (dark MUI base).
 *
 * Attached at the edge by sidecar/nginx.conf as ONE same-origin <link>. No JS,
 * no CSS imports, no web fonts, no inline data URIs. The only url() is the same-origin
 * mark SVG under /kinesis-theme/ (placeholder /kinesis-theme/kinesis-mark.3b2b10ce242f.svg is replaced by
 * scripts/build.py with the content-hashed file name).
 *
 * Selectors are anchored to what the pinned bundle actually renders:
 *   body[data-theme] > #root > Box > [TopBar, Grid#<name>-stage > Container(xs)
 *   > Grid(container) > [logo item, h5 title, h6 subtitle, form item, footer]]
 * Stable ids used: first-factor-stage, form-login, username-textfield,
 * password-textfield, remember-checkbox, sign-in-button, passkey-sign-in-button,
 * reset-password-button, second-factor-stage, otp-input, methods-dialog,
 * authenticated-stage.
 *
 * Emotion injects its <style> tags AFTER this <link>, so every rule is anchored
 * with #root (or html body[data-theme] for portalled dialogs/snackbars) to win
 * on specificity instead of using !important, except where the app itself sets
 * inline styles (the OTP digit inputs).
 *
 * Nothing here hides, reorders, or removes a control, error, consent or MFA step.
 */

html {
  --k-cream: #f6f2e5;
  --k-card: #fffdf4;
  --k-ink: #171716;
  --k-yellow: #fff34f;
  --k-cyan: #75c9ed;
  --k-magenta: #ee008c;
  --k-sage: #b5d7b3;
  --k-teal: #0b5f7a;
  --k-error: #b3261e;
  --k-error-bg: #fde9e6;
  --k-muted: #55544d;
  --k-line: 2px solid var(--k-ink);
  --k-shadow: 5px 5px 0 var(--k-ink);
  --k-shadow-sm: 3px 3px 0 var(--k-ink);
  --k-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
  background: var(--k-cream);
}

html body[data-theme] {
  background: transparent;
  color: var(--k-ink);
  font-family: var(--k-font);
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---------- decoration: behind everything, never interactive ---------- */
html::before, html::after,
html body[data-theme]::before, html body[data-theme]::after,
html body[data-theme] #root::before, html body[data-theme] #root::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  animation: k-drift 24s ease-in-out infinite alternate;
}
html::before {
  width: min(70vmin, 640px); height: min(70vmin, 640px);
  right: calc(min(70vmin, 640px) * -0.26); top: calc(min(70vmin, 640px) * -0.24);
  border-radius: 50%; background: var(--k-cyan); border: var(--k-line);
}
html body[data-theme]::before {
  width: 120vw; height: 56px; left: -10vw; bottom: 18vh;
  background: var(--k-yellow); border-block: var(--k-line);
  transform: rotate(-12deg);
  animation-duration: 28s;
}
html body[data-theme]::after {
  width: 72px; height: 72px; left: 6vw; top: 12vh;
  background: var(--k-yellow); border: var(--k-line); box-shadow: var(--k-shadow-sm);
  transform: rotate(8deg);
}
html body[data-theme] #root::before {
  width: 28px; height: 28px; right: 12vw; bottom: 14vh; border-radius: 50%;
  background: var(--k-magenta); border: var(--k-line);
  animation-duration: 20s;
}
html body[data-theme] #root::after {
  width: 40px; height: 40px; left: 40vw; top: 6vh;
  background: var(--k-sage); border: var(--k-line); transform: rotate(-10deg);
  animation-duration: 32s;
}
/* dotted floor (halftone), last in tree order but still z-index -1 */
html::after {
  left: 0; right: 0; bottom: 0; height: 34vh;
  background-image: radial-gradient(var(--k-ink) 1.2px, transparent 1.6px);
  background-size: 14px 14px;
  opacity: .22;
  -webkit-mask-image: linear-gradient(to top, #000, transparent);
  mask-image: linear-gradient(to top, #000, transparent);
  animation: none;
}
@keyframes k-drift {
  from { translate: 0 0; }
  to   { translate: 14px -10px; }
}

/* ---------- page layout ---------- */
html body[data-theme] #root [id$="-stage"] {
  padding: 20px 16px 32px;
  text-align: left;
}
html body[data-theme] #root .MuiContainer-maxWidthXs {
  flex: 0 0 auto;
  width: min(480px, calc(100vw - 32px));
  max-width: none;
  margin: 0 auto;
  padding: 22px 20px 24px;
  box-sizing: border-box;
  background: var(--k-card);
  color: var(--k-ink);
  border: var(--k-line);
  border-radius: 2px;
  box-shadow: var(--k-shadow);
}
html body[data-theme] #root .MuiContainer-maxWidthXs .MuiGrid-container { text-align: left; }

/* wordmark: Authelia's logo (svg or img) stays in the DOM but is not painted;
   the KINESIS mark + live text take its place. Same-origin SVG only. */
html body[data-theme] #root .MuiContainer-maxWidthXs > .MuiGrid-container > .MuiGrid-root:first-child {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
html body[data-theme] #root .MuiContainer-maxWidthXs > .MuiGrid-container > .MuiGrid-root:first-child > * {
  display: none;
}
html body[data-theme] #root .MuiContainer-maxWidthXs > .MuiGrid-container > .MuiGrid-root:first-child::before {
  content: ""; flex: none; width: 40px; height: 40px;
  background: url(/kinesis-theme/kinesis-mark.3b2b10ce242f.svg) center / contain no-repeat;
}
html body[data-theme] #root .MuiContainer-maxWidthXs > .MuiGrid-container > .MuiGrid-root:first-child::after {
  content: "KINESIS";
  font-family: var(--k-font); font-weight: 950; font-size: 1.5rem;
  letter-spacing: .06em; line-height: 1; text-transform: uppercase; color: var(--k-ink);
}

/* titles */
html body[data-theme] #root .MuiTypography-h5 {
  margin: 0;
  font-family: var(--k-font);
  font-size: 1.75rem;
  font-weight: 950; letter-spacing: -.02em; line-height: 1.05; text-transform: uppercase;
  color: var(--k-ink);
}
/* sign-in / consent / authenticated card (login layout): big title + workspace chip */
html body[data-theme] #root .MuiContainer-maxWidthXs .MuiTypography-h5 {
  margin: 0 0 6px;
  font-size: clamp(2rem, 8vw, 2.75rem);
  letter-spacing: -.03em; line-height: .95;
}
html body[data-theme] #root .MuiContainer-maxWidthXs .MuiTypography-h5::before {
  content: "Kinesis workspace";
  display: block; width: fit-content; margin: 0 0 12px; padding: 3px 8px;
  border: var(--k-line); border-radius: 2px; background: var(--k-sage);
  font-size: .75rem; font-weight: 800; letter-spacing: .08em; line-height: 1.45; text-transform: uppercase;
}
html body[data-theme] #root .MuiTypography-h6 {
  margin: 0 0 14px; font-family: var(--k-font); font-size: .95rem; font-weight: 500; color: var(--k-muted);
}
html body[data-theme] #root .MuiTypography-root { font-family: var(--k-font); }
html body[data-theme] #root .MuiSvgIcon-root { color: inherit; }

/* ---------- fields: labels above, 52px boxes ---------- */
html body[data-theme] #root .MuiFormControl-root { width: 100%; }
html body[data-theme] #root .MuiInputLabel-root {
  position: static; transform: none; max-width: 100%; margin: 0 0 6px;
  font-size: .8rem; font-weight: 850; letter-spacing: .06em; line-height: 1.45; text-transform: uppercase;
  text-align: left; color: var(--k-ink); pointer-events: auto; overflow: visible; white-space: normal;
}
html body[data-theme] #root .MuiInputLabel-root.Mui-focused { color: var(--k-ink); }
html body[data-theme] #root .MuiInputLabel-root.Mui-error { color: var(--k-error); }
html body[data-theme] #root .MuiInputLabel-root .MuiFormLabel-asterisk { color: var(--k-magenta); }
html body[data-theme] #root .MuiOutlinedInput-root {
  height: 52px; padding: 0; background: var(--k-cream); color: var(--k-ink);
  border-radius: 2px; font-family: var(--k-font); font-size: 1rem;
}
html body[data-theme] #root .MuiOutlinedInput-input {
  box-sizing: border-box; height: 100%; padding: 0 14px;
  color: var(--k-ink); -webkit-text-fill-color: var(--k-ink); caret-color: var(--k-ink);
}
html body[data-theme] #root .MuiOutlinedInput-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px var(--k-cream) inset;
  -webkit-text-fill-color: var(--k-ink);
  caret-color: var(--k-ink);
}
html body[data-theme] #root .MuiOutlinedInput-input::placeholder { color: #7a7869; opacity: 1; }
html body[data-theme] #root .MuiOutlinedInput-notchedOutline {
  top: 0; padding: 0; border: var(--k-line); border-radius: 2px;
}
html body[data-theme] #root .MuiOutlinedInput-notchedOutline legend { display: none; }
html body[data-theme] #root .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline,
html body[data-theme] #root .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border: var(--k-line);
}
html body[data-theme] #root .MuiOutlinedInput-root.Mui-focused {
  outline: 3px solid var(--k-teal); outline-offset: 3px; box-shadow: 0 0 0 3px var(--k-cyan);
}
html body[data-theme] #root .MuiOutlinedInput-root.Mui-error .MuiOutlinedInput-notchedOutline {
  border-color: var(--k-error); box-shadow: inset 0 0 0 1px var(--k-error);
}
html body[data-theme] #root .MuiOutlinedInput-root.Mui-disabled { opacity: .55; background: #e9e5d6; }
html body[data-theme] #root .MuiOutlinedInput-root.Mui-disabled .MuiOutlinedInput-input {
  -webkit-text-fill-color: var(--k-ink);
}

/* password reveal: 44px hit target inside the 52px box */
html body[data-theme] #root .MuiInputAdornment-root { margin: 0; max-height: none; }
html body[data-theme] #root .MuiOutlinedInput-root.MuiInputBase-adornedEnd { padding-right: 4px; }
html body[data-theme] #root .MuiInputAdornment-root .MuiIconButton-root {
  width: 44px; height: 44px; margin: 0; padding: 0;
  display: grid; place-items: center;
  background: var(--k-card); color: var(--k-ink);
  border: var(--k-line); border-radius: 2px;
}
html body[data-theme] #root .MuiInputAdornment-root .MuiIconButton-root:hover,
html body[data-theme] #root .MuiInputAdornment-root .MuiIconButton-root:active {
  background: var(--k-yellow);
}
html body[data-theme] #root .MuiInputAdornment-root .MuiSvgIcon-root { width: 22px; height: 22px; }

/* ---------- buttons ---------- */
html body[data-theme] #root .MuiButton-root,
html body[data-theme] .MuiDialog-root .MuiButton-root {
  min-height: 52px; padding: 0 18px;
  font-family: var(--k-font); font-size: .95rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
  color: var(--k-ink); background: var(--k-cream);
  border: var(--k-line); border-radius: 2px; box-shadow: var(--k-shadow-sm);
  transition: transform .08s, box-shadow .08s;
}
html body[data-theme] #root .MuiButton-root:hover,
html body[data-theme] .MuiDialog-root .MuiButton-root:hover {
  background: var(--k-cream); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--k-ink);
}
html body[data-theme] #root .MuiButton-root:active,
html body[data-theme] .MuiDialog-root .MuiButton-root:active {
  transform: translate(3px, 3px); box-shadow: 0 0 0 var(--k-ink);
}
html body[data-theme] #root .MuiButton-contained,
html body[data-theme] .MuiDialog-root .MuiButton-contained { background: var(--k-yellow); }
html body[data-theme] #root .MuiButton-contained:hover,
html body[data-theme] .MuiDialog-root .MuiButton-contained:hover { background: var(--k-yellow); }
html body[data-theme] #root #passkey-sign-in-button { min-height: 56px; box-shadow: var(--k-shadow); }
html body[data-theme] #root #passkey-sign-in-button .MuiSvgIcon-root,
html body[data-theme] #root #passkey-sign-in-button svg path { fill: var(--k-ink); }
html body[data-theme] #root .MuiButton-root.Mui-disabled,
html body[data-theme] .MuiDialog-root .MuiButton-root.Mui-disabled {
  cursor: not-allowed; opacity: .5; transform: none; box-shadow: none; background: #e9e5d6; color: var(--k-ink);
}
html body[data-theme] #root .MuiButton-root .MuiTouchRipple-root,
html body[data-theme] .MuiDialog-root .MuiButton-root .MuiTouchRipple-root { display: none; }
html body[data-theme] #root .MuiCircularProgress-root { color: var(--k-ink); }

/* ---------- links, checkbox, dividers ---------- */
html body[data-theme] #root .MuiLink-root {
  color: var(--k-ink); font-family: var(--k-font); font-weight: 750;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
}
html body[data-theme] #root .MuiLink-root:hover { background: var(--k-yellow); text-decoration: underline; }
html body[data-theme] #root .MuiCheckbox-root { color: var(--k-ink); }
html body[data-theme] #root .MuiCheckbox-root.Mui-checked { color: var(--k-ink); }
html body[data-theme] #root .MuiCheckbox-root.Mui-disabled { color: var(--k-muted); }
html body[data-theme] #root .MuiFormControlLabel-label { font-weight: 700; color: var(--k-ink); }
html body[data-theme] #root .MuiFormControlLabel-label.Mui-disabled { color: var(--k-muted); }
html body[data-theme] #root .MuiDivider-root { color: var(--k-muted); border-color: var(--k-ink); }
html body[data-theme] #root .MuiDivider-root::before,
html body[data-theme] #root .MuiDivider-root::after { border-top: 2px solid var(--k-ink); }

/* focus: cyan/dark-teal ring with offset on every interactive control */
html body[data-theme] #root :focus-visible,
html body[data-theme] .MuiDialog-root :focus-visible {
  outline: 3px solid var(--k-teal); outline-offset: 3px;
}
html body[data-theme] #root .MuiButton-root:focus-visible,
html body[data-theme] #root .MuiIconButton-root:focus-visible,
html body[data-theme] .MuiDialog-root .MuiButton-root:focus-visible { box-shadow: 0 0 0 3px var(--k-cyan); }

/* ---------- alerts and notifications keep their semantics (red = error) ---------- */
html body[data-theme] #root .MuiAlert-root,
html body[data-theme] .MuiSnackbar-root .MuiAlert-root {
  border: var(--k-line); border-radius: 2px; font-family: var(--k-font); font-weight: 700; text-align: left;
  color: var(--k-ink); background: var(--k-card);
}
html body[data-theme] #root .MuiAlert-standardError { background: var(--k-error-bg); color: var(--k-error); border-color: var(--k-error); }
html body[data-theme] #root .MuiAlert-standardWarning { background: #fff3cd; color: var(--k-ink); }
html body[data-theme] #root .MuiAlert-standardInfo { background: #d6eef9; color: var(--k-ink); }
html body[data-theme] #root .MuiAlert-standardSuccess { background: var(--k-sage); color: var(--k-ink); }
html body[data-theme] .MuiSnackbar-root .MuiAlert-filledError { background: var(--k-error); color: #fff; border-color: var(--k-ink); box-shadow: var(--k-shadow-sm); }
html body[data-theme] .MuiSnackbar-root .MuiAlert-filledWarning { background: var(--k-yellow); color: var(--k-ink); box-shadow: var(--k-shadow-sm); }
html body[data-theme] .MuiSnackbar-root .MuiAlert-filledInfo { background: var(--k-cyan); color: var(--k-ink); box-shadow: var(--k-shadow-sm); }
html body[data-theme] .MuiSnackbar-root .MuiAlert-filledSuccess { background: var(--k-sage); color: var(--k-ink); box-shadow: var(--k-shadow-sm); }

/* ---------- MFA: method dialog (portalled) and OTP digit boxes ---------- */
html body[data-theme] .MuiDialog-root .MuiDialog-paper {
  background: var(--k-card); color: var(--k-ink); background-image: none;
  border: var(--k-line); border-radius: 2px; box-shadow: var(--k-shadow);
  font-family: var(--k-font);
}
html body[data-theme] .MuiDialog-root .MuiDialogContent-root,
html body[data-theme] .MuiDialog-root .MuiTypography-root { color: var(--k-ink); }
html body[data-theme] .MuiDialog-root .method-option .MuiButton-root { min-height: 0; }
html body[data-theme] .MuiDialog-root .method-option .MuiBox-root { fill: currentColor; }

/* react-otp-input sets inline styles; !important is the only way to override them */
html body[data-theme] #root #otp-input { display: block; margin-top: 12px; }
html body[data-theme] #root #otp-input > div { flex-wrap: wrap; justify-content: center; row-gap: 8px; }
html body[data-theme] #root #otp-input input {
  box-sizing: border-box !important;
  width: 40px !important; height: 52px !important; padding: 0 !important;
  margin: 0 4px !important;
  background: var(--k-cream) !important; color: var(--k-ink) !important;
  border: var(--k-line) !important; border-radius: 2px !important;
  font: 850 1.4rem var(--k-font) !important; text-align: center; font-variant-numeric: tabular-nums;
}
html body[data-theme] #root #otp-input input:focus { outline: 3px solid var(--k-teal); outline-offset: 3px; }

/* ---------- top bar: language + account controls, ink on paper, 44px targets ---------- */
html body[data-theme] #root .MuiAppBar-root {
  background: transparent; color: var(--k-ink); box-shadow: none; background-image: none;
}
html body[data-theme] #root .MuiAppBar-root .MuiTypography-root {
  margin: 0; color: var(--k-ink); font-size: .85rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase;
}
html body[data-theme] #root .MuiAppBar-root .MuiTypography-h6 { font-size: 1rem; font-weight: 950; }
/* settings app bar is position:fixed: give it paper so scrolled content never shows through */
html body[data-theme] #root .MuiAppBar-positionFixed {
  background: var(--k-cream); border-bottom: var(--k-line);
}
html body[data-theme] #root .MuiAppBar-root .MuiIconButton-edgeStart { margin: 0 8px 0 0; }
html body[data-theme] #root .MuiAppBar-root .MuiIconButton-root {
  min-width: 44px; min-height: 44px; padding: 0 12px; gap: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--k-ink); background: var(--k-card);
  border: var(--k-line); border-radius: 2px; box-shadow: var(--k-shadow-sm);
}
html body[data-theme] #root .MuiAppBar-root .MuiIconButton-root:hover { background: var(--k-yellow); }
html body[data-theme] #root .MuiAppBar-root .MuiIconButton-root .MuiSvgIcon-root { color: var(--k-ink); fill: currentColor; }
html body[data-theme] #root .MuiAppBar-root .MuiAvatar-root {
  width: 32px; height: 32px; background: var(--k-yellow); color: var(--k-ink);
  border: var(--k-line); border-radius: 50%; font-weight: 900;
}
html body[data-theme] #root .MuiAppBar-root .MuiIconButton-root:focus-visible { outline: 3px solid var(--k-teal); outline-offset: 3px; }

/* menus are portalled out of #root (language list, account menu) */
html body[data-theme] .MuiPopover-paper, html body[data-theme] .MuiMenu-paper {
  background: var(--k-card); color: var(--k-ink); background-image: none;
  border: var(--k-line); border-radius: 2px; box-shadow: var(--k-shadow);
  font-family: var(--k-font);
}
html body[data-theme] .MuiPopover-paper .MuiMenuItem-root {
  min-height: 44px; color: var(--k-ink); font-family: var(--k-font); font-weight: 700;
}
html body[data-theme] .MuiPopover-paper .MuiMenuItem-root:hover,
html body[data-theme] .MuiPopover-paper .MuiMenuItem-root.Mui-focusVisible,
html body[data-theme] .MuiPopover-paper .MuiMenuItem-root.Mui-selected { background: var(--k-yellow); }
html body[data-theme] .MuiPopover-paper .MuiTypography-root,
html body[data-theme] .MuiPopover-paper .MuiListItemText-root { color: var(--k-ink); }
html body[data-theme] .MuiPopover-paper .MuiSvgIcon-root { color: var(--k-ink); }
html body[data-theme] .MuiPopover-paper :focus-visible { outline: 3px solid var(--k-teal); outline-offset: -3px; }

/* ---------- settings (/settings/*): outlined Paper panels, device rows, drawer ---------- */
/* Panels are MuiPaper-outlined (dark grey in the base). Scoped to outlined Papers so the
   AppBar, alerts, dialogs and the login card are untouched. */
html body[data-theme] #root .MuiPaper-outlined:not(.MuiAlert-root) {
  background: var(--k-card); background-image: none; color: var(--k-ink);
  border: var(--k-line); border-radius: 2px; box-shadow: 4px 4px 0 var(--k-ink);
  font-family: var(--k-font);
}
/* nested rows (registered devices): flat cream rows inside the card */
html body[data-theme] #root .MuiPaper-outlined .MuiPaper-outlined:not(.MuiAlert-root) {
  background: var(--k-cream); box-shadow: var(--k-shadow-sm);
}
html body[data-theme] #root .MuiPaper-outlined .MuiTypography-root,
html body[data-theme] #root .MuiPaper-outlined .MuiFormControlLabel-label { color: var(--k-ink); }
html body[data-theme] #root .MuiPaper-outlined .MuiTypography-caption,
html body[data-theme] #root .MuiPaper-outlined .MuiTypography-subtitle2 { color: var(--k-muted); font-weight: 600; }
html body[data-theme] #root .MuiPaper-outlined .MuiTypography-subtitle2 { font-size: .9rem; }
html body[data-theme] #root .MuiPaper-outlined .MuiTypography-caption { overflow-wrap: anywhere; }
html body[data-theme] #root .MuiFormLabel-root { color: var(--k-ink); font-weight: 850; letter-spacing: .06em; text-transform: uppercase; font-size: .8rem; }
html body[data-theme] #root .MuiFormLabel-root.Mui-focused { color: var(--k-ink); }

/* radio buttons (default 2FA method) */
html body[data-theme] #root .MuiRadio-root { min-width: 44px; min-height: 44px; color: var(--k-muted); }
html body[data-theme] #root .MuiRadio-root.Mui-checked { color: var(--k-ink); }
html body[data-theme] #root .MuiRadio-root .MuiSvgIcon-root { color: inherit; }
html body[data-theme] #root .MuiRadio-root.Mui-disabled { color: var(--k-muted); opacity: .6; }

/* icon actions in panels (information / delete): 44px, ink; delete keeps a red indicator */
html body[data-theme] #root .MuiPaper-outlined .MuiIconButton-root {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; margin: 0;
  display: inline-grid; place-items: center;
  color: var(--k-ink); background: var(--k-card);
  border: var(--k-line); border-radius: 2px; box-shadow: 2px 2px 0 var(--k-ink);
}
html body[data-theme] #root .MuiPaper-outlined .MuiIconButton-root:hover { background: var(--k-yellow); }
html body[data-theme] #root .MuiPaper-outlined .MuiIconButton-root[id$="-delete"],
html body[data-theme] #root .MuiPaper-outlined .MuiIconButton-root[aria-label^="Remove"] {
  color: var(--k-error); border-color: var(--k-error); box-shadow: 2px 2px 0 var(--k-error);
}
html body[data-theme] #root .MuiPaper-outlined .MuiIconButton-root[id$="-delete"]:hover,
html body[data-theme] #root .MuiPaper-outlined .MuiIconButton-root[aria-label^="Remove"]:hover { background: var(--k-error-bg); }
html body[data-theme] #root .MuiPaper-outlined .MuiIconButton-root.Mui-disabled { opacity: .5; box-shadow: none; }

/* device row layout: icon | text (takes the slack) | action buttons, no fixed 12-col fractions
   (they leave the 44px buttons ~35px cells on a phone) */
html body[data-theme] #root .MuiPaper-outlined .MuiPaper-outlined .MuiGrid-container.MuiGrid-grid-xs-12 {
  flex-wrap: nowrap; align-items: center; gap: 8px;
}
html body[data-theme] #root .MuiPaper-outlined .MuiPaper-outlined .MuiGrid-container.MuiGrid-grid-xs-12 > .MuiGrid-root {
  flex: 0 0 auto; width: auto; max-width: none;
}
html body[data-theme] #root .MuiPaper-outlined .MuiPaper-outlined .MuiGrid-container.MuiGrid-grid-xs-12 > .MuiGrid-grid-sm-6 {
  flex: 1 1 0; min-width: 0;
}

/* settings drawer (portalled out of #root) */
html body[data-theme] .MuiDrawer-paper {
  background: var(--k-card); background-image: none; color: var(--k-ink);
  border-right: var(--k-line); border-radius: 0; box-shadow: 5px 0 0 var(--k-ink);
  font-family: var(--k-font);
}
html body[data-theme] .MuiDrawer-paper .MuiTypography-root {
  color: var(--k-ink); font-family: var(--k-font);
}
html body[data-theme] .MuiDrawer-paper .MuiTypography-h6 {
  margin: 0; padding: 16px 16px 12px; font-size: 1.1rem; font-weight: 950; letter-spacing: -.01em; text-transform: uppercase;
}
html body[data-theme] .MuiDrawer-paper .MuiDivider-root { border-color: var(--k-ink); border-bottom-width: 2px; opacity: 1; }
html body[data-theme] .MuiDrawer-paper .MuiListItemButton-root {
  min-height: 48px; color: var(--k-ink); border-bottom: 2px solid transparent;
}
html body[data-theme] .MuiDrawer-paper .MuiListItemButton-root:hover { background: var(--k-cream); }
html body[data-theme] .MuiDrawer-paper .MuiListItemButton-root.Mui-selected,
html body[data-theme] .MuiDrawer-paper .MuiListItemButton-root.Mui-selected:hover {
  background: var(--k-yellow); box-shadow: inset 5px 0 0 var(--k-ink);
}
html body[data-theme] .MuiDrawer-paper .MuiListItemButton-root.Mui-selected .MuiTypography-root { font-weight: 900; }
html body[data-theme] .MuiDrawer-paper .MuiListItemButton-root.Mui-focusVisible,
html body[data-theme] .MuiDrawer-paper .MuiListItemButton-root:focus-visible {
  outline: 3px solid var(--k-teal); outline-offset: -3px; background: var(--k-cream);
}
html body[data-theme] .MuiDrawer-paper .MuiListItemText-primary { font-weight: 700; }
html body[data-theme] .MuiDrawer-paper .MuiListItemText-secondary { color: var(--k-muted); }
html body[data-theme] .MuiDrawer-paper .MuiListItemIcon-root { min-width: 40px; color: var(--k-ink); }
html body[data-theme] .MuiDrawer-paper .MuiListItemIcon-root .MuiSvgIcon-root { color: var(--k-ink); }
html body[data-theme] .MuiDrawer-paper .MuiListItemIcon-root .MuiSvgIcon-colorError { color: var(--k-error); }

/* page-load spinner bars carry an inline white background: keep them visible on paper */
html body[data-theme] #root span[style*="ScaleLoader"] { background-color: var(--k-ink) !important; }

/* footer attribution stays visible and legible */
html body[data-theme] #root .MuiContainer-maxWidthXs a[href*="authelia"] { color: var(--k-muted); }

@media (max-width: 420px) {
  html body[data-theme] #root [id$="-stage"] { padding-top: 14px; }
  html body[data-theme] #root .MuiContainer-maxWidthXs { padding: 18px 16px 20px; }
  html body[data-theme]::after { width: 48px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  html::before, html::after,
  html body[data-theme]::before, html body[data-theme]::after,
  html body[data-theme] #root::before, html body[data-theme] #root::after { animation: none; }
  html body[data-theme] #root .MuiButton-root,
  html body[data-theme] .MuiDialog-root .MuiButton-root { transition: none; }
  html body[data-theme] #root .MuiButton-root:hover,
  html body[data-theme] #root .MuiButton-root:active,
  html body[data-theme] .MuiDialog-root .MuiButton-root:hover,
  html body[data-theme] .MuiDialog-root .MuiButton-root:active { transform: none; }
}