/* ui.css — the UI kit (§8). Every class is ui-<block>[__elem][--mod]; states are .is-*. Tokens only. */

/* ── icon plates ─────────────────────────────────────────────────────────────────────────── */
.ui-plate {
  --plate-size: 32px;
  position: relative; flex: none;
  display: inline-grid; place-items: center;
  width: var(--plate-size); height: var(--plate-size);
  border-radius: calc(var(--plate-size) * .28);
  color: var(--w2-plate-ink);
  background: linear-gradient(145deg, var(--plate-a), var(--plate-b));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -1px 0 rgba(0, 0, 0, .22), 0 1px 2px rgba(0, 0, 0, .28), 0 4px 10px -4px var(--plate-glow);
}
.ui-plate::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 48%); pointer-events: none; }
.ui-plate .ui-icon { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
.ui-plate--case   { --plate-a: #e6c171; --plate-b: #8e6621; --plate-glow: rgba(212, 169, 79, .6); }
.ui-plate--status { --plate-a: #6fd3c1; --plate-b: #1f7064; --plate-glow: rgba(79, 179, 162, .55); }
.ui-plate--tools  { --plate-a: #93b6f7; --plate-b: #3558a6; --plate-glow: rgba(109, 156, 240, .55); }
.ui-plate--system { --plate-a: #b9b2c9; --plate-b: #544c6c; --plate-glow: rgba(169, 160, 196, .5); }

/* ── spinner ─────────────────────────────────────────────────────────────────────────────── */
.ui-spinner { --spin-size: 16px; display: inline-block; flex: none; width: var(--spin-size); height: var(--spin-size); border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--accent); animation: w2-spin .8s linear infinite; }
.ui-spinner-wrap { display: inline-flex; align-items: center; gap: var(--sp-3); color: var(--text-3); font-size: var(--fs-sm); }

/* ── keycaps ─────────────────────────────────────────────────────────────────────────────── */
.ui-kbd { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.ui-kbd__key { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; font: var(--fw-semibold) var(--fs-2xs)/1 var(--font-ui); color: var(--text-2); background: var(--surface-sunken); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; }
.ui-kbd__or { font-size: var(--fs-2xs); color: var(--text-4); margin: 0 2px; }

/* ── buttons ─────────────────────────────────────────────────────────────────────────────── */
.ui-btn {
  --btn-h: var(--control-h);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: none;
  height: var(--btn-h); padding: 0 12px; border-radius: var(--r-2);
  font-size: var(--fs-md); font-weight: var(--fw-medium); white-space: nowrap; line-height: 1;
  color: var(--text-1); background: var(--surface-3); border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 var(--w2-highlight), var(--shadow-1);
  transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast), transform var(--dur-instant), box-shadow var(--dur-fast);
  user-select: none;
}
.ui-btn:hover:not(:disabled) { border-color: var(--line-3); background: color-mix(in srgb, var(--surface-3), var(--text-1) 5%); }
.ui-btn:active:not(:disabled) { transform: translateY(1px); }
.ui-btn:disabled { opacity: .5; }
.ui-btn--sm { --btn-h: 28px; padding: 0 10px; font-size: var(--fs-sm); gap: 6px; border-radius: var(--r-2); }
.ui-btn--lg { --btn-h: 40px; padding: 0 18px; font-size: var(--fs-lg); border-radius: var(--r-3); }
.ui-btn--icon-only { padding: 0; width: var(--btn-h); }
.ui-btn--primary { color: var(--text-on-accent); border-color: transparent; background: linear-gradient(180deg, var(--accent-strong), var(--accent)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 2px rgba(0, 0, 0, .3), 0 6px 16px -8px var(--accent); font-weight: var(--fw-semibold); }
.ui-btn--primary:hover:not(:disabled) { background: linear-gradient(180deg, var(--accent-strong), var(--accent-strong)); border-color: transparent; }
.ui-btn--ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-2); }
.ui-btn--ghost:hover:not(:disabled) { background: var(--w2-hover); color: var(--text-1); border-color: transparent; }
.ui-btn--subtle { background: var(--accent-weak); border-color: transparent; color: var(--accent); box-shadow: none; }
.ui-btn--subtle:hover:not(:disabled) { background: color-mix(in srgb, var(--accent-weak), var(--accent) 12%); border-color: transparent; }
.ui-btn--danger { background: var(--danger-bg); color: var(--danger); border-color: color-mix(in srgb, var(--danger), transparent 70%); box-shadow: none; }
.ui-btn--danger:hover:not(:disabled) { background: var(--danger); color: #fff; border-color: var(--danger); }
.ui-btn.is-busy { color: transparent !important; pointer-events: none; }
.ui-btn.is-busy > .ui-spinner { position: absolute; left: 50%; top: 50%; margin: calc(var(--spin-size) / -2) 0 0 calc(var(--spin-size) / -2); border-top-color: currentColor; }
.ui-btn--primary.is-busy > .ui-spinner { border-color: rgba(0, 0, 0, .15); border-top-color: var(--text-on-accent); }
.ui-btn .ui-kbd { margin-left: 4px; opacity: .8; }
/* keycaps on a filled (primary) button: ink on the accent fill instead of the default keycap colours (round 1) */
.ui-btn--primary .ui-kbd { opacity: 1; }
.ui-btn--primary .ui-kbd__key { color: var(--text-on-accent); background: color-mix(in srgb, var(--text-on-accent), transparent 84%); border-color: color-mix(in srgb, var(--text-on-accent), transparent 62%); }
.ui-btn--primary .ui-kbd__or { color: var(--text-on-accent); opacity: .75; }
.ui-btn__icon-right { margin-right: -3px; opacity: .8; }

.ui-iconbtn {
  --ib: var(--control-h);
  display: inline-grid; place-items: center; flex: none; width: var(--ib); height: var(--ib); border-radius: var(--r-2);
  color: var(--text-2); transition: background-color var(--dur-fast), color var(--dur-fast), transform var(--dur-instant);
}
.ui-iconbtn--sm { --ib: 26px; border-radius: var(--r-2); }
.ui-iconbtn--lg { --ib: 40px; border-radius: var(--r-3); }
.ui-iconbtn:hover:not(:disabled) { background: var(--w2-hover); color: var(--text-1); }
.ui-iconbtn:active:not(:disabled) { transform: scale(.94); background: var(--w2-press); }
.ui-iconbtn[aria-pressed="true"] { background: var(--accent-weak); color: var(--accent); }
.ui-iconbtn:disabled { opacity: .4; }
.ui-iconbtn--default { background: var(--surface-3); border: 1px solid var(--line-2); }
.ui-iconbtn--primary { background: var(--accent); color: var(--text-on-accent); }
.ui-iconbtn--subtle { background: var(--accent-weak); color: var(--accent); }
.ui-iconbtn--danger:hover:not(:disabled) { background: var(--danger-bg); color: var(--danger); }

/* ── text inputs ─────────────────────────────────────────────────────────────────────────── */
.ui-input, .ui-search, .ui-select {
  --in-h: var(--control-h);
  position: relative; display: flex; align-items: center; min-width: 0;
  height: var(--in-h); border-radius: var(--r-2);
  background: var(--surface-sunken); border: 1px solid var(--line-2);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background-color var(--dur-fast);
}
.ui-input--sm, .ui-search--sm, .ui-select--sm { --in-h: 28px; }
.ui-input--lg, .ui-search--lg, .ui-select--lg { --in-h: 40px; }
.ui-input:hover, .ui-search:hover, .ui-select:hover { border-color: var(--line-3); }
.ui-input:focus-within, .ui-search:focus-within, .ui-select:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.ui-input__field, .ui-search__field, .ui-select__field { flex: 1; min-width: 0; height: 100%; padding: 0 10px; background: transparent; border: 0; color: var(--text-1); font-size: var(--fs-md); }
.ui-input__field::placeholder, .ui-search__field::placeholder, .ui-textarea::placeholder { color: var(--text-3); }
.ui-input--icon .ui-input__field { padding-left: 32px; }
.ui-input__icon, .ui-search__icon { position: absolute; left: 10px; color: var(--text-3); pointer-events: none; }
.ui-input [aria-invalid="true"], .ui-input:has([aria-invalid="true"]) { border-color: var(--danger); }
.ui-input.is-disabled { opacity: .55; }
.ui-search__field { padding-left: 32px; padding-right: 30px; }
.ui-search__field::-webkit-search-cancel-button { display: none; }
.ui-search__clear { position: absolute; right: 6px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--text-3); opacity: 0; transform: scale(.8); transition: opacity var(--dur-fast), transform var(--dur-fast); pointer-events: none; }
.ui-search.has-value .ui-search__clear { opacity: 1; transform: none; pointer-events: auto; }
.ui-search__clear:hover { background: var(--w2-hover); color: var(--text-1); }
.ui-search__kbd { position: absolute; right: 8px; pointer-events: none; transition: opacity var(--dur-fast); }
.ui-search.has-value .ui-search__kbd, .ui-search:focus-within .ui-search__kbd { opacity: 0; }
.ui-select__field { appearance: none; -webkit-appearance: none; padding-right: 30px; cursor: pointer; }
.ui-select__field option { background: var(--surface-solid); color: var(--text-1); }
.ui-select__chev { position: absolute; right: 9px; color: var(--text-3); pointer-events: none; }
.ui-textarea {
  display: block; width: 100%; min-height: 64px; padding: 8px 10px; resize: vertical;
  background: var(--surface-sunken); border: 1px solid var(--line-2); border-radius: var(--r-2);
  color: var(--text-1); font-size: var(--fs-md); line-height: 1.5;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.ui-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.ui-textarea--mono { font-family: var(--font-mono); font-size: var(--fs-sm); }

/* ── toggle, checkbox, segmented, swatches, slider ───────────────────────────────────────── */
.ui-toggle { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; font-size: var(--fs-md); color: var(--text-1); }
.ui-toggle.is-disabled { opacity: .5; cursor: not-allowed; }
.ui-toggle__switch { position: relative; width: 36px; height: 20px; border-radius: 99px; background: var(--surface-sunken); border: 1px solid var(--line-3); transition: background-color var(--dur-base) var(--ease-standard), border-color var(--dur-base); flex: none; }
.ui-toggle--sm .ui-toggle__switch { width: 30px; height: 17px; }
.ui-toggle__knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--text-2); box-shadow: var(--shadow-1); transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base); }
.ui-toggle--sm .ui-toggle__knob { width: 11px; height: 11px; }
.ui-toggle__switch[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.ui-toggle__switch[aria-checked="true"] .ui-toggle__knob { transform: translateX(16px); background: var(--text-on-accent); }
.ui-toggle--sm .ui-toggle__switch[aria-checked="true"] .ui-toggle__knob { transform: translateX(13px); }

.ui-checkbox { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.ui-checkbox.is-disabled { opacity: .5; cursor: not-allowed; }
.ui-checkbox__input { position: absolute; opacity: 0; width: 16px; height: 16px; margin: 0; cursor: inherit; }
.ui-checkbox__box { display: grid; place-items: center; width: 16px; height: 16px; flex: none; border-radius: 4px; border: 1px solid var(--line-3); background: var(--surface-sunken); color: var(--text-on-accent); transition: background-color var(--dur-fast), border-color var(--dur-fast); }
.ui-checkbox__tick, .ui-checkbox__dash { display: none; }
.ui-checkbox__dash { width: 8px; height: 2px; border-radius: 1px; background: currentColor; }
.ui-checkbox__input:checked + .ui-checkbox__box { background: var(--accent); border-color: var(--accent); }
.ui-checkbox__input:checked + .ui-checkbox__box .ui-checkbox__tick { display: block; }
.ui-checkbox__input:indeterminate + .ui-checkbox__box { background: var(--accent); border-color: var(--accent); }
.ui-checkbox__input:indeterminate + .ui-checkbox__box .ui-checkbox__dash { display: block; }
.ui-checkbox__input:focus-visible + .ui-checkbox__box { outline: 2px solid var(--accent); outline-offset: 2px; }

.ui-seg { display: inline-flex; padding: 2px; gap: 2px; border-radius: var(--r-3); background: var(--surface-sunken); border: 1px solid var(--line-2); }
.ui-seg__opt { display: inline-flex; align-items: center; gap: 6px; height: calc(var(--control-h) - 6px); padding: 0 11px; border-radius: 6px; color: var(--text-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); transition: background-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast); }
.ui-seg--sm .ui-seg__opt { height: 22px; padding: 0 9px; font-size: var(--fs-xs); }
.ui-seg__opt:hover { color: var(--text-1); }
.ui-seg__opt.is-active { background: var(--surface-3); color: var(--text-1); box-shadow: var(--shadow-1), inset 0 1px 0 var(--w2-highlight); }
.ui-seg__opt:disabled { color: var(--text-4); cursor: not-allowed; }
.ui-seg__opt:disabled:hover { color: var(--text-4); }

.ui-swatches { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.ui-swatch { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--swatch); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 1px var(--line-2); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast); }
.ui-swatch .ui-icon { opacity: 0; transition: opacity var(--dur-fast); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); }
.ui-swatch:hover { transform: scale(1.1); }
.ui-swatch.is-active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 2px var(--surface-solid), 0 0 0 4px var(--swatch); }
.ui-swatch.is-active .ui-icon { opacity: 1; }

