/* Geist (variable, 300–700) */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("./fonts/geist-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: "Geist";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("./fonts/geist-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: "Geist";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("./fonts/geist-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Geist Mono (variable, 400–500) */
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("./fonts/geist-mono-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: "Geist Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("./fonts/geist-mono-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: "Geist Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("./fonts/geist-mono-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --color-fg: #171717;
  --color-fg-muted: #525252;
  --color-fg-subtle: #737373;
  --color-fg-inverse: #fafafa;
  --color-border: #d4d4d4;
  --color-border-strong: #a3a3a3;
  --color-surface: #ffffff;
  --color-surface-subtle: #fafafa;
  --color-surface-inverse: #171717;
  --color-accent: #059669;
  --color-accent-ring: rgb(5 150 105 / 0.18);
  --color-btn-primary-bg: #171717;
  --color-btn-primary-fg: #fafafa;
  --color-btn-primary-bg-hover: #262626;
  --color-danger-bg: #fff1f2;
  --color-danger-fg: #be123c;
  --color-danger-border: #fecdd3;

  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-full: 9999px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04);
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-fg);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-6);
}

.page--subtle { background: var(--color-surface-subtle); }

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  color: var(--color-fg);
  text-decoration: none;
}

.wordmark__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--color-accent);
}

.wordmark--lg { font-size: var(--text-2xl); }
.wordmark--lg .wordmark__dot {
  width: 0.625rem;
  height: 0.625rem;
}

.login {
  width: 100%;
  max-width: 22rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.login__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  text-align: center;
}

.login__title {
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}

.login__subtitle {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
}

.card {
  position: relative;
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  padding: var(--space-8);
}

.card::before,
.card::after,
.card > .card__corner-bl,
.card > .card__corner-br {
  content: "";
  display: block;
  pointer-events: none;
  position: absolute;
  width: 9px;
  height: 9px;
  background: center / 9px 9px no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'><path d='M4.5 0v9M0 4.5h9' stroke='%23525252'/></svg>");
}

.card::before { top: -5px; left: -5px; }
.card::after { top: -5px; right: -5px; }
.card > .card__corner-bl { bottom: -5px; left: -5px; }
.card > .card__corner-br { bottom: -5px; right: -5px; }

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.field__label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-fg);
}

.input {
  width: 100%;
  height: 2.5rem;
  padding: 0 var(--space-3);
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--color-fg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0;
  outline: 0;
  transition: border-color 120ms, box-shadow 120ms;
}

.input[type="file"] {
  height: auto;
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.input::placeholder { color: var(--color-fg-subtle); }
.input:hover { border-color: var(--color-border-strong); }
.input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-ring);
}

.input--underline {
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  padding: var(--space-2) 0;
  height: auto;
  background: transparent;
}

.input--underline:hover { border-color: var(--color-border-strong); }
.input--underline:focus {
  border-color: var(--color-accent);
  box-shadow: none;
}

.input--code {
  font-family: var(--font-mono);
}

.input--code::placeholder { color: var(--color-fg-muted); }

.input--spaced { letter-spacing: 0.18em; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 2.5rem;
  padding: 0 var(--space-4);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms, box-shadow 120ms;
}

/* Every button lifts on hover. The per-variant background and border tweaks below are too faint
   to read as "clickable" on their own — worst in dark mode, where a plain black shadow is
   invisible, hence mixing the foreground colour in instead of a fixed black. */
.btn:hover:not(:disabled) {
  box-shadow: 0 1px 3px color-mix(in srgb, var(--color-fg) 24%, transparent);
}

.btn--primary {
  background: var(--color-btn-primary-bg);
  color: var(--color-btn-primary-fg);
}

.btn--primary:hover { background: var(--color-btn-primary-bg-hover); }

.btn--primary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.btn--block { width: 100%; }

.muted-link {
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
  text-decoration: none;
}

.muted-link:hover {
  color: var(--color-fg);
  text-decoration: underline;
}

.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
}

.footer-links a {
  color: var(--color-fg-muted);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--color-fg);
  text-decoration: underline;
}

.login--minimal .form { gap: var(--space-5); }

/* --- Auth split (full-bleed two-panel layout for /login, /register, /verify) -- */

.auth-split {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
}

.auth-split__brand {
  display: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-right: 1px solid var(--color-border);
}

.auth-split__brand-inner {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-8);
  padding: var(--space-12);
  height: 100%;
  width: 100%;
}

.auth-split__quote {
  margin: 0;
  max-width: 32rem;
  font-size: var(--text-2xl);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--color-fg);
}

.auth-split__quote p { margin: 0 0 var(--space-4); }

.auth-split__quote-cite {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-fg-subtle);
}

.auth-split__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-fg-subtle);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.auth-split__form {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-10) var(--space-6);
  background: var(--color-surface);
}

@media (min-width: 768px) {
  .auth-split { grid-template-columns: 1fr 1fr; }
  .auth-split__brand { display: block; }
}

/* --- Inspiring backgrounds (aurora / lattice / mix) -------------------------- */

.bg-aurora,
.bg-lattice,
.bg-mix { background: var(--color-surface); }

