/* ============================================================
   CMA MODULE — Competitive Market Analysis
   Atlanta Division Sales Tracker · Stanley Martin Homes
   ============================================================
   This stylesheet is dedicated to the CMA module (app/js/cma/).
   It mirrors the LIVE codebase's class names (not components.html
   spec). Key live classes reused without redefinition here:
     - .bm-subnav / .bm-nav-btn / .is-active
     - .btn / .btn-outline / .btn-sm / .btn-primary
     - .page-header / .page-header-title / .page-header-subtitle
     - .sales-table / .sales-table-wrap
     - .badge / .badge-info
     - .alert / .alert-info / .alert-danger
   All new declarations use existing design tokens from styles.css:1-81.
   No new tokens are added.

   Append-only convention: each phase adds a new sentinel block.
   Never edit a block from a completed phase.
   ============================================================ */

/* === CMA — PHASE 3 (thin slice) === */

/* ── Shell ────────────────────────────────────────────────── */
/* Outer column wrapper for the entire CMA module area. */
.cma-shell {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--canvas);
  padding: var(--sp-6) var(--sp-8);   /* 24px top/bottom, 32px L/R */
  max-width: 1300px;
  margin: 0 auto;
  width: 100%;
}

/* ── Page Header ──────────────────────────────────────────── */
/* Mirrors .sm-editor-page-header: zero bottom-margin so the
   subnav (or market-pills row) sits flush beneath the header. */
.cma-page-header {
  margin-bottom: 0;
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
}

/* ── Subnav container ─────────────────────────────────────── */
/* Mirrors .bm-subnav container shape for use in later phases.
   Defined here so the shell scaffold is complete from Phase 3. */
.cma-subnav {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--ink-100);
  background: var(--surface);
  padding: 0 var(--sp-6);
  width: 100%;
}

/* Active-tab underline as inset box-shadow (copied verbatim from
   styles.css:5025-5028 .sm-editor-subnav rule). The BM negative-
   margin border-bottom trick is clipped outside its meeting-shell
   wrapper, so we use this inset technique instead. */
.cma-subnav .bm-nav-btn.is-active {
  border-bottom-color: transparent;
  box-shadow: inset 0 -3px 0 var(--sm-dark-blue);
}

/* ── Section header ───────────────────────────────────────── */
/* Title + count caption row above each table block. */
.cma-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5) var(--sp-3);
  background: var(--canvas);
}

.cma-section-header h3 {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink-900);
  margin: 0;
}

.cma-section-header .cma-section-caption {
  font-size: var(--fs-xs);
  color: var(--ink-500);
  font-weight: 600;
}

/* ── Source badges ────────────────────────────────────────── */
/* SM badge: sm-dark-blue background, pill shape. */
.cma-source-badge--sm {
  display: inline-block;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--sm-dark-blue);
  color: var(--surface);
}

/* Comp badge: ink-500 background, same pill shape. */
.cma-source-badge--comp {
  display: inline-block;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--ink-500);
  color: var(--surface);
}

/* ── SM row tint ──────────────────────────────────────────── */
/* Applied to <tr> elements for SM rows in all three tables. */
.cma-row--sm {
  background: var(--surface-subtle);
}

/* Preserve tint on hover for SM rows (slightly deeper tint). */
.cma-row--sm:hover td {
  background: rgba(30, 77, 96, 0.05) !important;
}

/* ── Market-context pill row ──────────────────────────────── */
/* Horizontal row of .badge.badge-info pills at the top of the
   Current view, showing prevailing_rate, buydown cost, ASP. */
.cma-market-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  background: var(--canvas);
  border-bottom: 1px solid var(--ink-100);
}

/* ── Pricing-kind segmented control ───────────────────────── */
/* Base / Spec / Both toggle — three .btn.btn-outline.btn-sm
   buttons rendered flush (gap:0). First + last get rounded
   outer corners; middle gets square corners for visual join. */
.cma-pricing-kind-toggle {
  display: flex;
  gap: 0;
  align-items: center;
}

/* Square all corners by default, then restore outer corners. */
.cma-pricing-kind-toggle .btn {
  border-radius: 0;
  border-right-width: 0;
}

.cma-pricing-kind-toggle .btn:first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.cma-pricing-kind-toggle .btn:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  border-right-width: 1.5px; /* restore right border on last */
}

/* Active segment: filled sm-dark-blue, white text. */
.cma-pricing-kind-toggle .btn.is-active {
  background: var(--sm-dark-blue);
  color: var(--surface);
  border-color: var(--sm-dark-blue);
}

/* ── Empty-state block ────────────────────────────────────── */
/* Rendered in the table-wrap when a section has zero rows. */
.cma-empty {
  text-align: center;
  color: var(--ink-500);
  padding: var(--sp-5);
  font-size: var(--fs-sm);
}

/* ── Section spacing ──────────────────────────────────────── */
/* Add breathing room between table sections. */
.cma-section {
  margin-bottom: var(--sp-6);
}

/* ── Filter / toggle row ──────────────────────────────────── */
/* Flex row holding the pricing-kind toggle + any future controls. */
.cma-filter-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  background: var(--canvas);
}


/* === CMA — PHASE 4 (inputs view) === */

/* ── Inputs shell ─────────────────────────────────────────── */
/* Outer wrapper; constrains width to match smEditor body. */
.cma-inputs-shell {
  max-width: 760px;
  padding: var(--sp-5) var(--sp-6) var(--sp-8);
}

/* ── Inputs section ───────────────────────────────────────── */
/* Fieldset-style card block; mirrors .sm-editor-fieldset. */
.cma-inputs-section {
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-6);
  background: var(--surface);
}

/* ── Inputs section header ────────────────────────────────── */
/* Flex row: h3 + last-saved caption + saved indicator. */
.cma-inputs-section-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}

.cma-inputs-section-header h3 {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink-900);
  margin: 0;
}

.cma-inputs-last-saved {
  font-size: var(--fs-xs);
  color: var(--ink-500);
  font-weight: 500;
}

/* ── Inputs form layout ───────────────────────────────────── */
/* Flex column; reuses .form-group / .form-control / .form-label. */
.cma-inputs-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* Three-column grid for inventory total / sold / available inputs. */
.cma-inputs-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}

@media (max-width: 600px) {
  .cma-inputs-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* ── Hint text ────────────────────────────────────────────── */
.cma-inputs-hint {
  font-size: var(--fs-sm);
  color: var(--ink-500);
  margin: 0 0 var(--sp-4);
}

/* ── Empty-state ──────────────────────────────────────────── */
.cma-inputs-empty {
  font-size: var(--fs-sm);
  color: var(--ink-400);
  margin: 0;
}

/* ── Sales-pace snapshot row ──────────────────────────────── */
/* Flex row: period label | date range | units input | save btn | saved indicator. */
.cma-snapshot-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--ink-100);
  flex-wrap: wrap;
}

.cma-snapshot-row:last-of-type {
  border-bottom: none;
}

.cma-snapshot-row-label {
  flex: 0 0 140px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-800);
}

.cma-snapshot-row-dates {
  flex: 1 1 auto;
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

/* ── Comp weight row ──────────────────────────────────────── */
/* Full-width row: comp name on left, star widget on right. */
.cma-comp-weight-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--ink-100);
}

.cma-comp-weight-row:last-child {
  border-bottom: none;
}

.cma-comp-weight-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-800);
}

/* ── Star rating widget ───────────────────────────────────── */
/* Five clickable star buttons in a row. */
.cma-star-rating {
  display: flex;
  gap: var(--sp-1);
  align-items: center;
}

.cma-star-rating-star {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--sp-1);
  font-size: 20px;
  line-height: 1;
  color: var(--ink-300);
  transition: color 0.12s ease;
}

/* Filled stars use --warning (amber/gold) — clearly distinct from SM blue,
   avoids sm-pink which is reserved for SM brand accent actions. */
.cma-star-rating-star.is-filled {
  color: var(--warning);
}

.cma-star-rating-star:hover {
  color: var(--warning);
  opacity: 0.75;
}

/* === CMA — PHASE 5 (plan matches) === */

/* ── Plan Matches section ─────────────────────────────────── */
/* Mirrors .cma-inputs-section shape; no additional box model needed. */
.cma-plan-matches-section {
  /* inherits .cma-inputs-section styles; no overrides needed */
}

/* ── Plan match table row ─────────────────────────────────── */
/* Applies light row hover; no extra layout changes needed beyond
   .sales-table's existing <tr> rules. */
.cma-plan-match-row {
  vertical-align: middle;
}

.cma-plan-match-row td {
  vertical-align: middle;
}

/* ── Match source badges ──────────────────────────────────── */
/* Pill badges indicating whether a match was auto-computed or
   manually overridden. Both share base pill shape. */
