/* M248 item 12: "every time there is a mention of with david or manu on the Schedule, show the
   little teacher pill like on the app." One shared sheet across all seven retreat templates (the
   plain photo-led fallback and the six designed skins), because each of those defines its own
   --sage / --sage-tint at the same values under its own wrapper class, so this reads correctly
   wherever it loads. Hangs off the 'se-retreat-css' handle, which exists in BOTH the skinned and
   the fallback enqueue branch in samadhi-events.php - see manual/frontend-and-assets.md on why a
   sheet depending on a handle that is not always registered gets silently dropped.

   The markup itself is built by se-retreat-teacher-pill-v1.js at runtime, because the six skins
   hardcode their Schedule as static HTML with a bare <small>with David</small>, and not every
   <small> in a .prog-row is a teacher mention (some are notes like "Silence begins after dinner").
   The JS decides which ones are teacher mentions; this sheet only styles the result. */

[class^="se-retreat"] .prog-row .n small.se-teacher-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-style: normal;
}

[class^="se-retreat"] .se-teacher-pill {
  display: inline-flex;
  align-items: center;
  background: var(--sage-tint);
  color: #3f4a35;
  border: 1px solid #d7e0cc;
  border-radius: 999px;
  padding: 2px 10px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.6;
  white-space: nowrap;
}

[class^="se-retreat"] .se-teacher-extra {
  color: var(--ink-faint);
  font-weight: 600;
  font-size: 12.5px;
}

@media (max-width: 480px) {
  /* Narrow cards: let a two-teacher row wrap onto its own line rather than being squeezed. */
  [class^="se-retreat"] .prog-row .n small.se-teacher-line { row-gap: 4px; }
}