/* ============================================================
 * main.css
 * Sections:
 *   - Inter font face
 *   - Tokens (CSS vars; dark-mode overrides)
 *   - Base reset + typography
 *   - Background mesh
 *   - Layout: .auth
 *   - Card: .auth__card, .auth__brand, .auth__title, .auth__subtitle
 *   - Notice: .auth__notice
 *   - Form: .auth__form, .field
 *   - Button: .btn (primary, ghost)
 *   - Footer: .auth__foot, .auth__chip
 *   - Motion
 * ============================================================ */

@font-face {
  font-family: 'InterVariable';
  src: url('/css/fonts/InterVariable.woff2') format('woff2-variations'),
       url('/css/fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg:           #f7f7f9;
  --surface:      #ffffff;
  --surface-2:    #f1f2f5;
  --hover:        #ededf1;
  --border:       #e4e6eb;
  --fg:           #0a0d12;
  --fg-muted:     #5a6371;
  --accent:       #3b6fff;
  --accent-glow:  rgba(59, 111, 255, 0.18);
  --input-outline:#e4e6eb;
  --focus:        #3b6fff;
  --focus-glow:   rgba(59, 111, 255, 0.18);
  --danger:       #c0392b;

  --radius-card:  14px;
  --radius-input: 8px;
  --radius-btn:   10px;

  --shadow-card:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 1px 2px rgba(10, 13, 18, 0.04),
    0 20px 50px -28px rgba(10, 13, 18, 0.25),
    0 8px 20px -16px rgba(10, 13, 18, 0.15);

  --font-sans: 'InterVariable', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* Dark tokens applied two ways:
 *   1) when OS prefers dark AND user has not forced light  (Auto + dark OS)
 *   2) when user explicitly forces dark via the toggle     ([data-theme="dark"])
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #0a0d12;
    --surface:     #11151c;
    --surface-2:   #161b24;
    --hover:       #1c2230;
    --border:      #1f2632;
    --fg:          #e7eaf0;
    --fg-muted:    #8993a4;
    --accent:      #5d8bff;
    --accent-glow: rgba(93, 139, 255, 0.22);
    --input-outline:#1f2632;
    --focus:       #5d8bff;
    --focus-glow:  rgba(93, 139, 255, 0.22);
    --danger:      #ff6b5b;

    --shadow-card:
      0 1px 0 rgba(255, 255, 255, 0.04) inset,
      0 1px 2px rgba(0, 0, 0, 0.4),
      0 20px 50px -28px rgba(0, 0, 0, 0.55),
      0 8px 20px -16px rgba(0, 0, 0, 0.35);
  }
}
:root[data-theme="dark"] {
  --bg:          #0a0d12;
  --surface:     #11151c;
  --surface-2:   #161b24;
  --hover:       #1c2230;
  --border:      #1f2632;
  --fg:          #e7eaf0;
  --fg-muted:    #8993a4;
  --accent:      #5d8bff;
  --accent-glow: rgba(93, 139, 255, 0.22);
  --input-outline:#1f2632;
  --focus:       #5d8bff;
  --focus-glow:  rgba(93, 139, 255, 0.22);
  --danger:      #ff6b5b;

  --shadow-card:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 20px 50px -28px rgba(0, 0, 0, 0.55),
    0 8px 20px -16px rgba(0, 0, 0, 0.35);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Smooth theme switch: ease the color-related properties on every element so flipping
 * Light/Dark/Auto doesn't snap. Specific element transitions (e.g. .btn's transform)
 * still win because they fully replace the transition shorthand on their own rule. */
*, *::before, *::after {
  transition-property: background-color, background-image, color, border-color, fill, stroke, box-shadow;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
}

html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--link, var(--accent)); font-family: var(--font-link, var(--font-sans)); text-decoration: none; }
.btn { font-family: var(--font-btn, var(--font-sans)); }
/* Muted text font applies to the common "small / secondary" labels in the app. */
.settings__desc,
.field__input::placeholder,
.icon-picker__name,
.auth__foot { font-family: var(--font-muted, var(--font-sans)); }
::selection { background: var(--accent-glow); color: var(--fg); }

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(40rem 30rem at 90% -10%, color-mix(in oklab, var(--accent) 14%, transparent) 0, transparent 60%),
    radial-gradient(48rem 32rem at -10% 110%, color-mix(in oklab, var(--accent) 9%, transparent) 0, transparent 65%);
}

.auth {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
}

.auth__card {
  width: min(420px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  display: grid;
  gap: 1.25rem;
}

.auth__brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--fg-muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.auth__mark {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-glow);
  transform: rotate(45deg);
  border-radius: 2px;
}
.auth__org { font-weight: 500; }

.auth__title {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--fg);
}
.auth__subtitle {
  font-size: 14px;
  color: var(--fg-muted);
  margin-top: -0.5rem;
}

.auth__notice {
  font-size: 13.5px;
  padding: 0.75rem 0.875rem;
  border-radius: var(--radius-input);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--fg);
}
.auth__notice--error {
  border-color: color-mix(in oklab, var(--danger) 35%, var(--border));
  color: var(--danger);
  background: color-mix(in oklab, var(--danger) 8%, var(--surface-2));
}

.auth__form { display: grid; gap: 1rem; }

.field { display: grid; gap: 0.375rem; }
.field__label {
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  text-transform: uppercase;
}
.field__input {
  width: 100%;
  padding: 0.75rem 0.875rem;
  background: var(--surface-2);
  border: 1px solid var(--input-outline);
  border-radius: var(--radius-input);
  font-size: 15px;
  color: var(--fg);
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.field__input::placeholder { color: var(--fg-muted); }
.field__input:hover { border-color: color-mix(in oklab, var(--focus) 25%, var(--input-outline)); }
.field__input:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 4px var(--focus-glow);
  background: var(--surface);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-btn);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease, color 140ms ease, border-color 140ms ease;
  user-select: none;
}
.btn__glyph { display: inline-block; transition: transform 140ms ease; }
.btn:hover .btn__glyph,
.btn:focus-visible .btn__glyph { transform: translateX(2px); }

.btn--primary {
  background: var(--btn-bg, var(--accent));
  color: var(--btn-text, #ffffff);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 8px 20px -10px var(--btn-glow, var(--accent-glow));
}
.btn--primary:hover { background: var(--btn-hover-bg, var(--btn-bg, var(--accent))); transform: translateY(-1px); }
.btn--primary:active { transform: translateY(0); }
.btn--primary:focus-visible { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 4px var(--focus-glow); outline: none; }
.btn--primary:disabled { opacity: 0.7; cursor: progress; transform: none; }

.btn--ghost {
  background: var(--cancel-bg, transparent);
  color: var(--cancel-text, var(--fg));
  border-color: var(--border);
}
.btn--ghost:hover { background: var(--cancel-hover-bg, var(--hover)); border-color: color-mix(in oklab, var(--accent) 30%, var(--border)); }
.btn--ghost:focus-visible { box-shadow: 0 0 0 4px var(--focus-glow); outline: none; }

.auth__foot {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 11.5px;
  color: var(--fg-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 0.25rem;
}
.auth__chip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

@keyframes reveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.7; }
}
@keyframes chip-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

.auth__card { animation: reveal 360ms cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.auth__mark { animation: pulse 4s ease-in-out infinite; }
.auth__chip { animation: chip-blink 1.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .auth__card, .auth__mark, .auth__chip { animation: none !important; }
  * { transition-duration: 0ms !important; }
}

/* === 404 specifics === */
.auth__card--notfound { text-align: left; }
.notfound__code {
  font-size: clamp(64px, 14vw, 96px);
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.auth__card--notfound .btn { align-self: start; margin-top: 0.5rem; }

/* === Page layout (settings + audit) === */
.page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding: clamp(1rem, 3vw, 2.5rem);
  display: grid;
  gap: 1.5rem;
  max-width: 960px;
  margin: 0 auto;
}
.page__head { display: grid; gap: 0.25rem; }
.page__head-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  overflow: hidden;
}

/* === Flash notices === */
.flash {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-input);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--fg);
  font-size: 14px;
}
.flash--success {
  border-color: color-mix(in oklab, var(--accent) 35%, var(--border));
  background: color-mix(in oklab, var(--accent) 8%, var(--surface-2));
}
.flash--error {
  border-color: color-mix(in oklab, var(--danger) 35%, var(--border));
  background: color-mix(in oklab, var(--danger) 8%, var(--surface-2));
  color: var(--danger);
}

/* === Confirm HUD (replaces window.confirm + alert) === */
.confirm-hud {
  position: fixed; inset: 0;
  background: color-mix(in oklab, black 35%, transparent);
  backdrop-filter: blur(2px);
  z-index: 10001;
  display: grid; place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
}
.confirm-hud.is-visible { opacity: 1; pointer-events: auto; }
.confirm-hud__card {
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 1.25rem 1.5rem 1.1rem;
  min-width: 320px;
  max-width: min(440px, 92vw);
  display: grid;
  gap: 1rem;
  transform: scale(0.94);
  transition: transform 180ms cubic-bezier(.2,.8,.2,1);
}
.confirm-hud.is-visible .confirm-hud__card { transform: scale(1); }
.confirm-hud__title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.confirm-hud__body  { font-size: 14px; line-height: 1.45; color: var(--fg); margin: 0; }
.confirm-hud__actions { display: flex; justify-content: flex-end; gap: 0.5rem; }

/* === In-flight HUD (centered overlay with spinner during AJAX) === */
.save-hud {
  position: fixed; inset: 0;
  background: color-mix(in oklab, black 30%, transparent);
  backdrop-filter: blur(2px);
  z-index: 10000;
  display: grid; place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
}
.save-hud.is-visible { opacity: 1; pointer-events: auto; }
.save-hud__card {
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 1.25rem 1.5rem;
  display: flex; align-items: center; gap: 0.85rem;
  font-size: 15px; font-weight: 500;
  min-width: 200px;
  transform: scale(0.96);
  transition: transform 160ms cubic-bezier(.2,.8,.2,1);
}
.save-hud.is-visible .save-hud__card { transform: scale(1); }
.save-hud__spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--input-outline);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: hud-spin 750ms linear infinite;
  flex-shrink: 0;
}
@keyframes hud-spin { to { transform: rotate(360deg); } }

/* === Toast notifications — position + colors controlled via Site Settings > Toast === */
.toast-container {
  position: fixed;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
  max-width: calc(100vw - 2rem);
}
/* Default placement = top-center; modifier classes set the corner the JS toggles. */
.toast-container,
.toast-container--top-center    { top: 1rem; left: 50%; right: auto; bottom: auto; transform: translateX(-50%); align-items: center; }
.toast-container--top-left      { top: 1rem; left: 1rem; right: auto; bottom: auto; transform: none; align-items: flex-start; }
.toast-container--top-right     { top: 1rem; left: auto; right: 1rem; bottom: auto; transform: none; align-items: flex-end; }
.toast-container--bottom-center { top: auto; left: 50%; right: auto; bottom: 1rem; transform: translateX(-50%); align-items: center; flex-direction: column-reverse; }
.toast-container--bottom-left   { top: auto; left: 1rem; right: auto; bottom: 1rem; transform: none; align-items: flex-start; flex-direction: column-reverse; }
.toast-container--bottom-right  { top: auto; left: auto; right: 1rem; bottom: 1rem; transform: none; align-items: flex-end; flex-direction: column-reverse; }

.toast {
  pointer-events: auto;
  min-width: 320px;
  max-width: min(560px, calc(100vw - 2rem));
  padding: 0.875rem 1rem;
  border-radius: var(--radius-card);
  box-shadow: 0 10px 28px -8px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  animation: toast-in 200ms cubic-bezier(.2,.8,.2,1);
}
.toast--success { background: var(--toast-success-bg); color: var(--toast-success-text); }
.toast--error   { background: var(--toast-error-bg);   color: var(--toast-error-text); }
.toast--warning { background: var(--toast-warning-bg); color: var(--toast-warning-text); }

.toast-test-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Toast tab layout — 2-column grid with explicit placement so the order matches
 * the visual layout regardless of DOM order:
 *   Row 1: Placement  |  Test
 *   Row 2: Success    |  Warning
 *   Row 3: Error      |  .
 * Stacks to one column under 768px. */
.toast-widgets {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "placement test"
    "success   warning"
    "error     .";
  align-items: start;
}
.toast-widgets__placement { grid-area: placement; }
.toast-widgets__test      { grid-area: test; }
.toast-widgets__success   { grid-area: success; }
.toast-widgets__warning   { grid-area: warning; }
.toast-widgets__error     { grid-area: error; }
@media (max-width: 767px) {
  .toast-widgets {
    grid-template-columns: 1fr;
    grid-template-areas: "placement" "test" "success" "warning" "error";
  }
}
.toast__body  { flex: 1 1 auto; }
.toast__close {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  color: currentColor; opacity: 0.75;
  font-size: 18px; line-height: 1;
  padding: 0 2px; margin: -2px -4px -2px 0;
}
.toast__close:hover { opacity: 1; }
.toast.is-leaving { animation: toast-out 220ms ease-in forwards; }
@keyframes toast-in  { from { transform: translateY(-110%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes toast-out { to { transform: translateY(-115%); opacity: 0; } }

/* === Settings form === */
.settings__form { display: grid; gap: 1.5rem; }
.settings__section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  display: grid;
  gap: 1rem;
}
.settings__section-title {
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  /* Belt + suspenders for Safari: margin-top alone doesn't always defeat the
     `-webkit-margin-before` UA default on <h3>; logical-property + legacy
     prefix kill it everywhere. */
  margin-top: 0;
  margin-block-start: 0;
  -webkit-margin-before: 0;
  margin-bottom: 0.25rem;
}
.settings__row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 2fr;
  gap: 1.25rem;
  align-items: start;
  padding: 0.75rem 0;
  border-top: 1px solid var(--border);
}
.settings__row:first-of-type { border-top: 0; padding-top: 0; }
@media (max-width: 640px) {
  .settings__row { grid-template-columns: 1fr; gap: 0.5rem; }
}
.settings__label { display: grid; gap: 0.25rem; font-size: 14px; color: var(--fg); }
.settings__desc { color: var(--fg-muted); font-size: 12.5px; }
/* Flex layout so the per-field Undo button sits inline-right of the actual control
 * (input / select / iro-field / icon-picker__btn) and vertically centers with it.
 * Error messages take a full row underneath via flex-basis: 100%. */
.settings__control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.5rem;
}
/* Plain inputs / selects: grow into available space minus the undo button.
 * Override the global .field__input width:100% (which would force the input to a whole
 * flex line) by giving it width:auto and a flex-basis of 0 so it shares the row. */
.settings__control > .field__input { width: auto; flex: 1 1 0; min-width: 0; }
.settings__control > textarea.field__input { flex-basis: 100%; }
/* Naturally-sized controls (color picker, icon button) keep their content width so the
 * undo lands right next to them instead of at the row's far right edge. */
.settings__control > .iro-field { flex: 0 0 auto; }
.settings__control > .icon-picker__btn { flex: 0 0 auto; }
.settings__control > .image-drop { flex: 1 1 100%; }
.settings__control > .settings__error { flex-basis: 100%; margin: 0; }
.settings__row--error .field__input {
  border-color: color-mix(in oklab, var(--danger) 55%, var(--border));
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--danger) 12%, transparent);
}
.settings__error { color: var(--danger); font-size: 12.5px; }

/* Per-field undo: sits to the right of the control it reverts, vertically centered with
 * it. Hidden until the parent container picks up the .is-dirty class. */
.settings__undo {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  width: 28px; height: 28px; border-radius: 6px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-muted);
  flex-shrink: 0;
  opacity: 0; pointer-events: none;
  transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
}
.is-dirty > .settings__undo,
.is-dirty .settings__undo { opacity: 1; pointer-events: auto; }
.settings__undo:hover { background: var(--hover); color: var(--fg); }
.settings__undo:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-glow); }
/* Menu-items-grid cells: each cell is a single control, undo sits inline at the end. */
.menu-items-grid td {
  display: flex; align-items: center; gap: 0.4rem;
  vertical-align: middle;
}
.menu-items-grid td.menu-items-grid__name { display: table-cell; }
.menu-items-grid td > .field__input--compact { width: auto; flex: 1 1 0; min-width: 0; }
.menu-items-grid td > .icon-picker__btn { flex: 1 1 auto; min-width: 0; }
.field__input--color {
  width: 64px; height: 40px; padding: 4px;
  cursor: pointer;
}
.settings__actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.5rem; }

/* === Audit table === */
.audit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.audit-table thead th {
  text-align: left;
  font-weight: 500;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11.5px;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
}
.audit-table tbody td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}
.audit-table tbody tr:last-child td { border-bottom: 0; }
.audit-table__when  { white-space: nowrap; color: var(--fg-muted); }
.audit-table__empty { color: var(--fg-muted); text-align: center; padding: 1.5rem; }
.audit-table__changes summary { cursor: pointer; color: var(--accent); user-select: none; }
.audit-table__changes pre {
  margin-top: 0.5rem;
  padding: 0.75rem;
  background: var(--surface-2);
  border-radius: var(--radius-input);
  border: 1px solid var(--border);
  font-size: 12px;
  overflow: auto;
  max-width: 60ch;
  max-height: 320px;
}
.audit-table__none { color: var(--fg-muted); }

/* === Dashboard admin nav === */
.dash__admin { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }

/* === App layout: sidebar + topbar + main === */
.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  min-height: 100vh;
}
.layout__skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #fff;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-input);
  z-index: 100;
}
.layout__skip:focus { left: 1rem; top: 1rem; }
.layout__main {
  grid-area: main;
  /* Top padding leaves room for the fixed topbar; other sides keep the original
   * responsive padding. Using calc so we don't have to repeat the topbar height. */
  padding: calc(var(--topbar-h, 4.25rem) + clamp(1rem, 2.5vw, 2rem)) clamp(1rem, 2.5vw, 2rem) clamp(1rem, 2.5vw, 2rem);
  display: grid;
  gap: 1.5rem;
  align-content: start;
}

/* === Sidebar === */
.sidebar {
  grid-area: sidebar;
  background: var(--surface);
  border-right: 1px solid var(--border);
  /* No top padding — the brand area handles its own vertical padding to match the
   * topbar's height (so the two bottom borders line up). */
  padding: 0 0.75rem 1.25rem;
  display: grid;
  gap: 1rem;
  align-content: start;
  /* Fixed to the viewport — sidebar never scrolls with the page.
   * The 240px grid column on .layout still reserves the space so topbar/main line up.
   * If the nav grows beyond viewport height, the sidebar scrolls internally. */
  position: fixed;
  top: 0;
  left: 0;
  width: 240px;
  height: 100vh;
  overflow-y: auto;
  z-index: 30;
}
.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  /* Match the topbar's vertical padding AND min-height so the brand area is the same
   * height as the topbar — that makes both bottom borders sit at the same y.
   * 4.25rem (68px) = topbar's natural height with the 40px-tall user pill (26px avatar
   * + 0.375rem*2 padding + 1px*2 border) plus its 0.875rem*2 vertical padding. */
  padding: 0.875rem 1.25rem;
  min-height: 4.25rem;            /* paired with .topbar — see comment above */
  /* Negative horizontal margin escapes the sidebar's 0.75rem side padding so the
   * border-bottom spans edge-to-edge. The 1.25rem inner padding above keeps the logo
   * + brand text where they were (0.75rem escaped + 0.5rem original offset). */
  margin: 0 -0.75rem;
  border-bottom: 1px solid var(--border);
  box-sizing: border-box;
}
.sidebar__brand-name { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; }
.sidebar__nav { display: grid; gap: 2px; }
.sidebar__section {
  padding: 0.875rem 0.75rem 0.375rem;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.sidebar__link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-input);
  color: var(--fg-muted);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.sidebar__link:hover { background: var(--hover); color: var(--fg); }
.sidebar__link--active {
  color: var(--accent);
  border-left-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 7%, transparent);
}
.sidebar__icon {
  display: inline-block;
  width: 16px;
  text-align: center;
  font-size: 14px;
  opacity: 0.85;
}

/* === Topbar ===
 * Fixed (not sticky) so it always stays visible regardless of how long the page
 * is. position:sticky used to break on long pages because the topbar's grid cell
 * is auto-sized, giving sticky no scrolling room to stick within. Fixed avoids
 * the issue entirely; .layout__main pads the top by --topbar-h to clear it. */
.topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem clamp(1rem, 2.5vw, 2rem);
  height: var(--topbar-h);
  box-sizing: border-box;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: fixed;
  top: 0;
  left: 240px;                    /* clear of the fixed sidebar */
  right: 0;
  z-index: 20;
}
:root { --topbar-h: 4.25rem; }
.topbar__title {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0;
}
.topbar__user {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem 0.375rem 0.375rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--fg);
  transition: background 140ms ease, border-color 140ms ease;
}
.topbar__user:hover { background: var(--hover); border-color: color-mix(in oklab, var(--accent) 25%, var(--border)); }
.topbar__avatar {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--accent) 18%, var(--surface-2));
  color: var(--accent);
  font-weight: 600;
  font-size: 12.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.topbar__avatar img { width: 100%; height: 100%; border-radius: 999px; object-fit: cover; display: block; }
.topbar__name { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__chevron { color: var(--fg-muted); font-size: 10px; }

/* Notification bell — sits between page title and user pill. Icon-only button with
 * a soft tinted background (using --hover so it inherits whichever theme is active)
 * and a fully-rounded shape. Wrapped in .dropdown so it opens a notifications menu. */
/* Current balance pill — sits to the left of the bell. Same height (40px) as
   the bell / chat / user pill so the row stays visually aligned. */
.topbar__balance {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 40px;
  padding: 0 0.875rem;
  background: var(--hover);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-size: 13px;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.topbar__balance:hover {
  background: color-mix(in oklab, var(--accent) 8%, var(--hover));
  border-color: color-mix(in oklab, var(--accent) 35%, var(--border));
}
.topbar__balance:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.topbar__balance-icon { color: var(--fg-muted); flex: 0 0 auto; }
.topbar__balance-amount { color: var(--fg); }
@media (max-width: 600px) {
  /* Phone width: drop the icon to save room; keep the number visible. */
  .topbar__balance { padding: 0 0.625rem; gap: 0; }
  .topbar__balance-icon { display: none; }
}

/* ============================================================
   Wallet HUD — opens from the topbar balance pill.
   ============================================================ */
.wallet-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
}
.wallet-modal[hidden] { display: none; }
.wallet-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
}
.wallet-modal__panel {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: min(96vw, 640px);
  max-height: calc(100vh - 2.5rem);
  display: flex; flex-direction: column;
  box-shadow: 0 24px 64px -16px rgba(0,0,0,0.45);
  overflow: hidden;
}
.wallet-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--fg) 3%, var(--surface));
}
.wallet-modal__title { margin: 0; font-size: 16px; font-weight: 600; color: var(--fg); }
.wallet-modal__close {
  background: transparent; border: 0; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--fg-muted);
  padding: 0.1rem 0.4rem;
}
.wallet-modal__close:hover { color: var(--fg); }
.wallet-modal__body { padding: 0; overflow: auto; flex: 1 1 auto; }
.wallet-modal__loading { padding: 2.5rem 1rem; text-align: center; }
body.wallet-modal-open { overflow: hidden; }

