/*
 * Implements auth/DESIGN.md.
 * Keep these semantic tokens synchronized with that document; do not add
 * visual primitives here without first documenting the design decision.
 */
*, *::before, *::after { box-sizing: border-box; }

html, body, h1, h2, h3, p, ul, ol { margin: 0; }

:root {
  /* Tokyo3 primitives. Page CSS consumes the semantic tokens below. */
  --t3-white: #ffffff;
  --t3-gray-25: #fafaf9;
  --t3-gray-50: #f6f6f4;
  --t3-gray-100: #eeeeeb;
  --t3-gray-200: #e1e2de;
  --t3-gray-300: #d1d3ce;
  --t3-gray-500: #70736d;
  --t3-gray-700: #41443f;
  --t3-gray-900: #20231f;
  --t3-indigo-50: #eef1ff;
  --t3-indigo-200: #c7d0ff;
  --t3-indigo-500: #4f63d9;
  --t3-indigo-600: #4053c4;
  --t3-indigo-700: #3444a5;
  --t3-green-50: #edf8f2;
  --t3-green-600: #18794e;
  --t3-amber-50: #fff7e6;
  --t3-amber-700: #8f4f00;
  --t3-red-50: #fff0f1;
  --t3-red-200: #f4c2c6;
  --t3-red-600: #b4232c;
  --t3-red-700: #941b24;
  --t3-blue-50: #eef6ff;
  --t3-blue-700: #245ea8;

  --color-page: #f5f5f3;
  --color-surface: #f5f5f3;
  --color-surface-card: #fbfaf8;
  --color-surface-subtle: #f0f1ee;
  --color-surface-selected: var(--t3-indigo-50);
  --color-text: var(--t3-gray-900);
  --color-text-subtle: #363a35;
  --color-text-muted: #5f635d;
  --color-text-disabled: #8f948c;
  --color-border: var(--t3-gray-100);
  --color-border-strong: var(--t3-gray-300);
  --color-action: var(--t3-indigo-500);
  --color-action-hover: var(--t3-indigo-600);
  --color-action-active: var(--t3-indigo-700);
  --color-secondary-action: #f3f4f1;
  --color-secondary-action-hover: var(--color-surface-subtle);
  --color-focus: var(--t3-indigo-500);
  --color-info-bg: var(--t3-blue-50);
  --color-info-text: var(--t3-blue-700);
  --color-success-bg: var(--t3-green-50);
  --color-success-text: var(--t3-green-600);
  --color-warning-bg: var(--t3-amber-50);
  --color-warning-text: var(--t3-amber-700);
  --color-danger-bg: var(--t3-red-50);
  --color-danger: var(--t3-red-600);
  --color-danger-hover: var(--t3-red-700);
  --color-danger-action: var(--t3-red-600);
  --color-danger-action-hover: var(--t3-red-700);

  --font-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", "Cascadia Code", Consolas, monospace;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-md: .9375rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  --shadow-raised: 0 1px 2px rgb(20 24 20 / 6%);
  --shadow-overlay: 0 12px 32px rgb(20 24 20 / 16%);
  --control-height-sm: 32px;
  --control-height-md: 38px;
  --sidebar-width: 240px;
  --content-max-width: 1280px;
  --form-max-width: 680px;
  --auth-card-width: 420px;

  /* Compatibility aliases for templates not migrated in the pilot. */
  --primary: var(--color-action);
  --primary-dark: var(--color-action-hover);
  --danger: var(--color-danger);
  --success: var(--color-success-text);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --border: var(--color-border);
  --bg: var(--color-page);
  --sidebar: var(--color-surface);
  --sidebar-text: var(--color-text-subtle);
  --sidebar-active: var(--color-action);
  --card: var(--color-surface-card);
  --radius: var(--radius-md);
  --shadow: var(--shadow-raised);
}

