/*
    Value maps: the list (Pages/ValueMapsPage.razor), one value map (Pages/ValueMapPage.razor),
    their dialogs (Controls/ValueMaps) and the map editor's value map pickers. Drawn like the Samples page: a page that scrolls itself, a header that
    stays at the top, and cards and panels on the page background. Only theme tokens, so both themes follow.
*/

/* ================================================================== the page */
.rd-page {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin: 0 -1rem;
    background: var(--xm-page-bg);
    color: var(--xm-text);
}

.rd-top {
    position: sticky;
    top: 0;
    z-index: 3;
    background: color-mix(in srgb, var(--xm-page-bg) 92%, transparent);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--xm-border-soft);
}

/* The full width of the window, with the maps page's side padding, so the headers line up from page to page. */
.rd-top-inner,
.rd-body {
    padding-left: 16px;
    padding-right: 16px;
}

.rd-top-inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 16px;
    padding-bottom: 12px;
}

.rd-body {
    padding-top: 16px;
    padding-bottom: 48px;
}

.rd-titlebar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px 16px;
}

.rd-titles {
    flex: 1;
    min-width: 240px;
}

    .rd-titles h1 {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin: 0;
        font-size: 20px;
        font-weight: 600;
    }

    .rd-titles p {
        margin: 3px 0 0;
        color: var(--xm-text-muted);
        font-size: 13px;
        line-height: 1.5;
    }

.rd-crumb {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
    color: var(--xm-text-muted);
    font-size: 12.5px;
    text-decoration: none;
}

    .rd-crumb:hover {
        color: var(--xm-accent-text);
        text-decoration: none;
    }

    .rd-crumb .e-icons {
        font-size: 11px;
    }

.rd-head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* where this is, and who the person is here */
.rd-context {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    color: var(--xm-text-muted);
    font-size: 12.5px;
}

.rd-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    color: var(--xm-text-muted);
    font-size: 12.5px;
}

.rd-meta-sep {
    opacity: .5;
}

.rd-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border: 1px solid var(--xm-border-soft);
    border-radius: 999px;
    background: var(--xm-surface);
    color: var(--xm-text);
    font-size: 12px;
    white-space: nowrap;
}

    .rd-pill svg {
        width: 13px;
        height: 13px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .rd-pill.is-env {
        border-color: color-mix(in srgb, var(--xm-accent) 40%, transparent);
        background: color-mix(in srgb, var(--xm-accent) 10%, var(--xm-surface));
        color: var(--xm-accent-text);
    }

    .rd-pill.is-role {
        color: var(--xm-text-muted);
    }

.rd-toggle-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
}

/* ================================================================== buttons */
.rd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    box-sizing: border-box;
    border: 1px solid var(--xm-border-soft);
    border-radius: 8px;
    background: var(--xm-surface);
    color: var(--xm-text);
    font-size: 13px;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}

    .rd-btn:hover:not(:disabled) {
        background: var(--xm-surface-hover);
        border-color: var(--xm-border);
        color: var(--xm-text);
        text-decoration: none;
    }

    .rd-btn:focus-visible {
        outline: 2px solid var(--xm-accent);
        outline-offset: 1px;
    }

    .rd-btn:disabled {
        opacity: .55;
        cursor: default;
    }

    .rd-btn .e-icons {
        font-size: 13px;
    }

    .rd-btn.is-primary {
        border-color: var(--xm-accent);
        background: var(--xm-accent);
        color: #fff;
        font-weight: 500;
    }

        .rd-btn.is-primary:hover:not(:disabled) {
            border-color: var(--xm-accent-hover);
            background: var(--xm-accent-hover);
            color: #fff;
        }

    /* A second action beside a primary one: the same accent, tinted, so the two read as a pair and the primary leads. */
    .rd-btn.is-soft {
        border-color: color-mix(in srgb, var(--xm-accent) 55%, transparent);
        background: color-mix(in srgb, var(--xm-accent) 16%, var(--xm-surface));
        color: var(--xm-text);
        font-weight: 500;
    }

        .rd-btn.is-soft:hover:not(:disabled) {
            border-color: var(--xm-accent);
            background: color-mix(in srgb, var(--xm-accent) 26%, var(--xm-surface));
            color: var(--xm-text);
        }

        .rd-btn.is-soft .e-icons {
            color: var(--xm-accent);
        }

    .rd-btn.is-danger {
        color: var(--xm-danger);
    }

        .rd-btn.is-danger:hover:not(:disabled) {
            border-color: color-mix(in srgb, var(--xm-danger) 50%, transparent);
            background: color-mix(in srgb, var(--xm-danger) 8%, var(--xm-surface));
            color: var(--xm-danger);
        }

    .rd-btn.is-ghost {
        border-color: transparent;
        background: transparent;
        color: var(--xm-text-muted);
    }

        .rd-btn.is-ghost:hover:not(:disabled) {
            background: var(--xm-surface-hover);
            color: var(--xm-text);
        }

    .rd-btn.is-icon {
        width: 32px;
        padding: 0;
    }

    .rd-btn.is-small {
        height: 28px;
        padding: 0 10px;
        font-size: 12.5px;
    }

