:root {
  /* Light theme — soft greys, hairline borders, near-black text */
  --bg: #fafafa;
  --surface: #ffffff;
  --border: rgba(0, 0, 0, 0.07);
  --border-strong: rgba(0, 0, 0, 0.12);
  --text: #1a1c1f;
  --muted: #6c7079;
  --muted-2: #9aa0a8;
  --primary: #6a3fc7;
  --primary-dark: #5530b0;
  --primary-fade: rgba(106, 63, 199, 0.10);
  --link: #6a3fc7;
  --link-hover: #5530b0;
  --row-hover: rgba(0, 0, 0, 0.025);
  --success-bg: rgba(47, 156, 93, 0.10);
  --success-fg: #2f9c5d;
  --error-bg: rgba(199, 69, 69, 0.10);
  --error-fg: #c74545;
  --warn-bg: rgba(184, 138, 19, 0.12);
  --warn-fg: #b88a13;
  --warn-border: #b88a13;
  --info: #4170d6;
  --good: #2f9c5d;
  --good-fade: rgba(47, 156, 93, 0.10);
  --danger: #c74545;
  --danger-fade: rgba(199, 69, 69, 0.10);
  --warn: #b88a13;
  --warn-fade: rgba(184, 138, 19, 0.12);
  --radius: 12px;
  --shadow: none;
  --input-bg: #ffffff;
  --input-fg: #1a1c1f;
}

[data-theme="dark"] {
  /* Dark theme — true near-black bg, surface barely lighter, hairline borders */
  --bg: #0b0c0e;
  --surface: #16181c;
  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.12);
  --text: #e8e9eb;
  --muted: #8a8f96;
  --muted-2: #5d6168;
  --primary: #8965d9;
  --primary-dark: #7351c2;
  --primary-fade: rgba(137, 101, 217, 0.14);
  --link: #b39bef;
  --link-hover: #cdbef5;
  --row-hover: rgba(255, 255, 255, 0.03);
  --success-bg: rgba(78, 194, 122, 0.12);
  --success-fg: #4ec27a;
  --error-bg: rgba(213, 79, 79, 0.12);
  --error-fg: #e57676;
  --warn-bg: rgba(214, 164, 22, 0.12);
  --warn-fg: #e6b836;
  --warn-border: #d6a416;
  --info: #5e90ff;
  --good: #4ec27a;
  --good-fade: rgba(78, 194, 122, 0.10);
  --danger: #d54f4f;
  --danger-fade: rgba(213, 79, 79, 0.10);
  --warn: #d6a416;
  --warn-fade: rgba(214, 164, 22, 0.10);
  --shadow: none;
  --input-bg: #1c1f24;
  --input-fg: #e8e9eb;
}

a { color: var(--link); transition: color 0.12s; }
a:hover { color: var(--link-hover); }
/* Dark-theme pill overrides removed — pill colors now derive from CSS
   variables that already swap by theme. */
[data-theme="dark"] .panel-alert { background: var(--warn-bg); border-left-color: var(--warn-border); }
[data-theme="dark"] .finding { background: var(--row-hover); }

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 350;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography scale — light weights, slightly tighter tracking on headings */
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -0.005em; line-height: 1.3; }
h1 { font-size: 1.95rem; font-weight: 400; letter-spacing: -0.02em; }
h2 { font-size: 1.05rem; font-weight: 500; }
h3 { font-size: 0.95rem; font-weight: 500; }
h4 { font-size: 0.88rem; font-weight: 500; }
p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }
code, pre { font-family: 'Geist Mono', 'SF Mono', Menlo, Monaco, monospace; font-size: 0.92em; }
strong, b { font-weight: 500; }

.nav {
  background: transparent;
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.brand-name {
  letter-spacing: 0.06em;
  font-weight: 500;
}
.brand-divider {
  width: 1px;
  height: 22px;
  background: var(--border);
}
.brand-lockup {
  height: 28px;
  width: auto;
  display: block;
}
/* Logo text is dark on a white-safe asset; in dark mode we boost brightness
   so the navy "Intelligence" and grey "House" remain legible without losing
   the yellow triangle accents. */
[data-theme="dark"] .brand-lockup {
  filter: brightness(1.65) contrast(0.95);
}
.links { display: flex; gap: 14px; align-items: center; }

/* nav dropdown (projects jump list) */
.nav-dd { position: relative; }
.nav-dd summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--text);
  padding: 0;
  user-select: none;
}
.nav-dd summary::-webkit-details-marker { display: none; }
.nav-dd summary:hover { color: var(--primary); }
.nav-dd-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 280px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  z-index: 100;
  padding: 6px;
}
.nav-dd-menu ul { list-style: none; margin: 0; padding: 0; }
.nav-dd-menu li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 10px;
  border-radius: 6px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.9rem;
  gap: 8px;
}
.nav-dd-menu li a:hover { background: var(--bg); }
.dd-badge {
  background: var(--warn-bg);
  color: var(--warn-fg);
  border: 1px solid var(--warn-border);
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.72rem;
  flex-shrink: 0;
}

.theme-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  width: 32px;
  height: 32px;
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}
.theme-toggle:hover { background: var(--bg); }
[data-theme="dark"] .theme-toggle .icon-light { display: inline; }
[data-theme="dark"] .theme-toggle .icon-dark { display: none; }
[data-theme="light"] .theme-toggle .icon-light { display: none; }
[data-theme="light"] .theme-toggle .icon-dark { display: inline; }
.theme-toggle .icon-light { display: none; }
.theme-toggle .icon-dark { display: inline; }
.links a { color: var(--text); text-decoration: none; font-size: 0.95rem; }
.links a:hover { color: var(--primary); }
.user { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.9rem; cursor: default; }
.user img { width: 26px; height: 26px; border-radius: 50%; }
.user-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
[data-theme="dark"] .user-initials { color: #0b1220; }
.role { color: var(--muted); font-size: 0.8rem; }

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 48px 32px 80px;
}

.muted { color: var(--muted); }
.small { font-size: 0.85rem; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
}
.btn-primary {
  background: var(--text);
  color: var(--bg);
  font-weight: 400;
}
.btn-primary:hover { opacity: 0.88; color: var(--bg); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-ghost {
  background: transparent;
  color: var(--muted);
  border-color: var(--border-strong);
}
.btn-ghost:hover { color: var(--text); border-color: var(--text); background: transparent; }
.btn-google { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); }
.btn-google:hover { background: var(--row-hover); border-color: var(--text); }

.flash {
  padding: 10px 14px;
  border-radius: var(--radius);
  margin-bottom: 12px;
  font-size: 0.95rem;
}
.flash-error { background: var(--error-bg); color: var(--error-fg); }
.flash-success { background: var(--success-bg); color: var(--success-fg); }

