/* P2 tags: the board's neutral and settled tones, shared by both console themes. */
.ui-tag {
  display: inline-block;
  /* Its words' width, even in a column that stretches its children. */
  width: fit-content;
  max-width: 100%;
  padding: 2px calc(var(--space-4) / 2 - 1px);
  border-radius: var(--radius-sm);
  color: var(--muted);
  background: var(--track);
  font: var(--type-body-strong-weight) var(--type-meta-size)/var(--type-meta-leading) var(--font-sans);
  white-space: nowrap;
}
.ui-tag-warn { color: var(--warn); background: var(--warn-soft); }
.ui-tag-pos { color: var(--pos); background: var(--pos-soft); }
.ui-tag-you {
  padding-inline: calc(var(--space-3) / 2);
  border-radius: var(--radius-xs);
  color: var(--surface);
  background: var(--ink);
  font-weight: var(--type-section-title-weight);
}
.ui-tag-status {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  gap: var(--space-2);
  height: var(--size-control);
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--type-body-size);
}
.ui-tag-status > .ic {
  width: var(--space-4);
  height: var(--space-4);
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* H3a chips: the boards' marks and words on the shared theme tokens. */
.ui-attn-group { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; max-width: 100%; }
.ui-attn {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  gap: calc(var(--space-3) / 2);
  height: var(--size-pill);
  min-width: 0;
  padding: 0 calc(var(--space-5) / 2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font: var(--type-body-weight) var(--type-body-size)/var(--type-body-leading) var(--font-sans);
  text-decoration: none;
  cursor: pointer;
}
.ui-attn-mark { width: calc(var(--space-2) - 1px); height: calc(var(--space-2) - 1px); flex-shrink: 0; }
.ui-attn-act .ui-attn-mark { border-radius: var(--radius-full); background: var(--warn); }
.ui-attn-rule .ui-attn-mark { border-radius: calc(var(--space-1) / 2); background: var(--muted); }
.ui-attn-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-attn-chev { flex-shrink: 0; color: var(--faint); }
.ui-attn-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: var(--size-pill);
  height: var(--size-pill);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--muted);
  font: var(--type-body-weight) var(--type-body-size)/1 var(--font-sans);
  cursor: pointer;
}
.ui-toggle {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  gap: calc(var(--space-3) / 2);
  height: var(--size-chip);
  padding: 0 calc(var(--space-5) / 2);
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted);
  font: var(--type-body-strong-weight) var(--type-meta-size)/1 var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
}
.ui-toggle-on { border-color: var(--ink); color: var(--ink); }
.ui-toggle-dot { width: var(--space-2); height: var(--space-2); flex-shrink: 0; border-radius: var(--radius-full); background: var(--toggle-c); }
.ui-attn:hover,
.ui-attn-x:hover,
.ui-toggle:hover { background: var(--hover); }
.ui-attn:focus-visible,
.ui-attn-x:focus-visible,
.ui-toggle:focus-visible,
a.ui-cite-n:focus-visible,
a.ui-cite-addr:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); }

