/*! UpdateDetails.css — rebuilt on the DNA Newsroom Design System v2.0
 *  https://newsroomv2.dna.online/design-system
 *  -----------------------------------------------------------
 *  Everything in this file is scoped under .updateDetailsOverlay
 *  so the widget is visually self-contained and will NOT inherit
 *  or conflict with host CMS tokens (--main-color, --dark-color, etc.).
 */

/* =========================================================
 *  Trigger button (public — used by host pages to open modal)
 * ========================================================= */
.updateDetailsButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    margin: 0 10px 10px 0;
    background-color: var(--main-color);
    color: #FFFFFF;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
    transition: background-color 200ms cubic-bezier(0.25, 0.1, 0.25, 1),
        transform 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.updateDetailsButton:hover {
    background-color: var(--main-color);
}

.updateDetailsButton:active {
    transform: scale(0.98);
}

/* =========================================================
 *  Overlay + scoped design tokens
 * ========================================================= */
.updateDetailsOverlay {
    /* Brand */
    --ud-brand: var(--main-color);
    --ud-brand-hover: var(--main-color);
    --ud-brand-active: #1A2920;
    --ud-brand-subtle: rgba(44, 65, 53, 0.08);

    /* Accent */
    --ud-mint: #83C6A3;
    --ud-mint-hover: #6BB892;
    --ud-mint-subtle: rgba(131, 198, 163, 0.15);
    --ud-mint-muted: #C9E5C3;

    /* Semantic */
    --ud-success: #34C759;
    --ud-warning: #FF9500;
    --ud-error: #FF3B30;
    --ud-signal-red: #FE0216;

    /* Labels */
    --ud-label-primary: #030000;
    --ud-label-secondary: #333333;
    --ud-label-tertiary: rgba(3, 0, 0, 0.45);
    --ud-label-quaternary: rgba(3, 0, 0, 0.25);

    /* Surfaces */
    --ud-surface-primary: #F0EFEB;
    --ud-surface-secondary: #FAFAF8;
    --ud-surface-tertiary: #FFFFFF;
    --ud-surface-apple-gray: #F5F5F3;

    /* Separators */
    --ud-separator: rgba(3, 0, 0, 0.08);
    --ud-separator-strong: rgba(3, 0, 0, 0.16);

    /* Radii */
    --ud-radius-xs: 4px;
    --ud-radius-sm: 8px;
    --ud-radius-md: 12px;
    --ud-radius-lg: 16px;
    --ud-radius-xl: 24px;
    --ud-radius-pill: 980px;

    /* Motion */
    --ud-ease-apple: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ud-ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1);
    --ud-dur-fast: 200ms;
    --ud-dur-normal: 320ms;

    /* Fonts */
    --ud-font-display: 'Playfair Display', Georgia, serif;
    --ud-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* -- Layer -- */
    position: fixed;
    inset: 0;
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(3, 0, 0, 0.48);
    -webkit-backdrop-filter: saturate(1.6) blur(12px);
    backdrop-filter: saturate(1.6) blur(12px);
    font-family: var(--ud-font-body);
    color: var(--ud-label-primary);
    animation: updateDetailsOverlayIn var(--ud-dur-normal) var(--ud-ease-apple);
}

@keyframes updateDetailsOverlayIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* =========================================================
 *  Modal shell
 * ========================================================= */
.updateDetailsModal {
    background: var(--ud-surface-tertiary);
    border-radius: var(--ud-radius-xl);
    width: 100%;
    max-width: 960px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.05),
        0 12px 32px rgba(3, 0, 0, 0.14),
        0 24px 80px rgba(3, 0, 0, 0.16);
    animation: updateDetailsModalIn 420ms var(--ud-ease-spring);
}

@keyframes updateDetailsModalIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (min-width: 1100px) {
    .updateDetailsModal {
        max-width: 1040px;
    }
}

/* =========================================================
 *  Header
 * ========================================================= */
.updateDetailsHeader {
    padding: 22px 28px 0 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    background: var(--ud-surface-tertiary);
    border-bottom: 1px solid var(--ud-separator);
}

.updateDetailsHeaderRow {
    display: block;
    width: 100%;
    position: relative;
}

.updateDetailsHeaderLeft {
    display: block;
    float: left;

    /* allow ellipsis */
    width: 90%;
}

.updateDetailsHeaderRight {
    display: block;

    /* belt + suspenders in case the host CSS breaks justify-content */
    float: right;
    width: 10%;
}