.cma-match-source-badge {
  display: inline-block;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Override badge: sm-pink background, white text — indicates a
   user-set manual match (distinct from computed blue). */
.cma-match-source-badge--override {
  background: var(--sm-pink);
  color: var(--surface);
}

/* Computed badge: ink-300 background — muted; this is the default state. */
.cma-match-source-badge--computed {
  background: var(--ink-300);
  color: var(--ink-900);
}

/* ── Match score display ──────────────────────────────────── */
/* Monospaced score value in [0.00, 1.00]. Falls back to bold if
   no mono font is defined in the token set. */
.cma-match-score {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-800);
}

/* === CMA — PHASE 6 (trend view) === */

/* ── View-mode toggle (Current / Trend) ───────────────────── */
/* Segmented control sitting above the content area, below the
   subnav (or page header). Mirrors .cma-pricing-kind-toggle
   shape but for top-level view mode selection. */
.cma-mode-toggle {
  display: flex;
  gap: 0;
  align-items: center;
  padding: var(--sp-3) var(--sp-5);
  background: var(--canvas);
  border-bottom: 1px solid var(--ink-100);
}

/* Square all inner corners; restore outer corners on first/last. */
.cma-mode-toggle .btn {
  border-radius: 0;
  border-right-width: 0;
}

.cma-mode-toggle .btn:first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.cma-mode-toggle .btn:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  border-right-width: 1.5px;
}

/* Active segment: sm-dark-blue fill, white text. */
.cma-mode-toggle .btn.is-active {
  background: var(--sm-dark-blue);
  color: var(--surface);
  border-color: var(--sm-dark-blue);
}

/* ── Window pills (3mo / 6mo / 12mo) ─────────────────────── */
/* Flex row of three .btn.btn-outline.btn-sm pills at top of
   the trend content area, above the metric grids. */
.cma-window-pills {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  background: var(--canvas);
}

/* ── Trend grid block (one per metric) ───────────────────── */
/* Card-style block wrapping the header + timeline + rows for
   a single metric. Margin-bottom separates consecutive grids. */
.cma-trend-grid {
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  margin-bottom: var(--sp-4);
}

/* ── Trend grid header ────────────────────────────────────── */
/* Flex row: metric label (h3) on left, window caption on right. */
.cma-trend-grid-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-subtle);
  border-bottom: 1px solid var(--ink-100);
}

.cma-trend-grid-header h3 {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink-900);
  margin: 0;
}

/* ── Timeline header (bucket labels row) ─────────────────── */
/* Flex row that mirrors the community-row layout so bucket
   label columns align with the trend cells below. */
.cma-trend-timeline-header {
  display: flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--ink-100);
  background: var(--canvas);
}

.cma-trend-bucket-labels {
  display: flex;
  flex: 1;
  gap: var(--sp-2);
}

.cma-trend-bucket-label {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  color: var(--ink-500);
  font-weight: 500;
  text-align: center;
  min-width: 36px;
}

/* ── Community trend row ──────────────────────────────────── */
/* Flex row: community name (fixed 200px) | trend cell (flex 1). */
.cma-trend-row {
  display: flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--ink-100);
}

.cma-trend-row:last-child {
  border-bottom: none;
}

.cma-trend-row-name {
  flex: 0 0 200px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-800);
  padding-right: var(--sp-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Trend cell (sparkline + value OR insufficient) ──────── */
.cma-trend-cell {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 1;
}

/* Sparkline SVG container — inline-block, 120×24px. */
.cma-trend-cell-sparkline {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* Latest value label next to the sparkline. */
.cma-trend-cell-value {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--sm-dark-blue);
  white-space: nowrap;
}

/* Dash displayed before the insufficient caption. */
.cma-trend-insufficient-dash {
  font-size: var(--fs-sm);
  color: var(--ink-500);
  margin-right: var(--sp-1);
}

/* Italic caption for insufficient-data cells. */
.cma-trend-insufficient {
  font-size: var(--fs-xs);
  color: var(--ink-500);
  font-style: italic;
}

/* ── Loading / centered states ────────────────────────────── */
.cma-trend-loading {
  text-align: center;
  color: var(--ink-500);
  padding: var(--sp-5);
  font-size: var(--fs-sm);
}

/* Name column spacer in the timeline header (mirrors row layout). */
.cma-trend-row-name-col {
  flex: 0 0 200px;
}

/* === CMA — PHASE 7 (display contract + drilldown + freshness) === */

/* ── Approach picker ─────────────────────────────────────────── */
/* Segmented control row rendered ABOVE the mode toggle.          */
/* Mirrors .cma-mode-toggle layout but left-aligned with label.   */

.cma-approach-picker {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-5) 0;
  flex-wrap: wrap;
}

.cma-approach-picker-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: var(--sp-1);
  white-space: nowrap;
}

.cma-approach-picker .btn[data-approach] {
  border-radius: 0;
  border-right-width: 0;
  transition: background-color 0.1s, color 0.1s;
}

.cma-approach-picker .btn[data-approach]:first-of-type {
  border-radius: var(--radius) 0 0 var(--radius);
}

.cma-approach-picker .btn[data-approach]:last-child {
  border-radius: 0 var(--radius) var(--radius) 0;
  border-right-width: 1px;
}

.cma-approach-picker .btn.is-active {
  background-color: var(--sm-dark-blue);
  color: #fff;
  border-color: var(--sm-dark-blue);
}

/* ── Freshness pills ─────────────────────────────────────────── */
/* Compact inline badges displayed next to community name in      */
/* Floor Plans / Available Homes / Incentives / Trend rows.       */

.cma-freshness-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 1px var(--sp-2);
  border-radius: 999px;
  white-space: nowrap;
  vertical-align: middle;
  margin-left: var(--sp-1);
}

.cma-freshness-pill--fresh {
  background-color: rgba(34, 197, 94, 0.12);   /* success-soft approx */
  color: var(--success);
}

.cma-freshness-pill--aging {
  background-color: rgba(245, 158, 11, 0.12);  /* warning-soft approx */
  color: var(--warning);
}

.cma-freshness-pill--stale {
  background-color: rgba(239, 68, 68, 0.1);    /* danger-soft approx */
  color: var(--danger);
}

.cma-freshness-pill--never {
  background-color: var(--ink-100);
  color: var(--ink-500);
}

/* ── Plan drilldown modal ────────────────────────────────────── */
/* Side-by-side spec comparison table for SM plan vs comp plans.  */

/* Table wrapper — horizontal scroll on narrow viewports */
.cma-drilldown-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* The comparison table itself — extends .sales-table base styles */
.cma-drilldown-comparison {
  min-width: 480px;
  width: 100%;
}

/* SM column highlighted with surface-subtle background */
.cma-drilldown-comparison .cma-drilldown-sm-col {
  background-color: var(--surface-subtle, rgba(30, 77, 96, 0.04));
  font-weight: 600;
}

/* Empty state when no matching comp plans are found */
.cma-drilldown-empty {
  padding: var(--sp-5);
  color: var(--ink-500);
  font-style: italic;
  text-align: center;
}

/* ── Match score badges ──────────────────────────────────────── */
/* Inline badges for override / computed-score / range-match.     */

.cma-drilldown-match-badge {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 1px var(--sp-2);
  border-radius: 999px;
  white-space: nowrap;
}

.cma-drilldown-match-badge--override {
  background-color: rgba(236, 72, 153, 0.15);  /* pink-soft */
  color: var(--sm-pink, #ec4899);
}

.cma-drilldown-match-badge--computed {
  background-color: var(--ink-100);
  color: var(--ink-500);
}

.cma-drilldown-match-badge--range {
  background-color: rgba(59, 130, 246, 0.1);   /* blue-soft neutral */
  color: #3b82f6;
}

/* === APPROACH SCOREBOARD === (Phase 8 — merged 2026-05-07) */

/* Phase 8 — Scoreboard approach styles */
/* All classes prefixed .cma-scoreboard-* to avoid collision.     */
/* Tokens: styles.css:1-81 only. No new tokens.                   */

/* ── Outer shell ──────────────────────────────────────────────── */
.cma-scoreboard-shell {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
}

/* ── Scroll wrapper (horizontal scroll on narrow viewports) ───── */
.cma-scoreboard-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Main table ────────────────────────────────────────────────── */
.cma-scoreboard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  color: var(--ink-900);
  background: var(--surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--elev-1);
  min-width: 520px;
}

/* ── Header row ────────────────────────────────────────────────── */
.cma-scoreboard-header-row {
  background: var(--sm-dark-blue);
  color: var(--surface);
}

.cma-scoreboard-header-row .cma-scoreboard-cell {
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: var(--sp-3) var(--sp-4);
  border: none;
  color: var(--surface);
  background: transparent;
}

/* ── Metric row ─────────────────────────────────────────────────── */
.cma-scoreboard-row {
  border-bottom: 1px solid var(--ink-100);
  transition: background 0.1s ease;
}

.cma-scoreboard-row:last-child {
  border-bottom: none;
}

.cma-scoreboard-row--expandable:hover {
  background: var(--sm-light-blue-soft);
  cursor: pointer;
}

.cma-scoreboard-row--expanded {
  background: var(--sm-light-blue-soft);
}

.cma-scoreboard-row--expanded .cma-scoreboard-cell--label::after {
  content: ' ▲';
  font-size: var(--fs-xs);
  color: var(--sm-dark-blue);
}

