/* ============================================================
   CarClub Dashboard — Design System
   Single source of truth for all design tokens.
   Loaded after Tailwind so component classes can override.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Grayscale ramp (zinc-derived neutrals — true neutral, no warm/cool cast) */
  --gray-0:    #ffffff;
  --gray-50:   #fafafa;
  --gray-100:  #f4f4f5;
  --gray-150:  #ececee;
  --gray-200:  #e4e4e7;
  --gray-300:  #d4d4d8;
  --gray-400:  #a1a1aa;
  --gray-500:  #71717a;
  --gray-600:  #52525b;
  --gray-700:  #3f3f46;
  --gray-800:  #27272a;
  --gray-900:  #18181b;
  --gray-950:  #09090b;
  --gray-1000: #000000;

  /* Brand orange (events redesign accent — matches IMG_0177–0179 inspiration) */
  --orange-100: #ffead9;
  --orange-200: #ffd2a8;
  --orange-400: #ff8a3d;
  --orange-500: #f95f1f;
  --orange-600: #e14f12;
  --orange-700: #b73d0a;

  --danger-50:  #fef2f2;
  --danger-100: #fecaca;
  --danger-500: #ef4444;
  --danger-600: #dc2626;
  --danger-700: #b91c1c;
  --danger-900: #991b1b;

  --success-50:  #f0fdf4;
  --success-100: #bbf7d0;
  --success-500: #22c55e;
  --success-600: #16a34a;
  --success-700: #15803d;
  --success-900: #14532d;

  /* Surfaces */
  --bg-page:        var(--gray-100);
  --bg-surface:     var(--gray-0);
  --bg-surface-2:   var(--gray-150);
  --bg-hover:       var(--gray-150);
  --bg-inverse:     var(--gray-950);

  /* Text */
  --fg-primary:     var(--gray-950);
  --fg-secondary:   var(--gray-600);
  --fg-muted:       var(--gray-500);
  --fg-disabled:    var(--gray-400);
  --fg-inverse:     var(--gray-0);

  /* Borders */
  --border-subtle:  var(--gray-200);
  --border-strong:  var(--gray-300);
  --border-inverse: var(--gray-800);

  /* Radii */
  --radius-sm:  4px;
  --radius:     8px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-full: 9999px;

  /* Elevation — soft, multi-layer, monochrome */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04), 0 1px 3px 0 rgb(0 0 0 / 0.06);
  --shadow:    0 2px 4px -1px rgb(0 0 0 / 0.04), 0 4px 8px -2px rgb(0 0 0 / 0.06);
  --shadow-md: 0 4px 8px -2px rgb(0 0 0 / 0.05), 0 12px 24px -4px rgb(0 0 0 / 0.08);
  --shadow-lg: 0 8px 16px -4px rgb(0 0 0 / 0.08), 0 24px 48px -8px rgb(0 0 0 / 0.12);
  --shadow-xl: 0 16px 32px -8px rgb(0 0 0 / 0.1), 0 32px 64px -12px rgb(0 0 0 / 0.18);

  /* Layout */
  --sidebar-w:          260px;
  --sidebar-w-collapsed: 72px;
  --topbar-h:           64px;
  --content-max:        1400px;

  /* Type */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
  --font-display: "Inter", ui-sans-serif, system-ui, sans-serif;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration: 200ms;
  --duration-slow: 320ms;

  /* Z-index */
  --z-sidebar: 30;
  --z-topbar: 20;
  --z-drawer-backdrop: 40;
  --z-drawer: 50;
  --z-dropdown: 60;
  --z-modal-backdrop: 80;
  --z-modal: 90;
  --z-toast: 100;
}

/* ---------- Base reset / element styles ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* The HTML `hidden` attribute must win over component-level `display:` rules
   (Tailwind's preflight is off, so the UA `[hidden]{display:none}` rule is
   easily overridden by any class that sets display). */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-feature-settings: "cv11", "ss01", "ss03";
  font-variation-settings: "opsz" 16;
  background: var(--bg-page);
  color: var(--fg-primary);
  line-height: 1.5;
  font-size: 15px;
  letter-spacing: -0.005em;
}

/* When Inter Display is available it kicks in for large headings via Inter's optical sizing */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--fg-primary);
  margin: 0;
  line-height: 1.15;
}
h1 { font-size: 2.25rem; letter-spacing: -0.03em; font-weight: 700; }
h2 { font-size: 1.75rem; letter-spacing: -0.025em; font-weight: 700; }
h3 { font-size: 1.375rem; letter-spacing: -0.02em; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-muted); font-weight: 600; }

p { margin: 0; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--gray-700); }

img, svg, video { display: block; max-width: 100%; height: auto; }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
textarea { resize: vertical; }

::selection { background: var(--gray-900); color: var(--gray-0); }

/* Custom thin scrollbar — webkit only (a small Apple-ish detail) */
.scroll-elegant::-webkit-scrollbar { width: 10px; height: 10px; }
.scroll-elegant::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: var(--radius-full); border: 2px solid transparent; background-clip: padding-box; }
.scroll-elegant::-webkit-scrollbar-thumb:hover { background: var(--gray-400); border: 2px solid transparent; background-clip: padding-box; }
.scroll-elegant::-webkit-scrollbar-track { background: transparent; }

/* Focus rings — subtle but unmistakable */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--gray-950);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------- Logo treatment ----------
   Renders the per-org Organization.logo image. --invert applies brightness(0) so a
   white-on-transparent logo shows solid black on light surfaces; omit it on dark surfaces. */
.logo-mark { display: block; height: 36px; width: auto; max-width: 200px; object-fit: contain; object-position: left center; }
.logo-mark--invert { filter: brightness(0); }
.logo-mark--lg { height: 56px; }
.logo-wordmark {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.022em;
  line-height: 1;
  color: var(--fg-primary);
}
.sidebar-header .logo-wordmark { font-size: 1.0625rem; }
.topbar-mobile .logo-wordmark { font-size: 0.95rem; }
.auth-logo .logo-wordmark { font-size: 1.5rem; color: var(--gray-0); }

/* ============================================================
   Component classes (use as .btn, .card, etc.)
   These are pure CSS with var() tokens — independent of Tailwind processing.
   Use Tailwind utilities INLINE in templates for layout/spacing/typography;
   use these component classes for repeated UI primitives.
   ============================================================ */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 40px;
  padding: 0 1rem;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg-primary);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
  user-select: none;
}
.btn:disabled, .btn[disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.btn:active:not(:disabled) { transform: translateY(0.5px); }
.btn .btn-icon { width: 16px; height: 16px; flex-shrink: 0; }

.btn-primary {
  background: var(--gray-950);
  color: var(--gray-0);
  border-color: var(--gray-950);
  box-shadow: var(--shadow-xs);
}
.btn-primary:hover { background: var(--gray-800); border-color: var(--gray-800); color: var(--gray-0); }

.btn-secondary {
  background: var(--gray-0);
  color: var(--gray-900);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-xs);
}
.btn-secondary:hover { background: var(--gray-50); border-color: var(--gray-400); color: var(--gray-900); }

.btn-ghost {
  background: transparent;
  color: var(--fg-secondary);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--bg-hover); color: var(--fg-primary); }

.btn-destructive {
  background: var(--gray-0);
  color: var(--gray-900);
  border-color: var(--border-strong);
}
.btn-destructive:hover {
  background: var(--gray-950);
  color: var(--gray-0);
  border-color: var(--gray-950);
}

.btn-affirmative {
  background: var(--success-600);
  color: var(--gray-0);
  border-color: var(--success-600);
  box-shadow: var(--shadow-xs);
}
.btn-affirmative:hover { background: var(--success-700); border-color: var(--success-700); color: var(--gray-0); }

.btn-negative {
  background: var(--danger-600);
  color: var(--gray-0);
  border-color: var(--danger-600);
  box-shadow: var(--shadow-xs);
}
.btn-negative:hover { background: var(--danger-700); border-color: var(--danger-700); color: var(--gray-0); }

.btn-link {
  background: transparent;
  border: 0;
  height: auto;
  padding: 0;
  color: var(--fg-primary);
  text-decoration: underline;
  text-decoration-color: var(--gray-300);
  text-underline-offset: 3px;
}
.btn-link:hover { text-decoration-color: var(--gray-900); color: var(--gray-900); }

.btn-sm { height: 32px; padding: 0 0.75rem; font-size: 0.8125rem; border-radius: var(--radius-sm); }
.btn-sm .btn-icon { width: 14px; height: 14px; }
.btn-lg { height: 48px; padding: 0 1.5rem; font-size: 1rem; border-radius: var(--radius-md); }
.btn-block { display: flex; width: 100%; }
.btn-icon-only { width: 40px; padding: 0; }
.btn-icon-only.btn-sm { width: 32px; }

/* ---------- Cards ---------- */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
}
.card-hover:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.card-allow-overflow { overflow: visible; }
.card-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.card-header-title { font-size: 1rem; font-weight: 600; letter-spacing: -0.015em; margin: 0; }
.card-header-eyebrow { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); margin-bottom: 0.25rem; }
.card-body { padding: 1.5rem; }
.card-body-tight { padding: 1rem 1.5rem; }
.card-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 0.375rem; }
.field-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--fg-secondary);
  letter-spacing: -0.005em;
}
/* Quiet "required" annotation — clearly secondary to the label text. */
.field-required {
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--fg-disabled);
  margin-left: 0.375rem;
}
.field-hint { font-size: 0.75rem; color: var(--fg-muted); margin-top: 0.25rem; }
.field-error { font-size: 0.75rem; color: var(--danger-700); font-weight: 500; margin-top: 0.25rem; }
.field-error:empty { display: none; }

.input, .select, .textarea {
  display: block;
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  font-family: inherit;
  line-height: 1.4;
  color: var(--fg-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
.input:hover:not(:disabled), .select:hover:not(:disabled), .textarea:hover:not(:disabled) {
  border-color: var(--gray-400);
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--gray-950);
  box-shadow: 0 0 0 3px rgb(0 0 0 / 0.06);
  outline: none;
}
.input::placeholder, .textarea::placeholder { color: var(--fg-muted); }
.input:disabled, .select:disabled, .textarea:disabled {
  background: var(--gray-100);
  color: var(--fg-disabled);
  cursor: not-allowed;
}
.textarea { min-height: 96px; resize: vertical; }
.input[type="time"], .input[type="date"], .input[type="datetime-local"] { min-height: 2.6875rem; }

.qty-input {
  width: 3rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.input.is-invalid, .input[aria-invalid="true"],
.select.is-invalid, .select[aria-invalid="true"],
.textarea.is-invalid, .textarea[aria-invalid="true"] {
  border-color: var(--danger-500);
  background-color: var(--danger-50);
}
.input.is-invalid:focus, .input[aria-invalid="true"]:focus,
.select.is-invalid:focus, .select[aria-invalid="true"]:focus,
.textarea.is-invalid:focus, .textarea[aria-invalid="true"]:focus {
  border-color: var(--danger-600);
  box-shadow: 0 0 0 3px rgb(220 38 38 / 0.12);
  outline: none;
}
.input.is-invalid:focus-visible, .input[aria-invalid="true"]:focus-visible,
.select.is-invalid:focus-visible, .select[aria-invalid="true"]:focus-visible,
.textarea.is-invalid:focus-visible, .textarea[aria-invalid="true"]:focus-visible {
  outline: 2px solid var(--danger-600);
  outline-offset: 2px;
}
.checkbox.is-invalid, .checkbox[aria-invalid="true"],
.radio.is-invalid, .radio[aria-invalid="true"] {
  border-color: var(--danger-500);
  box-shadow: 0 0 0 1px var(--danger-500);
}

/* Gated by `was-submitted` so empty required fields don't render red on page load. */
form.was-submitted .input:invalid:not([data-skip-validate]),
form.was-submitted .select:invalid:not([data-skip-validate]),
form.was-submitted .textarea:invalid:not([data-skip-validate]) {
  border-color: var(--danger-500);
  background-color: var(--danger-50);
}

.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2371717a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px;
  padding-right: 2.25rem;
}

/* Native checkbox/radio styled to match */
.checkbox, .radio {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--border-strong);
  background: var(--bg-surface);
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: background var(--duration-fast), border-color var(--duration-fast);
  flex-shrink: 0;
}
.checkbox { border-radius: var(--radius-sm); }
.radio { border-radius: 50%; }
.checkbox:hover, .radio:hover { border-color: var(--gray-500); }
.checkbox:checked, .radio:checked { background: var(--gray-950); border-color: var(--gray-950); }
.checkbox:checked::after {
  content: "";
  width: 11px;
  height: 11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 10 4 4 8-8'/%3E%3C/svg%3E") center/contain no-repeat;
}
.radio:checked::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: white; }

