/* SHARED·BROWCHIP (1041) — the consolidated browse / select chip.
 * Job: "Pick an area — or see where else to go next." Three variants, one chassis.
 *   .bc                — base (cursor, focus-visible, :active, button-reset)
 *   .bc--area          — sentence-case outline pill, body font, 13px  (was .pha-areas .chip)
 *   .bc--nav           — sentence-case teal-filled pill, label font, 14px, with icon (was .xfc .chip)
 *   .bc--food          — square tile, multi-line, icon-on-top, with .picked state (was .wn-fchip)
 * ⚠️ "A second exists when the CONTENT or the BEHAVIOUR differs." Here the three variants share
 *    the same picking behaviour (click → do one thing); height, fill and label case are
 *    PRESENTATION. A label is just a label; an icon is just an icon; a ✓ when picked is just
 *    the picked state of the picking job. (D-740)
 * ⚠️ .picked is the food variant's only named state — the area and nav variants have no
 *    selection concept (every click navigates), so a global .bc[aria-selected] would have been
 *    a fork. The variant-scoped state is the version that did not invent behaviour. */
.bc {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  text-decoration: none;
  /* no token-exception: the chassis itself is zero-valued. */
}
.bc:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.bc:active { transform: scale(0.97); }

/* ── variant: area — sentence-case teal-outlined pill, body font, 13px.
 *    was .pha-areas .chip (article.css:293) — phase read's "Go deeper by area" row. */
.bc--area {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-500);
  color: var(--nav-active);
  background: var(--surface-card);
  border: 1px solid var(--teal-200);
  border-radius: var(--radius-pill);
  padding: var(--space-4) var(--space-12);
} /* token-exception */

/* ── variant: nav — teal-filled pill, label font, 14px, always carries an icon.
 *    was .xfc .chip (explorefoot.css:13) — keep-exploring footer.
 * ⚠️ NO text-transform, NO letter-spacing. The 2026-09-05 merge copied those two lines off the
 *    foot's EYEBROW (.xfc .fl, explorefoot.css:11) onto the CHIP, which never had them — the
 *    source of truth is .wkr-navchip (cells/wk19/read-canonical.html:510) and it carries
 *    neither. The labels it renders are sentence case ("The 4-month window"), so uppercasing
 *    them was visible: that chip measured 214.9px against the shipped 191.0px. Removed
 *    2026-09-07; the merge's premise was that nothing visible changes. */
.bc--nav {
  font-family: var(--font-label);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-600);
  color: var(--teal-700);
  background: var(--teal-100);
  border: 1px solid var(--teal-200);
  border-radius: var(--radius-pill);
  padding: var(--space-8) var(--space-12);
} /* token-exception */
.bc--nav svg {
  width: var(--dim-16);
  height: var(--dim-16);
  color: var(--accent);
  flex-shrink: 0;
}

/* ── variant: food — square multi-line tile, icon-on-top, .picked state with ✓ top-right.
 *    was .wn-fchip (weaning.css:148) — solids add-feed food-category picker. */
.bc--food {
  position: relative;
  background: var(--card-soft);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: var(--space-12) var(--space-4) var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-label);
  color: var(--ink-600);
  line-height: 1.15;
  text-align: center;
  min-width: 76px;
} /* token-exception */
.bc--food .bc-ic {
  font-size: var(--dim-24);
  line-height: 1;
}
.bc--food.is-picked {
  border-color: var(--accent);
  background: #fff;
  color: var(--ink);
  font-weight: 600;
}
.bc--food.is-picked::after {
  content: '✓';
  position: absolute;
  top: var(--space-4);
  right: var(--space-8);
  color: var(--accent);
  font-weight: 800;
  font-size: var(--text-meta);
}