/* ── Scorecard ── */
.scorecards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.scorecard {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 16px;
  position: relative;
  overflow: hidden;
}

/* Status stripe — left edge of the card. The headline number stays neutral
   so a quick scan doesn't cost the GM their reading flow; the stripe carries
   the on/off-track signal at the periphery. */
.scorecard--status::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--scorecard-status, var(--accent));
}

.scorecard-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.scorecard-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
}

.scorecard-sub {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 4px;
}

/* ── Indicator Chips ── */
.indicators {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.indicator {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 10px 12px;
  text-align: center;
}

.indicator-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-dim);
  margin-bottom: 4px;
}

.indicator-value {
  font-size: 20px;
  font-weight: 700;
}

.indicator-trend {
  font-size: 11px;
  margin-top: 2px;
}

/* ── Progress Bar ── */
.progress-wrap { margin-top: 8px; }
.progress-bar {
  height: 6px;
  background: var(--bg);
  border-radius: 3px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}
.progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 4px;
}

/* ── Data Tables ── */
.data-table-wrap {
  overflow-y: auto;
  border: 1px solid var(--card-border);
  border-radius: 8px;
}

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

.data-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Sticky also applied at the cell level. Chrome/Firefox don't reliably
   honor position:sticky on <thead> when the table uses border-collapse:
   collapse — the thead doesn't form a real rendering context and the
   sticky behaviour drops silently. Per-th sticky covers that quirk and
   keeps the column header pinned during in-wrapper scroll. Bug brief
   Jun-04 #4 (Member Retention Onboarding table). */
.data-table th {
  background: var(--card);
  padding: 10px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--card-border);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  position: sticky;
  top: 0;
  z-index: 2;
}
.data-table th:hover { color: var(--text); }

.data-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--card-border);
}

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

.data-table .sort-arrow {
  font-size: 10px;
  margin-left: 4px;
}

/* ── Drillable cells ──
 * Universal "click for more detail" affordance: dotted underline (always
 * visible) + subtle bg on hover. Used on Monthly Tracker actual cells that
 * open a per-cell drill-down popover (Autopays Processed, Total Members,
 * etc. — see monthly-tracker.js::ensureDrillDelegation).
 *
 * Why dotted underline: universal web convention for "click for info".
 * `currentColor` keeps the line tinted by the cell's semantic color
 * (green/orange/red) so it never fights the value's status. Always-on
 * (vs hover-only) so the user knows what's clickable without fishing. */
td.sc-drillable {
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: background-color 120ms ease;
}
td.sc-drillable:hover {
  background-image: linear-gradient(rgba(255,255,255,0.06), rgba(255,255,255,0.06));
}
td.sc-drillable:focus-visible {
  outline: 2px solid var(--accent, #00d4aa);
  outline-offset: -2px;
}

/* ── Status Cards Row ── */
.status-cards {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.status-card {
  flex: 1;
  min-width: 80px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-top: 3px solid var(--text-dim);
  border-radius: 8px;
  padding: 10px 12px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s;
}
.status-card:hover { border-color: var(--text-dim); }
.status-card.active { border-color: var(--accent); }

.status-card-count {
  font-size: 22px;
  font-weight: 700;
}

.status-card-label {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* ── Section Headers ── */
.section-title {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}

.section-subtitle {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 12px;
}

/* ── Hover tooltip ── */
/* Apply `.tip` + `data-tip="…"` to any element that should show a hover
   tooltip. CSS-only, no JS needed. Used across tabs (Members table,
   Trial Buyers chips). Centered above the trigger. */
.tip { position: relative; }
.tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--bg-elevated);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--card-border);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  white-space: normal;
  max-width: 260px;
  min-width: 140px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease, transform 0.12s ease;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
.tip:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Responsive ── */
@media (max-width: 768px) {
  .scorecards { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .indicators { grid-template-columns: repeat(5, 1fr); overflow-x: auto; flex-wrap: nowrap; gap: 6px; }
  .indicator { min-width: 80px; }
  .scorecard-value { font-size: 22px; }
}

@media (max-width: 480px) {
  .scorecards { grid-template-columns: repeat(2, 1fr); }
  .indicators { display: flex; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .indicator { min-width: 76px; flex-shrink: 0; }
}

/* ── Outreach ledger: the "old enough to score" column ──────────────
   The cell is bare numbers ("16 of 110") under a single heading, because the
   phrase repeated in all nine cells on a full card and drowned the numbers.
   A heading can only sit above the cells if the column has a FIXED width —
   it used to be flex:0 0 auto, so every row started at a different x.

   ⚠ BELOW 480px THE HEADING GOES AND THE COLUMN GOES BACK TO AUTO WIDTH.
   132px out of a ~400px card left the prose column 60px and wrapped the
   longest row to seven lines: measured old vs new at a 400px content box, the
   middle column went 146px -> 60px, the worst row 61px -> 117px, and the whole
   card 546px -> 840px.

   ⚠ AND THE CELL STAYS BARE ON PHONE. The obvious move is to put the words
   back into each cell once the heading is gone, and it is wrong: "16 of 110
   old enough to score" measures ~154px, WIDER than the 132px column it would
   be replacing, so it makes the squeeze worse rather than undoing it. The
   pre-existing cell was short ("110 contacted", "n=34") — that is what made
   auto width cheap. Bare numbers are ~46px and restore it.

   What explains the numbers on phone is the card's own subhead, "Contacts
   logged 28 or more days ago, and what those members did since", which sits
   directly above them. The column heading is a desktop affordance. */
.ledger-matured-head { flex: 0 0 132px; text-align: right; }
.ledger-matured { flex: 0 0 132px; text-align: right; color: var(--text-dim); font-size: 11px; }
/* The prose column is flex:1 with the default min-width:auto, which refuses to
   shrink below its longest word and pushes the row wider than the card. */
.ledger-said { flex: 1; min-width: 0; }

@media (max-width: 480px) {
  .ledger-matured-row { display: none; }
  .ledger-matured { flex: 0 0 auto; }
}

/* ── Global tooltips ────────────────────────────────────────────────────
   Snappy replacement for the browser's ~1s native `title` tooltip. Apply
   by adding `data-tooltip="..."` to any element (or just leave `title=`
   — the shim in lib/tooltips.js migrates it on first hover). Multi-line
   content supported; positioned above the element by default. */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  white-space: normal;
  text-align: left;
  width: max-content;
  max-width: 360px;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  transition:
    opacity 0.12s ease-out,
    transform 0.12s ease-out,
    visibility 0s linear 0.12s;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition:
    opacity 0.15s ease-out 0.15s,
    transform 0.15s ease-out 0.15s,
    visibility 0s linear 0.15s;
}
/* Variant: tooltip points to the right (for elements near the left edge) */
[data-tooltip-pos="right"]::after {
  bottom: auto;
  left: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%) translateX(4px);
}
[data-tooltip-pos="right"]:hover::after,
[data-tooltip-pos="right"]:focus-visible::after {
  transform: translateY(-50%) translateX(0);
}