.cma-scoreboard-row--expandable .cma-scoreboard-cell--label::after {
  content: ' ▼';
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

/* ── Cell ────────────────────────────────────────────────────────── */
.cma-scoreboard-cell {
  padding: var(--sp-3) var(--sp-4);
  vertical-align: top;
  text-align: center;
  border-right: 1px solid var(--ink-100);
  line-height: var(--lh-tight);
  min-width: 120px;
}

.cma-scoreboard-cell:last-child {
  border-right: none;
}

/* Row label cell — left-aligned, narrower */
.cma-scoreboard-cell--label {
  text-align: left;
  font-weight: 600;
  font-size: var(--fs-xs);
  color: var(--ink-700);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--canvas);
  min-width: 140px;
  position: sticky;
  left: 0;
  z-index: 1;
  border-right: 2px solid var(--ink-300);
}

/* SM column highlight */
.cma-scoreboard-cell--sm {
  background: var(--surface-subtle);
  font-weight: 600;
  color: var(--sm-dark-blue);
}

/* Median column — right border accent */
.cma-scoreboard-cell--median {
  background: var(--canvas);
  color: var(--ink-700);
  font-style: italic;
  border-left: 2px solid var(--ink-300);
}

/* ── Delta pills ─────────────────────────────────────────────────── */
/* Extends the existing .badge system with scoreboard-specific modifiers. */
.cma-scoreboard-delta--up {
  display: inline-block;
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
}

.cma-scoreboard-delta--down {
  display: inline-block;
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
}

.cma-scoreboard-delta--neutral {
  display: inline-block;
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
}

/* ── Sparkline sub-row ───────────────────────────────────────────── */
.cma-scoreboard-sparkline-row {
  background: var(--ink-100);
  border-bottom: 1px solid var(--ink-300);
}

.cma-scoreboard-sparkline-cell {
  padding: var(--sp-2) var(--sp-4);
  text-align: center;
  vertical-align: middle;
  border-right: 1px solid var(--ink-300);
  min-width: 120px;
}

.cma-scoreboard-sparkline-cell:last-child {
  border-right: none;
}

.cma-scoreboard-sparkline-label {
  font-size: var(--fs-xs);
  color: var(--ink-500);
  font-style: italic;
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0;
}

.cma-scoreboard-sparkline-svg {
  display: block;
  margin: 0 auto;
}

/* Insufficient-data caption */
.cma-scoreboard-insufficient {
  font-size: var(--fs-xs);
  color: var(--ink-500);
  line-height: var(--lh-tight);
}

.cma-scoreboard-insufficient small {
  display: block;
  font-size: 10px;
  color: var(--ink-500);
}

/* ── Truncate long text (schools, etc.) ──────────────────────────── */
.cma-scoreboard-truncate {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

/* ── Focus mode modifier ─────────────────────────────────────────── */
.cma-scoreboard--focus .cma-scoreboard-table {
  font-size: var(--fs-base);
}

.cma-scoreboard--focus .cma-scoreboard-cell {
  padding: var(--sp-4) var(--sp-5);
  min-width: 200px;
}

.cma-scoreboard--focus .cma-scoreboard-header-row .cma-scoreboard-cell {
  font-size: var(--fs-sm);
  padding: var(--sp-4) var(--sp-5);
}

.cma-scoreboard--focus .cma-scoreboard-cell--label {
  min-width: 160px;
  font-size: var(--fs-sm);
}

/* Focus mode badge row */
.cma-scoreboard-focus-badge {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--ink-500);
}

/* ── "vs comp" caption (focus mode only) ─────────────────────────── */
.cma-scoreboard-vs-caption {
  font-size: var(--fs-xs);
  color: var(--ink-500);
  margin-top: var(--sp-1);
  line-height: var(--lh-tight);
}

/* ── Focus table (3-col, no median) ─────────────────────────────── */
.cma-scoreboard-table--focus {
  min-width: 380px;
  max-width: 780px;
}