.updateDetailsTitleBlock {
    min-width: 0;
    /* allow truncation */
}

.updateDetailsTitle {
    font-family: var(--ud-font-display);
    font-size: 26px;
    line-height: 1.15;
    font-weight: 700;
    color: var(--ud-label-primary);
    letter-spacing: -0.015em;
    margin: 0;
}

.updateDetailsSubtitle {
    display: block;
    margin-top: 4px;
    font-family: var(--ud-font-body);
    font-size: 13px;
    font-weight: 400;
    color: var(--ud-label-tertiary);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 600px;
}

.updateDetailsClose {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--ud-separator);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    color: var(--ud-label-secondary);
    flex: 0 0 auto;
    transition: background-color var(--ud-dur-fast) var(--ud-ease-apple),
        color var(--ud-dur-fast) var(--ud-ease-apple),
        border-color var(--ud-dur-fast) var(--ud-ease-apple);
    display: block;
    float: right;
}

.updateDetailsClose:hover {
    background: var(--ud-brand-subtle);
    color: var(--ud-label-primary);
    border-color: var(--ud-separator-strong);
}

.updateDetailsClose:focus-visible {
    outline: 2px solid var(--ud-mint);
    outline-offset: 2px;
}

/* =========================================================
 *  Tabs (underline style)
 * ========================================================= */
.updateDetailsTabsHeader {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 -6px -1px -6px;
    /* align underline with bottom border */
}

.updateDetailsTab {
    position: relative;
    padding: 10px 14px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: var(--ud-font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ud-label-tertiary);
    border-radius: 0;
    transition: color var(--ud-dur-fast) var(--ud-ease-apple);
}

.updateDetailsTab::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 2px;
    background: transparent;
    border-radius: 2px 2px 0 0;
    transition: background-color var(--ud-dur-fast) var(--ud-ease-apple);
}

.updateDetailsTab:hover {
    color: var(--ud-label-primary);
}

.updateDetailsTabActive {
    color: var(--ud-brand);
    font-weight: 600;
}

.updateDetailsTabActive::after {
    background: var(--ud-brand);
}

.updateDetailsTab:focus-visible {
    outline: 2px solid var(--ud-mint);
    outline-offset: 2px;
    border-radius: var(--ud-radius-sm);
}

/* =========================================================
 *  Body + tab content
 * ========================================================= */
