/* ui.css — the primitive contract's own classes (ui.js), on top of style.css's tokens and
   button family. Loads after style.css and story.css so its legacy bridges win.
   Breakpoints: 720 and 1400 only. */

/* ---- type roles (judge/type-judgment.md §C): seven roles, one face ------------------- */

/* ---- filter row and controls (§2) --------------------------------------------------- */

.control { display: inline-flex; align-items: center; gap: var(--s1); height: var(--h-ctl-sm); padding: 0 var(--s2);
  border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--panel); color: var(--text);
  font: 500 var(--fs-body)/18px var(--font-body); cursor: pointer; white-space: nowrap; }
.control:hover { background: var(--panel2); }
.control.on { border-color: var(--text); }

.control select, .control input { appearance: none; -webkit-appearance: none; background: transparent; border: 0; padding: 0;
  height: 100%; min-width: 0; font: inherit; color: var(--text); cursor: pointer; border-radius: 0; }
.control select:focus-visible, .control input:focus-visible { outline: none; }
.control:has(:focus-visible) { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.control select option { background: var(--panel); color: var(--text); }

/* the segmented control: 28px segments, each with its own hairline, butted into one box */

/* ---- info box and tag (§3) ---------------------------------------------------------- */
.infobox { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--s3); align-items: start;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: var(--s3) var(--s4);
  color: var(--text); font-size: var(--fs-body); line-height: 1.6; text-align: left; margin: 0; }
.infobox + .infobox { margin-top: var(--s4); }
.ib-glyph { display: block; width: 16px; height: 16px; border-radius: 50%; margin-top: var(--s1); border: 2px solid var(--dim); }
.ib-finding .ib-glyph { border: 0; background: var(--accent); }
.ib-warning .ib-glyph { border-color: var(--attention); }
.ib-text { min-width: 0; }
.ib-text > * + * { margin-top: var(--s2); }
.ib-p { margin: 0; overflow-wrap: anywhere; }
.ib-word { font-weight: 600; }
.ib-link { white-space: nowrap; }
.ib-act { display: flex; gap: var(--s2); }
.tag { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--s2); border-radius: var(--r-ctl);
  background: var(--panel2); color: var(--text); font: 500 var(--fs-caption)/1 var(--font-body); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  :root { --t-fade: 0ms; --t-move: 0ms; }   /* primitives §8: both durations to 0 */
}

/* ---- the figure that links -------------------------------------------------------- */