.ui-slider { --fill: 50%; display: flex; align-items: center; gap: 10px; }
.ui-slider__input { flex: 1; appearance: none; -webkit-appearance: none; height: 4px; border-radius: 99px; background: linear-gradient(90deg, var(--accent) var(--fill), var(--line-2) var(--fill)); cursor: pointer; }
.ui-slider__input::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--surface-3); border: 2px solid var(--accent); box-shadow: var(--shadow-1); transition: transform var(--dur-fast); }
.ui-slider__input::-webkit-slider-thumb:hover { transform: scale(1.12); }
.ui-slider__input::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--surface-3); border: 2px solid var(--accent); }
.ui-slider__value { min-width: 44px; text-align: right; font-size: var(--fs-sm); color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ── field ───────────────────────────────────────────────────────────────────────────────── */
.ui-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ui-field--inline { flex-direction: row; align-items: center; gap: 12px; }
.ui-field--inline .ui-field__label { min-width: 140px; }
.ui-field__label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-2); }
.ui-field__req { color: var(--danger); }
.ui-field__hint { font-size: var(--fs-xs); color: var(--text-3); }
.ui-field__error { font-size: var(--fs-xs); color: var(--danger); }
.ui-field.has-error .ui-input, .ui-field.has-error .ui-textarea { border-color: var(--danger); }

/* ── badge, chip, token ──────────────────────────────────────────────────────────────────── */
.ui-badge { --b-c: var(--text-2); --b-bg: var(--surface-sunken); display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 5px; font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; color: var(--b-c); background: var(--b-bg); border: 1px solid color-mix(in srgb, var(--b-c), transparent 78%); flex: none; }
.ui-badge--info { --b-c: var(--info); --b-bg: var(--info-bg); }
.ui-badge--success { --b-c: var(--ok); --b-bg: var(--ok-bg); }
.ui-badge--warn { --b-c: var(--warn); --b-bg: var(--warn-bg); }
.ui-badge--danger { --b-c: var(--danger); --b-bg: var(--danger-bg); }
.ui-badge--accent { --b-c: var(--accent); --b-bg: var(--accent-weak); }
.ui-badge--family { --b-c: var(--flag-family); --b-bg: var(--flag-family-bg); }
.ui-badge--verified { --b-c: var(--flag-verified); --b-bg: color-mix(in srgb, var(--flag-verified), transparent 86%); }
.ui-badge--checked { --b-c: var(--flag-checked); --b-bg: color-mix(in srgb, var(--flag-checked), transparent 86%); }
.ui-badge--pending { --b-c: var(--flag-pending); --b-bg: color-mix(in srgb, var(--flag-pending), transparent 88%); }
.ui-badge--retired { --b-c: var(--flag-retired); --b-bg: transparent; text-decoration: line-through; text-decoration-thickness: 1px; }
.ui-badge--derived { --b-c: var(--info); --b-bg: transparent; border-style: dashed; }
.ui-badge--immutable { --b-c: var(--text-2); --b-bg: var(--surface-sunken); }
.ui-badge--live { --b-c: var(--flag-live); --b-bg: color-mix(in srgb, var(--flag-live), transparent 86%); }
.ui-badge--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
.ui-badge--folded { --b-c: var(--text-3); --b-bg: transparent; }

.ui-chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 99px; font-size: var(--fs-sm); color: var(--text-2); background: var(--surface-sunken); border: 1px solid var(--line-2); white-space: nowrap; max-width: 100%; }
.ui-chip__text { overflow: hidden; text-overflow: ellipsis; }
.ui-chip--interactive { cursor: pointer; transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); }
.ui-chip--interactive:hover { color: var(--text-1); border-color: var(--line-3); }
.ui-chip.is-selected { background: var(--accent-weak); color: var(--accent); border-color: color-mix(in srgb, var(--accent), transparent 60%); }
.ui-chip--family { color: var(--flag-family); background: var(--flag-family-bg); border-color: transparent; }
.ui-chip--warn { color: var(--warn); background: var(--warn-bg); border-color: transparent; }
.ui-chip--danger { color: var(--danger); background: var(--danger-bg); border-color: transparent; }
.ui-chip--info { color: var(--info); background: var(--info-bg); border-color: transparent; }
.ui-chip--success { color: var(--ok); background: var(--ok-bg); border-color: transparent; }
/* the flag/status kinds, toned like their .ui-badge--* twins (a selected chip keeps .is-selected on top) */
.ui-chip--accent { color: var(--accent); background: var(--accent-weak); border-color: transparent; }
.ui-chip--live { color: var(--flag-live); background: color-mix(in srgb, var(--flag-live), transparent 86%); border-color: transparent; }
.ui-chip--verified { color: var(--flag-verified); background: color-mix(in srgb, var(--flag-verified), transparent 86%); border-color: transparent; }
.ui-chip--checked { color: var(--flag-checked); background: color-mix(in srgb, var(--flag-checked), transparent 86%); border-color: transparent; }
.ui-chip--pending { color: var(--flag-pending); background: color-mix(in srgb, var(--flag-pending), transparent 88%); border-color: transparent; }
.ui-chip--retired { color: var(--flag-retired); background: transparent; text-decoration: line-through; text-decoration-thickness: 1px; }
.ui-chip--derived { color: var(--info); background: transparent; border-style: dashed; border-color: color-mix(in srgb, var(--info), transparent 50%); }
.ui-chip--immutable { color: var(--text-2); background: var(--surface-sunken); }
.ui-chip__remove { display: grid; place-items: center; width: 16px; height: 16px; margin-right: -4px; border-radius: 50%; cursor: pointer; opacity: .7; }
.ui-chip__remove:hover { opacity: 1; background: var(--w2-hover); }

/* register / pin tokens — tinted by family (TB accent · I sapphire · A verdigris · B pewter · U sage · rule garnet) */
.ui-token {
  --tk: var(--accent);
  display: inline-flex; align-items: baseline; padding: 0 5px; margin: 0 1px; border-radius: 5px;
  font-family: var(--font-ui); font-size: .86em; font-weight: var(--fw-semibold); line-height: 1.5; letter-spacing: .01em;
  color: var(--tk); background: color-mix(in srgb, var(--tk), transparent 86%); border: 1px solid color-mix(in srgb, var(--tk), transparent 72%);
  text-decoration: none !important; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-fast), border-color var(--dur-fast);
}
.ui-token:hover { background: color-mix(in srgb, var(--tk), transparent 74%); border-color: color-mix(in srgb, var(--tk), transparent 50%); }
.ui-token--tb { --tk: var(--accent); }
.ui-token--i { --tk: var(--chart-3); }
.ui-token--a { --tk: var(--chart-2); }
.ui-token--b { --tk: var(--chart-6); }
.ui-token--u { --tk: var(--chart-5); }
.ui-token--rule { --tk: var(--chart-4); }
.ui-token--bf, .ui-token--d, .ui-token--e, .ui-token--v, .ui-token--c, .ui-token--r { --tk: var(--chart-1); }
.ui-token--family { --tk: var(--flag-family); } /* the family mark follows the catalogue's family flag (G1.P: tokenFamilyClass), never a numeral */
.ui-token--cx { --tk: var(--info); }
.ui-token--tr, .ui-token--gen { --tk: var(--chart-6); }
.ui-token--chip { font-size: var(--fs-xs); }

/* ⬜ and ⚡ default to emoji presentation, which ignores colour: force the monochrome text form so the flag tokens tint them */
.ui-glyph { font-weight: var(--fw-semibold); font-variant-emoji: text; }
.ui-glyph--pending, .ui-glyph--urgent { font-family: "Segoe UI Symbol", var(--font-ui); }
.ui-glyph--family { color: var(--flag-family); }
.ui-glyph--verified { color: var(--flag-verified); }
.ui-glyph--checked { color: var(--flag-checked); }
.ui-glyph--pending { color: var(--flag-pending); }
.ui-glyph--urgent { color: var(--flag-urgent); }

