@import url("tokens.css");
@import url("plaque-divider.css");
@import url("plaque-field-seg.css?v=segcol7");
@import url("plaque-field-seg-layout.css?v=segcol7");
@import url("plaque-number.css?v=numcols1");

/* Plaque field — compact label+control shell (autotests-builder, forms) */

.plaque-field {
  display: flex;
  align-items: center;
  row-gap: 0;
  column-gap: var(--space-2);
  height: var(--plaque-control-height);
  min-height: var(--plaque-control-height);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  min-width: 0;
}

/* CANON: --many keeps label | divider | track (same 3-col as selects).
   Chips live in the track; wrap only inside column 3. Rule: plaque-many-first-row. */
.plaque-field--divided:has(> .plaque-field-seg-track--many),
.plaque-field--divided.plaque-field--stretch:has(> .plaque-field-seg-track--many) {
  display: grid;
  grid-template-columns: var(--plaque-mixed-label-col, max-content) 1px minmax(0, 1fr);
  align-items: start;
  height: auto;
  min-height: var(--plaque-control-height);
  padding-top: 0;
  padding-bottom: 0;
  overflow: visible;
  text-align: unset;
  background-color: var(--color-surface);
  /* 1px rule between wrap bands (= --plaque-seg-row-gap).
     Origin MUST be padding-box (same box as wrap bands). border-box + clip
     padding shifts the rule ~1px up → closer to chips above than below. */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent var(--plaque-seg-band-height),
    var(--plaque-seg-rule) var(--plaque-seg-band-height),
    var(--plaque-seg-rule) calc(var(--plaque-seg-band-height) + var(--plaque-seg-row-gap))
  );
  background-origin: padding-box;
  background-clip: padding-box;
  background-size: calc(100% - 2 * var(--plaque-divider-inset)) 100%;
  background-position: center top;
  background-repeat: no-repeat;
}

.plaque-field--divided:has(> .plaque-field-seg-track--many)::after {
  content: none;
  display: none;
  margin: 0;
  height: 0;
}

/* Label in wrap-band 1. align-self:start beats
   `.plaque-field--divided .plaque-field__label { align-self: center }` —
   shell align-items:start is not enough. Optical center stays inside the band
   via height:band + inline-flex align-items:center. */
.plaque-field--divided:has(> .plaque-field-seg-track--many) > .plaque-field__label,
.plaque-field--divided:has(> .plaque-field-seg-track--many) > .plaque-field__text {
  float: none;
  box-sizing: border-box;
  grid-column: 1;
  align-self: start;
  width: var(--plaque-mixed-label-col, max-content);
  min-width: 0;
  max-width: 100%;
  height: var(--plaque-seg-band-height);
  display: inline-flex;
  align-items: center;
  padding-right: var(--space-2);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* First-row only — optical center in band 1 when chips wrap in column 3. */
.plaque-field--divided:has(> .plaque-field-seg-track--many) > .plaque-divider {
  float: none;
  grid-column: 2;
  align-self: start;
  height: var(--plaque-divider-height, calc(var(--font-size-sm) * 1.35));
  min-height: var(--plaque-divider-height, calc(var(--font-size-sm) * 1.35));
  margin-block-start: calc(
    (var(--plaque-seg-band-height) - var(--plaque-divider-height, calc(var(--font-size-sm) * 1.35))) / 2
  );
  margin-right: 0;
  background: var(--plaque-seg-rule);
}

.plaque-field:not(:has(> .plaque-field-seg-track)) {
  padding: 0 var(--plaque-shell-pad-x);
}

/* .plaque-field--divided slot order: __label|__text · .plaque-divider · __control|__value|seg-track */

.plaque-field__label {
  flex-shrink: 0;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Human caption — not a config param id (autotests-builder uses __label) */

.plaque-field__text {
  flex-shrink: 0;
  font-size: var(--font-size-sm);
  font-weight: 400;
  line-height: 1.35;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plaque-field--divided .plaque-field__label,
.plaque-field--divided .plaque-field__text {
  /* Fill the 32px row and center glyphs — align-self:center on a
     content-height box sits the caption on the top of the shell. */
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  line-height: 1.35;
  padding-right: var(--space-2);
  border-right: 0;
}

.plaque-field--divided .plaque-divider {
  grid-column: 2;
}

/* Control slot — right edge (before select chevron); label-only left is on __label / __text */

.plaque-field__value {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--font-size-sm);
  line-height: 1.35;
  color: var(--color-text);
  text-align: right;
}

.plaque-field__control {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  padding: var(--space-1) 0;
  min-height: calc(var(--plaque-control-height) - 2px);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--font-size-sm);
  line-height: 1.35;
  text-align: right;
}

.plaque-field__control:focus {
  outline: none;
}

.plaque-field:focus-within {
  border-color: var(--color-primary);
}

select.plaque-field__control {
  appearance: none;
  -webkit-appearance: none;
  padding: 0 var(--plaque-select-trail) 0 0;
  text-align: right;
  cursor: pointer;
}

/*
 * Text input value — reserve the same right trail as the select chevron so a
 * plain <input> value lines up with select values sharing a column (e.g.
 * browserVersion under browserSize). Without it the input hugs the plaque edge
 * (only the --space-1 shell pad) while selects sit --plaque-select-trail in.
 */
input.plaque-field__control {
  padding-right: var(--plaque-select-trail);
}

/*
 * Multiline control (note body, comments). Shell grows with rows; label and
 * divider stay on the first line. Value is left-aligned — not a param id.
 * First line uses the same 1.35 as `__text` / `__label` (1.5 sits the
 * placeholder below the caption). No select-trail — there is no chevron.
 * Inner pad `--space-2` on all sides so the first line does not hug the
 * divider (left-aligned, unlike input/select). Shell end air
 * `--plaque-textarea-end` (5px) on right and bottom so the resize handle
 * sits equally off the frame.
 */
.plaque-field:has(> textarea.plaque-field__control) {
  height: auto;
  align-items: flex-start;
  overflow: visible;
  padding-right: var(--plaque-textarea-end);
  padding-bottom: var(--plaque-textarea-end);
}

.plaque-field:has(> textarea.plaque-field__control) > :is(.plaque-field__label, .plaque-field__text) {
  align-self: flex-start;
  padding-top: var(--space-2);
}

.plaque-field:has(> textarea.plaque-field__control) > .plaque-divider {
  align-self: flex-start;
  margin-top: var(--space-2);
}

textarea.plaque-field__control {
  padding: var(--space-2);
  min-height: calc(var(--control-height-md) * 2);
  text-align: left;
  line-height: 1.35;
  resize: vertical;
  field-sizing: content;
}

/*
 * Select chevron — rendered on the plaque shell, NOT the <select> background.
 * As an absolutely positioned ::after it is anchored to the shell's border-box
 * right edge (offset by --plaque-chevron-edge), so its distance from the visible
 * plaque border is identical in every container — grid cell (shell pad
 * --plaque-shell-pad-x), panel-stack and solo alike. The old background-position
 * calc guessed the shell padding (--space-2) and therefore drifted whenever a
 * field lived in a grid cell. Out of flow → never a grid/flex item, never shifts
 * layout. --plaque-select-trail still reserves room so the value never overlaps.
 */
.plaque-field:has(> select.plaque-field__control) {
  position: relative;
}

.plaque-field:has(> select.plaque-field__control)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--plaque-chevron-edge);
  width: var(--plaque-chevron-size);
  height: 6px;
  transform: translateY(-50%);
  background-image: var(--plaque-chevron-glyph);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--plaque-chevron-size) 6px;
  pointer-events: none;
}