/* ── Legend row ──────────────────────────────────────────────────── */
.cma-scoreboard-legend {
  font-size: var(--fs-xs);
  color: var(--ink-500);
  padding: 0 var(--sp-1);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

/* === APPROACH POSITION-MAP === (Phase 8 — merged 2026-05-07) */

/* Phase 8 — Position Map approach styles */
/* Prefix: .cma-position-map-*                                      */
/* Parent will append under === APPROACH POSITION-MAP === sentinel. */

/* ── Extended builder color palette (slots 6–12) ─────────────────
   Colorblind-safe ramp. Avoids red+green pairs that confuse
   deuteranopia/protanopia viewers.  Chosen from Okabe-Ito + Wong
   (2011) + IBM Carbon accessible extended palette.
   Slots 1-5 use existing tokens; do NOT redefine them here.      */
:root {
  --cma-builder-color-6:  #56b4e9; /* Sky blue — Okabe-Ito; distinct from navy */
  --cma-builder-color-7:  #e69f00; /* Amber — Okabe-Ito; bright, no R/G overlap */
  --cma-builder-color-8:  #009e73; /* Teal green — Okabe-Ito; safe with blue */
  --cma-builder-color-9:  #cc79a7; /* Muted rose — Okabe-Ito; distinct from danger */
  --cma-builder-color-10: #0072b2; /* Deep blue — Okabe-Ito; darker than slot 6 */
  --cma-builder-color-11: #d55e00; /* Vermilion — Okabe-Ito; readable as non-red */
  --cma-builder-color-12: #f0e442; /* Yellow — Okabe-Ito; high-contrast on dark bg */
}

/* ── Shell wrapper ────────────────────────────────────────────── */
.cma-position-map-shell {
  display:        flex;
  flex-direction: column;
  gap:            12px;
  width:          100%;
  font-size:      13px;
  color:          var(--ink-900);
}

/* ── Controls row ─────────────────────────────────────────────── */
.cma-position-map-controls {
  display:     flex;
  flex-wrap:   wrap;
  align-items: flex-end;
  gap:         16px;
  padding:     0 4px;
}

.cma-position-map-control-group {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}

.cma-position-map-control-label {
  font-size:   11px;
  font-weight: 600;
  color:       var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display:     flex;
  align-items: center;
  gap:         5px;
  cursor:      default;
}

/* ── Segmented toggle ─────────────────────────────────────────── */
/* Mirrors .cma-mode-toggle pattern from cma.css */
.cma-position-map-toggle {
  display:          inline-flex;
  border:           1.5px solid var(--ink-300);
  border-radius:    6px;
  overflow:         hidden;
  background:       #fff;
}

.cma-position-map-toggle-btn {
  padding:          5px 12px;
  border:           none;
  border-right:     1px solid var(--ink-300);
  background:       transparent;
  font-size:        12px;
  font-weight:      500;
  color:            var(--ink-700);
  cursor:           pointer;
  white-space:      nowrap;
  transition:       background 0.12s, color 0.12s;
  line-height:      1.4;
}

.cma-position-map-toggle-btn:last-child {
  border-right: none;
}

.cma-position-map-toggle-btn:hover {
  background: var(--ink-100);
}

.cma-position-map-toggle-btn.is-active {
  background: var(--sm-dark-blue);
  color:      #fff;
}

/* ── Axis picker dropdowns ────────────────────────────────────── */
.cma-position-map-axis-picker {
  padding:       5px 8px;
  border:        1.5px solid var(--ink-300);
  border-radius: 6px;
  background:    #fff;
  font-size:     12px;
  color:         var(--ink-900);
  cursor:        pointer;
  outline:       none;
  height:        30px;
}

.cma-position-map-axis-picker:focus {
  border-color: var(--sm-dark-blue);
}

/* ── Builder legend ───────────────────────────────────────────── */
.cma-position-map-legend {
  display:    flex;
  flex-wrap:  wrap;
  gap:        6px;
  padding:    0 4px;
}

.cma-position-map-legend-chip {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  padding:       4px 10px;
  border:        1.5px solid var(--ink-300);
  border-radius: 20px;
  background:    #fff;
  font-size:     12px;
  font-weight:   500;
  color:         var(--ink-700);
  cursor:        pointer;
  transition:    opacity 0.15s, border-color 0.15s;
  white-space:   nowrap;
}

.cma-position-map-legend-chip:hover {
  border-color: var(--ink-500);
}

.cma-position-map-legend-chip--sm {
  font-weight:  700;
  border-color: var(--sm-dark-blue);
  color:        var(--sm-dark-blue);
  cursor:       default; /* SM is always shown */
}

.cma-position-map-legend-swatch {
  display:       inline-block;
  width:         10px;
  height:        10px;
  border-radius: 50%;
  flex-shrink:   0;
}

/* ── SVG chart wrapper ────────────────────────────────────────── */
.cma-position-map-chart-wrap {
  position:   relative;
  width:      100%;
  overflow:   hidden;
}

.cma-position-map-svg {
  display:    block;
  width:      100%;
  height:     auto; /* responsive; viewBox handles aspect ratio */
  overflow:   visible;
}

/* ── SVG internal elements ────────────────────────────────────── */
.cma-position-map-grid {
  stroke:        var(--ink-100);
  stroke-width:  1;
  fill:          none;
}

.cma-position-map-axis-box {
  fill:          none;
  stroke:        var(--ink-300);
  stroke-width:  1.5;
}

.cma-position-map-tick {
  font-size:    10px;
  fill:         var(--ink-500);
  font-family:  inherit;
}

.cma-position-map-axis-label {
  font-size:    11px;
  fill:         var(--ink-700);
  font-weight:  600;
  font-family:  inherit;
}

/* ── Data bubbles ─────────────────────────────────────────────── */
.cma-position-map-dot {
  opacity:      0.82;
  stroke:       #fff;
  stroke-width: 1.5;
  cursor:       pointer;
  transition:   opacity 0.12s, r 0.12s;
}

.cma-position-map-dot:hover {
  opacity:      1;
  stroke-width: 2.5;
}

.cma-position-map-dot--sm {
  stroke:       var(--sm-dark-blue);
  stroke-width: 2;
}

/* ── Regression trendline ─────────────────────────────────────── */
.cma-position-map-trendline {
  stroke:           var(--ink-500);
  stroke-width:     2;
  stroke-dasharray: 6 4;
  fill:             none;
  pointer-events:   none;
}

/* ── $/sqft contour lines ─────────────────────────────────────── */
.cma-position-map-contour {
  stroke:           var(--ink-300);
  stroke-width:     1.5;
  stroke-dasharray: 4 4;
  fill:             none;
  pointer-events:   none;
}

.cma-position-map-contour-label {
  font-size:    9px;
  fill:         var(--ink-300);
  font-family:  inherit;
  pointer-events: none;
}

/* ── Ghost trail lines ────────────────────────────────────────── */
.cma-position-map-ghost {
  stroke-width:     1.5;
  stroke-dasharray: 3 3;
  opacity:          0.4;
  fill:             none;
  pointer-events:   none;
}

.cma-position-map-ghost-dot {
  opacity:      0.35;
  pointer-events: none;
}

/* ── Median crosshair ─────────────────────────────────────────── */
.cma-position-map-crosshair-h,
.cma-position-map-crosshair-v {
  stroke:           var(--ink-500);
  stroke-width:     1.5;
  stroke-dasharray: 5 3;
  fill:             none;
  pointer-events:   none;
}

.cma-position-map-crosshair-handle {
  fill:        #fff;
  stroke:      var(--ink-500);
  stroke-width: 2;
  cursor:      grab;
}

.cma-position-map-crosshair-handle:active {
  cursor: grabbing;
}

/* ── Flyout card ──────────────────────────────────────────────── */
.cma-position-map-flyout {
  position:      absolute;
  z-index:       20;
  background:    #fff;
  border:        1.5px solid var(--ink-300);
  border-radius: 8px;
  padding:       12px 14px;
  min-width:     200px;
  max-width:     260px;
  box-shadow:    0 4px 16px rgba(0,0,0,0.12);
  font-size:     12px;
  color:         var(--ink-900);
}

.cma-position-map-flyout-close {
  position:    absolute;
  top:         6px;
  right:       8px;
  border:      none;
  background:  transparent;
  font-size:   16px;
  color:       var(--ink-500);
  cursor:      pointer;
  line-height: 1;
  padding:     0;
}

.cma-position-map-flyout-close:hover {
  color: var(--ink-900);
}

.cma-position-map-flyout-name {
  font-weight:   700;
  font-size:     13px;
  margin-bottom: 2px;
  padding-right: 20px;
}

.cma-position-map-flyout-community {
  font-size:     11px;
  color:         var(--ink-500);
  margin-bottom: 8px;
}

.cma-position-map-flyout-row {
  display:         flex;
  justify-content: space-between;
  gap:             8px;
  margin-bottom:   3px;
}

.cma-position-map-flyout-row span:first-child {
  color:     var(--ink-500);
  flex-shrink: 0;
}

.cma-position-map-flyout-row span:last-child {
  font-weight: 600;
  text-align:  right;
}

.cma-position-map-flyout-meta {
  font-size:    11px;
  color:        var(--ink-500);
  margin-top:   6px;
  margin-bottom: 10px;
}

.cma-position-map-flyout-actions {
  display:   flex;
  flex-wrap: wrap;
  gap:       6px;
}

/* ── Regression equation footer ───────────────────────────────── */
.cma-position-map-equation {
  font-size:   11px;
  color:       var(--ink-500);
  padding:     2px 4px;
  min-height:  16px;
  font-variant-numeric: tabular-nums;
}

/* ── Empty state ──────────────────────────────────────────────── */
.cma-position-map-shell .cma-empty {
  text-align:  center;
  padding:     48px 24px;
  color:       var(--ink-500);
}

.cma-position-map-shell .cma-empty-hint {
  font-size:   12px;
  margin-top:  6px;
}

/* === APPROACH TIMELINE === (Phase 8 — merged 2026-05-07) */

/* Phase 8 — Timeline approach styles */
/* Prefix: .cma-timeline-* */
/* Do NOT redefine .cma-trend-insufficient (Phase 6) or .cma-freshness-pill* (Phase 7). */
/* Uses only tokens defined in styles.css. */

/* ── Outer wrapper ─────────────────────────────────────────────── */
.cma-timeline-shell {
  padding: var(--sp-4) var(--sp-5);
}

/* ── Window period pills ───────────────────────────────────────── */
/* 3mo / 6mo / 12mo segmented control — calls controls.onChangeWindow(N). */
.cma-timeline-window-pills {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}

/* ── Main grid ─────────────────────────────────────────────────── */
/* CSS grid: 1 label column + 4 metric columns. */
.cma-timeline-grid {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ink-100);
  border-radius: 8px;
  overflow: hidden;
}

/* ── Grid column header row ────────────────────────────────────── */
.cma-timeline-grid-header {
  display: grid;
  grid-template-columns: 180px repeat(4, 1fr);
  background: var(--ink-100);
  border-bottom: 1px solid var(--ink-100);
}

.cma-timeline-col-header {
  padding: var(--sp-2) var(--sp-3);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
}

.cma-timeline-col-header--label {
  text-align: left;
}

/* ── Community row ─────────────────────────────────────────────── */
.cma-timeline-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  border-bottom: 1px solid var(--ink-100);
  align-items: stretch;
}

.cma-timeline-row:last-child {
  border-bottom: none;
}

/* SM row gets a subtle highlight so it stands out at top */
.cma-timeline-row--sm {
  background: #f4f8fa;
}

/* ── Row label cell ────────────────────────────────────────────── */
/* Community name + freshness pill */
.cma-timeline-row-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-3);
  border-right: 1px solid var(--ink-100);
  font-size: 13px;
  color: var(--ink-900, #1a2e35);
  line-height: 1.3;
  min-width: 0;
  word-break: break-word;
}

/* ── Cells container (wraps 4 metric cells in a row) ───────────── */
.cma-timeline-cells {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

/* ── Single sparkline cell ─────────────────────────────────────── */
.cma-timeline-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-2) var(--sp-3);
  border-right: 1px solid var(--ink-100);
  cursor: pointer;
  transition: background 0.1s;
  min-height: 60px;
  position: relative;
}

.cma-timeline-cell:last-child {
  border-right: none;
}

.cma-timeline-cell:hover {
  background: rgba(30, 77, 96, 0.05);
}

.cma-timeline-cell:focus-visible {
  outline: 2px solid var(--sm-dark-blue);
  outline-offset: -2px;
}

/* Insufficient / no-data states */
.cma-timeline-cell--insufficient,
.cma-timeline-cell--no-data {
  cursor: default;
}

.cma-timeline-cell--insufficient:hover,
.cma-timeline-cell--no-data:hover {
  background: none;
}

/* ── Sparkline SVG (120×24) ────────────────────────────────────── */
.cma-timeline-cell-sparkline {
  display: block;
  margin: 0 auto var(--sp-1);
}

/* ── Event triangle overlay container ──────────────────────────── */
/* Sits above the sparkline; contains ▲ SVGs for event markers. */
.cma-timeline-event-triangles {
  height: 8px;
  margin-bottom: 1px;
  position: relative;
  width: 120px;
}

/* ── Triangle event marker ─────────────────────────────────────── */
/* Rendered as inline SVG polygon, color: var(--sm-pink). */
.cma-timeline-event-triangle {
  display: inline-block;
}

/* ── Bottom row: value + delta ──────────────────────────────────── */
.cma-timeline-cell-bottom {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Latest value label (bold) ─────────────────────────────────── */
.cma-timeline-cell-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--sm-dark-blue);
  white-space: nowrap;
}