/* Body sections rendered by /wallet/modal. */
.wallet-modal-body {
  display: flex; flex-direction: column; gap: 1rem;
  padding: 1rem 1.1rem 1.2rem;
}
.wallet-modal__heading {
  margin: 0; font-size: 13px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--fg-muted); font-weight: 700;
}
.wallet-modal__summary {
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 1rem 1.1rem;
  background: color-mix(in oklab, var(--accent) 12%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--accent) 35%, var(--border));
  border-radius: 12px;
}
.wallet-modal__balance-label {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-muted); font-weight: 700;
}
.wallet-modal__balance-amount {
  font-size: 32px; font-weight: 700; color: var(--fg);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Add-funds form. */
.wallet-modal__topup { display: flex; flex-direction: column; gap: 0.6rem; }
.wallet-topup-form { display: flex; flex-direction: column; gap: 0.7rem; }
.wallet-topup-form__amount-row {
  display: flex; align-items: center; gap: 0.4rem;
}
.wallet-topup-form__currency { color: var(--fg-muted); font-size: 18px; font-weight: 600; }
.wallet-topup-form__quick { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.wallet-topup-form__actions {
  display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.3rem;
}
/* Two-stage slider: amount (left) | card (right). The track is twice
   the container width with each stage at 50%; translating the track
   by -50% slides the card stage in. Container clips the off-screen
   stage so it never bleeds outside the modal panel. */
.wallet-stages {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.wallet-stages__track {
  display: flex;
  width: 200%;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.wallet-stage {
  width: 50%;
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0.1rem 0.15rem;
}
.wallet-stages[data-stage="card"] .wallet-stages__track {
  transform: translateX(-50%);
}
.wallet-stages[data-stage="amount"] .wallet-stage--card,
.wallet-stages[data-stage="card"]   .wallet-stage--amount {
  /* Visually hidden but still painted so the slide animation works. */
}
.wallet-stage[aria-hidden="true"] { pointer-events: none; }

.wallet-stage-back {
  align-self: flex-start;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.wallet-stage-back:hover { text-decoration: underline; }
.wallet-stage-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.wallet-topup-form__country {
  margin: 0;
  font-size: 12px;
  color: var(--fg-muted);
  letter-spacing: 0.02em;
}

/* Stripe Elements mount — Stripe injects its own iframe here. We just
   give it room and a friendly placeholder until Stripe.js has loaded. */
.wallet-topup-form__element {
  margin-top: 0.4rem;
  padding: 0.85rem;
  background: color-mix(in oklab, var(--fg) 2%, var(--surface));
  border: 1px solid var(--border);
  border-radius: 10px;
  min-height: 70px;
}
.wallet-topup-form__error {
  margin: 0.4rem 0 0;
  padding: 0.55rem 0.75rem;
  background: color-mix(in oklab, #b94a48 10%, var(--surface));
  border: 1px solid color-mix(in oklab, #b94a48 35%, var(--border));
  border-radius: 8px;
  color: #b94a48;
  font-size: 13px;
}

/* Transaction history list. */
.wallet-modal__history {
  display: flex; flex-direction: column; gap: 0.5rem;
  min-height: 0; /* allow the scroll child below to shrink */
}
/* Scrollable list — keeps balance + top-up form pinned above. The
   max-height caps it on tall viewports so a few rows always show
   the scrollbar affordance; flex shrinking handles short ones. */
.wallet-tx-list { list-style: none; margin: 0; padding: 0.1rem 0.1rem 0.25rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.wallet-tx {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border); border-radius: 10px;
  background: color-mix(in oklab, var(--fg) 2%, var(--surface));
  display: flex; flex-direction: column; gap: 0.25rem;
}
.wallet-tx__head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  font-size: 11px;
}
.wallet-tx__type { font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-muted); }
.wallet-tx__when { color: var(--fg-muted); }
.wallet-tx__body {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem;
}
.wallet-tx__desc  { font-size: 13px; color: var(--fg); }
.wallet-tx__amount {
  font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.wallet-tx__amount--credit { color: #2a8a3e; }
.wallet-tx__amount--debit  { color: #b94a48; }
.wallet-tx__foot {
  display: flex; gap: 0.5rem; align-items: center;
  font-size: 11px;
}
.wallet-tx__status {
  display: inline-flex; padding: 0.05rem 0.5rem;
  border-radius: 999px; font-weight: 700;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--fg) 4%, var(--surface));
  color: var(--fg-muted);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.wallet-tx__status--ok      { color: #2a8a3e; border-color: color-mix(in oklab, #2a8a3e 40%, var(--border)); background: color-mix(in oklab, #2a8a3e 8%, var(--surface)); }
.wallet-tx__status--pending { color: #b07000; border-color: color-mix(in oklab, #b07000 40%, var(--border)); background: color-mix(in oklab, #b07000 8%, var(--surface)); }
.wallet-tx__status--err     { color: #b94a48; border-color: color-mix(in oklab, #b94a48 40%, var(--border)); background: color-mix(in oklab, #b94a48 8%, var(--surface)); }
.wallet-tx__status--warn    { color: #c08400; border-color: color-mix(in oklab, #c08400 40%, var(--border)); background: color-mix(in oklab, #c08400 8%, var(--surface)); }
.wallet-tx__balance { color: var(--fg-muted); margin-left: auto; }

.topbar__bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--hover);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--fg-muted);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
.topbar__bell:hover {
  background: color-mix(in oklab, var(--accent) 10%, var(--hover));
  color: var(--fg);
  border-color: color-mix(in oklab, var(--accent) 30%, var(--border));
}
.topbar__bell[aria-expanded="true"] {
  background: color-mix(in oklab, var(--accent) 14%, var(--hover));
  border-color: color-mix(in oklab, var(--accent) 40%, var(--border));
  color: var(--fg);
}
.topbar__bell:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-glow);
}
/* Unread-count badge on the bell — text + auto-grows past 99 to "99+". */
.topbar__bell-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--del-text, #c0392b);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--surface);
  white-space: nowrap;
}

/* Chat bubble — sits next to the bell by default (header mode). When
 * body[data-chat-position="bottom-right"] is set, it detaches via position:fixed
 * to float in the lower-right corner of the viewport. Lives inside the persistent
 * topbar in the DOM either way, so AJAX page swaps never re-mount it. */
.topbar__chat {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--hover);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--fg-muted);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
.topbar__chat:hover {
  background: color-mix(in oklab, var(--accent) 10%, var(--hover));
  color: var(--fg);
  border-color: color-mix(in oklab, var(--accent) 30%, var(--border));
}
.topbar__chat:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-glow);
}
/* Unread-message badge on the chat bubble. Shows the count (capped at "99+") or a
 * tiny dot when no count is set. Hidden when empty. */
.topbar__chat-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--del-text, #c0392b);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--surface);
  white-space: nowrap;
}
/* Bottom-right placement: fix to the viewport corner and bump to a chunkier 56px
 * bubble with a deeper shadow (matches the floating-chat-launcher convention). */
body[data-chat-position="bottom-right"] .topbar__chat {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  width: 56px;
  height: 56px;
  background: var(--accent);
  color: var(--btn-text, #fff);
  border-color: color-mix(in oklab, var(--accent) 60%, var(--border));
  box-shadow: 0 12px 28px -8px color-mix(in oklab, var(--accent) 50%, transparent), 0 4px 10px -2px rgba(0,0,0,0.18);
  z-index: 60;
}
body[data-chat-position="bottom-right"] .topbar__chat:hover {
  background: color-mix(in oklab, var(--accent) 85%, #000);
  color: var(--btn-text, #fff);
}
body[data-chat-position="bottom-right"] .topbar__chat svg { width: 24px; height: 24px; }

/* === Profile page avatar upload === */
.profile-avatar {
  display: flex; align-items: center; gap: 1rem;
}
.profile-avatar__preview {
  width: 96px; height: 96px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--accent) 18%, var(--surface-2, var(--hover)));
  color: var(--accent);
  font-weight: 600;
  font-size: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex: 0 0 auto;
  border: 1px solid var(--border);
}
.profile-avatar__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-avatar__file { display: none; }
.profile-avatar__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.profile-avatar__controls .settings__desc { width: 100%; margin-top: 0.25rem; }

/* === Chat panel (right side, slides in) === */
.chat-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 320px;
  max-width: 92vw;
  z-index: 80;
  background: var(--surface);
  color: var(--fg);
  border-left: 1px solid var(--border);
  box-shadow: -16px 0 32px -12px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), visibility 0s 220ms;
}
.chat-panel.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), visibility 0s;
}
.chat-panel[hidden] {
  /* Stay rendered so the slide transition works; visually hidden via class above. */
  display: flex;
}
.chat-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--border);
  min-height: 4.25rem;
}
.chat-panel__title { font-size: 16px; font-weight: 600; margin: 0; }
.chat-panel__close {
  background: transparent; border: 0; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--fg-muted);
  padding: 0.25rem 0.5rem; border-radius: 8px;
}
.chat-panel__close:hover { background: var(--hover); color: var(--fg); }
.chat-panel__search-row { padding: 0.625rem 1rem; border-bottom: 1px solid var(--border); }
.chat-panel__search { width: 100%; }

.chat-users {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0.5rem;
  overflow-y: auto;
  flex: 1 1 auto;
}
.chat-users__state {
  padding: 1rem;
  text-align: center;
  font-size: 13px;
  color: var(--fg-muted);
}
.chat-user {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 120ms ease;
}
.chat-user:hover { background: var(--hover); }
.chat-user__avatar {
  position: relative;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--accent) 18%, var(--surface-2, var(--hover)));
  color: var(--accent);
  font-weight: 600;
  font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.chat-user__avatar img { width: 100%; height: 100%; border-radius: 999px; object-fit: cover; display: block; }
.chat-user__dot {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 12px; height: 12px;
  border-radius: 999px;
  background: #16a34a;                    /* online: green */
  box-shadow: 0 0 0 2px var(--surface);   /* ring so it pops against the avatar */
}
.chat-user__dot--offline { background: var(--border); }
.chat-user__body { min-width: 0; }
.chat-user__name { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-user__meta { font-size: 11px; color: var(--fg-muted); display: flex; gap: 0.5rem; }
.chat-user__role { text-transform: uppercase; letter-spacing: 0.04em; }
.chat-user__seen { font-variant-numeric: tabular-nums; }
/* Per-user unread badge inside the chat list (right side of the row). */
.chat-user__unread {
  align-self: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--btn-text, #fff);
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  white-space: nowrap;
}
.chat-user--me .chat-user__name::after {
  content: 'you';
  margin-left: 0.375rem;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  background: var(--hover);
  padding: 1px 6px;
  border-radius: 999px;
}

/* === Conversation thread === */
.chat-thread {
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 85;          /* above .chat-panel (80) when overlaying it */
}
.chat-thread[hidden] { display: none; }

/* PANEL mode (default): the thread overlays the chat panel — same 320px column,
 * same animation. Effectively replaces the user list. */
body[data-chat-open-style="panel"] .chat-thread {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 320px;
  max-width: 92vw;
  border-top: 0;
  border-bottom: 0;
  border-right: 0;
  box-shadow: -16px 0 32px -12px rgba(0,0,0,0.25);
}

/* WINDOW mode: floats to the LEFT of the chat panel like Facebook. Smaller
 * footprint, rounded corners. When the user-list panel is closed, the window
 * just sits at the right edge of the viewport. */
body[data-chat-open-style="window"] .chat-thread {
  position: fixed;
  bottom: 0;
  right: 1rem;
  width: 320px;
  height: 440px;
  max-height: calc(100vh - 1rem);
  border-radius: 12px 12px 0 0;
  border-bottom: 0;
  box-shadow: 0 -8px 28px -8px rgba(0,0,0,0.2);
}
body[data-chat-open-style="window"].layout--chat-open .chat-thread {
  right: calc(320px + 1rem);
}
@media (max-width: 900px) {
  /* On narrow screens, window mode behaves like panel mode (full-side) so the
   * window doesn't fight the user list for limited horizontal space. */
  body[data-chat-open-style="window"] .chat-thread {
    top: 0; right: 0; bottom: 0;
    width: 320px; height: auto; max-height: none;
    border-radius: 0;
  }
}


.chat-thread__head {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.625rem 0.75rem;
}
.chat-thread__back,
.chat-thread__min {
  background: transparent; border: 0; cursor: pointer;
  font-size: 18px; color: var(--fg-muted);
  padding: 0.25rem 0.5rem; border-radius: 8px;
}
.chat-thread__back:hover,
.chat-thread__min:hover { background: var(--hover); color: var(--fg); }
.chat-thread__min { font-size: 22px; line-height: 0.6; }

/* Minimize button only makes sense in window mode (panel mode has the back arrow). */
body[data-chat-open-style="panel"]  .chat-thread__min { display: none; }
body[data-chat-open-style="window"] .chat-thread__back { display: none; }

/* Minimized state: collapse to just the header, which becomes the click target
 * to restore. Applies only in window mode — panel mode shouldn't ever minimize. */
body[data-chat-open-style="window"] .chat-thread.is-minimized {
  height: auto;
  bottom: 0;
}
.chat-thread.is-minimized .chat-thread__messages,
.chat-thread.is-minimized .chat-thread__compose { display: none; }
.chat-thread.is-minimized .chat-thread__head { cursor: pointer; }
.chat-thread.is-minimized .chat-thread__min { transform: rotate(180deg); }  /* visual hint that it'll restore */
.chat-thread__avatar {
  width: 32px; height: 32px; border-radius: 999px;
  background: color-mix(in oklab, var(--accent) 18%, var(--hover));
  color: var(--accent); font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.chat-thread__avatar img { width: 100%; height: 100%; border-radius: 999px; object-fit: cover; display: block; }
.chat-thread__who  { flex: 1 1 auto; min-width: 0; }
.chat-thread__name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-thread__sub  { font-size: 11px; color: var(--fg-muted); }

.chat-thread__messages {
  list-style: none;
  margin: 0;
  padding: 0.75rem;
  overflow-y: auto;
  flex: 1 1 auto;
  display: flex; flex-direction: column; gap: 0.375rem;
  background: var(--bg);
}
.chat-msg {
  max-width: 78%;
  padding: 0.5rem 0.75rem;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.chat-msg--theirs {
  align-self: flex-start;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.chat-msg--mine {
  align-self: flex-end;
  background: var(--accent);
  color: var(--btn-text, #fff);
  border-bottom-right-radius: 4px;
}
.chat-msg__time { display: block; font-size: 10.5px; opacity: 0.7; margin-top: 2px; }
.chat-msg__time--mine { text-align: right; }
/* Read-receipt checks on your own messages — sits inline with the timestamp.
 * One check = delivered, two checks = read (close together, no spacing). */
.chat-msg__receipt { margin-left: 0.5rem; font-weight: 700; letter-spacing: -2px; }
.chat-msg__receipt.is-sent { opacity: 0.6; }
.chat-msg__receipt.is-read { opacity: 1; color: #a8e0c0; }    /* green tint on accent bg */
.chat-thread__day {
  align-self: center;
  font-size: 11px;
  color: var(--fg-muted);
  padding: 4px 10px;
  background: var(--hover);
  border-radius: 999px;
  margin: 0.25rem 0;
}
.chat-thread__more {
  align-self: center;
  font-size: 11px;
  color: var(--fg-muted);
  padding: 0.375rem 0;
  text-align: center;
}

/* Typing indicator — small left-aligned bubble with three pulsing dots. */
.chat-typing {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
}
.chat-typing__dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--fg-muted);
  animation: chat-typing-pulse 1200ms ease-in-out infinite;
}
.chat-typing__dot:nth-child(2) { animation-delay: 150ms; }
.chat-typing__dot:nth-child(3) { animation-delay: 300ms; }
@keyframes chat-typing-pulse {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-2px); }
}

.chat-thread__compose {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.625rem 0.75rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.chat-thread__compose-row { display: flex; align-items: flex-end; gap: 0.375rem; }
.chat-thread__input {
  flex: 1 1 auto;
  resize: none;
  height: 40px;
  min-height: 40px;
  max-height: 120px;
  padding: 0.5rem 0.75rem;
  font-size: 13.5px;
  line-height: 1.4;
  overflow-y: auto;
}
.chat-thread__send { flex: 0 0 auto; height: 40px; }
.chat-thread__file { display: none; }
.chat-thread__attach-btn {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--fg-muted);
  cursor: pointer;
}
.chat-thread__attach-btn:hover { background: var(--hover); color: var(--accent); border-color: color-mix(in oklab, var(--accent) 35%, var(--border)); }
.chat-thread__attach-row { display: flex; }
.chat-thread__attach-row[hidden] { display: none; }
.chat-thread__attach-chip {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.25rem 0.5rem;
  background: color-mix(in oklab, var(--accent) 12%, var(--hover));
  color: var(--fg);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--border));
  border-radius: 999px;
  font-size: 12px;
  max-width: 100%;
}
.chat-thread__attach-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.chat-thread__attach-clear {
  background: transparent; border: 0; cursor: pointer;
  color: var(--fg-muted); font-size: 14px; line-height: 1; padding: 0 2px;
}
.chat-thread__attach-clear:hover { color: var(--del-text, #c0392b); }

/* Inline attachments inside message bubbles. */
.chat-msg__attach {
  display: block;
  margin-top: 0.375rem;
}
.chat-msg__attach-img {
  display: block;
  max-width: 100%;                /* never wider than the bubble */
  max-height: 240px;
  width: auto;
  height: auto;
  border-radius: 10px;
  border: 1px solid color-mix(in oklab, currentColor 25%, transparent);
  cursor: zoom-in;
}
.chat-msg__attach-doc {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  background: color-mix(in oklab, currentColor 8%, transparent);
  border: 1px solid color-mix(in oklab, currentColor 22%, transparent);
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  font-size: 12.5px;
}
.chat-msg__attach-doc:hover { background: color-mix(in oklab, currentColor 16%, transparent); }
.chat-msg__attach-doc-icon { font-size: 18px; opacity: 0.8; }
.chat-msg__attach-doc-meta { display: grid; gap: 1px; min-width: 0; }
.chat-msg__attach-doc-name { font-weight: 600; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-msg__attach-doc-sub  { opacity: 0.7; font-size: 11px; }

/* Chat audit thread layout — admin-only readable transcript. */
.audit-chat { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; }
.audit-chat__row {
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.audit-chat__head { display: flex; gap: 0.5rem; font-size: 13px; margin-bottom: 0.25rem; }
.audit-chat__sub  { color: var(--fg-muted); font-size: 11.5px; }
.audit-chat__body { white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; font-size: 13.5px; line-height: 1.45; }
.audit-chat__attach { margin-top: 0.5rem; }

/* When the chat panel is open, shift the main content over so it isn't covered.
 * On narrow screens we let it overlay (the panel hits max-width: 92vw anyway). */
@media (min-width: 900px) {
  body.layout--chat-open .layout__main { padding-right: calc(320px + clamp(1rem, 2.5vw, 2rem)); }
}
/* Reserve room at the bottom of the main content area so the floating bubble
 * (56px high + 1.25rem offset + a little breathing room) never covers
 * Save/Cancel buttons that sit at the very bottom of long forms. */
body[data-chat-position="bottom-right"] .layout__main { padding-bottom: 6rem; }

/* Bug report modal — persistent in the layout, toggled via [hidden]. Uses theme vars
 * so it works in light + dark. The dropdown item that opens it is a plain button
 * styled to match the existing .dropdown__item links. */
.dropdown__item {
  /* Allow <button> elements to match the visual treatment of the <a> items. */
  width: 100%;
  background: transparent;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.bug-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4rem 1rem 1rem;
}
.bug-modal[hidden] { display: none; }
.bug-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  animation: bug-fade-in 140ms ease both;
}
.bug-modal__panel {
  position: relative;
  width: min(560px, 100%);
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 60px -12px rgba(0,0,0,0.45);
  padding: 1.25rem 1.5rem 1.5rem;
  animation: bug-pop-in 160ms cubic-bezier(.2,.8,.2,1) both;
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
}
.bug-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.bug-modal__title { font-size: 18px; font-weight: 600; margin: 0; }
.bug-modal__close {
  background: transparent; border: 0; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--fg-muted);
  padding: 0.25rem 0.5rem; border-radius: 8px;
}
.bug-modal__close:hover { background: var(--hover); color: var(--fg); }
.bug-modal__form { display: grid; gap: 1rem; }
.bug-modal__row  { display: grid; gap: 0.375rem; }
.bug-modal__row .settings__label { display: grid; gap: 0.125rem; }
.bug-modal__actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 0.25rem; }

/* Bug-report screenshot zone — drop / click / paste, with inline preview after pick. */
.bug-shot {
  position: relative;
  display: block;
  padding: 1rem;
  border: 2px dashed var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  text-align: center;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}
.bug-shot.is-dragover { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 10%, var(--surface)); }
.bug-shot.has-file    { cursor: default; padding: 0.625rem; }
.bug-shot__file { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.bug-shot.has-file .bug-shot__file { pointer-events: none; }
.bug-shot__hint { pointer-events: none; font-size: 13px; color: var(--fg-muted); }
.bug-shot.has-file .bug-shot__hint { display: none; }
.bug-shot__preview { display: grid; gap: 0.5rem; }
/* Explicit override: a class rule has the same specificity as [hidden] and (because
 * it comes later) was beating the UA stylesheet's `display: none`, leaving the empty
 * preview visible and showing the IMG's letterbox background as a black box. */
.bug-shot__preview[hidden] { display: none; }
.bug-shot__img {
  display: block;
  max-width: 100%;
  max-height: 220px;
  margin: 0 auto;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--hover);     /* letterbox matches theme instead of stark black */
  object-fit: contain;
}
.bug-shot__meta { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 12px; color: var(--fg-muted); }
.bug-shot__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }

/* === Bug-report management UI === */
.bug-table__id    { font-variant-numeric: tabular-nums; color: var(--fg-muted); }
.bug-table__title { font-weight: 500; }