.plaque-field > .plaque-field__control.input,
.plaque-field > select.plaque-field__control.input {
  min-width: 0;
  min-height: calc(var(--plaque-control-height) - 2px);
  padding: var(--space-1) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  /* Same tier as select/seg values — overrides `.input` base size. */
  font-size: var(--font-size-sm);
  line-height: 1.35;
}

.plaque-field > textarea.plaque-field__control.textarea {
  min-width: 0;
  min-height: calc(var(--control-height-md) * 2);
  padding: var(--space-2);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: var(--font-size-sm);
  line-height: 1.35;
}

.plaque-field > .plaque-field__control.input:focus-visible,
.plaque-field > select.plaque-field__control.input:focus-visible,
.plaque-field > textarea.plaque-field__control:focus-visible {
  outline: none;
}

.plaque-field > :is(input, select).plaque-field__control:-webkit-autofill,
.plaque-field > :is(input, select).plaque-field__control:-webkit-autofill:hover,
.plaque-field > :is(input, select).plaque-field__control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-text);
  caret-color: var(--color-text);
  -webkit-box-shadow: 0 0 0 1000px var(--color-surface) inset;
  box-shadow: 0 0 0 1000px var(--color-surface) inset;
  transition: background-color 5000s ease-in-out 0s;
}

.plaque-field-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.plaque-field-list--dense {
  gap: var(--space-1);
}

.plaque-field-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--plaque-control-height);
  min-height: var(--plaque-control-height);
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: pointer;
  font-size: var(--font-size-sm);
  line-height: 1.35;
  color: var(--color-text);
}

.plaque-field-check:has(.plaque-field-check__input:checked) {
  border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
}

.plaque-field-check__input {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  margin: 0;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}

.plaque-field-option {
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--plaque-control-height);
  min-height: var(--plaque-control-height);
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--font-size-sm);
  line-height: 1.35;
  text-align: right;
  cursor: pointer;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out);
}

.plaque-field-option:hover {
  border-color: color-mix(in srgb, var(--color-border) 50%, var(--color-primary));
}

.plaque-field-option--on {
  border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
  font-weight: 600;
}

/* Full-width divided — 3-col grid: label · divider · control */