.bg-aurora__blob {
  position: absolute;
  width: 90%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  translate: -50% -50%;
  filter: blur(var(--a-blur, 38px));
  will-change: transform;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.bg-aurora__blob--1 {
  background: radial-gradient(circle, var(--a-c1, transparent), transparent 60%);
  top: var(--a-y1, 30%); left: var(--a-x1, 30%);
  animation: var(--a-name1, bg-blob-a) var(--a-d1, 28s) ease-in-out infinite;
  animation-delay: var(--a-delay1, 0s);
}

.bg-aurora__blob--2 {
  background: radial-gradient(circle, var(--a-c2, transparent), transparent 60%);
  top: var(--a-y2, 50%); left: var(--a-x2, 70%);
  animation: var(--a-name2, bg-blob-b) var(--a-d2, 32s) ease-in-out infinite;
  animation-delay: var(--a-delay2, 0s);
}

.bg-aurora__blob--3 {
  background: radial-gradient(circle, var(--a-c3, transparent), transparent 60%);
  top: var(--a-y3, 70%); left: var(--a-x3, 50%);
  animation: var(--a-name3, bg-blob-c) var(--a-d3, 36s) ease-in-out infinite;
  animation-delay: var(--a-delay3, 0s);
}

@keyframes bg-blob-a {
  0%   { transform: translate(0%, 0%) scale(1); }
  25%  { transform: translate(28%, 14%) scale(1.08); }
  50%  { transform: translate(8%, 32%) scale(0.95); }
  75%  { transform: translate(-22%, 18%) scale(1.05); }
  100% { transform: translate(0%, 0%) scale(1); }
}
@keyframes bg-blob-b {
  0%   { transform: translate(0%, 0%) scale(1); }
  25%  { transform: translate(-20%, 22%) scale(0.92); }
  50%  { transform: translate(-32%, -14%) scale(1.1); }
  75%  { transform: translate(12%, -18%) scale(1); }
  100% { transform: translate(0%, 0%) scale(1); }
}
@keyframes bg-blob-c {
  0%   { transform: translate(0%, 0%) scale(1); }
  25%  { transform: translate(18%, -24%) scale(1.05); }
  50%  { transform: translate(34%, 4%) scale(0.92); }
  75%  { transform: translate(14%, 26%) scale(1.08); }
  100% { transform: translate(0%, 0%) scale(1); }
}
@keyframes bg-blob-d {
  0%   { transform: translate(0%, 0%) scale(1); }
  25%  { transform: translate(-26%, -8%) scale(1.1); }
  50%  { transform: translate(-12%, 28%) scale(0.95); }
  75%  { transform: translate(20%, 14%) scale(1.04); }
  100% { transform: translate(0%, 0%) scale(1); }
}

.bg-lattice::before, .bg-lattice::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.bg-lattice::before {
  background-image:
    radial-gradient(circle, var(--l-color1) var(--l-size1), transparent calc(var(--l-size1) + 0.6px));
  background-size: var(--l-gap1) var(--l-gap1);
  animation: bg-lattice-pan-far var(--l-speed1, 80s) linear infinite;
}
.bg-lattice::after {
  background-image:
    radial-gradient(circle, var(--l-color2) var(--l-size2), transparent calc(var(--l-size2) + 0.6px));
  background-size: var(--l-gap2) var(--l-gap2);
  animation: bg-lattice-pan-near var(--l-speed2, 40s) linear infinite;
}

@keyframes bg-lattice-pan-far {
  from { background-position: 0 0; }
  to   { background-position: calc(var(--l-gap1) * var(--l-dx)) calc(var(--l-gap1) * var(--l-dy)); }
}
@keyframes bg-lattice-pan-near {
  from { background-position: 0 0; }
  to   { background-position: calc(var(--l-gap2) * var(--l-dx)) calc(var(--l-gap2) * var(--l-dy)); }
}

/* Mix — aurora blobs underneath a parallax lattice */
.bg-mix .bg-aurora__blob { z-index: 0; }
.bg-mix::before, .bg-mix::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
.bg-mix::before {
  background-image:
    radial-gradient(circle, var(--l-color1) var(--l-size1), transparent calc(var(--l-size1) + 0.6px));
  background-size: var(--l-gap1) var(--l-gap1);
  animation: bg-lattice-pan-far var(--l-speed1, 80s) linear infinite;
}
.bg-mix::after {
  background-image:
    radial-gradient(circle, var(--l-color2) var(--l-size2), transparent calc(var(--l-size2) + 0.6px));
  background-size: var(--l-gap2) var(--l-gap2);
  animation: bg-lattice-pan-near var(--l-speed2, 40s) linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .bg-aurora__blob,
  .bg-lattice::before,
  .bg-lattice::after,
  .bg-mix::before,
  .bg-mix::after { animation: none; }
}

/* ============================================================
   THEME SHOWCASE — shared component primitives
   ============================================================ */

:root {
  --color-info-bg: #eff6ff;
  --color-info-fg: #1d4ed8;
  --color-info-border: #bfdbfe;
  --color-warn-bg: #fffbeb;
  --color-warn-fg: #b45309;
  --color-warn-border: #fde68a;
  --color-success-bg: #f0fdf4;
  --color-success-fg: #166534;
  --color-success-border: #bbf7d0;
}

/* --- Layout shell -------------------------------------------- */

.shell {
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: var(--space-10) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.shell__hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.shell__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-fg-subtle);
}

.shell__title {
  font-size: var(--text-3xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}

.shell__lede {
  font-size: var(--text-lg);
  color: var(--color-fg-muted);
  margin: 0;
  max-width: 44rem;
}

.section {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px dashed var(--color-border);
}

.section__title {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

.section__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-fg-subtle);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.cluster--tight {
  gap: var(--space-2);
}

.fingerprint {
  display: inline-block;
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 720px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 720px) {
  .grid-3 { grid-template-columns: 1fr 1fr 1fr; }
}

/* --- Navbar -------------------------------------------------- */

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.navbar--dark {
  background: var(--color-surface-inverse);
  border-color: #262626;
  color: var(--color-fg-inverse);
}

.navbar--dark .wordmark,
.navbar--dark .nav__link { color: var(--color-fg-inverse); }

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.nav__link:hover { color: var(--color-fg); }
.nav__link[aria-current="page"] {
  color: var(--color-fg);
  border-bottom-color: var(--color-fg);
}

.navbar--dark .nav__link[aria-current="page"] {
  color: var(--color-fg-inverse);
  border-bottom-color: var(--color-fg-inverse);
}

/* --- Buttons (extended) ------------------------------------- */

.btn--secondary {
  background: var(--color-surface);
  color: var(--color-fg);
  border-color: var(--color-border);
}

.btn--secondary:hover { border-color: var(--color-border-strong); }

.btn--ghost {
  background: transparent;
  color: var(--color-fg);
}

.btn--ghost:hover { background: var(--color-surface-subtle); }

.btn--accent {
  background: var(--color-accent);
  color: var(--color-fg-inverse);
}

.btn--accent:hover { background: #047857; }

.btn--danger {
  background: var(--color-danger-fg);
  color: var(--color-fg-inverse);
}

.btn--danger:hover { background: #9f1239; }

.btn--sm { height: 2rem; padding: 0 var(--space-3); font-size: var(--text-xs); }
.btn--lg { height: 3rem; padding: 0 var(--space-6); font-size: var(--text-base); }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-group {
  display: inline-flex;
}

.btn-group .btn {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-fg);
  margin-left: -1px;
}

.btn-group .btn:first-child { margin-left: 0; }
.btn-group .btn:hover { border-color: var(--color-border-strong); z-index: 1; position: relative; }
.btn-group .btn[aria-pressed="true"] {
  background: var(--color-fg);
  color: var(--color-fg-inverse);
  border-color: var(--color-fg);
  z-index: 1;
  position: relative;
}

/* --- Typography ---------------------------------------------- */

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-2);
}

.prose h1 { font-size: var(--text-3xl); }
.prose h2 { font-size: var(--text-2xl); }
.prose h3 { font-size: var(--text-xl); }
.prose h4 { font-size: var(--text-lg); }
.prose h5 { font-size: var(--text-base); }
.prose h6 { font-size: var(--text-sm); color: var(--color-fg-muted); }

.prose p { margin: 0 0 var(--space-3); color: var(--color-fg); }
.prose p + p { margin-top: 0; }

.prose small, .text-sm { font-size: var(--text-sm); color: var(--color-fg-muted); }
.text-muted { color: var(--color-fg-muted); }
.text-subtle { color: var(--color-fg-subtle); }
.text-warn { color: var(--color-warn-fg); }
.text-mono { font-family: var(--font-mono); }

.kbd {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 2px 6px;
  border: 1px solid var(--color-border);
  border-bottom-width: 2px;
  background: var(--color-surface);
}

.code-inline {
  font-family: var(--font-mono);
  font-size: 0.85em;
  padding: 2px 4px;
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
}

.blockquote {
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border-left: 2px solid var(--color-fg);
  color: var(--color-fg-muted);
  font-size: var(--text-lg);
  line-height: 1.5;
}

.blockquote__cite {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  color: var(--color-fg-subtle);
}

