/* ============================================================
 * 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; }

/* Post-payment result card — shown after stripe.confirmPayment resolves,
   in place of sliding the user back to the Add Funds form. */
.wallet-modal__result { padding: 2rem 1.5rem; text-align: center; }
.wallet-modal__result-icon {
  width: 64px; height: 64px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 700; line-height: 1;
  margin: 0 auto 1rem;
}
.wallet-modal__result--ok  .wallet-modal__result-icon {
  background: color-mix(in oklab, #2a8a3e 18%, var(--surface));
  color: #2a8a3e;
}
.wallet-modal__result--err .wallet-modal__result-icon {
  background: color-mix(in oklab, #b94a48 18%, var(--surface));
  color: #b94a48;
}
.wallet-modal__result-title { margin: 0 0 0.5rem; font-size: 18px; font-weight: 600; color: var(--fg); }
.wallet-modal__result-msg   { color: var(--fg-muted); margin: 0 0 1.25rem; line-height: 1.5; font-size: 14px; }
.wallet-modal__result-actions { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
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 .field__hint { color: var(--fg-muted); font-size: 12px; }
.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%;
  /* Height is pinned by JS to the active stage so the Stripe Payment Element
     loading in the hidden card stage can't reflow the visible amount stage. */
  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.wallet-stages__track {
  display: flex;
  /* flex-start (not the default stretch) so each stage keeps its own natural
     height — otherwise both stages inherit the taller one's height and the
     hidden Stripe stage's async growth drags the amount stage up and down. */
  align-items: flex-start;
  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 */
  position: relative;   /* so the .is-drop-target overlay can absolutely position itself */
}
.chat-thread[hidden] { display: none; }

/* Lead detail page — sectioned cards with label/value rows. */
.lead-detail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1rem;
  margin-top: 0.5rem;
}
.lead-detail__section .card__title { margin: 0 0 0.6rem; }
.lead-detail__row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 0.6rem;
  padding: 0.35rem 0;
  border-bottom: 1px dashed var(--border);
  font-size: 14px;
}
.lead-detail__row:last-child { border-bottom: 0; }
.lead-detail__label { color: var(--fg-muted); }
.lead-detail__value { color: var(--fg); word-break: break-word; }
.lead-detail__notes { font-size: 14px; color: var(--fg); margin: 0; line-height: 1.5; }

/* Drag-and-drop overlay: appears while the user is dragging a file
   over the open chat window. Drop sends immediately (see main.js). */
.chat-thread.is-drop-target { outline: 2px dashed var(--accent); outline-offset: -4px; }
.chat-thread.is-drop-target::after {
  content: 'Drop to send';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklab, var(--accent) 18%, rgba(0,0,0,0.55));
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
  z-index: 100;
}

/* 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-file { display: inline-flex; align-items: center; gap: 0.4rem; }

/* === 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;
  /* minmax(0,1fr) stops wide content (a long JSON line) from forcing a column
     wider; align-items:start lets each card size to its own content so the
     audit trail grows/shrinks in height when toggled without stretching its
     row-mate or changing width. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  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;
  /* Wrap long lines so the JSON grows downward (height), never sideways
     (width) — keeps the card's column width stable when expanded. */
  white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere;
}

.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); display: inline-flex; align-items: center; }
.employee-hero__contact-glyph svg { display: block; }

/* 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;
  /* Keep the tab strip in view while a long panel (e.g. QC Results) scrolls: pin it
   * just under the fixed topbar. The opaque background hides content scrolling beneath,
   * and a touch of top padding closes the seam against the topbar. */
  position: sticky;
  top: var(--topbar-h, 4.25rem);
  z-index: 10;
  background: var(--bg);
  padding-top: 0.5rem;
}
.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);
}
/* Error state — applied by setFieldError() when the server returns
   errors.legal_acknowledged. Visible red glow + tinted background so
   the user has something to look at besides the toast. */
.payroll-form__legal-check.is-error {
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  background: color-mix(in oklab, var(--danger) 8%, transparent);
  outline: 2px solid color-mix(in oklab, var(--danger) 55%, var(--border));
  outline-offset: 2px;
}
.payroll-form__legal-check.is-error input[type="checkbox"] {
  accent-color: var(--danger);
}
.payroll-form__legal-check .settings__error {
  flex-basis: 100%;
  margin: 0.2rem 0 0;
}

/* "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;
}




/* --- User-collapsible sidebar (desktop; remembers choice) --- */
.sidebar__collapse { display: none; }
@media (min-width: 768px) {
  body.layout { transition: grid-template-columns .18s ease; }
  .sidebar { transition: width .18s ease, padding .18s ease; }
  .topbar { transition: left .18s ease; }
  /* A small tab hanging off the sidebar's bottom-right edge, connected to it:
     flush (no border) on the sidebar side, rounded on the outer side. Fixed + at
     body level so it clears the sidebar's stacking context and stays clickable. */
  .sidebar__collapse {
    display: flex; align-items: center; justify-content: center;
    position: fixed; left: 240px; bottom: 1.5rem;
    width: 24px; height: 46px; padding: 0; margin-left: -1px;
    background: var(--surface);
    border: 1px solid var(--border); border-left: 0;
    border-radius: 0 var(--radius-input) var(--radius-input) 0;
    color: var(--fg-muted); cursor: pointer; z-index: 40;
    box-shadow: 2px 0 6px -3px rgba(0,0,0,.18);
    transition: left .18s ease, background 140ms ease, color 140ms ease;
  }
  .sidebar__collapse:hover { background: var(--hover); color: var(--fg); }
  .sidebar__collapse-icon { width: 16px; height: 16px; opacity: 0.9; transition: transform .18s ease; }
  body.layout--sidebar-collapsed { grid-template-columns: 64px 1fr; }
  body.layout--sidebar-collapsed .topbar { left: 64px; }
  body.layout--sidebar-collapsed .sidebar { width: 64px; padding-left: .4rem; padding-right: .4rem; }
  body.layout--sidebar-collapsed .sidebar__brand-name,
  body.layout--sidebar-collapsed .sidebar__section,
  body.layout--sidebar-collapsed .sidebar__link > span:not(.sidebar__icon) { display: none; }
  body.layout--sidebar-collapsed .sidebar__link { justify-content: center; padding-left: 0; padding-right: 0; }
  body.layout--sidebar-collapsed .sidebar__brand { justify-content: center; padding-left: 0; padding-right: 0; }
  body.layout--sidebar-collapsed .sidebar__collapse { left: 64px; }
  body.layout--sidebar-collapsed .sidebar__collapse-icon { transform: rotate(180deg); }
}
/* >>> FEATURES CSS >>> */
/* Auth: forgot/reset links + rows */
.auth__link { color: var(--link); font-size: 13px; text-decoration: none; }
.auth__link:hover { text-decoration: underline; }
.auth__row { display: flex; margin: -0.25rem 0 0.35rem; }
.auth__row--end { justify-content: flex-end; }

