/* ─────────────────────────────────────────────────────────────────────────────
   KIND — how a card says what sort of thing it is. (TKF-310)

   Until 2026-09-14 every card that carried a kind said so with a coloured left
   edge: `border-left: 3–6px solid <semantic>`, ~50 times across eight feature
   sheets at four different widths. That edge is the canonical machine-generated
   callout and read as one; it also made the CONTAINER carry the meaning, so a
   6px blue-vs-purple stripe was the only thing separating "info" from
   "celebration" — colour alone, which fails WCAG 1.4.1.

   The content carries the kind now, through two primitives, and the colour is
   decided here in ONE place:

     --kind        the kind's colour. Set by the [data-severity] map below for
                   insight cards; calendar and stage tiles set it themselves
                   from their zone / day classes.
     .tk-eyebrow   a small uppercase label in --kind above the title — the same
                   idiom as the dashboard's "SMART PICK" / "FROM YOUR PLAN", so
                   a rider meets one convention, not two. For cards with room.
     .tk-swatch    an 8px square in --kind at the head of the title — for tiles
                   too small for a word (calendar entries, plan-builder cells).
                   A square, not a dot: a dot beside an emoji reads as a bullet.

   A container that wants a kind does NOT draw it. It sets --kind (or takes it
   from data-severity) and puts one of the two primitives in its content. The
   next change of mind is then an edit to this file, not fifty.
   ───────────────────────────────────────────────────────────────────────────── */

/* The four severities the server emits — grep `'severity' =>` in api/coach.php —
   plus `critical`, never emitted, kept so a future one isn't silently blue.
   Both the dashboard column and the coach panel render the SAME feed, so this
   is the only map; an insight green in one and purple in the other reads as
   two different things. */
[data-severity="info"]        { --kind: var(--blue); }
[data-severity="suggestion"]  { --kind: var(--green); }
[data-severity="warning"]     { --kind: var(--amber-ink); }
[data-severity="celebration"] { --kind: var(--purple); }
[data-severity="critical"]    { --kind: var(--red); }

.tk-eyebrow {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--kind, var(--dim2));
  margin-bottom: 4px;
}

.tk-swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--kind, var(--dim3));
  margin-right: 6px;
  vertical-align: 0;
  flex-shrink: 0;
}