.rd-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--xm-accent-text);
    font-size: inherit;
    cursor: pointer;
}

    .rd-link:hover {
        text-decoration: underline;
    }

/* ================================================================== chips, tabs and search */
.rd-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

.rd-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.rd-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--xm-border-soft);
    border-radius: 999px;
    background: var(--xm-surface);
    color: var(--xm-text-muted);
    font-size: 13px;
    cursor: pointer;
}

    .rd-chip:hover {
        background: var(--xm-surface-hover);
        color: var(--xm-text);
    }

    .rd-chip.is-on {
        border-color: color-mix(in srgb, var(--xm-accent) 50%, transparent);
        background: color-mix(in srgb, var(--xm-accent) 12%, var(--xm-surface));
        color: var(--xm-accent-text);
        font-weight: 600;
    }

    .rd-chip.is-attention {
        border-color: color-mix(in srgb, var(--xm-warning-text) 45%, transparent);
        color: var(--xm-warning-text);
    }

    .rd-chip.is-small {
        height: 26px;
        padding: 0 10px;
        font-size: 12px;
    }

.rd-count {
    min-width: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--xm-surface-hover);
    color: var(--xm-text-muted);
    font-size: 11px;
    font-weight: 500;
    text-align: center;
}

.rd-count.is-warn {
    background: color-mix(in srgb, var(--xm-warning-text) 16%, transparent);
    color: var(--xm-warning-text);
    font-weight: 600;
}

.rd-segment {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--xm-border-soft);
    border-radius: 10px;
    background: var(--xm-surface);
}

    .rd-segment button {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 28px;
        padding: 0 12px;
        border: 0;
        border-radius: 7px;
        background: transparent;
        color: var(--xm-text-muted);
        font-size: 13px;
        cursor: pointer;
    }

        .rd-segment button:hover:not(:disabled) {
            color: var(--xm-text);
        }

        .rd-segment button.is-on {
            background: color-mix(in srgb, var(--xm-accent) 12%, var(--xm-surface));
            color: var(--xm-accent-text);
            font-weight: 600;
        }

        .rd-segment button:disabled {
            opacity: .5;
            cursor: default;
        }

    .rd-segment.is-small button {
        height: 24px;
        padding: 0 9px;
        font-size: 12px;
    }

.rd-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: -13px;
    overflow-x: auto;
}

.rd-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--xm-text-muted);
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
}

    .rd-tab:hover {
        color: var(--xm-text);
    }

    .rd-tab.is-on {
        border-bottom-color: var(--xm-accent);
        color: var(--xm-accent-text);
        font-weight: 600;
    }

.rd-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 260px;
    max-width: 100%;
    height: 32px;
    padding: 0 10px;
    box-sizing: border-box;
    border: 1px solid var(--xm-control-border);
    border-radius: 8px;
    background: var(--xm-surface);
    color: var(--xm-text-muted);
}

    .rd-search:focus-within {
        border-color: var(--xm-accent);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--xm-accent) 16%, transparent);
    }

    .rd-search input {
        flex: 1;
        min-width: 0;
        border: 0;
        outline: 0;
        background: transparent;
        color: var(--xm-text);
        font-size: 13px;
    }