.plaque-field--divided.plaque-field--stretch {
  display: grid;
  grid-template-columns: var(--plaque-mixed-label-col, max-content) 1px minmax(0, 1fr);
  align-items: center;
  row-gap: 0;
  column-gap: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

/* Grid cell — label · divider · control */

.plaque-field-grid .plaque-field--divided {
  display: grid;
  grid-template-columns: var(--plaque-mixed-label-col, max-content) 1px minmax(min-content, 1fr);
  align-items: center;
  row-gap: 0;
  column-gap: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.plaque-field-grid .plaque-field--divided:has(> :is(input, select).plaque-field__control) {
  grid-template-columns: var(--plaque-mixed-label-col, max-content) 1px minmax(0, 1fr);
}

.plaque-field--divided.plaque-field--stretch > .plaque-field__label,
.plaque-field--divided.plaque-field--stretch > .plaque-field__text,
.plaque-field-grid .plaque-field--divided .plaque-field__label,
.plaque-field-grid .plaque-field--divided .plaque-field__text {
  grid-column: 1;
  flex: none;
  width: auto;
  max-width: 100%;
  min-width: 0;
}

.plaque-field--divided.plaque-field--stretch > :is(.plaque-field__control, .plaque-field__value),
.plaque-field-grid .plaque-field--divided > :is(.plaque-field__control, .plaque-field__value) {
  grid-column: 3;
  justify-self: end;
  margin-left: 0;
  width: auto;
  max-width: 100%;
  min-width: 0;
}

.plaque-field--divided.plaque-field--stretch > :is(select.plaque-field__control, input.plaque-field__control, textarea.plaque-field__control, .input.plaque-field__control),
.plaque-field-grid .plaque-field--divided > :is(select.plaque-field__control, input.plaque-field__control, textarea.plaque-field__control) {
  justify-self: stretch;
  width: 100%;
}

/* Mixed grid — label col from cell container (cqi); rem cap via tokens */

.plaque-field-grid--mixed .plaque-field--divided .plaque-field__label,
.plaque-field-grid--mixed .plaque-field--divided .plaque-field__text {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.plaque-field-grid--mixed .plaque-field-grid__cell .plaque-field--divided,
.plaque-field-grid--mixed .plaque-field-grid__cell .plaque-field--divided:has(.plaque-field-seg-track),
.plaque-field-grid--mixed .plaque-field-grid__cell .plaque-field--divided:has(> :is(input, select).plaque-field__control) {
  /* --many keeps this 3-col; chips wrap only in column 3. */
  grid-template-columns: min(var(--plaque-label-width), var(--plaque-mixed-label-cqi)) 1px minmax(0, 1fr);
  column-gap: 0;
}

.plaque-field-grid--mixed .plaque-field-grid__cell--lg .plaque-field--divided,
.plaque-field-grid--mixed .plaque-field-grid__cell--lg .plaque-field--divided:has(.plaque-field-seg-track),
.plaque-field-grid--mixed .plaque-field-grid__cell--lg .plaque-field--divided:has(> :is(input, select).plaque-field__control) {
  grid-template-columns: min(var(--plaque-label-width-wide), var(--plaque-mixed-label-cqi)) 1px minmax(0, 1fr);
}

/* Full-width solo row — hug label (divider flush to text; stretch field fills rest).
   Same 0,4,0 :has() siblings as the mixed default so this wins over 5.5rem.
   Label overrides beat mixed `width: 100%` / ellipsis so max-content does not collapse. */
.plaque-field-grid--solo > .plaque-field-grid__cell .plaque-field--divided,
.plaque-field-grid--solo > .plaque-field-grid__cell .plaque-field--divided:has(.plaque-field-seg-track),
.plaque-field-grid--solo > .plaque-field-grid__cell .plaque-field--divided:has(> :is(input, select).plaque-field__control) {
  grid-template-columns: max-content 1px minmax(0, 1fr);
  column-gap: 0;
}

.plaque-field-grid--solo .plaque-field--divided .plaque-field__label,
.plaque-field-grid--solo .plaque-field--divided .plaque-field__text {
  width: auto;
  max-width: none;
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
}

/* Checkstrip — compact multi-select (autotests-builder junitTags, …) */

.plaque-field-checkstrip {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--space-1);
  min-width: 0;
}

.plaque-field-checkstrip__item {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 20px;
  padding: 0 var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius-sm) - 2px);
  background: var(--color-surface);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text-muted);
  cursor: pointer;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.plaque-field-checkstrip__item:has(.plaque-field-checkstrip__input:checked) {
  border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
  color: var(--color-text);
}

.plaque-field-checkstrip__item:focus-within {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.plaque-field-checkstrip__input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}

/* Checkstrip MD — custom 18×18 box, row 24px (JUnit tags exploration) */
.plaque-field-checkstrip--md {
  gap: var(--space-1) var(--space-2);
}

.plaque-field-checkstrip--md .plaque-field-checkstrip__item {
  gap: var(--space-1);
  min-height: 24px;
  padding: 0 var(--space-2);
  font-size: var(--font-size-sm);
}