html { color-scheme: light; overflow-x: hidden; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --t3-gray-100: #30342f;
    --t3-gray-300: #50574e;
    --t3-gray-500: #aeb4aa;
    --t3-indigo-50: #252e5c;
    --t3-indigo-200: #7787e5;
    --t3-indigo-500: #8495ff;
    --t3-indigo-600: #9aa8ff;
    --t3-indigo-700: #b1bcff;
    --t3-green-50: #153426;
    --t3-green-600: #8ed6ad;
    --t3-amber-50: #3b2c16;
    --t3-amber-700: #f1c16c;
    --t3-red-50: #3a1d21;
    --t3-red-200: #85454c;
    --t3-red-600: #ff9da5;
    --t3-red-700: #ffb9bf;
    --t3-blue-50: #1b2a40;
    --t3-blue-700: #9fc5f4;

    --color-page: #151714;
    --color-surface: #151714;
    --color-surface-card: #1b1e1a;
    --color-surface-subtle: #242823;
    --color-surface-selected: #252e5c;
    --color-text: #f0f2ed;
    --color-text-subtle: #d1d6ce;
    --color-text-muted: #aeb4aa;
    --color-text-disabled: #777e75;
    --color-border: #30342f;
    --color-border-strong: #50574e;
    --color-action: #5369e6;
    --color-action-hover: #6478ec;
    --color-action-active: #7f90ff;
    --color-secondary-action: #303631;
    --color-secondary-action-hover: #3a423b;
    --color-focus: #9aa8ff;
    --color-info-bg: #1b2a40;
    --color-info-text: #9fc5f4;
    --color-success-bg: #153426;
    --color-success-text: #8ed6ad;
    --color-warning-bg: #3b2c16;
    --color-warning-text: #f1c16c;
    --color-danger-bg: #3a1d21;
    --color-danger: #ff9da5;
    --color-danger-hover: #ffb9bf;
    --color-danger-action: #a52834;
    --color-danger-action-hover: #8e202b;
    --shadow-raised: 0 1px 2px rgb(0 0 0 / 24%);
    --shadow-overlay: 0 12px 32px rgb(0 0 0 / 48%);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --t3-gray-100: #30342f;
  --t3-gray-300: #50574e;
  --t3-gray-500: #aeb4aa;
  --t3-indigo-50: #252e5c;
  --t3-indigo-200: #7787e5;
  --t3-indigo-500: #8495ff;
  --t3-indigo-600: #9aa8ff;
  --t3-indigo-700: #b1bcff;
  --t3-green-50: #153426;
  --t3-green-600: #8ed6ad;
  --t3-amber-50: #3b2c16;
  --t3-amber-700: #f1c16c;
  --t3-red-50: #3a1d21;
  --t3-red-200: #85454c;
  --t3-red-600: #ff9da5;
  --t3-red-700: #ffb9bf;
  --t3-blue-50: #1b2a40;
  --t3-blue-700: #9fc5f4;
  --color-page: #151714;
  --color-surface: #151714;
  --color-surface-card: #1b1e1a;
  --color-surface-subtle: #242823;
  --color-surface-selected: #252e5c;
  --color-text: #f0f2ed;
  --color-text-subtle: #d1d6ce;
  --color-text-muted: #aeb4aa;
  --color-text-disabled: #777e75;
  --color-border: #30342f;
  --color-border-strong: #50574e;
  --color-action: #5369e6;
  --color-action-hover: #6478ec;
  --color-action-active: #7f90ff;
  --color-secondary-action: #303631;
  --color-secondary-action-hover: #3a423b;
  --color-focus: #9aa8ff;
  --color-info-bg: #1b2a40;
  --color-info-text: #9fc5f4;
  --color-success-bg: #153426;
  --color-success-text: #8ed6ad;
  --color-warning-bg: #3b2c16;
  --color-warning-text: #f1c16c;
  --color-danger-bg: #3a1d21;
  --color-danger: #ff9da5;
  --color-danger-hover: #ffb9bf;
  --color-danger-action: #a52834;
  --color-danger-action-hover: #8e202b;
  --shadow-raised: 0 1px 2px rgb(0 0 0 / 24%);
  --shadow-overlay: 0 12px 32px rgb(0 0 0 / 48%);
}

