/* HOME·SPOTLIGHT — one collection, given the whole width · SINGLE SOURCE OF TRUTH.
 * Imported by BOTH workbench/home/spotlight.html AND the app (web/index.html).
 * Tokens only (D-421). Class prefix: spt-*. Do NOT restyle spt-* anywhere else.
 *
 * SELF-CONTAINED and RAISED, the same shell the checklist card wears and every other
 * Home module already wears (bake-off round 2, ruled 2026-09-20: "1"). Consistency on
 * Home is the point — the cards differ by what is IN them, never by what they are
 * made of. The rows inside are 1025 SHARED·CONTENT-ROW's .ct-*, styled by that card's
 * own sheet; nothing here touches those classes.
 */

.spt {
  margin: 0 var(--space-16) var(--space-12);
  background: var(--surface-card);
  border-radius: var(--radius-card-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-20) 0 var(--space-12);
}

/* The eyebrow says WHAT THIS SLOT IS, which is the one thing the collection's own
 * title cannot say. It is the app's word, not content — the same uppercase label
 * grammar the week hero's "WEEKS PREGNANT" uses. */
.spt-eyebrow {
  font-family: var(--font-label);
  font-weight: var(--weight-600);
  font-size: var(--text-meta);
  letter-spacing: var(--tracking-14);
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 0 var(--space-20);
  margin-bottom: var(--space-4);
}

/* Title and See-all door on one row, the door top-right — the same place every Home card keeps
 * it (ruled 2026-09-21). */
.spt-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-8);
  padding: 0 var(--space-20);
  margin: 0 0 var(--space-4);
} /* align-exception: .spt-head — the Fraunces title and the Inter See-all door share a TEXT BASELINE, deliberately not box-centred; the same reasoning .nh-mhead has always carried */

/* The collection's own title, in the display face — this is the thing she is being
 * offered, so it carries the weight rather than the eyebrow above it. */
.spt-title {
  font-family: var(--font-display);
  font-weight: var(--weight-600);
  font-size: var(--text-title);
  line-height: var(--leading-115);
  color: var(--text-primary);
  margin: 0;
}

/* "Collection · 9 items" — what it is and how big it is. Counted, never stored. */
.spt-meta {
  font-size: var(--text-body-sm);
  line-height: var(--leading-140);
  color: var(--text-secondary);
  padding: 0 var(--space-20);
  margin: 0 0 var(--space-12);
}

/* The rows sit on the card's own left edge, with the eyebrow, the title and the
 * count. The hairline between them runs the full width of that inset, which is what
 * makes the column read as one column.
 * ⚠️ Nothing here touches .ct-* — content-row.css already zeroes the first row's rule
 * (.ct-row:first-child), and the first row inside this box IS a first child. A host
 * that restyles another card's prefix is the two-owners defect check 16 exists for. */
.spt-rows { padding: 0 var(--space-20); }

.spt-door { flex: none; }