/* Status badge */
.bug-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}
.bug-status--new         { background: color-mix(in oklab, var(--accent) 12%, var(--surface)); color: var(--accent); border-color: color-mix(in oklab, var(--accent) 30%, transparent); }
.bug-status--in_progress { background: color-mix(in oklab, #f59e0b 14%, var(--surface)); color: #b45309; border-color: color-mix(in oklab, #f59e0b 35%, transparent); }
.bug-status--resolved    { background: color-mix(in oklab, #16a34a 14%, var(--surface)); color: #15803d; border-color: color-mix(in oklab, #16a34a 35%, transparent); }
.bug-status--closed      { background: var(--hover); color: var(--fg-muted); border-color: var(--border); }

/* Priority badge */
.bug-pri {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}
.bug-pri--low    { background: var(--hover); color: var(--fg-muted); border-color: var(--border); }
.bug-pri--medium { background: color-mix(in oklab, #f59e0b 14%, var(--surface)); color: #b45309; border-color: color-mix(in oklab, #f59e0b 35%, transparent); }
.bug-pri--high   { background: color-mix(in oklab, #dc2626 14%, var(--surface)); color: #b91c1c; border-color: color-mix(in oklab, #dc2626 35%, transparent); }
.compliance-table__desc { max-width: 320px; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* === Compliance type-filter chips === */
.compliance-chips {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin: 0 0 0.75rem;
}
.compliance-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  font-size: 12.5px; font-weight: 500;
  text-decoration: none;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.compliance-chip:hover { border-color: color-mix(in oklab, var(--accent) 40%, var(--border)); color: var(--accent); }
.compliance-chip.is-active {
  background: var(--accent);
  color: var(--btn-text, #fff);
  border-color: var(--accent);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.compliance-chip.is-active .compliance-chip__count {
  background: rgba(255,255,255,0.22); color: inherit;
}
.compliance-chip.is-empty:not(.is-active) {
  opacity: 0.55;
}
.compliance-chip__count {
  font-size: 11px; font-weight: 600;
  padding: 1px 7px; border-radius: 999px;
  background: var(--hover); color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

/* === Single-file drag-drop component (Compliance add/edit form) === */
.file-drop { position: relative; }
.file-drop__input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.file-drop__zone {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.25rem; border: 2px dashed var(--border); border-radius: 10px;
  background: var(--surface-2, var(--surface)); color: var(--fg-muted);
  cursor: pointer; transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}
.file-drop__zone:hover,
.file-drop__zone:focus-within { border-color: var(--accent); color: var(--fg); background: color-mix(in oklab, var(--accent) 4%, var(--surface-2, var(--surface))); }
.file-drop__zone.is-dragover { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, var(--surface-2, var(--surface))); color: var(--fg); }
.file-drop__icon { flex: 0 0 auto; color: var(--accent); }
.file-drop__copy { display: flex; flex-direction: column; gap: 0.15rem; font-size: 13px; }
.file-drop__copy strong { color: var(--fg); font-weight: 600; }
.file-drop__copy a { color: var(--accent); }
.file-drop__hint { font-size: 11.5px; color: var(--fg-muted); margin-top: 0.25rem; }
.file-drop__current {
  display: flex; align-items: center; gap: 0.5rem;
  margin-top: 0.5rem; padding: 0.5rem 0.75rem; background: var(--hover);
  border: 1px solid var(--border); border-radius: 6px; font-size: 12.5px;
}
.file-drop__current[hidden] { display: none; }
.file-drop__current-label { color: var(--fg-muted); }
.file-drop__current-name  { font-weight: 500; word-break: break-all; flex: 1 1 auto; }
.file-drop__current-size  { color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.file-drop__clear {
  background: transparent; border: 0; color: var(--fg-muted); cursor: pointer;
  font-size: 18px; line-height: 1; padding: 0 0.25rem; border-radius: 4px;
}
.file-drop__clear:hover { color: #b91c1c; background: color-mix(in oklab, #dc2626 12%, transparent); }

/* === Compliance Add Document HUD (mirrors bug-modal pattern) === */
.compliance-modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 4rem 1rem 1rem;
}
.compliance-modal[hidden] { display: none; }
.compliance-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.45);
  animation: bug-fade-in 140ms ease both;
}
.compliance-modal__panel {
  position: relative;
  width: min(620px, 100%);
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 24px 60px -12px rgba(0,0,0,0.45);
  padding: 1.25rem 1.5rem 1.5rem;
  animation: bug-pop-in 160ms cubic-bezier(.2,.8,.2,1) both;
  max-height: calc(100vh - 5rem); overflow-y: auto;
}
.compliance-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.compliance-modal__title { font-size: 18px; font-weight: 600; margin: 0; }
.compliance-modal__close { background: transparent; border: 0; cursor: pointer; font-size: 22px; line-height: 1; color: var(--fg-muted); padding: 0.25rem 0.5rem; border-radius: 8px; }
.compliance-modal__close:hover { background: var(--hover); color: var(--fg); }
.compliance-modal__form { display: grid; gap: 1rem; }
.compliance-modal__actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 0.25rem; }
.compliance-modal__current-file {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem;
  margin: 0 0 0.5rem; padding: 0.5rem 0.75rem;
  background: var(--hover); border: 1px solid var(--border); border-radius: 6px;
  font-size: 12.5px;
}
.compliance-modal__current-file[hidden] { display: none; }
.compliance-modal__current-label { color: var(--fg-muted); }
.compliance-modal__current-size  { color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.compliance-modal__current-hint  { color: var(--fg-muted); font-size: 11.5px; flex-basis: 100%; }

/* === Profile field permissions (Site Settings → User tab) ===
 * Table with one row per datapoint and two toggle columns. Toggles are
 * standard .check-pill checkboxes with the chrome stripped (.check-pill--bare
 * removes the border and pill shape so the checkbox visual stands alone). */
.profile-perms { width: 100%; border-collapse: collapse; }
.profile-perms thead th {
  text-align: left;
  font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--fg-muted); font-weight: 600;
  padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border);
}
.profile-perms__field-col   { width: auto; }
.profile-perms__toggle-col  { width: 95px; text-align: center !important; }
.profile-perms__group       { border-top: 1px solid var(--border); }
.profile-perms__group:first-of-type { border-top: 0; }
.profile-perms__group-head th {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-muted); font-weight: 700;
  padding: 0.75rem 0.75rem 0.25rem;
  background: color-mix(in oklab, var(--surface) 50%, transparent);
}
.profile-perms__row > td { padding: 0.4rem 0.75rem; border-bottom: 1px solid color-mix(in oklab, var(--border) 50%, transparent); }
.profile-perms__row:last-child > td { border-bottom: 0; }
.profile-perms__field   { color: var(--fg); }
.profile-perms__toggle  { text-align: center; }
.check-pill--bare {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; background: transparent;
  min-width: 0; min-height: 0;
}
.check-pill--bare:hover { border-color: transparent; background: transparent; }
.check-pill--bare:has(input:checked) { background: transparent; border-color: transparent; }
.check-pill--bare[aria-disabled="true"] { cursor: not-allowed; opacity: 0.45; }
.profile-perms__sys-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.05rem 0.45rem;
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-muted);
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--border));
  border-radius: 4px;
  vertical-align: middle;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Inline "Originator" checkbox shown on every Job Titles row — controls
 * whether users with that title appear on the (future) Originators view. */
.library-types__check {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.25rem 0.55rem;
  font-size: 12px; color: var(--fg-muted);
  border: 1px solid var(--border); border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.library-types__check:hover {
  border-color: color-mix(in oklab, var(--accent) 35%, var(--border));
}
.library-types__check:has(input:checked) {
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  border-color: color-mix(in oklab, var(--accent) 35%, var(--border));
  color: var(--fg);
}

/* === Document-library type-vocabulary editor (Site Settings tabs) === */
.library-types { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.4rem; }
.library-types__empty { padding: 0.5rem 0.75rem; color: var(--fg-muted); font-style: italic; border: 1px dashed var(--border); border-radius: 6px; }
.library-types__item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.35rem 0.5rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: 6px;
}
.library-types__edit { display: flex; flex: 1 1 auto; gap: 0.35rem; margin: 0; align-items: center; }
.library-types__edit .field__input { flex: 1 1 auto; }
/* Two-input variant for Lead Source / similar — label on the left,
   description on the right, both editable, button on the end. */
.library-types__edit--with-desc {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(180px, 2fr) auto;
  gap: 0.35rem;
}
.library-types__edit--with-desc .field__input { width: 100%; }
.library-types__add--with-desc {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(180px, 2fr) auto;
  gap: 0.5rem;
  align-items: center;
}
.library-types__add--with-desc .field__input { width: 100%; }
/* Read-only variant for users without settings.edit. */
.library-types__edit--ro       { display: flex; flex-direction: column; gap: 0.1rem; }
.library-types__edit-label-ro  { color: var(--fg); font-weight: 600; }
.library-types__edit-desc-ro   { color: var(--fg-muted); font-size: 12px; }
.library-types__handle--ro     { cursor: default; }

/* === Lead Source table layout (Lead Store → Lead Settings,
       Site Settings → Leads). Each row is a 7-column grid; the inline
       <form> uses display: contents so its 5 inputs (label, amount,
       mortgage_type, description, save) participate in the parent
       grid alongside the handle cell and the delete form. */
.lt-table { background: transparent; }
.lt-table__head {
  display: grid;
  grid-template-columns: 22px minmax(140px, 1fr) 110px minmax(140px, 1fr) minmax(180px, 1.6fr) auto auto;
  gap: 0.4rem;
  padding: 0.5rem 0.55rem;
  font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--fg-muted);
  border-bottom: 1px solid var(--border);
}
.library-types--table { padding: 0; margin: 0.3rem 0; display: grid; gap: 0.35rem; }
.lt-row {
  display: grid;
  grid-template-columns: 22px minmax(140px, 1fr) 110px minmax(140px, 1fr) minmax(180px, 1.6fr) auto auto;
  gap: 0.4rem;
  align-items: center;
  padding: 0.3rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.lt-row > .library-types__edit,
.lt-row > .library-types__delete { display: contents; }
.lt-row input[type="hidden"] { display: none; }
.lt-row .lt-col-handle { cursor: grab; color: var(--fg-muted); user-select: none; }
.lt-row.is-dragging  { opacity: 0.5; outline: 2px dashed var(--accent); outline-offset: -2px; }
.lt-row.is-removing  { opacity: 0.4; pointer-events: none; }
.lt-row__empty {
  padding: 0.6rem 0.75rem; color: var(--fg-muted); font-style: italic;
  border: 1px dashed var(--border); border-radius: 8px;
}

/* Add form: same column layout (no handle / no delete on this row;
   the spacers are explicit <span class="lt-col-*"> in the markup). */
.lt-row--add {
  margin-top: 0.4rem;
  background: color-mix(in oklab, var(--accent) 4%, var(--surface));
  border-color: color-mix(in oklab, var(--accent) 25%, var(--border));
}
.lt-row--add .lt-col-save { white-space: nowrap; }

.lt-col-handle  { min-width: 0; }
.lt-col-source  { min-width: 0; }
.lt-col-amount  { min-width: 0; font-variant-numeric: tabular-nums; }
.lt-col-type    { min-width: 0; }
.lt-col-desc    { min-width: 0; }
.lt-col-actions { min-width: 0; }
.lt-col-save    { white-space: nowrap; }
.lt-col-delete  { min-width: 0; }

/* User-owned variant (Lead Store → Lead Settings): the user fills in
   Lead Source + Mortgage Type + min/max + Save / Delete buttons.
   6 columns total. Source / Type get the lion's share via 3fr / 2fr
   so the dropdown values have room; amount cells stay compact since
   they only need to fit "1,234.56". Action columns are fixed widths
   (so the header's empty spacer spans line up with the body's
   buttons — `auto` would size them by content and misalign the row). */
/* Edit and Delete share the same column treatment — `auto` lets them
   size to whichever rendering the user picked in Profile → Settings:
   ~32px for the icon-glyph SVG, or the badge pill's text width. */
.lt-table__head--user-own,
.lt-row--user-own {
  display: grid;
  grid-template-columns: minmax(220px, 3fr) minmax(180px, 2fr) 180px 180px auto auto;
  gap: 0.5rem;
  align-items: center;
}
/* Lead Settings rows live inside the panel card, so the standalone
   border/rounded surface on .lt-row would draw a box-inside-a-box.
   Strip it back to a flat row with just a subtle bottom rule. */
.lt-row--user-own {
  background: transparent;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--border);
}
.lt-row--user-own:last-child { border-bottom: 0; }

/* Site Settings → Leads admin variant: handle | label | description |
   save | delete. (Mortgage type column was removed — that column is
   now per-user / dynamic and lives in Lead Store.) */
.lt-table__head--admin,
.lt-row--admin {
  display: grid;
  grid-template-columns: 22px minmax(180px, 2fr) minmax(200px, 3fr) auto auto;
  gap: 0.5rem;
  align-items: center;
}
.lt-row--admin > .library-types__edit,
.lt-row--admin > .library-types__delete { display: contents; }
.lt-row--admin input[type="hidden"] { display: none; }

/* Section header: title on the left, Add button on the right. */
.settings__section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 0.6rem;
}
.settings__section-head .settings__section-title { margin: 0; }

/* Lead distribution dropdown form — compact 2-col layout that wraps
   on narrow viewports, with the Save button on its own row aligned
   right. */
.lead-dist-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.75rem 1rem;
  align-items: end;
}
.lead-dist-form__actions {
  grid-column: 1 / -1;
  display: flex; justify-content: flex-end;
  margin-top: 0.25rem;
}
.lt-col-edit {
  min-width: 0;
  display: flex; align-items: center; justify-content: center;
}
/* Header-row placeholder buttons: take grid space identically to the
   body buttons so the auto columns match between header and body,
   but invisible and unreachable. */
.lt-col-ghost { visibility: hidden; pointer-events: none; }
.lt-row--user-own > .library-types__edit,
.lt-row--user-own > .library-types__delete { display: contents; }
.lt-row--user-own input[type="hidden"] { display: none; }
/* === Add Lead Settings HUD ====================================== */
.uls-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
}
.uls-modal[hidden] { display: none; }
.uls-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(2px);
}
.uls-modal__panel {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: min(96vw, 540px);
  box-shadow: 0 24px 64px -16px rgba(0,0,0,0.45);
  overflow: visible;   /* lets the modern-ac dropdown spill out cleanly */
}
.uls-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--fg) 3%, var(--surface));
}
.uls-modal__title { margin: 0; font-size: 16px; font-weight: 600; color: var(--fg); }
.uls-modal__close {
  background: transparent; border: 0; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--fg-muted);
  padding: 0.1rem 0.4rem;
}
.uls-modal__close:hover { color: var(--fg); }
.uls-modal__form {
  display: flex; flex-direction: column;
  gap: 0.85rem;
  padding: 1rem 1.1rem 1.2rem;
}
.uls-modal__row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem;
}
.uls-modal__actions {
  display: flex; justify-content: flex-end; gap: 0.5rem;
  margin-top: 0.3rem;
}
body.uls-modal-open { overflow: hidden; }

/* Panel header layout — Lead Settings title + Add button side by side. */
.settings__panel-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; margin-bottom: 1rem;
}

/* === Modern autocomplete widget — styled dropdown that reads its
       options from a referenced <datalist>. Wraps any input. */
.modern-ac {
  position: relative;
  /* The wrapper participates in a parent grid track — make sure it
     stretches to fill the assigned column instead of shrinking to
     content. `min-width: 0` lets it shrink below the input's intrinsic
     content size when the column track is small (without this, long
     placeholder text would refuse to shrink and push siblings out). */
  display: block;
  width: 100%;
  min-width: 0;
}
.modern-ac__input { width: 100%; box-sizing: border-box; }
.modern-ac__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  max-height: 240px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 14px 32px -10px rgba(0,0,0,0.3),
              0  4px  8px -4px  rgba(0,0,0,0.15);
  /* A small entry animation to feel snappier. */
  animation: modern-ac-pop 90ms ease-out;
}
@keyframes modern-ac-pop {
  0%   { opacity: 0; transform: translateY(-4px) scale(0.99); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}
.modern-ac__menu[hidden] { display: none; }
.modern-ac__menu li {
  padding: 0.45rem 0.65rem;
  border-radius: 6px;
  font-size: 13px;
  color: var(--fg);
  cursor: pointer;
  user-select: none;
  transition: background 0.08s ease, color 0.08s ease;
}
.modern-ac__menu li + li { margin-top: 1px; }
.modern-ac__menu li:hover { background: color-mix(in oklab, var(--accent) 10%, var(--surface)); }
.modern-ac__menu li.is-active {
  background: var(--accent);
  color: var(--btn-text, #fff);
}
.modern-ac__menu li.is-active mark { background: transparent; color: inherit; }
.modern-ac__menu mark {
  background: color-mix(in oklab, var(--accent) 25%, transparent);
  color: inherit;
  font-weight: 700;
  padding: 0;
  border-radius: 2px;
}
/* Scrollbar tuning — match the modal scrollbar style. */
.modern-ac__menu::-webkit-scrollbar       { width: 8px; }
.modern-ac__menu::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
/* Site Settings → Payroll: lay the per-field option sections out as a
   two-column grid so the panel reads compactly. min-width on each
   section lets the layout wrap to one column on narrow viewports. */
.payroll-options-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
}
.payroll-options-grid > .payroll-options-section {
  flex: 1 1 calc(50% - 0.5rem);
  min-width: 280px;
  margin: 0;
  /* The flex parent stretches sections to the tallest sibling. The
     section itself is a CSS grid; without `align-content: start` the
     extra vertical space is absorbed by stretching the trailing grid
     row (i.e. the Add form), which made the Add form look "huge"
     compared to the inline-edit rows. */
  align-content: start;
}
.payroll-options-grid > .payroll-options-section .library-types__add {
  align-self: start;
}

/* ============================================================
   Payments admin page (/payments). Cross-user list of every
   wallet_transactions row with search + filter + pagination.
   ============================================================ */
.payments-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin: 0.5rem 0 1rem;
}
.payments-stat {
  display: flex; flex-direction: column;
  padding: 0.6rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 8px;
}
.payments-stat__label {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-muted); font-weight: 700;
}
.payments-stat__value {
  font-size: 22px; font-weight: 700; color: var(--fg);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.payments-stat--ok      { border-left-color: #2a8a3e; }
.payments-stat--pending { border-left-color: #b07000; }
.payments-stat--err     { border-left-color: #b94a48; }
.payments-stat--warn    { border-left-color: #c08400; }

.payments-filter {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 0.6rem;
  align-items: end;
  margin-bottom: 1rem;
  padding: 0.85rem;
  background: color-mix(in oklab, var(--fg) 2%, var(--surface));
  border: 1px solid var(--border);
  border-radius: 10px;
}
.payments-filter__field { display: flex; flex-direction: column; gap: 0.25rem; }
.payments-filter__label {
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-muted); font-weight: 700;
}
.payments-filter__actions {
  grid-column: 1 / -1;
  display: flex; gap: 0.5rem; justify-content: flex-end;
}
@media (max-width: 900px) {
  .payments-filter { grid-template-columns: 1fr 1fr; }
}

.payments-table th,
.payments-table td {
  vertical-align: middle;
  padding: 0.45rem 0.65rem;
}
.payments-table__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.payments-table__when { white-space: nowrap; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.payments-table__user { display: block; font-weight: 600; }
.payments-table__email { display: block; color: var(--fg-muted); font-size: 12px; }
.payments-table__desc { color: var(--fg-muted); max-width: 320px; }
.payments-table__amount--credit { color: #2a8a3e; font-weight: 700; }
.payments-table__amount--debit  { color: #b94a48; font-weight: 700; }
.payments-table__ids {
  display: flex; flex-direction: column; gap: 0.15rem;
}
.payments-table__id {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  color: var(--fg-muted);
  background: color-mix(in oklab, var(--fg) 4%, var(--surface));
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.05rem 0.35rem;
  cursor: help;
}

.payments-status {
  display: inline-flex; padding: 0.1rem 0.55rem;
  border-radius: 999px; font-weight: 700; font-size: 11px;
  letter-spacing: 0.04em; text-transform: uppercase;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--fg) 4%, var(--surface));
  color: var(--fg-muted);
}
.payments-status--ok      { color: #2a8a3e; border-color: color-mix(in oklab, #2a8a3e 40%, var(--border)); background: color-mix(in oklab, #2a8a3e 8%, var(--surface)); }
.payments-status--pending { color: #b07000; border-color: color-mix(in oklab, #b07000 40%, var(--border)); background: color-mix(in oklab, #b07000 8%, var(--surface)); }
.payments-status--err     { color: #b94a48; border-color: color-mix(in oklab, #b94a48 40%, var(--border)); background: color-mix(in oklab, #b94a48 8%, var(--surface)); }
.payments-status--warn    { color: #c08400; border-color: color-mix(in oklab, #c08400 40%, var(--border)); background: color-mix(in oklab, #c08400 8%, var(--surface)); }

.payments-pagination {
  display: flex; justify-content: center; align-items: center;
  gap: 0.3rem;
  margin: 1.25rem 0 0.5rem;
}
.payments-pagination__link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 0.55rem;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--fg);
  font-variant-numeric: tabular-nums; font-weight: 500;
  text-decoration: none;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.payments-pagination__link:hover {
  background: color-mix(in oklab, var(--accent) 8%, var(--surface));
  border-color: color-mix(in oklab, var(--accent) 35%, var(--border));
}
.payments-pagination__link.is-current {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--btn-text, #fff);
  pointer-events: none;
}
.payments-pagination__link.is-disabled {
  opacity: 0.5; pointer-events: none;
}
.payments-pagination__gap { color: var(--fg-muted); padding: 0 0.25rem; }

/* Leads CSV importer modal */
.leads-import-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
}
.leads-import-modal[hidden] { display: none; }
.leads-import-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(2px);
}
.leads-import-modal__panel {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: min(96vw, 560px);
  display: flex; flex-direction: column;
  box-shadow: 0 24px 64px -16px rgba(0,0,0,0.45);
  overflow: hidden;
}
.leads-import-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--fg) 3%, var(--surface));
}
.leads-import-modal__title { margin: 0; font-size: 16px; font-weight: 600; color: var(--fg); }
.leads-import-modal__close {
  background: transparent; border: 0; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--fg-muted);
  padding: 0.1rem 0.4rem;
}
.leads-import-modal__close:hover { color: var(--fg); }
.leads-import-modal__body { padding: 1rem 1.1rem 1.2rem; }
body.leads-import-modal-open { overflow: hidden; }

.leads-import-form__drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.6rem;
  padding: 1.5rem 1rem;
  border: 2px dashed var(--border);
  border-radius: 10px;
  background: color-mix(in oklab, var(--fg) 2%, var(--surface));
  cursor: pointer;
  text-align: center;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.leads-import-form__drop.is-drag {
  background: color-mix(in oklab, var(--accent) 10%, var(--surface));
  border-color: var(--accent);
}
.leads-import-form__drop input[type="file"] { display: none; }
.leads-import-form__drop-icon {
  font-size: 28px; color: var(--accent);
}
.leads-import-form__drop-label { color: var(--fg); font-size: 14px; font-weight: 500; }
.leads-import-form__actions {
  display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem;
}

.leads-import-result__title { margin: 0; font-size: 16px; font-weight: 700; color: var(--fg); }
.leads-import-result__file  { margin: 0.25rem 0 0.75rem; color: var(--fg-muted); font-size: 13px; }
.leads-import-result__stats {
  list-style: none; padding: 0; margin: 0 0 0.75rem;
  display: flex; flex-wrap: wrap; gap: 0.75rem;
}
.leads-import-result__stats > li {
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px; color: var(--fg-muted);
}
.leads-import-result__stats > li > strong {
  display: block;
  font-size: 22px; color: var(--fg); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.leads-import-result__errors > summary {
  cursor: pointer; color: var(--fg-muted); font-size: 13px;
  padding: 0.4rem 0;
}
.leads-import-result__errors > ul {
  margin: 0.5rem 0 0; padding: 0.5rem 0.75rem;
  list-style: none;
  background: color-mix(in oklab, #b94a48 8%, var(--surface));
  border: 1px solid color-mix(in oklab, #b94a48 35%, var(--border));
  border-radius: 6px;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px; color: var(--fg);
  max-height: 220px; overflow-y: auto;
}
.leads-import-result__errors > ul > li { padding: 0.15rem 0; }

/* Bigger modal panel + scrollable body when the mapping table is open. */
.leads-import-modal__panel { max-width: min(96vw, 760px); }
.leads-import-modal__body  { max-height: calc(100vh - 8rem); overflow-y: auto; }

/* Mapping table: CSV column + sample data on the left, our select on the right. */
.leads-import-mapping__file { margin: 0 0 0.4rem; font-size: 14px; color: var(--fg); }
.leads-import-mapping__table-wrap {
  margin-top: 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.leads-import-mapping__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.leads-import-mapping__table th,
.leads-import-mapping__table td { padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.leads-import-mapping__table tr:last-child > th,
.leads-import-mapping__table tr:last-child > td { border-bottom: 0; }
.leads-import-mapping__table thead th {
  background: color-mix(in oklab, var(--fg) 4%, var(--surface));
  font-weight: 700; font-size: 12px; letter-spacing: 0.04em; color: var(--fg-muted); text-transform: uppercase;
}
.leads-map__csv { text-align: left; min-width: 200px; }
.leads-map__csv-name { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); color: var(--fg); }
.leads-map__sample {
  margin-top: 0.25rem;
  display: flex; flex-wrap: wrap; gap: 0.25rem 0.4rem;
  color: var(--fg-muted); font-size: 11px;
}
.leads-map__sample-val {
  padding: 0.05rem 0.4rem;
  background: color-mix(in oklab, var(--fg) 3%, var(--surface));
  border: 1px solid var(--border);
  border-radius: 4px;
}
.leads-map__sample-val:empty { display: none; }
.leads-map__arrow { color: var(--fg-muted); text-align: center; width: 1.5rem; }
.leads-map__select-cell { min-width: 220px; }
.leads-map__select { width: 100%; }

/* Fixed-value defaults panel (Site Settings → Payroll pattern, but
   inline inside the mapping modal). */
.leads-import-defaults {
  margin-top: 1.1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in oklab, var(--fg) 2%, var(--surface));
}
.leads-import-defaults__head {
  display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
  margin-bottom: 0.3rem;
}
.leads-import-defaults__title {
  margin: 0; font-size: 13px; font-weight: 700; color: var(--fg-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.leads-import-defaults__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.leads-import-defaults__row {
  display: grid;
  grid-template-columns: minmax(180px, 1.5fr) minmax(140px, 2fr) auto;
  gap: 0.4rem;
  align-items: center;
}

/* Whole-row click → detail page. Avoid making children look interactive. */
.payments-table__row,
.funding-request-table__row { cursor: pointer; }
.payments-table__row:hover > td,
.funding-request-table__row:hover > td {
  background-color: color-mix(in oklab, var(--accent) 6%, var(--surface));
}
.payments-table__row:focus-visible,
.funding-request-table__row:focus-visible {
  outline: 2px solid var(--accent); outline-offset: -2px;
}

/* Detail page — /payments/details/<id> */
.payments-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 0.5rem;
}
@media (max-width: 800px) { .payments-detail { grid-template-columns: 1fr; } }
.payments-detail__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.1rem;
}
.payments-detail__summary {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  align-items: baseline;
}
.payments-detail__amount-wrap,
.payments-detail__status-wrap,
.payments-detail__type-wrap {
  display: flex; flex-direction: column; gap: 0.25rem;
}
.payments-detail__label {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-muted); font-weight: 700;
}
.payments-detail__amount {
  font-size: 32px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.payments-detail__value { font-size: 18px; color: var(--fg); }
/* Decision panel on the funding-request detail page — Pending /
   Funded / Declined transitions live here. */
.funding-decision { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.funding-decision button:disabled { opacity: 0.6; cursor: not-allowed; }
.payments-detail__h3 { margin: 0 0 0.7rem; font-size: 14px; font-weight: 700; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.payments-detail__list { display: grid; grid-template-columns: 160px 1fr; row-gap: 0.5rem; column-gap: 0.75rem; margin: 0; }
.payments-detail__list > dt { color: var(--fg-muted); font-size: 13px; }
.payments-detail__list > dd { margin: 0; color: var(--fg); }
.payments-detail__list--mono > dd > code { font-size: 12.5px; word-break: break-all; }
.payments-detail__email { display: block; color: var(--fg-muted); font-size: 12px; }
.payments-detail__pre {
  margin: 0.3rem 0 0; padding: 0.55rem 0.7rem;
  background: color-mix(in oklab, var(--fg) 3%, var(--surface));
  border: 1px solid var(--border); border-radius: 6px;
  font-size: 12px; overflow-x: auto;
}

.payments-detail__audit {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.payments-detail__audit-item {
  padding: 0.55rem 0.7rem;
  background: color-mix(in oklab, var(--fg) 2%, var(--surface));
  border: 1px solid var(--border); border-radius: 8px;
}
.payments-detail__audit-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.payments-detail__audit-action { font-weight: 700; font-size: 11px; letter-spacing: 0.04em; color: var(--accent); }
.payments-detail__audit-when   { color: var(--fg-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.payments-detail__audit-reason { margin: 0.25rem 0 0; color: var(--fg); font-size: 13px; }
.payments-detail__audit-changes { margin-top: 0.4rem; }
.payments-detail__audit-changes > summary { cursor: pointer; color: var(--fg-muted); font-size: 12px; }
.library-types__delete { margin: 0; }
.library-types__add {
  display: flex; gap: 0.5rem; margin: 0.5rem 0 0;
  padding: 0.3rem 0.4rem;
  align-items: center;
  background: color-mix(in oklab, var(--accent) 4%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--accent) 25%, var(--border)); border-radius: 6px;
}
/* Shrink the input inside the Add row to match the inline-edit row
   height (which uses no wrapping padding). Without this the chrome
   around the Add form makes its overall row taller than the rows
   above it. */
.library-types__add .field__input {
  flex: 1 1 auto;
  padding: 0.4rem 0.6rem;
  font-size: 14px;
}
.library-types__item.is-removing { opacity: 0.4; pointer-events: none; }
/* Drag-to-reorder visual states */
.library-types__item { cursor: grab; }
.library-types__item:active { cursor: grabbing; }
.library-types__item.is-dragging {
  opacity: 0.5;
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
}
.library-types__handle {
  color: var(--fg-muted);
  font-size: 14px;
  line-height: 1;
  letter-spacing: -2px;
  user-select: none;
  flex: 0 0 auto;
  padding: 0 0.25rem;
  cursor: grab;
}
.library-types__item:hover .library-types__handle { color: var(--fg); }
/* The text input + buttons inside the row use their native cursors (text /
   pointer) so editing and clicking aren't disrupted by the row's grab cursor. */
.library-types__edit .field__input,
.library-types__edit button,
.library-types__delete button { cursor: auto; }
.library-types__edit button,
.library-types__delete button { cursor: pointer; }
/* Main "Save changes / Cancel changes" bar hides on doc-library tabs since
   those use their own per-row inline ajax forms. */
body.settings-doclib-active .settings__actions { display: none; }

/* === Teams list table — wide, scrolls horizontally on narrow viewports === */
.teams-card { padding: 0; overflow: hidden; }
.teams-scroll { overflow-x: auto; }
.teams-table { min-width: 1100px; }
.teams-table th, .teams-table td { padding: 0.5rem 0.75rem; white-space: nowrap; }
.teams-table__name { font-weight: 500; }
/* Right-align metric columns (numbers read better in a column when their
 * decimal points line up). font-variant-numeric: tabular-nums lines digits
 * up width-for-width so "1,234.56" doesn't drift relative to "999.00". */
.teams-table__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Team-lead chip — compact avatar + name/title pair used in the Teams list
 * view. Same shape conceptually as the grid card's lead block, but sized for
 * a table cell. */
.team-lead-chip { display: inline-flex; align-items: center; gap: 0.5rem; }
.team-lead-chip__avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto;
  object-fit: cover; background: var(--surface-2, var(--surface));
  border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: var(--fg-muted);
}
.team-lead-chip__avatar--placeholder { background: color-mix(in oklab, var(--accent) 8%, transparent); }
.team-lead-chip__text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.team-lead-chip__name  { font-weight: 500; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.team-lead-chip__title { font-size: 11px; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }

/* Grid-card lead block — pinned above the .team-card__meta dl. Larger
 * avatar than the chip, vertical text column to its right. */
.team-card__lead {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0;
  border-top: 1px solid color-mix(in oklab, var(--border) 50%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--border) 50%, transparent);
  margin-bottom: 0.5rem;
}
.team-card__lead-avatar {
  width: 48px; height: 48px; border-radius: 50%; flex: 0 0 auto;
  object-fit: cover; background: var(--surface-2, var(--surface));
  border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 600; color: var(--fg-muted);
}
.team-card__lead-avatar--placeholder { background: color-mix(in oklab, var(--accent) 10%, transparent); }
.team-card__lead-text  { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.team-card__lead-label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); }
.team-card__lead-name  { font-size: 14px; font-weight: 500; color: var(--fg); }
.team-card__lead-name--empty { font-style: italic; color: var(--fg-muted); font-weight: 400; }
.team-card__lead-title { font-size: 12px; color: var(--fg-muted); }
.teams-num { text-align: right; font-variant-numeric: tabular-nums; }
.teams-table th.teams-num .sort-link { display: inline-flex; align-items: center; gap: 0.15rem; }

/* === Teams page: list / grid view toggle ============================ */
.teams-page-actions { display: flex; align-items: center; gap: 0.75rem; }
.view-toggle {
  display: inline-flex;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 2px; gap: 2px;
}
.view-toggle__btn {
  background: transparent; border: 0; cursor: pointer;
  padding: 4px 9px; border-radius: 6px;
  color: var(--fg-muted);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 120ms ease, color 120ms ease;
}
.view-toggle__btn:hover { color: var(--fg); background: var(--hover); }
.view-toggle__btn.is-active {
  background: color-mix(in oklab, var(--accent) 14%, var(--surface));
  color: var(--accent);
}
.view-toggle__btn svg { width: 16px; height: 16px; display: block; }

/* Swap visibility per data-mode. List is default. In grid mode, the
 * outer .teams-view__grid is a plain block wrapper that vertically stacks
 * hero row → podium row → regular cards. Each of those owns its own
 * inner grid (the inner .teams-grid does the auto-fill columns). */
.teams-view__grid { display: none; }
.teams-view[data-mode="grid"] .teams-view__list { display: none; }
.teams-view[data-mode="grid"] .teams-view__grid { display: block; }

/* ============================================================
   Team cards — "trophy case" layout for the grid view. Optimized
   for at-a-glance bragging rights: big team-lead portrait, two
   headline money stats, secondary metrics in a 2x2 grid below.
   ============================================================ */
.teams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min, 360px), 1fr));
  gap: 1rem;
  margin: 0;
}
.team-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.team-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--accent) 45%, var(--border));
  box-shadow: 0 10px 30px -10px color-mix(in oklab, var(--accent) 30%, rgba(0,0,0,0.18));
}
/* Edit/delete float in the corner over the hero band. */
.team-card__actions {
  position: absolute; top: 0.5rem; right: 0.5rem; z-index: 3;
  display: flex; gap: 0.15rem;
  opacity: 0; transition: opacity 160ms ease;
}
.team-card:hover .team-card__actions,
.team-card:focus-within .team-card__actions { opacity: 1; }

