/* .chip, .tag — styles for src/lib/expand.mjs's `x-chip`, `x-tag`.
   Load AFTER tokens.css. See public/components/README.md for load order and
   the split rationale.

   Two markers that look similar and are kept apart on purpose: a chip names a
   service we are connected to, a tag names where an offer came from. Restyling
   one must not move the other, which is exactly what a shared class with a
   modifier would prevent.

   .chips has no owning component function — it is only expand.mjs's
   <x-chips> wrapper tag — and lives here because it exists to hold a row of
   chips. */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
}

/* Resting nav-item geometry, so a row of chips sits at the rhythm of the nav
   above it. Recessed rather than raised — surface.page inside a card, so the
   row reads as content the card contains and not as small cards of its own.
   No hover and no pointer: nothing here is clickable.

   flex: 0 0 auto because .chips is a flex row and a flex item shrinks below its
   content by default — a long label like "Google Search Console" would wrap and
   break out of its own border. */
.chip {
  display: inline-block;
  flex: 0 0 auto;
  padding: var(--nav-item-padding-block) var(--nav-item-padding-inline);
  background-color: var(--color-surface-page);
  border: var(--border-width-hairline) solid var(--color-border-strong);
  border-radius: var(--radius-default);
  color: var(--color-text-primary);
  font-size: var(--size-200);
  font-weight: var(--weight-medium);
  line-height: var(--line-height-ui);
}

/* Quieter than the heading it sits beside: a marker that shouts reads as a
   warning, and this is a disclosure. Uppercase and tracked rather than a
   monospace family, which would be a new font dependency for one element. */
.tag {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border: var(--border-width-hairline) solid var(--color-border-subtle);
  border-radius: var(--radius-default);
  color: var(--color-text-muted);
  font-size: var(--size-100);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: var(--line-height-ui);
  vertical-align: middle;
}

/* A third kind of marker, distinct from both above: .chip names a
   connected service and .tag names an offer's provenance, but this names
   the actual shipped product a section is about — an icon plus its name,
   sitting above the section's real heading rather than folded into it.
   The heading describes the benefit ("Keeps an eye on your Google
   listing..."); the kicker is what tells the reader which product does
   that. Icon and text share one color/size via the parent so a future
   product's icon only has to swap its <svg>, not restate sizing. */
.product-kicker {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin-bottom: var(--space-1);
  font-size: var(--size-500);
  font-weight: var(--weight-bold);
  color: var(--color-mark-accent);
}

.product-kicker__icon {
  width: 1.1em;
  height: 1.1em;
  flex: none;
}