/* =========================================================
   V131 CANONICAL MODAL OWNER

   Owns entity/system/dice modal shell layout. Replaces modal rescue and
   stabilization modal rules. Modal structure is source-owned by entityModal.js,
   entityReadView.js, and entityImages.js; this file only styles that structure.
========================================================= */

dialog {
    margin: auto;
    padding: 0;
    border: 0;
    color: var(--text);
    background: transparent;
}

dialog::backdrop { background: rgba(0,0,0,.72); }
dialog[open] { animation: dialogIn 180ms ease both; }
@keyframes dialogIn { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }

#entity-dialog {
    width: min(94vw, 1280px);
    height: min(90vh, 900px);
    max-height: min(90vh, 900px);
}

#system-dialog,
#dice-dialog {
    width: min(1120px, calc(100vw - 32px));
    max-height: min(820px, calc(100vh - 32px));
}

.entity-modal,
.system-modal,
.dice-modal,
.export-shell {
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-panel);
    background: linear-gradient(180deg, rgba(255,255,255,.10), transparent 32%), var(--surface-0);
    box-shadow: var(--shadow);
    color: var(--text);
}

.entity-modal { --modal-accent: var(--entity-accent, var(--entity-default)); }
.entity-modal-map { --modal-accent: var(--entity-map); }
.entity-modal-site { --modal-accent: var(--entity-site); }
.entity-modal-place { --modal-accent: var(--entity-place); }
.entity-modal-person { --modal-accent: var(--entity-person); }
.entity-modal-quest { --modal-accent: var(--entity-quest); }
.entity-modal-encounter { --modal-accent: var(--entity-encounter); }
.entity-modal-monster { --modal-accent: var(--entity-monster); }
.entity-modal-equipment,
.entity-modal-item,
.entity-modal-loot { --modal-accent: var(--entity-item); }

.entity-modal-header,
.system-header,
.dice-header {
    flex: 0 0 auto;
    min-width: 0;
    min-height: 72px;
    max-height: 112px;
    padding: 12px 16px;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    border-bottom: 1px solid var(--border);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--modal-accent, var(--gold)) 16%, transparent), transparent 68%),
        rgba(255,255,255,.025);
    overflow: hidden;
    box-sizing: border-box;
}

.system-header,
.dice-header { grid-template-columns: minmax(0, 1fr) auto; }

.entity-header-thumbnail {
    width: 54px;
    height: 54px;
    min-width: 54px;
    min-height: 54px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--modal-accent, var(--gold)) 42%, rgba(255,255,255,.14));
    background: color-mix(in srgb, var(--modal-accent, var(--gold)) 14%, rgba(255,255,255,.055));
}

.entity-header-thumbnail:empty::before { content: "\2022"; color: var(--modal-accent, var(--gold)); font-weight: 950; }
.entity-header-thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block; }

.entity-title-block,
.system-header > div:first-child,
.dice-header > div:first-child {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 4px;
    overflow: hidden;
}

.entity-modal-header h1,
.entity-modal-header h2,
.system-header h2,
.dice-header h2 {
    margin: 0;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-family: var(--font-title);
    font-size: clamp(1.35rem, 1.8vw, 2.1rem);
    line-height: 1.08;
}

.system-header h2,
.dice-header h2 { color: var(--gold); }

.modal-subtitle,
.entity-subtitle {
    margin: 0;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: color-mix(in srgb, var(--modal-accent, var(--gold)) 32%, var(--text-muted));
    font-size: .88rem;
    line-height: 1.25;
}

.modal-actions,
.form-actions,
.card-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
}

.entity-modal-header .modal-actions {
    flex-wrap: nowrap;
    min-width: max-content;
    max-width: 260px;
    overflow: hidden;
}

.entity-modal-body,
.modal-content {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(260px, 34%) minmax(0, 1fr);
    gap: 18px;
    padding: 18px;
    overflow: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    box-sizing: border-box;
}

.entity-media,
.modal-media {
    min-width: 0;
    max-width: 100%;
    align-self: start;
    position: sticky;
    top: 0;
    display: grid;
    gap: 12px;
    align-content: start;
}

.modal-image-frame,
.entity-image-frame,
.image-preview-frame {
    width: 100%;
    min-height: 220px;
    max-height: min(58vh, 620px);
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: radial-gradient(circle at center, rgba(255,255,255,.07), transparent 45%), rgba(0,0,0,.24);
}

.modal-image-frame img,
.entity-image-frame img,
.image-preview-frame img,
.entity-media > img,
.modal-media > img {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: min(58vh, 620px);
    object-fit: contain;
    object-position: center top;
    display: block;
}

