/* ─── Tabular numerics (Phase 27.6-01 POL-03) ─── */
/* Numbers inside data tables and KPI values align across rows regardless of
   digit width. Per-class font-variant-numeric declarations remain where they
   set non-default features (e.g. slashed-zero); this cascade ensures new
   data-display surfaces inherit tabular-nums without per-class scatter. */
.data-table td,
.kpi-value, .kpi-change,
.stat-value, .hero-value, .hero-kpi-value,
.metric-value, .metric-delta,
td.number, td[data-numeric] {
  font-variant-numeric: tabular-nums;
}

/* ─── Skip Link (Accessibility) ─── */

.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 10000;
  padding: 8px 16px;
  background: var(--tc-primary);
  color: var(--text-inverse);
  border-radius: var(--border-radius-xs);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 8px;
}

/* ─── Focus States (Accessibility) ─── */

.nav-item:focus-visible {
  outline: 2px solid var(--tc-primary);
  outline-offset: -2px;
  background: rgba(255, 255, 255, 0.04);
}

.btn:focus-visible {
  outline: 2px solid var(--tc-primary);
  outline-offset: 2px;
}

.filter-btn:focus-visible {
  outline: 2px solid var(--tc-primary);
  outline-offset: 2px;
}

.hamburger:focus-visible {
  outline: 2px solid var(--tc-primary);
  outline-offset: 2px;
}

.client-selector:focus-visible {
  outline: 2px solid var(--tc-primary);
  outline-offset: 2px;
}

.data-table tbody tr:focus-visible {
  outline: 2px solid var(--tc-primary);
  outline-offset: -2px;
}

a:focus-visible {
  outline: 2px solid var(--tc-primary);
  outline-offset: 2px;
}

.search-input:focus-visible {
  outline: none;
  border-color: var(--tc-primary);
  box-shadow: 0 0 0 3px rgba(106, 171, 181, 0.2);
}

.kanban-card:focus-visible,
.work-card:focus-visible {
  outline: 2px solid var(--tc-primary);
  outline-offset: 2px;
}

.insights-autocomplete-tag:focus-visible {
  outline: 2px solid var(--tc-primary);
  outline-offset: 2px;
}

/* ─── Cards ─── */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 24px;
  box-shadow: var(--shadow-card);
  /* Phase 27.6-03: enforce viewport respect on every card. Prevents intrinsic
     content (long URLs, wide tables) from forcing .card to exceed viewport
     on narrow mobile widths. Wide content should horizontal-scroll *inside*
     the card via .table-scroll, not push the card wider. */
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.card:hover {
  border-color: var(--border-color-hover);
  box-shadow: var(--shadow-card-hover);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ─── KPI Cards ─── */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.kpi-card:hover {
  border-color: var(--border-color-hover);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}

.kpi-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.kpi-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.kpi-change {
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}

.kpi-change.up { color: var(--change-up); }
.kpi-change.down { color: var(--change-down); }
.kpi-change.stable { color: var(--change-stable); }

/* ─── Score Gauge (SVG) ─── */

.gauge-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
}

.gauge-svg {
  width: 200px;
  height: 140px; /* Plan 27.4-05 (UAT-002): was 120; matches expanded viewBox */
}

.gauge-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 14;
  stroke-linecap: round;
}

.gauge-fill {
  fill: none;
  stroke-width: 14;
  stroke-linecap: round;
  transition: stroke-dasharray 1.5s ease;
}

.gauge-score {
  font-size: 42px;
  font-weight: 800;
  fill: var(--text-primary);
  text-anchor: middle;
  dominant-baseline: middle;
  font-family: var(--font-body);
}

.gauge-label {
  font-size: 14px;
  font-weight: 600;
  fill: var(--text-muted);
  text-anchor: middle;
  font-family: var(--font-body);
}

.gauge-grade {
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  margin-top: 8px;
  padding: 3px 12px;
  border-radius: 20px;
  display: inline-block;
}

/* ─── Tables ─── */

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.data-table thead th {
  padding: 12px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.data-table thead th:hover {
  color: var(--text-secondary);
}

.data-table tbody tr {
  border-bottom: 1px solid var(--border-color);
  transition: background var(--transition-fast);
}

.data-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

.data-table tbody tr.selected {
  background: var(--tc-primary-glow);
}

.data-table tbody td {
  padding: 12px 16px;
  color: var(--text-secondary);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

.data-table .keyword-cell {
  color: var(--text-primary);
  font-weight: 500;
  cursor: pointer;
}

.data-table .keyword-cell:hover {
  color: var(--tc-primary);
}

/* ─── Position Badge ─── */

.position-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.position-badge.top3 { background: rgba(34, 197, 94, 0.15); color: var(--pos-top3); }
.position-badge.top10 { background: rgba(106, 171, 181, 0.15); color: var(--pos-top10); }
.position-badge.top20 { background: rgba(245, 158, 11, 0.15); color: var(--pos-top20); }
.position-badge.below20 { background: rgba(239, 68, 68, 0.15); color: var(--pos-below20); }
.position-badge.unranked { background: rgba(128, 139, 148, 0.15); color: var(--pos-unranked); }

/* ─── Change Arrow ─── */

.change-indicator {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.change-indicator.up { color: var(--change-up); }
.change-indicator.down { color: var(--change-down); }
.change-indicator.stable { color: var(--change-stable); }

/* ─── Badges ─── */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.badge-critical { background: var(--severity-critical-bg); color: var(--severity-critical); }
.badge-warning { background: var(--severity-warning-bg); color: var(--severity-warning); }
.badge-notice { background: var(--severity-notice-bg); color: var(--severity-notice); }
.badge-pass { background: var(--severity-pass-bg); color: var(--severity-pass); }

.badge-high { background: rgba(239, 68, 68, 0.12); color: var(--priority-high); }
.badge-medium { background: rgba(245, 158, 11, 0.12); color: var(--priority-medium); }
.badge-low { background: rgba(34, 197, 94, 0.12); color: var(--priority-low); }

.badge-theme {
  background: rgba(106, 171, 181, 0.12);
  color: var(--tc-primary);
}

/* ─── Difficulty Badge ─── */

.difficulty {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
}

.difficulty-bar {
  width: 40px;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

.difficulty-fill {
  height: 100%;
  border-radius: 2px;
  transition: width var(--transition-normal);
}

/* ─── Filter Tabs ─── */

.filter-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-body);
  /* Phase 27.6-01 DBT-01: explicit properties (was transition:all) */
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.filter-btn:hover {
  border-color: var(--border-color-hover);
  background: rgba(255, 255, 255, 0.04);
}

.filter-btn.active {
  background: var(--tc-primary-glow);
  border-color: var(--tc-primary);
  color: var(--tc-primary);
}

.filter-btn .count {
  margin-left: 4px;
  font-size: 11px;
  opacity: 0.7;
}

/* ─── Finding Cards ─── */

.finding-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 16px 16px 16px 20px;
  margin-bottom: 12px;
  border-left: 3px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.finding-card:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-1px);
}

.finding-card.critical { border-left-color: var(--severity-critical); }
.finding-card.warning { border-left-color: var(--severity-warning); }
.finding-card.notice { border-left-color: var(--severity-notice); }

.finding-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Phase 40.5-03: title text takes the available space so the capture
   button is pushed to the right edge. Keeps badge + status badges inline. */
.finding-title-text {
  flex: 1 1 auto;
  min-width: 0;
}
.finding-capture-slot {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .finding-capture-slot {
    margin-left: 4px;
  }
}

.finding-description {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 10px;
  line-height: 1.6;
}

.finding-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.finding-fix {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 13px;
  color: var(--tc-primary);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
}

.finding-fix svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* ─── Lighthouse Mini Gauges ─── */

.lighthouse-gauge-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.lighthouse-gauge-item {
  text-align: center;
}

.lighthouse-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ─── Core Web Vitals ─── */

.cwv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.cwv-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  border-left: 4px solid;
}

.cwv-good { border-left-color: var(--success); }
.cwv-needs-improvement { border-left-color: var(--warning, #f59e0b); }
.cwv-poor { border-left-color: var(--severity-critical); }

.cwv-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.cwv-label {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}

.cwv-status {
  font-size: 12px;
  font-weight: 600;
  margin-top: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cwv-good .cwv-status { color: var(--success); }
.cwv-needs-improvement .cwv-status { color: var(--warning, #f59e0b); }
.cwv-poor .cwv-status { color: var(--severity-critical); }

/* ─── Category Breakdown ─── */

.category-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.category-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.category-name {
  width: 160px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.category-bar-track {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  overflow: hidden;
}

.category-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 1s ease;
  width: 0;
}

.category-score {
  width: 40px;
  text-align: right;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ─── Kanban ─── */

.kanban-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  min-height: 400px;
}

.kanban-column {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 16px;
  min-height: 300px;
}

.kanban-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.kanban-column-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.kanban-column-count {
  font-size: 12px;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 8px;
  border-radius: 10px;
}

.kanban-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 100px;
}

.kanban-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 14px;
  box-shadow: var(--shadow-sm);
  cursor: grab;
  /* Phase 27.6-01 DBT-01: explicit properties (was transition:all) */
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
}

.kanban-card:active {
  cursor: grabbing;
  box-shadow: var(--shadow-lg);
  transform: rotate(1deg);
}

.kanban-card:hover {
  border-color: var(--border-color-hover);
  box-shadow: var(--shadow-card);
  transform: translateY(-1px);
}

.kanban-card.sortable-ghost {
  opacity: 0.3;
}

.kanban-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.kanban-card-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ─── Progress Bar ─── */

.progress-container {
  margin-bottom: 24px;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.progress-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.progress-value {
  font-size: 14px;
  color: var(--tc-primary);
  font-weight: 600;
}

.progress-track {
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--tc-primary);
  border-radius: 4px;
  transition: width 1s ease;
}

/* ─── Buttons ─── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: var(--border-radius-xs);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  /* Phase 27.6-01 DBT-01: explicit properties (was transition:all) */
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
  border: 1px solid transparent;
}

.btn-primary {
  background: var(--tc-primary);
  color: var(--text-inverse);
  border-color: var(--tc-primary);
}

.btn-primary:hover {
  background: var(--tc-primary-dark);
  border-color: var(--tc-primary-dark);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border-color);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-color-hover);
  color: var(--text-primary);
}

.btn-sm {
  padding: 5px 12px;
  font-size: 12px;
}

/* ─── Grid Layouts ─── */

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* ─── Section Spacing ─── */

.section {
  margin-bottom: var(--section-gap);
}

.section-container {
  margin-bottom: var(--section-gap);
}

.section-bordered {
  border-top: 1px solid var(--border-color);
  padding-top: 20px;
}

.section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ─── Empty State ─── */

.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
}

.empty-state svg {
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  opacity: 0.3;
}

.empty-state-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

/* Plan 27.1-02: explainer empty-state shared across Keyword Rankings chart/table
   and Keyword Gap Analysis. Dashed border + muted copy so it reads as a
   placeholder, not as a rendered row or chart. */
.empty-state.empty-state-explainer {
  border: 1px dashed var(--border-color, rgba(0, 0, 0, 0.12));
  border-radius: 8px;
  padding: 28px 24px;
  background: var(--surface-muted, rgba(0, 0, 0, 0.015));
  max-width: 720px;
  margin: 12px auto;
}

.empty-state.empty-state-explainer .empty-state-title {
  margin-bottom: 8px;
}

.empty-state.empty-state-explainer .empty-state-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}

.empty-state.empty-state-explainer .empty-state-body + .empty-state-body {
  margin-top: 8px;
}

.empty-state.empty-state-explainer details {
  margin-top: 14px;
  text-align: left;
  font-size: 12.5px;
}

.empty-state.empty-state-explainer details summary {
  cursor: pointer;
  color: var(--tc-primary, #6AABB5);
  font-weight: 500;
  padding: 4px 0;
}

.empty-state.empty-state-explainer details ul {
  margin: 8px 0 0 0;
  padding-left: 18px;
  color: var(--text-muted);
  columns: 2;
  column-gap: 24px;
}

.empty-state.empty-state-explainer details ul li {
  break-inside: avoid;
  padding: 2px 0;
}

.empty-state.empty-state-explainer .empty-state-action {
  margin-top: 14px;
}

.empty-state.empty-state-explainer .empty-state-action button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ─── Search Input ─── */

.search-input {
  width: 100%;
  max-width: 320px;
  padding: 8px 14px 8px 36px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-xs);
  color: var(--text-primary);
  font-size: 14px;
  font-family: var(--font-body);
  transition: border-color var(--transition-fast);
}

.search-input::placeholder {
  color: var(--text-muted);
}

/* Plan 27.4-05 (DESIGN-AUDIT SRS-01): switched :focus -> :focus-visible and
   added a 3px ring so keyboard users get a visible focus cue. Matches
   .login-field input focus style at line ~2392. */
.search-wrapper {
  position: relative;
  margin-bottom: 16px;
}

/* ─── Work Tab — Timeline ─── */

.work-timeline {
  margin-bottom: 32px;
}

.work-week {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 4px;
  padding: 16px;
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--border-color);
  background: transparent;
  position: relative;
  margin-left: 20px;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

/* Timeline vertical line */
.work-timeline > .section-title ~ .work-week::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 0;
  bottom: -4px;
  width: 2px;
  background: var(--border-color);
}

.work-timeline > .section-title ~ .work-week:last-child::before {
  bottom: 50%;
}

/* Timeline dot */
.work-week::after {
  content: '';
  position: absolute;
  left: -16px;
  top: 22px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-muted);
  border: 2px solid var(--bg-body);
  z-index: 1;
}

/* Current week */
.work-week.work-week-active {
  border-color: var(--tc-primary);
  background: rgba(106, 171, 181, 0.05);
}

.work-week.work-week-active::after {
  background: var(--tc-primary);
  box-shadow: 0 0 8px rgba(106, 171, 181, 0.4);
}

/* Past weeks */
.work-week.work-week-past::after {
  background: var(--text-muted);
}

/* Future weeks */
.work-week:not(.work-week-active):not(.work-week-past)::after {
  background: transparent;
  border-color: var(--text-muted);
}

/* Week label */
.work-week-label {
  min-width: 120px;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Task cards in timeline row */
.work-week-tasks {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ─── Work Tab — This Week Hero ─── */

.work-current-week {
  margin-bottom: 20px;
}

.work-hero-card {
  background: var(--bg-card);
  border: 1px solid var(--tc-primary);
  border-left: 4px solid var(--tc-primary);
  border-radius: var(--border-radius);
  padding: 24px;
  box-shadow: var(--shadow-card);
  position: relative;
  background-image: linear-gradient(
    180deg,
    rgba(106, 171, 181, 0.05) 0%,
    transparent 100%
  );
}

.work-hero-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--tc-primary);
  margin-bottom: 8px;
}

.work-hero-header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.work-hero-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
}

.work-hero-dates {
  font-size: 13px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.work-hero-progress {
  font-size: 12px;
  color: var(--severity-pass);
  font-weight: 600;
  margin-left: auto;
  padding: 4px 10px;
  background: rgba(34, 197, 94, 0.1);
  border-radius: 999px;
}

.work-current-week-tasks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.work-current-week-tasks .work-card {
  max-width: none;
  min-width: 0;
}

.work-current-week-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  border: 1px dashed var(--border-color);
  border-radius: var(--border-radius-sm);
}

/* ─── Work Tab — Next Week Preview ─── */

.work-next-week {
  margin-bottom: 32px;
}

.work-next-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--border-color-hover);
  border-radius: var(--border-radius-sm);
  padding: 18px 20px;
  opacity: 0.85;
  transition: opacity var(--transition-fast);
}

.work-next-card:hover {
  opacity: 1;
}

.work-next-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.work-next-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.work-next-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0;
}

.work-next-dates {
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.work-next-tasks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.work-next-tasks .work-card {
  max-width: none;
  min-width: 0;
  background: transparent;
  box-shadow: none;
  border: 1px solid var(--border-color);
  cursor: default;
}

.work-next-tasks .work-card:hover {
  transform: none;
  border-color: var(--border-color-hover);
}

.work-next-week-empty {
  padding: 14px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
}

.work-next-week-more {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--tc-primary);
  text-decoration: none;
}

.work-next-week-more:hover {
  text-decoration: underline;
}

/* ─── Work Tab — Recently Shipped ─── */

.work-recently-shipped {
  margin-bottom: 32px;
}

.work-recently-shipped:empty {
  display: none;
}

.work-shipped-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.work-shipped-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.work-shipped-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.work-shipped-card:hover {
  border-color: var(--border-color-hover);
  transform: translateY(-1px);
}

.work-shipped-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.work-shipped-phase-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--tc-primary);
  background: rgba(106, 171, 181, 0.15);
  border: 1px solid rgba(106, 171, 181, 0.3);
  border-radius: 999px;
}

.work-shipped-date {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.work-shipped-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 2px 0 0 0;
  line-height: 1.3;
}

.work-shipped-summary {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.work-shipped-report-btn {
  align-self: flex-start;
  margin-top: 4px;
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--tc-primary);
  cursor: pointer;
  font-family: inherit;
}

.work-shipped-report-btn:hover {
  text-decoration: underline;
}

.work-shipped-report-btn:focus-visible {
  outline: 2px solid var(--tc-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ─── Work Tab — Task Cards ─── */

.work-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 12px;
  border-left: 3px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  /* Phase 27.6-01 DBT-01: explicit properties (was transition:all) */
  transition: border-color var(--transition-fast), border-left-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
  cursor: grab;
  flex: 1 1 200px;
  min-width: 180px;
  max-width: 340px;
}

.work-card:active {
  cursor: grabbing;
  box-shadow: var(--shadow-lg);
  transform: rotate(1deg);
}

.work-card:hover {
  border-color: var(--border-color-hover);
  box-shadow: var(--shadow-card);
  transform: translateY(-1px);
}

.work-card.sortable-ghost {
  opacity: 0.3;
}

.work-card.sortable-drag {
  opacity: 0.9;
  box-shadow: var(--shadow-lg);
}

/* Status colors */
.work-card.completed {
  border-left-color: var(--severity-pass);
}

.work-card.completed .work-card-title {
  color: var(--text-muted);
}

.work-card.in-progress {
  border-left-color: #f59e0b;
}

.work-card.planned {
  border-left-color: var(--border-color);
}

.work-card-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 6px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.work-card-title svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.work-card-date {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
  margin-left: 20px;
}

.work-card-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: 20px;
}

/* ─── Work Tab — In Progress Section ─── */

.work-in-progress {
  margin-bottom: 32px;
}

.work-in-progress .section-title .badge {
  background: #f59e0b;
  color: #000;
}

.work-in-progress-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.work-in-progress-grid .work-card {
  max-width: none;
  padding: 14px;
}

/* ─── Work Tab — Completed Section ─── */

.work-completed {
  margin-bottom: 32px;
}

.work-completed .section-title .badge {
  background: var(--severity-pass);
  color: #fff;
}

/* Completed cards use same grid as in-progress but with muted opacity */
#work-completed-cards .work-card {
  opacity: 0.8;
}

#work-completed-cards .work-card:hover {
  opacity: 1;
}

/* Empty drop zone placeholder */
.work-drop-zone {
  min-height: 60px;
}

.work-drop-placeholder {
  grid-column: 1 / -1;
  text-align: center;
  padding: 16px;
  color: var(--text-muted);
  font-size: 13px;
  border: 2px dashed var(--border-color);
  border-radius: var(--border-radius-sm);
}

/* ─── Work Tab — Next Month Preview ─── */

.work-next-month {
  margin-bottom: 32px;
}

.work-next-month-list {
  background: var(--bg-card);
  border: 1px dashed var(--border-color-hover);
  border-radius: var(--border-radius-sm);
  opacity: 0.75;
}

.work-next-month-list:hover {
  opacity: 0.9;
}

.work-next-month-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  min-height: 44px;
  border-bottom: 1px solid var(--border-color);
  flex-wrap: wrap;
}

.work-next-month-row:last-child {
  border-bottom: none;
}

.work-next-month-row .work-next-month-title {
  flex: 1 1 150px;
  font-size: 13px;
  color: var(--text-secondary);
  min-width: 0;
}

/* ─── Work Tab — Section Headers ─── */

.work-section-header {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

/* ─── Tooltip ─── */

.tooltip {
  position: relative;
}

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-tooltip);
  color: var(--text-primary);
  padding: 6px 12px;
  border-radius: var(--border-radius-xs);
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
  margin-bottom: 6px;
  box-shadow: var(--shadow-md);
}

.tooltip:hover::after {
  opacity: 1;
}

/* ─── Column header info tooltip (wraps, keyboard-accessible) ─── */

.col-header-info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

.info-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-elevated, #1b2a3c);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  font-style: italic;
  font-family: Georgia, serif;
  line-height: 1;
  cursor: help;
  padding: 0;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.info-icon-btn:hover,
.info-icon-btn:focus-visible {
  color: var(--text-primary);
  border-color: var(--text-primary);
  outline: none;
}

.col-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: var(--z-tooltip, 500);
  width: 260px;
  padding: 10px 12px;
  background: var(--bg-tooltip);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-xs);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
  box-shadow: var(--shadow-md);
}

.col-header-info:hover .col-tooltip,
.col-header-info:focus-within .col-tooltip {
  opacity: 1;
  visibility: visible;
}

/* ─── Chart Container ─── */

.chart-container {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.chart-container:hover {
  border-color: var(--border-color-hover);
  box-shadow: var(--shadow-card-hover);
}

.chart-wrapper {
  position: relative;
  height: 300px;
}

/* ─── Modal ─── */

.modal-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: var(--z-modal);
  align-items: center;
  justify-content: center;
}

.modal-backdrop.visible {
  display: flex;
}

.modal {
  background: var(--bg-modal);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 28px;
  width: 90%;
  max-width: 480px;
  box-shadow: var(--shadow-lg);
}

.modal-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--text-primary);
}

.modal-field {
  margin-bottom: 16px;
}

.modal-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.modal-field input,
.modal-field select {
  width: 100%;
  padding: 8px 14px;
  background: var(--bg-body);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-xs);
  color: var(--text-primary);
  font-size: 14px;
  font-family: var(--font-body);
}

/* Plan 27.4-05 (DESIGN-AUDIT SRS-02): switched :focus -> :focus-visible and
   added a 3px ring matching other form-control focus states. Prevents
   keyboard users from losing their place inside the Add Task / Report modals. */
.modal-field input:focus-visible,
.modal-field select:focus-visible {
  outline: none;
  border-color: var(--tc-primary);
  box-shadow: 0 0 0 3px rgba(106, 171, 181, 0.2);
}

.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 24px;
}

/* ─── Report modal (client-report markdown viewer) ─── */

.report-modal-backdrop {
  z-index: var(--z-modal);
}

.report-modal {
  max-width: 800px;
  width: 92%;
  padding: 0;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.report-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 28px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.report-modal-header .modal-title {
  margin-bottom: 0;
  font-size: 16px;
}

.report-modal-close {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  width: 32px;
  height: 32px;
  border-radius: var(--border-radius-xs);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Phase 27.6-01 DBT-01: explicit properties (was transition:all) */
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  flex-shrink: 0;
}

.report-modal-close:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
  border-color: var(--border-color-hover);
}

.report-modal-body {
  padding: 20px 28px 28px;
  overflow-y: auto;
  flex: 1 1 auto;
}

.report-modal-loading,
.report-modal-error {
  color: var(--text-muted);
  font-size: 14px;
  padding: 24px 0;
  text-align: center;
}

.report-modal-error {
  color: var(--severity-warning);
}

/* Rendered markdown styles — scope all under .report-markdown */
.report-markdown {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.65;
}

.report-markdown h1 {
  color: var(--text-primary);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 16px;
  line-height: 1.3;
}

.report-markdown h2 {
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 600;
  margin: 28px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-color);
}

.report-markdown h3 {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 600;
  margin: 22px 0 8px;
}

.report-markdown h4 {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  margin: 16px 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.report-markdown p {
  margin: 0 0 12px;
}

.report-markdown ul,
.report-markdown ol {
  margin: 0 0 12px;
  padding-left: 22px;
}

.report-markdown li {
  margin-bottom: 4px;
}

.report-markdown strong {
  color: var(--text-primary);
  font-weight: 600;
}

.report-markdown a {
  color: var(--tc-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.report-markdown a:hover {
  color: var(--tc-primary-light);
}

.report-markdown code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: var(--bg-body);
  padding: 1px 6px;
  border-radius: var(--border-radius-xs);
  color: var(--tc-accent);
}

.report-markdown pre {
  background: var(--bg-body);
  border: 1px solid var(--border-color);
  padding: 12px 14px;
  border-radius: var(--border-radius-sm);
  overflow-x: auto;
  margin: 0 0 14px;
}

.report-markdown pre code {
  background: transparent;
  padding: 0;
  color: var(--text-secondary);
}

.report-markdown blockquote {
  border-left: 3px solid var(--tc-primary);
  padding: 4px 0 4px 14px;
  margin: 0 0 12px;
  color: var(--text-muted);
  font-style: italic;
}

.report-markdown hr {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 24px 0;
}

.report-markdown table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 14px;
  font-size: 13px;
}

.report-markdown th,
.report-markdown td {
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  text-align: left;
}

.report-markdown th {
  background: var(--bg-body);
  color: var(--text-primary);
  font-weight: 600;
}

/* ─── Work-card optional fields (description + report-link chip) ─── */

.work-card-description {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 2px 0 8px 20px;
}

.work-card-report-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 10px 0 0 20px;
  padding: 4px 10px;
  background: var(--tc-primary-glow);
  border: 1px solid rgba(106, 171, 181, 0.35);
  border-radius: var(--border-radius-xs);
  color: var(--tc-primary);
  font-size: 11.5px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  /* Phase 27.6-01 DBT-01: explicit properties (was transition:all) */
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.work-card-report-btn:hover {
  background: rgba(106, 171, 181, 0.22);
  border-color: var(--tc-primary);
  color: var(--tc-primary-light);
}

.work-card-report-btn:focus-visible {
  outline: 2px solid var(--tc-primary);
  outline-offset: 2px;
}

/* ─── Quick Wins ─── */

.quick-win-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid var(--border-color);
}