.checkbox-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem;
  width: fit-content;
  font-size: 0.9375rem;
  cursor: pointer;
  user-select: none;
}
.checkbox-row > .field-error { flex-basis: 100%; order: 10; }
.checkbox-row a { color: var(--fg-primary); font-weight: 500; text-decoration: underline; text-decoration-color: var(--gray-300); text-underline-offset: 3px; }
.checkbox-row a:hover { text-decoration-color: var(--gray-900); }

/* iOS-style switch */
.switch {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  width: 36px;
  height: 22px;
  background: var(--gray-300);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--duration) var(--ease-out);
  flex-shrink: 0;
}
.switch::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: white;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration) var(--ease-out);
}
.switch:checked { background: var(--gray-950); }
.switch:checked::after { transform: translateX(14px); }

.editor-shell.is-invalid {
  border-color: var(--danger-500);
  box-shadow: 0 0 0 1px var(--danger-500);
}

.photo-uploader {
  position: relative;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-surface-2);
  padding: 1rem;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.photo-uploader:hover { border-color: var(--gray-700); background: var(--gray-100); }
.photo-uploader.is-dragging {
  border-color: var(--gray-950);
  background: var(--gray-100);
  box-shadow: 0 0 0 3px rgb(0 0 0 / 0.06);
}
.photo-uploader.is-invalid { border-color: var(--danger-500); background: var(--danger-50); }
.photo-uploader.has-photos { cursor: default; }

.photo-uploader-input {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

.photo-uploader-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.375rem; min-height: 120px; text-align: center;
  pointer-events: none;
}
.photo-uploader.has-photos .photo-uploader-empty { display: none; }
.photo-uploader-empty-icon { width: 28px; height: 28px; color: var(--fg-muted); }
.photo-uploader:hover .photo-uploader-empty-icon,
.photo-uploader.is-dragging .photo-uploader-empty-icon { color: var(--fg-primary); }
.photo-uploader-empty-title { font-size: 0.9375rem; font-weight: 600; color: var(--fg-primary); }
.photo-uploader-empty-hint { font-size: 0.75rem; color: var(--fg-muted); }

.photo-uploader-grid {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.5rem;
}
.photo-uploader.has-photos .photo-uploader-grid { display: grid; }

.photo-uploader-tile {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}
.photo-uploader-tile img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
.photo-uploader-tile-cover {
  position: absolute; top: 6px; left: 6px;
  padding: 2px 6px;
  background: var(--gray-950); color: var(--gray-0);
  font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: var(--radius-sm);
  pointer-events: none;
}
.photo-uploader-tile-remove {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--gray-950); color: var(--gray-0);
  border: 0; cursor: pointer; padding: 0;
  transition: background var(--duration-fast);
}
.photo-uploader-tile-remove:hover { background: var(--gray-800); }
.photo-uploader-tile-remove svg { width: 11px; height: 11px; }

.photo-uploader-add {
  display: none;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 0.375rem;
  aspect-ratio: 4/3;
  padding: 0;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-surface);
  color: var(--fg-muted);
  cursor: pointer;
  transition: border-color var(--duration-fast),
              color var(--duration-fast),
              background var(--duration-fast);
}
.photo-uploader.has-photos .photo-uploader-add { display: flex; }
.photo-uploader-add:hover { border-color: var(--gray-700); color: var(--fg-primary); background: var(--gray-50); }
.photo-uploader-add[hidden] { display: none !important; }
.photo-uploader-add svg { width: 20px; height: 20px; }
.photo-uploader-add-label { font-size: 0.75rem; font-weight: 500; }

.photo-uploader-meta {
  display: none;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--fg-muted);
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-subtle);
}
.photo-uploader.has-photos .photo-uploader-meta { display: flex; }
.photo-uploader-meta-count { color: var(--fg-secondary); font-weight: 500; }

/* Field group: horizontal grid of fields */
.field-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .field-grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .field-grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Tables ---------- */
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.875rem;
}
.table thead th {
  text-align: left;
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding: 0.75rem 1rem;
  background: var(--bg-surface-2);
  border-bottom: 1px solid var(--border-subtle);
}
.table thead th:first-child { border-top-left-radius: var(--radius); }
.table thead th:last-child { border-top-right-radius: var(--radius); }
.table tbody td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--duration-fast); }
.table tbody tr:hover { background: var(--bg-hover); }

/* ---------- Segmented control ----------
   Pill-grouped tab strip. Selected item gets the floating "card" treatment
   over the gray-100 trough so the active state reads at a glance. */
.segmented {
  display: inline-flex;
  align-items: stretch;
  gap: 2px;
  padding: 3px;
  background: var(--gray-100);
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
  /* Mobile: when the full set of items exceeds the viewport, become swipe-
     scrollable instead of clipping off-screen. Scrollbar hidden for the iOS
     sub-tab look. */
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.segmented::-webkit-scrollbar { display: none; }
.segmented-item { flex: 0 0 auto; }   /* items must not shrink when scroll container is narrower than content */
.segmented-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--fg-secondary);
  background: transparent;
  border: 0;
  border-radius: 9999px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.segmented-item:hover { color: var(--fg-primary); }
.segmented-item:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(0 0 0 / 0.08); }
.segmented-item.is-active {
  color: var(--fg-primary);
  background: var(--bg-surface);
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.06),
    0 0 0 1px rgb(0 0 0 / 0.04);
}
.segmented-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  font-feature-settings: 'tnum';
  color: var(--fg-muted);
  background: rgb(0 0 0 / 0.05);
  border-radius: 9999px;
  transition: color var(--duration-fast), background var(--duration-fast);
}
.segmented-item.is-active .segmented-count {
  color: var(--fg-primary);
  background: rgb(0 0 0 / 0.06);
}

/* Mobile: stretch the segmented pill to the full container width and let
   items distribute equally. Each item grows to fill its share, text centered.
   Counts dropped (no room when distributing labels across narrow viewport). */
@media (max-width: 600px) {
  .segmented {
    display: flex;            /* not inline-flex — must fill cross axis */
    width: 100%;
    padding: 3px;
    gap: 2px;
    overflow: visible;        /* no longer need scroll fallback at this width */
  }
  .segmented-item {
    flex: 1 1 0;              /* equal share of container width */
    justify-content: center;
    padding: 7px 4px;
    font-size: 0.8125rem;
    gap: 0;
    min-width: 0;
  }
  .segmented-count { display: none; }
}

/* ---------- Badges & tags ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 22px;
  padding: 0 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  background: var(--bg-surface-2);
  color: var(--fg-secondary);
  border: 1px solid var(--border-subtle);
}
.badge-solid { background: var(--gray-950); color: var(--gray-0); border-color: var(--gray-950); }
.badge-outline { background: transparent; }
.badge-success { background: var(--success-50); color: var(--success-700); border-color: var(--success-100); }
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.role-pill {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  vertical-align: middle;
}
.role-pill--admin { background: var(--gray-950); color: var(--gray-0); border-color: var(--gray-950); }
.role-pill--applicant { background: var(--bg-surface-2); color: var(--fg-secondary); border-color: var(--border-subtle); }
.role-pill--guest { background: transparent; color: var(--fg-muted); border-color: var(--border-strong); }

.tag {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: var(--radius-full);
  background: var(--bg-surface-2);
  color: var(--fg-primary);
  border: 1px solid var(--border-subtle);
}

/* ---------- Avatars ---------- */
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gray-200);
  color: var(--gray-700);
  font-size: 0.875rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  letter-spacing: -0.01em;
  border: 1px solid var(--border-subtle);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 28px; height: 28px; font-size: 0.6875rem; }
.avatar-lg { width: 56px; height: 56px; font-size: 1.125rem; }
.avatar-xl { width: 80px; height: 80px; font-size: 1.5rem; }

.avatar-stack { display: inline-flex; }
.avatar-stack .avatar { margin-left: -10px; box-shadow: 0 0 0 2px var(--bg-surface); }
.avatar-stack .avatar:first-child { margin-left: 0; }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgb(0 0 0 / 0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: var(--z-modal-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration) var(--ease-out);
}
.modal-overlay.is-open { opacity: 1; pointer-events: auto; }
.modal-panel {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  margin: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: var(--z-modal);
  transform: translateY(8px) scale(0.98);
  transition: transform var(--duration) var(--ease-out);
}
.modal-overlay.is-open .modal-panel { transform: translateY(0) scale(1); }
.modal-panel-lg { max-width: 720px; }
.modal-panel-xl { max-width: 960px; }
.modal-panel > form { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.modal-header {
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--border-subtle);
}
.modal-title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em; margin: 0; }
.modal-close { width: 32px; height: 32px; border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; color: var(--fg-muted); transition: background var(--duration-fast); }
.modal-close:hover { background: var(--bg-hover); color: var(--fg-primary); }
.modal-body { padding: 1.5rem; overflow-y: auto; flex: 1; min-height: 0; }
.modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface-2);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.625rem;
}

/* ---------- Drip completion form ---------- */
.drip-form { display: flex; flex-direction: column; gap: 1.25rem; }
.drip-form-intro { font-size: 0.875rem; color: var(--fg-secondary); line-height: 1.55; margin: 0; }
.drip-section { display: flex; flex-direction: column; gap: 0.875rem; }
.drip-section + .drip-section { padding-top: 1.25rem; border-top: 1px solid var(--border-subtle); }
.drip-section-head { display: flex; flex-direction: column; gap: 0.2rem; }
.drip-section-title { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); margin: 0; }
.drip-section-desc { font-size: 0.8125rem; color: var(--fg-secondary); line-height: 1.5; margin: 0; }
.drip-section-fields { display: grid; gap: 1rem; }
.drip-actions { padding-top: 1.25rem; border-top: 1px solid var(--border-subtle); }

/* ---------- Toast ---------- */
.toast-container {
  position: fixed;
  bottom: 1.5rem; right: 1.5rem;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}
.toast {
  background: var(--gray-950);
  color: var(--gray-0);
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  transform: translateY(8px);
  opacity: 0;
  transition: transform var(--duration) var(--ease-out), opacity var(--duration) var(--ease-out);
  max-width: 360px;
}
.toast.is-visible { transform: translateY(0); opacity: 1; }
.toast-error { background: #b42318; }

/* ---------- Info tooltip ----------
   <span class="info-tip">
     <button type="button" class="info-tip-trigger" aria-describedby="tip-id">i</button>
     <span class="info-tip-bubble" id="tip-id" role="tooltip">Helper text.</span>
   </span>
   Shows on hover/focus-within of the wrapper, so it works for keyboard and
   touch (tap focuses the button → :focus-within fires). No JS. */
.info-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 0.4rem;
}
.info-tip-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--fg-muted);
  cursor: help;
  border-radius: 9999px;
}
.info-tip-trigger:hover,
.info-tip-trigger:focus-visible {
  color: var(--fg-secondary);
  outline: none;
}
.info-tip-trigger svg { width: 1rem; height: 1rem; }
.info-tip-bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  background: var(--gray-950);
  color: var(--gray-0);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.8125rem;
  line-height: 1.4;
  width: max-content;
  max-width: 280px;
  box-shadow: var(--shadow-md);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-fast) var(--ease-out);
  z-index: 60;
}
.info-tip:hover .info-tip-bubble,
.info-tip:focus-within .info-tip-bubble {
  opacity: 1;
  visibility: visible;
}

/* ---------- Dropdown ---------- */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 0.375rem;
  z-index: var(--z-dropdown);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.dropdown-menu.dropdown-left { right: auto; left: 0; }
.dropdown-menu.dropdown-up {
  top: auto;
  bottom: calc(100% + 6px);
  transform: translateY(4px);
}
.dropdown.is-open .dropdown-menu { opacity: 1; pointer-events: auto; transform: translateY(0); }
.dropdown.is-open .dropdown-menu.dropdown-up { transform: translateY(0); }
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.5rem 0.625rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fg-primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--duration-fast);
  text-align: left;
}
.dropdown-item:hover { background: var(--bg-hover); }
.dropdown-item-icon { width: 16px; height: 16px; color: var(--fg-muted); flex-shrink: 0; }
.dropdown-divider { height: 1px; background: var(--border-subtle); margin: 0.375rem 0; }
.dropdown-label { padding: 0.375rem 0.625rem 0.25rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-muted); }

/* ============================================================
   Sidebar / Shell layout
   ============================================================ */
.app-shell {
  display: flex;
  min-height: 100vh;
  background: var(--bg-page);
}