.carousel-controls,
.image-carousel-controls,
.entity-image-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.carousel-controls span,
.image-carousel-controls span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: .82rem;
}

.entity-details,
.modal-details {
    min-width: 0;
    max-width: 100%;
    display: grid;
    align-content: start;
    gap: 14px;
    overflow: visible;
    padding-right: 4px;
}

.tracking-row,
.status-chip-row,
.entity-chip-row,
.monster-header-chips,
.monster-chip-list,
.faction-chip-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
}

.section-block,
.editor-section,
.edit-form fieldset {
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(255,255,255,.045);
    box-sizing: border-box;
}

.section-block h3,
.editor-section legend,
.edit-form legend,
details.section-block > summary {
    margin: 0 0 8px;
    padding: 0;
    color: var(--gold);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .10em;
    font-weight: 900;
}

.section-block p,
.section-block li,
.entity-description {
    color: var(--text-soft);
    font-size: .92rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.link-card,
.entity-link {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 0;
    justify-content: flex-start;
    text-align: left;
    border: 1px solid var(--border);
    border-left: 4px solid color-mix(in srgb, var(--modal-accent, var(--gold)) 62%, transparent);
    border-radius: 14px;
    background: rgba(255,255,255,.045);
    color: var(--text);
}

.link-card:hover,
.entity-link:hover {
    transform: translateX(3px);
    border-color: color-mix(in srgb, var(--modal-accent, var(--gold)) 42%, var(--border));
}

.status-chip,
.entity-chip,
.relationship-chip,
.common-status-chip,
.tracking-chip,
.tracking-button,
.faction-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: var(--radius-pill);
    border: 1px solid color-mix(in srgb, var(--modal-accent, var(--gold)) 40%, transparent);
    background: color-mix(in srgb, var(--modal-accent, var(--gold)) 10%, rgba(0,0,0,.22));
    color: color-mix(in srgb, var(--modal-accent, var(--gold)) 42%, var(--text));
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .045em;
    text-transform: uppercase;
    box-shadow: none;
    white-space: nowrap;
}

.entity-mode-badge,
.view-mode-chip,
.modal-mode-badge,
[data-mode-chip],
.presentation-hidden-mode-chip,
.common-hidden-mode-chip { display: none !important; }

.entity-edit-form,
.edit-form {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 18px;
}

.editor-field,
.edit-form label {
    display: grid;
    gap: 6px;
    margin-bottom: 12px;
    color: var(--text-muted);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 800;
}

.editor-field input,
.editor-field textarea,
.editor-field select,
.edit-form input,
.edit-form textarea,
.edit-form select {
    width: 100%;
    min-height: 34px;
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 10px;
    outline: none;
    color: var(--text);
    background: rgba(0,0,0,.28);
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
    box-sizing: border-box;
}

.editor-field textarea,
.edit-form textarea { min-height: 120px; resize: vertical; line-height: 1.45; }

@media (max-width: 980px) {
    #entity-dialog { width: min(96vw, 860px); height: min(92vh, 900px); }
    .entity-modal-body,
    .modal-content { grid-template-columns: 1fr; }
    .entity-media,
    .modal-media { position: static; }
}

@media (max-width: 620px) {
    .entity-modal-header { grid-template-columns: 44px minmax(0, 1fr) auto; min-height: 64px; padding: 10px 12px; }
    .entity-header-thumbnail { width: 42px; height: 42px; min-width: 42px; min-height: 42px; border-radius: 12px; }
    .entity-modal-header h1,
    .entity-modal-header h2 { font-size: 1.25rem; }
    .entity-modal-body,
    .modal-content { padding: 12px; }
}

/* =========================================================
   PATCH 016 - Modal depth stack visibility
========================================================= */
:root {
    --layer-stack-width: 236px;
}