/* ================================================================== badges and tags */
.rd-tag {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--xm-surface-hover);
    color: var(--xm-text-muted);
    font-size: 11.5px;
    white-space: nowrap;
}

    .rd-tag.is-domain {
        background: color-mix(in srgb, var(--xm-accent) 10%, transparent);
        color: var(--xm-accent-text);
        font-weight: 500;
    }

.rd-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 20px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

    .rd-badge.is-version {
        background: color-mix(in srgb, var(--xm-status-success) 13%, transparent);
        color: var(--xm-status-ok-text, var(--xm-status-success));
        font-family: var(--xm-doc-font);
    }

    .rd-badge.is-draft {
        background: color-mix(in srgb, var(--xm-warning-text) 14%, transparent);
        color: var(--xm-warning-text);
    }

    .rd-badge.is-muted {
        background: var(--xm-surface-hover);
        color: var(--xm-text-muted);
    }

    .rd-badge.is-danger {
        background: color-mix(in srgb, var(--xm-danger) 12%, transparent);
        color: var(--xm-danger);
    }

    .rd-badge.is-new {
        background: color-mix(in srgb, var(--xm-accent) 12%, transparent);
        color: var(--xm-accent-text);
    }

.rd-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

/* ================================================================== notes, empty and loading */
.rd-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    padding: 11px 13px;
    border: 1px solid var(--xm-border-soft);
    border-radius: 10px;
    background: var(--xm-surface);
    color: var(--xm-text-muted);
    font-size: 13px;
    line-height: 1.5;
}

    .rd-note svg {
        width: 16px;
        height: 16px;
        flex: none;
        margin-top: 1px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .rd-note.is-error {
        border-color: color-mix(in srgb, var(--xm-danger) 45%, transparent);
        color: var(--xm-danger);
    }

    .rd-note.is-warn {
        border-color: color-mix(in srgb, var(--xm-warning-text) 35%, transparent);
        background: var(--xm-warning-bg);
        color: var(--xm-warning-text);
    }

    .rd-note.is-info {
        border-color: color-mix(in srgb, var(--xm-accent) 30%, transparent);
        background: color-mix(in srgb, var(--xm-accent) 6%, var(--xm-surface));
    }

.rd-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 520px;
    margin: 40px auto;
    padding: 32px 28px;
    border: 1px dashed var(--xm-border);
    border-radius: 14px;
    background: var(--xm-surface);
    text-align: center;
}

.rd-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 6px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--xm-accent) 12%, transparent);
    color: var(--xm-accent-text);
}

    .rd-empty-icon svg {
        width: 24px;
        height: 24px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.rd-empty-title {
    font-size: 15px;
    font-weight: 600;
}

.rd-empty p {
    margin: 0 0 8px;
    color: var(--xm-text-muted);
    font-size: 13px;
    line-height: 1.55;
}

.rd-empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.rd-skel {
    display: block;
    height: 11px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--xm-surface-hover) 0%, var(--xm-border-soft) 50%, var(--xm-surface-hover) 100%);
    background-size: 200% 100%;
    animation: rd-shimmer 1.2s ease-in-out infinite;
}

    .rd-skel.is-title {
        height: 15px;
    }

@keyframes rd-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

/* ================================================================== the list: cards */
.rd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}

.rd-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 16px 14px;
    border: 1px solid var(--xm-border-soft);
    border-radius: 12px;
    background: var(--xm-surface);
    box-shadow: var(--xm-card-shadow);
    color: var(--xm-text);
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow .15s ease, border-color .15s ease;
}

    .rd-card:hover {
        border-color: var(--xm-border);
        box-shadow: 0 6px 18px var(--xm-shadow);
        color: var(--xm-text);
        text-decoration: none;
    }

    .rd-card:focus-visible {
        outline: 2px solid var(--xm-accent);
        outline-offset: 2px;
    }

    .rd-card.is-skeleton {
        gap: 10px;
        cursor: default;
    }

.rd-card-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 20px;
}

.rd-grow {
    flex: 1;
}

