/* 06-components/choice — a labelled checkbox group (the wiki category and blog
   tag pickers). A <fieldset> whose <legend> reads as the same mono uppercase
   field label; the options flow into an intrinsic grid so a dozen long names
   wrap into tidy columns rather than one runaway stack, and a single option
   still reads fine. When the group is empty (zero categories / zero tags) the
   view renders the __empty note instead — never a stray box or dangling label. */
.c-choices {
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.c-choices > legend {
  padding: 0;
  font-family: var(--font-chrome);
  font-size: var(--text-xs);
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  margin-block-end: 0.5rem;
}
.c-choices__grid {
  display: grid;
  gap: var(--space-xs) var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

/* One option: the checkbox and its name on a hairline-boxed row, mono, so the
   group reads as a bank of terminal toggles. Focus lifts the keyline to brand. */
.c-choice {
  display: flex;
  align-items: baseline;
  gap: 0.6ch;
  font-family: var(--font-chrome);
  font-size: var(--text-sm);
  color: var(--ink);
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--ground) 80%, #000);
  cursor: pointer;
}
.c-choice:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--rule)); }
.c-choice:focus-within {
  border-color: var(--brand);
  box-shadow: var(--focus-ring);
}
.c-choice input { accent-color: var(--brand); flex: none; }

/* The honest empty state when no categories/tags exist in the DB. */
.c-choices__empty {
  font-family: var(--font-chrome);
  font-size: var(--text-sm);
  color: var(--ink-dim);
}