.layer-stack-shell {
    position: fixed;
    right: 18px;
    top: 96px;
    z-index: 2147483000;
    width: var(--layer-stack-width);
    max-height: min(66vh, 560px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--gold, #d7b56d) 38%, rgba(255,255,255,.14));
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(25,22,18,.96), rgba(15,14,12,.94));
    box-shadow: 0 18px 48px rgba(0,0,0,.42);
    color: var(--text, #f3ede2);
    pointer-events: auto;
}

.layer-stack-shell.is-empty {
    opacity: .72;
}

.layer-stack-header,
.layer-stack-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.layer-stack-header h2 {
    margin: 0;
    font-size: .88rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--gold, #d7b56d) 70%, var(--text, #f3ede2));
}

.layer-stack-actions button {
    min-height: 28px;
    padding: 4px 8px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    color: inherit;
    font: inherit;
    font-size: .75rem;
    cursor: pointer;
}

.layer-stack-actions button:hover,
.layer-stack-card:hover {
    border-color: color-mix(in srgb, var(--gold, #d7b56d) 56%, rgba(255,255,255,.18));
    background: color-mix(in srgb, var(--gold, #d7b56d) 12%, rgba(255,255,255,.08));
}

.layer-stack-body {
    display: grid;
    gap: 8px;
    overflow: auto;
    padding-right: 2px;
}

.layer-stack-empty {
    margin: 0;
    color: var(--text-muted, #a8a096);
    font-size: .8rem;
    line-height: 1.35;
}

.layer-stack-card {
    padding: 9px 10px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 14px;
    background: rgba(255,255,255,.055);
    cursor: pointer;
    transition: border-color .14s ease, background .14s ease, transform .14s ease;
}

.layer-stack-card:hover {
    transform: translateX(-2px);
}

.layer-stack-kicker {
    margin-bottom: 4px;
    color: var(--text-muted, #a8a096);
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.layer-stack-card h3 {
    margin: 0 0 3px;
    font-size: .9rem;
    line-height: 1.18;
}

.layer-stack-card p,
.layer-stack-card footer {
    margin: 0;
    color: var(--text-muted, #a8a096);
    font-size: .74rem;
    line-height: 1.25;
}

@media (max-width: 980px) {
    .layer-stack-shell {
        left: 12px;
        right: 12px;
        top: auto;
        bottom: 12px;
        width: auto;
        max-height: 34vh;
    }
}

/* =========================================================
   V132.1 MODAL UNIFICATION CANONICAL FOLD-IN
   Former modal-unification-reset.css rules now owned by modals.css.
========================================================= */
#entity-dialog .entity-modal-header .modal-actions > button:not(.modal-close-button),
#entity-dialog .entity-modal-header .modal-edit-button,
#entity-dialog .entity-modal-header .modal-editor-toggle-button { display: none !important; }
#entity-dialog .entity-modal-header .modal-actions { max-width: 48px !important; width: 48px !important; justify-content: flex-end !important; overflow: visible !important; }
#entity-dialog .modal-close-button { width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; padding: 0 !important; border-radius: 12px !important; }
#entity-dialog .entity-modal, #entity-dialog .entity-edit-shell { min-height: 0 !important; }
#entity-dialog .entity-edit-shell { flex: 1 1 auto !important; overflow: auto !important; }
#entity-dialog .entity-edit-form, #entity-dialog .edit-form { min-height: 0 !important; overflow: auto !important; scrollbar-gutter: stable !important; }
#entity-dialog .entity-link, #entity-dialog .link-card, #entity-dialog .modal-linked-row { --row-accent: var(--entity-accent, var(--entity-default)) !important; display: block !important; width: 100% !important; color: var(--text) !important; border-left-color: color-mix(in srgb, var(--row-accent) 72%, transparent) !important; border-color: color-mix(in srgb, var(--row-accent) 34%, var(--border)) !important; background: color-mix(in srgb, var(--row-accent) 5%, rgba(255,255,255,.045)) !important; }
#entity-dialog .entity-link-site, #entity-dialog .presentation-site, #entity-dialog .modal-linked-row-site { --entity-accent: var(--entity-site) !important; }
#entity-dialog .entity-link-place, #entity-dialog .presentation-place, #entity-dialog .modal-linked-row-place { --entity-accent: var(--entity-place) !important; }
#entity-dialog .entity-link-person, #entity-dialog .presentation-person, #entity-dialog .modal-linked-row-person { --entity-accent: var(--entity-person) !important; }
#entity-dialog .entity-link-quest, #entity-dialog .presentation-quest, #entity-dialog .modal-linked-row-quest { --entity-accent: var(--entity-quest) !important; }
#entity-dialog .entity-link-encounter, #entity-dialog .presentation-encounter, #entity-dialog .modal-linked-row-encounter { --entity-accent: var(--entity-encounter) !important; }
#entity-dialog .entity-link-monster, #entity-dialog .presentation-monster, #entity-dialog .modal-linked-row-monster { --entity-accent: var(--entity-monster) !important; }
#entity-dialog .entity-link-map, #entity-dialog .presentation-map, #entity-dialog .modal-linked-row-map { --entity-accent: var(--entity-map) !important; }
#entity-dialog .entity-link .list-row, #entity-dialog .link-card .list-row, #entity-dialog .modal-linked-row .list-row { display: grid !important; grid-template-columns: 36px 42px minmax(0, 1fr) 32px !important; align-items: center !important; gap: 10px !important; width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; }
#entity-dialog .entity-link .list-number, #entity-dialog .link-card .list-number, #entity-dialog .modal-linked-row .list-number { justify-self: center !important; align-self: center !important; width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; display: inline-grid !important; place-items: center !important; background: var(--row-accent) !important; color: var(--surface-0) !important; }
#entity-dialog .entity-link .list-type-icon, #entity-dialog .link-card .list-type-icon, #entity-dialog .modal-linked-row .list-type-icon { justify-self: center !important; align-self: center !important; width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; display: inline-grid !important; place-items: center !important; line-height: 1 !important; font-size: 1rem !important; color: var(--row-accent) !important; border-color: color-mix(in srgb, var(--row-accent) 54%, transparent) !important; }
#entity-dialog .entity-link .list-type-icon svg, #entity-dialog .link-card .list-type-icon svg, #entity-dialog .modal-linked-row .list-type-icon svg { width: 17px !important; height: 17px !important; display: block !important; margin: auto !important; }
#entity-dialog .entity-link .list-type-thumbnail, #entity-dialog .link-card .list-type-thumbnail, #entity-dialog .modal-linked-row .list-type-thumbnail { width: 34px !important; height: 34px !important; border-radius: 999px !important; overflow: hidden !important; }
#entity-dialog .entity-link .list-type-thumbnail img, #entity-dialog .link-card .list-type-thumbnail img, #entity-dialog .modal-linked-row .list-type-thumbnail img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
#entity-dialog .entity-link .list-status-dot, #entity-dialog .link-card .list-status-dot, #entity-dialog .modal-linked-row .list-status-dot, #entity-dialog .entity-link .status-dot, #entity-dialog .link-card .status-dot, #entity-dialog .modal-linked-row .status-dot { justify-self: end !important; align-self: center !important; width: 24px !important; min-width: 24px !important; display: inline-grid !important; place-items: center end !important; text-align: right !important; color: var(--row-accent) !important; margin-left: 0 !important; }
#entity-dialog .entity-link .list-text, #entity-dialog .link-card .list-text, #entity-dialog .modal-linked-row .list-text { min-width: 0 !important; overflow: hidden !important; }
#entity-dialog .entity-link .list-label, #entity-dialog .link-card .list-label, #entity-dialog .modal-linked-row .list-label { color: var(--text) !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
#entity-dialog .entity-link .list-subtitle, #entity-dialog .link-card .list-subtitle, #entity-dialog .modal-linked-row .list-subtitle { color: var(--text-muted) !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }

/* Patch 033E - Relationship Choice View */
#entity-dialog .relationship-attach-direction {
    margin: 0.35rem 0 0.65rem;
    color: color-mix(in srgb, var(--modal-accent, var(--gold)) 34%, var(--text-muted));
    font-weight: 800;
}
#entity-dialog .relationship-attach-search-field {
    display: grid;
    gap: 6px;
    margin-bottom: 12px;
}
#entity-dialog .relationship-attach-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
#entity-dialog .relationship-choice-field {
    min-width: 0;
    margin: 4px 0 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--modal-accent, var(--gold)) 4%, rgba(255,255,255,.035));
}
#entity-dialog .relationship-choice-field > legend {
    color: var(--text-muted);
}
#entity-dialog .relationship-choice-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
#entity-dialog .relationship-choice-button {
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid color-mix(in srgb, var(--modal-accent, var(--gold)) 36%, var(--border));
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--modal-accent, var(--gold)) 8%, rgba(255,255,255,.045));
    color: var(--text);
    cursor: pointer;
}
#entity-dialog .relationship-choice-button:hover,
#entity-dialog .relationship-choice-button:focus-visible {
    border-color: color-mix(in srgb, var(--modal-accent, var(--gold)) 64%, var(--border));
    background: color-mix(in srgb, var(--modal-accent, var(--gold)) 14%, rgba(255,255,255,.06));
}
#entity-dialog .relationship-choice-button:focus-visible {
    outline: 2px solid var(--modal-accent, var(--gold));
    outline-offset: 2px;
}
#entity-dialog .relationship-choice-button.is-selected {
    border-color: var(--modal-accent, var(--gold));
    background: color-mix(in srgb, var(--modal-accent, var(--gold)) 24%, rgba(255,255,255,.07));
    color: var(--text);
}
#entity-dialog .relationship-attach-status {
    min-height: 1.25rem;
    margin: 0.55rem 0 0;
    color: var(--text-muted);
}
#entity-dialog .relationship-attach-status[data-state="error"] {
    color: var(--danger, #ef767a);
}
#entity-dialog .relationship-attach-actions button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}
@media (max-width: 620px) {
    #entity-dialog .relationship-attach-grid {
        grid-template-columns: 1fr;
    }
}