.rd-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.rd-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--xm-accent) 10%, transparent);
    color: var(--xm-accent-text);
}

    .rd-card-icon svg {
        width: 15px;
        height: 15px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.rd-card-desc {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--xm-text-muted);
    font-size: 13px;
    line-height: 1.5;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.rd-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.rd-col-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 7px;
    border: 1px solid var(--xm-border-soft);
    border-radius: 6px;
    color: var(--xm-text);
    font-family: var(--xm-doc-font);
    font-size: 11.5px;
}

    .rd-col-chip.is-key {
        border-color: color-mix(in srgb, var(--xm-accent) 40%, transparent);
        color: var(--xm-accent-text);
    }

    .rd-col-chip.is-missing {
        border-color: color-mix(in srgb, var(--xm-danger) 45%, transparent);
        color: var(--xm-danger);
    }

    .rd-col-chip.is-more {
        color: var(--xm-text-muted);
        font-family: inherit;
    }

.rd-key-icon {
    width: 11px;
    height: 11px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rd-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--xm-border-soft);
    color: var(--xm-text-muted);
    font-size: 12px;
}

/* ================================================================== one value map: the draft banner */
.rd-draftbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding: 9px 12px;
    border: 1px solid color-mix(in srgb, var(--xm-warning-text) 35%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--xm-warning-text) 7%, var(--xm-surface));
    font-size: 13px;
}

.rd-draftbar-text {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    min-width: 240px;
    color: var(--xm-text-muted);
}

    .rd-draftbar-text strong {
        color: var(--xm-text);
        font-weight: 600;
    }

.rd-unsaved {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--xm-warning-text);
    font-weight: 500;
}

/* ================================================================== the data grid */
.rd-gridbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-bottom: 10px;
}

.rd-view-pick {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--xm-control-border);
    border-radius: 8px;
    background: var(--xm-surface);
    color: var(--xm-text);
    font-size: 13px;
    cursor: pointer;
}

    .rd-view-pick:hover {
        border-color: var(--xm-accent);
    }

    .rd-view-pick .rd-view-label {
        color: var(--xm-text-muted);
    }

.rd-table-wrap {
    overflow: auto;
    max-height: calc(100vh - 330px);
    min-height: 240px;
    border: 1px solid var(--xm-border-soft);
    border-radius: 12px;
    background: var(--xm-surface);
}

.rd-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

    .rd-table thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        height: 36px;
        padding: 0 10px;
        border-bottom: 1px solid var(--xm-border-soft);
        background: var(--xm-surface-alt, var(--xm-surface));
        color: var(--xm-text-muted);
        font-size: 12px;
        font-weight: 600;
        text-align: left;
        white-space: nowrap;
    }

.rd-th {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.rd-th-type {
    padding: 0 5px;
    border-radius: 4px;
    background: var(--xm-surface-hover);
    color: var(--xm-text-muted);
    font-size: 10.5px;
    font-weight: 500;
}

.rd-th.is-key {
    color: var(--xm-accent-text);
}

.rd-table tbody td {
    height: 34px;
    padding: 0 10px;
    border-bottom: 1px solid var(--xm-border-soft);
    vertical-align: middle;
    white-space: nowrap;
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rd-table tbody tr:last-child td {
    border-bottom: 0;
}

.rd-table tbody tr:hover td {
    background: var(--xm-surface-hover);
}

.rd-table td.is-key {
    font-family: var(--xm-doc-font);
    font-size: 12.5px;
}

.rd-table td.rd-gutter,
.rd-table th.rd-gutter {
    width: 4px;
    min-width: 4px;
    max-width: 4px;
    padding: 0;
}

.rd-table td.rd-rownum,
.rd-table th.rd-rownum {
    width: 44px;
    padding-right: 4px;
    color: var(--xm-text-muted);
    font-size: 11px;
    text-align: right;
}

.rd-table td.rd-actions,
.rd-table th.rd-actions {
    width: 40px;
    padding: 0 6px;
    text-align: right;
}

.rd-table tr.is-added td.rd-gutter {
    background: var(--xm-status-success);
}

.rd-table tr.is-changed td.rd-gutter {
    background: var(--xm-warning-text);
}

.rd-table tr.is-removed td.rd-gutter {
    background: var(--xm-danger);
}

.rd-table tr.is-removed td:not(.rd-actions):not(.rd-gutter) {
    color: var(--xm-text-muted);
    text-decoration: line-through;
}

.rd-table td.is-changed {
    background: color-mix(in srgb, var(--xm-warning-text) 9%, transparent);
}

.rd-table td.is-invalid {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--xm-danger) 70%, transparent);
}