.sidebar {
  width: var(--sidebar-w);
  background: var(--gray-950);
  color: var(--gray-300);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: var(--z-sidebar);
  transition: transform var(--duration) var(--ease-out);
}
.sidebar-header {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.25rem;
  border-bottom: 1px solid var(--border-inverse);
  flex-shrink: 0;
}
.sidebar-header .logo-mark { height: 40px; max-width: 200px; object-position: center; }
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 0.75rem;
}
.sidebar-section { margin-top: 1.25rem; }
.sidebar-section:first-child { margin-top: 0; }
.sidebar-section-label {
  padding: 0 0.75rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-500);
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  color: var(--gray-400);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background var(--duration-fast), color var(--duration-fast);
  position: relative;
}
.nav-item:hover { background: var(--gray-900); color: var(--gray-100); }
.nav-item.is-active {
  background: var(--gray-900);
  color: var(--gray-0);
}
.nav-item.is-active::before {
  content: "";
  position: absolute;
  left: -0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  background: var(--gray-0);
  border-radius: var(--radius-full);
}
.nav-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.85; }
.nav-item.is-active .nav-icon { opacity: 1; }
.nav-item .nav-badge { margin-left: auto; }

.sidebar-footer {
  padding: 0.75rem;
  border-top: 1px solid var(--border-inverse);
  flex-shrink: 0;
}

.app-main {
  flex: 1;
  margin-left: var(--sidebar-w);
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  height: var(--topbar-h);
  background: rgba(255,255,255,0.85);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  backdrop-filter: saturate(1.4) blur(16px);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  gap: 1rem;
}
.topbar-title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--fg-primary);
  margin: 0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-mobile {
  display: none;
  height: var(--topbar-h);
  align-items: center;
  padding: 0 0.5rem;
  background: var(--gray-950);
  color: var(--gray-0);
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  gap: 2px;
}
.topbar-mobile-ham {
  width: 40px; height: 40px; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--gray-100); background: transparent; border: 0; cursor: pointer; flex-shrink: 0;
}
.topbar-mobile-ham:hover { background: rgba(255,255,255,0.08); color: var(--gray-0); }
.topbar-mobile-ham svg { width: 22px; height: 22px; }
.topbar-mobile-org {
  display: inline-flex; align-items: center; gap: 5px;
  height: 40px; padding: 0 0.4rem; border-radius: var(--radius-full);
  background: transparent; border: 0; cursor: pointer; flex-shrink: 0; text-decoration: none;
}
.topbar-mobile-org:hover { background: rgba(255,255,255,0.08); }
.topbar-mobile-org .logo-mark { height: 22px; max-width: 150px; }
.topbar-mobile-org .logo-wordmark { color: var(--gray-0); }
.topbar-mobile-org-chevron { width: 14px; height: 14px; color: var(--gray-400); flex-shrink: 0; }
.topbar-mobile-spacer { flex: 1; min-width: 4px; }
.topbar-mobile .topbar-icon-btn {
  width: 38px; height: 38px; border-radius: var(--radius-full);
  color: var(--gray-300);
}
.topbar-mobile .topbar-icon-btn:hover { background: rgba(255,255,255,0.08); color: var(--gray-0); }
.topbar-mobile .topbar-icon-btn svg { width: 20px; height: 20px; }
.topbar-mobile .bell-badge { border-color: var(--gray-950); }
.topbar-mobile-center {
  flex: 1;
  min-width: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 2px;
}
.topbar-mobile-center + .topbar-mobile-spacer { flex: 0; min-width: 0; }
@media (max-width: 639px) {
  .topbar-mobile:has(.topbar-mobile-center) .topbar-mobile-org .logo-mark { max-width: 110px; }
}
@media (max-width: 419px) {
  .topbar-mobile:has(.topbar-mobile-center) .topbar-mobile-org .logo-mark { max-width: 84px; }
}

.app-content {
  padding: 2rem 1.5rem;
  max-width: var(--content-max);
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 1024px) { .app-content { padding: 2.5rem 2rem; } }

.page-header {
  margin-bottom: 2rem;
}
.page-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  margin-bottom: 0.5rem;
}
.page-title {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0;
}
/* Heavy display headline used on the onboarding screens — more presence than
   the standard .page-title without changing color. Layout proportions match
   the inspiration mocks; the orange accent is intentionally NOT adopted. */
.page-title-display {
  font-family: var(--font-display, var(--font-sans));
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--fg-primary);
  margin: 0 0 0.5rem;
}
.page-description {
  font-size: 0.9375rem;
  color: var(--fg-secondary);
  margin-top: 0.5rem;
  max-width: 60ch;
}
/* Compact table variant used inside the Application tab's category cards. */
.table-compact th, .table-compact td { padding: 0.5rem 0.75rem; font-size: 0.875rem; }

/* Switch + adjacent label, used in card headers / form rows. */
.switch-row {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.8125rem;
  color: var(--fg-secondary);
  cursor: pointer;
  user-select: none;
}
.switch-row > .switch { margin: 0; }

/* Pill-style segmented toggle. Wrap N radio inputs in label "options"; the
   selected one fills dark via :has(). Markup:
     <div class="segmented">
       <label class="segmented-option"><input type="radio" name="..." checked> Normal</label>
       <label class="segmented-option"><input type="radio" name="..."> Drip</label>
     </div>
*/
.segmented {
  display: inline-flex;
  background: var(--gray-100);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: 3px;
  gap: 2px;
}
.segmented-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--fg-secondary);
  cursor: pointer;
  border-radius: var(--radius-full);
  transition: background var(--duration) var(--ease-out),
              color var(--duration) var(--ease-out);
  user-select: none;
  white-space: nowrap;
}
.segmented-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0; height: 0;
  margin: 0;
}
.segmented-option:hover { color: var(--fg-primary); }
.segmented-option:has(input[type="radio"]:checked) {
  background: var(--gray-950);
  color: var(--gray-0);
  box-shadow: var(--shadow-xs);
}
.segmented-option:has(input[type="radio"]:focus-visible) {
  outline: 2px solid var(--gray-950);
  outline-offset: 2px;
}

/* Per-category field table. Centered toggle columns of fixed width. */
.table-fields { width: 100%; }
.table-fields th:nth-child(2), .table-fields td:nth-child(2),
.table-fields th:nth-child(3), .table-fields td:nth-child(3) {
  width: 88px; text-align: center;
}
.table-fields td input[type="checkbox"] { vertical-align: middle; }
.table-fields tbody tr:last-child td { border-bottom: 0; }

/* <details> styled as a card with a chevron-bearing summary. */
details.card > summary {
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
}
details.card > summary::-webkit-details-marker { display: none; }
details.card[open] > summary { border-bottom: 1px solid var(--border-subtle); }
details.card > summary::after {
  content: "";
  width: 8px; height: 8px;
  border-right: 1.6px solid var(--fg-muted);
  border-bottom: 1.6px solid var(--fg-muted);
  transform: rotate(45deg);
  transition: transform var(--duration) var(--ease-out);
  margin-left: auto;
  flex-shrink: 0;
}
details.card[open] > summary::after { transform: rotate(-135deg); }
/* Group of [title + right-side control] inside a summary. Takes all available
   width so the chevron sits flush right via the summary's flex layout. */
details.card > summary > .summary-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
}

/* Section dividers inside a single card form (used in Advanced Settings). */
.form-section { padding-top: 1.25rem; margin-top: 1.25rem; border-top: 1px solid var(--border-subtle); }
.form-section:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.form-section-title { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 0.25rem; }
.form-section-hint  { font-size: 0.8125rem; color: var(--fg-muted); margin: 0 0 1rem; max-width: 60ch; }

/* Right-align a card footer's single action button. The default footer uses
   space-between so a metadata line on the left + action on the right reads
   naturally; .justify-end is used when there's only an action. */
.card-footer.justify-end { justify-content: flex-end; }

/* Sticky settings save bar — pins to the viewport bottom while there's still
   content below it on the page; settles back into the document flow at the end. */
.settings-save-bar {
  position: sticky;
  bottom: 1rem;
  z-index: 30;
  margin-top: 1.5rem;
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.page-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* Mobile drawer behavior */
.drawer-backdrop {
  position: fixed; inset: 0;
  background: rgb(0 0 0 / 0.4);
  z-index: var(--z-drawer-backdrop);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration) var(--ease-out);
}
.drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }

@media (max-width: 1023px) {
  .sidebar {
    transform: translateX(-100%);
    z-index: var(--z-drawer);
  }
  .sidebar.is-open { transform: translateX(0); }
  .app-main { margin-left: 0; }
  .sidebar-header { display: none; }
  .topbar-mobile { display: flex; }
  /* The dark .topbar-mobile now owns the org switcher, utilities, and the
     applicant / guest indicator on mobile, so the desktop white .topbar is
     fully redundant here. */
  .topbar { display: none; }
  .org-switcher-menu { right: auto; left: 0; }
}

/* ============================================================
   Auth shell — premium monochrome onboarding surface.
   Display face + button/card craft are re-pointed/scoped here so
   the dashboard + admin shells stay on their own (Inter) styling.
   ============================================================ */
.auth-shell {
  /* Scoped display face — only auth headings get Archivo; :root keeps Inter. */
  --font-display: "Archivo", "Inter", ui-sans-serif, system-ui, sans-serif;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  background: var(--gray-950);
  position: relative;
  overflow-x: hidden;
}
.auth-shell::before {
  /* Layered monochrome backdrop — soft top glow + top-down wash for depth on black. */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1100px 560px at 50% -18%, rgb(255 255 255 / 0.05), transparent 68%),
    radial-gradient(760px 480px at 50% 118%, rgb(255 255 255 / 0.03), transparent 70%),
    linear-gradient(180deg, var(--gray-900), var(--gray-950) 42%);
  pointer-events: none;
}
.auth-shell::after {
  /* Faint film grain — adds tactile depth without color. */
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.04;
  mix-blend-mode: screen;
  pointer-events: none;
}
.auth-stack {
  position: relative;
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.auth-logo {
  display: inline-flex;
  margin-bottom: 1.625rem;
  opacity: 0;
  animation: auth-rise var(--duration-slow) var(--ease-out) 60ms forwards;
}
.auth-logo .logo-mark { height: 60px; max-width: 300px; object-position: center; }
@media (max-width: 639px) {
  .auth-logo .logo-mark { height: 76px; max-width: 78vw; }
}
.auth-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: linear-gradient(180deg, var(--gray-0), var(--gray-50));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow:
    inset 0 1px 0 0 rgb(255 255 255 / 0.7),
    var(--shadow-lg);
  overflow: hidden;
  opacity: 0;
  animation: auth-rise var(--duration-slow) var(--ease-out) 120ms forwards;
}
.auth-card-lg { max-width: 600px; }
.auth-card-xl { max-width: 760px; }
@keyframes auth-rise {
  from { opacity: 0; transform: translateY(10px) scale(0.992); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-logo, .auth-card { animation: none; opacity: 1; }
}
.auth-body { padding: 2rem; }
@media (min-width: 480px) { .auth-body { padding: 2.75rem; } }
.auth-eyebrow {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  font-stretch: 125%;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--fg-muted);
  margin: 0 0 0.75rem;
}
.auth-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.25rem);
  font-weight: 800;
  font-stretch: 110%;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--fg-primary);
  margin: 0 0 0.5rem;
}
.auth-subtitle {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--fg-secondary);
  margin: 0 0 2rem;
  max-width: 46ch;
}
.auth-form { display: flex; flex-direction: column; gap: 1.125rem; }

.auth-callout {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin: 0 0 1.75rem;
  padding: 0.875rem 1rem;
  background: linear-gradient(180deg, var(--gray-50), var(--bg-surface));
  border: 1px solid var(--orange-500);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.7);
  transition:
    border-color var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out),
    transform var(--duration) var(--ease-out);
}
.auth-callout:hover {
  border-color: var(--orange-600);
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px var(--orange-600),
    var(--shadow-sm);
}
.auth-callout:active:not(:disabled) { transform: none; }
.auth-callout-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--fg-secondary);
  box-shadow: var(--shadow-xs);
  transition: color var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
}
.auth-callout:hover .auth-callout-icon {
  color: var(--fg-primary);
  border-color: var(--border-strong);
}
.auth-callout-icon svg { width: 18px; height: 18px; }
.auth-callout-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.auth-callout-title {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--fg-primary);
}
.auth-callout-hint {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--fg-secondary);
}
.auth-callout-arrow {
  flex: none;
  margin-left: auto;
  display: grid;
  place-items: center;
  color: var(--fg-muted);
  transition: transform var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
}
.auth-callout-arrow svg { width: 18px; height: 18px; }
.auth-callout:hover .auth-callout-arrow {
  transform: translateX(3px);
  color: var(--fg-primary);
}
@media (prefers-reduced-motion: reduce) {
  .auth-callout, .auth-callout:hover, .auth-callout-arrow, .auth-callout:hover .auth-callout-arrow { transform: none; }
}