/* Patch 033J-A - Relationship Inspector */
#entity-dialog .relationship-inspector-section {
    display: grid;
    gap: 10px;
}
#entity-dialog .relationship-inspector-row {
    min-width: 0;
    display: grid;
    gap: 7px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--modal-accent, var(--gold)) 25%, var(--border));
    border-radius: 14px;
    background: color-mix(in srgb, var(--modal-accent, var(--gold)) 4%, rgba(255,255,255,.035));
}
#entity-dialog .relationship-inspector-header {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
#entity-dialog .relationship-inspector-meaning {
    color: var(--text);
    overflow-wrap: anywhere;
}
#entity-dialog .relationship-inspector-direction {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* PATCH 003K-A - Projection Audit Surface */
#entity-dialog .projection-audit-section { display: grid; gap: 10px; }
#entity-dialog .projection-audit-summary { display: flex; flex-wrap: wrap; gap: 8px; }
#entity-dialog .projection-audit-metric { min-width: 130px; display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,.035); }
#entity-dialog .projection-audit-metric strong { color: var(--text); }
#entity-dialog .projection-audit-metric small { color: var(--text-muted); }
#entity-dialog .projection-audit-list { display: grid; gap: 6px; }
#entity-dialog .projection-audit-row { display: grid; grid-template-columns: minmax(120px,.6fr) minmax(180px,1fr) minmax(110px,.5fr); gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: rgba(255,255,255,.025); }
#entity-dialog .projection-audit-row span, #entity-dialog .projection-audit-row small { overflow-wrap: anywhere; }
#entity-dialog .projection-audit-row small { color: var(--text-muted); }
#entity-dialog .projection-audit-drift { border-color: color-mix(in srgb, var(--danger, #ef767a) 55%, var(--border)); }
#entity-dialog .projection-audit-drift small, #entity-dialog .projection-audit-status-warning { color: var(--danger, #ef767a); }
#entity-dialog .projection-audit-status-ok { color: var(--success, #7affae); }
#entity-dialog .projection-audit-status { margin: 0; font-weight: 700; }
@media (max-width: 760px) { #entity-dialog .projection-audit-row { grid-template-columns: 1fr; } }

/* PATCH 003K-C - Projection Drift Health */
#entity-dialog .projection-audit-values {
    display: grid;
    gap: 3px;
    min-width: 0;
}
#entity-dialog .projection-audit-values > span {
    overflow-wrap: anywhere;
}
#entity-dialog .projection-audit-values > span:first-child {
    color: var(--text);
}
#entity-dialog .projection-audit-values > span:last-child {
    color: var(--text-muted);
    font-size: .78rem;
}
#entity-dialog .projection-audit-drift .projection-audit-values > span:last-child {
    color: var(--danger, #ef767a);
}