.quick-win-item:last-child {
  border-bottom: none;
}

.quick-win-number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--tc-primary-glow);
  color: var(--tc-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.quick-win-text {
  flex: 1;
}

.quick-win-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.quick-win-desc {
  font-size: 13px;
  color: var(--text-muted);
}

/* ─── AI Readiness Category Card ─── */

.ai-category-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 20px;
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.ai-category-card:hover {
  border-color: var(--border-color-hover);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}

.ai-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.ai-category-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.ai-category-score {
  font-size: 20px;
  font-weight: 700;
}

.ai-category-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 12px;
}

.ai-category-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 1s ease;
}

.ai-findings-list {
  list-style: none;
  padding: 0;
}

.ai-finding {
  font-size: 13px;
  color: var(--text-secondary);
  padding: 4px 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.ai-finding-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

/* ─── AI Visibility Tab ─── */

.ai-vis-empty-state {
  padding: 32px 20px;
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
}

.ai-vis-empty-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  color: var(--text-muted);
  opacity: 0.5;
}

.ai-vis-empty-icon svg {
  width: 100%;
  height: 100%;
}

.ai-vis-empty-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.ai-vis-empty-text {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 0;
}

.ai-vis-empty-checklist {
  margin-top: 20px;
  text-align: left;
  border-left: 3px solid var(--tc-primary);
  padding-left: 16px;
}

.ai-vis-empty-checklist-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.ai-vis-empty-checklist ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ai-vis-empty-checklist li {
  font-size: 13px;
  color: var(--text-muted);
  padding: 3px 0;
  position: relative;
  padding-left: 16px;
}

.ai-vis-empty-checklist li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--tc-primary);
}

.ai-vis-competitor-you {
  background: rgba(106, 171, 181, 0.08);
}

.ai-vis-competitor-you td {
  color: #fff;
}

.ai-vis-status-badge {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.ai-vis-status-badge.active {
  background: var(--severity-pass-bg);
  color: var(--severity-pass);
}

.ai-vis-status-badge.not-yet {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}

.ai-vis-table-summary {
  font-size: 13px;
  color: var(--text-muted);
  padding: 12px 16px;
  text-align: center;
  border-top: 1px solid var(--border-color);
}

.ai-vis-overview-summary {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
}

.ai-vis-aio-badge {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(6, 182, 212, 0.12);
  color: #06B6D4;
}

/* Plan 27.4-07 Task 5 (UAT-038): brand-classification badge on AIO cited rows.
   "Your brand" = cyan (matches --tc-primary). "Adjacent brand" = amber (still
   a positive signal — you ARE cited — just explains why a competitor-brand
   keyword shows up in the citation list). */
.adjacent-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: help;
}
.adjacent-badge-own {
  background: rgba(6, 182, 212, 0.18);
  color: #06B6D4;
  border: 1px solid rgba(6, 182, 212, 0.35);
}
.adjacent-badge-adjacent {
  background: rgba(245, 158, 11, 0.15);
  color: #F59E0B;
  border: 1px solid rgba(245, 158, 11, 0.35);
}
.aio-badge-stack {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.adjacent-brand-caption {
  color: #F59E0B;
  font-weight: 600;
}

.ai-vis-rec-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 16px 20px;
  margin-bottom: 12px;
  border-left: 4px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.ai-vis-rec-card:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-1px);
}

.ai-vis-rec-card.ai-vis-rec-high {
  border-left-color: var(--severity-critical);
}

.ai-vis-rec-card.ai-vis-rec-medium {
  border-left-color: var(--severity-warning);
}

.ai-vis-rec-card.ai-vis-rec-low {
  border-left-color: var(--tc-primary);
}

.ai-vis-rec-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.ai-vis-priority-badge {
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.ai-vis-priority-badge.high {
  background: var(--severity-critical-bg);
  color: var(--severity-critical);
}

.ai-vis-priority-badge.medium {
  background: var(--severity-warning-bg);
  color: var(--severity-warning);
}

.ai-vis-priority-badge.low {
  background: var(--severity-notice-bg);
  color: var(--tc-primary);
}

.ai-vis-rec-category {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

/* Phase 40.5-04: capture button hugs the right edge of the rec header. */
.ai-vis-rec-capture-slot {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.ai-vis-rec-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.ai-vis-rec-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ─── Local Tab ─── */

.local-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.impression-bar-track {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
}

.impression-bar {
  height: 100%;
  background: var(--tc-primary);
  border-radius: 3px;
  transition: width 0.6s ease;
}

.local-review-score {
  font-size: 48px;
  font-weight: 700;
  color: #D4A853;
  line-height: 1;
  margin-bottom: 12px;
}

.local-stars {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 8px;
}

.local-review-count {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
}

.local-pack-summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}

.local-pack-number {
  font-size: 36px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.local-pack-text {
  font-size: 15px;
  color: var(--text-muted);
  font-weight: 500;
}

.local-change {
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}

.local-change.up { color: var(--change-up); }
.local-change.down { color: var(--change-down); }

/* ─── Skeleton Loader ─── */

.skeleton {
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-hover) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--border-radius-sm);
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── Competitor Comparison ─── */

#tab-competitors .data-table th,
#tab-competitors .data-table td {
  white-space: nowrap;
  padding: 10px 12px;
}

.threat-badge {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.threat-badge.high { background: rgba(239, 68, 68, 0.12); color: var(--severity-critical); }
.threat-badge.medium { background: rgba(245, 158, 11, 0.12); color: var(--severity-warning); }
.threat-badge.low { background: rgba(34, 197, 94, 0.12); color: var(--severity-pass); }

/* ─── Login Gate ─── */

.login-gate {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-body);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.login-container {
  text-align: center;
  max-width: 400px;
  width: 90%;
  padding: 40px;
}

.login-logo {
  width: 180px;
  height: auto;
  margin-bottom: 32px;
}

.login-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.login-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 36px;
}

.login-form {
  text-align: left;
}

.login-field {
  margin-bottom: 20px;
}

.login-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.login-field input,
.login-field textarea {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  color: var(--text-primary);
  font-size: 15px;
  font-family: var(--font-body);
  transition: border-color var(--transition-fast);
}

/* Force a light control surface so the textarea never inherits the browser's
   dark-mode default (was rendering as an unreadable black box on /demo). */
.login-field textarea {
  color-scheme: light;
}

.login-field input:focus,
.login-field textarea:focus {
  outline: none;
  border-color: var(--tc-primary);
  box-shadow: 0 0 0 3px rgba(106, 171, 181, 0.15);
}

.login-field input::placeholder,
.login-field textarea::placeholder {
  color: var(--text-muted);
}

.login-btn {
  width: 100%;
  padding: 12px;
  font-size: 15px;
  justify-content: center;
}

.login-error {
  display: none;
  color: var(--severity-critical);
  font-size: 13px;
  margin-bottom: 16px;
  padding: 8px 12px;
  background: var(--severity-critical-bg);
  border-radius: var(--border-radius-xs);
}

/* Self-serve gate: "Sign in with Google" slot (front-door.js initLoginGis).
   Ships [hidden] in markup; class-level rules only so [hidden] always wins. */
.login-google { margin-top: 22px; }
.login-google-or {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}
.login-google-or::before,
.login-google-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-color);
}
.login-google-btn {
  display: flex;
  justify-content: center;
  min-height: 44px;
}
/* Same color-scheme-mismatch guard as the panel button: without it the GIS
   iframe gets an opaque white canvas whenever the embedding page declares
   color-scheme:dark (invisible on this white card today, but the guard keeps
   the two GIS hosts identical). */
.login-google-btn iframe { color-scheme: light; }

.login-footer {
  margin-top: 28px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

/* Password field + show/hide toggle */
.login-input-wrap {
  position: relative;
}

.login-input-wrap input {
  padding-right: 68px; /* room for the Show/Hide toggle */
}

.login-pw-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  min-height: 32px;
  min-width: 52px;
  padding: 6px 10px;
  background: transparent;
  border: 0;
  color: var(--tc-primary);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  border-radius: var(--border-radius-xs);
}

.login-pw-toggle:hover { color: var(--text-primary); }

.login-pw-toggle:focus-visible {
  outline: 2px solid var(--tc-primary);
  outline-offset: 2px;
}

/* Remember-me checkbox — a real 44px-tall wrapping label */
.login-remember {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 4px 0 2px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
}

.login-remember input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--tc-primary);
  cursor: pointer;
}

.login-remember input:focus-visible {
  outline: 2px solid var(--tc-primary);
  outline-offset: 2px;
}

.login-remember-hint {
  margin: 0 0 16px;
  font-size: 11px;
  color: var(--text-muted);
}

.login-footer a { color: var(--tc-primary); }

/* ─── Front-door WS-4: two-panel welcome shell + logged-out audit tool ───
   Left = sign-in (unchanged WS-1 form). Right = the invitation panel. On
   phones the panels stack with SIGN-IN FIRST (returning clients are the daily
   visitors). Brand colors ride the per-instance --brand-accent/--brand-primary
   tokens substituted into index.html; verdict colors below are FIXED literals
   (red #D93025 / amber #F29900 / green #1E8E3E) — a verdict must stay a
   verdict on every instance. */
.login-split {
  display: grid;
  grid-template-columns: minmax(340px, 440px) minmax(320px, 400px);
  gap: 24px;
  align-items: stretch;
  justify-content: center;
  width: min(960px, 94%);
}

