/* ============================================================
   WORD PILLS — a headline drawn in word pills (site/src/components/WordPills.astro, Pill, PillBreak, PillLine)
   Requires: tokens.css
   The frame and the base pills are shared; a page's own shapes (/stage flag, ribbon and ticket, the /ai bars)
   stay in the page's CSS and sit in the frame as any other piece — everything is in em of --ps, so the whole
   composition scales with one value (docs/layout-rules.md, «Shared pill/chip text tokens»).
   Geometry of the base pill — the live /ai, /manage and /mcp embeds (one Figma set, px ÷ 52 = em):
   a 71 box (line 65 + 6 under the text), 24 at the sides, radius 16 or round, a 5.6 dotted frame, 8 between pills.
   ============================================================ */

.word-pills {
  --ps: var(--text-pill-size);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.154em; /* 8 */
  font-size: var(--ps);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--text-pill-ls);
  color: var(--color-text-inverted);
}

/* Line breaks: zero-height breakers shown per width — one set of pills for every width */
.word-pills__br { flex-basis: 100%; height: 0; }
.word-pills__br--phone { display: none; }

/* ── Base pill ── */
.word-pill {
  display: block;
  padding: 0 0.462em 0.115em; /* 0 24 6 */
  border-radius: 0.308em;     /* 16 — «sq» */
  line-height: 1.25;          /* + the 6 under the text = the 71 box */
  white-space: nowrap;
}
.word-pill--pill { border-radius: var(--radius-pill); }
/* dotted: an outline takes no room, so the box stays 71 */
.word-pill--dotted {
  color: var(--color-text);
  outline: 0.108em dotted currentColor; /* 5.6 */
  outline-offset: -0.108em;
}

/* Fills — colour tokens. Text: dark by default, light on the deep fills; `ink` on the Pill overrides it. */
.word-pill--light-blue { background: var(--color-accent-light-blue); }
.word-pill--blue       { background: var(--color-accent-blue);       color: var(--color-text); }
.word-pill--green      { background: var(--color-accent-green); }
.word-pill--green-deep { background: var(--color-accent-green-deep); }
.word-pill--indigo     { background: var(--color-accent-indigo);     color: var(--color-text); }
.word-pill--purple     { background: var(--color-accent-purple);     color: var(--color-text); }
.word-pill--red        { background: var(--color-accent-red); }
.word-pill--salmon     { background: var(--color-accent-salmon); }
.word-pill--pink       { background: var(--color-accent-pink); }
.word-pill--orange     { background: var(--color-accent-orange); }
.word-pill--lime       { background: var(--color-accent-lime); }
.word-pill--primary    { background: var(--color-primary); }
.word-pill--white      { background: var(--color-bg-white); }
.word-pill--ink-dark  { color: var(--color-text-inverted); }
.word-pill--ink-light { color: var(--color-text); }

/* ── Phone composition (optional, the «phone» slot): its own lines, e.g. the /ai staircase ── */
.word-pills--phone { display: none; }
.word-pills__line { display: flex; align-items: center; gap: 0.1em; margin-left: var(--indent, 0); }

@media (max-width: 47.9375rem) {
  .word-pills { --ps: var(--text-pill-size-mobile); }
  .word-pills__br--phone { display: block; }
  .word-pills__br--desktop { display: none; }
  .word-pills--has-phone { display: none; }
  .word-pills--phone {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15em;
    width: fit-content;
    margin-inline: auto;
  }
}