/* PATCH 004D R1 - MODAL RELATIONSHIP SURFACE */
#entity-dialog .modal-linked-row[data-relationship-drag-source="true"] { cursor: grab; }
#entity-dialog .modal-linked-row[data-relationship-drag-source="true"]:active { cursor: grabbing; }
#entity-dialog .modal-linked-row.is-dragging { opacity: .5; }
#entity-dialog .modal-relationship-drop-target {
    position: relative;
    min-height: 86px;
    border-style: dashed;
    border-color: color-mix(in srgb, var(--modal-accent, var(--gold)) 42%, var(--border));
}
#entity-dialog .modal-relationship-drop-target::after {
    content: "Drop a linked object here to create a relationship";
    display: block;
    margin-top: 10px;
    padding: 9px 11px;
    border: 1px dashed color-mix(in srgb, var(--modal-accent, var(--gold)) 34%, transparent);
    border-radius: 10px;
    color: var(--text-muted);
    font-size: .76rem;
    text-align: center;
}
#entity-dialog .modal-relationship-drop-target.is-drag-over {
    border-color: var(--modal-accent, var(--gold));
    background: color-mix(in srgb, var(--modal-accent, var(--gold)) 13%, rgba(255,255,255,.045));
}

/* PATCH 004E - VIEW PIPELINE CONVERGENCE */
#entity-dialog .entity-modal-header .modal-actions {
    width: auto !important;
    max-width: 150px !important;
}
#entity-dialog .entity-modal-header .modal-explicit-edit-action,
#entity-dialog .entity-modal-header .modal-explicit-view-action {
    display: inline-flex !important;
    width: auto !important;
    max-width: none !important;
    min-width: 52px !important;
    padding-inline: 10px !important;
}