/* ── card, stat ──────────────────────────────────────────────────────────────────────────── */
.ui-card { display: flex; flex-direction: column; min-width: 0; border-radius: var(--r-4); background: color-mix(in srgb, var(--surface-content), var(--text-1) 2.5%); border: 1px solid var(--line-1); box-shadow: inset 0 1px 0 var(--w2-highlight); }
.ui-card--clickable { cursor: pointer; transition: border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast); }
.ui-card--clickable:hover { border-color: var(--line-3); transform: translateY(-1px); box-shadow: inset 0 1px 0 var(--w2-highlight), var(--shadow-2); }
.ui-card__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 0; }
.ui-card__icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--accent-weak); color: var(--accent); flex: none; }
.ui-card__titles { flex: 1; min-width: 0; }
.ui-card__title { font-weight: var(--fw-semibold); font-size: var(--fs-md); color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-card__subtitle { font-size: var(--fs-xs); color: var(--text-3); margin-top: 1px; }
.ui-card__actions { display: flex; gap: 4px; flex: none; }
.ui-card__body { padding: 12px 14px 14px; min-width: 0; }
.ui-card__footer { padding: 10px 14px; border-top: 1px solid var(--line-1); font-size: var(--fs-sm); color: var(--text-3); }
.ui-card--dense .ui-card__head { padding: 8px 10px 0; }
.ui-card--dense .ui-card__body { padding: 8px 10px 10px; }
.ui-card--accent { border-color: color-mix(in srgb, var(--accent), transparent 65%); }
.ui-card--warn { border-color: color-mix(in srgb, var(--warn), transparent 60%); }
.ui-card--danger { border-color: color-mix(in srgb, var(--danger), transparent 55%); }
.ui-card--family { border-color: color-mix(in srgb, var(--flag-family), transparent 60%); }

.ui-stat { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--r-4); background: color-mix(in srgb, var(--surface-content), var(--text-1) 2.5%); border: 1px solid var(--line-1); min-width: 0; }
.ui-stat__label { display: flex; align-items: center; gap: 6px; font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-3); }
.ui-stat__row { display: flex; align-items: baseline; gap: 8px; }
.ui-stat__value { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: var(--fw-semibold); line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--text-1); letter-spacing: -.01em; }
.ui-stat__delta { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.ui-stat__delta--up { color: var(--ok); } .ui-stat__delta--down { color: var(--danger); } .ui-stat__delta--flat { color: var(--text-3); }
.ui-stat__hint { font-size: var(--fs-xs); color: var(--text-3); }
.ui-stat__spark { margin-top: 2px; }
.ui-stat--accent .ui-stat__value { color: var(--accent); }
.ui-stat--warn .ui-stat__value { color: var(--warn); }
.ui-stat--danger .ui-stat__value { color: var(--danger); }
.ui-stat--success .ui-stat__value { color: var(--ok); }

/* ── empty, skeleton, progress, divider, avatar ──────────────────────────────────────────── */
.ui-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 40px 24px; margin: auto; max-width: 420px; color: var(--text-2); }
.ui-empty--compact { padding: 18px 12px; gap: 6px; }
.ui-empty__art { position: relative; display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 6px; color: var(--accent); }
.ui-empty--compact .ui-empty__art { width: 44px; height: 44px; margin-bottom: 2px; }
.ui-empty__ring { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, var(--accent-weak), transparent 70%); border: 1px dashed color-mix(in srgb, var(--accent), transparent 60%); }
.ui-empty__art .ui-icon { position: relative; }
.ui-empty__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--text-1); }
.ui-empty--compact .ui-empty__title { font-size: var(--fs-md); }
.ui-empty__body { font-size: var(--fs-md); color: var(--text-3); line-height: 1.5; }
.ui-empty__action { margin-top: 8px; }

.ui-skel { width: 100%; padding: 4px 0; }
.ui-skel__bar, .ui-skel__block { display: block; border-radius: 6px; background: linear-gradient(90deg, var(--surface-sunken) 0%, color-mix(in srgb, var(--surface-sunken), var(--text-1) 7%) 50%, var(--surface-sunken) 100%); background-size: 200% 100%; animation: ui-shimmer 1.6s linear infinite; }
.ui-skel__bar { height: 11px; }
.ui-skel__bar--title { height: 14px; margin-bottom: 4px; }
.ui-skel__lines { display: flex; flex-direction: column; gap: 10px; }
.ui-skel__table { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--line-1); border-radius: var(--r-3); overflow: hidden; }
.ui-skel__row { display: flex; gap: 18px; align-items: center; height: var(--row-h); padding: 0 12px; border-top: 1px solid var(--line-1); }
.ui-skel__row--head { border-top: 0; background: var(--surface-sunken); }
.ui-skel__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.ui-skel__card { display: flex; flex-direction: column; gap: 9px; padding: 14px; border: 1px solid var(--line-1); border-radius: var(--r-4); }
@keyframes ui-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
:root[data-motion="reduced"] .ui-skel__bar, :root[data-motion="reduced"] .ui-skel__block { animation: none !important; }

.ui-progress { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.ui-progress__label { font-size: var(--fs-xs); color: var(--text-3); }
.ui-progress__track { position: relative; height: 4px; border-radius: 99px; background: var(--line-1); overflow: hidden; }
.ui-progress__fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); }
.ui-progress.is-indeterminate .ui-progress__fill { width: 36%; animation: ui-indet 1.3s var(--ease-inout) infinite; }
/* a transform, not a layout property: the fill is 36 % of the track, so -100 % of itself is just off the left edge and 278 % just off the right */
@keyframes ui-indet { from { transform: translateX(-100%); } to { transform: translateX(278%); } }
:root[data-motion="reduced"] .ui-progress.is-indeterminate .ui-progress__fill { animation: none; }

.ui-divider { height: 1px; background: var(--line-1); margin: 8px 0; border: 0; }
.ui-divider--label { display: flex; align-items: center; gap: 10px; height: auto; background: none; }
.ui-divider--label::before, .ui-divider--label::after { content: ""; flex: 1; height: 1px; background: var(--line-1); }
.ui-divider__label { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-3); }
.ui-divider--v { display: inline-block; width: 1px; height: 18px; margin: 0 4px; align-self: center; }

.ui-avatar { --avatar-size: 28px; --avatar-hue: 40; display: inline-grid; place-items: center; flex: none; width: var(--avatar-size); height: var(--avatar-size); border-radius: 50%; font-size: calc(var(--avatar-size) * .38); font-weight: var(--fw-semibold); letter-spacing: .02em; color: var(--text-on-accent); background: linear-gradient(145deg, var(--accent-strong), color-mix(in srgb, var(--accent), hsl(var(--avatar-hue) 45% 35%) 45%)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 1px rgba(0, 0, 0, .15); user-select: none; }

/* ── banners, confidentiality strip ──────────────────────────────────────────────────────── */
.ui-banner { --bn: var(--text-2); --bn-bg: var(--surface-sunken); display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--r-3); background: var(--bn-bg); border: 1px solid color-mix(in srgb, var(--bn), transparent 75%); color: var(--text-1); font-size: var(--fs-sm); line-height: 1.45; animation: w2-fade-in var(--dur-base) var(--ease-out); }
.ui-banner.is-leaving { opacity: 0; transform: translateY(-4px); transition: opacity var(--dur-fast), transform var(--dur-fast); }
.ui-banner--compact { padding: 6px 10px; font-size: var(--fs-xs); gap: 8px; }
.ui-banner__icon { color: var(--bn); margin-top: 1px; flex: none; }
.ui-banner__content { flex: 1; min-width: 0; }
.ui-banner__title { font-weight: var(--fw-semibold); margin-bottom: 2px; }
.ui-banner__body { color: var(--text-2); }
.ui-banner__actions { display: flex; gap: 6px; flex: none; align-self: center; }
.ui-banner__close { margin: -3px -4px -3px 0; }
.ui-banner--neutral { --bn: var(--text-3); }
.ui-banner--info { --bn: var(--info); --bn-bg: var(--info-bg); }
.ui-banner--warn { --bn: var(--warn); --bn-bg: var(--warn-bg); }
.ui-banner--danger { --bn: var(--danger); --bn-bg: var(--danger-bg); }
.ui-banner--success { --bn: var(--ok); --bn-bg: var(--ok-bg); }
.ui-banner--family { --bn: var(--flag-family); --bn-bg: var(--flag-family-bg); }
.ui-banner--k-confidential { --bn: var(--accent); background: linear-gradient(90deg, var(--accent-weak), transparent 70%), var(--surface-sunken); }
.ui-banner--k-retired .ui-banner__body { text-decoration: none; }

.ui-cstrip { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; height: var(--strip-h); padding: 0 10px; font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: .07em; text-transform: uppercase; color: color-mix(in srgb, var(--accent), var(--text-2) 40%); background: linear-gradient(90deg, transparent, var(--accent-weak) 20%, var(--accent-weak) 80%, transparent), var(--surface-sunken); border-top: 1px solid color-mix(in srgb, var(--accent), transparent 78%); user-select: none; white-space: nowrap; }
.ui-cstrip__text { overflow: hidden; text-overflow: ellipsis; }
.ui-cstrip--compact { height: 15px; padding: 0 6px; gap: 4px; font-size: 9px; letter-spacing: .08em; border-radius: 0 0 var(--r-2) var(--r-2); }

/* ── error card ──────────────────────────────────────────────────────────────────────────── */
.ui-errcard { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; max-width: 520px; margin: auto; padding: 32px 24px; }
.ui-errcard__art { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: var(--danger); background: var(--danger-bg); box-shadow: 0 0 0 8px color-mix(in srgb, var(--danger-bg), transparent 50%); margin-bottom: 6px; }
.ui-errcard__title { font-size: var(--fs-xl); font-weight: var(--fw-semibold); }
.ui-errcard__msg { color: var(--text-2); font-size: var(--fs-md); max-width: 44ch; overflow-wrap: anywhere; }
.ui-errcard__details { width: 100%; text-align: left; margin-top: 4px; }
.ui-errcard__details summary { cursor: pointer; font-size: var(--fs-sm); color: var(--text-3); width: max-content; margin: 0 auto; }
.ui-errcard__stack { max-height: 180px; overflow: auto; margin: 8px 0 0; padding: 10px; border-radius: var(--r-3); background: var(--surface-sunken); font: var(--fs-xs)/1.5 var(--font-mono); color: var(--text-2); white-space: pre-wrap; text-align: left; }
.ui-errcard__actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }

/* ── tooltip ─────────────────────────────────────────────────────────────────────────────── */
.ui-tooltip { position: fixed; left: 0; top: 0; z-index: var(--z-tooltip); max-width: 340px; padding: 6px 9px; border-radius: 7px; font-size: var(--fs-xs); line-height: 1.4; color: var(--text-1); background: var(--surface-3); border: 1px solid var(--line-2); box-shadow: var(--shadow-2); pointer-events: none; visibility: hidden; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast); }
.ui-tooltip.is-open { visibility: visible; opacity: 1; transition: opacity var(--dur-fast) var(--ease-out); }

/* ── menus ───────────────────────────────────────────────────────────────────────────────── */
.ui-menu {
  position: fixed; z-index: var(--z-context); min-width: 200px; max-width: 360px; overflow-y: auto; padding: 5px;
  border-radius: var(--r-3); background: var(--surface-2); border: 1px solid var(--line-2);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: var(--shadow-3), inset 0 1px 0 var(--w2-highlight);
  animation: ui-menu-in var(--dur-fast) var(--ease-out);
  transform-origin: top left;
}
@keyframes ui-menu-in { from { opacity: 0; transform: scale(.97) translateY(-3px); } }
.ui-menu__item { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px 0 4px; border-radius: 6px; cursor: default; color: var(--text-1); font-size: var(--fs-md); white-space: nowrap; }
.ui-menu__item:focus, .ui-menu__item.is-open { background: var(--accent-weak); outline: none; }
.ui-menu__item:focus .ui-menu__icon { color: var(--accent); }
.ui-menu__item.is-disabled { opacity: .45; }
.ui-menu__item--danger { color: var(--danger); }
.ui-menu__item--danger:focus { background: var(--danger-bg); }
.ui-menu__check { display: grid; place-items: center; width: 16px; color: var(--accent); flex: none; }
.ui-menu__icon { display: grid; place-items: center; width: 18px; color: var(--text-3); flex: none; }
.ui-menu__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ui-menu__kbd { margin-left: 18px; opacity: .8; }
.ui-menu__chev { color: var(--text-3); margin-left: 8px; }
.ui-menu__sep { height: 1px; margin: 5px 6px; background: var(--line-1); }
.ui-menu__header { padding: 6px 10px 4px; font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-3); max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── dialogs ─────────────────────────────────────────────────────────────────────────────── */
.ui-dialog-scrim { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: 16px; background: var(--scrim); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
/* round-3 integration (Appendix Q.4, WP-QUOTECHECK Core request 2): definite tracks, so a dialog taller than its host
   (a small window, a short screen) shrinks to it and its body scrolls — the actions always stay in view */
.ui-dialog-scrim { grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }
.ui-dialog-scrim--host { position: absolute; z-index: 50; border-radius: inherit; }
.ui-dialog-scrim.is-open { opacity: 1; }
.ui-dialog-scrim.is-leaving { opacity: 0; transition-duration: var(--dur-fast); }
.ui-dialog {
  display: flex; flex-direction: column; max-height: calc(100% - 32px); border-radius: var(--r-5);
  background: var(--surface-2); border: 1px solid var(--line-2);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: var(--shadow-3), 0 30px 80px rgba(0, 0, 0, .35), inset 0 1px 0 var(--w2-highlight);
  transform: translateY(8px) scale(.98); transition: transform var(--dur-slow) var(--ease-out);
}
.ui-dialog-scrim.is-open .ui-dialog { transform: none; }
.ui-dialog__head { display: flex; align-items: center; gap: 10px; padding: 16px 16px 4px 20px; }
.ui-dialog__title { flex: 1; font-size: var(--fs-xl); font-weight: var(--fw-semibold); letter-spacing: -.005em; }
.ui-dialog__body { padding: 10px 20px 16px; overflow: auto; min-height: 0; }
.ui-dialog__text { color: var(--text-2); line-height: 1.55; }
.ui-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--line-1); }
.ui-dialog--danger .ui-dialog__title { color: var(--danger); }
.ui-prompt { display: flex; flex-direction: column; gap: 8px; }