.auth-footer-link {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--fg-secondary);
}
.auth-footer-link a { color: var(--fg-primary); font-weight: 500; text-decoration: underline; text-decoration-color: var(--gray-300); text-underline-offset: 3px; }
.auth-footer-link a:hover { text-decoration-color: var(--gray-900); }
.auth-footnote {
  margin-top: 1.75rem;
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  color: var(--gray-500);
}

/* Dimensional monochrome buttons — scoped to auth so the dashboard's flat
   primary is untouched. Gradient fill + top highlight + lift on hover. */
.auth-shell .btn-primary {
  background: linear-gradient(180deg, var(--gray-800), var(--gray-950));
  border-color: var(--gray-950);
  box-shadow:
    inset 0 1px 0 0 rgb(255 255 255 / 0.12),
    var(--shadow-sm);
}
.auth-shell .btn-primary:hover {
  background: linear-gradient(180deg, var(--gray-700), var(--gray-900));
  border-color: var(--gray-900);
  color: var(--gray-0);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 0 rgb(255 255 255 / 0.16),
    var(--shadow-md);
}
.auth-shell .btn-primary:active:not(:disabled) {
  transform: translateY(0.5px);
  box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.35);
}
.auth-shell .btn-lg { height: 50px; letter-spacing: 0.005em; }
/* Forward-motion arrow: explicit via .btn-next, or auto on the main CTA of any
   step card (one that shows the .auth-step bar). Nudges right on hover. */
.btn-next::after,
.auth-shell .auth-card:has(.auth-step) .btn-primary.btn-block::after {
  content: "";
  width: 1.05em;
  height: 1.05em;
  margin-left: 0.15rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--duration) var(--ease-out);
}
.btn-next:hover::after,
.auth-shell .auth-card:has(.auth-step) .btn-primary.btn-block:hover::after { transform: translateX(3px); }

/* Step indicator (multi-step onboarding) */
.auth-step {
  padding: 1.125rem 2rem;
  background: linear-gradient(180deg, var(--gray-50), var(--bg-surface));
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.auth-step-count {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  font-stretch: 115%;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-muted);
  white-space: nowrap;
}
.auth-step-name {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-secondary);
  white-space: nowrap;
}
.auth-step-progress {
  flex: 1;
  height: 5px;
  background: var(--gray-200);
  border-radius: var(--radius-full);
  overflow: hidden;
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.06);
}
.auth-step-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--gray-600), var(--gray-950));
  border-radius: var(--radius-full);
  transition: width var(--duration-slow) var(--ease-out);
}

/* ============================================================
   Feed / Social
   ============================================================ */
.feed-post {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1rem;
}
.feed-post-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem 0;
}
.feed-post-author { font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.01em; }
.feed-post-meta { font-size: 0.75rem; color: var(--fg-muted); margin-top: 1px; }
.feed-post-body {
  padding: 1rem 1.5rem 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--fg-primary);
  white-space: pre-wrap;
  word-break: break-word;
}
.feed-post-image { width: 100%; max-height: 480px; object-fit: cover; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.feed-post-actions {
  padding: 0.75rem 1.5rem;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface-2);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.comment-thread { padding: 0.5rem 1.5rem 1rem; display: flex; flex-direction: column; gap: 0.75rem; border-top: 1px solid var(--border-subtle); }
.comment {
  display: flex;
  gap: 0.625rem;
  font-size: 0.875rem;
}
.comment-bubble {
  background: var(--bg-surface-2);
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius-md);
  flex: 1;
  min-width: 0;
}
.comment-author { font-weight: 600; font-size: 0.8125rem; margin-bottom: 0.125rem; }
.comment-body { color: var(--fg-primary); white-space: pre-wrap; word-break: break-word; line-height: 1.45; }
.comment-meta { font-size: 0.6875rem; color: var(--fg-muted); margin-top: 0.25rem; display: flex; gap: 0.625rem; align-items: center; }
.comment-reply { padding-left: 2.625rem; }
@media (max-width: 639px) {
  .comment-avatar { display: none; }
  .comment .flex.gap-3 { gap: 0; }
}

.alert-danger {
  background: var(--danger-50);
  border: 1px solid var(--danger-100);
  border-left: 3px solid var(--danger-600);
  color: var(--danger-900);
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius);
  font-size: 0.8125rem;
  margin-bottom: 0.5rem;
}

.alert-success {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-left: 3px solid #15803d;
  color: #14532d;
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius);
  font-size: 0.8125rem;
  margin-bottom: 0.5rem;
}

/* CheckboxSelectMultiple / RadioSelect renders as either:
 *   <ul id="id_<field>"><li><label><input>label</label></li>…</ul>     (legacy Django ≤ 4.x)
 *   <div id="id_<field>"><div><label><input>label</label></div>…</div> (Django 5+)
 * Scope the div variant to `.field >` so it doesn't sweep up unrelated #id_* divs. */
.field > div[id^="id_"],
ul[id^="id_"] {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.field > div[id^="id_"] > div,
ul[id^="id_"] li { margin: 0; }
.field > div[id^="id_"] > div label,
ul[id^="id_"] li label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
  user-select: none;
  padding: 0.375rem 0.5rem;
  border-radius: var(--radius);
  transition: background var(--duration-fast);
}
.field > div[id^="id_"] > div label:hover,
ul[id^="id_"] li label:hover { background: var(--bg-hover); }
.field > div[id^="id_"] > div input[type="checkbox"],
.field > div[id^="id_"] > div input[type="radio"],
ul[id^="id_"] li input[type="checkbox"],
ul[id^="id_"] li input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--border-strong);
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  display: inline-grid;
  place-content: center;
  flex-shrink: 0;
  cursor: pointer;
  margin: 0;
}
.field > div[id^="id_"] > div input[type="radio"],
ul[id^="id_"] li input[type="radio"] { border-radius: 50%; }
.field > div[id^="id_"] > div input[type="checkbox"]:checked,
.field > div[id^="id_"] > div input[type="radio"]:checked,
ul[id^="id_"] li input[type="checkbox"]:checked,
ul[id^="id_"] li input[type="radio"]:checked {
  background: var(--gray-950);
  border-color: var(--gray-950);
}
.field > div[id^="id_"] > div input[type="checkbox"]:checked::after,
ul[id^="id_"] li input[type="checkbox"]:checked::after {
  content: "";
  width: 10px; height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 10 4 4 8-8'/%3E%3C/svg%3E") center/contain no-repeat;
}
.field > div[id^="id_"] > div input[type="radio"]:checked::after,
ul[id^="id_"] li input[type="radio"]:checked::after {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: white;
}

/* Standalone <input type=checkbox> in form fields (BooleanField default) */
input[type="checkbox"]:not(.checkbox):not(.switch),
input[type="radio"]:not(.radio) {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--border-strong);
  background: var(--bg-surface);
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  flex-shrink: 0;
  vertical-align: middle;
  margin: 0;
}
input[type="checkbox"]:not(.checkbox):not(.switch) { border-radius: var(--radius-sm); }
input[type="radio"]:not(.radio) { border-radius: 50%; }
input[type="checkbox"]:not(.checkbox):not(.switch):checked,
input[type="radio"]:not(.radio):checked { background: var(--gray-950); border-color: var(--gray-950); }
input[type="checkbox"]:not(.checkbox):not(.switch):checked::after {
  content: ""; width: 11px; height: 11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 10 4 4 8-8'/%3E%3C/svg%3E") center/contain no-repeat;
}
input[type="radio"]:not(.radio):checked::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: white; }

/* Bootstrap btn-* aliases — when an input/button still has these from a Django form */
.btn-default, .btn-white { background: var(--bg-surface); color: var(--fg-primary); border-color: var(--border-strong); }
.btn-danger, .btn-warning, .btn-info, .btn-success { background: var(--gray-950); color: var(--gray-0); border-color: var(--gray-950); }
.btn-xs { height: 26px; padding: 0 0.5rem; font-size: 0.75rem; }
.btn-md { height: 40px; padding: 0 1rem; font-size: 0.9375rem; }

/* ============================================================
   Third-party overrides — Select2 (theme: CarClub)
   ============================================================ */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius) !important;
  min-height: 40px !important;
  background: var(--bg-surface) !important;
  font-family: inherit !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 38px !important;
  padding-left: 0.875rem !important;
  color: var(--fg-primary) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 38px !important;
  right: 0.5rem !important;
}
.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default.select2-container--open .select2-selection {
  border-color: var(--gray-950) !important;
  box-shadow: 0 0 0 3px rgb(0 0 0 / 0.06) !important;
}
.select2-dropdown {
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  overflow: hidden;
  background: var(--bg-surface) !important;
}
.select2-search--dropdown .select2-search__field {
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius) !important;
  padding: 0.5rem 0.75rem !important;
  font-family: inherit !important;
}
.select2-results__option { padding: 0.5rem 0.75rem !important; font-size: 0.875rem !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--gray-950) !important;
  color: var(--gray-0) !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
  background: var(--bg-hover) !important;
  color: var(--fg-primary) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--bg-surface-2) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--fg-primary) !important;
  padding: 0 0.5rem !important;
  margin-top: 6px !important;
  font-size: 0.8125rem !important;
}

/* ============================================================
   Third-party overrides — DataTables
   IMPORTANT: do not use Tailwind utility classes in the `dom` string;
   the Play CDN can't see classes added by DataTables at runtime.
   Use the dom layout: <"dt-controls-top"<"dt-controls-left"lB>f>rt<"dt-controls-bottom"ip>
   so the styles below take over.
   ============================================================ */
.dataTables_wrapper { font-size: 0.875rem; color: var(--fg-secondary); }

/* Top + bottom control bands sit inside the card and have generous padding */
.dataTables_wrapper .dt-controls-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
}
/* Bottom controls are ALWAYS centered (info on top, paginate underneath).
   This avoids cascade fights with DataTables' bundled `text-align: right`
   and gives a consistent, polished look on every viewport.
   Matches the top controls strip on `--bg-surface` (white) so the whole
   table card reads as one cohesive surface against the page canvas. */
.dataTables_wrapper .dt-controls-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.25rem;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
  text-align: center;
}
.dataTables_wrapper .dt-controls-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem;
}

/* Length / filter labels — small + uppercase */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  display: inline-flex;
  align-items: center;
  margin: 0;
}
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  font-weight: 600;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 0.375rem 0.625rem;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--fg-primary);
  background: var(--bg-surface);
  margin: 0;
  height: 32px;
  min-width: 200px;
}
.dataTables_wrapper .dataTables_length select { min-width: 0; padding-right: 1.75rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2371717a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 14px; -webkit-appearance: none; appearance: none; }
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--gray-950);
  outline: none;
  box-shadow: 0 0 0 3px rgb(0 0 0 / 0.06);
}

/* Export buttons (CSV, etc.) */
.dataTables_wrapper .dt-buttons { display: inline-flex; gap: 0.375rem; flex-wrap: wrap; }
.dataTables_wrapper .dt-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 32px !important;
  padding: 0 0.75rem !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
  background: var(--bg-surface) !important;
  color: var(--fg-primary) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background var(--duration-fast);
  margin: 0 !important;
}
.dataTables_wrapper .dt-button:hover { background: var(--bg-surface-2) !important; color: var(--fg-primary) !important; }
.dataTables_wrapper .dt-button:focus { outline: 2px solid var(--gray-950); outline-offset: 2px; }
.dataTables_wrapper .dt-button span { font-family: inherit !important; font-weight: inherit !important; }

/* Table itself stretches to the card edges */
table.dataTable {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0;
  margin: 0 !important;
}
table.dataTable thead th {
  text-align: left !important;
  font-weight: 600 !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--fg-muted) !important;
  padding: 0.75rem 1.25rem !important;
  background: var(--bg-surface-2) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  border-top: 0 !important;
  font-family: inherit !important;
}
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc { cursor: pointer; position: relative; padding-right: 1.5rem !important; background-image: none !important; }
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
  content: "";
  position: absolute;
  right: 0.625rem;
  top: 50%;
  width: 12px; height: 12px;
  margin-top: -6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23a1a1aa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 8 4-4 4 4M6 12l4 4 4-4'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.7;
}
table.dataTable thead th.sorting_asc::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2318181b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4-4 4 4'/%3E%3C/svg%3E"); opacity: 1; }
table.dataTable thead th.sorting_desc::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2318181b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E"); opacity: 1; }
table.dataTable tbody td {
  padding: 0.875rem 1.25rem !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  vertical-align: middle !important;
  font-size: 0.875rem;
}
table.dataTable tbody tr:last-child td { border-bottom: 0 !important; }
table.dataTable.no-footer { border-bottom: 0 !important; }
table.dataTable tbody tr:hover { background: var(--bg-hover) !important; }