/* --- Tables -------------------------------------------------- */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.table th,
.table td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.table th {
  font-weight: 500;
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.table tbody tr:hover { background: var(--color-surface-subtle); }
.table--striped tbody tr:nth-child(odd) { background: var(--color-surface-subtle); }

/* --- Form additions ----------------------------------------- */

.textarea {
  width: 100%;
  min-height: 6rem;
  padding: var(--space-3);
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--color-fg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0;
  outline: 0;
  resize: vertical;
  transition: border-color 120ms, box-shadow 120ms;
}

.textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-ring);
}

.select {
  width: 100%;
  height: 2.5rem;
  padding: 0 var(--space-3);
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--color-fg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0;
  outline: 0;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--space-8);
}

.select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-ring);
}

.check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  cursor: pointer;
}

.check input[type="checkbox"],
.check input[type="radio"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-fg);
  margin: 0;
}

.switch {
  --switch-w: 2.25rem;
  --switch-h: 1.25rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  cursor: pointer;
}

.switch input { position: absolute; opacity: 0; }

.switch__slider {
  width: var(--switch-w);
  height: var(--switch-h);
  background: var(--color-border);
  position: relative;
  transition: background 120ms;
}

.switch__slider::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(var(--switch-h) - 4px);
  height: calc(var(--switch-h) - 4px);
  background: var(--color-surface);
  transition: transform 120ms;
}

.switch input:checked + .switch__slider { background: var(--color-fg); }
.switch input:checked + .switch__slider::after {
  transform: translateX(calc(var(--switch-w) - var(--switch-h)));
}

.range {
  -webkit-appearance: none;
  width: 100%;
  height: 2px;
  background: var(--color-border);
  outline: 0;
}

.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: var(--color-fg);
  cursor: pointer;
}

.range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--color-fg);
  border: 0;
  cursor: pointer;
}

.field__hint {
  font-size: var(--text-xs);
  color: var(--color-fg-subtle);
  font-family: var(--font-mono);
}

.field__error {
  font-size: var(--text-xs);
  color: var(--color-danger-fg);
}

/* --- Tabs ---------------------------------------------------- */

.tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--color-border);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tabs__item {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  font-family: inherit;
}

.tabs__item:hover { color: var(--color-fg); }
.tabs__item[aria-selected="true"] {
  color: var(--color-fg);
  border-bottom-color: var(--color-fg);
}

.pills {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pills__item {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
  border: 1px solid transparent;
  cursor: pointer;
  background: none;
  font-family: inherit;
}

.pills__item:hover { border-color: var(--color-border); color: var(--color-fg); }
.pills__item[aria-selected="true"] {
  background: var(--color-fg);
  color: var(--color-fg-inverse);
  border-color: var(--color-fg);
}

/* --- Breadcrumbs & pagination ------------------------------- */

.breadcrumb {
  display: flex;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  font-family: var(--font-mono);
}

.breadcrumb__item + .breadcrumb__item::before {
  content: "/";
  margin-right: var(--space-2);
  color: var(--color-fg-subtle);
}

.breadcrumb a { color: var(--color-fg-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-fg); }
.breadcrumb__item--current { color: var(--color-fg); }

.pagination {
  display: inline-flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pagination__item {
  min-width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  margin-left: -1px;
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
  text-decoration: none;
  font-family: var(--font-mono);
}

.pagination__item:first-child { margin-left: 0; }
.pagination__item:hover { color: var(--color-fg); border-color: var(--color-border-strong); z-index: 1; position: relative; }
.pagination__item[aria-current="page"] {
  background: var(--color-fg);
  color: var(--color-fg-inverse);
  border-color: var(--color-fg);
  z-index: 1;
  position: relative;
}

/* --- Alerts (extended) --------------------------------------- */

.alert--info {
  background: var(--color-info-bg);
  color: var(--color-info-fg);
  border: 1px solid var(--color-info-border);
}

.alert--success {
  background: var(--color-success-bg);
  color: var(--color-success-fg);
  border: 1px solid var(--color-success-border);
}

.alert--warn {
  background: var(--color-warn-bg);
  color: var(--color-warn-fg);
  border: 1px solid var(--color-warn-border);
}

.alert--error {
  background: var(--color-danger-bg);
  color: var(--color-danger-fg);
  border: 1px solid var(--color-danger-border);
}

.alert--plain {
  background: var(--color-surface-subtle);
  color: var(--color-fg);
  border: 1px solid var(--color-border);
}

/* --- Badges -------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-fg-muted);
}

.badge--solid { background: var(--color-fg); color: var(--color-fg-inverse); border-color: var(--color-fg); }
.badge--accent { color: var(--color-accent); border-color: var(--color-accent); }
.badge--danger { color: var(--color-danger-fg); border-color: var(--color-danger-border); background: var(--color-danger-bg); }
.badge--warn { color: var(--color-warn-fg); border-color: var(--color-warn-border); background: var(--color-warn-bg); }
.badge--success { color: var(--color-success-fg); border-color: var(--color-success-border); background: var(--color-success-bg); }

.badge__dot {
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
}

.badge--sm { padding: 1px var(--space-1); font-size: 0.6875rem; }
.badge--soft {
  padding: 1px var(--space-2);
  font-family: inherit;
  font-size: 0.6875rem;
  text-transform: none;
  letter-spacing: 0;
  border-radius: 999px;
}
.badge--lg { padding: var(--space-1) var(--space-3); font-size: var(--text-sm); letter-spacing: 0.03em; }
.badge--pill { border-radius: 999px; padding-left: var(--space-2); padding-right: var(--space-2); }
.badge--pill.badge--lg { padding-left: var(--space-3); padding-right: var(--space-3); }

.badge--counter {
  padding: 0 var(--space-1);
  min-width: 1.25rem;
  justify-content: center;
  letter-spacing: 0;
  text-transform: none;
}

.badge--info { color: var(--color-info-fg); border-color: var(--color-info-border); background: var(--color-info-bg); }

/* In-heading badges sit on the baseline with the text */
h1 .badge, h2 .badge, h3 .badge, h4 .badge, h5 .badge, h6 .badge {
  vertical-align: middle;
  margin-left: var(--space-2);
  transform: translateY(-2px);
}

/* Anchor + pinned overlay for notification-style counters */
.badge-anchor {
  position: relative;
  display: inline-flex;
}

.badge--pin {
  position: absolute;
  top: -8px;
  right: -10px;
  z-index: 1;
}

/* --- Progress ------------------------------------------------ */

.progress {
  width: 100%;
  height: 6px;
  background: var(--color-border);
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  background: var(--color-fg);
}

.progress__bar--accent { background: var(--color-accent); }
.progress__bar--danger { background: var(--color-danger-fg); }

.progress--striped .progress__bar {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.25) 0 6px,
    transparent 6px 12px
  );
  background-color: var(--color-fg);
}

/* --- List group --------------------------------------------- */

.list-group {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  list-style: none;
  margin: 0;
  padding: 0;
}

.list-group__item {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.list-group__item:last-child { border-bottom: 0; }
.list-group__item--active { background: var(--color-surface-subtle); }

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.status__name { font-weight: 500; }

.status__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-fg-subtle);
  text-transform: lowercase;
  letter-spacing: 0.04em;
}

.status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-fg-subtle);
  flex-shrink: 0;
}