body {
  min-width: 320px;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--color-text);
  background: var(--color-page);
  line-height: 1.5;
  letter-spacing: -.006em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

button, input, select, textarea { font: inherit; }
button { letter-spacing: inherit; }
a { color: var(--color-action); text-underline-offset: 2px; }
a:hover { color: var(--color-action-hover); }
::selection { background: var(--t3-indigo-200); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* SSO and focused authentication flows. */
.sso-body {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  background:
    radial-gradient(circle at 50% 0%, var(--t3-indigo-50), transparent 38rem),
    var(--color-page);
}

.sso-card {
  width: min(100%, var(--auth-card-width));
  padding: var(--space-10);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
}

.sso-card .brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
  color: var(--color-text-subtle);
}

.sso-card .brand svg {
  width: 28px;
  height: 28px;
  fill: var(--color-action);
}

.sso-card .brand span {
  font-size: var(--text-md);
  font-weight: 650;
  letter-spacing: -.02em;
}

.sso-card h1 {
  margin-bottom: var(--space-2);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.025em;
}

.sso-card .subtitle {
  margin-bottom: var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Destination-app chip in the "Continue to <app>" context sentence. */
.sso-client {
  display: inline-block;
  max-width: 100%;
  padding: 1px var(--space-2);
  overflow: hidden;
  color: var(--color-action-active);
  background: var(--color-surface-selected);
  border: 1px solid var(--t3-indigo-200);
  border-radius: var(--radius-pill);
  font-size: var(--text-md);
  font-weight: 650;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
}

/* Authenticated portal shell. */
.portal-layout {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
}

.sidebar {
  position: sticky;
  top: 0;
  z-index: 30;
  width: var(--sidebar-width);
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex: 0 0 var(--sidebar-width);
  flex-direction: column;
  overflow-y: auto;
  color: var(--color-text-subtle);
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
}

.sidebar-brand {
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  color: var(--color-text);
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: -.02em;
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}

.sidebar-brand:hover { color: var(--color-text); }
.sidebar-brand svg { width: 24px; height: 24px; flex: none; fill: var(--color-action); }

.sidebar nav {
  flex: 1;
  padding: var(--space-4) var(--space-3);
}

.nav-section + .nav-section { margin-top: var(--space-5); }

.nav-section-label {
  display: block;
  margin-bottom: var(--space-1);
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-subtle);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.25;
  text-transform: uppercase;
}

.sidebar nav a {
  min-height: 38px;
  display: flex;
  align-items: center;
  margin: 2px 0;
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  border-radius: var(--radius-md);
}

.sidebar nav a:hover {
  color: var(--color-text);
  background: var(--color-surface-subtle);
}

.sidebar nav a.active {
  color: var(--color-action-active);
  background: var(--color-surface-selected);
  box-shadow: inset 3px 0 0 var(--color-action);
}

.sidebar-footer {
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  border-top: 1px solid var(--color-border);
}