/* Info text — always centered.
   Selectors prefixed with `div.dataTables_wrapper div.X` to MATCH the bundled
   DataTables CSS specificity (otherwise their `text-align: right` wins). */
div.dataTables_wrapper div.dataTables_info {
  color: var(--fg-muted);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  float: none !important;
  white-space: normal !important;
}

/* Paginate — always centered as a block with shrink-to-content + auto margins.
   This is the most reliable centering pattern in CSS and survives any
   parent layout (block, flex column, flex row, etc.). */
div.dataTables_wrapper div.dataTables_paginate {
  display: block !important;
  width: -webkit-fit-content !important;
  width: -moz-fit-content !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  float: none !important;
  text-align: center !important;
  white-space: normal !important;
  line-height: 1;
}
/* DataTables' Bootstrap variant wraps the buttons in <ul class="pagination">.
   With Tailwind preflight off and no Bootstrap reset loaded, the UL retains
   the browser-default `padding-left: 40px` for list indentation, which
   pushes the button cluster 20px right of the paginate box's center. Reset
   it explicitly. */
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
/* Replace the wide "Previous" / narrow "Next" text labels with equal-width
   chevron glyphs. With the original text, the visible character mass on the
   left (8 letters) outweighed the right (4 letters), shifting the row's
   visible center ~6px left of the info row above. Chevrons are symmetric. */
.dataTables_wrapper .dataTables_paginate .paginate_button.previous a,
.dataTables_wrapper .dataTables_paginate .paginate_button.next a {
  font-size: 0 !important;          /* hide the bundled "Previous" / "Next" text */
  line-height: 0;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.previous a::before {
  content: '\2039';                  /* ‹ U+2039 SINGLE LEFT-POINTING ANGLE QUOTATION MARK */
  font-size: 1rem;
  line-height: 1;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.next a::before {
  content: '\203A';                  /* › U+203A SINGLE RIGHT-POINTING ANGLE QUOTATION MARK */
  font-size: 1rem;
  line-height: 1;
}
/* The <span> wrapping numbered chips: keep inline so chips flow naturally */
div.dataTables_wrapper div.dataTables_paginate > span {
  display: inline !important;
  white-space: normal;
}
/* Buttons — inline-block respects text-align centering of the paginate parent.
   Avoid inline-flex here so the chips lay out as predictable inline boxes. */
div.dataTables_wrapper div.dataTables_paginate .paginate_button {
  display: inline-block !important;
  vertical-align: middle;
  min-width: 32px;
  height: 32px;
  line-height: 30px !important;
  padding: 0 0.625rem !important;
  margin: 0 2px !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-sm) !important;
  color: var(--fg-secondary) !important;
  background: transparent !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  text-align: center !important;
  cursor: pointer;
  box-shadow: none !important;
  box-sizing: border-box;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--bg-hover) !important;
  border-color: transparent !important;
  color: var(--fg-primary) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--gray-950) !important;
  color: var(--gray-0) !important;
  border-color: var(--gray-950) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: var(--fg-disabled) !important;
  background: transparent !important;
  cursor: not-allowed;
  pointer-events: none;
}
.dataTables_wrapper .dataTables_paginate span { display: inline-flex; gap: 0.125rem; }

/* Suppress legacy DataTables float behaviors that mess with the flex layout */
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { float: none !important; text-align: left !important; }

/* Horizontal scroll is scoped to ONLY the table — the control bands stay in place.
   Pair this with dom: '...<"dt-table-scroll"rt>...' on the JS init. */
.dataTables_wrapper .dt-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- Mobile + tablet responsive (≤767px, matches DataTables' bundled breakpoint) ---------- */
@media (max-width: 767px) {

  /* TOP CONTROLS — search input on top (most-used), length + CSV beneath */
  .dataTables_wrapper .dt-controls-top {
    flex-direction: column;
    align-items: stretch;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
  }
  .dataTables_wrapper .dataTables_filter { order: -1; width: 100%; }
  .dataTables_wrapper .dt-controls-left {
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 0.75rem;
  }

  /* Stack the "SEARCH" label above the input, full width */
  div.dataTables_wrapper div.dataTables_filter label {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0.375rem;
    margin: 0;
  }
  div.dataTables_wrapper div.dataTables_filter input {
    width: 100% !important;
    min-width: 0 !important;
    flex: none;
    height: 36px;
    font-size: 0.875rem;
  }

  div.dataTables_wrapper div.dataTables_length label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
  }
  div.dataTables_wrapper div.dataTables_length select { height: 32px; }

  /* Tighten cell padding on narrow viewports */
  table.dataTable thead th,
  table.dataTable tbody td { padding-left: 1rem !important; padding-right: 1rem !important; }

  /* Bump paginate tap targets on mobile (centering already handled globally) */
  div.dataTables_wrapper div.dataTables_paginate .paginate_button {
    min-width: 36px;
    height: 36px;
    line-height: 34px !important;
  }
}

/* ============================================================
   Topbar icon buttons (calendar, bell)
   ============================================================ */
.topbar-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  color: var(--fg-secondary);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background var(--duration-fast), color var(--duration-fast);
  text-decoration: none;
}
.topbar-icon-btn svg {
  width: 22px;
  height: 22px;
}
.topbar-icon-btn:hover {
  background: var(--bg-hover);
  color: var(--fg-primary);
}
.topbar-icon-btn:focus-visible {
  outline: 2px solid var(--gray-950);
  outline-offset: 2px;
}

/* ---------- Org switcher ---------- */
.org-switcher { position: relative; }
.org-switcher-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 40px;
  padding: 0 0.625rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--fg-primary);
  font-size: 0.875rem;
  font-weight: 550;
  letter-spacing: -0.01em;
  cursor: pointer;
  max-width: 220px;
  transition: background var(--duration-fast), border-color var(--duration-fast);
}
.org-switcher-trigger:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.org-switcher-trigger:focus-visible { outline: 2px solid var(--gray-950); outline-offset: 2px; }
.org-switcher-current { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-switcher-chevron { width: 16px; height: 16px; color: var(--fg-muted); flex-shrink: 0; }
.org-switcher-menu { min-width: 248px; }
.org-switcher-item { gap: 0.625rem; }
.org-switcher-item.is-active { font-weight: 600; }
.org-switcher-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-switcher-check { width: 16px; height: 16px; color: var(--fg-primary); flex-shrink: 0; }

/* ---------- Page actions — the unified "+" ----------
   One filled "+" is the create/add action on every page. A single action fires
   it directly (tooltip names it); two or more open a dropdown here on desktop and
   the speed-dial FAB on mobile. Both presentations are built by CarClub.actions
   from the hidden #cc-page-actions-source authored by each page. */
.topbar-action { position: relative; display: inline-flex; }
.topbar-action:empty { display: none; }
.topbar-action-btn {
  position: relative;
  width: 40px; height: 40px;
  border-radius: var(--radius-full);
  background: var(--gray-950);
  color: var(--gray-0);
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; flex-shrink: 0; text-decoration: none;
  transition: background var(--duration-fast), transform var(--duration-fast) var(--ease-out);
}
.topbar-action-btn:hover { background: var(--gray-800); }
.topbar-action-btn:active { transform: translateY(0.5px); }
.topbar-action-btn:focus-visible { outline: 2px solid var(--gray-950); outline-offset: 2px; }
.topbar-action-btn svg {
  width: 20px; height: 20px;
  stroke: currentColor; stroke-width: 2.2;
  transition: transform var(--duration) var(--ease-out);
}
.topbar-action.is-open .topbar-action-btn svg { transform: rotate(45deg); }

.topbar-action-tip {
  position: absolute; top: calc(100% + 9px); left: 50%;
  transform: translateX(-50%) translateY(-2px);
  background: var(--gray-950); color: var(--gray-0);
  font-size: 0.72rem; font-weight: 600; letter-spacing: -0.01em;
  padding: 0.32rem 0.55rem; border-radius: var(--radius-sm);
  white-space: nowrap; box-shadow: var(--shadow-md);
  z-index: var(--z-dropdown);
  opacity: 0; pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.topbar-action-tip::before {
  content: ""; position: absolute; top: -3px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px; height: 8px; background: var(--gray-950);
}
.topbar-action:hover .topbar-action-tip,
.topbar-action-btn:focus-visible ~ .topbar-action-tip { opacity: 1; transform: translateX(-50%) translateY(0); }

.topbar-action-menu { min-width: 236px; left: 0; right: auto; }
.cc-action-label { flex: 1; }
.cc-action-icon { width: 17px; height: 17px; color: var(--fg-secondary); flex-shrink: 0; }
.cc-action-icon svg { width: 100%; height: 100%; stroke-width: 1.7; }
.cc-action-count { font-size: 0.7rem; font-weight: 700; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.topbar-action-menu .dropdown-item.is-primary .cc-action-label { font-weight: 600; }
.topbar-action-menu .dropdown-item.is-primary .cc-action-icon { color: var(--fg-primary); }

/* ---------- Mobile FAB / speed-dial ----------
   Visible by default (mobile); hidden on desktop via the min-width query below.
   A plain `.cc-fab-wrap { display:none }` here would beat the max-width mobile
   show-rule earlier in the file — media queries add no specificity, so later
   source order wins. Hiding on desktop instead keeps the cascade correct. */
.cc-fab-wrap { display: block; }
@media (min-width: 1024px) { .cc-fab-wrap { display: none; } }
.cc-fab {
  position: fixed; right: 18px; bottom: 20px;
  width: 56px; height: 56px; border-radius: var(--radius-full);
  background: var(--gray-950); color: var(--gray-0);
  display: grid; place-items: center;
  box-shadow: var(--shadow-lg); border: 0; cursor: pointer;
  /* One below the drawer backdrop so opening the nav drawer covers it. */
  z-index: 39;
}
.cc-fab svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2.2; }
.cc-fab-scrim {
  position: fixed; inset: 0; background: rgb(0 0 0 / 0.4);
  z-index: var(--z-drawer-backdrop);
  opacity: 0; pointer-events: none;
  transition: opacity var(--duration) var(--ease-out);
}
.cc-fab-stack {
  position: fixed; right: 18px; bottom: 20px;
  z-index: var(--z-drawer);
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
}
.cc-fab-wrap.is-open .cc-fab { opacity: 0; pointer-events: none; }
.cc-fab-wrap.is-open .cc-fab-scrim { opacity: 1; pointer-events: auto; }
.cc-fab-wrap.is-open .cc-fab-stack { opacity: 1; pointer-events: auto; transform: translateY(0); }
.cc-fab-item { display: inline-flex; align-items: center; gap: 10px; }
.cc-fab-label {
  background: var(--bg-surface); color: var(--fg-primary);
  font-size: 0.8rem; font-weight: 600;
  padding: 0.4rem 0.7rem; border-radius: var(--radius-full);
  box-shadow: var(--shadow-md); white-space: nowrap;
}
.cc-fab-mini {
  width: 46px; height: 46px; border-radius: var(--radius-full);
  background: var(--bg-surface); color: var(--gray-950);
  display: grid; place-items: center;
  box-shadow: var(--shadow-lg); border: 1px solid var(--border-subtle);
}
.cc-fab-mini svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.9; }
.cc-fab-item.is-primary .cc-fab-label { background: var(--gray-950); color: var(--gray-0); }
.cc-fab-item.is-primary .cc-fab-mini { background: var(--gray-950); border-color: var(--gray-950); color: var(--gray-0); }
.cc-fab-main {
  width: 56px; height: 56px; border-radius: var(--radius-full);
  background: var(--gray-950); color: var(--gray-0);
  display: grid; place-items: center;
  box-shadow: var(--shadow-lg); border: 0; cursor: pointer;
}
.cc-fab-main svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2.2; transform: rotate(45deg); }

/* ---------- Applicant topbar indicator (progress + pending-review) ---------- */
.topbar-center-slot {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: min(360px, calc(100% - 18rem));
  pointer-events: auto;
  z-index: 1;
}
.topbar-has-applicant .topbar-title {
  max-width: calc(50% - 12rem);
}

.topbar-applicant {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3125rem 0.5rem 0.3125rem 0.5rem;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--fg-secondary);
  text-decoration: none;
  font-size: 0.8125rem;
  line-height: 1.2;
  max-width: 100%;
  min-width: 0;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
