/* ================================================================
   TIERS — the "Four ways to work together" cards on the home page.
   Each card's accent color comes from the .tier-color-1..4 classes
   defined in shared/base.css (shared with the work cards).

   Cards sit flat on the page (border + accent edge only, no shadow)
   — they're content, not floating panels. container-type lets each
   card adapt to its own width wherever it's placed, not just react
   to viewport breakpoints.
   ================================================================ */

.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-block-end: 20px;
}
.tier-card {
  container-type: inline-size;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--tier-color);
  border-radius: var(--radius-card);
  padding: 20px;
}
.tier-card h3 { margin-block: 12px 10px; color: var(--text-primary); }
.tier-card p { color: var(--text-muted); font-size: 0.95rem; }

@container (max-width: 250px) {
  .tier-card { padding: 16px; }
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--tier-color);
  border: 1.5px solid var(--tier-color);
  color: #fff;
  border-radius: var(--radius-pill);
  padding-block: 3px;
  padding-inline: 12px;
  font-size: 0.78rem;
  font-weight: var(--weight-label);
}
/* The AI-marker icon reused wherever a badge signals AI involvement —
   same sparkle glyph as the chat-assistant button in the top nav. */
.badge svg { width: 12px; height: 12px; flex-shrink: 0; }

.tier-note {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--tier-color);
  border-radius: var(--radius-card);
  padding-block: 14px;
  padding-inline: 20px;
  font-size: 0.95rem;
  color: var(--text-primary);
  /* Always the "deep water" brand color — the note isn't tied to
     one specific tier, so it doesn't use a .tier-color-N class. */
  --tier-color: var(--color-deepwater);
}