/* ── Delta caption ─────────────────────────────────────────────── */
.cma-timeline-cell-delta {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* Green: better-for-buyer direction */
.cma-timeline-cell-delta--good {
  color: var(--success);
}

/* Red: worse-for-buyer direction */
.cma-timeline-cell-delta--bad {
  color: var(--danger);
}

/* ── ⚠ warn marker (>5% absolute move) ────────────────────────── */
.cma-timeline-cell-warn {
  font-size: 11px;
  color: var(--warning);
  margin-left: 2px;
}

/* ── Modal body: full-size chart ───────────────────────────────── */
/* Overrides nothing from .modal-overlay/.modal/.modal-header/.modal-title/
   .modal-close/.modal-body — those stay as defined in styles.css.          */
.cma-timeline-modal {
  max-width: 680px;
  width: 100%;
}

/* ── Modal chart container ─────────────────────────────────────── */
.cma-timeline-modal .modal-body {
  padding: var(--sp-5);
  max-height: 75vh;
  overflow-y: auto;
}

/* ── Event log table ───────────────────────────────────────────── */
.cma-timeline-modal-events {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: var(--sp-3);
}

.cma-timeline-modal-events th,
.cma-timeline-modal-events td {
  padding: var(--sp-1) var(--sp-3);
  text-align: left;
}

.cma-timeline-modal-events thead tr {
  border-bottom: 1px solid var(--ink-100);
}

.cma-timeline-modal-events tbody tr:hover {
  background: var(--ink-100);
}

.cma-timeline-modal-events th {
  color: var(--ink-500);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* === APPROACH HEATMAP === (Phase 8 — merged 2026-05-07) */

/* Phase 8 — Heatmap approach styles */
/* All classes prefixed .cma-heatmap-* to avoid collisions.
   Uses only existing design tokens from styles.css:1-81.
   Does NOT redefine .modal-overlay, .sales-table, or .cma-empty. */

/* ── Outer shell ──────────────────────────────────────────────── */
.cma-heatmap-shell {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5);
  position: relative; /* tooltip anchor */
}

/* ── Controls row (window pills + legend) ─────────────────────── */
.cma-heatmap-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

/* ── Window pills: 90d / 180d / 365d segmented control ─────────── */
.cma-heatmap-window-pills {
  display: flex;
  gap: 0;
}

.cma-heatmap-window-pills .btn {
  border-radius: 0;
  border-right-width: 0;
}

.cma-heatmap-window-pills .btn:first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.cma-heatmap-window-pills .btn:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  border-right-width: 1.5px;
}

.cma-heatmap-window-pills .btn.is-active {
  background: var(--sm-dark-blue);
  color: var(--surface);
  border-color: var(--sm-dark-blue);
}

/* ── Legend ───────────────────────────────────────────────────── */
.cma-heatmap-legend {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-left: auto;
}

.cma-heatmap-legend-label {
  font-size: var(--fs-xs);
  color: var(--ink-500);
  font-weight: 600;
  white-space: nowrap;
}

.cma-heatmap-legend-item {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.cma-heatmap-legend-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--ink-300);
}

.cma-heatmap-legend-lbl {
  font-size: var(--fs-xs);
  color: var(--ink-700);
}

/* ── SVG wrapper (horizontal scroll on narrow viewports) ─────── */
.cma-heatmap-svg-wrap {
  width: 100%;
  overflow-x: auto;
}

.cma-heatmap-svg {
  display: block;
  overflow: visible;
}

/* ── Community name labels (left axis) ─────────────────────────── */
.cma-heatmap-row-label {
  font-size: 11px;
  fill: var(--ink-700);
  font-family: inherit;
  dominant-baseline: middle;
  cursor: default;
  user-select: none;
}

/* ── Cells — 5 intensity tiers ─────────────────────────────────── */
.cma-heatmap-cell {
  cursor: pointer;
  transition: opacity 0.1s;
}

.cma-heatmap-cell:hover {
  opacity: 0.8;
}

/* Tier 0: no activity — light grey */
.cma-heatmap-cell--intensity-0 {
  fill: var(--ink-100);
}

/* Tier 1: 1 contract — lightest brand blue */
.cma-heatmap-cell--intensity-1 {
  fill: var(--sm-light-blue-soft);
}

/* Tier 2: 2 contracts — ~30% saturation */
.cma-heatmap-cell--intensity-2 {
  fill: #b3cdd9;
}

/* Tier 3: 3–4 contracts — ~60% saturation */
.cma-heatmap-cell--intensity-3 {
  fill: #6a9db3;
}

/* Tier 4: 5+ contracts — full sm-dark-blue */
.cma-heatmap-cell--intensity-4 {
  fill: var(--sm-dark-blue);
}

/* ── Weekend tint overlay ─────────────────────────────────────── */
.cma-heatmap-weekend {
  fill: var(--ink-900);
  opacity: 0.06;
  pointer-events: none;
}

/* ── Bottom date axis labels ────────────────────────────────────── */
.cma-heatmap-axis-label {
  font-size: 10px;
  fill: var(--ink-500);
  font-family: inherit;
  dominant-baseline: hanging;
  user-select: none;
}

/* ── Hover tooltip ──────────────────────────────────────────────── */
.cma-heatmap-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--ink-900);
  color: var(--surface);
  font-size: var(--fs-xs);
  padding: 5px var(--sp-3);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  z-index: 200;
  box-shadow: var(--elev-2);
  line-height: var(--lh-base);
}

/* === CMA — PHASE 10 (mobile-compact + responsive sweep — merged 2026-05-07) === */

/* ── SubA: mobile-compact view + skeletons + empty states ── */
/* Phase 10 — SubA: mobile-compact view + skeletons + empty states */

/* ── Skeleton shimmer keyframe ───────────────────────────────── */
@keyframes cma-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

/* ── Skeleton base ───────────────────────────────────────────── */
.cma-skeleton {
  background: var(--ink-100);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.cma-skeleton-line {
  display: block;
  height: 14px;
  border-radius: var(--radius-sm);
  background: linear-gradient(
    90deg,
    var(--ink-100) 25%,
    var(--surface-subtle) 50%,
    var(--ink-100) 75%
  );
  background-size: 800px 100%;
  animation: cma-shimmer 1.4s ease-in-out infinite;
  margin-bottom: var(--sp-2);
}

.cma-skeleton-line--wide   { width: 80%; }
.cma-skeleton-line--medium { width: 55%; }
.cma-skeleton-line--narrow { width: 35%; }
.cma-skeleton-line--tall   { height: 20px; }

.cma-skeleton-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--ink-100);
}

.cma-skeleton-row .cma-skeleton-line {
  margin-bottom: 0;
}

/* ── Skeleton table ──────────────────────────────────────────── */
/* Mimics the eventual scoreboard/tabular layout for loading state */
.cma-skeleton-table {
  padding: var(--sp-5);
}

.cma-skeleton-table-header {
  display: flex;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--ink-100);
}

.cma-skeleton-table-header .cma-skeleton-line {
  flex: 1;
  height: 18px;
  margin-bottom: 0;
}

.cma-skeleton-table-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

/* ── Empty state ─────────────────────────────────────────────── */
.cma-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sp-12) var(--sp-8);
  color: var(--ink-500);
  gap: var(--sp-3);
}

.cma-empty-state-icon {
  font-size: 40px;
  line-height: 1;
  margin-bottom: var(--sp-2);
}

.cma-empty-state-title {
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--ink-700);
}

.cma-empty-state-body {
  font-size: var(--fs-sm);
  color: var(--ink-500);
  max-width: 320px;
  line-height: var(--lh-base);
}

.cma-empty-state-cta {
  margin-top: var(--sp-2);
}

/* ── Mobile shell wrapper ────────────────────────────────────── */
.cma-mobile-shell {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
}

/* ── SM sticky card ──────────────────────────────────────────── */
.cma-mobile-sm-card {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--sm-dark-blue);
  color: #fff;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 2px solid var(--sm-dark-blue-hover);
  box-shadow: var(--elev-1);
}

.cma-mobile-sm-name {
  font-size: var(--fs-sm);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}

.cma-mobile-sm-metrics {
  display: flex;
  gap: var(--sp-6);
}

.cma-mobile-sm-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cma-mobile-sm-metric-label {
  font-size: var(--fs-xs);
  opacity: 0.75;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cma-mobile-sm-metric-value {
  font-size: var(--fs-base);
  font-weight: 700;
}

/* ── Comp cycler ─────────────────────────────────────────────── */
.cma-mobile-comp-cycler {
  flex: 1;
  padding: var(--sp-4);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Comp card ───────────────────────────────────────────────── */
.cma-mobile-card {
  background: var(--surface);
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--elev-1);
  touch-action: pan-y;         /* allow vertical scroll; horizontal captured for swipe */
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
  transition: transform 0.18s ease;
}

.cma-mobile-card--swiping {
  /* transform applied inline during touchmove */
  box-shadow: var(--elev-2);
}

.cma-mobile-card-header {
  background: var(--surface-subtle);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--ink-100);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-2);
}

.cma-mobile-card-title {
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--ink-900);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.cma-mobile-card-position {
  font-size: var(--fs-xs);
  color: var(--ink-500);
  white-space: nowrap;
  padding-top: 2px;
}

.cma-mobile-card-body {
  padding: var(--sp-2) 0;
}