.updateDetailsBody {
    padding: 0 28px;
    flex: 1 1 auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.updateDetailsTabsContent {
    padding: 24px 0 8px 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
}

.updateDetailsTabContent {
    display: none;
    animation: updateDetailsTabFade var(--ud-dur-normal) var(--ud-ease-apple);
}

.updateDetailsTabContentActive {
    display: block;
}

@keyframes updateDetailsTabFade {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
 *  Sections
 * ========================================================= */
.updateDetailsSection {
    margin-bottom: 28px;
}

.updateDetailsSection:last-child {
    margin-bottom: 0;
}

.updateDetailsSectionTitle {
    font-family: var(--ud-font-body);
    font-size: 11px;
    font-weight: 600;
    color: var(--ud-label-tertiary);
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.updateDetailsSubTitle {
    font-family: var(--ud-font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--ud-label-primary);
    letter-spacing: -0.01em;
    margin: 22px 0 10px 0;
}

.updateDetailsSubTitle:first-child {
    margin-top: 0;
}

/* =========================================================
 *  Field groups — labels, inputs, read-only values
 * ========================================================= */
.updateDetailsFieldGroup {
    margin-bottom: 16px;
}

.updateDetailsFieldLabel {
    display: block;
    font-family: var(--ud-font-body);
    font-size: 12px;
    font-weight: 500;
    color: var(--ud-label-secondary);
    margin-bottom: 6px;
    letter-spacing: 0;
}

.updateDetailsFieldValue {
    font-size: 13px;
    color: var(--ud-label-primary);
    padding: 10px 14px;
    background: var(--ud-surface-apple-gray);
    border-radius: var(--ud-radius-sm);
    border: 1px solid transparent;
    letter-spacing: -0.01em;
    min-height: 40px;
    display: flex;
    align-items: center;
}

.updateDetailsInput,
.updateDetailsTextarea {
    width: 100%;
    padding: 10px 14px;
    font-family: var(--ud-font-body);
    font-size: 13px;
    color: var(--ud-label-primary);
    background: var(--ud-surface-tertiary);
    border: 1px solid var(--ud-separator-strong);
    border-radius: var(--ud-radius-sm);
    letter-spacing: -0.01em;
    transition: border-color var(--ud-dur-fast) var(--ud-ease-apple),
        box-shadow var(--ud-dur-fast) var(--ud-ease-apple);
}

.updateDetailsInput::placeholder,
.updateDetailsTextarea::placeholder {
    color: var(--ud-label-tertiary);
}

.updateDetailsInput:hover:not(:focus):not(:disabled),
.updateDetailsTextarea:hover:not(:focus):not(:disabled) {
    border-color: rgba(3, 0, 0, 0.28);
}

.updateDetailsInput:focus,
.updateDetailsTextarea:focus {
    outline: none;
    border-color: var(--ud-mint);
    box-shadow: 0 0 0 4px var(--ud-mint-subtle);
}

.updateDetailsInput:disabled,
.updateDetailsTextarea:disabled {
    background: var(--ud-surface-apple-gray);
    color: var(--ud-label-tertiary);
    cursor: not-allowed;
    border-color: var(--ud-separator);
}

.updateDetailsTextarea {
    resize: vertical;
    min-height: 96px;
    line-height: 1.5;
}

.updateDetailsInput[type="date"] {
    cursor: pointer;
}

/* =========================================================
 *  Grids
 * ========================================================= */
.updateDetailsFieldGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 4px;
}

.updateDetailsFieldGrid1 {
    grid-template-columns: 1fr;
}

.updateDetailsFieldGrid3 {
    grid-template-columns: repeat(3, 1fr);
}

.updateDetailsFieldGrid4 {
    grid-template-columns: repeat(4, 1fr);
}

/* =========================================================
 *  Tags
 * ========================================================= */
.updateDetailsTagsContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px;
    background: var(--ud-surface-apple-gray);
    border-radius: var(--ud-radius-sm);
    border: 1px solid transparent;
    min-height: 48px;
    align-items: center;
}

.updateDetailsTag {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: var(--ud-mint-subtle);
    color: var(--ud-brand);
    border-radius: var(--ud-radius-pill);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.005em;
}

.updateDetailsTagEditable {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 10px;
    background: var(--ud-surface-tertiary);
    border-radius: var(--ud-radius-sm);
    border: 1px solid var(--ud-separator-strong);
    min-height: 48px;
    align-items: center;
    transition: border-color var(--ud-dur-fast) var(--ud-ease-apple),
        box-shadow var(--ud-dur-fast) var(--ud-ease-apple);
}

.updateDetailsTagEditable:focus-within {
    border-color: var(--ud-mint);
    box-shadow: 0 0 0 4px var(--ud-mint-subtle);
}

.updateDetailsTagItem {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 4px 3px 12px;
    background: var(--ud-mint-muted);
    color: var(--ud-brand);
    border-radius: var(--ud-radius-pill);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
}

.updateDetailsTagRemove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: transparent;
    border: none;
    color: var(--ud-brand);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 0;
    margin-left: 4px;
    border-radius: 50%;
    transition: background-color var(--ud-dur-fast) var(--ud-ease-apple);
}

.updateDetailsTagRemove:hover {
    background: rgba(44, 65, 53, 0.18);
}

.updateDetailsTagInput {
    border: none;
    outline: none;
    flex: 1;
    min-width: 140px;
    padding: 4px 6px;
    font-family: var(--ud-font-body);
    font-size: 13px;
    color: var(--ud-label-primary);
    background: transparent;
}

.updateDetailsTagInput::placeholder {
    color: var(--ud-label-tertiary);
}

/* =========================================================
 *  File upload (folder background)
 * ========================================================= */
.updateDetailsFileUpload {
    border: 1.5px dashed var(--ud-separator-strong);
    border-radius: var(--ud-radius-md);
    padding: 26px 20px;
    text-align: center;
    cursor: pointer;
    background: var(--ud-surface-secondary);
    transition: border-color var(--ud-dur-fast) var(--ud-ease-apple),
        background var(--ud-dur-fast) var(--ud-ease-apple);
}

.updateDetailsFileUpload:hover {
    border-color: var(--ud-mint);
    background: var(--ud-mint-subtle);
}

.updateDetailsFileUploadText {
    font-size: 13px;
    font-weight: 500;
    color: var(--ud-label-secondary);
    margin-bottom: 4px;
}