.rd-table tr.is-invalid td.rd-gutter {
    background: var(--xm-danger);
}

/* editing: each cell a plain input that looks like the cell until it is used */
.rd-cell {
    width: 100%;
    min-width: 80px;
    height: 26px;
    padding: 0 6px;
    margin: 0 -6px;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 5px;
    outline: 0;
    background: transparent;
    color: var(--xm-text);
    font: inherit;
}

    .rd-cell:hover {
        border-color: var(--xm-border-soft);
    }

    .rd-cell:focus {
        border-color: var(--xm-accent);
        background: var(--xm-surface);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--xm-accent) 14%, transparent);
    }

    .rd-cell.is-key {
        font-family: var(--xm-doc-font);
        font-size: 12.5px;
    }

.rd-row-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--xm-text-muted);
    opacity: 0;
    cursor: pointer;
}

.rd-table tr:hover .rd-row-btn,
.rd-row-btn:focus-visible {
    opacity: 1;
}

.rd-row-btn:hover {
    background: color-mix(in srgb, var(--xm-danger) 10%, transparent);
    color: var(--xm-danger);
}

.rd-row-btn.is-restore:hover {
    background: color-mix(in srgb, var(--xm-accent) 10%, transparent);
    color: var(--xm-accent-text);
}

.rd-row-btn .e-icons {
    font-size: 12px;
}

.rd-table-empty {
    padding: 36px 16px;
    color: var(--xm-text-muted);
    font-size: 13px;
    text-align: center;
}

.rd-grid-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 8px;
    color: var(--xm-text-muted);
    font-size: 12px;
}

.rd-issues {
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--xm-danger) 35%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--xm-danger) 5%, var(--xm-surface));
    font-size: 12.5px;
}

    .rd-issues summary {
        color: var(--xm-danger);
        font-weight: 600;
        cursor: pointer;
    }

    .rd-issues ul {
        max-height: 180px;
        margin: 6px 0 0;
        padding-left: 18px;
        overflow-y: auto;
        color: var(--xm-text);
    }

    .rd-issues li {
        margin: 2px 0;
    }

/* ================================================================== versions */
.rd-versions {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--xm-border-soft);
    border-radius: 12px;
    background: var(--xm-surface);
}

.rd-version {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 4px 14px;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid var(--xm-border-soft);
}

    .rd-version:last-child {
        border-bottom: 0;
    }

    .rd-version.is-active {
        box-shadow: inset 3px 0 0 var(--xm-status-success);
    }

.rd-version-num {
    font-family: var(--xm-doc-font);
    font-size: 15px;
    font-weight: 600;
}

.rd-version-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.rd-version-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.rd-version-note {
    color: var(--xm-text);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.rd-version-sub {
    color: var(--xm-text-muted);
    font-size: 12px;
}

/* ================================================================== activity (the audit trail) */
.rd-activity {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rd-event {
    position: relative;
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 12px;
    padding-bottom: 16px;
}

    .rd-event::before {
        content: "";
        position: absolute;
        top: 30px;
        bottom: 0;
        left: 13px;
        width: 2px;
        background: var(--xm-border-soft);
    }

    .rd-event:last-child::before {
        display: none;
    }

.rd-event-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--xm-border-soft);
    border-radius: 50%;
    background: var(--xm-surface);
    color: var(--xm-text-muted);
}

    .rd-event-mark svg {
        width: 14px;
        height: 14px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .rd-event-mark.is-publish {
        border-color: color-mix(in srgb, var(--xm-status-success) 45%, transparent);
        background: color-mix(in srgb, var(--xm-status-success) 10%, var(--xm-surface));
        color: var(--xm-status-success);
    }

    .rd-event-mark.is-danger {
        border-color: color-mix(in srgb, var(--xm-danger) 45%, transparent);
        color: var(--xm-danger);
    }

    .rd-event-mark.is-edit {
        color: var(--xm-warning-text);
    }

    .rd-event-mark.is-accent {
        color: var(--xm-accent-text);
    }

.rd-event-body {
    min-width: 0;
    padding-top: 4px;
    font-size: 13px;
}

.rd-event-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
}

.rd-event-who {
    font-weight: 600;
}