/* Whole-card click target on the Teams list grid. Sits between the base
 * content and the action buttons / phone/email links via z-index so those
 * remain individually clickable. Card itself gets cursor: pointer via the
 * .team-card--clickable modifier. */
.team-card--clickable { cursor: pointer; }
.team-card__link {
  position: absolute; inset: 0;
  z-index: 1;
  border-radius: inherit;
  text-indent: -9999px; overflow: hidden;
}
.team-card__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
/* Lift the in-card phone/email + lead avatar above the click overlay so
 * tapping them still triggers their own action instead of the team nav. */
.team-card__contact-link { position: relative; z-index: 2; }

/* Hero band — gradient backdrop that hosts the team name + locale. */
.team-card__hero {
  position: relative;
  padding: 1.1rem 1.25rem 2.75rem;
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--accent) 32%, var(--surface)) 0%,
      color-mix(in oklab, var(--accent) 12%, var(--surface)) 100%);
  color: var(--fg);
}
.team-card__hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: color-mix(in oklab, var(--accent) 35%, var(--border));
}
/* Team logo — small rounded square at the top-right of the hero band, so
 * the team name + location read uninterrupted on the left. */
.team-card__logo {
  position: absolute; top: 0.85rem; right: 1rem;
  width: 44px; height: 44px;
  object-fit: contain;
  background: color-mix(in oklab, var(--surface) 90%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--border));
  border-radius: 8px;
  padding: 4px;
}
.team-card__name {
  margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--fg);
}
.team-card__locale {
  display: inline-flex; align-items: center; gap: 0.35rem;
  margin-top: 0.35rem;
  font-size: 12px; color: color-mix(in oklab, var(--fg) 75%, transparent);
}
.team-card__locale-glyph { font-size: 8px; color: var(--accent); }

/* Big circular avatar — half over the hero, half over the body. */
.team-card__avatar-wrap {
  display: flex; justify-content: center;
  margin-top: -52px;
  position: relative; z-index: 1;
}
.team-card__avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface);
  border: 4px solid var(--surface);
  box-shadow: 0 6px 18px -6px color-mix(in oklab, var(--accent) 35%, rgba(0,0,0,0.25));
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 700; color: var(--fg-muted);
}
.team-card__avatar--placeholder {
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--accent) 22%, var(--surface)),
    color-mix(in oklab, var(--accent) 6%, var(--surface)));
}

.team-card__lead-block {
  text-align: center;
  padding: 0.5rem 1.25rem 0;
  display: flex; flex-direction: column; gap: 0.1rem;
}
.team-card__lead-name {
  font-size: 14px; font-weight: 600; color: var(--fg);
}
.team-card__lead-name--empty { font-style: italic; color: var(--fg-muted); font-weight: 400; }
.team-card__lead-title {
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: color-mix(in oklab, var(--fg-muted) 80%, var(--accent));
}

/* Headline stat tiles — two side-by-side hero numbers. */
.team-card__headline-stats {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  padding: 1rem 1rem 0.5rem;
}
.team-card__big-stat {
  display: flex; flex-direction: column; align-items: center;
  padding: 0.75rem 0.5rem;
  border-radius: 12px;
  background: color-mix(in oklab, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 18%, var(--border));
}
.team-card__big-stat-value {
  font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  background: linear-gradient(135deg, var(--fg), color-mix(in oklab, var(--accent) 55%, var(--fg)));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;
}
.team-card__big-stat-label {
  margin-top: 0.2rem;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-muted); font-weight: 600;
}

/* Mini-stat grid — 2x2 secondary metrics. */
.team-card__mini-stats {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  padding: 0.25rem 1rem 0.75rem;
}
.team-card__mini {
  display: flex; align-items: baseline; gap: 0.4rem;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  background: color-mix(in oklab, var(--fg) 4%, transparent);
}
.team-card__mini-value {
  font-size: 14px; font-weight: 600; color: var(--fg);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.team-card__mini-label {
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-muted); font-weight: 500;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Full-width variant of the mini-stats grid — used for the Active States
 * row that sits alone below the totals. Single column so the lone tile
 * spans the card and doesn't render as a tiny pill stuck on the left. */
.team-card__mini-stats--full { grid-template-columns: 1fr; }

/* Contact strip — tiny clickable phone/email pills at the bottom. */
.team-card__contact {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  padding: 0.5rem 1rem 1rem;
  border-top: 1px solid color-mix(in oklab, var(--border) 50%, transparent);
  margin-top: auto;  /* push to card bottom if mini-stats row is shorter */
}
.team-card__contact-link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 11.5px; color: var(--fg-muted);
  text-decoration: none; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.team-card__contact-link:hover { color: var(--accent); }
.team-card__contact-glyph { font-size: 12px; color: var(--accent); }

/* ============================================================
   Expanded team card — extra sections for the redesigned
   /teams grid (leaders strip, totals, averages per LO, role
   buckets with thumbnails + +N more).
   ============================================================ */
/* Hero band override for the full-detail card. Logo now sits as a left
 * flex child (was absolute-positioned in the corner) so it can grow
 * generously without colliding with the identity column on the right. */
.team-card--full .team-card__hero {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0.9rem 0.75rem;
  /* Slightly flatter gradient — the lead strip already carries the accent
   * weight at the very top, so the hero doesn't need to compete. */
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--accent) 14%, var(--surface)) 0%,
    color-mix(in oklab, var(--accent) 4%, var(--surface)) 100%);
}
.team-card--full .team-card__name { font-size: 15px; font-weight: 600; }
.team-card--full .team-card__locale { margin-top: 0.15rem; font-size: 11px; }
.team-card--full .team-card__logo {
  /* Override the corner-absolute positioning from the base .team-card__logo
   * rule — here the logo is a flex child anchored to the left of the hero. */
  position: static;
  top: auto; right: auto;
  width: 64px; height: 64px;
  padding: 4px;
  border-radius: 10px;
  flex: 0 0 auto;
}
.team-card__hero-info {
  flex: 1 1 auto;
  min-width: 0;  /* let the name/location/contact ellipsis-truncate cleanly */
  display: flex; flex-direction: column;
}
.team-card--full .team-card__hero-socials { margin-top: 0.35rem; }
/* Phone on its own line, email stacked below it. Vertical rhythm matches
 * the location line above so the whole identity block reads as one
 * compact column. */
.team-card__hero-contact {
  display: flex; flex-direction: column; gap: 0.15rem;
  margin-top: 0.2rem;
  font-size: 11.5px;
}
.team-card__hero-contact .team-card__contact-link {
  padding: 0;     /* hero variant has no background, no border, no padding */
  color: color-mix(in oklab, var(--fg) 75%, transparent);
}
.team-card__hero-contact .team-card__contact-link:hover { color: var(--accent); }

/* Hero + podium rows for the top-3 medal teams. Mirrors the Originators
 * layout pattern: rank 1 on its own row centered, ranks 2+3 side-by-side,
 * both rows constrained to the same width so the three cards line up. */
.teams-hero-row { margin: 0 auto 1rem; }
.teams-hero-row--solo   { max-width: 60%; }
.teams-hero-row--podium {
  max-width: 100%;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 1100px) {
  .teams-hero-row--solo { max-width: 80%; }
}
@media (max-width: 720px) {
  .teams-hero-row--solo   { max-width: 100%; }
  .teams-hero-row--podium { grid-template-columns: 1fr; }
}

/* Top-3 medal styling on the team grid card. The medal badge mirrors the
 * Originators look (gold/silver/bronze gradient pill in the top-left
 * corner), and the card border tints to match. */
.team-card__medal {
  position: absolute; top: 0.55rem; left: 0.55rem; z-index: 3;
  /* The originator-card__medal base provides size, shadow, border, and
   * gradient via .originator-card__medal--gold/silver/bronze; we just
   * relocate it to top-left so it sits where the team card's logo
   * doesn't overlap. */
}
.team-card__rank-tag {
  position: absolute; top: 0.55rem; left: 0.6rem; z-index: 3;
  font-size: 10px; font-weight: 600;
  color: var(--fg-muted);
  padding: 0.12rem 0.45rem;
  background: color-mix(in oklab, var(--surface) 80%, transparent);
  border: 1px solid var(--border);
  border-radius: 999px;
  pointer-events: none;
}
.team-card--medal-gold   { border-color: color-mix(in oklab, #FFD700 45%, var(--border)); }
.team-card--medal-silver { border-color: color-mix(in oklab, #C0C0C0 45%, var(--border)); }
.team-card--medal-bronze { border-color: color-mix(in oklab, #CD7F32 45%, var(--border)); }
/* Member cards have no edit/delete actions in the top-right, so the medal +
 * rank tag flip to the right side where they read cleanly. (Team-list cards
 * keep them top-left to stay clear of the team logo + actions cluster.) */
.team-card--member .team-card__medal,
.team-card--member .team-card__rank-tag {
  left: auto;
  right: 0.55rem;
}
/* When the lead strip carries the gradient, also tint its bottom border to
 * match the medal tier so the colored frame reads consistently top→bottom. */
.team-card--medal-gold   .team-card__lead-strip { border-bottom-color: color-mix(in oklab, #FFD700 45%, var(--border)); }
.team-card--medal-silver .team-card__lead-strip { border-bottom-color: color-mix(in oklab, #C0C0C0 45%, var(--border)); }
.team-card--medal-bronze .team-card__lead-strip { border-bottom-color: color-mix(in oklab, #CD7F32 45%, var(--border)); }
.team-card--full .team-card__hero-socials .social-icons {
  /* Hero already has a tinted gradient; render inline so the pills sit on
   * the gradient without an additional frosted background. */
  display: inline-flex; flex-wrap: wrap; gap: 0.25rem;
  background: transparent; border: 0; padding: 0; backdrop-filter: none;
  position: static; box-shadow: none;
}

.team-card__leaders {
  display: flex; flex-direction: column; gap: 0.35rem;
  padding: 0.6rem 1rem 0.5rem;
}

/* Hero lead strip — sits at the very top of the card, above the team
 * name/logo. Larger avatars + names so the lead(s) read as the focal
 * point. Wraps to multiple lines if there are several leaders. */
.team-card__lead-strip {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.5rem;
  padding: 1rem 1rem 0.75rem;
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--accent) 14%, var(--surface)) 0%,
      color-mix(in oklab, var(--accent) 4%, var(--surface)) 100%);
  border-bottom: 1px solid color-mix(in oklab, var(--accent) 20%, var(--border));
}
.team-card__lead-strip-label {
  /* Inherits .team-card__role-label sizing but centered + with a touch of
   * extra letter-spacing so it reads as an eyebrow above the chips. */
  text-align: center;
}
.team-card__lead-strip-row {
  display: flex; align-items: flex-start; justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.team-card__lead-chip {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  gap: 0.3rem;
  text-decoration: none;
  min-width: 60px; max-width: 90px;
  transition: transform 120ms ease;
}
.team-card__lead-chip:hover { transform: translateY(-2px); }
.team-card__lead-chip--more { cursor: default; }
.team-card__lead-chip-img {
  width: 64px; height: 64px;
  border-radius: 50%; object-fit: cover;
  border: 3px solid var(--surface);
  background: var(--surface);
  box-shadow: 0 4px 12px -4px color-mix(in oklab, var(--accent) 30%, rgba(0,0,0,0.25));
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: var(--fg-muted);
}
.team-card__lead-chip-img--placeholder {
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--accent) 22%, var(--surface)),
    color-mix(in oklab, var(--accent) 6%, var(--surface)));
}
.team-card__lead-chip-img--more {
  background: color-mix(in oklab, var(--accent) 18%, transparent);
  color: var(--fg);
  font-size: 16px;
}
.team-card__lead-chip-name {
  font-size: 12px; font-weight: 600; color: var(--fg);
  text-align: center;
  line-height: 1.15;
  overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.team-card__lead-chip--more .team-card__lead-chip-name {
  color: var(--fg-muted); font-weight: 500;
}
.team-card__role-label {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-muted); font-weight: 700;
}
.team-card__role-count { color: var(--accent); font-weight: 600; }
.team-card__role-empty { font-style: italic; color: var(--fg-muted); font-size: 12px; }

.team-card__chip-row { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.team-card__chip {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  text-decoration: none;
  transition: transform 120ms ease;
}
.team-card__chip:hover { transform: translateY(-1px) scale(1.05); }
.team-card__chip-img {
  width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover;
  border: 2px solid var(--surface);
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--fg-muted);
}
.team-card__chip-img--placeholder {
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--accent) 22%, var(--surface)),
    color-mix(in oklab, var(--accent) 6%, var(--surface)));
}
.team-card__chip-more {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 0.5rem; min-width: 32px; height: 32px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  color: var(--fg);
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--border));
}

.team-card__avg-section {
  margin: 0 1rem 0.75rem;
  padding: 0.75rem 0.85rem 0.85rem;
  border: 1px solid color-mix(in oklab, var(--accent) 18%, var(--border));
  border-radius: 12px;
  background: color-mix(in oklab, var(--accent) 5%, transparent);
}
.team-card__avg-head {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-muted); font-weight: 700;
  margin-bottom: 0.5rem;
}
.team-card__avg-divisor { font-weight: 500; color: color-mix(in oklab, var(--fg-muted) 70%, var(--accent)); }
.team-card__avg-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem;
}
.team-card__avg-tile {
  display: flex; flex-direction: column;
  padding: 0.4rem 0.5rem;
  background: color-mix(in oklab, var(--surface) 80%, transparent);
  border-radius: 8px;
}
.team-card__avg-value {
  font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.team-card__avg-label {
  margin-top: 0.05rem;
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-muted); font-weight: 600;
}

.team-card__roles {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 0.25rem 1rem 0.75rem;
}
.team-card__role-row {
  display: flex; flex-direction: column; gap: 0.3rem;
}

/* ============================================================
   Team detail page — header strip + team-level summary above
   the per-member card grid. Reuses the .team-card classes for
   member cards (no member-specific styling needed beyond the
   .team-card--member hook, which today is purely semantic).
   ============================================================ */
.team-detail-head {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.25rem 0 0.5rem;
  margin-bottom: 0.5rem;
}
.team-detail-head__back  { flex: 0 0 auto; }
.team-detail-head__logo {
  width: 56px; height: 56px;
  object-fit: contain;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  flex: 0 0 auto;
}
.team-detail-head__title { flex: 1 1 auto; display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.team-detail-head__name  { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--fg); }
.team-detail-head__locale {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 13px; color: var(--fg-muted);
}
.team-detail-head__count {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-muted);
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--border); border-radius: 999px;
}
.team-detail-head__actions { flex: 0 0 auto; }

/* Team-level summary strip — same vibe as the list-card stat tiles, but
 * horizontal across the top of the detail page. */
.team-detail-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  padding: 0.75rem;
  border-radius: 16px;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--accent) 14%, var(--surface)),
    color-mix(in oklab, var(--accent) 4%, var(--surface)));
  border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--border));
}
.team-detail-summary__stat {
  display: flex; flex-direction: column; align-items: center;
  padding: 0.4rem 0.5rem;
}
.team-detail-summary__value {
  font-size: 20px; font-weight: 700; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--fg), color-mix(in oklab, var(--accent) 55%, var(--fg)));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.team-detail-summary__label {
  margin-top: 0.1rem;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-muted); font-weight: 600;
}

/* Team social links — small pills above the member grid on the detail page. */
.team-detail-socials {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin: 0 0 1rem;
}
.team-detail-socials__link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.65rem;
  font-size: 12px; color: var(--fg);
  text-decoration: none;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface);
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}
.team-detail-socials__link:hover {
  border-color: color-mix(in oklab, var(--accent) 45%, var(--border));
  background: color-mix(in oklab, var(--accent) 6%, var(--surface));
  transform: translateY(-1px);
}
.team-detail-socials__glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  font-size: 12px; font-weight: 700;
  border-radius: 50%;
  background: color-mix(in oklab, var(--accent) 18%, transparent);
  color: var(--accent);
}
.team-detail-socials__label { font-weight: 500; }

/* ============================================================
   Company Directory — list / grid pair, employee detail page.
   ============================================================ */

/* View-mode swap (default = grid). Both panes always render to the DOM;
 * data-mode on the wrapper toggles which one is visible. */
.directory-view__list { display: none; }
.directory-view[data-mode="grid"] .directory-view__list { display: none; }
.directory-view[data-mode="grid"] .directory-view__grid { display: grid; }
.directory-view[data-mode="list"] .directory-view__list { display: block; }
.directory-view[data-mode="list"] .directory-view__grid { display: none; }

/* Grid (photo wall) */
.directory-grid {
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min, 220px), 1fr));
  gap: 1rem;
  margin: 0;
}
.person-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.person-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--accent) 45%, var(--border));
  box-shadow: 0 10px 28px -10px color-mix(in oklab, var(--accent) 30%, rgba(0,0,0,0.18));
}
.person-card__link {
  position: absolute; inset: 0;
  z-index: 1;
  border-radius: inherit;
  text-indent: -9999px; overflow: hidden;
}
.person-card__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.person-card__photo-wrap {
  aspect-ratio: 1;
  width: 100%;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--accent) 18%, var(--surface)),
    color-mix(in oklab, var(--accent) 4%, var(--surface)));
}
.person-card__photo {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.person-card__photo--placeholder {
  display: flex; align-items: center; justify-content: center;
  font-size: 56px; font-weight: 700;
  color: color-mix(in oklab, var(--fg-muted) 70%, var(--accent));
  letter-spacing: -0.02em;
}
.person-card__body {
  padding: 0.85rem 1rem 1rem;
  display: flex; flex-direction: column; gap: 0.15rem;
}
.person-card__name {
  margin: 0; font-size: 15px; font-weight: 600; color: var(--fg);
  line-height: 1.2;
}
.person-card__title {
  margin: 0; font-size: 12px; color: var(--fg-muted);
}

/* Processor-specific decorations on the photo-wall card: rating chip at the
 * top-right of the image, processing-options pill row at the bottom of the
 * card body. Both `pointer-events: none` so clicks anywhere on the card
 * bubble up to the whole-card link overlay. */
.person-card__rating {
  position: absolute; top: 0.55rem; right: 0.55rem; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.2rem;
  padding: 0.2rem 0.5rem;
  font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  background: color-mix(in oklab, var(--surface) 80%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--border));
  border-radius: 999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 2px 6px -2px rgba(0,0,0,0.18);
  pointer-events: none;
}
.person-card__rating-star {
  color: #F5B400;
  font-size: 11px;
  line-height: 1;
}
.person-card__options {
  display: flex; flex-wrap: wrap; gap: 0.25rem;
  padding: 0.5rem 1rem 0.85rem;
  border-top: 1px solid color-mix(in oklab, var(--border) 50%, transparent);
  margin-top: auto;   /* push to the bottom edge of the card */
  pointer-events: none;
}
.person-card__option-tag {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  font-size: 11px; font-weight: 500;
  color: var(--fg);
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--border));
  border-radius: 999px;
}

/* ============================================================
   Inline search-loading indicator — replaces the centered HUD
   when appNavigate is called with { silent: true }. A thin
   accent-tinted bar sweeps across the top of the data area so
   the user can keep typing without focus being stolen.
   ============================================================ */
[data-search-zone] { position: relative; }
[data-search-zone].is-search-loading::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in oklab, var(--accent) 80%, transparent) 50%,
    transparent 100%);
  background-size: 50% 100%;
  background-repeat: no-repeat;
  animation: search-loading-sweep 1s linear infinite;
  z-index: 50;
  pointer-events: none;
  border-radius: 0 0 2px 2px;
}
@keyframes search-loading-sweep {
  0%   { background-position: -50% 0; }
  100% { background-position:  150% 0; }
}

/* Social-icons row — used on Company Directory + Processor cards (top overlay)
 * and Originator cards/hero (inline below the title). Anchors sit above the
 * whole-card link overlay (z-index: 3) so external links are individually
 * clickable instead of bubbling up to the card navigation. */
.social-icons {
  display: inline-flex; gap: 0.3rem; flex-wrap: wrap;
}
/* Top-of-card variant: floating frosted pill at the top-left of the photo. */
.social-icons--card-top {
  position: absolute; top: 0.55rem; left: 0.55rem; z-index: 3;
  padding: 0.25rem 0.45rem;
  background: color-mix(in oklab, var(--surface) 82%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--border));
  border-radius: 999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 2px 6px -2px rgba(0,0,0,0.18);
}
/* Inline variant: sits in the body flow, centered under the job title for
 * the originator regular card; left-aligned for the originator hero. */
.social-icons--card-inline {
  display: flex; justify-content: center;
  margin-top: 0.4rem;
}
.originator-hero__text .social-icons--card-inline {
  justify-content: flex-start;
  margin: -0.25rem 0 0.65rem;   /* tighten under the title eyebrow */
}

.social-icons__link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  color: var(--fg-muted);
  text-decoration: none;
  position: relative; z-index: 3;
  transition: color 120ms ease, background 120ms ease, transform 120ms ease;
}
.social-icons__link:hover {
  color: var(--fg);
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  transform: translateY(-1px);
}
.social-icons__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.social-icons__link svg { display: block; }

/* Brand-color hover tints — pulled toward each platform's recognizable hue
 * just enough to read as the brand without going garish. */
.social-icons__link--facebook:hover  { color: #1877F2; }
.social-icons__link--instagram:hover { color: #E4405F; }
.social-icons__link--linkedin:hover  { color: #0A66C2; }
.social-icons__link--youtube:hover   { color: #FF0000; }
.social-icons__link--tiktok:hover    { color: #FF0050; }
.social-icons__link--website:hover   { color: var(--accent); }
.social-icons__link--x:hover         { color: var(--fg); }

/* List mode */
.directory-table { table-layout: auto; }
.directory-table tbody tr { cursor: pointer; }
.directory-table tbody tr:hover { background: color-mix(in oklab, var(--accent) 5%, transparent); }
.directory-table tbody tr:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.directory-table__photo-col { width: 56px; }
.directory-table__avatar {
  width: 36px; height: 36px; border-radius: 50%;
  object-fit: cover; background: var(--surface);
  border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; color: var(--fg-muted);
}
.directory-table__avatar--placeholder {
  background: color-mix(in oklab, var(--accent) 10%, var(--surface));
}
.directory-table__name { font-weight: 500; }

/* Processor list — extra numeric columns + a tags column for processing
 * options. Reuses the .directory-table look + feel and adds the right-align
 * + tabular-nums pattern from the teams list for stat readability. */
.processor-table__num { text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* th has the audit-table base style (text-align: left) — bump centered cells'
   headers too so column heading + values line up. */
.processor-table thead th.processor-table__num { text-align: center; }

/* Grid-size slider — small range input that scales the auto-fill minmax
 * minimum width via the --card-min CSS variable. Each page's slider
 * persists to its own localStorage key. */
.view-toolbar { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.size-slider {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface);
  color: var(--fg-muted);
  font-size: 11px;
}
.size-slider__icon {
  display: inline-flex; gap: 1px; align-items: center;
  font-size: 9px; letter-spacing: -0.5px;
  color: color-mix(in oklab, var(--fg-muted) 60%, var(--accent));
}

/* Hide the slider entirely while the user is in list mode — the slider
 * only controls grid card sizing, so showing it next to the List button
 * was misleading. Modern :has() selector means no JS state mirroring. */
.view-toolbar:has([data-view-mode="list"][aria-pressed="true"]) .size-slider {
  display: none;
}

/* Fully theme-styled range input. The browser default (a dark gray track
 * with a chrome thumb) doesn't read as "ours" in light mode, so we
 * override both WebKit and Firefox pseudo-elements with our tokens. */
.size-slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 110px; height: 18px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
/* Track (the line behind the thumb). */
.size-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: color-mix(in oklab, var(--fg) 8%, var(--border));
  border-radius: 999px;
}
.size-slider input[type="range"]::-moz-range-track {
  height: 4px;
  background: color-mix(in oklab, var(--fg) 8%, var(--border));
  border-radius: 999px;
  border: 0;
}
/* Firefox also paints a "fill" between the start of the track and the thumb;
 * accent the fill so it reads as progress. WebKit doesn't expose this. */
.size-slider input[type="range"]::-moz-range-progress {
  height: 4px;
  background: color-mix(in oklab, var(--accent) 75%, var(--border));
  border-radius: 999px;
}
/* Thumb (the draggable knob). */
.size-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px; height: 14px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  cursor: pointer;
  transition: transform 100ms ease;
}
.size-slider input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  cursor: pointer;
  transition: transform 100ms ease;
}
.size-slider input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.15); }
.size-slider input[type="range"]:hover::-moz-range-thumb     { transform: scale(1.15); }
.size-slider input[type="range"]:focus-visible { outline: none; }
.size-slider input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 30%, transparent);
}
.size-slider input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 30%, transparent);
}
.processor-table__sub { color: var(--fg-muted); font-size: 11.5px; margin-left: 0.15rem; }
.processor-table__tags-cell { white-space: normal; }
.processor-table__tag {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  margin: 0.1rem 0.15rem 0.1rem 0;
  font-size: 11px; font-weight: 500;
  color: var(--fg);
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 20%, var(--border));
  border-radius: 999px;
}