/* ── Metric rows ─────────────────────────────────────────────── */
.cma-mobile-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--ink-100);
  gap: var(--sp-3);
  font-size: var(--fs-sm);
}

.cma-mobile-row:last-child {
  border-bottom: none;
}

.cma-mobile-row-label {
  color: var(--ink-500);
  flex-shrink: 0;
}

.cma-mobile-row-value {
  color: var(--ink-900);
  font-weight: 600;
  text-align: right;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ── Delta pills ─────────────────────────────────────────────── */
.cma-mobile-delta {
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 1px 5px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.cma-mobile-delta--higher {
  background: var(--danger-soft);
  color: var(--danger);
}

.cma-mobile-delta--lower {
  background: var(--success-soft);
  color: var(--success);
}

.cma-mobile-delta--neutral {
  background: var(--ink-100);
  color: var(--ink-500);
}

/* ── Arrow buttons + dot indicators ─────────────────────────── */
.cma-mobile-arrows {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.cma-mobile-dots {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 1;
  justify-content: center;
}

.cma-mobile-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-300);
  transition: background 0.18s ease, transform 0.18s ease;
}

.cma-mobile-dot.is-active {
  background: var(--sm-dark-blue);
  transform: scale(1.25);
}

/* ── "Tap for full" link ─────────────────────────────────────── */
.cma-mobile-tap-for-full {
  font-size: var(--fs-xs);
  color: var(--sm-dark-blue);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.15s;
}

.cma-mobile-tap-for-full:hover {
  text-decoration-color: var(--sm-dark-blue);
}

/* ── SubB: responsive CSS sweep (1024 / 899 / 768 breakpoints) ── */
/* Phase 10 — SubB: responsive CSS sweep (1024px + 768px breakpoints) */

/*
 * ── Breakpoint summary ──────────────────────────────────────────────────────
 *
 * @media (max-width: 1024px)  — Tablet sweep
 *   • Approach picker pills: allow natural wrap, font-size → var(--fs-xs)
 *   • View-mode toggle: font-size → var(--fs-xs); tighten button padding
 *   • Scoreboard: tighten cell padding ~25%; allow scroll-wrap to scroll
 *   • Position Map: SVG hidden → ::before notice shown ("best on desktop")
 *   • Timeline: keep visible; tighten grid; enable horizontal scroll
 *   • Heatmap: keep visible; enable horizontal scroll on svg-wrap
 *
 * @media (max-width: 899px)   — Timeline + Heatmap fall-back
 *   • Timeline grid: hidden → ::before notice on shell
 *   • Heatmap SVG: hidden → ::before notice on shell
 *   • Position Map already hidden (cascades from 1024 rule)
 *
 * @media (max-width: 768px)   — Just before mobile-compact takes over
 *   • Inputs form: .cma-inputs-grid-3 → single column
 *   • Comp weight rows: stack name above stars (flex-direction column)
 *   • Drilldown modal body: full-width; internal table retains overflow-x auto
 *   • Plan Matches table cells: tighten padding
 *   • Module chrome: subnav + approach picker + mode toggle → overflow-x auto
 *     so content doesn't clip before JS routing fires at <768px
 *
 * INTENTIONALLY NOT DEFINED HERE (SubA owns):
 *   .cma-skeleton-*, .cma-empty-state*, .cma-mobile-*, .cma-mobile-card,
 *   .cma-mobile-comp-cycler, .cma-mobile-row
 * ────────────────────────────────────────────────────────────────────────── */


/* ══════════════════════════════════════════════════════════════════════════
   @media max-width: 1024px — Tablet sweep
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* ── Approach picker ──────────────────────────────────────────────────── */
  /* Allow pills to wrap onto a second row on tablet; shrink label text */
  .cma-approach-picker {
    flex-wrap: wrap;
    padding-bottom: var(--sp-2);
  }

  .cma-approach-picker-label {
    font-size: var(--fs-xs);
  }

  .cma-approach-picker .btn[data-approach] {
    font-size: var(--fs-xs);
    padding: 4px var(--sp-3);
  }

  /* ── View-mode toggle ─────────────────────────────────────────────────── */
  .cma-mode-toggle .btn {
    font-size: var(--fs-xs);
    padding: 4px var(--sp-3);
  }

  /* ── Scoreboard ───────────────────────────────────────────────────────── */
  /* Tighten cell padding ~25%; scroll-wrap already has overflow-x: auto;
     no change needed there — just confirm table can shrink */
  .cma-scoreboard-shell {
    gap: var(--sp-2);
    padding: var(--sp-3) 0;
  }

  .cma-scoreboard-table {
    font-size: var(--fs-xs);
  }

  .cma-scoreboard-cell {
    padding: var(--sp-2) var(--sp-3);  /* was sp-3 / sp-4 → ~25% reduction */
    min-width: 100px;                  /* was 120px */
  }

  .cma-scoreboard-cell--label {
    min-width: 120px;                  /* was 140px */
    font-size: var(--fs-xs);
  }

  .cma-scoreboard-header-row .cma-scoreboard-cell {
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-xs);
  }

  .cma-scoreboard-sparkline-cell {
    padding: var(--sp-1) var(--sp-3);
    min-width: 100px;
  }

  /* Focus mode: tighten to match reduced baseline */
  .cma-scoreboard--focus .cma-scoreboard-cell {
    padding: var(--sp-3) var(--sp-4);
    min-width: 160px;
  }

  .cma-scoreboard--focus .cma-scoreboard-cell--label {
    min-width: 130px;
  }

  /* ── Position Map — hide SVG; show "Best on desktop" notice ───────────── */
  /* All child visual elements under chart-wrap are suppressed.
     The ::before pseudo-element on the shell delivers the copy.
     Canonical copy per spec (guardrail #8):
     "Position Map is best viewed on desktop (≥1024px). Try Scoreboard or
     Tables for narrower viewports." */

  .cma-position-map-chart-wrap,
  .cma-position-map-controls,
  .cma-position-map-legend,
  .cma-position-map-equation {
    display: none;
  }

  .cma-position-map-svg {
    display: none;
  }

  .cma-position-map-shell {
    padding: var(--sp-6) var(--sp-5);
    position: relative;
  }

  .cma-position-map-shell::before {
    content: "Position Map is best viewed on desktop (\2265 1024px). Try Scoreboard or Tables for narrower viewports.";
    display: block;
    text-align: center;
    padding: var(--sp-8) var(--sp-6);
    font-size: var(--fs-sm);
    color: var(--ink-500);
    background: var(--canvas);
    border: 1px dashed var(--ink-300);
    border-radius: var(--radius-md);
    line-height: var(--lh-base);
  }

  /* ── Timeline — keep visible; tighten grid; enable scroll ────────────── */
  .cma-timeline-shell {
    padding: var(--sp-3) var(--sp-4);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .cma-timeline-grid {
    min-width: 600px; /* prevent collapse below readable width; allow scroll */
  }

  .cma-timeline-grid-header {
    grid-template-columns: 140px repeat(4, 1fr); /* label col narrower */
  }

  .cma-timeline-row {
    grid-template-columns: 140px 1fr;
  }

  .cma-timeline-col-header {
    padding: var(--sp-1) var(--sp-2);
    font-size: 11px;
  }

  .cma-timeline-row-label {
    padding: var(--sp-2) var(--sp-2);
    font-size: 12px;
    min-width: 0;
  }

  .cma-timeline-cell {
    padding: var(--sp-1) var(--sp-2);
    min-height: 52px;
  }

  /* ── Heatmap — keep visible; enable horizontal scroll ────────────────── */
  .cma-heatmap-shell {
    padding: var(--sp-4);
  }

  .cma-heatmap-controls {
    gap: var(--sp-3);
  }

  .cma-heatmap-svg-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Legend: drop to left-aligned below the controls on tablet */
  .cma-heatmap-legend {
    margin-left: 0;
    flex-wrap: wrap;
  }

}


/* ══════════════════════════════════════════════════════════════════════════
   @media max-width: 899px — Timeline + Heatmap fall back to "Best on desktop"
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {

  /* ── Timeline — hide grid; show notice ───────────────────────────────── */
  /* Canonical copy: "Timeline is best viewed at 900px and above. Try
     Scoreboard or Tables on mobile." */

  .cma-timeline-grid,
  .cma-timeline-window-pills {
    display: none;
  }

  .cma-timeline-shell {
    padding: var(--sp-6) var(--sp-5);
    overflow-x: visible; /* reset the scroll wrapper from 1024 block */
  }

  .cma-timeline-shell::before {
    content: "Timeline is best viewed at 900px and above. Try Scoreboard or Tables on mobile.";
    display: block;
    text-align: center;
    padding: var(--sp-8) var(--sp-6);
    font-size: var(--fs-sm);
    color: var(--ink-500);
    background: var(--canvas);
    border: 1px dashed var(--ink-300);
    border-radius: var(--radius-md);
    line-height: var(--lh-base);
  }

  /* ── Heatmap — hide SVG; show notice ─────────────────────────────────── */
  /* Canonical copy: "Heatmap is best viewed at 900px and above. Try
     Scoreboard or Tables on mobile." */

  .cma-heatmap-svg-wrap {
    display: none;
  }

  .cma-heatmap-shell {
    padding: var(--sp-6) var(--sp-5);
  }

  .cma-heatmap-shell::before {
    content: "Heatmap is best viewed at 900px and above. Try Scoreboard or Tables on mobile.";
    display: block;
    text-align: center;
    padding: var(--sp-8) var(--sp-6);
    font-size: var(--fs-sm);
    color: var(--ink-500);
    background: var(--canvas);
    border: 1px dashed var(--ink-300);
    border-radius: var(--radius-md);
    line-height: var(--lh-base);
  }

  /* Heatmap controls: also hide when chart is hidden (no useful controls) */
  .cma-heatmap-controls {
    display: none;
  }

  /* Position Map already hidden via 1024px rule above — no override needed */

}