.rd-event-when {
    color: var(--xm-text-muted);
    font-size: 12px;
}

.rd-event-map {
    color: var(--xm-accent-text);
    text-decoration: none;
}

    .rd-event-map:hover {
        text-decoration: underline;
    }

.rd-event-note {
    margin-top: 4px;
    padding: 6px 10px;
    border-left: 3px solid var(--xm-border);
    border-radius: 0 6px 6px 0;
    background: var(--xm-surface-hover);
    color: var(--xm-text);
    font-size: 12.5px;
    overflow-wrap: anywhere;
}

.rd-event-details {
    margin: 4px 0 0;
    padding-left: 16px;
    color: var(--xm-text-muted);
    font-size: 12.5px;
}

.rd-event-more {
    margin-top: 4px;
    font-size: 12.5px;
}

/* ================================================================== a list of row changes */
.rd-diff {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--xm-border-soft);
    border-radius: 10px;
    background: var(--xm-surface);
    font-size: 12.5px;
}

.rd-diff-row {
    display: grid;
    grid-template-columns: 74px minmax(80px, 180px) 1fr;
    gap: 10px;
    align-items: baseline;
    padding: 7px 10px;
    border-bottom: 1px solid var(--xm-border-soft);
}

    .rd-diff-row:last-child {
        border-bottom: 0;
    }

.rd-diff-kind {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}

    .rd-diff-kind.is-added {
        color: var(--xm-status-success);
    }

    .rd-diff-kind.is-changed {
        color: var(--xm-warning-text);
    }

    .rd-diff-kind.is-removed {
        color: var(--xm-danger);
    }

.rd-diff-key {
    min-width: 0;
    overflow: hidden;
    font-family: var(--xm-doc-font);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rd-diff-cells {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 12px;
    min-width: 0;
    color: var(--xm-text-muted);
}

.rd-diff-cell {
    overflow-wrap: anywhere;
}

    .rd-diff-cell b {
        color: var(--xm-text-muted);
        font-weight: 500;
    }

.rd-diff-old {
    color: var(--xm-danger);
    text-decoration: line-through;
}

.rd-diff-new {
    color: var(--xm-status-success);
}

.rd-diff-foot {
    padding: 7px 10px;
    color: var(--xm-text-muted);
    font-size: 12px;
}

/* ================================================================== settings */
.rd-panels {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 860px;
}

.rd-panel {
    padding: 18px 18px 16px;
    border: 1px solid var(--xm-border-soft);
    border-radius: 12px;
    background: var(--xm-surface);
}

    .rd-panel.is-danger {
        border-color: color-mix(in srgb, var(--xm-danger) 30%, transparent);
    }

.rd-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin-bottom: 14px;
}

    .rd-panel-head h2 {
        margin: 0;
        font-size: 14px;
        font-weight: 600;
    }

    .rd-panel-head p {
        flex-basis: 100%;
        margin: 0;
        color: var(--xm-text-muted);
        font-size: 12.5px;
    }

.rd-panel-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

/* ================================================================== forms (pages and dialogs) */
.rd-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rd-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.rd-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

    .rd-field.is-wide {
        grid-column: 1 / -1;
    }

.rd-label {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: var(--xm-text-muted);
    font-size: 12px;
    font-weight: 600;
}

.rd-hint {
    color: var(--xm-text-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
}

    .rd-hint.is-error {
        color: var(--xm-danger);
    }

.rd-input,
.rd-textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--xm-control-border);
    border-radius: 8px;
    outline: 0;
    background: var(--xm-surface);
    color: var(--xm-text);
    font-size: 13px;
}

.rd-input {
    height: 34px;
    padding: 0 10px;
}

    .rd-input.is-mono {
        font-family: var(--xm-doc-font);
        font-size: 12.5px;
    }

.rd-textarea {
    min-height: 72px;
    padding: 8px 10px;
    line-height: 1.5;
    resize: vertical;
}

    .rd-input:focus,
    .rd-textarea:focus {
        border-color: var(--xm-accent);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--xm-accent) 16%, transparent);
    }

    .rd-input:disabled,
    .rd-textarea:disabled {
        background: var(--xm-surface-hover);
        color: var(--xm-text-muted);
    }

    .rd-input.is-invalid {
        border-color: var(--xm-danger);
    }