.sidebar-user {
  overflow: hidden;
  margin-bottom: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.sidebar-footer-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.theme-toggle {
  width: var(--control-height-sm);
  height: var(--control-height-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: 0;
  color: var(--color-text);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.theme-toggle:hover { color: var(--color-text); background: var(--color-surface-selected); border-color: var(--color-action); }
.theme-toggle svg { width: 16px; height: 16px; fill: currentColor; }
.theme-icon-sun { display: none; }
.theme-icon-moon { display: block; }
[data-theme="dark"] .theme-icon-sun { display: block; }
[data-theme="dark"] .theme-icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-icon-moon { display: none; }
}
.sso-theme-toggle { position: absolute; top: var(--space-5); right: var(--space-5); }

.sidebar-footer a,
.sidebar-footer .btn-link {
  color: var(--color-text-subtle);
  text-decoration: none;
}

.sidebar-footer a:hover,
.sidebar-footer .btn-link:hover { color: var(--color-action-hover); }
.sidebar-footer a.active { color: var(--color-action-active); font-weight: 600; }

.btn-link {
  appearance: none;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.portal-main {
  min-width: 0;
  flex: 1;
  overflow-x: hidden;
}

.portal-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-3) var(--space-8);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: blur(10px);
}

.portal-heading { min-width: 0; }
.portal-heading h1 {
  color: var(--color-text);
  font-size: var(--text-xl);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -.02em;
}

.portal-breadcrumb {
  margin-bottom: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}
.portal-breadcrumb:empty, .portal-description:empty { display: none; }
.portal-breadcrumb a { color: inherit; }
.portal-description {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.portal-actions { flex: none; }
.portal-content {
  width: 100%;
  max-width: calc(var(--content-max-width) + 2 * var(--space-8));
  margin: 0 auto;
  padding: var(--space-8);
}

.mobile-nav-toggle {
  display: none;
  flex: none;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.mobile-nav-toggle svg { width: 20px; height: 20px; stroke: currentColor; }
.portal-backdrop { display: none; }

/* Forms. */
.form-group { margin-bottom: var(--space-5); }
.form-footer {
  margin-top: var(--space-5);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.mfa-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.mfa-divider::before, .mfa-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
  font-weight: 600;
}

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="url"], select, textarea {
  width: 100%;
  min-height: var(--control-height-md);
  padding: var(--space-2) var(--space-3);
  color: var(--color-text);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color 120ms, box-shadow 120ms, background 120ms;
}

textarea { min-height: 88px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--color-text-disabled); opacity: 1; font-style: italic; }
input:hover, select:hover, textarea:hover { border-color: var(--t3-gray-500); }
input:focus, select:focus, textarea:focus {
  border-color: var(--color-focus);
  box-shadow: 0 0 0 3px rgb(79 99 217 / 16%);
}
input:disabled, select:disabled, textarea:disabled {
  color: var(--color-text-muted);
  background: var(--color-surface-subtle);
  border-color: var(--color-border);
  cursor: not-allowed;
}

input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex: none;
  accent-color: var(--color-action);
  cursor: pointer;
}