/* ══════════════════════════════════════════════════════════════════════════
   @media max-width: 768px — Just before mobile-compact takes over
   Note: at <768px, JS routes to mobileCompactView (SubA). These rules
   handle the edge where the desktop view briefly renders at exactly 768px,
   and serve as defensive fallbacks for the inputs/modal/chrome.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Module-level chrome: horizontal scroll safety net ────────────────── */
  /* Prevents hard clipping before the JS viewport dispatcher fires */
  .cma-subnav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 var(--sp-4);
  }

  .cma-mode-toggle {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--sp-2) var(--sp-4);
    gap: 0; /* prevent wrapping into multiple rows */
  }

  .cma-approach-picker {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap; /* single row, scroll horizontally */
    padding: var(--sp-2) var(--sp-4) var(--sp-2);
  }

  /* ── Inputs view: collapse 3-col grid to single column ────────────────── */
  /* .cma-inputs-grid-3 already gets 1-col at 600px (Phase 4 rule);
     this adds explicit coverage at 768px to match breakpoint language. */
  .cma-inputs-grid-3 {
    grid-template-columns: 1fr;
  }

  .cma-inputs-shell {
    padding: var(--sp-4) var(--sp-4) var(--sp-6);
  }

  .cma-inputs-section {
    padding: var(--sp-4) var(--sp-4);
  }

  /* ── Comp weight rows: stack name above star rating ───────────────────── */
  .cma-comp-weight-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-3);
  }

  /* ── Plan drilldown modal: full-width body ────────────────────────────── */
  /* .cma-drilldown-table-wrap already has overflow-x: auto (Phase 7).
     Ensure modal itself stretches full viewport width on narrow screens. */
  .cma-drilldown-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* ── Plan Matches table: tighten cell padding ─────────────────────────── */
  .cma-plan-match-row td {
    padding: var(--sp-2) var(--sp-2);
    font-size: var(--fs-xs);
  }

  /* ── Market-context pill row ──────────────────────────────────────────── */
  .cma-market-pills {
    padding: var(--sp-2) var(--sp-4);
    gap: var(--sp-1);
  }

  /* ── Filter row ───────────────────────────────────────────────────────── */
  .cma-filter-row {
    padding: var(--sp-2) var(--sp-4);
    flex-wrap: wrap;
  }

  /* ── Page header: reduce padding ─────────────────────────────────────── */
  .cma-page-header {
    padding: var(--sp-3) var(--sp-4);
  }

}

/* =================================================================
   === CMA — PHASE 15 (landing redesign) ===
   Concept B: Split Frame — Position Map + Insight Rail.
   Append-only. Do not edit prior sentinel blocks.
   Added: 2026-05-11.
   ================================================================= */

/* ── Landing frame grid ─────────────────────────────────────────────────── */

@media (min-width: 1024px) {
  .cma-landing-frame {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--sp-6);
  }
}

.cma-landing-main {
  /* Left column: hosts #cma-content-area + approach picker row */
}

.cma-insight-rail {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  /* No card background — sits on canvas */
}

/* ── Headline sentence (above the map, inside left column) ──────────────── */

.cma-headline {
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--ink-700);
  max-width: 75ch;
  margin: 0 0 var(--sp-3) 0;
}

/* ── Insight Rail tiles — shared base ───────────────────────────────────── */

.cma-rail-tile {
  padding: var(--sp-4);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--ink-300);
  box-shadow: var(--elev-1);
}

/* ── Tile shapes (varied, not identical cards) ───────────────────────────── */

/* 1. Stat shape: label / large value / delta caption */
.cma-rail-tile--stat .cma-rail-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cma-rail-tile--stat .cma-rail-value {
  font-size: var(--fs-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cma-rail-tile--stat .cma-rail-delta {
  font-size: var(--fs-sm);
  font-weight: 500;
}

/* 2. Count + trend arrow shape: label / slightly smaller value / inline arrow */
.cma-rail-tile--count .cma-rail-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cma-rail-tile--count .cma-rail-value {
  font-size: var(--fs-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* 3. Sparkline shape: label on top, then SVG sparkline chart slot */
.cma-rail-tile--sparkline .cma-rail-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cma-rail-tile--sparkline .cma-rail-chart-slot {
  min-height: 48px;
}

/* 4. Dot row shape: label on top, then freshness dots in a flex row */
.cma-rail-tile--dots .cma-rail-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cma-rail-tile--dots .cma-rail-dot-row {
  display: flex;
  gap: var(--sp-1);
}

/* ── Stat value / label / delta / dot conventions ───────────────────────── */

.cma-rail-value {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}

.cma-rail-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cma-rail-delta {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.cma-rail-delta.is-positive { color: var(--success); }
.cma-rail-delta.is-negative { color: var(--danger); }
.cma-rail-delta.is-neutral  { color: var(--ink-500); }

.cma-rail-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.cma-rail-dot.is-fresh { background: var(--success); }
.cma-rail-dot.is-aging { background: var(--warning); }
.cma-rail-dot.is-stale { background: var(--danger); }
.cma-rail-dot.is-empty { background: var(--ink-300); }

/* ── Drilldown link list (below tiles) ──────────────────────────────────── */
/* Links inherit .btn-outline and .btn-sm from styles.css (confirmed at lines 373 and 390) */

.cma-rail-drilldowns {
  border-top: 1px solid var(--ink-300);
  padding-top: var(--sp-3);
  margin-top: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.cma-rail-drilldowns a {
  display: block;
  text-align: left;
}

/* ── Module-level freshness chip (page-header subtitle slot) ────────────── */

.cma-module-freshness {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-sm);
}
.cma-module-freshness.is-fresh { color: var(--success); }
.cma-module-freshness.is-aging { color: var(--warning); }
.cma-module-freshness.is-stale { color: var(--danger); }

/* ── Hover states on clickable rail tiles (subtle, no scale) ────────────── */

.cma-rail-tile.is-clickable {
  cursor: pointer;
  transition: outline-color 150ms ease-out;
}
.cma-rail-tile.is-clickable:hover {
  outline: 1px solid var(--sm-light-blue);
}
.cma-rail-tile.is-clickable:focus-visible {
  outline: 2px solid var(--sm-light-blue);
  outline-offset: 2px;
}

/* ── Responsive: tablet (max 1023px) — single column, horizontal rail ───── */

@media (max-width: 1023px) {
  .cma-landing-frame {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  .cma-insight-rail {
    flex-direction: row;
    overflow-x: auto;
    gap: var(--sp-3);
  }
  .cma-rail-tile {
    min-width: 220px;
    flex-shrink: 0;
  }
}

/* ── Responsive: mobile (max 767px) — defer to mobileCompactView.js ─────── */
/* mobileCompactView.js renders inside .cma-landing-frame, so the container
   must stay visible. Hide only the Phase 15 desktop chrome (insight rail,
   headline slot, rail controls row). mobileCompactView owns the full layout
   at this breakpoint; Phase 15 elements are desktop-only. */

@media (max-width: 767px) {
  .cma-landing-frame {
    display: block;
  }
  .cma-insight-rail,
  #cma-headline-slot,
  .cma-headline,
  .cma-rail-controls-row,
  .cma-rail-comps {
    display: none;
  }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .cma-rail-tile.is-clickable {
    transition: none;
  }
}

/* =================================================================
   === CMA -- PHASE 15.1 (landing polish pass) ===
   Rail controls row (view dropdown + segmented mode toggle),
   comp chips relocated to rail, edge padding fix, design pass.
   Append-only. Impeccable rules applied.
   Added: 2026-05-11.
   ================================================================= */

/* ── Phase 7.5 Subagent D: stat tile mode caption ───────────────────────── */
/* Sub-text beneath the $/sqft value annotating the active PRICING × ADJUSTMENT
   mode (e.g. "base · unadjusted"). Appended in Phase 15.1 sentinel block per
   append-only convention. Tokens: --fs-xs (12px), --ink-500 (#6a7c83), --sp-1 (4px). */

.cma-rail-mode-caption {
  display: block;
  font-size: var(--fs-xs);
  color: var(--ink-500);
  letter-spacing: 0.04em;
  text-transform: lowercase;
  margin-top: var(--sp-1);
}

/* ── Rail controls row (top of right rail) ──────────────────────────────── */

.cma-rail-controls-row {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-2) 0;
  margin-bottom: var(--sp-4);
}
.cma-view-dropdown { flex: 1 1 auto; min-width: 0; }
.cma-mode-toggle  { flex: 0 0 auto; }

/* ── View dropdown -- button face ───────────────────────────────────────── */

.cma-view-dropdown__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-md);
  color: var(--ink-700);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.cma-view-dropdown__btn:hover { border-color: var(--sm-light-blue); }
.cma-view-dropdown__btn[aria-expanded="true"] {
  border-color: var(--sm-dark-blue);
  box-shadow: var(--elev-1);
}
.cma-view-dropdown__btn:focus-visible {
  outline: 2px solid var(--sm-light-blue);
  outline-offset: 2px;
}
.cma-view-dropdown__btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.cma-view-dropdown__icon { flex: 0 0 16px; width: 16px; height: 16px; }
.cma-view-dropdown__label { flex: 1 1 auto; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cma-view-dropdown__caret {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  transition: transform 150ms ease-out;
}
.cma-view-dropdown__btn[aria-expanded="true"] .cma-view-dropdown__caret {
  transform: rotate(180deg);
}

/* ── View dropdown -- popover panel ─────────────────────────────────────── */

.cma-view-dropdown__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--surface);
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-2);
  padding: var(--sp-2);
  min-width: 220px;
  list-style: none;
  margin: 0;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 120ms ease-out, transform 120ms ease-out;
}
.cma-view-dropdown__panel.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.cma-view-dropdown__panel--flip-up {
  top: auto;
  bottom: calc(100% + 4px);
  transform: translateY(4px);
}
.cma-view-dropdown__panel--flip-up.is-open { transform: translateY(0); }
.cma-view-dropdown { position: relative; }

/* ── View dropdown -- items ─────────────────────────────────────────────── */

.cma-view-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--ink-900);
  cursor: pointer;
  user-select: none;
}
.cma-view-dropdown__item:hover { background: var(--ink-100); }
.cma-view-dropdown__item[aria-selected="true"] {
  background: var(--sm-light-blue-soft);
  color: var(--sm-dark-blue);
  font-weight: 600;
}
.cma-view-dropdown__item:focus-visible {
  outline: 2px solid var(--sm-light-blue);
  outline-offset: -2px;
}
.cma-view-dropdown__item-icon-slot {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}
.cma-view-dropdown__item-check { display: none; }
.cma-view-dropdown__item[aria-selected="true"] .cma-view-dropdown__item-check { display: block; width: 16px; height: 16px; }
.cma-view-dropdown__item-label { flex: 1 1 auto; }