/* ----- Employee detail page ----- */
.employee-hero {
  display: flex; align-items: center; gap: 1.25rem;
  padding: 1.25rem;
  margin: 0 0 1rem;
  border-radius: 18px;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--accent) 22%, var(--surface)) 0%,
    color-mix(in oklab, var(--accent) 6%, var(--surface)) 100%);
  border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--border));
}
.employee-hero__avatar-wrap { flex: 0 0 auto; }
.employee-hero__avatar {
  width: 128px; height: 128px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface);
  border: 4px solid var(--surface);
  box-shadow: 0 6px 18px -6px color-mix(in oklab, var(--accent) 30%, rgba(0,0,0,0.25));
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 44px; font-weight: 700; color: var(--fg-muted);
}
.employee-hero__avatar--placeholder {
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--accent) 22%, var(--surface)),
    color-mix(in oklab, var(--accent) 6%, var(--surface)));
}
.employee-hero__text { flex: 1 1 auto; min-width: 0; }
.employee-hero__name {
  margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--fg);
}
.employee-hero__title {
  margin: 0.1rem 0 0;
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: color-mix(in oklab, var(--fg-muted) 80%, var(--accent));
  font-weight: 600;
}
.employee-hero__team {
  margin: 0.5rem 0 0;
  font-size: 13px; color: var(--fg-muted);
}
.employee-hero__team-label {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-muted); margin-right: 0.4rem;
}
.employee-hero__team a { color: var(--accent); text-decoration: none; }
.employee-hero__team a:hover { text-decoration: underline; }
.employee-hero__contact {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-top: 0.75rem;
}
.employee-hero__contact-link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 12px; color: var(--fg);
  text-decoration: none;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}
.employee-hero__contact-link:hover {
  border-color: color-mix(in oklab, var(--accent) 45%, var(--border));
  background: color-mix(in oklab, var(--accent) 6%, var(--surface));
}
.employee-hero__contact-glyph { color: var(--accent); }

/* Card sections under the hero — split into a responsive 2-column grid
 * when there's room, single column on narrow viewports. */
.employee-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
.employee-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem 1.1rem;
}
.employee-card__heading {
  margin: 0 0 0.6rem;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-muted); font-weight: 700;
}
.employee-card__rows { margin: 0; display: grid; gap: 0.5rem; }
.employee-card__row {
  display: grid; grid-template-columns: 130px 1fr; gap: 0.75rem;
  align-items: baseline;
}
.employee-card__label {
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-muted); font-weight: 600;
}
.employee-card__value { margin: 0; color: var(--fg); font-size: 13.5px; word-break: break-word; }
.employee-card__value--tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.employee-card__tag {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  font-size: 11px; font-weight: 500;
  color: var(--fg);
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--border));
  border-radius: 999px;
}
.employee-card__tenure {
  font-size: 11px; color: var(--fg-muted); margin-left: 0.3rem;
}

/* ============================================================
   Originators leaderboard — hero card for rank #1, normal cards
   for everyone else, medals (gold / silver / bronze) on top 3.
   ============================================================ */

/* Filter row above the leaderboard. Wraps to multiple lines on narrow
 * viewports; numeric inputs share a compact width. */
.originators-filters {
  display: flex; flex-direction: column; gap: 0.5rem;
  margin-bottom: 1rem;
}
.originators-filters__row {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  align-items: end;
}
.originators-filters__group {
  display: flex; flex-direction: column; gap: 0.2rem;
  min-width: 130px;
}
.originators-filters__group--num  { max-width: 130px; }
.originators-filters__reset {
  /* Push to the far end of the wrapping flex row so it sits where actions
   * normally live, but stay inline with the inputs (align-items: end on the
   * parent does the baseline match). */
  margin-left: auto;
  align-self: end;
}

/* List / grid view swap for the Originators leaderboard. Both panes are
 * always present in the DOM; data-mode on the wrapper toggles visibility.
 * Default = grid. */
.originators-view__list { display: none; }
.originators-view[data-mode="grid"] .originators-view__list { display: none; }
.originators-view[data-mode="grid"] .originators-view__grid { display: block; }
.originators-view[data-mode="list"] .originators-view__list { display: block; }
.originators-view[data-mode="list"] .originators-view__grid { display: none; }

/* Rank column + medal sizing in the list table. */
.originators-table__rank      { width: 64px; text-align: left; white-space: nowrap; }
.originators-table__rank-num  { font-size: 12px; color: var(--fg-muted); font-weight: 600; }
/* Doubled-class selector bumps specificity above the later-in-file
 * .originator-card__medal rule, which otherwise re-applies its
 * position: absolute / 32×32 dimensions and flings the medal to the
 * page corner inside a <td>. */
.originators-table__medal.originators-table__medal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  font-size: 12px; font-weight: 800;
  color: rgba(0,0,0,0.7);
  box-shadow: 0 2px 6px -1px rgba(0,0,0,0.3);
  border: 1.5px solid rgba(255,255,255,0.45);
  position: static;
  /* Reset the absolute-positioning origin/size in case the cascade still
   * inherits them — belt + suspenders so the table medal stays put. */
  top: auto; right: auto; left: auto;
}
.originators-table tbody tr { cursor: pointer; }
.originators-table tbody tr:hover { background: color-mix(in oklab, var(--accent) 5%, transparent); }
.originators-filters__label {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-muted); font-weight: 600;
}
.originators-filters__actions { display: flex; gap: 0.4rem; }

/* Hero card — used for ranks 1, 2, and 3. Same internal dimensions for all
 * three (180px photo + headline stat grid + mini-stat row) so the podium
 * reads as a unified medal slate; only color tint varies via modifier
 * classes (--gold / --silver / --bronze). Width comes from the parent
 * .originators-hero-row container, not the card. */
.originator-hero {
  position: relative;
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 1.25rem;
  align-items: center;
  padding: 1.25rem;
  margin: 0;
  border-radius: 20px;
  border: 1px solid var(--border);
  overflow: hidden;
}
/* Solo row — rank 1 alone, centered at half-width. Podium row — ranks 2+3
 * side-by-side in a 50/50 grid that exactly matches the solo width so all
 * three cards line up. */