.updateDetailsFileUploadHint {
    font-size: 12px;
    color: var(--ud-label-tertiary);
}

.updateDetailsFileUploadInput {
    display: none;
}

.updateDetailsCurrentFile {
    font-size: 12px;
    color: var(--ud-success);
    margin-top: 10px;
    font-weight: 500;
}

/* Current background preview row (shown above dropzone when a background already exists) */
.updateDetailsBackgroundPreview {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    background: var(--ud-surface-apple-gray);
    border-radius: var(--ud-radius-sm);
    margin-bottom: 10px;
}

.updateDetailsBackgroundThumb {
    width: 72px;
    height: 72px;
    border-radius: var(--ud-radius-sm);
    background-color: #ffffff;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid var(--ud-separator);
    flex: 0 0 auto;
    overflow: hidden;
}

.updateDetailsBackgroundMeta {
    min-width: 0;
    flex: 1 1 auto;
}

.updateDetailsBackgroundName {
    font-size: 13px;
    font-weight: 500;
    color: var(--ud-label-primary);
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.updateDetailsBackgroundSize {
    font-size: 12px;
    color: var(--ud-label-tertiary);
    margin-top: 2px;
}

/* =========================================================
 *  Footer + action buttons
 * ========================================================= */
.updateDetailsFooter {
    padding: 16px 28px;
    border-top: 1px solid var(--ud-separator);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: var(--ud-surface-secondary);
}

.updateDetailsButtonSecondary,
.updateDetailsButtonPrimary {
    padding: 10px 20px;
    border-radius: var(--ud-radius-sm);
    font-family: var(--ud-font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background-color var(--ud-dur-fast) var(--ud-ease-apple),
        color var(--ud-dur-fast) var(--ud-ease-apple),
        border-color var(--ud-dur-fast) var(--ud-ease-apple),
        transform var(--ud-dur-fast) var(--ud-ease-apple);
}

.updateDetailsButtonSecondary {
    background: transparent;
    color: var(--ud-label-secondary);
    border: 1px solid var(--ud-separator-strong);
}

.updateDetailsButtonSecondary:hover {
    background: var(--ud-brand-subtle);
    border-color: var(--ud-brand);
    color: var(--ud-brand);
}

.updateDetailsButtonPrimary {
    background: var(--ud-brand);
    color: #FFFFFF;
    border: 1px solid var(--ud-brand);
}

.updateDetailsButtonPrimary:hover {
    background: var(--ud-brand-hover);
    border-color: var(--ud-brand-hover);
}

.updateDetailsButtonPrimary:active {
    background: var(--ud-brand-active);
    transform: scale(0.98);
}

.updateDetailsButtonPrimary:disabled {
    background: var(--ud-label-quaternary);
    border-color: var(--ud-label-quaternary);
    cursor: not-allowed;
}

.updateDetailsButtonSecondary:focus-visible,
.updateDetailsButtonPrimary:focus-visible {
    outline: 2px solid var(--ud-mint);
    outline-offset: 2px;
}

/* =========================================================
 *  Dividers, info text, hints
 * ========================================================= */
.updateDetailsDivider {
    height: 1px;
    background: var(--ud-separator);
    margin: 24px 0;
    border: none;
}

.updateDetailsInfoText {
    font-size: 13px;
    color: var(--ud-label-tertiary);
    font-style: italic;
    line-height: 1.5;
}

.updateDetailsHintText {
    font-size: 12.5px;
    color: var(--ud-label-tertiary);
    margin: -4px 0 14px 0;
    line-height: 1.5;
}

/* =========================================================
 *  Scrollbar (webkit)
 * ========================================================= */
.updateDetailsTabsContent::-webkit-scrollbar {
    width: 6px;
}

.updateDetailsTabsContent::-webkit-scrollbar-track {
    background: transparent;
}

.updateDetailsTabsContent::-webkit-scrollbar-thumb {
    background: var(--ud-separator-strong);
    border-radius: 3px;
}

.updateDetailsTabsContent::-webkit-scrollbar-thumb:hover {
    background: var(--ud-label-tertiary);
}

/* =========================================================
 *  Versions list
 * ========================================================= */
.updateDetailsVersionsList {
    border: 1px solid var(--ud-separator);
    border-radius: var(--ud-radius-md);
    overflow: hidden;
    font-size: 13px;
    background: var(--ud-surface-tertiary);
}

.updateDetailsVersionHeader,
.updateDetailsVersionRow {
    display: grid;
    grid-template-columns: 44px 90px 1.3fr 1fr 140px;
    align-items: center;
    padding: 10px 16px;
    gap: 10px;
}

.updateDetailsVersionHeader {
    background: var(--ud-surface-apple-gray);
    font-weight: 600;
    color: var(--ud-label-tertiary);
    border-bottom: 1px solid var(--ud-separator);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 8px 16px;
}

.updateDetailsVersionRow {
    color: var(--ud-label-primary);
    border-bottom: 1px solid var(--ud-separator);
    transition: background-color var(--ud-dur-fast) var(--ud-ease-apple);
}

.updateDetailsVersionRow:last-child {
    border-bottom: none;
}

.updateDetailsVersionRow:hover {
    background: var(--ud-surface-apple-gray);
}

.updateDetailsVersionIconCell {
    display: flex;
    justify-content: center;
}

.updateDetailsVersionIcon {
    width: 26px;
    height: 26px;
    border-radius: var(--ud-radius-pill);
    background: var(--ud-mint-subtle);
    border: 1px solid var(--ud-mint);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.updateDetailsVersionActions {
    text-align: right;
}

.updateDetailsVersionActions .updateDetailsButtonSecondary {
    padding: 6px 12px;
    font-size: 12px;
}

/* =========================================================
 *  Permissions
 * ========================================================= */
.updateDetailsPermissionsRadios {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

.updateDetailsRadio {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--ud-separator);
    border-radius: var(--ud-radius-md);
    background: var(--ud-surface-tertiary);
    font-size: 13px;
    color: var(--ud-label-primary);
    cursor: pointer;
    transition: border-color var(--ud-dur-fast) var(--ud-ease-apple),
        background var(--ud-dur-fast) var(--ud-ease-apple);
}

.updateDetailsRadio:hover {
    border-color: var(--ud-separator-strong);
    background: var(--ud-surface-secondary);
}

/* Highlight the selected radio card */
.updateDetailsRadio:has(input[type="radio"]:checked) {
    border-color: var(--ud-brand);
    background: var(--ud-brand-subtle);
}

.updateDetailsRadio input[type="radio"] {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border: 1.5px solid var(--ud-label-tertiary);
    border-radius: 50%;
    appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
    cursor: pointer;
    flex: 0 0 auto;
    position: relative;
    transition: border-color var(--ud-dur-fast) var(--ud-ease-apple),
        background var(--ud-dur-fast) var(--ud-ease-apple);
}

.updateDetailsRadio input[type="radio"]:checked {
    border-color: var(--ud-brand);
    background-color: var(--ud-brand);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    background-size: 72%;
    background-repeat: no-repeat;
    background-position: center;
}

.updateDetailsRadio input[type="radio"]:focus-visible {
    outline: 2px solid var(--ud-mint);
    outline-offset: 2px;
}

.updateDetailsRadioText {
    line-height: 1.45;
    min-width: 0;
}

.updateDetailsRadioTitle {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: var(--ud-label-primary);
    margin-bottom: 2px;
    letter-spacing: -0.01em;
}

.updateDetailsRadioDescription {
    display: block;
    font-size: 12.5px;
    color: var(--ud-label-tertiary);
    line-height: 1.45;
}

/* Compat with JS flag — fades the "all" description when 'limited' is chosen */
.updateDetailsBlurred {
    opacity: 0.55;
}

.updateDetailsPermissionsAdvanced {
    padding: 18px;
    border-radius: var(--ud-radius-md);
    border: 1px solid var(--ud-separator);
    background: var(--ud-surface-secondary);
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: opacity var(--ud-dur-fast) var(--ud-ease-apple);
}

.updateDetailsPermissionsDisabled {
    opacity: 0.55;
    /* NOTE: intentionally no `pointer-events: none` — we want the user to be
     * able to click into the fields; JS auto-switches to "Limited" on any
     * interaction so the visual dim clears immediately.
     */
}

.updateDetailsPermissionRow label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--ud-label-secondary);
    margin-bottom: 6px;
}

.updateDetailsPermissionRow select,
.updateDetailsPermissionRow input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--ud-radius-sm);
    border: 1px solid var(--ud-separator-strong);
    font-size: 13px;
    font-family: var(--ud-font-body);
    background: var(--ud-surface-tertiary);
}

