/* portal/css/organic.css
 * Organic Performance page — builds on executive.css. Adds source badges,
 * the sub-metric line, the methodology grid, and chart source rows.
 * All colors via design-system.css custom properties (no hardcoded hex).
 */

/* ── Source badges ─────────────────────────────────────────────────────── */
.src-badge {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-inset);
  color: var(--text-muted);
  white-space: nowrap;
}
.src-badge.src-callrail { color: var(--accent-success); border-color: rgba(16,185,129,0.35); background: rgba(16,185,129,0.10); }
.src-badge.src-ga4      { color: var(--accent-data);    border-color: rgba(37,99,235,0.35);  background: rgba(37,99,235,0.10); }
.src-badge.src-prior    { color: var(--text-subtle);    border-color: var(--border);          background: var(--surface-hover); }

/* Badge pinned to the corner of a metric card */
.metric-card { position: relative; }
.metric-card .src-badge {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
}

/* Secondary sub-metric line under the delta */
.metric-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Row of source badges under a chart */
.src-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

/* Month-to-date pace note next to the headline month */
.mtd-note {
  color: var(--text-muted);
  font-size: 0.82rem;
  margin-left: 0.4rem;
}

/* ── Methodology grid ──────────────────────────────────────────────────── */
.method-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.1rem;
}
.method-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  box-shadow: var(--shadow-sm);
}
.method-card h3 {
  color: var(--text);
  font-size: 1.02rem;
  font-weight: 700;
  margin: 0.6rem 0 0.5rem;
}
.method-card p {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0;
}
.method-card code {
  background: var(--surface-inset);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 0.05rem 0.3rem;
  font-size: 0.82rem;
  color: var(--text);
}
.method-card strong { color: var(--text); }

/* ── Month-by-month table: align numeric headers with their right-aligned
 *    data, and give the columns even, fixed widths so everything lines up. ── */
.channel-legend thead th.num { text-align: right; }

.month-table { table-layout: fixed; }
.month-table th,
.month-table td { white-space: nowrap; }
.month-table th:first-child,
.month-table td:first-child { width: 28%; }
.month-table th.num,
.month-table td.num { width: 18%; }