.checkbox-row { display: flex; align-items: center; gap: var(--space-2); }
.checkbox-row label { margin: 0; font-weight: 500; }
.checkbox-panel {
  max-height: 240px;
  overflow: auto;
  padding: var(--space-3);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.checkbox-panel .checkbox-row + .checkbox-row { margin-top: var(--space-2); }
.field-help {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: 1.5;
}
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.form-width { width: 100%; max-width: var(--form-max-width); }

/* Buttons. */
.btn {
  min-height: var(--control-height-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  color: var(--color-text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms, box-shadow 120ms;
}
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { color: var(--t3-white); background: var(--color-action); border-color: var(--color-action); }
.btn-primary:hover { color: var(--t3-white); background: var(--color-action-hover); border-color: var(--color-action-hover); }
.btn-secondary { color: var(--color-text-subtle); background: var(--color-secondary-action); border-color: var(--color-border-strong); box-shadow: var(--shadow-raised); }
.btn-secondary:hover { color: var(--color-text); background: var(--color-secondary-action-hover); border-color: var(--t3-gray-500); }
.btn-warning { color: var(--color-warning-text); background: var(--color-warning-bg); border-color: #e8c990; }
.btn-warning:hover { color: #6f3d00; background: #ffefcf; border-color: #d6ad65; }
.btn-danger { color: var(--t3-white); background: var(--color-danger-action); border-color: var(--color-danger-action); }
.btn-danger:hover { color: var(--t3-white); background: var(--color-danger-action-hover); border-color: var(--color-danger-action-hover); }
.btn-sm { min-height: var(--control-height-sm); padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
.btn-block { width: 100%; }

/* Cards and sections. */
.card, .resource-panel {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
}
.card-header {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.card-header h2 { font-size: var(--text-md); font-weight: 650; line-height: 1.3; }
.card-body { padding: var(--space-5); }
.card-body > .text-muted:first-child { margin-top: 0; }
.card-body > p.text-muted {
  color: var(--color-text-muted);
  font-size: var(--text-md);
  line-height: 1.55;
}
.section-stack { display: grid; gap: var(--space-4); max-width: var(--form-max-width); }
.form-section + .form-section {
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}
.form-section-title { margin-bottom: var(--space-1); font-size: var(--text-lg); font-weight: 650; line-height: 1.3; }
.form-section-description { margin-bottom: var(--space-5); color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.55; }
.security-action-card { border-left: 3px solid #d6ad65; }
.security-action-card .card-body p + form { margin-top: var(--space-4); }
.security-action-card-danger { border-left-color: var(--color-danger); }
.danger-zone { border-color: var(--t3-red-200); border-left: 3px solid var(--color-danger); }
.danger-zone .card-header { color: var(--color-danger); border-bottom-color: var(--t3-red-200); }
.prose-list { margin: var(--space-2) 0 var(--space-4); padding-left: var(--space-5); color: var(--color-text-muted); font-size: var(--text-sm); }
.prose-list li + li { margin-top: var(--space-1); }

.page-stack { min-width: 0; display: grid; gap: var(--space-4); }
.page-stack > * { min-width: 0; }
.page-stack-narrow { max-width: var(--form-max-width); }
.quick-actions, .inline-actions, .button-split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.inline-actions { flex-wrap: nowrap; justify-content: flex-end; }
.inline-actions form { display: inline-flex; }
.button-split > * { flex: 1; }
.summary-list { width: 100%; max-width: 520px; }
.summary-list th, .summary-list td { border-bottom: 0; }
.summary-list th { width: 140px; padding-left: 0; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0; text-transform: none; }
.summary-list td { padding-right: 0; }
.section-heading { margin: var(--space-6) 0 var(--space-2); font-size: var(--text-lg); font-weight: 650; line-height: 1.25; }
.section-description {
  max-width: 60rem;
  margin-bottom: var(--space-4);
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
  line-height: 1.55;
}
.copy-field { display: flex; align-items: center; gap: var(--space-2); }
.copy-field input { flex: 1; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.field-grid-wide-second { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.checkbox-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.checkbox-grid .checkbox-row { padding: var(--space-2); border-radius: var(--radius-md); }
.checkbox-grid .checkbox-row:hover { background: var(--color-surface-subtle); }
.admin-inline-form { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-2); margin-bottom: var(--space-4); }
.admin-inline-form .form-group { min-width: 160px; flex: 1 1 180px; margin: 0; }
.admin-inline-form .field-grow { flex-basis: 320px; }
.admin-inline-form .field-small { flex: 0 1 150px; }
.admin-inline-form .checkbox-row { min-height: var(--control-height-md); }
.provider-section + .provider-section { margin-top: var(--space-4); }
.card-flush .card-body { padding: 0; }
.empty-table-cell { padding: var(--space-8) !important; color: var(--color-text-muted); text-align: center; }
.resource-identifier { display: flex; align-items: center; gap: var(--space-2); }
.resource-identifier .truncate { display: inline-block; }

.application-intro { max-width: 720px; margin-bottom: var(--space-5); color: var(--color-text-muted); font-size: var(--text-sm); }
.app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3); }
.app-card { overflow: hidden; }
.app-card .card-body { border-left: 4px solid var(--app-accent, transparent); }
.app-heading { display: flex; align-items: center; gap: var(--space-3); }
.app-heading h3 { flex: 1; font-size: var(--text-md); font-weight: 650; }
.app-icon { width: 32px; height: 32px; flex: none; object-fit: contain; border-radius: var(--radius-sm); }
.app-subtitle { margin-top: var(--space-1); color: var(--color-text-muted); font-size: var(--text-sm); }
.app-meta { min-height: 22px; display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-3); }
.app-action { margin-top: var(--space-4); }

.wa-challenge { padding: var(--space-8) 0; text-align: center; }
.device-code { font-family: var(--font-mono); letter-spacing: .15em; text-transform: uppercase; }
.device-details { display: grid; gap: var(--space-3); }
.device-detail { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-3); }
.device-detail dt { color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 600; }
.device-detail dd { margin: 0; min-width: 0; }
.security-key-enroll { display: flex; align-items: end; gap: var(--space-2); }
.security-key-enroll .form-group { flex: 1; margin: 0; }
.audit-status { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); }
.audit-status::before { content: ""; width: 8px; height: 8px; background: var(--color-text-disabled); border-radius: 50%; }
.audit-status-live::before { background: var(--color-success-text); }
.audit-status-reconnecting::before { background: var(--color-warning-text); }

/* Resource and data tables. */
.table-wrap { width: 100%; overflow-x: auto; contain: paint; }
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
thead th {
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-muted);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.25;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-border-strong);
}
tbody td { padding: var(--space-3) var(--space-4); vertical-align: middle; border-bottom: 1px solid var(--color-border); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--color-surface-subtle); }
.resource-primary { min-width: 210px; }
.resource-name { color: var(--color-text); font-weight: 650; }
.resource-meta { margin-top: 2px; color: var(--color-text-muted); font-size: var(--text-xs); }
.resource-actions { text-align: right; white-space: nowrap; }
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
  white-space: nowrap;
}
.status-dot { width: 8px; height: 8px; flex: none; background: var(--color-text-disabled); border-radius: 50%; }
.status-success .status-dot { background: var(--color-success-text); }
.status-danger .status-dot { background: var(--color-danger); }
.empty-state { padding: var(--space-10) var(--space-5); text-align: center; }
.empty-state-title { margin-bottom: var(--space-2); font-size: var(--text-md); font-weight: 650; }
.empty-state-description { max-width: 440px; margin: 0 auto var(--space-5); color: var(--color-text-muted); font-size: var(--text-sm); }