/* ── Mode toggle -- segmented pill with sliding indicator ───────────────── */

.cma-mode-toggle {
  position: relative;
  display: inline-flex;
  background: var(--ink-100);
  border-radius: var(--radius-pill);
  padding: var(--sp-1);
  gap: 0;
}
.cma-mode-toggle::before {
  content: '';
  position: absolute;
  top: var(--sp-1);
  left: var(--sp-1);
  width: calc(50% - var(--sp-1));
  height: calc(100% - var(--sp-1) * 2);
  background: var(--surface);
  border-radius: var(--radius-pill);
  box-shadow: var(--elev-1);
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 0;
}
.cma-mode-toggle[data-mode="trend"]::before {
  transform: translateX(100%);
}
.cma-mode-toggle__btn {
  position: relative;
  z-index: 1;
  padding: var(--sp-1) var(--sp-3);
  border: none;
  background: transparent;
  color: var(--ink-500);
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  transition: color 150ms ease-out;
}
.cma-mode-toggle__btn[aria-checked="true"] { color: var(--sm-dark-blue); }
.cma-mode-toggle:focus-within {
  outline: 2px solid var(--sm-light-blue);
  outline-offset: 2px;
  border-radius: var(--radius-pill);
}

/* ── Rail comp chip block ────────────────────────────────────────────────── */

.cma-rail-comps {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--ink-300);
}
.cma-rail-comps__bulk-row {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-xs);
}
.cma-rail-comps__bulk-btn {
  background: none;
  border: none;
  color: var(--sm-dark-blue);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.cma-rail-comps__bulk-btn:hover { text-decoration: underline; }
.cma-rail-comps__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2);
}
.cma-rail-comps__empty {
  font-size: var(--fs-sm);
  color: var(--ink-500);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: flex-start;
}

/* ── Rail comp chips ─────────────────────────────────────────────────────── */

.cma-rail-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  max-width: 100%;
  padding: var(--sp-1) var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-md);
  color: var(--ink-500);
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out, transform 120ms ease-out;
}
.cma-rail-chip:hover {
  border-color: var(--sm-light-blue);
  color: var(--ink-700);
}
.cma-rail-chip.is-visible {
  background: var(--sm-dark-blue);
  border-color: var(--sm-dark-blue);
  color: var(--surface);
}
.cma-rail-chip.is-visible:hover {
  background: var(--sm-dark-blue-hover);
  border-color: var(--sm-dark-blue-hover);
  color: var(--surface);
}
.cma-rail-chip:focus-visible {
  outline: 2px solid var(--sm-light-blue);
  outline-offset: 2px;
}
.cma-rail-chip.is-pulsing { transform: scale(1.04); }
.cma-rail-chip__dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.cma-rail-chip__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 18ch;
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .cma-view-dropdown__panel { transition: none !important; }
  .cma-mode-toggle::before { transition: none !important; }
  .cma-rail-chip { transition-property: background-color, border-color, color; transition-duration: 150ms; /* hover stays, scale pulse off */ }
  .cma-rail-chip.is-pulsing { transform: none; }
  /* Caret rotation deliberately preserved as state cue */
}

/* =================================================================
   === CMA -- PHASE 7 SLIDE-OVER CSS MIGRATION (from slideOver.js) ===
   Migrated from the injectStyles() function in slideOver.js (lines 20-137).
   Token-translated; raw px values replaced where 4/8-scale tokens exist.
   Panel width 400px retained as justified non-scale value (see note below).
   Added: 2026-05-11.
   ================================================================= */

/* ── Slide-over panel container ─────────────────────────────────────────── */

/* NOTE: width: 400px is retained as-is. The nearest 4-multiple below is
   384px (var(--sp-6) * 16 = not a token) and 400px is a well-established
   side-panel convention. This is the only non-scale px value in this block. */

.cma-slide-over {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  background: var(--surface);
  border-left: 1px solid var(--ink-300);
  box-shadow: var(--elev-2);
  display: flex;
  flex-direction: column;
  z-index: 50;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 200ms ease-out;
  outline: none;
}

.cma-slide-over.is-open {
  transform: translateX(0);
}

.cma-slide-over.is-closing {
  transform: translateX(100%);
  transition: transform 150ms ease-in;
}

/* ── Slide-over: tablet/mobile full-width fallback (max 1023px) ─────────── */

@media (max-width: 1023px) {
  .cma-slide-over {
    width: calc(100% - var(--sp-4));   /* 100% - 16px; matches original calc(100% - 16px) */
    left: var(--sp-2);                 /* 8px; matches original left: 8px */
    right: var(--sp-2);               /* 8px; matches original right: 8px */
    border-left: none;
    border: 1px solid var(--ink-300);
    border-radius: var(--radius-lg);
  }
}

/* ── Slide-over: header ──────────────────────────────────────────────────── */

.cma-slide-over__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);   /* 16px / 20px */
  border-bottom: 1px solid var(--ink-300);
  flex-shrink: 0;
}

.cma-slide-over__title {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink-900);
  line-height: var(--lh-tight);
}

/* ── Slide-over: close button ────────────────────────────────────────────── */

/* NOTE: width/height/min-width 32px is a standard icon-button dimension
   (16px icon slot + var(--sp-4) padding combined). Kept as-is; on the 4-scale. */

.cma-slide-over__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  font-size: var(--fs-lg);
  color: var(--ink-500);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  transition: color 120ms ease;
}

.cma-slide-over__close:hover {
  color: var(--ink-900);
}

.cma-slide-over__close:focus-visible {
  outline: 2px solid var(--sm-dark-blue);
  outline-offset: 2px;
}

/* ── Slide-over: body ────────────────────────────────────────────────────── */

.cma-slide-over__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--sp-5);               /* 20px */
  color: var(--ink-700);
  font-size: var(--fs-sm);
}

/* ── Slide-over: footer ──────────────────────────────────────────────────── */

.cma-slide-over__footer {
  padding: var(--sp-4) var(--sp-5);   /* 16px / 20px */
  border-top: 1px solid var(--ink-300);
  flex-shrink: 0;
}

/* ── Slide-over: reduced motion ──────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .cma-slide-over,
  .cma-slide-over.is-open,
  .cma-slide-over.is-closing {
    transition: none;
  }
}

/* ── Phase 16.7b: breathing room between Current/Inputs tab strip and Position Map controls row ── */

.cma-position-map-controls {
  margin-top: var(--sp-5);            /* 20px gap below the .bm-subnav tab strip */
}