.status__dot--ok { background: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 14%, transparent); }
.status__dot--warn { background: var(--color-warn-fg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-warn-fg) 14%, transparent); }
.status__dot--down { background: var(--color-danger-fg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger-fg) 14%, transparent); }
.status__dot--idle { background: #d4d4d4; }

/* --- Card variants ------------------------------------------ */

.card--plain {
  background: var(--color-surface);
}

.card--plain::before,
.card--plain::after,
.card--plain > .card__corner-bl,
.card--plain > .card__corner-br { display: none; }

.card__header {
  margin: calc(var(--space-8) * -1) calc(var(--space-8) * -1) var(--space-6);
  padding: var(--space-4) var(--space-8);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.card__title {
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0;
}

.card__body { display: flex; flex-direction: column; gap: var(--space-3); }

.card__footer {
  margin: var(--space-6) calc(var(--space-8) * -1) calc(var(--space-8) * -1);
  padding: var(--space-3) var(--space-8);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* --- Accordion ----------------------------------------------- */

.accordion {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.accordion__item { border-bottom: 1px solid var(--color-border); }
.accordion__item:last-child { border-bottom: 0; }

.accordion__summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-sm);
  font-weight: 500;
  font-family: inherit;
}

.accordion__summary::-webkit-details-marker { display: none; }

.accordion__summary::after {
  content: "+";
  font-family: var(--font-mono);
  color: var(--color-fg-muted);
}

.accordion__item[open] .accordion__summary::after { content: "−"; }

.accordion__body {
  padding: 0 var(--space-4) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
  line-height: 1.6;
}

/* --- Modal (static showcase) -------------------------------- */

.modal {
  position: relative;
  max-width: 28rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: var(--space-6);
  box-shadow: 0 10px 40px -10px rgb(0 0 0 / 0.15);
}

.modal::before,
.modal::after,
.modal > .card__corner-bl,
.modal > .card__corner-br {
  content: "";
  display: block;
  pointer-events: none;
  position: absolute;
  width: 9px;
  height: 9px;
  background: center / 9px 9px no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'><path d='M4.5 0v9M0 4.5h9' stroke='%23525252'/></svg>");
}

.modal::before { top: -5px; left: -5px; }
.modal::after { top: -5px; right: -5px; }
.modal > .card__corner-bl { bottom: -5px; left: -5px; }
.modal > .card__corner-br { bottom: -5px; right: -5px; }

.modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.modal__title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin: 0;
}

.modal__close {
  background: none;
  border: 0;
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  color: var(--color-fg-muted);
  cursor: pointer;
  line-height: 1;
}

.modal__body {
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
  margin-bottom: var(--space-4);
  line-height: 1.6;
}

.modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.modal-backdrop {
  background: var(--color-surface-subtle);
  padding: var(--space-10);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
}

/* --- Toast --------------------------------------------------- */

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  max-width: 22rem;
}

.toast__title { font-size: var(--text-sm); font-weight: 500; margin: 0 0 2px; }
.toast__body { font-size: var(--text-xs); color: var(--color-fg-muted); margin: 0; }

.toasts {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
}
.toasts .toast { pointer-events: auto; }
.toast--error { border-color: var(--color-danger-border); background: var(--color-danger-bg); }
.toast--error .toast__title { color: var(--color-danger-fg); }

/* --- Color swatches ----------------------------------------- */

.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--space-3);
}

.swatch {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-fg-muted);
}

.swatch__chip {
  height: 3.5rem;
  border: 1px solid var(--color-border);
}

.swatch__label { color: var(--color-fg); }

/* --- Profile shell (side-nav layout) ------------------------ */

.profile-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  width: 100%;
}

@media (min-width: 720px) {
  .profile-shell { grid-template-columns: 12rem 1fr; }
}

.profile-shell__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.profile-nav__link {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
}

.profile-nav__link:hover {
  color: var(--color-fg);
  background: var(--color-surface-subtle);
}

.profile-nav__link[aria-current="page"] {
  color: var(--color-fg);
  border-left-color: var(--color-fg);
  font-weight: 500;
}

.profile-shell__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}

.profile-shell__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.profile-shell__title {
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}

.profile-shell__subtitle {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
}

/* --- Footer -------------------------------------------------- */

.shell__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-fg-subtle);
}

/* --- Avatar ------------------------------------------------- */

:root {
  --color-on-avatar: #fafafa;
  --avatar-neutral-bg: #ededed;
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  background: var(--avatar-bg, var(--avatar-neutral-bg));
  color: var(--color-fg);
  font-weight: 600;
  font-size: var(--text-sm);
  line-height: 1;
}
/* Palette avatars set --avatar-bg inline to a saturated color; keep their letter light.
   Plain avatars (no inline --avatar-bg) use the neutral surface + theme text color above,
   so they stay legible in both light and dark themes. */
.avatar[style*="--avatar-bg"] {
  color: var(--color-on-avatar);
}
.avatar--sm { width: 1.5rem; height: 1.5rem; font-size: var(--text-xs); }
.avatar--lg { width: 2.5rem; height: 2.5rem; font-size: var(--text-base); }

/* --- Account menu ------------------------------------------- */

.account-menu { position: relative; }
.account-menu__trigger { list-style: none; cursor: pointer; }
.account-menu__trigger::-webkit-details-marker { display: none; }

.account-menu__panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  width: 18rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  z-index: 50;
}

.account-menu__section { display: flex; flex-direction: column; }
.account-menu__section + .account-menu__section { border-top: 1px solid var(--color-border); }

.account-menu__identity {
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
}
.account-menu__email { font-size: var(--text-sm); color: var(--color-fg); word-break: break-all; }

.account-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-fg);
  text-decoration: none;
  background: transparent;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.account-menu__item:hover { background: var(--color-surface-subtle); }
.account-menu__item--muted { color: var(--color-fg-muted); }
.account-menu__item--danger { color: var(--color-danger-fg); }

.account-menu__sub > summary { list-style: none; }
.account-menu__sub > summary::-webkit-details-marker { display: none; }
.account-menu__chev { margin-left: auto; color: var(--color-fg-subtle); }
.account-menu__sub-panel { display: flex; flex-direction: column; padding-left: var(--space-4); }

/* --- Dark theme --------------------------------------------- */

[data-theme="dark"] {
  --color-fg: #fafafa;
  --color-fg-muted: #a3a3a3;
  --color-fg-subtle: #737373;
  --color-fg-inverse: #171717;
  --avatar-neutral-bg: #262626;
  --color-border: #404040;
  --color-border-strong: #525252;
  --color-surface: #0a0a0a;
  --color-surface-subtle: #171717;
  --color-surface-inverse: #fafafa;
  --color-btn-primary-bg: #d4d4d4;
  --color-btn-primary-fg: #0a0a0a;
  --color-btn-primary-bg-hover: #e5e5e5;
  --color-info-bg: #172554;
  --color-info-fg: #93c5fd;
  --color-info-border: #1e40af;
  --color-warn-bg: #451a03;
  --color-warn-fg: #fcd34d;
  --color-warn-border: #92400e;
  --color-success-bg: #052e16;
  --color-success-fg: #86efac;
  --color-success-border: #166534;
  --color-danger-bg: #4c0519;
  --color-danger-fg: #fda4af;
  --color-danger-border: #9f1239;
}

