/* ============================================================================================================================
	rm-utilities.css - single-purpose classes (Step 7, 6 Oct 2026). They replaced the style="..." attributes of our pages and dialogs
	(about 880), so the Content-Security-Policy can refuse inline styles. Loaded after every other common stylesheet (an inline style
	won over all of them); no !important. Names: rm-u-<property short>-<value> - spacing in steps of --rm-space-* (m / p, t r b l),
	sizes in % (rm-u-w-50) or px (rm-u-w-200px), colours by token. A combination used in many places is a component class instead.
	Docs\Architecture\UI Code Style Guide.md, section 4.3.
============================================================================================================================ */

/* ---- starts hidden: rm-ui.js (RM.dom.startHidden) turns it into the inline display: none, so RM.dom.show(), style.display = ''
   and the copies of a template behave as with the old style="display: none" ---- */
.rm-start-hidden:not(#rm-inline) { display: none; }

/* ---- a one-off background colour that is data, not brand (the calibration greys, the maintenance banner) ---- */
.rm-fill:not(#rm-inline) { background-color: var(--rm-fill); }
.rm-fill--0e0e0e { --rm-fill: #0E0E0E; }
.rm-fill--101010 { --rm-fill: #101010; }
.rm-fill--181818 { --rm-fill: #181818; }
.rm-fill--191919 { --rm-fill: #191919; }
.rm-fill--1e1e1e { --rm-fill: #1E1E1E; }
.rm-fill--212121 { --rm-fill: #212121; }
.rm-fill--242424 { --rm-fill: #242424; }
.rm-fill--292929 { --rm-fill: #292929; }
.rm-fill--2d2d2d { --rm-fill: #2D2D2D; }
.rm-fill--330000 { --rm-fill: #330000; }
.rm-fill--353535 { --rm-fill: #353535; }
.rm-fill--3a3a3a { --rm-fill: #3A3A3A; }
.rm-fill--3d3d3d { --rm-fill: #3D3D3D; }
.rm-fill--424242 { --rm-fill: #424242; }
.rm-fill--4a4a4a { --rm-fill: #4A4A4A; }
.rm-fill--505050 { --rm-fill: #505050; }
.rm-fill--525252 { --rm-fill: #525252; }
.rm-fill--595959 { --rm-fill: #595959; }
.rm-fill--626262 { --rm-fill: #626262; }
.rm-fill--6a6a6a { --rm-fill: #6A6A6A; }
.rm-fill--707070 { --rm-fill: #707070; }
.rm-fill--727272 { --rm-fill: #727272; }
.rm-fill--737373 { --rm-fill: #737373; }
.rm-fill--757575 { --rm-fill: #757575; }
.rm-fill--797979 { --rm-fill: #797979; }
.rm-fill--7a7a7a { --rm-fill: #7A7A7A; }
.rm-fill--7f7f7f { --rm-fill: #7F7F7F; }
.rm-fill--838383 { --rm-fill: #838383; }
.rm-fill--848484 { --rm-fill: #848484; }
.rm-fill--898989 { --rm-fill: #898989; }
.rm-fill--8d8d8d { --rm-fill: #8D8D8D; }
.rm-fill--a5a5a5 { --rm-fill: #A5A5A5; }
.rm-fill--afafaf { --rm-fill: #AFAFAF; }
.rm-fill--bdbdbd { --rm-fill: #BDBDBD; }
.rm-fill--c3c3c3 { --rm-fill: #C3C3C3; }
.rm-fill--d0d0d0 { --rm-fill: #D0D0D0; }
.rm-fill--d2d2d2 { --rm-fill: #D2D2D2; }
.rm-fill--d7d7d7 { --rm-fill: #D7D7D7; }
.rm-fill--d8d8d8 { --rm-fill: #D8D8D8; }
.rm-fill--dfdfdf { --rm-fill: #DFDFDF; }
.rm-fill--e3e3e3 { --rm-fill: #E3E3E3; }
.rm-fill--e8e8e8 { --rm-fill: #E8E8E8; }
.rm-fill--efefef { --rm-fill: #EFEFEF; }
.rm-fill--f3f3f3 { --rm-fill: #F3F3F3; }
.rm-fill--f8f8f8 { --rm-fill: #F8F8F8; }

/* ---- layout, sizes, text ---- */
.rm-u-absolute:not(#rm-inline) { position: absolute; }
.rm-u-align-baseline:not(#rm-inline) { vertical-align: baseline; }
.rm-u-align-bottom:not(#rm-inline) { vertical-align: bottom; }
.rm-u-align-text-top:not(#rm-inline) { vertical-align: text-top; }
.rm-u-basis-0:not(#rm-inline) { flex-basis: 0; }
.rm-u-bg-black:not(#rm-inline) { background-color: var(--rm-black); }
.rm-u-bg-dark:not(#rm-inline) { background-color: var(--rm-dark); }
.rm-u-bg-grey-99:not(#rm-inline) { background-color: var(--rm-grey-99); }
.rm-u-bg-grey-cc:not(#rm-inline) { background-color: var(--rm-grey-cc); }
.rm-u-bg-grey-dd:not(#rm-inline) { background-color: var(--rm-grey-dd); }
.rm-u-bg-grey-f9:not(#rm-inline) { background-color: var(--rm-grey-f9); }
.rm-u-bg-lighter:not(#rm-inline) { background-color: var(--rm-lighter); }
.rm-u-bg-mid-grey:not(#rm-inline) { background-color: var(--rm-mid-grey); }
.rm-u-bg-white:not(#rm-inline) { background-color: var(--rm-white); }
.rm-u-block:not(#rm-inline) { display: block; }
.rm-u-bold:not(#rm-inline) { font-weight: bold; }
.rm-u-bolder:not(#rm-inline) { font-weight: bolder; }
.rm-u-bottom-0:not(#rm-inline) { bottom: 0; }
.rm-u-column:not(#rm-inline) { flex-direction: column; }
.rm-u-column-gap-3:not(#rm-inline) { gap: 0 var(--rm-space-3); }
.rm-u-content-box:not(#rm-inline) { box-sizing: content-box; }
.rm-u-contents:not(#rm-inline) { display: contents; }
.rm-u-cursor-default:not(#rm-inline) { cursor: default; }
.rm-u-cursor-move:not(#rm-inline) { cursor: move; }
.rm-u-cursor-pointer:not(#rm-inline) { cursor: pointer; }
.rm-u-events-initial:not(#rm-inline) { pointer-events: initial; }
.rm-u-events-none:not(#rm-inline) { pointer-events: none; }
.rm-u-flex:not(#rm-inline) { display: flex; }
.rm-u-flex-nowrap:not(#rm-inline) { flex-wrap: nowrap; }
.rm-u-float-left:not(#rm-inline) { float: left; }
.rm-u-float-right:not(#rm-inline) { float: right; }
.rm-u-fs-body:not(#rm-inline) { font-size: var(--rm-font-size-body); }
.rm-u-gap-4:not(#rm-inline) { gap: var(--rm-space-4); }
.rm-u-grid:not(#rm-inline) { display: grid; }
.rm-u-grow:not(#rm-inline) { flex-grow: 1; }
.rm-u-h-100:not(#rm-inline) { height: 100%; }
.rm-u-h-22px:not(#rm-inline) { height: 22px; }
.rm-u-h-30px:not(#rm-inline) { height: 30px; }
.rm-u-h-5:not(#rm-inline) { height: 5%; }
.rm-u-h-50:not(#rm-inline) { height: 50%; }
.rm-u-h-50px:not(#rm-inline) { height: 50px; }
.rm-u-inline-block:not(#rm-inline) { display: inline-block; }
.rm-u-items-baseline:not(#rm-inline) { align-items: baseline; }
.rm-u-items-center:not(#rm-inline) { align-items: center; }
.rm-u-justify-between:not(#rm-inline) { justify-content: space-between; }
.rm-u-justify-center:not(#rm-inline) { justify-content: center; }
.rm-u-justify-flex-start:not(#rm-inline) { justify-content: flex-start; }
.rm-u-justify-start:not(#rm-inline) { justify-content: start; }
.rm-u-left-50:not(#rm-inline) { left: 50%; }
.rm-u-lh-1:not(#rm-inline) { line-height: 1; }
.rm-u-lh-1-2:not(#rm-inline) { line-height: 1.2; }
.rm-u-lh-2:not(#rm-inline) { line-height: 2; }
.rm-u-lh-normal:not(#rm-inline) { line-height: normal; }
.rm-u-maxw-100:not(#rm-inline) { max-width: 100%; }
.rm-u-maxw-1000px:not(#rm-inline) { max-width: 1000px; }
.rm-u-maxw-125px:not(#rm-inline) { max-width: 125px; }
.rm-u-maxw-1300px:not(#rm-inline) { max-width: 1300px; }
.rm-u-maxw-1700px:not(#rm-inline) { max-width: 1700px; }
.rm-u-maxw-200px:not(#rm-inline) { max-width: 200px; }
.rm-u-maxw-50:not(#rm-inline) { max-width: 50%; }
.rm-u-maxw-500px:not(#rm-inline) { max-width: 500px; }
.rm-u-maxw-95:not(#rm-inline) { max-width: 95%; }
.rm-u-minh-150px:not(#rm-inline) { min-height: 150px; }
.rm-u-minh-225px:not(#rm-inline) { min-height: 225px; }
.rm-u-minh-320px:not(#rm-inline) { min-height: 320px; }
.rm-u-minw-250px:not(#rm-inline) { min-width: 250px; }
.rm-u-minw-300px:not(#rm-inline) { min-width: 300px; }
.rm-u-no-transition:not(#rm-inline) { transition: none; }
.rm-u-nowrap:not(#rm-inline) { white-space: nowrap; }
.rm-u-opacity-0:not(#rm-inline) { opacity: 0; }
.rm-u-opacity-50:not(#rm-inline) { opacity: 0.5; }
.rm-u-opacity-75:not(#rm-inline) { opacity: 0.75; }
.rm-u-overflow-initial:not(#rm-inline) { overflow: initial; }
.rm-u-overflow-x-hidden:not(#rm-inline) { overflow-x: hidden; }
.rm-u-overflow-x-visible:not(#rm-inline) { overflow-x: visible; }
.rm-u-relative:not(#rm-inline) { position: relative; }
.rm-u-right-0:not(#rm-inline) { right: 0; }
.rm-u-rounded:not(#rm-inline) { border-radius: var(--rm-radius); }
.rm-u-row:not(#rm-inline) { flex-direction: row; }
.rm-u-row-gap-4:not(#rm-inline) { row-gap: var(--rm-space-4); }
.rm-u-self-center:not(#rm-inline) { align-self: center; }
.rm-u-self-end:not(#rm-inline) { align-self: end; }
.rm-u-self-flex-end:not(#rm-inline) { align-self: flex-end; }
.rm-u-self-flex-start:not(#rm-inline) { align-self: flex-start; }
.rm-u-text-center:not(#rm-inline) { text-align: center; }
.rm-u-text-grey-99:not(#rm-inline) { color: var(--rm-grey-99); }
.rm-u-text-grey-bb:not(#rm-inline) { color: var(--rm-grey-bb); }
.rm-u-text-left:not(#rm-inline) { text-align: left; }
.rm-u-text-lighter:not(#rm-inline) { color: var(--rm-lighter); }
.rm-u-text-theme:not(#rm-inline) { color: var(--theme-color); }
.dark.rm-u-text-theme:not(#rm-inline) { color: var(--rm-link-on-dark); }		/* text on a dark ground: the orange made lighter, as links (the orange was ~3.9:1 there - J-36) */
.rm-u-text-white:not(#rm-inline) { color: var(--rm-white); }
.rm-u-top-0:not(#rm-inline) { top: 0; }
.rm-u-top-50:not(#rm-inline) { top: 50%; }
.rm-u-w-0:not(#rm-inline) { width: 0%; }
.rm-u-w-10:not(#rm-inline) { width: 10%; }
.rm-u-w-100:not(#rm-inline) { width: 100%; }
.rm-u-w-100px:not(#rm-inline) { width: 100px; }
.rm-u-w-110:not(#rm-inline) { width: 110%; }
.rm-u-w-1130px:not(#rm-inline) { width: 1130px; }
.rm-u-w-150px:not(#rm-inline) { width: 150px; }
.rm-u-w-159px:not(#rm-inline) { width: 159px; }
.rm-u-w-20:not(#rm-inline) { width: 20%; }
.rm-u-w-200px:not(#rm-inline) { width: 200px; }
.rm-u-w-20px:not(#rm-inline) { width: 20px; }
.rm-u-w-220px:not(#rm-inline) { width: 220px; }
.rm-u-w-25:not(#rm-inline) { width: 25%; }
.rm-u-w-300px:not(#rm-inline) { width: 300px; }
.rm-u-w-30px:not(#rm-inline) { width: 30px; }
.rm-u-w-35px:not(#rm-inline) { width: 35px; }
.rm-u-w-40:not(#rm-inline) { width: 40%; }
.rm-u-w-409px:not(#rm-inline) { width: 409px; }
.rm-u-w-50:not(#rm-inline) { width: 50%; }
.rm-u-w-500px:not(#rm-inline) { width: 500px; }
.rm-u-w-55px:not(#rm-inline) { width: 55px; }
.rm-u-w-560px:not(#rm-inline) { width: 560px; }
.rm-u-w-60:not(#rm-inline) { width: 60%; }
.rm-u-w-64px:not(#rm-inline) { width: 64px; }
.rm-u-w-80:not(#rm-inline) { width: 80%; }
.rm-u-w-85px:not(#rm-inline) { width: 85px; }
.rm-u-w-90:not(#rm-inline) { width: 90%; }
.rm-u-w-max-content:not(#rm-inline) { width: max-content; }
.rm-u-wrap:not(#rm-inline) { flex-wrap: wrap; }
.rm-u-z-raised:not(#rm-inline) { z-index: var(--rm-z-raised); }

/* ---- spacing (the shorthands first, so a side's class wins over them) ---- */
.rm-u-m-2:not(#rm-inline) { margin: var(--rm-space-2); }
.rm-u-m-3:not(#rm-inline) { margin: var(--rm-space-3); }
.rm-u-m-auto:not(#rm-inline) { margin: auto; }
.rm-u-p-0:not(#rm-inline) { padding: 0; }
.rm-u-p-1:not(#rm-inline) { padding: var(--rm-space-1); }
.rm-u-p-2:not(#rm-inline) { padding: var(--rm-space-2); }
.rm-u-p-3:not(#rm-inline) { padding: var(--rm-space-3); }
.rm-u-mb-0:not(#rm-inline) { margin-bottom: 0; }
.rm-u-mb-1:not(#rm-inline) { margin-bottom: var(--rm-space-1); }
.rm-u-mb-2:not(#rm-inline) { margin-bottom: var(--rm-space-2); }
.rm-u-mb-3:not(#rm-inline) { margin-bottom: var(--rm-space-3); }
.rm-u-mb-4:not(#rm-inline) { margin-bottom: var(--rm-space-4); }
.rm-u-mb-5:not(#rm-inline) { margin-bottom: var(--rm-space-5); }
.rm-u-mb-7:not(#rm-inline) { margin-bottom: var(--rm-space-7); }
.rm-u-ml-0:not(#rm-inline) { margin-left: 0; }
.rm-u-ml-1:not(#rm-inline) { margin-left: var(--rm-space-1); }
.rm-u-ml-2:not(#rm-inline) { margin-left: var(--rm-space-2); }
.rm-u-ml-3:not(#rm-inline) { margin-left: var(--rm-space-3); }
.rm-u-ml-4:not(#rm-inline) { margin-left: var(--rm-space-4); }
.rm-u-ml-5:not(#rm-inline) { margin-left: var(--rm-space-5); }
.rm-u-ml-auto:not(#rm-inline) { margin-left: auto; }
.rm-u-mr-0:not(#rm-inline) { margin-right: 0; }
.rm-u-mr-1:not(#rm-inline) { margin-right: var(--rm-space-1); }
.rm-u-mr-2:not(#rm-inline) { margin-right: var(--rm-space-2); }
.rm-u-mr-3:not(#rm-inline) { margin-right: var(--rm-space-3); }
.rm-u-mr-4:not(#rm-inline) { margin-right: var(--rm-space-4); }
.rm-u-mr-5:not(#rm-inline) { margin-right: var(--rm-space-5); }
.rm-u-mr-auto:not(#rm-inline) { margin-right: auto; }
.rm-u-mt-0:not(#rm-inline) { margin-top: 0; }
.rm-u-mt-1:not(#rm-inline) { margin-top: var(--rm-space-1); }
.rm-u-mt-2:not(#rm-inline) { margin-top: var(--rm-space-2); }
.rm-u-mt-3:not(#rm-inline) { margin-top: var(--rm-space-3); }
.rm-u-mt-4:not(#rm-inline) { margin-top: var(--rm-space-4); }
.rm-u-mt-5:not(#rm-inline) { margin-top: var(--rm-space-5); }
.rm-u-pb-1:not(#rm-inline) { padding-bottom: var(--rm-space-1); }
.rm-u-pb-2:not(#rm-inline) { padding-bottom: var(--rm-space-2); }
.rm-u-pb-3:not(#rm-inline) { padding-bottom: var(--rm-space-3); }
.rm-u-pb-4:not(#rm-inline) { padding-bottom: var(--rm-space-4); }
.rm-u-pl-0:not(#rm-inline) { padding-left: 0; }
.rm-u-pl-3:not(#rm-inline) { padding-left: var(--rm-space-3); }
.rm-u-pl-4:not(#rm-inline) { padding-left: var(--rm-space-4); }
.rm-u-pr-0:not(#rm-inline) { padding-right: 0; }
.rm-u-pr-2:not(#rm-inline) { padding-right: var(--rm-space-2); }
.rm-u-pr-3:not(#rm-inline) { padding-right: var(--rm-space-3); }
.rm-u-pt-0:not(#rm-inline) { padding-top: 0; }
.rm-u-pt-2:not(#rm-inline) { padding-top: var(--rm-space-2); }
.rm-u-pt-3:not(#rm-inline) { padding-top: var(--rm-space-3); }
.rm-u-pt-4:not(#rm-inline) { padding-top: var(--rm-space-4); }