/* ============================================================================
   Shared preview helpers — section sub-labels, explanation text, and the
   keyboard-hint strip. Linked after _card.css / _dark.css in every preview
   card so these annotation patterns are defined ONCE instead of being copied
   into each file's local <style>. See notes/decisions.md "Preview helper
   styling (_help.css)".

   What lives here:
     .label-sm   — small uppercase caption above a sub-group of examples
                   (NOT the card's main .label title, which is in _card.css)
     .help       — designer annotation describing a control's behaviour
     .kbd-hint   — the single keyboard-hint strip; always placed AFTER the
                   controls (bottom of the card)
   ============================================================================ */

/* Section sub-label — the small uppercase caption that introduces a row /
   group of example controls inside a card. */
.label-sm {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-fg-tertiary);
  font-weight: 500;
  flex: none;                 /* don't shrink when it sits in a flex row */
}

/* Explanation text — short annotation under a field / beside a demo that
   describes what the control does or how it behaves. */
.help {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--color-fg-secondary);
}

/* ── Keyboard-hint strip ──────────────────────────────────────────────
   The ONE standard for inline keyboard help across every spec page. Always
   rendered AFTER the controls, at the bottom of the card, set off by a
   dashed top divider. Keycaps use a blue-ish tint: mono glyphs on the cool
   neutral-50 surface with a 2 px bottom border for a subtle keycap depth.
   Token-driven, so the tint flips correctly in dark mode. */
.kbd-hint {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px dashed var(--color-border-default);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--color-fg-tertiary);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 7px;
}
.kbd-hint kbd {
  font: 600 10.5px var(--font-mono);
  color: var(--color-fg-secondary);
  background: var(--gov-color-neutral-50);
  border: 1px solid var(--color-border-default);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 5px;
  line-height: 1.4;
  white-space: nowrap;
}
.kbd-hint .sep { color: var(--color-border-strong); }

/* ── Chip / showcase row helpers ──────────────────────────────────────
   Used by spec pages that lay out a full chip set next to its collapsed
   glyph set (comp-chips, and any future chip showcase). */

/* Inline row label — a mono caption that introduces a row of example chips
   (e.g. "Validity →"). Like .label-sm but monospaced + a min-width so the
   chip columns line up across stacked rows. */
.sub-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-fg-tertiary);
  font-weight: 500;
  font-family: var(--font-mono);
  white-space: nowrap;
  min-width: 72px;
}

/* Thin vertical divider between a full chip set and its collapsed glyph set
   on the same row. */
.row-divider {
  width: 1px;
  align-self: stretch;
  background: var(--color-border-default);
  margin: 0 4px;
  opacity: 0.6;
}

/* "↳ collapsed" / "↳ active" inline annotation next to a chip set. */
.collapsed-label {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--color-fg-tertiary);
  font-family: var(--font-mono);
  white-space: nowrap;
}