/* Aurora blobs use multiply on light surfaces (darkens color over white).
   On dark surfaces multiply collapses to ~black, so switch to screen (lightens). */
[data-theme="dark"] .bg-aurora__blob { mix-blend-mode: screen; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-fg: #fafafa;
    --color-fg-muted: #a3a3a3;
    --color-fg-subtle: #737373;
    --color-fg-inverse: #171717;
    --avatar-neutral-bg: #262626;
    --color-border: #404040;
    --color-border-strong: #525252;
    --color-surface: #0a0a0a;
    --color-surface-subtle: #171717;
    --color-surface-inverse: #fafafa;
    --color-btn-primary-bg: #d4d4d4;
    --color-btn-primary-fg: #0a0a0a;
    --color-btn-primary-bg-hover: #e5e5e5;
    --color-info-bg: #172554;
    --color-info-fg: #93c5fd;
    --color-info-border: #1e40af;
    --color-warn-bg: #451a03;
    --color-warn-fg: #fcd34d;
    --color-warn-border: #92400e;
    --color-success-bg: #052e16;
    --color-success-fg: #86efac;
    --color-success-border: #166534;
    --color-danger-bg: #4c0519;
    --color-danger-fg: #fda4af;
    --color-danger-border: #9f1239;
  }
  :root:not([data-theme]) .bg-aurora__blob { mix-blend-mode: screen; }
}

/* --- Table component (toolbar / sortable headers / footer / empty) --- */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.toolbar__search { flex: 1 1 280px; min-width: 220px; }

.toolbar__group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.toolbar__label {
  font-size: var(--text-xs);
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

.daterange {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.daterange .input { width: 11.5rem; }

.daterange__sep {
  color: var(--color-fg-subtle);
  font-family: var(--font-mono);
}

.table-frame { border: 1px solid var(--color-border); }
.table-frame .table { border: none; margin: 0; }

.th-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  color: inherit;
  text-decoration: none;
}

.th-sort__arrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-fg-subtle);
  line-height: 1;
}

.th-sort--active .th-sort__arrow { color: var(--color-fg); }

.table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  flex-wrap: wrap;
}

.table-footer__count {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
}

.table-footer .pagination { margin: 0; }

.table-empty {
  text-align: center;
  color: var(--color-fg-muted);
  padding: var(--space-5) var(--space-4);
}

/* --- Mail log (Gmail-style) --------------------------------- */

.table--mail-log thead { display: none; }

td.mail-log__main {
  width: 100%;
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-log__snippet { color: var(--color-fg-muted); }

td.mail-log__meta {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

.mail-log__meta-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.mail-log__type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  font-size: 0.8rem;
}

.mail-log__time {
  color: var(--color-fg-muted);
  font-variant-numeric: tabular-nums;
  min-width: 4ch;
}

/* =============================================================
   Org admin (users & groups) — ported from design mock
   ============================================================= */

/* --- Header org-bar --------------------------------------- */
.org-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.org-bar__name {
  font-weight: 600;
  letter-spacing: -0.01em;
}
.navbar__sep {
  width: 1px;
  height: 20px;
  background: var(--color-border);
}

/* --- Admin shell layout ----------------------------------- */
.shell:has(.admin) { max-width: 88rem; gap: var(--space-6); }

.admin {
  display: grid;
  grid-template-columns: 13.5rem 1fr;
  gap: 0;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  min-height: 38rem;
}
.admin__nav {
  border-right: 1px solid var(--color-border);
  padding: var(--space-4) var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  background: var(--color-surface-subtle);
}
.admin__nav-section {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-fg-subtle);
  padding: var(--space-2) var(--space-3) var(--space-1);
}
.admin__nav-section:not(:first-child) { margin-top: var(--space-3); }
.admin__nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
}
.admin__nav-link:hover {
  color: var(--color-fg);
  background: var(--color-surface);
}
.admin__nav-link[aria-current="page"],
.admin__nav-link.is-active {
  color: var(--color-fg);
  background: var(--color-surface);
  border-left-color: var(--color-accent);
  font-weight: 600;
}
.admin__nav-count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-fg-subtle);
}
.admin__nav-sep {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-2);
}
.admin__main {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}
.admin__main--detail { max-width: none; }
.admin__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.admin__header h1 { margin: 0; font-size: var(--text-xl); }

/* --- Mode banner (detail pages) --------------------------- */
.mode-banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  background: var(--color-surface-subtle);
}
.mode-banner--simple { grid-template-columns: 1fr auto; }
.mode-banner__title {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.mode-banner__meta {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-fg-subtle);
  margin-top: var(--space-1);
  flex-wrap: wrap;
  align-items: center;
}
.mode-banner__meta strong { color: var(--color-fg); font-weight: 600; }

/* --- Detail form cards ------------------------------------ */
.form-card { padding: 0; }
.form-card .card__header {
  margin: 0;
  padding: var(--space-3) var(--space-4);
}
.form-card .card__body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.form-card .card__title { font-size: var(--text-base); margin: 0; }

/* --- Generic admin table ---------------------------------- */
table.tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
}
.tbl th, .tbl td {
  padding: var(--space-3);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border);
}
.tbl th {
  font-weight: 500;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-fg-subtle);
  background: var(--color-surface-subtle);
  border-top: 1px solid var(--color-border);
}
.tbl tbody tr:hover { background: var(--color-surface-subtle); }
.tbl__check { width: 1.5rem; padding-right: 0; }
.tbl__actions { text-align: right; white-space: nowrap; }
.tbl__row-link {
  color: var(--color-fg);
  text-decoration: none;
  font-weight: 500;
}
.tbl__row-link:hover { text-decoration: underline; }
/* The Activity subject is a button — it triggers a live read from the SP — but has to read as the
   link it looks like, not as a form control. */
button.tbl__row-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

/* The batch row's subject cell is a disclosure: it lines up with the plain subject text of
   single-subject rows and turns its chevron over once the subjects are listed below. */
.batch-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.batch-toggle__chevron {
  flex: none;
  color: var(--color-fg-muted);
  transition: transform 120ms;
}
[data-batch-open] .batch-toggle__chevron { transform: rotate(180deg); }

/* --- User cell -------------------------------------------- */
.user-cell {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.user-cell__meta {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.user-cell__email {
  font-weight: 500;
  color: var(--color-fg);
}
.user-cell__name {
  font-size: var(--text-xs);
  color: var(--color-fg-subtle);
}

/* --- Key/value table (user attributes) -------------------- */
.kv-tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
}
.kv-tbl th, .kv-tbl td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border);
}
.kv-tbl th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-fg-subtle);
  font-weight: 500;
  background: var(--color-surface-subtle);
  border-top: 1px solid var(--color-border);
}
.kv-tbl .input { padding: 0.3rem var(--space-2); }
.kv-tbl__edit {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.kv-tbl__edit .input { flex: 1; width: auto; }
.row-actions { width: 3rem; text-align: right; }

/* --- Group switch list (user detail) ---------------------- */
.switch-list { display: flex; flex-direction: column; }
.switch-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.switch-list__row:last-child { border-bottom: none; }
.switch-list__name { font-weight: 500; }
.switch-list__desc {
  font-size: var(--text-xs);
  color: var(--color-fg-subtle);
}
.switch-list__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.switch-list__chip {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-fg-subtle);
}