/* ── toolbar, breadcrumbs ────────────────────────────────────────────────────────────────── */
.ui-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; row-gap: 6px; min-height: calc(var(--control-h) + 16px); padding: 8px 12px; border-bottom: 1px solid var(--line-1); flex: none; }
/* narrow windows: the right zone wraps under the left instead of the zones overlapping (verification V-19) */
.ui-toolbar--dense { min-height: calc(var(--control-h) + 8px); padding: 4px 8px; gap: 4px; }
.ui-toolbar__left, .ui-toolbar__center, .ui-toolbar__right { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ui-toolbar__left { flex: 1 1 auto; }
.ui-toolbar__center { flex: 1; justify-content: center; }
.ui-toolbar__right { justify-content: flex-end; margin-left: auto; }
.ui-crumbs { min-width: 0; overflow: hidden; }
.ui-crumbs__list { display: flex; align-items: center; list-style: none; gap: 2px; min-width: 0; }
.ui-crumbs__item { display: flex; align-items: center; gap: 2px; min-width: 0; }
.ui-crumbs__btn, .ui-crumbs__cur { display: inline-flex; align-items: center; gap: 5px; max-width: 220px; height: 26px; padding: 0 6px; border-radius: 6px; font-size: var(--fs-sm); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-crumbs__btn > span, .ui-crumbs__cur > span { overflow: hidden; text-overflow: ellipsis; }
.ui-crumbs__btn:hover { background: var(--w2-hover); color: var(--text-1); }
.ui-crumbs__cur { color: var(--text-1); font-weight: var(--fw-medium); }
.ui-crumbs__sep { color: var(--text-4); flex: none; }

/* ── tabs ────────────────────────────────────────────────────────────────────────────────── */
.ui-tabs { position: relative; display: flex; align-items: flex-end; gap: 2px; min-width: 0; height: 38px; padding: 0 6px; flex: none; border-bottom: 1px solid var(--line-1); background: linear-gradient(180deg, transparent, var(--surface-sunken)); }
.ui-tabs__strip { display: flex; align-items: flex-end; gap: 2px; min-width: 0; flex: 1 1 auto; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; height: 100%; }
.ui-tabs__strip::-webkit-scrollbar { display: none; }
.ui-tabs.is-overflowing .ui-tabs__strip { mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.ui-tabs__tab {
  position: relative; display: flex; align-items: center; gap: 7px; flex: 0 0 auto; max-width: 240px; min-width: 64px; height: 32px; padding: 0 8px 0 12px;
  border-radius: 8px 8px 0 0; color: var(--text-3); font-size: var(--fs-sm); cursor: default; user-select: none;
  border: 1px solid transparent; border-bottom: 0; transition: background-color var(--dur-fast), color var(--dur-fast);
}
.ui-tabs__tab:hover { color: var(--text-1); background: var(--w2-hover); }
.ui-tabs__tab.is-active { color: var(--text-1); background: var(--surface-content); border-color: var(--line-1); margin-bottom: -1px; height: 33px; }
.ui-tabs__tab.is-active::before { content: ""; position: absolute; left: 10px; right: 10px; top: -1px; height: 2px; border-radius: 0 0 2px 2px; background: var(--accent); }
.ui-tabs__tab.is-dragging { opacity: .35; }
.ui-tabs__icon { flex: none; color: var(--text-3); }
.ui-tabs__tab.is-active .ui-tabs__icon { color: var(--accent); }
.ui-tabs__tab.is-preview .ui-tabs__title { font-style: italic; }
.ui-tabs__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-tabs__badge { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: var(--accent-weak); color: var(--accent); font-size: 10px; font-weight: var(--fw-bold); display: grid; place-items: center; }
.ui-tabs__close { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; color: var(--text-3); opacity: 0; transition: opacity var(--dur-fast); flex: none; }
.ui-tabs__tab:hover .ui-tabs__close, .ui-tabs__tab.is-active .ui-tabs__close, .ui-tabs__tab:focus-visible .ui-tabs__close { opacity: 1; }
.ui-tabs__close:hover { background: var(--w2-press); color: var(--text-1); }
.ui-tabs__add, .ui-tabs__overflow { display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 3px; border-radius: 7px; color: var(--text-3); flex: none; }
.ui-tabs__add:hover, .ui-tabs__overflow:hover { background: var(--w2-hover); color: var(--text-1); }
.ui-tabs__drop { position: absolute; left: 0; top: 6px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 8px var(--accent); opacity: 0; pointer-events: none; transition: transform var(--dur-instant) linear, opacity var(--dur-fast); }
.ui-tabs__drop.is-on { opacity: 1; }
.ui-tabs__ghost { position: fixed; left: 0; top: 0; z-index: var(--z-tooltip); display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 8px; background: var(--surface-3); border: 1px solid var(--accent-ring); color: var(--text-1); font-size: var(--fs-sm); box-shadow: var(--shadow-3); pointer-events: none; opacity: .95; transition: box-shadow var(--dur-fast), border-color var(--dur-fast); }
.ui-tabs__ghost .ui-tabs__close, .ui-tabs__ghost .ui-tabs__badge { display: none; }
.ui-tabs__ghost.is-tearing { border-color: var(--accent); box-shadow: var(--shadow-3), 0 0 0 4px var(--accent-weak); }
.ui-tabs__ghost.is-tearing::after { content: "Release to open in a new window"; position: absolute; top: calc(100% + 6px); left: 0; padding: 3px 8px; border-radius: 6px; white-space: nowrap; font-size: var(--fs-2xs); background: var(--accent); color: var(--text-on-accent); }

/* ── split pane ──────────────────────────────────────────────────────────────────────────── */
.ui-split { display: grid; min-width: 0; min-height: 0; flex: 1 1 auto; height: 100%; }
.ui-split--h { grid-template-columns: var(--split-a, 30%) 6px minmax(0, 1fr); }
.ui-split--v { grid-template-rows: var(--split-a, 30%) 6px minmax(0, 1fr); }
.ui-split__pane { min-width: 0; min-height: 0; overflow: auto; position: relative; display: flex; flex-direction: column; }
.ui-split__gutter { position: relative; z-index: 2; background: transparent; cursor: col-resize; touch-action: none; }
.ui-split--v .ui-split__gutter { cursor: row-resize; }
.ui-split__gutter::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--line-1); transition: background-color var(--dur-fast); transform: translateX(-50%); }
.ui-split--v .ui-split__gutter::before { top: 50%; left: 0; right: 0; bottom: auto; width: auto; height: 1px; transform: translateY(-50%); }
.ui-split__gutter:hover::before, .ui-split.is-resizing .ui-split__gutter::before, .ui-split__gutter:focus-visible::before { background: var(--accent); width: 2px; }
.ui-split--v .ui-split__gutter:hover::before, .ui-split--v.is-resizing .ui-split__gutter::before { height: 2px; width: auto; }
.ui-split__grip { position: absolute; left: 50%; top: 50%; width: 4px; height: 28px; margin: -14px 0 0 -2px; border-radius: 4px; background: var(--line-3); opacity: 0; transition: opacity var(--dur-fast); }
.ui-split--v .ui-split__grip { width: 28px; height: 4px; margin: -2px 0 0 -14px; }
.ui-split__gutter:hover .ui-split__grip { opacity: 1; }
.ui-split__gutter:focus-visible { outline: none; }
.ui-split.is-collapsed-a > .ui-split__pane--a, .ui-split.is-collapsed-b > .ui-split__pane--b { visibility: hidden; }
.ui-split.is-resizing { user-select: none; cursor: col-resize; }
.ui-split--h.is-collapsed-b { grid-template-columns: minmax(0, 1fr) 6px 0; }
.ui-split--h.is-collapsed-a { grid-template-columns: 0 6px minmax(0, 1fr); }

/* ── tree ────────────────────────────────────────────────────────────────────────────────── */
.ui-tree { padding: 4px; min-width: 0; font-size: var(--fs-md); user-select: none; }
.ui-tree__row { --level: 0; display: flex; align-items: center; gap: 4px; height: calc(var(--row-h) - 4px); padding-left: calc(4px + var(--level) * 16px); padding-right: 6px; border-radius: 6px; color: var(--text-2); cursor: default; white-space: nowrap; }
.ui-tree__row:hover { background: var(--w2-hover); color: var(--text-1); }
.ui-tree__row.is-selected { background: var(--accent-weak); color: var(--text-1); }
.ui-tree__row.is-selected .ui-tree__icon { color: var(--accent); }
.ui-tree__row:focus-visible { outline-offset: -2px; }
.ui-tree__twisty { display: grid; place-items: center; width: 16px; height: 16px; flex: none; color: var(--text-3); transition: transform var(--dur-fast) var(--ease-out); }
.ui-tree__twisty.is-open { transform: rotate(90deg); }
.ui-tree__content { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.ui-tree__icon { flex: none; color: var(--text-3); }
.ui-tree__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ui-tree__badge { flex: none; font-size: var(--fs-2xs); color: var(--text-3); padding: 0 5px; border-radius: 99px; background: var(--surface-sunken); }
.ui-tree__error, .ui-tree__none, .ui-tree__empty { --level: 0; padding: 4px 8px 4px calc(26px + var(--level) * 16px); font-size: var(--fs-xs); color: var(--text-3); display: flex; align-items: center; gap: 4px; }
.ui-tree__error { color: var(--danger); }
.ui-tree__retry { color: var(--accent); text-decoration: underline; font-size: var(--fs-xs); }

/* ── virtual list ────────────────────────────────────────────────────────────────────────── */
.ui-vlist { position: relative; overflow: auto; min-height: 0; flex: 1 1 auto; contain: strict; }
.ui-vlist:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--accent-ring); border-radius: var(--r-2); }
.ui-vlist__layer { position: relative; width: 100%; }
.ui-vlist__row { display: flex; align-items: center; min-width: 0; padding: 0 10px; cursor: default; border-radius: 6px; }
.ui-vlist__row > :only-child { flex: 1 1 auto; min-width: 0; }   /* a row's single child fills it (grid rows line up) */
.ui-vlist__row:hover { background: var(--w2-hover); }
.ui-vlist__row.is-selected { background: var(--accent-weak); }
.ui-vlist__empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-3); font-size: var(--fs-md); pointer-events: none; }