.login-card {
  max-width: 420px;
  margin: 60px auto;
  background: var(--surface);
  padding: 36px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  text-align: center;
}
.login-card h1 { margin-bottom: 8px; }
.login-card p { color: var(--muted); margin-bottom: 24px; }
.login-card .btn { width: 100%; justify-content: center; }
.login-card .small { margin-top: 16px; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
.card.disabled { opacity: 0.75; }
.card p { color: var(--muted); font-size: 0.92rem; }
.badge {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--muted);
}

.table {
  width: 100%;
  background: transparent;
  border: none;
  border-collapse: collapse;
  border-spacing: 0;
}
.table th {
  padding: 0 16px 14px;
  text-align: left;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.table td {
  padding: 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
  vertical-align: middle;
}
.table thead { background: transparent; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--row-hover); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table tr.inactive { opacity: 0.5; }
.table tr.row-has-open {
  background: var(--warn-bg);
}
.table tr.row-has-open td:first-child a {
  font-weight: 600;
}

.col-actions { width: 120px; }
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.95rem;
  border: 1px solid transparent;
  margin-right: 2px;
}
.icon-btn:hover {
  background: var(--bg);
  border-color: var(--border);
}

.pill-open-findings {
  background: var(--warn-bg);
  color: var(--warn-fg);
  border: 1px solid var(--warn-border);
  text-decoration: none;
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}
.pill-open-findings:hover { filter: brightness(1.1); }

