mixc

src/styles/base.css

@@ -201,6 +201,34 @@ p { overflow-wrap: break-word; }
 .night .button { background: var(--paper); color: var(--night); }
 .night .button:hover { background: var(--paper-deep); }
 
+/* Segmented choice: a row of radio options in the menu bar's language, hairline cells and mono
+   caps, the checked one filled with ink. Used for the research filters and the Insights filter.
+   Each option draws its own frame and overlaps its neighbours by one line, so a wrapped row
+   never leaves a rule running past its last option. */
+.choice-group { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: var(--space-2); }
+.choice-group__legend { padding: 0; color: var(--ink-muted); font-size: var(--step-small); }
+.choices { display: flex; flex-wrap: wrap; padding: 0 var(--hairline) var(--hairline) 0; }
+.choice { position: relative; display: flex; margin: 0 calc(-1 * var(--hairline)) calc(-1 * var(--hairline)) 0; }
+.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
+.choice > span {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-3) var(--space-4);
+  border: var(--hairline) solid var(--line);
+  font-family: var(--font-mono);
+  font-size: var(--step-micro);
+  font-weight: var(--weight-medium);
+  letter-spacing: var(--track-caps);
+  text-transform: uppercase;
+  line-height: 1;
+  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
+}
+.choice:hover > span { background: color-mix(in srgb, var(--ink) var(--tint-hover), transparent); }
+.choice input:checked + span { background: var(--ink); color: var(--paper); }
+.choice input:focus-visible + span { outline: var(--focus-width) solid var(--ink); outline-offset: calc(-1 * var(--focus-width) - 2px); }
+.choice__n { color: inherit; opacity: 0.6; }
+
 /* Prose: long-form text */
 .prose { max-width: var(--measure); }
 .prose > * + * { margin-top: var(--space-5); }