/* PATCH 004F - WORKSPACE LAYER CONVERGENCE */
:root {
    --layer-workspace: 100;
    --layer-global-chrome: 300;
    --layer-modal-blocker: 1000;
    --layer-modal: 1100;
    --layer-modal-tooltip: 1200;
    --layer-modal-drag: 1300;
}

/* Workspace remains one layer below modal ownership. */
#app,
.app-shell,
.workspace,
.workspace-root,
.map-workspace,
.card-columns,
.object-columns {
    isolation: isolate;
}

/* Explicit modal ownership. */
.entity-modal-backdrop,
.modal-backdrop,
.modal-overlay,
#entity-modal-backdrop {
    z-index: var(--layer-modal-blocker) !important;
}

#entity-dialog,
.entity-modal,
[role="dialog"].entity-modal {
    z-index: var(--layer-modal) !important;
    isolation: isolate;
}

/* Modal-local popovers and tooltips must render above the dialog body. */
#entity-dialog .tooltip,
#entity-dialog [role="tooltip"],
#entity-dialog .entity-tooltip,
#entity-dialog .card-tooltip,
#entity-dialog .hover-card,
#entity-dialog .popover,
#entity-dialog .drag-action-panel {
    z-index: var(--layer-modal-tooltip) !important;
}

/* Drag feedback is global, but must remain above modal content while dragging. */
.drag-ghost,
.drag-layer-ghost,
.entity-drag-ghost,
.drag-action-panel,
.drag-relationship-queue {
    z-index: var(--layer-modal-drag) !important;
}