/* Selectize polish — matches DNA input treatment */
.updateDetailsPermissionRow .selectize-control {
    font-family: var(--ud-font-body);
}

.updateDetailsPermissionRow .selectize-input {
    min-height: 42px;
    padding: 7px 10px;
    font-size: 13px;
    border: 1px solid var(--ud-separator-strong);
    border-radius: var(--ud-radius-sm);
    background: var(--ud-surface-tertiary);
    box-shadow: none;
}

.updateDetailsPermissionRow .selectize-input.focus {
    border-color: var(--ud-mint);
    box-shadow: 0 0 0 4px var(--ud-mint-subtle);
}

.updateDetailsPermissionRow .selectize-input>.item {
    background: var(--ud-mint-muted);
    color: var(--ud-brand);
    border: none;
    border-radius: var(--ud-radius-pill);
    padding: 2px 10px;
    font-size: 12px;
    margin: 0 4px 0 0;
}

.updateDetailsPermissionRow .selectize-dropdown {
    border: 1px solid var(--ud-separator-strong);
    border-radius: var(--ud-radius-sm);
    margin-top: 4px;
    box-shadow: 0 8px 24px rgba(3, 0, 0, 0.08);
    font-size: 13px;
}

.updateDetailsPermissionRow .selectize-dropdown .active {
    background: var(--ud-mint-subtle);
    color: var(--ud-brand);
}