/* ── data table ──────────────────────────────────────────────────────────────────────────── */
.ui-table { position: relative; overflow: auto; min-height: 0; flex: 1 1 auto; font-size: var(--fs-md); contain: strict; }
.ui-table:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--accent-ring); }
.ui-table__head { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: var(--ui-table-cols); height: calc(var(--ui-table-row-h) + 2px); background: color-mix(in srgb, var(--surface-content), var(--bg-0) 30%); border-bottom: 1px solid var(--line-2); }
.ui-table__th { position: relative; display: flex; align-items: center; gap: 4px; min-width: 0; padding: 0 10px; font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); user-select: none; white-space: nowrap; }
.ui-table__thlabel { overflow: hidden; text-overflow: ellipsis; }
.ui-table__th.is-sortable { cursor: pointer; }
.ui-table__th.is-sortable:hover { color: var(--text-1); }
.ui-table__th.is-sorted { color: var(--accent); }
.ui-table__sorticon { opacity: 0; transition: opacity var(--dur-fast); }
.ui-table__th.is-sortable:hover .ui-table__sorticon, .ui-table__th.is-sorted .ui-table__sorticon { opacity: 1; }
.ui-table__th.is-right { justify-content: flex-end; } .ui-table__th.is-center { justify-content: center; }
.ui-table__resize { position: absolute; right: -3px; top: 6px; bottom: 6px; width: 7px; cursor: col-resize; z-index: 1; }
.ui-table__resize::after { content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 1px; background: var(--line-2); }
.ui-table__resize:hover::after { background: var(--accent); width: 2px; }
.ui-table.is-resizing { cursor: col-resize; user-select: none; }
.ui-table__body { position: relative; }
.ui-table__row { display: grid; grid-template-columns: var(--ui-table-cols); align-items: center; border-bottom: 1px solid var(--line-1); cursor: default; }
.ui-table__row.is-odd { background: color-mix(in srgb, var(--surface-sunken), transparent 45%); }
.ui-table__row:hover { background: var(--w2-hover); }
.ui-table__row.is-selected { background: var(--accent-weak); box-shadow: inset 2px 0 0 var(--accent); }
.ui-table__row.is-cursor { box-shadow: inset 2px 0 0 var(--accent-ring); }
.ui-table__row.is-selected.is-cursor { box-shadow: inset 2px 0 0 var(--accent); }
.ui-table__td { min-width: 0; padding: 0 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-1); }
.ui-table__td.is-right { text-align: right; font-variant-numeric: tabular-nums; } .ui-table__td.is-center { text-align: center; }
.ui-table__td > * { vertical-align: middle; }
.ui-table__empty { position: absolute; left: 0; right: 0; top: calc(var(--ui-table-row-h) + 2px); bottom: 0; display: grid; place-items: center; color: var(--text-3); pointer-events: none; }

/* ── code view ───────────────────────────────────────────────────────────────────────────── */
.ui-code { --gutter-ch: 4; --code-lh: 20px; position: relative; overflow: auto; min-height: 0; flex: 1 1 auto; padding: 8px 0; font: var(--fs-sm)/var(--code-lh) var(--font-mono); color: var(--text-1); background: var(--surface-content); tab-size: 4; }
.ui-code__block { content-visibility: auto; }
.ui-code__line { display: flex; min-height: var(--code-lh); }
.ui-code__line:hover { background: var(--w2-hover); }
.ui-code__line.is-hl { background: var(--warn-bg); }
.ui-code__line.is-sel { background: var(--accent-weak); }
.ui-code__line.is-flash { animation: w2-flash 1.6s var(--ease-out); }
.ui-code__gutter { position: sticky; left: 0; flex: none; width: calc(var(--gutter-ch) * 1ch + 22px); padding: 0 12px 0 8px; text-align: right; color: var(--text-4); background: var(--surface-content); border-right: 1px solid var(--line-1); user-select: none; cursor: pointer; font-variant-numeric: tabular-nums; }
.ui-code__gutter:hover { color: var(--accent); }
.ui-code__line.is-sel .ui-code__gutter { color: var(--accent); background: color-mix(in srgb, var(--surface-content), var(--accent) 10%); }
.ui-code__text { flex: 1; padding: 0 14px; white-space: pre; }
.ui-code--wrap .ui-code__text { white-space: pre-wrap; overflow-wrap: anywhere; }
.ui-code--nonum .ui-code__text { padding-left: 16px; }
.ui-code__empty { padding: 24px; color: var(--text-3); font-family: var(--font-ui); }