.originators-hero-row { margin: 0 auto 1rem; }
.originators-hero-row--solo   { max-width: 50%; }
.originators-hero-row--podium {
  max-width: 100%;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
  margin-bottom: 1.5rem;
}
/* Tint variants — gradient backdrop + accented border per metal. */
.originator-hero--gold {
  background: linear-gradient(135deg,
    color-mix(in oklab, #FFD700 24%, var(--surface)) 0%,
    color-mix(in oklab, var(--accent) 12%, var(--surface)) 100%);
  border-color: color-mix(in oklab, #FFD700 35%, var(--border));
}
.originator-hero--silver {
  background: linear-gradient(135deg,
    color-mix(in oklab, #C8C8C8 30%, var(--surface)) 0%,
    color-mix(in oklab, #909090 12%, var(--surface)) 100%);
  border-color: color-mix(in oklab, #B0B0B0 45%, var(--border));
}
.originator-hero--bronze {
  background: linear-gradient(135deg,
    color-mix(in oklab, #CD7F32 26%, var(--surface)) 0%,
    color-mix(in oklab, #8B4513 10%, var(--surface)) 100%);
  border-color: color-mix(in oklab, #CD7F32 40%, var(--border));
}
.originator-hero__crown {
  position: absolute; top: 0.75rem; left: 1.25rem;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 700;
}
.originator-hero--gold   .originator-hero__crown { color: color-mix(in oklab, #B8860B 70%, var(--fg)); }
.originator-hero--silver .originator-hero__crown { color: color-mix(in oklab, #707070 75%, var(--fg)); }
.originator-hero--bronze .originator-hero__crown { color: color-mix(in oklab, #8B4513 70%, var(--fg)); }
.originator-hero__photo-wrap {
  width: 180px; height: 180px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px -8px color-mix(in oklab, #FFD700 25%, rgba(0,0,0,0.35));
  background: linear-gradient(135deg,
    color-mix(in oklab, #FFD700 30%, var(--surface)),
    color-mix(in oklab, var(--accent) 12%, var(--surface)));
}
.originator-hero__photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.originator-hero__photo--placeholder {
  display: flex; align-items: center; justify-content: center;
  font-size: 78px; font-weight: 700; color: color-mix(in oklab, #B8860B 60%, var(--fg-muted));
}
.originator-hero__text { min-width: 0; }
.originator-hero__name {
  margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--fg);
}
.originator-hero__title {
  margin: 0.15rem 0 0.85rem;
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: color-mix(in oklab, var(--fg-muted) 70%, var(--accent));
  font-weight: 600;
}
.originator-hero__headline {
  /* Tight half-row layout: tiles wrap to two rows when needed instead of
   * crushing the headline values into single-digit columns. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.originator-hero__big-stat {
  display: flex; flex-direction: column; padding: 0.6rem 0.75rem;
  border-radius: 12px;
  background: color-mix(in oklab, var(--surface) 70%, transparent);
  border: 1px solid color-mix(in oklab, #FFD700 25%, var(--border));
}
.originator-hero__big-stat-value {
  font-size: 26px; font-weight: 800; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--fg), color-mix(in oklab, #B8860B 55%, var(--fg)));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;
}
.originator-hero__big-stat-label {
  margin-top: 0.15rem;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-muted); font-weight: 600;
}
.originator-hero__mini-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem;
}

/* Medal — circular badge, top-right corner of the card. Color tier comes
 * from the modifier (--gold / --silver / --bronze). */
.originator-card__medal {
  position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px;
  color: rgba(0,0,0,0.7);
  box-shadow: 0 4px 12px -3px rgba(0,0,0,0.35);
  border: 2px solid rgba(255,255,255,0.45);
}
.originator-card__medal--lg { width: 44px; height: 44px; font-size: 18px; top: 0.85rem; right: 1rem; }
.originator-card--medal-gold   .originator-card__medal,
.originator-card__medal--gold             { background: linear-gradient(135deg, #FFE066, #B8860B); }
.originator-card--medal-silver .originator-card__medal,
.originator-card__medal--silver           { background: linear-gradient(135deg, #ECECEC, #909090); }
.originator-card--medal-bronze .originator-card__medal,
.originator-card__medal--bronze           { background: linear-gradient(135deg, #E8A878, #8B4513); color: rgba(255,255,255,0.95); }
/* Unmodified medal (no tier class) keeps the gold gradient — backwards-compat
 * for any old markup that just emitted .originator-card__medal--lg. */
.originator-card__medal--lg:not(.originator-card__medal--silver):not(.originator-card__medal--bronze) {
  background: linear-gradient(135deg, #FFE066, #B8860B);
}
.originator-card__medal-num { line-height: 1; }
.originator-card__rank-tag {
  position: absolute; top: 0.6rem; right: 0.65rem; z-index: 2;
  font-size: 10px; font-weight: 600;
  color: var(--fg-muted);
  padding: 0.1rem 0.5rem;
  background: color-mix(in oklab, var(--surface) 70%, transparent);
  border: 1px solid var(--border);
  border-radius: 999px;
}

/* Grid for ranks 4+ — the "regular card" size. */
.originators-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min, 280px), 1fr));
  gap: 1rem;
  margin: 0;
}
.originator-card {
  /* Production cards use the original flex-column layout. The Stage-3
     canvas mode is intentionally NOT applied here — the designer at
     /card_designer/* can be edited and "published" without affecting
     anything users see. To go live, replace _originator_card.php's
     body with CardLayoutRenderer::render($tree, $r). */
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1rem;
  display: flex; flex-direction: column; gap: 0.6rem;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.originator-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--accent) 40%, var(--border));
  box-shadow: 0 10px 28px -10px color-mix(in oklab, var(--accent) 30%, rgba(0,0,0,0.18));
}
.originator-card--medal-gold   { border-color: color-mix(in oklab, #FFD700 45%, var(--border)); }
.originator-card--medal-silver { border-color: color-mix(in oklab, #C0C0C0 45%, var(--border)); }
.originator-card--medal-bronze { border-color: color-mix(in oklab, #CD7F32 45%, var(--border)); }
.originator-card__link {
  position: absolute; inset: 0; z-index: 1;
  border-radius: inherit;
  text-indent: -9999px; overflow: hidden;
}
.originator-card__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.originator-card__photo-wrap {
  display: flex; justify-content: center;
  margin: 0.25rem auto 0.4rem;
}
.originator-card__photo {
  width: 96px; height: 96px;
  border-radius: 50%; object-fit: cover;
  background: var(--surface);
  border: 4px solid var(--surface);
  box-shadow: 0 6px 18px -8px rgba(0,0,0,0.3);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 700; color: var(--fg-muted);
}
.originator-card__photo--placeholder {
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--accent) 20%, var(--surface)),
    color-mix(in oklab, var(--accent) 6%, var(--surface)));
}
.originator-card__body { text-align: center; }
.originator-card__name {
  margin: 0; font-size: 15px; font-weight: 600; color: var(--fg);
  line-height: 1.2;
}
.originator-card__title {
  margin: 0.1rem 0 0;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: color-mix(in oklab, var(--fg-muted) 80%, var(--accent));
  font-weight: 600;
}
.originator-card__stats { display: flex; flex-direction: column; gap: 0.5rem; }
.originator-card__stat--headline {
  display: flex; flex-direction: column; align-items: center;
  padding: 0.6rem 0.75rem;
  border-radius: 12px;
  background: color-mix(in oklab, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 18%, var(--border));
}
.originator-card__stat-value {
  font-size: 20px; font-weight: 700; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--fg), color-mix(in oklab, var(--accent) 55%, var(--fg)));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.originator-card__stat-label {
  margin-top: 0.15rem;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-muted); font-weight: 600;
}
.originator-card__stat-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem;
}
.originator-card__mini {
  display: flex; flex-direction: column; align-items: center;
  padding: 0.35rem 0.4rem;
  border-radius: 8px;
  background: color-mix(in oklab, var(--fg) 4%, transparent);
}
.originator-card__mini-value {
  font-size: 13px; font-weight: 600; color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.originator-card__mini-label {
  font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-muted); font-weight: 600;
}

/* Hero adapt to narrow widths. Below 1100px the solo row gets a more
 * generous cap; below 720px the photo stacks above the text and the
 * podium row collapses to one card per row. */
@media (max-width: 1100px) {
  .originators-hero-row--solo { max-width: 75%; }
}
@media (max-width: 720px) {
  .originators-hero-row--solo   { max-width: 100%; }
  .originators-hero-row--podium { grid-template-columns: 1fr; }
  .originator-hero { grid-template-columns: 1fr; gap: 1rem; }
  .originator-hero__photo-wrap { width: 160px; height: 160px; margin: 0 auto; }
  .originator-hero__mini-row { grid-template-columns: repeat(2, 1fr); }
}

/* Infinite-scroll sentinel under the member grid. */
.members-sentinel {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 1.5rem 1rem;
  margin-top: 1rem;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-muted);
}
.members-sentinel.is-busy::before {
  content: ''; display: inline-block;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid color-mix(in oklab, var(--accent) 30%, transparent);
  border-top-color: var(--accent);
  animation: members-sentinel-spin 720ms linear infinite;
}
@keyframes members-sentinel-spin { to { transform: rotate(360deg); } }
/* Read-only metric snapshot on the team edit form. */
.teams-metrics {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.5rem; margin: 0 0 1rem;
  padding: 0.75rem 1rem; background: var(--surface-2, var(--hover));
  border: 1px solid var(--border); border-radius: 8px;
}
.teams-metrics > div { display: flex; flex-direction: column; gap: 0.15rem; }
.teams-metrics dt { font-size: 11px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; }
.teams-metrics dd { margin: 0; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Expanded detail: 2-column on desktop, single column on narrow */
.bug-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 1.5rem;
  padding: 0.5rem 0;
}
@media (max-width: 900px) {
  .bug-detail { grid-template-columns: 1fr; }
}
.bug-detail__heading { font-size: 16px; font-weight: 600; margin: 0 0 0.5rem; }
/* Dedicated single-bug page (/bug_reports/view/<id>) header. */
.bug-view__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.bug-view__id     { font-size: 12px; color: var(--fg-muted); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.bug-view__title  { font-size: 20px; font-weight: 600; margin: 0.125rem 0 0; }
.bug-view__badges { display: flex; gap: 0.5rem; flex-wrap: wrap; flex: 0 0 auto; padding-top: 0.25rem; }
.page-actions     { margin: 0 0 0.75rem; display: flex; gap: 0.5rem; }
.card--empty      { text-align: center; padding: 3rem 1.5rem; }
.card--empty h2   { margin: 0 0 0.5rem; }
.card--empty p    { color: var(--fg-muted); margin: 0; }
.bug-detail__sub     { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); margin: 1rem 0 0.5rem; }
.bug-detail__desc    { font-size: 13.5px; line-height: 1.5; color: var(--fg); white-space: pre-wrap; }

.bug-detail__shot { display: block; }
.bug-detail__shot img {
  display: block;
  max-width: 100%;
  max-height: 360px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2, #000);
  object-fit: contain;
}

/* Breadcrumb timeline */
.bug-crumbs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
  font-size: 12px;
}
.bug-crumbs__item {
  display: grid;
  grid-template-columns: 64px 88px 1fr;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  background: var(--surface-2, var(--hover));
}
.bug-crumbs__time   { color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.bug-crumbs__action { color: var(--accent); font-weight: 500; }
.bug-crumbs__detail { color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* JS error list */
.bug-errors { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.375rem; }
.bug-errors__item {
  padding: 0.375rem 0.5rem;
  border-radius: 6px;
  background: color-mix(in oklab, #dc2626 8%, var(--surface));
  border: 1px solid color-mix(in oklab, #dc2626 25%, transparent);
  font-size: 12px;
}
.bug-errors__item code { display: block; color: var(--fg); }
.bug-errors__src       { display: block; color: var(--fg-muted); font-size: 11px; margin-top: 2px; }

/* Meta sidebar */
.bug-meta { padding: 0.75rem; border: 1px solid var(--border); border-radius: 10px; background: var(--hover); margin-bottom: 1rem; }
.bug-meta__row { display: grid; gap: 0.25rem; margin-bottom: 0.5rem; }
.bug-meta__label { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); }
.bug-meta__row:last-child { margin-bottom: 0; }

.bug-meta__dl {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 0.25rem 0.5rem;
  font-size: 12px;
  margin: 0;
}
.bug-meta__dl dt { color: var(--fg-muted); }
.bug-meta__dl dd { margin: 0; color: var(--fg); overflow-wrap: anywhere; }
.bug-meta__dl code { font-size: 11.5px; }
.bug-meta__ua code { font-size: 11px; }
.bug-meta__hint { color: var(--fg-muted); font-size: 11px; }

/* === Media library picker modal === */
.media-picker {
  position: fixed; inset: 0; z-index: 110;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
  background: rgba(0,0,0,0.5);
  animation: bug-fade-in 140ms ease both;
}
.media-picker[hidden] { display: none; }
.media-picker__backdrop { position: absolute; inset: 0; cursor: pointer; }
.media-picker__panel {
  position: relative;
  width: min(960px, 100%);
  max-height: calc(100vh - 4rem);
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 60px -12px rgba(0,0,0,0.45);
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  overflow: hidden;
  animation: bug-pop-in 160ms cubic-bezier(.2,.8,.2,1) both;
}
.media-picker__head { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.media-picker__title { font-size: 16px; font-weight: 600; margin: 0; flex: 0 0 auto; }
.media-picker__search { flex: 1 1 auto; max-width: 320px; margin-left: auto; }
.media-picker__close {
  background: transparent; border: 0; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--fg-muted);
  padding: 0.25rem 0.5rem; border-radius: 8px;
}
.media-picker__close:hover { background: var(--hover); color: var(--fg); }
/* Picker panel is itself the drop target — overlay appears during drag. */
.media-picker__file { display: none; }
.media-picker__panel { position: relative; }
.media-picker__overlay {
  position: absolute; inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  border: 3px dashed var(--accent);
  border-radius: 16px;
  z-index: 10;
  pointer-events: none;
  animation: bug-fade-in 100ms ease both;
}
.media-picker__panel.is-dragover .media-picker__overlay { display: flex; }
.media-picker__queue {
  list-style: none; margin: 0 1.25rem; padding: 0; display: grid; gap: 0.375rem; font-size: 12px;
}
.media-picker__queue li {
  display: grid; grid-template-columns: 1fr auto; gap: 0.25rem;
  padding: 0.375rem 0.5rem; border-radius: 6px; background: var(--hover);
}
.media-picker__grid {
  padding: 0.75rem 1.25rem; overflow-y: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
  min-height: 240px;
}
.media-picker__loading { grid-column: 1/-1; text-align: center; padding: 2rem 0; color: var(--fg-muted); }
.media-picker__empty   { grid-column: 1/-1; text-align: center; padding: 2rem 0; color: var(--fg-muted); }
.media-tile {
  position: relative;
  display: grid; gap: 0.375rem;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
  text-align: left;
  font: inherit; color: inherit;
}
.media-tile:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 6px 14px -6px rgba(0,0,0,0.18); }
.media-tile.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-glow); }
.media-tile__img-wrap {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1;
  background: var(--hover);
  border-radius: 6px;
  overflow: hidden;
}
.media-tile__img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.media-tile__name { font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-tile__sub  { font-size: 11px; color: var(--fg-muted); display: flex; justify-content: space-between; gap: 0.5rem; }
.media-tile__del {
  position: absolute; top: 4px; right: 4px;
  display: none;
  width: 24px; height: 24px;
  border-radius: 999px;
  background: rgba(0,0,0,0.6); color: #fff;
  border: 0; cursor: pointer;
  font-size: 14px; line-height: 1;
  align-items: center; justify-content: center;
}
.media-tile:hover .media-tile__del { display: inline-flex; }
.media-tile__del:hover { background: var(--del-text, #c0392b); }
.media-picker__footer {
  display: flex; justify-content: flex-end; gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--border);
}

/* /media full-page library — same upload zone styling as AI Documents,
 * plus a thumbnail grid with metadata + delete. */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.media-card {
  position: relative;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.media-card__img-wrap {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1;
  background: var(--hover);
  cursor: zoom-in;
}
.media-card__img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.media-card__meta { padding: 0.5rem 0.625rem 0.625rem; display: grid; gap: 0.25rem; font-size: 12px; }
.media-card__name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-card__sub  { display: flex; flex-wrap: wrap; gap: 0.5rem; color: var(--fg-muted); font-size: 11px; }
.media-card__url  { color: var(--fg-muted); overflow: hidden; }
.media-card__url code { font-size: 10.5px; white-space: nowrap; }
.media-card__del {
  position: absolute; top: 4px; right: 4px;
  width: 24px; height: 24px;
  border-radius: 999px;
  background: rgba(0,0,0,0.6); color: #fff;
  border: 0; cursor: pointer;
  font-size: 14px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 120ms ease, background 120ms ease;
}
.media-card:hover .media-card__del { opacity: 1; }
.media-card__del:hover { background: var(--del-text, #c0392b); }

/* WordPress-style whole-area drop target: the entire library body accepts drops.
 * The overlay shows ONLY while a drag is in progress (toggled by JS). */
.media-library__body {
  position: relative;
  padding: 0.25rem 0;
  min-height: 240px;            /* gives empty libraries a real target area */
}
.media-library__file { display: none; }
.media-library__overlay {
  position: absolute; inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  border: 3px dashed var(--accent);
  border-radius: var(--radius-card);
  z-index: 10;
  pointer-events: none;
  animation: bug-fade-in 100ms ease both;
}
.media-library__body.is-dragover .media-library__overlay { display: flex; }
.media-library__overlay-card {
  background: var(--surface);
  color: var(--fg);
  padding: 1.25rem 2rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 12px 28px -8px rgba(0,0,0,0.25);
  text-align: center;
  display: grid; gap: 0.25rem;
}
.media-library__overlay-card strong { font-size: 16px; }
.media-library__overlay-card span   { font-size: 12px; color: var(--fg-muted); }
.media-library__queue { margin: 0.5rem 0; }
.media-grid.is-empty { display: none; }

/* === Generic image lightbox — full-screen HUD === */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem 2rem;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
  cursor: zoom-out;
  animation: lightbox-fade-in 140ms ease both;
}
.lightbox[hidden] { display: none; }
.lightbox__img {
  max-width: 100%;
  max-height: calc(100vh - 8rem);
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.6);
  cursor: default;
  animation: lightbox-pop-in 180ms cubic-bezier(.2,.8,.2,1) both;
}
.lightbox__caption {
  margin-top: 1rem;
  color: #ddd;
  font-size: 13px;
  text-align: center;
  max-width: 90%;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  cursor: default;
}
.lightbox__caption:empty { display: none; }
.lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.4);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lightbox__close:hover { background: rgba(0,0,0,0.7); border-color: rgba(255,255,255,0.5); }

/* Click target around the inline screenshot — give it a clear "open in HUD" affordance. */
.bug-detail__shot { cursor: zoom-in; display: inline-block; }
.bug-detail__shot:hover img { box-shadow: 0 6px 18px -4px rgba(0,0,0,0.25); }

@keyframes lightbox-fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes lightbox-pop-in {
  from { opacity: 0; transform: scale(0.96) }
  to   { opacity: 1; transform: none }
}

@keyframes bug-fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes bug-pop-in {
  from { opacity: 0; transform: translateY(-10px) scale(0.98) }
  to   { opacity: 1; transform: none }
}

/* Notifications dropdown — wider than the user dropdown, with a generous border
 * radius so it reads as a softer panel. Pulls all colors from theme vars. */
.dropdown__head--bell { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.dropdown__mark-all {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-muted);
  cursor: pointer;
}
.dropdown__mark-all:hover { background: var(--hover); color: var(--accent); border-color: color-mix(in oklab, var(--accent) 35%, var(--border)); }

.dropdown--bell .dropdown__menu--bell {
  min-width: 320px;
  max-width: 360px;
  border-radius: 18px;
  padding: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--fg);
  flex-direction: column;
  max-height: min(70vh, 540px);
}
/* When the bell dropdown is open, switch from the base `.dropdown__menu`
   `display: block` to flex so the list inside can scroll within the cap. */
.dropdown--bell .dropdown__menu--bell[data-open="true"] { display: flex; }
.dropdown--bell .dropdown__menu--bell .dropdown__head,
.dropdown--bell .dropdown__menu--bell .dropdown__divider { flex: 0 0 auto; }
.notifications {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  gap: 0.125rem;
}
.notifications__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 0.5rem;
  padding: 0.5rem 0.625rem;
  border-radius: 12px;
  text-decoration: none;
  color: var(--fg);
  font-size: 13.5px;
  cursor: pointer;
  position: relative;
}
.notifications__item:hover { background: var(--hover); color: var(--accent); }
.notifications__item-body  { min-width: 0; }
.notifications__item-title { font-weight: 500; }
.notifications__item-sub   { font-size: 12px; color: var(--fg-muted); margin-top: 1px; }
.notifications__item-time  { font-size: 11px; color: var(--fg-muted); white-space: nowrap; align-self: flex-start; padding-top: 2px; }
/* Unread accent — small dot on the left edge */
.notifications__item.is-unread::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 4px; height: 18px;
  margin-top: -9px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}
.notifications__item.is-unread { background: color-mix(in oklab, var(--accent) 5%, transparent); }
.notifications__empty {
  padding: 1rem 0.625rem;
  text-align: center;
  font-size: 13px;
  color: var(--fg-muted);
}

/* === Dropdown === */
.dropdown { position: relative; }
.dropdown__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 240px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 0.5rem;
  display: none;
  z-index: 40;
}
.dropdown__menu[data-open="true"] { display: block; animation: reveal 140ms ease both; }
.dropdown__head { padding: 0.5rem 0.625rem 0.625rem; }
.dropdown__name { font-weight: 600; font-size: 13.5px; }
.dropdown__email { font-size: 12px; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown__divider { height: 1px; background: var(--border); margin: 0.25rem -0.5rem; }
.dropdown__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-input);
  color: var(--fg);
  text-decoration: none;
  font-size: 13.5px;
}
.dropdown__item:hover { background: var(--hover); color: var(--accent); }
.dropdown__glyph { color: var(--fg-muted); transition: transform 140ms ease, color 140ms ease; }
.dropdown__item:hover .dropdown__glyph { color: var(--accent); transform: translateX(2px); }

/* === Burger + mobile sidebar === */
.burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  color: var(--fg);
  cursor: pointer;
  font-size: 18px;
}
.layout__scrim { display: none; }

@media (max-width: 767px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "main";
  }
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 280px;
    transform: translateX(-100%);
    transition: transform 200ms ease;
    box-shadow: var(--shadow-card);
  }
  .burger { display: inline-flex; }
  /* No sidebar in the grid on mobile — topbar spans the full viewport width. */
  .topbar { left: 0; }
  body.layout--mobile-open .sidebar { transform: translateX(0); }
  body.layout--mobile-open .layout__scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 25;
    border: 0;
  }
  .topbar__name { display: none; }
}

/* === Grid + KPI + cards === */
.grid { display: grid; gap: 1.25rem; }
.grid--2 { grid-template-columns: 1fr 1fr; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 767px) {
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
}
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.card__title { font-size: 16px; font-weight: 600; color: var(--fg); }
.card__empty { color: var(--fg-muted); font-size: 14px; }
.card__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; font-size: 14px; }
.card__list a { color: var(--accent); }
.kpi { display: grid; gap: 0.375rem; }
.kpi__label { font-size: 11.5px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.kpi__value { font-size: 32px; font-weight: 600; line-height: 1.1; color: var(--fg); font-variant-numeric: tabular-nums; }
.kpi__hint  { font-size: 12.5px; color: var(--fg-muted); }

/* === Users table + buttons === */
.users-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.users-table thead th {
  text-align: left;
  font-weight: 500;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11.5px;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
}
.users-table tbody td {
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.users-table tbody tr:last-child td { border-bottom: 0; }
.users-table__actions { white-space: nowrap; text-align: right; }
.users-table__actions form { display: inline-block; margin-left: 0.15rem; }
/* Icon-only action buttons (Edit / Unlock / Reset / Delete / Restore). Hover reveals
 * the affordance, title attribute provides the tooltip the text labels used to. */
.users-table__action {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  color: var(--fg-muted);
  text-decoration: none;
  margin: 0 1px;
  transition: background 120ms ease, color 120ms ease;
}
.users-table__action:hover { background: var(--hover); color: var(--fg); }
.users-table__action:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-glow); }
.users-table__action svg { width: 18px; height: 18px; display: block; }
.users-table__action--danger { color: color-mix(in oklab, var(--danger) 65%, var(--fg-muted)); }
.users-table__action--danger:hover { color: var(--danger); background: color-mix(in oklab, var(--danger) 10%, transparent); }
/* Badges mode: when display_actions=badges, the inner <span class="badge badge--action">
 * grows naturally to fit the label, so the surrounding 32×32 hit-box gets reset to auto
 * width to wrap snugly. The wrapper's own rectangular hover background is also cleared
 * — otherwise it shows as a square halo around the pill-shaped badge — only the inner
 * badge keeps a hover treatment. */
.users-table__action:has(.badge--action) { width: auto; height: auto; padding: 0; border-radius: 999px; }
.users-table__action:has(.badge--action):hover { background: transparent; }
.badge--action {
  margin: 0;
  background: var(--surface-2);
  color: var(--fg);
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--border);
}
.users-table__action:hover .badge--action { background: var(--hover); border-color: color-mix(in oklab, var(--accent) 30%, var(--border)); }
.users-table__action--danger .badge--action {
  color: var(--danger);
  border-color: color-mix(in oklab, var(--danger) 35%, var(--border));
}
.users-table__action--danger:hover .badge--action { background: color-mix(in oklab, var(--danger) 10%, transparent); }
.card__head-actions { display: flex; align-items: center; gap: 0.5rem; }
.users-table__row--deleted td { opacity: 0.55; font-style: italic; }
.users-table__row--deleted .badge { opacity: 0.75; }
/* Sortable column header — looks like the column label but clickable; active sort
 * gains an underline + brighter color so the user can see what's active. */
.sort-link {
  display: inline-flex; align-items: center; gap: 0.15rem;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.sort-link:hover { color: var(--fg); text-decoration: underline; text-decoration-color: color-mix(in oklab, currentColor 50%, transparent); }
.sort-link--active { color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.sort-link__glyph { font-size: 0.85em; display: inline-block; vertical-align: -1px; }
.sort-link__glyph--idle { color: var(--fg-muted); opacity: 0.5; transition: opacity 120ms ease, color 120ms ease; }
.sort-link:hover .sort-link__glyph--idle { opacity: 1; color: var(--fg); }
.users-table__empty { color: var(--fg-muted); text-align: center; padding: 2rem; }

.btn--sm { padding: 0.35rem 0.65rem; font-size: 12.5px; gap: 0.25rem; }
.btn--danger {
  background: var(--del-bg, transparent);
  color: var(--del-text, var(--danger));
  border-color: color-mix(in oklab, var(--del-text, var(--danger)) 35%, var(--border));
}
.btn--danger:hover {
  background: var(--del-hover-bg, color-mix(in oklab, var(--danger) 12%, transparent));
  border-color: color-mix(in oklab, var(--del-text, var(--danger)) 55%, var(--border));
  color: var(--del-text, var(--danger));
}

.badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  font-size: 11px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--fg-muted);
  border: 1px solid var(--border);
  margin-left: 0.4rem;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}
.badge--admin     { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 40%, var(--border)); background: color-mix(in oklab, var(--accent) 8%, var(--surface-2)); }
.badge--processor { color: #b45309; border-color: color-mix(in oklab, #b45309 35%, var(--border)); }
.badge--lender    { color: #047857; border-color: color-mix(in oklab, #047857 35%, var(--border)); }
.badge--officer   { /* uses default */ }

/* === Color picker text input (Coloris attaches its swatch button next to it) === */
.field__color-text {
  width: 12ch;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.field__color-text:invalid {
  border-color: color-mix(in oklab, var(--danger) 55%, var(--border));
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--danger) 12%, transparent);
}
/* Style Coloris' injected swatch button to match our other inputs */
.clr-field button {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  margin: 6px;
  border: 1px solid var(--border);
}

/* === Modern <select> styling (closed state) — opened list stays OS-native === */
:root {
  --select-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%235a6371' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --select-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%238993a4' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  }
}
:root[data-theme="dark"] {
  --select-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%238993a4' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
select.field__input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  padding-right: 38px;
  cursor: pointer;
  text-overflow: ellipsis;
}
select.field__input:hover {
  border-color: color-mix(in oklab, var(--accent) 30%, var(--border));
}
select.field__input::-ms-expand { display: none; }
select.field__input option {
  background: var(--surface);
  color: var(--fg);
}

/* === Profile dropdown: theme toggle (segmented) === */
.dropdown__group { padding: 0.5rem 0.625rem; display: grid; gap: 0.5rem; }
.dropdown__group-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 500;
}
.theme-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2px;
  padding: 2px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
}
.theme-toggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.4rem 0.5rem;
  background: transparent;
  border: 0;
  border-radius: calc(var(--radius-input) - 2px);
  color: var(--fg-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.theme-toggle__btn:hover { color: var(--fg); }
.theme-toggle__btn[aria-pressed="true"] {
  background: var(--surface);
  color: var(--accent);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0 0 0 1px var(--border);
}
.theme-toggle__label {
  font-variant-numeric: tabular-nums;
}
@media (max-width: 320px) {
  .theme-toggle__label { display: none; } /* icons only on tiny screens */
}

/* === Tabs (used by Settings) === */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin: 0 0 1.25rem;
  overflow-x: auto;
}
.tabs [role="tab"] {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0.625rem 1rem;
  color: var(--fg-muted);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 140ms ease, border-color 140ms ease;
  white-space: nowrap;
}
.tabs [role="tab"]:hover { color: var(--fg); }
.tabs [role="tab"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--focus-glow);
  border-radius: var(--radius-input);
}
.tabs [role="tab"][aria-selected="true"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.tabs [role="tab"][data-has-error="true"]::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--danger);
  border-radius: 999px;
  margin-left: 0.4rem;
  vertical-align: middle;
}
.tabpanel { display: grid; gap: 1.5rem; }
.tabpanel[hidden] { display: none; }

/* === Audit filter bar === */
.audit-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin: 0 0 1rem;
}
.audit-filter__group { display: grid; gap: 0.25rem; min-width: 160px; }
.audit-filter__label {
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* === Audit: clickable rows, expand chevron, search field grows, pager === */
.audit-filter__group--grow { flex: 1 1 240px; }
.audit-filter__actions { display: flex; gap: 0.5rem; align-items: flex-end; }
.audit-summary {
  color: var(--fg-muted);
  font-size: 12.5px;
  margin: 0 0 0.5rem;
}
.audit-table--clickable .audit-row {
  cursor: pointer;
}
.audit-table--clickable .audit-row:hover td { background: color-mix(in oklab, var(--accent) 5%, transparent); }
.audit-table--clickable .audit-row[aria-expanded="true"] td {
  background: color-mix(in oklab, var(--accent) 8%, transparent);
}
.audit-table--clickable .audit-row[aria-expanded="true"] + .audit-row__detail td {
  background: color-mix(in oklab, var(--accent) 4%, var(--surface-2));
  border-top: 0;
}
.audit-table--clickable .audit-row:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--focus);
}
.audit-table__chev { width: 24px; padding-left: 0.5rem !important; padding-right: 0 !important; color: var(--fg-muted); }
.audit-chev {
  display: inline-block;
  transition: transform 160ms ease;
  font-size: 10px;
  line-height: 1;
}
.audit-row[aria-expanded="true"] .audit-chev { transform: rotate(90deg); }
.audit-row__detail[hidden] { display: none; }
.audit-row__detail td { padding-top: 0 !important; padding-bottom: 1rem !important; }
.audit-table__changes-pre {
  margin: 0;
  padding: 0.75rem;
  background: var(--surface);
  border-radius: var(--radius-input);
  border: 1px solid var(--border);
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  overflow: auto;
  max-height: 320px;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1rem;
}
.pager__status {
  font-size: 13px;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
.btn.is-disabled, .btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

/* === Audit detail (human-readable expand) === */
.audit-action {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--fg-muted);
  border: 1px solid var(--border);
  vertical-align: middle;
}
.audit-action--login        { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 40%, var(--border)); background: color-mix(in oklab, var(--accent) 8%, var(--surface-2)); }
.audit-action--login_failed,
.audit-action--login_locked { color: var(--danger); border-color: color-mix(in oklab, var(--danger) 40%, var(--border)); background: color-mix(in oklab, var(--danger) 8%, var(--surface-2)); }
.audit-action--insert       { color: #047857; border-color: color-mix(in oklab, #047857 40%, var(--border)); background: color-mix(in oklab, #047857 8%, var(--surface-2)); }
.audit-action--delete       { color: #b45309; border-color: color-mix(in oklab, #b45309 40%, var(--border)); background: color-mix(in oklab, #b45309 8%, var(--surface-2)); }
.audit-action--view         { color: var(--fg-muted); border-color: var(--border); background: var(--surface-2); }

.audit-detail {
  padding: 0.5rem 0.25rem 0.75rem;
  display: grid;
  gap: 1rem;
}
.audit-detail__meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1rem;
  align-items: baseline;
  font-size: 13px;
  margin: 0;
}
.audit-detail__meta dt {
  color: var(--fg-muted);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.audit-detail__meta dd { margin: 0; color: var(--fg); }
.audit-detail__heading {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 500;
}
.audit-detail__diff {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  overflow: hidden;
}
.audit-detail__diff thead th {
  text-align: left;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding: 0.5rem 0.75rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.audit-detail__diff tbody td {
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--border);
  vertical-align: top;
}
.audit-detail__field { color: var(--fg-muted); width: 180px; }
.audit-detail__before { color: var(--danger); text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--danger) 60%, transparent); }
.audit-detail__after  { color: var(--fg); font-weight: 500; }
/* Render colors and images the way users see them in Settings, not as raw text */
.audit-detail__swatch {
  display: inline-block;
  width: 16px; height: 16px;
  margin-right: 0.45rem;
  background: var(--swatch);
  border: 1px solid color-mix(in oklab, currentColor 30%, var(--border));
  border-radius: 4px;
  vertical-align: -3px;
}
.audit-detail__thumb {
  display: inline-block;
  height: 24px; width: auto;
  margin-right: 0.45rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  vertical-align: -7px;
  background: var(--surface-2);
}
.audit-detail__mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; }
.audit-detail__placeholder { color: var(--fg-muted); font-style: italic; }
.audit-detail__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem; }
.audit-detail__chips li {
  font-size: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.audit-detail__chips--added   li { background: color-mix(in oklab, #16a34a 12%, transparent); border-color: color-mix(in oklab, #16a34a 35%, var(--border)); color: color-mix(in oklab, #16a34a 80%, var(--fg)); }
.audit-detail__chips--removed li { background: color-mix(in oklab, #dc2626 12%, transparent); border-color: color-mix(in oklab, #dc2626 35%, var(--border)); color: color-mix(in oklab, #dc2626 80%, var(--fg)); }
/* The before strike-through shouldn't slash through swatches and thumbnails */
.audit-detail__before .audit-detail__swatch,
.audit-detail__before .audit-detail__thumb { text-decoration: none; }

/* === Roles: permission matrix === */
.perm-grid { display: grid; gap: 1.25rem; }
.perm-grid__actions { margin-top: 0.75rem; display: flex; justify-content: flex-end; }
.perm-area {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 0.25rem 1.25rem;   /* tighter — body adds its own top padding */
}
/* Native <details>/<summary> with our own caret. Removing the browser marker
   keeps the design consistent across Chrome / Firefox / Safari. */
.perm-area summary.perm-area__title {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0;
  margin: 0;
  user-select: none;
}
.perm-area summary.perm-area__title::-webkit-details-marker { display: none; }
.perm-area__caret {
  display: inline-block;
  transition: transform 120ms ease;
  color: var(--fg-muted);
  font-size: 11px;
}
.perm-area[open] > summary .perm-area__caret { transform: rotate(90deg); }
.perm-area__name {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  flex: 1 1 auto;
}
.perm-area__count {
  font-size: 11px;
  color: var(--fg-muted);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.perm-area__count.is-full { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 35%, var(--border)); background: color-mix(in oklab, var(--accent) 8%, var(--surface-2)); }
.perm-area__count.is-empty { opacity: 0.6; }
.perm-area__body { padding-bottom: 0.75rem; }
.perm-layer { padding: 0.25rem 0 0.5rem; }
.perm-layer:not(:first-child) { border-top: 1px solid var(--border); padding-top: 0.75rem; margin-top: 0.5rem; }
.perm-layer__title {
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 0.5rem;
}
.perm-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.625rem;
  align-items: start;
  padding: 0.4rem 0;
  cursor: pointer;
  font-size: 13.5px;
}
.perm-row--locked { cursor: not-allowed; opacity: 0.85; }
.perm-row input[type="checkbox"] { margin-top: 0.25rem; width: 18px; height: 18px; }

/* === Modern checkbox: custom-styled native control =====================
   Native check stripped via `appearance: none` and replaced with a
   transparent square + animated SVG check. Inherits accent color from the
   active theme so it picks up theme changes automatically. Falls back
   gracefully — disabled inputs dim, focus shows a glow ring, click pops
   the check in with a small scale animation. */
input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px; min-width: 18px;
  margin: 0;
  border: 1.5px solid color-mix(in oklab, var(--fg-muted) 40%, var(--border));
  border-radius: 5px;
  background: var(--surface);
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  flex: 0 0 auto;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 80ms ease;
}
input[type="checkbox"]:hover:not(:disabled) {
  border-color: color-mix(in oklab, var(--accent) 55%, var(--border));
}
input[type="checkbox"]:active:not(:disabled) { transform: scale(0.93); }
input[type="checkbox"]:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent);
}
input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
input[type="checkbox"]:checked::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: 13px;
  background-position: center;
  background-repeat: no-repeat;
  animation: cb-pop 160ms cubic-bezier(.2,.8,.2,1);
}
input[type="checkbox"]:disabled {
  opacity: 0.5; cursor: not-allowed;
  background: color-mix(in oklab, var(--fg-muted) 12%, var(--surface));
}
input[type="checkbox"]:indeterminate {
  background: var(--accent); border-color: var(--accent);
}
input[type="checkbox"]:indeterminate::after {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round'><line x1='5' y1='12' x2='19' y2='12'/></svg>");
  background-size: 13px; background-position: center; background-repeat: no-repeat;
}
@keyframes cb-pop {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* Pill-style label wrapper for "checkbox + text" patterns. Adds a soft
   card around the pair so the click target is larger and the visual
   weight matches the rest of the form. Used by the new user form's
   boolean rows ("Re-hire", "Team lead", etc.). */
.check-pill {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  cursor: pointer;
  user-select: none;
  font-size: 13.5px;
  transition: border-color 140ms ease, background 140ms ease;
}
.check-pill:hover { border-color: color-mix(in oklab, var(--accent) 35%, var(--border)); }
.check-pill:has(input:checked) {
  background: color-mix(in oklab, var(--accent) 8%, var(--surface));
  border-color: color-mix(in oklab, var(--accent) 45%, var(--border));
  color: var(--fg);
}

/* === Users edit-form: profile image drop zone ====================== */
.user-avatar-drop {
  display: flex; align-items: center; gap: 0.75rem;
  flex-wrap: wrap;
}
.user-avatar-drop__zone {
  display: flex; align-items: center; gap: 0.875rem;
  padding: 0.625rem 0.875rem;
  border: 2px dashed var(--border);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  min-height: 92px;
  flex: 1 1 320px;
  transition: border-color 140ms ease, background 140ms ease;
}
.user-avatar-drop__zone:hover,
.user-avatar-drop__zone:focus-visible {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 4%, var(--surface));
  outline: none;
}
.user-avatar-drop__zone.is-dragover {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 12%, var(--surface));
}
.user-avatar-drop__preview {
  width: 64px; height: 64px; border-radius: 50%;
  background: color-mix(in oklab, var(--accent) 10%, var(--surface-2, var(--hover)));
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex: 0 0 auto;
  border: 1px solid var(--border);
}
.user-avatar-drop__img { width: 100%; height: 100%; object-fit: cover; }
.user-avatar-drop__initial { font-size: 22px; font-weight: 600; color: var(--accent); }
.user-avatar-drop__copy { display: flex; flex-direction: column; gap: 0.1rem; line-height: 1.3; font-size: 13px; color: var(--fg-muted); }
.user-avatar-drop__copy strong { color: var(--fg); font-weight: 600; font-size: 13.5px; }
.user-avatar-drop__zone.is-uploading { opacity: 0.7; pointer-events: none; }

/* === States Licensed picker (modal + readonly input) === */
.states-picker { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.states-picker__input { flex: 1 1 320px; background: var(--surface); cursor: pointer; }
.states-picker__input[readonly] { cursor: pointer; }

.states-modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 3rem 1rem 1rem;
}
.states-modal[hidden] { display: none; }
.states-modal__backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,0.45);
  animation: bug-fade-in 140ms ease both;
}
.states-modal__panel {
  position: relative; width: min(720px, 100%);
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 24px 60px -12px rgba(0,0,0,0.45);
  padding: 1.25rem 1.5rem 1.25rem;
  display: flex; flex-direction: column; gap: 0.875rem;
  max-height: calc(100vh - 4rem); overflow: hidden;
  animation: bug-pop-in 160ms cubic-bezier(.2,.8,.2,1) both;
}
.states-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem; flex-wrap: wrap;
}
.states-modal__title { font-size: 17px; font-weight: 600; margin: 0; }
.states-modal__head-actions { display: flex; align-items: center; gap: 0.4rem; }
.states-modal__close {
  background: transparent; border: 0; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--fg-muted);
  padding: 0.25rem 0.5rem; border-radius: 8px;
}
.states-modal__close:hover { background: var(--hover); color: var(--fg); }
.states-modal__count { font-size: 12px; color: var(--fg-muted); }
.states-modal__count [data-states-count] { font-weight: 600; color: var(--accent); }
.states-modal__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.4rem;
  overflow-y: auto;
  padding: 0.25rem;
  margin: 0 -0.25rem;
}
.states-modal__pill { font-size: 12.5px; padding: 0.4rem 0.65rem; }
.states-modal__pill span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.states-modal__actions {
  display: flex; gap: 0.5rem; justify-content: flex-end;
  padding-top: 0.5rem; border-top: 1px solid var(--border);
}
.perm-row__label { display: grid; gap: 0.15rem; }
.perm-row__label strong { font-weight: 500; color: var(--fg); }
.perm-row__name { font-size: 11px; color: var(--fg-muted); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.perm-row__desc { font-size: 12px; color: var(--fg-muted); }

/* === Icon picker (Menu settings) === */
.icon-picker { position: relative; display: inline-block; }
.icon-picker__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  color: var(--fg);
  cursor: pointer;
  font-size: 13.5px;
  min-width: 220px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.icon-picker__btn:hover { border-color: color-mix(in oklab, var(--accent) 30%, var(--border)); }
.icon-picker__btn[aria-expanded="true"] { border-color: var(--focus); box-shadow: 0 0 0 4px var(--focus-glow); }
.icon-picker__current { display: inline-flex; width: 22px; height: 22px; color: var(--fg); }
.icon-picker__current svg { width: 18px; height: 18px; }
.icon-picker__name { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; color: var(--fg-muted); flex: 1; text-align: left; }
.icon-picker__none { font-style: italic; color: var(--fg-muted); font-size: 11px; }
.icon-picker__chevron { color: var(--fg-muted); font-size: 10px; }
/* Centered modal/HUD overlay */
.icon-picker__panel {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(8, 11, 18, 0.55);
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2.5rem);
  animation: reveal 160ms ease both;
}
.icon-picker__panel[hidden] { display: none; }
.icon-picker__modal {
  width: min(820px, 92vw);
  max-height: 86vh;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 1.25rem 1.25rem 1rem;
  overflow: hidden;
}
.icon-picker__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.icon-picker__title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); }
.icon-picker__close {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  width: 32px; height: 32px; border-radius: 6px; color: var(--fg-muted);
  font-size: 22px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-picker__close:hover { background: var(--hover); color: var(--fg); }
.icon-picker__close:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-glow); }
.icon-picker__search-row { display: flex; gap: 0.5rem; }
.icon-picker__search {
  flex: 1;
  padding: 0.55rem 0.75rem;
  background: var(--surface-2);
  border: 1px solid var(--input-outline);
  border-radius: var(--radius-input);
  color: var(--fg);
  font-size: 14px;
}
.icon-picker__search:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-glow); }
.icon-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 6px;
  overflow-y: auto;
  padding: 8px;
  background: var(--surface-2);
  border-radius: var(--radius-input);
  min-height: 0;
}
.icon-picker__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  color: var(--fg);
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.icon-picker__item svg { width: 22px; height: 22px; }
.icon-picker__item:hover { background: var(--surface); border-color: var(--focus); transform: translateY(-1px); }
.icon-picker__item[aria-selected="true"] { background: color-mix(in oklab, var(--accent) 12%, var(--surface)); border-color: var(--accent); color: var(--accent); }
.icon-picker__item svg { width: 18px; height: 18px; }
.icon-picker__item[hidden] { display: none; }