a.topbar-applicant:hover,
.topbar-applicant--has-tip:hover {
  border-color: var(--border-strong);
  color: var(--fg-primary);
  box-shadow: var(--shadow-sm);
}
a.topbar-applicant:focus-visible,
.topbar-applicant-main:focus-visible {
  outline: 2px solid var(--gray-950);
  outline-offset: 2px;
  border-radius: var(--radius-full);
}
.topbar-applicant-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--fg-muted);
  transition: color var(--duration-fast) var(--ease-out);
}
.topbar-applicant-icon svg { width: 18px; height: 18px; }
a.topbar-applicant:hover .topbar-applicant-icon,
.topbar-applicant-main:hover .topbar-applicant-icon { color: var(--fg-secondary); }

.topbar-applicant-label {
  font-weight: 600;
  color: var(--fg-primary);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-applicant-steps {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 1;
  min-width: 0;
  margin: 0 0.0625rem;
}
.topbar-applicant-step {
  flex: 0 1 14px;
  width: 14px;
  min-width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--gray-200);
  transition: background var(--duration) var(--ease-out);
}
.topbar-applicant-step.is-done {
  background: var(--gray-950);
}

.topbar-applicant-meta {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--fg-muted);
  font-size: 0.75rem;
  white-space: nowrap;
}

.topbar-applicant-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--fg-disabled);
  transition: transform var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
a.topbar-applicant:hover .topbar-applicant-chevron,
.topbar-applicant-main:hover .topbar-applicant-chevron {
  color: var(--fg-secondary);
  transform: translateX(2px);
}

.topbar-applicant-main {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.topbar-applicant-tip { margin-left: 0; }
.topbar-applicant-tip .info-tip-trigger { color: var(--fg-muted); }
.topbar-applicant-tip .info-tip-bubble {
  top: calc(100% + 8px);
  bottom: auto;
  left: auto;
  right: 0;
  z-index: var(--z-toast);
}
.topbar-applicant-tip--start .info-tip-bubble {
  left: 0;
  right: auto;
}
.topbar-tip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  font-variant-numeric: tabular-nums;
}
.topbar-tip-row > span:first-child { color: var(--gray-400); }

.topbar-applicant.is-pending {
  cursor: default;
}
.topbar-applicant.is-pending .topbar-applicant-icon { color: var(--fg-secondary); }

@media (max-width: 1023px) {
  .topbar-center-slot {
    left: 1rem;
    transform: translateY(-50%);
    justify-content: flex-start;
    max-width: calc(100% - 9rem);
  }
  .topbar-has-applicant .topbar-title { display: none; }
}
@media (max-width: 639px) {
  .topbar-applicant-meta { display: none; }
  .topbar-applicant-chevron { display: none; }
  .topbar-applicant.is-pending .topbar-applicant-meta-aside { display: none; }
}
@media (max-width: 479px) {
  .topbar-applicant-label { display: none; }
  .topbar-applicant.is-pending .topbar-applicant-label { display: inline; }
  .topbar-applicant { gap: 0.375rem; }
  .topbar-applicant-steps { display: none; }
}

.bell-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: #dc2626;       /* a single red accent for "you have new things" — only place red lives in the design */
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Bell dropdown content
   ============================================================ */
.bell-menu { padding: 0.375rem; }
.bell-list {
  max-height: min(60vh, 480px);
  overflow-y: auto;
  margin: 0 -0.375rem;
  padding: 0 0.375rem;
}
.bell-empty {
  padding: 1.75rem 1rem;
  text-align: center;
  color: var(--fg-muted);
  font-size: 0.8125rem;
}

.bell-item {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  padding: 0.625rem 0.625rem;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--fg-primary);
  cursor: pointer;
  transition: background var(--duration-fast);
  position: relative;
}
.bell-item:hover { background: var(--bg-hover); }
.bell-item.is-unread { background: rgba(0, 0, 0, 0.025); }
.bell-item.is-unread::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #dc2626;
}
.bell-item-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  background: var(--bg-surface-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-secondary);
}
.bell-item-icon svg { width: 16px; height: 16px; }
.bell-item-body { flex: 1; min-width: 0; }
.bell-item-title {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--fg-primary);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bell-item.is-unread .bell-item-title { font-weight: 600; }
.bell-item-snippet {
  font-size: 0.75rem;
  color: var(--fg-muted);
  margin-top: 1px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bell-item-meta {
  flex-shrink: 0;
  font-size: 0.6875rem;
  color: var(--fg-muted);
  margin-left: 0.25rem;
  white-space: nowrap;
}

/* History page row variant: full width, same content shape */
.bell-item--row {
  border-radius: 0;
  border-bottom: 1px solid var(--border-subtle);
  padding: 0.875rem 1.25rem;
}
.bell-item--row:last-child { border-bottom: 0; }

/* On phone-width viewports, drop the dropdown to full width and anchor right */
@media (max-width: 480px) {
  .bell-menu { min-width: 92vw !important; max-width: 92vw !important; }
}

/* ============================================================
   Utility: subtle hover lift
   ============================================================ */
.hover-lift { transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out); }
.hover-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* Empty states */
.empty-state {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--fg-muted);
}
.empty-state-icon { width: 48px; height: 48px; margin: 0 auto 1rem; color: var(--fg-disabled); }
.empty-state-title { font-size: 1rem; font-weight: 600; color: var(--fg-secondary); margin-bottom: 0.25rem; }
.empty-state-body { font-size: 0.875rem; max-width: 40ch; margin: 0 auto; }

/* Guest-list meta subline — middot-joins only the non-empty fields (no leading dot) */
@media (max-width: 767px) {
  .guest-meta { font-size: 0.8125rem; line-height: 1.45; color: var(--fg-muted); }
  .guest-meta > :empty { display: none; }
  .guest-meta > :not(:empty):has(~ :not(:empty))::after {
    content: "·";
    margin: 0 0.4em;
    color: var(--fg-disabled);
  }
}

/* Skeleton loader */
.skeleton {
  background: linear-gradient(90deg, var(--gray-100) 0%, var(--gray-150) 50%, var(--gray-100) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   Events redesign components (orange accent system)
   Driven by /events/ cross-org page + event detail. Mobile-first.
   ============================================================ */

/* Display heavy treatment for event titles + page headers */
.font-display-heavy {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-transform: uppercase;
}

/* Page-level events header — "EVENTS" treatment */
.events-page-title {
  font-size: clamp(2rem, 7vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--fg-primary);
}

/* Pill / dark badge ("MEMBER EVENTS") */
.pill {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 0.875rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.pill-dark {
  background: var(--gray-950);
  color: var(--gray-0);
}
.pill-orange {
  background: var(--orange-500);
  color: var(--gray-0);
}
.pill-outline {
  background: transparent;
  color: var(--fg-primary);
  border: 1px solid var(--border-strong);
}
.pill-muted {
  background: var(--gray-100);
  color: var(--fg-secondary);
}

/* Event card — list view */
.event-card {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}
.event-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.event-card-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 220px;
  background: var(--gray-100);
  overflow: hidden;
}
.event-card-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--gray-100), var(--gray-200));
  color: var(--gray-400);
}
.hero-placeholder svg {
  width: 56px;
  height: 56px;
}
.hero-placeholder img {
  width: auto;
  height: auto;
  max-width: min(58%, 200px);
  max-height: 48%;
  object-fit: contain;
  background: var(--gray-950);
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.event-card-body {
  padding: 1.125rem 1.25rem 1.25rem;
}
.event-card-title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--orange-500);
  margin-bottom: 0.625rem;
}
.event-card-meta-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  color: var(--fg-primary);
  margin-top: 0.875rem;
}
.event-card-meta-row .icon {
  width: 18px;
  height: 18px;
  color: var(--orange-500);
  flex-shrink: 0;
}
.event-card-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 1rem 0;
}
.event-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.95rem;
}
.event-card-footer-status {
  font-weight: 600;
  color: var(--orange-500);
}
.event-card-footer-status.is-sold-out {
  color: var(--fg-muted);
}

/* Date overlay on hero (orange box bottom-left) */
.date-overlay {
  position: absolute;
  bottom: 0.875rem;
  left: 0.875rem;
  background: var(--orange-500);
  color: var(--gray-0);
  padding: 0.875rem 1rem 0.75rem;
  border-radius: var(--radius);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
  min-width: 64px;
  z-index: 1;
  box-shadow: 0 4px 10px rgb(249 95 31 / 0.18);
}
.date-overlay .day { font-size: 1.5rem; display: block; margin-bottom: 0.125rem; }
.date-overlay .month { font-size: 0.7rem; letter-spacing: 0.08em; }

/* RSVP'd "Going" variant — subtle orange accent ring + footer badge */
.event-card.is-going {
  border-color: var(--orange-500);
  box-shadow: inset 0 0 0 1px var(--orange-500);
}
.event-card.is-going:hover {
  box-shadow: inset 0 0 0 1px var(--orange-500), var(--shadow-md);
}
.event-card-going-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem 0.2rem 0.45rem;
  background: var(--orange-100);
  color: var(--orange-700);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.event-card-going-badge svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Detail-page compact "Going" status chip (sits inline with the action buttons) */
.rsvp-going-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  background: var(--orange-100);
  color: var(--orange-700);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.rsvp-going-chip svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.rsvp-going-chip.is-past {
  background: var(--bg-surface-2);
  color: var(--fg-muted);
  cursor: default;
}
.rsvp-going-chip--trigger {
  border: 0;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}
.rsvp-going-chip--trigger:hover { background: var(--orange-200); }
.rsvp-going-chip--trigger .chip-caret {
  width: 13px;
  height: 13px;
  margin-left: -0.1rem;
  transition: transform var(--duration-fast) var(--ease-out);
}
.dropdown.is-open .rsvp-going-chip--trigger .chip-caret { transform: rotate(180deg); }

/* Event action row — tactile primary CTA + accent-on-interaction secondary buttons */
.event-actions .btn-rsvp {
  background: linear-gradient(180deg, var(--gray-800), var(--gray-950));
  border-color: var(--gray-950);
  box-shadow: var(--shadow-sm);
}
.event-actions .btn-rsvp:hover {
  background: linear-gradient(180deg, var(--gray-700), var(--gray-900));
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.event-actions .btn-rsvp:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}
.event-actions .btn-rsvp .btn-icon {
  transition: transform var(--duration) var(--ease-out);
}
.event-actions .btn-rsvp:hover .btn-icon {
  transform: scale(1.08) rotate(-3deg);
}
.event-actions .btn-secondary:hover {
  transform: translateY(-1px);
  border-color: var(--orange-200);
  color: var(--orange-700);
}
.event-actions .btn-secondary:hover .btn-icon {
  color: var(--orange-500);
}

/* Destructive items inside the "More actions" overflow menu */
button.dropdown-item {
  background: transparent;
  border: 0;
  font-family: inherit;
}
.dropdown-item-danger,
.dropdown-item-danger .dropdown-item-icon {
  color: var(--danger-600);
}
.dropdown-item-danger:hover {
  background: var(--danger-50);
}

/* Greyed past variant */
.event-card.is-past .event-card-title { color: var(--fg-secondary); }
.event-card.is-past .date-overlay { background: var(--gray-400); box-shadow: none; }
.event-card.is-past .event-card-hero img { filter: grayscale(0.7); opacity: 0.8; }
.event-card.is-past .hero-placeholder { opacity: 0.7; }

/* ---------- Org filter chip bar ---------- */
.org-chip-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.org-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--fg-secondary);
  background: var(--bg-surface);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  user-select: none;
}
.org-chip:hover {
  border-color: var(--gray-400);
  color: var(--fg-primary);
}
.org-chip input[type="checkbox"] {
  width: 14px; height: 14px;
  accent-color: var(--orange-500);
  margin: 0;
}
.org-chip.is-active {
  background: var(--orange-100);
  border-color: var(--orange-500);
  color: var(--orange-700);
}

/* ---------- Tabs with count badges ---------- */
.tab-bar {
  display: flex;
  gap: 1.5rem;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 1.25rem;
}
.tab-bar-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 0.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fg-secondary);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.tab-bar-item:hover { color: var(--fg-primary); }
.tab-bar-item.is-active {
  color: var(--orange-500);
  border-bottom-color: var(--orange-500);
}
.tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 0.4rem;
  background: var(--orange-500);
  color: var(--gray-0);
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: var(--radius-full);
}
.tab-bar-item:not(.is-active) .tab-count {
  background: var(--gray-300);
  color: var(--fg-secondary);
}