/* ── find bar, highlights ────────────────────────────────────────────────────────────────── */
.ui-find { position: absolute; top: 8px; right: 14px; z-index: 20; display: flex; align-items: center; gap: 2px; padding: 3px 4px 3px 9px; border-radius: var(--r-3); background: var(--surface-2); border: 1px solid var(--line-2); box-shadow: var(--shadow-3); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); animation: ui-menu-in var(--dur-fast) var(--ease-out); }
.ui-find__icon { color: var(--text-3); }
.ui-find__input { width: 200px; height: 28px; padding: 0 6px; background: transparent; border: 0; color: var(--text-1); font-size: var(--fs-md); }
.ui-find__input::-webkit-search-cancel-button { display: none; }
.ui-find__count { min-width: 64px; text-align: right; padding-right: 6px; font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.ui-find.has-none .ui-find__count { color: var(--danger); }
mark.ui-find-hit { background: color-mix(in srgb, var(--warn), transparent 70%); color: inherit; border-radius: 2px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--warn), transparent 60%); }
mark.ui-find-hit.is-current { background: var(--warn); color: #1a1406; box-shadow: 0 0 0 2px var(--warn); }
mark.ui-hl, mark.w2-match { background: color-mix(in srgb, var(--accent), transparent 72%); color: inherit; border-radius: 2px; padding: 0 1px; }

/* ── charts ──────────────────────────────────────────────────────────────────────────────── */
.ui-chart { position: relative; display: block; min-width: 0; font-family: var(--font-ui); user-select: none; }
.ui-chart--spark { display: inline-block; vertical-align: middle; }
.ui-chart__svg { overflow: visible; }
.ui-chart__grid { stroke: var(--line-1); stroke-width: 1; }
.ui-chart__grid--major { stroke: var(--line-2); }
.ui-chart__axis { stroke: var(--line-2); stroke-width: 1; }
.ui-chart__tick { fill: var(--text-3); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.ui-chart__label { fill: var(--text-2); font-size: 11.5px; }
.ui-chart__value { fill: var(--text-2); font-size: 11px; font-variant-numeric: tabular-nums; }
.ui-chart__legend { fill: var(--text-2); font-size: 11px; }
.ui-chart__empty { fill: var(--text-3); font-size: 12px; }
.ui-chart__bar { transition: opacity var(--dur-fast); }
.ui-chart__bar:hover, .ui-chart__bar:focus { opacity: .82; outline: none; }
.ui-chart__track { fill: var(--surface-sunken); }
.ui-chart__line { fill: none; stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.ui-chart__area { opacity: .14; }
.ui-chart__pt, .ui-chart__hoverpt { stroke: var(--surface-content); stroke-width: 2; }
.ui-chart__cross { stroke: var(--line-3); stroke-dasharray: 3 3; }
.ui-chart__hit { fill: transparent; cursor: crosshair; }
.ui-chart__sparkline { fill: none; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.ui-chart__sparkarea { opacity: .14; }
.ui-chart__ring { fill: none; stroke: var(--surface-sunken); }
.ui-chart__arc { fill: none; stroke-linecap: butt; transition: opacity var(--dur-fast); }
.ui-chart__arc:hover, .ui-chart__arc:focus { opacity: .8; outline: none; }
.ui-chart__center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; pointer-events: none; font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; color: var(--text-1); }
.ui-chart .is-clickable { cursor: pointer; }
.ui-chart__tip { position: absolute; left: 0; top: 0; z-index: 5; max-width: 280px; padding: 6px 9px; border-radius: 7px; background: var(--surface-3); border: 1px solid var(--line-2); box-shadow: var(--shadow-2); font-size: var(--fs-xs); line-height: 1.45; color: var(--text-1); pointer-events: none; opacity: 0; transition: opacity var(--dur-fast); }
.ui-chart__tip.is-open { opacity: 1; }
.ui-chart__tip b { font-weight: var(--fw-semibold); }
.ui-chart__tiprow { display: flex; align-items: center; gap: 6px; }
.ui-chart__sw { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.ui-chart__tipnote { color: var(--text-3); font-style: italic; }
.ui-chart--timeline { cursor: grab; border-radius: var(--r-3); outline-offset: 2px; }
.ui-chart--timeline.is-panning { cursor: grabbing; }
.ui-chart__lane { fill: var(--surface-sunken); opacity: .6; }
.ui-chart__lanelabel { fill: var(--text-3); font-size: 11px; font-weight: 600; }
.ui-chart__today { stroke: var(--accent); stroke-width: 1.5; }
.ui-chart__todaylabel { fill: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ui-chart__item { --item-color: var(--accent); cursor: pointer; outline: none; }
.ui-chart__item .ui-chart__mark { fill: var(--item-color); stroke: var(--surface-content); stroke-width: 1.5; transition: transform var(--dur-fast) var(--ease-out); transform-box: fill-box; transform-origin: center; }
.ui-chart__item:hover .ui-chart__mark, .ui-chart__item:focus .ui-chart__mark { transform: scale(1.3); }
.ui-chart__item--hard { --item-color: var(--flag-urgent); }
.ui-chart__item--approx .ui-chart__mark { fill: var(--surface-content); stroke: var(--item-color); stroke-dasharray: 2 2; stroke-width: 1.5; }
.ui-chart__item--expired { --item-color: var(--flag-retired); }
.ui-chart__item--event { --item-color: var(--chart-3); }
.ui-chart__range { fill: color-mix(in srgb, var(--item-color), transparent 55%); stroke: var(--item-color); stroke-width: 1; }
.ui-chart__itemlabel { fill: var(--text-1); font-size: 11.5px; paint-order: stroke; stroke: var(--surface-content); stroke-width: 3px; stroke-linejoin: round; }
.ui-chart__labels { pointer-events: none; }
.ui-chart__itemlabel--expired { text-decoration: line-through; fill: var(--text-3); }
.ui-chart__itemlabel--small { font-size: 10px; fill: var(--text-2); }
.ui-chart__hint { position: absolute; right: 8px; bottom: 4px; font-size: 10px; color: var(--text-4); pointer-events: none; }

/* ══ round 3 (WP-ACCESS): high contrast — every state reads without relying on a faint tint ════════════════════ */
:root[data-contrast="high"] .ui-seg__opt.is-active { background: var(--accent); color: var(--text-on-accent); box-shadow: none; }
:root[data-contrast="high"] .ui-btn { border-color: var(--line-2); }
:root[data-contrast="high"] .ui-btn--ghost { border-color: transparent; }
:root[data-contrast="high"] .ui-btn--ghost:hover:not(:disabled), :root[data-contrast="high"] .ui-btn--subtle { border-color: var(--line-3); }
:root[data-contrast="high"] .ui-btn--primary { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); }
:root[data-contrast="high"] .ui-tabs__tab.is-active { border-color: var(--line-3); }
:root[data-contrast="high"] .ui-tabs__tab.is-active::before { height: 3px; }
:root[data-contrast="high"] .ui-vlist__row.is-selected, :root[data-contrast="high"] .ui-tree__row.is-selected,
:root[data-contrast="high"] .ui-table__row.is-selected { box-shadow: inset 3px 0 0 var(--accent), inset 0 0 0 1px var(--accent); }
:root[data-contrast="high"] .ui-menu__item:focus, :root[data-contrast="high"] .ui-menu__item.is-open { background: var(--accent); color: var(--text-on-accent); }
:root[data-contrast="high"] .ui-menu__item:focus svg, :root[data-contrast="high"] .ui-menu__item.is-open svg { color: inherit; }
:root[data-contrast="high"] .ui-chip, :root[data-contrast="high"] .ui-badge { border: 1px solid currentColor; }
:root[data-contrast="high"] .ui-chip.is-selected { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); }
:root[data-contrast="high"] .ui-toggle__switch { border-width: 2px; }
:root[data-contrast="high"] .ui-tooltip { border-color: var(--line-3); }
:root[data-contrast="high"] .ui-token { outline: 1px solid currentColor; outline-offset: -1px; }
:root[data-contrast="high"] .ui-skeleton { opacity: .6; }
/* larger text: the fixed-height small controls grow with the type (the tokens cover --control-h and --row-h) */
:root[data-text="115"] .ui-seg--sm .ui-seg__opt { height: 26px; }
:root[data-text="130"] .ui-seg--sm .ui-seg__opt { height: 30px; }
:root[data-text="115"] .ui-btn--sm { --btn-h: 32px; }
:root[data-text="115"] .ui-iconbtn--sm { --ib: 30px; }
:root[data-text="130"] .ui-btn--sm { --btn-h: 36px; }
:root[data-text="130"] .ui-iconbtn--sm { --ib: 34px; }

/* ══ round 3 (WP-CORE3, moved in at integration): ui.Digest — the "Since you last looked" view ══════════════════════ */
.ui-digest { display: flex; flex-direction: column; gap: 14px; min-width: 0; color: var(--text-1); }
.ui-digest__hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ui-digest__titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-digest__when { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-semibold); letter-spacing: -.01em; line-height: 1.15; }
.ui-digest__whensub { font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.ui-digest__acts { display: flex; gap: 6px; align-items: center; }
.ui-digest__stats { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-digest__stat { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 10px 5px; border-radius: var(--r-3); background: var(--surface-sunken); border: 1px solid var(--line-1); min-width: 0; }
.ui-digest__statnum { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; line-height: 1; }
.ui-digest__statlbl { font-size: var(--fs-2xs); color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; font-weight: var(--fw-semibold); }
.ui-digest__stat.is-add .ui-digest__statnum { color: var(--ok); }
.ui-digest__stat.is-del .ui-digest__statnum { color: var(--danger); }
.ui-digest__stat.is-ses .ui-digest__statnum { color: var(--accent); }
.ui-digest__sec { display: flex; flex-direction: column; gap: 6px; }
.ui-digest__sechead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ui-digest__eyebrow { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-3); }
.ui-digest__sessions { display: flex; flex-direction: column; gap: 0; position: relative; padding-left: 14px; }
.ui-digest__sessions::before { content: ''; position: absolute; left: 5px; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent), transparent 85%)); }
.ui-digest__session { position: relative; display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 2px 10px; align-items: start; padding: 7px 8px; border-radius: var(--r-3); text-align: left; transition: background-color var(--dur-fast); }
.ui-digest__session::before { content: ''; position: absolute; left: -13px; top: 14px; width: 9px; height: 9px; border-radius: 50%; background: var(--surface-solid); border: 2px solid var(--accent); box-sizing: border-box; }
.ui-digest__session.is-post::before { border-style: dotted; }
button.ui-digest__session:hover, button.ui-digest__session:focus-visible { background: var(--w2-hover); }
.ui-digest__sesnum { grid-row: 1 / span 2; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--accent); line-height: 1.1; font-variant-numeric: tabular-nums; }
.ui-digest__sesnum small { display: block; white-space: nowrap; font-family: var(--font-ui); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); font-weight: var(--fw-semibold); }
.ui-digest__sestitle { font-size: var(--fs-sm); color: var(--text-1); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
.ui-digest__sesmeta { font-size: var(--fs-2xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.ui-digest__groups { display: flex; flex-direction: column; gap: 4px; }
.ui-digest__group { border-radius: var(--r-3); border: 1px solid var(--line-1); background: var(--surface-sunken); overflow: hidden; }
.ui-digest__ghead { width: 100%; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto 14px; gap: 10px; align-items: center; padding: 7px 10px; text-align: left; }
.ui-digest__ghead:hover { background: var(--w2-hover); }
.ui-digest__ghead:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ui-digest__swatch { width: 8px; height: 22px; border-radius: 3px; background: var(--line-3); }
/* The tint of a path group is its token --path-<n> (tokens.css; the numeral is the key's last digit, "f" for the virtual path), for
   every path the catalogue lists. A key that is not a path, or a two-digit one (no token), keeps the neutral swatch. */
.ui-digest__group[data-key^="path"][data-key$="1"] .ui-digest__swatch,
.ui-digest__minirow[data-key^="path"][data-key$="1"] .ui-digest__swatch { background: var(--path-1); }
.ui-digest__group[data-key^="path"][data-key$="2"] .ui-digest__swatch,
.ui-digest__minirow[data-key^="path"][data-key$="2"] .ui-digest__swatch { background: var(--path-2); }
.ui-digest__group[data-key^="path"][data-key$="3"] .ui-digest__swatch,
.ui-digest__minirow[data-key^="path"][data-key$="3"] .ui-digest__swatch { background: var(--path-3); }
.ui-digest__group[data-key^="path"][data-key$="4"] .ui-digest__swatch,
.ui-digest__minirow[data-key^="path"][data-key$="4"] .ui-digest__swatch { background: var(--path-4); }
.ui-digest__group[data-key^="path"][data-key$="5"] .ui-digest__swatch,
.ui-digest__minirow[data-key^="path"][data-key$="5"] .ui-digest__swatch { background: var(--path-5); }
.ui-digest__group[data-key^="path"][data-key$="6"] .ui-digest__swatch,
.ui-digest__minirow[data-key^="path"][data-key$="6"] .ui-digest__swatch { background: var(--path-6); }
.ui-digest__group[data-key^="path"][data-key$="7"] .ui-digest__swatch,
.ui-digest__minirow[data-key^="path"][data-key$="7"] .ui-digest__swatch { background: var(--path-7); }
.ui-digest__group[data-key^="path"][data-key$="8"] .ui-digest__swatch,
.ui-digest__minirow[data-key^="path"][data-key$="8"] .ui-digest__swatch { background: var(--path-8); }
.ui-digest__group[data-key^="path"][data-key$="F"] .ui-digest__swatch,
.ui-digest__minirow[data-key^="path"][data-key$="F"] .ui-digest__swatch { background: var(--path-f); }
.ui-digest__group[data-key^="path"]:is([data-key$="10"], [data-key$="11"], [data-key$="12"], [data-key$="13"], [data-key$="14"], [data-key$="15"], [data-key$="16"], [data-key$="17"], [data-key$="18"], [data-key$="19"], [data-key$="20"], [data-key$="21"], [data-key$="22"], [data-key$="23"], [data-key$="24"], [data-key$="25"], [data-key$="26"], [data-key$="27"], [data-key$="28"], [data-key$="29"], [data-key$="30"], [data-key$="31"], [data-key$="32"], [data-key$="33"], [data-key$="34"], [data-key$="35"], [data-key$="36"], [data-key$="37"], [data-key$="38"], [data-key$="39"], [data-key$="40"], [data-key$="41"], [data-key$="42"], [data-key$="43"], [data-key$="44"], [data-key$="45"], [data-key$="46"], [data-key$="47"], [data-key$="48"], [data-key$="49"], [data-key$="50"], [data-key$="51"], [data-key$="52"], [data-key$="53"], [data-key$="54"], [data-key$="55"], [data-key$="56"], [data-key$="57"], [data-key$="58"], [data-key$="59"], [data-key$="60"], [data-key$="61"], [data-key$="62"], [data-key$="63"], [data-key$="64"], [data-key$="65"], [data-key$="66"], [data-key$="67"], [data-key$="68"], [data-key$="69"], [data-key$="70"], [data-key$="71"], [data-key$="72"], [data-key$="73"], [data-key$="74"], [data-key$="75"], [data-key$="76"], [data-key$="77"], [data-key$="78"], [data-key$="79"], [data-key$="80"], [data-key$="81"], [data-key$="82"], [data-key$="83"], [data-key$="84"], [data-key$="85"], [data-key$="86"], [data-key$="87"], [data-key$="88"], [data-key$="89"], [data-key$="90"], [data-key$="91"], [data-key$="92"], [data-key$="93"], [data-key$="94"], [data-key$="95"], [data-key$="96"], [data-key$="97"], [data-key$="98"], [data-key$="99"]) .ui-digest__swatch,
.ui-digest__minirow[data-key^="path"]:is([data-key$="10"], [data-key$="11"], [data-key$="12"], [data-key$="13"], [data-key$="14"], [data-key$="15"], [data-key$="16"], [data-key$="17"], [data-key$="18"], [data-key$="19"], [data-key$="20"], [data-key$="21"], [data-key$="22"], [data-key$="23"], [data-key$="24"], [data-key$="25"], [data-key$="26"], [data-key$="27"], [data-key$="28"], [data-key$="29"], [data-key$="30"], [data-key$="31"], [data-key$="32"], [data-key$="33"], [data-key$="34"], [data-key$="35"], [data-key$="36"], [data-key$="37"], [data-key$="38"], [data-key$="39"], [data-key$="40"], [data-key$="41"], [data-key$="42"], [data-key$="43"], [data-key$="44"], [data-key$="45"], [data-key$="46"], [data-key$="47"], [data-key$="48"], [data-key$="49"], [data-key$="50"], [data-key$="51"], [data-key$="52"], [data-key$="53"], [data-key$="54"], [data-key$="55"], [data-key$="56"], [data-key$="57"], [data-key$="58"], [data-key$="59"], [data-key$="60"], [data-key$="61"], [data-key$="62"], [data-key$="63"], [data-key$="64"], [data-key$="65"], [data-key$="66"], [data-key$="67"], [data-key$="68"], [data-key$="69"], [data-key$="70"], [data-key$="71"], [data-key$="72"], [data-key$="73"], [data-key$="74"], [data-key$="75"], [data-key$="76"], [data-key$="77"], [data-key$="78"], [data-key$="79"], [data-key$="80"], [data-key$="81"], [data-key$="82"], [data-key$="83"], [data-key$="84"], [data-key$="85"], [data-key$="86"], [data-key$="87"], [data-key$="88"], [data-key$="89"], [data-key$="90"], [data-key$="91"], [data-key$="92"], [data-key$="93"], [data-key$="94"], [data-key$="95"], [data-key$="96"], [data-key$="97"], [data-key$="98"], [data-key$="99"]) .ui-digest__swatch { background: var(--line-3); }
.ui-digest__gtitle { display: flex; flex-direction: column; min-width: 0; }
.ui-digest__glabel { font-size: var(--fs-sm); font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-digest__gmeta { font-size: var(--fs-2xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.ui-digest__counts { display: inline-flex; gap: 6px; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); }
.ui-digest__c-add { color: var(--ok); } .ui-digest__c-chg { color: var(--info); } .ui-digest__c-del { color: var(--danger); }
.ui-digest__chev { color: var(--text-3); transition: transform var(--dur-fast) var(--ease-out); }
.ui-digest__group.is-open .ui-digest__chev { transform: rotate(90deg); }
.ui-digest__files { display: none; flex-direction: column; padding: 0 6px 6px 24px; gap: 1px; }
.ui-digest__group.is-open .ui-digest__files { display: flex; }
.ui-digest__file { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 4px 6px; border-radius: var(--r-2); text-align: left; min-width: 0; }
.ui-digest__file:hover, .ui-digest__file:focus-visible { background: var(--w2-hover); }
.ui-digest__file.is-removed { cursor: default; }
.ui-digest__file.is-removed .ui-digest__fname { text-decoration: line-through; color: var(--text-3); }
.ui-digest__fk { width: 16px; height: 16px; display: grid; place-items: center; border-radius: 4px; font-size: 10px; font-weight: var(--fw-bold); }
.ui-digest__fk.is-added { color: var(--ok); background: var(--ok-bg); } .ui-digest__fk.is-changed { color: var(--info); background: var(--info-bg); } .ui-digest__fk.is-removed { color: var(--danger); background: var(--danger-bg); }
.ui-digest__ftext { display: flex; flex-direction: column; min-width: 0; }
.ui-digest__fname { font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-digest__fdir { font-size: var(--fs-2xs); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-digest__fwhen { font-size: var(--fs-2xs); color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-digest__more { align-self: flex-start; margin: 2px 0 0 6px; font-size: var(--fs-2xs); color: var(--accent); padding: 2px 6px; border-radius: var(--r-2); }
.ui-digest__more:hover { background: var(--accent-weak); }
.ui-digest__commits { display: flex; flex-direction: column; gap: 1px; }
.ui-digest__commit { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 4px 6px; border-radius: var(--r-2); text-align: left; font-size: var(--fs-xs); }
button.ui-digest__commit:hover, button.ui-digest__commit:focus-visible { background: var(--w2-hover); }
.ui-digest__sha { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--text-3); }
.ui-digest__subj { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-digest__empty { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--r-3); background: var(--surface-sunken); border: 1px dashed var(--line-2); color: var(--text-2); font-size: var(--fs-sm); line-height: 1.45; }
.ui-digest__empty .ui-digest__emptyart { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); flex: none; }
.ui-digest__note { font-size: var(--fs-2xs); color: var(--text-3); line-height: 1.45; }
.ui-digest--compact { gap: 8px; }
.ui-digest--compact .ui-digest__when { font-size: var(--fs-md); }
.ui-digest--compact .ui-digest__stat { padding: 4px 8px 3px; }
.ui-digest--compact .ui-digest__statnum { font-size: var(--fs-md); }
.ui-digest__mini { display: flex; flex-direction: column; gap: 2px; }
.ui-digest__minirow { display: grid; grid-template-columns: 6px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 3px 4px; font-size: var(--fs-xs); border-radius: var(--r-2); text-align: left; }
.ui-digest__minirow .ui-digest__swatch { width: 6px; height: 14px; }
.ui-digest__minilabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media print { .ui-digest__acts, .ui-digest__chev, .ui-digest__more { display: none; } .ui-digest__files { display: flex; } }
:root[data-motion="reduced"] .ui-digest__chev { transition: none; }

/* ══ R9 G1.D D3: the Numeral plate, the Provenance bar, the Ledger row, the Verification mark and the ladder ══════════════
   Sizes are the plan's (REDESIGN_PLAN_FINAL §2.2.3) and the same in every design world: plate 16, chip 22, bar 28, row 32 (28
   compact), mark 18. Heights follow --font-scale so 115/130 % text grows them with the type (at 100 % they are exactly the
   plan's figures). Every gap and padding is a --sp-* token (the 4-px grid); colour comes from tokens, the numeral plate's two
   ink literals being the only exceptions. Motion is opacity and transform only. A frame (dashed, dotted, hairline) is always
   redundant with a word or a numeral. One colour role per verification grade (--grade-*), read by the mark and the ladder alike. */

/* ── numeral plate (not .ui-plate: that is the 32 px icon plate above) ───────────────────────────────────────────────── */
.ui-numplate {
  --numplate-ink: #0a1020; --np: var(--path-5);
  flex: none; box-sizing: border-box; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: var(--r-1);
  font: var(--fw-semibold) 11px/1 var(--font-ui); font-variant-numeric: tabular-nums; letter-spacing: 0;
  color: var(--numplate-ink); background: var(--np); user-select: none;
}
:root[data-theme="light"] .ui-numplate { --numplate-ink: #fffdf7; }
.ui-numplate[data-n="1"] { --np: var(--path-1); } .ui-numplate[data-n="2"] { --np: var(--path-2); }
.ui-numplate[data-n="3"] { --np: var(--path-3); } .ui-numplate[data-n="4"] { --np: var(--path-4); }
.ui-numplate[data-n="5"] { --np: var(--path-5); } .ui-numplate[data-n="6"] { --np: var(--path-6); }
.ui-numplate[data-n="7"] { --np: var(--path-7); } .ui-numplate[data-n="8"] { --np: var(--path-8); }
.ui-numplate--f { background: transparent; border: 1px dashed var(--path-f); color: var(--path-f); }
.ui-numplate--none { background: transparent; border: 1px solid var(--line-2); color: var(--text-3); }
.ui-numplate.is-lens { box-shadow: 0 0 0 var(--sp-1) var(--surface-solid), 0 0 0 var(--sp-2) var(--accent); }
:root[data-contrast="high"] .ui-numplate:not(.ui-numplate--f):not(.ui-numplate--none) { outline: 1px solid var(--line-3); outline-offset: 0; }

/* ── flag chips (the Provenance bar's, and the Ledger row's small static form) ───────────────────────────────────────── */
.ui-pchip {
  flex: none; box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--sp-2); height: calc(22px * var(--font-scale)); padding: 0 var(--sp-3); margin: 0;
  border: 1px solid transparent; border-radius: var(--r-pill); background-color: transparent; color: var(--text-2);
  font: var(--fw-medium) var(--fs-xs)/1 var(--font-ui); white-space: nowrap; letter-spacing: 0; appearance: none; text-align: left;
}
button.ui-pchip { cursor: pointer; }
button.ui-pchip:hover, button.ui-pchip[aria-expanded="true"] { background-image: linear-gradient(var(--w2-hover), var(--w2-hover)); }
button.ui-pchip:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.ui-pchip__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }   /* 1.35, not 1: the ellipsis box would clip descenders */
.ui-pchip__mark { flex: none; font-weight: var(--fw-semibold); }
.ui-pchip__icon { flex: none; }
.ui-pchip__glyph, .ui-pchip__abbr { display: none; flex: none; }   /* drawn only while the bar is on its `short` step */
.ui-pchip--conf { background-color: var(--surface-sunken); border-color: var(--line-2); color: var(--text-2); }
.ui-pchip--fam { background-color: var(--flag-family-bg); color: var(--flag-family); }   /* never shrinks: the † chip always shows its words */
.ui-pchip--wp { background-color: color-mix(in srgb, var(--flag-pending) 16%, transparent); color: color-mix(in srgb, var(--flag-pending) 70%, var(--text-1)); }
.ui-pchip--imm { border-color: var(--accent); color: var(--text-1); }
.ui-pchip--der { border: 1px dotted var(--text-3); color: var(--text-2); }
.ui-pchip--ai { background-color: var(--info-bg); color: color-mix(in srgb, var(--info) 80%, var(--text-1)); }
.ui-pchip--nfy { border: 1px dashed var(--accent); color: var(--accent); }
.ui-pchip--path { background-color: var(--surface-sunken); border-color: var(--line-1); color: var(--text-2); }
.ui-pchip--tone { background-color: var(--surface-sunken); border-color: var(--line-2); color: var(--text-2); }
.ui-pchip--tone-info { background-color: var(--info-bg); border-color: transparent; color: color-mix(in srgb, var(--info) 80%, var(--text-1)); }
.ui-pchip--tone-warn { background-color: var(--warn-bg); border-color: transparent; color: color-mix(in srgb, var(--warn) 80%, var(--text-1)); }
.ui-pchip--tone-danger { background-color: var(--danger-bg); border-color: transparent; color: color-mix(in srgb, var(--danger) 80%, var(--text-1)); }
.ui-pchip--tone-ok { background-color: var(--ok-bg); border-color: transparent; color: color-mix(in srgb, var(--ok) 80%, var(--text-1)); }
.ui-pchip--sm { height: calc(18px * var(--font-scale)); padding: 0 var(--sp-3); gap: var(--sp-2); }
.ui-pchip--sm .ui-pchip__icon { width: 11px; height: 11px; }
:root[data-contrast="high"] .ui-pchip { border-color: currentColor; }
:root[data-contrast="high"] .ui-pchip--der { border-style: dotted; }
:root[data-contrast="high"] .ui-pchip--nfy { border-style: dashed; }

/* ── the Provenance bar: one 28 px row; the popover is the row's sibling so the row's overflow never clips it ───────────
   FIT (data-fit, set by provenance.js): full → short → wrap. `short` shows every chip but † as a glyph or abbreviation (the word stays in
   aria-label, the tooltip and the popover); `wrap` keeps those short forms and lets the row take a second line. The † chip is flex:none until the very last step,
   where it may ellipsise only if the window is narrower than its own words. */
.ui-prov { position: relative; z-index: 3; flex: none; box-sizing: border-box; height: calc(28px * var(--font-scale)); background: var(--surface-solid); border-bottom: 1px solid var(--line-1); }
.ui-prov.has-open { z-index: 6; }
.ui-prov__row { box-sizing: border-box; display: flex; flex-wrap: nowrap; align-items: center; gap: var(--sp-3); height: 100%; padding: 0 var(--sp-4); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.ui-prov__row::-webkit-scrollbar { display: none; }
.ui-prov:is([data-fit="short"], [data-fit="wrap"]) .ui-pchip[data-short] .ui-pchip__text { display: none; }
.ui-prov:is([data-fit="short"], [data-fit="wrap"]) .ui-pchip[data-short] .ui-pchip__glyph { display: block; }
.ui-prov:is([data-fit="short"], [data-fit="wrap"]) .ui-pchip[data-short] .ui-pchip__abbr { display: inline; }
.ui-prov[data-fit="wrap"] { height: auto; min-height: calc(28px * var(--font-scale)); }
.ui-prov[data-fit="wrap"] .ui-prov__row { flex-wrap: wrap; height: auto; padding-block: var(--sp-2); gap: var(--sp-2) var(--sp-3); overflow: visible; }
.ui-prov[data-fit="wrap"] .ui-pchip { max-width: 100%; }
.ui-prov[data-fit="wrap"] .ui-pchip--fam { flex: 0 1 auto; }
.ui-prov__pop {
  position: absolute; top: calc(100% + var(--sp-2)); left: var(--sp-3); z-index: 5; box-sizing: border-box; width: 320px; max-width: calc(100% - var(--sp-5)); padding: var(--sp-3) var(--sp-4);
  background: var(--surface-solid); border: 1px solid var(--line-2); border-radius: var(--r-3); box-shadow: var(--shadow-3);
  font: var(--fw-regular) var(--fs-md)/1.45 var(--font-ui); color: var(--text-1);
  opacity: 0; transform: translateY(-4px); visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
}
.ui-prov__pop.is-open { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s; }
.ui-prov__pop-h { display: block; margin-bottom: var(--sp-1); font-weight: var(--fw-semibold); }
.ui-prov__pop-b { color: var(--text-2); }

/* ── the Ledger row (the approved comp's .lrow): a grid — state glyph in a 56 px gutter · 72 px date · title · 16 px plate · flags · actions ──
   Every row draws all six cells (an absent one is empty), so plates, flags and actions line up column by column down a list. The flags
   and actions columns are fixed for exactly that reason. --lrow-flags / --lrow-acts are NOT declared on the row, only read with a fallback
   (the flags track defaults to the † words plus a "+N" chip, 200 px scaled with the text size), so a host that needs more room sets them
   on its list and the value reaches the rows. A flag chip is never clipped: the cell does not hide overflow, it fits its chips instead (see FIT below).
   The class is .ui-ledger-row, not an abbreviation, so the design lint's stripe rule can see it. */
.ui-ledger-row {
  --lrow-h: calc(32px * var(--font-scale)); --lrow-gut: 56px; --lrow-pad: 0px;
  box-sizing: border-box; display: grid; grid-template-columns: var(--lrow-gut) 72px minmax(0, 1fr) 16px var(--lrow-flags, calc(200px * var(--font-scale))) var(--lrow-acts, 108px);
  column-gap: var(--sp-4); align-items: center; min-width: 0; height: var(--lrow-h); margin: 0; padding: 0 var(--lrow-pad); list-style: none;
  color: var(--text-1); font-size: var(--fs-md);
}
.ui-ledger-row--compact, :root[data-density="compact"] .ui-ledger-row { --lrow-h: calc(28px * var(--font-scale)); }
.ui-ledger-row + .ui-ledger-row { border-top: 1px solid var(--line-1); }
.ui-ledger-row.is-interactive:hover { background: var(--w2-hover); }
.ui-ledger-row.is-selected { background: var(--accent-weak); }
.ui-ledger-row__stateslot { display: flex; align-items: center; justify-content: flex-end; padding-right: var(--sp-2); }
.ui-ledger-row__date { min-width: 0; font-size: var(--fs-sm); color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-ledger-row__time { font-variant-numeric: tabular-nums; }
.ui-ledger-row__time--none { color: var(--text-4); }
.ui-ledger-row__title { min-width: 0; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; }
a.ui-ledger-row__title { color: inherit; }
a.ui-ledger-row__title:hover, button.ui-ledger-row__title:hover { text-decoration: underline; text-underline-offset: 2px; }
.ui-ledger-row__title:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-1); }
.ui-ledger-row__title-text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-ledger-row__plate { display: inline-flex; align-items: center; }
.ui-ledger-row__flags { min-width: 0; max-width: 100%; display: flex; align-items: center; justify-self: start; gap: var(--sp-2); }
.ui-ledger-row__flags > * { flex: none; }
.ui-ledger-row__flags > [hidden] { display: none; }
/* FIT (data-fit, set by ledgerrow.js): full → short → overflow. `short` draws every chip but † as its glyph or abbreviation (the word stays in aria-label and the
   tooltip, as on the Provenance bar); `overflow` keeps those short forms and replaces the chips that still do not fit with one "+N" chip. The † chip never shrinks. */
.ui-ledger-row:is([data-fit="short"], [data-fit="overflow"]) .ui-pchip[data-short] .ui-pchip__text { display: none; }
.ui-ledger-row:is([data-fit="short"], [data-fit="overflow"]) .ui-pchip[data-short] .ui-pchip__glyph { display: block; }
.ui-ledger-row:is([data-fit="short"], [data-fit="overflow"]) .ui-pchip[data-short] .ui-pchip__abbr { display: inline; }
.ui-pchip--more { min-width: 22px; justify-content: center; padding: 0 var(--sp-1); border-color: var(--line-2); background-color: var(--surface-sunken); color: var(--text-2); font-variant-numeric: tabular-nums; cursor: default; }
:root[data-contrast="high"] .ui-pchip--more { border-color: currentColor; }
.ui-ledger-row__acts { display: flex; align-items: center; justify-self: end; gap: var(--sp-2); }
.ui-ledger-row.is-done .ui-ledger-row__title-text { color: var(--text-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.ui-ledger-row.is-done .ui-ledger-row__date { color: var(--text-3); }
/* narrow: the comp's phone form keeps the gutter, the title and the actions (the date, plate and flags give way) — by container when the host
   declares one (container: ledger / inline-size), by viewport otherwise */
@container ledger (max-width: 719px) {
  .ui-ledger-row { grid-template-columns: var(--lrow-gut) minmax(0, 1fr) auto; }
  .ui-ledger-row > .ui-ledger-row__date, .ui-ledger-row > .ui-ledger-row__plate, .ui-ledger-row > .ui-ledger-row__flags { display: none; }
}
@media (max-width: 719px) {
  .ui-ledger-row { grid-template-columns: var(--lrow-gut) minmax(0, 1fr) auto; }
  .ui-ledger-row > .ui-ledger-row__date, .ui-ledger-row > .ui-ledger-row__plate, .ui-ledger-row > .ui-ledger-row__flags { display: none; }
}
/* the four state glyphs: dashed (proposed) · solid (operative) · muted with a tick (done) · dotted (not filed yet) */
.ui-ledger-row__state { display: block; flex: none; fill: none; stroke-width: 1.5; }
.ui-ledger-row__state--proposed circle { stroke: var(--text-2); stroke-dasharray: 3.1 2.4; }
.ui-ledger-row__state--operative circle { fill: var(--accent); stroke: var(--accent); }
.ui-ledger-row__state--done circle { fill: var(--text-3); stroke: var(--text-3); }
.ui-ledger-row__state-tick { fill: none; stroke: var(--surface-solid); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ui-ledger-row__state--notfiled circle { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0 3.2987; }
.ui-ledger-row__act {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); height: calc(24px * var(--font-scale)); margin: 0; padding: 0 var(--sp-3);
  border: 1px solid transparent; border-radius: var(--r-2); background: none; color: var(--text-2); font: var(--fw-medium) var(--fs-sm)/1 var(--font-ui); white-space: nowrap;
}
.ui-ledger-row--compact .ui-ledger-row__act, :root[data-density="compact"] .ui-ledger-row__act { height: calc(22px * var(--font-scale)); }
.ui-ledger-row__act--icon { width: calc(24px * var(--font-scale)); padding: 0; }
.ui-ledger-row__act:hover:not(:disabled) { background: var(--w2-hover); color: var(--text-1); }
.ui-ledger-row__act:disabled { opacity: .45; }
.ui-ledger-row__act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ui-ledger-row__act--primary { color: var(--accent-strong); border-color: var(--accent-ring); }
:root[data-contrast="high"] .ui-ledger-row__act { border-color: var(--line-2); }

/* ── the Verification mark: ✔✔ an embossed brass seal · ✔ an ink tick · ⬜ an empty box (all drawn, 18 px) ──────────────
   ONE colour role per grade, read by the mark and by the ladder's segment alike: verified = brass · checked = ink · pending = slate ·
   unmarked = the muted grey of its dashed box. (Green is the desk's status colour and is not a grade.) */
.ui-vmark, .ui-ladder { --grade-verified: var(--chart-1); --grade-checked: var(--text-1); --grade-pending: var(--flag-pending); --grade-unmarked: var(--text-3); }
.ui-vmark { display: inline-flex; align-items: center; gap: var(--sp-2); flex: none; line-height: 1; color: var(--text-1); vertical-align: middle; }
.ui-vmark svg { display: block; flex: none; width: 18px; height: 18px; }
.ui-vmark__seal {
  --seal-brass: var(--grade-verified); --seal-ink: var(--text-on-accent);
  position: relative; flex: none; display: block; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 32% 24%, color-mix(in srgb, var(--seal-brass) 55%, #fff) 0, var(--seal-brass) 55%, color-mix(in srgb, var(--seal-brass) 70%, #000) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 1.5px rgba(0, 0, 0, .35), 0 0 0 1px color-mix(in srgb, var(--seal-brass) 55%, #000), 0 1px 1.5px rgba(0, 0, 0, .3);
}
.ui-vmark__seal::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; border: 1px dotted color-mix(in srgb, var(--seal-ink) 42%, transparent); pointer-events: none; }
.ui-vmark__ticks { position: relative; z-index: 1; filter: drop-shadow(0 .5px 0 rgba(255, 255, 255, .38)); }
.ui-vmark__ticks path { fill: none; stroke: var(--seal-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ui-vmark__tick path { fill: none; stroke: var(--grade-checked); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ui-vmark__box rect { fill: none; stroke: var(--grade-pending); stroke-width: 1.5; }
.ui-vmark--unmarked .ui-vmark__box rect { stroke: var(--grade-unmarked); stroke-dasharray: 2.4 2.2; }
.ui-vmark__word { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-2); white-space: nowrap; }
:root[data-contrast="high"] .ui-vmark__seal { box-shadow: 0 0 0 1px var(--text-1); }

/* ── the ladder: an ordered four-segment bar (verified · checked · pending · unmarked) with counts — not a donut ──────── */
.ui-ladder { display: grid; gap: var(--sp-3); min-width: 0; }
.ui-ladder__bar { display: flex; gap: var(--sp-1); height: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.ui-ladder__seg { --seg: var(--grade-unmarked); flex: var(--n, 0) 1 0; min-width: 0; box-sizing: border-box; height: 100%; border-radius: var(--sp-1); background: var(--seg); }
.ui-ladder__seg:first-child { border-top-left-radius: var(--r-1); border-bottom-left-radius: var(--r-1); }
.ui-ladder__seg:last-child { border-top-right-radius: var(--r-1); border-bottom-right-radius: var(--r-1); }
.ui-ladder__seg:not(.is-zero) { min-width: var(--sp-2); }
.ui-ladder__seg.is-zero { flex: 0 0 var(--sp-1); background: color-mix(in srgb, var(--seg) 55%, transparent); }   /* a zero is a 2 px sliver of its own colour, never a hollow box (which would read as the digit) */
.ui-ladder__seg--verified { --seg: var(--grade-verified); }
.ui-ladder__seg--checked { --seg: var(--grade-checked); }
.ui-ladder__seg--pending { --seg: var(--grade-pending); background: repeating-linear-gradient(135deg, var(--seg) 0 3px, color-mix(in srgb, var(--seg) 40%, transparent) 3px 6px); }
.ui-ladder__seg--unmarked:not(.is-zero) { background: transparent; border: 1px dashed var(--seg); }
.ui-ladder__key { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); font-size: var(--fs-sm); color: var(--text-2); }
.ui-ladder__item { display: inline-flex; align-items: center; gap: var(--sp-2); }
.ui-ladder__n { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; color: var(--text-1); }
.ui-ladder__word { white-space: nowrap; }
@media (forced-colors: active) {
  .ui-pchip, .ui-numplate { border: 1px solid CanvasText; forced-color-adjust: none; }
  .ui-ladder__seg { forced-color-adjust: none; background: CanvasText; }
  .ui-ladder__seg.is-zero { background: GrayText; }
  .ui-ladder__seg--unmarked:not(.is-zero) { background: Canvas; border-color: CanvasText; }
}