/* the columns of a value map */
.rd-coleditor {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rd-colrow {
    display: grid;
    grid-template-columns: 30px minmax(120px, 1fr) auto auto;
    gap: 8px;
    align-items: center;
}

.rd-keybtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--xm-border-soft);
    border-radius: 8px;
    background: var(--xm-surface);
    color: var(--xm-text-muted);
    cursor: pointer;
}

    .rd-keybtn:hover:not(:disabled) {
        border-color: var(--xm-accent);
        color: var(--xm-accent-text);
    }

    .rd-keybtn.is-on {
        border-color: color-mix(in srgb, var(--xm-accent) 50%, transparent);
        background: color-mix(in srgb, var(--xm-accent) 12%, var(--xm-surface));
        color: var(--xm-accent-text);
    }

    .rd-keybtn .rd-key-icon {
        width: 14px;
        height: 14px;
    }

.rd-colrow-actions {
    display: inline-flex;
    gap: 2px;
}

    .rd-colrow-actions button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: var(--xm-text-muted);
        cursor: pointer;
    }

        .rd-colrow-actions button:hover:not(:disabled) {
            background: var(--xm-surface-hover);
            color: var(--xm-text);
        }

        .rd-colrow-actions button.is-danger:hover:not(:disabled) {
            background: color-mix(in srgb, var(--xm-danger) 10%, transparent);
            color: var(--xm-danger);
        }

        .rd-colrow-actions button:disabled {
            opacity: .35;
            cursor: default;
        }

        .rd-colrow-actions button .e-icons {
            font-size: 12px;
        }

/* a file dropped or chosen */
.rd-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 22px 16px;
    border: 1.5px dashed var(--xm-border);
    border-radius: 12px;
    background: var(--xm-surface-hover);
    color: var(--xm-text-muted);
    font-size: 13px;
    text-align: center;
    cursor: pointer;
}

    .rd-drop:hover,
    .rd-drop.is-over {
        border-color: var(--xm-accent);
        background: color-mix(in srgb, var(--xm-accent) 6%, var(--xm-surface));
        color: var(--xm-text);
    }

    .rd-drop input[type=file] {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
    }

    .rd-drop svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .rd-drop strong {
        color: var(--xm-accent-text);
        font-weight: 600;
    }

.rd-file {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--xm-border-soft);
    border-radius: 10px;
    background: var(--xm-surface);
    font-size: 13px;
}

.rd-file-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-family: var(--xm-doc-font);
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rd-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rd-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 88px;
    padding: 8px 12px;
    border: 1px solid var(--xm-border-soft);
    border-radius: 10px;
    background: var(--xm-surface);
}

.rd-stat-num {
    font-size: 17px;
    font-weight: 600;
}

.rd-stat-label {
    color: var(--xm-text-muted);
    font-size: 11.5px;
}

.rd-stat.is-added .rd-stat-num {
    color: var(--xm-status-success);
}

.rd-stat.is-changed .rd-stat-num {
    color: var(--xm-warning-text);
}

.rd-stat.is-removed .rd-stat-num {
    color: var(--xm-danger);
}

.rd-mapping {
    display: grid;
    grid-template-columns: 1fr 20px 1fr;
    gap: 6px 10px;
    align-items: center;
    font-size: 12.5px;
}

.rd-mapping-arrow {
    color: var(--xm-text-muted);
    text-align: center;
}

.rd-mapping-col {
    font-family: var(--xm-doc-font);
}

    .rd-mapping-col.is-missing {
        color: var(--xm-text-muted);
        font-family: inherit;
        font-style: italic;
    }

/* the map editor: a value map lookup's value map and column (Controls/SrcComponents/ValueMapParamComponent) */
.rd-param-icon {
    width: 14px;
    height: 14px;
    flex: none;
    fill: none;
    stroke: var(--xm-accent-text);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rd-param-warn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: none;
    border-radius: 50%;
    background: color-mix(in srgb, var(--xm-warning-text) 16%, transparent);
    color: var(--xm-warning-text);
    font-size: 11px;
    font-weight: 700;
    cursor: help;
}