.plaque-field-checkstrip--md .plaque-field-checkstrip__input {
  appearance: none;
  -webkit-appearance: none;
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  border: 1.5px solid var(--color-text-muted);
  border-radius: calc(var(--radius-sm) - 2px);
  background: transparent;
  cursor: pointer;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out);
}

.plaque-field-checkstrip--md .plaque-field-checkstrip__input:checked {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 8px;
}

.plaque-field-checkstrip--md .plaque-field-checkstrip__input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Checkstrip pill — no visible box, label pill toggles (JUnit tags) */
.plaque-field-checkstrip--pill .plaque-field-checkstrip__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.plaque-field-checkstrip--pill .plaque-field-checkstrip__item {
  position: relative;
  gap: var(--space-1);
  min-height: 24px;
  padding: 0 var(--space-2);
  font-size: var(--font-size-sm);
}

.plaque-field-checkstrip--pill .plaque-field-checkstrip__item:has(.plaque-field-checkstrip__input:checked)::before {
  content: "";
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='%2394a3b8' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 8px;
}

html.theme-light .plaque-field-checkstrip--pill .plaque-field-checkstrip__item:has(.plaque-field-checkstrip__input:checked)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='%231c1917' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Tagstrip — chip-like multi-select (autotests-builder junitTags) */
.plaque-field-tagstrip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  min-width: 0;
}

.plaque-field-tagstrip__item {
  display: inline-flex;
  align-items: center;
  min-height: var(--plaque-control-height);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text-muted);
  cursor: pointer;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.plaque-field-tagstrip__item:has(.plaque-field-tagstrip__input:checked) {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface));
  color: var(--color-text);
}

.plaque-field-tagstrip__item:focus-within {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.plaque-field-tagstrip__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Inline check rows — plaque-field-check in a horizontal wrap */
.plaque-field-checks-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  min-width: 0;
}

.plaque-field-checks-inline .plaque-field-check {
  width: auto;
  flex: 0 1 auto;
}

/* Dense grid — 3–4 plaque-field (seg / divided) per row inside panel / section */

.plaque-field-grid {
  container-type: inline-size;
  display: grid;
  gap: var(--space-2);
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.plaque-field-grid__cell {
  min-width: 0;
  overflow: hidden;
  container-type: inline-size;
}

.plaque-field-grid__cell:has(.plaque-field-seg-track--many) {
  overflow: visible;
}

.plaque-field-grid__cell--hidden {
  display: none;
}

.plaque-field-grid .plaque-field,
.plaque-field-grid .plaque-field--divided:has(.plaque-field-seg-track) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  row-gap: 0;
  column-gap: var(--space-1);
}

/* --many: keep 3-col grid (label | divider | chips). Shell may grow if
   chips wrap inside column 3; never display:block (that wrapped under the label). */
.plaque-field-grid .plaque-field--divided:has(> .plaque-field-seg-track--many) {
  display: grid;
  height: auto;
  min-height: var(--plaque-control-height);
  overflow: visible;
}

.plaque-field-grid .plaque-field:not(:has(> .plaque-field-seg-track)) {
  padding: 0 var(--space-2);
}

.plaque-field-grid--mixed .plaque-field,
.plaque-field-grid--mixed .plaque-field--divided,
.plaque-field-grid--mixed .plaque-field--divided:has(.plaque-field-seg-track) {
  column-gap: 0;
}

.plaque-field-grid .plaque-field__label {
  min-width: 0;
  font-size: var(--font-size-xs);
}

.plaque-field-grid .plaque-field--divided .plaque-field__label,
.plaque-field-grid .plaque-field--divided .plaque-field__text {
  font-size: var(--font-size-sm);
  line-height: 1.35;
  padding-right: var(--space-2);
}

