@webority/theme 0.3.0 → 0.5.0

package/scss/_wui-components.scss

@@ -14,3728 +14,24 @@
 //
 // Plain CSS is valid SCSS; nothing here has been re-nested or renamed.
 // ============================================================================
-
-// ── Checkbox & Radio ──
-// Selection controls: a 20px glyph centred in a 36px circular hit area
-// that shows a soft primary-tinted ripple on hover. Unchecked = muted
-// grey-blue outline; checked = solid primary. Checkbox = squircle box + white
-// tick; radio = ring + filled centre dot. Pure CSS, no JS — drives the native
-// input via `appearance: none`, so it stays keyboard- and screen-reader-
-// accessible.
 //
-// Markup:
-//   <label class="lx-control">
-//     <input type="checkbox" class="lx-check">      (or type="radio" class="lx-radio")
-//     <span class="lx-control-label">Full-time</span>
-//   </label>
-// Group rows in a `.lx-control-group` (horizontal, wraps) or stack them.
-.lx-control {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    cursor: pointer;
-    user-select: none;
-    font-size: 14px;
-    color: var(--color-text);
-    line-height: 1.4;
-}
-.lx-control-group {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 8px 20px;
-}
-.lx-control-label {
-    padding-right: 2px;
-}
-
-// The control glyph: 20px box inside a 36px circular tap target (8px ring).
-.lx-check,
-.lx-radio {
-    appearance: none;
-    -webkit-appearance: none;
-    flex: none;
-    box-sizing: border-box;
-    width: 20px;
-    height: 20px;
-    // 8px transparent ring → 36px hit area + room for the hover ripple
-    margin: 8px;
-    position: relative;
-    border: 1.6px solid var(--color-border-strong);
-    background: transparent;
-    cursor: pointer;
-    transition:
-        border-color 0.15s ease,
-        background-color 0.15s ease;
-}
-.lx-check {
-    border-radius: var(--radius-sm);
-    corner-shape: squircle;
-}
-.lx-radio {
-    border-radius: 50%;
-}
-
-// Soft primary circular ripple behind the glyph on hover (the Minimals halo).
-.lx-check::after,
-.lx-radio::after {
-    content: "";
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    transform: translate(-50%, -50%) scale(0.5);
-    background: var(--color-primary-soft);
-    opacity: 0;
-    z-index: -1;
-    pointer-events: none;
-    transition:
-        opacity 0.15s ease,
-        transform 0.15s ease;
-}
-.lx-control:hover .lx-check::after,
-.lx-control:hover .lx-radio::after,
-.lx-check:hover::after,
-.lx-radio:hover::after {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
-}
-
-// Checked — primary fill (checkbox) / primary ring + dot (radio)
-.lx-check:checked {
-    border-color: var(--color-primary);
-    background: var(--color-primary);
-    // white tick drawn with a rotated box-shadow-free pseudo
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
-    background-size: 15px 15px;
-    background-position: center;
-    background-repeat: no-repeat;
-}
-.lx-radio:checked {
-    border-color: var(--color-primary);
-}
-.lx-radio:checked::before {
-    content: "";
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    background: var(--color-primary);
-    transform: translate(-50%, -50%);
-}
-
-// Keyboard focus ring (only on focus-visible, not mouse)
-.lx-check:focus-visible,
-.lx-radio:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 3px var(--color-primary-soft);
-}
-
-// Disabled
-.lx-check:disabled,
-.lx-radio:disabled,
-.lx-control:has(:disabled) {
-    cursor: not-allowed;
-}
-.lx-check:disabled,
-.lx-radio:disabled {
-    border-color: var(--color-border);
-    background-color: var(--color-bg-muted);
-}
-.lx-check:disabled:checked,
-.lx-radio:disabled:checked {
-    border-color: var(--color-border-strong);
-}
-.lx-check:disabled:checked {
-    background-color: var(--color-border-strong);
-}
-.lx-radio:disabled:checked::before {
-    background: var(--color-border-strong);
-}
-.lx-control:has(:disabled) {
-    color: var(--color-text-subtle);
-}
-.lx-check:disabled::after,
-.lx-radio:disabled::after {
-    display: none;
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .lx-check,
-    .lx-radio,
-    .lx-check::after,
-    .lx-radio::after {
-        transition: none;
-    }
-}
-
-// Row-selection checkbox variant used inside a .table-ledger select column.
-.lx-check {
-    width: 16px;
-    height: 16px;
-    accent-color: var(--color-primary);
-    cursor: pointer;
-    vertical-align: middle;
-}
-
-// ── Field / Input ──
-// Inputs — always-white fill, 16px squircle, soft brand border tint on focus
-// (no glow).
-.input,
-.select,
-.textarea {
-    box-sizing: border-box;
-    width: 100%;
-    height: var(--wui-control-height);
-    padding: 12px;
-    border-radius: var(--radius);
-    border: 1px solid var(--color-border);
-    background: var(--color-surface);
-    font-size: 14px;
-    line-height: 1.5;
-    color: var(--color-text);
-    transition:
-        border-color 0.12s,
-        box-shadow 0.12s;
-    font-family: inherit;
-}
-.textarea {
-    height: auto;
-    min-height: 120px;
-    padding: 12px 15px 16px;
-    line-height: 1.5;
-    resize: vertical;
-}
-.input:hover:not(:focus):not(:disabled),
-.select:hover:not(:focus):not(:disabled),
-.textarea:hover:not(:focus):not(:disabled) {
-    background-color: var(--color-bg-muted);
-    border-color: var(--color-border-strong);
-}
-.input:focus,
-.select:focus,
-.textarea:focus {
-    outline: none;
-    background-color: var(--color-bg-muted);
-    color: var(--color-text);
-    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
-    box-shadow: none;
-}
-// Textarea renders as .form-control.textarea (react-bootstrap). Match the
-// shared theme's .form-control:hover specificity so it hovers to
-// --color-border-strong too.
-textarea.textarea.form-control:hover:not(:focus):not(:disabled):not([readonly]) {
-    border-color: var(--color-border-strong);
-}
-textarea.textarea:focus {
-    outline: none;
-    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
-    box-shadow: none;
-}
-.input::placeholder,
-.textarea::placeholder {
-    color: var(--color-text-subtle);
-}
-// Edge/IE add a native password reveal (and clear) button — hide them so only
-// the app's own eye toggle shows.
-.input::-ms-reveal,
-.input::-ms-clear {
-    display: none;
-}
-.input:disabled,
-.select:disabled,
-.textarea:disabled {
-    background: var(--color-bg-muted);
-    border-color: var(--color-border);
-    color: var(--color-text-subtle);
-    cursor: not-allowed;
-}
-.field:has(.input:disabled) .label {
-    color: var(--color-text-subtle);
-}
-
-// Read-only inputs: darker muted fill to signal non-editable.
-.input[readonly],
-.select[readonly],
-.textarea[readonly] {
-    background: var(--color-bg-muted);
-    color: var(--color-text-muted);
-    cursor: not-allowed;
-}
-
-// Invalid field state (required-field validation) — soft danger-tinted
-// border on the surface.
-// `[aria-invalid="true"]` is styled alongside `.is-invalid`: React sets the ARIA
-// attribute (it is the accessible source of truth) and does not always add the
-// Bootstrap class, so keying on the class alone left React error states unstyled.
-.input.is-invalid,
-.select.is-invalid,
-.textarea.is-invalid,
-.input.is-invalid:focus,
-.select.is-invalid:focus,
-.textarea.is-invalid:focus,
-.input[aria-invalid="true"],
-.select[aria-invalid="true"],
-.textarea[aria-invalid="true"],
-.input[aria-invalid="true"]:focus,
-.select[aria-invalid="true"]:focus,
-.textarea[aria-invalid="true"]:focus {
-    background: var(--color-surface);
-    border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-surface));
-    box-shadow: none;
-}
-.input.is-invalid,
-.input[aria-invalid="true"] {
-    padding-right: 41px;
-}
-.field-error {
-    font-size: 12px;
-    line-height: normal;
-    color: var(--color-danger);
-}
-
-// Native select with a rounded squircle, custom chevron, off-surface fill.
-.select {
-    appearance: none;
-    -webkit-appearance: none;
-    padding-right: 40px;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.92 8.95l-6.52 6.52c-.77.77-2.03.77-2.8 0L4.08 8.95' fill='none' stroke='%234B5675' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10'/%3E%3C/svg%3E");
-    background-repeat: no-repeat;
-    background-position: right 14px center;
-    background-size: 16px;
-    cursor: pointer;
-}
-
-// Date inputs — a brand calendar glyph that fills the field so a click
-// anywhere opens the native picker; muted text until a value is chosen.
-.input[type="date"] {
-    position: relative;
-    cursor: pointer;
-}
-.input[type="date"]:not(.has-value):not(:focus) {
-    color: var(--color-text-subtle);
-}
-.input[type="date"]::-webkit-calendar-picker-indicator {
-    position: absolute;
-    inset: 0;
-    width: auto;
-    height: auto;
-    margin: 0;
-    padding: 0;
-    cursor: pointer;
-    opacity: 0;
-}
-.input[type="date"]::-webkit-datetime-edit {
-    padding-right: 28px;
-}
-.input-date-wrap {
-    position: relative;
-}
-
-// Number input: hide the native spinner so a custom stepper can be rendered.
-.input[type="number"]::-webkit-inner-spin-button,
-.input[type="number"]::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-}
-.input[type="number"] {
-    -moz-appearance: textfield;
-    appearance: textfield;
-}
-
-// Custom number stepper — up/down arrows, no background.
-.num-stepper {
-    position: relative;
-    width: 100%;
-}
-.field > .num-stepper {
-    align-self: stretch;
-}
-.num-stepper .input {
-    width: 100%;
-    padding-right: 36px;
-}
-.num-stepper-btns {
-    position: absolute;
-    top: 50%;
-    right: 8px;
-    transform: translateY(-50%);
-    display: flex;
-    flex-direction: column;
-    gap: 0;
-}
-.num-stepper-btns button {
-    display: grid;
-    place-items: center;
-    width: 20px;
-    height: 15px;
-    border: none;
-    background: transparent;
-    padding: 0;
-    cursor: pointer;
-    color: var(--color-text-muted);
-}
-.num-stepper-btns button:hover {
-    color: var(--color-text);
-}
-.num-stepper-btns button:active {
-    color: var(--color-primary);
-}
-.input-date-wrap > .input {
-    padding-right: 38px;
-}
-.input-date-icon {
-    position: absolute;
-    right: 12px;
-    top: 50%;
-    transform: translateY(-50%);
-    color: var(--color-text-muted);
-    pointer-events: none;
-}
-
-// Error state — danger-tinted border + room for a trailing affix.
-.input.error,
-.input.error:focus,
-.textarea.error,
-.textarea.error:focus {
-    background: var(--color-surface);
-    border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-surface));
-    box-shadow: none;
-}
-.input.error {
-    padding-right: 41px;
-}
-// Dark mode: keep the value in an errored field legible.
-:root[data-theme="dark"] .input.error,
-:root[data-theme="dark"] .input.error:focus,
-:root[data-theme="dark"] .input.error:-webkit-autofill,
-:root[data-theme="dark"] .input.error:focus:-webkit-autofill {
-    color: var(--color-text);
-    -webkit-text-fill-color: var(--color-text);
-}
-
-// Field-relative wrap for trailing affixes (error icon, password toggle).
-.input-wrap {
-    position: relative;
-    width: 100%;
-    align-self: stretch;
-}
-.input-wrap .input {
-    width: 100%;
-}
-.input-affix {
-    position: absolute;
-    right: 14px;
-    top: 22.5px;
-    transform: translateY(-50%);
-    display: grid;
-    place-items: center;
-    pointer-events: none;
-    color: var(--color-danger);
-}
-
-// Leading-icon input — icon turns brand on focus.
-.input-icon {
-    position: relative;
-    display: flex;
-    align-items: center;
-    width: 100%;
-}
-.input-icon > .ic {
-    position: absolute;
-    left: 13px;
-    top: 50%;
-    transform: translateY(-50%);
-    display: grid;
-    place-items: center;
-    color: var(--color-text-subtle);
-    pointer-events: none;
-}
-.input-icon .input {
-    padding-left: 40px;
-}
-.input-icon:focus-within > .ic {
-    color: var(--color-primary);
-}
-
-// Password reveal toggle (place inside .input-wrap).
-.input.pw {
-    padding-right: 44px;
-}
-.input.pw[type="password"]::placeholder {
-    letter-spacing: normal;
-    color: var(--color-text-subtle);
-}
-.pw-toggle {
-    position: absolute;
-    right: 7px;
-    top: 22px;
-    transform: translateY(-50%);
-    display: grid;
-    place-items: center;
-    width: 32px;
-    height: 32px;
-    border: none;
-    background: transparent;
-    color: var(--color-text-subtle);
-    border-radius: var(--radius);
-    cursor: pointer;
-    transition:
-        color 0.12s ease,
-        background 0.12s ease;
-}
-.pw-toggle:hover {
-    color: var(--color-primary);
-    background: transparent;
-}
-
-.hint,
-.field-hint {
-    margin-top: 2px;
-    font-size: 12px;
-    color: var(--color-text-subtle);
-}
-.label {
-    display: block;
-    font-size: 14px;
-    line-height: normal;
-    font-weight: 500;
-    color: var(--color-text);
-    margin-bottom: 6px;
-}
-.label-hint {
-    color: var(--color-text-subtle);
-    font-weight: 400;
-    margin-left: 6px;
-    font-size: 12px;
-}
-.label-optional {
-    font-weight: 400;
-    font-size: 14px;
-    color: var(--color-text-subtle);
-}
-.required {
-    color: var(--color-danger);
-}
-.field {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 6px;
-    margin-bottom: 16px;
-}
-.field > .label,
-.field label {
-    margin-bottom: 0;
-}
-.field-row {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 16px;
-    margin-bottom: 16px;
-}
-.field-row-3 {
-    grid-template-columns: 1fr 1fr 1fr;
-}
-// min-width:0 — grid/flex items default to min-width:auto, which lets a long
-// control (e.g. a search-select label) push its track past 1fr and defeat
-// text truncation. Reset to 0 so the ellipsis engages instead of overflowing.
-.field-row .field {
-    margin-bottom: 0;
-    min-width: 0;
-}
-// Controls fill their field even though .field aligns children flex-start.
-.field > .search-select,
-.field > .input-with-unit,
-.field > .input,
-.field > .datepicker,
-.field > .field-error {
-    align-self: stretch;
-}
-// Doubled selectors — see the lg-tier block below: a media query carries no
-// extra specificity, so a consumer's later single-class rule would win.
-@media (max-width: 575.98px) {
-    .field-row.field-row,
-    .field-row-3.field-row-3 {
-        grid-template-columns: 1fr;
-    }
-}
-
-// red border around a non-input group (e.g. a structure-form card row)
-.group-invalid {
-    border: 1px solid var(--color-danger);
-    border-radius: var(--radius);
-    padding: 8px;
-}
-
-// One field, one border: the WRAPPER owns the border + hover/focus/error ring
-// so the numeric input and its trailing unit pill light up together.
-.input-with-unit {
-    display: flex;
-    align-items: stretch;
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
-    corner-shape: squircle;
-    background: var(--color-surface);
-    transition:
-        border-color 0.12s,
-        background-color 0.12s;
-    overflow: hidden;
-}
-.input-with-unit:hover:not(:focus-within) {
-    background: var(--color-bg-muted);
-    border-color: var(--color-border-strong);
-}
-.input-with-unit:focus-within {
-    background: var(--color-bg-muted);
-    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
-}
-.input-with-unit:has(.num-input.error) {
-    border-color: var(--color-danger);
-}
-
-// Numeric inputs are plain text fields — no native spinner, no stepper. The
-// field flows seamlessly into the trailing unit pill; the wrapper carries the
-// border.
-.input-with-unit .num-input {
-    border: none;
-    border-radius: 0;
-    background: transparent;
-}
-.input-with-unit .num-input:focus {
-    box-shadow: none;
-}
-.input-with-unit .unit {
-    background: var(--color-bg-muted);
-    border: none;
-    border-left: 1px solid var(--color-border);
-    padding: 9px 14px;
-    font-size: 14px;
-    font-weight: 500;
-    color: var(--color-text-muted);
-    font-family: "Inter", sans-serif;
-    display: inline-flex;
-    align-items: center;
-    white-space: nowrap;
-}
-
-// ── Status badge ──
-.badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    padding: 3px 9px;
-    border-radius: 999px;
-    font-size: 12px;
-    font-weight: 500;
-    background: var(--color-bg-muted);
-    color: var(--color-text-muted);
-    border: 1px solid var(--color-border);
-}
-.badge-primary {
-    background: var(--color-primary-soft);
-    color: var(--color-primary);
-    border-color: color-mix(in srgb, var(--color-primary) 25%, transparent);
-}
-.badge-success {
-    background: var(--color-success-soft);
-    color: var(--color-success-strong);
-    border-color: transparent;
-}
-.badge-warn {
-    background: var(--color-warning-soft);
-    color: var(--color-warning-strong);
-    border-color: transparent;
-}
-.badge-danger {
-    background: var(--color-danger-soft);
-    color: var(--color-danger-strong);
-    border-color: transparent;
-}
-.badge-info {
-    background: var(--color-info-soft);
-    color: var(--color-info-strong);
-    border-color: transparent;
-}
-.badge-dot::before {
-    content: "";
-    width: 6px;
-    height: 6px;
-    border-radius: 999px;
-    background: currentColor;
-}
-
-// "Soft" status badge — pill, 12/600, muted tone fill.
-.status-label {
-    display: inline-flex;
-    align-items: center;
-    gap: 5px;
-    padding: 0 10px;
-    height: 24px;
-    border-radius: 999px;
-    font-size: 12px;
-    font-weight: 600;
-    line-height: 1;
-    white-space: nowrap;
-}
-// Tones are SEMANTIC (success/warning/danger/info/neutral) — the same
-// vocabulary .chip and .badge use — and derive from the same semantic ramp.
-// The colour-named `.tone-*` classes are kept as deprecated aliases so older
-// Razor call sites keep working; author new markup with the semantic names.
-.status-label.success,
-.status-label.tone-green {
-    background: color-mix(in srgb, var(--color-success) 16%, transparent);
-    color: var(--color-success-strong);
-}
-.status-label.warning,
-.status-label.tone-amber {
-    background: color-mix(in srgb, var(--color-warning) 16%, transparent);
-    color: var(--color-warning-strong);
-}
-.status-label.danger,
-.status-label.tone-red {
-    background: color-mix(in srgb, var(--color-danger) 16%, transparent);
-    color: var(--color-danger-strong);
-}
-.status-label.info,
-.status-label.tone-blue {
-    background: color-mix(in srgb, var(--color-info) 16%, transparent);
-    color: var(--color-info-strong);
-}
-.status-label.primary {
-    background: var(--color-primary-soft);
-    color: var(--color-primary);
-}
-// Default/neutral — also the bare `.status-label` look, so an unknown or
-// omitted tone still renders as a proper pill instead of transparent text.
-.status-label,
-.status-label.neutral,
-.status-label.tone-grey {
-    background: color-mix(in srgb, var(--color-text-subtle) 16%, transparent);
-    color: var(--color-text-subtle);
-}
-
-// ── Choice chip ──
-// Inline selectable chip — native control hidden, pill adopts the primary
-// accent when checked.
-.choice-chip {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    padding: 9px 14px;
-    border: 1.5px solid var(--color-border);
-    border-radius: 999px;
-    font-size: 14px;
-    font-weight: 500;
-    color: var(--color-text);
-    background: var(--color-surface);
-    cursor: pointer;
-    user-select: none;
-    transition:
-        border-color 0.12s ease,
-        background 0.12s ease,
-        color 0.12s ease;
-}
-.choice-chip:hover {
-    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
-}
-.choice-chip input {
-    position: absolute;
-    opacity: 0;
-    pointer-events: none;
-}
-.choice-chip.checked {
-    border-color: var(--color-primary);
-    background: var(--color-primary-soft);
-    color: var(--color-primary);
-}
-
-// ── Structure card (struct-card*) ──
-// Single-select radio-card control (e.g. "type of structure" picker).
-.struct-card {
-    position: relative;
-    display: flex;
-    align-items: center;
-    gap: 11px;
-    padding: 20px;
-    border: 1.5px solid var(--color-border);
-    border-radius: var(--radius);
-    background: var(--color-surface);
-    cursor: pointer;
-    transition:
-        border-color 0.12s ease,
-        background 0.12s ease;
-}
-.struct-card:hover {
-    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
-}
-.struct-card.checked {
-    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
-    background: color-mix(in srgb, var(--color-primary) 5%, transparent);
-}
-.struct-card.checked .struct-card-title {
-    color: var(--color-primary);
-}
-.struct-card-input {
-    position: absolute;
-    opacity: 0;
-    pointer-events: none;
-}
-.struct-card-ic {
-    width: 44px;
-    height: 44px;
-    border-radius: 99px;
-    flex-shrink: 0;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    background: var(--color-bg-muted);
-    color: var(--color-text-subtle);
-    transition:
-        background 0.12s,
-        color 0.12s;
-}
-.struct-card.checked .struct-card-ic {
-    background: var(--color-surface);
-    color: var(--color-primary);
-}
-// Icon illustrations are coloured PNGs: greyscale them until the card is
-// selected, then show the full-colour (blue) art.
-.struct-card-ic img {
-    filter: grayscale(1);
-    opacity: 0.6;
-    transition:
-        filter 0.12s,
-        opacity 0.12s;
-}
-.struct-card.checked .struct-card-ic img {
-    filter: none;
-    opacity: 1;
-}
-.struct-card-body {
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-}
-.struct-card-title {
-    font-weight: 600;
-    font-size: 16px;
-    color: var(--color-text);
-}
-.struct-card-desc {
-    font-size: 14px;
-    font-weight: 400;
-    color: var(--color-text-muted);
-    line-height: 1.35;
-    margin-top: 2px;
-}
-.struct-card-check {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    background: transparent;
-    color: var(--color-primary);
-    opacity: 0;
-    transform: scale(0.5);
-    transition:
-        opacity 0.12s ease,
-        transform 0.12s ease;
-}
-.struct-card.checked .struct-card-check {
-    opacity: 1;
-    transform: scale(1);
-}
-
-// Tile variant: big centered illustration + label. Opt in with
-// className="struct-card-tile".
-.struct-card-tile {
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    gap: 16px;
-    padding: 26px 18px 20px;
-}
-// Drop the icon disc — the illustration stands on its own, sized large.
-.struct-card-tile .struct-card-ic,
-.struct-card-tile.checked .struct-card-ic {
-    width: auto;
-    height: auto;
-    border-radius: 0;
-    background: transparent;
-}
-// Full-colour at all times (override the greyscale-until-selected treatment).
-.struct-card-tile .struct-card-ic img,
-.struct-card-tile.checked .struct-card-ic img {
-    width: 100px;
-    height: 100px;
-    filter: none;
-    opacity: 1;
-}
-.struct-card-tile .struct-card-body {
-    align-items: center;
-}
-.struct-card-tile .struct-card-title {
-    font-size: 17px;
-}
-.struct-card-tile .struct-card-desc {
-    margin-top: 4px;
-}
-.struct-card-tile .struct-card-check {
-    display: none;
-}
-
-// ── Search select ──
-.search-select {
-    position: relative;
-    min-width: 0;
-}
-.search-select-control {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-    text-align: left;
-    cursor: pointer;
-    width: 100%;
-    min-width: 0;
-}
-.search-select-control > span {
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-.search-select-control:disabled {
-    cursor: not-allowed;
-    opacity: 0.6;
-}
-.search-select-control:hover:not(:disabled) {
-    border-color: var(--color-border-strong);
-}
-.search-select-control.open {
-    background: var(--color-bg-muted);
-    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
-}
-.search-select-caret {
-    flex-shrink: 0;
-    color: var(--color-text-muted);
-    transition: transform 0.15s ease;
-}
-.search-select-caret path {
-    stroke-width: 2px;
-}
-.search-select-control.open .search-select-caret {
-    transform: rotate(180deg);
-}
-.search-select-placeholder {
-    color: var(--color-text-subtle);
-}
-// Menu matches the themed-select dropdown: 16px squircle, 4px padding, soft
-// shadow.
-.search-select-menu {
-    position: absolute;
-    z-index: 40;
-    top: calc(100% + 6px);
-    left: 0;
-    right: 0;
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
-    corner-shape: squircle;
-    box-shadow: var(--shadow-overlay);
-    padding: 4px;
-    overflow: hidden;
-}
-// Portalled to <body>: fixed-positioned (top/left set inline from the
-// trigger rect) so the menu overlays instead of being clipped by a
-// scrollable modal / table card. Sits above the modal layer.
-.search-select-menu-fixed {
-    position: fixed;
-    z-index: 1600;
-    right: auto;
-    top: auto;
-    left: auto;
-}
-// Search box matches the search bar: rounded field, leading icon turns
-// primary.
-.search-select-search {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin: 4px;
-    padding: 0 12px;
-    height: 40px;
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius);
-    corner-shape: squircle;
-    background: var(--color-surface);
-    color: var(--color-text-subtle);
-}
-.search-select-search {
-    position: relative;
-}
-.search-select-search:focus-within {
-    background: var(--color-bg-muted);
-}
-.search-select-search:focus-within svg {
-    color: var(--color-primary);
-}
-.search-select-clear {
-    display: grid;
-    place-items: center;
-    width: 24px;
-    height: 24px;
-    border: none;
-    background: transparent;
-    padding: 0;
-    cursor: pointer;
-    color: var(--color-text-subtle);
-}
-.search-select-clear:hover {
-    color: var(--color-text);
-}
-.search-select-input {
-    flex: 1;
-    border: none;
-    outline: none;
-    font-size: 14px;
-    font-family: inherit;
-    color: var(--color-text);
-    background: transparent;
-}
-.search-select-options {
-    max-height: 300px;
-    overflow-y: auto;
-    padding: 4px 4px 4px;
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    scrollbar-gutter: stable;
-}
-.search-select-option {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-    width: 100%;
-    text-align: left;
-    padding: 9px 14px;
-    line-height: 1.4;
-    border: none;
-    border-radius: var(--radius);
-    corner-shape: squircle;
-    background: transparent;
-    font-size: 14px;
-    color: var(--color-text);
-    cursor: pointer;
-    transition:
-        background 0.12s ease,
-        color 0.12s ease;
-}
-.search-select-option:hover,
-.search-select-option.is-active {
-    background: var(--color-primary-soft);
-    color: var(--color-primary);
-}
-.search-select-option.selected {
-    background: var(--color-primary-soft);
-    color: var(--color-primary);
-    font-weight: 500;
-}
-.search-select-empty {
-    padding: 12px 10px;
-    font-size: 13px;
-    color: var(--color-text-subtle);
-    text-align: center;
-}
-
-// ── Date picker ──
-// Custom DatePicker — themed popover calendar (the native popup can't be
-// styled).
-.datepicker {
-    position: relative;
-}
-.datepicker-trigger {
-    text-align: left;
-    cursor: pointer;
-}
-.datepicker-trigger:not(.has-value) {
-    color: var(--color-text-subtle);
-}
-.datepicker.open .datepicker-trigger {
-    background-color: var(--color-bg-muted);
-    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
-    box-shadow: none;
-}
-// Portalled to <body> and fixed-positioned from JS so a modal's
-// overflow:hidden can't clip it; top/left come from inline styles. z-index
-// sits above the modal layer.
-.datepicker-pop {
-    position: fixed;
-    z-index: 1600;
-    width: 312px;
-    max-width: calc(100vw - 16px);
-    padding: 18px;
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-xl);
-    corner-shape: squircle;
-    box-shadow: var(--shadow-overlay);
-    animation: datepicker-in 0.14s ease;
-}
-.datepicker-pop.drop-up {
-    animation: datepicker-in-up 0.14s ease;
-}
-@keyframes datepicker-in {
-    from {
-        opacity: 0;
-        transform: translateY(-4px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-@keyframes datepicker-in-up {
-    from {
-        opacity: 0;
-        transform: translateY(4px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-.datepicker-head {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 14px;
-}
-.datepicker-month {
-    font-size: 15px;
-    font-weight: 600;
-    color: var(--color-text);
-    letter-spacing: -0.01em;
-}
-.datepicker-nav {
-    display: inline-flex;
-    gap: 6px;
-}
-.datepicker-nav-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 30px;
-    height: 30px;
-    border: 1px solid var(--color-border);
-    border-radius: 999px;
-    background: transparent;
-    color: var(--color-text-muted);
-    cursor: pointer;
-    transition:
-        background 0.12s,
-        color 0.12s,
-        border-color 0.12s;
-}
-.datepicker-nav-btn:hover {
-    background: var(--color-primary-soft, color-mix(in srgb, var(--color-primary) 8%, transparent));
-    border-color: var(--color-primary);
-    color: var(--color-primary);
-}
-.datepicker-weekdays {
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
-    gap: 4px;
-    margin-bottom: 6px;
-}
-.datepicker-grid {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-}
-.datepicker-row {
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
-    gap: 4px;
-}
-.datepicker-weekdays span {
-    text-align: center;
-    font-size: 11px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-    color: var(--color-text-subtle);
-    padding: 4px 0;
-}
-.datepicker-day {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    aspect-ratio: 1;
-    width: 100%;
-    border: none;
-    border-radius: 50%;
-    background: transparent;
-    font-size: 13px;
-    font-weight: 500;
-    color: var(--color-text);
-    cursor: pointer;
-    transition:
-        background 0.12s,
-        color 0.12s,
-        box-shadow 0.12s;
-}
-.datepicker-day:hover:not(:disabled):not(.is-selected) {
-    background: var(--color-primary-soft, color-mix(in srgb, var(--color-primary) 8%, transparent));
-    color: var(--color-primary);
-}
-.datepicker-day.is-outside {
-    color: var(--color-text-subtle);
-    font-weight: 400;
-}
-.datepicker-day.is-today {
-    font-weight: 700;
-    color: var(--color-primary);
-    box-shadow: inset 0 0 0 1.5px var(--color-primary);
-}
-.datepicker-day.is-selected {
-    background: var(--color-primary);
-    color: #fff;
-    font-weight: 600;
-}
-.datepicker-day:disabled {
-    color: var(--color-border-strong);
-    cursor: not-allowed;
-}
-.datepicker-foot {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-top: 14px;
-    padding-top: 14px;
-    border-top: 1px solid var(--color-border);
-}
-.datepicker-link {
-    border: none;
-    background: transparent;
-    padding: 6px 12px;
-    border-radius: var(--radius);
-    font-size: 13px;
-    font-weight: 600;
-    color: var(--color-primary);
-    cursor: pointer;
-    transition: background 0.12s;
-}
-.datepicker-link:hover:not(:disabled) {
-    background: var(--color-primary-soft, color-mix(in srgb, var(--color-primary) 8%, transparent));
-}
-.datepicker-link:disabled {
-    color: var(--color-text-subtle);
-    cursor: not-allowed;
-}
-
-// ── Phone input ──
-.app-phone-number-input {
-    width: 100%;
-}
-// One field, one border: the WRAPPER owns the chrome (same pattern as
-// .input-with-unit) so the dial-code picker and the number light up together.
-// The adornment used to be absolutely positioned over the input, which let the
-// placeholder run underneath it — masked only by the UA button's grey fill.
-.app-phone-number-input .phone-input-wrap {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: var(--wui-control-height);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius);
-    corner-shape: squircle;
-    background: var(--color-surface);
-    transition:
-        border-color 0.12s,
-        background-color 0.12s;
-}
-.app-phone-number-input .phone-input-wrap:hover:not(:focus-within) {
-    background: var(--color-bg-muted);
-    border-color: var(--color-border-strong);
-}
-.app-phone-number-input .phone-input-wrap:focus-within {
-    background: var(--color-bg-muted);
-    border-color: var(--color-primary);
-}
-.app-phone-number-input .phone-input-wrap:has(> .input:disabled) {
-    background: var(--color-bg-muted);
-    cursor: not-allowed;
-}
-.app-phone-number-input .phone-input-wrap:has(.input.error),
-.app-phone-number-input .phone-input-wrap:has(.input.is-invalid) {
-    border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-surface));
-}
-// The inner control drops its own chrome — the shell carries it.
-.app-phone-number-input .phone-input-wrap > .input,
-.app-phone-number-input .phone-input-wrap > .input:hover,
-.app-phone-number-input .phone-input-wrap > .input:focus {
-    flex: 1 1 auto;
-    min-width: 0;
-    width: auto;
-    height: 100%;
-    border: 0;
-    background: transparent;
-    box-shadow: none;
-}
-// `relative` so the menu anchors here (it is NOT positioned by JS — it used to
-// rely on the adornment being absolute, which is why it appeared to float).
-.app-phone-number-input .phone-country-adornment {
-    position: relative;
-    flex: none;
-    display: flex;
-    align-items: center;
-    padding-left: 12px;
-    z-index: 5;
-}
-// NOT scoped under `.country-dropdown` — <wui-phone> renders the toggle inside
-// `.phone-country-adornment`, with no such wrapper. Scoping it there left the
-// button on raw UA styling (2px outset border + grey fill) inside the field.
-.country-toggle {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 0;
-    border: 0;
-    background: transparent;
-    box-shadow: none;
-    color: var(--color-text);
-    cursor: pointer;
-    font: inherit;
-    line-height: 1;
-}
-.country-toggle::after {
-    display: none;
-}
-.country-toggle:hover,
-.country-toggle:focus,
-.country-toggle:active {
-    background: transparent;
-    box-shadow: none;
-    color: var(--color-text);
-}
-.country-toggle:hover .phone-chevron {
-    color: var(--color-text);
-}
-.country-toggle:focus {
-    outline: none;
-}
-.country-toggle:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
-    border-radius: var(--radius-sm);
-}
-.country-toggle:disabled {
-    cursor: not-allowed;
-    opacity: 0.6;
-}
-// Flag glyphs come from the generated .wui-flag-* classes (_flags.scss).
-.app-phone-number-input .phone-chevron {
-    color: var(--color-text-muted);
-    transition: transform 0.2s ease;
-}
-// Keyed off the element's own ARIA state — <wui-phone> toggles aria-expanded,
-// it never adds react-bootstrap's `.show`.
-.country-toggle[aria-expanded="true"] .phone-chevron {
-    transform: rotate(180deg);
-}
-.app-phone-number-input .phone-dial {
-    font-size: 13px;
-    font-weight: 500;
-    color: var(--color-text);
-}
-
-// Menu, search field and rows all share the .search-select language so the
-// country picker reads as the same component family as every other picker.
-// Fixed, with top/left set from the trigger rect by <wui-phone>, so an
-// overflow-hidden card/modal/table wrapper can't clip the list. Sits above the
-// modal layer, matching .search-select-menu-fixed and .datepicker-pop.
-.country-dropdown-menu {
-    position: fixed;
-    z-index: 1600;
-    width: 320px;
-    max-width: calc(100vw - 16px);
-    padding: 4px;
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
-    corner-shape: squircle;
-    background: var(--color-surface);
-    box-shadow: var(--shadow-overlay);
-    overflow: hidden;
-}
-.dropdown-search-wrapper {
-    position: relative;
-    margin: 4px;
-}
-.dropdown-search-icon {
-    position: absolute;
-    left: 12px;
-    top: 50%;
-    transform: translateY(-50%);
-    display: flex;
-    color: var(--color-text-subtle);
-    pointer-events: none;
-    transition: color 0.12s ease;
-}
-.dropdown-search-wrapper:focus-within .dropdown-search-icon {
-    color: var(--color-primary);
-}
-.dropdown-search-input {
-    width: 100%;
-    height: 40px;
-    padding: 0 12px 0 36px;
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius);
-    corner-shape: squircle;
-    font-size: 14px;
-    color: var(--color-text);
-    background: var(--color-surface);
-    outline: none;
-}
-.dropdown-search-input:hover:not(:focus) {
-    background: var(--color-bg-muted);
-    border-color: var(--color-border-strong);
-}
-// Border is the focus cue everywhere else in the system — no glow ring here.
-.dropdown-search-input:focus {
-    background: var(--color-bg-muted);
-    border-color: var(--color-primary);
-}
-.country-list-scroll {
-    max-height: 250px;
-    overflow-y: auto;
-    overflow-x: hidden;
-    padding: 4px;
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    scrollbar-width: thin;
-    scrollbar-gutter: stable;
-}
-.country-list-scroll::-webkit-scrollbar {
-    width: 6px;
-}
-.country-list-scroll::-webkit-scrollbar-thumb {
-    background: var(--color-border);
-    border-radius: 999px;
-}
-// Rounded, inset rows with a primary-tinted hover — identical to
-// .search-select-option. (!important is required: react-bootstrap's
-// .dropdown-item ships its own colour/padding at equal specificity.)
-.country-dropdown-item {
-    display: flex !important;
-    align-items: center;
-    gap: 10px;
-    padding: 9px 14px !important;
-    border-radius: var(--radius) !important;
-    corner-shape: squircle;
-    cursor: pointer;
-    color: var(--color-text) !important;
-    background: transparent !important;
-    border: 0 !important;
-    transition:
-        background 0.12s ease,
-        color 0.12s ease;
-}
-.country-dropdown-item:hover,
-.country-dropdown-item:focus {
-    background: var(--color-primary-soft) !important;
-    color: var(--color-primary) !important;
-}
-.country-dropdown-item.selected {
-    background: var(--color-primary-soft) !important;
-    color: var(--color-primary) !important;
-    font-weight: 500;
-}
-.country-dropdown-menu .wui-flag {
-    flex-shrink: 0;
-}
-.country-name-text {
-    font-size: 14px;
-    font-weight: 500;
-    color: var(--color-text);
-}
-.country-code-text {
-    margin-left: 6px;
-    font-weight: 400;
-    color: var(--color-text-muted);
-}
-// On a tinted row the label must ride the row colour, not stay grey.
-.country-dropdown-item:hover .country-name-text,
-.country-dropdown-item:focus .country-name-text,
-.country-dropdown-item.selected .country-name-text,
-.country-dropdown-item:hover .country-code-text,
-.country-dropdown-item:focus .country-code-text,
-.country-dropdown-item.selected .country-code-text {
-    color: currentColor;
-}
-.selected-check-icon {
-    margin-left: auto;
-    display: flex;
-    color: var(--color-primary);
-}
-.country-empty {
-    padding: 10px 16px;
-    text-align: center;
-    color: var(--color-text-subtle);
-    font-size: 14px;
-}
-
-// ── Avatar ──
-// A photo fills the avatar disc edge to edge; the circle is the frame, so
-// the image is cropped to it rather than letterboxed.
-.avatar > .avatar-img {
-    width: 100%;
-    height: 100%;
-    border-radius: inherit;
-    object-fit: cover;
-    display: block;
-}
-.avatar {
-    width: 32px;
-    height: 32px;
-    border-radius: 999px;
-    background: color-mix(in srgb, var(--color-primary) 15%, var(--color-surface));
-    color: var(--color-primary);
-    font-size: 12px;
-    font-weight: 600;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-}
-.avatar-lg {
-    width: 48px;
-    height: 48px;
-    font-size: 16px;
-}
-.avatar-xl {
-    width: 64px;
-    height: 64px;
-    font-size: 22px;
-}
-.avatar-sm {
-    width: 24px;
-    height: 24px;
-    font-size: 10px;
-}
-
-// ── File attach ──
-// Support-form attachment strip: drop zone → attached-image preview.
-.attach-drop {
-    display: flex;
-    width: 100%;
-    align-items: center;
-    gap: 12px;
-    padding: 12px 14px;
-    border: 1px dashed var(--color-border);
-    border-radius: var(--radius-lg);
-    background: var(--color-surface);
-    cursor: pointer;
-    transition:
-        border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
-        background 0.3s cubic-bezier(0.22, 1, 0.36, 1);
-}
-.attach-drop:hover {
-    border-color: var(--color-primary);
-    background: var(--color-primary-soft);
-}
-.attach-drop-icon {
-    flex: 0 0 auto;
-    width: 36px;
-    height: 36px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 999px;
-    background: var(--color-primary-soft);
-    color: var(--color-primary);
-}
-.attach-drop:hover .attach-drop-icon {
-    background: var(--color-surface);
-}
-.attach-drop-copy {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    flex: 1;
-    min-width: 0;
-}
-.attach-drop-title {
-    font-weight: 600;
-    font-size: 14px;
-    line-height: 1.4;
-    color: var(--color-text);
-}
-.attach-drop-hint {
-    font-size: 12px;
-    color: var(--color-text-subtle);
-}
-.attach-drop-cta {
-    flex: 0 0 auto;
-    font-size: 12px;
-    font-weight: 600;
-    color: var(--color-primary);
-    border: 1px solid var(--color-border);
-    border-radius: 999px;
-    padding: 5px 14px;
-    background: var(--color-surface);
-}
-// Attached image renders full width so the user can actually check what
-// they're sending.
-.attach-preview {
-    width: 100%;
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
-    background: var(--color-surface);
-    overflow: hidden;
-}
-.attach-figure {
-    position: relative;
-    // A lighter elevated surface behind the (contained) image so the
-    // letterbox reads as a surface, not near-black — dark mode uses the
-    // muted/elevated step instead.
-    background: var(--color-bg-muted);
-}
-.attach-figure img {
-    display: block;
-    width: 100%;
-    max-height: 260px;
-    object-fit: contain;
-}
-.attach-meta {
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: 12px;
-    padding: 10px 14px;
-    border-top: 1px solid var(--color-border);
-    min-width: 0;
-}
-.attach-name {
-    font-size: 13px;
-    font-weight: 500;
-    color: var(--color-text);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-.attach-size {
-    font-size: 12px;
-    color: var(--color-text-subtle);
-    flex: 0 0 auto;
-}
-.attach-remove {
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    border: 0;
-    background: rgba(0, 0, 0, 0.62);
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
-    color: #fff;
-    border-radius: 999px;
-    cursor: pointer;
-    transition: background 0.2s;
-}
-.attach-remove:hover {
-    background: var(--color-danger);
-}
-// Iconsax hardcodes both stroke colour and width on its paths, so force
-// white here — otherwise the glyph vanishes into the button in dark mode.
-.attach-remove svg {
-    width: 18px;
-    height: 18px;
-    display: block;
-}
-.attach-remove svg path {
-    stroke: #fff;
-    stroke-width: 2px;
-}
-@media (prefers-reduced-motion: reduce) {
-    .attach-drop,
-    .attach-remove {
-        transition: none;
-    }
-}
-
-// ── File picker ──
-// File input — segmented "Upload" button + placeholder, matches the .input
-// shell.
-.file-input {
-    box-sizing: border-box;
-    display: flex;
-    align-items: stretch;
-    width: 100%;
-    border-radius: var(--radius-lg);
-    corner-shape: squircle;
-    border: 1px solid var(--color-border);
-    background: var(--color-surface);
-    overflow: hidden;
-    cursor: pointer;
-    transition:
-        border-color 0.12s,
-        box-shadow 0.12s;
-}
-.file-input:hover {
-    border-color: var(--color-border-strong);
-}
-.file-input-btn {
-    display: inline-flex;
-    align-items: center;
-    flex-shrink: 0;
-    padding: 12px 20px;
-    font-size: 14px;
-    font-weight: 600;
-    color: var(--color-text);
-    background: var(--color-bg-muted);
-    border-right: 1px solid var(--color-border);
-}
-.file-input-text {
-    display: inline-flex;
-    align-items: center;
-    min-width: 0;
-    padding: 12px 16px;
-    font-size: 14px;
-    color: var(--color-text-subtle);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-.file-input-text.has-file {
-    color: var(--color-text);
-}
-
-// Tall empty state (AppFilePicker): a drag-and-drop dropzone — dashed
-// border, circular icon badge, click-or-drop copy. Highlights on hover and
-// while a file is dragged over.
-.file-input.file-input-tall {
-    position: relative;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 10px;
-    height: 350px;
-    padding: 20px;
-    text-align: center;
-    background: var(--color-bg-subtle);
-    border: 1px dashed var(--color-border-strong);
-    transition:
-        border-color 0.15s ease,
-        background-color 0.15s ease;
-}
-.file-input.file-input-tall:hover,
-.file-input.file-input-tall.dragging {
-    border-color: var(--color-primary);
-    background: var(--color-bg-muted);
-}
-// Fill-label associates click with the hidden file input; children don't
-// steal drag hits.
-.file-input.file-input-tall > .file-input-zone-label {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 10px;
-    margin: 0;
-    cursor: pointer;
-}
-.file-input.file-input-tall > .file-input-zone-label > * {
-    pointer-events: none;
-}
-.file-input.file-input-tall .file-input-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 54px;
-    height: 54px;
-    border-radius: 50%;
-    background: var(--color-primary-soft);
-    color: var(--color-primary);
-    transition: transform 0.15s ease;
-}
-.file-input.file-input-tall.dragging .file-input-icon {
-    transform: translateY(-2px) scale(1.06);
-}
-.file-input-title {
-    font-size: 14px;
-    font-weight: 600;
-    color: var(--color-text);
-}
-.file-input-title .browse {
-    color: var(--color-primary);
-}
-.file-input.file-input-tall .file-input-text {
-    padding: 0;
-    font-size: 12px;
-}
-
-// Large preview shown once an image exists; hover reveals a "Change image"
-// overlay.
-.file-preview {
-    position: relative;
-    box-sizing: border-box;
-    display: block;
-    width: 100%;
-    height: 350px;
-    border-radius: var(--radius-lg);
-    corner-shape: squircle;
-    border: 1px solid var(--color-border);
-    overflow: hidden;
-    cursor: pointer;
-    background: var(--color-bg-subtle);
-    transition: border-color 0.12s;
-}
-.file-preview:hover {
-    border-color: var(--color-border-strong);
-}
-.file-preview.error {
-    border-color: var(--color-danger);
-}
-// Open-picker control fills the shell (remove button is a sibling, not
-// nested).
-.file-preview-open {
-    display: block;
-    box-sizing: border-box;
-    width: 100%;
-    height: 100%;
-    padding: 0;
-    border: none;
-    background: transparent;
-    cursor: pointer;
-    position: relative;
-    font: inherit;
-    color: inherit;
-    text-align: left;
-}
-.file-preview-img {
-    display: block;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    transition: transform 0.25s ease;
-}
-// Gentle zoom on hover so the field feels interactive.
-.file-preview:hover .file-preview-img {
-    transform: scale(1.03);
-}
-.file-preview-overlay {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    // Subtle dim so the glassy CTA reads on any image, without hiding it.
-    background: rgba(16, 24, 40, 0.22);
-    opacity: 0;
-    transition: opacity 0.15s ease;
-}
-.file-preview:hover .file-preview-overlay,
-.file-preview:focus-within .file-preview-overlay {
-    opacity: 1;
-}
-// The "Change image" call-to-action as a glassy pill button.
-.file-preview-cta {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    padding: 9px 18px;
-    background: rgba(255, 255, 255, 0.96);
-    color: var(--color-text);
-    font-size: 14px;
-    font-weight: 600;
-    border-radius: 999px;
-    box-shadow: var(--shadow-overlay);
-}
-.file-preview-remove {
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    z-index: 2;
-    box-sizing: border-box;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 30px;
-    height: 30px;
-    padding: 0;
-    border: 2px solid transparent;
-    border-radius: 50%;
-    background: rgba(16, 24, 40, 0.55);
-    color: #fff;
-    cursor: pointer;
-    opacity: 0;
-    transition:
-        border-color 0.12s,
-        opacity 0.15s ease;
-}
-.file-preview:hover .file-preview-remove,
-.file-preview:focus-within .file-preview-remove {
-    opacity: 1;
-}
-// Hovering the cross: keep it plain — just a slightly deeper disc, no
-// coloured ring.
-.file-preview-remove:hover {
-    background: rgba(16, 24, 40, 0.78);
-    color: #fff;
-}
-
-// ── Logo picker ──
-// Round dropzone uploader (workspace/brand logo) and the settings-page photo
-// ring share this same interactive-uploader pattern.
-.set-uploader {
-    display: inline-flex;
-    padding: 0;
-    border: none;
-    background: transparent;
-    font: inherit;
-    color: inherit;
-    cursor: pointer;
-}
-.set-uploader:disabled {
-    cursor: progress;
-}
-.set-uploader-img {
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    object-fit: cover;
-}
-.set-uploader-ring {
-    position: relative;
-    width: 120px;
-    height: 120px;
-    border-radius: 50%;
-    padding: 8px;
-    border: 1px dashed color-mix(in srgb, var(--color-border-strong) 75%, transparent);
-    cursor: pointer;
-    transition: border-color 0.18s;
-}
-.set-uploader-ring:hover,
-.set-uploader:hover .set-uploader-ring,
-.set-uploader:focus-visible .set-uploader-ring {
-    border-color: var(--color-primary);
-}
-.set-uploader-logo {
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    display: grid;
-    place-items: center;
-    font-size: 38px;
-    font-weight: 700;
-    letter-spacing: -0.02em;
-    color: var(--color-primary);
-    background: var(--color-primary-soft);
-}
-.set-uploader-overlay {
-    position: absolute;
-    inset: 8px;
-    border-radius: 50%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 4px;
-    background: rgba(20, 26, 33, 0.62);
-    color: #fff;
-    font-size: 11px;
-    font-weight: 600;
-    opacity: 0;
-    transition: opacity 0.18s;
-}
-.set-uploader-ring:hover .set-uploader-overlay,
-.set-uploader:hover .set-uploader-overlay,
-.set-uploader:focus-visible .set-uploader-overlay {
-    opacity: 1;
-}
-// While uploading: keep the overlay (spinner) visible and signal it's not
-// clickable.
-.set-uploader-overlay.is-loading {
-    opacity: 1;
-}
-.set-uploader[aria-busy="true"] {
-    cursor: progress;
-}
-.set-uploader-hint {
-    margin: 18px auto 0;
-    max-width: 240px;
-    font-size: 12px;
-    line-height: 1.5;
-    color: var(--color-text-subtle);
-}
-
-// Minimals-style rounded logo dropzone (workspace branding form).
-.logo-upload {
-    display: flex;
-    align-items: center;
-    gap: 20px;
-    flex-wrap: wrap;
-}
-.logo-dropzone {
-    position: relative;
-    width: 104px;
-    height: 104px;
-    flex: none;
-    border-radius: var(--radius-lg);
-    border: 1.5px dashed var(--color-border-strong);
-    background: var(--color-bg-subtle);
-    display: grid;
-    place-items: center;
-    overflow: hidden;
-    cursor: pointer;
-    padding: 6px;
-    transition:
-        border-color 0.15s ease,
-        background 0.15s ease;
-}
-.logo-dropzone:hover,
-.logo-dropzone:focus-visible {
-    border-color: var(--color-primary);
-    background: var(--color-primary-soft);
-    outline: none;
-}
-.logo-dropzone.has-image {
-    border-style: solid;
-    background: var(--color-surface);
-}
-.logo-dropzone-empty {
-    display: grid;
-    place-items: center;
-    color: var(--color-text-subtle);
-}
-.logo-dropzone-img {
-    max-width: 100%;
-    max-height: 100%;
-    object-fit: contain;
-    border-radius: var(--radius);
-}
-// hover overlay (camera + label), like the Minimals avatar uploader
-.logo-dropzone-overlay {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 4px;
-    background: var(--color-scrim);
-    color: var(--color-on-scrim);
-    font-size: 12px;
-    font-weight: 600;
-    opacity: 0;
-    transition: opacity 0.15s ease;
-}
-.logo-dropzone:hover .logo-dropzone-overlay,
-.logo-dropzone:focus-visible .logo-dropzone-overlay {
-    opacity: 1;
-}
-.logo-upload-body {
-    flex: 1;
-    min-width: 200px;
-}
-
-// ── Drawer / Sidebar menu ──
-// AppSidebarMenu — react-bootstrap Offcanvas mapped onto the app tokens plus
-// a flex column layout for the header / scrolling body / sticky footer.
-.app-sidebar-menu.offcanvas {
-    --bs-offcanvas-width: var(--asm-width, 420px);
-    --bs-offcanvas-bg: var(--color-surface);
-    --bs-offcanvas-color: var(--color-text);
-    --bs-offcanvas-border-color: var(--color-border);
-    --bs-offcanvas-border-width: 1px;
-    --bs-offcanvas-padding-x: 0;
-    --bs-offcanvas-padding-y: 0;
-    max-width: 100vw;
-    display: flex;
-    flex-direction: column;
-}
-.app-sidebar-menu .offcanvas-body {
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    min-height: 0;
-}
-.app-sidebar-menu .asm-footer {
-    padding: 16px 20px;
-    border-top: 1px solid var(--color-border);
-    background: var(--color-surface);
-}
-
-.drawer {
-    position: fixed;
-    top: 0;
-    right: 0;
-    width: 420px;
-    max-width: 100vw;
-    height: 100vh;
-    background: var(--color-surface);
-    border-left: 1px solid var(--color-border);
-    z-index: 200;
-    transform: translateX(100%);
-    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-    display: flex;
-    flex-direction: column;
-}
-.drawer.open {
-    transform: translateX(0);
-}
-.drawer-backdrop {
-    position: fixed;
-    inset: 0;
-    background: rgba(15, 23, 42, 0.4);
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.2s;
-    z-index: 150;
-}
-.drawer-backdrop.open {
-    opacity: 1;
-    pointer-events: auto;
-}
-.drawer-header {
-    padding: 18px 20px;
-    border-bottom: 1px solid var(--color-border);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    background: var(--color-surface);
-}
-.drawer-title {
-    font-weight: 600;
-    font-size: 16px;
-    letter-spacing: -0.01em;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    color: var(--color-text);
-}
-.drawer-title-ic {
-    flex: none;
-    display: grid;
-    place-items: center;
-    width: 30px;
-    height: 30px;
-    border-radius: var(--radius);
-    corner-shape: squircle;
-    background: var(--color-primary-soft);
-    color: var(--color-primary);
-}
-// Sticky tools zone: search + section meta stay put while the list scrolls.
-.drawer-tools {
-    padding: 16px 20px 12px;
-    border-bottom: 1px solid var(--color-border);
-    background: var(--color-surface);
-}
-.drawer-body {
-    flex: 1;
-    overflow-y: auto;
-    padding: 14px 16px 20px;
-}
-
-// ── Tabs ──
-// The tab strip both surfaces render. React drives it as a controlled strip and
-// Razor additionally renders Bootstrap panels beneath it, but the strip markup —
-// and therefore the look — is identical.
-.app-tabs {
-    display: flex;
-    align-items: center;
-    gap: 2px;
-    border-bottom: 1px solid var(--color-border);
-    overflow-x: auto;
-    scrollbar-width: none;
-    // Declared explicitly because the React AppTabs renders a react-bootstrap
-    // <Nav>, so the element also carries `.nav` — whose `flex-wrap: wrap` would
-    // otherwise apply unopposed (equal specificity, and we declared nothing),
-    // wrapping the tabs onto a second line instead of scrolling.
-    flex-wrap: nowrap;
-}
-.app-tabs::-webkit-scrollbar {
-    display: none;
-}
-.app-tab {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    padding: 10px 14px;
-    border: 0;
-    // Sits on the strip's own hairline rather than adding a second one.
-    border-bottom: 2px solid transparent;
-    margin-bottom: -1px;
-    background: transparent;
-    font-family: inherit;
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 1.4;
-    color: var(--color-text-muted);
-    white-space: nowrap;
-    cursor: pointer;
-    transition:
-        color 0.12s ease,
-        border-color 0.12s ease;
-}
-.app-tab:hover:not(:disabled):not(.active) {
-    color: var(--color-text);
-}
-.app-tab.active {
-    color: var(--color-primary);
-    border-bottom-color: var(--color-primary);
-    // The active tab carries weight as well as colour — colour alone is a weak
-    // signal for anyone who reads the strip at a glance or cannot distinguish it.
-    font-weight: 600;
-}
-.app-tab:disabled {
-    color: var(--color-text-subtle);
-    cursor: not-allowed;
-}
-.app-tab:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: -2px;
-    border-radius: var(--radius-sm);
-}
-// A destructive tab reads as destructive whether or not it is the active one.
-.app-tab.danger {
-    color: var(--color-danger);
-}
-.app-tab.danger:hover:not(:disabled):not(.active) {
-    color: var(--color-danger-active);
-}
-.app-tab.danger.active {
-    color: var(--color-danger);
-    border-bottom-color: var(--color-danger);
-}
-.app-tab.danger .app-tab-count {
-    background: var(--color-danger-soft);
-    color: var(--color-danger-strong);
-}
-// Trailing count pill.
-.app-tab-count {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 20px;
-    padding: 0 6px;
-    height: 20px;
-    border-radius: 999px;
-    background: var(--color-bg-muted);
-    color: var(--color-text-subtle);
-    font-size: 12px;
-    font-weight: 600;
-}
-.app-tab.active .app-tab-count {
-    background: var(--color-primary-soft);
-    color: var(--color-primary);
-}
-
-// Wrapper for a self-contained tabs widget (strip + panels), as <app-tabs>
-// renders server-side. React composes the strip and its panels itself.
-.app-tabs-group > .tab-content {
-    padding-top: 16px;
-}
-
-// Pills variant — a segmented control rather than an underline.
-.app-tabs-pills {
-    gap: 4px;
-    border-bottom: 0;
-}
-.app-tabs-pills .app-tab {
-    border-bottom: 0;
-    margin-bottom: 0;
-    border-radius: var(--radius);
-}
-.app-tabs-pills .app-tab.active {
-    background: var(--color-primary-soft);
-}
-
-// ── Search field ──
-// The search control both surfaces render: a rounded field with a leading
-// magnifier that takes the brand colour on focus, plus a clear button that
-// appears once there's a value.
-.search-wrap {
-    position: relative;
-    display: flex;
-    align-items: center;
-    width: 100%;
-}
-.search-wrap > .search-icon {
-    position: absolute;
-    left: 13px;
-    top: 50%;
-    transform: translateY(-50%);
-    display: grid;
-    place-items: center;
-    color: var(--color-text-subtle);
-    pointer-events: none;
-    transition: color 0.12s ease;
-}
-.search-wrap:focus-within > .search-icon {
-    color: var(--color-primary);
-}
-.search-field,
-.search-input {
-    width: 100%;
-    padding-left: 40px;
-    padding-right: 36px;
-}
-.search-clear {
-    position: absolute;
-    right: 8px;
-    top: 50%;
-    transform: translateY(-50%);
-    display: grid;
-    place-items: center;
-    width: 26px;
-    height: 26px;
-    padding: 0;
-    border: 0;
-    border-radius: 999px;
-    background: transparent;
-    color: var(--color-text-subtle);
-    cursor: pointer;
-    opacity: 0;
-    pointer-events: none;
-    transition:
-        opacity 0.12s ease,
-        color 0.12s ease;
-}
-.search-wrap.has-value .search-clear,
-.search-wrap:focus-within .search-clear {
-    opacity: 1;
-    pointer-events: auto;
-}
-.search-clear:hover {
-    color: var(--color-text);
-}
-
-// ── Empty state ──
-.empty-state {
-    text-align: center;
-    padding: 48px 24px;
-    color: var(--color-text-subtle);
-}
-.empty-state-title {
-    font-size: 16px;
-    font-weight: 600;
-    line-height: 1.35;
-    color: var(--color-text);
-}
-.empty-state-message {
-    margin: 6px 0 0;
-    font-size: 14px;
-    line-height: 1.5;
-    color: var(--color-text-muted);
-}
-.empty-state-action {
-    margin-top: 16px;
-}
-// Tighter scale for a widget/tile, as opposed to a full card or page.
-.empty-state-sm {
-    padding: 28px 16px;
-}
-.empty-state-sm .empty-state-title {
-    font-size: 14px;
-}
-.empty-state-sm .empty-state-message {
-    font-size: 12px;
-}
-.empty-state-icon {
-    width: 48px;
-    height: 48px;
-    border-radius: var(--radius-lg);
-    background: var(--color-primary-soft);
-    color: var(--color-primary);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 14px;
-}
-
-// The empty state a DataTable renders in place of its rows. Distinct from
-// the card-level .empty-state above: a 50px primary-tinted disc, then a 32px
-// gap to the title and 12px to the subtitle.
-.tbl-empty {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    padding: 40px 24px;
-}
-.tbl-empty-icon {
-    display: inline-grid;
-    place-items: center;
-    flex: none;
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
-    color: var(--color-primary);
-    margin-bottom: 16px;
-}
-.tbl-empty-title {
-    font-size: 18px;
-    font-weight: 600;
-    line-height: 1.35;
-    color: var(--color-text);
-}
-.tbl-empty-text {
-    margin-top: 8px;
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 1.5;
-    color: var(--color-text-muted);
-}
-// An action (e.g. "New assessment") sits under the subtitle when the caller
-// supplies one.
-.tbl-empty-action {
-    margin-top: 20px;
-}
-
-.lx-table-empty {
-    padding: 36px 24px;
-    text-align: center;
-    color: var(--color-text-muted);
-}
-// The empty state owns its own padding and is not a row you can act on — no
-// cell padding, no border, and no hover fill from .table / .table-ledger.
-.table td.lx-table-empty:has(> .tbl-empty) {
-    padding: 0;
-    border-bottom: 0;
-}
-.table tbody tr:hover td.lx-table-empty:has(> .tbl-empty),
-.table-ledger tbody tr:hover td.lx-table-empty:has(> .tbl-empty) {
-    background: transparent;
-}
-
-// ── Table (base) ──
-// The shared data-table look, on the plain `.table` class Bootstrap already
-// gives every table. Without this a product's tables fall back to stock
-// Bootstrap and drift from the design system; `.table-ledger` below is the
-// denser, card-inset variant, not a replacement for having a base.
-.table {
-    --bs-table-bg: transparent;
-    --bs-table-color: var(--color-text);
-    width: 100%;
-    margin-bottom: 0;
-    color: var(--color-text);
-    vertical-align: middle;
-    border-color: var(--color-border);
-    // `separate` is required for a cell to render a border-radius at all —
-    // Bootstrap reboot sets `collapse`, under which .table-ledger's rounded
-    // header corners silently do nothing. border-spacing 0 keeps cells flush.
-    border-collapse: separate;
-    border-spacing: 0;
-}
-
-// The cell rules are wrapped in :where() so they carry ZERO class specificity
-// — `:where(.table) > thead > tr > th` is (0,0,3), which any single-class
-// variant selector such as `.table-ledger thead th` (0,1,2) outranks.
+// This file is now an INDEX. The rules live in ./wui/*.scss, split by domain
+// because one 5,000-line stylesheet made finding a component a grep.
 //