/* Alerts and one-time disclosure. */
.alert {
  padding: var(--space-3) var(--space-4);
  border: 1px solid;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}
.alert-error { color: var(--color-danger); background: var(--color-danger-bg); border-color: var(--t3-red-200); }
.alert-success { color: var(--color-success-text); background: var(--color-success-bg); border-color: #b9dfca; }
.alert-info { color: var(--color-info-text); background: var(--color-info-bg); border-color: #bfd7f3; }
.alert-warning { color: var(--color-warning-text); background: var(--color-warning-bg); border-color: #edd39e; }
.one-time-secret { max-width: var(--form-max-width); padding: var(--space-4); }
.one-time-secret-label { font-weight: 700; }
.one-time-secret-value { display: block; margin-top: var(--space-2); color: var(--color-text); word-break: break-all; }
.one-time-secret p { margin-top: var(--space-3); }

/* Semantic badges plus compatibility aliases. */
.badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}
.badge-success, .badge-green { color: var(--color-success-text); background: var(--color-success-bg); }
.badge-danger, .badge-red { color: var(--color-danger); background: var(--color-danger-bg); }
.badge-info, .badge-blue { color: var(--color-info-text); background: var(--color-info-bg); }
.badge-warning { color: var(--color-warning-text); background: var(--color-warning-bg); }
.badge-neutral, .badge-gray { color: var(--color-text-subtle); background: var(--color-surface-subtle); }

/* Helpers retained for templates outside the pilot. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.text-muted { color: var(--color-text-muted); font-size: var(--text-sm); }
.text-danger { color: var(--color-danger); }
.text-right { text-align: right; }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-2 { gap: var(--space-2); }
.separator { height: 1px; margin: var(--space-5) 0; background: var(--color-border); }
.mono { font-family: var(--font-mono); font-size: var(--text-xs); }
.truncate { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
code { font-family: var(--font-mono); font-size: .9em; }

/* MFA and security helpers. */
.code-input { text-align: center; font-family: var(--font-mono); font-size: 1.5rem; letter-spacing: .28em; }
.qr-wrap { margin: var(--space-5) 0; text-align: center; }
.secret-box { margin: var(--space-3) 0; padding: var(--space-3) var(--space-4); word-break: break-all; font-family: var(--font-mono); font-size: var(--text-xs); background: var(--color-surface-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--color-border-strong); border-top-color: var(--color-action); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#wa-status { margin-top: var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (max-width: 1023px) {
  .portal-layout { display: block; }

  /* With no JavaScript the navigation remains in normal flow and usable. */
  .sidebar { position: static; width: 100%; height: auto; border-right: 0; border-bottom: 1px solid var(--color-border); }
  .sidebar nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .sidebar-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
  .sidebar-user { margin: 0; }

  .js .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: min(86vw, 280px);
    height: 100vh;
    height: 100dvh;
    display: flex;
    border-right: 1px solid var(--color-border);
    border-bottom: 0;
    box-shadow: var(--shadow-overlay);
    transform: translateX(-105%);
    transition: transform 180ms ease;
  }
  .js .sidebar nav { display: block; }
  .js .sidebar-footer { display: block; }
  .js .sidebar-user { margin-bottom: var(--space-2); }
  .js .portal-nav-open .sidebar { transform: translateX(0); }
  .js .mobile-nav-toggle { display: inline-flex; }
  .js .portal-nav-open { overflow: hidden; }
  .js .portal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 25;
    display: block;
    visibility: hidden;
    background: rgb(20 24 20 / 42%);
    border: 0;
    opacity: 0;
    transition: opacity 180ms ease, visibility 180ms;
  }
  .js .portal-nav-open .portal-backdrop { visibility: visible; opacity: 1; }

  .portal-topbar { padding: var(--space-3) var(--space-5); justify-content: flex-start; }
  .portal-heading { flex: 1; }
  .portal-actions { margin-left: auto; }
  .portal-content { padding: var(--space-6) var(--space-5); }
}

