/* One brand palette for the public website and the control panel. */
:root {
  color-scheme: dark;
  --background: #090c11;
  --background-secondary: #0d121a;
  --surface: #111823;
  --surface-hover: #1a2535;
  --surface-elevated: #172130;
  --border: #263244;
  --border-hover: #405779;
  --text-primary: #f1f5f7;
  --text-primary-rgb: 241,245,247;
  --text-secondary: #b0bec9;
  --text-muted: #82929f;
  --accent: #326de6;
  --accent-hover: #79a6ff;
  --accent-rgb: 50,109,230;
  --accent-soft: #326de614;
  --accent-glow: #326de628;
  --accent-contrast: #ffffff;
  --success: #63d5a2;
  --warning: #eac471;
  --error: #f38d99;
  --info: #87b8ec;
  --radius-control: 6px;
  --radius-card: 8px;
  --shadow-soft: 0 12px 36px #00000024;
  --shadow-popover: 0 18px 64px #00000050;
  --font-body: "Manrope", system-ui, sans-serif;
  --font-display: var(--font-body);
  --font: var(--font-body);
  --font-primary: var(--font-body);
  --scrollbar-thumb: #344b6b;
  --scrollbar-thumb-hover: #557aad;
  --ui-duration: 180ms;
  --ui-easing: cubic-bezier(.2,.8,.2,1);
}
/* One unobtrusive scroll treatment for documents and nested dashboard views. */
html, body, body * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
html::-webkit-scrollbar, body::-webkit-scrollbar, body *::-webkit-scrollbar { width: 8px; height: 8px; }
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, body *::-webkit-scrollbar-track { background: transparent; border: 0; box-shadow: none; }
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-thumb { min-height: 40px; border: 2px solid transparent; border-radius: 8px; background: var(--scrollbar-thumb); background-clip: padding-box; }
html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, body *::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover); }
html::-webkit-scrollbar-button, body::-webkit-scrollbar-button, body *::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
html::-webkit-scrollbar-corner, body::-webkit-scrollbar-corner, body *::-webkit-scrollbar-corner { background: transparent; }

/* The reflection is clipped to the transparent mark, never a rectangular backing. */
body img[src*="/assets/images/omnitrix-mark-muted.png"] { filter: brightness(.92) saturate(.94); }
a:is(.brand, .directory-brand):has(> .brand-mark) {
  display: inline-flex;
  inline-size: max-content;
  flex: 0 0 auto;
  justify-self: start;
  align-self: center;
  padding: 0;
  gap: 0;
}
.brand-mark { position: relative; display: inline-grid; flex: 0 0 auto; line-height: 0; }
.brand-mark > img { display: block; grid-area: 1 / 1; }
.brand-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 43%, #a9c7ff40 47%, #eaf3ffa6 50%, #a9c7ff40 53%, transparent 57%) 100% 50% / 350% 100% no-repeat;
  -webkit-mask: url("/assets/images/omnitrix-mark-muted.png") center / contain no-repeat;
  mask: url("/assets/images/omnitrix-mark-muted.png") center / contain no-repeat;
  opacity: 0;
  animation: omnitrix-mark-reflection 7.2s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes omnitrix-mark-reflection {
  0%, 18% { background-position: 100% 50%; opacity: 0; }
  24% { opacity: .1; }
  38% { opacity: .22; }
  52% { opacity: .1; }
  58%, 100% { background-position: 0% 50%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-mark::after { animation: none; opacity: 0; }
}
/* Keep Safari from zooming the page when a touch user edits a field. */
@media (any-pointer: coarse) {
  body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
  body textarea, body select { font-size: 16px !important; }
}