wrapped, a JS-filled , or an input.
The tones are the theme's own: --cui-body-color (#2c384a) stays on values, captions
drop to the muted grey CoreUI uses for secondary text. Weight 600 keeps the caption
legible at the lower contrast and reinforces "this is the name of the thing". Inputs
are unaffected - a readonly input already has its own grey field to sit in.
To revert: delete this block. */
.criteria-flex .search-panel .form-group > label:not(.inline-label),
.sv-row > .sv-label {
color: var(--sv-label, #6b7a8d);
font-weight: 600;
}
/* A value the page DID wrap (, , a JS-filled div) should not be shouted twice -
it keeps body ink, and any bold it carries now reads as emphasis against a muted
caption rather than competing with one. */
.criteria-flex .search-panel .form-group > b,
.criteria-flex .search-panel .form-group > span:not(.badge),
.criteria-flex .search-panel .form-group > div {
/* sv-ink first: --cui-body-color is a LIGHT-ONLY literal, and these display
values rendered dark-on-dark once the panels went token-dark */
color: var(--sv-ink, var(--cui-body-color));
}
/* ---------- Disabled checkboxes / radios: readable, not invisible ----------
A disabled checkbox is drawn by the browser in a pale grey that all but vanishes on a
white card, and a disabled CHECKED one is the worst case: a light grey tick inside a
light grey box. That matters here because several read-only panels use disabled boxes
to REPORT state rather than to collect it - the RIBS case NY DMV registration flags
(Reg Expired, Suspended, Revoked ...) are a status list the user has to be able to
read at a glance.
Rendering is taken over with appearance:none for the disabled state only, because
nothing else is reliable: the UA paints disabled controls its own way, and opacity /
filter / accent-color are honoured inconsistently across Chrome, Firefox and Safari.
Interactive (enabled) boxes keep native rendering untouched, so focus rings, keyboard
behaviour and platform look are unaffected - and a disabled control has no interaction
to break.
The checked mark is a background SVG rather than a ::before, since pseudo-elements on
input elements are not dependable outside Chrome. 13px matches the native box closely
enough to sit level with enabled boxes in the same column.
To revert the experiment: delete this block. */
input[type='checkbox']:disabled,
input[type='radio']:disabled {
-webkit-appearance: none;
appearance: none;
width: 13px;
height: 13px;
margin: 0 3px 0 0;
vertical-align: middle;
box-sizing: border-box;
border: 1px solid var(--sv-line-strong, #8a99ab);
background-color: var(--sv-fill, #f0f2f5);
opacity: 1; /* beat any UA/theme fading */
cursor: not-allowed;
}
input[type='radio']:disabled { border-radius: 50%; }
input[type='checkbox']:disabled { border-radius: 3px; }
/* Checked + disabled: the state a read-only panel is actually reporting. Tinted box,
firm border and a dark tick, so "ticked" reads from across the room while still
looking inert rather than clickable. */
input[type='checkbox']:disabled:checked {
border-color: var(--sv-accent, #2c384a);
background-color: var(--sv-accent-chip, #d7e2ee);
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%232c384a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 11px 11px;
}
input[type='radio']:disabled:checked {
border-color: var(--sv-accent, #2c384a);
background-color: var(--sv-card, #fff);
background-image: radial-gradient(#2c384a 0, #2c384a 3px, transparent 3.5px);
}
/* Dark mode: the tick above is a background SVG with its stroke baked in as #2c384a, a dark
navy chosen against the LIGHT chip. In dark mode --sv-accent-chip is #204464, so that tick
was dark navy on dark blue - about 1.2:1, invisible in practice. The NY DMV status flags
were unreadable there (Dennis, 2026-08-31).
Inverted rather than just relightened: the box fills with the accent and the tick goes
near-black, which both fixes the contrast (~8:1) and makes a ticked flag read as a filled
chip instead of an outline - the "stand out more" part. The soft ring adds prominence
without changing the 13px footprint, so these still sit level with enabled boxes in the
same column.
Scoped to .sv-dark-ready, the same opt-in container the dark tokens themselves use. Gating
on html[data-sv-dark] alone was wrong: dark mode only repaints marked containers, so on a
page that stays light while the toggle is on, the tokens would still be the LIGHT palette
and this rule would fill the box with the light accent (#00539a) and put a near-black tick
on it - worse than what it replaced.
Radios get the same treatment; their mark is a gradient, so only the colour stops change. */
html[data-sv-dark] .sv-dark-ready input[type='checkbox']:disabled:checked {
border-color: var(--sv-accent-strong, #7cbcec);
background-color: var(--sv-accent, #58a6e0);
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%230d1b26' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E");
box-shadow: 0 0 0 2px rgba(88, 166, 224, 0.30);
}
html[data-sv-dark] .sv-dark-ready input[type='radio']:disabled:checked {
border-color: var(--sv-accent-strong, #7cbcec);
background-color: var(--sv-accent, #58a6e0);
background-image: radial-gradient(#0d1b26 0, #0d1b26 3px, transparent 3.5px);
box-shadow: 0 0 0 2px rgba(88, 166, 224, 0.30);
}
/* ---------- Bootstrap button accent (login page + any BS buttons) ---------- */
.btn-primary {
background-color: var(--cui-btn-bg);
border-color: var(--cui-btn-bg);
color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
background-color: var(--cui-btn-hover);
border-color: var(--cui-btn-hover);
color: #fff;
}
.btn-link { color: var(--cui-link); }
/* ---------- login (welcome.jsp) ---------- */
/* CoreUI-style sign-in card: white, bordered, centered; sits over the splash
image on desktop. On phones the splash/overlay classes are removed by the
page's own JS, so the card floats on the plain light background. */
.form-signin {
background-color: #fff;
border: 1px solid var(--cui-card-border);
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 21, 0.18);
padding: 2rem 1.75rem;
width: 100%;
max-width: 400px;
margin: 8vh auto 0;
}
@media (max-width: 700px) {
body#login-placement { background-color: var(--cui-body-bg) !important; }
.form-signin {
margin: 3vh auto 0;
max-width: 94vw;
box-shadow: 0 1px 4px rgba(0, 0, 21, 0.1);
}
}