@container (min-width: 22rem) {
  .plaque-field-grid:not(.plaque-field-grid--mixed) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Triple batch (remote hub flags) — 3 equal cols fill row width, same as remoteUrl */
  .plaque-field-grid:not(.plaque-field-grid--mixed):has(> .plaque-field-grid__cell:nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@container (min-width: 34rem) {
  .plaque-field-grid:not(.plaque-field-grid--mixed) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Narrow mixed — collapse 2-col lg to 1 col before clipping short flags */
@container (max-width: 24rem) {
  .plaque-field-grid--mixed .plaque-field-grid__cell--lg {
    grid-column: span 12;
  }
}

/* Mixed layout — 4 sm + 3 md + 2 lg per row (12-col); shell height = --plaque-control-height everywhere */

.plaque-field-grid--mixed {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.plaque-field-grid__cell--sm {
  grid-column: span 3;
}

.plaque-field-grid__cell--md {
  grid-column: span 4;
}

.plaque-field-grid__cell--lg {
  grid-column: span 6;
}

.plaque-field-grid__cell--full {
  grid-column: span 12;
}

/* ── Config row canon ────────────────────────────────────────────────
 * Every configuration row holds exactly one or two fields — nothing else.
 *   --solo : one full-width field.
 *   --duo  : two equal (50/50) fields that collapse to one column when the
 *            panel gets narrow (auto-fit reflow, per-container, no media JS).
 * These win over the 12-col --mixed base via the compound selector. */
.plaque-field-grid--solo,
.plaque-field-grid--mixed.plaque-field-grid--solo {
  grid-template-columns: minmax(0, 1fr);
}

.plaque-field-grid--duo,
.plaque-field-grid--mixed.plaque-field-grid--duo {
  /* Two columns survive only while the container is at its full width; as soon
     as it shrinks below room for two comfortable fields, the row drops to one
     per line (no cramped/clipped 2-up). Dial the breakpoint via --plaque-duo-col-min. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--plaque-duo-col-min, 16rem)), 1fr));
}

.plaque-field-grid--solo > .plaque-field-grid__cell,
.plaque-field-grid--duo > .plaque-field-grid__cell {
  grid-column: auto;
}

/*
 * Short boolean pairs (remote enable*) — content-hug 2-col, no 50/50 squeeze / ellipsis.
 * Cells size to label + true|false; leftover space stays empty on the right.
 */
.plaque-field-grid--pair {
  /* Flex-wrap of content-hug fields: they sit side by side and wrap to the next
     line when the panel is too narrow — never overflow / clip. */
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-start;
  width: 100%;
  max-width: 100%;
  /* container-type: inline-size (inherited from .plaque-field-grid) applies
     contain: inline-size, which makes a box size independent of its content —
     that collapses the content-hug cells to ~0 and clips the fields. Pairs hug
     their content, so they must NOT be size containers. */
  container-type: normal;
}

.plaque-field-grid--pair > .plaque-field-grid__cell,
.plaque-field-grid--pair > .plaque-field-grid__cell--sm,
.plaque-field-grid--pair > .plaque-field-grid__cell--md,
.plaque-field-grid--pair > .plaque-field-grid__cell--lg,
.plaque-field-grid--pair > .plaque-field-grid__cell--full {
  container-type: normal;
  grid-column: auto;
  flex: 0 0 auto;
  width: max-content;
  max-width: 100%;
  overflow: visible;
}

.plaque-field-grid--pair .plaque-field,
.plaque-field-grid--pair .plaque-field--divided,
.plaque-field-grid--pair .plaque-field--divided:has(.plaque-field-seg-track) {
  width: max-content;
  max-width: 100%;
  overflow: visible;
}

.plaque-field-grid--pair .plaque-field--divided,
.plaque-field-grid--pair .plaque-field--divided:has(.plaque-field-seg-track),
.plaque-field-grid--pair .plaque-field--divided:has(> :is(input, select).plaque-field__control) {
  grid-template-columns: max-content 1px max-content;
  column-gap: 0;
}

.plaque-field-grid--pair .plaque-field--divided .plaque-field__label,
.plaque-field-grid--pair .plaque-field--divided .plaque-field__text {
  width: auto;
  max-width: none;
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
}

/* 2+2+1 row — seg + seg + compact select (build tool chain) */

.plaque-field-grid--mixed.plaque-field-grid--ratio-221 {
  grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr);
}

.plaque-field-grid--ratio-221 > .plaque-field-grid__cell {
  grid-column: auto;
  min-width: 0;
}

/* 3+2 row — execution seg + parallel threads select */

.plaque-field-grid--mixed.plaque-field-grid--ratio-32 {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

.plaque-field-grid--ratio-32 > .plaque-field-grid__cell {
  grid-column: auto;
  min-width: 0;
}

/* Per-cell wider label col — see override after grid-stack sync block below */

/* 1+1 row — equal seg + select (legacy) */

.plaque-field-grid--mixed.plaque-field-grid--ratio-11 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.plaque-field-grid--ratio-11 > .plaque-field-grid__cell {
  grid-column: auto;
  min-width: 0;
}

/* 4+1 row — wide divided select + compact version select (test framework · version) */

.plaque-field-grid--mixed.plaque-field-grid--ratio-41 {
  grid-template-columns: minmax(0, 4fr) minmax(0, 1fr);
}

.plaque-field-grid--ratio-41 > .plaque-field-grid__cell {
  grid-column: auto;
  min-width: 0;
}

/* Panel stack — shared fixed label col per panel (divider sync across rows).
   Equal 2-col magnet → `.plaque-field-grid-stack--magnet` (rules after stack sync). */

.plaque-field-grid-stack,
.plaque-field-grid-stack--ratio-221,
.plaque-field-grid-stack--parallel,
.plaque-field-panel-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

/* Full-width rows in panel-stack (remoteUrl) — wide fixed label col */
.plaque-field-panel-stack > :not(.plaque-field-grid) .plaque-field--divided,
.plaque-field-panel-stack > :not(.plaque-field-grid) .plaque-field--divided.plaque-field--stretch {
  --plaque-mixed-label-col: var(--plaque-label-width-wide);
  grid-template-columns: var(--plaque-label-width-wide) 1px minmax(0, 1fr);
  column-gap: 0;
}

/* Panel-stack magnet — label col = max(labels) via JS; after wide fixed so it wins.
   minmax(<js px>, max-content): the JS value aligns dividers, but the track can
   still grow to the full label if JS ever undershoots (stale cache / font metric
   drift / early layout) — so a label is NEVER clipped, only mildly misaligned in
   that anomaly. No JS at all → falls back to max-content (hug, still no clip). */
.plaque-field-panel-stack--magnet > :not(.plaque-field-grid) .plaque-field--divided,
.plaque-field-panel-stack--magnet > :not(.plaque-field-grid) .plaque-field--divided.plaque-field--stretch {
  --plaque-mixed-label-col: max-content;
  grid-template-columns: minmax(var(--plaque-mixed-label-col), max-content) 1px minmax(0, 1fr);
  column-gap: 0;
}

.plaque-field-panel-stack--magnet .plaque-field--divided > .plaque-field__label,
.plaque-field-panel-stack--magnet .plaque-field--divided > .plaque-field__text {
  width: auto;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --many: keep 3-col grid (label | divider | track). Do not fall back to
   display:block — that wrapped chips under the label. First-row label via
   align-items:start (Test layer / junitTags wrap in column 3). */
.plaque-field-panel-stack--magnet > :not(.plaque-field-grid) .plaque-field--divided:has(> .plaque-field-seg-track--many),
.plaque-field-panel-stack--magnet > :not(.plaque-field-grid) .plaque-field--divided.plaque-field--stretch:has(> .plaque-field-seg-track--many) {
  display: grid;
  grid-template-columns: var(--plaque-mixed-label-col, max-content) 1px minmax(0, 1fr);
  align-items: start;
  column-gap: 0;
  text-align: unset;
}

.plaque-field-panel-stack--magnet .plaque-field--divided:has(> .plaque-field-seg-track--many) > .plaque-field__label,
.plaque-field-panel-stack--magnet .plaque-field--divided:has(> .plaque-field-seg-track--many) > .plaque-field__text {
  width: var(--plaque-mixed-label-col, max-content);
  max-width: 100%;
}

.plaque-field-grid-stack .plaque-field--divided .plaque-field__label,
.plaque-field-grid-stack .plaque-field--divided .plaque-field__text,
.plaque-field-panel-stack .plaque-field--divided .plaque-field__label,
.plaque-field-panel-stack .plaque-field--divided .plaque-field__text {
  width: auto;
  max-width: 100%;
  min-width: 0;
}

.plaque-field-grid-stack .plaque-field--divided.plaque-field--stretch > :is(select.plaque-field__control, input.plaque-field__control) {
  justify-self: stretch;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/* Grid-stack — fixed label col on every divided field (default sync).
   Canon mixed default (outside stack) = min(--plaque-label-width, 44cqi) per __cell.
   Stack sync = shared --plaque-label-width; --hug / --magnet override.
   Seg chips hug right (justify-self / flex-end); shell full-width. */

.plaque-field-grid-stack .plaque-field-grid--mixed .plaque-field-grid__cell .plaque-field--divided,
.plaque-field-grid-stack .plaque-field-grid--mixed .plaque-field-grid__cell .plaque-field--divided:has(.plaque-field-seg-track),
.plaque-field-grid-stack .plaque-field-grid--mixed .plaque-field-grid__cell .plaque-field--divided:has(> :is(input, select).plaque-field__control) {
  display: grid;
  width: 100%;
  max-width: 100%;
  /* JS (plaque-field-magnet.js) sets --plaque-mixed-label-col to the exact
     measured label width so dividers align and long ids never clip. The minmax
     lets the track grow to the full label if JS ever undershoots (stale cache /
     font drift), and falls back to the fixed rem col when the script is absent. */
  grid-template-columns: minmax(var(--plaque-mixed-label-col, var(--plaque-label-width)), max-content) 1px minmax(0, 1fr);
  column-gap: 0;
}

/* Grid-stack — lg/full keep wider label col (long param ids; ≠ sm default 5.5rem) */
.plaque-field-grid-stack .plaque-field-grid--mixed .plaque-field-grid__cell--lg .plaque-field--divided,
.plaque-field-grid-stack .plaque-field-grid--mixed .plaque-field-grid__cell--lg .plaque-field--divided:has(.plaque-field-seg-track),
.plaque-field-grid-stack .plaque-field-grid--mixed .plaque-field-grid__cell--lg .plaque-field--divided:has(> :is(input, select).plaque-field__control) {
  grid-template-columns: minmax(var(--plaque-mixed-label-col, var(--plaque-label-width-wide)), max-content) 1px minmax(0, 1fr);
}

.plaque-field-grid-stack .plaque-field-grid--mixed .plaque-field-grid__cell--full .plaque-field--divided,
.plaque-field-grid-stack .plaque-field-grid--mixed .plaque-field-grid__cell--full .plaque-field--divided:has(.plaque-field-seg-track),
.plaque-field-grid-stack .plaque-field-grid--mixed .plaque-field-grid__cell--full .plaque-field--divided:has(> :is(input, select).plaque-field__control) {
  grid-template-columns: var(--plaque-mixed-label-col, max-content) 1px minmax(0, 1fr);
}

.plaque-field-grid-stack .plaque-field-grid--mixed .plaque-field-grid__cell--full .plaque-field--divided .plaque-field__label,
.plaque-field-grid-stack .plaque-field-grid--mixed .plaque-field-grid__cell--full .plaque-field--divided .plaque-field__text {
  width: auto;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
}

/*
 * Hug stack — label col = max-content (divider flush to each label; zigzag OK).
 * After fixed rem sync so it wins cascade. ≠ magnet (shared max per column).
 */
.plaque-field-grid-stack--hug .plaque-field-grid--mixed .plaque-field-grid__cell .plaque-field--divided,
.plaque-field-grid-stack--hug .plaque-field-grid--mixed .plaque-field-grid__cell .plaque-field--divided:has(.plaque-field-seg-track),
.plaque-field-grid-stack--hug .plaque-field-grid--mixed .plaque-field-grid__cell .plaque-field--divided:has(> :is(input, select).plaque-field__control),
.plaque-field-grid-stack--hug .plaque-field-grid--mixed .plaque-field-grid__cell--lg .plaque-field--divided,
.plaque-field-grid-stack--hug .plaque-field-grid--mixed .plaque-field-grid__cell--lg .plaque-field--divided:has(.plaque-field-seg-track),
.plaque-field-grid-stack--hug .plaque-field-grid--mixed .plaque-field-grid__cell--lg .plaque-field--divided:has(> :is(input, select).plaque-field__control) {
  grid-template-columns: max-content 1px minmax(0, 1fr);
  column-gap: 0;
}

.plaque-field-grid-stack--hug .plaque-field--divided > .plaque-field__label,
.plaque-field-grid-stack--hug .plaque-field--divided > .plaque-field__text {
  width: auto;
  max-width: none;
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
}

/*
 * Magnet 2-col stack — after fixed rem sync so it wins cascade.
 * --plaque-mixed-label-col = max(label) per *visual* column (plaque-field-magnet.js;
 * cell left edge — duo auto-fit collapse shares one axis with solo rows).
 */
.plaque-field-grid-stack--magnet .plaque-field-grid--mixed .plaque-field-grid__cell .plaque-field--divided,
.plaque-field-grid-stack--magnet .plaque-field-grid--mixed .plaque-field-grid__cell .plaque-field--divided:has(.plaque-field-seg-track),
.plaque-field-grid-stack--magnet .plaque-field-grid--mixed .plaque-field-grid__cell .plaque-field--divided:has(> :is(input, select).plaque-field__control),
.plaque-field-grid-stack--magnet .plaque-field-grid--mixed .plaque-field-grid__cell--lg .plaque-field--divided,
.plaque-field-grid-stack--magnet .plaque-field-grid--mixed .plaque-field-grid__cell--lg .plaque-field--divided:has(.plaque-field-seg-track),
.plaque-field-grid-stack--magnet .plaque-field-grid--mixed .plaque-field-grid__cell--lg .plaque-field--divided:has(> :is(input, select).plaque-field__control) {
  /* Exact px from JS keeps dividers flush; minmax lets the label grow instead of
     clipping if JS undershoots (stale cache / font drift / early layout). */
  grid-template-columns: minmax(var(--plaque-mixed-label-col, max-content), max-content) 1px minmax(min-content, 1fr);
  column-gap: 0;
}

/* --many: same magnet 3-col as selects; minmax(0,1fr) lets chips wrap in col 3. */
.plaque-field-grid-stack--magnet .plaque-field-grid--mixed .plaque-field-grid__cell .plaque-field--divided:has(> .plaque-field-seg-track--many) {
  display: grid;
  grid-template-columns: minmax(var(--plaque-mixed-label-col, max-content), max-content) 1px minmax(0, 1fr);
  column-gap: 0;
}

/* Keep divider on the shared magnet label column (not hugged to "available"). */
.plaque-field-grid-stack--magnet .plaque-field--divided:has(> .plaque-field-seg-track--many) > .plaque-field__label,
.plaque-field-grid-stack--magnet .plaque-field--divided:has(> .plaque-field-seg-track--many) > .plaque-field__text {
  width: var(--plaque-mixed-label-col, max-content);
  max-width: 100%;
}

.plaque-field-grid-stack--magnet .plaque-field-grid--mixed .plaque-field-grid__cell .plaque-field--divided:has(> :is(input, select).plaque-field__control),
.plaque-field-grid-stack--magnet .plaque-field-grid--mixed .plaque-field-grid__cell--lg .plaque-field--divided:has(> :is(input, select).plaque-field__control) {
  grid-template-columns: minmax(var(--plaque-mixed-label-col, max-content), max-content) 1px minmax(0, 1fr);
}

.plaque-field-grid-stack--magnet .plaque-field--divided > .plaque-field__label,
.plaque-field-grid-stack--magnet .plaque-field--divided > .plaque-field__text {
  width: auto;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Pair rows inside magnet stack — never ellipsis short flags.
   `__cell` + :has(--many) matches magnet mixed specificity so hug wins. */
.plaque-field-grid-stack--magnet .plaque-field-grid--pair .plaque-field--divided,
.plaque-field-grid-stack--magnet .plaque-field-grid--pair .plaque-field--divided:has(.plaque-field-seg-track),
.plaque-field-grid-stack--magnet .plaque-field-grid--pair .plaque-field--divided:has(> :is(input, select).plaque-field__control),
.plaque-field-grid-stack--magnet .plaque-field-grid--pair .plaque-field-grid__cell .plaque-field--divided,
.plaque-field-grid-stack--magnet .plaque-field-grid--pair .plaque-field-grid__cell .plaque-field--divided:has(.plaque-field-seg-track),
.plaque-field-grid-stack--magnet .plaque-field-grid--pair .plaque-field-grid__cell .plaque-field--divided:has(> .plaque-field-seg-track--many),
.plaque-field-grid-stack--magnet .plaque-field-grid--pair .plaque-field-grid__cell .plaque-field--divided:has(> :is(input, select).plaque-field__control) {
  grid-template-columns: max-content 1px max-content;
  column-gap: 0;
  width: max-content;
}

.plaque-field-grid-stack--magnet .plaque-field-grid--pair .plaque-field--divided > .plaque-field__label,
.plaque-field-grid-stack--magnet .plaque-field-grid--pair .plaque-field--divided > .plaque-field__text,
.plaque-field-grid-stack--magnet .plaque-field-grid--pair .plaque-field--divided:has(> .plaque-field-seg-track--many) > .plaque-field__label,
.plaque-field-grid-stack--magnet .plaque-field-grid--pair .plaque-field--divided:has(> .plaque-field-seg-track--many) > .plaque-field__text {
  width: auto;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
}

/*
 * Keep label | divider | control on one horizontal grid row.
 * plaque-field-magnet.js adds `.plaque-field--nowrap` (together with
 * --plaque-mixed-label-col set to the exact px budget) when the label + control
 * cannot share the aligned column — the label ellipsises; we never stack the
 * label above the control. Fixed 32px height applies to single-line controls;
 * `--many` tagstrips may still grow vertically as chips wrap (see override).
 * !important: this is a JS state modifier that must win over every
 * grid-stack / magnet grid-template rule regardless of nesting depth.
 */
.plaque-field--divided.plaque-field--nowrap {
  display: grid !important;
  grid-template-columns: var(--plaque-mixed-label-col, max-content) 1px minmax(0, 1fr) !important;
  align-items: center;
  height: var(--plaque-control-height) !important;
  min-height: var(--plaque-control-height) !important;
}

/* --many + --nowrap: keep 3-col; shell grows if chips wrap in column 3. */
.plaque-field--divided.plaque-field--nowrap:has(> .plaque-field-seg-track--many) {
  display: grid !important;
  grid-template-columns: var(--plaque-mixed-label-col, max-content) 1px minmax(0, 1fr) !important;
  height: auto !important;
  min-height: var(--plaque-control-height) !important;
  overflow: visible !important;
}

.plaque-field--nowrap > .plaque-field-seg-track--many {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-end;
  justify-self: stretch !important;
  align-self: center !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
}

.plaque-field--nowrap > .plaque-field__label,
.plaque-field--nowrap > .plaque-field__text {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plaque-field--nowrap:has(> .plaque-field-seg-track--many) > .plaque-field__label,
.plaque-field--nowrap:has(> .plaque-field-seg-track--many) > .plaque-field__text {
  flex: 0 1 auto !important;
}

.plaque-field--nowrap > .plaque-divider {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

.plaque-field--nowrap > .plaque-field__control,
.plaque-field--nowrap > .plaque-field__value,
.plaque-field--nowrap > .plaque-field-seg-track:not(.plaque-field-seg-track--many) {
  grid-column: 3 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.plaque-field--nowrap > .plaque-field-seg-track--many {
  grid-column: 3 !important;
  grid-row: 1 !important;
  max-width: 100% !important;
}

@media (max-width: 768px) {
  .plaque-field-grid:not(.plaque-field-grid--mixed),
  .plaque-field-grid--4:not(.plaque-field-grid--mixed) {
    grid-template-columns: minmax(0, 1fr);
  }

  .plaque-field-grid--mixed .plaque-field-grid__cell--sm,
  .plaque-field-grid--mixed .plaque-field-grid__cell--md,
  .plaque-field-grid--mixed .plaque-field-grid__cell--lg {
    grid-column: span 12;
  }

  .plaque-field-grid--mixed.plaque-field-grid--ratio-221,
  .plaque-field-grid--mixed.plaque-field-grid--ratio-41,
  .plaque-field-grid--mixed.plaque-field-grid--ratio-32,
  .plaque-field-grid--mixed.plaque-field-grid--ratio-11 {
    grid-template-columns: minmax(0, 1fr);
  }

  .plaque-field-panel-stack > :not(.plaque-field-grid) .plaque-field--divided {
    grid-template-columns: var(--plaque-label-width-wide) 1px minmax(0, 1fr);
  }
}