/* --- Member table (group detail) -------------------------- */
.member-tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
}
.member-tbl th, .member-tbl td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border);
}
.member-tbl th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-fg-subtle);
  font-weight: 500;
  background: var(--color-surface-subtle);
  border-top: 1px solid var(--color-border);
}
.member-tbl tbody tr:hover { background: var(--color-surface-subtle); }

/* --- Danger zone (detail pages) --------------------------- */
.danger {
  padding: var(--space-4);
  border: 1px solid var(--color-danger-border);
  background: var(--color-danger-bg);
}
.danger__title {
  font-weight: 600;
  color: var(--color-danger-fg);
  margin: 0 0 var(--space-2);
}
.danger__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}
.danger__row + .danger__row { border-top: 1px solid var(--color-danger-border); }
.danger__desc { font-size: var(--text-sm); color: var(--color-fg-muted); }

/* --- Footer bar (detail pages) ---------------------------- */
.footer-bar {
  position: sticky;
  bottom: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.footer-bar__hint { font-size: var(--text-xs); color: var(--color-fg-subtle); }
.footer-bar__actions { display: flex; gap: var(--space-2); }

/* --- Auto-save state (htmx) ------------------------------- */
.save-state {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: var(--space-2);
  vertical-align: middle;
  font-size: var(--text-xs);
  font-weight: 400;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.save-state[data-state="saving"],
.save-state[data-state="saved"],
.save-state[data-state="error"] { opacity: 1; }

/* In a card header, sit next to the title and push the section meta to the right. */
.card__header .save-state { margin-left: 0; margin-right: auto; }

.spinner {
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: var(--radius-full);
  animation: spin 0.6s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.save-state .spinner { display: none; }
.save-state[data-state="saving"] .spinner { display: inline-block; }

/* Slow actions: htmx puts its requestClass (htmx-request) on the element for the whole request,
   so the label and the spinner swap without any JS. */
.btn--busy { display: inline-flex; align-items: center; gap: var(--space-2); }
.btn--busy > .spinner,
.btn--busy > [data-busy-label] { display: none; }
.btn--busy.htmx-request > .spinner { display: inline-block; }
.btn--busy.htmx-request > [data-busy-label] { display: inline; }
.btn--busy.htmx-request > [data-busy-idle] { display: none; }

.save-state__label { color: var(--color-fg-subtle); }
.save-state[data-state="saved"] .save-state__label {
  color: var(--color-accent);
  font-weight: 500;
}
.save-state[data-state="saved"] .save-state__label::before { content: "✓ "; }
.save-state[data-state="error"] .save-state__label {
  color: var(--color-danger-fg);
  font-weight: 500;
}

/* --- Inline edit (read-only → pencil → Save/Cancel) ------- */
.editable__head {
  display: flex;
  justify-content: flex-end;
}
.editable__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}
.icon-btn { display: inline-flex; align-items: center; gap: var(--space-2); }

.kv-view { margin: 0; display: flex; flex-direction: column; }
.kv-view__row {
  display: grid;
  grid-template-columns: minmax(8rem, 30%) 1fr;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}
.kv-view__row:last-child { border-bottom: 0; }
.kv-view__key {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-fg);
  word-break: break-word;
}
.kv-view__val {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
  word-break: break-word;
}

/* =============================================================
   Org admin list views + app form — ported from design mock
   (panel head, toolbar, chips, app cards, form groups, tables)
   ============================================================= */

/* --- Panel header (list pages) ---------------------------- */
.panel__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.panel__title {
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
.panel__lede {
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
  margin: var(--space-1) 0 0;
}

/* --- Toolbar (search + pills + sort) on list pages -------- */
.admin__main .toolbar { align-items: center; margin-bottom: 0; }
.admin__main .toolbar__search { flex: 1 1 22rem; min-width: 16rem; }
.admin__main .toolbar__search .input {
  padding-left: 2rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  background-repeat: no-repeat;
  background-position: 0.5rem center;
}
.toolbar__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-fg-subtle);
  font-family: var(--font-mono);
}
.toolbar__sort .select { padding: 0.25rem var(--space-2); }

/* Radio-backed pills: the radio drives a GET form; the label is the pill. */
.pills--radio .pills__item { display: inline-flex; align-items: center; }
.pills--radio .pills__item input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.pills--radio .pills__item:focus-within { border-color: var(--color-fg); }
.pills--radio .pills__item:has(input:checked) {
  background: var(--color-fg);
  color: var(--color-fg-inverse);
  border-color: var(--color-fg);
}

/* --- Chips ------------------------------------------------ */
.chips { display: inline-flex; gap: var(--space-1); flex-wrap: wrap; }
.chip {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-2);
  height: 1.25rem;
  font-size: var(--text-xs);
  color: var(--color-fg-muted);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.chip--more { color: var(--color-fg-subtle); background: transparent; border-style: dashed; }

/* --- App grid (applications list) ------------------------- */
.app-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.app-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  text-decoration: none;
  color: inherit;
  position: relative;
}
.app-card:hover { border-color: var(--color-fg); }
.app-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.app-card__name { font-weight: 600; }
.app-card__entity {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-fg-muted);
  word-break: break-all;
}
.app-card__meta {
  display: flex;
  gap: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-fg-subtle);
  margin-top: var(--space-2);
}
.app-card__meta strong { color: var(--color-fg); font-weight: 600; }

/* --- Key/value + mapping tables --------------------------- */
.map-tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
}
.map-tbl th, .map-tbl td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border);
}
.map-tbl th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-fg-subtle);
  font-weight: 500;
  background: var(--color-surface-subtle);
  border-top: 1px solid var(--color-border);
}
.map-tbl .input, .map-tbl .select { padding: 0.3rem var(--space-2); }
.map-arrow {
  text-align: center;
  font-family: var(--font-mono);
  color: var(--color-fg-subtle);
  width: 2rem;
}

/* --- Group / session / signing tables (share member-tbl look) --- */
.group-tbl, .session-tbl, .signin-tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
}
.group-tbl th, .group-tbl td,
.session-tbl th, .session-tbl td,
.signin-tbl th, .signin-tbl td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border);
}
.group-tbl th, .session-tbl th, .signin-tbl th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-fg-subtle);
  font-weight: 500;
  background: var(--color-surface-subtle);
  border-top: 1px solid var(--color-border);
}
.group-tbl tbody tr:hover, .signin-tbl tbody tr:hover { background: var(--color-surface-subtle); }
.cell-detail { overflow-wrap: anywhere; }

/* --- Member picker (group detail) ------------------------- */
.member-toolbar {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}
.member-toolbar .field { flex: 1 1 18rem; min-width: 14rem; }
.picker { position: relative; }
.picker__menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 16rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: var(--space-2);
  z-index: 10;
}
.picker.is-open .picker__menu { display: block; }
.picker__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  font-size: var(--text-sm);
  cursor: pointer;
}
.picker__row:hover { background: var(--color-surface-subtle); }