/* four eyes: a draft waiting for approval, or sent back */
.rd-draftbar.is-submitted {
    border-color: color-mix(in srgb, var(--xm-accent) 35%, transparent);
    background: color-mix(in srgb, var(--xm-accent) 6%, var(--xm-surface));
}

.rd-rejected {
    color: var(--xm-danger);
}

/* promotion: the environments to choose from */
.rd-targets {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rd-target {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    position: relative;
    padding: 11px 14px 11px 40px;
    border: 1px solid var(--xm-border-soft);
    border-radius: 10px;
    background: var(--xm-surface);
    color: var(--xm-text);
    text-align: left;
    cursor: pointer;
}

    .rd-target:hover:not(:disabled) {
        border-color: var(--xm-border);
    }

    /* a radio option: the dot on the left says which one is chosen, and the chosen card is tinted */
    .rd-target::before {
        content: "";
        position: absolute;
        left: 14px;
        top: 13px;
        width: 16px;
        height: 16px;
        box-sizing: border-box;
        border: 1.5px solid var(--xm-border);
        border-radius: 50%;
        background: var(--xm-surface);
        transition: border-color .12s, border-width .12s;
    }

    .rd-target.is-on {
        border-color: var(--xm-accent);
        background: color-mix(in srgb, var(--xm-accent) 10%, var(--xm-surface));
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--xm-accent) 14%, transparent);
    }

        .rd-target.is-on::before {
            border: 5px solid var(--xm-accent);
        }

        .rd-target.is-on .rd-target-name {
            color: var(--xm-accent-text);
        }

    .rd-target:disabled {
        opacity: .6;
        cursor: default;
    }

.rd-target-name {
    font-size: 13.5px;
    font-weight: 600;
}

.rd-target-state {
    color: var(--xm-text-muted);
    font-size: 12px;
}

    .rd-target-state.is-ok {
        color: var(--xm-status-success);
    }

    .rd-target-state.is-warn {
        color: var(--xm-warning-text);
    }

    .rd-target-state.is-new {
        color: var(--xm-accent-text);
    }

/* access: restricted, and people with a role */
.rd-access {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rd-grants {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rd-grant {
    display: grid;
    grid-template-columns: 28px minmax(120px, 1fr) auto auto;
    gap: 10px;
    align-items: center;
}

.rd-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--xm-accent) 14%, transparent);
    color: var(--xm-accent-text);
    font-size: 11px;
    font-weight: 600;
}

.rd-grant-name {
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* the map editor's lookup table: saving it as a value map */
.xle-promote {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--xm-border-soft);
}

.xle-promote-form {
    display: flex;
    gap: 8px;
    align-items: center;
}

    .xle-promote-form .xle-input {
        flex: 1;
    }

/* the dialogs */
.rd-dialog.e-dialog .e-dlg-content {
    padding-top: 6px;
}

.rd-dialog-head {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .rd-dialog-head svg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: var(--xm-accent-text);
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

@media (max-width: 700px) {
    .rd-form-grid {
        grid-template-columns: 1fr;
    }

    .rd-version {
        grid-template-columns: 48px 1fr;
    }

        .rd-version > :last-child {
            grid-column: 1 / -1;
        }

    .rd-diff-row {
        grid-template-columns: 64px 1fr;
    }

    .rd-diff-cells {
        grid-column: 1 / -1;
    }

    .rd-dialog.e-dialog {
        width: 94vw !important;
    }
}

/* ---- the list's filters on one row: source chips as wide as they need, the domains in a dropdown */
.rd-chips.is-fit {
    flex: none;
}

.rd-domain-menu .rd-domain-label {
    color: var(--xm-text-muted);
    font-weight: 500;
}

.rd-domain-menu .rd-chip.is-on .rd-domain-label {
    color: inherit;
    opacity: .75;
}

.rd-domain-menu .xc-pop {
    min-width: 220px;
}

.rd-domain-menu .xc-item .rd-count {
    margin-left: auto;
}

.rd-domain-menu .xc-item.is-on {
    color: var(--xm-accent-text);
    font-weight: 600;
}

/* the environment a promotion goes to, in the dialog's title when there is no choice to make */
.rd-dialog-to {
    color: var(--xm-text-muted);
    font-weight: 400;
}

    .rd-dialog-to strong {
        color: var(--xm-text);
        font-weight: 600;
    }