/* Ask Sentry */
.ask-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.ask-form textarea {
  width: 100%;
  font-size: 1rem;
  min-height: 64px;
}
.ask-form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.ask-answer .ask-answer-body {
  padding: 8px 0 4px;
  font-size: 0.95rem;
  line-height: 1.5;
}
.ask-answer pre.pre-inline {
  white-space: pre-wrap;
  word-break: break-word;
}
.ask-history { list-style: none; padding: 0; margin: 0; }
.ask-history li {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.ask-history li:last-child { border-bottom: none; }
.ask-history .ask-q { margin: 4px 0; font-size: 0.95rem; }
.ask-history .ask-a { margin: 4px 0 6px; font-size: 0.9rem; color: var(--muted); }
.ask-history pre.pre-inline { white-space: pre-wrap; word-break: break-word; margin: 0; }

/* spec-import diff badges */
.pill-diff-new { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.pill-diff-conflict { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.pill-diff-same { background: var(--bg); color: var(--muted); border-color: var(--border); }
[data-theme="dark"] .pill-diff-new { background: #064e3b; color: #a7f3d0; border-color: #047857; }
[data-theme="dark"] .pill-diff-conflict { background: #422006; color: #fcd34d; border-color: #b45309; }

.diff-status-new td { background: rgba(16, 185, 129, 0.06); }
.diff-status-conflict td { background: rgba(245, 158, 11, 0.08); }
[data-theme="dark"] .diff-status-new td { background: rgba(16, 185, 129, 0.12); }
[data-theme="dark"] .diff-status-conflict td { background: rgba(245, 158, 11, 0.14); }

.diff-table { table-layout: fixed; }
.diff-table td, .diff-table th { vertical-align: top; }
.diff-table td .pre-inline { white-space: pre-wrap; word-break: break-word; font-size: 0.85rem; }
.diff-table .cell-proposed { width: auto; }
.diff-table .cell-proposed textarea {
  width: 100%;
  min-height: 90px;
  font-size: 0.9rem;
}

/* Core-field diff cards (better than a table for long free-text fields) */
.diff-card {
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 14px;
  background: var(--bg);
}
.diff-card.diff-status-new { border-left-color: #10b981; }
.diff-card.diff-status-conflict { border-left-color: var(--warn-border); }
.diff-card.diff-status-same { opacity: 0.6; }

.diff-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.diff-card-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  cursor: pointer;
}
.diff-card-toggle input { width: auto; }
.diff-card-label { font-size: 1rem; }

.diff-card-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.diff-col { min-width: 0; }
.diff-col-title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.diff-current {
  max-height: 180px;
  overflow-y: auto;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.9rem;
  word-break: break-word;
  white-space: pre-wrap;
}
.diff-col textarea {
  width: 100%;
  min-height: 140px;
  font-size: 0.92rem;
}
@media (max-width: 780px) {
  .diff-card-body { grid-template-columns: 1fr; }
  .diff-current { max-height: 120px; }
}

/* social-media calendar */
.social-posts { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.social-post {
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: var(--bg);
}
.social-post.status-approved { border-left-color: #10b981; }
.social-post.status-rejected { border-left-color: #6b7280; opacity: 0.65; }
.social-post.channel-instagram_feed { border-left-color: #c13584; }
.social-post.channel-instagram_stories { border-left-color: #e4405f; }
.social-post.channel-facebook { border-left-color: #1877f2; }

.social-post-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.social-hook { font-size: 1.05rem; font-weight: 600; margin: 4px 0; }
.social-body pre.pre-inline { white-space: pre-wrap; word-break: break-word; font-size: 0.93rem; margin: 6px 0; }
.social-cta { font-size: 0.92rem; margin: 4px 0; }
.social-tags { margin: 6px 0; }
.hashtag {
  display: inline-block;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  margin: 2px 4px 2px 0;
  font-size: 0.78rem;
  color: var(--muted);
}
.social-image-prompt summary { cursor: pointer; }
.social-image-prompt pre.pre-inline {
  margin: 6px 0;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.85rem;
}
.social-post-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.social-post-edit {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.social-post-edit label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  margin-bottom: 8px;
}

.pill-channel-instagram_feed { background: #fce4f1; color: #831843; border-color: #f9a8d4; }
.pill-channel-instagram_stories { background: #ffe4e6; color: #9f1239; border-color: #fda4af; }
.pill-channel-facebook { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
[data-theme="dark"] .pill-channel-instagram_feed { background: #500724; color: #f9a8d4; border-color: #831843; }
[data-theme="dark"] .pill-channel-instagram_stories { background: #4c0519; color: #fda4af; border-color: #9f1239; }
[data-theme="dark"] .pill-channel-facebook { background: #1e3a8a; color: #bfdbfe; border-color: #1e40af; }

.pill-social-proposed { background: var(--bg); color: var(--muted); border-color: var(--border); }
.pill-social-approved { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.pill-social-rejected { background: #f3f4f6; color: #374151; border-color: #d1d5db; }
[data-theme="dark"] .pill-social-approved { background: #064e3b; color: #a7f3d0; border-color: #047857; }
[data-theme="dark"] .pill-social-rejected { background: #27272a; color: #d4d4d8; border-color: #3f3f46; }

/* duplicate-group consolidation UI */
.dup-group {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 0 0 12px;
  background: var(--bg);
}
.dup-group legend {
  padding: 0 6px;
  font-size: 0.88rem;
  color: var(--muted);
}
.dup-choices {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.dup-choice {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
}
.dup-choice:hover { background: var(--surface); }
.dup-choice input { width: auto; margin: 0; }
.dup-keep-all { border-top: 1px dashed var(--border); margin-top: 4px; padding-top: 8px; }
.dup-canonical {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  color: var(--muted);
}
.dup-canonical input { width: 100%; }

/* features (Your Suite / The Building / Amenities) */
.feature-list { list-style: none; padding: 0; margin: 0; }
.feature-list li { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.feature-list li .feature-label { flex: 1; }
.feature-row { display: flex; gap: 6px; flex: 1; align-items: center; margin: 0; }
.feature-row input { flex: 1; }
.feature-add {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.feature-add input { flex: 1; }

/* focus template hints on strategy form */
.focus-presets {
  list-style: none;
  margin: 0 0 10px;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.88rem;
}
.focus-presets li { margin: 3px 0; }

/* per-project sticky sidebar */
.project-layout {
  display: flex;
  gap: 48px;
  align-items: flex-start;
}
.project-sidebar {
  flex: 0 0 220px;
  position: sticky;
  top: 32px;
  align-self: flex-start;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  /* Slim, design-matching scrollbar so the persistent macOS / Windows
     scrollbars don't compete with the nav content. Falls back gracefully
     where these properties aren't supported. */
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.project-sidebar::-webkit-scrollbar { width: 6px; }
.project-sidebar::-webkit-scrollbar-track { background: transparent; }
.project-sidebar::-webkit-scrollbar-thumb {
  background-color: var(--border-strong);
  border-radius: 3px;
}
.project-sidebar::-webkit-scrollbar-thumb:hover { background-color: var(--muted); }
.project-sidebar-inner {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}
.project-sidebar ul { list-style: none; padding: 0; margin: 0; }
.project-sidebar li { margin: 0; }
.project-sidebar a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 14px;
  margin: 0;
  border-radius: 6px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 350;
  line-height: 1.45;
  transition: color 0.15s, background 0.15s;
}
.project-sidebar a:hover {
  color: var(--text);
  background: var(--row-hover);
}
.project-sidebar a.active,
.project-sidebar a:active {
  background: var(--text);
  color: var(--bg);
  font-weight: 400;
}
.project-sidebar .sb-alert a {
  background: var(--warn-fade);
  color: var(--warn);
  font-weight: 400;
  margin-bottom: 4px;
}
.project-sidebar .sb-alert a:hover { color: var(--warn); background: var(--warn-fade); opacity: 0.85; }
.sb-badge {
  background: var(--warn);
  color: white;
  border: none;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 0.7rem;
  font-weight: 500;
}
[data-theme="dark"] .sb-badge { color: var(--bg); }
.sb-count {
  color: var(--muted-2);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}
.project-sidebar a.active .sb-count { color: var(--bg); opacity: 0.55; }
.project-main { flex: 1; min-width: 0; }

@media (max-width: 900px) {
  .project-layout { display: block; }
  .project-sidebar { display: none; }
}

/* form-jump nav (section quick-links above long forms) */
.form-jump {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  box-shadow: var(--shadow);
  font-size: 0.88rem;
}
.form-jump a {
  text-decoration: none;
  color: var(--link);
  padding: 2px 8px;
  border-radius: 4px;
}
.form-jump a:hover {
  background: var(--bg);
  color: var(--link-hover);
}

/* form sections rendered as collapsible details */
details.form-section > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--border);
  user-select: none;
}
details.form-section > summary::-webkit-details-marker { display: none; }
details.form-section > summary > h2 { margin: 0; }
details.form-section > summary > h2:hover { color: var(--primary); }
details.form-section > summary::after {
  content: "▾";
  color: var(--muted);
  font-size: 0.85rem;
  transition: transform 0.2s ease;
  margin-left: auto;
}
details.form-section:not([open]) > summary {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
details.form-section:not([open]) > summary::after { transform: rotate(-90deg); }

/* collapsible panels */
details.collapsible > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 0 14px;
  margin: -4px 0 10px;
  border-bottom: 1px solid var(--border);
  user-select: none;
}
details.collapsible > summary::-webkit-details-marker { display: none; }
details.collapsible > summary > h2 { margin: 0; }
details.collapsible > summary > h2:hover { color: var(--primary); }
details.collapsible > summary::after {
  content: "▾";
  color: var(--muted);
  font-size: 0.85rem;
  transition: transform 0.2s ease;
  margin-left: auto;
  flex-shrink: 0;
}
details.collapsible:not([open]) > summary::after {
  transform: rotate(-90deg);
}
details.collapsible:not([open]) > summary {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* nav QC badge */
.nav-qc { display: inline-flex; align-items: center; gap: 6px; }
.nav-qc-badge {
  display: inline-block;
  min-width: 20px;
  text-align: center;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--warn-bg);
  color: var(--warn-fg);
  border: 1px solid var(--warn-border);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
}

select, input[type="text"], input[type="url"], input[type="email"], input[type="search"],
input[type="number"], input[type="date"], input:not([type]), textarea {
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--input-fg);
  font-family: inherit;
  font-weight: 350;
  font-size: 0.9rem;
  width: 100%;
  transition: border-color 0.15s, background 0.15s;
}
select:focus, input:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
}
select { color: var(--input-fg); }
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--muted); }
input:disabled, select:disabled, textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.inline { display: inline; margin: 0; }

/* page headers with right-aligned actions */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.page-header h1 { margin: 0; }
.page-header > div:first-child p { color: var(--muted); margin-top: 12px; font-size: 0.92rem; }
.page-header .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.project-header-meta { font-size: 0.92rem; color: var(--muted); }

.search-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  max-width: 500px;
}

/* forms */
.form { display: flex; flex-direction: column; gap: 20px; }
.form.narrow { max-width: 560px; }
.form-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
.form-section h2 { margin: 0 0 14px; font-size: 1.05rem; }
.form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.88rem;
  color: var(--text);
  margin-bottom: 14px;
}
.form label:last-child { margin-bottom: 0; }
.form .grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 640px) {
  .form .grid-2 { grid-template-columns: 1fr; }
}
.form label small { font-weight: 400; color: var(--muted); }
.form-actions {
  display: flex;
  gap: 8px;
  padding-top: 4px;
}
.form .inline-check {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.form .inline-check input { width: auto; }
.readonly-field {
  padding: 8px 0;
  font-size: 0.9rem;
}

/* project detail */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}
@media (max-width: 820px) {
  .detail-grid { grid-template-columns: 1fr; }
}
.detail-grid > .panel { margin-bottom: 0; }
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 32px;
  box-shadow: var(--shadow);
  margin-bottom: 24px;
}
.panel h2 { margin: 0 0 18px; font-size: 1.05rem; font-weight: 500; }
.panel dl {
  margin: 0;
  display: grid;
  grid-template-columns: 140px 1fr;
  row-gap: 14px;
  column-gap: 24px;
  font-size: 0.92rem;
}
.panel dt { color: var(--muted); font-weight: 350; }
.panel dd { margin: 0; word-break: break-word; }
.pre-inline {
  font-family: inherit;
  margin: 0;
  white-space: pre-wrap;
}
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

/* unit pricing row forms */
.row-form { display: contents; }
.row-actions { display: flex; gap: 4px; white-space: nowrap; }
.range { display: flex; gap: 4px; }
.range input { width: 50%; }
.add-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.8fr 0.8fr 0.7fr 1.2fr auto;
  gap: 8px;
  margin-top: 12px;
}
.add-row-3 {
  grid-template-columns: 1fr 1.5fr 1fr auto;
}
@media (max-width: 900px) {
  .add-row, .add-row-3 { grid-template-columns: 1fr 1fr; }
}
.btn.small { padding: 4px 10px; font-size: 0.85rem; }
.btn.danger { color: var(--error-fg); }
.btn.danger:hover { background: var(--error-bg); }

/* status pills — lightweight: subtle tinted bg + colored text, no heavy borders */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 400;
  background: rgba(127, 127, 127, 0.10);
  border: 1px solid transparent;
  color: var(--muted);
  letter-spacing: 0.005em;
}
.pill-selling, .pill-leasing { background: var(--good-fade); color: var(--good); }
.pill-leased { background: var(--good-fade); color: var(--good); }
.pill-pre-launch { background: var(--primary-fade); color: var(--primary); }
.pill-sold-out, .pill-leased-up, .pill-completed {
  background: rgba(127, 127, 127, 0.08);
  color: var(--muted);
}
.pill-paused { background: var(--warn-fade); color: var(--warn); }

/* Rent-roll status pills — heuristic colour-coding since AiGent's
   status_name is free-form per project (no enum). Picked to read at a
   glance when scanning a long unit list. */
.pill-status-avail { background: var(--good-fade); color: var(--good); }
.pill-status-leased { background: var(--primary-fade); color: var(--primary); }
.pill-status-notice { background: var(--warn-fade); color: var(--warn); }
.pill-status-other { background: rgba(127, 127, 127, 0.10); color: var(--muted); }
.pill-fail { background: var(--bad-fade, rgba(220, 38, 38, 0.12)); color: var(--bad, #dc2626); }

/* Rent-roll panel layout */
.rentroll-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 8px 0 14px;
}
.rentroll-counts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rentroll-sync { display: flex; align-items: center; gap: 10px; }
.rentroll-error-banner {
  background: var(--bad-fade, rgba(220, 38, 38, 0.06));
  border: 1px solid rgba(220, 38, 38, 0.18);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.88rem;
  margin-bottom: 12px;
}
.rentroll-slow-movers {
  background: var(--warn-fade);
  border-left: 3px solid var(--warn);
  padding: 8px 12px;
  border-radius: 0 6px 6px 0;
  margin: 12px 0;
  font-size: 0.92rem;
}
/* Compact-table tweak so the rent-roll fits more rows in the viewport */
.table.compact th, .table.compact td { padding: 6px 10px; font-size: 0.88rem; }
/* Ended pill — neutral charcoal, signals archived state without alarm. */
.pill-ended {
  background: rgba(0, 0, 0, 0.18);
  color: var(--text);
  font-weight: 500;
  vertical-align: middle;
  margin-left: 10px;
  font-size: 0.75rem;
}
.ended-banner {
  background: rgba(0, 0, 0, 0.06);
  border-left: 3px solid var(--text);
}
/* Dim ended rows in the projects list to push them to the back of the
   visual hierarchy — they're history, not active work. */
tr.row-ended { opacity: 0.55; }
tr.row-ended:hover { opacity: 0.85; }

/* Archive toggle bar above the projects table. */
.archive-toggle {
  margin: 10px 0 14px;
  padding: 8px 12px;
  background: rgba(127, 127, 127, 0.06);
  border-radius: 6px;
  font-size: 0.88rem;
  color: var(--muted);
}
.archive-toggle a {
  margin-left: 8px;
  font-weight: 500;
}

/* On-hold pill + project-name colour — amber so the team notices the
   pause state at a glance instead of needing to read the small text. */
.pill-on-hold {
  background: var(--warn-fade);
  color: var(--warn);
  font-weight: 600;
  vertical-align: middle;
  margin-left: 10px;
  font-size: 0.75rem;
}
.project-name-on-hold { color: var(--warn); }
/* On-hold banner under the header — amber treatment too so it stands
   out as a status alert without being alarming. */
.on-hold-banner {
  background: var(--warn-fade);
  border-left: 3px solid var(--warn);
  padding: 12px 16px;
  border-radius: 0 6px 6px 0;
  margin: 0 0 14px;
  font-size: 0.92rem;
}

/* Inline toggle: an On hold button that expands to a small reason
   form when clicked (uses native <details> so no JS). */
.inline-toggle { display: inline-block; }
.inline-toggle > summary { list-style: none; cursor: pointer; }
.inline-toggle > summary::-webkit-details-marker { display: none; }
.on-hold-form {
  position: absolute;
  display: flex;
  gap: 8px;
  margin-top: 6px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  z-index: 50;
}
.on-hold-form input[type="text"] {
  width: 280px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.88rem;
}

/* Reports & Insights divider — sits above the live-data / leasing
   sections grouping them visually as one cluster on the project page. */
.reports-divider {
  margin: 32px 0 14px;
  padding: 14px 0 0;
  border-top: 1px solid var(--border-strong);
}
.reports-divider h2 {
  margin: 0 0 4px;
}
.reports-divider p {
  margin: 0;
}

/* PageSpeed Insights panel — score cards with traffic-light colour by
   Google's standard bucketing (90+ good, 50-89 needs work, <50 poor). */
.pagespeed-runner {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  margin: 14px 0;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.pagespeed-runner label { display: flex; flex-direction: column; gap: 4px; }
.pagespeed-runner select {
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.9rem;
}
.pagespeed-runner button[disabled] {
  opacity: 0.7;
  cursor: progress;
}

.pagespeed-results {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}
.pagespeed-url-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
}
.pagespeed-url-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  word-break: break-all;
}
.pagespeed-strategy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.pagespeed-strategy { min-width: 0; }
.pagespeed-strategy-label {
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pagespeed-scores {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.pagespeed-score {
  text-align: center;
  padding: 8px 4px;
  border-radius: 6px;
  border: 1px solid var(--border);
}
.pagespeed-score-num {
  font-size: 1.4rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.pagespeed-score-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-top: 4px;
}
.pagespeed-score-good { background: var(--good-fade); }
.pagespeed-score-good .pagespeed-score-num { color: var(--good); }
.pagespeed-score-ok { background: var(--warn-fade); }
.pagespeed-score-ok .pagespeed-score-num { color: var(--warn); }
.pagespeed-score-bad { background: var(--bad-fade, rgba(220, 38, 38, 0.12)); }
.pagespeed-score-bad .pagespeed-score-num { color: var(--bad, #dc2626); }
.pagespeed-score-none .pagespeed-score-num { color: var(--muted); }

.pagespeed-vitals {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* Delta indicator under each score tile when there's a previous run */
.pagespeed-score-delta {
  font-size: 0.66rem;
  font-weight: 600;
  margin-top: 2px;
  letter-spacing: 0.02em;
}
.pagespeed-score-delta.delta-up { color: var(--good); }
.pagespeed-score-delta.delta-down { color: var(--bad, #dc2626); }

/* Sparkline — small inline SVG of perf score over last 90 days */
.pagespeed-sparkline-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.78rem;
}
.pagespeed-sparkline {
  flex: 1 1 0;
  height: 24px;
  min-width: 80px;
  max-width: 180px;
  color: var(--primary);
}

/* History table — collapsed list of past runs */
.pagespeed-history {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.pagespeed-history table { margin-top: 8px; }
.pagespeed-error {
  padding: 8px 10px;
  background: var(--bad-fade, rgba(220, 38, 38, 0.06));
  border: 1px solid rgba(220, 38, 38, 0.18);
  border-radius: 4px;
  font-size: 0.88rem;
}
.pagespeed-opportunities { margin-top: 10px; }
.pagespeed-opportunities ul { margin: 8px 0 0; padding-left: 20px; }
.pagespeed-opportunities li { margin: 4px 0; font-size: 0.88rem; }
.pagespeed-opportunities li .pill { margin-left: 6px; font-size: 0.7rem; }

/* Reports & Insights top nav — horizontal strip above the sidebar/main
   split. Quick-jump pills for the live-data sections so they're a single
   click away rather than a sidebar scroll. */
.reports-top-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 10px 14px;
  margin: 0 0 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.reports-top-nav-label {
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 600;
  margin-right: 4px;
}
.reports-top-nav a {
  font-size: 0.88rem;
  color: var(--text);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 5px;
  transition: background 0.15s, color 0.15s;
}
.reports-top-nav a:hover {
  background: var(--row-hover);
  color: var(--primary);
}

/* Expand all / Collapse all bar — floats above all project sections
   and toggles every <details class="collapsible"> in one click. */
.collapse-all-bar {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-bottom: 14px;
}

/* Edit-pencil icon button placed inside a <summary> alongside the
   section title — needs to sit at the trailing edge and not flex-wrap. */
.icon-btn-summary {
  margin-left: auto;
  font-size: 0.95rem;
  text-decoration: none;
  opacity: 0.65;
}
.icon-btn-summary:hover { opacity: 1; }

/* AiGent promotions sub-panel — sits inside Marketing Guardrails below
   the team-edited dl. Visually distinct so it's clear AiGent is the
   external reference, not a team-editable field.
   Now a <details class="collapsible"> (default-collapsed) so it doesn't
   dominate Marketing Guardrails by default. */
.aigent-promos {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.aigent-promos-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}
.aigent-promos-header h3 { margin: 0; }
.aigent-promos-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.aigent-drift-banner {
  background: var(--warn-fade);
  border-left: 3px solid var(--warn);
  padding: 10px 14px;
  border-radius: 0 6px 6px 0;
  margin: 10px 0 14px;
  font-size: 0.92rem;
}
.aigent-promo-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.aigent-promo {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 14px;
}
.aigent-promo-name {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.aigent-promo-desc { margin-top: 4px; font-size: 0.92rem; }
.aigent-promo-meta { margin-top: 4px; }
.aigent-expired-toggle { margin-top: 12px; }
.aigent-expired .aigent-promo { opacity: 0.7; }

/* Leasing performance panel — funnel widget + side-by-side cards.
   Funnel uses big-number stages with arrow connectors and the
   stage-to-stage rate sitting on the arrow itself. */
.leasing-perf-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 8px 0 18px;
}
.funnel-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 16px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 8px 0;
}
.funnel-stage { text-align: center; }
.funnel-count {
  font-size: 1.6rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.funnel-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-top: 4px;
}
.funnel-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--muted);
  font-size: 1.1rem;
}
.funnel-rate {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.leasing-perf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.leasing-perf-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  /* Prevent inner tables from forcing the card to overflow its grid cell */
  min-width: 0;
  overflow: hidden;
}
/* Tighter section headings inside the cards so long uppercase labels
   like TOURS BY BUDGET BRACKET don't bump the card edge. */
.leasing-perf-card .subsection-h {
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}
/* Compact table inside the card — tighter padding so 5-col tables fit
   without horizontal overflow on typical card widths. */
.leasing-perf-card .table.compact th,
.leasing-perf-card .table.compact td {
  padding: 5px 8px;
  font-size: 0.86rem;
}
.kv-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 14px;
  margin: 8px 0 0;
}
.kv-grid dt { color: var(--muted); font-size: 0.88rem; }
.kv-grid dd { margin: 0; }

/* Appointment-depth outcome row */
.appointment-outcomes { margin-top: 16px; }
.outcome-counts { display: flex; gap: 8px; flex-wrap: wrap; }

/* Asking-price comparison: small section at the top of Unit Pricing.
   Tinted background so it reads as an "intel callout", not just another
   table row. */
.pricing-comparison {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px 14px;
  margin-bottom: 18px;
}
.pricing-comparison-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
}
.pricing-comparison-header .subsection-h {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pricing-comparison .table.compact { margin: 0; }

/* Drift severity colours — tuned for pop without alarm-fatigue.
   pill-drift-up (consumer-facing risk) is the strongest, red.
   pill-drift-down (campaign leaving conversion) is amber.
   pill-drift-active (header total) reuses the up colour so the count
   reads as urgent at a glance. */
.pill-drift-up,
.pill-drift-active {
  background: var(--bad-fade, rgba(220, 38, 38, 0.14));
  color: var(--bad, #dc2626);
  font-weight: 600;
}
.pill-drift-down {
  background: var(--warn-fade);
  color: var(--warn);
  font-weight: 600;
}

/* Row-level accents on drifted rows. box-shadow on <tr> is unreliable
   across browsers — apply the left-border to the first <td> instead so
   it actually renders. Background tint on <tr> works fine. */
.pricing-comparison-table tr.pricing-row-drift-up {
  background: rgba(220, 38, 38, 0.05);
}
.pricing-comparison-table tr.pricing-row-drift-up td:first-child {
  border-left: 3px solid var(--bad, #dc2626);
  padding-left: 7px;
}
.pricing-comparison-table tr.pricing-row-drift-down {
  background: var(--warn-fade);
}
.pricing-comparison-table tr.pricing-row-drift-down td:first-child {
  border-left: 3px solid var(--warn);
  padding-left: 7px;
}
.pricing-comparison-table tr.pricing-row-snoozed { opacity: 0.7; }

/* Rent-roll table wrapper — only show a scrollbar at <900px viewports.
   At desktop widths the 100% table fits and we don't want a phantom
   horizontal scrollbar from sub-pixel overflow. */
.rentroll-table-wrap { overflow-x: visible; }
@media (max-width: 900px) {
  .rentroll-table-wrap { overflow-x: auto; }
}

/* home cards */
.card.link { text-decoration: none; color: inherit; display: block; }
.card.link:hover { border-color: var(--primary); }
.badge-live { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.badge-admin { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }

.empty {
  text-align: center;
  padding: 60px 20px;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

/* ad review report — verdict + severity pills using soft tints */
.pill-verdict-pass { background: var(--good-fade); color: var(--good); }
.pill-verdict-pass_with_warnings { background: var(--warn-fade); color: var(--warn); }
.pill-verdict-fail { background: var(--danger-fade); color: var(--danger); }
.pill-verdict- { background: rgba(127, 127, 127, 0.10); color: var(--muted); }

.pill-sev-critical { background: var(--danger-fade); color: var(--danger); }
.pill-sev-warning { background: var(--warn-fade); color: var(--warn); }
.pill-sev-info { background: rgba(94, 144, 255, 0.12); color: var(--info); }

.findings { margin: 0; padding-left: 20px; }
.finding {
  padding: 12px 14px;
  margin: 12px 0;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
}
.finding-critical { border-left: 4px solid #dc2626; }
.finding-warning { border-left: 4px solid #f59e0b; }
.finding-info { border-left: 4px solid #2563eb; }
.finding p { margin: 6px 0; font-size: 0.93rem; }
.finding-head { display: flex; gap: 10px; align-items: center; margin-bottom: 4px; }
.finding-category { font-size: 0.82rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }

.claims { margin: 0; padding-left: 20px; }
.claims li { margin-bottom: 4px; font-size: 0.93rem; }
ul.plain { margin: 0; padding-left: 18px; }
ul.plain li { margin-bottom: 2px; }

input[type="file"] {
  padding: 6px 0;
  border: none;
  background: transparent;
}

/* usage dashboard */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
}
/* When the stat-grid sits INSIDE a panel (Live Performance card), drop the
   inner card chrome and use hairline column dividers instead — keeps the
   panel reading as one unit, not nested cards. */
.panel .stat-grid {
  gap: 0;
  margin-bottom: 0;
}
.panel .stat {
  background: transparent;
  border: none;
  border-right: 1px solid var(--border);
  border-radius: 0;
  padding: 14px 24px;
  box-shadow: none;
}
.panel .stat:last-child { border-right: none; }
.panel .stat:first-child { padding-left: 0; }
.stat-label {
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
  font-weight: 500;
}
.stat-value {
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.stat-sub {
  font-size: 0.78rem;
  margin-top: 4px;
  color: var(--muted-2);
}

/* Trend arrows on stat tiles (period-over-period delta on Live Performance card) */
.metric-trend {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  vertical-align: middle;
}
.metric-trend-up {
  color: #1f9d55;
  background: rgba(31, 157, 85, 0.12);
}
.metric-trend-down {
  color: #d54f4f;
  background: rgba(213, 79, 79, 0.14);
}
.metric-trend-flat {
  color: var(--muted);
  background: rgba(127, 127, 127, 0.10);
}

/* Health colors for bounce-rate-style metrics */
.health-good { color: #1f9d55; }
.health-warn { color: #d6a416; }
.health-bad  { color: #d54f4f; }

/* Channel breakdown — horizontal stacked bar + legend */
.channel-breakdown {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.channel-breakdown-label {
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.channel-breakdown-bar {
  display: flex;
  width: 100%;
  height: 14px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--border);
}
.channel-segment {
  height: 100%;
  transition: opacity 0.15s ease;
}
.channel-segment:hover {
  opacity: 0.75;
}
.channel-breakdown-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 10px;
  font-size: 0.82rem;
}
.channel-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
}
.channel-legend-item strong {
  color: var(--text);
}
.channel-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

/* Help & onboarding pages */
.help-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 800px) {
  .help-shell { grid-template-columns: 1fr; }
}
.help-nav {
  position: sticky;
  top: 80px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
}
.help-nav h2 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 10px;
}
.help-nav ul { list-style: none; padding: 0; margin: 0; }
.help-nav li { margin: 0; }
.help-nav-spacer { height: 12px; border-top: 1px dashed var(--border); margin-top: 12px; padding-top: 12px; }
.help-nav a {
  display: block;
  padding: 6px 8px;
  border-radius: 6px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.92rem;
}
.help-nav a:hover { background: var(--bg); }
.help-nav a.active { background: var(--primary); color: white; }
.help-nav a.active .muted { color: rgba(255, 255, 255, 0.75); }

.help-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.help-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s;
}
.help-card:hover { border-color: var(--primary); }
.help-card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.help-card p { margin: 0; }

/* Help doc body — content rendered from Markdown */
.help-doc { max-width: 720px; line-height: 1.6; }
.help-doc h1 { margin-top: 0; font-size: 1.7rem; }
.help-doc h2 { margin-top: 32px; font-size: 1.25rem; }
.help-doc h3 { margin-top: 22px; font-size: 1.05rem; }
.help-doc p { margin: 12px 0; }
.help-doc ul, .help-doc ol { margin: 12px 0; padding-left: 24px; }
.help-doc li { margin: 4px 0; }
.help-doc code {
  font-size: 0.88em;
  background: var(--bg);
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid var(--border);
}
.help-doc strong { color: var(--text); }
.help-doc-footer {
  margin-top: 36px;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
}

.help-suggestion-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}
.help-suggestion-list li { margin: 0; }

/* Onboarding hero — the "New hire? Start here" treatment on /help */
.onboarding-hero {
  position: relative;
  background:
    radial-gradient(circle at 0% 0%, rgba(79, 140, 255, 0.18), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(213, 79, 166, 0.12), transparent 55%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 36px 36px 28px;
  margin-bottom: 32px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.onboarding-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg, #4f8cff 0%, #d54fa6 50%, #f59e0b 100%);
}
.onboarding-hero-header { max-width: 640px; margin-bottom: 28px; }
.onboarding-hero-eyebrow {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
  background: rgba(79, 140, 255, 0.12);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.onboarding-hero-header h1 {
  font-size: 2rem;
  line-height: 1.2;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.onboarding-hero-header h1 strong {
  background: linear-gradient(90deg, #4f8cff, #d54fa6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
}
.onboarding-hero-sub {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 600px) {
  .onboarding-hero { padding: 24px 20px 20px; }
  .onboarding-hero-header h1 { font-size: 1.5rem; }
}

.onboarding-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 760px) {
  .onboarding-steps { grid-template-columns: 1fr; }
}
.onboarding-step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: start;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 16px 16px 14px;
  transition: border-color 0.15s, transform 0.15s;
}
.onboarding-step:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}
.onboarding-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f8cff, #d54fa6);
  color: white;
  font-size: 1rem;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(79, 140, 255, 0.35);
}
.onboarding-step-body h3 {
  margin: 0 0 6px;
  font-size: 1rem;
  line-height: 1.3;
}
.onboarding-step-body h3 em {
  font-style: italic;
  color: var(--muted);
  font-weight: 500;
}
.onboarding-step-body p {
  margin: 0 0 12px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--muted);
}
.onboarding-step-body .btn { font-size: 0.82rem; }

.help-topics-section { margin-top: 36px; }
.help-topics-section > h2 {
  margin-bottom: 4px;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.help-topics-section > p { margin-top: 0; margin-bottom: 16px; }

/* Leasing reports — project page panel + detail view */
.leasing-latest-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.leasing-latest-header h3 { margin: 0; font-size: 1.05rem; }
.leasing-latest > p { margin: 8px 0; }
.leasing-themes {
  margin: 8px 0 12px;
  padding-left: 22px;
  line-height: 1.55;
}
.leasing-themes li { margin: 4px 0; }
.leasing-history { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.leasing-history > summary { cursor: pointer; color: var(--muted); font-size: 0.88rem; }
.leasing-history ul { list-style: none; padding: 0; margin: 8px 0 0; }
.leasing-history li { padding: 4px 0; }

.leasing-prospect-list { list-style: none; padding: 0; margin: 0; }
.leasing-prospect {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 10px 0;
}
.leasing-prospect-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.leasing-prospect-name { font-size: 1rem; }
.leasing-prospect-layouts { margin: 4px 0 8px; }
.leasing-prospect-layouts code {
  background: var(--surface);
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid var(--border);
  font-size: 0.82rem;
}
.leasing-prospect-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}
.leasing-tag {
  display: inline-block;
  font-size: 0.78rem;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  line-height: 1.5;
}
.leasing-tag-like {
  color: #1f9d55;
  background: rgba(31, 157, 85, 0.10);
  border-color: rgba(31, 157, 85, 0.25);
}
.leasing-tag-objection {
  color: #d54f4f;
  background: rgba(213, 79, 79, 0.10);
  border-color: rgba(213, 79, 79, 0.25);
}
.leasing-prospect-narrative {
  margin-top: 8px;
  border-top: 1px dashed var(--border);
  padding-top: 8px;
}
.leasing-prospect-narrative > summary { cursor: pointer; }
.leasing-prospect-narrative p {
  margin: 6px 0 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
}

/* Compact open-findings alert bar (top of project detail page) */
.alert-bar {
  background: linear-gradient(180deg, rgba(213, 79, 79, 0.05), transparent);
  border: 1px solid rgba(213, 79, 79, 0.25);
  border-left: 4px solid #d54f4f;
  border-radius: 10px;
  padding: 10px 16px;
  margin-bottom: 18px;
}
.alert-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 0;
}
.alert-row + .alert-row { border-top: 1px dashed var(--border); }
/* display:flex on <details> breaks native show/hide — keep <details> as block */
details.alert-row { display: block; }
.alert-row-collapsible > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 0;
}
.alert-row-collapsible > summary::-webkit-details-marker { display: none; }
.alert-icon { font-size: 1.1rem; }
.alert-text { flex: 1; min-width: 200px; }
.alert-text strong { color: var(--text); }
.alert-toggle { margin-left: auto; }
.alert-row-collapsible[open] .alert-toggle::after { content: " (hide)"; }
.alert-row-collapsible:not([open]) .alert-toggle::after { content: ""; }
.alert-sev {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
  margin-left: 6px;
}
.alert-sev-critical { color: #d54f4f; background: rgba(213, 79, 79, 0.12); }
.alert-sev-warning { color: #d6a416; background: rgba(214, 164, 22, 0.14); }
.alert-sev-info { color: var(--muted); background: rgba(127, 127, 127, 0.10); }
.alert-details { padding: 14px 0 4px; }
.alert-section-h {
  font-size: 0.92rem;
  margin: 14px 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.alert-section-h:first-child { margin-top: 0; }

/* Sales & Leasing — contact strip header */
.contact-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px 18px;
  align-items: start;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.contact-strip-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.92rem;
}
.contact-strip-item strong { color: var(--text); }

/* ============================================================================
   PENDING REVIEW (audit log)
   The orange-warn family is reused — same visual language as the "alerts"
   panel for findings, so reviewers recognise the affordance immediately.
   ============================================================================ */
.panel-pending-review {
  border-left: 3px solid var(--warn-border);
  background: var(--warn-bg);
}
.panel-pending-review .panel-header h2 { color: var(--warn-fg); }

.pending-change-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pending-change-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  background: var(--surface);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.pending-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.pending-where {
  font-size: 0.88rem;
  color: var(--text);
}
.pending-diff {
  font-size: 0.85rem;
  color: var(--muted);
  word-break: break-word;
}
.pending-was {
  background: var(--danger-fade);
  color: var(--danger);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: 'Geist Mono', monospace;
  font-size: 0.8rem;
}
.pending-now {
  background: var(--good-fade);
  color: var(--good);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: 'Geist Mono', monospace;
  font-size: 0.8rem;
}
.pending-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 500;
}
.pending-tag-add { background: var(--good-fade); color: var(--good); }
.pending-tag-del { background: var(--danger-fade); color: var(--danger); }
.pending-when { white-space: nowrap; }

/* Show-full disclosure for long-text diffs (target_audience, ad copy, etc.).
   Uses native <details> so it works without JS and remains keyboard-accessible.
   The summary keeps the truncated inline diff visible so the panel stays
   scannable; expanding shows full Before / After blocks below. */
.pending-diff-expand {
  display: inline;
}
.pending-diff-expand > summary {
  list-style: none;
  cursor: pointer;
  display: inline;
}
.pending-diff-expand > summary::-webkit-details-marker { display: none; }
.pending-show-full {
  margin-left: 6px;
  font-size: 0.78rem;
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.pending-diff-expand[open] > summary > .pending-show-full {
  /* Replace "show full" with "hide" when expanded. */
  font-size: 0;
}
.pending-diff-expand[open] > summary > .pending-show-full::after {
  content: 'hide';
  font-size: 0.78rem;
}
.pending-diff-full {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--bg);
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 0.85rem;
}
.pending-block {
  display: inline-block;
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 100%;
  font-family: 'Geist Mono', monospace;
  font-size: 0.82rem;
  padding: 4px 6px;
  margin-top: 2px;
}

/* The dual-purpose ! chip — flag + confirm. Same chip used in
   the Pending review sub-panel and inline in row-actions cells. */
.pending-confirm,
.row-pending-chip {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--warn-fg);
  color: white;
  border: none;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: opacity 0.15s, transform 0.15s;
  font-family: inherit;
}
.pending-confirm:hover,
.row-pending-chip:hover {
  opacity: 0.85;
  transform: scale(1.08);
}
.pending-confirm:active,
.row-pending-chip:active {
  transform: scale(0.96);
}
.row-pending-chip {
  width: 22px;
  height: 22px;
  font-size: 0.78rem;
  margin-right: 4px;
}

/* Pending pill (used in /review-queue table) */
.pill-pending {
  background: var(--warn-bg);
  color: var(--warn-fg);
  border: 1px solid var(--warn-border);
}
tr.row-has-pending td:first-child { font-weight: 500; }

/* Bulk-save bar — appears at the bottom of Unit pricing / External listings
   so the team can edit many rows then save in a single submit. The flex
   keeps the button + helper text on one line on desktop and stacks on
   mobile. */
.bulk-save-bar {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Sidebar group divider — stronger hairline above + subtle tinted band
   behind the group label so each cluster reads as a distinct "section header"
   without crossing into a loud / heavy treatment.
   The rgba(127,127,127,...) tint works in both light and dark themes since
   it's evenly weighted gray. */
.sb-group {
  margin: 26px 0 8px;
  padding: 10px 14px 8px;
  border-top: 1px solid var(--border-strong);
  background: rgba(127, 127, 127, 0.06);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 600;
  pointer-events: none;
}
/* First group has no rule above it (nothing to separate from) */
.sb-group:first-of-type {
  margin-top: 14px;
  border-top: none;
}

/* "Not set" / missing-import indicator */
.missing-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: rgba(127, 127, 127, 0.12);
  border: 1px dashed var(--border);
  border-radius: 4px;
  padding: 2px 8px;
  margin-right: 6px;
}

/* Subsection heading inside a panel */
.subsection-h {
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0 0 8px;
}

/* Compact table variant for small lookup lists like Media Management */
.table.table-compact th, .table.table-compact td {
  padding: 6px 10px;
  font-size: 0.92rem;
}

/* Media management edit form rows */
.media-mgmt-row { margin-bottom: 8px; }

/* Cross-project leasing trends page */
.trends-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.trends-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}
.trends-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.trends-list li:last-child { border-bottom: none; }
.trends-text { flex: 1; }
.trends-count {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.82rem;
  font-weight: 600;
  min-width: 28px;
  text-align: center;
}
.trends-list-objection .trends-count { color: #d54f4f; border-color: rgba(213, 79, 79, 0.3); }
.trends-list-like .trends-count { color: #1f9d55; border-color: rgba(31, 157, 85, 0.3); }
.trends-outcome-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.trends-outcome-list li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
table.table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Per-channel colors. The Jinja replace() chain in the template normalizes
   GA4 channel names (which can contain spaces and slashes) into class-safe
   slugs. Anything we don't have a color for falls through to the gray default. */
.channel-paid-search,    .channel-segment.channel-paid-search    { background: #4f8cff; }
.channel-organic-search, .channel-segment.channel-organic-search { background: #1f9d55; }
.channel-paid-social,    .channel-segment.channel-paid-social    { background: #d54fa6; }
.channel-organic-social, .channel-segment.channel-organic-social { background: #f178c8; }
.channel-display,        .channel-segment.channel-display        { background: #d6a416; }
.channel-direct,         .channel-segment.channel-direct         { background: #6e6e6e; }
.channel-referral,       .channel-segment.channel-referral       { background: #8b5cf6; }
.channel-email,          .channel-segment.channel-email          { background: #2dd4bf; }
.channel-video,          .channel-segment.channel-video          { background: #fb7185; }
.channel-affiliates,     .channel-segment.channel-affiliates     { background: #f59e0b; }
.channel-unassigned,     .channel-segment.channel-unassigned     { background: #4b5563; }

.trend {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  align-items: end;
  padding: 10px 0 0;
}
.trend-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.trend-bar-wrap {
  width: 100%;
  height: 140px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.trend-bar {
  width: 70%;
  background: color-mix(in srgb, var(--primary) 40%, transparent);
  border-radius: 4px 4px 0 0;
  min-height: 2px;
  transition: height 0.2s ease;
}
.trend-bar-current { background: var(--primary); }
.trend-amount { font-size: 0.78rem; font-weight: 600; }
.trend-label { font-size: 0.75rem; }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 820px) {
  .two-col { grid-template-columns: 1fr; }
}

code.small { font-size: 0.78rem; }

/* finding workflow */
.finding.status-fixed, .finding.status-ignored {
  opacity: 0.65;
}
.finding.status-fixed { border-left-color: #10b981; }
.finding.status-ignored { border-left-color: #6b7280; }

.pill-status-fixed { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.pill-status-ignored { background: #f3f4f6; color: #374151; border-color: #d1d5db; }

.finding-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.edit-finding {
  margin-top: 10px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.edit-finding label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; margin-bottom: 8px; }

.panel-alert {
  border-left: 4px solid var(--warn-border);
  background: var(--warn-bg);
}

.finding-group { margin-bottom: 24px; }
.finding-group-url {
  font-size: 0.95rem;
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  word-break: break-all;
}
.finding-group-url a { color: var(--primary); text-decoration: none; }
.finding-group-url a:hover { text-decoration: underline; }

/* Closure checklist row states. N/A rows fade out so the eye lands on
   actionable rows first; done rows get a subtle left accent for at-a-glance
   progress sense without coloring the whole row. */
.closure-row-na td { opacity: 0.45; }
.closure-row-na input[type="text"] { background: transparent; }
.closure-row-done td:first-child { box-shadow: inset 3px 0 0 var(--ok, #5fa872); }
.closure-row-done td strong { color: var(--muted); }
.closure-group h3.subsection-h .muted { font-weight: 400; }