.login-invite {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 36px;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  background:
    radial-gradient(420px 260px at 85% -10%, color-mix(in srgb, var(--brand-accent, #EA7942) 14%, transparent), transparent 70%),
    var(--bg-card);
}

.login-invite-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-primary);
  margin: 0 0 14px;
}

.login-invite-points {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}

.login-invite-points li {
  position: relative;
  padding: 5px 0 5px 26px;
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.login-invite-points li::before {
  content: "✓";
  position: absolute;
  left: 2px;
  top: 5px;
  font-weight: 800;
  color: var(--brand-accent, #EA7942);
}

.login-invite-cta,
.login-invite-book {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 12px 16px;
  border-radius: var(--border-radius-sm);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.login-invite-cta {
  border: 0;
  background: var(--brand-accent, #EA7942);
  color: #fff;
  margin-bottom: 10px;
}

.login-invite-cta:hover { filter: brightness(0.92); }

.login-invite-book {
  background: transparent;
  border: 1.5px solid var(--border-color);
  color: var(--text-primary);
}

.login-invite-book:hover { border-color: var(--brand-accent, #EA7942); color: var(--brand-accent, #EA7942); }

.login-invite-cta:focus-visible,
.login-invite-book:focus-visible {
  outline: 2px solid var(--brand-accent, #EA7942);
  outline-offset: 2px;
}

.login-invite-links {
  margin: 16px 0 0;
  font-size: 12px;
  text-align: center;
  color: var(--text-muted);
}

.login-invite-links a { color: var(--tc-primary); }

@media (max-width: 860px) {
  .login-split { grid-template-columns: 1fr; width: min(480px, 94%); }
  .login-invite { padding: 28px 24px; }
}

/* Tool view: wider container so the result card breathes. */
.login-container--tool {
  max-width: 560px;
  text-align: center;
}

.login-container--tool .login-form { max-width: 420px; margin: 0 auto; }

/* Honeypot — visually gone, still in the DOM for bots (ported from get-started). */
.fa-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Scan state (ported from get-started.html Phase 3.1, dashboard vars) ── */
.fa-scan { text-align: center; padding: 8px 4px; }
.fa-scan h3 { font-size: 21px; letter-spacing: -0.01em; color: var(--text-primary); }
.live-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--brand-accent, #EA7942); margin-right: 10px; vertical-align: 2px;
  animation: ld-pulse 1.4s ease-out infinite;
}
@keyframes ld-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-accent, #EA7942) 50%, transparent); }
  70% { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.fa-scan-sub { color: var(--text-secondary); font-size: 14px; margin: 10px auto 18px; max-width: 460px; }
.scan-bar {
  width: min(420px, 100%); height: 5px; border-radius: 999px;
  background: var(--border-color); margin: 0 auto 18px; overflow: hidden;
}
.scan-bar i {
  display: block; height: 100%; width: 6%; border-radius: 999px;
  background: var(--brand-primary, #6AABB5);
  transition: width 0.6s cubic-bezier(0.33, 1, 0.68, 1);
}
.scan-stages { list-style: none; margin: 0 auto; padding: 0; max-width: 420px; text-align: left; }
.scan-stages li {
  display: flex; align-items: center; gap: 11px; padding: 7px 2px;
  font-size: 14px; color: var(--text-muted); transition: color 0.3s;
}
.scan-stages .st-ic {
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border-color);
  display: grid; place-items: center; flex: none;
  font-size: 11px; font-weight: 800; color: #fff;
  transition: background 0.3s, border-color 0.3s;
}
.scan-stages li.is-cur { color: var(--text-primary); font-weight: 600; }
.scan-stages li.is-cur .st-ic {
  border-color: var(--border-color);
  border-top-color: var(--brand-primary, #6AABB5);
  animation: st-spin 0.7s linear infinite;
}
.scan-stages li.is-done { color: var(--text-secondary); }
.scan-stages li.is-done .st-ic { background: var(--brand-accent, #EA7942); border-color: var(--brand-accent, #EA7942); animation: none; }
.scan-stages li.is-done .st-ic::before { content: "✓"; }
@keyframes st-spin { to { transform: rotate(360deg); } }
.scan-live-line { font-size: 12.5px; font-weight: 600; color: var(--text-muted); margin-top: 16px; }
.scan-live-line span { font-variant-numeric: tabular-nums; color: var(--text-secondary); }

/* ── Result state (ported; verdict colors = FIXED literals) ── */
.fa-score { text-align: center; padding: 8px 4px; }
.fa-score h3 { font-size: 21px; letter-spacing: -0.01em; margin-bottom: 18px; color: var(--text-primary); }
.as-ring-wrap { position: relative; width: 132px; height: 132px; margin: 0 auto 4px; }
.as-ring { width: 132px; height: 132px; transform: rotate(-90deg); }
.as-track { fill: none; stroke: var(--border-color); stroke-width: 10; }
.as-bar {
  fill: none; stroke: var(--brand-primary, #6AABB5); stroke-width: 10; stroke-linecap: round;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.22, 0.75, 0.3, 1);
}
.as-mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
#tool-score-num { font-size: 38px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.02em; line-height: 1; }
.as-of { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.as-low .as-bar { stroke: #D93025; }   .as-low #tool-score-num { color: #D93025; }
.as-mid-score .as-bar { stroke: #F29900; }  .as-mid-score #tool-score-num { color: #B06000; }
.as-high .as-bar { stroke: #1E8E3E; }  .as-high #tool-score-num { color: #1E8E3E; }
.as-grade {
  display: inline-flex; align-items: center; gap: 7px; margin: 8px auto 0; padding: 5px 14px;
  border-radius: 999px; background: var(--bg-card); border: 1px solid var(--border-color);
  font-size: 13px; font-weight: 600; color: var(--text-secondary);
}
.as-grade strong { font-weight: 800; color: var(--text-primary); font-size: 14px; }
.as-issues { margin: 22px auto 0; max-width: 480px; text-align: left; display: grid; gap: 10px; }
.as-issue {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
  border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-card);
}
.as-issue .sev {
  flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; margin-top: 1px;
}
.sev-critical { color: #D93025; background: rgba(217, 48, 37, 0.08); }
.sev-warning { color: #B06000; background: rgba(242, 153, 0, 0.13); }
.sev-notice { color: var(--text-muted); background: var(--bg-body); }
.as-issue .t { font-size: 14px; font-weight: 600; color: var(--text-primary); line-height: 1.45; }

/* ── Email-to-unlock card + post-score CTAs ── */
.tool-unlock {
  margin: 24px auto 0; max-width: 480px; text-align: left;
  border: 1px solid var(--border-color); border-radius: 12px;
  padding: 18px 20px; background: var(--bg-card);
}
.tool-unlock h4 { margin: 0 0 4px; font-size: 15px; color: var(--text-primary); }
.tool-unlock p { margin: 0 0 12px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.tool-unlock-form { display: flex; gap: 8px; flex-wrap: wrap; }
.tool-unlock-form input {
  flex: 1 1 200px; min-height: 44px; padding: 10px 14px;
  background: var(--bg-body); border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm); color: var(--text-primary); font-size: 14px;
}
.tool-unlock-form input:focus { outline: none; border-color: var(--tc-primary); box-shadow: 0 0 0 3px rgba(106, 171, 181, 0.15); }
.tool-unlock-form .btn { flex: 0 0 auto; min-height: 44px; }
.tool-unlock--sent { text-align: center; }
.tool-unlock--sent strong { word-break: break-all; }
.tool-next { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 22px auto 0; max-width: 480px; }
.tool-next .btn { flex: 1 1 200px; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .as-bar { transition: none; }
  .scan-bar i { transition: none; }
  .live-dot { animation: none; }
  .scan-stages li.is-cur .st-ic { animation: none; border-color: var(--brand-primary, #6AABB5); }
}

.shake {
  animation: shake 0.4s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  50% { transform: translateX(8px); }
  75% { transform: translateX(-4px); }
}

/* Respect reduced-motion: no error shake for users who opt out */
@media (prefers-reduced-motion: reduce) {
  .shake { animation: none; }
}

.dashboard.hidden {
  display: none !important;
}

/* ─── Demo Badge (GA4 Not Connected) ─── */

.card-badge.demo-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: rgba(245, 158, 11, 0.12);
  color: #F59E0B;
}

/* ─── GA4 Placeholder (Not Connected State) ─── */

.ga4-placeholder {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-muted);
}

.ga4-placeholder p {
  margin: 0;
}

/* ─── Traffic Grid ─── */

.traffic-grid {
  padding: 16px;
}

.traffic-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.traffic-kpis .kpi-card {
  padding: 12px;
  text-align: center;
}

.traffic-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.traffic-chart-half {
  height: 220px;
  position: relative;
}
/* No canvas max-height: it clamped the display box below the wrapper while the
   DPR-scaled backing store was sized for the wrapper, forcing a soft downscale.
   Chart.js (responsive + maintainAspectRatio:false) fills the wrapper cleanly. */

.traffic-pages-list {
  max-height: 200px;
  overflow-y: auto;
}

@media (max-width: 768px) {
  .traffic-kpis { grid-template-columns: repeat(2, 1fr); }
  .traffic-charts { grid-template-columns: 1fr; }
}

/* ─── Results Section Header ─── */

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}

.section-header h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.section-date {
  font-size: 13px;
  color: var(--text-muted);
}

.card-subtitle {
  font-size: 12px;
  color: var(--text-muted);
}

/* ─── Site Preview ─── */

.site-preview-card {
  overflow: hidden;
  padding: 0;
}

.site-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-color);
}

.site-preview-url {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

.site-preview-frame {
  position: relative;
  overflow: hidden;
  height: 160px;
  background: #f5f5f5;
}

.site-preview-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top center;
}

/* ─── SERP Feature Pills & AI Badge ─── */

.serp-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  margin: 1px;
  color: #fff;
  line-height: 1.4;
  white-space: nowrap;
}

.ai-badge {
  display: inline-block;
  background: #06b6d4;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  line-height: 1.4;
}

.site-preview-frame::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(transparent, var(--bg-body));
  pointer-events: none;
}

/* ─── Insights Tab ─── */

/* Trends chart */
#insights-trends-chart {
  position: relative;
  min-height: 300px;
}

/* Content Gaps — difficulty bar + opportunity pills */
.insights-diff-bar-track {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  max-width: 80px;
}

.insights-diff-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.insights-opp-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}

.insights-opp-high {
  background: rgba(34, 197, 94, 0.15);
  color: #22C55E;
}

.insights-opp-medium {
  background: rgba(245, 158, 11, 0.15);
  color: #F59E0B;
}

.insights-opp-low {
  background: rgba(128, 139, 148, 0.15);
  color: #808B94;
}

/* Plan 27.5-03: 8 orphan Insights Brand Sentiment selectors removed (renderer
   + DOM were removed in 27.4-02; CSS persisted because the 27.3-03 comment
   still referenced the palette). Canonical sentiment renderer is
   renderBrandSentiment on AI Visibility (see .brand-sentiment-* rules). */

/* Autocomplete groups */
.insights-autocomplete-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.insights-autocomplete-group {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 16px;
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.insights-autocomplete-group:hover {
  border-color: var(--border-color-hover);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}

.insights-autocomplete-seed {
  font-size: 14px;
  font-weight: 600;
  color: var(--tc-primary);
  margin-bottom: 10px;
}

.insights-autocomplete-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.insights-autocomplete-tag {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--tc-primary);
  border-radius: 20px;
  font-size: 12px;
  color: var(--text-secondary);
  background: transparent;
  /* Phase 27.6-01 DBT-01: explicit properties (was transition:all) */
  transition: background-color var(--transition-fast), color var(--transition-fast);
  cursor: default;
}

.insights-autocomplete-tag:hover {
  background: var(--tc-primary-glow);
  color: var(--tc-primary);
}

/* Content Ideas — card grid */
.insights-ideas-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.insights-idea-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.insights-idea-card:hover {
  border-color: var(--border-color-hover);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}

.insights-idea-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.insights-idea-source {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.insights-source-trend {
  background: rgba(139, 92, 246, 0.15);
  color: #8B5CF6;
}

.insights-source-gap {
  background: rgba(245, 158, 11, 0.15);
  color: #F59E0B;
}

.insights-source-autocomplete {
  background: rgba(106, 171, 181, 0.15);
  color: #6AABB5;
}

.insights-source-combined {
  background: rgba(212, 168, 83, 0.15);
  color: #D4A853;
}

.insights-idea-priority {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.insights-priority-high {
  background: #22C55E;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.4);
}

.insights-priority-medium {
  background: #F59E0B;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.4);
}

.insights-priority-low {
  background: #808B94;
}

.insights-idea-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
  line-height: 1.4;
}

.insights-idea-keyword {
  display: inline-block;
  padding: 2px 8px;
  background: var(--tc-primary-glow);
  color: var(--tc-primary);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 8px;
}

.insights-idea-rationale {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 12px;
}

.insights-idea-meta {
  display: flex;
  gap: 20px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.insights-idea-stat {
  display: flex;
  align-items: center;
  gap: 6px;
}

.insights-idea-stat-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.insights-idea-stat-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

/* Keyword Opportunities — score bar + category pills */
.insights-opp-bar-track {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  max-width: 80px;
}

.insights-opp-bar {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #22C55E, #84CC16);
  transition: width 0.3s ease;
}

.insights-cat-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.insights-cat-quickwin {
  background: rgba(34, 197, 94, 0.15);
  color: #22C55E;
}

.insights-cat-longterm {
  background: rgba(106, 171, 181, 0.15);
  color: #6AABB5;
}

.insights-cat-stretch {
  background: rgba(245, 158, 11, 0.15);
  color: #F59E0B;
}

/* Section containers + subtitles (uses --section-gap from variables) */

.section-container h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.section-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

/* Table scroll wrapper */
.table-scroll {
  overflow-x: auto;
}

/* ─── Local Rank Heatmap ─── */

.section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.section-header-row h3 { margin-bottom: 0; }

.heatmap-select {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  max-width: 280px;
}
.heatmap-select:focus {
  outline: 2px solid var(--tc-primary);
  outline-offset: -1px;
}

/* Keyword bar — sits directly above the map */
.heatmap-kw-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 8px 12px;
  background: var(--bg-hover);
  border-radius: 8px 8px 0 0;
  border: 1px solid var(--border-color);
  border-bottom: none;
}
.heatmap-kw-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.heatmap-data-note {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
  white-space: nowrap;
}

/* Two-panel layout: map + sidebar */
.heatmap-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 16px;
  align-items: start;
}

.heatmap-sidebar {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
  max-height: 500px;
  overflow-y: auto;
}

/* Sidebar: hero stat */
.hm-hero { text-align: center; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border-color); }
.hm-hero-rank { font-size: 36px; font-weight: 800; font-variant-numeric: tabular-nums; }
.hm-hero-label { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.hm-hero-viewing { font-size: 12px; color: var(--accent-teal, #6AABB5); margin-bottom: 4px; }
.hm-hero-back { font-size: 11px; color: var(--text-muted); cursor: pointer; text-decoration: underline; }
.hm-hero-back:hover { color: var(--text-primary); }

/* Sidebar: stats row */
.hm-stats { display: flex; gap: 8px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border-color); }
.hm-stat { flex: 1; text-align: center; }
.hm-stat-val { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hm-stat-lbl { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; }

/* Sidebar: competitor list */
.hm-comp-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 6px; }
.hm-comp-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 6px; cursor: pointer;
  font-size: 13px; transition: background 0.1s;
}
.hm-comp-row:hover { background: rgba(255,255,255,0.05); }
.hm-comp-row.active { background: rgba(106,171,181,0.15); border-left: 3px solid var(--accent-teal, #6AABB5); }
.hm-comp-num { color: var(--text-muted); min-width: 18px; font-size: 12px; }
.hm-comp-name { flex: 1; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-comp-info { color: var(--text-secondary); font-size: 11px; white-space: nowrap; }

/* ─── Leaflet theme overrides ─── */
.leaflet-container { background: #f0f0f0; }
.leaflet-control-attribution { display: none; }
.leaflet-control-zoom a {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
.leaflet-control-zoom a:hover { background: var(--bg-hover) !important; }
.leaflet-popup-content-wrapper {
  background: #1a1d24 !important; color: #e2e8f0 !important;
  border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.6);
  border: 1px solid #2d3748;
}
.leaflet-popup-content { margin: 12px 14px; color: #e2e8f0; }
.leaflet-popup-tip { background: #1a1d24 !important; }
.leaflet-popup-close-button { color: #94a3b8 !important; }
.leaflet-tooltip-dark {
  background: var(--bg-card); color: var(--text-primary);
  border: 1px solid var(--border-color); border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4); font-size: 13px; padding: 8px 12px;
}
.leaflet-tooltip-dark.leaflet-tooltip-top::before { border-top-color: var(--border-color); }

/* ─── Map legend (Leaflet custom control) ─── */
.heatmap-legend-ctrl {
  background: rgba(26,29,36,0.9); padding: 8px 10px; border-radius: 6px;
  font-size: 11px; line-height: 1.6; color: var(--text-secondary);
  border: 1px solid var(--border-color);
}
.heatmap-legend-ctrl span:not(.scope-pill) {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin-right: 4px; vertical-align: middle;
}

/* ─── Three-tier rank dots ─── */
.rank-dot-found {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; color: #fff;
  border: 2px solid rgba(255,255,255,0.5);
  transition: transform 0.15s;
}
.rank-dot-found:hover { transform: scale(1.2); }

.rank-dot-ring {
  width: 22px; height: 22px; border-radius: 50%;
  background: transparent;
  border: 2px solid rgba(107,114,128,0.35);
}

/* Phase 69 Stream 3 upgrade #2 — "not ranked here" is a FILLED marker, not a
   hollow ring, so the geo-grid reads like a real heatmap (grey = invisible at
   this point, colored = you rank). Smaller than ranked dots so wins still pop. */
.rank-dot-out {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 9px; color: #fff;
  background: #80868B; border: 1.5px solid rgba(255,255,255,0.55);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.rank-dot-out:hover { transform: scale(1.15); transition: transform 0.15s; }

/* Compact markers for the side-by-side / baseline-vs-current mini-maps (real CartoDB
   maps, denser than the main heatmap) — UX review 2026-05-22. */
.mini-rank-dot {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 11px; color: #fff;
  border: 2px solid rgba(255,255,255,0.85);
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.mini-rank-out {
  width: 11px; height: 11px; border-radius: 50%;
  background: rgba(128,134,139,0.55);
  border: 1.5px solid rgba(255,255,255,0.8);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.rank-dot-nodata {
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(107,114,128,0.12);
  border: 1px dashed rgba(107,114,128,0.2);
}

.center-pin {
  width: 30px; height: 30px;
  background: var(--accent-teal, #6AABB5); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #fff;
  border: 2px solid #fff; box-shadow: 0 0 12px rgba(106,171,181,0.5);
}

.comp-pin {
  width: 28px; height: 28px;
  background: #ef4444; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: #fff;
  border: 2px solid #fff; box-shadow: 0 0 10px rgba(239,68,68,0.5);
}

/* ─── Rich popup styles ─── */
/* The leaflet popup wrapper forces a dark background (#1a1d24), so popup text must
   be LIGHT — not the theme's var(--text-primary), which is dark in the light theme
   (that mismatch rendered the keyword list dark-on-dark / unreadable). */
.hm-popup { min-width: 240px; max-width: 320px; font-size: 13px; line-height: 1.4; color: #e2e8f0; }
.hm-popup-header { font-weight: 600; margin-bottom: 2px; color: #f1f5f9; }
.hm-popup-kw { font-size: 12px; color: var(--accent-teal, #6AABB5); font-weight: 600; margin-bottom: 2px; }
.hm-popup-dist { font-size: 11px; color: #94a3b8; margin-bottom: 8px; }
.hm-popup-list { max-height: 280px; overflow-y: auto; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 6px; }
.hm-popup-row {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px; font-size: 12px; color: #e2e8f0; border-radius: 4px;
}
.hm-popup-row:hover { background: rgba(255,255,255,0.05); }
.hm-popup-row.hm-popup-you {
  background: rgba(106,171,181,0.15); border-left: 3px solid var(--accent-teal, #6AABB5);
  color: #8fd4dd; font-weight: 700;
}
.hm-popup-row.hm-popup-notranked {
  color: #94a3b8; font-style: italic; border-top: 1px solid rgba(255,255,255,0.12); margin-top: 4px; padding-top: 6px;
}
.hm-popup-pos { min-width: 22px; font-weight: 700; color: #f1f5f9; }
.hm-popup-name { flex: 1; color: #e2e8f0; }
.hm-popup-rating { font-size: 11px; color: #94a3b8; white-space: nowrap; }

/* ─── Heatmap AI Insights ─── */
.hm-insights { display: flex; flex-direction: column; gap: 12px; }
.hm-insight {
  padding: 12px 16px; border-radius: 8px; font-size: 13px; line-height: 1.5;
  border-left: 4px solid var(--border-color);
}
.hm-insight-critical { border-left-color: var(--danger, #ef4444); background: rgba(239, 68, 68, 0.06); }
.hm-insight-warning { border-left-color: #eab308; background: rgba(234, 179, 8, 0.06); }
.hm-insight-info { border-left-color: var(--accent-teal, #6AABB5); background: rgba(106, 171, 181, 0.06); }
.hm-insight-success { border-left-color: var(--success, #22c55e); background: rgba(34, 197, 94, 0.06); }
.hm-insight-title {
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.hm-insight-title-text { flex: 1 1 auto; min-width: 0; }
.hm-insight-capture-slot {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.hm-insight-body { color: var(--text-secondary); }
.hm-insight-action { font-weight: 600; color: var(--text-primary); margin-top: 6px; }

/* ─── Conversions Section ─── */

#results-conversions {
  padding: 16px;
}

.conv-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.conv-summary-total,
.conv-summary-rate {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 16px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 90px;
}

.conv-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(212, 168, 83, 0.08);
  border: 1px solid rgba(212, 168, 83, 0.2);
  border-radius: var(--border-radius-xs);
  padding: 10px 12px;
  font-size: 12px;
  color: var(--tc-accent);
  line-height: 1.5;
  margin-bottom: 16px;
}

.conv-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 10px;
  margin-top: 0;
}

.conv-goal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.conv-goal-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 12px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.conv-goal-card:hover {
  border-color: var(--border-color-hover);
  box-shadow: var(--shadow-card-hover);
}

.conv-goal-icon {
  font-size: 20px;
  line-height: 1;
}

.conv-goal-count {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.conv-goal-label {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.2;
}

.conv-goal-pct {
  font-size: 12px;
  font-weight: 600;
}

.conv-source-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.conv-source-row {
  display: grid;
  grid-template-columns: 110px 1fr 40px;
  align-items: center;
  gap: 10px;
}

.conv-source-name {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conv-source-bar-track {
  height: 8px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
  overflow: hidden;
}

.conv-source-bar-fill {
  height: 100%;
  border-radius: 4px;
  min-width: 4px;
  transition: width 0.6s ease;
}

.conv-source-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.conv-trend-chart {
  height: 200px;
  position: relative;
}
/* max-height removed — see .traffic-chart-half note (soft-downscale clamp). */

@media (max-width: 768px) {
  .conv-summary { grid-template-columns: 1fr; }
  .conv-goal-grid { grid-template-columns: 1fr; }
  .conv-source-row { grid-template-columns: 90px 1fr 36px; }
}

/* ═══════════════ USER BEHAVIOR (Clarity) TAB ═══════════════ */

.behavior-hero {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(99, 102, 241, 0.04) 100%);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: var(--border-radius-sm);
  padding: 32px 36px;
  position: relative;
  overflow: hidden;
}

.behavior-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.behavior-hero-content {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

.behavior-hero-icon {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 16px;
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #60a5fa;
  animation: behavior-pulse 2.5s ease-in-out infinite;
}

.behavior-hero-icon svg {
  width: 36px;
  height: 36px;
}

@keyframes behavior-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.3); }
  50% { box-shadow: 0 0 0 12px rgba(59, 130, 246, 0); }
}

.behavior-hero-text { flex: 1; }

.behavior-hero-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #60a5fa;
  margin-bottom: 8px;
}

.behavior-hero-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 12px;
}

.behavior-hero-subtitle {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 24px;
  max-width: 640px;
}

.behavior-progress { max-width: 480px; }

.behavior-progress-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
}

.behavior-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6 0%, #6366f1 100%);
  border-radius: 4px;
  transition: width 0.8s ease-out;
}

.behavior-progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-secondary);
}

.behavior-progress-label strong {
  color: var(--text-primary);
  font-weight: 700;
}

.behavior-progress-eta {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

/* Preview grid */
.behavior-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.behavior-preview-card {
  padding: 20px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

.behavior-preview-card:hover { opacity: 1; }

.behavior-preview-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(59, 130, 246, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #60a5fa;
  margin-bottom: 12px;
}

.behavior-preview-icon svg { width: 16px; height: 16px; }

.behavior-preview-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.behavior-preview-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}

.behavior-preview-hint {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Why grid */
.behavior-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.behavior-why-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.behavior-why-number {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.behavior-why-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.behavior-why-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.behavior-cta {
  display: flex;
  justify-content: center;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

.behavior-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: var(--border-radius-xs);
  color: #60a5fa;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  /* Phase 27.6-01 DBT-01: explicit properties (was transition:all) */
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.behavior-cta-btn:hover {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.5);
}

@media (max-width: 1024px) {
  .behavior-preview-grid { grid-template-columns: repeat(2, 1fr); }
  .behavior-why-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .behavior-hero-content { flex-direction: column; gap: 20px; }
  .behavior-preview-grid { grid-template-columns: 1fr; }
  .behavior-hero-title { font-size: 22px; }
}

/* ═══════════════ ACTION PLANS TAB ═══════════════ */

/* Toggle buttons */
.ap-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  padding: 4px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-xs);
  max-width: 680px;
}

/* Source badge rendered on Client-tab items to show origin (GBP or Website) */
.ap-client-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 10px;
  background: rgba(124, 58, 237, 0.12);
  color: var(--tc-primary);
  border: 1px solid rgba(124, 58, 237, 0.25);
}
.ap-client-source-badge.is-website {
  background: rgba(59, 130, 246, 0.12);
  color: #60a5fa;
  border-color: rgba(59, 130, 246, 0.25);
}

.ap-toggle-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  /* Phase 27.6-01 DBT-01: explicit properties (was transition:all) */
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.ap-toggle-btn:hover { color: var(--text-primary); }

.ap-toggle-btn.active {
  background: var(--bg-input);
  color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.ap-toggle-progress {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.ap-toggle-btn.active .ap-toggle-progress {
  background: var(--tc-primary);
  color: #fff;
}

/* Panels */
.ap-panel {
  display: none;
}
.ap-panel.active { display: block; }

/* Phase 27.6-02 (UAT-037): Overview sub-tab panels. Mirrors .ap-panel so
   inactive panels stay hydrated in the DOM (display:none), keeping
   .delta-pill-slot[data-metric] queryable by the global applyDeltaPills
   pass. The .ov-toggle + .ov-toggle-btn selectors are aliased in markup
   onto .ap-toggle + .ap-toggle-btn for shape inheritance. */
.ov-panel {
  display: none;
}
.ov-panel.active { display: block; }

/* At narrow viewports the 4-button ov-toggle may need to wrap (vs the
   3-button ap-toggle). Keep buttons on 2 rows of 2 at <= 480px. */
@media (max-width: 480px) {
  .ov-toggle { flex-wrap: wrap; }
  .ov-toggle .ov-toggle-btn { min-width: calc(50% - 4px); }
}

/* Hero block */
.ap-hero {
  padding: 24px 28px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.06) 0%, rgba(59, 130, 246, 0.04) 100%);
  border: 1px solid rgba(124, 58, 237, 0.15);
  border-radius: var(--border-radius-sm);
  margin-bottom: 24px;
}

.ap-hero-main {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(124, 58, 237, 0.15);
}

.ap-hero-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 6px;
}

.ap-hero-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.6;
  max-width: 900px;
}

.ap-hero-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.ap-hero-metric {
  min-width: 0;
}

.ap-hero-metric-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.ap-hero-metric-value {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.ap-hero-metric-value.ap-target {
  color: #86efac;
  font-weight: 500;
}

/* Sections (priority groups) */
.ap-sections {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ap-section {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
}

.ap-section-week { border-left: 3px solid #ef4444; }
.ap-section-month { border-left: 3px solid #f59e0b; }
.ap-section-quarter { border-left: 3px solid #3b82f6; }
.ap-section-ongoing { border-left: 3px solid #10b981; }
.ap-section-avoid { border-left: 3px solid #737373; }

.ap-section-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--border-color);
}

.ap-section-emoji {
  font-size: 22px;
  line-height: 1;
}

.ap-section-text { flex: 1; }

.ap-section-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.ap-section-tagline {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.ap-section-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  padding: 4px 10px;
  background: var(--bg-surface);
  border-radius: 10px;
}

.ap-section-items {
  padding: 8px 20px 16px;
}

/* Individual items */
.ap-item {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-color);
  transition: opacity 0.2s ease;
}

.ap-item:last-child { border-bottom: none; }

.ap-item.is-checked { opacity: 0.5; }

.ap-item.is-checked .ap-item-title {
  text-decoration: line-through;
  color: var(--text-muted);
}

.ap-item-check {
  flex-shrink: 0;
  padding-top: 2px;
  cursor: pointer;
}

.ap-item-check input[type=checkbox] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.ap-check-box {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-surface);
  /* Phase 27.6-01 DBT-01: explicit properties (was transition:all) */
  transition: background-color 0.15s ease, border-color 0.15s ease;
  position: relative;
}

.ap-item-check input:checked + .ap-check-box {
  background: #10b981;
  border-color: #10b981;
}

.ap-item-check input:checked + .ap-check-box::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 11px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.ap-item-check:hover .ap-check-box { border-color: var(--tc-primary); }

.ap-item-body {
  flex: 1;
  min-width: 0;
}

.ap-item-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.ap-item-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}

.ap-item-status-note {
  font-size: 11px;
  padding: 2px 8px;
  background: rgba(16, 185, 129, 0.15);
  color: #86efac;
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 10px;
  font-weight: 600;
  flex-shrink: 0;
}

/* Phase 30.5-01: partial-status chip (amber, in-progress) */
.ap-item-status-note--partial {
  background: rgba(245, 158, 11, 0.15);
  color: #fcd34d;
  border-color: rgba(245, 158, 11, 0.3);
}

/* Phase 30.5-01: partial items keep a subtle amber accent even when
   not line-through, so they read distinctly from fully-done + not-yet. */
.ap-item.is-shipped-partial .ap-item-title {
  color: var(--text-primary);
}

.ap-item-partial-note {
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(245, 158, 11, 0.08);
  border-left: 3px solid rgba(245, 158, 11, 0.5);
  border-radius: 4px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

.ap-item-partial-note strong {
  color: #fcd34d;
  margin-right: 4px;
}

.ap-item-meta {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.ap-owner-badge, .ap-source-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.ap-owner-arnold {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.ap-owner-agency {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.ap-owner-both {
  background: rgba(16, 185, 129, 0.15);
  color: #86efac;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.ap-source-badge {
  background: var(--bg-surface);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
}

/* ─── Action Plan: Assign to team button + assigned state ─── */

.ap-assign-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  /* Phase 27.6-01 DBT-01: explicit properties (was transition:all) */
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  font-family: inherit;
  line-height: 1.4;
}

.ap-assign-btn:hover:not(:disabled) {
  background: rgba(168, 85, 247, 0.1);
  border-color: rgba(168, 85, 247, 0.4);
  color: #c084fc;
  transform: translateY(-1px);
}

.ap-assign-btn:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
}

.ap-assigned-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.ap-assigned-goto {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  color: var(--tc-primary);
  text-decoration: none;
  margin-left: 4px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: color 0.15s ease;
}

.ap-assigned-goto:hover {
  color: #c084fc;
  text-decoration: underline;
}

.ap-unassign-btn {
  background: transparent;
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #fca5a5;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  cursor: pointer;
  margin-left: 6px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ap-unassign-btn:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.12);
  color: #fecaca;
  border-color: rgba(239, 68, 68, 0.6);
}

.ap-unassign-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}

.ap-item-check--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ap-item-check--disabled input {
  cursor: not-allowed;
}

.ap-item.is-assigned {
  /* Subtle indicator that ownership has moved to the team. */
  border-left: 2px solid rgba(168, 85, 247, 0.45);
}

/* ─── Toast (used by Action Plans sync-unavailable notice) ─── */

.ap-toast-host {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.ap-toast {
  background: rgba(24, 24, 27, 0.95);
  color: var(--text-primary);
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  font-size: 13px;
  font-weight: 500;
  max-width: 360px;
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: auto;
}

.ap-toast--fade {
  opacity: 0;
  transform: translateY(8px);
}

.ap-item-impact {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 10px;
}

.ap-item-impact strong {
  color: var(--text-primary);
  font-weight: 600;
}

.ap-item-details {
  margin-top: 6px;
}

.ap-item-details summary {
  font-size: 12px;
  font-weight: 600;
  color: var(--tc-primary);
  cursor: pointer;
  padding: 4px 0;
  list-style: none;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ap-item-details summary::-webkit-details-marker { display: none; }

.ap-item-details summary::before {
  content: '▸';
  font-size: 10px;
  transition: transform 0.2s ease;
}

.ap-item-details[open] summary::before {
  transform: rotate(90deg);
}

.ap-item-how {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  padding: 12px 16px;
  margin-top: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-xs);
  white-space: pre-wrap;
}

@media (max-width: 768px) {
  .ap-toggle { max-width: 100%; }
  .ap-hero { padding: 18px 20px; }
  .ap-hero-metrics { grid-template-columns: 1fr; gap: 14px; }
  .ap-section-items { padding: 8px 14px 12px; }
  .ap-section-header { padding: 14px 16px; }
}

@media (max-width: 520px) {
  /* 3-button toggle row — shrink text so buttons don't overflow */
  .ap-toggle-btn { padding: 10px 10px; gap: 6px; }
  .ap-toggle-btn span:not(.ap-toggle-progress) { font-size: 12px; }
  .ap-toggle-progress { padding: 2px 6px; font-size: 10px; }
}

/* ───── Narrative Report Style ───── */

.ap-report-hero {
  padding: 56px 48px;
  background: linear-gradient(135deg, #0f172a 0%, #115e59 50%, #0d9488 100%);
  border-radius: 16px;
  color: #fff;
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;
}

.ap-report-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 70%, rgba(255,255,255,0.04) 0%, transparent 50%),
              radial-gradient(circle at 70% 30%, rgba(78,205,196,0.1) 0%, transparent 50%);
  pointer-events: none;
}

.ap-report-hero > * { position: relative; z-index: 1; }

.ap-report-hero-eyebrow {
  display: inline-block;
  padding: 6px 18px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.65);
  margin-bottom: 24px;
}

.ap-report-hero-headline {
  font-size: 44px;
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 20px;
  max-width: 720px;
}

.ap-hero-accent {
  color: #4ECDC4;
}

.ap-report-hero-subtitle {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,0.75);
  max-width: 640px;
  margin: 0 0 44px;
}

.ap-report-hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}

.ap-report-stat {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 18px 14px;
  text-align: center;
  backdrop-filter: blur(4px);
}

.ap-report-stat-value {
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.ap-report-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(255,255,255,0.65);
  margin-top: 6px;
  font-weight: 600;
}

/* Report sections */
.ap-report-section {
  margin-bottom: 48px;
}

.ap-report-section-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--tc-primary);
  margin-bottom: 10px;
}

.ap-eyebrow-green { color: #10b981; }
.ap-eyebrow-red { color: #ef4444; }

.ap-report-section-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
  letter-spacing: -0.3px;
}

.ap-report-section-lead {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 24px;
  max-width: 760px;
}

/* Executive summary */
.ap-summary {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 28px 32px;
}

.ap-summary-text {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-primary);
  margin: 0;
  max-width: 860px;
}

/* Wins card grid */
.ap-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.ap-working-card {
  background: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: var(--border-radius-sm);
  padding: 18px 22px;
  position: relative;
}

.ap-working-card::before {
  content: '✓';
  position: absolute;
  top: 16px;
  right: 18px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #10b981;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

.ap-working-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
  padding-right: 32px;
}

.ap-working-detail {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Hurting list */
.ap-hurting-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ap-hurting-card {
  background: rgba(239, 68, 68, 0.04);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-left: 4px solid #ef4444;
  border-radius: var(--border-radius-sm);
  padding: 18px 22px;
}

.ap-hurting-card.ap-severity-warning {
  background: rgba(245, 158, 11, 0.04);
  border-color: rgba(245, 158, 11, 0.25);
  border-left-color: #f59e0b;
}

.ap-hurting-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.ap-hurting-severity {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 3px 10px;
  border-radius: 10px;
  background: #ef4444;
  color: #fff;
  flex-shrink: 0;
}

.ap-severity-warning .ap-hurting-severity {
  background: #f59e0b;
}

.ap-hurting-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.4;
}

.ap-hurting-evidence {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-secondary);
  padding-left: 0;
}

/* Scorecard */
.ap-scorecard {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 24px;
}

.ap-scorecard-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

.ap-legend-chip {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.3px;
}

.ap-legend-chip.ap-status-optimized { color: #10b981; }
.ap-legend-chip.ap-status-partial { color: #3b82f6; }
.ap-legend-chip.ap-status-missing { color: #737373; }
.ap-legend-chip.ap-status-hurting { color: #ef4444; }

.ap-scorecard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 20px;
}

.ap-scorecard-row {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.ap-scorecard-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ap-scorecard-row.ap-status-optimized .ap-scorecard-dot { background: #10b981; }
.ap-scorecard-row.ap-status-partial .ap-scorecard-dot { background: #3b82f6; }
.ap-scorecard-row.ap-status-missing .ap-scorecard-dot { background: #737373; }
.ap-scorecard-row.ap-status-hurting .ap-scorecard-dot { background: #ef4444; }

.ap-scorecard-signal {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
}

.ap-scorecard-note {
  font-size: 12px;
  color: var(--text-muted);
  text-align: right;
  font-style: italic;
}

/* Targets table */
.ap-targets-table {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
}

.ap-targets-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-color);
  align-items: center;
  font-size: 13px;
}

.ap-targets-row:last-child { border-bottom: none; }

.ap-targets-head {
  background: rgba(255,255,255,0.02);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
}

.ap-targets-metric {
  color: var(--text-primary);
  font-weight: 500;
}

.ap-targets-current {
  font-weight: 700;
  color: #ef4444;
  font-variant-numeric: tabular-nums;
}

.ap-targets-target {
  font-weight: 700;
  color: #10b981;
  font-variant-numeric: tabular-nums;
}

.ap-targets-tab {
  color: var(--text-muted);
  font-size: 12px;
}

/* Hide old hero since we have the new one */
.ap-panel .ap-hero { display: none; }

/* Responsive tweaks */
@media (max-width: 1024px) {
  .ap-scorecard-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .ap-report-hero { padding: 36px 24px; }
  .ap-report-hero-headline { font-size: 30px; }
  .ap-report-hero-subtitle { font-size: 14px; }
  .ap-report-stat-value { font-size: 24px; }
  .ap-summary { padding: 20px 22px; }
  .ap-summary-text { font-size: 14px; line-height: 1.65; }
  .ap-report-section-title { font-size: 20px; }
  .ap-targets-row { grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; padding: 12px 14px; }
  .ap-targets-row > div:nth-child(4) { display: none; }
  .ap-targets-head > div:nth-child(4) { display: none; }
  .ap-scorecard-note { font-size: 11px; }
}

/* ─── Scope pills (Phase 20-03) ─── */
/* Small badges shown next to DataForSEO-sourced numbers so clients
   can tell at a glance which geographic/data tier produced each value
   (city = Fort Collins SERP, state = Colorado volume/KD, global = domain-wide,
    us = US-wide AI mentions, gsc = Search Console, mixed = synthesised). */
.scope-pill {
  display: inline-block;
  padding: 2px 6px;
  /* Plan 27.4-06 Task 7 (UAT-030): bumped left margin 4→8px so the pill
     sits in readable air next to the rank number ("1 GSC" not "1GSC"). */
  margin-left: 8px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.04em;
  border-radius: 3px;
  vertical-align: middle;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  white-space: nowrap;
}
.scope-pill.scope-city   { background: rgba(34, 197, 94, 0.12); color: #4ade80; border-color: rgba(34, 197, 94, 0.3); }
.scope-pill.scope-state  { background: rgba(14, 165, 233, 0.12); color: #38bdf8; border-color: rgba(14, 165, 233, 0.3); }
.scope-pill.scope-global { background: rgba(139, 92, 246, 0.12); color: #a78bfa; border-color: rgba(139, 92, 246, 0.3); }
.scope-pill.scope-us     { background: rgba(245, 158, 11, 0.12); color: #fbbf24; border-color: rgba(245, 158, 11, 0.3); }
.scope-pill.scope-gsc    { background: rgba(236, 72, 153, 0.12); color: #f472b6; border-color: rgba(236, 72, 153, 0.3); }
.scope-pill.scope-mixed  { background: rgba(107, 114, 128, 0.14); color: #9ca3af; border-color: rgba(107, 114, 128, 0.35); }

/* Compact variant for tight spots (e.g. table headers, heatmap legend) */
.scope-pill.scope-compact {
  padding: 1px 4px;
  font-size: 9px;
  margin-left: 3px;
}

/* Caption under section headers that describes the data scope of the numbers below */
.data-scope-note {
  font-size: 12px;
  color: var(--text-muted);
  margin: 4px 0 12px;
  line-height: 1.5;
}
.data-scope-note .scope-pill { margin-left: 0; margin-right: 2px; }

/* ─── Confidence badges (Plan 22-02) ─── */
/* Small pill next to estimated numbers. Uses existing severity tokens so
 * low=critical-red, medium=warning-amber, high=pass-green. Native title attr
 * carries the tooltip — no JS tooltip library. */
.conf-badge {
  display: inline-block;
  padding: 2px 6px;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: 3px;
  vertical-align: middle;
  cursor: help;
  line-height: 1.3;
}
.conf-badge.conf-low {
  background: var(--severity-critical-bg);
  color: var(--severity-critical);
  border: 1px solid color-mix(in srgb, var(--severity-critical) 30%, transparent);
}
.conf-badge.conf-medium {
  background: var(--severity-warning-bg);
  color: var(--severity-warning);
  border: 1px solid color-mix(in srgb, var(--severity-warning) 30%, transparent);
}
.conf-badge.conf-high {
  background: var(--severity-pass-bg);
  color: var(--severity-pass);
  border: 1px solid color-mix(in srgb, var(--severity-pass) 30%, transparent);
}

/* Low-confidence keyword row — subtle de-emphasis. Kept defensively in case a
 * future client's keyword dataset carries lowConfidence:true rows before audit. */
.keyword-row-low-confidence {
  opacity: 0.75;
}
.keyword-row-low-confidence td {
  font-style: italic;
}

/* Verified tick beside a keyword position that has been confirmed via SERP
 * after the Plan 22-02 audit (see keywords.json verifiedAt/verifiedPosition). */
.verified-tick {
  margin-left: 4px;
  color: var(--severity-pass);
  font-weight: 700;
  cursor: help;
}

/* Reconciliation badge — reused on closed audit findings (Flag #5 from 22-01) */
.reconciliation-badge {
  display: inline-block;
  padding: 2px 8px;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: 3px;
  background: var(--severity-pass-bg);
  color: var(--severity-pass);
  border: 1px solid color-mix(in srgb, var(--severity-pass) 30%, transparent);
  cursor: help;
  vertical-align: middle;
}

/* Outlier note — tiny marker on a number that is >100x the next-largest in the
 * same column (Diggles US traffic 55,340 vs next 261). Renders as a sup. */
.outlier-marker {
  color: var(--severity-warning);
  font-size: 10px;
  font-weight: 700;
  margin-left: 2px;
  cursor: help;
}

/* ─────────────────────────────────────────────────────────────────────
 * Review generation playbook (Plan 25-02)
 * Renders inside #ap-client-playbook-slot on the Client Action-Plans tab.
 * All classes prefixed `ap-playbook-*`.
 * ───────────────────────────────────────────────────────────────────── */

.ap-playbook-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 24px 0 32px;
}

.ap-playbook-intro {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
  padding: 24px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: linear-gradient(145deg, var(--tc-primary-glow), rgba(106, 171, 181, 0.04));
}
.ap-playbook-headline {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.ap-playbook-subtitle {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.55;
}
.ap-playbook-intro-facts {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ap-playbook-fact {
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-surface);
}
.ap-playbook-fact--goal {
  border-color: color-mix(in srgb, var(--severity-pass) 45%, transparent);
  background: var(--severity-pass-bg);
}
.ap-playbook-fact-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.ap-playbook-fact-value {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.45;
}

.ap-playbook-card {
  padding: 22px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-surface);
}
.ap-playbook-card-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tc-primary);
  margin-bottom: 8px;
}
.ap-playbook-card-title {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
}
.ap-playbook-note {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 8px 0 0;
  line-height: 1.5;
}

.ap-playbook-link-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: start;
}
.ap-playbook-link-col { min-width: 0; }
.ap-playbook-url {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-surface-2, rgba(255, 255, 255, 0.03));
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--text-primary);
  word-break: break-all;
  user-select: all;
  margin-bottom: 8px;
}
.ap-playbook-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 200px;
}
.ap-playbook-qr img {
  display: block;
  width: 200px;
  height: 200px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #fff;
  padding: 8px;
}
.ap-playbook-qr-download {
  font-size: 12px;
  color: var(--tc-primary);
  text-decoration: none;
}
.ap-playbook-qr-download:hover { text-decoration: underline; }
.ap-playbook-qr-caption {
  margin: 0;
  font-size: 11px;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.4;
}

.ap-playbook-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.ap-playbook-copy-btn {
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--tc-primary) 50%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--tc-primary) 12%, transparent);
  color: var(--tc-primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.ap-playbook-copy-btn:hover {
  background: color-mix(in srgb, var(--tc-primary) 22%, transparent);
}
.ap-playbook-copy-btn.is-copied {
  background: var(--severity-pass);
  border-color: var(--severity-pass);
  color: #0b1f14;
}
.ap-playbook-copy-btn:focus-visible {
  outline: 2px solid var(--tc-primary);
  outline-offset: 2px;
}

.ap-playbook-templates {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ap-playbook-template {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-surface-2, rgba(255, 255, 255, 0.02));
  padding: 12px 14px;
}
.ap-playbook-template-summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--text-primary);
  font-size: 13px;
  padding: 4px 0;
}
.ap-playbook-template-summary::-webkit-details-marker { display: none; }
.ap-playbook-template-summary::before {
  content: '+';
  display: inline-block;
  width: 18px;
  color: var(--tc-primary);
  font-weight: 700;
}
.ap-playbook-template[open] > .ap-playbook-template-summary::before { content: '−'; }
.ap-playbook-template-body-wrap {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ap-playbook-template-when {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.ap-playbook-template--sms .ap-playbook-template-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
  display: block;
}
.ap-playbook-template-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ap-playbook-field-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}
.ap-playbook-template-body {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-surface-2, rgba(255, 255, 255, 0.03));
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-primary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.ap-playbook-template-body--subject {
  padding: 8px 12px;
  font-size: 13px;
}
.ap-playbook-template-body--script {
  font-style: italic;
}

.ap-playbook-callout {
  margin-top: 12px;
  padding: 10px 12px;
  border-left: 3px solid var(--severity-warning);
  background: var(--severity-warning-bg);
  color: var(--text-primary);
  font-size: 12.5px;
  line-height: 1.5;
  border-radius: 0 6px 6px 0;
}

.ap-playbook-response-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.ap-playbook-response {
  padding: 14px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-surface-2, rgba(255, 255, 255, 0.02));
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ap-playbook-response.is-5star {
  border-color: color-mix(in srgb, #FFD24A 50%, transparent);
  background: rgba(255, 210, 74, 0.06);
}
.ap-playbook-response.is-4star {
  border-color: color-mix(in srgb, #A3D675 45%, transparent);
  background: rgba(163, 214, 117, 0.05);
}
.ap-playbook-response.is-3star {
  border-color: color-mix(in srgb, var(--severity-warning) 45%, transparent);
  background: color-mix(in srgb, var(--severity-warning-bg) 70%, transparent);
}
.ap-playbook-response.is-2star {
  border-color: color-mix(in srgb, #F0844B 50%, transparent);
  background: rgba(240, 132, 75, 0.07);
}
.ap-playbook-response.is-1star {
  border-color: color-mix(in srgb, #E5484D 55%, transparent);
  background: rgba(229, 72, 77, 0.07);
}
.ap-playbook-response-star {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}
.ap-playbook-response-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.ap-playbook-response-guidance {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.ap-playbook-legacy {
  border-color: color-mix(in srgb, var(--severity-warning) 50%, transparent);
  background: color-mix(in srgb, var(--severity-warning-bg) 50%, var(--bg-surface));
}
.ap-playbook-legacy-eyebrow {
  color: var(--severity-warning);
}
.ap-playbook-legacy-lead {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.55;
}
.ap-playbook-legacy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
}
.ap-playbook-legacy-card {
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--severity-warning) 45%, transparent);
  border-radius: 10px;
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ap-playbook-legacy-reviewer {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}
.ap-playbook-legacy-meta {
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

.ap-playbook-cadence-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 8px;
}
.ap-playbook-cadence-week {
  padding: 14px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-surface-2, rgba(255, 255, 255, 0.02));
}
.ap-playbook-cadence-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--tc-primary);
  margin-bottom: 8px;
}
.ap-playbook-cadence-actions {
  margin: 0;
  padding: 0 0 0 18px;
  font-size: 12.5px;
  color: var(--text-primary);
  line-height: 1.5;
}
.ap-playbook-cadence-actions li { margin-bottom: 6px; }

.ap-playbook-guardrails {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px dashed color-mix(in srgb, var(--severity-warning) 50%, transparent);
  border-radius: 8px;
  background: var(--severity-warning-bg);
}
.ap-playbook-guardrails-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--severity-warning);
  margin-bottom: 6px;
}
.ap-playbook-guardrails ul {
  margin: 0;
  padding: 0 0 0 18px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-primary);
}
.ap-playbook-guardrails li { margin-bottom: 4px; }

.ap-playbook-tracking-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 8px;
}
.ap-playbook-kpi {
  padding: 14px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-surface-2, rgba(255, 255, 255, 0.02));
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ap-playbook-kpi-metric {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}
.ap-playbook-kpi-where {
  font-size: 11px;
  color: var(--tc-primary);
  font-weight: 600;
}
.ap-playbook-kpi-dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  font-size: 12px;
}
.ap-playbook-kpi-dl dt {
  color: var(--text-secondary);
  font-weight: 600;
}
.ap-playbook-kpi-dl dd {
  margin: 0;
  color: var(--text-primary);
  line-height: 1.4;
}
.ap-playbook-kpi-signal {
  margin: 4px 0 0;
  padding-top: 8px;
  border-top: 1px dashed var(--border-color);
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  font-style: italic;
}

/* Responsive collapse — everything single-column under 640px */
@media (max-width: 1024px) {
  .ap-playbook-cadence-grid { grid-template-columns: repeat(2, 1fr); }
  .ap-playbook-tracking-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ap-playbook-intro { grid-template-columns: 1fr; padding: 18px; }
  .ap-playbook-link-row { grid-template-columns: 1fr; }
  .ap-playbook-qr { max-width: 100%; align-items: flex-start; }
  .ap-playbook-cadence-grid { grid-template-columns: 1fr; }
  .ap-playbook-card { padding: 16px; }
  .ap-playbook-headline { font-size: 19px; }
  .ap-playbook-response-grid,
  .ap-playbook-legacy-grid { grid-template-columns: 1fr; }
}

/* ─── Action Plans — Website Changes surface (Plan 28.5-01) ─── */

.ap-changes-section {
  margin-top: 24px;
}

.ap-changes-actions {
  margin: 8px 0 20px;
}

.ap-changes-summary-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tc-primary);
  background: none;
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid var(--tc-primary);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  font-family: inherit;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.ap-changes-summary-link:hover {
  background: var(--tc-primary);
  color: var(--bg-body, #0F1B2B);
}

.ap-changes-summary-link:focus-visible {
  outline: 2px solid var(--tc-primary);
  outline-offset: 2px;
}

.ap-changes-groups {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.ap-changes-group {
  border-top: 1px solid var(--border-color);
  padding-top: 18px;
}

.ap-changes-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.ap-changes-group-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.3;
}

.ap-changes-group-count {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ap-changes-group-lead {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0 0 12px 0;
  line-height: 1.5;
}

.ap-changes-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.ap-changes-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color var(--transition-fast);
}

.ap-changes-card:hover {
  border-color: var(--border-color-hover);
}

.ap-changes-card-header {
  display: flex;
  justify-content: flex-end;
}

.ap-changes-date {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.ap-changes-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.3;
}

.ap-changes-summary {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.ap-changes-card-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.ap-changes-live-btn {
  font-size: 12px;
  font-weight: 600;
  color: var(--tc-primary);
  text-decoration: none;
  padding: 4px 0;
}

.ap-changes-live-btn:hover {
  text-decoration: underline;
}

.ap-changes-report-btn {
  background: none;
  border: none;
  padding: 4px 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}

.ap-changes-report-btn:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

@media (max-width: 768px) {
  .ap-changes-cards {
    grid-template-columns: 1fr;
  }
  .ap-changes-card {
    padding: 12px 14px;
  }
  .ap-changes-group-header {
    flex-wrap: wrap;
  }
}

/* ─── Multi-Tenant Auth Header Components (Phase 27-02) ─── */

/* Client Switcher (admin mode) */
.header-client-switcher {
  display: flex;
  align-items: center;
}
.header-client-switcher[hidden] { display: none; }

.client-switcher-select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 6px 28px 6px 12px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-body, inherit);
  cursor: pointer;
  min-width: 200px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.55' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.client-switcher-select:hover {
  border-color: var(--border-color-hover);
  background-color: var(--bg-card-hover);
}
.client-switcher-select:focus-visible {
  outline: 2px solid var(--tc-primary);
  outline-offset: 2px;
  border-color: var(--tc-primary);
}
.client-switcher-select option {
  background: var(--bg-card);
  color: var(--text-primary);
}

/* Locked client readonly (client mode) — reuses .header-client block styling */
.header-client[hidden] { display: none; }

/* Mode badge — small pill next to other header-right items */
.header-mode-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--tc-primary-glow);
  color: var(--tc-primary);
  border: 1px solid rgba(106, 171, 181, 0.25);
}
.header-mode-badge[hidden] { display: none; }

/* Logout button */
.header-logout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid transparent;
  border-radius: var(--border-radius-sm);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-body, inherit);
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}
.header-logout:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-color);
}
.header-logout:focus-visible {
  outline: 2px solid var(--tc-primary);
  outline-offset: 2px;
  color: var(--text-primary);
}
.header-logout svg { flex-shrink: 0; }

/* Screen-reader only utility for hidden labels */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Mobile: shrink switcher, collapse logout label, anchor right side */
@media (max-width: 768px) {
  .client-switcher-select {
    min-width: 120px;
    max-width: 180px;
    font-size: 12px;
    padding: 5px 22px 5px 10px;
  }
  .header-logout span { display: none; }
  .header-logout { padding: 6px 8px; flex-shrink: 0; }
  .header-mode-badge { display: none; }
  .header-right { flex-shrink: 0; }
  .header-left { min-width: 0; gap: 10px; flex-shrink: 1; }
  .header-divider { display: none; }
  .header { padding: 0 12px; }
  .header-logo { height: 26px; }
}

/* ─────────────────────────────────────────────────────────────
   Competitors expandable row + drill-down panel (Plan 27.2-03)
   Establishes the expand/collapse UX pattern that 27.2-04 will
   reuse for the competitor-keywords drill-down.
   ───────────────────────────────────────────────────────────── */

.competitors-table .competitor-expand-col {
  width: 36px;
  padding-left: 8px;
  padding-right: 0;
}
.competitors-table td.competitor-expand-cell {
  width: 36px;
  padding-left: 8px;
  padding-right: 0;
  vertical-align: middle;
}

.competitor-expand-btn {
  background: transparent;
  border: 0;
  padding: 4px 8px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
  border-radius: var(--border-radius-xs);
  transition: color 120ms ease, background 120ms ease;
}
.competitor-expand-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}
.competitor-expand-btn:focus-visible {
  outline: 2px solid var(--tc-primary);
  outline-offset: 2px;
  color: var(--text-primary);
}
.expand-caret {
  display: inline-block;
  transition: transform 150ms ease;
}

.competitor-drilldown-row td {
  padding: 0;
  background: var(--bg-card-hover);
  border-top: 1px solid var(--border-color);
}
.competitor-drilldown-row[hidden] {
  display: none;
}

.drilldown-panel {
  padding: 16px 24px;
  position: sticky;
  left: 0;
  max-width: calc(100vw - var(--sidebar-width) - 48px);
  box-sizing: border-box;
}
.drilldown-panel-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 12px;
  gap: 16px;
  flex-wrap: wrap;
}
.drilldown-panel-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.drilldown-scope-pill {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--tc-primary-glow);
  color: var(--tc-primary);
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.drilldown-table {
  width: 100%;
  font-size: 13px;
  border-collapse: collapse;
}
.drilldown-table th {
  font-weight: 600;
  text-align: left;
  color: var(--text-muted);
  padding: 6px 12px;
  border-bottom: 1px solid var(--border-color);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.drilldown-table td {
  padding: 6px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.drilldown-table tr:last-child td {
  border-bottom: 0;
}

.drilldown-empty {
  color: var(--text-muted);
  font-style: italic;
  padding: 8px 0;
  margin: 0;
  font-size: 13px;
}

/* Plan 27.2-04: drill-down tab switcher (Top referring domains | Top keywords) */
.drilldown-tabs {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
}
.drilldown-tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  color: var(--text-muted);
  border-radius: var(--border-radius-xs) var(--border-radius-xs) 0 0;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}
.drilldown-tab:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}
.drilldown-tab:focus-visible {
  outline: 2px solid var(--tc-primary);
  outline-offset: 2px;
  color: var(--text-primary);
}
.drilldown-tab.active {
  color: var(--tc-primary);
  background: var(--bg-card);
  border-bottom: 2px solid var(--tc-primary);
}
.drilldown-tab-panel {
  padding-top: 14px;
}
.drilldown-scope-caption {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* Scope caption's pill sits inline — no fixed width needed */
.drilldown-scope-caption .drilldown-scope-pill {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .drilldown-panel { padding: 12px 16px; max-width: calc(100vw - 32px); }
  .drilldown-table { font-size: 12px; }
  .drilldown-table th,
  .drilldown-table td { padding: 5px 8px; }
  /* Hide first-seen column on mobile — least load-bearing, keeps the backlinks
     table readable. Keywords table (also 4 cols) keeps difficulty visible because
     it's the primary decision signal. Class-scoped so the rule can't leak. */
  .drilldown-backlinks-table th:nth-child(4),
  .drilldown-backlinks-table td:nth-child(4) {
    display: none;
  }
  /* Tab buttons tighter on mobile */
  .drilldown-tab { font-size: 12px; padding: 5px 10px; }
  .drilldown-tabs { width: 100%; }
  /* Panel header stacks on mobile so tabs get their own row */
  .drilldown-panel-header { flex-direction: column; align-items: flex-start; }
}

/* 375px (iPhone SE) — keywords table keeps all 4 columns readable via
   smaller keyword-column width; position/volume/difficulty get tight padding */
@media (max-width: 480px) {
  .drilldown-keywords-table th:first-child,
  .drilldown-keywords-table td:first-child {
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Plan 27.3-02: LLM Mentions drill-down on the AI Visibility tab.
   New scoped selectors only — ZERO modifications to 27.2-03's .drilldown-panel,
   .drilldown-table, .drilldown-scope-pill, .drilldown-empty, .competitor-expand-btn,
   .expand-caret, or .competitor-drilldown-row. Adds a caption variant + platform
   pills + a question-cell width rule scoped to this table's class only. */
.drilldown-llm-mentions-table .question-cell {
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drilldown-caption {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 10px 0;
  font-style: italic;
}
.platform-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.platform-pill.platform-google {
  background: rgba(66, 133, 244, 0.15);
  color: #4285f4;
}
.platform-pill.platform-chat_gpt {
  background: rgba(16, 163, 127, 0.15);
  color: #10a37f;
}
@media (max-width: 768px) {
  /* Hide AI Vol on mobile — least load-bearing of the 4 cols; question + platform
     + co-mentions are the load-bearing trio. Class-scoped so can't leak. */
  .drilldown-llm-mentions-table th:nth-child(3),
  .drilldown-llm-mentions-table td:nth-child(3) {
    display: none;
  }
  .drilldown-llm-mentions-table .question-cell {
    max-width: 200px;
  }
}

/* ─── Brand Sentiment (Plan 27.3-03) ───────────────────────────────────────
   Lives on the AI Visibility tab. Doughnut chart + top-5 mention list in a
   2-column grid; stacks on mobile. Uses existing CSS tokens where possible;
   pill backgrounds mirror .insights-sentiment-pill so the two sentiment
   visualizations on different tabs read consistently. */
.brand-sentiment-section .brand-sentiment-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2fr;
  gap: 24px;
  align-items: start;
}
.brand-sentiment-chart-wrap {
  position: relative;
  min-height: 220px;
}
.brand-sentiment-list h4 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sentiment-mention-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 13px;
}
.sentiment-mention-row:last-child {
  border-bottom: 0;
}
.sentiment-mention-row a {
  color: var(--text-primary);
  text-decoration: none;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sentiment-mention-row a:hover {
  color: var(--tc-primary);
}
.sentiment-mention-domain {
  color: var(--text-muted);
  font-size: 12px;
  flex-shrink: 0;
}
.sentiment-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
/* Pill background uses the token hex values from variables.css
   (--severity-pass, --tc-secondary, --severity-critical) as tinted surfaces.
   Matches the .insights-sentiment-pill palette already established on the
   Insights tab for visual consistency. */
.sentiment-pill.sentiment-positive {
  background: rgba(34, 197, 94, 0.15);
  color: #22C55E;
}
.sentiment-pill.sentiment-neutral {
  background: rgba(128, 139, 148, 0.15);
  color: #808B94;
}
.sentiment-pill.sentiment-negative {
  background: rgba(239, 68, 68, 0.15);
  color: #EF4444;
}

@media (max-width: 768px) {
  .brand-sentiment-section .brand-sentiment-grid {
    grid-template-columns: 1fr;
  }
  .sentiment-mention-row a {
    white-space: normal;
  }
}

/* ───────────────────────────────────────────────────────────────────────── */
/* Phase 27.4-01 — Results exec cockpit                                      */
/* 5-tile hero grid, divergence caption, narrative placeholder, drill CTAs.  */
/* Appended only — zero modifications to existing selectors.                 */
/* ───────────────────────────────────────────────────────────────────────── */

.results-hero-grid {
  display: grid;
  /* Phase 43-03-03 hotfix: 6 tiles in a single row at 1fr produced
     scrollWidth ~1573 at a 1440 viewport — AI Readiness clipped off-screen
     because GSC trio (~234px content) and GA4 pair (~217px) exceeded their
     1/6 column track. Switched to 3-col 2-row at desktop so each tile gets
     ~1/3 viewport width and breathes (matches Stripe / Linear hero strip
     pattern for 6+ headline metrics). 1200px breakpoint already declares
     repeat(3, 1fr) so it stays a no-op continuation; 768px → 2 cols;
     480px → 1 col. The .hero-tile 320px height lock (Phase 42-01),
     `1fr auto auto` per-row template (Phase 42-02) and Geist on primary
     numerals (Phase 42-03) are all unchanged. */
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.results-hero-grid .hero-tile {
  background: var(--bg-card);
  padding: 20px;
  border-radius: var(--border-radius);
  /* Phase 42-01: lock all 5 tiles to identical heights at desktop so the
     row reads as one unified strip instead of 5 cards with mismatched
     vertical weight (the audit's "AI-template" tell #2). Mobile @<=480px
     breakpoint below relaxes max-height back to content-driven so small
     viewports stay flexible (preserves Phase 27.6-03 mobile responsive
     polish). 320px chosen to match the existing min-height (was: stacked
     min:220 + min:320 from two coexisting selectors — now consolidated).
     Phase 27.4-05 grid `auto 1fr auto` swapped to flex-column with
     `space-between` so empty space distributes between rows on
     multi-metric tiles instead of dumping at the bottom. */
  min-height: 320px;
  max-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--border-color);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.results-hero-grid .hero-tile:hover {
  border-color: var(--border-color-hover);
}

.results-hero-grid .hero-tile-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.results-hero-grid .hero-tile-empty {
  /* Plan 27.4-05: parent is now grid — the 1fr row auto-stretches this.
     display:flex still useful for centering the message within the row. */
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
  text-align: center;
}

.results-hero-grid .hero-gauge-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.results-hero-grid .hero-gauge-container .gauge-container {
  width: 140px;
}

.results-hero-grid .hero-composite-caption {
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.45;
  /* Plan 27.4-05 (UAT-002): bumped 4px -> 10px so the composite caption below
     the gauge has clearly-readable separation from the in-SVG gauge label. */
  margin-top: 10px;
}

.results-hero-grid .hero-composite-caption .composite-caption-strong {
  color: var(--text-primary);
  font-weight: 600;
}

.results-hero-grid .hero-kpi-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* Phase 42-01: was `justify-content: center` — switched to space-between
     so the 2-3 KPI rows distribute their breathing room evenly across the
     vertical span instead of bunching in the middle of an over-tall tile.
     Combined with the height-locked `.hero-tile` (320px), this gives
     SC + Analytics tiles the visible balance of equal-spaced rows. */
  justify-content: space-between;
  gap: 10px;
}

.results-hero-grid .hero-kpi-row {
  /* Phase 39-hotfix (visual UAT): restructured from a 3-column grid to a
     row with pills wrapping BELOW the value. Cause of the bug: the old
     `minmax(0,auto) 1fr auto` placed pills in a horizontal `auto` track
     that pulled left when pill text grew (e.g. "+118% since Apr 18"),
     overlapping the right-aligned value digit. Now: top row is label +
     value (label nowrap-left, value bold-right). Pills go on a second
     row, right-aligned, no possible overlap. Phase 37 nowrap-on-pill
     guarantee preserved — pill stays one inline block.
     Phase 42-02: 3-column template: label fills (1fr, flush-left),
     value sizes to content, sparkline sizes to content. Reversed from
     the post-Phase-39 (label content / value 1fr) shape because the
     larger 28px primary value was overflowing a cramped 1fr cell once
     the 60×20 sparkline took up column 3 at 5-up grid widths. Sparkline
     gracefully omitted (no col 3 child) on rows without trend data. */
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 2px;
  align-items: baseline;
  padding: 4px 0;
}

.results-hero-grid .hero-kpi-label {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  letter-spacing: 0.2px;
}

.results-hero-grid .hero-kpi-value {
  /* Phase 42-02: kept as fallback for any unmigrated row. Migrated rows
     use .hero-kpi-value-primary or .hero-kpi-value-secondary which
     override font-size + weight per typographic hierarchy below. */
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: right;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* Phase 42-02: typographic hierarchy across the hero strip. ONE primary
   metric per multi-metric tile (28px/700), other rows demoted to secondary
   (18px/600). Gauge tiles unchanged — their 32px gauge digit stays the
   visual anchor above SC Clicks (28px) and Analytics Conversions (28px). */
.results-hero-grid .hero-kpi-value-primary {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: right;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.results-hero-grid .hero-kpi-value-secondary {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: right;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

/* Phase 42-02: inline sparkline chip — 60×20 SVG placed in column 3 of
   the kpi-row grid, aligned with the value baseline. Stroke color comes
   from the renderer (cyan default; purple for invertY position rows so
   "lower-is-better" reads semantically distinct). */
.results-hero-grid .hero-sparkline {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  display: block;
  opacity: 0.85;
}

/* Phase 42-02: pill row spans full width and right-aligns under the
   value+sparkline cluster. Same visual contract as the pre-42-02 grid
   (where 1fr in col 2 + text-align:right achieved this implicitly).
   Now made explicit since the new col template `1fr auto auto` would
   otherwise leave the pill span auto-flowing into col 1 (1fr) with
   no right-alignment. */
.results-hero-grid .hero-kpi-row > .hero-kpi-pills {
  grid-column: 1 / -1;
  justify-self: end;
  min-height: 16px;
  font-size: 11px;
}

/* AI Visibility tile sparkline lives in its own row (between caption and
   refresh pill) since the gauge tile is centered, not row-aligned. */
.results-hero-grid .hero-tile-sparkline-row {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}
.results-hero-grid .hero-tile-sparkline-row .hero-sparkline {
  /* Override grid placement (this context is flex, not grid). */
  grid-column: auto;
  grid-row: auto;
  justify-self: auto;
  align-self: auto;
}

/* ─── Phase 42-03: Display font on hero numerals ───
   Pair Inter (body) with Geist (display, Vercel's house font) on hero
   numerals ONLY — gauge digits + KPI values. Body text, labels, captions,
   pills, table cells, modal fields all stay Inter. Geist is loaded via
   Google Fonts CDN in index.html with display=swap, so if the CDN fails
   the fallback stack in --font-display (Inter → system-ui) keeps the
   dashboard rendering with zero regression vs pre-42-03 state.
   tabular-nums (`tnum 1`) keeps numeric column alignment crisp; cv11 is
   Geist's clean alternates for some glyphs (no-op outside Geist). */
.results-hero-grid .hero-kpi-value-primary,
.results-hero-grid .hero-kpi-value-secondary,
.results-hero-grid .hero-kpi-value {
  font-family: var(--font-display);
  font-feature-settings: 'tnum' 1, 'cv11' 1;
}

/* Gauge digit (.gauge-score is the SVG <text> rendered inside
   .hero-gauge-container by Charts.renderGauge). Scoped to .results-hero-grid
   so non-hero gauges (overview tab, audit tab) keep their existing font. */
.results-hero-grid .hero-gauge-container .gauge-score,
.results-hero-grid .hero-gauge-container svg text.gauge-score {
  font-family: var(--font-display);
  font-feature-settings: 'tnum' 1;
}

/* Phase 37 layout polish (overridden by Phase 42-01): the original intent
   here was to center the multi-metric stack vertically, matching gauge
   tile centering. Phase 42-01 supersedes that with `space-between` so empty
   space distributes BETWEEN rows instead of all of it ending up in the
   middle (which left top + bottom bands of empty space when the stack was
   short). The outer `.hero-tile` is now height-locked at 320px and uses
   space-between itself, so the kpi-stack's flex:1 + space-between is what
   actually renders. */
.results-hero-grid .hero-kpi-stack {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  gap: 4px;
}

/* Phase 42-01: min-height: 320px consolidated into the canonical
   `.results-hero-grid .hero-tile` block above (which now sets both
   min-height AND max-height for height-locked tiles). The duplicate
   selector here is intentionally removed so the height contract lives
   in one place. */

.results-hero-grid .delta-pill-slot {
  /* Phase 39-hotfix: pin delta-pill-slot to row 2, span both columns,
     right-align so the pill sits flush-right under the value. Prevents
     overlap with the value digit on rows where pill text is long. */
  grid-column: 1 / -1;
  justify-self: end;
  min-width: 0;
  min-height: 16px;
  font-size: 11px;
}

/* Phase 39-hotfix: when both .delta-pill (MoM) AND .refresh-delta-pill
   (period-over-period) render in the same hero tile, hide the duplicate
   .delta-pill so we only show the more informative refresh-delta-pill
   (which carries the "since {date}" suffix inline). The refresh-delta-pill
   IS the canonical delta indicator post-Phase 33; .delta-pill is legacy
   from Phase 27.4 MoM and should defer. */
.results-hero-grid .delta-pill-slot:has(.refresh-delta-pill) .delta-pill {
  display: none;
}

/* Phase 39-hotfix: hide neutral (no-change) refresh-delta pills across
   the entire Performance Overview hero strip. A "0%" pill adds no signal
   — the absence of a colored pill IS the "no change" indicator, and
   surfaces are quieter for it. Applies to: Site Health composite footer,
   AI Visibility / AI Readiness tile-refresh-pill, multi-metric tile rows
   in Search Console + Analytics. Non-zero pills (up/down) render
   normally. */
.results-hero-grid .refresh-delta-pill.delta-neutral,
.results-hero-grid .refresh-delta-pill.delta-stable {
  display: none;
}
.hero-site-health-footer:has(.refresh-delta-pill.delta-neutral) .footer-prefix,
.hero-site-health-footer:has(.refresh-delta-pill.delta-stable) .footer-prefix {
  /* When the pill is hidden, also hide the orphan "vs prior:" prefix —
     no pill = no comparison to make. */
  display: none;
}

.results-divergence-caption {
  color: var(--text-muted);
  font-size: 12px;
  margin: 0 auto 20px;
  text-align: center;
  max-width: 760px;
  line-height: 1.55;
}

.results-narrative-section {
  margin-bottom: 24px;
}

.results-narrative-section .section-subhead {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}

.results-drill-ctas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.drill-cta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 44px 20px 20px;
  background: var(--bg-card);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  text-decoration: none;
  color: var(--text-primary);
  transition: background var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
  position: relative;
}

.drill-cta:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-color-hover);
  transform: translateY(-2px);
  color: var(--text-primary);
}

.drill-cta-label {
  font-size: 16px;
  font-weight: 600;
}

.drill-cta-sub {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.45;
}

.drill-cta-arrow {
  position: absolute;
  top: 20px;
  right: 20px;
  color: var(--tc-primary);
  font-size: 18px;
  transition: transform var(--transition-fast);
}

.drill-cta:hover .drill-cta-arrow {
  transform: translateX(4px);
}

@media (max-width: 1200px) {
  .results-hero-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .results-hero-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .results-drill-ctas {
    grid-template-columns: 1fr;
  }
  /* Phase 42-01: release the 320px max-height lock once tile width
     narrows below 2-up — at this width vertical content may legitimately
     exceed 320 (e.g. KPI rows wrap), and clipping was the regression
     this guard prevents. Min-height stays so empty tiles still occupy
     visual real estate. */
  .results-hero-grid .hero-tile {
    max-height: none;
  }
}

@media (max-width: 480px) {
  .results-hero-grid {
    grid-template-columns: 1fr;
  }
  .results-hero-grid .hero-tile {
    /* Phase 42-01: mobile is content-driven — relax both bounds so cards
       size to their content (preserves Phase 27.6-03 mobile responsive
       polish). max-height already released by the 768px override above. */
    min-height: 140px;
    max-height: none;
  }
  /* Phase 42-02: compress the typographic hierarchy proportionally on
     mobile so primary doesn't overflow at 1-up width and secondary stays
     readable. Matches Phase 27.4-06 mobile overflow polish ratios. */
  .results-hero-grid .hero-kpi-value-primary {
    font-size: 22px;
  }
  .results-hero-grid .hero-kpi-value-secondary {
    font-size: 16px;
  }
}

/* ─── Phase 27.4-02: Overview widget slot placeholders ───
   Minimal styling; 27.4-03 replaces innerHTML of each `.widget-slot` with
   live content and adds per-widget styling. Do not rely on these rules
   beyond 27.4-03 — placeholder state only. */
.overview-new-widgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 24px;
  margin-bottom: 24px;
}
.widget-slot {
  background: var(--bg-card);
  padding: 16px;
  border-radius: var(--border-radius-md, 8px);
  border: 1px dashed rgba(255, 255, 255, 0.08);
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.widget-slot-placeholder {
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  padding: 12px;
  font-size: 13px;
}

/* ─── Phase 27.4-03 Task 1: Populated widget cards + landing-page funnel ───
   `widget-card` coexists with `widget-slot` — renderers swap the class when
   they replace innerHTML. Scoped styles only, zero modifications above. */
.widget-card {
  background: var(--bg-card);
  padding: 20px 24px;
  border-radius: var(--border-radius-md, 8px);
  border: 1px solid var(--border-color);
  margin-bottom: 20px;
}
.widget-card .widget-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}
.widget-card .widget-subtitle {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Landing-page funnel: filter pills + table */
.funnel-filter-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.funnel-pill {
  background: transparent;
  border: 1px solid var(--border-color);
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
  font-family: inherit;
}
.funnel-pill:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
}
.funnel-pill.active {
  background: var(--tc-primary-glow);
  color: var(--tc-primary);
  border-color: var(--tc-primary);
}
.funnel-table-wrap {
  overflow-x: auto;
}
.funnel-table {
  width: 100%;
  font-size: 13px;
  border-collapse: collapse;
}
.funnel-table th {
  font-weight: 600;
  text-align: left;
  padding: 8px 12px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
  white-space: nowrap;
}
.funnel-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
.funnel-table td.funnel-page-cell {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}
.funnel-table tr:last-child td {
  border-bottom: 0;
}

/* Shared stub-note styling used across 27.4-03 widgets */
.widget-stub-note {
  font-size: 12px;
  font-style: italic;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}
.widget-card code,
.widget-card .widget-stub-note code {
  background: var(--bg-card-hover);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--tc-primary);
  font-style: normal;
}

/* Mobile: funnel page cells tighten */
@media (max-width: 640px) {
  .widget-card {
    padding: 16px;
  }
  .funnel-table td.funnel-page-cell {
    max-width: 160px;
  }
}

/* ─── Phase 27.4-03 Task 2: Source quality table + new-vs-returning tiles ─── */
.source-quality-table-wrap {
  overflow-x: auto;
}
.source-quality-table {
  width: 100%;
  font-size: 13px;
  border-collapse: collapse;
}
.source-quality-table th {
  font-weight: 600;
  text-align: left;
  padding: 8px 12px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
  white-space: nowrap;
}
.source-quality-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
.source-quality-table tr:last-child td {
  border-bottom: 0;
}

.new-vs-returning-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.new-vs-returning-grid .kpi-tile {
  padding: 16px;
  background: var(--bg-card-hover);
  border-radius: var(--border-radius-sm);
}
.new-vs-returning-grid .kpi-tile .kpi-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
  display: block;
}
.new-vs-returning-grid .kpi-tile .kpi-value {
  font-size: 28px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  display: block;
}
.new-vs-returning-grid .kpi-tile .kpi-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

@media (max-width: 640px) {
  .new-vs-returning-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── Phase 27.4-03 Task 3: Striking-distance CTR + zero-click + stubs ─── */
.ctr-wins-list,
.zero-click-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ctr-wins-list li,
.zero-click-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.ctr-wins-list li:last-child,
.zero-click-list li:last-child {
  border-bottom: 0;
}
.zero-click-count {
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-secondary);
}

/* Honest empty-state stub copy (used by device / gsc-top-pages / gsc-aio) */
.widget-stub {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
}
.widget-stub p {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.5;
}
.widget-stub p:last-child {
  margin-bottom: 0;
}
.widget-stub code {
  background: var(--bg-card-hover);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--tc-primary);
}

/* ─── Phase 27.4-04: Delta pills + Target pills + Narrative card ─── */
/* Lives alongside Phase 27.4-01 .delta-pill-slot placeholder (which only sets
   min-height while the slot is empty). Once Utils.renderDeltaPill injects the
   `.delta-pill` span the slot visibly fills. Colors reference variables.css
   when present, literal hex otherwise — same palette pattern as the 27.3-03
   sentiment renderer. */
.delta-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-left: 8px;
  line-height: 1.5;
  vertical-align: middle;
}
.delta-pill.delta-up       { background: rgba(34, 197, 94, 0.15);  color: #22C55E; }
.delta-pill.delta-down     { background: rgba(239, 68, 68, 0.15);  color: #EF4444; }
.delta-pill.delta-neutral  { background: rgba(148, 163, 184, 0.15); color: #94A3B8; }

.target-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-left: 8px;
  line-height: 1.5;
  vertical-align: middle;
}
.target-pill.target-up       { background: rgba(34, 197, 94, 0.15);  color: #22C55E; }
.target-pill.target-neutral  { background: rgba(245, 158, 11, 0.15); color: #F59E0B; }
.target-pill.target-down     { background: rgba(239, 68, 68, 0.15);  color: #EF4444; }

/* ─── Phase 33-02: Refresh-to-refresh delta pill ─── */
/* Coexists with the MoM .delta-pill above on the same tile. The MoM pill
   answers "how does this month compare to last month?" — this pill answers
   "what changed since last week's refresh?". Smaller (11px) and muted text
   so it sits visually subordinate to the MoM pill. The "since {date}" date
   suffix is a separate span so we can dim it independently. */
.refresh-delta-slot {
  display: inline-block;
  min-height: 0;
}
.refresh-delta-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-left: 6px;
  line-height: 1.5;
  vertical-align: middle;
  /* Phase 37-01: pills must NEVER wrap. "+75% since Apr 18" was breaking
     across two lines on the Conversions row — non-negotiable per design
     principle 4 in .planning/phases/37-client-delight-redesign/README.md. */
  white-space: nowrap;
}
/* Phase 37-01: the "since {date}" suffix lives inside the pill (display:inline-flex
   above) so it can never wrap to a new line. Keeping it visually distinct via
   the date class is still allowed; gap above gives the breathing room. */
.refresh-delta-pill .refresh-delta-date {
  margin-left: 0;
  white-space: nowrap;
}
.refresh-delta-pill.delta-up      { background: rgba(34, 197, 94, 0.10);  color: #16A34A; }
.refresh-delta-pill.delta-down    { background: rgba(239, 68, 68, 0.10);  color: #DC2626; }
.refresh-delta-pill.delta-neutral { background: rgba(148, 163, 184, 0.10); color: #94A3B8; }
.refresh-delta-pill.delta-stable  {
  background: rgba(100, 116, 139, 0.10);
  color: #64748B;
  font-weight: 600;
  padding: 2px 6px;
  font-size: 10px;
  cursor: help;
}
.refresh-delta-date {
  font-size: 10px;
  color: var(--text-muted);
  /* Phase 37-01: removed margin-left — the parent .refresh-delta-pill is now
     inline-flex with gap:4px, so the spacing is handled by the flex gap.
     Keeping margin-left:0 preserves backward-compat for any standalone
     usage elsewhere (none found in current grep, but defensive). */
  margin-left: 0;
  font-weight: 400;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.refresh-delta-empty {
  display: inline-block;
  font-size: 10px;
  color: var(--text-muted);
  margin-left: 6px;
  font-style: italic;
  opacity: 0.7;
}

/* Phase 42-01: muted-date-line variant for Search Console hero rows.
   When `data-date-style="line"` is set on a `.refresh-delta-slot`, the
   helper wraps the pill in a `.refresh-delta-stack` and emits the
   "since {date}" suffix as a sibling muted line BELOW the colored pill
   instead of inline INSIDE it. Demotes the date from a competing pill
   into hierarchical context — answers the audit's "single delta language
   per metric" gap (CONTEXT.md item ❶). The non-SC tiles continue to use
   the legacy inline-date pill so hierarchy work for those rows is left
   to Plan 42-02. */
.refresh-delta-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  /* Match the legacy `.refresh-delta-pill` left-margin so spacing from
     the value digit is identical whether or not dateLine is opted-in. */
  margin-left: 6px;
}
.refresh-delta-stack .refresh-delta-pill {
  /* Stack handles the spacing — clear the default sibling margin so the
     pill sits flush-right under the value. */
  margin-left: 0;
}
.refresh-delta-date-line {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.3;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* ─── 33-02: Hero-tile pill stack on Results (GSC trio + GA4 pair) ─── */
/* On desktop the MoM pill + refresh pill sit on the same baseline. On mobile
   <=480px they stack vertically so neither truncates. */
.hero-kpi-pills {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  margin-left: 6px;
}
@media (max-width: 480px) {
  .hero-kpi-pills {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 0;
    margin-top: 4px;
    gap: 2px;
  }
  .hero-kpi-pills .delta-pill,
  .hero-kpi-pills .refresh-delta-pill {
    margin-left: 0;
  }
}

/* Results hero gauge tiles get their refresh pill below the gauge in a
   centered row so it doesn't overlap the dial. */
.hero-tile-refresh-pill {
  margin-top: 6px;
  text-align: center;
  min-height: 16px;
  font-size: 10px;
}

/* Site Audit summary block — refresh pill row sits below the 3 KPI cards. */
.audit-summary-refresh-pill {
  margin-top: 8px;
  text-align: center;
  min-height: 16px;
}

/* Local reviews tile — pills stack vertically below the review count. */
.local-review-refresh-pills {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 16px;
}
.local-review-refresh-pills .refresh-delta-pill { margin-left: 0; }

/* ─── Plan 27.4-05 (UAT-006): Competitor "you" row contrast fix ─── */
/* Pre-27.4-05 inline style was `color:var(--tc-primary)` on
   `background:var(--tc-primary-light)` — cyan-on-cyan ≈ <2:1 contrast,
   failed WCAG AA. Fix: white domain text on the subtle cyan background,
   with a left border in primary color to preserve "you" identity signal. */
.competitor-you-row {
  background: rgba(106, 171, 181, 0.12); /* slightly deeper than 0.08 for readability */
}
.competitor-you-row > td:first-of-type,
.competitor-you-row > td.competitor-expand-cell {
  border-left: 3px solid var(--tc-primary);
}
.competitor-you-row .competitor-you-domain {
  font-weight: 600;
  color: var(--text-primary);
}
.competitor-you-row .competitor-you-tag {
  font-size: 11px;
  color: var(--tc-primary);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-left: 6px;
}

/* ─── Plan 27.4-05 (UAT-005): Brand Sentiment all-neutral flat state ─── */
/* When positive + negative are both 0, the doughnut would render as a solid
   grey ring with no information. Replace with a flat explanatory pill card. */
.sentiment-flat-state {
  display: block;
  padding: 24px 20px;
  background: rgba(128, 139, 148, 0.08);
  border: 1px solid rgba(128, 139, 148, 0.2);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}
.sentiment-flat-state strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* ─── Plan 27.4-05 (DESIGN-AUDIT SRS-04): prefers-reduced-motion ───
   Honor user's OS-level reduced-motion preference. Zeroes out transitions
   + animations globally (sidebar slide, hover transitions, gauge fill,
   chart animations). Users who opt in get an instant UI, preventing
   vestibular triggers. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Plan 27.4-06 Task 2 (UAT-034): suspicious search-term badge on the Local
   tab. Muted amber so it reads as a flag, not an alert. */
.dirty-citation-badge,
.dirty-citation-badge-inline {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 4px;
  vertical-align: middle;
  cursor: help;
}
.dirty-citation-badge-inline {
  margin-left: 0;
  cursor: default;
}

/* Plan 27.4-07 Task 6 (UAT-036): Month Summary structured list. Prose blob
   broken into scannable bullets — each stat on its own line. Tight line-height
   so a 6-8 bullet list doesn't dominate the tab. */
.month-summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.month-summary-list li {
  position: relative;
  padding: 6px 0 6px 18px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.month-summary-list li:last-child {
  border-bottom: none;
}
.month-summary-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 16px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tc-primary);
}


/* ─── Phase 27.5-01: GSC live widgets ─── */

/* Top pages table on Overview */
.gsc-top-pages-table {
  display: grid;
  gap: 0;
  margin-top: 12px;
  font-size: 13px;
}
.gsc-top-pages-head,
.gsc-top-pages-row {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) 50px 64px 52px 48px;
  gap: 8px;
  padding: 8px 4px;
  align-items: center;
}
.gsc-top-pages-head {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.gsc-top-pages-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
}
.gsc-top-pages-row:last-child {
  border-bottom: none;
}
.gsc-page-path {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--text-secondary);
}

/* AIO / AI Mode search appearance grid on AI Visibility */
.aio-sa-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 12px;
}
.aio-sa-block {
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}
.aio-sa-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.aio-sa-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
  font-size: 13px;
  color: var(--text-secondary);
}
.aio-sa-stat strong {
  color: var(--text-primary);
  font-weight: 600;
}
.aio-sa-empty {
  margin-top: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.02);
  border-left: 3px solid var(--tc-primary);
  border-radius: 6px;
}
.aio-sa-empty p {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--text-secondary);
}
.aio-sa-empty p:last-child {
  margin-bottom: 0;
}

/* Phase 41-03: Em-dash placeholder cells in AIO/AI Mode 4-metric grid when
   impressions = 0. Structure stays visible; values render as muted em-dashes
   so Arnold sees what's measured even before citations land. */
.aio-sa-block-empty {
  background: rgba(255, 255, 255, 0.02);
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.12);
}
.aio-sa-empty-cell {
  color: var(--text-muted);
  font-weight: 500;
}
.aio-auto-populates-note {
  margin: 12px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 11px;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Phase 41-03: Cited-pages sister card under AIO surface. Shows which pages
   Google cited inside AI Overview answers when data lands; empty-state with
   actionable tip when 0 impressions (today + stub tenants). */
.aio-cited-pages-empty {
  margin-top: 12px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}
.aio-cited-pages-empty p {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.aio-cited-pages-empty p:last-child {
  margin-bottom: 0;
}
.aio-cited-pages-empty p strong {
  color: var(--text-primary);
}
.aio-cited-pages-tip {
  margin-top: 10px !important;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12px !important;
  color: var(--text-muted) !important;
}
.aio-cited-pages-table {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
  gap: 0;
}
.aio-cited-pages-head,
.aio-cited-pages-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr) 70px 60px;
  gap: 12px;
  padding: 8px 4px;
  align-items: center;
  font-size: 13px;
}
.aio-cited-pages-head {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.aio-cited-pages-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
}
.aio-cited-pages-row:last-child {
  border-bottom: none;
}
.aio-cited-keyword {
  color: var(--text-primary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aio-cited-page {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 640px) {
  .aio-cited-pages-head,
  .aio-cited-pages-row {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) 50px 50px;
    gap: 8px;
    font-size: 12px;
  }
  .aio-cited-page {
    font-size: 11px;
  }
}

/* Phase 41-03: Top Landing Pages quality columns
   Extends the existing .traffic-pages list into a 6-col table:
   Page | Sessions | Pageviews | Engagement | Bounce | Avg time.
   Engagement + Bounce render colored chips per quality bucket
   (strong / average / weak using existing severity tokens). The
   3 quality columns hide on mobile (≤480px) to preserve readability. */
.lp-quality-table {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.lp-quality-head,
.lp-quality-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) 80px 80px 100px 80px 90px;
  gap: 10px;
  padding: 7px 4px;
  align-items: center;
  font-size: 13px;
  border-bottom: 1px solid var(--border-color);
}
.lp-quality-head {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.lp-quality-row {
  color: var(--text-secondary);
}
.lp-quality-row:last-child {
  border-bottom: none;
}
.lp-quality-page {
  color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lp-quality-cell {
  font-variant-numeric: tabular-nums;
}
.lp-quality-chip {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid;
}
.lp-quality-chip-strong {
  background: rgba(34, 197, 94, 0.15);
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.3);
}
.lp-quality-chip-average {
  background: rgba(245, 158, 11, 0.15);
  color: #fcd34d;
  border-color: rgba(245, 158, 11, 0.3);
}
.lp-quality-chip-weak {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.3);
}
.lp-quality-empty {
  color: var(--text-muted);
  font-weight: 500;
}
@media (max-width: 480px) {
  .lp-quality-head,
  .lp-quality-row {
    grid-template-columns: minmax(0, 2fr) 60px 60px;
    gap: 8px;
    font-size: 12px;
  }
  .lp-quality-col-extra {
    display: none;
  }
}

/* Index coverage mini-cards on AI Visibility */
.index-cov-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.index-cov-card {
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}
.index-cov-verdict {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.index-cov-verdict-pass {
  background: rgba(34, 197, 94, 0.15);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.3);
}
.index-cov-verdict-fail {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.index-cov-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.index-cov-state {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.index-cov-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: var(--text-muted);
}
.sitemap-status {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.sitemap-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  padding: 6px 0;
}
.sitemap-path {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-primary);
}
.sitemap-meta {
  color: var(--text-muted);
  font-size: 11px;
}

/* Responsive */
@media (max-width: 768px) {
  .gsc-top-pages-head,
  .gsc-top-pages-row {
    grid-template-columns: minmax(0, 2fr) 50px 70px 50px 50px;
    gap: 8px;
    font-size: 12px;
  }
  .aio-sa-grid,
  .index-cov-grid {
    grid-template-columns: 1fr;
  }
  .sitemap-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

/* ─── Phase 27.5-02: Device split + traffic KPI 5-col fix (realtime strip removed in 27.7) ─── */

/* Device split donut + legend */
.device-split-grid {
  display: grid;
  grid-template-columns: minmax(120px, 160px) 1fr;
  gap: 16px;
  align-items: center;
  margin-top: 12px;
}
.device-split-chart {
  position: relative;
}
.device-split-legend {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.device-split-legend li {
  display: grid;
  grid-template-columns: 10px minmax(60px, auto) 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 13px;
}
.device-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.device-label {
  color: var(--text-primary);
  font-weight: 500;
}
.device-stat {
  color: var(--text-primary);
  font-weight: 600;
  text-align: right;
}
.device-sub {
  color: var(--text-muted);
  font-size: 11px;
  grid-column: 1 / -1;
  padding-left: 18px;
}

/* Traffic KPIs — upgrade from 4-col to auto-fit so 5 cards flow gracefully */
.traffic-kpis {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
  gap: 10px;
}

@media (max-width: 768px) {
  .device-split-grid {
    grid-template-columns: 1fr;
  }
  .device-split-chart {
    max-width: 200px;
    margin: 0 auto;
  }
}

/* ─── Phase 27.5-03: Local visibility mini-tile on Results ─── */

.results-local-mini {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 20px 0;
  padding: 14px 18px;
  background: rgba(139, 92, 246, 0.05);
  border: 1px solid rgba(139, 92, 246, 0.18);
  border-radius: 10px;
}
.local-mini-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 4px;
}
.local-mini-big {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
}
.local-mini-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.local-mini-sub {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}
.local-mini-cta-block {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 8px;
  color: #c4b5fd;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background 150ms ease;
}
.local-mini-cta-block:hover,
.local-mini-cta-block:focus-visible {
  background: rgba(139, 92, 246, 0.22);
  color: #e9d5ff;
}
.local-mini-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 6px 4px;
  font-size: 13px;
  color: var(--text-secondary);
}
.local-mini-empty .local-mini-label {
  color: var(--text-muted);
}
.local-mini-empty .local-mini-copy {
  flex: 1;
  min-width: 200px;
}
.local-mini-cta {
  color: #c4b5fd;
  text-decoration: none;
  font-weight: 500;
}
.local-mini-cta:hover,
.local-mini-cta:focus-visible {
  color: #e9d5ff;
}

@media (max-width: 960px) {
  .results-local-mini {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .results-local-mini {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ─── Phase 27.7: Freshness badge on GSC + AIO cards ─── */
.freshness-badge {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 6px;
  letter-spacing: 0.02em;
}
.freshness-badge::before {
  content: '\25CB ';
  opacity: 0.6;
  margin-right: 2px;
}

/* ─── Phase 33-03: Audit changes block (Site Audit tab) ─────────────────────
   Diff between last two audit-history.json snapshots: closed (green) + new
   (amber) lists, plus a score-delta pill + per-severity delta strip header.
   Visual language parallels existing wins/risks color palette: green for
   improvements (closed findings, equivalent to "wins") + amber for risks
   (new findings, parallel to results.json risks). Reuses --severity-* tokens
   already defined in variables.css so dark/light mode and tinting stay
   consistent with the existing finding-card list below. */

.audit-changes-section {
  /* Acts as a section wrapper — keeps spacing consistent with .section */
  margin-bottom: 32px;
}

.audit-changes-empty {
  padding: 14px 18px;
  border: 1px dashed var(--border-color);
  border-radius: var(--border-radius-sm);
  color: var(--text-muted);
  font-size: 13px;
  background: var(--bg-card);
}

.audit-changes-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.audit-changes-header .section-title {
  margin: 0;
}

.audit-changes-prevdate {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
}

.audit-changes-range-select {
  background: var(--bg-card, #1a2332);
  color: var(--text-primary, #e2e8f0);
  border: 1px solid var(--border-color, rgba(148, 163, 184, 0.2));
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  outline: none;
}
.audit-changes-range-select:hover {
  border-color: var(--tc-primary, #22d3ee);
}
.audit-changes-range-select:focus {
  border-color: var(--tc-primary, #22d3ee);
  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.2);
}

.audit-changes-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  margin-bottom: 16px;
}

.audit-changes-strip-item {
  font-size: 12px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.audit-changes-strip-item strong {
  color: var(--text-primary);
  font-weight: 600;
}

.audit-changes-strip-divider {
  width: 1px;
  height: 16px;
  background: var(--border-color);
  margin: 0 4px;
}

/* Two parallel blocks. Closed = green-left-border (wins palette), New =
   amber-left-border (risks palette). Both inherit .finding-card chrome
   for visual consistency with the list below. */

.audit-changes-block {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  border-left: 3px solid var(--border-color);
  padding: 14px 18px;
  margin-bottom: 12px;
}

.audit-changes-block-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.audit-changes-block-title .count-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(148, 163, 184, 0.15);
  color: var(--text-muted);
}

.audit-changes-closed {
  border-left-color: #22C55E;
}

.audit-changes-closed .audit-changes-block-title .count-pill {
  background: rgba(34, 197, 94, 0.15);
  color: #22C55E;
}

.audit-changes-new {
  border-left-color: var(--severity-warning);
}

.audit-changes-new .audit-changes-block-title .count-pill {
  background: var(--severity-warning-bg);
  color: var(--severity-warning);
}

.audit-changes-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--border-color);
  font-size: 13px;
  color: var(--text-primary);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.audit-changes-row:first-of-type {
  border-top: none;
}

.audit-changes-row:hover {
  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
}

.audit-changes-row .row-title {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.audit-changes-row .row-meta {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Score-delta pill — reuses .delta-pill green/red/neutral classes from
   the 27.4-04 palette so MoM and per-refresh deltas read identically. */
.audit-changes-score-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  background: rgba(148, 163, 184, 0.15);
  color: #94A3B8;
}

.audit-changes-score-pill.delta-up {
  background: rgba(34, 197, 94, 0.15);
  color: #22C55E;
}

.audit-changes-score-pill.delta-down {
  background: rgba(239, 68, 68, 0.15);
  color: #EF4444;
}

/* Mobile (≤480px): collapse the strip onto its own lines so the layout
   doesn't wrap awkwardly under a 375 viewport. The closed/new blocks
   already stack naturally (margin-bottom 12px between them). */
@media (max-width: 480px) {
  .audit-changes-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 10px 12px;
  }
  .audit-changes-strip-divider {
    display: none;
  }
}


/* ── Lighthouse breakdown pills (Phase 36 follow-up) ───────────────── */
/* Sit under the Site Health gauge on the Results hero. Three colors so
   the viewer can immediately see which sub-score is dragging the
   composite — green = ≥90, amber = 50-89, red = <50. */
.lh-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  /* Phase 37-01: pulled the breakdown closer to the gauge (was 8px) so the
     viewer's eye reads gauge → pills → footer as one connected hierarchy
     rather than three disconnected blocks. */
  margin-top: 4px;
  margin-bottom: 6px;
}

/* Phase 37-01: Site Health composite footer. The composite delta pill is
   demoted from a prominent slot to a small muted footer line — the
   Lighthouse pills above are now the headline. The "Composite" prefix
   makes it explicit this is the blended score, not a sub-score. */
.hero-site-health-footer {
  margin-top: auto;
  text-align: center;
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.4;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
  /* Override hero-tile-refresh-pill default for this slot — we want it
     small and subordinate, not a focal point. */
  min-height: 16px;
}
.hero-site-health-footer .footer-prefix {
  opacity: 0.85;
}

/* Phase 37-01: AI Visibility caption — single tight line with AI Overview
   citation count + trigger count. Replaces the wordy two-clause caption
   that cross-referenced AI Readiness (which has its own tile). */
.hero-aio-caption {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.4;
  margin-top: 8px;
  letter-spacing: 0.01em;
}
.hero-aio-caption .aio-strong {
  color: var(--text-primary);
  font-weight: 600;
}
.lh-pill {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: help;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.lh-pill.lh-good { background: rgba(34, 197, 94, 0.12);  color: #16A34A; }
.lh-pill.lh-warn { background: rgba(245, 158, 11, 0.12); color: #D97706; }
.lh-pill.lh-poor { background: rgba(239, 68, 68, 0.12);  color: #DC2626; }

/* Phase 40-04 polish: Lighthouse breakdown shown as one muted line under the
   Site Health gauge instead of 4 colored pills. Removes the visual-noise
   asymmetry vs the other 4 hero tiles (which carry no breakdown). The
   numbers are still readable; full per-score detail lives on the Site Audit
   tab. Hover surfaces the same string as a native tooltip. */
.lh-breakdown-line {
  text-align: center;
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  cursor: help;
  margin-top: 4px;
  line-height: 1.4;
}

/* Phase 40-04 polish: dedupe "since {date}" repetition within one hero
   tile. The Phase 27.4 MoM `.delta-pill-slot` is no longer rendered into
   hero tiles (renderResultsHero) — only the Phase 33 refresh-delta pill
   remains, so each row shows ONE pill carrying its own date. The earlier
   nth-of-type rule that hid the date on rows 2+ has been removed because
   it left "+9%" with no comparison context. */

/* Phase 40-04 polish: kanban add-card affordance ──────────────────────── */
.tasks-column-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: transparent;
  border: 1px dashed var(--border-color);
  color: var(--text-muted);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  margin-left: 8px;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.tasks-column-add:hover {
  background: rgba(168, 85, 247, 0.12);
  border-color: rgba(168, 85, 247, 0.5);
  border-style: solid;
  color: #c084fc;
}
.tasks-column-add-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: var(--bg-surface, #111);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-bottom: 8px;
}
.tasks-column-add-form input {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
  color: var(--text-primary);
  font-family: inherit;
}
.tasks-column-add-form input:focus {
  outline: none;
  border-color: rgba(168, 85, 247, 0.55);
}
.tasks-column-add-form-hint {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* Phase 40-04 polish: clickable source URL on Tasks cards (when source
   record carries url / reportLink / pageUrl). Matches the muted-link
   pattern used by `.local-mini-cta-block` elsewhere. */
.tasks-card-source-link {
  font-size: 11px;
  color: var(--tc-primary, #a855f7);
  text-decoration: none;
  margin-top: 4px;
  display: inline-block;
  word-break: break-all;
  overflow-wrap: anywhere;
}
.tasks-card-source-link:hover {
  text-decoration: underline;
}

/* Phase 55-01: Move → status button on task cards */
.tasks-card-move-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-family: inherit;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.tasks-card-move-btn:hover {
  background: rgba(168, 85, 247, 0.08);
  border-color: rgba(168, 85, 247, 0.4);
  color: #c084fc;
}

/* ───────────────────────────────────────────────────────────────────────── */
/* Phase 37-02: Top Wins hero strip                                         */
/* ───────────────────────────────────────────────────────────────────────── */
/* 3-cell strip ABOVE Performance Overview on the Results tab. Big-font     */
/* movement numbers, named context, clickable cells that scroll/highlight   */
/* the corresponding hero tile below. Per Phase 37 README design principle  */
/* 6: "A 'Top wins' strip above the cards so the eye lands on real          */
/* movement first, then sees details below." Cells use a card-style block   */
/* matching the Performance Overview tile aesthetic — not pills.            */

.top-wins-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.top-win-cell {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 110px;
  padding: 20px 22px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: transform var(--transition-fast),
              box-shadow var(--transition-fast),
              border-color var(--transition-fast);
  /* The whole cell is the click target — make sure it announces that. */
  outline: none;
}
.top-win-cell:hover,
.top-win-cell:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  border-color: var(--border-color-hover);
}
.top-win-cell:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.top-win-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.top-win-value {
  /* The headline — big, bold, the eye lands here. */
  font-size: 36px;
  font-weight: 700;
  line-height: 1.05;
  color: var(--text-primary);
  margin: 6px 0 4px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.top-win-date {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  opacity: 0.85;
}

/* ─── Variant: positive movement (green tint) ─── */
.top-win-cell.win-positive {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.22);
}
.top-win-cell.win-positive .top-win-value {
  color: #16A34A;
}
.top-win-cell.win-positive:hover,
.top-win-cell.win-positive:focus-visible {
  border-color: rgba(34, 197, 94, 0.45);
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.18);
}

/* ─── Variant: "new" entries (previous=0, current>0) ─── */
.top-win-cell.win-new {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.32);
}
.top-win-cell.win-new .top-win-value {
  color: #16A34A;
}
.top-win-cell.win-new .top-win-label::after {
  content: ' · NEW';
  color: #16A34A;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.top-win-cell.win-new:hover,
.top-win-cell.win-new:focus-visible {
  border-color: rgba(34, 197, 94, 0.55);
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.22);
}

/* ─── Variant: stable / "holding strong" fallback ─── */
.top-win-cell.win-stable {
  background: var(--bg-card);
  border-color: var(--border-color);
}
.top-win-cell.win-stable .top-win-value {
  color: var(--text-primary);
}

/* ─── Empty state (refresh-history has <2 entries) ─── */
.top-wins-strip-empty {
  padding: 18px 22px;
  background: var(--bg-card);
  border: 1px dashed var(--border-color);
  border-radius: var(--border-radius);
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
  text-align: center;
  margin-bottom: 24px;
}

/* ─── Click-target highlight ring (briefly applied to the destination tile) ─── */
.top-win-target-glow {
  /* Outline rather than box-shadow so it doesn't displace adjacent elements
     in the .results-hero-grid (1fr columns are layout-sensitive to shadow). */
  outline: 2px solid #16A34A;
  outline-offset: 4px;
  transition: outline-color 1.6s ease-out, outline-offset 1.6s ease-out;
}

/* ─── Responsive ─── */
@media (max-width: 960px) {
  .top-wins-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .top-win-value {
    font-size: 32px;
  }
}
@media (max-width: 480px) {
  .top-wins-strip {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 20px;
  }
  .top-win-cell {
    min-height: 96px;
    padding: 16px 18px;
  }
  .top-win-value {
    font-size: 30px;
  }
}


/* ─── Phase 40-02: Activity feed ────────────────────────────────────────
   Single chronological feed replacing the old multi-section Work tab body.
   Three event types: shipped (📦, severity-pass tone), reported (📝,
   severity-notice tone), fixed (🔧, severity-warning tone — reserved for
   future use). Mirrors the .audit-changes-* visual language from Phase
   33-03 so the dashboard reads consistently. Uses --severity-* tokens
   from variables.css — no new colors introduced.

   Mobile constraint (≤480 / 375px): cap visible events at 8, collapse
   summary into <details>, reduce padding. Goal: entire #tab-work body
   fits in <2.5 viewport-heights at 375px (per CONTEXT.md gate #5). */

.activity-feed {
  display: block;
  margin-top: 8px;
}

.activity-empty {
  padding: 24px 18px;
  border: 1px dashed var(--border-color);
  border-radius: var(--border-radius-sm);
  color: var(--text-muted);
  font-size: 13px;
  background: var(--bg-card);
  text-align: center;
}

.activity-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.activity-header-titleblock {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.activity-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.activity-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}

.activity-count {
  color: var(--text-primary);
  font-weight: 600;
}

.activity-list,
.activity-overflow {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
}

.activity-overflow {
  margin-top: -1px; /* visually merge into the list above when revealed */
  border-top: none;
  border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
}

.activity-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-color);
  font-size: 13px;
  color: var(--text-primary);
}

.activity-row:first-child {
  border-top: none;
}

.activity-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px 4px 6px;
  border-radius: 12px;
  background: rgba(148, 163, 184, 0.12);
  color: var(--text-muted);
  line-height: 1.2;
  white-space: nowrap;
}

.activity-badge-icon {
  font-size: 12px;
  line-height: 1;
}

.activity-badge-shipped {
  background: var(--severity-pass-bg);
  color: var(--severity-pass);
}

.activity-badge-reported {
  background: var(--severity-notice-bg);
  color: var(--severity-notice);
}

.activity-badge-fixed {
  background: var(--severity-warning-bg);
  color: var(--severity-warning);
}

.activity-body {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}

.activity-row-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}

/* Phase 55-01: Activity tab report link */
/* finding-tasks-pill: shows kanban column status on audit finding cards */
.finding-tasks-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 10px;
  border: 1px solid transparent;
  vertical-align: middle;
  margin-right: 4px;
}
.finding-tasks-pill-todo {
  background: rgba(148, 163, 184, 0.12);
  color: var(--text-muted);
  border-color: rgba(148, 163, 184, 0.25);
}
.finding-tasks-pill-in-progress {
  background: rgba(251, 191, 36, 0.12);
  color: #f59e0b;
  border-color: rgba(251, 191, 36, 0.3);
}
.finding-tasks-pill-blocked {
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.25);
}
.finding-tasks-pill-done {
  background: rgba(34, 197, 94, 0.1);
  color: #4ade80;
  border-color: rgba(34, 197, 94, 0.25);
}

.activity-summary-details {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  min-width: 0;
  /* Width: 100% would push min-content. Instead let the natural block
     fill the parent without forcing it. */
}

.activity-summary-details > summary {
  list-style: none;
  cursor: pointer;
  /* Single-line truncation via -webkit-line-clamp + word-break — does NOT
     push parent's min-content size (unlike white-space:nowrap which does).
     Desktop sees ~1 line; tap to expand reveals the full text. */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.activity-summary-details > summary::-webkit-details-marker {
  display: none;
}

.activity-summary-details[open] > summary {
  -webkit-line-clamp: unset;
  display: block;
}

.activity-summary-full {
  margin: 4px 0 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

.activity-date {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  align-self: flex-start;
  padding-top: 2px;
}

.activity-show-more {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.activity-show-more:hover {
  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
  border-color: var(--border-color-hover);
}

/* Mobile (≤480px / 375 viewport): tighter rows, summary fully hidden until
   tap, label text on badges hidden (icon-only) so the row fits the
   <2.5vh budget. */
@media (max-width: 480px) {
  .activity-row {
    padding: 8px 12px;
    gap: 8px;
  }
  .activity-badge {
    padding: 3px 6px;
  }
  .activity-badge-label {
    display: none;
  }
  .activity-row-title {
    font-size: 12.5px;
  }
  .activity-summary-details > summary {
    /* Default-collapsed; user taps to expand. */
    font-size: 11.5px;
  }
  .activity-date {
    font-size: 10.5px;
  }
}


/* ─── Phase 40-03: Tasks tab (kanban board) ─────────────────────────────
   4-column kanban (To-Do / In-Progress / Blocked / Done) replacing the
   old Action Plans render. Each card carries an inline Owner column +
   Source badge. Drag-drop persists server-side via the assignments-*
   Netlify functions.

   Mobile constraint (≤480px / 375 viewport): columns stack vertically as
   collapsible <details> blocks. To-Do open by default, others collapsed
   so the tab body fits inside <2.5 viewport-heights at 375px (CONTEXT.md
   gate #5). Uses native <details>/<summary> — no JS toggle required. */

.tasks-board {
  display: block;
  margin-top: 8px;
}

.tasks-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.tasks-header-titleblock {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tasks-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.tasks-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}

.tasks-count {
  color: var(--text-primary);
  font-weight: 600;
}

.tasks-columns {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

@media (max-width: 1400px) {
  .tasks-columns {
    grid-template-columns: repeat(5, minmax(220px, 1fr));
    overflow-x: auto;
  }
}

.tasks-column {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
  min-width: 0;
}

.tasks-column-header {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
  border-bottom: 1px solid var(--border-color);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  user-select: none;
}

.tasks-column-header::-webkit-details-marker {
  display: none;
}

.tasks-column[open] .tasks-column-header {
  border-bottom: 1px solid var(--border-color);
}

.tasks-column-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tasks-column-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--text-primary) 8%, transparent);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
}

.tasks-column-body {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 60px;
}

.tasks-column-empty {
  padding: 16px 8px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
  border: 1px dashed var(--border-color);
  border-radius: var(--border-radius-sm);
}

.tasks-card {
  background: var(--bg-page, var(--bg-card));
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 10px 12px;
  cursor: grab;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
              border-color var(--transition-fast);
}

.tasks-card:hover {
  border-color: var(--border-color-hover);
}

.tasks-card-dragging {
  opacity: 0.4;
  cursor: grabbing;
}

.tasks-dropzone-active {
  background: color-mix(in srgb, var(--tc-primary) 6%, transparent);
  outline: 2px dashed var(--tc-primary);
  outline-offset: -4px;
}

.tasks-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 6px;
}

.tasks-card-source {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(148, 163, 184, 0.12);
  color: var(--text-muted);
}

.tasks-card-source-audit-finding {
  background: var(--severity-warning-bg);
  color: var(--severity-warning);
}

.tasks-card-source-upcoming-phase {
  background: var(--severity-notice-bg);
  color: var(--severity-notice);
}

.tasks-card-source-manual {
  background: rgba(148, 163, 184, 0.16);
  color: var(--text-muted);
}

.tasks-card-source-gbp-action {
  background: var(--severity-pass-bg);
  color: var(--severity-pass);
}

.tasks-card-source-website-action {
  background: color-mix(in srgb, var(--tc-primary) 14%, transparent);
  color: var(--tc-primary);
}

.tasks-card-owner {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.tasks-card-owner-set {
  background: var(--tc-primary);
  color: #fff;
  border-color: var(--tc-primary);
}

.tasks-card-owner:hover {
  border-color: var(--border-color-hover);
}

.tasks-card-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.4;
  word-break: break-word;
  overflow-wrap: anywhere;
  margin: 0;
}

.tasks-card-notes {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
}

.tasks-card-notes > summary {
  cursor: pointer;
  list-style: none;
  font-size: 11px;
  color: var(--text-muted);
  user-select: none;
}

.tasks-card-notes > summary::-webkit-details-marker {
  display: none;
}

.tasks-card-notes-body {
  margin-top: 4px;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* ─── Phase 59-00 v2: client sign-off (column-based) + comments ─── */

/* Awaiting Approval column gets a subtle amber accent so it stands out
   between To-Do and In Progress without competing for attention. */
.tasks-column[data-column-id="awaiting-approval"] > summary {
  border-left: 3px solid #f59e0b;
}

/* Approved cards: green left border + green ✓ Approved badge above the
   title. Visible from the column overview so "is this client-approved
   work?" is answerable at a glance without expanding any disclosure. */
.tasks-card-approved {
  border-left: 3px solid #22c55e;
}
.tasks-approved-badge {
  display: inline-block;
  background: rgba(34, 197, 94, 0.18);
  color: #22c55e;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  margin: 6px 0 4px 0;
  letter-spacing: 0.01em;
}

/* View-full-plan button on cards with a formal "## Execution plan" in
   their notes. Sized like a primary action so it draws the eye without
   competing with the Move button. */
.tasks-view-plan-btn {
  display: block;
  width: 100%;
  text-align: left;
  margin: 8px 0 4px 0;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
  background: rgba(99, 102, 241, 0.08);
  color: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.tasks-view-plan-btn:hover {
  background: rgba(99, 102, 241, 0.18);
  border-color: #6366f1;
}

/* Full-screen plan modal — readable layout for the "## Execution plan"
   contents with rendered markdown. Wider than the comment modal so the
   numbered lists and headings have breathing room. */
.tasks-plan-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.78);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 16px;
  overflow-y: auto;
}
body.tasks-plan-modal-open { overflow: hidden; }

.tasks-plan-modal-card {
  background: var(--bg-card, #1a1a1a);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  width: 100%;
  max-width: 760px;
  padding: 0;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 64px);
}
.tasks-plan-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.tasks-plan-modal-header h2 {
  flex: 1;
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
}
.tasks-plan-modal-close {
  background: transparent;
  border: none;
  color: var(--text-muted, #a3a3a3);
  font-size: 22px;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
}
.tasks-plan-modal-close:hover { background: rgba(255, 255, 255, 0.08); color: inherit; }
.tasks-plan-modal-approved {
  margin: 12px 24px 0;
}
.tasks-plan-modal-body {
  padding: 16px 24px 24px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.65;
  flex: 1;
}
.tasks-plan-modal-body h3.tasks-plan-h {
  margin: 24px 0 8px 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent, #14b8a6);
  letter-spacing: 0.01em;
}
.tasks-plan-modal-body h4.tasks-plan-h {
  margin: 18px 0 6px 0;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #a3a3a3);
}
.tasks-plan-modal-body p {
  margin: 0 0 12px 0;
}
.tasks-plan-modal-body ol.tasks-plan-list,
.tasks-plan-modal-body ul.tasks-plan-list {
  margin: 8px 0 16px 0;
  padding-left: 24px;
}
.tasks-plan-modal-body ol.tasks-plan-list li,
.tasks-plan-modal-body ul.tasks-plan-list li {
  margin-bottom: 6px;
}
.tasks-plan-modal-body hr {
  margin: 20px 0;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.tasks-plan-modal-body strong { color: inherit; font-weight: 700; }
.tasks-plan-modal-comments {
  padding: 0 24px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.tasks-plan-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
.tasks-plan-modal-footer button {
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.tasks-plan-modal-footer .tasks-comment-btn:hover {
  background: rgba(99, 102, 241, 0.15); border-color: #6366f1;
}
.tasks-plan-modal-approve {
  background: rgba(34, 197, 94, 0.18) !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
  color: #22c55e !important;
  font-weight: 600;
  margin-right: auto;
}
.tasks-plan-modal-approve:hover {
  background: rgba(34, 197, 94, 0.32) !important;
  border-color: #22c55e !important;
}
.tasks-plan-modal-changes {
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
  color: #ef4444 !important;
  font-weight: 500;
}
.tasks-plan-modal-changes:hover {
  background: rgba(239, 68, 68, 0.22) !important;
  border-color: #ef4444 !important;
}
.tasks-plan-modal-undo {
  background: rgba(245, 158, 11, 0.14) !important;
  border-color: rgba(245, 158, 11, 0.4) !important;
  color: #f59e0b !important;
  font-weight: 500;
  margin-right: auto;
}
.tasks-plan-modal-undo:hover {
  background: rgba(245, 158, 11, 0.26) !important;
  border-color: #f59e0b !important;
}
@media (max-width: 600px) {
  .tasks-plan-modal { padding: 8px; }
  .tasks-plan-modal-card { max-height: calc(100vh - 16px); }
  .tasks-plan-modal-header { padding: 14px 16px 10px; }
  .tasks-plan-modal-body { padding: 12px 16px 16px; }
  .tasks-plan-modal-footer { padding: 12px 16px; }
  .tasks-plan-modal-footer button { min-height: 44px; }
}

.tasks-approval-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.tasks-approval-actions button {
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  font-size: 11.5px;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.tasks-approve-btn:hover { background: rgba(34, 197, 94, 0.15);  border-color: #22c55e; }
.tasks-changes-btn:hover { background: rgba(239, 68, 68, 0.15);  border-color: #ef4444; }
.tasks-comment-btn:hover { background: rgba(99, 102, 241, 0.15); border-color: #6366f1; }

.tasks-comment-thread {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.tasks-comment-row { padding: 8px 0; }
.tasks-comment-row + .tasks-comment-row {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.tasks-comment-meta {
  display: flex;
  gap: 8px;
  font-size: 10.5px;
  opacity: 0.75;
  margin-bottom: 2px;
}
.tasks-comment-by { font-weight: 600; }
.tasks-comment-text {
  font-size: 12px;
  white-space: pre-wrap;
  line-height: 1.45;
}
.tasks-comment-kind-changes-requested .tasks-comment-text { color: #ef4444; }

.tasks-comment-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.tasks-comment-modal-card {
  background: var(--bg-card, #1a1a1a);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  padding: 24px;
  min-width: 320px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.tasks-comment-modal-card h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
}
.tasks-comment-modal-card p {
  margin: 0 0 12px 0;
  font-size: 13px;
  opacity: 0.85;
}
.tasks-comment-modal-card textarea {
  width: 100%;
  min-height: 100px;
  padding: 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
  color: inherit;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
  font: inherit;
  resize: vertical;
  box-sizing: border-box;
}
.tasks-comment-modal-card .tasks-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
  flex-wrap: wrap;
}
.tasks-comment-modal-card .tasks-modal-actions button {
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.tasks-comment-modal-card [data-tc-modal-submit],
.tasks-comment-modal-card [data-pick] {
  background: var(--accent, #14b8a6);
  border-color: var(--accent, #14b8a6);
  color: #000;
  font-weight: 600;
}

@media (max-width: 600px) {
  .tasks-approval-actions button { min-height: 44px; min-width: 44px; }
  .tasks-comment-modal-card .tasks-modal-actions button { min-height: 44px; }
}

.tasks-owner-popover {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 6px;
}

.tasks-owner-select {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
  color: var(--text-primary);
  min-width: 180px;
}

.tasks-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 8px);
  background: var(--severity-warning, #f59e0b);
  color: #1a1a1a;
  padding: 10px 16px;
  border-radius: var(--border-radius-sm);
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 10000;
}

.tasks-toast-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ─── Phase 40.5: traffic-light status indicator + capture button ───
   Reusable across every "capturable row" surface. Tokens reuse the
   existing --severity-* palette + --text-muted; no new color variables.
   Palette is intentionally expandable — add tc-status-light-{state}
   classes here as new states emerge (e.g. blocked-on-dependency, parked). */
.tc-status-light {
  display: inline-block;
  width: 10px;
  height: 10px;
  line-height: 10px;
  font-size: 0;
  border-radius: 50%;
  margin-right: 6px;
  cursor: pointer;
  vertical-align: middle;
  transition: transform 120ms ease;
  border: 1px solid transparent;
}
.tc-status-light:hover {
  transform: scale(1.25);
}
.tc-status-light:focus-visible {
  outline: 2px solid var(--tc-primary);
  outline-offset: 2px;
}
.tc-status-light-done {
  background: var(--severity-pass);
  box-shadow: 0 0 0 2px var(--severity-pass-bg);
}
.tc-status-light-active {
  background: var(--severity-warning);
  box-shadow: 0 0 0 2px var(--severity-warning-bg);
}
.tc-status-light-blocked {
  background: var(--severity-critical);
  box-shadow: 0 0 0 2px var(--severity-critical-bg);
}
.tc-status-light-untracked {
  background: var(--text-muted);
  opacity: 0.5;
}

.tc-capture-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 6px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.tc-capture-btn:hover {
  background: var(--tc-primary-glow);
  color: var(--tc-primary);
  border-color: var(--tc-primary);
}
.tc-capture-btn:focus-visible {
  outline: 2px solid var(--tc-primary);
  outline-offset: 2px;
}
.tc-capture-btn:disabled {
  opacity: 0.4;
  cursor: wait;
}

/* ─── Phase 40.5-04: row highlight on chip-return ───
   Brief yellow flash (~1.5s) when the captured-context chip on a Tasks
   card scrolls back to the source row. Reuses the existing severity-
   warning yellow tokens for color so no new palette entries are added. */
@keyframes tc-row-highlight-fade {
  0%   { background-color: var(--severity-warning-bg); box-shadow: 0 0 0 2px var(--severity-warning); }
  60%  { background-color: var(--severity-warning-bg); box-shadow: 0 0 0 2px var(--severity-warning); }
  100% { background-color: transparent; box-shadow: 0 0 0 0 transparent; }
}
.tc-row-highlight {
  animation: tc-row-highlight-fade 1500ms ease-out;
  border-radius: 8px;
}

/* ─── Phase 40.5-03: Side-panel drawer ───
   Stay-in-flow drawer. Slides in from the right when a status-light is
   clicked on any capturable surface. Backdrop dims (but doesn't blur) the
   underlying tab. Close paths: X button, ESC key, backdrop click.
   No new color tokens — reuses --bg-card / --border-color / --text-* /
   --tc-primary. */
.tc-side-panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 900;
  pointer-events: auto;
}
.tc-side-panel-backdrop[hidden] {
  display: none;
}
.tc-side-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(420px, 100vw);
  background: var(--bg-card);
  border-left: 1px solid var(--border-color);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.35);
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 200ms ease;
  display: flex;
  flex-direction: column;
}
.tc-side-panel[hidden] {
  display: none;
}
.tc-side-panel.is-open {
  transform: translateX(0);
}
.tc-side-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.tc-side-panel-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tc-side-panel-close {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 28px;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, color 120ms ease;
}
.tc-side-panel-close:hover {
  background: color-mix(in srgb, var(--text-primary) 8%, transparent);
  color: var(--text-primary);
}
.tc-side-panel-close:focus-visible {
  outline: 2px solid var(--tc-primary);
  outline-offset: 2px;
}
.tc-side-panel-body {
  overflow-y: auto;
  padding: 16px;
  flex: 1;
}
.tc-side-panel-card-h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 12px 0;
  line-height: 1.35;
}
.tc-side-panel-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--text-muted);
}
.tc-side-panel-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 500;
}
.tc-side-panel-due {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.tc-side-panel-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tc-primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--tc-primary) 28%, transparent);
  color: var(--tc-primary);
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 14px;
}
.tc-side-panel-notes-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.tc-side-panel-notes {
  width: 100%;
  min-height: 80px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  margin-bottom: 14px;
}
.tc-side-panel-open-link {
  display: inline-block;
  font-size: 13px;
  color: var(--tc-primary);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--tc-primary) 32%, transparent);
  padding: 6px 12px;
  border-radius: 6px;
  transition: background 120ms ease;
}
.tc-side-panel-open-link:hover {
  background: color-mix(in srgb, var(--tc-primary) 10%, transparent);
}

/* ─── Phase 57-07: Delete / Dismiss action button in side panel ───
   Manual cards get "Delete task" (true server-side delete via
   _apiDeleteAssignment). Auto-ingested cards (audit-finding-*,
   upcoming-phase-*) get "Dismiss from board" (per-tenant hide-list, since
   re-ingestion runs every renderTasks). Both are visually identical —
   neutral resting state, desaturated red on hover so the card doesn't
   shout while open passively. */
.tc-side-panel-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
}

/* Phase 57-07 polish: inline "×" delete/dismiss button on every task card.
   Sits next to the owner button in the card header so the action is visible
   without opening the side panel. Wires through the same data-tc-card-action
   delegated handler. */
.tasks-card-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.tasks-card-action-btn {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted, #8b95a3);
  width: 22px;
  height: 22px;
  border-radius: 4px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.tasks-card-action-btn:hover {
  background: color-mix(in srgb, #c0392b 14%, transparent);
  border-color: color-mix(in srgb, #c0392b 38%, transparent);
  color: #c0392b;
}
.tasks-card-action-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, #c0392b 50%, transparent);
  outline-offset: 1px;
}

.tc-side-panel-delete,
.tc-side-panel-dismiss {
  appearance: none;
  -webkit-appearance: none;
  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.tc-side-panel-delete:hover,
.tc-side-panel-dismiss:hover {
  background: color-mix(in srgb, #c0392b 14%, transparent);
  border-color: color-mix(in srgb, #c0392b 38%, transparent);
  color: #c0392b;
}
.tc-side-panel-delete:focus-visible,
.tc-side-panel-dismiss:focus-visible {
  outline: 2px solid color-mix(in srgb, #c0392b 50%, transparent);
  outline-offset: 2px;
}
.tc-side-panel-delete:disabled,
.tc-side-panel-dismiss:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (max-width: 480px) {
  .tc-side-panel {
    width: 100vw;
  }
}

/* ─── Phase 57-03: Task creation side panel ───
   Full slide-in form for creating new task cards. Mirrors the
   tc-side-panel structural pattern (slide from right, dim backdrop,
   ESC/X/backdrop close paths) but lives as its own element so it never
   conflicts with the card detail drawer. Reuses existing tokens —
   --bg-card, --border-color, --text-*, --tc-primary. */
.tc-create-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 900;
  pointer-events: auto;
}
.tc-create-backdrop[hidden] {
  display: none;
}
.tc-create-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(420px, 100vw);
  background: var(--bg-card);
  border-left: 1px solid var(--border-color);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.35);
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 200ms ease;
  display: flex;
  flex-direction: column;
}
.tc-create-panel[hidden] {
  display: none;
}
.tc-create-panel.is-open {
  transform: translateX(0);
}
.tc-create-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.tc-create-panel-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tc-create-panel-close {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 28px;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, color 120ms ease;
}
.tc-create-panel-close:hover {
  background: color-mix(in srgb, var(--text-primary) 8%, transparent);
  color: var(--text-primary);
}
.tc-create-panel-close:focus-visible {
  outline: 2px solid var(--tc-primary);
  outline-offset: 2px;
}
.tc-create-panel-body {
  overflow-y: auto;
  padding: 20px;
  flex: 1;
}
.tc-create-form {
  display: block;
}
.tc-create-field {
  margin-bottom: 18px;
}
.tc-create-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.tc-create-optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.75;
  margin-left: 4px;
}
.tc-create-input,
.tc-create-select,
.tc-create-textarea {
  width: 100%;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
}
/* Native <option> elements inherit OS-default styling on most browsers
   (white-on-white when the page is dark). Force the dropdown menu items
   to render against the dashboard's surface tone with primary text. */
.tc-create-select option {
  background: #1A2940;
  color: var(--text-primary, #E8EEF5);
}
.tc-create-input:focus,
.tc-create-select:focus,
.tc-create-textarea:focus {
  outline: 2px solid var(--tc-primary);
  outline-offset: 1px;
  border-color: color-mix(in srgb, var(--tc-primary) 50%, var(--border-color));
}
.tc-create-textarea {
  min-height: 90px;
  resize: vertical;
}
.tc-create-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.tc-create-btn-save {
  flex: 1;
}
.tc-create-btn-cancel {
  flex: 1;
  appearance: none;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.tc-create-btn-cancel:hover {
  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--text-primary) 20%, var(--border-color));
}
.tc-create-btn-cancel:focus-visible {
  outline: 2px solid var(--tc-primary);
  outline-offset: 2px;
}
@media (max-width: 480px) {
  .tc-create-panel {
    width: 100vw;
  }
}

/* ─── Phase 57-06: Floating "+ Task" FAB ───
   Fixed bottom-right; visible on every tab so a task can be created from
   anywhere. Sits above content but below the create-panel backdrop
   (z-index 900) so when the panel opens we can fade/hide the FAB to avoid
   a double-+ UI (.is-panel-open). Circular, accent-colored, gentle hover
   lift to signal interactivity without shouting. */
.tc-create-fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 0;
  background: var(--tc-primary, #6AABB5);
  color: #fff;
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28), 0 2px 4px rgba(0, 0, 0, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 850;
  transition: transform 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
}
.tc-create-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.34), 0 3px 6px rgba(0, 0, 0, 0.20);
}
.tc-create-fab:focus-visible {
  outline: 2px solid var(--tc-primary, #6AABB5);
  outline-offset: 3px;
}
body.is-panel-open .tc-create-fab {
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 640px) {
  .tc-create-fab {
    width: 48px;
    height: 48px;
    bottom: 20px;
    right: 20px;
    font-size: 24px;
  }
}

/* ─── Phase 57-06: Contextual ".tc-add-task" inline buttons ───
   Small "+ Task" controls appended to rows in Keywords + Competitors
   tables, audit findings, and Insight cards. Resting state stays muted
   so the row reads first; hover lifts the contrast. Used with delegated
   click handler keyed on [data-tc-add-task]. */
.tc-add-task {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--text-primary) 5%, transparent);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.tc-add-task:hover {
  background: color-mix(in srgb, var(--tc-primary, #6AABB5) 14%, transparent);
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--tc-primary, #6AABB5) 40%, var(--border-color));
}
.tc-add-task:focus-visible {
  outline: 2px solid var(--tc-primary, #6AABB5);
  outline-offset: 2px;
}
.tc-add-task .tc-add-task-icon {
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
}
/* Trailing-cell variant in tables (no border, just a hover-revealed pill). */
td.tc-add-task-cell {
  text-align: right;
  white-space: nowrap;
  width: 1%;
}

/* ─── Phase 40.5-02: Tasks view toggle (Kanban / Week) ───
   Segmented-control look. Active button uses --tc-primary; inactive button
   stays muted. No new tokens. */
.tasks-view-toggle {
  display: inline-flex;
  align-items: center;
  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 2px;
  gap: 0;
}
.tasks-view-toggle-btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px;
  transition: background 120ms ease, color 120ms ease;
}
.tasks-view-toggle-btn:hover {
  color: var(--text-primary);
}
.tasks-view-toggle-btn.active {
  background: var(--tc-primary);
  color: #fff;
}
.tasks-view-toggle-btn:focus-visible {
  outline: 2px solid var(--tc-primary);
  outline-offset: 2px;
}

/* ─── Phase 40.5-02: Week-view buckets ─── */
.tasks-week {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tasks-week-bucket {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 12px 14px;
}
.tasks-week-bucket-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.tasks-week-bucket-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--text-primary) 8%, transparent);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
}
.tasks-week-bucket-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.tasks-week-bucket-empty {
  padding: 14px 8px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
  border: 1px dashed var(--border-color);
  border-radius: var(--border-radius-sm);
  grid-column: 1 / -1;
}

/* ─── Phase 40.5-02: Recent-shipped strip on Tasks tab ───
   Single horizontal strip at the top, above the toggle. One-line stubs for
   the most recent 7 shipped items + a link to the full Activity tab. Empty
   state still renders the section so structure stays consistent. */
.tasks-recent-strip {
  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 10px 14px;
  margin-bottom: 14px;
}
.tasks-recent-strip-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.tasks-recent-strip-title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.tasks-recent-strip-more {
  font-size: 12px;
  color: var(--tc-primary);
  text-decoration: none;
}
.tasks-recent-strip-more:hover {
  text-decoration: underline;
}
.tasks-recent-strip-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tasks-recent-strip-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 12.5px;
  line-height: 1.4;
}
.tasks-recent-strip-when {
  flex-shrink: 0;
  width: 70px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.tasks-recent-strip-title {
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tasks-recent-strip-empty {
  margin: 4px 0 0 0;
  font-size: 12.5px;
  color: var(--text-muted);
  font-style: italic;
}

/* ─── Phase 40.5-02: Captured-from-context chip on Tasks cards ─── */
.tasks-card-context-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  margin: 4px 0 0 0;
  padding: 2px 8px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.tasks-card-context-chip:hover {
  background: color-mix(in srgb, var(--text-primary) 9%, transparent);
  color: var(--text-primary);
  border-color: var(--border-color-hover);
}
.tasks-card-context-chip:focus-visible {
  outline: 2px solid var(--tc-primary);
  outline-offset: 2px;
}

/* Mobile (≤480px / 375 viewport): stack columns vertically as collapsibles.
   To-Do open by default (set via <details open> in markup); In-Progress,
   Blocked, Done collapse to header-only by default so the page fits within
   <2.5 viewport-heights. Each header is the toggle. */
@media (max-width: 480px) {
  .tasks-columns {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .tasks-column-header {
    padding: 10px 12px;
    font-size: 13px;
  }
  .tasks-column-body {
    padding: 6px;
  }
  .tasks-card {
    padding: 8px 10px;
  }
  .tasks-card-title {
    font-size: 12.5px;
  }
  .tasks-card-source {
    font-size: 10px;
  }
  /* Hide source label-text on the very tightest viewports if needed; keep
     for now to preserve readability. */

  /* Phase 40.5-02: Week-view + recent-shipped strip on mobile. */
  .tasks-week-bucket-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .tasks-week-bucket {
    padding: 10px 12px;
  }
  .tasks-recent-strip {
    padding: 8px 12px;
  }
  .tasks-recent-strip-when {
    width: 60px;
  }
  .tasks-view-toggle-btn {
    padding: 5px 10px;
    font-size: 12px;
  }
}

/* ─── Phase 41-01: GSC Daily Trend chart (Insights tab) ─────────────────── */
.gsc-daily-trend-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 20px;
  margin: 24px 0;
}
.gsc-daily-trend-card .widget-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px;
}
.gsc-daily-trend-card .widget-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 16px;
}
.gsc-daily-trend-canvas-wrap {
  position: relative;
  height: 320px;
}
.gsc-daily-trend-empty {
  text-align: center;
  padding: 36px 20px;
  color: var(--text-secondary, var(--text-primary));
  font-size: 13px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed var(--border-color, rgba(255,255,255,0.12));
  border-radius: 6px;
}
.gsc-daily-trend-card .freshness-badge {
  display: inline-block;
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-muted);
}

/* ─── Phase 41-01: UTM hygiene alert (Overview Audience subpanel) ───────── */
.utm-hygiene-alert {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border-left: 4px solid var(--severity-warning);
  background: var(--severity-warning-bg);
  border-radius: 6px;
  padding: 16px 18px;
  max-width: 720px;
  margin: 0 0 20px;
}
.utm-hygiene-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  color: var(--severity-warning);
}
.utm-hygiene-body { flex: 1; min-width: 0; }
.utm-hygiene-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--severity-warning);
  margin: 0 0 6px;
}
.utm-hygiene-text {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.5;
  margin: 0 0 8px;
}
.utm-hygiene-text a {
  color: var(--text-primary);
  text-decoration: underline;
}
.utm-hygiene-footer {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0;
}

/* ─── Phase 41-01: Index coverage summary header (AI Visibility tab) ───── */
.index-cov-summary {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
}
.index-cov-summary-stat {
  font-weight: 600;
  color: var(--text-primary);
}
.index-cov-summary-stat.pass { color: var(--severity-pass, #16a34a); }
.index-cov-summary-stat.fail { color: var(--severity-critical, #dc2626); }
.index-cov-summary-divider {
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .utm-hygiene-alert {
    flex-direction: column;
    gap: 8px;
  }
  .gsc-daily-trend-canvas-wrap {
    height: 260px;
  }
}

/* ─── Phase 41-02: Session Duration Buckets card (Overview Audience) ───── */
.session-duration-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 20px;
  margin: 0 0 20px;
}
.session-duration-card .widget-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px;
}
.session-duration-card .widget-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 16px;
}
.sd-bucket-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sd-bucket-row {
  display: grid;
  grid-template-columns: 80px 1fr 130px;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--text-secondary);
}
.sd-bucket-label {
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.sd-bucket-bar-track {
  background: rgba(255, 255, 255, 0.06);
  height: 18px;
  border-radius: 4px;
  overflow: hidden;
}
.sd-bucket-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 600ms ease;
}
.sd-bucket-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.session-duration-empty {
  text-align: center;
  padding: 36px 20px;
  color: var(--text-secondary);
  font-size: 13px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 6px;
}

/* ─── Phase 41-02: GSC Image Search card (AI Visibility tab) ───────────── */
.gsc-image-search-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 20px;
  margin: 0 0 20px;
}
.gsc-image-search-card .widget-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px;
}
.gsc-image-search-card .widget-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 16px;
}
.gis-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.gis-stat {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gis-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.gis-stat-value {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.gis-pages {
  border-top: 1px solid var(--border-color);
  padding-top: 14px;
}
.gis-pages-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 8px;
}
.gis-page-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.gis-page-row:last-child {
  border-bottom: 0;
}
.gis-page-url {
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.gis-page-meta {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.gsc-image-search-empty {
  text-align: center;
  padding: 36px 20px;
  color: var(--text-secondary);
  font-size: 13px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 6px;
}
.gsc-image-search-card .freshness-badge {
  display: inline-block;
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-muted);
}

/* ─── Phase 41-02: Organic vs Paid card (Overview Audience) ───────────── */
.organic-vs-paid-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 20px;
  margin: 0 0 20px;
}
.organic-vs-paid-card .widget-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px;
}
.organic-vs-paid-card .widget-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 16px;
}
.ovp-headline {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 17px;
  font-weight: 600;
}
.ovp-pct-organic { color: var(--severity-pass, #22C55E); }
.ovp-pct-paid { color: var(--tc-primary, #6AABB5); }
.ovp-pct-divider { color: var(--text-muted); }
.ovp-bar {
  display: flex;
  height: 16px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 16px;
}
.ovp-bar-organic {
  background: var(--severity-pass, #22C55E);
  height: 100%;
  transition: width 600ms ease;
}
.ovp-bar-paid {
  background: var(--tc-primary, #6AABB5);
  height: 100%;
  transition: width 600ms ease;
}
.ovp-table {
  width: 100%;
  font-size: 13px;
  border-collapse: collapse;
}
.ovp-table th {
  font-weight: 600;
  text-align: left;
  padding: 8px 10px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
}
.ovp-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.ovp-table tr:last-child td {
  border-bottom: 0;
}
.ovp-type-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.ovp-type-organic {
  background: rgba(34, 197, 94, 0.15);
  color: var(--severity-pass, #22C55E);
}
.ovp-type-paid {
  background: rgba(106, 171, 181, 0.15);
  color: var(--tc-primary, #6AABB5);
}
.ovp-empty {
  text-align: center;
  padding: 24px 20px;
  color: var(--text-secondary);
  font-size: 13px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 6px;
}

/* ─── Phase 41-02: Declining queries card (Insights tab) ───────────────── */
.declining-queries-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 20px;
  margin: 24px 0;
}
.declining-queries-card .widget-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px;
}
.declining-queries-card .widget-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 16px;
}
.dq-table {
  width: 100%;
  font-size: 13px;
  border-collapse: collapse;
}
.dq-table th {
  font-weight: 600;
  text-align: left;
  padding: 8px 10px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
  white-space: nowrap;
}
.dq-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.dq-table td.dq-query {
  color: var(--text-primary);
  font-weight: 500;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: normal;
}
.dq-table tr:last-child td {
  border-bottom: 0;
}
.dq-delta-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.dq-delta-down {
  background: rgba(239, 68, 68, 0.15);
  color: var(--severity-critical, #EF4444);
}
.dq-delta-up {
  color: var(--severity-pass, #22C55E);
}
.dq-delta-zero {
  color: var(--text-muted);
}
.dq-empty {
  text-align: center;
  padding: 36px 20px;
  color: var(--text-secondary);
  font-size: 13px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 6px;
}
.declining-queries-card .freshness-badge {
  display: inline-block;
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .sd-bucket-row {
    grid-template-columns: 60px 1fr 100px;
    gap: 8px;
  }
  .gis-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ovp-headline {
    flex-direction: column;
    gap: 4px;
  }
  .ovp-pct-divider {
    display: none;
  }
  .dq-table {
    font-size: 12px;
  }
  .dq-table th,
  .dq-table td {
    padding: 6px 8px;
  }
}

/* --- GBP History Grid (Phase 43-03-02) ---------------------------------
   9-panel trend grid on the Local tab — one panel per GBP Performance
   API metric. Reads data/clients/{slug}/gbp-history.json. Brand tokens:
   teal #6AABB5 for action metrics, gold #D4A853 for impressions. */

.gbp-history-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.gbp-history-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.gbp-history-panel-label {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

.gbp-history-panel-value {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.1;
  font-feature-settings: 'tnum' 1;
}

.gbp-history-panel-sparkline {
  width: 100%;
  height: 36px;
  margin-top: 2px;
  display: flex;
  align-items: stretch;
}

.gbp-history-panel-sparkline svg {
  width: 100%;
  height: 100%;
  display: block;
}

.gbp-history-panel-sparkline-empty {
  border-bottom: 1px dashed var(--border-color);
  height: 36px;
}

.gbp-history-panel-subtitle {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.gbp-panel-zero-note {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 10px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.35);
}

.gbp-history-empty {
  border: 1px dashed var(--border-color);
  border-radius: 8px;
  padding: 24px 16px;
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
}

.gbp-history-empty-title {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  color: var(--text-primary);
  margin: 0 0 6px 0;
}

.gbp-history-empty-text {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

@media (max-width: 1024px) {
  .gbp-history-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .gbp-history-grid {
    grid-template-columns: 1fr;
  }
  .gbp-history-panel-value {
    font-size: 20px;
  }
  .gbp-history-panel-sparkline {
    height: 28px;
  }
  .gbp-history-panel-sparkline-empty {
    height: 28px;
  }
}

/* ─── Phase 44-01: Tenant-switch overlay (dim + centered spinner) ─── */
/* Shown by App._showTenantSwitchOverlay during _onClientSwitch; lifted by
   App._hideTenantSwitchOverlay after two rAF cycles (active-tab render
   settles). pointer-events:all swallows clicks during the swap so the
   user cannot double-fire. Background uses brand --bg-app-2 at 55% alpha
   so the swap feels platform-branded rather than a generic black scrim. */
.tenant-switch-overlay {
  position: fixed;
  inset: 0;
  /* Matches the boot splash (#boot-splash) exactly: the overlay also fronts
     the anonymous front-door boot (the demo mount runs the tenant-switch
     flow), and the old dark navy read as a jarring wrong-surface flash
     between the light splash and the light product (owner feedback,
     2026-08-03). The spinner keeps the instance's own brand accent. */
  background: #F5F7FA;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  animation: tenant-switch-fade-in 80ms ease-out;
}
.tenant-switch-overlay[hidden] { display: none; }
.tenant-switch-spinner {
  /* The instance's OWN brand accent (baked into <head> as --fd-cta), so the
     boot/switch spinner never wears another instance's identity color
     (owner-caught 2026-08-03). Falls back to the old shared teal only if the
     baked token is somehow absent. */
  color: var(--fd-cta, var(--tc-primary, #6AABB5));
  animation: tenant-switch-rotate 0.9s linear infinite;
}
@keyframes tenant-switch-rotate {
  to { transform: rotate(360deg); }
}
@keyframes tenant-switch-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .tenant-switch-spinner { animation: none; }
  .tenant-switch-overlay { animation: none; }
}

/* ─── Tab load bar ─── */
.tab-load-bar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 100;
  background: transparent;
  overflow: hidden;
}
.tab-load-bar[hidden] { display: none; }
.tab-load-bar::after {
  content: '';
  display: block;
  height: 100%;
  width: 40%;
  background: var(--tc-primary, #6AABB5);
  border-radius: 0 2px 2px 0;
  animation: tab-bar-slide 1.2s ease-in-out infinite;
}
@keyframes tab-bar-slide {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(280%); }
  100% { transform: translateX(280%); }
}
@media (prefers-reduced-motion: reduce) {
  .tab-load-bar::after { animation: none; opacity: 0.5; width: 100%; }
}

/* ─── Phase 44-02: Compact tab empty-state banner ─── */
/* When a tenant has no usable data for a given tab, the tab body collapses
 * to this slim banner instead of showing a graveyard of empty hero tiles +
 * ghost charts + skeleton tables wasting hundreds of vertical pixels.
 *
 * Constraint from CONTEXT.md: ≤80px tall, reason-only copy, no CTAs.
 * The banner sits as the first child of the tab-content section; the
 * .tab-has-empty-banner class on the parent hides every sibling so the
 * banner stands alone.
 */
.tab-empty-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
  margin: 0 0 16px;
  background: var(--bg-surface-1, #131e2f);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
  border-left: 3px solid var(--text-muted, #6c7a91);
  border-radius: 8px;
  color: var(--text-muted, #6c7a91);
  font-size: 13px;
  line-height: 1.5;
  min-height: 56px;
  max-height: 80px;
}
.tab-empty-banner-icon {
  flex-shrink: 0;
  opacity: 0.7;
}
.tab-empty-banner-text {
  flex: 1;
}
/* Hide all original tab content when the banner is showing; the banner
 * itself remains visible (it's not affected by :not(.tab-empty-banner)). */
.tab-content.tab-has-empty-banner > *:not(.tab-empty-banner) {
  display: none !important;
}

/* ── Phase 46-01: Channel × Metrics Matrix ─────────────────────────────── */
.channel-matrix-section { margin-top: 28px; }
.channel-matrix-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; }
.channel-matrix-table th.num,
.channel-matrix-table td.num { text-align: right; }
.table-scroll-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Phase 46-02: Keyword Intent Breakdown ──────────────────────────────── */
.intent-breakdown { margin-top: 24px; margin-bottom: 8px; }
.intent-breakdown-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 10px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; }
.intent-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.intent-pill {
  padding: 6px 14px; border-radius: 20px; font-size: 13px;
  color: var(--text-primary); background: var(--bg-surface-1);
  border: 1.5px solid var(--border); cursor: default;
}
.intent-pill b { font-weight: 700; }
.intent-commercial    { border-color: var(--severity-warning, #f59e0b); }
.intent-informational { border-color: var(--severity-notice, #6366f1); }
.intent-transactional { border-color: #22c55e; }
.intent-navigational  { border-color: var(--text-muted); }

/* ── Phase 46-02: SERP Features Grid ───────────────────────────────────── */
.serp-features-section { margin-top: 28px; }
.serp-features-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; }
.serp-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.serp-feature-tile {
  background: var(--bg-surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 10px;
  text-align: center;
}
.serp-feature-count {
  font-size: 24px;
  font-weight: 700;
  color: var(--tc-primary, #6AABB5);
  line-height: 1;
  font-family: var(--font-display, 'Geist', sans-serif);
}
.serp-feature-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 5px;
  line-height: 1.3;
}
.serp-feature-sub {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}
@media (max-width: 480px) {
  .serp-features-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Phase 46-03: Backlinks section ─────────────────────────────────────── */
.backlinks-section { margin-top: 32px; }
.backlinks-section-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 16px; }
.backlinks-summary-row { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
.bl-stat { min-width: 100px; }
.bl-stat-number { display: block; font-size: 22px; font-weight: 700; color: var(--text-primary); line-height: 1; font-variant-numeric: tabular-nums; }
.bl-stat-label { display: block; font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.backlinks-table td:first-child { font-size: 12px; }

/* ── Phase 47-02: LLM Rank Matrix ───────────────────────────────────────── */
.llm-rank-section { margin-top: 32px; }
.llm-rank-section h3 { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; }
.llm-rank-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.llm-rank-table th { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 6px 8px; border-bottom: 1px solid var(--border-color); text-align: center; }
.llm-rank-table th:first-child { text-align: left; }
.llm-rank-table td { padding: 8px; border-bottom: 1px solid var(--border-color); vertical-align: middle; text-align: center; }
.llm-rank-table td:first-child { text-align: left; color: var(--text-primary); font-size: 12px; }
.llm-rank-hit { color: var(--tc-primary, #6AABB5); font-weight: 700; font-size: 14px; }
.llm-rank-miss { color: var(--text-muted); }
.llm-rank-footer { font-size: 11px; color: var(--text-muted); margin-top: 8px; }
.cited-sources-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.cited-sources-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; padding: 16px; }
.cited-sources-card h4 { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 10px; }
.cited-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--border-color); font-size: 12px; color: var(--text-secondary); }
.cited-row:last-child { border-bottom: none; }
.cited-rank { font-weight: 600; color: var(--text-muted); min-width: 18px; }
.cited-count { margin-left: auto; font-size: 11px; color: var(--text-muted); white-space: nowrap; }
@media (max-width: 768px) { .cited-sources-grid { grid-template-columns: 1fr; } }

/* ── Clarity live-data view (Phase 50-02) ── */
.clarity-data-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.clarity-data-header a {
  font-size: 0.8125rem;
  color: var(--accent);
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.15s;
}
.clarity-data-header a:hover { opacity: 1; }

.clarity-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.clarity-stat-card {
  background: var(--surface-2, rgba(255,255,255,0.04));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 10px;
  padding: 1rem 1.25rem;
}
.clarity-stat-card .stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}
.clarity-stat-card .stat-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
}
.clarity-stat-card .stat-value.warn { color: #f59e0b; }
.clarity-stat-card .stat-value.danger { color: #ef4444; }

.clarity-pages-section h3 {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}
.clarity-page-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.05));
}
.clarity-page-row:last-child { border-bottom: none; }
.clarity-page-url {
  font-size: 0.875rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clarity-page-sessions {
  font-size: 0.8125rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.clarity-depth-bar {
  width: 120px;
  height: 6px;
  background: var(--border, rgba(255,255,255,0.08));
  border-radius: 3px;
  overflow: hidden;
}
.clarity-depth-fill {
  height: 100%;
  background: var(--accent, #60a5fa);
  border-radius: 3px;
  transition: width 0.4s ease;
}
.clarity-depth-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Collecting state */
.clarity-collecting {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3rem 1rem;
  gap: 1rem;
  color: var(--text-muted);
}
.clarity-collecting-icon {
  width: 48px;
  height: 48px;
  opacity: 0.4;
}
.clarity-collecting-title {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--text-primary);
}
.clarity-collecting-body {
  font-size: 0.875rem;
  max-width: 420px;
  line-height: 1.6;
}
.clarity-collecting-link {
  font-size: 0.8125rem;
  color: var(--accent);
  text-decoration: none;
  opacity: 0.8;
}
.clarity-collecting-link:hover { opacity: 1; }

/* ── Clarity extensions (Phase 51-01) ── */
.clarity-device-section {
  margin-bottom: 2rem;
}
.clarity-device-header {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}
.clarity-device-pills {
  display: flex;
  gap: 0.625rem;
  flex-wrap: wrap;
}
.clarity-device-pill {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.8125rem;
  font-weight: 500;
}
.clarity-device-mobile  { background: rgba(96, 165, 250, 0.12); color: #60a5fa; border-color: rgba(96, 165, 250, 0.25); }
.clarity-device-desktop { background: rgba(167, 139, 250, 0.12); color: #a78bfa; border-color: rgba(167, 139, 250, 0.25); }
.clarity-device-tablet  { background: rgba(52, 211, 153, 0.12); color: #34d399; border-color: rgba(52, 211, 153, 0.25); }
.device-label { opacity: 0.85; }
.device-pct   { font-weight: 700; }

.clarity-friction-section { margin-top: 2rem; }
.clarity-friction-section h3 {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}
.clarity-friction-note {
  font-size: 0.75rem;
  color: var(--text-muted);
  opacity: 0.7;
  margin-bottom: 0.75rem;
}
.clarity-friction-badges {
  display: flex;
  gap: 0.375rem;
  flex-shrink: 0;
}
.clarity-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
}
.clarity-badge-rage { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.clarity-badge-dead { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }

/* ── Clarity heatmap gallery (Phase 52-02) ── */
.clarity-heatmap-section { margin-top: 2rem; }
.clarity-heatmap-section h3 {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}
.clarity-heatmap-note {
  font-size: 0.75rem;
  color: var(--text-muted);
  opacity: 0.7;
  margin-bottom: 1rem;
}
.clarity-heatmap-card {
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--bg-card);
}
.clarity-heatmap-img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 500px;
  object-fit: cover;
  object-position: top;
  cursor: pointer;
  transition: opacity 0.2s;
}
.clarity-heatmap-img:hover { opacity: 0.9; }
.clarity-heatmap-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.625rem 0.875rem;
  border-top: 1px solid var(--border-color);
}
.clarity-heatmap-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-primary);
}
.clarity-heatmap-date {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-decoration: none;
}
.clarity-heatmap-date:hover { text-decoration: underline; }

/* ── Heatmap placeholder (Phase 52) ── */
.clarity-heatmap-placeholder {
  position: relative;
  height: 260px;
  background: #0f1117;
  overflow: hidden;
  border-radius: 0.5rem 0.5rem 0 0;
}
.clarity-heatmap-blobs { position: absolute; inset: 0; }
.chb {
  position: absolute;
  border-radius: 50%;
  filter: blur(45px);
  opacity: 0.55;
}
.chb-1 { width: 220px; height: 220px; top: -40px; left: 30%; background: radial-gradient(circle, #ff4500, transparent 70%); }
.chb-2 { width: 160px; height: 160px; top: 60px; left: 55%; background: radial-gradient(circle, #ff8c00, transparent 70%); }
.chb-3 { width: 130px; height: 130px; top: 100px; left: 15%; background: radial-gradient(circle, #ffd700, transparent 70%); opacity: 0.35; }
.chb-4 { width: 100px; height: 100px; top: 30px; left: 72%; background: radial-gradient(circle, #ff6347, transparent 70%); opacity: 0.4; }
.clarity-heatmap-coming-soon {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  color: rgba(255,255,255,0.9);
}
.clarity-heatmap-coming-soon span {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.6;
}
.clarity-heatmap-coming-soon strong {
  font-size: 1.25rem;
  font-weight: 600;
}

/* ─── Help Drawer (Phase 56) ─── */
.hd-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.25);
  z-index: 900;
}
.hd-backdrop[hidden] { display: none; }

.hd-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(400px, 100vw);
  background: var(--bg-card);
  border-left: 1px solid var(--border-color);
  box-shadow: -8px 0 24px rgba(0,0,0,0.3);
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 200ms ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hd-panel[hidden] { display: none; }
.hd-panel.is-open { transform: translateX(0); }

.hd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.hd-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  flex: 1;
}
.hd-close {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 28px;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, color 120ms ease;
}
.hd-close:hover { background: color-mix(in srgb, var(--text-primary) 8%, transparent); color: var(--text-primary); }
.hd-close:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }

.hd-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Content sections inside the drawer */
.hd-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.hd-section-text {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.6;
}
.hd-glossary {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hd-glossary-term {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.hd-glossary-def {
  font-size: 13px;
  color: var(--text-secondary, var(--text-muted));
  line-height: 1.5;
}
.hd-action-box {
  background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-primary) 25%, transparent);
  border-radius: 8px;
  padding: 12px 14px;
}
.hd-action-box .hd-section-label {
  color: var(--accent-primary);
  margin-bottom: 6px;
}
.hd-action-box .hd-section-text {
  font-size: 13px;
}

/* "?" help button on tab headers */
.tab-help-btn {
  appearance: none;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  flex-shrink: 0;
  margin-left: 10px;
  vertical-align: middle;
}
.tab-help-btn:hover {
  background: color-mix(in srgb, var(--text-primary) 8%, transparent);
  color: var(--text-primary);
  border-color: var(--text-muted);
}
.tab-help-btn:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }

/* Make .tab-header a flex row so "?" sits right of the text block */
.tab-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.tab-header-text { flex: 1; }

/* ─── Guide Tab Page (Phase 56-02) ─── */
.guide-print-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  margin-top: 4px;
  transition: background 120ms ease, color 120ms ease;
}
.guide-print-btn:hover {
  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
  color: var(--text-primary);
}

/* Phase 70 — Guide reads as a centered, readable document inside a white card,
   matching the v2 card aesthetic (was edge-to-edge, no framing). */
#tab-guide.v2-theme { padding: 28px 28px 72px; }
#tab-guide .tab-header { max-width: 940px; margin: 0 auto 22px; }
.guide-content {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 940px;
  margin: 0 auto;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, var(--border-color));
  border-radius: 16px;
  box-shadow: var(--shadow-card, 0 1px 3px rgba(60, 64, 67, .08), 0 8px 28px rgba(60, 64, 67, .08));
  padding: 6px 38px;
}

/* Guide intro + in-page jump nav (P3 desktop — was a 20-block prose scroll). */
.gp-intro { padding: 22px 0 6px; }
.gp-intro-text { font-size: 14px; color: var(--text-secondary, var(--text-muted)); line-height: 1.6; margin: 0 0 14px; max-width: 780px; }
.gp-jump { display: flex; flex-wrap: wrap; gap: 6px; }
.gp-jump-pill {
  font-size: 12px; font-weight: 600; color: var(--text-secondary, var(--text-muted));
  background: var(--bg-card-soft, #F3F6FA); border: 1px solid var(--border, var(--border-color));
  border-radius: var(--radius-pill, 999px); padding: 5px 11px; cursor: pointer;
  transition: border-color .12s, color .12s;
}
.gp-jump-pill:hover { border-color: var(--accent-primary); color: var(--accent-primary); }

.gp-section {
  padding: 28px 0;
  border-bottom: 1px solid var(--border-color);
  scroll-margin-top: 84px;
}
.gp-section:last-child { border-bottom: none; }

/* Numbered chip + title + right-aligned "open the tab" cross-link. */
.gp-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.gp-section-num {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
  background: color-mix(in srgb, var(--accent-primary) 12%, transparent); color: var(--accent-primary);
  font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}
.gp-tab-link {
  margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--accent-primary);
  background: transparent; border: 1px solid color-mix(in srgb, var(--accent-primary) 32%, transparent);
  border-radius: var(--radius-pill, 999px); padding: 5px 12px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; transition: background .12s;
}
.gp-tab-link:hover { background: color-mix(in srgb, var(--accent-primary) 10%, transparent); }

.gp-section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0;
}

.gp-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 0;
}

.gp-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.gp-text {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.65;
  margin: 0;
}

.gp-glossary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
  margin-bottom: 14px;
}
.gp-glossary-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  align-items: baseline;
}
.gp-term {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.gp-def {
  font-size: 13px;
  color: var(--text-secondary, var(--text-muted));
  line-height: 1.5;
}

.gp-action {
  background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-primary) 20%, transparent);
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 14px;
}
.gp-action-label { color: var(--accent-primary); }

/* ─── Print styles (Guide tab) ─── */
@media print {
  /* Hide everything except the guide content */
  body > *:not(.main-content) { display: none !important; }
  .sidebar { display: none !important; }
  .tab-content:not(#tab-guide) { display: none !important; }
  #tab-guide { display: block !important; padding: 0 !important; }

  /* Drop the on-screen card framing for clean print output. */
  .guide-content { max-width: none !important; margin: 0 !important; background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; }
  #tab-guide .tab-header { max-width: none !important; margin: 0 0 20px !important; }

  .tab-header { margin-bottom: 20px; }
  .guide-print-btn { display: none !important; }
  .tab-help-btn { display: none !important; }

  .gp-section { page-break-inside: avoid; border-bottom: 1px solid #ccc; }
  .gp-section-title { font-size: 16pt; }
  .gp-cols { display: grid; grid-template-columns: 1fr 1fr; }
  .gp-text, .gp-def { font-size: 10pt; }
  .gp-glossary-row { grid-template-columns: 130px 1fr; }
  .gp-action { border: 1px solid #ccc; background: #f8f8f8 !important; }
}

/* Responsive: single column on mobile */
@media (max-width: 640px) {
  .gp-cols { grid-template-columns: 1fr; }
  .gp-glossary-row { grid-template-columns: 1fr; gap: 2px; }
}

/* ─────────────────────────────────────────────────────────────────────
   Phase 57-04: Tasks tab admin client tab-switcher
   Renders only when Auth.getMode() === 'admin'. Lets Arnold flip
   between platform-active tenant boards in-place.
───────────────────────────────────────────────────────────────────── */
.tasks-client-switcher {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0 0 1rem 0;
  border-bottom: 1px solid var(--tc-border, rgba(255,255,255,0.08));
  margin-bottom: 1rem;
}
.tcs-tab {
  padding: 0.35rem 0.9rem;
  border-radius: 20px;
  border: 1px solid var(--tc-border, rgba(255,255,255,0.12));
  background: transparent;
  color: var(--tc-text-muted, #9aa0a6);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.tcs-tab:hover {
  background: var(--tc-bg-elevated, rgba(255,255,255,0.04));
  color: var(--tc-text, #e8eaed);
}
.tcs-tab.is-active {
  background: var(--tc-primary, #4f8cff);
  color: #fff;
  border-color: var(--tc-primary, #4f8cff);
}
.tcs-tab.is-active:hover {
  /* keep brand colour on hover when active */
  background: var(--tc-primary, #4f8cff);
  color: #fff;
}

/* ── B5 — Customer Portal surfaces (SSO payers only; injected by front-door.js,
   never present in anonymous / access-code / golden-baseline chrome). The
   banner is the past_due grace notice: honest, one fix-it action, AA on its
   own explicit colors (ink #6B3F0B on #FDF3E1 ≈ 7.5:1; the CTA reuses the
   audited .btn-primary pair). Sits at the top of the scrolling content column
   — the fixed header never covers it, and it displaces content rather than
   overlaying it. */
.fd-billing-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin: 16px 24px 4px;
  padding: 14px 18px;
  background: #FDF3E1;
  border: 1px solid #E5C787;
  border-radius: var(--border-radius-sm, 8px);
  color: #6B3F0B;
  font-size: 14px;
  line-height: 1.5;
}
.fd-billing-banner-text { flex: 1 1 320px; min-width: 240px; }
.fd-billing-banner-text strong { font-weight: 700; color: #57320A; }
.fd-billing-banner-btn { flex: 0 0 auto; white-space: nowrap; }
.fd-billing-banner-err {
  flex: 1 1 100%;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #A03A12;
}

/* ── B6 — the state-5 "building your dashboard" surface (front-door panel,
   shown between payment and provision-complete; front-door.js polls
   account-state while visible and moves on automatically). Steps read as a
   receipt → progress → promise; the active row reuses .live-dot (which
   already honors prefers-reduced-motion). */
.fd-building { max-width: 460px; margin: 6px auto 0; text-align: left; }
.fd-building-steps {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.fd-building-step {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--es-ink-soft, #B8C4CE);
}
.fd-building-step .fd-tick { flex: 0 0 auto; }
.fd-building-step.is-done { color: var(--es-ink, #EAF1F5); }
.fd-building-step.is-active { color: var(--es-ink, #EAF1F5); font-weight: 600; }
.fd-building-step .live-dot { position: relative; top: -1px; flex: 0 0 auto; }
.fd-building-step-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  opacity: 0.55;
  position: relative;
  top: -1px;
}
.fd-building-note { text-align: center; }

/* ── B7 — access-code retirement step 1 (self-serve gate, GIS-rendered only).
   js/front-door.js adds .gate-selfserve to #login-gate ONLY after the Google
   button actually renders; without it (Google down, the function-less visual
   harness, the non-self-serve instance) none of these rules ever apply and
   the gate is byte-identical to its pre-B7 self. Class-level rules only;
   [hidden] always wins (the A23 gate rule). */
.login-code-toggle {
  display: block;
  margin: 14px auto 0;
  background: none;
  border: none;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.login-code-toggle:hover { color: var(--text-primary); }
.login-code-toggle:focus-visible { outline: 2px solid var(--tc-primary); outline-offset: 2px; }
.login-code-toggle[hidden] { display: none; }
.gate-selfserve .login-form { display: none; }
.gate-selfserve.code-revealed .login-form { display: block; }
/* Google is the primary when collapsed — no "or" divider above it; the
   divider returns once the code form is revealed below it. */
.gate-selfserve:not(.code-revealed) .login-google-or { display: none; }

/* ── A-pass (owner-picked Option A, 2026-08-03) — the REGISTERED variant's
   left column is the ACCOUNT side: identity → unlock (with the site picker)
   → what-unlocking-buys → the owner's audits. Ships hidden; only the
   registered variant reveals any of it, so the anonymous pitch is untouched.
   The unlock block joins the left column's reading direction instead of the
   old centered-in-the-form-column treatment. */
.fd-identity { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 2px 0 6px; }
.fd-identity [data-fd-email] { margin: 0; }
.fd-identity [data-fd-signout] { margin: 0; }
#fd-dashboard-panel .fd-value .fd-unlock { margin: 16px 0 20px; text-align: left; max-width: 460px; }
#fd-dashboard-panel .fd-value .fd-unlock .fd-unlock-note { line-height: 1.6; }
#fd-dashboard-panel .fd-value [data-fd-points-upgrade] { margin-top: 10px; }
/* The front-door surface hides the real-tenant task FAB (front-door.js sets
   [hidden]); class-level so the attribute always wins. */
.tc-create-fab[hidden] { display: none; }
#fd-dashboard-panel .fd-value .fd-unlock .fd-unlock-note { text-align: left; }
.fd-unlock-for { margin-bottom: 10px; }
.fd-unlock-for select { width: 100%; }
.fd-unlock-for-one { margin: 0 0 10px; color: var(--es-ink); }
.fd-unlock-for-one strong { font-weight: 700; }
.fd-unlock-err {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: #FFB4A1;
}
#fd-dashboard-panel .fd-value .fd-audits { margin-top: 18px; max-width: 460px; }
/* Mid-scan collapse: the account blocks step aside with the rest of the
   pitch so the scan owns the panel (same family as .fd-points below). */
#fd-dashboard-panel.fd-scanning .fd-audits,
#fd-dashboard-panel.fd-scanning .fd-unlock { display: none; }

/* ── M1.1 — light main surface while a v2-theme tab is active (toggled in
   switchTab). Kills the dark body band that leaked above light tab content;
   legacy dark tabs never get the class. */
.main.main-light { background: #F5F7FA; }