/* --- App tabs (detail page) ------------------------------- */
.app-tabs { margin-top: var(--space-2); }
.app-tabs .tabs { flex-wrap: wrap; }
.tabs__item--danger { color: var(--color-danger-fg); }
.tabs__item--danger[aria-selected="true"] {
  color: var(--color-danger-fg);
  border-bottom-color: var(--color-danger-fg);
}
/* Mode switch pinned to the right of the tab bar (SSO / Provisioning).
   The switch sits outside the tab list, so tabs may wrap while the
   switch stays on the first line. */
nav.app-tabs {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.app-tabs .tabs { flex: 1 1 auto; min-width: 0; }
.tabs__mode-switch {
  flex: none;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
}
/* Compact density so all SSO tabs plus the switch share one line. */
nav.app-tabs .tabs__item { padding: var(--space-2) 8px; }
.tabs__mode-switch .pills__item { padding: 4px 8px; }
/* Verified-connection checkmark in the Connection tab. */
[data-conn-check] {
  color: var(--color-success-fg);
  font-weight: 700;
}
/* Provisioning tabs stay visible but dimmed until a connection test passes. */
.tabs__item--locked { opacity: 0.55; }
/* SCIM gate: fieldset wrapper disabling a whole panel until the connection test passes. */
.scim-gate {
  display: block;
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 0;
}
.scim-gate[disabled] { opacity: 0.6; }
/* Native <dialog> using the .modal card look — UA centering, dimmed backdrop. The corner
   decorations sit outside the box, so the UA's default overflow: auto would show scrollbars. */
dialog.modal {
  position: fixed;
  margin: auto;
  color: var(--color-fg);
  overflow: visible;
}
dialog.modal::backdrop { background: rgb(0 0 0 / 0.5); }
/* A dialog must never outgrow the viewport. The overflow: visible above (which lets the corner
   decorations sit outside the box) means the dialog itself cannot scroll, and a modal makes the
   page behind inert — so a tall body pushes the footer, and every way out, past the fold with
   nothing able to scroll to it. The body scrolls instead, keeping header and footer reachable at
   any content length. The :not([open]) rule puts back what the UA gives closed dialogs: setting
   display here would otherwise leave a closed dialog laid out and swallowing every click. */
dialog.modal {
  display: flex;
  flex-direction: column;
  max-height: 85vh;
}
dialog.modal:not([open]) { display: none; }
/* The body takes whatever is left and is the ONE scroller. Capping the payload pane instead
   would give two nested scrollbars and still let the footer slide off a short viewport. */
dialog.modal > .modal__body { flex: 1; overflow: auto; min-height: 0; }
/* Wide enough for a SCIM resource; 28rem wraps every URL in the payload over three lines. */
dialog.modal--wide { max-width: min(44rem, 92vw); }
.modal__list {
  margin: var(--space-3) 0 0;
  padding-left: 1.2rem;
  display: grid;
  gap: var(--space-1);
}
/* Attention mark on the Provisioning switch/sidebar group. */
[data-activity-attention] {
  color: var(--color-warn-fg);
  font-weight: 700;
}
/* Searchable selects: a floor so the widget is usable, then the Activity-tab Tools pickers get a
   wider one for full emails. Same specificity, so the Tools rule has to come second. */
select.js-searchable + .ts-wrapper { min-width: 18rem; }
select.scim-user-picker,
select.scim-user-picker + .ts-wrapper {
  min-width: 22rem;
}
/* Once the widget exists, the original select must go. Class-based hiding is not enough:
   a swap restores the markup's class attribute, wiping the ts-hidden-accessible class TomSelect
   added — so hide by structure, not by class. */
select.js-searchable:has(+ .ts-wrapper) {
  display: none !important;
}
/* Tom Select follows the app theme. The library stylesheet loads after this one (a per-page
   <link> in the body), so ties on specificity would lose — hence the importants. */
/* TomSelect copies the select's classes onto its wrapper. That is handy for text-mono, which has
   to be re-applied inside the wrapper because the library's own font-family wins on load order —
   and a trap for .select, whose border, background, arrow and padding would paint a second box
   around the widget's own control. The bare select keeps .select for the pre-init render. */
.ts-wrapper.text-mono .ts-control,
.ts-wrapper.text-mono .ts-dropdown {
  font-family: var(--font-mono) !important;
}
.ts-wrapper.select {
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  background-image: none;
  box-shadow: none;
}
.ts-wrapper .ts-control {
  background: var(--color-surface) !important;
  color: var(--color-fg) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: var(--space-2) var(--space-3);
}
.ts-wrapper .ts-control input {
  color: var(--color-fg) !important;
  font-family: inherit;
}
.ts-dropdown {
  background: var(--color-surface) !important;
  color: var(--color-fg) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  margin-top: 2px !important;
}
/* Set by searchable-select.js when the list would open past the bottom of the window. */
.ts-wrapper.ts-drop-up .ts-dropdown {
  top: auto !important;
  bottom: 100%;
  margin-top: 0 !important;
  margin-bottom: 2px !important;
}
.ts-dropdown .option.active,
.ts-dropdown .option:hover {
  background: var(--color-surface-subtle) !important;
  color: var(--color-fg) !important;
}
/* Job details: a zero-width wrapper keeps the wide transcript from stretching the table
   columns, and grid items need min-width: 0 or long JSON lines push past the table edge. */
[data-job-detail] .job-detail {
  width: 0;
  min-width: 100%;
}
[data-job-detail] .grid-2 { min-width: 0; }
[data-job-detail] .grid-2 > div { min-width: 0; }
/* Wire transcripts: one step per exchange, so a failed test shows which call broke. */
.wire-log { margin-top: var(--space-2); }
.wire-log__step {
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-border);
}
.wire-log__step + .wire-log__step { margin-top: var(--space-4); }
.wire-log__step--failed { border-left-color: var(--color-danger-fg); }
.wire-log__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.wire-log__call {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}
.wire-log__pane { min-width: 0; }
.wire-log__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-fg-muted);
}
.wire-log__label + .cert-pem { margin-top: var(--space-1); }
/* Provisioning jobs table: fixed layout so the 3s refresh cannot shuffle column widths as
   relative times and error lines change length. Widths come from the <th> styles. */
.scim-jobs-tbl { table-layout: fixed; }
.scim-jobs-tbl td { overflow-wrap: anywhere; }

/* Icon-only copy button: the checkmark replaces the glyph, so the button never resizes. */
[data-copy-pane] { padding: 0 var(--space-1); }
[data-copy-pane].is-copied > svg { display: none; }
[data-copy-pane].is-copied::before {
  content: "✓";
  color: var(--color-success-fg);
}

/* Wire transcripts: the same box wherever a raw request/response is shown — Activity job
   details, the connection test diagnostics, the user lookup result. */