/* === Sidebar nav display modes (List / Tiles / Grid) === */
/* Both tiles + grid lay icons over labels and center the content. */
.sidebar__nav--tiles .sidebar__link,
.sidebar__nav--grid  .sidebar__link {
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.75rem 0.5rem;
  text-align: center;
  border-left: 0;
}
/* GRID mode keeps the boxed look (border + rounded corners). */
.sidebar__nav--grid .sidebar__link {
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
}
.sidebar__nav--grid .sidebar__link--active {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 8%, transparent);
}
.sidebar__nav--tiles .sidebar__icon,
.sidebar__nav--grid  .sidebar__icon {
  width: auto;
  font-size: 18px;
}
.sidebar__nav--tiles .sidebar__icon svg,
.sidebar__nav--grid  .sidebar__icon svg { width: 22px; height: 22px; }
.sidebar__nav--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
/* In grid mode, the section header still takes a full row so items above it never
 * mix into the section below. When section labels are hidden the header div isn't
 * rendered at all, so links flow as one continuous 2-column grid. */
.sidebar__nav--grid > .sidebar__section { grid-column: 1 / -1; }

/* TILES mode: each tile is a full-width row separated by a thin divider — no box,
 * no radius. The negative horizontal margin escapes the sidebar's 0.75rem padding
 * so the divider line reaches edge-to-edge; matching padding puts the icon/label
 * back where they were. Active state is just a subtle accent tint that also spans
 * the full column.  */
.sidebar__nav--tiles { gap: 0; }
.sidebar__nav--tiles > .sidebar__link {
  gap: 0.5rem;
  padding: 1rem 0.75rem;
  margin-left: -0.75rem;
  margin-right: -0.75rem;
  font-size: 14px;
  border-radius: 0;
  border-bottom: 1px solid var(--border);
}
.sidebar__nav--tiles > .sidebar__link:last-of-type { border-bottom: 0; }
.sidebar__nav--tiles > .sidebar__link--active {
  background: color-mix(in oklab, var(--accent) 8%, transparent);
}
.sidebar__nav--tiles > .sidebar__link .sidebar__icon svg { width: 30px; height: 30px; }
/* Section labels in tiles mode also span edge-to-edge (otherwise they'd visually
 * float in a column narrower than the tiles below them). */
.sidebar__nav--tiles > .sidebar__section {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.sidebar__icon svg { width: 16px; height: 16px; vertical-align: middle; display: inline-block; }
.sidebar__link--noicon .sidebar__icon { display: none; }
.sidebar__link--nolabel span:last-child { display: none; }

/* === Image drop zone (Settings > Theme > Company logo) === */
.image-drop { display: grid; gap: 0.5rem; max-width: 360px; }
.image-drop__file { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
.image-drop__zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 160px;
  padding: 1.25rem;
  background: var(--surface-2);
  border: 2px dashed var(--border);
  border-radius: var(--radius-input);
  cursor: pointer;
  text-align: center;
  transition: border-color 140ms ease, background 140ms ease;
}
.image-drop__zone:hover,
.image-drop__zone:focus-visible {
  border-color: var(--focus);
  outline: none;
}
.image-drop__zone.is-dragover {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 10%, var(--surface-2));
}
.image-drop__preview {
  max-width: 200px;
  max-height: 100px;
  width: auto;
  height: auto;
  object-fit: contain;
  background: transparent;
}
.image-drop__preview[hidden] { display: none; }
.image-drop__hint { color: var(--fg-muted); font-size: 13px; display: grid; gap: 0.25rem; }
.image-drop__hint strong { color: var(--fg); font-weight: 500; }
.image-drop__meta { font-size: 11.5px; }
.image-drop__zone:has(.image-drop__preview:not([hidden])) .image-drop__hint { display: none; }
.image-drop__actions { display: flex; gap: 0.5rem; }

/* Brand image variants (used when company_logo is set) */
.brand-logo { display: block; max-width: 100%; max-height: 32px; width: auto; height: auto; }
.sidebar__brand .brand-logo { max-height: 28px; }
.auth__brand .brand-logo { max-height: 36px; }
/* SVG mark from the icon library — selected via Site Settings > Theme > Brand & identity */
.brand-svg-logo { display: inline-flex; align-items: center; color: var(--accent); }
.brand-svg-logo svg { width: 28px; height: 28px; }
.sidebar__brand .brand-svg-logo svg { width: 28px; height: 28px; }
.auth__brand .brand-svg-logo svg { width: 36px; height: 36px; }

/* Currently-displayed preview block at the top of the Brand & identity widget */
.brand-preview {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--hover);
}
.brand-preview__mark {
  flex: 0 0 auto;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.brand-preview__mark .brand-logo      { max-width: 44px; max-height: 44px; }
.brand-preview__mark .brand-svg-logo svg { width: 36px; height: 36px; }
.brand-preview__mark .auth__mark      { transform: rotate(45deg); }
.brand-preview__copy  { flex: 1 1 auto; min-width: 0; }
.brand-preview__label { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); }
.brand-preview__hint  { font-size: 12.5px; color: var(--fg); margin-top: 2px; }

/* === Settings > Menu : 3 widgets in a 2-column grid === */
.menu-widgets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
}
/* Items widget spans the full row below */
.menu-widgets__items { grid-column: 1 / -1; }
/* Below 720px, stack everything */
@media (max-width: 720px) {
  .menu-widgets { grid-template-columns: 1fr; }
}

/* === Settings > Theme : widget grid (Brand / Surfaces / Text / Inputs / Buttons) === */
.theme-widgets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 720px) {
  .theme-widgets { grid-template-columns: 1fr; }
}

/* === Settings > Menu : tighten compact widgets + dense items table === */
/* Compact widgets (Menu options, Section labels) — stack label over control,
 * tighter padding, no big intra-row border line. */
.menu-widgets__general .settings__row,
.menu-widgets__sections .settings__row {
  grid-template-columns: 1fr;
  gap: 0.35rem;
  padding: 0.45rem 0;
}
.menu-widgets__general .settings__row:first-of-type,
.menu-widgets__sections .settings__row:first-of-type {
  padding-top: 0;
}
.menu-widgets__general .settings__label,
.menu-widgets__sections .settings__label { gap: 0.1rem; }
.menu-widgets__general .settings__desc,
.menu-widgets__sections .settings__desc { font-size: 12px; }

/* Items widget: dense table with Name / Label / Icon columns */
.menu-items-grid { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.menu-items-grid thead th {
  text-align: left;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--border);
}
.menu-items-grid tbody td {
  padding: 0.55rem 0.5rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.menu-items-grid tbody tr:last-child td { border-bottom: 0; }
.menu-items-grid__name { font-weight: 500; color: var(--fg); white-space: nowrap; width: 140px; }
.field__input--compact { padding: 0.45rem 0.6rem; font-size: 13.5px; }

/* Users add/edit form — two explicit columns. Each column is its own flex
 * stack so sections flow top-down independently of the other column. This
 * sidesteps:
 *   - CSS-Grid's "row aligns to tallest cell" gap problem
 *   - column-count's Safari column-flow render quirks
 * align-items: start on the outer grid keeps each column from stretching to
 * match the taller one. */
.user-form-widgets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
}
.user-form-widgets__col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}
.user-form-widgets__col > .settings__section {
  margin: 0;   /* gap handles spacing — flush start at top of each column */
}
@media (max-width: 720px) {
  .user-form-widgets { grid-template-columns: 1fr; }
}

/* Roles add/edit form — same pattern as users. Identity + Description on row 1
 * (2 columns), Permissions spans the full row underneath. */
.roles-form-widgets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
}
/* Permissions + Notifications share the bottom row, side-by-side on wide screens. */
.roles-form-widgets__permissions   { grid-column: 1 / 2; }
.roles-form-widgets__notifications { grid-column: 2 / 3; }
@media (max-width: 1023px) {
  /* Stack everything single-column on narrow screens. */
  .roles-form-widgets__permissions,
  .roles-form-widgets__notifications { grid-column: 1 / -1; }
}
.notif-grid { display: grid; gap: 0.5rem; }
@media (max-width: 720px) {
  .roles-form-widgets { grid-template-columns: 1fr; }
}

/* Address sub-grid inside a widget: Street spans the full row; City/State/ZIP share row 2. */
.user-address-grid {
  display: grid;
  grid-template-columns: 1fr 70px 90px;
  gap: 0.5rem 0.6rem;
  align-items: start;
}
.user-address-grid__field { display: grid; gap: 0.2rem; }
.user-address-grid__field--full { grid-column: 1 / -1; }
.user-address-grid .user-name-grid__err { grid-column: 1 / -1; margin: 0; }

/* User edit/add form: 5-field name row (prefix / first / middle / last / suffix).
 * First + last grow wider than the others since they're the required ones. */
.user-name-grid {
  display: grid;
  grid-template-columns: 90px 1fr 1fr 1fr 90px;
  gap: 0.5rem 0.6rem;
  align-items: start;
}
.user-name-grid__field { display: grid; gap: 0.2rem; }
.user-name-grid__lbl { font-size: 11.5px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.user-name-grid__field--first .user-name-grid__lbl,
.user-name-grid__field--last  .user-name-grid__lbl { color: var(--fg); }
.user-name-grid__err { grid-column: 1 / -1; margin: 0; }
@media (max-width: 720px) {
  .user-name-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .menu-items-grid, .menu-items-grid thead, .menu-items-grid tbody, .menu-items-grid tr, .menu-items-grid td, .menu-items-grid th { display: block; }
  .menu-items-grid thead { display: none; }
  .menu-items-grid tr { padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
  .menu-items-grid tr:last-child { border-bottom: 0; }
  .menu-items-grid td { padding: 0.25rem 0; border-bottom: 0; }
  .menu-items-grid__name { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-muted); width: auto; }
}

/* === iro.js color picker (replaces Coloris) === */
.iro-field { display: inline-flex; align-items: center; gap: 0.5rem; position: relative; }
.iro-field__trigger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: transparent; border: 1px solid var(--input-outline);
  border-radius: var(--radius-input); cursor: pointer; padding: 4px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.iro-field__trigger:hover { border-color: color-mix(in oklab, var(--focus) 35%, var(--input-outline)); }
.iro-field__trigger:focus-visible,
.iro-field__trigger[aria-expanded="true"] {
  outline: none; border-color: var(--focus); box-shadow: 0 0 0 4px var(--focus-glow);
}
.iro-field__swatch {
  display: block; width: 100%; height: 100%; border-radius: 4px;
  /* Layer the chosen color (--swatch-color, can include alpha) on top of a checkered
   * transparency pattern so semi-transparent colors are obvious. */
  background-image:
    linear-gradient(var(--swatch-color, transparent), var(--swatch-color, transparent)),
    linear-gradient(45deg,  rgba(0,0,0,0.10) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(0,0,0,0.10) 25%, transparent 25%),
    linear-gradient(45deg,  transparent 75%, rgba(0,0,0,0.10) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(0,0,0,0.10) 75%);
  background-size: 100% 100%, 8px 8px, 8px 8px, 8px 8px, 8px 8px;
  background-position: 0 0, 0 0, 0 4px, 4px -4px, -4px 0;
}
/* Centered HUD overlay (matches the icon picker modal pattern). */
.iro-field__popover {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8, 11, 18, 0.55);
  display: grid; place-items: center;
  padding: clamp(1rem, 3vw, 2.5rem);
  animation: reveal 160ms ease both;
}
.iro-field__popover[hidden] { display: none; }
.iro-field__modal {
  /* Hug the picker's natural width so the header (X) and footer (Done) sit directly
   * above/below the inputs — without trailing whitespace that reads as a 4th column. */
  width: max-content;
  max-width: 94vw;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 1rem 1.25rem 1rem;
  display: grid; gap: 0.75rem;
}
.iro-field__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.iro-field__title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); }
.iro-field__close {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  width: 32px; height: 32px; border-radius: 6px; color: var(--fg-muted);
  font-size: 22px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.iro-field__close:hover { background: var(--hover); color: var(--fg); }
.iro-field__close:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-glow); }
.iro-field__footer { display: flex; justify-content: flex-end; padding-top: 0.25rem; }
.iro-field__picker { display: flex; gap: 14px; align-items: flex-start; flex-wrap: nowrap; }
.iro-field__col-left  { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.iro-field__col-right { display: flex; align-items: flex-start; flex-shrink: 0; }
.iro-field__rgb {
  display: flex; flex-direction: column; gap: 0.4rem;
  min-width: 140px;
  flex-shrink: 0;
}
.iro-field__rgb-input {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 0.4rem;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.iro-field__rgb-input input {
  width: 100%; padding: 0.35rem 0.45rem; background: var(--surface-2);
  border: 1px solid var(--input-outline); border-radius: var(--radius-input);
  color: var(--fg); font-size: 12.5px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.iro-field__rgb-input input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-glow); }
.iro-field [data-iro-close] { justify-self: end; }

/* === Shared icon picker modal (HUD with category sidebar) === */
.icon-picker-modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8, 11, 18, 0.55);
  display: grid; place-items: center;
  padding: clamp(1rem, 3vw, 2.5rem);
  animation: reveal 160ms ease both;
}
.icon-picker-modal[hidden] { display: none; }
.icon-picker-modal__panel {
  width: min(1100px, 96vw);
  height: min(720px, 88vh);
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 1.25rem 1.25rem 1rem;
  overflow: hidden;
}
.icon-picker-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.icon-picker-modal__title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); }
.icon-picker-modal__close {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  width: 32px; height: 32px; border-radius: 6px; color: var(--fg-muted);
  font-size: 22px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-picker-modal__close:hover { background: var(--hover); color: var(--fg); }
.icon-picker-modal__close:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-glow); }
.icon-picker-modal__search-row { display: flex; gap: 0.75rem; align-items: center; }
.icon-picker-modal__count {
  font-size: 12px;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.icon-picker-modal__search {
  flex: 1; padding: 0.55rem 0.75rem;
  background: var(--surface-2);
  border: 1px solid var(--input-outline);
  border-radius: var(--radius-input);
  color: var(--fg); font-size: 14px;
}
.icon-picker-modal__search:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-glow); }
.icon-picker-modal__body {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0.75rem;
  min-height: 0;
}
.icon-picker-modal__sidebar {
  overflow-y: auto;
  padding: 4px;
  background: var(--surface-2);
  border-radius: var(--radius-input);
  display: flex; flex-direction: column; gap: 2px;
}
.icon-picker-modal__cat {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.625rem;
  background: transparent; border: 0;
  border-radius: 6px;
  text-align: left; cursor: pointer; color: var(--fg);
  font-size: 13px;
  transition: background 140ms ease, color 140ms ease;
}
.icon-picker-modal__cat:hover { background: var(--hover); }
.icon-picker-modal__cat.is-active {
  background: color-mix(in oklab, var(--accent) 12%, var(--surface));
  color: var(--accent);
  font-weight: 500;
}
.icon-picker-modal__count {
  font-size: 11px; color: var(--fg-muted); font-variant-numeric: tabular-nums;
  background: var(--surface);
  padding: 0.05rem 0.4rem; border-radius: 999px;
  border: 1px solid var(--border);
}
.icon-picker-modal__cat.is-active .icon-picker-modal__count {
  color: var(--accent);
  border-color: color-mix(in oklab, var(--accent) 35%, var(--border));
}
.icon-picker-modal__main { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.icon-picker-modal__grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 6px;
  overflow-y: auto;
  padding: 8px;
  background: var(--surface-2);
  border-radius: var(--radius-input);
  min-height: 0;
  align-content: start;
  content-visibility: auto;
}
.icon-picker-modal__item {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 4px;
  width: 100%;
  min-height: 80px;
  padding: 8px 4px 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer; color: var(--fg);
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.icon-picker-modal__item-svg {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
}
.icon-picker-modal__item-svg svg { width: 22px; height: 22px; }
.icon-picker-modal__item-label {
  font-size: 11.5px;
  line-height: 1.25;
  color: var(--fg-muted);
  text-align: center;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.icon-picker-modal__item:hover {
  background: var(--surface);
  border-color: var(--focus);
  transform: translateY(-1px);
}
.icon-picker-modal__item:hover .icon-picker-modal__item-label { color: var(--fg); }
.icon-picker-modal__item[hidden] { display: none; }


/* Dim categories that have zero matches under the current search */
.icon-picker-modal__cat[data-empty] {
  opacity: 0.4;
  pointer-events: auto; /* still clickable so user can switch to "All" or change search */
}
.icon-picker-modal__cat[data-empty] .icon-picker-modal__count {
  background: transparent;
}

/* =========================================================================
 * AI Documents
 * ========================================================================= */
.card__head-meta { font-size: 12px; color: var(--fg-muted); margin-right: auto; }
/* When both meta + actions exist in the head, keep them grouped right-aligned. */
.card__head .card__head-actions .card__head-meta { margin-right: 0; }

.aidocs-drop {
  display: block;
  position: relative;
  padding: 1.5rem;
  border: 2px dashed var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  text-align: center;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}
.aidocs-drop:hover,
.aidocs-drop:focus-visible { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 6%, var(--surface)); outline: none; }
.aidocs-drop.is-dragover {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 12%, var(--surface));
}
.aidocs-drop__file { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.aidocs-drop__hint { pointer-events: none; }
.aidocs-drop__hint strong { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.aidocs-drop__meta { display: block; font-size: 12px; color: var(--fg-muted); }

.aidocs-queue {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.aidocs-queue__item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "name status"
    "bar  bar";
  gap: 0.25rem 0.75rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  background: var(--surface);
  font-size: 13.5px;
}
.aidocs-queue__name   { grid-area: name; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aidocs-queue__status { grid-area: status; font-size: 12px; color: var(--fg-muted); white-space: nowrap; }
.aidocs-queue__bar {
  grid-area: bar;
  height: 4px;
  background: var(--surface-2);
  border-radius: 2px;
  overflow: hidden;
}
.aidocs-queue__fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 120ms ease;
}
.aidocs-queue__item.is-error { border-color: color-mix(in oklab, var(--danger, #c0392b) 60%, var(--border)); }
.aidocs-queue__item.is-error .aidocs-queue__status { color: var(--danger, #c0392b); }
.aidocs-queue__item.is-error .aidocs-queue__fill { background: var(--danger, #c0392b); }

/* Side-by-side layout: upload card on the left, library on the right. Collapses
 * to a single column on narrow viewports so the table doesn't get crushed. */
.aidocs-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 1023px) {
  .aidocs-grid { grid-template-columns: 1fr; }
}
/* Card-list layout: each document is a block with file info on top and the
 * action buttons in their own row beneath. */
.aidocs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.625rem;
}
.aidocs-list.is-empty { display: none; }
.aidocs-item {
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  background: var(--surface);
  display: grid;
  gap: 0.5rem;
}
.aidocs-item__meta { min-width: 0; }
.aidocs-item__name a {
  display: block;
  color: var(--fg);
  text-decoration: none;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aidocs-item__name a:hover { color: var(--accent); text-decoration: underline; }
.aidocs-item__sub {
  margin-top: 0.125rem;
  font-size: 12px;
  color: var(--fg-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.aidocs-item__sep { color: var(--fg-muted); opacity: 0.6; }
.aidocs-item__size { font-variant-numeric: tabular-nums; }
.aidocs-item__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.aidocs-item__actions .btn--sm { padding: 0.25rem 0.625rem; }

/* ============================================================
   Stage-3 Card Layout (cl-) — rendered block primitives.
   These are SHARED across all card types so adding a new card
   type doesn't need fresh CSS for known blocks.
   ============================================================ */

/* Section wrappers — invisible. In canvas mode the section is a logical
   group but contributes no layout box; blocks absolutely position
   relative to the surrounding card. */
.card-section { display: contents; }

/* Canvas-mode block wrapper (used inside the designer preview only —
   production rendering uses the original hard-coded card markup). */
.cl-block-w { pointer-events: none; }
.cl-block-w > * { width: 100%; height: 100%; }
.cl-block--socials a, .cl-block--socials button { pointer-events: auto; }

/* Medal badge / rank tag inside the designer canvas — fill their slot. */
.cl-block--medal,
.cl-block--ranktag {
  display: inline-flex; align-items: center; justify-content: center;
}
.cl-block--ranktag {
  font-size: 11px; font-weight: 700; color: var(--fg-muted);
  background: color-mix(in oklab, var(--fg) 5%, var(--surface));
  padding: 0.15rem 0.45rem; border-radius: 999px;
  border: 1px solid var(--border);
  width: auto; height: auto;
}
.cl-medal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  font-weight: 800; font-size: 13px; color: rgba(0,0,0,0.7);
  box-shadow: 0 2px 6px -1px rgba(0,0,0,0.3);
  border: 1.5px solid rgba(255,255,255,0.45);
}
.cl-medal--gold   { background: linear-gradient(135deg, #FFE066, #FFD700, #B8860B); }
.cl-medal--silver { background: linear-gradient(135deg, #ECECEC, #C0C0C0, #909090); }
.cl-medal--bronze { background: linear-gradient(135deg, #E8A878, #CD7F32, #8B4513); }

/* Image block. */
.cl-img {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface);
  border: 4px solid var(--surface);
  box-shadow: 0 6px 18px -8px rgba(0,0,0,0.3);
  overflow: hidden;
  font-weight: 700; color: var(--fg-muted);
}
.cl-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cl-img--circle { border-radius: 50%; }
.cl-img--square { border-radius: 12px; }
.cl-img--sm { width: 48px;  height: 48px;  font-size: 18px; }
.cl-img--md { width: 72px;  height: 72px;  font-size: 24px; }
.cl-img--lg { width: 96px;  height: 96px;  font-size: 32px; }
.cl-img--placeholder {
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--accent) 20%, var(--surface)),
    color-mix(in oklab, var(--accent) 6%,  var(--surface)));
}

/* Text block. */
.cl-block--text { line-height: 1.25; }
.cl-text--sm { font-size: 11px; letter-spacing: 0.06em; }
.cl-text--md { font-size: 15px; }
.cl-text--lg { font-size: 18px; }
.cl-text--w-bold { font-weight: 700; }
.cl-text--a-left   { text-align: left; }
.cl-text--a-center { text-align: center; }
.cl-text--a-right  { text-align: right; }
.cl-text--c-fg     { color: var(--fg); }
.cl-text--c-muted  { color: color-mix(in oklab, var(--fg-muted) 80%, var(--accent)); }
.cl-text--c-accent { color: var(--accent); }
.cl-text--upper    { text-transform: uppercase; }

/* Divider block. */
.cl-block--divider { border: 0; border-top: 1px solid var(--border); margin: 0.5rem 0; }

/* Field pill block. */
.cl-block--pill {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.15rem 0.6rem;
  background: color-mix(in oklab, var(--fg) 4%, var(--surface));
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px; color: var(--fg);
}
.cl-pill__icon { color: var(--fg-muted); }

/* Stat tile — two flavors, headline + mini. */
.cl-block--stat-headline {
  display: flex; flex-direction: column; align-items: center;
  padding: 0.6rem 0.75rem;
  border-radius: 12px;
  background: color-mix(in oklab, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 18%, var(--border));
}
.cl-block--stat-mini {
  display: flex; flex-direction: column; align-items: center;
  padding: 0.35rem 0.4rem;
  border-radius: 8px;
  background: color-mix(in oklab, var(--fg) 4%, transparent);
}
.cl-stat__value {
  font-size: 13px; font-weight: 600; color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.cl-stat__value--lg {
  font-size: 20px; font-weight: 700; letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--fg), color-mix(in oklab, var(--accent) 55%, var(--fg)));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cl-stat__label {
  margin-top: 0.15rem;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-muted); font-weight: 600;
}

/* Socials row block — delegates rendering, but reserves the row spot. */
.cl-block--socials { display: flex; justify-content: center; margin-top: 0.4rem; }

/* Container row block. */
.cl-block--row { display: grid; }
.cl-row--cols-2 { grid-template-columns: repeat(2, 1fr); }
.cl-row--cols-3 { grid-template-columns: repeat(3, 1fr); }
.cl-row--gap-sm { gap: 0.35rem; }
.cl-row--gap-md { gap: 0.6rem;  }
.cl-row--gap-lg { gap: 1rem;    }

/* Width-percent wrap (block-level widths from the builder). When a block
   uses width_pct < 100, the renderer wraps it in .cl-block-w; flex parents
   will give it the requested basis. */
.cl-block-w { flex: 0 0 auto; }

/* Empty-section / empty-container drop zones (editor mode). Just a
   subtle dotted outline — no copy text. */
.cl-edit-empty {
  min-height: 24px;
  border: 1px dashed color-mix(in oklab, var(--fg-muted) 20%, transparent);
  border-radius: 6px;
  opacity: 0.5;
}
.cl-edit-empty--in-row { min-height: 18px; }

/* ============================================================
   Stage-3 Card Designer chrome.
   Three-pane editor: palette (left) + preview (center) + props (right).
   ============================================================ */
.card-designer {
  display: flex; flex-direction: column;
  min-height: calc(100vh - 60px);
  gap: 0.75rem;
}
.card-designer__topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.card-designer__title-block { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.card-designer__title { margin: 0; font-size: 18px; font-weight: 600; color: var(--fg); }
.card-designer__status {
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-muted); font-weight: 600;
  padding: 0.15rem 0.5rem; border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--fg) 3%, var(--surface));
}
.card-designer__status[data-state="ok"]      { color: color-mix(in oklab, var(--accent) 60%, var(--fg)); border-color: color-mix(in oklab, var(--accent) 35%, var(--border)); }
.card-designer__status[data-state="dirty"]   { color: #b07000; border-color: #d6a76a; background: color-mix(in oklab, #f4a93d 12%, var(--surface)); }
.card-designer__status[data-state="saving"]  { color: var(--fg-muted); font-style: italic; }
.card-designer__status[data-state="err"]     { color: #c33; border-color: color-mix(in oklab, #c33 50%, var(--border)); }
.card-designer__status[data-state="warn"]    { color: #b07000; border-color: #d6a76a; }
.card-designer__actions { display: flex; gap: 0.4rem; }

.card-designer__body {
  display: grid;
  grid-template-columns: 240px 1fr 300px;
  gap: 0.75rem;
  flex: 1;
  min-height: 0;
}
.card-designer__palette,
.card-designer__preview-pane,
.card-designer__props {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 0.85rem 0.95rem 1rem;
  overflow: auto;
}
.card-designer__pane-title {
  margin: 0 0 0.4rem; font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-muted); font-weight: 700;
}
.card-designer__pane-hint {
  margin: 0 0 0.8rem; color: var(--fg-muted); font-size: 12px;
}

.card-designer__palette-list {
  display: flex; flex-direction: column; gap: 0.35rem;
}
.card-designer__palette-item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in oklab, var(--fg) 2%, var(--surface));
  cursor: pointer; font-size: 13px; color: var(--fg);
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.card-designer__palette-item:hover {
  border-color: color-mix(in oklab, var(--accent) 50%, var(--border));
  background: color-mix(in oklab, var(--accent) 5%, var(--surface));
}
.card-designer__palette-icon { color: var(--fg-muted); }
.card-designer__palette-label { flex: 1; }
.card-designer__palette-grip {
  color: var(--fg-muted); font-size: 12px; line-height: 1;
  letter-spacing: -0.18em;
  opacity: 0.4;
  user-select: none;
}
.card-designer__palette-item:hover .card-designer__palette-grip,
.card-designer__palette-item:focus-visible .card-designer__palette-grip { opacity: 1; }
.card-designer__palette-item { cursor: grab; }
.card-designer__palette-item.is-dragging { opacity: 0.5; cursor: grabbing; }
.card-designer__palette-item:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.card-designer__preview-frame {
  display: flex; justify-content: center;
  padding: 1.25rem;
  background: color-mix(in oklab, var(--fg) 3%, transparent);
  border-radius: 10px;
  min-height: 400px;
}
.card-designer__sample-card { max-width: 320px; width: 100%; }
.card-designer__preview-note {
  margin: 0.5rem 0 0; font-size: 11px; color: var(--fg-muted); text-align: center;
}

.card-designer__props-form {
  display: flex; flex-direction: column; gap: 0.6rem;
}
.card-designer__props-head {
  margin: 0; font-size: 14px; font-weight: 600; color: var(--fg);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}
.card-designer__prop {
  display: flex; flex-direction: column; gap: 0.25rem;
  font-size: 12px; color: var(--fg);
}
.card-designer__prop > span {
  font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--fg-muted); font-weight: 600;
}
.card-designer__prop input[type="text"],
.card-designer__prop input[type="number"],
.card-designer__prop select {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--fg);
  font-size: 13px;
}
.card-designer__prop input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }
.card-designer__prop-actions {
  display: flex; gap: 0.4rem; margin-top: 0.5rem;
}

/* Editor-mode visual states applied to .cl-edit-target nodes inside the preview. */
.card-designer__preview-frame .cl-edit-target {
  outline: 1px dashed transparent;
  outline-offset: 2px;
  transition: outline-color 0.12s ease, background 0.12s ease;
  cursor: pointer;
}
.card-designer__preview-frame .cl-edit-target:hover {
  outline-color: color-mix(in oklab, var(--accent) 50%, transparent);
}
.card-designer__preview-frame .cl-edit-target.is-selected {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  background: color-mix(in oklab, var(--accent) 6%, transparent);
}
.card-designer__preview-frame .cl-edit-target--container {
  min-height: 30px;
}

/* Sections that are disabled in the saved layout — show muted in editor. */
.card-designer__preview-frame .card-section--disabled {
  opacity: 0.45;
}

/* Move handle (top-left) — shown on hover or when selected. Grab the
   block here to drag-reorder it.
   Resize handle (right edge) — shown only when selected. Drag to set
   width %; snaps to 25/33/50/66/75/100. */
.cl-edit-target__handle {
  position: absolute;
  top: -10px; left: -10px;
  width: 20px; height: 20px;
  display: none;
  align-items: center; justify-content: center;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  font-size: 10px; line-height: 1;
  letter-spacing: -0.18em;
  cursor: grab;
  z-index: 4;
  box-shadow: 0 2px 6px -2px rgba(0,0,0,0.4);
}
/* 8 resize handles per selected block. Edges and corners; cursor hints
   match direction. Only shown when the block is selected. */
.cl-edit-target__resize {
  position: absolute;
  display: none;
  background: var(--accent);
  border-radius: 5px;
  z-index: 4;
  box-shadow: 0 2px 6px -2px rgba(0,0,0,0.4);
}
.cl-edit-target__resize--e  { right:  -5px; top:  50%; transform: translateY(-50%); width: 10px; height: 28px; cursor: ew-resize; }
.cl-edit-target__resize--w  { left:   -5px; top:  50%; transform: translateY(-50%); width: 10px; height: 28px; cursor: ew-resize; }
.cl-edit-target__resize--n  { top:    -5px; left: 50%; transform: translateX(-50%); width: 28px; height: 10px; cursor: ns-resize; }
.cl-edit-target__resize--s  { bottom: -5px; left: 50%; transform: translateX(-50%); width: 28px; height: 10px; cursor: ns-resize; }
.cl-edit-target__resize--ne { right:  -6px; top:   -6px; width: 12px; height: 12px; border-radius: 3px; cursor: nesw-resize; }
.cl-edit-target__resize--nw { left:   -6px; top:   -6px; width: 12px; height: 12px; border-radius: 3px; cursor: nwse-resize; }
.cl-edit-target__resize--se { right:  -6px; bottom: -6px; width: 12px; height: 12px; border-radius: 3px; cursor: nwse-resize; }
.cl-edit-target__resize--sw { left:   -6px; bottom: -6px; width: 12px; height: 12px; border-radius: 3px; cursor: nesw-resize; }
.card-designer__preview-frame .cl-edit-target { position: relative; }
.card-designer__preview-frame .cl-edit-target:hover > .cl-edit-target__handle,
.card-designer__preview-frame .cl-edit-target.is-selected > .cl-edit-target__handle {
  display: inline-flex;
}
.card-designer__preview-frame .cl-edit-target.is-selected > .cl-edit-target__resize { display: block; }
/* When NOT in the editor, suppress the editor-only chrome. */
:not(.card-designer__preview-frame) > .cl-edit-target__handle,
:not(.card-designer__preview-frame) > .cl-edit-target__resize { display: none; }
.cl-edit-target.is-dragging > .cl-edit-target__handle { cursor: grabbing; }
.cl-edit-target.is-resizing {
  outline: 2px solid color-mix(in oklab, var(--accent) 70%, var(--fg)) !important;
  outline-offset: 2px;
}
/* Canvas-mode blocks in editor: each block fills its absolute box, so the
   inner content stretches naturally. */
.card-designer__preview-frame .cl-edit-target--block > .cl-block { width: 100%; height: 100%; }
/* Sample card forces canvas mode regardless of .originator-card's
   flow-mode CSS — the designer is meant to feel like a canvas even
   though production uses the original hard-coded layout. */
.card-designer__sample-card.card-designer__sample-card {
  position: relative;
  aspect-ratio: 4 / 5;
  padding: 0;
  display: block;       /* override .originator-card's flex column */
  overflow: hidden;
}
.card-designer__sample-card .cl-edit-target { z-index: 2; }
/* Selected block body draggable for move. The handle (⋮⋮) doubles as
   the move handle, but the entire block body should also be grabbable. */
.card-designer__preview-frame .cl-edit-target--block { cursor: move; }
.card-designer__preview-frame .cl-edit-target--block.is-resizing { cursor: nwse-resize; }
.card-designer__preview-frame .cl-edit-target--block.is-moving   {
  outline: 2px solid color-mix(in oklab, var(--accent) 80%, var(--fg));
}
/* Live width-pct readout near the block during drag. */
.cl-edit-target__resize-readout {
  position: absolute;
  right: 14px; top: 50%; transform: translateY(-50%);
  background: var(--fg);
  color: var(--bg, #fff);
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
  font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  z-index: 5;
  pointer-events: none;
}

/* Drag-active state on the moving block. */
.card-designer__preview-frame .cl-edit-target.is-dragging {
  opacity: 0.4;
  outline: 2px dashed color-mix(in oklab, var(--accent) 60%, transparent);
}

/* Drop indicators — a colored line before/after a sibling, or a tinted
   container background when dropping INTO a section/container. */
.card-designer__preview-frame .cl-edit-target.is-drop-before {
  box-shadow: inset 0 3px 0 var(--accent);
}
.card-designer__preview-frame .cl-edit-target.is-drop-after {
  box-shadow: inset 0 -3px 0 var(--accent);
}
.card-designer__preview-frame .cl-edit-target.is-drop-into {
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  outline: 2px dashed var(--accent);
  outline-offset: 2px;
}

/* Site Settings → Card Layouts tab list. */
.card-layouts-list { list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0.5rem; }
.card-layouts-list__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.card-layouts-list__meta { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.card-layouts-list__label { font-size: 14px; font-weight: 600; color: var(--fg); }
.card-layouts-list__key {
  font-size: 11px; color: var(--fg-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ============================================================
   Payroll page (/payroll + /payroll/add + /payroll/edit/<id>).
   ============================================================ */
/* All cells left-aligned. Numeric class keeps tabular-nums so
   dollar amounts stay column-aligned. */
.payroll-table th,
.payroll-table td { text-align: left; vertical-align: middle; }
.payroll-table__num { font-variant-numeric: tabular-nums; }

/* Brief highlight when arriving at /funding_request via a
   funding_request_new notification — the JS sets is-flashing on the
   matching <tr> for a couple of seconds. */
@keyframes payroll-row-flash {
  0%   { background-color: color-mix(in oklab, var(--accent) 35%, transparent); }
  100% { background-color: transparent; }
}
.payroll-table tr.is-flashing,
.payroll-table tr.is-flashing > td {
  animation: payroll-row-flash 2.2s ease-out;
}
.payroll-form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
}
.payroll-form__section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.1rem 1.2rem;
  display: flex; flex-direction: column; gap: 0.7rem;
}
.payroll-form__section-title {
  margin: 0; font-size: 13px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--fg-muted); font-weight: 700;
  padding-bottom: 0.4rem; border-bottom: 1px solid var(--border);
}
.payroll-form__actions {
  grid-column: 1 / -1;
  display: flex; justify-content: flex-end; gap: 0.5rem;
  padding-top: 0.4rem;
}

/* Processor autocomplete. */
.payroll-form__autocomplete { position: relative; }
.payroll-form__autocomplete-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  list-style: none; margin: 0; padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  max-height: 280px; overflow: auto;
  box-shadow: 0 12px 32px -10px rgba(0,0,0,0.25);
  z-index: 20;
}
.payroll-form__autocomplete-menu li {
  padding: 0.45rem 0.7rem;
  font-size: 13px; color: var(--fg);
  cursor: pointer;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
}
.payroll-form__autocomplete-menu li:last-child { border-bottom: 0; }
.payroll-form__autocomplete-menu li:hover,
.payroll-form__autocomplete-menu li.is-active {
  background: color-mix(in oklab, var(--accent) 12%, transparent);
}
.payroll-form__autocomplete-menu li {
  display: flex; align-items: center; gap: 0.55rem;
}
.payroll-form__autocomplete-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface);
  border: 1px solid var(--border);
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 11px; color: var(--fg-muted);
}
.payroll-form__autocomplete-avatar--placeholder {
  background: color-mix(in oklab, var(--accent) 15%, var(--surface));
  color: var(--accent);
}
.payroll-form__autocomplete-name { min-width: 0; }

/* Legal acknowledgement section on the payroll form. */
.payroll-form__section--legal {
  border-color: color-mix(in oklab, var(--accent) 30%, var(--border));
  background: color-mix(in oklab, var(--accent) 4%, var(--surface));
}
.payroll-form__legal-text {
  white-space: pre-wrap;
  font-size: 13px; line-height: 1.55; color: var(--fg);
  padding: 0.7rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  max-height: 260px; overflow: auto;
}
.payroll-form__legal-check {
  display: flex; align-items: flex-start; gap: 0.55rem;
  margin-top: 0.7rem;
  font-size: 14px; color: var(--fg);
  cursor: pointer;
}
.payroll-form__legal-check input[type="checkbox"] {
  margin-top: 0.18rem;
  width: 18px; height: 18px;
  accent-color: var(--accent);
}

/* "New Request" HUD on /payroll. Standard backdrop-overlay dialog with
   a wider panel because the form has three side-by-side sections. */
.payroll-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
}
.payroll-modal[hidden] { display: none; }
.payroll-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
}
.payroll-modal__panel {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  /* Widened from 1100 → 1400 to fit four columns of form fields cleanly. */
  width: min(96vw, 1400px);
  max-height: calc(100vh - 2.5rem);
  display: flex; flex-direction: column;
  box-shadow: 0 24px 64px -16px rgba(0,0,0,0.45);
  overflow: hidden;
}
/* Force a four-column layout INSIDE the HUD specifically — the standalone
   /payroll/edit page keeps its auto-fit responsive behavior. The
   Acknowledgement section's inline `grid-column: 1 / -1` still makes it
   span every column. Collapses gracefully on narrower viewports. */
.payroll-modal__form.payroll-form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1200px) {
  .payroll-modal__form.payroll-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .payroll-modal__form.payroll-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .payroll-modal__form.payroll-form { grid-template-columns: 1fr; }
}
.payroll-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--fg) 3%, var(--surface));
}
.payroll-modal__title { margin: 0; font-size: 16px; font-weight: 600; color: var(--fg); }
.payroll-modal__close {
  background: transparent; border: 0; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--fg-muted);
  padding: 0.1rem 0.4rem;
}
.payroll-modal__close:hover { color: var(--fg); }
.payroll-modal__form {
  padding: 1rem 1.1rem;
  overflow: auto;        /* scrolls when the form is taller than viewport */
  flex: 1 1 auto;
}
.payroll-modal__actions {
  position: sticky; bottom: 0;
  background: linear-gradient(180deg, transparent, var(--surface) 40%);
  padding-top: 0.6rem;
  margin-top: 0;
}
body.payroll-modal-open { overflow: hidden; }