-// Without this the base out-ranks its own variant: written plainly,
-// `.table > thead > tr > th` is (0,1,3) and beats `.table-ledger thead th`,
-// so the ledger lost its own border-bottom/line-height/font-family to the
-// base. A base layer must always sit *under* the variants built on it.
-:where(.table) > thead > tr > th {
-    height: 42px;
-    padding: 0 12px;
-    background: var(--color-bg-muted);
-    border-bottom: 1px solid var(--color-border);
-    font-size: 12px;
-    font-weight: 500;
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
-    color: var(--color-text-subtle);
-    white-space: nowrap;
-    vertical-align: middle;
-    transition:
-        background-color 0.12s ease,
-        color 0.12s ease;
-}
-:where(.table) > tbody > tr > td {
-    padding: 12px;
-    border-bottom: 1px solid var(--color-border);
-    font-size: 14px;
-    color: var(--color-text-muted);
-    vertical-align: middle;
-    transition: background-color 0.12s ease;
-}
-:where(.table) > tbody > tr:last-child > td {
-    border-bottom: 0;
-}
-:where(.table) > tbody > tr:hover > td {
-    background: var(--color-bg-subtle);
-}
-@media (prefers-reduced-motion: reduce) {
-    :where(.table) > thead > tr > th,
-    :where(.table) > tbody > tr > td {
-        transition: none;
-    }
-}
-// Numeric / action columns align to the trailing edge.
-.table .cell-end,
-.table thead th.cell-end {
-    text-align: right;
-}
-
-// ── Table + pagination ──
-// DataTable cell helpers
-.table-ledger .lx-cell-end,
-.table-ledger thead th.lx-cell-end {
-    text-align: right;
-}
-
-// Ledger chrome — the shared table look. Applies to every .table-ledger: a
-// floating 42px header band, airy rows on a hairline rule, and an inset from
-// the card edge. Column geometry is NOT set here.
-.table-wrap:has(> .table-ledger) {
-    padding: 20px 20px 0;
-}
-.table-ledger {
-    border-spacing: 0;
-}
-.table-ledger thead th {
-    height: 42px;
-    padding: 0 12px;
-    background: var(--color-bg-muted);
-    border-bottom: none;
-    font-family: "Inter", var(--font-sans, sans-serif);
-    font-size: 12px;
-    font-weight: 500;
-    line-height: 17px;
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
-    color: var(--color-text-subtle);
-    vertical-align: middle;
-}
-.table-ledger thead th:first-child {
-    padding-left: 20px;
-    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
-}
-.table-ledger thead th:last-child {
-    padding-right: 20px;
-    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
-}
-.table-ledger tbody td {
-    height: 54px;
-    padding: 12px;
-    border-bottom: 0.5px solid var(--color-border);
-    font-family: "Inter", var(--font-sans, sans-serif);
-    font-size: 12px;
-    font-weight: 500;
-    line-height: 15px;
-    color: var(--color-text-muted);
-}
-.table-ledger tbody td:first-child {
-    padding-left: 20px;
-}
-.table-ledger tbody td:last-child {
-    padding-right: 20px;
-}
-.table-ledger tbody tr:last-child td {
-    border-bottom: none;
-}
-.table-ledger tbody tr:hover td {
-    background: var(--color-bg-subtle);
-}
-.table-ledger .u-meta {
-    gap: 2px;
-}
-.table-ledger .u-name {
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 19px;
-    color: var(--color-text);
-}
-@media (max-width: 575.98px) {
-    .table-ledger .u-name {
-        font-size: 12px;
-        line-height: normal;
-        margin-bottom: 2px;
-    }
-}
-// An identity-cell name is often a link, so it inherits Bootstrap's
-// underline-on-hover. The colour shift is the affordance here.
-.table-ledger a.u-name,
-.table-ledger a.u-name:hover {
-    text-decoration: none;
-}
-// Identity-cell subline. `.u-email` is in the group because an identity cell
-// renders the secondary line as either a generic .lx-text-xs or a .u-email.
-.table-ledger .u-meta > .u-email,
-.table-ledger .u-meta > .lx-text-xs {
-    font-size: 12px;
-    font-weight: 400;
-    line-height: 15px;
-    color: var(--color-text-subtle);
-}
-.table-ledger .u-row-actions {
-    gap: 6px;
-}
-
-// Ledger tables: 20px edge padding so header labels + first/last cells align
-// with the card edge — shared across every .table-ledger surface.
-.table-ledger thead th:first-child,
-.table-ledger tbody td:first-child {
-    padding-left: 20px;
-}
-.table-ledger thead th:last-child,
-.table-ledger tbody td:last-child {
-    padding-right: 20px;
-}
-
-// Pagination footer — rows-per-page + range + prev/next, sits flush under a
-// table.
-.table-pagination {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 22px;
-    padding: 12px 16px;
-    border-top: 1px solid var(--color-border);
-    font-size: 13px;
-    color: var(--color-text-muted);
-    flex-wrap: wrap;
-}
-// Rows-per-page sits at the leading edge; range + nav stay grouped on the
-// right.
-.tpg-rows {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    white-space: nowrap;
-    margin-right: auto;
-    font-size: 12px;
-    font-weight: 500;
-    text-transform: uppercase;
-    color: var(--color-text-subtle);
-}
-.select.tpg-select {
-    width: auto;
-    min-width: 64px;
-    height: 32px;
-    min-height: 32px;
-    padding: 0 28px 0 12px;
-    font-size: 13px;
-    font-weight: 600;
-    border-radius: var(--radius);
-    background-position: right 8px center;
-    background-size: 14px;
-}
-.tpg-range {
-    font-variant-numeric: tabular-nums;
-    white-space: nowrap;
-    font-size: 14px;
-    font-weight: 500;
-    color: var(--color-text-muted);
-}
-.tpg-nav {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-}
-.tpg-arrow {
-    display: grid;
-    place-items: center;
-    width: 32px;
-    height: 32px;
-    border: none;
-    background: transparent;
-    color: var(--color-text-muted);
-    border-radius: 50%;
-    cursor: pointer;
-    transition:
-        background 0.14s ease,
-        color 0.14s ease;
-}
-.tpg-arrow:hover:not(:disabled) {
-    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
-    color: var(--color-primary);
-}
-// Text-5 already reads as "unavailable" — no opacity dimming on top of it.
-.tpg-arrow:disabled {
-    color: var(--color-border-strong);
-    cursor: not-allowed;
-}
-
-// Horizontal scroll guard + flush-fit inside a card. Wrapping the table here
-// also stops `.card > .table` header-corner rounding from applying mid-card.
-.table-wrap {
-    overflow-x: auto;
-    max-width: 100%;
-    // Keep the horizontal swipe inside the table — don't let it drag the
-    // page — and give touch devices momentum scrolling. Scrollbar is
-    // thinned/hidden so the scroll feels native.
-    overscroll-behavior-x: contain;
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: thin;
-    scrollbar-color: var(--color-border-strong) transparent;
-}
-.table-wrap::-webkit-scrollbar {
-    height: 6px;
-}
-.table-wrap::-webkit-scrollbar-track {
-    background: transparent;
-}
-.table-wrap::-webkit-scrollbar-thumb {
-    background: var(--color-border-strong);
-    border-radius: 999px;
-}
-
-// Row-selection checkbox column.
-.table-ledger th.lx-select-cell,
-.table-ledger td.lx-select-cell {
-    width: 44px;
-    min-width: 44px;
-    max-width: 44px;
-    text-align: center;
-    padding-left: 12px;
-    padding-right: 0;
-}
-// Selection is a brand-tinted state on the CELLS, not a grey fill on the row:
-// cells carry their own background (hover sets it too), so a background on the
-// <tr> is painted over and never shows. Grey also reads as "disabled" rather
-// than "chosen".
-.table-ledger tbody tr.is-selected > td {
-    background: var(--color-primary-soft);
-}
-.table-ledger tbody tr.is-selected:hover > td {
-    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
-}
-
-// Row status affordance — a colour bar on the leading edge, so a row's state is
-// legible without relying on a tint alone.
-.table-ledger tbody tr[data-status] > td:first-child {
-    box-shadow: inset 3px 0 0 0 var(--color-border-strong);
-}
-.table-ledger tbody tr[data-status="success"] > td:first-child {
-    box-shadow: inset 3px 0 0 0 var(--color-success);
-}
-.table-ledger tbody tr[data-status="warning"] > td:first-child {
-    box-shadow: inset 3px 0 0 0 var(--color-warning);
-}
-.table-ledger tbody tr[data-status="danger"] > td:first-child {
-    box-shadow: inset 3px 0 0 0 var(--color-danger);
-}
-.table-ledger tbody tr[data-status="info"] > td:first-child {
-    box-shadow: inset 3px 0 0 0 var(--color-info);
-}
-
-// Row actions — icon-only buttons replacing a kebab dropdown.
-.u-row-actions {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 6px;
-    // Action cells never wrap — a status hint stays on one line.
-    white-space: nowrap;
-}
-.u-action {
-    display: inline-grid;
-    place-items: center;
-    flex: none;
-    width: 36px;
-    height: 36px;
-    padding: 0;
-    border: none;
-    background: var(--color-bg-subtle);
-    border-radius: 999px;
-    color: var(--color-text-subtle);
-    cursor: pointer;
-    transition:
-        background 0.12s ease,
-        color 0.12s ease;
-    position: relative;
-}
-// Touch pointers need a 44px minimum target. Grow the hit area, not the
-// ink, so row density and alignment are untouched.
-@media (pointer: coarse) {
-    .u-action::after {
-        content: "";
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: 44px;
-        height: 44px;
-    }
-}
-.u-action svg {
-    flex: none;
-}
-.u-action:hover:not(:disabled) {
-    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
-    color: var(--color-primary);
-}
-.u-action:disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-}
-.u-action.danger {
-    color: var(--color-danger);
-}
-.u-action.danger:hover:not(:disabled) {
-    background: color-mix(in srgb, var(--color-danger) 10%, transparent);
-    color: var(--color-danger);
-}
-.u-action.u-action-preview {
-    background: var(--color-primary-soft);
-    color: var(--color-primary);
-}
-.u-action.u-action-download {
-    background: var(--color-success-soft);
-    color: var(--color-success-active);
-}
-.u-action.u-action-share {
-    background: var(--color-warning-soft);
-    color: var(--color-warning-active);
-}
-.u-action.u-action-preview:hover:not(:disabled) {
-    background: var(--color-primary-soft);
-    color: var(--color-primary);
-}
-.u-action.u-action-download:hover:not(:disabled) {
-    background: var(--color-success-soft);
-    color: var(--color-success-active);
-}
-.u-action.u-action-share:hover:not(:disabled) {
-    background: var(--color-warning-soft);
-    color: var(--color-warning-active);
-}
-.u-action.u-action-danger:hover {
-    color: var(--color-danger);
-    background: color-mix(in srgb, var(--color-danger) 10%, transparent);
-}
-
-// Identity cell — avatar + stacked name/email.
-.u-cell {
-    display: flex;
-    align-items: center;
-    gap: 14px;
-}
-.u-avatar {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    flex: none;
-    display: grid;
-    place-items: center;
-    font-size: 16px;
-    font-weight: 600;
-    color: var(--color-primary);
-    background: color-mix(in srgb, var(--color-primary) 20%, transparent);
-}
-.u-meta {
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-}
-.u-name {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 14px;
-    font-weight: 600;
-    color: var(--color-text);
-}
-.u-email {
-    font-size: 14px;
-    font-weight: 400;
-    color: var(--color-text-muted);
-}
-.u-you {
-    padding: 1px 7px;
-    font-size: 10.5px;
-}
-
-// ── Modal ──
-// Chrome stays on `.lx-modal-*`. The shell is react-bootstrap <Modal>:
-//   .modal.lx-modal-shell          ← className (layout container)
-//   .modal-backdrop.lx-modal-dim   ← backdropClassName (dim only)
-//   .modal-dialog.lx-rb-dialog     ← dialogClassName
-//   .modal-content.lx-modal        ← contentClassName (the card)
-// Do NOT put layout on backdropClassName — that targets a sibling, not
-// .modal.
-.modal-backdrop.lx-modal-dim {
-    background: rgba(15, 23, 42, 0.45);
-    z-index: 1500;
-}
-.modal.lx-modal-shell {
-    --bs-modal-bg: transparent;
-    display: flex !important;
-    align-items: center;
-    justify-content: center;
-    z-index: 1505;
-    padding: 20px;
-}
-// RB dialog shell: no Bootstrap max-width/margin so `.lx-modal` owns sizing.
-.modal.lx-modal-shell .modal-dialog.lx-rb-dialog {
-    margin: 0;
-    max-width: none;
-    width: auto;
-    pointer-events: none;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-.modal.lx-modal-shell .modal-dialog.lx-rb-dialog .modal-content {
-    pointer-events: auto;
-    border: none;
-    // Lift off the dim backdrop: a hairline ring defines the edge (carries
-    // elevation in dark mode where a drop shadow barely reads) + a soft,
-    // deep drop shadow.
-    box-shadow:
-        0 0 0 1px color-mix(in srgb, var(--color-text) 10%, transparent),
-        var(--shadow-overlay-lg);
-    background: var(--color-surface);
-}
-.lx-modal {
-    background: var(--color-surface);
-    border-radius: var(--radius-xl);
-    corner-shape: squircle;
-    border: none;
-    width: 100%;
-    max-width: 440px;
-    max-height: calc(100vh - 40px);
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-}
-.lx-modal-wide {
-    max-width: 1240px;
-}
-
-// Side drawer — the dialog docks to the right edge at 30% of the viewport
-// and slides in, instead of sitting centred. Same chrome, different
-// geometry.
-.modal.lx-modal-shell.is-side {
-    align-items: stretch;
-    justify-content: flex-end;
-    padding: 0;
-}
-.modal.lx-modal-shell.is-side .modal-dialog.lx-rb-dialog {
-    height: 100%;
-    width: auto;
-    max-width: none;
-    align-items: stretch;
-    justify-content: flex-end;
-}
-.lx-modal-side {
-    width: 30vw;
-    min-width: 420px;
-    max-width: none;
-    max-height: 100vh;
-    height: 100vh;
-    border-radius: 0;
-    corner-shape: normal;
-    animation: lx-drawer-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
-}
-@media (max-width: 991.98px) {
-    .lx-modal-side {
-        width: 70vw;
-    }
-}
-@media (max-width: 575.98px) {
-    .lx-modal-side {
-        width: 100vw;
-    }
-}
-@keyframes lx-drawer-in {
-    from {
-        transform: translateX(100%);
-    }
-    to {
-        transform: translateX(0);
-    }
-}
-@media (prefers-reduced-motion: reduce) {
-    .lx-modal-side {
-        animation: none;
-    }
-}
-.lx-modal-header {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-    padding: 16px 20px;
-    border-bottom: 1px solid var(--color-border);
-}
-.lx-modal-body {
-    flex: 1 1 auto;
-    min-height: 0;
-    overflow-y: auto;
-    overscroll-behavior: contain;
-    scroll-behavior: smooth;
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: thin;
-    scrollbar-color: var(--color-border-strong) transparent;
-    padding: 20px 22px 24px;
-}
-.lx-modal-body::-webkit-scrollbar {
-    width: 8px;
-}
-.lx-modal-body::-webkit-scrollbar-track {
-    background: transparent;
-}
-.lx-modal-body::-webkit-scrollbar-thumb {
-    background: transparent;
-    border-radius: 999px;
-    border: 2px solid transparent;
-    background-clip: padding-box;
-}
-.lx-modal-body:hover::-webkit-scrollbar-thumb {
-    background: var(--color-border-strong);
-    background-clip: padding-box;
-}
-@media (prefers-reduced-motion: reduce) {
-    .lx-modal-body {
-        scroll-behavior: auto;
-    }
-}
-// Modal heading group: optional contextual (Bulk) icon tile + title/subtitle.
-.lx-modal-heading {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    min-width: 0;
-}
-.lx-modal-headtext {
-    min-width: 0;
-}
-.lx-modal-headicon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 34px;
-    height: 34px;
-    border-radius: var(--radius);
-    corner-shape: squircle;
-    flex: none;
-    background: var(--color-primary-soft);
-    color: var(--color-primary);
-}
-
-// Break long unbroken names so they wrap within the heading instead of
-// running under the close button.
-.lx-modal-title {
-    font-size: 20px;
-    font-weight: 600;
-    color: var(--color-text);
-    overflow-wrap: anywhere;
-}
-.lx-modal-subtitle {
-    margin-top: 1px;
-    font-size: 12px;
-    font-weight: 400;
-    color: var(--color-text-muted);
-    overflow-wrap: anywhere;
-}
-.lx-form-section {
-    margin-top: 24px;
-}
-.lx-form-section:first-child {
-    margin-top: 0;
-}
-// Stretch controls to fill the column even though .field aligns to
-// flex-start.
-.lx-modal-body .field > .input,
-.lx-modal-body .field > .search-select,
-.lx-modal-body .field > .input-date-wrap,
-.lx-modal-body .field > .datepicker,
-.lx-modal-body .field > .phone-input-wrap,
-.lx-modal-body .field > .field-error {
-    align-self: stretch;
-}
-.lx-form-section-head {
-    margin-bottom: 16px;
-}
-.lx-form-section-title {
-    font-size: 16px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-    color: var(--color-text-subtle);
-}
-.lx-modal-footer {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 10px;
-    padding: 16px 22px;
-    border-top: 1px solid var(--color-border);
-}
-
-// Modal close — a squircle at rest that morphs into a circle on hover while
-// taking a danger tint, so dismissing reads as the destructive-ish gesture
-// it is. Slower on the way in than the way out.
-.lx-modal-close {
-    margin-left: auto;
-    display: grid;
-    place-items: center;
-    flex: none;
-    width: 36px;
-    height: 36px;
-    padding: 0;
-    border: none;
-    cursor: pointer;
-    line-height: 1;
-    background: var(--color-bg-subtle);
-    color: var(--color-text-muted);
-    border-radius: 999px;
-    corner-shape: squircle;
-    transition:
-        background 180ms cubic-bezier(0.4, 0, 0.2, 1),
-        color 180ms cubic-bezier(0.4, 0, 0.2, 1),
-        corner-shape 180ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-.lx-modal-close:hover {
-    background: var(--color-danger-soft);
-    color: var(--color-danger);
-    corner-shape: round;
-    transition:
-        background 280ms cubic-bezier(0.16, 1, 0.3, 1),
-        color 280ms cubic-bezier(0.16, 1, 0.3, 1),
-        corner-shape 280ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-.lx-modal-close:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
-}
-// The shape morph is decorative; hold the colour cue for reduced-motion
-// users.
-@media (prefers-reduced-motion: reduce) {
-    .lx-modal-close,
-    .lx-modal-close:hover {
-        corner-shape: squircle;
-        transition:
-            background 1ms linear,
-            color 1ms linear;
-    }
-}
-
-// ── Confirm dialog ──
-// Confirmation dialog — centred status icon + title + message, two equal
-// side-by-side CTAs. Runs headerless (Modal hideHeader), so the body
-// carries the spacing and the footer drops its divider.
-.lx-confirm-content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    padding: 16px 12px 6px;
-}
-.lx-confirm-icon {
-    line-height: 0;
-    margin-bottom: 22px;
-}
-.lx-confirm-title {
-    margin: 0 0 10px;
-    font-size: 22px;
-    font-weight: 700;
-    letter-spacing: -0.01em;
-    color: var(--color-text);
-}
-.lx-confirm-msg {
-    margin: 0;
-    font-size: 15px;
-    line-height: 1.55;
-    color: var(--color-text-muted);
-    max-width: 40ch;
-}
-.lx-confirm-actions {
-    display: flex;
-    gap: 12px;
-    width: 100%;
-}
-.lx-modal-footer:has(.lx-confirm-actions) {
-    border-top: none;
-    padding-top: 0;
-}
-.lx-confirm-actions .btn {
-    flex: 1;
-    min-height: var(--wui-control-height);
-    height: var(--wui-control-height);
-    border-radius: var(--radius);
-    corner-shape: squircle;
-    padding-left: 16px;
-    padding-right: 16px;
-    font-size: 14px;
-    font-weight: 500;
-}
-
-// ── Grid / layout utils ──
-// Responsive card grids (Bootstrap has no grid-template utility).
-.lx-grid {
-    display: grid;
-    grid-template-columns: 1fr;
-}
-.lx-cols-2 {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-.lx-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-.lx-cols-4 {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-}
-@media (min-width: 768px) {
-    .lx-grid-md-2 {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-    .lx-grid-md-3 {
-        grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-    .lx-grid-md-4 {
-        grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-}
-@media (min-width: 992px) {
-    .lx-grid-lg-2 {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-    .lx-grid-lg-3 {
-        grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-    .lx-grid-lg-4 {
-        grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-}
-.lx-col-span-2 {
-    grid-column: span 2 / span 2;
-}
-.lx-col-span-3 {
-    grid-column: span 3 / span 3;
-}
-.lx-col-span-full {
-    grid-column: 1 / -1;
-}
-
-// ── Info tip ──
-// Inline term help (InfoTip).
-.infotip {
-    position: relative;
-    display: inline-flex;
-    vertical-align: middle;
-    margin-left: 5px;
-}
-.infotip-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    height: 16px;
-    padding: 0;
-    border: none;
-    border-radius: 999px;
-    background: transparent;
-    color: var(--color-text-subtle);
-    cursor: help;
-    transform: scaleY(-1);
-    transition: color 0.15s;
-}
-.infotip-btn:hover,
-.infotip-btn:focus-visible {
-    color: var(--color-primary);
-    outline: none;
-}
-.infotip-pop {
-    position: absolute;
-    bottom: calc(100% + 8px);
-    left: 50%;
-    transform: translateX(-50%);
-    z-index: 220;
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    width: 280px;
-    max-width: 78vw;
-    padding: 12px 14px;
-    background: var(--color-surface);
-    border: none;
-    border-radius: var(--radius-lg);
-    box-shadow: var(--shadow-overlay);
-    text-align: left;
-    white-space: normal;
-    cursor: default;
-}
-.infotip-pop::after {
-    content: "";
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    border: 6px solid transparent;
-    border-top-color: var(--color-surface);
-}
-// Portalled to <body>: position is set inline (fixed top/left), so drop the
-// anchored offsets and the centering transform, and hide the arrow. z-index
-// sits above the modal backdrop so it shows over the modal, not behind it.
-.infotip-pop.is-portal {
-    bottom: auto;
-    transform: none;
-    z-index: 1600;
-}
-.infotip-pop.is-portal::after {
-    display: none;
-}
-.infotip-term {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 13px;
-    font-weight: 600;
-    color: var(--color-text);
-}
-.infotip-full {
-    font-size: 12px;
-    font-weight: 500;
-    color: var(--color-text);
-}
-.infotip-def {
-    font-size: 12px;
-    color: var(--color-text-muted);
-    line-height: 1.5;
-}
-
-// ── Page header ──
-.page-header {
-    margin-bottom: 24px;
-}
-.page-title {
-    font-size: 24px;
-    font-weight: 600;
-    letter-spacing: -0.02em;
-    color: var(--color-text);
-}
-.page-subtitle {
-    font-size: 14px;
-    font-weight: 400;
-    color: var(--color-text-muted);
-    margin-top: 2px;
-}
-.page-actions {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-}
-
-// Tablet and below: the masthead stops being a single row — the title block and
-// its actions stack, and the actions stretch to the full width rather than
-// crowding the title. Bootstrap's lg tier (991.98px), not an invented breakpoint.
-//
-// Selectors are DOUBLED (`.page-header.page-header`) on purpose. A media query
-// adds no specificity, so a consumer's own single-class rule — written later in
-// the cascade, as a consuming app's stylesheet always is — silently beats the
-// responsive rule and the layout never collapses. Doubling puts these at (0,2,0)
-// so they hold, while still leaving a consumer free to override deliberately.
-@media (max-width: 991.98px) {
-    .page-header.page-header {
-        flex-direction: column;
-        align-items: stretch;
-        gap: 12px;
-    }
-    .page-actions.page-actions {
-        flex-wrap: wrap;
-        width: 100%;
-    }
-    // A two-up field row is too tight for a tablet column.
-    .field-row.field-row,
-    .field-row-3.field-row-3 {
-        grid-template-columns: 1fr;
-    }
-    // A fixed 420px drawer leaves too little of the page visible on a tablet.
-    .drawer.drawer {
-        width: 100vw;
-        max-width: 420px;
-    }
-}
-
-// ── Row-action / icon buttons ──
-.btn-icon {
-    min-height: 0;
-    padding: 8px;
-    border-radius: 999px;
-    corner-shape: round;
-}
-
-// Circular icon buttons in the top bar (minimal dashboard chrome).
-.topbar-icon-btn {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 36px;
-    height: 36px;
-    flex: 0 0 auto;
-    border: none;
-    border-radius: 999px;
-    background: transparent;
-    color: var(--color-text-muted);
-    cursor: pointer;
-    transition:
-        background 0.15s ease,
-        color 0.15s ease;
-}
-.topbar-icon-btn:hover {
-    background: var(--color-primary-soft);
-    color: var(--color-primary);
-}
-.topbar-icon-btn.has-badge::after {
-    content: "";
-    position: absolute;
-    top: 9px;
-    right: 9px;
-    width: 8px;
-    height: 8px;
-    border-radius: 999px;
-    background: var(--color-danger);
-    border: 2px solid var(--color-bg);
-}
-
-// ── Spinner / shimmer ──
-.lx-spinner {
-    width: 18px;
-    height: 18px;
-    border: 2.5px solid var(--color-border);
-    border-top-color: var(--color-primary);
-    border-radius: 999px;
-    animation: lx-spin 0.7s linear infinite;
-    display: inline-block;
-    flex-shrink: 0;
-}
-@keyframes lx-spin {
-    to {
-        transform: rotate(360deg);
-    }
-}
-// Small (14px) spinner variant.
-.lx-spinner-sm {
-    width: 14px;
-    height: 14px;
-    border-width: 2px;
-}
-// Spinner for the Button loading state.
-.lx-spin {
-    animation: lx-spin 0.8s linear infinite;
-}
-
-// Skeleton shimmer — used ONLY while loading the first data (loading &&
-// empty), to tell "loading first data" apart from "loaded but empty".
-.skeleton {
-    position: relative;
-    overflow: hidden;
-    display: block;
-    background: var(--color-bg-muted);
-    border-radius: var(--radius-sm);
-}
-.skeleton::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    transform: translateX(-100%);
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
-    animation: skeleton-shimmer 1.4s ease-in-out infinite;
-}
-@keyframes skeleton-shimmer {
-    100% {
-        transform: translateX(100%);
-    }
-}
-:root[data-theme="dark"] .skeleton::after {
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
-}
-@media (prefers-reduced-motion: reduce) {
-    .skeleton::after {
-        animation: none;
-    }
-}
-
-// ── Text-scale utilities (lx-text-*) ──
-.lx-text-xs {
-    font-size: 12px;
-    line-height: 1.4;
-}
-.lx-text-sm {
-    font-size: 13.5px;
-    line-height: 1.5;
-}
-.lx-text-base {
-    font-size: 15px;
-    line-height: 1.5;
-}
-.lx-text-lg {
-    font-size: 17px;
-    line-height: 1.4;
-}
-.lx-text-xl {
-    font-size: 20px;
-    line-height: 1.4;
-}
-.lx-text-2xl {
-    font-size: 24px;
-    line-height: 1.3;
-}
-.lx-text-3xl {
-    font-size: 30px;
-    line-height: 1.2;
-}
-.lx-text-4xl {
-    font-size: 36px;
-    line-height: 1.15;
-}
-
-/* ── Chip (token / tag) ── */
-.chip {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    max-width: 100%;
-    padding: 4px 10px;
-    border: 1px solid var(--color-border);
-    border-radius: 999px;
-    background: var(--color-bg-muted);
-    color: var(--color-text);
-    font-size: 0.8125rem;
-    font-weight: 500;
-    line-height: 1.2;
-    vertical-align: middle;
-}
-.chip-sm {
-    gap: 4px;
-    padding: 2px 8px;
-    font-size: 0.75rem;
-}
-.chip-label {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-.chip-ic {
-    display: inline-flex;
-    color: var(--color-text-subtle);
-}
-.chip-avatar {
-    display: inline-flex;
-    width: 18px;
-    height: 18px;
-    margin-left: -2px;
-    border-radius: 999px;
-    overflow: hidden;
-    flex: none;
-}
-.chip-avatar img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-.chip-body {
-    display: inline-flex;
-    align-items: center;
-    gap: inherit;
-    padding: 0;
-    border: 0;
-    background: none;
-    font: inherit;
-    color: inherit;
-    cursor: pointer;
-}
-.chip-clickable {
-    cursor: pointer;
-}
-.chip-clickable:hover {
-    border-color: var(--color-border-strong);
-}
-.chip-remove {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    margin: 0 -4px 0 2px;
-    padding: 2px;
-    border: 0;
-    border-radius: 999px;
-    background: none;
-    color: var(--color-text-subtle);
-    line-height: 0;
-    cursor: pointer;
-}
-.chip-remove:hover {
-    background: color-mix(in srgb, var(--color-text) 8%, transparent);
-    color: var(--color-text);
-}
-.chip.is-disabled {
-    opacity: 0.55;
-    pointer-events: none;
-}
-
-/* Tones — tinted surface + on-tint text; icon/remove inherit the tone colour. */
-.chip.primary {
-    border-color: transparent;
-    background: var(--color-primary-soft);
-    color: var(--color-primary);
-}
-.chip.success {
-    border-color: transparent;
-    background: var(--color-success-soft);
-    color: var(--color-success-active);
-}
-.chip.warning {
-    border-color: transparent;
-    background: var(--color-warning-soft);
-    color: var(--color-warning-active);
-}
-.chip.danger {
-    border-color: transparent;
-    background: var(--color-danger-soft);
-    color: var(--color-danger-active);
-}
-.chip.info {
-    border-color: transparent;
-    background: var(--color-info-soft);
-    color: var(--color-info-active);
-}
-.chip.primary .chip-ic,
-.chip.success .chip-ic,
-.chip.warning .chip-ic,
-.chip.danger .chip-ic,
-.chip.info .chip-ic,
-.chip.primary .chip-remove,
-.chip.success .chip-remove,
-.chip.warning .chip-remove,
-.chip.danger .chip-remove,
-.chip.info .chip-remove {
-    color: currentColor;
-}
-.chip.primary .chip-remove:hover,
-.chip.success .chip-remove:hover,
-.chip.warning .chip-remove:hover,
-.chip.danger .chip-remove:hover,
-.chip.info .chip-remove:hover {
-    background: color-mix(in srgb, currentColor 16%, transparent);
-    color: currentColor;
-}
-
-/* ── Autocomplete (input-first combobox; extends .search-select) ── */
-.search-select-ac {
-    justify-content: flex-start;
-    cursor: text;
-    padding-right: 8px;
-}
-.search-select-ac-input {
-    flex: 1 1 auto;
-    min-width: 0;
-    padding: 0;
-    border: 0;
-    background: none;
-    color: inherit;
-    font: inherit;
-    outline: none;
-}
-.search-select-ac-input::placeholder {
-    color: var(--color-text-subtle);
-}
-.search-select-spinner {
-    flex: none;
-    width: 1rem;
-    height: 1rem;
-    color: var(--color-text-subtle);
-    border-width: 2px;
-}
-.search-select-hint {
-    padding: 10px 12px;
-    color: var(--color-text-subtle);
-    font-size: 0.8125rem;
-}
-
-/* ── Multi-select (chips in the control; check-list dropdown; extends .search-select) ── */
-.search-select-multi {
-    align-items: flex-start;
-    gap: 6px;
-    min-height: 40px;
-    height: auto;
-    padding-top: 5px;
-    padding-bottom: 5px;
-    flex-wrap: nowrap;
-}
-.ms-chips {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-    flex: 1 1 auto;
-    min-width: 0;
-    align-items: center;
-}
-.search-select-multi .search-select-caret {
-    align-self: center;
-}
-.ms-check {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    flex: none;
-    color: var(--color-primary);
-    opacity: 0;
-}
-.search-select-option[aria-selected='true'] .ms-check {
-    opacity: 1;
-}
-.ms-opt-label {
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-.search-select-multi .search-select-option {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-
-/* ── Choice card: image / custom-template variant ── */
-.struct-card-img-card {
-    flex-direction: column;
-    align-items: stretch;
-    padding: 0;
-    overflow: hidden;
-}
-.struct-card-media {
-    display: block;
-    width: 100%;
-    aspect-ratio: 16 / 9;
-    background: var(--color-bg-muted);
-    overflow: hidden;
-}
-.struct-card-img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    display: block;
-}
-.struct-card-img-card .struct-card-body {
-    padding: 12px 14px;
-}
-.struct-card-img-card .struct-card-check {
-    position: absolute;
-    top: 8px;
-    right: 8px;
-}
+// The order below is LOAD-BEARING. A later partial may deliberately override an
+// earlier one, so reordering these imports silently changes the cascade — and
+// nothing in the build will complain. `pnpm check:theme` measures the rules that
+// have to win against Bootstrap; the rest is guarded by review.
+@import "wui/controls";
+@import "wui/choice";
+@import "wui/media";
+@import "wui/navigation";
+@import "wui/card";
+@import "wui/data";
+@import "wui/overlays";
+@import "wui/utilities";
+@import "wui/typography";
+@import "wui/disclosure";
+@import "wui/display";
+@import "wui/flow";
+@import "wui/shell";