.cert-pem {
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}
/* .form-group / .field set display, which beats the user-agent [hidden] rule; restore it. */
[data-tab-panel][hidden] { display: none !important; }
[data-meta-panel][hidden] { display: none !important; }
[data-app-prov-field][hidden] { display: none !important; }
[data-protocol-note][hidden] { display: none !important; }
.badge[hidden] { display: none !important; }
[data-sp-badges][hidden] { display: none !important; }
button.badge { cursor: pointer; }
button.badge:hover { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
button.badge:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.scope-groups-tbl { table-layout: fixed; }
.scope-groups-tbl th:nth-child(1) { width: 22%; }
.scope-groups-tbl th:nth-child(2) { width: 8%; }
.scope-groups-tbl th:nth-child(3) { width: 30%; }
.scope-groups-tbl .cluster--tight { flex-wrap: nowrap; }
.scope-groups-tbl .checkbox-row { white-space: nowrap; }
.scope-groups-tbl select.js-searchable + .ts-wrapper { width: 100%; min-width: 0; }
/* The id beats the themed .ts-control rule above, which is !important itself. */
#scim-scope-region .group-tbl .ts-wrapper .ts-control {
  background: transparent !important;
  border-color: transparent !important;
  border-bottom-color: var(--color-border) !important;
  padding: var(--space-1) var(--space-2);
  min-height: 0;
}
#scim-scope-region .group-tbl .ts-wrapper:hover .ts-control,
#scim-scope-region .group-tbl .ts-wrapper.focus .ts-control,
#scim-scope-region .group-tbl .ts-wrapper.dropdown-active .ts-control {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}
#scim-scope-region .group-tbl select.js-searchable + .ts-wrapper { min-width: 0; }
.scope-groups-tbl .ts-control { overflow: hidden; flex-wrap: nowrap; }
.scope-groups-tbl .ts-control .item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scope-groups-tbl [data-sp-effect] { display: block; white-space: normal; }
.scope-groups-tbl .badge { white-space: nowrap; }
/* TomSelect draws its own dual ring in ::after and its stylesheet loads after this one; the element
   itself already wears the app's .spinner ring. */
.ts-dropdown .spinner { width: 0.875rem !important; height: 0.875rem !important; margin: var(--space-2) !important; }
.ts-dropdown .spinner::after { content: none !important; }
[data-meta-panel] { margin-top: var(--space-4); }

/* --- Sidebar: current-app sub-nav (app detail page) -------- */
.admin__nav-app {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: var(--space-1) 0 var(--space-2);
  padding-left: var(--space-3);
  border-left: 1px dashed var(--color-border);
  margin-left: var(--space-4);
}
.admin__nav-sublink {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-fg);
  text-decoration: none;
  font-family: var(--font-mono);
}
.admin__nav-sublink:hover { text-decoration: underline; }
.admin__nav-tabs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.admin__nav-tab {
  display: block;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
}
.admin__nav-tab:hover {
  color: var(--color-fg);
  background: var(--color-surface);
}
.admin__nav-tab[aria-current="page"] {
  color: var(--color-fg);
  background: var(--color-surface);
  border-left-color: var(--color-accent);
  font-weight: 600;
}
.admin__nav-tab--child {
  padding-left: calc(var(--space-3) * 2);
  font-size: var(--text-xs);
}
.admin__nav-tab--danger { color: var(--color-danger-fg); }
.admin__nav-tab--danger:hover { color: var(--color-danger-fg); }
.admin__nav-tab--danger[aria-current="page"] {
  color: var(--color-danger-fg);
  border-left-color: var(--color-danger-fg);
}

/* --- Form section groups (app detail tabs) ---------------- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-left: 3px solid var(--color-border);
  background: var(--color-surface-subtle);
}
.form-group__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.form-group__head { margin-bottom: var(--space-3); }
.form-group__title {
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.005em;
}
.form-group__hint {
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--color-fg-muted);
  margin: 2px 0 0;
}
.form-group--identity { background: transparent; border-left-color: var(--color-border); }
.form-group--sp,
.form-group--rp       { border-left-color: #c08a3a; background-color: rgba(192,138,58,0.06); }
.form-group--idp,
.form-group--op       { border-left-color: #4ea84e; background-color: rgba(78,168,78,0.06); }
.form-group--subject,
.form-group--claims   { border-left-color: #8a5fb5; background-color: rgba(138,95,181,0.06); }
.form-group--slo,
.form-group--signout  { border-left-color: #3ea49b; background-color: rgba(62,164,155,0.06); }
.form-group--access   { border-left-color: #5e6cb5; background-color: rgba(94,108,181,0.06); }
.form-group--provisioning { border-left-color: #b5675e; background-color: rgba(181,103,94,0.06); }

/* --- Credential rows (OIDC client id / secret) ------------- */
.credential {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
}
.credential__value {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  word-break: break-all;
}
.credential__value--masked { color: var(--color-fg-muted); letter-spacing: 0.15em; }
.credential__actions { display: flex; gap: var(--space-2); flex-shrink: 0; }

/* Sub-groupings inside a single card body. */
.sub-block { padding-top: var(--space-3); border-top: 1px dashed var(--color-border); }
.sub-block:first-child { padding-top: 0; border-top: 0; }

/* --- Checkbox / radio + label row ------------------------- */
.checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  width: fit-content;
}

.checkbox-row:has(input:disabled) {
  cursor: default;
  color: var(--color-fg-muted);
}

.input:disabled,
.textarea:disabled,
.select:disabled {
  color: var(--color-fg-subtle);
  background: var(--color-surface-subtle);
  cursor: not-allowed;
}

/* --- Text utilities used on detail pages ------------------ */
.text-flush { margin: 0; }
.text-tight { margin: 4px 0 0; }
.text-tight-y { margin-top: 4px; }
.text-tighter-y { margin-top: 2px; }
.text-break { word-break: break-all; }
.text-warn { color: var(--color-warn-fg); }
.text-italic { font-style: italic; }
.select--group { width: 12rem; }

/* --- App launcher (home) ---------------------------------- */
.app-launcher { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.app-launcher__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.app-launcher__item:first-child { padding-top: 0; }
.app-launcher__item:last-child { padding-bottom: 0; border-bottom: 0; }
.app-launcher__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.app-launcher__name { font-weight: 600; }
.app-launcher__desc { font-size: var(--text-sm); color: var(--color-fg-muted); }
.app-launcher form { margin: 0; }

/* --- Field aliases (Also known as pills) ------------------- */
.field__aliases {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
}
.field__aliases-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--color-fg-subtle);
  margin-right: var(--space-1);
}

/* --- Collapsed add-panel (add-panel.jte + add-panel.js) ---- */
.add-panel { margin-top: var(--space-2); }
.add-panel__bar { display: flex; justify-content: flex-end; }
.add-panel__body {
  position: relative;
  margin-top: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
}
.add-panel__form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.add-panel__form--stack { display: block; }
.add-panel__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.add-panel__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border-radius: inherit;
  background: color-mix(in srgb, var(--color-surface) 75%, transparent);
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
}
.add-panel.is-loading .add-panel__overlay { display: flex; }
.add-panel.is-loading .add-panel__body > :not(.add-panel__overlay) {
  pointer-events: none;
}

/* --- Two-factor enrolment --------------------------------- */
.mfa-qr {
  display: block;
  width: 12rem;
  max-width: 100%;
  margin: 0 auto;
  padding: var(--space-2);
  background: #ffffff;
  border: 1px solid var(--color-border);
}
.mfa-qr svg { display: block; width: 100%; height: auto; }
.mfa-secret { letter-spacing: 0.12em; }