/* Native <select multiple> fallback — used when selectize.js isn't on the page.
 * Keeps the field functional (Ctrl/Cmd+click to multi-select) and on-brand. */
.updateDetailsPermissionRow select[multiple] {
    min-height: 132px;
    padding: 6px;
    font-family: var(--ud-font-body);
    font-size: 13px;
    color: var(--ud-label-primary);
    background: var(--ud-surface-tertiary);
    border: 1px solid var(--ud-separator-strong);
    border-radius: var(--ud-radius-sm);
    cursor: pointer;
}

.updateDetailsPermissionRow select[multiple]:focus {
    outline: none;
    border-color: var(--ud-mint);
    box-shadow: 0 0 0 4px var(--ud-mint-subtle);
}

.updateDetailsPermissionRow select[multiple] option {
    padding: 6px 10px;
    border-radius: var(--ud-radius-xs);
    line-height: 1.4;
    margin-bottom: 2px;
}

.updateDetailsPermissionRow select[multiple] option:checked {
    background: var(--ud-mint-muted) linear-gradient(0deg, var(--ud-mint-muted), var(--ud-mint-muted));
    color: var(--ud-brand);
    font-weight: 500;
}

/* Permission row header — places the field label on the left and an optional
 * inline utility (e.g. the Administrators search box) on the right. */
.updateDetailsPermissionRowHeader {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

.updateDetailsPermissionRowHeader label {
    margin-bottom: 0;
    flex: 0 0 auto;
    float: left;
}

/* Inline search input — slots into a permission-row header. Styled to match
 * the existing `.updateDetailsInput` aesthetic but compact enough to sit
 * beside a field label without dominating the row. */
.updateDetailsPermissionSearch {
    flex: 0 1 260px;
    max-width: 100%;
    padding: 6px 12px;
    font-family: var(--ud-font-body);
    font-size: 12.5px;
    color: var(--ud-label-primary);
    background: var(--ud-surface-tertiary);
    border: 1px solid var(--ud-separator-strong);
    border-radius: var(--ud-radius-pill);
    transition: border-color var(--ud-dur-fast) var(--ud-ease-apple),
        box-shadow var(--ud-dur-fast) var(--ud-ease-apple);
    float: left;
}

.updateDetailsPermissionSearch::placeholder {
    color: var(--ud-label-tertiary);
}

.updateDetailsPermissionSearch:hover:not(:focus) {
    border-color: rgba(3, 0, 0, 0.28);
}

.updateDetailsPermissionSearch:focus {
    outline: none;
    border-color: var(--ud-mint);
    box-shadow: 0 0 0 4px var(--ud-mint-subtle);
}

/* When the Administrators search input hides non-matching rows. */
.updateDetailsChecklistHidden {
    display: none !important;
}

/* Click-to-toggle checkbox list — used in place of <select multiple> on pages
 * that don't have selectize loaded. Every row toggles on a single click; no
 * Ctrl/Cmd gymnastics required. */
.updateDetailsChecklist {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 220px;
    overflow-y: auto;
    padding: 6px;
    background: var(--ud-surface-tertiary);
    border: 1px solid var(--ud-separator-strong);
    border-radius: var(--ud-radius-sm);
    transition: border-color var(--ud-dur-fast) var(--ud-ease-apple),
        box-shadow var(--ud-dur-fast) var(--ud-ease-apple);
}

.updateDetailsChecklist:focus-within {
    outline: none;
    border-color: var(--ud-mint);
    box-shadow: 0 0 0 4px var(--ud-mint-subtle);
}

.updateDetailsChecklistItem {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--ud-radius-xs);
    cursor: pointer;
    font-size: 13px;
    color: var(--ud-label-primary);
    user-select: none;
    transition: background-color var(--ud-dur-fast) var(--ud-ease-apple);
}