.ui-statechip {
  display: inline-flex;
  align-items: flex-start;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  gap: calc(var(--space-2) - 1px);
  padding: calc(var(--space-3) / 2) calc(var(--space-2) + 1px);
  border-radius: var(--radius-md);
  background: var(--track);
  color: var(--body);
  font: var(--type-body-strong-weight) var(--type-meta-size)/var(--type-figure-row-leading) var(--font-sans);
}
.ui-statechip-mark {
  box-sizing: border-box;
  flex-shrink: 0;
  width: calc(var(--space-5) / 2);
  height: calc(var(--space-5) / 2);
  margin-top: calc(var(--space-1) / 2);
  border-radius: var(--radius-full);
}
.ui-statechip-brand { background: var(--warn-soft); color: var(--warn); }
.ui-statechip-brand .ui-statechip-mark { border: 1.5px solid var(--warn); }
.ui-statechip-making { color: var(--ink); }
.ui-statechip-making .ui-statechip-mark { background: var(--ink); }
.ui-statechip-check .ui-statechip-mark { border: 1.5px dashed var(--muted); }
.ui-statechip-verdict { color: var(--body); }
.ui-statechip-verdict > .ui-vg { flex-shrink: 0; }
.ui-statechip-closed { color: var(--muted); }
.ui-statechip-closed .ui-statechip-mark { border: 1.5px solid var(--edge); }
.ui-statechip-reopened { background: var(--neg-soft); color: var(--neg); }
.ui-statechip-reopened .ui-statechip-mark { border: 1.5px solid var(--neg); }
.ui-statechip-words { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.ui-statechip-label { font-weight: var(--type-body-strong-weight); }
.ui-statechip-sub { font-weight: var(--type-body-weight); color: var(--muted); }

.ui-oc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: calc(var(--space-10) + var(--space-1));
  height: var(--size-chip);
  flex-shrink: 0;
  border: 0;
  border-radius: var(--radius-sm);
  font: var(--type-figure-row-weight) var(--type-meta-size)/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.ui-oc-recommended { background: var(--heat); color: var(--btn-ink); }
.ui-oc-named { border: 1.5px solid var(--heat); background: var(--surface); color: var(--ink); }
.ui-oc-not_named { background: var(--track); color: var(--muted); }
.ui-oc-couldnt_check,
.ui-oc-not_asked { border: 1.5px dashed var(--muted); background: transparent; color: var(--muted); }
.ui-oc-asking { background: var(--track); color: var(--muted); }

.ui-tone {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--space-3) / 2);
  color: var(--ink);
  font: var(--type-body-weight) var(--type-body-size)/var(--type-body-leading) var(--font-sans);
}
.ui-tone-swatch { width: var(--space-3); height: var(--space-3); border-radius: calc(var(--space-3) / 4); flex-shrink: 0; }
.ui-tone-dot { display: inline-block; width: var(--space-2); height: var(--space-2); border-radius: var(--radius-full); flex-shrink: 0; }
.ui-tone-pos .ui-tone-swatch,
.ui-tone-dot.ui-tone-pos { background: var(--tone-pos); }
.ui-tone-mix .ui-tone-swatch,
.ui-tone-dot.ui-tone-mix { background: repeating-linear-gradient(135deg, var(--tone-mix) 0 calc(var(--space-3) / 4), color-mix(in srgb, var(--tone-mix) 35%, transparent) calc(var(--space-3) / 4) calc(var(--space-5) / 4)); }
.ui-tone-neu .ui-tone-swatch,
.ui-tone-dot.ui-tone-neu { background: var(--tone-neu); }
.ui-tone-neg .ui-tone-swatch,
.ui-tone-dot.ui-tone-neg { background: var(--tone-neg); }
.ui-tone-glyph,
.ui-tone-word { color: var(--ink); }

.ui-cite { font: var(--type-meta-weight) var(--type-meta-size)/1 var(--font-mono); vertical-align: super; }
.ui-cite-n { color: var(--link); text-decoration: none; }
.ui-cite-row {
  display: grid;
  grid-template-columns: var(--space-5) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  font: var(--type-small-weight) var(--type-small-size)/var(--type-small-leading) var(--font-sans);
}
.ui-cite-num { color: var(--link); font: var(--type-figure-row-weight) var(--type-meta-size)/var(--type-meta-leading) var(--font-mono); font-variant-numeric: tabular-nums; }
.ui-cite-addr { min-width: 0; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
a.ui-cite-n:hover,
a.ui-cite-addr:hover { text-decoration: underline; text-underline-offset: calc(var(--space-1) / 2); }
.ui-cite-tag { padding: calc(var(--space-1) / 2) calc(var(--space-4) / 2 - 1px); border-radius: var(--radius-sm); font: var(--type-body-strong-weight) var(--type-meta-size)/var(--type-meta-leading) var(--font-sans); white-space: nowrap; }
.ui-cite-tag-owned,
.ui-cite-tag-names { color: var(--pos); background: var(--pos-soft); }
.ui-cite-tag-none { color: var(--muted); background: var(--track); }

.ui-vg { display: inline-flex; align-items: center; gap: calc(var(--space-2) - 1px); color: var(--body); font: var(--type-body-weight) var(--type-body-size)/var(--type-body-leading) var(--font-sans); vertical-align: middle; }
.ui-vg-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex-shrink: 0;
  border: 1.5px solid var(--edge);
  border-radius: var(--radius-full);
  font: 700 var(--type-meta-size)/1 var(--font-sans);
}
.ui-vg-16 .ui-vg-mark { width: var(--space-4); height: var(--space-4); }
.ui-vg-22 .ui-vg-mark { width: 22px; height: 22px; }
.ui-vg-verified .ui-vg-mark { border-color: var(--pos); background: var(--pos); color: var(--btn-ink); }
.ui-vg-not_improved .ui-vg-mark { border-color: var(--neg); background: var(--neg); color: var(--btn-ink); }
.ui-vg-inconclusive .ui-vg-mark { border-color: var(--edge); background: var(--track); color: var(--body); }
.ui-vg-waiting_for_check .ui-vg-mark { border: 1.5px dashed var(--muted); background: var(--surface); color: var(--muted); }
.ui-vg-word { color: var(--body); }