/* Utility + small component classes that replace inline style="" attributes.
 *
 * Loaded LAST (see css_links()). Each rule ends in :not(#u), which only adds
 * specificity: it makes the class behave like the inline style it replaced (wins
 * over normal stylesheet rules, still loses to !important, still overridden by JS
 * setting element.style). Do not remove the suffix.
 *
 * Naming: u-<prop>-<value> = one declaration (e.g. u-mb-0_5em = margin-bottom:.5em);
 * a plain name (field-label, form-label-160, form-actions) = a repeated structure.
 * Layout/typography only - colours and display toggling come in later waves. */

.field-label:not(#u) { display:block; margin-bottom:0.2rem; font-weight:500; }
.filter-label:not(#u) { display:block; font-weight:bold; margin-bottom:2px; }
.form-actions:not(#u) { text-align:right; margin-top:0.5rem; }
/* Small absolutely-positioned icon button inside a filter text input (clear/
   eraser button, or a combo-style chevron). right/padding default to the
   common case (solo button, flush right); a second button sharing the same
   input (e.g. an eraser sitting left of a chevron) overrides right/padding
   inline - see pets.php's petNameInput pair. */
.filter-icon-btn:not(#u) { position:absolute; top:50%; right:3px; transform:translateY(-50%); border:none; background:transparent; cursor:pointer; padding:0 4px; color:var(--c-muted); }
.form-label-120:not(#u) { display:inline-block; width:120px; text-align:right; margin-right:0.5em; }
.form-label-130:not(#u) { display:inline-block; width:130px; text-align:right; margin-right:0.5em; }
.form-label-140:not(#u) { display:inline-block; width:140px; text-align:right; margin-right:0.5em; }
.form-label-160:not(#u) { display:inline-block; width:160px; text-align:right; margin-right:0.5em; }
.u-box-sizing-border-box:not(#u) { box-sizing:border-box; }
.u-contents:not(#u) { display:contents; }
.u-cursor-pointer:not(#u) { cursor:pointer; }
.u-fs-0_75rem:not(#u) { font-size:0.75rem; }
.u-fs-0_85em:not(#u) { font-size:0.85em; }
.u-fs-0_8rem:not(#u) { font-size:0.8rem; }
.u-fs-0_9em:not(#u) { font-size:0.9em; }
.u-fs-0_9rem:not(#u) { font-size:0.9rem; }
.u-fs-1_2em:not(#u) { font-size:1.2em; }
.u-fs-1rem:not(#u) { font-size:1rem; }
.u-fw-600:not(#u) { font-weight:600; }
.u-fw-700:not(#u) { font-weight:700; }
.u-c-ink:not(#u) { color:var(--c-ink); }
.u-c-gold:not(#u) { color:#daa520; }
.u-c-info:not(#u) { color:#3b82f6; }
.u-c-amber:not(#u) { color:#f59e0b; }
.u-bg-ok:not(#u) { background-color:#16a34a; }
.u-bg-warn:not(#u) { background-color:#d97706; }
.u-bg-danger:not(#u) { background-color:#dc2626; }
.u-c-slate:not(#u) { color:var(--c-slate); }
.u-bg-tint:not(#u) { background:var(--bg-tint); }
.u-radius-4px:not(#u) { border-radius:4px; }
.u-uppercase:not(#u) { text-transform:uppercase; }
.u-ls-0_04em:not(#u) { letter-spacing:0.04em; }
/* Small grey pill/chip (count badges, role/status labels). Light values come
   from --bg-chip / --c-ink, overridden in styles_ui2_light.css. */
.chip-grey:not(#u) { background:var(--bg-chip); color:var(--c-ink); border-radius:3px; padding:0.1em 0.4em; font-size:0.78em; }
.chip-count:not(#u) { display:inline-block; background:var(--bg-chip); color:var(--c-ink); border-radius:999px; padding:0.05em 0.55em; font-size:0.75em; font-weight:700; }
/* 240px circular photo frame on add/edit pages (image or empty placeholder).
   Background from --bg-panel: light theme overrides it to the same colour the
   ui2-light remap used to produce for background:#f3f4f6. */
.photo-circle-edit:not(#u) { width:240px; height:240px; border-radius:50%; border:3px solid var(--c-brand); box-shadow:0 4px 15px rgba(0,0,0,0.2); background:var(--bg-panel); overflow:hidden; position:relative; margin:0 auto; }
/* Details-page photo frame: centred flex placeholder (size inline per instance).
   Auto-centering is opt-in via u-mx-auto, as the original frames varied. */
.photo-circle-frame:not(#u) { border-radius:50%; border:3px solid var(--c-brand); box-shadow:0 4px 15px rgba(0,0,0,0.2); background:var(--bg-panel); display:flex; align-items:center; justify-content:center; }
/* Smaller plain round frame (species photo, no shadow, positioned for an img child). */
.photo-circle-frame-plain:not(#u) { border-radius:50%; border:1px solid rgba(123,83,0,0.35); background:var(--bg-panel); overflow:hidden; position:relative; }
.photo-size-240:not(#u) { width:240px; height:240px; }
.photo-size-200:not(#u) { width:200px; height:200px; }
.photo-size-180:not(#u) { width:180px; height:180px; }
.u-mx-auto:not(#u) { margin-left:auto; margin-right:auto; }
.u-ml-0_4rem:not(#u) { margin-left:0.4rem; }
/* Full-screen backdrop for the Services list rating dialog (JS sets display). */
.svc-list-vote-overlay:not(#u) { position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:2600; align-items:center; justify-content:center; }
.u-bg-panel:not(#u) { background:var(--bg-panel); }
.u-c-strong:not(#u) { color:#111827; }
/* Empty round photo placeholder (icon only) built in JS (suppliers.js); the
   size is set inline per instance, everything else lives here. */
.photo-empty-circle:not(#u) { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid rgba(123,83,0,0.35); background:var(--bg-chip); flex-shrink:0; vertical-align:middle; }
.u-max-h-360px:not(#u) { max-height:360px; }
.u-overflow-y-auto:not(#u) { overflow-y:auto; }
.u-lh-1_0:not(#u) { line-height:1.0; }
.u-lh-1_25:not(#u) { line-height:1.25; }
.u-font-mono:not(#u) { font-family:monospace; }
.u-lh-1_3:not(#u) { line-height:1.3; }
.u-lh-1_4:not(#u) { line-height:1.4; }
.u-mb-0_3em:not(#u) { margin-bottom:0.3em; }
.u-mb-0_4rem:not(#u) { margin-bottom:0.4rem; }
.u-mb-0_5em:not(#u) { margin-bottom:0.5em; }
.u-mb-0_5rem:not(#u) { margin-bottom:0.5rem; }
.u-mb-0_75em:not(#u) { margin-bottom:0.75em; }
.u-mb-0_75rem:not(#u) { margin-bottom:0.75rem; }
.u-mb-1rem:not(#u) { margin-bottom:1rem; }
.u-minw-11em:not(#u) { min-width:11em; }
.u-ml-0_5em:not(#u) { margin-left:0.5em; }
.u-ml-0_5rem:not(#u) { margin-left:0.5rem; }
.u-mt-0:not(#u) { margin-top:0; }
.u-mt-0_25rem:not(#u) { margin-top:0.25rem; }
.u-mt-0_3em:not(#u) { margin-top:0.3em; }
.u-mt-0_75rem:not(#u) { margin-top:0.75rem; }
.u-nowrap:not(#u) { white-space:nowrap; }
.u-pr-1_2em:not(#u) { padding-right:1.2em; }
.u-pre-wrap:not(#u) { white-space:pre-wrap; }
.u-resize-none:not(#u) { resize:none; }
.u-resize-vertical:not(#u) { resize:vertical; }
.u-font-inherit:not(#u) { font-family:inherit; }
.u-fs-0_95em:not(#u) { font-size:0.95em; }
/* Small popup list under a text/score combo (vote score picker). display is
   toggled at runtime by the owning JS. */
.vote-score-dropdown:not(#u) { position:absolute; background:#fff; border:1px solid var(--border-soft); border-radius:4px; padding:0.2em 0; margin:0; list-style:none; z-index:3000; width:100%; max-height:200px; overflow-y:auto; box-shadow:0 4px 12px rgba(0,0,0,0.1); }
.u-text-center:not(#u) { text-align:center; }
.u-text-left:not(#u) { text-align:left; }
.u-va-top:not(#u) { vertical-align:top; }
.u-w-100p:not(#u) { width:100%; }
/* .combo-box-input's base rule caps it at max-width:20em - harmless in a
   narrow row, but when a combo is meant to truly fill its container (the
   intent of pairing it with u-w-100p) the chevron, absolutely positioned
   against the *container* (which does stretch), detaches from the
   capped-width input as soon as the row is wider than 20em. */
.combo-box-input.u-w-100p:not(#u) { max-width:none; }
.u-w-10em:not(#u) { width:100%; max-width:10em; }
.u-w-24em:not(#u) { width:100%; max-width:24em; }
.u-w-28em:not(#u) { width:100%; max-width:28em; }
.u-w-32em:not(#u) { width:100%; max-width:32em; }
.u-w-44em:not(#u) { width:100%; max-width:44em; }
.u-w-8em:not(#u) { width:100%; max-width:8em; }
.u-c-brand:not(#u) { color:var(--c-brand); }
.u-c-faint:not(#u) { color:var(--c-faint); }
.u-c-muted:not(#u) { color:var(--c-muted); }
.u-fs-0_75em:not(#u) { font-size:0.75em; }
.u-fs-0_78em:not(#u) { font-size:0.78em; }
.u-fs-0_85rem:not(#u) { font-size:0.85rem; }
.u-fs-0_8em:not(#u) { font-size:0.8em; }
.u-ml-0_3em:not(#u) { margin-left:0.3em; }
.u-ml-0_4rem:not(#u) { margin-left:0.4rem; }
.u-text-decoration-none:not(#u) { text-decoration:none; }
.u-c-danger:not(#u) { color:var(--c-danger); }
.u-c-danger-dark:not(#u) { color:var(--c-danger-dark); }
.u-c-ok:not(#u) { color:var(--c-ok); }
.u-c-warn:not(#u) { color:var(--c-warn); }
.u-c-warn-dark:not(#u) { color:var(--c-warn-dark); }
.photo-badge:not(#u) { position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:var(--c-brand); box-shadow:0 2px 6px rgba(0,0,0,0.4); display:flex; align-items:center; justify-content:center; z-index:2; pointer-events:none; }
.photo-circle-flex:not(#u) { width:240px; height:240px; border-radius:50%; border:3px solid var(--c-brand); background:var(--bg-panel); box-shadow:0 4px 15px rgba(0,0,0,0.2); display:flex; align-items:center; justify-content:center; margin:0 auto; }
.readonly-box:not(#u) { width:100%; background:var(--bg-panel); border-radius:4px; border:1px solid var(--border-soft); padding:0.3em 0.5em; box-sizing:border-box; }
.u-flex-1:not(#u) { flex:1; }
.u-flex-basis-100p:not(#u) { flex-basis:100%; }
.u-fs-0_72rem:not(#u) { font-size:0.72rem; }
.u-fs-0_82em:not(#u) { font-size:0.82em; }
.u-fs-0_82rem:not(#u) { font-size:0.82rem; }
.u-fs-0_88em:not(#u) { font-size:0.88em; }
.u-height-0:not(#u) { height:0; }
.u-minw-0:not(#u) { min-width:0; }
.u-overflow-hidden:not(#u) { overflow:hidden; }
.u-text-overflow-ellipsis:not(#u) { text-overflow:ellipsis; }
.u-text-right:not(#u) { text-align:right; }
.u-align-items-center:not(#u) { align-items:center; }
.u-block:not(#u) { display:block; }
.u-cursor-default:not(#u) { cursor:default; }
.u-flex:not(#u) { display:flex; }
.u-flex-0_0_auto:not(#u) { flex:0 0 auto; }
.u-flex-1_1_auto:not(#u) { flex:1 1 auto; }
.u-flex-wrap-wrap:not(#u) { flex-wrap:wrap; }
.u-font-style-italic:not(#u) { font-style:italic; }
.u-fs-0_55em:not(#u) { font-size:0.55em; }
.u-fs-0_6em:not(#u) { font-size:0.6em; }
.u-fs-1_05em:not(#u) { font-size:1.05em; }
.u-fs-1_1rem:not(#u) { font-size:1.1rem; }
.u-fw-500:not(#u) { font-weight:500; }
.u-fw-normal:not(#u) { font-weight:normal; }
.u-gap-0_25em:not(#u) { gap:0.25em; }
.u-gap-0_3rem:not(#u) { gap:0.3rem; }
.u-gap-0_4rem:not(#u) { gap:0.4rem; }
.u-gap-0_5em:not(#u) { gap:0.5em; }
.u-gap-0_5rem:not(#u) { gap:0.5rem; }
.u-inline-block:not(#u) { display:inline-block; }
.u-inline-flex:not(#u) { display:inline-flex; }
.u-m-0:not(#u) { margin:0; }
.u-m-0_0_0_5em_0:not(#u) { margin:0 0 0.5em 0; }
.u-m-0_0_0_75rem:not(#u) { margin:0 0 0.75rem; }
.u-m-1_25rem_0_0_5rem:not(#u) { margin:1.25rem 0 0.5rem; }
.u-mb-0_15em:not(#u) { margin-bottom:0.15em; }
.u-mb-0_25rem:not(#u) { margin-bottom:0.25rem; }
.u-mb-0_2em:not(#u) { margin-bottom:0.2em; }
.u-mb-0_2rem:not(#u) { margin-bottom:0.2rem; }
.u-mb-0_3rem:not(#u) { margin-bottom:0.3rem; }
.u-ml-0_25em:not(#u) { margin-left:0.25em; }
.u-ml-0_4em:not(#u) { margin-left:0.4em; }
.u-ml-auto:not(#u) { margin-left:auto; }
.u-mr-0_2em:not(#u) { margin-right:0.2em; }
.u-mr-0_5em:not(#u) { margin-right:0.5em; }
.u-mt-0_25em:not(#u) { margin-top:0.25em; }
.u-mt-0_5em:not(#u) { margin-top:0.5em; }
.u-mt-0_5rem:not(#u) { margin-top:0.5rem; }
.u-mt-1em:not(#u) { margin-top:1em; }
.u-mt-1rem:not(#u) { margin-top:1rem; }
.u-normal:not(#u) { white-space:normal; }
.u-opacity-0_7:not(#u) { opacity:0.7; }
.u-p-0_1rem_0_75rem_0_1rem_0:not(#u) { padding:0.1rem 0.75rem 0.1rem 0; }
.u-p-1em:not(#u) { padding:1em; }
.u-pl-0_25rem:not(#u) { padding-left:0.25rem; }
.u-position-relative:not(#u) { position:relative; }
.u-pr-0_25rem:not(#u) { padding-right:0.25rem; }
.u-text-transform-none:not(#u) { text-transform:none; }
.u-text-transform-uppercase:not(#u) { text-transform:uppercase; }
.u-va-middle:not(#u) { vertical-align:middle; }
.u-w-12em:not(#u) { width:100%; max-width:12em; }
.u-w-13em:not(#u) { width:100%; max-width:13em; }
.u-w-14em:not(#u) { width:100%; max-width:14em; }
.u-w-16_5em:not(#u) { width:16.5em; }
.u-w-1_75em:not(#u) { width:1.75em; }
.u-w-200px:not(#u) { width:200px; }
.u-w-20em:not(#u) { width:100%; max-width:20em; }
.u-w-21em:not(#u) { width:100%; max-width:21em; }
.u-w-22em:not(#u) { width:100%; max-width:22em; }
.u-w-260px:not(#u) { width:260px; }
.u-w-35p:not(#u) { width:35%; }
.u-w-70p:not(#u) { width:70%; }
.u-w-70px:not(#u) { width:70px; }
.u-w-9em:not(#u) { width:100%; max-width:9em; }
.u-w-auto:not(#u) { width:auto; }
.u-word-break-break-all:not(#u) { word-break:break-all; }
.u-align-items-baseline:not(#u) { align-items:baseline; }
.u-align-items-flex_end:not(#u) { align-items:flex-end; }
.u-align-items-flex_start:not(#u) { align-items:flex-start; }
.u-flex-direction-column:not(#u) { flex-direction:column; }
.u-flex-shrink-0:not(#u) { flex-shrink:0; }
.u-gap-0_25rem:not(#u) { gap:0.25rem; }
.u-gap-0_2em:not(#u) { gap:0.2em; }
.u-gap-0_375em_0_75em:not(#u) { gap:0.375em 0.75em; }
.u-gap-0_3em:not(#u) { gap:0.3em; }
.u-gap-0_4em:not(#u) { gap:0.4em; }
.u-gap-1_5rem:not(#u) { gap:1.5rem; }
.u-justify-content-space_between:not(#u) { justify-content:space-between; }
.u-mb-0:not(#u) { margin-bottom:0; }
.u-mb-0_05em:not(#u) { margin-bottom:0.05em; }
.u-mb-0_35rem:not(#u) { margin-bottom:0.35rem; }
.u-mb-0_4em:not(#u) { margin-bottom:0.4em; }
.u-mb-1em:not(#u) { margin-bottom:1em; }
.u-ml-128px:not(#u) { margin-left:128px; }
.u-mt-0_15em:not(#u) { margin-top:0.15em; }
.u-mt-0_1em:not(#u) { margin-top:0.1em; }
.u-mt-0_1rem:not(#u) { margin-top:0.1rem; }
.u-mt-0_2em:not(#u) { margin-top:0.2em; }
.u-mt-0_4em:not(#u) { margin-top:0.4em; }
.u-mt-0_4rem:not(#u) { margin-top:0.4rem; }
.u-mt-0_75em:not(#u) { margin-top:0.75em; }
.u-mt-2px:not(#u) { margin-top:2px; }
.u-pl-1_4em:not(#u) { padding-left:1.4em; }
.u-w-18em:not(#u) { width:100%; max-width:18em; }
.u-w-1p:not(#u) { width:1%; }
.u-w-30px:not(#u) { width:30px; }
.u-w-5em:not(#u) { width:100%; max-width:5em; }
/* On a table cell, width:100% is a column-width hint (not "fill parent" like
   in flex/inline layout), so it blows the column up to consume the whole
   table instead of the intended ~5em - used by the ratings-table Score
   column on 5 details_* pages. Restore the plain fixed width there. */
th.u-w-5em:not(#u), td.u-w-5em:not(#u) { width:5em; max-width:5em; }
.break-avoid-block:not(#u) { display:block; margin-bottom:0.3em; font-size:0.9em; break-inside:avoid; }
.cell-w100-left:not(#u) { border:none; text-align:left; width:100px; white-space:nowrap; font-size:0.82em; }
.cell-w45:not(#u) { border:none; text-align:center; width:45px; white-space:nowrap; font-size:0.82em; }
.cell-w80:not(#u) { border:none; text-align:center; width:100px; white-space:nowrap; font-size:0.82em; }
.field-error-inline:not(#u) { color:red; margin-left:4px; font-size:0.85em; }
.field-invalid:not(#u) { border:3px solid #dc2626 !important; }
.flex-label-120:not(#u) { width:120px; text-align:right; flex-shrink:0; }
.flex-label-120-pt:not(#u) { width:120px; text-align:right; flex-shrink:0; padding-top:2px; }
.form-label-130-medium:not(#u) { display:inline-block; width:130px; text-align:right; margin-right:0.5em; font-weight:500; }
.form-label-130-top:not(#u) { display:inline-block; width:130px; text-align:right; margin-right:0.5em; vertical-align:top; }
.form-label-140-top:not(#u) { display:inline-block; width:140px; text-align:right; margin-right:0.5em; vertical-align:top; }
.form-label-160-top:not(#u) { display:inline-block; width:160px; text-align:right; margin-right:0.5em; vertical-align:top; }
.img-rounded-preview:not(#u) { max-width:100%; max-height:300px; border:1px solid #ccc; border-radius:20px; }
.inline-form:not(#u) { display:inline; margin:0; }
.lightbox-caption:not(#u) { color:#fff; text-align:center; margin-top:0.5rem; font-size:0.9rem; max-width:80vw; }
.lightbox-close:not(#u) { position:absolute; top:3.5rem; right:0.75rem; background:rgba(0,0,0,0.5); border:none; color:#fff; font-size:1.5rem; cursor:pointer; z-index:2801; padding:0.5rem 0.75rem; border-radius:50%; line-height:1; }
.lightbox-count:not(#u) { color:rgba(255,255,255,0.6); text-align:center; margin-top:0.25rem; font-size:0.8rem; }
.lightbox-img:not(#u) { max-width:90vw; max-height:80vh; object-fit:contain; border-radius:6px; -webkit-user-drag:none; user-select:none; touch-action:pan-y; }
.link-plain-strong:not(#u) { font-weight:600; color:inherit; text-decoration:none; }
.modal-card-380-90:not(#u) { max-width:380px; width:90%; padding:0.75rem 1rem; border-radius:6px; box-shadow:0 10px 25px rgba(0,0,0,0.25); }
.modal-card-420-90:not(#u) { max-width:420px; width:90%; padding:0.75rem 1rem; border-radius:6px; box-shadow:0 10px 25px rgba(0,0,0,0.25); }
.modal-card-420-95:not(#u) { max-width:420px; width:95%; padding:0.75rem 1rem; border-radius:6px; box-shadow:0 10px 25px rgba(0,0,0,0.25); }
.modal-card-420-95-scroll:not(#u) { max-width:420px; width:95%; padding:0.75rem 1rem; border-radius:6px; box-shadow:0 10px 25px rgba(0,0,0,0.25); max-height:85vh; overflow-y:auto; }
.modal-card-480-90:not(#u) { max-width:480px; width:90%; padding:0.75rem 1rem; border-radius:6px; box-shadow:0 10px 25px rgba(0,0,0,0.25); }
.modal-card-520-95-scroll:not(#u) { max-width:520px; width:95%; padding:0.75rem 1rem; border-radius:6px; box-shadow:0 10px 25px rgba(0,0,0,0.25); max-height:85vh; overflow-y:auto; }
.pre-wrap-text:not(#u) { line-height:1.6; white-space:pre-wrap; word-wrap:break-word; }
.soft-box:not(#u) { padding:0.5em; border:1px solid var(--border-faint); border-radius:6px; }
.table-fixed-full:not(#u) { table-layout:fixed; width:100%; }
.text-error-sm:not(#u) { color:red; font-size:0.85em; }
.u-c-green:not(#u) { color:green; }
.u-inline:not(#u) { display:inline; }
.u-height-10px:not(#u) { height:10px; }
.u-height-11px:not(#u) { height:11px; }
.u-height-12px:not(#u) { height:12px; }
.u-height-14px:not(#u) { height:14px; }
.u-height-16px:not(#u) { height:16px; }
.u-height-18px:not(#u) { height:18px; }
.u-height-40px:not(#u) { height:40px; }
.u-height-48px:not(#u) { height:48px; }
.u-mr-0_3em:not(#u) { margin-right:0.3em; }
.u-pointer-events-none:not(#u) { pointer-events:none; }
.u-va-text-bottom:not(#u) { vertical-align:text-bottom; }
.u-w-10px:not(#u) { width:10px; }
.u-w-11px:not(#u) { width:11px; }
.u-w-12px:not(#u) { width:12px; }
.u-w-14px:not(#u) { width:14px; }
.u-w-16px:not(#u) { width:16px; }
.u-w-18px:not(#u) { width:18px; }
.u-w-40px:not(#u) { width:40px; }
.u-w-48px:not(#u) { width:48px; }
.u-w-80px:not(#u) { width:80px; }
.u-fs-0_65em:not(#u) { font-size:0.65em; }
.u-fs-0_7em:not(#u) { font-size:0.7em; }
.u-fs-0_875em:not(#u) { font-size:0.875em; }
.u-fs-0_95rem:not(#u) { font-size:0.95rem; }
.u-fw-400:not(#u) { font-weight:400; }
.u-height-13px:not(#u) { height:13px; }
.u-height-56px:not(#u) { height:56px; }
.u-height-80px:not(#u) { height:80px; }
.u-m-0_0_0_5rem:not(#u) { margin:0 0 0.5rem; }
.u-m-0_0_1em:not(#u) { margin:0 0 1em; }
.u-m-0_0_3em:not(#u) { margin:0 0.3em; }
.u-m-0_0_5em:not(#u) { margin:0 0.5em; }
.u-m-0_25rem_0_0_5rem:not(#u) { margin:-0.25rem 0 0.5rem; }
.u-m-0_25rem_0_5rem_0_5rem:not(#u) { margin:0.25rem 0.5rem 0.5rem; }
.u-mb-0_25em:not(#u) { margin-bottom:0.25em; }
.u-mb-1_5em:not(#u) { margin-bottom:1.5em; }
.u-min-height-1_1em:not(#u) { min-height:1.1em; }
.u-ml-1_2em:not(#u) { margin-left:1.2em; }
.u-mt-0_05em:not(#u) { margin-top:0.05em; }
.u-mt-0_35rem:not(#u) { margin-top:0.35rem; }
.u-mt-0_3rem:not(#u) { margin-top:0.3rem; }
.u-mt-1_25rem:not(#u) { margin-top:1.25rem; }
.u-p-0_3em_0:not(#u) { padding:0.3em 0; }
.u-p-0_6rem_1rem:not(#u) { padding:0.6rem 1rem; }
.u-pl-1_2em:not(#u) { padding-left:1.2em; }
.u-pl-1_3em:not(#u) { padding-left:1.3em; }
.u-pt-2px:not(#u) { padding-top:2px; }
.u-radius-8px:not(#u) { border-radius:8px; }
.u-radius-6px:not(#u) { border-radius:6px; }
/* Faint/soft border colours from the existing tokens. ui2-light already maps
   the tokens to the same values its old inline remap produced. */
.u-border-soft:not(#u) { border:1px solid var(--border-soft); }
.u-border-faint:not(#u) { border:1px solid var(--border-faint); }
.u-border-top-faint:not(#u) { border-top:1px solid var(--border-faint); }
.hr-faint:not(#u) { margin:1em 0; border:none; border-top:1px solid var(--border-faint); }
.u-p-0_5em:not(#u) { padding:0.5em; }
.u-p-0_75em:not(#u) { padding:0.75em; }
.u-pt-0_5rem:not(#u) { padding-top:0.5rem; }
.u-mt-0_6rem:not(#u) { margin-top:0.6rem; }
.u-mb-2em:not(#u) { margin-bottom:2em; }
.u-w-13px:not(#u) { width:13px; }
.u-w-56px:not(#u) { width:56px; }
.u-w-90px:not(#u) { width:90px; }
.u-flex-2:not(#u) { flex:2; }
.u-flex-3:not(#u) { flex:3; }
.u-gap-0_6rem:not(#u) { gap:0.6rem; }
.u-gap-0_75rem:not(#u) { gap:0.75rem; }
.u-gap-1_2rem:not(#u) { gap:1.2rem; }
.u-m-0_0_0_1rem:not(#u) { margin:0 0 0.1rem; }
.u-minw-5rem:not(#u) { min-width:5rem; }
.u-minw-7em:not(#u) { min-width:7em; }
.u-minw-8em:not(#u) { min-width:8em; }
.u-minw-8rem:not(#u) { min-width:8rem; }
.u-mr-1em:not(#u) { margin-right:1em; }
.u-p-0_25em_0:not(#u) { padding:0.25em 0; }
.u-p-0_25em_1em_0_25em_0:not(#u) { padding:0.25em 1em 0.25em 0; }
.u-w-4rem:not(#u) { width:4rem; }
.u-w-7em:not(#u) { width:100%; max-width:7em; }
.u-word-break-break-word:not(#u) { word-break:break-word; }
.muted-note-sm:not(#u) { font-size:0.8rem; color:#6b7280; margin-left:0.25rem; }
.modal-card-360-95:not(#u) { max-width:360px; width:95%; padding:0.75rem 1rem; border-radius:6px; box-shadow:0 10px 25px rgba(0,0,0,0.25); }
.modal-card-380-95:not(#u) { max-width:380px; width:95%; padding:0.75rem 1rem; border-radius:6px; box-shadow:0 10px 25px rgba(0,0,0,0.25); }
.modal-card-400-95-scroll:not(#u) { max-width:400px; width:95%; padding:0.75rem 1rem; border-radius:6px; box-shadow:0 10px 25px rgba(0,0,0,0.25); max-height:85vh; overflow-y:auto; }
.modal-card-460-90-scroll:not(#u) { max-width:460px; width:90%; padding:0.75rem 1rem; border-radius:6px; box-shadow:0 10px 25px rgba(0,0,0,0.25); max-height:85vh; overflow-y:auto; }
.modal-card-480-95-scroll:not(#u) { max-width:480px; width:95%; padding:0.75rem 1rem; border-radius:6px; box-shadow:0 10px 25px rgba(0,0,0,0.25); max-height:85vh; overflow-y:auto; }