@media (max-width: 639px) {
  .sso-body { display: block; padding: 0; background: var(--color-surface); }
  .sso-card { min-height: 100vh; min-height: 100dvh; padding: var(--space-8) var(--space-5); border: 0; border-radius: 0; box-shadow: none; }
  .sso-card .brand { margin-bottom: var(--space-10); }

  .sidebar nav { grid-template-columns: 1fr; }
  .portal-topbar { min-height: 60px; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
  .portal-heading h1 { font-size: var(--text-lg); }
  .portal-description, .portal-breadcrumb { display: none; }
  .portal-actions .btn { min-height: var(--control-height-sm); padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
  .portal-content { padding: var(--space-5) var(--space-4); }
  .form-actions, .button-split { flex-direction: column; }
  .form-actions .btn, .button-split > * { width: 100%; }
  .field-grid, .checkbox-grid { grid-template-columns: 1fr; }
  .admin-inline-form { align-items: stretch; }
  .admin-inline-form .form-group, .admin-inline-form .field-grow, .admin-inline-form .field-small { flex-basis: 100%; }
  .admin-inline-form > .btn { width: 100%; }
  .security-key-enroll { align-items: stretch; flex-direction: column; }
  .device-detail { grid-template-columns: 1fr; gap: var(--space-1); }
  .card-header, .card-body { padding: var(--space-4); }

  .resource-panel { margin-right: calc(-1 * var(--space-4)); margin-left: calc(-1 * var(--space-4)); border-right: 0; border-left: 0; border-radius: 0; }
  thead th, tbody td { padding-right: var(--space-3); padding-left: var(--space-3); }
}