/*
  Icon-chip lists — Roles We Fill, Services checklist, How It Works process
  steps. Each chip pairs a small inline SVG icon with its text label.

  Icons: Lucide (https://lucide.dev, github.com/lucide-icons/lucide),
  copied verbatim from Lucide's icons/*.svg source and pasted inline
  directly into each chip's markup (no separate asset files — matches this
  project's no-build-step, hand-edited-HTML approach). License: ISC
  (Copyright Lucide Icons and Contributors) for most
  icons used here; a few (database, life-buoy, monitor) are inherited from
  the Feather project and additionally MIT-licensed (Copyright 2013-present
  Cole Bemis). Both are short, permissive, OSI-approved licenses — free use,
  copy, modify, and redistribution, "AS IS" with no warranty. Full text:
  github.com/lucide-icons/lucide/blob/main/LICENSE. This is a neutral
  placeholder set chosen to be legible and sensibly matched to each label
  today, not a final branded set. Every chip's icon lives in its own
  .role-chip__icon <span> so a real branded icon can replace ONE chip's
  artwork later (swap the <svg> inside that one span) without touching the
  surrounding list/chip markup or any other chip.

  These lists used to render inside a red dev-warning .placeholder-block
  (placeholder.css) with a "MISSING — icon set not yet generated" label.
  That treatment is gone — a generic-but-real icon set is real content,
  not a placeholder — see PLAN_PROGRESS.md Prompt 8 notes.
*/

/* Visual Composition Audit V1 #5 -- a stable 3/2/1-column grid instead of
   flex-wrap, so a count that doesn't divide evenly (Roles/Services: 9,
   How It Works "at a glance": varies) can't leave an uneven, seemingly-
   incomplete final row and every chip gets equal height regardless of
   label length. French labels are longer than English, so chips wrap
   their own text onto a second line rather than shrinking font-size --
   min-height (not a fixed height) keeps the grid's rows even without
   truncating or forcing French copy to fit English's line count. */
.role-chip-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  list-style: none;
}

@media (max-width: 900px) {
  .role-chip-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Collapsing to one column at 560px turned a 9-chip list (Home, Services,
   Roles We Fill all have nine) into roughly half a screen of avoidable
   scroll on ordinary phones -- two columns keep fitting fine well below
   that (2026-08-09 mobile audit); only drop to one column on genuinely
   narrow devices where a column would otherwise be too tight to read. */
@media (max-width: 339px) {
  .role-chip-list {
    grid-template-columns: 1fr;
  }
}

.role-chip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  min-height: 3rem;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface-default);
  font-size: var(--font-small);
  font-weight: 700;
}

.role-chip__icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--color-brand-primary);
}

.role-chip__icon svg {
  width: 100%;
  height: 100%;
}

.role-chip__label {
  min-width: 0;
  color: var(--color-text-primary);
}

/* .role-chip-list--grid is applied on Home and Services markup for the one
   thing it adds on top of the base .role-chip-list rule above (already a
   responsive 3/2/1 grid, not flex-wrap -- see that rule's own comment):
   centering each chip's content, which reads better than left-aligned for
   a shorter, more tag-like label. Every grid-column/gap property would
   just duplicate the base rule, so it's not redeclared here. */
.role-chip-list--grid .role-chip {
  justify-content: center;
}