.updateDetailsChecklistItem:hover {
    background: var(--ud-surface-apple-gray);
}

.updateDetailsChecklistItem input[type="checkbox"] {
    /* Fully reset host-CMS styling. Without this, the widget inherits any
     * global `input[type="checkbox"]` rules (appearance, pointer-events,
     * ::before overlays, etc.) from the page it's embedded in — which is why
     * the checkboxes looked like radio circles and clicks appeared dead.
     * Pattern matches `.updateDetailsRadio input[type="radio"]` above. */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border: 1.5px solid var(--ud-label-tertiary);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
    /* belt + suspenders against host `pointer-events:none` */
    transition: border-color var(--ud-dur-fast) var(--ud-ease-apple),
        background var(--ud-dur-fast) var(--ud-ease-apple);
    float: left;
    margin-top: 3px;
}

.updateDetailsChecklistItem input[type="checkbox"]:checked {
    border-color: var(--ud-brand);
    background-color: var(--ud-brand);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    background-size: 72%;
    background-repeat: no-repeat;
    background-position: center;
}

.updateDetailsChecklistItem input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--ud-mint);
    outline-offset: 2px;
}

.updateDetailsChecklistLabel {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -0.01em;
    float: left;
    margin-left: 9px;
}

/* "All" row — visually distinct as a sentinel option above the rest. */
.updateDetailsChecklistItem.is-all {
    font-weight: 600;
    color: var(--ud-brand);
    border-bottom: 1px solid var(--ud-separator);
    border-radius: var(--ud-radius-xs) var(--ud-radius-xs) 0 0;
    padding-bottom: 10px;
    margin-bottom: 4px;
}

.updateDetailsChecklistItem.is-all .updateDetailsChecklistLabel::after {
    content: ' — shortcut for every admin';
    font-weight: 400;
    color: var(--ud-label-tertiary);
    font-size: 12px;
}

/* =========================================================
 *  Responsive
 * ========================================================= */
@media (max-width: 860px) {
    .updateDetailsOverlay {
        padding: 12px;
    }

    .updateDetailsModal {
        border-radius: var(--ud-radius-lg);
    }

    .updateDetailsHeader {
        padding: 18px 20px 0 20px;
    }

    .updateDetailsBody {
        padding: 0 20px;
    }

    .updateDetailsFooter {
        padding: 14px 20px;
    }

    .updateDetailsFieldGrid,
    .updateDetailsFieldGrid3,
    .updateDetailsFieldGrid4 {
        grid-template-columns: 1fr;
    }

    .updateDetailsTitle {
        font-size: 22px;
    }

    .updateDetailsVersionHeader,
    .updateDetailsVersionRow {
        grid-template-columns: 36px 70px 1fr 120px;
    }

    .updateDetailsVersionHeader> :nth-child(4),
    .updateDetailsVersionRow> :nth-child(4) {
        display: none;
    }
}

/* =========================================================
 *  Accessibility — reduced motion + high contrast
 * ========================================================= */
@media (prefers-reduced-motion: reduce) {

    .updateDetailsOverlay,
    .updateDetailsModal,
    .updateDetailsTabContent {
        animation: none;
    }

    .updateDetailsOverlay * {
        transition-duration: 0.01ms !important;
    }
}

@media (prefers-contrast: more) {
    .updateDetailsOverlay {
        --ud-separator: rgba(3, 0, 0, 0.24);
        --ud-separator-strong: rgba(3, 0, 0, 0.42);
        --ud-label-tertiary: rgba(3, 0, 0, 0.65);
        --ud-label-quaternary: rgba(3, 0, 0, 0.45);
    }
}