/* Scrollable, edge-to-edge variant for pages with many tabs (e.g. admin settings). */
.tab-bar-scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-left: -1.25rem;
  margin-right: -1.25rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.tab-bar-scroll::-webkit-scrollbar { display: none; }
.tab-bar-scroll .tab-bar-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* Compresses tabs to share the row width so they all stay visible on narrow screens. */
@media (max-width: 639px) {
  .tab-bar-fit { gap: 0.25rem; }
  .tab-bar-fit .tab-bar-item {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.75rem 0.25rem;
    font-size: 0.8125rem;
  }
  .tab-bar-fit .tab-count {
    min-width: 16px;
    height: 16px;
    padding: 0 0.25rem;
    font-size: 0.625rem;
  }
}

/* Toggle pill (mine filter). Renamed away from .switch to avoid colliding
   with the iOS-style switch defined earlier in this file. */
.toggle-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
  user-select: none;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--fg-primary);
}
.toggle-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-pill-slider {
  position: relative;
  width: 40px; height: 22px;
  background: var(--gray-300);
  border-radius: var(--radius-full);
  transition: background var(--duration-fast) var(--ease-out);
  flex-shrink: 0;
}
.toggle-pill-slider::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: var(--gray-0);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-xs);
  transition: transform var(--duration-fast) var(--ease-out);
}
.toggle-pill input:checked + .toggle-pill-slider { background: var(--orange-500); }
.toggle-pill input:checked + .toggle-pill-slider::after { transform: translateX(18px); }

/* ---------- Visibility chip block (event detail) ---------- */
.visibility-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.875rem;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--fg-secondary);
  background: var(--bg-surface);
}
.visibility-chip.is-active {
  background: var(--orange-100);
  color: var(--orange-700);
  border-color: var(--orange-500);
}
.visibility-chip.is-inactive {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  color: var(--fg-disabled);
  border-color: var(--border-subtle);
}

/* ---------- Ticket stub (web ticket page) ---------- */
.ticket-stub {
  position: relative;
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  max-width: 420px;
  margin: 0 auto;
}
.ticket-stub-hero { background: var(--orange-500); color: var(--gray-0); padding: 1.5rem; }
.ticket-stub-hero h2 { color: var(--gray-0); font-weight: 800; font-size: 1.5rem; }
.ticket-stub-perforation {
  border-top: 2px dashed var(--border-strong);
  position: relative;
}
.ticket-stub-perforation::before, .ticket-stub-perforation::after {
  content: '';
  position: absolute;
  top: -10px;
  width: 20px; height: 20px;
  background: var(--bg-page);
  border-radius: var(--radius-full);
}
.ticket-stub-perforation::before { left: -10px; }
.ticket-stub-perforation::after { right: -10px; }
.ticket-stub-body { padding: 1.5rem; text-align: center; }
.ticket-qr { margin: 1rem auto; max-width: 220px; }

/* ---------- "Refer a friend" copy-input ---------- */
.copy-input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
}
.copy-input input { background: transparent; border: 0; flex: 1; min-width: 0; font-size: 0.875rem; }
.copy-input button {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--orange-500);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
}
.copy-input button:hover { background: var(--orange-100); }

/* ---------- Page chrome for /events/ (minimal, no sidebar) ---------- */
.events-shell {
  min-height: 100vh;
  background: var(--bg-page);
}
.events-shell-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky; top: 0;
  z-index: var(--z-topbar);
}
.events-shell-content {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.25rem 1rem 4rem;
}
.events-icon-btn {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-primary);
  border-radius: var(--radius);
  transition: background var(--duration-fast) var(--ease-out);
}
.events-icon-btn:hover { background: var(--bg-hover); }
.events-icon-btn.is-active { color: var(--orange-500); }

/* ============================================================
   Feed page — homepage activity digest
   ============================================================ */
.feed-wrap { max-width: 880px; margin: 0 auto; }

.feed-header {
  margin-bottom: 1.75rem;
  padding-bottom: 1.125rem;
  border-bottom: 1px solid var(--border-subtle);
}
.feed-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.feed-header-title {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
  margin: 0;
}
.feed-header-date {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--fg-muted);
  white-space: nowrap;
}
.feed-header-date svg { width: 15px; height: 15px; flex-shrink: 0; }
.feed-header-date.feed-weather { gap: 0.875rem; }
.feed-weather-day {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.feed-weather-day svg { width: 17px; height: 17px; flex-shrink: 0; }
.feed-weather-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.feed-weather-temp {
  font-weight: 600;
  color: var(--fg-secondary);
  font-variant-numeric: tabular-nums;
}
.feed-header-description {
  font-size: 0.875rem;
  color: var(--fg-secondary);
  margin: 0.4rem 0 0;
  max-width: 60ch;
}

.feed-section { margin-top: 2.5rem; }

.feed-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.875rem;
}
.feed-section-title {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-primary);
  margin: 0;
}
.feed-section-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--fg-muted);
  transition: color var(--duration-fast) var(--ease-out), gap var(--duration-fast);
}
.feed-section-link:hover { color: var(--fg-primary); gap: 0.4rem; }

/* Upcoming events — 3-up card grid */
.feed-events-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 640px) {
  .feed-events-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.feed-event-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--fg-primary);
  transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}
.feed-event-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.feed-event-card-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--gray-100);
  overflow: hidden;
}
.feed-event-card-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.feed-event-card-hero-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--gray-100), var(--gray-150));
  color: var(--fg-disabled);
}
.feed-event-card-hero-placeholder svg { width: 28px; height: 28px; }
.feed-event-card-hero-placeholder img { width: auto; height: auto; max-width: 88px; max-height: 56px; object-fit: contain; background: var(--gray-950); padding: 9px 12px; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.feed-event-card-hero .feed-date-chip {
  position: absolute;
  bottom: 0.625rem;
  left: 0.625rem;
  box-shadow: 0 4px 10px rgb(249 95 31 / 0.18);
}
.feed-event-card-body {
  padding: 0.875rem 1rem 1rem;
}
.feed-event-card-title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--orange-500);
  margin-bottom: 0.4rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.feed-event-card-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: var(--fg-secondary);
}
.feed-event-card-meta .icon {
  width: 15px; height: 15px;
  color: var(--orange-500);
  flex-shrink: 0;
}

/* Compact rows in feed cards */
.feed-list {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.feed-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--fg-primary);
  transition: background var(--duration-fast) var(--ease-out);
}
.feed-row:last-child { border-bottom: 0; }
.feed-row:hover { background: var(--bg-surface-2); }

.feed-row-title {
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  color: var(--fg-primary);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.feed-row-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--fg-muted);
  margin-top: 0.2rem;
  flex-wrap: wrap;
}
.feed-row-meta .dot {
  width: 3px; height: 3px;
  background: currentColor;
  border-radius: 50%;
  opacity: 0.5;
}
.feed-row-arrow {
  width: 16px; height: 16px;
  color: var(--fg-muted);
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-out), color var(--duration-fast);
}
.feed-row:hover .feed-row-arrow {
  color: var(--orange-500);
  transform: translateX(2px);
}

/* Mini orange date chip used inside compact event rows */
.feed-date-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  padding: 0.4rem 0.25rem 0.35rem;
  background: var(--orange-500);
  color: var(--gray-0);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
}
.feed-date-chip .day { font-size: 1.0625rem; }
.feed-date-chip .month { font-size: 0.6rem; letter-spacing: 0.06em; margin-top: 2px; }

/* Avatar bubble used inside forum row context */
.feed-row .avatar.feed-row-avatar {
  width: 36px; height: 36px;
  font-size: 0.8125rem;
  background: var(--gray-100);
  color: var(--fg-secondary);
}

.feed-row-tag {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  color: var(--fg-secondary);
  border-radius: var(--radius-full);
  letter-spacing: -0.005em;
}

.feed-row-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.05rem;
  text-align: right;
  flex-shrink: 0;
  min-width: 3.25rem;
}
.feed-row-stat .num {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--fg-primary);
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.feed-row-stat .label {
  font-size: 0.6875rem;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Listings grid in the feed */
.feed-market-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .feed-market-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.feed-market-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  color: var(--fg-primary);
  transition: transform var(--duration) var(--ease-out), border-color var(--duration-fast);
}
.feed-market-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
}
.feed-market-card-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  background: var(--bg-surface-2);
  display: block;
}
.feed-market-card-img-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--gray-100), var(--gray-150));
  display: grid;
  place-items: center;
  color: var(--fg-disabled);
}
.feed-market-card-img-placeholder svg { width: 28px; height: 28px; }
.feed-market-card-body { padding: 0.625rem 0.75rem 0.75rem; }
.feed-market-card-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--orange-500);
  letter-spacing: -0.01em;
  line-height: 1;
}
.feed-market-card-title {
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--fg-secondary);
  margin-top: 0.25rem;
  letter-spacing: -0.005em;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Empty cards within feed sections */
.feed-empty {
  padding: 1.5rem 1rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--fg-muted);
  background: var(--bg-surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
}
.feed-empty a { color: var(--fg-primary); font-weight: 500; text-decoration: underline; text-decoration-color: var(--gray-300); text-underline-offset: 3px; }
.feed-empty a:hover { text-decoration-color: var(--gray-900); }

/* ---------- Datepicker (Cally + popover wrapper) ---------- */
.datepicker-wrap { position: relative; display: block; }

.datepicker-trigger {
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: var(--bg-surface);
  color: var(--fg-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.datepicker-trigger.is-empty { color: var(--fg-muted); }
.datepicker-trigger svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--fg-muted);
  margin-left: auto;
}

/* Top-layer popover (via the Popover API) so it escapes overflow:hidden
   ancestors like .card. JS sets top/left from the trigger's rect. */
.datepicker-pop[popover] {
  position: fixed;
  inset: unset;
  margin: 0;
  padding: 0.5rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.datepicker-pop-header {
  padding: 0.25rem 0.25rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.datepicker-year-select {
  height: 34px;
  padding: 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  min-width: 100px;
}

calendar-date {
  --color-accent: var(--orange-500);
  --color-text-on-accent: var(--gray-0);
  font-family: var(--font-sans);
}
/* Cally's prev/next buttons (rendered in its shadow DOM as part="previous"
   and part="next") — give them a clear button affordance so the user
   doesn't have to hover to know they're clickable. Equal-sized so the
   combined Month+Year heading sits true-center between them. */
calendar-date::part(previous),
calendar-date::part(next) {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  color: var(--fg-secondary);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
calendar-date::part(previous):hover,
calendar-date::part(next):hover {
  background: var(--bg-hover);
  color: var(--orange-600);
  border-color: var(--border-strong);
}
calendar-date::part(previous):focus-visible,
calendar-date::part(next):focus-visible {
  outline: 2px solid var(--gray-950);
  outline-offset: 2px;
}
/* Combined Month + Year heading (replaces Cally's year-only default heading
   and the standalone month-name caption on calendar-month — see hide rule
   below). Reads as a single unit at the visual center of the nav row. */
.datepicker-heading {
  font-weight: 700;
  color: var(--fg-primary);
  font-size: 0.9375rem;
  letter-spacing: -0.005em;
}
/* Hide Cally's standalone month-name caption — the combined heading above
   covers both month and year. */
calendar-month::part(heading) { display: none; }
calendar-month::part(day) {
  border-radius: var(--radius-sm);
  color: var(--fg-primary);
  font-weight: 500;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
calendar-month::part(day):hover {
  background: var(--orange-100);
  color: var(--orange-700);
}
calendar-month::part(outside) { color: var(--fg-disabled); }
calendar-month::part(today) {
  outline: 1px solid var(--orange-500);
  outline-offset: -1px;
  color: var(--orange-700);
}
calendar-month::part(selected) {
  background: var(--orange-500);
  color: var(--gray-0);
  font-weight: 700;
}
calendar-month::part(disabled) {
  color: var(--fg-disabled);
  cursor: not-allowed;
}

/* ============================================================
   Garage — vehicle card grid
   ============================================================ */
.garage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 1.25rem;
}
@media (min-width: 1024px) { .garage-grid { gap: 1.5rem; } }
@media (min-width: 1280px) {
  .garage-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
}

.car-card {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--duration) var(--ease-out),
              box-shadow var(--duration) var(--ease-out),
              border-color var(--duration) var(--ease-out);
}
.car-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--gray-300);
}
.car-card:focus-visible {
  outline: 2px solid var(--gray-950);
  outline-offset: 2px;
}

/* P1 accent — dark ring + faint elevation. Reads as "this is the one." */
.car-card.is-p1 {
  border-color: var(--gray-950);
  box-shadow: 0 0 0 1px var(--gray-950), var(--shadow-xs);
}
.car-card.is-p1:hover {
  box-shadow: 0 0 0 1px var(--gray-950), var(--shadow-lg);
}