/* ============================================================
   Lenders list + form (/lenders + /lenders/add + /lenders/edit/<id>).
   ============================================================ */
/* Left-align text in cells but keep vertical-center so text rows sit
   in the middle next to the 208px-tall logo. The logo column itself
   stays centered (overridden below). Padding wiped to 0 top/bottom so
   the row only takes as much height as the logo demands. Specificity
   beats .audit-table tbody td (0,1,2). */
.lenders-table thead th,
.lenders-table tbody td {
  text-align: left;
  vertical-align: middle;
  padding-top: 0;
  padding-bottom: 0;
}
.lenders-table__num { text-align: left; font-variant-numeric: tabular-nums; }
/* Logo cell keeps its centered presentation. */
.lenders-table thead th.lenders-table__logo-col,
.lenders-table tbody td.lenders-table__logo-col { text-align: center; }
.lenders-table__logo-col { width: 240px; }
.lenders-table__logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 208px; height: 208px;
  /* No box: no border, no background, no padding — the logo floats
     against the row. Full image visible (no crop). */
  object-fit: contain;
  font-size: 64px; font-weight: 700; color: var(--fg-muted);
}
.lenders-table__logo--placeholder {
  /* Initial letter for lenders without a logo. Still no box. */
  color: var(--accent);
}
.lenders-table__reps {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.15rem;
  font-size: 12px;
  line-height: 1.3;
  text-align: left;
}
.lenders-table__rep-name { display: inline; font-weight: 600; color: var(--fg); }
.lenders-table__rep-phone {
  display: inline; margin-left: 0.4rem;
  color: var(--fg-muted); font-variant-numeric: tabular-nums;
}
.lenders-table__reps-more {
  font-size: 11px; font-style: italic; color: var(--fg-muted);
  margin-top: 0.15rem;
}

/* Reviews cell: stars + "x out of 5" + review count, stacked. */
.lenders-table__reviews {
  display: flex; flex-direction: column; gap: 0.15rem;
  font-size: 12px;
  line-height: 1.3;
}
.lenders-table__reviews--empty .stars__value { display: none; }
.lenders-table__reviews-out   { color: var(--fg); font-weight: 600; }
.lenders-table__reviews-count { color: var(--fg-muted); }
/* The N-reviews count is a link only when there's ≥1 review. */
.lenders-table__reviews-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.lenders-table__reviews-link:hover { text-decoration: underline; }
.lenders-table__review-btn { margin-top: 0.4rem; }

/* Review HUD body container. Holds the optional "Other reviews" list
   above and the "Your review" form below. */
.lender-review-modal {
  display: flex; flex-direction: column;
  gap: 1rem;
  padding: 1rem 1.1rem 1.2rem;
}
.lender-review-modal__heading {
  margin: 0; font-size: 13px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--fg-muted); font-weight: 700;
}
.lender-review-modal__others {
  display: flex; flex-direction: column; gap: 0.6rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--border);
}
.lender-review-modal__own {
  display: flex; flex-direction: column; gap: 0.5rem;
}
/* Move the form's existing internal padding out (the wrapper handles it). */
.lender-review-modal .lender-review-form { padding: 0; }

/* Read-only list of other people's reviews. */
.lender-review-list { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.7rem;
  max-height: 320px; overflow-y: auto;
}
.lender-review-list__item {
  display: grid; grid-template-columns: 36px 1fr; gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
}
.lender-review-list__item:last-child { border-bottom: 0; }
.lender-review-list__avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--accent) 15%, var(--surface));
  color: var(--accent);
  font-weight: 700; font-size: 14px;
}
.lender-review-list__body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.lender-review-list__header {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  font-size: 13px;
}
.lender-review-list__name { font-weight: 600; color: var(--fg); }
.lender-review-list__when {
  font-size: 11px; color: var(--fg-muted);
  margin-left: auto;
}
.lender-review-list__comment {
  margin: 0;
  font-size: 13px; line-height: 1.45; color: var(--fg);
  white-space: pre-wrap;
}

/* When the processor card's rating badge is itself the modal trigger:
   anchor + button variants both need link-button reset + z-index over
   the .person-card__link overlay so they stay clickable. */
.person-card__rating--link,
.person-card__rating--empty {
  position: absolute; top: 0.5rem; right: 0.5rem;
  z-index: 3;
  cursor: pointer;
  border: 0;
  text-decoration: none;
  font: inherit;
}
.person-card__rating--empty {
  background: color-mix(in oklab, var(--accent) 12%, var(--surface));
  color: var(--accent);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 0.25rem;
}
.person-card__rating-count {
  margin-left: 0.25rem;
  font-size: 10px; color: var(--fg-muted); font-weight: 500;
}

/* Narrow variant of the lender modal — used by the review form so the
   simple "stars + comment" UI doesn't expand to 1100px. */
.lender-modal__panel--narrow { width: min(96vw, 520px); }

/* Review form — clickable 1-5 star input row + comment textarea. The
   stars use radio inputs; CSS flips the gold fill based on :checked /
   :hover via the reversed flex-direction trick (later siblings light
   up earlier ones). */
.lender-review-form {
  padding: 1rem 1.1rem 1.2rem;
  display: flex; flex-direction: column; gap: 0.9rem;
}
.lender-review-form__intro { margin: 0; color: var(--fg); font-size: 14px; }
.lender-review-form__stars {
  display: inline-flex; flex-direction: row-reverse;
  justify-content: flex-end;
  align-self: flex-start;
  gap: 0.15rem;
  font-size: 34px; line-height: 1;
}
.lender-review-form__star { cursor: pointer; }
.lender-review-form__star input { position: absolute; opacity: 0; pointer-events: none; }
.lender-review-form__star span {
  color: color-mix(in oklab, var(--fg-muted) 50%, var(--border));
  transition: color 0.1s ease, transform 0.08s ease;
}
/* row-reverse layout: stars are in source order 1..5 but rendered 5..1,
   so the "stars before" a checked/hovered star (visually to its left)
   are its LATER siblings in the DOM. The sibling combinator only
   crosses elements at the same DOM level, so we need :has() to reach
   from "the label containing the checked input" to its siblings. */
.lender-review-form__star input:checked ~ span,
.lender-review-form__star:has(input:checked) ~ .lender-review-form__star span,
.lender-review-form__star:hover span,
.lender-review-form__star:hover ~ .lender-review-form__star span {
  color: #F5B400;
  transform: scale(1.05);
}
.lender-review-form textarea {
  width: 100%; resize: vertical; min-height: 80px;
  font-family: inherit; font-size: 13px; line-height: 1.45;
}

.lender-form__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
}
.lender-form__section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.1rem 1.2rem;
  display: flex; flex-direction: column; gap: 0.7rem;
}
.lender-form__section--reps { grid-column: 1 / -1; }
.lender-form__section-title {
  margin: 0; font-size: 13px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--fg-muted); font-weight: 700;
  padding-bottom: 0.4rem; border-bottom: 1px solid var(--border);
}
.lender-form__actions {
  display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.6rem;
}

/* Loan types checkbox grid. */
.lender-form__loantypes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.4rem;
}
.lender-form__loantype {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border); border-radius: 8px;
  background: color-mix(in oklab, var(--fg) 3%, var(--surface));
  font-size: 13px; cursor: pointer;
}
.lender-form__loantype input[type="checkbox"] { accent-color: var(--accent); }
.lender-form__loantype:has(input:checked) {
  background: color-mix(in oklab, var(--accent) 12%, var(--surface));
  border-color: color-mix(in oklab, var(--accent) 35%, var(--border));
}

/* Logo drag-drop zone. Whole preview area is a click+drop target. */
.lender-form__logo { display: flex; flex-direction: column; gap: 0.6rem; }
.lender-form__logo-preview {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 140px;
  border: 2px dashed color-mix(in oklab, var(--fg-muted) 30%, var(--border));
  border-radius: 10px;
  background: color-mix(in oklab, var(--fg-muted) 3%, transparent);
  overflow: hidden;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.lender-form__logo-preview:hover {
  border-color: color-mix(in oklab, var(--accent) 50%, var(--border));
  background: color-mix(in oklab, var(--accent) 6%, transparent);
}
.lender-form__logo-preview.is-dragover {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 14%, transparent);
}
.lender-form__logo-preview img {
  max-width: 90%; max-height: 90%; object-fit: contain;
}
.lender-form__logo-placeholder {
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  color: var(--fg-muted); font-size: 13px;
}
.lender-form__logo-placeholder strong {
  font-size: 14px; font-weight: 600; color: var(--fg);
}
.lender-form__logo-overlay {
  position: absolute; inset: 0;
  display: none; align-items: center; justify-content: center;
  background: color-mix(in oklab, var(--accent) 18%, transparent);
  color: var(--fg);
  font-size: 14px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  pointer-events: none;
}
.lender-form__logo-preview.is-dragover .lender-form__logo-overlay { display: flex; }
.lender-form__logo-actions { display: flex; gap: 0.4rem; }

/* Star rating display (read-only). A 5-star grey track with a gold
   overlay clipped to (rating / 5) × 100%. Track + fill live in a
   .stars__bar wrapper so the fill's width % is relative to JUST the
   track width — not the whole .stars container, which would also
   include the numeric value to its right. */
.stars {
  display: inline-flex; align-items: center; gap: 0.5rem;
  line-height: 1;
}
.stars__bar {
  position: relative;
  display: inline-block;
  line-height: 1;
}
.stars__track,
.stars__fill {
  display: block;
  font-size: 16px; letter-spacing: 1px;
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
  white-space: nowrap;
}
.stars__track { color: color-mix(in oklab, var(--fg-muted) 50%, var(--border)); }
.stars__fill {
  position: absolute; top: 0; left: 0;
  color: #F5B400;
  overflow: hidden;
}
.stars__value {
  font-size: 12px; font-weight: 600; color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

/* Reps repeatable rows. */
.lender-reps {
  display: flex; flex-direction: column; gap: 0.5rem;
}
.lender-reps__row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 0.7fr auto;
  gap: 0.5rem;
  align-items: end;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in oklab, var(--fg) 2%, var(--surface));
}
@media (max-width: 720px) {
  .lender-reps__row { grid-template-columns: 1fr 1fr; }
}
.lender-reps__remove {
  background: transparent; border: 0;
  font-size: 22px; line-height: 1;
  color: var(--fg-muted); cursor: pointer;
  padding: 0.1rem 0.4rem;
}
.lender-reps__remove:hover { color: #c33; }

/* "New lender" HUD on /lenders. Same look as the payroll modal. */
.lender-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
}
.lender-modal[hidden] { display: none; }
.lender-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
}
.lender-modal__panel {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: min(96vw, 1100px);
  max-height: calc(100vh - 2.5rem);
  display: flex; flex-direction: column;
  box-shadow: 0 24px 64px -16px rgba(0,0,0,0.45);
  overflow: hidden;
}
.lender-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--fg) 3%, var(--surface));
}
.lender-modal__title { margin: 0; font-size: 16px; font-weight: 600; color: var(--fg); }
.lender-modal__close {
  background: transparent; border: 0; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--fg-muted);
  padding: 0.1rem 0.4rem;
}
.lender-modal__close:hover { color: var(--fg); }
.lender-modal__form,
.lender-modal__body {
  padding: 1rem 1.1rem;
  overflow: auto;
  flex: 1 1 auto;
}
.lender-modal__body { padding: 0; }
.lender-modal__body .lender-modal__form { padding: 1rem 1.1rem; }
.lender-modal__loading {
  padding: 2.5rem 1rem;
  text-align: center;
}
.lender-modal__actions {
  position: sticky; bottom: 0;
  background: linear-gradient(180deg, transparent, var(--surface) 40%);
  padding-top: 0.6rem;
}
body.lender-modal-open { overflow: hidden; }

/* Disclaimer editor (Site Settings → Payroll, top section). */
.payroll-legal-form textarea {
  width: 100%; resize: vertical;
  font-family: inherit; font-size: 13px; line-height: 1.5;
  min-height: 120px;
}
.payroll-legal-form__actions {
  display: flex; justify-content: flex-end; margin-top: 0.5rem;
}