/* Background workspace hover surfaces must not pierce modal ownership. */
body:has(#entity-dialog[open]) > .tooltip,
body:has(#entity-dialog.is-open) > .tooltip,
body:has(#entity-dialog[open]) > .entity-tooltip,
body:has(#entity-dialog.is-open) > .entity-tooltip,
body:has(#entity-dialog[open]) > .hover-card,
body:has(#entity-dialog.is-open) > .hover-card {
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Keep intended modal relationship interaction visible and usable. */
#entity-dialog .modal-linked-row,
#entity-dialog .modal-relationship-drop-target,
#entity-dialog .relationship-inspector-section {
    position: relative;
    z-index: 1;
}
#entity-dialog .modal-linked-row.is-dragging,
#entity-dialog .modal-relationship-drop-target.is-drag-over {
    z-index: 2;
}

/* PATCH 004F R1 - WORKSPACE LAYER CONTRACT START */
:root {
    --layer-app-floor: 0;
    --layer-workspace-map: 100;
    --layer-workspace-ui: 200;
    --layer-workspace-floor: 300;
    --layer-inspector: 500;
    --layer-object-ui: 700;
    --layer-relationship-ui: 850;
    --layer-system-ui: 1000;
}

/* App and map floor */
#app,
.app-shell,
.workspace-root,
.workspace,
.map-workspace {
    isolation: isolate;
}
.map,
.map-root,
.map-canvas,
.map-viewport {
    position: relative;
    z-index: var(--layer-workspace-map) !important;
}

/* Normal workspace controls stay below the inspector and do not create blockers. */
.workspace-ui,
.map-tools,
.workspace-tools,
.workspace-controls {
    position: relative;
    z-index: var(--layer-workspace-ui) !important;
}

/* Hotspots and relationship nodes sit on the workspace floor. */
.hotspot-layer,
.map-hotspots,
.relationship-layer,
.relationship-overlay,
[data-depth-drop-layer] {
    position: relative;
    z-index: var(--layer-workspace-floor) !important;
}

/* Inspector overlay is informative, not a modal blocker. */
.entity-modal-backdrop,
.modal-backdrop,
.modal-overlay,
#entity-modal-backdrop {
    z-index: calc(var(--layer-inspector) - 1) !important;
    pointer-events: none !important;
    background: rgba(0, 0, 0, .34) !important;
}
#entity-dialog,
.entity-modal,
[role="dialog"].entity-modal {
    z-index: var(--layer-inspector) !important;
    pointer-events: auto !important;
    isolation: isolate;
}

/* Object UI remains available while inspecting. */
.object-columns,
.card-columns,
.object-library,
.object-list,
.card-column,
.cards-column,
.left-rail,
.right-rail,
.sidebar-left,
.sidebar-right {
    position: relative;
    z-index: var(--layer-object-ui) !important;
    pointer-events: auto !important;
}

/* Relationship interaction and feedback own the top workspace layer. */
.drag-ghost,
.drag-layer-ghost,
.entity-drag-ghost,
.drag-action-panel,
.drag-relationship-queue,
.relationship-picker,
.relationship-popover,
#entity-dialog .modal-relationship-drop-target.is-drag-over,
#entity-dialog .modal-linked-row.is-dragging {
    z-index: var(--layer-relationship-ui) !important;
    pointer-events: auto !important;
}

/* System chrome is always highest. */
.top-bar,
.topbar,
.app-header,
.system-toolbar,
.global-toolbar,
.system-ui {
    position: relative;
    z-index: var(--layer-system-ui) !important;
}

/* Workspace hover UI may not block clicks or drops. */
.tooltip,
.entity-tooltip,
.card-tooltip,
.hover-card,
[data-tooltip-surface] {
    pointer-events: none !important;
}

/* Inspector-local navigation remains clickable for drill-down. */
#entity-dialog .entity-link,
#entity-dialog .link-card,
#entity-dialog .modal-linked-row,
#entity-dialog .relationship-inspector-section,
#entity-dialog .modal-relationship-drop-target {
    pointer-events: auto !important;
}
/* PATCH 004F R1 - WORKSPACE LAYER CONTRACT END */
/* =========================================================
   PATCH 025 - DICE MODAL SURFACE
   Extracted from js/ui/diceModal.js. CSS owns presentation;
   JavaScript owns behavior, DOM creation, state, and events.
========================================================= */.dice-layout {
            display: grid;
            grid-template-columns: minmax(220px, 0.85fr) minmax(260px, 1fr);
            gap: 14px;
        }

        .dice-panel {
            padding: 14px;
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 18px;
            background:
                linear-gradient(180deg, rgba(255,255,255,0.07), transparent 36%),
                rgba(255,255,255,0.045);
        }

        .dice-panel-header {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            align-items: baseline;
            margin-bottom: 12px;
        }

        .dice-panel-header h3 {
            color: var(--gold, #ffd86c);
            font-size: 0.82rem;
            text-transform: uppercase;
            letter-spacing: 0.11em;
        }

        .dice-panel-header span {
            color: var(--text-muted, rgba(244,241,235,0.66));
            font-size: 0.76rem;
        }

        .dice-buttons {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
            gap: 8px;
        }

        .dice-chip,
        .dice-tray-chip {
            min-height: 42px;
            border-radius: 14px;
            font-weight: 900;
        }

        .dice-tray {
            min-height: 74px;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            gap: 8px;
            padding: 10px;
            border-radius: 14px;
            background: rgba(0,0,0,0.22);
            border: 1px solid rgba(255,255,255,0.09);
        }

        .dice-tray.empty {
            align-items: center;
            color: var(--text-faint, rgba(244,241,235,0.46));
            font-style: italic;
        }

        .dice-tray-chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .dice-tray-chip strong {
            opacity: 0.7;
        }

        .dice-actions {
            margin-top: 10px;
        }

        .dice-result-panel {
            display: grid;
            gap: 12px;
        }

        .dice-total-label {
            color: var(--text-muted, rgba(244,241,235,0.66));
            text-align: center;
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 0.18em;
            font-weight: 900;
        }

        .dice-total {
            min-height: 104px;
            display: grid;
            place-items: center;
            border-radius: 20px;
            background:
                radial-gradient(circle at center, rgba(255,216,108,0.24), transparent 56%),
                rgba(0,0,0,0.3);
            border: 1px solid rgba(255,216,108,0.22);
            color: var(--gold, #ffd86c);
            font-size: clamp(3rem, 8vw, 6rem);
            font-weight: 1000;
            text-shadow:
                0 0 18px rgba(255,216,108,0.36),
                0 4px 18px rgba(0,0,0,0.82);
            transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
        }

        .dice-modal.rolling .dice-total {
            animation: diceTotalPulse 130ms infinite alternate;
        }

        .dice-modal.rolling .dice-tray-chip,
        .dice-modal.rolling .dice-chip {
            animation: diceShake 130ms infinite alternate;
        }

        .dice-total.critical-success,
        .dice-history-card.critical-success {
            color: #7dff9e;
            border-color: rgba(125,255,158,0.45);
            background:
                radial-gradient(circle at center, rgba(125,255,158,0.24), transparent 56%),
                rgba(0,0,0,0.3);
        }

        .dice-total.critical-failure,
        .dice-history-card.critical-failure {
            color: #ff7468;
            border-color: rgba(255,116,104,0.45);
            background:
                radial-gradient(circle at center, rgba(255,116,104,0.24), transparent 56%),
                rgba(0,0,0,0.3);
        }

        .dice-total.mixed-critical,
        .dice-history-card.mixed-critical {
            color: #ffd86c;
            border-color: rgba(255,216,108,0.55);
            background:
                radial-gradient(circle at left, rgba(125,255,158,0.22), transparent 48%),
                radial-gradient(circle at right, rgba(255,116,104,0.22), transparent 48%),
                rgba(0,0,0,0.3);
        }

        .dice-crit-banner {
            padding: 8px 10px;
            border-radius: 999px;
            text-align: center;
            font-size: 0.78rem;
            font-weight: 900;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            border: 1px solid rgba(255,255,255,0.12);
            color: var(--text-muted, rgba(244,241,235,0.66));
            background: rgba(255,255,255,0.045);
        }

        .dice-crit-banner.success {
            color: #7dff9e;
            border-color: rgba(125,255,158,0.36);
            background: rgba(125,255,158,0.08);
        }

        .dice-crit-banner.failure {
            color: #ff7468;
            border-color: rgba(255,116,104,0.36);
            background: rgba(255,116,104,0.08);
        }

        .dice-crit-banner.mixed {
            color: #ffd86c;
            border-color: rgba(255,216,108,0.38);
            background: rgba(255,216,108,0.08);
        }

        .dice-breakdown {
            display: grid;
            gap: 7px;
        }

        .dice-roll-row {
            display: grid;
            grid-template-columns: 64px 54px 1fr;
            align-items: center;
            gap: 10px;
            padding: 7px 9px;
            border-radius: 12px;
            background: rgba(255,255,255,0.045);
            border: 1px solid rgba(255,255,255,0.08);
        }

        .roll-die {
            color: var(--text-muted, rgba(244,241,235,0.66));
            font-weight: 900;
        }

        .roll-value {
            color: var(--text, #f4f1eb);
            font-size: 1.08rem;
        }

        .roll-tags {
            color: var(--text-faint, rgba(244,241,235,0.46));
            font-size: 0.72rem;
        }

        .dice-roll-row.highest-roll .roll-value {
            color: var(--gold, #ffd86c);
        }

        .dice-roll-row.critical-success {
            border-color: rgba(125,255,158,0.36);
            background: rgba(125,255,158,0.08);
        }

        .dice-roll-row.critical-failure {
            border-color: rgba(255,116,104,0.36);
            background: rgba(255,116,104,0.08);
        }

        .dice-preset-create {
            display: flex;
            gap: 8px;
            margin-bottom: 12px;
        }

        .dice-preset-create input {
            flex: 1;
            min-width: 0;
            padding: 8px 10px;
            border: 1px solid rgba(255,255,255,0.16);
            border-radius: 10px;
            color: var(--text, #f4f1eb);
            background: rgba(0,0,0,0.28);
        }

        .dice-preset-list,
        .dice-history-list {
            display: grid;
            gap: 8px;
        }

        .dice-preset-card {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            align-items: center;
            padding: 10px;
            border-radius: 14px;
            background: rgba(0,0,0,0.18);
            border: 1px solid rgba(255,255,255,0.09);
        }

        .dice-preset-card div:first-child {
            display: grid;
            gap: 3px;
        }

        .dice-preset-card span {
            color: var(--text-muted, rgba(244,241,235,0.66));
            font-size: 0.78rem;
        }

        .dice-history-card {
            display: grid;
            grid-template-columns: 54px 1fr;
            gap: 4px 10px;
            align-items: center;
            width: 100%;
            text-align: left;
            padding: 9px 10px;
            border-radius: 14px;
            background: rgba(0,0,0,0.18);
            border: 1px solid rgba(255,255,255,0.09);
        }

        .dice-history-card strong {
            grid-row: span 2;
            color: var(--gold, #ffd86c);
            font-size: 1.5rem;
            text-align: center;
        }

        .dice-history-card span {
            color: var(--text, #f4f1eb);
            font-weight: 800;
        }

        .dice-history-card small {
            color: var(--text-muted, rgba(244,241,235,0.66));
        }

        .dice-empty-note {
            color: var(--text-faint, rgba(244,241,235,0.46));
            font-size: 0.82rem;
            font-style: italic;
        }

        @keyframes diceShake {
            from {
                transform: translate(-1px, 1px) rotate(-1deg);
                filter: brightness(1);
            }

            to {
                transform: translate(1px, -1px) rotate(1deg);
                filter: brightness(1.25);
            }
        }

        @keyframes diceTotalPulse {
            from {
                transform: scale(0.98);
                filter: brightness(0.95);
            }

            to {
                transform: scale(1.025);
                filter: brightness(1.25);
            }
        }

        @media (max-width: 850px) {
            .dice-layout {
                grid-template-columns: 1fr;
            }

            .dice-preset-card {
                align-items: stretch;
                flex-direction: column;
            }
        }