/* Two-factor authentication */
.twofa { display: grid; gap: 1rem; }
.twofa__lead { color: var(--fg); margin: 0; line-height: 1.5; }
.twofa__steps { margin: 0; padding-left: 1.1rem; color: var(--fg-muted); line-height: 1.7; }
.twofa__steps em { color: var(--fg); font-style: normal; font-weight: 600; }
.twofa__qr { width: 190px; height: 190px; padding: 10px; margin: 0 auto; background: #fff; border: 1px solid var(--border); border-radius: 10px; }
.twofa__qr svg { display: block; width: 100%; height: 100%; }
.twofa__key { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-input, 8px); padding: 0.75rem 1rem; text-align: center; }
.twofa__key code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 18px; letter-spacing: 0.12em; color: var(--fg); }
.twofa__adv { font-size: 13px; color: var(--fg-muted); }
.twofa__adv summary { cursor: pointer; }
.twofa__uri { display: block; margin-top: 0.5rem; word-break: break-all; font-size: 12px; color: var(--fg-muted); }
.twofa__codes { list-style: none; margin: 0; padding: 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 1.5rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-input, 8px); }
.twofa__codes li { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; letter-spacing: 0.06em; color: var(--fg); }
.twofa__inline { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.twofa__inline .field__input { max-width: 160px; }
.twofa__badge { display: inline-flex; align-items: center; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 12px; font-weight: 600; background: color-mix(in oklab, #16a34a 15%, transparent); color: #16a34a; }
.twofa__badge--off { background: var(--surface-2); color: var(--fg-muted); }

/* Command palette (Cmd/Ctrl-K) */
.cmdk { position: fixed; inset: 0; z-index: 1000; display: none; }
.cmdk.is-open { display: block; }
.cmdk__backdrop { position: absolute; inset: 0; background: rgba(6,8,12,.5); backdrop-filter: blur(2px); }
.cmdk__panel { position: relative; max-width: 560px; margin: 10vh auto 0; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 24px 60px -12px rgba(0,0,0,.45); overflow: hidden; }
.cmdk__input { width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--fg); font-size: 16px; padding: 1rem 1.15rem; outline: none; }
.cmdk__input::placeholder { color: var(--fg-muted); }
.cmdk__list { list-style: none; margin: 0; padding: 0.35rem; max-height: 52vh; overflow-y: auto; }
.cmdk__item { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.6rem 0.75rem; border-radius: 9px; cursor: pointer; }
.cmdk__item.is-active { background: var(--hover); }
.cmdk__label { color: var(--fg); font-size: 14px; font-weight: 500; }
.cmdk__sub { color: var(--fg-muted); font-size: 12px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk__badge { margin-left: auto; color: var(--fg-muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; border: 1px solid var(--border); border-radius: 999px; padding: 0.1rem 0.45rem; }
.cmdk__empty { padding: 1rem 0.75rem; color: var(--fg-muted); font-size: 14px; text-align: center; }
.cmdk__hint { display: flex; gap: 1rem; padding: 0.55rem 1.15rem; border-top: 1px solid var(--border); color: var(--fg-muted); font-size: 11px; }
body.cmdk-open { overflow: hidden; }
/* Custom user data points (Site Settings > User) */
.profile-perms__type-badge { display:inline-block; margin-left:.4rem; padding:.05rem .4rem; border:1px solid var(--border); border-radius:999px; font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--fg-muted); vertical-align:middle; }
.profile-perms__del-form { display:inline; }
.profile-perms__del { border:0; background:transparent; color:var(--fg-muted); cursor:pointer; font-size:16px; line-height:1; padding:0 .25rem; }
.profile-perms__del:hover { color:var(--del-text, #c0392b); }
.profile-perms__inline { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.profile-perms__inline .field__input { max-width:320px; }
/* Per-record activity timeline (user edit page) */
.activity-timeline { list-style:none; margin:0; padding:0; display:grid; gap:.1rem; }
.activity-timeline__item { display:flex; align-items:baseline; gap:.6rem; padding:.5rem .25rem; border-bottom:1px solid var(--border); }
.activity-timeline__item:last-child { border-bottom:0; }
.activity-timeline__reason { flex:1; color:var(--fg); font-size:14px; }
.activity-timeline__time { color:var(--fg-muted); font-size:12px; white-space:nowrap; }
/* CSV import results (users/import) */
.import-summary { display:flex; flex-wrap:wrap; gap:.6rem; margin:.25rem 0 1rem; }
.import-stat { display:inline-flex; align-items:baseline; gap:.3rem; padding:.3rem .7rem; border:1px solid var(--border); border-radius:999px; font-size:13px; color:var(--fg-muted); }
.import-stat strong { color:var(--fg); font-size:15px; }
.import-stat--ok strong { color:#2e9e5b; }
.import-stat--skip strong { color:#c79a1e; }
.import-stat--err strong { color:var(--del-text,#c0392b); }
.import-h3 { margin:1.1rem 0 .4rem; font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--fg-muted); }
.import-list { margin:0; padding-left:1.1rem; display:grid; gap:.2rem; font-size:14px; }
.import-list--err li { color:var(--del-text,#c0392b); }
.import-note { color:var(--fg-muted); font-size:13px; }
.import-cols { list-style:none; margin:.3rem 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.25rem; }
.import-cols code { background:var(--hover); padding:.05rem .35rem; border-radius:5px; }
.import-req { color:var(--del-text,#c0392b); font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
.import-hint { color:var(--fg-muted); font-size:12px; }
.import-help { margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--border); }
/* Tags, bulk actions, saved views (users list) ------------------------------ */
/* Compact input, matched to .field__input's surface/border/focus language. */
.field__input--sm { width:auto; padding:.42rem .6rem; font-size:13px; }

/* Soft, theme-adaptive tag pills: a colour dot + tinted body (works on any
   tag colour, in light and dark). */
.tag-chips { display:inline-flex; flex-wrap:wrap; gap:.3rem; margin-left:.5rem; vertical-align:middle; }
.tag-chip {
  display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap;
  padding:.12rem .55rem .12rem .5rem; border-radius:999px;
  font-size:11.5px; font-weight:500; line-height:1.65;
  color: color-mix(in srgb, var(--tag-color, #64748b) 72%, var(--fg));
  background: color-mix(in srgb, var(--tag-color, #64748b) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--tag-color, #64748b) 26%, transparent);
}
.tag-chip::before {
  content:""; width:6px; height:6px; border-radius:50%;
  background: var(--tag-color, #64748b);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tag-color, #64748b) 20%, transparent);
}

.users-table__check { width:2.4rem; text-align:center; }
.users-table__check input[type=checkbox] { width:15px; height:15px; cursor:pointer; vertical-align:middle; accent-color: var(--accent); }

/* Bulk action bar — an accent-tinted panel that eases in when rows are picked. */
.bulk-bar {
  display:none; align-items:center; gap:.6rem; flex-wrap:wrap; margin:0 0 1rem;
  padding:.6rem .85rem;
  border:1px solid color-mix(in srgb, var(--accent) 32%, var(--border));
  border-radius: var(--radius-btn);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  box-shadow: 0 10px 26px -18px var(--accent-glow);
}
.bulk-bar.is-active { display:flex; animation: bulkBarIn 170ms ease; }
@keyframes bulkBarIn { from { opacity:0; transform: translateY(-5px); } to { opacity:1; transform:none; } }
.bulk-bar__count { font-size:12.5px; color:var(--fg-muted); }
.bulk-bar__count strong { color:var(--accent); font-weight:600; font-variant-numeric: tabular-nums; }
.bulk-bar__tagfields { display:inline-flex; gap:.5rem; align-items:center; }
.bulk-bar .btn--primary { margin-left:auto; }

/* Saved-views toolbar. */
.views-bar { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; margin:.1rem 0 1.25rem; }
.views-bar__label {
  font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--fg-muted); margin-right:.15rem;
}
.views-chip {
  display:inline-flex; align-items:center; border:1px solid var(--border); border-radius:999px;
  background: var(--surface-2);
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.views-chip:hover { border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); box-shadow: 0 6px 16px -12px var(--accent-glow); }
.views-chip__link {
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.32rem .35rem .32rem .7rem; font-size:12.5px; font-weight:500;
  color:var(--fg); text-decoration:none;
}
.views-chip__link::before {
  content:""; width:5px; height:5px; border-radius:50%;
  background: color-mix(in srgb, var(--accent) 55%, var(--fg-muted));
}
.views-chip--active { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); }
.views-chip--active .views-chip__link { color: var(--accent); }
.views-chip--active .views-chip__link::before { background: var(--accent); }
.views-chip__del-form { display:inline-flex; margin:0; }
.views-chip__del {
  display:inline-flex; align-items:center; justify-content:center;
  width:1.35rem; height:1.55rem; margin-right:.15rem;
  border:0; background:transparent; color:var(--fg-muted); cursor:pointer;
  font-size:15px; line-height:1; border-radius:999px;
  transition: color 140ms ease, background 140ms ease;
}
.views-chip__del:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }

/* Save-current-view control — input + button fused into one pill. */
.views-bar__save { display:inline-flex; align-items:stretch; margin-left:auto; }
.views-bar__save .field__input--sm {
  width:12rem; border-top-right-radius:0; border-bottom-right-radius:0; position:relative; z-index:1;
}
.views-bar__save .btn {
  border-top-left-radius:0; border-bottom-left-radius:0; margin-left:-1px; white-space:nowrap;
}
.views-bar__save .field__input--sm:focus { z-index:2; }
/* Encrypted document attachments (user edit) */
.card__hint { margin-left:auto; font-size:11px; color:var(--fg-muted); text-transform:uppercase; letter-spacing:.05em;
  border:1px solid var(--border); border-radius:999px; padding:.1rem .5rem; }
.docs-table { width:100%; }
.docs-table .table__actions { text-align:right; width:2.5rem; }
.docs-upload { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-top:.5rem;
  padding-top:.75rem; border-top:1px solid var(--border); }
.docs-upload__hint { font-size:12px; color:var(--fg-muted); }
/* Job-title multi-select — accent-tinted toggle pills (checkbox behind each). */
.jobtitle-picker { display:flex; flex-wrap:wrap; gap:.4rem; }
.jobtitle-option {
  display:inline-flex; align-items:center; gap:.45rem; cursor:pointer; user-select:none;
  padding:.35rem .7rem; border:1px solid var(--border); border-radius:999px;
  background:var(--surface-2); font-size:13px; color:var(--fg);
  transition:border-color .14s ease, background .14s ease, color .14s ease, box-shadow .14s ease;
}
.jobtitle-option:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.jobtitle-option input { width:14px; height:14px; margin:0; cursor:pointer; accent-color: var(--accent); }
.jobtitle-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
  color: var(--accent); font-weight:500;
}
.jobtitle-option:focus-within { box-shadow: 0 0 0 3px var(--focus-glow); border-color: var(--focus); }
/* Custom profile sections on the user form — 2 per row (matches .user-form-widgets),
   collapsing to a single column on narrow screens. */
.user-form-customs { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; align-items:start; }
@media (max-width: 720px) { .user-form-customs { grid-template-columns:1fr; } }

/* --- AMC orders back office (Phase 1) --- */
.oqueue-tabs { display:flex; flex-wrap:wrap; gap:0.35rem; margin:0 0 1rem; }
.oqueue-tab { padding:0.35rem 0.75rem; border-radius:999px; font-size:0.85rem;
  color:var(--text-muted); background:var(--surface-2, rgba(127,127,127,0.08)); text-decoration:none; }
.oqueue-tab:hover { color:var(--text); }
.oqueue-tab--active { background:var(--accent); color:#fff; }
.ostate { display:inline-block; padding:0.1rem 0.5rem; border-radius:999px; font-size:0.75rem;
  font-weight:600; background:rgba(127,127,127,0.15); color:var(--text); vertical-align:middle; }
/* State badges (those with an ostate--<state> modifier) get centered text and a uniform
   width so the column reads as a neat stack. Scoped by the modifier so the small rush/flag
   indicator badges on the board — .ostate without a modifier — are untouched. */
.ostate[class*="ostate--"] { text-align:center; min-width:6.5em; white-space:nowrap; }
/* MISMO / UAD version badge on the orders list */
.mismo { display:inline-block; padding:0.1rem 0.5rem; border-radius:999px; font-size:0.75rem;
  font-weight:600; text-align:center; min-width:3.5em; }
.mismo--26   { background:rgba(59,130,246,0.18); color:#2563eb; }
.mismo--36   { background:rgba(139,92,246,0.18); color:#7c3aed; }
.mismo--both { background:rgba(234,179,8,0.20);  color:#b45309; }
.mismo--none { background:rgba(127,127,127,0.14); color:var(--fg-muted, var(--text-muted)); }
.ostate--new { background:rgba(59,130,246,0.18); color:#2563eb; }
.ostate--assigning, .ostate--accepted, .ostate--scheduled, .ostate--inspected { background:rgba(234,179,8,0.18); color:#b45309; }
.ostate--report_submitted, .ostate--in_qc, .ostate--revision_requested { background:rgba(139,92,246,0.18); color:#7c3aed; }
.ostate--ready_for_delivery, .ostate--delivered, .ostate--completed { background:rgba(34,197,94,0.18); color:#15803d; }
.ostate--on_hold { background:rgba(249,115,22,0.18); color:#c2410c; }
.ostate--cancelled { background:rgba(239,68,68,0.18); color:#b91c1c; }
.oshow-grid { display:grid; grid-template-columns:2fr 1fr; gap:1.5rem; }
@media (max-width: 720px) { .oshow-grid { grid-template-columns:1fr; } }
.oshow-dl { display:grid; grid-template-columns:auto 1fr; gap:0.4rem 1rem; margin:0; }
.oshow-dl dt { color:var(--text-muted); font-size:0.85rem; }
.oshow-dl dd { margin:0; }
.oactions { display:flex; flex-wrap:wrap; gap:0.75rem; align-items:center; }
.oaction-form { display:inline-flex; gap:0.35rem; align-items:center; margin:0; }
.oupload { display:flex; flex-wrap:wrap; gap:0.5rem; align-items:center; margin-top:0.75rem; }
/* QC panel order summary — big address headline with Client + Appraisal Type beneath,
   and the rule-profile picker on the right. */
/* Keep the order summary pinned below the fixed topbar so it never scrolls out of view (and
   the rest of the QC panel scrolls under it). Flush to the topbar so no content peeks above. */
.qc-summary { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:0.75rem 1.5rem;
  position:sticky; top:var(--topbar-h, 4.25rem); z-index:10;
  /* override .card's overflow:hidden so the address-check popover isn't clipped when the header is
     compact/stuck on scroll — the media stage clips itself (.qc-media__stage), so nothing else spills. */
  overflow:visible; }
.qc-summary__main { display:flex; flex-direction:column; gap:0.6rem; min-width:0; }
.qc-summary__addr { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0.5rem 1.5rem; }
.qc-summary__lines { display:flex; flex-direction:column; gap:0.1rem; min-width:0; }
.qc-summary__streetrow { display:inline-flex; align-items:center; gap:0.4rem; }
.qc-summary__street { font-size:1.5rem; font-weight:700; line-height:1.2; color:var(--fg); }
.qc-addr-badge { display:inline-flex; align-items:center; flex:0 0 auto; }
.qc-addr-badge svg { width:1.15rem; height:1.15rem; }
/* Retry affordance: the "geocoder unavailable" badge is a button that re-runs the check. */
.qc-addr-retry { display:inline-flex; margin:0; padding:0; }
button.qc-addr-badge--retry { border:0; background:none; padding:0; font:inherit; cursor:pointer; }
button.qc-addr-badge--retry:hover { filter:brightness(1.25); }
button.qc-addr-badge--retry.is-loading { opacity:0.5; cursor:progress; }
button.qc-addr-badge--retry:focus-visible { outline:2px solid currentColor; outline-offset:2px; border-radius:3px; }
.qc-addr-badge--ok   { color:#2fa35a; }
.qc-addr-badge--warn { color:#e0a52c; }
.qc-addr-badge--bad  { color:#dc5b57; }
.qc-addr-badge--err  { color:#8a8f98; }
.qc-addr-badge--unk  { color:#b6bcc4; }
/* Address-check detail popover (native <details>): what's wrong + the data source. */
.qc-addr-pop { position:relative; display:inline-flex; }
.qc-addr-pop > summary { list-style:none; cursor:pointer; }
.qc-addr-pop > summary::-webkit-details-marker { display:none; }
.qc-addr-pop > summary:focus-visible { outline:2px solid currentColor; outline-offset:2px; border-radius:3px; }
.qc-addr-pop__body { position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%); z-index:40;
  width:max-content; max-width:min(34rem, 92vw); text-align:left; white-space:normal; overflow-x:auto;
  background:var(--surface); color:var(--fg); border:1px solid var(--border);
  border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,0.35); padding:0.7rem 0.8rem; font-size:0.82rem; cursor:default; }
.qc-addr-pop__status { display:flex; align-items:center; gap:0.35rem; font-weight:800; font-size:0.86rem; margin-bottom:0.15rem; }
.qc-addr-pop__status svg { width:1.05rem; height:1.05rem; }
.qc-addr-pop__status--ok { color:#2fa35a; } .qc-addr-pop__status--warn { color:#e0a52c; }
.qc-addr-pop__status--bad { color:#dc5b57; } .qc-addr-pop__status--err, .qc-addr-pop__status--unk { color:#8a8f98; }
.qc-addr-pop__desc { margin:0 0 0.5rem; color:var(--fg-muted); }
/* Scale the comparison text so long values (a normalized street) stay on one line. */
.qc-addr-pop__cmp { width:100%; border-collapse:collapse; margin:0 0 0.5rem;
  font-size:clamp(0.64rem, 0.55rem + 0.4vw, 0.8rem); white-space:nowrap; }
.qc-addr-pop__cmp th { text-align:left; font-size:0.9em; text-transform:uppercase; letter-spacing:0.04em; color:var(--fg-muted); padding:0.1rem 0.6rem 0.25rem 0; font-weight:700; }
.qc-addr-pop__cmp td { padding:0.15rem 0.6rem 0.15rem 0; border-top:1px solid var(--border, rgba(127,127,127,0.18)); }
.qc-addr-pop__cmp td:last-child, .qc-addr-pop__cmp th:last-child { padding-right:0; }
.qc-addr-pop__cmp td:first-child { color:var(--fg-muted); font-weight:600; }
.qc-addr-pop__diff td { background:color-mix(in oklab, #e0a52c 14%, transparent); }
.qc-addr-pop__note { margin:0 0 0.5rem; color:var(--fg-muted); font-style:italic; }
.qc-addr-pop__note--warn { color:#e0a52c; font-style:normal; font-weight:600; }
.qc-addr-pop__muted { color:var(--fg-muted); font-style:italic; opacity:0.8; }
.qc-addr-pop__src { margin:0 0 0.5rem; color:var(--fg-muted); font-size:0.74rem; }
.qc-addr-pop__bench { opacity:0.8; }
.qc-addr-pop__recheck { margin:0; }
.qc-summary__loc { font-size:0.95rem; color:var(--fg-muted, var(--text-muted)); }
.qc-summary__value { flex:1 1 auto; display:flex; flex-direction:column; align-items:center; text-align:center; gap:0.05rem; line-height:1.15; white-space:nowrap; }
.qc-summary__value-num { font-size:1.9rem; font-weight:800; color:var(--fg); }
.qc-summary__value-num--na { color:#dc5b57; }
.qc-summary__value-sub { font-size:0.8rem; font-weight:600; color:var(--fg); }
.qc-summary__value-sub--na { color:#dc5b57; }
.qc-summary__value-diff { display:inline-flex; align-items:center; gap:0.25rem; font-size:0.8rem; font-weight:700; color:var(--fg-muted, var(--text-muted)); }
.qc-summary__value-diff--over { color:#2fa35a; }
.qc-summary__value-diff--under { color:#dc5b57; }
.qc-summary__arrow { flex:0 0 auto; }
.qc-summary__meta { display:flex; flex-wrap:wrap; gap:0.6rem 2.5rem; }
.qc-summary__item { display:flex; flex-direction:column; gap:0.1rem; }
.qc-summary__label { font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--fg-muted, var(--text-muted)); }
.qc-summary__val { font-size:0.95rem; font-weight:600; color:var(--fg); }
/* ---- Media header: info strip on top, then hero photo/maps (left) + address/money (right) ----
   .qc-summary is already position:sticky under the topbar; on scroll a JS-toggled --stuck class
   hides the strip + media and reverts address/money to the compact inline row. */
.qc-summary--stuck { box-shadow:0 8px 20px -10px rgba(0,0,0,0.45); }
/* Fallback stacking order (no media / collapsed flex column): address first, info below it. */
.qc-summary__addr { order:1; }
.qc-summary__meta { order:2; }
/* EXPANDED (media present, not scrolled): three columns — bigger media | address+money | info table. */
.qc-summary--media:not(.qc-summary--stuck) .qc-summary__main {
  display:grid; align-items:start; gap:1rem 1.5rem;
  grid-template-columns:minmax(18rem, 27rem) minmax(0, 1fr) max-content;
  grid-template-areas:"media addr meta"; }
.qc-summary--media:not(.qc-summary--stuck) .qc-summary__media { grid-area:media; }
.qc-summary--media:not(.qc-summary--stuck) .qc-summary__addr  { grid-area:addr; flex-direction:column; align-items:flex-start; justify-content:flex-start; }
.qc-summary--media:not(.qc-summary--stuck) .qc-summary__value { align-items:flex-start; text-align:left; flex:0 0 auto; margin-top:0.55rem; white-space:normal; }
/* Info as a 2-column table (label | value), one row per field. */
.qc-summary--media:not(.qc-summary--stuck) .qc-summary__meta {
  grid-area:meta; display:grid; grid-template-columns:auto 1fr; gap:0; align-content:start;
  border:1px solid var(--border, rgba(127,127,127,0.2)); border-radius:10px; overflow:hidden; }
.qc-summary--media:not(.qc-summary--stuck) .qc-summary__item { display:contents; }
.qc-summary--media:not(.qc-summary--stuck) .qc-summary__meta .qc-summary__label,
.qc-summary--media:not(.qc-summary--stuck) .qc-summary__meta .qc-summary__val {
  padding:0.4rem 0.8rem; border-top:1px solid var(--border, rgba(127,127,127,0.14)); font-size:0.9rem; }
.qc-summary--media:not(.qc-summary--stuck) .qc-summary__meta .qc-summary__label {
  background:color-mix(in oklab, var(--fg) 5%, var(--surface, #fff)); white-space:nowrap; }
.qc-summary--media:not(.qc-summary--stuck) .qc-summary__item:first-child .qc-summary__label,
.qc-summary--media:not(.qc-summary--stuck) .qc-summary__item:first-child .qc-summary__val { border-top:0; }
/* Media viewer (bigger — fills its column). */
.qc-summary__media { width:100%; }
.qc-media__stage { position:relative; aspect-ratio:4 / 3; border-radius:12px; overflow:hidden; background:#0c0e13;
  border:1px solid var(--border, rgba(127,127,127,0.2)); }
.qc-media__pane { display:none; width:100%; height:100%; padding:0; margin:0; border:0; background:none; cursor:pointer; }
.qc-media__pane.is-active { display:block; }
.qc-media__pane img { width:100%; height:100%; object-fit:cover; display:block; }
.qc-media__tabs { display:flex; flex-wrap:wrap; gap:0.35rem; margin-top:0.55rem; }
.qc-media__tab { font-size:0.78rem; font-weight:600; padding:0.3rem 0.8rem; border-radius:999px; cursor:pointer;
  border:1px solid var(--border, rgba(127,127,127,0.25)); background:var(--surface, #fff); color:var(--fg-muted, var(--text-muted)); }
.qc-media__tab:hover { border-color:var(--accent, #3ea6ff); }
.qc-media__tab.is-active { background:var(--accent, #3ea6ff); border-color:var(--accent, #3ea6ff); color:#fff; }
/* COLLAPSED (scrolled): hide the media; address+money inline row, info drops back BELOW them. */
.qc-summary--stuck .qc-summary__media { display:none; }
.qc-summary--stuck .qc-summary__main { display:flex; flex-direction:column; gap:0.55rem; }
/* Narrow screens: stack the three columns. */
@media (max-width: 820px) {
  .qc-summary--media:not(.qc-summary--stuck) .qc-summary__main {
    grid-template-columns:1fr; grid-template-areas:"media" "addr" "meta"; }
}
/* Map lightbox HUD (reuses the mkthud shell) — just the map image, large. */
.qc-maphud .qc-mkthud__box { width:min(96vw, 60rem); }
.qc-maphud__img { width:100%; height:auto; max-height:78vh; object-fit:contain; display:block; border-radius:8px; }
/* QC Results — full-width, colour-coded severity bars at the top of the QC panel; each
   bar expands to list its findings (checkbox + rule code + message + optional detail). */
.qc-results { display:flex; flex-direction:column; gap:2px; border-radius:8px; overflow:hidden; }
.qc-bar { width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  border:0; padding:0.85rem 1.1rem; font:inherit; font-weight:600; letter-spacing:0.03em;
  color:#fff; text-align:left; cursor:pointer; }
.qc-bar:hover { filter:brightness(0.95); }
.qc-bar:focus-visible { outline:2px solid #fff; outline-offset:-4px; }
/* Passed is a plain tally — not expandable, so don't invite a click. */
.qc-bar--static { cursor:default; }
.qc-bar--static:hover { filter:none; }
.qc-bar--error { background:#dc5b57; }
.qc-bar--warn  { background:#e0a52c; }
.qc-bar--pass  { background:#4caa54; }
.qc-bar__label { display:inline-flex; align-items:center; }
.qc-bar__count { display:inline-flex; align-items:center; justify-content:center; min-width:1.5rem;
  height:1.5rem; margin-right:0.6rem; padding:0 0.4rem; border-radius:999px;
  background:rgba(0,0,0,0.18); font-size:0.8rem; font-weight:700; }
.qc-bar__toggle { font-size:1.35rem; font-weight:700; line-height:1; }
.qc-content { padding:0.4rem 1.1rem; background:color-mix(in oklab, currentColor 5%, transparent);
  border:1px solid var(--border, rgba(127,127,127,0.18)); border-top:0; }
.qc-content[hidden] { display:none; }
.qc-content__empty { margin:0.6rem 0; color:var(--text-muted, #8a8f98); font-size:0.88rem; }
.qc-find { display:flex; gap:0.65rem; align-items:flex-start; padding:0.7rem 0;
  border-bottom:1px solid var(--border, rgba(127,127,127,0.14)); cursor:pointer; }
.qc-find:last-child { border-bottom:0; }
.qc-find > input[type=checkbox] { flex:0 0 auto; width:1.15rem; height:1.15rem; margin-top:0.15rem; }
.qc-find__body { display:flex; flex-direction:column; gap:0.2rem; min-width:0; }
.qc-find__code { color:#3ea6ff; font-weight:600; font-size:0.85rem; }
.qc-find__msg { color:var(--text); font-size:0.9rem; }
/* Detection-detail expander below a finding (engine output + text/OCR method). */
.qc-find__det { margin:0.3rem 0 0; }
.qc-find__det-sum { display:inline-flex; align-items:center; gap:0.4rem; cursor:pointer; list-style:none; font-size:0.8rem; font-weight:600;
  color:var(--fg-muted, var(--text-muted)); }
.qc-find__det-sum::-webkit-details-marker { display:none; }
.qc-find__det-caret { display:inline-block; transition:transform 0.12s ease; }
.qc-find__det[open] .qc-find__det-caret { transform:rotate(90deg); }
.qc-find__method { font-size:0.66rem; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; padding:0.08rem 0.45rem; border-radius:999px; }
.qc-find__method--text { color:#274bce; background:color-mix(in oklab, #3b6fff 15%, transparent); }
.qc-find__method--ocr  { color:#8a3ca0; background:color-mix(in oklab, #a02b93 15%, transparent); }
.qc-find__det-empty { margin:0.3rem 0 0; font-size:0.82rem; color:var(--fg-muted, var(--text-muted)); }
.qc-find__ocr { margin:0.4rem 0 0; }
.qc-find__ocr-lab { font-size:0.66rem; text-transform:uppercase; letter-spacing:0.04em; font-weight:700; color:var(--fg-muted, var(--text-muted)); margin-bottom:0.2rem; }
.qc-find__ocr-txt { margin:0; padding:0.5rem 0.65rem; font-size:0.8rem; line-height:1.4; white-space:pre-wrap; overflow-wrap:anywhere; max-height:16rem; overflow:auto;
  background:color-mix(in oklab, var(--fg) 5%, transparent); border:1px solid var(--border, rgba(127,127,127,0.2)); border-radius:8px; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; }
.qc-find__ocr-filter { display:block; margin:0 0 0.35rem; width:100%; max-width:22rem; }
.qc-find__ocr-ln { white-space:pre-wrap; overflow-wrap:anywhere; min-height:1em; }
.qc-find__ocr-ln[hidden] { display:none; }
/* "What the engine read" per-line table: phrase · what it counted as · OCR/Text. */
.qc-find__ocr-txt--tbl { padding:0; }
.qc-find__lntbl { width:100%; border-collapse:collapse; font-size:0.8rem; }
.qc-find__lntbl th, .qc-find__lntbl td { text-align:left; padding:0.25rem 0.6rem; border-bottom:1px solid var(--border, rgba(127,127,127,0.16)); vertical-align:top; overflow-wrap:anywhere; }
.qc-find__lntbl thead th { position:sticky; top:0; background:var(--bg, #fff); font-size:0.64rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--fg-muted, var(--text-muted)); white-space:nowrap; }
.qc-find__lntbl td:nth-child(3) { white-space:nowrap; color:var(--fg-muted, var(--text-muted)); }
.qc-find__lntbl tr.qc-find__ln--hit { background:color-mix(in oklab, var(--fg) 4%, transparent); }
.qc-find__lntbl tr.qc-find__ln--hit td:nth-child(2) { font-weight:700; }
/* Positive-Filter "match a report photo" chips (green = additive). */
.qc-find__method--pos { color:#1a7f37; background:color-mix(in oklab, #2da44e 16%, transparent); }
.qc-find__match { margin:0.3rem 0 0; }
.qc-find__matchgrid { display:flex; flex-wrap:wrap; gap:0.65rem; margin:0.5rem 0 0.2rem; }
.qc-find__posf { display:flex; flex-direction:column; gap:0.28rem; width:116px; padding:0; border:0; background:transparent; cursor:pointer; text-align:center; }
.qc-find__posf-thumb { position:relative; display:block; width:116px; height:86px; border-radius:9px; overflow:hidden;
  border:1px solid var(--border, rgba(127,127,127,0.3)); background:color-mix(in oklab, var(--fg) 6%, transparent); }
.qc-find__posf-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.qc-find__posf:hover .qc-find__posf-thumb { border-color:color-mix(in oklab, #2da44e 60%, transparent); }
.qc-find__posf-badge { position:absolute; top:5px; right:5px; width:22px; height:22px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center; background:#2da44e; color:#fff; box-shadow:0 1px 4px rgba(0,0,0,0.45); }
.qc-find__posf-ic--ok { display:none; }
.qc-find__posf-cap { font-size:0.72rem; line-height:1.25; color:var(--text); overflow-wrap:anywhere; }
.qc-find__posf.is-added { cursor:default; }
.qc-find__posf.is-added .qc-find__posf-thumb { outline:2px solid #2da44e; outline-offset:-2px; opacity:0.9; }
.qc-find__posf.is-added .qc-find__posf-badge { background:#1a7f37; }
.qc-find__posf.is-added .qc-find__posf-ic--add { display:none; }
.qc-find__posf.is-added .qc-find__posf-ic--ok { display:inline; }
/* Positive Filter target badges (top of /positive_filter) — click to filter by target. */
.posf-badges { display:flex; flex-wrap:wrap; gap:0.4rem; margin:0.2rem 0 1.1rem; }
.posf-badge { display:inline-flex; align-items:center; gap:0.4rem; text-decoration:none; font-size:0.82rem; line-height:1.2;
  padding:0.28rem 0.7rem; border:1px solid var(--border, rgba(127,127,127,0.3)); border-radius:999px; color:var(--text); background:transparent; }
.posf-badge:hover { background:color-mix(in oklab, var(--fg) 6%, transparent); }
.posf-badge.is-active { background:color-mix(in oklab, #2da44e 16%, transparent); border-color:color-mix(in oklab, #2da44e 50%, transparent); font-weight:600; }
.posf-badge__n { font-size:0.72rem; padding:0 0.4rem; border-radius:999px; background:color-mix(in oklab, var(--fg) 10%, transparent); color:var(--fg-muted, var(--text-muted)); }
.posf-badge.is-active .posf-badge__n { background:color-mix(in oklab, #2da44e 26%, transparent); color:inherit; }
/* Version History — plain-English release notes. */
/* Each version is its own card now — the head gets a divider from its bullet list. */
.vh-release__head { display:flex; align-items:baseline; justify-content:space-between; gap:0.6rem 1rem; flex-wrap:wrap;
  margin:0 0 0.7rem; padding-bottom:0.6rem; border-bottom:1px solid var(--border, rgba(127,127,127,0.14)); }
.vh-release__title { font-weight:700; font-size:1.05rem; }
.vh-release__src { font-size:0.72rem; font-weight:600; letter-spacing:0.02em; text-transform:uppercase;
  padding:0.12rem 0.5rem; border-radius:999px; white-space:nowrap; }
.vh-release__src--amc { background:rgba(59,130,246,0.14); color:#2563eb; }
.vh-release__src--engine { background:rgba(139,92,246,0.14); color:#7c3aed; }
.vh-release__src--assistant { background:rgba(16,185,129,0.16); color:#059669; }
.vh-release__date { color:var(--fg-muted, var(--text-muted)); font-size:0.85rem; white-space:nowrap; margin-left:auto; }
.vh-note { color:var(--fg-muted, var(--text-muted)); font-size:0.88rem; margin:0 0 0.6rem; }
.vh-list { margin:0; padding-left:1.2rem; display:flex; flex-direction:column; gap:0.4rem; }
.vh-list li { font-size:0.92rem; line-height:1.5; }
/* Rule Profile builder: AI-Rules-style table + section chips. */
.qcp-chips { margin:1.15rem 0 0.85rem; }
.qcp-searchbar { margin:0 0 0.9rem; }
.qcp-table .qcp-col-id { width:5rem; white-space:nowrap; color:var(--fg-muted, var(--text-muted));
  font-variant-numeric:tabular-nums; }
/* Positive Filter — custom Target autocomplete dropdown (replaces the flaky native datalist). */
.posf-ac { z-index:1000; max-height:16rem; overflow-y:auto; background:var(--surface, #fff); color:var(--fg);
  border:1px solid var(--border, rgba(127,127,127,0.3)); border-radius:8px; box-shadow:0 10px 28px -8px rgba(0,0,0,0.4); }
.posf-ac__opt { padding:0.4rem 0.75rem; cursor:pointer; font-size:0.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.posf-ac__opt:hover, .posf-ac__opt.is-active { background:color-mix(in oklab, var(--accent, #3ea6ff) 16%, var(--surface, #fff)); }
.qcp-table tr[hidden] { display:none; }
/* QC finding right-side tools: bug report + rule on/off switch. */
.qc-find__tools { margin-left:auto; flex:0 0 auto; display:flex; align-items:center; gap:0.5rem; padding-top:0.1rem; }
.qc-find__bug { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; margin-top:-0.05rem; border-radius:7px;
  border:1px solid transparent; background:transparent; color:var(--fg-muted, var(--text-muted)); cursor:pointer; transition:background 0.12s ease, color 0.12s ease; }
.qc-find__bug:hover { color:#c0392b; background:color-mix(in oklab, #e74c3c 14%, transparent); }
.qc-find__toggleform { margin:0; display:inline-flex; }
.switch { display:inline-flex; align-items:center; cursor:pointer; position:relative; }
.switch input { position:absolute; opacity:0; width:0; height:0; }
.switch__track { position:relative; width:36px; height:20px; border-radius:999px; background:color-mix(in oklab, var(--fg) 24%, transparent); transition:background 0.16s ease; }
.switch__thumb { position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:999px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.4); transition:transform 0.16s ease; }
.switch input:checked + .switch__track { background:var(--accent, #3b6fff); }
.switch input:checked + .switch__track .switch__thumb { transform:translateX(16px); }
.switch input:focus-visible + .switch__track { box-shadow:0 0 0 3px var(--focus-glow, rgba(62,166,255,0.35)); }
.switch input:disabled + .switch__track { opacity:0.55; }
.qc-find__detail { margin:0.25rem 0 0; font-size:0.83rem; border-collapse:collapse; }
.qc-find__detail td { padding:0.12rem 0.9rem 0.12rem 0; vertical-align:top; color:var(--text); }
.qc-find__detail td:first-child { color:var(--text-muted, #8a8f98); white-space:nowrap; }
/* One photo per line — the name opens the HUD, the page number opens the PDF. */
.qc-find__photos { display:flex; flex-direction:column; align-items:flex-start; gap:0.35rem; margin-top:0.3rem; font-size:0.83rem; }
.qc-find__photos a { color:#3ea6ff; text-decoration:none; }
.qc-find__photos a:hover { text-decoration:underline; }
.qc-find__photobtn { background:none; border:0; padding:0; font:inherit; color:#3ea6ff; cursor:zoom-in; }
.qc-find__photobtn:hover { text-decoration:underline; }
/* Red X in front of a finding photo — click to exclude its label (adds it to the Label
   Filter). Flips to a green check once added. */
.qc-find__filter { background:none; border:0; padding:0; margin:0; display:inline-flex; align-items:center; color:#dc5b57; cursor:pointer; line-height:0; }
.qc-find__filter:hover { color:#c0403c; }
.qc-find__filter.is-added { color:#2fa35a; cursor:default; }
.qc-find__filter__ic--ok { display:none; }
.qc-find__filter.is-added .qc-find__filter__ic--x { display:none; }
.qc-find__filter.is-added .qc-find__filter__ic--ok { display:inline; }
/* Href-less photo (Phase 1: label only, no durable PDF to link to yet) — plain label,
   not a dead link. */
.qc-find__photo { color:var(--fg-muted); display:inline-flex; align-items:center; gap:0.5rem; }
.qc-find__photoname { color:var(--fg-muted); }
/* Duplicate-photo pairs (AI113): the duplicate on line 1, "duplicate of original" on line 2. */
.qc-find__dup { display:flex; flex-direction:column; align-items:flex-start; gap:0.2rem; }
.qc-find__dup-of { color:var(--fg-muted); font-style:italic; opacity:0.85; }
/* UAD 3.6 "recorded but not QC'd yet" notice above the (empty) Results bars. */
.qc-not-evaluated { margin:0 0 0.8rem; padding:0.6rem 0.8rem; font-size:0.86rem;
  border:1px solid color-mix(in oklab, #e0a52c 45%, transparent);
  background:color-mix(in oklab, #e0a52c 12%, transparent); border-radius:8px; }
/* QC Templates + Revision Request — two widgets side by side below the Results bars. */
.qc-ext-row { display:grid; grid-template-columns:1fr; gap:1.5rem; align-items:start; }
.qc-ext-link { font-size:0.82rem; color:var(--accent); text-decoration:none; white-space:nowrap; }
.qc-ext-link:hover { text-decoration:underline; }
/* Collapsible Zillow / Redfin cards (native <details>, collapsed by default). */
.qc-ext-card { align-self:start; }
.qc-ext-summary { display:flex; align-items:center; gap:0.6rem; cursor:pointer; list-style:none; }
.qc-ext-summary::-webkit-details-marker { display:none; }
.qc-ext-summary::marker { content:''; }
.qc-ext-summary .card__title { flex:1 1 auto; }
.qc-ext-count { font-size:0.76rem; font-weight:600; color:var(--fg-muted, var(--text-muted)); background:color-mix(in oklab, var(--fg) 8%, transparent); padding:0.08rem 0.5rem; border-radius:999px; }
/* Clickable per-category badge (filters/highlights its section's gallery). */
.qc-catbadge { border:1px solid transparent; cursor:pointer; font-family:inherit; line-height:1.4; }
.qc-catbadge:hover { background:color-mix(in oklab, var(--fg) 14%, transparent); }
.qc-catbadge.is-active { background:color-mix(in oklab, var(--accent, #3ea6ff) 18%, transparent); color:var(--accent, #3ea6ff); border-color:color-mix(in oklab, var(--accent, #3ea6ff) 40%, transparent); }
.qc-gallery__item { transition:opacity 0.15s ease, filter 0.15s ease; }
.qc-gallery__item.is-dim { opacity:0.28; filter:grayscale(0.55); }
/* HUD person-warning row. */
.qc-photohud__row--warn dt { color:#e0a52c; }
.qc-ext-chev { flex:0 0 auto; width:1.1rem; height:1.1rem; color:var(--fg-muted, var(--text-muted)); transition:transform 160ms ease; }
.qc-ext-card[open] .qc-ext-chev { transform:rotate(180deg); }
.qc-ext-body { margin-top:0.9rem; }
.qc-ext-body > .qc-ext-link { float:right; margin:0 0 0.3rem 0.6rem; }
/* Report photo gallery (qc_images). */
.qc-gallery { display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:0.9rem; }
.qc-gallery__item { margin:0; display:flex; flex-direction:column; gap:0.35rem; }
.qc-gallery__item > a,
.qc-gallery__btn { display:block; width:100%; padding:0; border-radius:8px; overflow:hidden; border:1px solid var(--border, rgba(127,127,127,0.2)); background:color-mix(in oklab, var(--fg) 4%, transparent); cursor:zoom-in; }
.qc-gallery__img { display:block; width:100%; height:120px; object-fit:cover; transition:transform 0.15s ease; }
.qc-gallery__item > a:hover .qc-gallery__img,
.qc-gallery__btn:hover .qc-gallery__img { transform:scale(1.04); }
.qc-gallery__cap { font-size:0.78rem; line-height:1.25; overflow-wrap:anywhere; }
/* Label-check verdict cues on the thumbnail — just a corner tag (no ring/wash). EMPTY = warm
   amber (an unfurnished room). UNCONFIRMED = red ⚠ (the label couldn't be confirmed). Tag text
   comes from data-vtag. */
.qc-gallery__item--empty, .qc-gallery__item--warn, .qc-gallery__item--pass, .qc-gallery__item--unknown { position:relative; }
.qc-gallery__item--empty::before, .qc-gallery__item--warn::before, .qc-gallery__item--pass::before, .qc-gallery__item--unknown::before { content:attr(data-vtag);
  position:absolute; top:6px; left:6px; z-index:2; font-size:0.6rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.04em; line-height:1; padding:0.2rem 0.42rem; border-radius:999px; box-shadow:0 1px 3px rgba(0,0,0,0.28); }
.qc-gallery__item--empty::before { color:#5c3f00; background:#f2c45a; }
.qc-gallery__item--warn::before  { content:"⚠ " attr(data-vtag); color:#fff; background:#dc5b57; }
.qc-gallery__item--pass::before  { content:"✓ " attr(data-vtag); color:#fff; background:#2fa35a; }
.qc-gallery__item--unknown::before { content:"? " attr(data-vtag); color:#4a3b00; background:#f4d03f; }
/* Verdict filter badges — colored to match their thumbnails, not the blue category badges. */
.qc-catbadge--empty { color:#a5761a; background:color-mix(in oklab, #e0a52c 16%, transparent); }
.qc-catbadge--empty:hover { background:color-mix(in oklab, #e0a52c 26%, transparent); }
.qc-catbadge--empty.is-active { background:color-mix(in oklab, #e0a52c 28%, transparent); color:#8a6212; border-color:color-mix(in oklab, #e0a52c 55%, transparent); }
.qc-catbadge--warn { color:#c0413d; background:color-mix(in oklab, #dc5b57 15%, transparent); }
.qc-catbadge--warn:hover { background:color-mix(in oklab, #dc5b57 24%, transparent); }
.qc-catbadge--warn.is-active { background:color-mix(in oklab, #dc5b57 26%, transparent); color:#b23a36; border-color:color-mix(in oklab, #dc5b57 55%, transparent); }
.qc-catbadge--pass { color:#2a8a4d; background:color-mix(in oklab, #2fa35a 15%, transparent); }
.qc-catbadge--pass:hover { background:color-mix(in oklab, #2fa35a 24%, transparent); }
.qc-catbadge--pass.is-active { background:color-mix(in oklab, #2fa35a 26%, transparent); color:#1f7a3f; border-color:color-mix(in oklab, #2fa35a 55%, transparent); }
.qc-catbadge--unknown { color:#8a7000; background:color-mix(in oklab, #f4d03f 22%, transparent); }
.qc-catbadge--unknown:hover { background:color-mix(in oklab, #f4d03f 34%, transparent); }
.qc-catbadge--unknown.is-active { background:color-mix(in oklab, #f4d03f 40%, transparent); color:#6f5a00; border-color:color-mix(in oklab, #f4d03f 65%, transparent); }
/* Verdict chip inside the photo HUD. */
.qc-photohud__hint { font-weight:400; text-transform:none; letter-spacing:0; opacity:0.7; }
.qc-verdict { display:inline-block; padding:0.14rem 0.55rem; border-radius:999px; font-size:0.76rem; font-weight:700; }
.qc-verdict--empty { color:#5c3f00; background:#f2c45a; }
.qc-verdict--unconfirmed { color:#fff; background:#dc5b57; }
.qc-verdict--confirmed { color:#fff; background:#2fa35a; }
.qc-verdict--unknown { color:#4a3b00; background:#f4d03f; }
/* Defects section — a reported <DEFECT> per row: thumbnail + detail card (pm93). */
.qc-defects { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.85rem; }
.qc-defect { display:flex; gap:0.85rem; align-items:flex-start; padding:0.7rem; border:1px solid var(--border, #e2e5ea);
  border-left:3px solid #c0392b; border-radius:8px; background:color-mix(in oklab, #c0392b 4%, transparent); }
.qc-defect__thumb { flex:0 0 auto; width:96px; height:96px; padding:0; border:1px solid var(--border, #e2e5ea);
  border-radius:6px; overflow:hidden; cursor:pointer; background:none; }
.qc-defect__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.qc-defect__body { flex:1 1 auto; min-width:0; }
.qc-defect__head { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem; margin-bottom:0.25rem; }
.qc-defect__title { font-weight:700; font-size:0.95rem; }
.qc-defect__flag { font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.03em;
  color:#fff; background:#c0392b; padding:0.16rem 0.46rem; border-radius:999px; }
.qc-defect__desc { margin:0.15rem 0 0.5rem; font-size:0.9rem; line-height:1.45; }
.qc-defect__meta { display:flex; flex-wrap:wrap; gap:0.35rem 1.4rem; margin:0; }
.qc-defect__meta div { display:flex; flex-direction:column; }
.qc-defect__meta dt { font-size:0.66rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--fg-muted, #6b7280); }
.qc-defect__meta dd { margin:0; font-size:0.9rem; font-weight:600; }
/* Amenity (3.6 amenity/specialty room) — a legit room, so no thumbnail flag at all; the "Amenity"
   filter pill and the HUD chip carry the label. */
.qc-catbadge--amenity { color:#4b5563; background:color-mix(in oklab, #6b7280 15%, transparent); }
.qc-catbadge--amenity:hover { background:color-mix(in oklab, #6b7280 24%, transparent); }
.qc-catbadge--amenity.is-active { background:color-mix(in oklab, #6b7280 28%, transparent); color:#374151; border-color:color-mix(in oklab, #6b7280 55%, transparent); }
.qc-verdict--amenity { color:#374151; background:color-mix(in oklab, #6b7280 22%, transparent); }
/* N/A category value — amber so a missing label reads as "needs a look". */
.qc-photohud__na { color:#a5761a; font-weight:700; }

/* QC photo HUD — full image + PDF caption + AI classification + report-page link. */
/* Image HUD — a modern lightbox: dark "stage" for the image + a clean metadata sidebar. */
.qc-photohud { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:1.5rem;
  animation:qc-hud-fade 150ms ease both; }
@keyframes qc-hud-fade { from { opacity:0; } to { opacity:1; } }
.qc-photohud[hidden] { display:none; }
.qc-photohud__backdrop { position:absolute; inset:0; background:rgba(9,11,15,0.8); backdrop-filter:blur(6px); cursor:zoom-out; }
/* overflow:visible so the close button can sit outside the corner (like the market HUD); the
   inner panels round their own outer corners to keep the clipped look. */
.qc-photohud__box { position:relative; z-index:1; width:min(94vw, 62rem); max-height:90vh; display:flex; overflow:visible;
  background:var(--surface, #fff); color:var(--fg); border:1px solid var(--border, rgba(127,127,127,0.2)); border-radius:16px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,0.65);
  animation:qc-hud-pop 240ms cubic-bezier(.2,.9,.25,1) both; }
@keyframes qc-hud-pop { from { opacity:0; transform:translateY(14px) scale(0.97); } to { opacity:1; transform:none; } }
.qc-photohud__imgwrap { position:relative; flex:1 1 60%; min-width:0; display:flex; align-items:center; justify-content:center; padding:1.4rem;
  border-radius:16px 0 0 16px;
  background:radial-gradient(130% 130% at 50% 0%, #202531 0%, #0c0e13 100%); }
/* Prev/next image navigation (also ← / → keys). */
.qc-photohud__nav { position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:44px; height:44px; border-radius:999px; border:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; font-size:26px; line-height:1;
  background:rgba(0,0,0,0.45); color:#fff; transition:background .15s ease; }
.qc-photohud__nav:hover { background:rgba(0,0,0,0.7); }
.qc-photohud__nav--prev { left:0.7rem; }
.qc-photohud__nav--next { right:0.7rem; }
.qc-photohud__pos { position:absolute; bottom:0.8rem; left:50%; transform:translateX(-50%); z-index:2;
  font-size:0.78rem; font-weight:600; color:#fff; background:rgba(0,0,0,0.5); padding:0.15rem 0.6rem; border-radius:999px; }
.qc-photohud__meta { border-radius:0 16px 16px 0; }
.qc-photohud__img { max-width:100%; max-height:calc(90vh - 2.8rem); object-fit:contain; border-radius:10px;
  box-shadow:0 14px 34px -10px rgba(0,0,0,0.65); }
.qc-photohud__meta { flex:1 1 40%; min-width:15rem; max-width:23rem; display:flex; flex-direction:column; gap:1.05rem;
  padding:1.45rem 1.4rem; overflow-y:auto; }
.qc-photohud__cap { margin:0; font-size:1.18rem; font-weight:700; line-height:1.25; overflow-wrap:anywhere;
  padding-bottom:0.9rem; border-bottom:1px solid var(--border, rgba(127,127,127,0.2)); }
.qc-photohud__dl { margin:0; display:flex; flex-direction:column; gap:0.9rem; }
.qc-photohud__row { display:flex; flex-direction:column; gap:0.32rem; }
/* An explicit display on rows/.btn beats the UA `[hidden]{display:none}`, so a "hidden" row
   kept showing the PREVIOUS image's stale chips. Force hidden elements in the HUD to hide. */
.qc-photohud [hidden] { display:none; }
.qc-photohud__row dt { font-size:0.65rem; text-transform:uppercase; letter-spacing:0.06em; font-weight:700; color:var(--fg-muted, var(--text-muted)); }
.qc-photohud__row dd { margin:0; font-size:0.92rem; overflow-wrap:anywhere; }
/* Type → accent pill. */
.qc-photohud__row[data-qc-photohud-typerow] dd { align-self:flex-start; padding:0.16rem 0.6rem; border-radius:999px; text-transform:capitalize;
  background:color-mix(in oklab, var(--accent, #3ea6ff) 16%, transparent); color:var(--accent, #3ea6ff); font-size:0.78rem; font-weight:600; }
/* Classification → the AI's primary scene call, as a filled accent chip (now a child chip). */
.qc-photohud__row[data-qc-photohud-classrow] dd { display:flex; }
.qc-photohud__chip--class { background:color-mix(in oklab, var(--accent, #3ea6ff) 22%, transparent); color:var(--accent, #3ea6ff); font-weight:600; font-size:0.85rem; border-color:transparent; }
/* Objects → neutral chips. */
.qc-photohud__row[data-qc-photohud-objrow] dd { display:flex; flex-wrap:wrap; gap:0.4rem; }
.qc-photohud__chip { display:inline-flex; align-items:center; padding:0.2rem 0.6rem; border-radius:999px; font-size:0.78rem;
  color:inherit; background:color-mix(in oklab, var(--fg) 8%, transparent); border:1px solid var(--border, rgba(127,127,127,0.2)); }
/* Tunable chips — click to open the inline threshold tuner. */
.qc-tunechip { cursor:pointer; font-family:inherit; transition:box-shadow 0.12s ease, border-color 0.12s ease; }
.qc-tunechip::after { content:"✎"; margin-left:0.35rem; opacity:0.55; font-size:0.72em; }
.qc-tunechip:hover { border-color:var(--accent, #3ea6ff); box-shadow:0 0 0 2px color-mix(in oklab, var(--accent, #3ea6ff) 22%, transparent); }
.qc-tunechip:focus-visible { outline:none; box-shadow:0 0 0 3px var(--focus-glow, rgba(62,166,255,0.3)); }
/* Inline threshold tuner panel inside the HUD. */
.qc-tune { margin-top:0.4rem; padding:0.85rem 0.95rem; border:1px solid var(--border, rgba(127,127,127,0.22)); border-radius:12px;
  background:color-mix(in oklab, var(--fg) 4%, transparent); display:flex; flex-direction:column; gap:0.55rem; animation:qc-hud-fade 140ms ease both; }
.qc-tune[hidden] { display:none; }
.qc-tune__head { display:flex; align-items:center; justify-content:space-between; gap:0.6rem; }
.qc-tune__title { font-weight:700; font-size:0.9rem; }
.qc-tune__x { border:0; background:transparent; color:var(--fg-muted, var(--text-muted)); font-size:20px; line-height:1; cursor:pointer; padding:0 0.3rem; border-radius:6px; }
.qc-tune__x:hover { color:var(--fg); background:color-mix(in oklab, var(--fg) 8%, transparent); }
.qc-tune__sub { margin:0; font-size:0.8rem; color:var(--fg-muted, var(--text-muted)); line-height:1.35; }
.qc-tune__sliderrow { display:flex; align-items:center; gap:0.6rem; }
.qc-tune__sliderrow .ai-slider__range { flex:1 1 auto; min-width:0; }
.qc-tune__val { font-variant-numeric:tabular-nums; font-weight:700; color:var(--accent, #3ea6ff); min-width:2.6rem; text-align:right; }
.qc-tune__actions { display:flex; align-items:center; gap:0.7rem; }
.qc-tune__status { font-size:0.8rem; color:var(--fg-muted, var(--text-muted)); }
.qc-tune__status.is-ok { color:#2fa35a; }
.qc-tune__status.is-err { color:#dc5b57; }
.qc-photohud__report { align-self:stretch; justify-content:center; margin-top:auto; }
/* Matches the market (Zillow/Redfin) HUD close — a light chip sitting just outside the corner. */
.qc-photohud__close { position:absolute; top:-14px; right:-14px; z-index:3; width:36px; height:36px; border-radius:999px;
  border:1px solid var(--border, rgba(127,127,127,0.25)); background:var(--surface, #fff); color:var(--fg); font-size:20px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 14px -2px rgba(0,0,0,0.45);
  transition:background 0.12s ease, border-color 0.12s ease; }
.qc-photohud__close:hover { background:color-mix(in oklab, var(--fg) 8%, var(--surface, #fff)); border-color:var(--accent, #3ea6ff); }
@media (max-width:640px) {
  .qc-photohud__box { flex-direction:column; }
  .qc-photohud__meta { max-width:none; border-radius:0 0 16px 16px; }
  .qc-photohud__imgwrap { max-height:44vh; border-radius:16px 16px 0 0; }
}
/* Page badge on finding photo links / gallery captions. */
.qc-find__pg { font-size:0.72rem; font-weight:600; color:var(--fg-muted); }
.qc-find__reportlink { display:inline-block; margin-top:0.25rem; color:var(--accent, #3b6fff); text-decoration:none; }
.qc-find__reportlink:hover { text-decoration:underline; }
.qc-ext-dl { display:grid; grid-template-columns:auto 1fr; gap:0.3rem 1rem; margin:0; font-size:0.9rem; }
.qc-ext-dl dt { color:var(--fg-muted, var(--text-muted)); white-space:nowrap; }
.qc-ext-dl dd { margin:0; color:var(--fg); font-weight:600; }
.qc-ext-dl--below { margin-top:0.9rem; }

/* Scraped subject vs. report comparison table (Zillow / Redfin cards). */
/* Auto width + tight column gaps so Source and Report sit next to each other, not spread
   across the card. */
.qc-subj-tbl { width:auto; border-collapse:collapse; font-size:0.9rem; }
.qc-subj-tbl thead th { text-align:left; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.03em;
  color:var(--fg-muted, var(--text-muted)); font-weight:600; padding:0 1.5rem 0.35rem 0; border-bottom:1px solid var(--border, rgba(127,127,127,0.2)); }
.qc-subj-tbl tbody th { text-align:left; font-weight:400; color:var(--fg-muted, var(--text-muted)); white-space:nowrap; padding:0.32rem 1.5rem 0.32rem 0; border-bottom:1px solid color-mix(in oklab, var(--fg) 7%, transparent); }
.qc-subj-tbl tbody td { color:var(--fg); font-weight:600; text-align:left; padding:0.32rem 1.5rem 0.32rem 0; border-bottom:1px solid color-mix(in oklab, var(--fg) 7%, transparent); }
.qc-subj-tbl tbody tr:last-child th, .qc-subj-tbl tbody tr:last-child td { border-bottom:0; }
/* Cap the scraped-value column so a long field (e.g. Zillow's description) wraps instead of
   stretching the table and shoving the Report column to the far right. */
.qc-subj-tbl tbody td { max-width:15rem; overflow-wrap:anywhere; }
.qc-subj-tbl th:last-child, .qc-subj-tbl td:last-child { padding-right:0; }
/* Higher specificity than `.qc-subj-tbl tbody td` so the match colors actually win. */
.qc-subj-tbl .qc-subj__rpt--hit  { color:#2fa35a; }   /* report matches the scraped value → green */
.qc-subj-tbl .qc-subj__rpt--miss { color:#dc5b57; }   /* report differs → red */
/* Market comparison — compact panel of Zillow/Redfin triggers; detail opens in a HUD. */
.qc-mkt-triggers { display:flex; gap:1rem; flex-wrap:wrap; }
.qc-mkt-trigger { display:flex; align-items:center; gap:0.55rem; flex:1 1 14rem; padding:0.7rem 1rem;
  border:1px solid var(--border, rgba(127,127,127,0.2)); border-radius:10px; color:var(--fg);
  background:color-mix(in oklab, var(--fg) 3%, transparent); cursor:pointer; font-size:0.95rem; text-align:left; }
.qc-mkt-trigger:hover { border-color:var(--accent, #3ea6ff); background:color-mix(in oklab, var(--fg) 6%, transparent); }
.qc-mkt-trigger__name { font-weight:600; }
.qc-mkt-trigger .qc-ext-chev { margin-left:auto; width:18px; height:18px; opacity:0.55; }
.qc-mkthud { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:1.5rem; }
.qc-mkthud[hidden] { display:none; }
.qc-mkthud__backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.72); backdrop-filter:blur(3px); cursor:zoom-out; }
/* Box is a fixed frame (overflow visible so the close button can sit outside its corner); the
   title stays pinned and only the body scrolls, so the X never scrolls away. */
.qc-mkthud__box { position:relative; z-index:1; width:min(96vw, 62rem); max-height:90vh; overflow:visible;
  display:flex; flex-direction:column;
  background:var(--surface, #fff); color:var(--fg); border:1px solid var(--border, rgba(127,127,127,0.2)); border-radius:12px;
  padding:1.5rem; box-shadow:0 24px 60px -12px rgba(0,0,0,0.5); }
.qc-mkthud__close { position:absolute; top:-14px; right:-14px; z-index:3; width:36px; height:36px; border-radius:999px;
  border:1px solid var(--border, rgba(127,127,127,0.25)); background:var(--surface, #fff); color:var(--fg); font-size:20px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 14px -2px rgba(0,0,0,0.45); }
.qc-mkthud__close:hover { background:color-mix(in oklab, var(--fg) 8%, var(--surface, #fff)); border-color:var(--accent, #3ea6ff); }
.qc-mkthud__title { margin:0 0 1.1rem; padding:0 0 0.85rem 0; border-bottom:1px solid var(--border, rgba(127,127,127,0.2));
  font-size:1.25rem; font-weight:700; display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap; flex:0 0 auto; }
.qc-mkthud__body { display:flex; flex-direction:column; gap:1.5rem; flex:1 1 auto; min-height:0; overflow-y:auto; margin-right:-0.5rem; padding-right:0.5rem; }
/* Each logical block (Subject, Facts, Comps) reads as its own labelled section. */
.qc-mkthud .qc-comps__head { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.05em; font-weight:700;
  color:var(--fg-muted, var(--text-muted)); margin:0 0 0.55rem; }
.qc-mkthud .qc-ext-link { display:inline-flex; align-items:center; gap:0.25rem; float:none; margin:0; padding:0.28rem 0.75rem;
  border:1px solid var(--border, rgba(127,127,127,0.25)); border-radius:999px; font-size:0.8rem; align-self:flex-start; }
.qc-mkthud .qc-ext-link:hover { text-decoration:none; border-color:var(--accent, #3ea6ff); color:var(--accent, #3ea6ff); }

/* Compare table on the left, Zillow description filling the remaining width on the right,
   both aligned to the top. */
.qc-subj-flex { display:flex; gap:1.5rem; align-items:flex-start; flex-wrap:wrap; }
.qc-subj-desc { flex:1 1 16rem; min-width:14rem; }
.qc-subj-desc__label { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.03em; color:var(--fg-muted, var(--text-muted)); font-weight:600; margin-bottom:0.25rem; }
.qc-subj-desc__text { font-size:0.85rem; line-height:1.45; color:var(--fg); overflow-wrap:anywhere; }

/* Full Facts & features / MLS details — a responsive grid of section cards. */
.qc-facts { border-top:1px solid var(--border, rgba(127,127,127,0.2)); padding-top:0.9rem; }
.qc-facts__sum { cursor:pointer; font-size:0.95rem; font-weight:700; color:var(--fg); list-style:none; display:flex; align-items:center; gap:0.5rem; }
.qc-facts__sum::-webkit-details-marker { display:none; }
.qc-facts__sum::before { content:"▸"; font-size:0.75rem; color:var(--fg-muted, var(--text-muted)); }
.qc-facts[open] .qc-facts__sum::before { content:"▾"; }
/* A grid of independent flex-stack columns (cards distributed server-side by height). This
   packs by height with no Grid tallest-row gaps AND renders exactly N columns cross-browser —
   column-count/multicol mis-renders these break-inside cards in Safari (see user-form-widgets). */
.qc-facts__body { margin-top:0.9rem; display:grid; grid-template-columns:repeat(3, 1fr); gap:0.85rem; align-items:start; }
.qc-facts__body--2 { grid-template-columns:repeat(2, 1fr); }
.qc-facts__body--1 { grid-template-columns:1fr; }
.qc-facts__col { display:flex; flex-direction:column; gap:0.85rem; min-width:0; }
@media (max-width:820px) { .qc-facts__body, .qc-facts__body--2 { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px) { .qc-facts__body, .qc-facts__body--2 { grid-template-columns:1fr; } }
.qc-facts__sec { border:1px solid var(--border, rgba(127,127,127,0.2)); border-radius:9px; padding:0.7rem 0.85rem;
  background:color-mix(in oklab, var(--fg) 2.5%, transparent); }
.qc-facts__sechead { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--fg-muted, var(--text-muted)); font-weight:700;
  padding-bottom:0.4rem; margin-bottom:0.45rem; border-bottom:1px solid var(--border, rgba(127,127,127,0.18)); }
.qc-facts__dl { display:grid; grid-template-columns:auto 1fr; gap:0.2rem 1rem; margin:0; font-size:0.85rem; }
.qc-facts__dl dt { color:var(--fg-muted, var(--text-muted)); }
.qc-facts__dl dd { margin:0; color:var(--fg); overflow-wrap:anywhere; }
/* Facts table reuses the subject-compare table, but inside a narrow card the columns must be
   tighter: a compact label column, small gaps, and word-wrapping that never breaks mid-word
   (so "SingleFamily" / "Frame/Avg" stay intact instead of splitting characters). */
/* table-layout:fixed pins the table to the card width (multicol columns are narrow), so a long
   value/label can never push the Report column past the card edge — it wraps instead. */
.qc-facts__tbl { font-size:0.85rem; width:100%; table-layout:fixed; }
.qc-facts__tbl th:first-child, .qc-facts__tbl td:first-child { width:38%; }
.qc-facts__tbl th:nth-child(3), .qc-facts__tbl td:nth-child(3) { width:22%; }
.qc-facts__tbl tbody th { white-space:normal; font-weight:400; max-width:7.5rem; }
.qc-facts__tbl th, .qc-facts__tbl td { padding-right:0.6rem; }
.qc-facts__tbl th:last-child, .qc-facts__tbl td:last-child { padding-right:0; }
.qc-facts__tbl tbody td { overflow-wrap:break-word; word-break:normal; }
/* Multi-line (comma-split) values make a row tall — keep the label + report cells at the top. */
.qc-facts__tbl tbody th, .qc-facts__tbl tbody td { vertical-align:top; }
/* Location Map Comps (AI62) — the comp-map image beside the per-bubble OCR table. */
.qc-compmap { display:flex; gap:1.25rem; align-items:flex-start; flex-wrap:wrap; margin-top:0.6rem; }
.qc-compmap__thumb { flex:0 0 auto; width:17rem; max-width:100%; padding:0; border:1px solid var(--border, rgba(127,127,127,0.2));
  border-radius:8px; overflow:hidden; background:none; cursor:zoom-in; }
.qc-compmap__thumb img { display:block; width:100%; height:auto; }
.qc-compmap__tblwrap { flex:1 1 20rem; min-width:0; overflow-x:auto; }
/* Scale the text with the viewport and tighten the inherited wide column padding so the table
   fits smaller browsers; only the address columns wrap. */
.qc-compmap__tbl { width:100%; font-size:clamp(0.72rem, 0.6rem + 0.5vw, 0.85rem); }
.qc-compmap__tbl thead th, .qc-compmap__tbl tbody th, .qc-compmap__tbl tbody td { padding-right:0.75rem; }
.qc-compmap__tbl tbody th, .qc-compmap__tbl tbody td { white-space:nowrap; }
/* Report + Map (OCR) address columns wrap instead of forcing horizontal overflow. */
.qc-compmap__tbl thead th:nth-child(3), .qc-compmap__tbl thead th:nth-child(4),
.qc-compmap__tbl tbody td:nth-child(3), .qc-compmap__tbl tbody td:nth-child(4) {
  white-space:normal; overflow-wrap:anywhere; min-width:7rem; max-width:14rem; }
/* Comp thumbnail in the first column (replaces the old "#" cell). */
.qc-compmap__thumbcell { white-space:nowrap; }
.qc-comp-thumb { display:inline-block; vertical-align:middle; width:4.5rem; height:3rem; padding:0; border-radius:6px; overflow:hidden;
  border:1px solid var(--border, rgba(127,127,127,0.25)); background:color-mix(in oklab, var(--fg) 4%, transparent); cursor:zoom-in;
  transition:box-shadow 0.12s ease, border-color 0.12s ease; }
.qc-comp-thumb img { display:block; width:100%; height:100%; object-fit:cover; }
.qc-comp-thumb:hover { border-color:var(--accent, #3ea6ff); box-shadow:0 0 0 2px color-mix(in oklab, var(--accent, #3ea6ff) 22%, transparent); }
/* Per-comp Zillow / Redfin deep-link buttons. */
.qc-compmap__links { white-space:nowrap; }
.qc-complink { display:inline-block; margin:0 0.25rem 0.2rem 0; padding:0.14rem 0.5rem; border-radius:999px; font-size:0.72rem; font-weight:600;
  text-decoration:none; border:1px solid transparent; white-space:nowrap; }
.qc-complink--z { color:#1277e1; background:color-mix(in oklab, #1277e1 12%, transparent); }
.qc-complink--z:hover { background:color-mix(in oklab, #1277e1 22%, transparent); }
.qc-complink--r { color:#a02b93; background:color-mix(in oklab, #a02b93 12%, transparent); }
.qc-complink--r:hover { background:color-mix(in oklab, #a02b93 22%, transparent); }
/* Click a comp row to expand the raw OCR bubble text. */
.qc-compmap__row[data-cm-toggle] { cursor:pointer; }
.qc-compmap__row[data-cm-toggle]:hover td { background:color-mix(in oklab, var(--fg) 5%, transparent); }
.qc-compmap__caret { display:inline-block; margin-right:0.4rem; color:var(--fg-muted, var(--text-muted)); transition:transform 0.12s ease; }
.qc-compmap__row.is-open .qc-compmap__caret { transform:rotate(90deg); }
/* Subject row: the appraised property, shown atop the comps (it sits on the same location map). */
.qc-compmap__row--subject td { background:color-mix(in oklab, var(--accent, #3b82f6) 8%, transparent);
  border-top:2px solid color-mix(in oklab, var(--accent, #3b82f6) 45%, transparent); }
.qc-compmap__subjtag { display:inline-block; margin-right:0.4rem; padding:0.05rem 0.4rem; border-radius:5px;
  font-size:0.62rem; font-weight:800; text-transform:uppercase; letter-spacing:0.05em; vertical-align:middle;
  color:#fff; background:color-mix(in oklab, var(--accent, #3b82f6) 82%, #000); }
.qc-compmap__detail td { white-space:normal; background:color-mix(in oklab, var(--fg) 3.5%, transparent); padding:0.55rem 0.7rem; }
.qc-compmap__bubblewrap { display:flex; flex-direction:column; gap:0.5rem; align-items:flex-start; }
.qc-compmap__bubbleimg { max-width:min(100%, 26rem); height:auto; border:1px solid var(--border, rgba(127,127,127,0.25)); border-radius:6px; background:#fff; }
.qc-compmap__bubble { font-size:0.82rem; color:var(--fg); overflow-wrap:anywhere; }
.qc-compmap__bubble-label { display:inline-block; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.04em; font-weight:700; color:var(--fg-muted, var(--text-muted)); margin-right:0.5rem; }
/* Match-tally badge in the Zillow/Redfin card summaries. */
.qc-ext-count.qc-match-badge { font-weight:600; }
.qc-ext-count.qc-match-badge--all  { color:#2fa35a; background:color-mix(in oklab, #2fa35a 15%, transparent); }
.qc-ext-count.qc-match-badge--some { color:#e0a52c; background:color-mix(in oklab, #e0a52c 16%, transparent); }
.qc-ext-count.qc-match-badge--none { color:#dc5b57; background:color-mix(in oklab, #dc5b57 15%, transparent); }
.qc-comps { margin-top:0.9rem; }
.qc-comps__head { font-size:0.85rem; font-weight:700; letter-spacing:0.02em; margin-bottom:0.4rem; }
/* Small caption for the comparables match threshold (replaces the old "map bubbles · report comps · …" line). */
.qc-compmap__thr { font-size:0.68rem; font-weight:600; text-transform:uppercase; letter-spacing:0.05em;
  color:var(--muted); margin-bottom:0.5rem; }
/* Report-comps-in-Redfin match summary + list. */
.qc-rcomps { margin:0.6rem 0 0.2rem; }
.qc-rcomps__count { font-weight:700; padding:0.05rem 0.45rem; border-radius:999px; margin-left:0.25rem; }
.qc-rcomps__count--all  { color:#2fa35a; background:color-mix(in oklab, #2fa35a 15%, transparent); }
.qc-rcomps__count--some { color:#e0a52c; background:color-mix(in oklab, #e0a52c 16%, transparent); }
.qc-rcomps__count--none { color:#dc5b57; background:color-mix(in oklab, #dc5b57 15%, transparent); }
.qc-rcomps__list { list-style:none; margin:0.4rem 0 0; padding:0; display:flex; flex-direction:column; gap:0.15rem; }
.qc-rcomp { font-size:0.82rem; }
.qc-rcomp--hit,  .qc-rcomp--hit  a { color:#2fa35a; }   /* matched → green (links too) */
.qc-rcomp--miss { color:#dc5b57; }                       /* not matched → red */
.qc-rcomp a { text-decoration:none; }
.qc-rcomp a:hover { text-decoration:underline; }
/* Fixed layout + fitted column widths so the table always fits the card — no side scroll.
   Font scales down a touch on narrow cards; the address wraps instead of overflowing. */
.qc-comps__scroll { max-height:18rem; overflow-x:hidden; overflow-y:auto; border:1px solid var(--border, rgba(127,127,127,0.15)); border-radius:var(--radius-input, 8px); }
.qc-comps__table { width:100%; table-layout:fixed; border-collapse:collapse; font-size:clamp(0.62rem, 1.35vw, 0.78rem); }
.qc-comps__table th, .qc-comps__table td { padding:0.3rem 0.45rem; overflow:hidden; text-overflow:ellipsis; }
.qc-comps__table th { position:sticky; top:0; background:var(--surface); text-align:left; font-weight:600; color:var(--fg-muted, var(--text-muted)); border-bottom:1px solid var(--border, rgba(127,127,127,0.15)); }
.qc-comps__table td { border-bottom:1px solid var(--border, rgba(127,127,127,0.10)); }
.qc-comps__table tr:last-child td { border-bottom:0; }
.qc-comps__table th:nth-child(1), .qc-comps__table td:nth-child(1) { width:30%; }
.qc-comps__table th:nth-child(2), .qc-comps__table td:nth-child(2) { width:16%; }
.qc-comps__table th:nth-child(3), .qc-comps__table td:nth-child(3) { width:8%; }
.qc-comps__table th:nth-child(4), .qc-comps__table td:nth-child(4) { width:8%; }
.qc-comps__table th:nth-child(5), .qc-comps__table td:nth-child(5) { width:14%; }
.qc-comps__table th:nth-child(6), .qc-comps__table td:nth-child(6) { width:12%; }
.qc-comps__table th:nth-child(7), .qc-comps__table td:nth-child(7) { width:12%; }
.qc-comps__addr { white-space:normal; word-break:break-word; }
.qc-comps__addr a { color:var(--accent); text-decoration:none; }
.qc-comps__addr a:hover { text-decoration:underline; }
@media (max-width:900px) { .qc-ext-row { grid-template-columns:1fr; } }
.qc-rev-row { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; align-items:start; }
.qc-rev-row[hidden] { display:none; } /* class display:grid would otherwise defeat the hidden attr */
.qc-rev-row.qc-revealing { animation:qcRevealIn 240ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes qcRevealIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .qc-rev-row.qc-revealing { animation:none; } }
@media (max-width:900px) { .qc-rev-row { grid-template-columns:1fr; } }
.qc-tpl-list { display:flex; flex-direction:column; max-height:24rem; overflow-y:auto; }
.qc-tpl { display:flex; align-items:flex-start; gap:0.5rem; border-bottom:1px solid var(--border, rgba(127,127,127,0.14)); }
.qc-tpl:last-child { border-bottom:0; }
.qc-tpl__pick { display:flex; gap:0.65rem; align-items:flex-start; flex:1 1 auto; min-width:0; padding:0.7rem 0; cursor:pointer; }
.qc-tpl__pick > input[type=checkbox] { flex:0 0 auto; width:1.15rem; height:1.15rem; margin-top:0.15rem; }
.qc-tpl__delform { margin:0.7rem 0 0; flex:0 0 auto; }
.qc-tpl__del { border:0; background:transparent; color:var(--text-muted, #8a8f98); font-size:1.15rem;
  line-height:1; cursor:pointer; padding:0.1rem 0.3rem; border-radius:var(--radius-input, 6px); }
.qc-tpl__del:hover { color:var(--danger, #dc5b57); background:color-mix(in oklab, currentColor 12%, transparent); }
.qc-tpl-new { margin-top:0.75rem; }
.qc-tpl-new > summary { cursor:pointer; color:var(--accent); font-size:0.88rem; font-weight:600; list-style:none; }
.qc-tpl-new > summary::-webkit-details-marker { display:none; }
.qc-tpl-form { display:flex; flex-direction:column; gap:0.5rem; margin-top:0.6rem; }
.qc-tpl-form .btn { align-self:flex-start; }
.qc-selected { display:flex; flex-direction:column; }
.qc-sel { display:flex; align-items:baseline; gap:0.6rem; padding:0.5rem 0; border-bottom:1px solid var(--border, rgba(127,127,127,0.14)); }
.qc-sel:last-child { border-bottom:0; }
.qc-sel__kind { flex:0 0 auto; font-size:0.72rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  padding:0.1rem 0.4rem; border-radius:999px; color:#fff; }
.qc-sel__kind--rule { background:#3a6ea5; }
.qc-sel__kind--template { background:#e0a52c; }
.qc-profile-pick { margin:0; }
/* Right-side group: on the address row (wide) history sits BELOW the picker; when the
   summary wraps to a narrow screen they go back to sitting inline. */
.qc-summary__aside { display:flex; flex-direction:column; align-items:flex-end; gap:0.4rem; }
/* When the aside drops below the address (JS adds .qc-summary--wrapped), span the row:
   Rule Profile left, QC history right. */
.qc-summary--wrapped .qc-summary__aside { flex-direction:row; align-items:center; justify-content:space-between; width:100%; gap:0.9rem; }
.qc-history-link { font-size:0.82rem; color:var(--accent); text-decoration:none; white-space:nowrap; }
.qc-history-link:hover { text-decoration:underline; }
/* QC history page */
.qc-hist-counts { display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:0.75rem; }
.qc-hist-count { font-size:0.8rem; font-weight:700; padding:0.15rem 0.5rem; border-radius:999px; color:#fff; }
.qc-hist-count--error { background:#dc5b57; } .qc-hist-count--warn { background:#e0a52c; } .qc-hist-count--pass { background:#4caa54; }
.qc-hist-det { margin:0.4rem 0; }
.qc-hist-det > summary { cursor:pointer; font-weight:600; font-size:0.9rem; color:var(--fg); padding:0.3rem 0; }
.qc-profile-pick__label { display:inline-flex; align-items:center; gap:0.5rem; font-size:0.85rem; color:var(--fg-muted); }
.qc-rev-text { width:100%; min-height:18rem; resize:vertical; font-size:0.9rem; line-height:1.5; }
.qc-rev-actions { margin-top:0.6rem; }
/* QC decision buttons + the "Other" status chooser modal. */
.qc-decision-head { display:flex; align-items:center; justify-content:space-between; gap:1rem;
  width:100%; background:transparent; border:0; cursor:pointer; text-align:left; color:inherit;
  padding:0.7rem 0.85rem; margin:0 -0.85rem; border-radius:var(--radius-input, 8px);
  transition:background 140ms ease; }
.qc-decision-head:hover { background:color-mix(in oklab, var(--fg) 5%, transparent); }
.qc-decision-head:focus-visible { outline:none; box-shadow:0 0 0 4px var(--focus-glow); }
.qc-decision-heading { display:flex; flex-direction:column; gap:0.15rem; min-width:0; }
.qc-decision-hint { font-size:12.5px; color:var(--fg-muted); }
.qc-decision-chev { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:2rem; height:2rem; border-radius:999px; color:var(--fg-muted);
  background:color-mix(in oklab, var(--fg) 7%, transparent);
  transition:transform 160ms ease, background 140ms ease, color 140ms ease; }
.qc-decision-head:hover .qc-decision-chev { color:var(--fg); background:color-mix(in oklab, var(--fg) 13%, transparent); }
.qc-decision-head[aria-expanded="true"] .qc-decision-chev { transform:rotate(90deg); }
.qc-decision-btns { display:flex; flex-wrap:wrap; gap:0.75rem; margin-top:0.9rem; }
.qc-decision-btns[hidden] { display:none; } /* class display:flex would otherwise defeat the hidden attr */
.qc-decision-btns .btn { flex:0 0 auto; color:#fff; border:0; }
.qc-decision-btns .btn:hover { filter:brightness(0.95); color:#fff; }
.qc-decision-btns [data-qc-decision="revision"]  { background:#e0a52c; } /* amber — caution */
.qc-decision-btns [data-qc-decision="completed"] { background:#4caa54; } /* green — done */
.qc-decision-btns [data-qc-decision="other"]     { background:#3a6ea5; } /* blue — neutral */
.qc-decision-form { margin:0; display:inline-flex; }
.qc-modal__optform { margin:0; }
.qc-modal__optform .btn { width:100%; justify-content:flex-start; text-align:left; }
.qc-modal { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:1rem; }
.qc-modal[hidden] { display:none; }
.qc-modal__backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.5); }
.qc-modal__box { position:relative; z-index:1; width:min(92vw, 26rem); display:flex; flex-direction:column; gap:0.75rem;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius, 10px);
  padding:1.25rem; box-shadow:0 12px 44px rgba(0,0,0,0.35); }
.qc-modal__title { margin:0; font-size:1.05rem; }
.qc-modal__opts { display:flex; flex-direction:column; gap:0.5rem; }
.qc-modal__opts .btn { width:100%; justify-content:flex-start; text-align:left; }
.qc-modal__cancel { align-self:flex-end; background:transparent; border:0; color:var(--text-muted, #8a8f98);
  cursor:pointer; font-size:0.88rem; padding:0.2rem 0.3rem; }
.qc-modal__cancel:hover { color:var(--text); }
/* Rule Profiles — create form, builder toolbar, and the section/rule checkbox grid. */
.qcp-create { display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-end; }
.qcp-inline { display:inline; margin:0; }
.qcp-toolbar { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
  position:sticky; top:var(--topbar-h, 4.25rem); z-index:5; }
.qcp-toolbar__left, .qcp-toolbar__right { display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap; }
.qcp-count { font-weight:600; }
.qcp-section { border-top:1px solid var(--border, rgba(127,127,127,0.14)); padding:0.6rem 0; }
.qcp-section:first-child { border-top:0; }
.qcp-section__head { display:flex; align-items:center; gap:0.6rem; cursor:pointer; font-weight:600; }
.qcp-section__name { color:var(--fg); }
.qcp-rules { display:flex; flex-direction:column; margin:0.4rem 0 0 1.7rem; }
.qcp-rule { display:flex; align-items:baseline; gap:0.7rem; padding:0.4rem 0; min-width:0;
  border-top:1px solid var(--border, rgba(127,127,127,0.10)); }
.qcp-rule:first-child { border-top:0; }
.qcp-rule__pick { display:flex; align-items:baseline; gap:0.7rem; flex:1 1 auto; min-width:0; cursor:pointer; }
.qcp-rule__pick > input[type=checkbox] { flex:0 0 auto; align-self:flex-start; margin-top:0.15rem; width:1.1rem; height:1.1rem; }
.qcp-rule__code { flex:0 0 auto; min-width:4rem; font-size:0.82rem; font-weight:600; color:var(--fg); }
.qcp-rule__msg { flex:1 1 auto; min-width:0; font-size:0.86rem; color:var(--fg-muted, var(--text-muted)); line-height:1.4; }
.qcp-rule__pick .uad-sev { flex:0 0 auto; margin-left:auto; }
.qcp-rule__edit { flex:0 0 auto; align-self:center; font-size:0.78rem; color:var(--accent); text-decoration:none; white-space:nowrap; }
.qcp-rule__edit:hover { text-decoration:underline; }
.qcp-rule__edit.is-over { font-weight:700; }
.qcp-rule__edit svg { width:16px; height:16px; display:block; }
/* Rule filter (data-qcp-search) hides rows/sections but keeps them in the form; the
   [hidden] attribute is defeated by display:flex, so force it here. */
.qcp-rule[hidden] { display:none; }
.qcp-section[hidden] { display:none; }
.qcp-search { min-width:12rem; }
/* Order timeline — vertical timeline: a connector line threaded through colour-coded
   event nodes, with status pills and a hover highlight. Replaces the old bordered rows. */
.otl { list-style:none; margin:0.25rem 0 0; padding:0; position:relative; }
.otl__item { position:relative; padding:0 0 1.1rem 1.9rem; }
.otl__item::before { content:''; position:absolute; left:0.44rem; top:0.6rem; bottom:-0.35rem; width:2px;
  background:var(--border, rgba(127,127,127,0.25)); }
.otl__item:last-child::before { display:none; }
.otl__node { position:absolute; left:0; top:0.3rem; width:0.9rem; height:0.9rem; border-radius:50%;
  background:var(--surface, #fff); border:2px solid var(--fg-muted, #94a3b8); box-shadow:0 0 0 3px var(--surface, #fff); }
.otl__body { border-radius:10px; padding:0.1rem 0.4rem 0.15rem 0.1rem; transition:background 0.12s ease; }
.otl__item:hover .otl__body { background:color-mix(in oklab, var(--fg-muted, #888) 8%, transparent); }
.otl__head { display:flex; flex-wrap:wrap; align-items:center; gap:0.4rem 0.55rem; }
.otl__type { font-weight:600; font-size:0.8rem; padding:0.08rem 0.5rem; border-radius:999px; line-height:1.55;
  background:color-mix(in oklab, var(--fg-muted, #888) 15%, transparent); color:var(--text); }
.otl__states { display:inline-flex; align-items:center; gap:0.3rem; }
.otl__pill { font-size:0.72rem; padding:0.05rem 0.45rem; border-radius:999px; white-space:nowrap;
  background:color-mix(in oklab, var(--fg-muted, #888) 12%, transparent); color:var(--fg-muted, var(--text-muted)); }
.otl__pill--to { color:var(--text); font-weight:600; }
.otl__arrow { color:var(--fg-muted, var(--text-muted)); font-size:0.8rem; }
.otl__time { margin-left:auto; font-size:0.75rem; color:var(--fg-muted, var(--text-muted)); font-variant-numeric:tabular-nums; }
.otl__reason { margin:0.3rem 0 0; font-size:0.86rem; line-height:1.4; color:var(--text); overflow-wrap:anywhere; }
.otl__meta { margin-top:0.2rem; font-size:0.7rem; color:var(--fg-muted, var(--text-muted)); text-transform:uppercase; letter-spacing:0.04em; }
.otl-empty { color:var(--fg-muted, var(--text-muted)); padding:0.75rem 0; font-size:0.9rem; }
/* per-category colour on the node + the type chip */
.otl--created .otl__node { border-color:#16a34a; } .otl--created .otl__type { background:color-mix(in oklab,#16a34a 20%,transparent); color:#15803d; }
.otl--state   .otl__node { border-color:#3b82f6; } .otl--state   .otl__type { background:color-mix(in oklab,#3b82f6 20%,transparent); color:#2563eb; }
.otl--hold    .otl__node { border-color:#f59e0b; } .otl--hold    .otl__type { background:color-mix(in oklab,#f59e0b 22%,transparent); color:#b45309; }
.otl--cancel  .otl__node { border-color:#ef4444; } .otl--cancel  .otl__type { background:color-mix(in oklab,#ef4444 20%,transparent); color:#b91c1c; }
.otl--resume  .otl__node { border-color:#14b8a6; } .otl--resume  .otl__type { background:color-mix(in oklab,#14b8a6 22%,transparent); color:#0f766e; }
.otl--assign  .otl__node { border-color:#8b5cf6; } .otl--assign  .otl__type { background:color-mix(in oklab,#8b5cf6 20%,transparent); color:#7c3aed; }
.otl--auto    .otl__node { border-color:#a855f7; } .otl--auto    .otl__type { background:color-mix(in oklab,#a855f7 20%,transparent); color:#9333ea; }
.otl--vl      .otl__node { border-color:#6b7280; } .otl--vl      .otl__type { background:color-mix(in oklab,#6b7280 20%,transparent); color:#4b5563; }
.oqueue-empty { color:var(--text-muted); padding:0.6rem 0; }

/* --- AMC panel (Phase 2a) --- */
.pnl-grid { display:grid; grid-template-columns:2fr 1fr; gap:1.5rem; }
@media (max-width: 720px) { .pnl-grid { grid-template-columns:1fr; } }
.pnl-dl { display:grid; grid-template-columns:auto 1fr; gap:0.4rem 1rem; margin:0; }
.pnl-dl dt { color:var(--text-muted); font-size:0.85rem; }
.pnl-dl dd { margin:0; }
.pnl-form { display:flex; flex-wrap:wrap; gap:0.5rem; align-items:center; margin-top:0.75rem; }
.pnl-form label { display:inline-flex; gap:0.35rem; align-items:center; font-size:0.85rem; color:var(--text-muted); }
.pnl-note { color:var(--text-muted); font-size:0.85rem; margin:0.5rem 0 0; }
.pnl-exp30 { background:rgba(239,68,68,0.18); color:#b91c1c; }
.pnl-exp60 { background:rgba(249,115,22,0.18); color:#c2410c; }
.pnl-exp90 { background:rgba(234,179,8,0.18); color:#b45309; }
.pnl-excl  { background:rgba(239,68,68,0.14); color:#b91c1c; }

/* --- AMC assignment (Phase 2b) --- */
.oassign-score { font-variant-numeric: tabular-nums; text-align:right; }
.oassign-h3 { font-size:0.95rem; margin:1rem 0 0.35rem; }
.oassign-note { color:var(--text-muted); font-size:0.85rem; margin:0.4rem 0 0; }
.ohub-doc-note { color:var(--text-muted); font-size:0.85rem; margin:0 0 0.75rem; }
.oassign-live { padding:0.6rem 0; border-bottom:1px solid var(--border, rgba(127,127,127,0.15)); }
.oassign-live p { margin:0 0 0.5rem; }
.oassign-excluded { margin-top:0.75rem; color:var(--text-muted); font-size:0.85rem; }
.oassign-excluded summary { cursor:pointer; }
.oassign-excluded ul { margin:0.5rem 0 0; padding-left:1.1rem; }
.oqueue-count { font-size:0.8rem; font-weight:400; color:var(--text-muted); margin-left:0.5rem; }
.oqueue-pager { display:flex; flex-wrap:wrap; gap:0.75rem; align-items:center; justify-content:space-between;
  margin-top:0.75rem; color:var(--text-muted); font-size:0.85rem; }
.oqueue-pager__links { display:inline-flex; gap:0.5rem; align-items:center; }

/* --- AMC comments (Phase 2 / slice 2) --- */
/* Comments / messages — a modern thread: avatar + speech bubble per entry. */
.ocomments { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.85rem; }
.ocomment { display:flex; gap:0.6rem; align-items:flex-start; }
.ocomment__avatar { flex:0 0 auto; width:2rem; height:2rem; border-radius:50%; display:grid; place-items:center;
  font-size:0.8rem; font-weight:700; color:#fff; user-select:none; }
.ocomment__avatar--staff     { background:#6366f1; }
.ocomment__avatar--client    { background:#3b82f6; }
.ocomment__avatar--appraiser { background:#f59e0b; }
.ocomment__avatar--system    { background:#94a3b8; }
.ocomment__main { flex:1 1 auto; min-width:0; }
.ocomment__head { display:flex; flex-wrap:wrap; align-items:center; gap:0.35rem 0.5rem; margin-bottom:0.25rem; }
.ocomment__author { font-weight:600; font-size:0.85rem; }
.ocomment__role { color:var(--fg-muted, var(--text-muted)); font-size:0.75rem; }
.ocomment__tag { font-size:0.7rem; padding:0.05rem 0.45rem; border-radius:999px; background:color-mix(in oklab, var(--fg-muted, #888) 16%, transparent); color:var(--text); }
.ocomment__vis { font-size:0.68rem; padding:0.05rem 0.45rem; border-radius:999px; font-weight:600; }
.ocomment__vis--client    { background:color-mix(in oklab,#3b82f6 18%,transparent); color:#2563eb; }
.ocomment__vis--appraiser { background:color-mix(in oklab,#f59e0b 20%,transparent); color:#b45309; }
.ocomment__vis--staff     { background:color-mix(in oklab,var(--fg-muted,#888) 16%,transparent); color:var(--fg-muted,var(--text-muted)); }
.ocomment__time { margin-left:auto; color:var(--fg-muted,var(--text-muted)); font-size:0.72rem; font-variant-numeric:tabular-nums; }
.ocomment__bubble { background:color-mix(in oklab, var(--fg-muted,#888) 8%, transparent); border:1px solid var(--border, rgba(127,127,127,0.15));
  border-radius:12px; border-top-left-radius:3px; padding:0.55rem 0.75rem; font-size:0.9rem; line-height:1.45; color:var(--text); overflow-wrap:anywhere; }
.ocomment--unread .ocomment__bubble { border-color:color-mix(in oklab, var(--accent,#3b82f6) 45%, var(--border)); background:color-mix(in oklab, var(--accent,#3b82f6) 8%, transparent); }
.ocomment--unread .ocomment__author::after { content:''; display:inline-block; width:0.5rem; height:0.5rem; margin-left:0.35rem;
  border-radius:50%; background:var(--accent,#3b82f6); vertical-align:middle; }
.ocomment__reads { font-size:0.72rem; color:var(--fg-muted,var(--text-muted)); margin-top:0.3rem; }
.ocomment__unread { display:inline-block; margin-top:0.3rem; }
.ocomment-empty { color:var(--fg-muted,var(--text-muted)); padding:0.75rem 0; font-size:0.9rem; }
.ocomment-form { margin-top:1rem; }
.ocomment-form textarea { width:100%; }
.ocomment-form__row { display:flex; flex-wrap:wrap; gap:0.5rem; align-items:center; margin-top:0.4rem; }
.ocomment-form__row label { display:inline-flex; gap:0.35rem; align-items:center; font-size:0.85rem; color:var(--text-muted); }
/* Ownership: role-typed reps + watchers (Slice 3) */
.oreps { display:grid; grid-template-columns:max-content minmax(6rem,1fr) max-content; gap:0.5rem 0.9rem; align-items:center; }
.orep { display:contents; }
.orep__label { font-weight:600; font-size:0.85rem; white-space:nowrap; }
.orep__holder { color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.orep__holder em { color:var(--text-muted); opacity:0.7; }
.orep__controls { display:flex; gap:0.4rem; align-items:center; justify-self:end; }
.orep__form { display:inline-flex; gap:0.4rem; align-items:center; }
.orep__controls select { width:12.5rem; }
/* Watchers block keeps the old inline layout */
.oreps__watchers { display:flex; flex-wrap:wrap; align-items:center; gap:0.6rem; margin-top:0.6rem; padding-top:0.5rem; border-top:1px solid var(--border, #eee); }
.oreps__watchers .orep__label { min-width:9rem; }
.oreps__watchers { display:flex; flex-wrap:wrap; align-items:center; gap:0.4rem; margin-top:0.6rem; }
/* Manual intake form (Slice 3b) */
.ointake__group { border:1px solid var(--border, #eee); border-radius:8px; padding:0.75rem 1rem 1rem; margin:0 0 1rem; }
.ointake__group legend { font-weight:600; font-size:0.85rem; padding:0 0.4rem; color:var(--text-muted); }
.ointake__row { display:flex; flex-wrap:wrap; gap:0.75rem; margin-top:0.5rem; }
.ointake__row--checks { gap:1.25rem; align-items:center; }
.ointake__row--checks label { display:inline-flex; gap:0.4rem; align-items:center; font-size:0.9rem; }
.ointake__field { display:flex; flex-direction:column; gap:0.25rem; flex:1 1 12rem; min-width:8rem; }
.ointake__field--wide { flex-basis:100%; }
.ointake__field--sm { flex:0 0 6rem; min-width:5rem; }
.ointake__field span { font-size:0.8rem; color:var(--text-muted); }
.ointake__field em { color:var(--danger, #c0392b); font-style:normal; }
.ointake__actions { display:flex; gap:0.6rem; align-items:center; margin-top:0.5rem; }
/* Tabbed order hub (Slice 3c) */
.ohub-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:0.75rem; flex-wrap:wrap; }
.ohub-head .card__title { margin:0; }
.ohub-tabcount { display:inline-block; min-width:1.3em; padding:0 0.4em; border-radius:1em; font-size:0.72rem; line-height:1.5; text-align:center; background:var(--border, #e5e7eb); color:var(--text-muted); vertical-align:middle; }
/* QC review (Phase 3) */
.qcf--closed { opacity:0.55; }
.qc-finding-form { margin-top:0.75rem; }
.qc-finding-form textarea { width:100%; margin-top:0.4rem; }
.qc-outcomes { flex-direction:column; align-items:stretch; gap:0.6rem; margin-top:1rem; padding-top:0.75rem; border-top:1px solid var(--border, #eee); }
.qc-outcomes .oaction-form { display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; }
.qc-outcomes .oaction-form .input { flex:1 1 14rem; }

/* Theme-aware form controls for the AMC views. Every AMC input/select/textarea uses
   class="input" (+ optional .input--sm); previously that class had NO styling, so the
   controls fell back to raw UA defaults (black in dark mode) and ignored the theme. This
   mirrors the framework's own .field__input, driven entirely by the theme CSS variables. */
.input {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: 0.55rem 0.7rem;
  background: var(--surface-2);
  border: 1px solid var(--input-outline, var(--border));
  border-radius: var(--radius-input, 8px);
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  color: var(--fg);
  color-scheme: light dark;   /* native <select>/<input type=date> popups follow the theme */
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.input::placeholder { color: var(--fg-muted, var(--text-muted, #8a8f98)); }
.input:hover { border-color: color-mix(in oklab, var(--focus, #3b82f6) 25%, var(--input-outline, var(--border))); }
.input:focus {
  outline: none;
  border-color: var(--focus, #3b82f6);
  box-shadow: 0 0 0 3px var(--focus-glow, color-mix(in oklab, var(--focus, #3b82f6) 25%, transparent));
  background-color: var(--surface);   /* background-color, not the shorthand, so a select keeps its chevron */
}
.input:disabled { opacity: 0.6; cursor: not-allowed; }
/* Inline/compact controls (queue filters, action rows) size to content instead of full width. */
.input--sm { width: auto; max-width: 100%; padding: 0.4rem 0.55rem; font-size: 13px; }
textarea.input { min-height: 3.25rem; resize: vertical; }

/* Native <select> renders the OS widget even with colors set — strip the appearance and draw
   our own chevron so selects match the inputs and look modern in both themes. */
select.input {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%2394a3b8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 11px 8px;
}
select.input::-ms-expand { display: none; }
select.input.input--sm { padding-right: 1.7rem; background-position: right 0.5rem center; }
.ohub-head-actions { display:flex; gap:0.4rem; align-items:center; flex-wrap:wrap; }
/* Operational dashboard */
.dash-stats { display:grid; grid-template-columns:repeat(auto-fill,minmax(9rem,1fr)); gap:0.75rem; }
.dash-stat { display:flex; flex-direction:column; gap:0.15rem; padding:0.85rem 1rem; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; text-decoration:none; color:var(--fg); transition:border-color 140ms ease; }
a.dash-stat:hover { border-color:var(--focus, #3b82f6); }
.dash-stat__n { font-size:1.7rem; font-weight:700; line-height:1; }
.dash-stat__n--alert { color:var(--danger, #d9534f); }
.dash-stat__l { font-size:0.78rem; color:var(--fg-muted, var(--text-muted)); }
.dash-bar { display:flex; align-items:center; gap:0.6rem; margin:0.35rem 0; }
.dash-bar__l { flex:0 0 11rem; font-size:0.85rem; }
.dash-bar__track { flex:1; height:0.7rem; background:var(--surface-2); border-radius:1rem; overflow:hidden; }
.dash-bar__fill { display:block; height:100%; background:var(--focus, #3b82f6); border-radius:1rem; }
.dash-bar__n { flex:0 0 2.5rem; text-align:right; font-variant-numeric:tabular-nums; font-size:0.85rem; }
.dash-cal { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.dash-cal__dow { text-align:center; font-size:0.72rem; color:var(--fg-muted, var(--text-muted)); padding:0.25rem 0; font-weight:600; }
.dash-cal__cell { aspect-ratio:1/1; min-height:4.2rem; padding:0.3rem; border:1px solid var(--border); border-radius:8px; background:var(--surface); display:flex; flex-direction:column; gap:0.2rem; overflow:hidden; }
.dash-cal__cell--empty { border:none; background:transparent; }
.dash-cal__day { font-size:0.78rem; color:var(--fg-muted, var(--text-muted)); }
.dash-cal__badge { font-size:0.7rem; padding:0.05rem 0.35rem; border-radius:1rem; text-decoration:none; white-space:nowrap; }
.dash-cal__badge--due { background:color-mix(in oklab, var(--focus, #3b82f6) 18%, transparent); color:var(--fg); }
.dash-cal__badge--done { background:color-mix(in oklab, #16a34a 20%, transparent); color:var(--fg); }
.report-list { list-style:none; padding:0; margin:0.3rem 0; } .report-list li { padding:0.35rem 0; border-bottom:1px solid var(--border); } .report-list a { text-decoration:none; }
.report-num { text-align:left; font-variant-numeric:tabular-nums; white-space:nowrap; }
.preview-banner { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:0 0 1rem; padding:0.5rem 0.9rem; border-radius:8px; background:color-mix(in oklab, #f59e0b 22%, transparent); border:1px solid color-mix(in oklab, #f59e0b 45%, transparent); font-weight:600; }
/* Pipeline board (kanban) */
.kb { display:flex; gap:0.75rem; overflow-x:auto; padding-bottom:0.75rem; align-items:flex-start;
  scrollbar-width:none; -ms-overflow-style:none; }   /* hide the horizontal scrollbar, keep scrolling */
.kb::-webkit-scrollbar { display:none; height:0; }
.kb-col { flex:0 0 15rem; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; display:flex; flex-direction:column; max-height:calc(100vh - 14rem); }
.kb-col--over { outline:2px dashed var(--focus, #3b82f6); outline-offset:-2px; }
.kb-col__head { padding:0.5rem 0.7rem; border-bottom:1px solid var(--border); position:sticky; top:0; }
.kb-col__title { font-weight:600; font-size:0.85rem; display:inline-flex; align-items:center; gap:0.4rem; }
.kb-col__dot { width:0.6rem; height:0.6rem; border-radius:50%; flex:0 0 auto; }
.kb-col__meta { display:block; font-size:0.72rem; color:var(--fg-muted, var(--text-muted)); font-variant-numeric:tabular-nums; }
.kb-col__body { padding:0.5rem; overflow-y:auto; display:flex; flex-direction:column; gap:0.5rem; min-height:3rem; }
.kb-card { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:0.5rem 0.6rem; cursor:grab; box-shadow:0 1px 2px rgba(0,0,0,0.06); user-select:none; -webkit-user-select:none; }
.kb-card a { user-select:text; }  /* keep the order-number link selectable/clickable */
.kb-card[draggable="true"]:active { cursor:grabbing; }
.kb-card--dragging { opacity:0.5; }
.kb-card__top { display:flex; align-items:center; gap:0.35rem; }
.kb-card__num { text-decoration:none; }
.kb-card__client { font-weight:600; font-size:0.85rem; margin-top:0.15rem; }
.kb-card__addr { font-size:0.78rem; margin-top:0.1rem; overflow-wrap:anywhere; }
.kb-card__meta { font-size:0.76rem; color:var(--fg-muted, var(--text-muted)); }
.kb-card__foot { display:flex; justify-content:space-between; font-size:0.76rem; margin-top:0.3rem; gap:0.5rem; }
.kb-card__foot span:first-child { color:var(--fg-muted, var(--text-muted)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kb-card__due { font-size:0.72rem; color:var(--fg-muted, var(--text-muted)); margin-top:0.2rem; }
.collapse { display:grid; grid-template-rows:1fr; transition:grid-template-rows 0.24s ease; }
.collapse.is-collapsed { grid-template-rows:0fr; }
.collapse__inner { overflow:hidden; min-height:0; }
.ointake-items { width:100%; border-collapse:collapse; margin:0.4rem 0; }
.ointake-items th { text-align:left; font-size:0.78rem; color:var(--fg-muted, var(--text-muted)); font-weight:600; padding:0.2rem 0.4rem; }
.ointake-items td { padding:0.2rem 0.4rem; vertical-align:top; }
.ointake-items__pos { color:var(--fg-muted, var(--text-muted)); font-variant-numeric:tabular-nums; width:1.5rem; }
.ointake-items .input--sm { width:100%; }
[data-cal-zone] { transition:opacity 0.12s ease; }
[data-cal-zone].is-cal-loading { opacity:0.55; pointer-events:none; }

/* --- panel compliance: agreements, applications, DNU --- */
/* A third flash tone: "act on this" without the alarm of an error. */
.flash--warn {
  border-color: color-mix(in oklab, var(--warn, #b7791f) 35%, var(--border));
  background: color-mix(in oklab, var(--warn, #b7791f) 8%, var(--surface-2));
}
/* Agreement text is stored as plain text and rendered escaped; this just makes a
   long legal document readable and keeps it scrollable instead of endless. */
.agreement-body {
  max-height: 26rem;
  overflow-y: auto;
  padding: 1rem;
  margin: 0.75rem 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  background: var(--surface-2);
  font-size: 14px;
  line-height: 1.6;
  white-space: normal;
}
/* A single button inside a table cell. NOT .pnl-form — that is the panel page's
   multi-field flex form, and overriding it to display:inline collapsed every
   add-form on the vendor page into one jammed row. Reusing an existing class name
   for a different layout is how that happened; this one is its own. */
.rowform { display:inline; }
/* Vendor capability flags. Shown ON and OFF deliberately: "not FHA approved" is
   information a desk needs before assigning, so hiding the false ones would make the
   list ambiguous — absent would read as unknown rather than no. */
.pnl-flags { display:flex; flex-wrap:wrap; gap:0.4rem 0.6rem; margin:0.75rem 0 0; }
.pnl-flag {
  display:inline-flex; align-items:center; gap:0.35rem;
  padding:0.25rem 0.6rem; border-radius:999px;
  border:1px solid var(--border); background:var(--surface-2);
  font-size:13px; color:var(--fg-muted, var(--text-muted));
}
.pnl-flag.is-on {
  border-color:color-mix(in oklab, var(--accent) 40%, var(--border));
  background:color-mix(in oklab, var(--accent) 10%, var(--surface-2));
  color:var(--fg);
}
.pnl-flag__mark { font-weight:700; opacity:0.75; }
.pnl-flag.is-on .pnl-flag__mark { color:var(--accent); opacity:1; }
.pnl-standing { display:flex; flex-wrap:wrap; gap:0.4rem; margin:0 0 0.5rem; }
/* Star rating. Radios stay in the DOM (keyboard + no-JS both work); the star is the label. */
.rate-avg { font-weight:700; font-size:1.05rem; }
.rate-pick { display:inline-flex; gap:0.1rem; }
.rate-star { cursor:pointer; font-size:1.25rem; line-height:1; color:var(--border); transition:color .1s ease; }
.rate-star input { position:absolute; opacity:0; width:0; height:0; }
.rate-star.is-on, .rate-pick:hover .rate-star { color:var(--accent); }
.rate-star:hover ~ .rate-star { color:var(--border); }
/* Assignment picker. The list is capped and scrolls — it pages in 25 at a time rather
   than rendering an eligible subset of 14k vendors into the DOM. */
.apick { position:relative; margin:0 0 1rem; }
.apick__label { display:block; font-size:13px; color:var(--fg-muted, var(--text-muted)); margin-bottom:0.25rem; }
.apick__form { display:flex; gap:0.5rem; align-items:center; }
.apick__input { flex:1 1 22rem; min-width:0; }
.apick__list {
  list-style:none; margin:0.35rem 0 0; padding:0;
  max-height:18rem; overflow-y:auto; display:none;
  border:1px solid var(--border); border-radius:var(--radius-input);
  background:var(--surface-1, var(--surface-2));
  box-shadow:0 8px 24px rgb(0 0 0 / 18%);
}
.apick.is-open .apick__list { display:block; }
.apick__item { padding:0.5rem 0.65rem; cursor:pointer; border-bottom:1px solid var(--border); }
.apick__item:last-child { border-bottom:0; }
.apick__item:hover { background:color-mix(in oklab, var(--accent) 10%, transparent); }
.apick__main { display:flex; align-items:center; gap:0.4rem; flex-wrap:wrap; }
.apick__name { font-size:14px; }
.apick__meta { font-size:12px; color:var(--fg-muted, var(--text-muted)); margin-top:1px; }
.apick__chip {
  font-size:11px; padding:0.05rem 0.4rem; border-radius:999px;
  border:1px solid var(--border); color:var(--fg-muted, var(--text-muted));
}
.apick__chip.is-good { border-color:color-mix(in oklab, var(--accent) 45%, var(--border)); color:var(--accent); }
.apick__chip.is-bad  { border-color:color-mix(in oklab, var(--danger) 45%, var(--border)); color:var(--danger); }
.apick__status { font-size:12px; color:var(--fg-muted, var(--text-muted)); margin:0.3rem 0 0; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* Honeypot on the public /join form. Kept out of the layout, off-screen and
   untabbable — a bot filling this in is discarded silently. */
.join-hp {
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}
.dnu-reason { margin-top:0.5rem; }
.badge--dnu {
  border-color: color-mix(in oklab, var(--danger) 40%, var(--border));
  background: color-mix(in oklab, var(--danger) 12%, var(--surface-2));
  color: var(--danger);
}
.app-meta { color:var(--fg-muted, var(--text-muted)); font-size:13px; }
/* "Read by X on Y" under a comment — quiet, it is provenance not content. */

/* Vendor autocomplete. The wrapping label is position:relative so the list can hang
   under the input without the surrounding grid reserving space for it. */
.ointake__field { position:relative; }
.vlookup {
  position:absolute;
  z-index:40;
  top:100%;
  left:0;
  right:0;
  margin:2px 0 0;
  padding:0;
  list-style:none;
  max-height:16rem;
  overflow-y:auto;
  background:var(--surface-1, var(--surface-2));
  border:1px solid var(--border);
  border-radius:var(--radius-input);
  box-shadow:0 8px 24px rgb(0 0 0 / 18%);
}
.vlookup__item {
  display:flex;
  flex-direction:column;
  gap:1px;
  padding:0.45rem 0.6rem;
  cursor:pointer;
  border-bottom:1px solid var(--border);
}
.vlookup__item:last-child { border-bottom:0; }
.vlookup__item.is-active,
.vlookup__item:hover { background:color-mix(in oklab, var(--accent) 12%, transparent); }
.vlookup__name { font-size:14px; }
.vlookup__meta { font-size:12px; color:var(--fg-muted, var(--text-muted)); }
.vlookup-hint { display:block; font-size:12px; color:var(--fg-muted, var(--text-muted)); min-height:1em; }

/* UAD 3.6 rules */
.page-head__sub { color:var(--fg-muted, var(--text-muted)); font-size:14px; margin-top:2px; max-width:64ch; }
.breadcrumb { font-size:13px; margin:0 0 8px; }
.compliance-chip__count { opacity:.65; font-variant-numeric:tabular-nums; margin-left:4px; }
.audit-table__actions { text-align:right; white-space:nowrap; }
.form-actions { display:flex; gap:8px; align-items:center; margin-top:16px; }
.uad-muted { color:var(--fg-muted, var(--text-muted)); font-size:12px; }
.uad-sev { display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:600; line-height:1.5;
  background:color-mix(in oklab, var(--fg-muted, #888) 15%, transparent); }
.uad-sev--error    { background:color-mix(in oklab, #d64545 22%, transparent); color:#d64545; }
.uad-sev--hardstop { background:color-mix(in oklab, #e8873b 22%, transparent); color:#c96a1e; }
.uad-sev--softstop { background:color-mix(in oklab, #d9b038 24%, transparent); color:#9a7d15; }
.uad-sev--warning  { background:color-mix(in oklab, #4a7fd6 20%, transparent); color:#3a6fc4; }
.uad-edited { font-size:11px; color:var(--fg-muted, var(--text-muted)); font-style:italic; margin-left:6px; }
.uad-edit-grid { display:grid; grid-template-columns:minmax(320px, 1fr) minmax(280px, 1fr); gap:16px; align-items:start; }
@media (max-width:820px) { .uad-edit-grid { grid-template-columns:1fr; } }
.uad-dl { display:grid; grid-template-columns:max-content 1fr; gap:6px 14px; margin:0; font-size:13px; }
.uad-dl dt { color:var(--fg-muted, var(--text-muted)); font-weight:600; }
.uad-dl dd { margin:0; min-width:0; overflow-wrap:anywhere; }
.uad-code { font-family:var(--font-mono, ui-monospace, monospace); font-size:12px; overflow-wrap:anywhere; }

/* AI/rule edit — audit change history timeline. */
.rule-hist__head { margin-top:1.25rem; padding-top:1rem; border-top:1px solid var(--border, rgba(127,127,127,0.2)); }
.rule-hist { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.85rem; }
.rule-hist__item { position:relative; padding-left:1rem; border-left:2px solid var(--border, rgba(127,127,127,0.25)); }
.rule-hist__item::before { content:""; position:absolute; left:-5px; top:0.35rem; width:8px; height:8px; border-radius:999px;
  background:var(--accent, #3ea6ff); }
.rule-hist__meta { display:flex; flex-wrap:wrap; align-items:baseline; gap:0.4rem 0.6rem; font-size:0.85rem; }
.rule-hist__who { font-weight:600; }
.rule-hist__role { text-transform:capitalize; }
.rule-hist__when { margin-left:auto; font-size:0.78rem; }
.rule-hist__changes { list-style:none; margin:0.4rem 0 0; padding:0; display:flex; flex-direction:column; gap:0.25rem; font-size:0.82rem; }
.rule-hist__changes li { display:flex; flex-wrap:wrap; align-items:baseline; gap:0.4rem; }
.rule-hist__field { font-size:0.68rem; text-transform:uppercase; letter-spacing:0.04em; font-weight:700; color:var(--fg-muted, var(--text-muted)); min-width:8rem; }
.rule-hist__from { color:var(--fg-muted, var(--text-muted)); text-decoration:line-through; overflow-wrap:anywhere; }
.rule-hist__arrow { color:var(--fg-muted, var(--text-muted)); }
.rule-hist__to { font-weight:600; overflow-wrap:anywhere; }
.uad-code--path { display:block; white-space:pre-wrap; word-break:break-all; }
.uad-msg { max-width:52ch; overflow-wrap:anywhere; }
.uad-msg__field { display:block; margin-top:2px; }
.uad-toggles { display:flex; flex-direction:column; gap:10px; margin:14px 0 4px; }
.uad-check { display:flex; align-items:center; gap:8px; font-size:14px; cursor:pointer; }
.uad-check input { width:16px; height:16px; }
/* Label Filter — the phrase cell reads as plain text; the input only reveals its
   field (border + background) on hover/focus, so rows aren't a wall of inputs. */
.lblf-table td.lblf-cell { padding-top:2px; padding-bottom:2px; width:100%; }
.lblf-cell__form { margin:0; }
.lblf-cell__input {
  width:100%; border:1px solid transparent; background:transparent; color:inherit;
  font:inherit; padding:0.35rem 0.5rem; border-radius:6px; cursor:text;
  transition:border-color 0.12s ease, background-color 0.12s ease;
}
.lblf-cell__input:hover { border-color:var(--border); }
.lblf-cell__input:focus {
  outline:none; border-color:var(--accent, #4a90d9);
  background:var(--surface, #fff); box-shadow:0 0 0 3px var(--focus-glow);
}
:root[data-theme="dark"] .lblf-cell__input:focus { background:rgba(255,255,255,0.06); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lblf-cell__input:focus { background:rgba(255,255,255,0.06); }
}

/* AI Photo Checks settings (/ai_settings) — reviewer-friendly, dense, modern. */
.ai-settings { display:flex; flex-direction:column; gap:1.1rem; max-width:68rem; }
/* The three top settings tile side by side on wide screens. */
.ai-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(17rem, 1fr)); gap:1rem; }
.ai-card { padding:1rem 1.1rem; }
.ai-card__top { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.ai-card__title { margin:0; font-size:1rem; }
.ai-card__val { font-variant-numeric:tabular-nums; font-weight:700; font-size:1.35rem; color:var(--accent, #3ea6ff); min-width:3rem; text-align:right; }
.ai-card__desc { margin:0.4rem 0 0; font-size:0.86rem; color:var(--fg-muted, var(--text-muted)); line-height:1.4; }
.ai-card__foot { margin:0.5rem 0 0; font-size:0.78rem; color:var(--fg-muted, var(--text-muted)); }
.ai-slider { display:flex; align-items:center; gap:0.6rem; margin-top:0.75rem; }
.ai-slider__end { font-size:0.68rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--fg-muted, var(--text-muted)); white-space:nowrap; }

/* Modern range slider — filled track (driven by --pct set in JS) + soft round thumb. */
.ai-slider__range { flex:1 1 auto; min-width:0; cursor:pointer; height:16px; background:transparent;
  -webkit-appearance:none; appearance:none; --pct:50%; --sl-track:rgba(127,127,127,0.22); }
.ai-slider__range::-webkit-slider-runnable-track { height:6px; border-radius:999px;
  background:linear-gradient(90deg, var(--accent, #3ea6ff) 0 var(--pct), var(--sl-track) var(--pct) 100%); }
.ai-slider__range::-moz-range-track { height:6px; border-radius:999px; background:var(--sl-track); }
.ai-slider__range::-moz-range-progress { height:6px; border-radius:999px; background:var(--accent, #3ea6ff); }
.ai-slider__range::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:16px; height:16px; margin-top:-5px;
  border-radius:50%; background:#fff; border:2px solid var(--accent, #3ea6ff); box-shadow:0 1px 3px rgba(0,0,0,0.28);
  transition:transform 0.1s ease, box-shadow 0.1s ease; }
.ai-slider__range::-moz-range-thumb { width:16px; height:16px; border-radius:50%; background:#fff;
  border:2px solid var(--accent, #3ea6ff); box-shadow:0 1px 3px rgba(0,0,0,0.28); }
.ai-slider__range:hover::-webkit-slider-thumb { transform:scale(1.12); }
.ai-slider__range:active::-webkit-slider-thumb { transform:scale(1.12); box-shadow:0 0 0 5px var(--focus-glow, rgba(62,166,255,0.22)); }
.ai-slider__range:focus { outline:none; }
.ai-slider__range:focus-visible::-webkit-slider-thumb { box-shadow:0 0 0 4px var(--focus-glow, rgba(62,166,255,0.28)); }
.ai-slider__range:focus-visible::-moz-range-thumb { box-shadow:0 0 0 4px var(--focus-glow, rgba(62,166,255,0.28)); }
.ai-slider__range:disabled { opacity:0.55; cursor:default; }
:root[data-theme="dark"] .ai-slider__range { --sl-track:rgba(255,255,255,0.16); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ai-slider__range { --sl-track:rgba(255,255,255,0.16); } }
/* Item groups tile into columns; compact horizontal rows (label · slider · %). */
.ai-ov { display:grid; grid-template-columns:repeat(auto-fit, minmax(18rem, 1fr)); gap:1.1rem 1.75rem; align-items:start; margin-top:0.9rem; }
.ai-ovgrp { display:flex; flex-direction:column; gap:0.5rem; }
.ai-ov__group { font-size:0.68rem; text-transform:uppercase; letter-spacing:0.05em; font-weight:700; color:var(--fg-muted, var(--text-muted));
  padding-bottom:0.3rem; border-bottom:1px solid var(--border, rgba(127,127,127,0.18)); }
.ai-ov-row { display:flex; align-items:center; gap:0.55rem; }
.ai-ov-row__label { flex:0 0 6.5rem; font-weight:600; text-transform:capitalize; font-size:0.88rem; overflow-wrap:anywhere; }
.ai-ov-row__name { flex:0 0 6.5rem; min-width:0; }
.ai-ov-row__slider { flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:0.45rem; }
.ai-ov-row__val { font-variant-numeric:tabular-nums; font-weight:700; color:var(--accent, #3ea6ff); min-width:2.4rem; text-align:right; font-size:0.85rem; }
.ai-ov-row__rm { flex:0 0 auto; width:24px; height:24px; border-radius:999px; border:1px solid var(--border, rgba(127,127,127,0.25));
  background:transparent; color:var(--fg-muted, var(--text-muted)); font-size:16px; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.ai-ov-row__rm:hover { color:#dc5b57; border-color:#dc5b57; }

/* AI Assistant bubble (topbar) — matches the bell / chat buttons. */
.topbar__ai { 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__ai: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__ai:focus-visible { outline:none; box-shadow:0 0 0 3px var(--focus-glow); }
.topbar__ai[aria-expanded="true"] { background:color-mix(in oklab, var(--accent) 14%, var(--hover)); color:var(--accent); border-color:color-mix(in oklab, var(--accent) 40%, var(--border)); }

/* AI Assistant HUD — centered modal frame (reuses the qc-hud fade/pop keyframes). */
.ai-hud { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:1.5rem; animation:qc-hud-fade 150ms ease both; }
.ai-hud[hidden] { display:none; }
.ai-hud__backdrop { position:absolute; inset:0; background:rgba(9,11,15,0.7); backdrop-filter:blur(4px); cursor:pointer; }
.ai-hud__box { position:relative; z-index:1; width:min(94vw, 40rem); height:min(80vh, 44rem); display:flex; flex-direction:column;
  background:var(--surface, #fff); color:var(--fg); border:1px solid var(--border); border-radius:16px; overflow:visible;
  box-shadow:0 30px 80px -20px rgba(0,0,0,0.6); animation:qc-hud-pop 240ms cubic-bezier(.2,.9,.25,1) both; }
/* Box is overflow:visible so the corner X shows outside; inner regions clip to the rounded corners. */
.ai-hud__head { border-radius:16px 16px 0 0; }
.ai-hud__box > .ai-chat, .ai-hud__box > .ai-hud__body { border-radius:0 0 16px 16px; overflow:hidden; }
.ai-hud__head { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.25rem; border-bottom:1px solid var(--border); flex:0 0 auto; }
.ai-hud__title { margin:0; font-size:1.05rem; font-weight:700; display:inline-flex; align-items:center; gap:0.5rem; }
.ai-hud__title svg { color:var(--accent); }
/* Match the Report Photos HUD: a floating circular X pinned outside the top-right corner. */
.ai-hud__close { position:absolute; top:-14px; right:-14px; z-index:3; width:36px; height:36px; border-radius:999px;
  border:1px solid var(--border, rgba(127,127,127,0.25)); background:var(--surface, #fff); color:var(--fg); font-size:20px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 14px -2px rgba(0,0,0,0.45);
  transition:background 0.12s ease, border-color 0.12s ease; padding:0; }
.ai-hud__close:hover { background:color-mix(in oklab, var(--fg) 8%, var(--surface, #fff)); border-color:var(--accent, #3ea6ff); }
.ai-hud__body { flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; align-items:center; justify-content:center; padding:1.5rem; }
.ai-hud__placeholder { margin:0; color:var(--fg-muted); font-size:0.95rem; max-width:32rem; text-align:center; line-height:1.5; }

/* ---- Assistant chat: large two-pane HUD (conversation sidebar + transcript) ---- */
.ai-hud__box--chat { width:min(96vw, 64rem); height:min(90vh, 48rem); }
.ai-chat { flex:1 1 auto; min-height:0; display:flex; }
.ai-chat__side { flex:0 0 15rem; min-width:0; border-right:1px solid var(--border); display:flex; flex-direction:column; gap:0.5rem; padding:0.75rem; overflow:hidden; }
.ai-chat__new { display:inline-flex; align-items:center; justify-content:center; gap:0.4rem; width:100%; padding:0.55rem 0.75rem;
  border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--fg); font:inherit; font-weight:600; cursor:pointer; }
.ai-chat__new:hover { border-color:var(--accent); }
.ai-chat__convos { flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
.ai-chat__empty { margin:0.5rem 0.2rem; color:var(--fg-muted); font-size:0.85rem; }
.ai-convo { display:flex; align-items:center; gap:0.25rem; border-radius:8px; }
.ai-convo:hover { background:var(--hover); }
.ai-convo.is-active { background:color-mix(in oklab, var(--accent) 14%, var(--surface)); }
.ai-convo__open { flex:1 1 auto; min-width:0; text-align:left; border:0; background:none; color:var(--fg); font:inherit; font-size:0.86rem;
  padding:0.45rem 0.5rem; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ai-convo__del { flex:0 0 auto; border:0; background:none; color:var(--fg-muted); font-size:18px; line-height:1; cursor:pointer;
  padding:0.2rem 0.45rem; border-radius:6px; opacity:0; }
.ai-convo:hover .ai-convo__del, .ai-convo.is-active .ai-convo__del { opacity:1; }
.ai-convo__del:hover { color:#dc5b57; background:var(--surface); }
.ai-chat__main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.ai-chat__scroll { flex:1 1 auto; min-height:0; overflow-y:auto; padding:1.25rem; display:flex; flex-direction:column; gap:1rem; }
.ai-chat__loading { color:var(--fg-muted); font-size:0.9rem; margin:auto; }
.ai-chat__welcome { margin:auto; max-width:26rem; text-align:center; color:var(--fg-muted); display:flex; flex-direction:column; align-items:center; gap:0.6rem; }
.ai-chat__welcome svg { color:var(--accent); width:28px; height:28px; }
.ai-chat__welcome p { margin:0; line-height:1.5; }
/* messages */
.ai-msg { display:flex; flex-direction:column; max-width:85%; }
.ai-msg--user { align-self:flex-end; align-items:flex-end; }
.ai-msg--assistant { align-self:flex-start; align-items:flex-start; }
.ai-msg__body { padding:0.65rem 0.9rem; border-radius:14px; line-height:1.55; font-size:0.92rem; overflow-wrap:anywhere; }
.ai-msg--user .ai-msg__body { background:var(--accent); color:#fff; border-bottom-right-radius:4px; }
.ai-msg--assistant .ai-msg__body { background:var(--surface); border:1px solid var(--border); color:var(--fg); border-bottom-left-radius:4px; }
.ai-msg__body p { margin:0 0 0.6rem; } .ai-msg__body p:last-child { margin-bottom:0; }
.ai-msg__body ul, .ai-msg__body ol { margin:0.3rem 0 0.6rem; padding-left:1.25rem; }
.ai-msg__body h1, .ai-msg__body h2, .ai-msg__body h3, .ai-msg__body h4 { margin:0.4rem 0 0.35rem; font-size:1rem; }
.ai-msg__body code { background:color-mix(in oklab, var(--fg) 8%, var(--surface)); padding:0.05rem 0.35rem; border-radius:5px; font-size:0.88em; }
.ai-msg__err { color:#dc5b57; margin:0; }
.ai-md-table { border-collapse:collapse; width:100%; margin:0.5rem 0; font-size:0.85rem; display:block; overflow-x:auto; }
.ai-md-table th, .ai-md-table td { border:1px solid var(--border); padding:0.35rem 0.55rem; text-align:left; vertical-align:top; }
.ai-md-table th { background:color-mix(in oklab, var(--fg) 6%, var(--surface)); font-weight:700; }
.ai-msg__sources { margin-top:0.5rem; font-size:0.78rem; color:var(--fg-muted); }
.ai-msg__sources-lbl { text-transform:uppercase; letter-spacing:0.04em; font-weight:700; }
.ai-msg__sources ul { margin:0.2rem 0 0; padding-left:1.1rem; }
/* typing dots */
.ai-typing { display:inline-flex; gap:4px; padding:0.2rem 0; }
.ai-typing span { width:7px; height:7px; border-radius:50%; background:var(--fg-muted); opacity:0.5; animation:ai-blink 1.2s infinite both; }
.ai-typing span:nth-child(2) { animation-delay:0.2s; } .ai-typing span:nth-child(3) { animation-delay:0.4s; }
@keyframes ai-blink { 0%, 80%, 100% { opacity:0.3; } 40% { opacity:1; } }
/* composer */
.ai-chat__composer { flex:0 0 auto; display:flex; align-items:flex-end; gap:0.5rem; padding:0.75rem; border-top:1px solid var(--border); }
.ai-chat__input { flex:1 1 auto; min-width:0; resize:none; border:1px solid var(--border); border-radius:12px; background:var(--surface); color:var(--fg);
  font:inherit; font-size:0.92rem; padding:0.6rem 0.8rem; max-height:160px; line-height:1.4; }
.ai-chat__input:focus { outline:none; border-color:var(--accent); }
.ai-chat__send { flex:0 0 auto; width:40px; height:40px; border:0; border-radius:10px; background:var(--accent); color:#fff; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; }
.ai-chat__send:disabled { opacity:0.5; cursor:default; }
@media (max-width: 640px) { .ai-chat__side { flex-basis:11rem; } .ai-msg { max-width:95%; } }
/* Sources: sidebar link (bottom-left) + knowledge-base panel */
.ai-chat__sources-link { margin-top:auto; display:inline-flex; align-items:center; gap:0.4rem; width:100%;
  padding:0.5rem 0.6rem; border:1px solid var(--border, rgba(127,127,127,0.2)); border-radius:9px; background:none;
  color:var(--fg-muted, var(--text-muted)); font:inherit; font-size:0.82rem; font-weight:600; cursor:pointer; }
.ai-chat__sources-link:hover { border-color:var(--accent, #3ea6ff); color:var(--fg); }
.ai-sources { position:absolute; left:0.75rem; bottom:0.75rem; z-index:4; width:min(26rem, 70%); max-height:60%;
  display:flex; flex-direction:column; background:var(--surface, #fff); color:var(--fg);
  border:1px solid var(--border, rgba(127,127,127,0.25)); border-radius:12px; box-shadow:0 18px 44px -12px rgba(0,0,0,0.5); }
.ai-sources[hidden] { display:none; }
.ai-sources__head { display:flex; align-items:center; gap:0.5rem; padding:0.6rem 0.85rem; border-bottom:1px solid var(--border); flex:0 0 auto; }
.ai-sources__title { font-weight:700; font-size:0.9rem; }
.ai-sources__count { font-size:0.78rem; color:var(--fg-muted, var(--text-muted)); }
.ai-sources__close { margin-left:auto; border:0; background:none; color:var(--fg-muted); font-size:20px; line-height:1; cursor:pointer; padding:0 0.25rem; border-radius:6px; }
.ai-sources__close:hover { color:var(--fg); background:var(--hover); }
.ai-sources__body { flex:1 1 auto; min-height:0; overflow-y:auto; padding:0.5rem 0.85rem 0.75rem; }
.ai-sources__list { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:0.3rem; }
.ai-sources__list li { font-size:0.82rem; line-height:1.35; overflow-wrap:anywhere; padding:0.25rem 0; border-bottom:1px solid var(--border, rgba(127,127,127,0.1)); }
.ai-sources__list li:last-child { border-bottom:0; }

/* Order Overview contacts — Borrower / Agent / Property Access. One row per person,
   phones + emails as clickable tel:/mailto: links. */
.oshow-empty { margin:0; color:var(--fg-muted, var(--text-muted)); }
.ocontact-list { display:flex; flex-direction:column; gap:0.7rem; }
.ocontact-row { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:0.3rem 1.25rem;
  padding-bottom:0.7rem; border-bottom:1px solid var(--border, rgba(127,127,127,0.18)); }
.ocontact-row:last-child { border-bottom:0; padding-bottom:0; }
.ocontact-row__name { font-weight:400; font-size:0.98rem; }
.ocontact-row__tag { font-size:0.66rem; text-transform:uppercase; letter-spacing:0.04em; font-weight:700;
  color:var(--fg-muted, var(--text-muted)); background:var(--hover, color-mix(in oklab, var(--fg) 7%, transparent));
  padding:0.1rem 0.42rem; border-radius:999px; margin-right:0.3rem; vertical-align:middle; }
.ocontact-row__links { display:flex; flex-wrap:wrap; gap:0.35rem 1.1rem; }
.ocontact { display:inline-flex; align-items:center; gap:0.35rem; color:var(--accent, #3b6fff); text-decoration:none; font-size:0.9rem; }
.ocontact:hover { text-decoration:underline; }
.ocontact svg { flex:0 0 auto; opacity:0.85; }
/* QC history row — history link + latest PDF/XML quick links. */
.qc-history-row { display:flex; flex-wrap:wrap; align-items:center; gap:0.35rem 0.8rem; }
.qc-doclink { font-size:0.82rem; font-weight:600; color:var(--accent, #3b6fff); text-decoration:none; white-space:nowrap; }
.qc-doclink:hover { text-decoration:underline; }
/* "Other" is a button (opens a HUD) but reads as one of the doc links. */
.qc-doclink--btn { background:none; border:0; padding:0; cursor:pointer; font-family:inherit; line-height:inherit; }
/* Other-sources HUD: parcel + grouped public-data facts, each attributed to its origin. */
.qc-osrc__src { font-size:0.85rem; color:var(--fg-muted, var(--text-muted)); margin:0.15rem 0 0.55rem; display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem; }
.qc-osrc__conf { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.02em; padding:0.1rem 0.45rem; border-radius:999px; }
.qc-osrc__conf--high { background:rgba(16,185,129,0.16); color:#059669; }
.qc-osrc__conf--medium { background:rgba(245,158,11,0.16); color:#b45309; }
.qc-osrc__conf--low { background:rgba(239,68,68,0.16); color:#dc2626; }
.qc-osrc__checks { list-style:none; margin:0.35rem 0 0.6rem; padding:0; display:flex; flex-direction:column; gap:0.35rem; }
.qc-osrc__check { display:flex; flex-wrap:wrap; align-items:baseline; gap:0.5rem; font-size:0.88rem; }
.qc-osrc__check-name { font-weight:600; }
.qc-osrc__check-badge { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.02em; padding:0.08rem 0.4rem; border-radius:999px; background:rgba(127,127,127,0.16); }
.qc-osrc__check--pass .qc-osrc__check-badge { background:rgba(16,185,129,0.16); color:#059669; }
.qc-osrc__check--fail .qc-osrc__check-badge { background:rgba(239,68,68,0.16); color:#dc2626; }
.qc-osrc__check--review .qc-osrc__check-badge { background:rgba(245,158,11,0.16); color:#b45309; }
.qc-osrc__check-detail { color:var(--fg-muted, var(--text-muted)); font-size:0.85rem; flex:1 1 100%; }
.qc-osrc__group { margin:0.2rem 0 0.7rem; }
.qc-osrc__group-head { font-size:0.8rem; font-weight:700; color:var(--fg-muted, var(--text-muted)); text-transform:uppercase; letter-spacing:0.03em; margin:0.55rem 0 0.3rem; }
.qc-osrc__group-head a { color:inherit; text-decoration:underline; text-underline-offset:2px; }
.qc-osrc__asof { font-weight:400; text-transform:none; letter-spacing:0; opacity:0.75; margin-left:0.4rem; }
/* ---- Modern "Other sources" HUD (scoped to .qc-osrchud so Zillow/Redfin HUDs are untouched) ---- */
.qc-osrchud .qc-mkthud__box { width:min(96vw, 66rem); border-radius:16px; }
.qc-osrchud .qc-mkthud__title { font-size:1.3rem; }
/* Top-level section titles ("Parcel", "Public-data facts") read as real headers. */
.qc-osrchud .qc-comps__head { font-size:0.98rem; font-weight:800; text-transform:none; letter-spacing:0; color:var(--fg);
  display:flex; align-items:center; gap:0.5rem; padding-bottom:0.5rem; margin:0 0 0.8rem;
  border-bottom:1px solid var(--border, rgba(127,127,127,0.16)); }
.qc-osrchud .qc-comps__head .uad-muted { font-weight:600; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.04em;
  padding:0.14rem 0.5rem; border-radius:999px; background:color-mix(in oklab, var(--fg) 8%, var(--surface, #fff)); }
/* Parcel panel + each source render as soft cards. min-width:0 lets them shrink inside the grid so
   long values wrap instead of spilling out; overflow-wrap breaks long unspaced tokens (URLs). */
.qc-osrchud .qc-osrc__panel,
.qc-osrchud .qc-osrc__group { margin:0; min-width:0; overflow-wrap:anywhere;
  background:color-mix(in oklab, var(--fg) 3.5%, var(--surface, #fff));
  border:1px solid var(--border, rgba(127,127,127,0.14)); border-radius:12px; padding:0.85rem 0.95rem; }
.qc-osrchud .qc-osrc__panel { padding:1rem 1.1rem; }
/* Sources as a masonry-style multi-column flow: cards of differing heights pack tightly with no
   row-height gaps (a CSS grid would size each row to its tallest card, leaving white space below
   the shorter ones). break-inside keeps a card whole. */
.qc-osrc__grid { column-width:14rem; column-gap:0.7rem; }
.qc-osrchud .qc-osrc__group { break-inside:avoid; -webkit-column-break-inside:avoid; width:100%; margin:0 0 0.7rem; }
.qc-osrchud .qc-osrc__group-head { margin:0 0 0.55rem; padding-bottom:0.45rem; font-size:0.74rem; overflow-wrap:anywhere;
  border-bottom:1px solid var(--border, rgba(127,127,127,0.14)); }
.qc-osrchud .qc-osrc__group-head a { overflow-wrap:anywhere; }
/* Narrow source cards: stack label OVER value so nothing has to fit two columns in ~14rem. */
.qc-osrchud .qc-osrc__group .qc-ext-dl { grid-template-columns:1fr; gap:0; font-size:0.86rem; }
.qc-osrchud .qc-osrc__group .qc-ext-dl dt { font-size:0.72rem; white-space:normal; }
.qc-osrchud .qc-osrc__group .qc-ext-dl dt:not(:first-child) { margin-top:0.4rem; }
.qc-osrchud .qc-osrc__group .qc-ext-dl dd { overflow-wrap:anywhere; }
/* Parcel panel is full-width, so keep two columns but let both shrink + wrap. */
.qc-osrchud .qc-osrc__panel .qc-ext-dl { grid-template-columns:minmax(0,auto) minmax(0,1fr); gap:0.4rem 0.9rem; font-size:0.86rem; }
.qc-osrchud .qc-osrc__panel .qc-ext-dl dt { font-size:0.78rem; }
.qc-osrchud .qc-osrc__panel .qc-ext-dl dd { min-width:0; overflow-wrap:anywhere; }
.qc-osrchud .qc-osrc__src { margin:0 0 0.8rem; }
/* Parcel checks as tidy rows with a status accent stripe. */
.qc-osrchud .qc-osrc__checks { margin-top:0.75rem; gap:0.5rem; }
.qc-osrchud .qc-osrc__check { padding:0.5rem 0.7rem; border:1px solid var(--border, rgba(127,127,127,0.14)); border-radius:10px;
  background:var(--surface, #fff); min-width:0; overflow-wrap:anywhere; }
.qc-osrchud .qc-osrc__check-detail { overflow-wrap:anywhere; }
.qc-osrchud .qc-osrc__check--pass { border-left:3px solid #10b981; }
.qc-osrchud .qc-osrc__check--fail { border-left:3px solid #ef4444; }
.qc-osrchud .qc-osrc__check--review { border-left:3px solid #f59e0b; }
/* Summary aside as a full-width one-line bar below the order summary — PDF/XML left, Rule Profile
   + QC History right, at every viewport. */
.qc-summary { flex-direction:column; flex-wrap:nowrap; align-items:stretch; }
.qc-summary__main { width:100%; }
.qc-summary__addr { width:100%; }
/* Spread the fields (Client … Transaction) across the full width of the card. */
.qc-summary__meta { width:100%; justify-content:space-between; gap:0.6rem 1.5rem; }
.qc-summary__aside--bar { flex-direction:row; align-items:center; justify-content:space-between; width:100%; gap:0.6rem 1rem; flex-wrap:nowrap;
  border-top:1px solid var(--border, rgba(127,127,127,0.18)); padding-top:0.55rem; margin-top:0.15rem; }
.qc-aside__left  { display:flex; align-items:center; gap:0.4rem 0.9rem; flex:0 0 auto; }
.qc-aside__right { display:flex; align-items:center; gap:0.5rem 0.9rem; flex:1 1 auto; min-width:0; justify-content:flex-end; }
.qc-summary__aside--bar .qc-profile-pick__label { white-space:nowrap; }

/* Vendor Information tab. */
.vend-co { color:var(--fg-muted, var(--text-muted)); font-weight:400; }
.vend-chips { display:flex; flex-wrap:wrap; gap:0.4rem; margin:0.75rem 0 0.25rem; }
.vend-chip { font-size:0.74rem; font-weight:600; padding:0.16rem 0.6rem; border-radius:999px;
  color:var(--accent, #3b6fff); background:color-mix(in oklab, var(--accent, #3b6fff) 12%, transparent); }
.vend-scorecard { display:grid; grid-template-columns:repeat(auto-fit, minmax(6.5rem, 1fr)); gap:0.75rem; margin-top:1rem; }
.vend-stat { background:color-mix(in oklab, var(--fg) 4%, transparent); border:1px solid var(--border, rgba(127,127,127,0.18));
  border-radius:10px; padding:0.6rem 0.75rem; text-align:center; }
.vend-stat__val { font-size:1.25rem; font-weight:700; font-variant-numeric:tabular-nums; }
.vend-stat__lab { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--fg-muted, var(--text-muted)); margin-top:0.15rem; }
.oshow-tablewrap { overflow-x:auto; }
.oshow-table { width:100%; border-collapse:collapse; font-size:0.9rem; }
.oshow-table thead th { text-align:left; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.03em;
  color:var(--fg-muted, var(--text-muted)); font-weight:600; padding:0.3rem 0.9rem 0.35rem 0; border-bottom:1px solid var(--border, rgba(127,127,127,0.2)); white-space:nowrap; }
.oshow-table tbody td { padding:0.4rem 0.9rem 0.4rem 0; border-bottom:1px solid color-mix(in oklab, var(--fg) 7%, transparent); }
.oshow-table tbody tr:last-child td { border-bottom:0; }
.vend-expired { color:#dc5b57; font-weight:600; }

/* Order Actions FAB — sticky bottom-right; menu opens per-action HUDs. z-index sits below the
   sliding chat panel (80) so an open chat never fights it; its own HUDs are z1000 (above all). */
.oactfab { position:fixed; right:1.5rem; bottom:1.5rem; z-index:70; display:flex; flex-direction:column; align-items:flex-end; gap:0.6rem; }
/* When the chat bubble floats bottom-right too, lift the FAB above it so they don't overlap. */
body[data-chat-position="bottom-right"] .oactfab { bottom:calc(1.25rem + 56px + 0.85rem); }
.oactfab__btn { width:56px; height:56px; border-radius:999px; border:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent, #3b6fff); color:#fff; box-shadow:0 8px 24px -6px rgba(0,0,0,0.45); transition:transform 0.12s ease, box-shadow 0.12s ease; }
.oactfab__btn:hover { transform:translateY(-1px); box-shadow:0 12px 30px -6px rgba(0,0,0,0.5); }
.oactfab__btn:focus-visible { outline:none; box-shadow:0 0 0 4px var(--focus-glow, rgba(62,166,255,0.35)); }
.oactfab__menu { display:flex; flex-direction:column; gap:0.25rem; min-width:13rem; max-width:min(88vw, 20rem); padding:0.5rem; border-radius:14px;
  background:var(--surface, #fff); border:1px solid var(--border, rgba(127,127,127,0.2)); box-shadow:0 16px 40px -12px rgba(0,0,0,0.45); animation:qc-hud-fade 120ms ease both; }
.oactfab__menu[hidden] { display:none; }
.oactfab__title { font-size:0.66rem; text-transform:uppercase; letter-spacing:0.05em; font-weight:700; color:var(--fg-muted, var(--text-muted)); padding:0.25rem 0.5rem 0.4rem; }
.oactfab__quick { display:flex; flex-wrap:wrap; gap:0.4rem; padding:0 0.35rem 0.45rem; border-bottom:1px solid var(--border, rgba(127,127,127,0.15)); margin-bottom:0.2rem; }
.oactfab__quick form { display:inline; margin:0; }
.oactfab__item { text-align:left; padding:0.5rem 0.65rem; border-radius:8px; border:0; background:transparent; color:var(--fg); font:inherit; font-size:0.92rem; cursor:pointer; }
.oactfab__item:hover { background:var(--hover, color-mix(in oklab, var(--fg) 8%, transparent)); }

/* Order action HUD — centered modal hosting the relocated card (card provides its own title/surface). */
.oact-hud { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:1.5rem; animation:qc-hud-fade 150ms ease both; }
.oact-hud[hidden] { display:none; }
.oact-hud__backdrop { position:absolute; inset:0; background:rgba(9,11,15,0.6); backdrop-filter:blur(3px); cursor:pointer; }
.oact-hud__box { position:relative; z-index:1; width:min(94vw, 42rem); max-height:88vh; display:flex; flex-direction:column; overflow:visible; animation:qc-hud-pop 220ms cubic-bezier(.2,.9,.25,1) both; }
.oact-hud__body { overflow-y:auto; max-height:88vh; border-radius:16px; }
.oact-hud__body .card { margin:0; }
.oact-hud__close { position:absolute; top:-12px; right:-12px; z-index:3; width:34px; height:34px; border-radius:999px;
  border:1px solid var(--border, rgba(127,127,127,0.25)); background:var(--surface, #fff); color:var(--fg); font-size:20px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 14px -2px rgba(0,0,0,0.45); }
.oact-hud__close:hover { background:color-mix(in oklab, var(--fg) 8%, var(--surface, #fff)); border-color:var(--accent, #3b6fff); }
/* Wide variant for the shared Revision Request HUD (Templates + Revision side by side). */
.oact-hud__box--wide { width:min(96vw, 60rem); }
.oact-hud__body .qc-rev-row--hud { margin:0; }

/* --- Modernized order-action HUDs -------------------------------------------------
   Fit the box to its content (a wide fixed box left the simple forms swimming in
   white space), give the card real breathing room with a titled header divider,
   and turn the cramped Ownership grid into clean separated rows. HUD-scoped so the
   underlying .card / .orep styles are untouched everywhere else. */
.oact-hud__box { width:auto; min-width:min(92vw, 23rem); max-width:min(94vw, 40rem); }
.oact-hud__box--wide { width:min(96vw, 60rem); max-width:min(96vw, 60rem); }
.oact-hud__body { border-radius:18px; box-shadow:0 30px 80px -28px rgba(0,0,0,0.62); }
.oact-hud__body .card { padding:1.3rem 1.45rem 1.45rem; border-radius:18px; border:1px solid var(--border, rgba(127,127,127,0.18)); }
.oact-hud .card__head { margin-bottom:1.05rem; padding-bottom:0.85rem; border-bottom:1px solid var(--border, rgba(127,127,127,0.16)); }
.oact-hud .card__title { font-size:1.08rem; letter-spacing:-0.01em; }
.oact-hud .oassign-note { margin:0.15rem 0 1rem; }
.oact-hud .oassign-note:last-child { margin-bottom:0; }
/* Ownership: real rows with hairline separators + vertical rhythm, not a tight grid. */
.oact-hud .oreps { display:flex; flex-direction:column; gap:0; }
.oact-hud .orep { display:flex; align-items:center; gap:0.9rem; padding:0.72rem 0; border-top:1px solid var(--border, rgba(127,127,127,0.12)); }
.oact-hud .orep:first-child { border-top:0; padding-top:0.15rem; }
.oact-hud .orep__label { min-width:8.5rem; font-size:0.9rem; }
.oact-hud .orep__holder { flex:1 1 auto; min-width:4rem; }
.oact-hud .orep__controls { margin-left:auto; justify-self:auto; }
.oact-hud .orep__controls select { width:11rem; }
.oact-hud .oreps__watchers { margin-top:1rem; padding-top:0.85rem; border-top:1px solid var(--border, rgba(127,127,127,0.16)); }
/* Simple action forms (status / reminders / actions): room to breathe, wrap gracefully. */
.oact-hud .oaction-form { flex-wrap:wrap; gap:0.5rem; }
.oact-hud .oactions { gap:0.6rem; }
/* Subject-photo slideshow (Zillow/Redfin panels). */
.qc-slideshow { position:relative; margin:0.4rem 0 1rem; border-radius:10px; background:#0c0e13; }
.qc-slideshow__stage { position:relative; width:100%; height:440px; max-height:58vh; background:#0c0e13; }
.qc-slideshow__img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity 0.2s ease; }
.qc-slideshow__img.is-active { opacity:1; }
.qc-slideshow__nav { position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border-radius:999px; border:0; cursor:pointer;
  background:rgba(0,0,0,0.5); color:#fff; font-size:22px; line-height:1; display:inline-flex; align-items:center; justify-content:center; transition:background 0.12s ease; }
.qc-slideshow__nav:hover { background:rgba(0,0,0,0.72); }
.qc-slideshow__nav--prev { left:8px; }
.qc-slideshow__nav--next { right:8px; }
.qc-slideshow__count { position:absolute; bottom:8px; right:10px; font-size:0.75rem; color:#fff; background:rgba(0,0,0,0.5); padding:0.1rem 0.5rem; border-radius:999px; }
/* Bug Reports (issue tracker) — status/priority badges + detail layout. */
.bug-status, .bug-pri { display:inline-block; padding:2px 9px; border-radius:999px; font-size:0.78rem; font-weight:700; white-space:nowrap; }
.bug-status--new         { background:#e7eefb; color:#1f47a6; }
.bug-status--in_progress { background:#fbeed0; color:#8a6a12; }
.bug-status--resolved    { background:#e2f3e9; color:#1c7a44; }
.bug-status--closed      { background:#eef0f3; color:#5a6371; }
.bug-pri--low    { background:#eef0f3; color:#5a6371; }
.bug-pri--medium { background:#fbeed0; color:#8a6a12; }
.bug-pri--high   { background:#f7dedd; color:#b23b37; }
.bugrep-counts { display:flex; flex-wrap:wrap; gap:0.5rem; margin:0 0 0.9rem; }
.bugrep-detail { display:flex; flex-direction:column; gap:0.8rem; }
.bugrep-controls { display:flex; flex-wrap:wrap; align-items:flex-end; gap:0.9rem; }
.bugrep-controls label { display:flex; flex-direction:column; gap:0.2rem; font-size:0.8rem; font-weight:600; color:var(--fg-muted); }
.bugrep-controls .field__input--sm { padding:0.3rem 0.5rem; font-size:0.85rem; }
.bugrep-del { margin-left:auto; }
.bugrep-desc { white-space:normal; line-height:1.5; }
.bugrep-shot__img { max-width:min(100%, 34rem); border:1px solid var(--border); border-radius:8px; }
.bugrep-meta dd.bugrep-mono, .bugrep-mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:0.8rem; overflow-wrap:anywhere; }
.bugrep-diag summary { cursor:pointer; font-weight:600; font-size:0.85rem; color:var(--fg-muted); }
.bugrep-pre { white-space:pre-wrap; overflow-wrap:anywhere; background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:0.6rem 0.8rem; font-size:0.78rem; max-height:20rem; overflow:auto; }
/* Orders list REVIEWER column: center the cell content and drop the badge's leading
   margin so a standalone "Value Link" badge sits centered instead of shifted right. */
.oq-reviewer { text-align:center; }
.oq-reviewer .badge { margin-left:0; white-space:nowrap; }
/* Orders queue: escalation marker beside the order number. */
.oq-esc { display:inline-flex; vertical-align:middle; margin-left:5px; color:var(--danger, #dc2626); }
.oq-esc svg { display:block; }
/* 3.6 (uad36) finding entries: failing items grouped by property/party under each finding. */
.qc-find__where { margin:4px 0 0; }
.qc-find__where-hdr { font-weight:600; font-size:0.84rem; margin:4px 0 1px; }
.qc-find__where-list { margin:0 0 3px; padding-left:1.15rem; list-style:disc; color:var(--fg-muted); font-size:0.86rem; }
.qc-find__where-list li { margin:1px 0; }
/* Sketch finding refs: stack "View sketch in report" + "View Sketch Image" on their own lines. */
.qc-find__sketchrefs { display:flex; flex-direction:column; align-items:flex-start; gap:2px; margin-top:3px; }
.qc-find__sketchimg { background:none; border:0; padding:0; margin:0; font:inherit; cursor:pointer; }
/* <<< FEATURES CSS <<< */