/* Read-only variant — same shell as .car-card, no pointer/hover/expand. */
.car-card-static {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.car-card-static.is-past { opacity: 0.6; }
.car-card-static.is-past .car-card-photo img { filter: grayscale(0.35); }

/* Photo */
.car-card-photo {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--gray-100);
  overflow: hidden;
  isolation: isolate;
}
.car-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease-out);
}
.car-card:hover .car-card-photo img { transform: scale(1.04); }

/* Subtle gradient overlay so light pills stay readable on bright photos. */
.car-card-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.08) 100%);
  pointer-events: none;
}

.car-card-photo-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.6), transparent 55%),
    linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
  color: var(--gray-400);
}
.car-card-photo-empty svg { width: 56px; height: 56px; }

/* Status pills overlay */
.car-card-pills {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  left: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.375rem;
  z-index: 1;
  pointer-events: none;
}
.car-card-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.92);
  color: var(--fg-primary);
  border: 1px solid rgba(24, 24, 27, 0.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  backdrop-filter: blur(10px) saturate(1.4);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.car-card-pill svg { width: 11px; height: 11px; }
.car-card-pill.is-p1 {
  background: var(--gray-950);
  color: var(--gray-0);
  border-color: var(--gray-950);
}
.car-card-pill.is-for-sale {
  background: #b45309; /* amber-700 — preserves prior "for sale" hue */
  color: var(--gray-0);
  border-color: #b45309;
}
.car-card-pill.is-past-pill {
  background: rgba(24, 24, 27, 0.7);
  color: var(--gray-0);
  border-color: transparent;
}

/* Body */
.car-card-body {
  padding: 0.875rem 1.125rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.car-card-headline {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  min-width: 0;
}
.car-card-title {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--fg-primary);
  line-height: 1.2;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}
.car-card-year {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--fg-secondary);
  flex-shrink: 0;
}
.car-card-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.car-card-subtitle {
  font-size: 0.8125rem;
  color: var(--fg-secondary);
  line-height: 1.35;
  margin: 0;
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.car-card-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-top: 0.125rem;
}
.car-card-color {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.75rem;
  color: var(--fg-secondary);
  letter-spacing: -0.005em;
}
.car-card-color-dot {
  width: 11px;
  height: 11px;
  border-radius: var(--radius-full);
  background: var(--gray-300);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.45);
  flex-shrink: 0;
}
.car-card-color-dot[data-color="black"]  { background: #18181b; border-color: #000; }
.car-card-color-dot[data-color="white"]  { background: #fafafa; border-color: var(--gray-300); }
.car-card-color-dot[data-color="silver"] { background: linear-gradient(135deg, #e4e4e7 10%, #a1a1aa 90%); }
.car-card-color-dot[data-color="gray"]   { background: #71717a; }
.car-card-color-dot[data-color="red"]    { background: #dc2626; }
.car-card-color-dot[data-color="blue"]   { background: #1d4ed8; }
.car-card-color-dot[data-color="green"]  { background: #15803d; }
.car-card-color-dot[data-color="yellow"] { background: #eab308; }
.car-card-color-dot[data-color="orange"] { background: #ea580c; }
.car-card-color-dot[data-color="purple"] { background: #7e22ce; }
.car-card-color-dot[data-color="brown"]  { background: #78350f; }
.car-card-color-dot[data-color="gold"]   { background: linear-gradient(135deg, #fef08a 10%, #ca8a04 90%); }
.car-card-color-dot[data-color="beige"]  { background: #e7e0cf; border-color: var(--gray-300); }
.car-card-color-dot[data-color="maroon"] { background: #7f1d1d; }
.car-card-color-dot[data-color="pink"]   { background: #ec4899; }

/* Expandable details — grid-template-rows trick lets variable-height content
   animate cleanly without measuring at runtime. Visibility flips out of sync
   with the row animation so inner controls stay focusable in the expanded
   state and disappear from the tab order when collapsed. */
.car-card-details {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--duration-slow) var(--ease-out),
              visibility 0s linear var(--duration-slow);
}
.car-card.is-expanded .car-card-details {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows var(--duration-slow) var(--ease-out),
              visibility 0s linear 0s;
}
.car-card-details-inner { overflow: hidden; }
.car-card-details-content {
  padding: 1rem 1.125rem 1.125rem;
  border-top: 1px solid var(--border-subtle);
}

.car-card-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0.875rem 1rem;
  padding-bottom: 0.875rem;
  margin-bottom: 0.875rem;
  border-bottom: 1px dashed var(--border-subtle);
}
.car-card-stats:last-child {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}
.car-card-stat-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  margin-bottom: 0.1875rem;
}
.car-card-stat-value {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--fg-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.car-card-stat-unit {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--fg-muted);
  margin-left: 0.0625rem;
}

.car-card-section {
  margin-bottom: 0.875rem;
}
.car-card-section:last-child { margin-bottom: 0; }
.car-card-section-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  margin-bottom: 0.3125rem;
}
.car-card-section-body {
  font-size: 0.8125rem;
  color: var(--fg-secondary);
  line-height: 1.55;
  white-space: pre-wrap;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.car-card-section-sale .car-card-section-label { color: #b45309; }

.car-card-link-row {
  margin-bottom: 0.875rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}
.car-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--fg-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 1px;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.car-card-link:hover { border-color: var(--gray-950); }

.car-card-remove { color: var(--fg-muted); }
.car-card-remove:hover { color: var(--fg-primary); background: var(--bg-hover); }

/* Toggle row */
.car-card-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  width: 100%;
  padding: 0.5625rem 0.75rem;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border-subtle);
  color: var(--fg-muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.car-card-toggle:hover {
  background: var(--bg-hover);
  color: var(--fg-primary);
}
.car-card-toggle-chevron {
  width: 12px;
  height: 12px;
  transition: transform var(--duration) var(--ease-out);
}
.car-card.is-expanded .car-card-toggle-chevron { transform: rotate(180deg); }
.car-card-toggle-label-less { display: none; }
.car-card.is-expanded .car-card-toggle-label-more { display: none; }
.car-card.is-expanded .car-card-toggle-label-less { display: inline; }

/* Past garage section */
.garage-past-divider {
  margin: 3rem 0 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.garage-past-divider::before,
.garage-past-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}
.garage-past-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.garage-past-count {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  padding: 0.0625rem 0.4375rem;
  border-radius: var(--radius-full);
  font-variant-numeric: tabular-nums;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--fg-secondary);
  letter-spacing: 0;
}

.garage-grid-past .car-card {
  opacity: 0.78;
  filter: saturate(0.7);
}
.garage-grid-past .car-card:hover {
  opacity: 1;
  filter: saturate(1);
}
.garage-grid-past .car-card-photo img { filter: grayscale(0.35); }
.garage-grid-past .car-card:hover .car-card-photo img { filter: grayscale(0); }

@media (prefers-reduced-motion: reduce) {
  .car-card,
  .car-card-photo img,
  .car-card-details,
  .car-card-toggle-chevron {
    transition: none;
  }
  .car-card:hover { transform: none; }
  .car-card:hover .car-card-photo img { transform: none; }
}

.car-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 0.375rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--border-subtle);
  margin-top: 0.25rem;
}
.car-card-action {
  flex: 0 0 auto;
  white-space: nowrap;
}
.btn.btn-xs.car-card-action { padding: 0 0.5625rem; }

/* ============================================================
   Image upload (single) — dropzone for the car photo
   ============================================================ */
.image-upload {
  display: block;
  position: relative;
  width: 100%;
  min-height: 88px;
  padding: 0.875rem 1rem;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-surface-2);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.image-upload:hover {
  border-color: var(--gray-950);
  background: var(--bg-hover);
}
.image-upload.is-dragging {
  border-color: var(--gray-950);
  background: var(--bg-hover);
  box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.08);
}
.image-upload-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  border: 0;
}
.image-upload-empty {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  min-height: 64px;
  pointer-events: none;
  text-align: left;
}
.image-upload-empty[hidden] { display: none; }
.image-upload-icon {
  width: 26px; height: 26px;
  color: var(--fg-muted);
  flex-shrink: 0;
}
.image-upload:hover .image-upload-icon,
.image-upload.is-dragging .image-upload-icon { color: var(--gray-950); }
.image-upload-copy { display: flex; flex-direction: column; gap: 0.125rem; }
.image-upload-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fg-primary);
  letter-spacing: -0.005em;
}
.image-upload-hint { font-size: 0.75rem; color: var(--fg-muted); }
.image-upload-preview {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.image-upload-preview.hidden { display: none; }
.image-upload-thumb {
  width: 96px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  flex-shrink: 0;
}
.image-upload-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4375rem;
  min-width: 0;
  flex: 1;
}
.image-upload-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fg-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* ============================================================
   File upload (PDF) — same affordance, document-shaped
   ============================================================ */
.file-upload {
  display: block;
  position: relative;
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-surface-2);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.file-upload:hover {
  border-color: var(--gray-950);
  background: var(--bg-hover);
}
.file-upload.is-dragging {
  border-color: var(--gray-950);
  background: var(--bg-hover);
  box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.08);
}
.file-upload.has-error {
  border-color: #b91c1c;
  background: rgba(185, 28, 28, 0.04);
}
.file-upload-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  border: 0;
}
.file-upload-empty {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 52px;
  pointer-events: none;
}
.file-upload-empty[hidden] { display: none; }
.file-upload-icon {
  width: 22px; height: 22px;
  color: var(--fg-muted);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.file-upload-icon svg { width: 22px; height: 22px; }
.file-upload:hover .file-upload-icon,
.file-upload.is-dragging .file-upload-icon { color: var(--gray-950); }
.file-upload-copy { display: flex; flex-direction: column; gap: 0.0625rem; }
.file-upload-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fg-primary);
  letter-spacing: -0.005em;
}
.file-upload-hint { font-size: 0.75rem; color: var(--fg-muted); }

.file-upload-preview {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}
.file-upload-preview.hidden { display: none; }
.file-upload-pdf-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--gray-950);
  color: var(--gray-0);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.file-upload-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3125rem;
  min-width: 0;
  flex: 1;
}
.file-upload-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fg-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.file-upload-row {
  display: flex; align-items: center; gap: 0.875rem;
}
.file-upload-link {
  font-size: 0.75rem;
  color: var(--fg-primary);
  text-decoration: underline;
  text-decoration-color: var(--gray-300);
  text-underline-offset: 3px;
}
.file-upload-link:hover { text-decoration-color: var(--gray-950); }
.file-upload-clear {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--fg-primary);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--gray-300);
  text-underline-offset: 3px;
}
.file-upload-clear:hover { text-decoration-color: var(--gray-950); }

/* ============================================================
   Edit-modal "list for sale" CTA — promoted pill at the bottom
   of the car form, replaces the old expand-by-checkbox affordance
   ============================================================ */
.car-form-sale-cta {
  border-top: 1px solid var(--border-subtle);
  padding-top: 1rem;
}
.car-form-sale-cta-inner {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  padding: 1rem 1.125rem;
  border-radius: var(--radius-md);
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  color: var(--fg-primary);
  text-align: left;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
button.car-form-sale-cta-inner:hover {
  background: var(--bg-surface);
  border-color: var(--gray-950);
  box-shadow: var(--shadow-sm);
}
.car-form-sale-cta-icon {
  width: 36px; height: 36px;
  border-radius: var(--radius);
  background: var(--gray-950);
  color: var(--gray-0);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.car-form-sale-cta-icon svg { width: 18px; height: 18px; }
.car-form-sale-cta-text {
  display: flex; flex-direction: column; gap: 0.125rem;
  flex: 1; min-width: 0;
}
.car-form-sale-cta-title {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.car-form-sale-cta-sub {
  font-size: 0.8125rem;
  color: var(--fg-secondary);
}
.car-form-sale-cta-chevron {
  color: var(--fg-muted);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.car-form-sale-cta-chevron svg { width: 16px; height: 16px; }
.car-form-sale-cta-inner.is-active {
  cursor: default;
  background: var(--bg-surface);
  border-color: var(--border-subtle);
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}
.car-form-sale-cta-eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #b45309;
  margin-bottom: 0.25rem;
}
.car-form-sale-cta-copy {
  font-size: 0.8125rem;
  color: var(--fg-secondary);
  margin: 0;
}
.car-form-sale-cta-actions {
  display: flex;
  gap: 0.375rem;
  align-items: center;
}

.switch-row {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.self-end { align-self: end; }

.modal-title-stack { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.modal-eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  margin: 0;
}