@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;1,300;1,400&display=swap");

html, body {
    font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 400;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e52750;
}

.validation-message {
    color: #e52750;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ── Login Page ─────────────────────────────────────────────────────────── */
.login-page {
    height: 100vh;
    overflow: hidden;
}

.login-split {
    display: flex;
    height: 100vh;
}

.login-split__form {
    flex: 0 0 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: #fff;
}

.login-form-inner {
    max-width: 360px;
    width: 100%;
    text-align: center;
}

.login-form-inner h1 {
    font-size: 2rem;
    font-weight: 300;
    color: #730000;
    margin-bottom: 0.5rem;
}

.login-subtitle {
    color: #666;
    font-style: italic;
    margin-bottom: 2rem;
}

.btn-login-google {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    border: 1px solid #dadce0;
    border-radius: 4px;
    background: #fff;
    color: #3c4043;
    text-decoration: none;
    font-size: 0.95rem;
    transition: background 0.15s, box-shadow 0.15s;
}

.btn-login-google:hover {
    background: #f8f9fa;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    color: #3c4043;
    text-decoration: none;
}

.btn-login-google img {
    width: 18px;
    height: 18px;
}

.login-split__banner {
    flex: 0 0 50%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@media (max-width: 768px) {
    .login-split__banner {
        display: none;
    }

    .login-split__form {
        flex: 0 0 100%;
    }
}

/* ── Campaign Card — two-button actions ───────────────────────────────── */
.campaign-card__actions {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 1rem 1rem;
}

.campaign-card__edit-btn {
    margin-left: auto;
}

/* ── Campaign Background Page ─────────────────────────────────────────── */
.cb-loading {
    padding: 2rem;
}

.cb-layout {
    display: flex;
    height: calc(100vh - 64px);
    overflow: hidden;
}

/* ── Chapter Navigation Sidebar ───────────────────────────────────────── */
.chapnav {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: transparent;
    border-right: 1px solid rgba(155, 27, 48, 0.2);
    overflow: hidden;
    transition: width 0.2s ease;
}

.chapnav--collapsed {
    width: 28px;
}

.chapnav__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.5rem 0.5rem 1rem;
    flex-shrink: 0;
}

.chapnav__label {
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    color: #9b1b30;
    font-weight: 600;
}

.chapnav__collapse-btn {
    color: #9b1b30 !important;
    opacity: 0.7;
}

.chapnav__collapse-btn:hover {
    opacity: 1;
}

.chapnav__sections {
    flex: 1;
    overflow-y: auto;
    padding: 0 0 0.5rem;
}

/* ---- Chapter groups (H1 = title, H2/H3 = sub-headings) ---- */
.chapnav__chapter {
    margin: 0 0.25rem;
}

.chapnav__chapter-title {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.45rem 0.25rem 0.45rem 0.5rem;
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.875rem;
    color: #9b1b30;
    transition: background 0.15s;
    user-select: none;
}

.chapnav__chapter-title:hover {
    background: rgba(155, 27, 48, 0.07);
}

.chapnav__chapter-title--active {
    background: rgba(155, 27, 48, 0.12);
    color: #730000;
    font-weight: 600;
}

.chapnav__expand-icon {
    color: #9b1b30;
    opacity: 0.5;
    flex-shrink: 0;
}

.chapnav__chapter-link {
    flex: 1;
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
    color: inherit;
    font-weight: inherit;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.chapnav__subheadings {
    padding: 0 0 0.25rem 1.5rem;
}

.chapnav__subheading {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
    color: rgba(155, 27, 48, 0.65);
    cursor: pointer;
    border-radius: 3px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: background 0.12s, color 0.12s;
}

.chapnav__subheading:hover {
    background: rgba(155, 27, 48, 0.07);
    color: #9b1b30;
}

.chapnav__subheading--h2 { padding-left: 0.5rem; }
.chapnav__subheading--h3 { padding-left: 1.25rem; font-size: 0.75rem; }

.chapnav__empty {
    padding: 1rem;
    text-align: center;
}

.chapnav__expand-strip {
    width: 28px;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 0.75rem;
    cursor: pointer;
    color: rgba(155, 27, 48, 0.5);
    transition: color 0.15s;
}

.chapnav__expand-strip:hover {
    color: #9b1b30;
}

/* ── Main Editor Area ──────────────────────────────────────────────────── */
.cb-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cb-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: var(--mud-palette-surface);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.cb-topbar__breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
}

.cb-topbar__sep {
    opacity: 0.4;
}

.cb-topbar__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cb-save-status {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    opacity: 0.7;
    min-width: 120px;
}

.cb-search {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.cb-search__input {
    width: 240px;
}

.cb-search-results {
    background: var(--mud-palette-surface);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    max-height: 260px;
    overflow-y: auto;
    padding: 0.5rem 1rem;
    flex-shrink: 0;
}

.cb-search-results__count {
    opacity: 0.6;
    margin-bottom: 0.25rem;
}

.cb-search-result {
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 0.25rem;
    transition: background 0.12s;
}

.cb-search-result:hover {
    background: rgba(0, 0, 0, 0.05);
}

.cb-search-result__snippet {
    opacity: 0.65;
    font-style: italic;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cb-editor-wrapper {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.cb-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0.4;
    gap: 0.5rem;
}

.cb-empty__icon {
    font-size: 3rem !important;
}

/* ── Rich Text Editor ──────────────────────────────────────────────────── */
.rte-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.rte-toolbar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
    padding: 0.4rem 1rem;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--mud-palette-surface);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    margin-bottom: 0;
}

.rte-toolbar__group {
    display: flex;
    align-items: center;
    gap: 0.1rem;
}

.rte-toolbar__group--end {
    margin-left: auto;
}

.rte-toolbar__divider {
    width: 1px;
    height: 20px;
    background: rgba(0, 0, 0, 0.12);
    margin: 0 0.25rem;
}

.rte-toolbar__btn {
    min-width: 0 !important;
    padding: 4px !important;
}

.rte-toolbar__btn--active {
    background: rgba(115, 0, 0, 0.12) !important;
    color: #730000 !important;
}

.rte-toolbar__heading-btn {
    min-width: 32px !important;
    height: 32px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    padding: 0 6px !important;
}

.rte-toolbar__box-btn {
    font-size: 0.75rem !important;
    height: 32px !important;
    padding: 0 8px !important;
    min-width: 0 !important;
}

.rte-toolbar__box-btn--paper { border-left: 3px solid #e87c00 !important; }
.rte-toolbar__box-btn--quote { border-left: 3px solid #9b1b30 !important; }

/* TipTap editor content area */
.rte-editor {
    flex: 1;
    min-height: 500px;
    outline: none;
    margin: 1.25rem 1.5rem 3rem;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.13);
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    cursor: text;
}

.rte-editor .ProseMirror {
    outline: none;
    min-height: 500px;
    font-size: 1rem;
    line-height: 1.7;
    padding: 1.5rem 2rem 4rem;
}

.rte-editor .ProseMirror > * + * {
    margin-top: 0.75em;
}

.rte-editor .ProseMirror h1 { font-size: 2em; font-weight: 700; margin-top: 1.5em; }
.rte-editor .ProseMirror h2 { font-size: 1.5em; font-weight: 600; margin-top: 1.25em; }
.rte-editor .ProseMirror h3 { font-size: 1.25em; font-weight: 600; margin-top: 1em; }

.rte-editor .ProseMirror ul,
.rte-editor .ProseMirror ol {
    padding-left: 1.5rem;
}

.rte-editor .ProseMirror p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    color: rgba(0, 0, 0, 0.3);
    pointer-events: none;
    float: left;
    height: 0;
}

/* ── RTE height variants (used inside NPC sections) ─────────────────────── */

/* ~3 lines of text */
.rte-compact .rte-editor {
    min-height: auto;
    margin: 0;
}
.rte-compact .rte-editor .ProseMirror {
    min-height: 72px;
    padding: 0.6rem 0.85rem 0.75rem;
}

/* ~half the default */
.rte-medium .rte-editor {
    min-height: auto;
    margin: 0;
}
.rte-medium .rte-editor .ProseMirror {
    min-height: 200px;
    padding: 0.75rem 1rem 1.25rem;
}

/* ~full height, fills Background & History */
.rte-large .rte-editor {
    min-height: auto;
    margin: 0;
}
.rte-large .rte-editor .ProseMirror {
    min-height: 320px;
    padding: 0.75rem 1rem 1.25rem;
}

/* ── Read-only mode ─────────────────────────────────────────────────────── */

/* Hide the toolbar entirely in read-only mode */
.rte-wrapper--readonly .rte-toolbar {
    display: none;
}

/* Strip the white editor box — border, shadow, background */
.rte-wrapper--readonly .rte-editor {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    min-height: unset !important;
    cursor: default !important;
}

/* Prose typography for read-only content */
.rte-wrapper--readonly .rte-editor .ProseMirror {
    min-height: unset !important;
    padding: 0 !important;
    cursor: default !important;
    font-family: 'Lora', Georgia, serif !important;
    font-size: 13px !important;
    color: #3a2214 !important;
    line-height: 1.78 !important;
}

.rte-wrapper--readonly .rte-editor .ProseMirror p { margin: 0 0 6px; }
.rte-wrapper--readonly .rte-editor .ProseMirror ul,
.rte-wrapper--readonly .rte-editor .ProseMirror ol { margin: 0 0 6px; padding-left: 20px; }
.rte-wrapper--readonly .rte-editor .ProseMirror strong { font-weight: 600; color: #1a1209; }

/* Legacy selectors kept for non-entity-panel uses */
.rte-editor--readonly {
    min-height: unset !important;
    cursor: default !important;
}
.rte-compact .rte-editor--readonly .ProseMirror,
.rte-medium  .rte-editor--readonly .ProseMirror,
.rte-editor--readonly .ProseMirror {
    min-height: unset !important;
    padding: 0.25rem 0 !important;
    cursor: default !important;
}

/* Selected bitmask traits displayed as chips in read mode */
.ed-ro-traits {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 0;
    min-height: 28px;
}
.ed-ro-traits__empty {
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

/* PaperBox — orange highlight block */
.tiptap-paper-box {
    background: rgba(232, 124, 0, 0.1);
    border: 1px solid rgba(232, 124, 0, 0.4);
    border-left: 4px solid #e87c00;
    border-radius: 4px;
    padding: 0.75rem 1rem;
    margin: 1rem 0;
}

/* QuoteBox — beige block with crimson border */
.tiptap-quote-box {
    background: #fdf6ec;
    border: 1px solid #e8d5b7;
    border-left: 4px solid #9b1b30;
    border-radius: 4px;
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    font-style: italic;
}

/* ── TipTap Tables ─────────────────────────────────────────────────────── */
.rte-editor .ProseMirror table.tiptap-table,
.shared-rtv table.tiptap-table {
    border-collapse: collapse;
    margin: 1rem 0;
    table-layout: fixed;
    width: 100%;
    overflow: hidden;
    border: 1px solid #c9b88c;
    background: #fbf6e7;
}

.rte-editor .ProseMirror table.tiptap-table td,
.rte-editor .ProseMirror table.tiptap-table th,
.shared-rtv table.tiptap-table td,
.shared-rtv table.tiptap-table th {
    border: 1px solid #c9b88c;
    padding: 6px 10px;
    vertical-align: top;
    min-width: 1em;
    position: relative;
}

.rte-editor .ProseMirror table.tiptap-table th,
.shared-rtv table.tiptap-table th {
    background: #efe2bf;
    font-weight: 600;
    text-align: left;
    color: #1a1209;
}

.rte-editor .ProseMirror table.tiptap-table tr:nth-child(even) td,
.shared-rtv table.tiptap-table tr:nth-child(even) td {
    background: rgba(232, 215, 173, 0.35);
}

.rte-editor .ProseMirror table.tiptap-table p,
.shared-rtv table.tiptap-table p {
    margin: 0;
}

.rte-editor .ProseMirror .selectedCell:after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(232, 124, 0, 0.18);
    pointer-events: none;
    z-index: 2;
}

.rte-editor--readonly .ProseMirror table.tiptap-table {
    margin: 0.5rem 0;
}

/* ── TipTap Dice ───────────────────────────────────────────────────────── */
.tiptap-dice {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    user-select: none;
    background: linear-gradient(180deg, #fff5d6 0%, #f4e3a4 100%);
    color: #4a2f0e;
    border: 1px solid #c9a557;
    border-radius: 4px;
    padding: 0 6px;
    margin: 0 2px;
    font-weight: 600;
    font-size: 0.92em;
    line-height: 1.6;
    white-space: nowrap;
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.tiptap-dice::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a2f0e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polygon points='12,2 22,8 22,16 12,22 2,16 2,8'/><polyline points='2,8 12,12 22,8'/><line x1='12' y1='12' x2='12' y2='22'/><polygon points='12,2 17,5 12,8 7,5' fill='%234a2f0e'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
}

.tiptap-dice:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(74, 47, 14, 0.25);
    border-color: #b08436;
}

.tiptap-dice:active {
    transform: translateY(0);
}

.tiptap-dice-popper {
    position: absolute;
    z-index: 10000;
    background: #fbf6e7;
    border: 1px solid #c9a557;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(74, 47, 14, 0.25);
    min-width: 220px;
    max-width: 360px;
    padding: 8px 12px;
    font-family: inherit;
}

.tiptap-dice-popper__head {
    font-weight: 700;
    color: #4a2f0e;
    margin-bottom: 4px;
    border-bottom: 1px solid #e8d5b7;
    padding-bottom: 4px;
}

.tiptap-dice-popper__breakdown {
    font-family: 'Cascadia Mono', Consolas, monospace;
    font-size: 0.92em;
    color: #1a1209;
    margin-top: 4px;
    word-break: break-word;
}

.tiptap-dice-popper__total {
    margin-top: 4px;
    color: #4a2f0e;
}

.tiptap-dice-popper__total strong {
    font-size: 1.15em;
    color: #9b1b30;
}

.tiptap-dice-popper__error {
    color: #9b1b30;
    font-style: italic;
}

/* ── Entity image gallery (multi) ──────────────────────────────────────── */
.ed-gallery { display: flex; flex-direction: column; gap: 0.75rem; }

.ed-gallery__upload {
    position: relative;
    border: 2px dashed #c9a557;
    border-radius: 6px;
    padding: 1rem;
    background: rgba(251, 246, 231, 0.5);
    color: #4a2f0e;
    text-align: center;
    cursor: pointer;
}

.ed-gallery__upload:hover { background: rgba(251, 246, 231, 0.85); }

.ed-gallery__upload-hint {
    display: flex; align-items: center; justify-content: center;
    gap: 0.5rem; font-size: 0.92em;
}

.ed-gallery__input {
    position: absolute; inset: 0; opacity: 0; cursor: pointer;
}

.ed-gallery__empty {
    color: var(--mud-palette-text-secondary, #777);
    font-style: italic;
    text-align: center;
    padding: 0.5rem 0;
}

.ed-gallery__strip-wrap {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
}

.ed-gallery__strip {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 4px 40px;
    scrollbar-width: thin;
    scrollbar-color: #c9a557 transparent;
}

.ed-gallery__strip::-webkit-scrollbar {
    height: 6px;
}

.ed-gallery__strip::-webkit-scrollbar-thumb {
    background: #c9a557;
    border-radius: 3px;
}

.ed-gallery__strip > .ed-gallery__card {
    flex: 0 0 220px;
    scroll-snap-align: start;
}

.ed-gallery__nav {
    position: absolute !important;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: #fff !important;
    border: 1px solid #c9a557 !important;
    box-shadow: 0 2px 6px rgba(74, 47, 14, 0.25);
    color: #4a2f0e !important;
}

.ed-gallery__nav:hover {
    background: #fff5d6 !important;
}

.ed-gallery__nav--prev { left: -2px; }
.ed-gallery__nav--next { right: -2px; }

.ed-gallery__card {
    display: flex; flex-direction: column;
    border: 1px solid #c9b88c;
    border-radius: 6px;
    overflow: hidden;
    background: #fbf6e7;
    box-shadow: 0 1px 3px rgba(74, 47, 14, 0.1);
}

.ed-gallery__thumb {
    aspect-ratio: 4 / 3;
    cursor: pointer;
    overflow: hidden;
    background: #efe2bf;
    display: flex; align-items: center; justify-content: center;
    position: relative;
}

.ed-gallery__shared-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: #0d9488;
    color: #fff;
    border-radius: 50%;
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    pointer-events: none;
}

.ed-gallery__thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.15s ease;
}

.ed-gallery__thumb:hover img { transform: scale(1.04); }

.ed-gallery__caption {
    padding: 0.4rem 0.5rem;
    border-top: 1px solid #e8d5b7;
}

.ed-gallery__caption--ro {
    font-size: 0.88em;
    color: #4a2f0e;
    font-style: italic;
}

.ed-gallery__actions {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 0.25rem 0.25rem;
}

.ed-gallery__lightbox {
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}

.ed-gallery__lightbox-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.ed-gallery__lightbox img {
    max-width: 100%; max-height: 70vh; border-radius: 4px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.ed-gallery__lightbox-nav {
    position: absolute !important;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid #c9a557 !important;
    box-shadow: 0 2px 6px rgba(74, 47, 14, 0.25);
    color: #4a2f0e !important;
}

.ed-gallery__lightbox-nav--prev { left: 8px; }
.ed-gallery__lightbox-nav--next { right: 8px; }

.ed-gallery__lightbox-caption {
    font-style: italic; color: #4a2f0e;
}

.ed-gallery__lightbox-counter {
    font-size: 0.85em;
    color: #6a5230;
}

/* ── Entity image picker (single) ──────────────────────────────────────── */
.ed-img-picker { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }

.ed-img-picker__preview {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 240px;
    border: 1px solid #c9b88c;
    border-radius: 6px;
    overflow: hidden;
    background: #efe2bf;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}

.ed-img-picker__preview--empty {
    border-style: dashed;
    border-color: #c9a557;
    background: rgba(251, 246, 231, 0.5);
}

.ed-img-picker__preview img { width: 100%; height: 100%; object-fit: cover; }

.ed-img-picker__placeholder {
    display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
    color: #4a2f0e;
    font-size: 0.9em;
}

.ed-img-picker__input {
    position: absolute; inset: 0; opacity: 0; cursor: pointer;
}

.ed-img-picker__overlay {
    position: absolute; inset: 0;
    background: rgba(255, 255, 255, 0.55);
    display: flex; align-items: center; justify-content: center;
}

/* ── Single-column entity panel layout ─────────────────────────────────── */
.ed-single-col {
    max-width: 960px;
    margin: 0 auto;
}

/* ── EntityLinkWithRolePicker ──────────────────────────────────────────── */
.elp-with-role__list {
    display: flex; flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.elp-with-role__row {
    display: flex; align-items: center; gap: 0.5rem;
}

.elp-with-role__label-input { flex: 1 1 auto; }

.elp-with-role__label-ro {
    color: #4a2f0e;
    font-style: italic;
}

/* ── Item panel paired number + unit row ───────────────────────────────── */
.item-pair-row {
    display: flex; gap: 0.5rem; align-items: flex-start;
    margin-bottom: 0.4rem;
}

.item-pair-row__num { flex: 1 1 auto; }
.item-pair-row__unit { flex: 0 0 110px; }

/* ── Slash Command Popup ───────────────────────────────────────────────── */
.slash-popup {
    position: absolute;
    z-index: 9999;
    background: var(--mud-palette-surface, #fff);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    min-width: 220px;
    max-width: 280px;
    overflow: hidden;
    padding: 4px;
}

.slash-popup__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.1s;
}

.slash-popup__item:hover,
.slash-popup__item--active {
    background: rgba(115, 0, 0, 0.08);
}

.slash-popup__icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}

.slash-popup__body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
}

.slash-popup__title {
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
}

.slash-popup__desc {
    font-size: 0.75rem;
    opacity: 0.55;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Global Search Page ────────────────────────────────────────────────── */
.search-page {
    max-width: 760px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.search-page__title {
    margin-bottom: 1.25rem;
}

.search-page__bar {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.search-page__input {
    flex: 1;
}

.search-result {
    padding: 0.875rem 1rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: box-shadow 0.15s;
}

.search-result:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

.search-result__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
    flex-wrap: wrap;
}

.search-result__snippet {
    opacity: 0.65;
}

/* ── Entity Mentions (inline nodes in the rich-text editor) ───────────── */
.entity-mention {
    display: inline;
    border-radius: 3px;
    padding: 0 3px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: filter 0.1s;
}

.entity-mention:hover {
    filter: brightness(0.88);
}

/* Per-type colours */
.entity-mention--npc      { background: rgba(37, 99, 235, 0.12);  color: #1d4ed8; border-bottom: 1px solid rgba(37,99,235,0.3); }
.entity-mention--city     { background: rgba(22, 163, 74, 0.12);  color: #15803d; border-bottom: 1px solid rgba(22,163,74,0.3); }
.entity-mention--location { background: rgba(8, 145, 178, 0.12);  color: #0e7490; border-bottom: 1px solid rgba(8,145,178,0.3); }
.entity-mention--store    { background: rgba(180, 83, 9, 0.10);   color: #92400e; border-bottom: 1px solid rgba(180,83,9,0.3); }
.entity-mention--inn      { background: rgba(194, 65, 12, 0.10);  color: #9a3412; border-bottom: 1px solid rgba(194,65,12,0.3); }
.entity-mention--temple   { background: rgba(147, 51, 234, 0.10); color: #7e22ce; border-bottom: 1px solid rgba(147,51,234,0.3); }
.entity-mention--dungeon  { background: rgba(55, 65, 81, 0.10);   color: #1f2937; border-bottom: 1px solid rgba(55,65,81,0.3); }
.entity-mention--item     { background: rgba(217, 119, 6, 0.12);  color: #b45309; border-bottom: 1px solid rgba(217,119,6,0.3); }
.entity-mention--monster  { background: rgba(220, 38, 38, 0.12);  color: #b91c1c; border-bottom: 1px solid rgba(220,38,38,0.3); }
.entity-mention--quest    { background: rgba(59, 109, 17, 0.12);  color: #3b6d11; border-bottom: 1px solid rgba(59,109,17,0.3); }
.entity-mention--faction  { background: rgba(124, 58, 237, 0.12); color: #6d28d9; border-bottom: 1px solid rgba(124,58,237,0.3); }
.entity-mention--event    { background: rgba(202, 138, 4, 0.12);  color: #a16207; border-bottom: 1px solid rgba(202,138,4,0.3); }
.entity-mention--other    { background: rgba(107, 114, 128, 0.10);color: #4b5563; border-bottom: 1px solid rgba(107,114,128,0.3); }
.entity-mention--handout  { background: rgba(13, 148, 136, 0.12); color: #0f766e; border-bottom: 1px solid rgba(13,148,136,0.3); }
.entity-mention--rumor    { background: rgba(219, 39, 119, 0.12); color: #be185d; border-bottom: 1px solid rgba(219,39,119,0.3); }

/* ── Entity Mention Popup ─────────────────────────────────────────────── */
.entity-popup {
    min-width: 240px;
    max-width: 320px;
}

/* Type badge icons in entity list items */
.entity-type-badge {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    color: #fff !important;
}

.entity-type-badge--npc      { background: #2563eb !important; }
.entity-type-badge--city     { background: #16a34a !important; }
.entity-type-badge--location { background: #0891b2 !important; }
.entity-type-badge--store    { background: #b45309 !important; }
.entity-type-badge--inn      { background: #c2410c !important; }
.entity-type-badge--temple   { background: #9333ea !important; }
.entity-type-badge--dungeon  { background: #374151 !important; }
.entity-type-badge--item     { background: #d97706 !important; }
.entity-type-badge--monster  { background: #dc2626 !important; }
.entity-type-badge--quest    { background: #3b6d11 !important; }
.entity-type-badge--faction  { background: #7c3aed !important; }
.entity-type-badge--event    { background: #ca8a04 !important; }
.entity-type-badge--other    { background: #6b7280 !important; }
.entity-type-badge--handout  { background: #0d9488 !important; }
.entity-type-badge--rumor    { background: #db2777 !important; }

/* "Create…" item in search phase */
.entity-popup__create .slash-popup__icon {
    background: rgba(155, 27, 48, 0.12) !important;
    color: #9b1b30 !important;
}

/* Type-selection phase */
.entity-popup__type-header {
    padding: 0.4rem 0.75rem 0.25rem;
    font-size: 0.8rem;
    color: #555;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    margin-bottom: 4px;
}

.entity-popup__type-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0.4rem 0.5rem;
}

.entity-popup__type-btn {
    padding: 3px 10px;
    border: none;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: opacity 0.1s;
}

.entity-popup__type-btn:hover { opacity: 0.85; }

.entity-popup__back {
    border-top: 1px solid rgba(0,0,0,0.07);
    margin-top: 4px;
}

/* ── Entities page ───────────────────────────────────────────────────────── */

.entities-page {
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    height: 100%;
}

.entities-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.entities-header__title {
    font-weight: 700;
    margin-bottom: 0.1rem;
}

.entities-header__subtitle {
    opacity: 0.6;
}

.entities-filters {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.entities-filters__campaign {
    min-width: 200px;
    max-width: 280px;
}

.entities-filters__search {
    min-width: 200px;
    max-width: 300px;
}

.entities-filters__types {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

/* Active filter chip — bolder visual to make it obvious which filter is on (item 7).
   Multiple visual signals so it survives MudBlazor's chip styling: thick outline ring,
   solid border, raised z-index, bold text, and a subtle scale. We win specificity with
   .mud-chip.mud-chip-filled selector + !important. */
.mud-chip.entities-filters__chip--active,
.entities-filters__chip--active {
    outline: 3px solid var(--mud-palette-primary, #730000) !important;
    outline-offset: 2px;
    border: 1px solid var(--mud-palette-primary, #730000) !important;
    font-weight: 700 !important;
    transform: scale(1.04);
    position: relative;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(115, 0, 0, 0.35) !important;
}

.entities-filters__chip--active::after {
    content: "✓";
    margin-left: 6px;
    font-weight: 800;
    font-size: 11px;
    opacity: 0.85;
}

.entities-grid {
    flex: 1;
}

.entities-grid__desc {
    color: rgba(0,0,0,0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

/* ── Entity type chips (grid + filter bar) ───────────────────────────────── */

.entity-type-chip { color: #fff !important; }
.entity-type-chip--npc      { background-color: #2563eb !important; }
.entity-type-chip--city     { background-color: #16a34a !important; }
.entity-type-chip--location { background-color: #0891b2 !important; }
.entity-type-chip--store    { background-color: #b45309 !important; }
.entity-type-chip--inn      { background-color: #c2410c !important; }
.entity-type-chip--temple   { background-color: #9333ea !important; }
.entity-type-chip--dungeon  { background-color: #374151 !important; }
.entity-type-chip--item     { background-color: #d97706 !important; }
.entity-type-chip--monster  { background-color: #dc2626 !important; }
.entity-type-chip--faction  { background-color: #7c3aed !important; }
.entity-type-chip--event    { background-color: #ca8a04 !important; }
.entity-type-chip--other    { background-color: #6b7280 !important; }
.entity-type-chip--handout  { background-color: #0d9488 !important; }
.entity-type-chip--rumor    { background-color: #db2777 !important; }
.entity-type-chip--quest    { background-color: #3b6d11 !important; }

/* ── Map viewer: canvas + numbered pin list (T-033) ─────────────────────── */

.map-layout {
    display: flex;
    gap: 12px;
}

.map-layout__canvas {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border-radius: 6px;
    background: #d8cdb4;
}

.map-pinlist {
    flex: 0 0 236px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid rgba(184,146,12,0.4);
    border-radius: 6px;
    background: #fdf8f0;
    overflow: hidden;
}

.map-pinlist__head {
    padding: 8px 12px;
    background: #f0e8d4;
    border-bottom: 2px solid #9b1b30;
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 700;
    font-size: 0.85rem;
    color: #1a1209;
}

.map-pinlist__items {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 0;
}

.map-pinlist__item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px 12px;
    background: transparent;
    border: none;
    border-top: 1px solid var(--mud-palette-lines-default);
    text-align: left;
    cursor: pointer;
    transition: background 0.12s;
}
.map-pinlist__item:first-child { border-top: none; }
.map-pinlist__item:hover { background: rgba(184,146,12,0.08); }

.map-pinlist__num {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 700;
    font-size: 11px;
    border: 1.5px solid rgba(0,0,0,0.35);
}

.map-pinlist__label {
    flex: 1 1 auto;
    min-width: 0;
    font-family: 'Lora', Georgia, serif;
    font-size: 0.84rem;
    color: #1a1209;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Narrow screens: drop the list under the map as a short scrolling strip. */
@media (max-width: 760px) {
    .map-layout { flex-direction: column; }
    .map-pinlist { flex: 0 0 auto; max-height: 150px; }
}

/* ── Note-pin popup (T-035) — solid anchored card, reuses the epc positioning ── */

/* Scoped with both classes so it beats the later `.epc-card` base rule (equal-specificity, later-wins). */
.epc-card.map-note-popup {
    width: 300px;
    background: #fdf8f0;
    border: 1px solid rgba(184,146,12,0.5);
}
.map-note-popup .epc-caret { background: #fdf8f0; }

.map-note-popup__head {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px 6px;
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 700;
    font-size: 0.82rem;
    color: #9b1b30;
}
.map-note-popup__head .mud-icon-root { color: #9b1b30; }

.map-note-popup__body {
    padding: 0 14px 14px;
    font-family: 'Lora', Georgia, serif;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #1a1209;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 320px;
    overflow-y: auto;
}

/* ══ Share dialogs — the seal ══════════════════════════════════════════════
   One kit for every "who may read this" surface: entity sharing from the Codex
   detail panels, map sharing, and DM-note pin targeting. Parchment, because it
   opens over the parchment Codex — the battlemap pane is dark for the opposite
   reason, it lives beside a dark map.

   Controls are native elements rather than MudBlazor fields, for the same
   reason the battlemap pane kit uses raw <button>/<input>: these dialogs are
   reached on routes whose MudThemeProvider carries no theme, so anything
   Mud-coloured renders default indigo instead of the app's crimson. Owning the
   pixels is what makes the dialog look the same everywhere it opens.

   Hook is `.esd-root` inside DialogContent via :has(), so the styling holds
   regardless of how MudDialog plumbs its Class parameter. */

.mud-dialog.esd-dialog,
.mud-dialog:has(.esd-root) {
    --esd-paper:    #fdf8f0;
    --esd-raise:    #fffdf9;
    --esd-sunk:     #f4ead6;
    --esd-line:     rgba(115, 0, 0, 0.13);
    --esd-rule:     rgba(201, 162, 74, 0.5);
    --esd-gold:     #a8842f;
    --esd-gold-lit: #c9a24a;
    --esd-crimson:  #730000;
    --esd-crim-lit: #8a2530;
    --esd-ink:      #1a1209;
    --esd-dim:      #6d5f47;
    /* The theme's own TextSecondary. Every use below is small text, so this is
       the lightest ink the dialog is allowed — 4.6:1 on the parchment. */
    --esd-mute:     #7a6a50;
    --esd-live:     #2f6b46;

    /* MudBlazor only positions .mud-dialog for the corner placements — the gilt
       top edge below needs a containing block of its own. */
    position: relative;
    display: flex;
    flex-direction: column;
    max-height: 88vh;
    overflow: hidden;
    background: var(--esd-paper);
    border: 1px solid var(--esd-line);
    border-radius: 12px;
    box-shadow: 0 28px 64px -14px rgba(43, 20, 10, 0.45), 0 2px 10px rgba(43, 20, 10, 0.16);
    color: var(--esd-ink);
    font-family: 'Lora', Georgia, serif;
}
/* The one gold edge in the dialog — a gilt page-top, not a callout stripe.
   z-index clears MudBlazor's `.mud-dialog-title{z-index:1}`, which is a flex
   item here and would otherwise paint its header gradient over this. */
.mud-dialog:has(.esd-root)::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    z-index: 2;
    height: 3px;
    background: linear-gradient(90deg, var(--esd-crimson), var(--esd-gold-lit) 62%, rgba(201, 162, 74, 0));
}
.mud-dialog:has(.esd-root) > .mud-dialog-title { padding: 0; margin: 0; }
.mud-dialog:has(.esd-root) > .mud-dialog-content {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(115, 0, 0, 0.28) transparent;
}
.mud-dialog:has(.esd-root) > .mud-dialog-content::-webkit-scrollbar { width: 8px; }
.mud-dialog:has(.esd-root) > .mud-dialog-content::-webkit-scrollbar-thumb {
    background: rgba(115, 0, 0, 0.25); border-radius: 4px;
}
.mud-dialog:has(.esd-root) > .mud-dialog-actions { display: block; padding: 0; margin: 0; }
/* Native controls in a project with no global border-box. */
.mud-dialog:has(.esd-root) button,
.mud-dialog:has(.esd-root) input { box-sizing: border-box; }

/* ── Header ───────────────────────────────────────────────────────────────── */
.esd-head {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    padding: 18px 22px 14px;
    background: linear-gradient(180deg, #fbf3e3, var(--esd-paper));
    border-bottom: 1px solid var(--esd-line);
}
/* Wax seal: the dialog's one ornament, and the thing that names the act. */
.esd-seal {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, #8f1414, #5c0000 72%);
    border: 1px solid var(--esd-gold);
    box-shadow: inset 0 1px 2px rgba(255, 220, 180, 0.35), 0 2px 5px rgba(92, 0, 0, 0.35);
    color: #f0d79a;
}
.esd-seal .mud-icon-root { font-size: 19px; }
.esd-head-text { min-width: 0; }
.esd-title {
    margin: 0;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 1.06rem; font-weight: 600; letter-spacing: 0.06em;
    color: var(--esd-crimson);
}
.esd-sub {
    margin: 3px 0 0;
    font-size: 0.8rem; line-height: 1.4; color: var(--esd-dim);
}

/* ── Body ─────────────────────────────────────────────────────────────────── */
.esd-body { padding: 16px 22px 20px; }

/* Band: the movement label. The numeral is structural, not decoration — a DM
   who misreads "who" for "what" leaks a secret, so the two decisions are
   numbered in the order they are made. */
.esd-band {
    display: flex; align-items: center; gap: 9px;
    margin: 0 0 11px;
}
.esd-band + .esd-band, .esd-band--later { margin-top: 22px; }
.esd-band-num {
    flex: 0 0 auto;
    width: 19px; height: 19px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--esd-rule); border-radius: 50%;
    font-family: 'Cinzel', Georgia, serif; font-size: 0.66rem; font-weight: 700;
    /* Same ink as the label it numbers; the gold is the ring, not the digit. */
    color: var(--esd-crimson);
}
.esd-band-label {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--esd-crimson);
}
.esd-band-rule { flex: 1 1 auto; height: 1px; background: var(--esd-line); }

/* Bare text action, for the all/none pairs that sit on a band. */
.esd-mini {
    flex: 0 0 auto;
    padding: 2px 6px; border: 0; border-radius: 5px;
    background: none; cursor: pointer;
    font-family: 'Lora', Georgia, serif; font-size: 0.75rem; color: var(--esd-dim);
    transition: color 0.12s ease, background 0.12s ease;
}
.esd-mini:hover:not(:disabled) { color: var(--esd-crimson); background: rgba(115, 0, 0, 0.06); }
.esd-mini:disabled { opacity: 0.36; cursor: default; }

/* ── Who: viewer plates ───────────────────────────────────────────────────── */
.esd-viewers { display: flex; flex-direction: column; gap: 5px; }
/* On and off are two different materials, not two shades of one: a granted row
   is raised paper with a gilt edge, a withheld row is sunk and desaturated. The
   DM must be able to count who reads this without reading a single word. */
.esd-viewer {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 7px 11px 7px 8px;
    border: 1px solid var(--esd-line); border-radius: 10px;
    color: inherit; font: inherit; text-align: left; cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease;
}
.esd-viewer:focus-visible { outline: 2px solid var(--esd-crim-lit); outline-offset: 2px; }
.esd-viewer:disabled { opacity: 0.55; cursor: default; }
.esd-viewer--on {
    background: var(--esd-raise);
    border-color: rgba(168, 132, 47, 0.6);
    box-shadow: 0 1px 2px rgba(43, 20, 10, 0.07);
}
.esd-viewer--on:hover { background: #fff; border-color: var(--esd-gold); }
.esd-viewer--off { background: rgba(109, 95, 71, 0.075); border-color: transparent; }
.esd-viewer--off:hover { background: rgba(109, 95, 71, 0.12); border-color: var(--esd-line); }
.esd-viewer-av {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--av, #6d5f47);
    border: 2px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 1px 3px rgba(43, 20, 10, 0.3);
    font-family: 'Cinzel', Georgia, serif; font-size: 0.82rem; font-weight: 700;
    color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
    transition: box-shadow 0.14s ease, filter 0.14s ease;
}
.esd-viewer--on .esd-viewer-av { box-shadow: 0 0 0 2px var(--esd-gold-lit), 0 1px 3px rgba(43, 20, 10, 0.3); }
.esd-viewer--off .esd-viewer-av { filter: saturate(0.15) opacity(0.72); box-shadow: none; }
.esd-viewer-name {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 0.92rem;
}
.esd-viewer--off .esd-viewer-name { color: var(--esd-dim); }
/* State word, not a bare tick: "reads" / "hidden" says what the row means. */
.esd-viewer-state {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
    font-family: 'Cinzel', Georgia, serif; font-size: 0.6rem; font-weight: 600;
    letter-spacing: 0.09em; text-transform: uppercase; color: var(--esd-mute);
}
.esd-viewer--on .esd-viewer-state { color: var(--esd-live); }
.esd-viewer-state .mud-icon-root { font-size: 14px; }

/* ── What: locked fields + toggle grid ────────────────────────────────────── */
.esd-note { margin: 0 0 12px; font-size: 0.84rem; line-height: 1.55; color: var(--esd-dim); }
/* Trailing note that closes a section rather than introducing one. */
.esd-note--after { margin: 14px 0 0; }
.esd-locks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 11px; }
.esd-lock {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px 2px 6px;
    background: var(--esd-sunk); border: 1px solid var(--esd-rule); border-radius: 6px;
    font-size: 0.74rem; color: var(--esd-dim);
}
.esd-lock .mud-icon-root { font-size: 12px; color: var(--esd-gold); }
.esd-locks em { font-size: 0.74rem; font-style: italic; color: var(--esd-mute); }

.esd-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
/* Same two materials as the viewer plates, so "revealed" looks identical
   whether you are reading a person or a section. */
.esd-field {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px;
    border: 1px solid var(--esd-line); border-radius: 9px;
    cursor: pointer;
    transition: background 0.13s ease, border-color 0.13s ease;
}
.esd-field--on {
    background: var(--esd-raise); border-color: rgba(168, 132, 47, 0.55);
    box-shadow: 0 1px 2px rgba(43, 20, 10, 0.06);
}
.esd-field--on:hover { background: #fff; border-color: var(--esd-gold); }
.esd-field--off { background: rgba(109, 95, 71, 0.075); border-color: transparent; }
.esd-field--off:hover { background: rgba(109, 95, 71, 0.12); border-color: var(--esd-line); }
/* Drawn from scratch so the mark is gold rather than Mud's indigo, while the
   input stays a real checkbox for keyboard and screen readers. */
.esd-field input {
    flex: 0 0 auto; appearance: none; -webkit-appearance: none;
    width: 17px; height: 17px; margin: 0;
    background: var(--esd-paper);
    border: 1px solid rgba(115, 0, 0, 0.35); border-radius: 5px;
    cursor: pointer;
    transition: background 0.13s ease, border-color 0.13s ease;
}
.esd-field input:checked {
    background: linear-gradient(180deg, #8f1414, #5c0000);
    border-color: #5c0000;
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0)),
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23f0d79a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.4l3 3 6-6.4'/%3E%3C/svg%3E");
    background-size: cover;
    background-color: #6d0808;
}
.esd-field input:focus-visible { outline: 2px solid var(--esd-crim-lit); outline-offset: 2px; }
.esd-field-name {
    min-width: 0; font-size: 0.86rem; line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis;
}
.esd-field--off .esd-field-name { color: var(--esd-dim); }

/* ── Image tray ───────────────────────────────────────────────────────────── */
.esd-images {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
.esd-images--open { grid-template-rows: 1fr; }
.esd-images > div { overflow: hidden; }
.esd-images-in {
    margin-top: 9px; padding: 11px 12px 12px;
    background: var(--esd-sunk);
    border: 1px solid var(--esd-line); border-top: 2px solid var(--esd-gold);
    border-radius: 10px;
}
.esd-images-head { display: flex; align-items: center; gap: 6px; margin-bottom: 9px; }
.esd-images-head > span:first-child {
    flex: 1 1 auto; font-size: 0.76rem; color: var(--esd-dim);
    font-variant-numeric: tabular-nums;
}
.esd-thumbs { display: flex; flex-wrap: nowrap; gap: 9px; overflow-x: auto; padding-bottom: 5px; }
.esd-thumb {
    position: relative; flex: 0 0 auto;
    width: 82px; height: 82px; padding: 0;
    border: 2px solid rgba(115, 0, 0, 0.18); border-radius: 9px;
    overflow: hidden; cursor: pointer; background: var(--esd-paper);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.esd-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: grayscale(0.75) contrast(0.9) opacity(0.55);
    transition: filter 0.18s ease;
}
.esd-thumb:hover img { filter: grayscale(0.35) opacity(0.8); }
.esd-thumb--on { border-color: var(--esd-gold-lit); box-shadow: 0 0 0 2px rgba(201, 162, 74, 0.22); }
.esd-thumb--on img { filter: none; }
.esd-thumb:focus-visible { outline: 2px solid var(--esd-crim-lit); outline-offset: 2px; }
.esd-thumb-mark {
    position: absolute; top: 4px; right: 4px;
    width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(26, 18, 9, 0.62); color: #f4e6c4;
    backdrop-filter: none;
}
.esd-thumb--on .esd-thumb-mark { background: #5c0000; color: #f0d79a; }
.esd-thumb-mark .mud-icon-root { font-size: 13px; }

/* ── Empty / loading ──────────────────────────────────────────────────────── */
.esd-empty {
    padding: 20px 16px; text-align: center;
    background: var(--esd-sunk); border: 1px dashed var(--esd-rule); border-radius: 10px;
}
.esd-empty p { margin: 0; font-size: 0.86rem; color: var(--esd-dim); }
.esd-empty small { display: block; margin-top: 4px; font-size: 0.76rem; font-style: italic; color: var(--esd-mute); }
.esd-loading { padding: 34px 22px; text-align: center; }
.esd-loading p {
    margin: 12px 0 0; font-family: 'Cinzel', Georgia, serif;
    font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--esd-mute);
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.esd-foot { border-top: 1px solid var(--esd-line); background: linear-gradient(180deg, var(--esd-paper), #f9f1e2); }
/* The receipt: what this dialog will actually do, in words, before it is done.
   The empty-selection cases used to surface only as a surprise confirm box. */
.esd-receipt {
    display: flex; align-items: flex-start; gap: 7px;
    margin: 0; padding: 11px 22px;
    border-bottom: 1px solid var(--esd-line);
    font-size: 0.82rem; line-height: 1.45; color: var(--esd-dim);
}
.esd-receipt .mud-icon-root { flex: 0 0 auto; font-size: 15px; margin-top: 1px; color: var(--esd-gold); }
.esd-receipt b { font-weight: 600; color: var(--esd-ink); }
.esd-receipt--warn { color: #8a2530; background: rgba(138, 37, 48, 0.05); }
.esd-receipt--warn .mud-icon-root, .esd-receipt--warn b { color: #8a2530; }

.esd-actions { display: flex; align-items: center; gap: 9px; padding: 12px 22px 15px; }
.esd-actions-spacer { flex: 1 1 auto; }

.esd-btn {
    padding: 8px 18px; border-radius: 9px; cursor: pointer;
    font-family: 'Cinzel', Georgia, serif; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.07em;
    transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.esd-btn:focus-visible { outline: 2px solid var(--esd-crim-lit); outline-offset: 2px; }
.esd-btn--ghost {
    background: none; border: 1px solid var(--esd-line); color: var(--esd-dim);
}
.esd-btn--ghost:hover:not(:disabled) { color: var(--esd-ink); border-color: rgba(115, 0, 0, 0.3); background: rgba(115, 0, 0, 0.04); }
.esd-btn--go {
    background: linear-gradient(180deg, #8a2530, #6d1a24);
    border: 1px solid #5c0000; color: #fff;
    box-shadow: 0 1px 3px rgba(92, 0, 0, 0.3);
}
.esd-btn--go:hover:not(:disabled) { background: linear-gradient(180deg, #9c2b37, #7d1f2a); }
.esd-btn:disabled { opacity: 0.42; cursor: default; }

/* Unshare is destructive and sits in the same row as the CTA, so it is a quiet
   link until hover — reachable, never the thing your eye lands on first. */
.esd-unshare {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 2px; background: none; border: 0; cursor: pointer;
    font-family: 'Lora', Georgia, serif; font-size: 0.79rem; color: var(--esd-mute);
    text-decoration: underline; text-underline-offset: 3px;
    text-decoration-color: rgba(138, 122, 94, 0.45);
    transition: color 0.13s ease;
}
.esd-unshare:hover:not(:disabled) { color: #8a2530; text-decoration-color: rgba(138, 37, 48, 0.6); }
.esd-unshare:focus-visible { outline: 2px solid var(--esd-crim-lit); outline-offset: 2px; border-radius: 5px; }
.esd-unshare:disabled { opacity: 0.4; cursor: default; }
.esd-unshare .mud-icon-root { font-size: 15px; }

@media (max-width: 600px) {
    .esd-fields { grid-template-columns: minmax(0, 1fr); }
    .esd-head { padding: 15px 16px 12px; }
    .esd-body { padding: 14px 16px 18px; }
    .esd-receipt { padding: 10px 16px; }
    .esd-actions { padding: 11px 16px 14px; flex-wrap: wrap; }
    .esd-unshare { order: 3; width: 100%; justify-content: center; padding-top: 8px; }
    .esd-actions-spacer { display: none; }
    .esd-btn { flex: 1 1 0; }
}

@media (prefers-reduced-motion: reduce) {
    .esd-images { transition: none; }
    .esd-viewer, .esd-field, .esd-thumb, .esd-thumb img, .esd-btn { transition: none; }
}

/* ── Player image gallery (shared images below banner / portrait) ──────── */

.player-gallery {
    margin: 12px 0 8px 0;
}

.player-gallery__strip-wrap {
    position: relative;
    max-width: 100%;
}

.player-gallery__strip {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 4px 40px;
    scrollbar-width: thin;
    scrollbar-color: #c9a557 transparent;
}

.player-gallery__strip::-webkit-scrollbar {
    height: 6px;
}

.player-gallery__strip::-webkit-scrollbar-thumb {
    background: #c9a557;
    border-radius: 3px;
}

.player-gallery__thumb {
    flex: 0 0 110px;
    width: 110px;
    height: 110px;
    border-radius: 6px;
    overflow: hidden;
    cursor: zoom-in;
    background: #efe2bf;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    transition: transform 0.12s ease;
    scroll-snap-align: start;
}

.player-gallery__thumb:hover {
    transform: scale(1.03);
}

.player-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.player-gallery__nav {
    position: absolute !important;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: #fff !important;
    border: 1px solid #c9a557 !important;
    box-shadow: 0 2px 6px rgba(74, 47, 14, 0.25);
    color: #4a2f0e !important;
}

.player-gallery__nav:hover {
    background: #fff5d6 !important;
}

.player-gallery__nav--prev { left: -2px; }
.player-gallery__nav--next { right: -2px; }

/* ── Entity detail page ──────────────────────────────────────────────────── */

.ed-loading {
    padding: 2rem;
}

.ed-page {
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 860px;
}

.ed-topbar {
    display: flex;
    align-items: center;
}

.ed-topbar__breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.ed-topbar__sep {
    opacity: 0.4;
}

.ed-header {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.ed-header__main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.ed-header__name {
    font-weight: 700;
}

.ed-header__meta {
    opacity: 0.6;
}

.ed-desc-card {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ed-desc-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ed-desc-card__field {
    width: 100%;
}

.ed-desc-card__actions {
    display: flex;
    gap: 0.5rem;
}

.ed-desc-card__empty {
    opacity: 0.5;
    font-style: italic;
}

.ed-desc-card__text {
    white-space: pre-wrap;
    line-height: 1.6;
}

/* Breadcrumb + header wrapper shared by all entity panels */
.ed-topbar-wrapper {
    padding: 1.5rem 2rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Store detail panel layout ───────────────────────────────────────────── */

.store-layout {
    display: grid;
    grid-template-columns: 400px 1fr;
    column-gap: 1.25rem;
    padding: 1.5rem 2rem;
    align-items: stretch;   /* both columns grow to the same height */
}

.store-layout__left {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.store-layout__right {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Store inventory panel ───────────────────────────────────────────────── */

.store-inv {
    flex: 1;                /* fills remaining height in the left flex column */
    display: flex;
    flex-direction: column;
    min-height: 200px;
    overflow: hidden;
}

.store-inv__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.store-inv__empty {
    color: var(--mud-palette-text-secondary);
    font-style: italic;
    padding: 1rem 0;
    text-align: center;
    font-size: 0.875rem;
}

.store-inv__list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Read-mode column header */
.store-inv__header-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0 0.4rem;
    border-bottom: 2px solid var(--mud-palette-divider);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary);
}

.store-inv__header-row span:first-child {
    flex: 1;
    min-width: 0;
}

/* Read-mode data row: [name flex:1] [price fixed] */
.store-inv__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.store-inv__row:last-child {
    border-bottom: none;
}

/* Edit-mode data row: [name cell flex:1] [price fixed] [delete icon] */
.store-inv__row--edit {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0;
}

.store-inv__name {
    flex: 1;
    min-width: 0;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Name cell in edit mode */
.store-inv__name-cell {
    flex: 1;
    min-width: 0;
    position: relative;
}

/* Wrapper for the text input — needed to anchor the @ popup */
.store-inv__name-wrapper {
    position: relative;
    width: 100%;
}

/* @ mention dropdown */
.store-inv__at-popup {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 1200;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
    max-height: 240px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.store-inv__at-popup-item {
    display: block;
    width: 100%;
    padding: 7px 12px;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
    transition: background 0.1s;
}

.store-inv__at-popup-item:hover,
.store-inv__at-popup-item--active {
    background: var(--mud-palette-action-hover);
}

.store-inv__at-popup-create {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 7px 12px;
    text-align: left;
    background: none;
    border: none;
    border-top: 1px solid var(--mud-palette-divider);
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--mud-palette-primary);
    font-weight: 500;
    transition: background 0.1s;
}

.store-inv__at-popup-create:hover {
    background: var(--mud-palette-action-hover);
}

.store-inv__at-popup-empty {
    padding: 8px 12px;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

/* Linked entity chip + unlink button */
.store-inv__linked {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: nowrap;
    overflow: hidden;
}

.store-inv__price-col {
    flex-shrink: 0;
    width: 80px;
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    text-align: right;
}

/* Clickable entity chip in the inventory list */
.store-inv__entity-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--mud-palette-primary);
    transition: background 0.15s;
}

.store-inv__entity-btn:hover {
    background: rgba(var(--mud-palette-primary-rgb), 0.08);
}

/* ── NPC detail panel ────────────────────────────────────────────────────── */

.npc-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    grid-template-rows: auto auto;
    column-gap: 1.25rem;
    row-gap: 1.25rem;
    padding: 1.5rem 2rem;
    align-items: start;
}

.npc-layout__left {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.npc-layout__right {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.npc-layout__full {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}


.npc-section {
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.npc-section__title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.55;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    padding-bottom: 0.4rem;
    margin-bottom: 0.1rem;
}

.npc-section__fields {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.npc-section__checkboxes {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.npc-section__checkboxes--cols-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

/* Portrait */
.npc-portrait { }

.npc-portrait__dropzone {
    position: relative;
}

.npc-portrait__preview {
    width: 100%;
    aspect-ratio: 3/4;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(0,0,0,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
}

.npc-portrait__preview--empty {
    border: 2px dashed rgba(0,0,0,0.15);
}

.npc-portrait__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.npc-portrait__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    opacity: 0.4;
}

.npc-portrait__icon {
    font-size: 3rem !important;
}

.npc-portrait__hint {
    font-size: 0.75rem;
    text-align: center;
}

.npc-portrait__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.npc-portrait__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

/* Save bar */
.npc-save-bar {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    justify-content: flex-end;
    padding: 0.75rem 0;
    background: #f0e8d4;
    border-top: 1px solid rgba(184,146,12,0.32);
    margin-top: 0.5rem;
}

.npc-save-bar__btn {
    min-width: 160px;
}

.ed-header__save-btn {
    min-width: 130px;
}

/* Entity link picker */
.elp-root {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.elp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-height: 2rem;
    align-items: center;
}

.elp-empty {
    opacity: 0.4;
    font-style: italic;
    font-size: 0.85rem;
}

.elp-search {
    max-width: 320px;
}

/* Responsive: stack columns on narrow screens */
@media (max-width: 860px) {
    .npc-layout {
        grid-template-columns: 1fr;
    }

    .npc-layout__left,
    .npc-layout__right {
        grid-column: 1;
    }

    .npc-layout__right {
        grid-row: 2;
    }

    .npc-layout__full {
        grid-row: 3;
    }
}

/* ── Entity preview popup card ───────────────────────────────────────────── */

/* Transparent full-screen backdrop — catches outside clicks */
.epc-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: transparent;
}

/* Card wrapper — positioned via CSS custom properties set inline */
.epc-card {
    position: fixed;
    left: var(--epc-x);
    z-index: 9999;
    width: 340px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.10),
        0 10px 30px -5px rgba(0, 0, 0, 0.18),
        0 0 0 1px rgba(0, 0, 0, 0.05);
    overflow: visible;
    animation: epc-enter 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Above the tag: card sits above, translate up 100% from tag-top */
.epc-card--above {
    top: var(--epc-y);
    transform: translateY(-100%);
}

/* Below the tag: card sits below tag-bottom */
.epc-card--below {
    top: var(--epc-y);
}

@keyframes epc-enter {
    from { opacity: 0; transform: translateY(calc(-100% - 6px)) scale(0.95); }
    to   { opacity: 1; transform: translateY(-100%); }
}

.epc-card--below {
    animation-name: epc-enter-below;
}

@keyframes epc-enter-below {
    from { opacity: 0; transform: translateY(6px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Caret — the little triangle pointing at the entity tag */
.epc-caret {
    position: absolute;
    left: var(--epc-caret-x);
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: #ffffff;
    z-index: 1;
}

.epc-card--above .epc-caret {
    bottom: -5px;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.08);
}

.epc-card--below .epc-caret {
    top: -5px;
    box-shadow: -1px -1px 3px rgba(0, 0, 0, 0.08);
}

/* Loading state */
.epc-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
}

/* Close button */
.epc-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.06);
    color: rgba(0, 0, 0, 0.45);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s, color 0.15s;
    z-index: 2;
}

.epc-close:hover {
    background: rgba(0, 0, 0, 0.12);
    color: rgba(0, 0, 0, 0.75);
}

/* Body — image + content side by side */
.epc-body {
    display: flex;
    gap: 0;
    padding: 0;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}

/* Left: entity image */
.epc-image {
    flex-shrink: 0;
    width: 90px;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.06);
    font-size: 2.25rem;
    font-weight: 700;
    color: #ffffff;
}

.epc-image--npc      { background: linear-gradient(160deg, #1e3a8a 0%, #2563eb 100%); }
.epc-image--city     { background: linear-gradient(160deg, #14532d 0%, #16a34a 100%); }
.epc-image--location { background: linear-gradient(160deg, #164e63 0%, #0891b2 100%); }
.epc-image--item     { background: linear-gradient(160deg, #92400e 0%, #d97706 100%); }
.epc-image--monster  { background: linear-gradient(160deg, #7f1d1d 0%, #dc2626 100%); }
.epc-image--faction  { background: linear-gradient(160deg, #4c1d95 0%, #7c3aed 100%); }
.epc-image--event    { background: linear-gradient(160deg, #713f12 0%, #ca8a04 100%); }
.epc-image--other    { background: linear-gradient(160deg, #374151 0%, #6b7280 100%); }
.epc-image--rumor    { background: linear-gradient(160deg, #831843 0%, #db2777 100%); }

.epc-image__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.epc-image__initial {
    font-size: 2rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.80);
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

/* Right: text content */
.epc-content {
    flex: 1;
    padding: 14px 38px 14px 14px; /* right padding leaves room for close btn */
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.epc-content__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.epc-type-chip {
    font-size: 0.65rem !important;
    height: 18px !important;
    padding: 0 6px !important;
}

.epc-content__campaign {
    font-size: 0.7rem;
    color: rgba(0, 0, 0, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.epc-content__name {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.25;
    margin-bottom: 2px;
}

.epc-content__desc {
    font-size: 0.8rem;
    color: rgba(0, 0, 0, 0.60);
    line-height: 1.45;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.epc-content__desc--empty {
    font-style: italic;
    color: rgba(0, 0, 0, 0.35);
}

/* Footer actions */
.epc-footer {
    display: flex;
    gap: 8px;
    padding: 10px 14px 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    background: rgba(0, 0, 0, 0.015);
    border-radius: 0 0 12px 12px;
}

.epc-footer__btn {
    flex: 1;
}

/* ── Entity References page (EntityReferences.razor) ─────────────────────── */

.er-loading {
    padding: 2rem;
}

.er-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem 2rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.er-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.er-header__breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    color: rgba(0, 0, 0, 0.55);
}

.er-header__sep {
    opacity: 0.4;
    font-size: 1rem !important;
}

.er-header__title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.er-header__title-icon {
    font-size: 1.6rem !important;
    color: #730000;
}

.er-section__heading {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 1rem;
    font-weight: 600;
    color: #1a1a2e;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    padding-bottom: 0.5rem;
}

.er-section__heading-icon {
    font-size: 1.2rem !important;
    color: #730000;
}

.er-empty {
    padding: 1rem 0;
}

.er-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.er-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.09);
    border-radius: 10px;
    padding: 14px 36px 14px 16px;
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
}

.er-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
    border-color: #730000;
}

.er-card__title {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1a1a2e;
    margin-bottom: 2px;
}

.er-card__meta {
    font-size: 0.78rem;
    color: rgba(0, 0, 0, 0.5);
    margin-bottom: 6px;
}

.er-card__snippet {
    font-size: 0.8rem;
    color: rgba(0, 0, 0, 0.62);
    line-height: 1.45;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed rgba(0, 0, 0, 0.09);
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.er-card__type-chip {
    font-size: 0.65rem !important;
    height: 18px !important;
    padding: 0 6px !important;
}

.er-card__arrow {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    opacity: 0.3;
    transition: opacity 0.15s;
}

.er-card:hover .er-card__arrow {
    opacity: 0.7;
}

/* Find References button in entity detail headers */
.ed-header__refs-btn {
    margin-left: auto;
}

/* Subtle edit icon next to the type chip */
.ed-header__type-edit {
    opacity: 0.45;
    transition: opacity 0.15s;
}
.ed-header__main:hover .ed-header__type-edit {
    opacity: 1;
}

/* Bulk action bar on the Entities page */
.entities-bulk-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    background: #f5f7ff;
    border: 1px solid #c8d5f5;
    border-left: 4px solid #4f7ef5;
    border-radius: 0 8px 8px 0;
    flex-wrap: wrap;
}
.entities-bulk-bar__count {
    font-weight: 600;
    white-space: nowrap;
    color: #2a52b5;
}

/* Selected row highlight */
.entities-grid .entities-grid__row--selected td {
    background-color: rgba(79, 126, 245, 0.07) !important;
}

/* Checkbox column — narrow, centred */
.entities-grid__check-col {
    width: 52px !important;
    max-width: 52px !important;
    padding-right: 0 !important;
    text-align: center !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Entity Detail — Open Tome design primitives
   Global (not isolated) so they apply to NpcDetailPanel, TempleDetailPanel,
   StoreDetailPanel, InnDetailPanel and any future entity panels.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Column backgrounds — remove ruled lines ─────────────────────────────── */
.store-layout,
.store-layout__left,
.store-layout__right,
.npc-layout,
.npc-layout__left,
.npc-layout__right {
    background-image: none !important;
}

.store-layout__left,
.store-layout__right,
.npc-layout__left,
.npc-layout__right {
    background: #f0e8d4;
}

/* ── Ornamental section divider ──────────────────────────────────────────── */
.ed-orn-rule {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 16px 0 11px;
}

.ed-orn-rule__line {
    flex: 1;
    height: 1px;
}

.ed-orn-rule__line--left {
    background: linear-gradient(to right, transparent, rgba(184,146,12,0.32));
}

.ed-orn-rule__line--right {
    background: linear-gradient(to left, transparent, rgba(184,146,12,0.32));
}

.ed-orn-rule__label {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: #8a6a1e;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Shared-field indicator pill — surfaces next to DM section titles so the editor knows
   which sections leak to players via the active share config. Inline-flex so it sits
   beside the ornament label without disturbing the rule alignment. */
.shared-field-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #0d3b66;
    background: #e6f0fb;
    border: 1px solid #b6cce6;
    border-radius: 999px;
    vertical-align: middle;
    white-space: nowrap;
}

/* ── Section wrapper — flat, no elevation ────────────────────────────────── */
.ed-section {
    margin-bottom: 0;
    background: transparent;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 0 4px;
}

/* ── Read-mode field label + value ───────────────────────────────────────── */
.ed-field {
    margin-bottom: 9px;
}

.ed-field__label {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 8px;
    letter-spacing: 0.14em;
    color: #8a681e;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.ed-field__value {
    font-family: 'Lora', Georgia, serif;
    font-size: 13px;
    color: #1a1209;
    line-height: 1.55;
}

/* ── Read-mode prose block ───────────────────────────────────────────────── */
.ed-prose {
    font-family: 'Lora', Georgia, serif;
    font-size: 13px;
    color: #3a2214;
    line-height: 1.78;
    margin-bottom: 4px;
}

.ed-prose--italic {
    font-style: italic;
}

/* Read-aloud quotebox — player-facing prose (e.g. NPC Physical Description) stands out (T-008).
   Mirrors the TipTap .tiptap-quote-box look: beige block, crimson left border, italic. */
.ed-quotebox {
    background: #fdf6ec;
    border: 1px solid #e8d5b7;
    border-left: 4px solid #9b1b30;
    border-radius: 4px;
    padding: 0.75rem 1rem;
    font-style: italic;
}

/* ── Quest objectives — hand-kept ledger (T-015 / T-019) ─────────────────────
   Flat rows sitting directly on the parchment (no white cards), opened by a
   crimson rule like the Rumour Mill. Each row: an outcome medallion, Lora text,
   an optional small-caps tag, and a reveal indicator at the far right. */
.quest-obj {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 2px;
    border-top: 1px solid var(--mud-palette-lines-default);
}
.quest-obj:first-of-type { border-top: 2px solid #9b1b30; }

.quest-obj__mark {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.quest-obj__mark--open {
    border: 1.5px solid #b8920c;
    background: transparent;
}
.quest-obj__mark--done {
    background: #9b1b30;
    color: #fdf6ec;
}
.quest-obj__mark--failed,
.quest-obj__mark--obsolete {
    border: 1.5px dashed #a68b6a;
    background: transparent;
    color: #a68b6a;
}

.quest-obj__text {
    flex: 1 1 auto;
    font-family: 'Lora', Georgia, serif;
    font-size: 14px;
    color: #1a1209;
    line-height: 1.5;
}
.quest-obj__text--struck {
    text-decoration: line-through;
    color: #8a7b63;
}

.quest-obj__tag {
    flex: 0 0 auto;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8a6a1e;
    border: 1px solid rgba(184,146,12,0.4);
    border-radius: 999px;
    padding: 1px 8px;
}

.quest-obj__reveal {
    flex: 0 0 auto;
    color: #a68b6a;
}
.quest-obj__reveal--on { color: #9b1b30; }

/* Edit-mode objective card — themed container in place of the old white MudPaper:
   a parchment tint with a gold hairline + crimson left accent (ed-quotebox family).
   Stacked: a compact control header on top, the full-width text field below (so a
   tall/wrapping description never distorts the row of little buttons). */
.quest-obj-edit {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px 12px;
    margin-bottom: 10px;
    background: #fbf5e8;
    border: 1px solid #e8d5b7;
    border-left: 3px solid #9b1b30;
    border-radius: 4px;
}

.quest-obj-edit__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.quest-obj-edit__num {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #9b1b30;
    min-width: 20px;
}

.quest-obj-edit__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 2px;
}

/* ── Rumour mill — DM place-page rumour list ─────────────────────────────────
   Styled after the player codex "Rumour Mill": flat rows on a hairline rule (no card
   background, so it sits on the parchment), italic quoted name, rotated verdict stamp
   to the right, short-description teaser beneath. */
.rumor-mill__item {
    padding: 9px 0;
    border-top: 1px solid var(--mud-palette-lines-default);
}
.rumor-mill__item:first-of-type { border-top: 2px solid #9b1b30; }

.rumor-mill__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.rumor-mill__name {
    font-family: 'Lora', Georgia, serif;
    font-style: italic;
    font-size: 15px;
    color: #3a2214;
}

.rumor-mill__right {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.rumor-mill__remove { opacity: 0.6; }
.rumor-mill__remove:hover { opacity: 1; }

.rumor-mill__desc {
    font-family: 'Lora', Georgia, serif;
    font-style: italic;
    font-size: 12.5px;
    color: #6b5a47;
    line-height: 1.55;
    margin-top: 3px;
}

.rumor-mill__add { margin-top: 12px; }

/* Verdict stamp — the DM-private truth, rendered like the codex "Unverified" stamp but
   coloured per verdict. Border + text share one colour via currentColor. */
.rumor-stamp {
    display: inline-block;
    transform: rotate(-6deg);
    padding: 2px 8px;
    border: 1.5px solid currentColor;
    border-radius: 3px;
    font-family: 'Cinzel', serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0.9;
}
.rumor-stamp--true       { color: #2e7d32; }
.rumor-stamp--false      { color: #b3261e; }
.rumor-stamp--partial    { color: #b8860b; }
.rumor-stamp--misleading { color: #8338ec; }
.rumor-stamp--unknown    { color: #8a7a66; }

/* Render inline HTML from rich text fields correctly */
.ed-prose p { margin: 0 0 6px; }
.ed-prose ul, .ed-prose ol { margin: 0 0 6px; padding-left: 20px; }
.ed-prose strong { font-weight: 600; color: #1a1209; }

/* ── Trait pill ──────────────────────────────────────────────────────────── */
.ed-trait-pill {
    display: inline-block;
    padding: 2px 9px;
    background: rgba(115,0,0,0.07);
    border: 1px solid rgba(115,0,0,0.22);
    border-radius: 12px;
    font-family: 'Lora', Georgia, serif;
    font-size: 11px;
    color: #730000;
    margin: 0 4px 5px 0;
}

/* ── Two-column field row ────────────────────────────────────────────────── */
.ed-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 14px;
}

/* ── Alignment grid ──────────────────────────────────────────────────────── */
.ed-alignment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    width: 100%;
}

.ed-alignment-cell {
    padding: 4px 2px;
    text-align: center;
    background: rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.09);
    border-radius: 1px;
}

.ed-alignment-cell--selected {
    background: rgba(115,0,0,0.10);
    border-color: rgba(115,0,0,0.42);
}

.ed-alignment-cell__text {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 7px;
    color: #7a6a50;
    line-height: 1.3;
    display: block;
}

.ed-alignment-cell--selected .ed-alignment-cell__text {
    color: #730000;
    font-weight: 700;
}

/* ── Header bar ──────────────────────────────────────────────────────────── */
.ed-header {
    background: #fdf8f0;
    border-bottom: 1.5px solid rgba(184,146,12,0.32) !important;
    padding: 0.75rem 2rem 0.875rem;
    margin: 0 -2rem;
}

/* ── Alignment grid — interactive (edit mode) ────────────────────────────── */
.ed-alignment-cell--btn {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.09);
    border-radius: 1px;
    padding: 4px 2px;
    text-align: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, border-color 0.12s;
    width: 100%;
}

.ed-alignment-cell--btn:hover {
    background: rgba(115,0,0,0.08);
    border-color: rgba(115,0,0,0.30);
}

.ed-alignment-cell--btn:hover .ed-alignment-cell__text {
    color: #730000;
}

.ed-alignment-cell--btn.ed-alignment-cell--selected {
    background: rgba(115,0,0,0.10);
    border-color: rgba(115,0,0,0.42);
}

.ed-alignment-cell--btn.ed-alignment-cell--selected .ed-alignment-cell__text {
    color: #730000;
    font-weight: 700;
}

/* ── Possessions read-mode list ──────────────────────────────────────────── */
.ed-possessions-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 2px;
}

.ed-possessions-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    background: rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 2px;
    font-family: 'Lora', Georgia, serif;
    font-size: 12px;
    color: #1a1209;
}

/* Link icon colour inside possession items */
.ed-possessions-item .mud-icon-root {
    font-size: 0.82rem !important;
    color: #730000 !important;
}

/* ── Services offered — price table (read mode) ──────────────────────────── */
.store-inv__header-row {
    display: flex;
    justify-content: space-between;
    padding: 0 0 5px;
    border-bottom: 1px solid rgba(0,0,0,0.12);
    margin-bottom: 2px;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 8px;
    letter-spacing: 0.14em;
    color: #8a681e;
    text-transform: uppercase;
}

.store-inv__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 7px 0;
    border-bottom: 1px solid rgba(0,0,0,0.065);
}

.store-inv__name {
    font-family: 'Lora', Georgia, serif;
    font-size: 13px;
    color: #1a1209;
}

.store-inv__price-col {
    font-family: 'Lora', Georgia, serif;
    font-size: 13px;
    color: #7a6a50;
    flex-shrink: 0;
    margin-left: 12px;
    text-align: right;
    font-weight: 400;
}

/* Gallery as hero — when EntityGalleryPanel sits at the top of an ed-section, give cards more breathing room. */
.ed-section--gallery .ed-gallery__strip > .ed-gallery__card {
    flex: 0 0 260px;
}

.ed-section--gallery .ed-gallery__thumb {
    aspect-ratio: 16 / 10;
}

/* ════════════════════════════════════════════════════════════════════════════
   Campaign dashboard columns (Direction B2) — shared by Home + Campaigns pages.
   Pairs with the scoped <CampaignRow> card. DM = crimson, Player = slate.
   ════════════════════════════════════════════════════════════════════════════ */
.cmp-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.cmp-colhead {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 11px;
}

.cmp-colhead__icon {
    width: 34px;
    height: 34px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.cmp-colhead__title {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin: 0;
}

.cmp-colhead__sub {
    font-family: 'Lora', Georgia, serif;
    font-size: 11px;
    font-style: italic;
    color: #7a6a50;
}

.cmp-colhead--dm {
    border-bottom: 2px solid rgba(115, 0, 0, 0.10);
}
.cmp-colhead--dm .cmp-colhead__icon { background: rgba(115, 0, 0, 0.10); }
.cmp-colhead--dm .cmp-colhead__title { color: #730000; }

.cmp-colhead--player {
    border-bottom: 2px solid rgba(58, 80, 104, 0.12);
}
.cmp-colhead--player .cmp-colhead__icon { background: rgba(58, 80, 104, 0.12); }
.cmp-colhead--player .cmp-colhead__title { color: #3a5068; }

/* "New Campaign" tile (under the DM column) */
.cmp-newbtn {
    display: block;
    width: 100%;
    margin-top: 2px;
    padding: 11px;
    text-align: center;
    background: transparent;
    border: 1.5px dashed rgba(184, 146, 12, 0.32);
    border-radius: 5px;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    color: #8a6a1e;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.cmp-newbtn:hover {
    background: rgba(184, 146, 12, 0.06);
}

/* Empty column state (no player invites / nothing to show) */
.cmp-empty {
    border: 1.5px dashed rgba(0, 0, 0, 0.10);
    border-radius: 5px;
    padding: 34px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    text-align: center;
    background: rgba(0, 0, 0, 0.012);
}

.cmp-empty__icon {
    font-size: 30px;
    opacity: 0.3;
}

.cmp-empty__title {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: #3a2214;
    font-weight: 600;
}

.cmp-empty__text {
    font-family: 'Lora', Georgia, serif;
    font-size: 12px;
    font-style: italic;
    color: #7a6a50;
    line-height: 1.6;
    max-width: 280px;
}

.cmp-empty__btn {
    margin-top: 4px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid rgba(184, 146, 12, 0.32);
    border-radius: 3px;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 9.5px;
    letter-spacing: 0.06em;
    color: #8a6a1e;
    text-transform: uppercase;
    text-decoration: none;
}

@media (max-width: 960px) {
    .cmp-cols {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* ── Image source dialog (Upload / Gallery / Library) — asset-library slice 4 ── */

.isd-upload {
    position: relative;
    border: 2px dashed rgba(184, 146, 12, 0.4);
    border-radius: 6px;
    padding: 32px 16px;
    text-align: center;
    margin: 12px 0;
}

.isd-upload__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.isd-upload__hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--mud-palette-text-secondary);
}

.isd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
    padding: 12px 4px;
    max-height: 420px;
    overflow-y: auto;
}

.isd-grid__cell {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--mud-palette-lines-default);
}

.isd-grid__cell:hover {
    outline: 2px solid var(--mud-palette-primary);
}

.isd-grid__cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.isd-grid__badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    border-radius: 10px;
    font-size: 11px;
    line-height: 1;
    padding: 3px 7px;
}

/* ── User Library page — asset-library slice 4 ── */

.lib-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.lib-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.lib-card__thumb {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--mud-palette-background-gray);
}

.lib-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lib-card__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px 6px;
}

/* ── Play tray (Phase 4.5) — docked table tray: dice, roll log, combat ─────────
   Unobtrusive by design: fixed bottom-right, collapsed to a single dock button,
   never auto-opens, zero layout shift on the host page. */

.play-tray {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 1250; /* above page content, below MudBlazor dialogs (~1300+) */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    pointer-events: none; /* children re-enable — the empty flex area must not block the page */
}

.play-tray-dock {
    pointer-events: auto;
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid rgba(184,146,12,0.55);
    background: #5c0000;
    color: #ffd5c2;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(26,18,9,0.35);
    transition: transform 120ms ease, box-shadow 120ms ease;
}
.play-tray-dock:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(26,18,9,0.45);
}

.play-tray-dock__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: #9b1b30;
    color: #fff;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.6);
}

.play-tray-panel {
    pointer-events: auto;
    width: min(460px, calc(100vw - 32px));
    max-height: min(70vh, 640px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fdf8f0;
    border: 1px solid rgba(184,146,12,0.45);
    border-radius: 10px;
}

.play-tray-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 8px 14px;
    background: #f0e8d4;
    border-bottom: 2px solid #9b1b30;
}
.play-tray-header__icon { color: #730000; }
.play-tray-header__titles { display: flex; flex-direction: column; line-height: 1.15; }
.play-tray-header__title {
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 700;
    font-size: 0.95rem;
    color: #1a1209;
}
.play-tray-header__campaign {
    font-size: 0.72rem;
    color: #7a6a50;
}

.play-tray-tabs { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* Scroll the MudTabs panels area itself (a guaranteed element) with an EXPLICIT viewport-relative
   cap. The flex height chain doesn't resolve reliably through MudTabs' 4 nested levels, so the
   panel was capping at the tray max-height with overflow:hidden and NO scrollbar — clipping the
   Combat tab's add-combatant form off the bottom (T-037). A hard max-height + overflow-y:auto on a
   block always produces a scrollbar regardless of the flex chain. 104px ≈ header + tab bar chrome. */
.play-tray-tabs .mud-tabs-panels {
    max-height: calc(min(70vh, 640px) - 104px);
    overflow-y: auto;
}

/* ── Dice section ── */
.play-tray-dice { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; }

.play-tray-visibility { width: 100%; }
.play-tray-visibility__btn {
    flex: 1 1 0;
    border: 1px solid rgba(184,146,12,0.4) !important;
    color: #7a6a50 !important;
    font-family: 'Cinzel', Georgia, serif;
    text-transform: none;
}
.play-tray-visibility__btn--active {
    background: #730000 !important;
    border-color: #730000 !important;
    color: #ffffff !important;
}

.play-tray-ghost-toggle { margin-left: -6px; }
.play-tray-hint { font-size: 0.75rem; color: #7a6a50; font-style: italic; }

.play-tray-quickdice {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.play-die {
    min-width: 44px;
    min-height: 44px;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1.5px solid rgba(184,146,12,0.5);
    background: #f7efdd;
    color: #5c3d00;
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 100ms ease, transform 80ms ease;
}
.play-die:hover:not(:disabled) { background: #efe2c4; transform: translateY(-1px); }
.play-die:disabled { opacity: 0.55; cursor: default; }
.play-die--signature {
    border-color: #9b1b30;
    background: #fbeee9;
    color: #730000;
}

.play-tray-modrow {
    display: flex;
    align-items: center;
    gap: 4px;
}
.play-tray-modrow__label {
    font-size: 0.78rem;
    color: #7a6a50;
    margin-right: 4px;
}
.play-tray-modrow__value {
    min-width: 34px;
    text-align: center;
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 700;
    color: #1a1209;
}

.play-tray-formula {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.play-tray-formula .mud-input-control { flex: 1 1 auto; }
.play-tray-roll-btn { margin-top: 6px; min-width: 72px; }
.play-tray-label-field { margin-top: -4px; }

.play-tray-error {
    padding: 7px 10px;
    border-radius: 6px;
    border: 1px solid rgba(155,27,48,0.5);
    background: rgba(155,27,48,0.08);
    color: #9b1b30;
    font-size: 0.8rem;
}

.play-tray-last {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(184,146,12,0.4);
    background: #f7efdd;
}
.play-tray-last__caption { font-size: 0.78rem; color: #7a6a50; }
.play-tray-last__total {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #1a1209;
}
.play-tray-last__detail { font-size: 0.74rem; color: #7a6a50; }

/* ── Log section ── */
.play-tray-log { display: flex; flex-direction: column; padding: 4px 14px 10px; }
.play-tray-empty {
    padding: 18px 0;
    text-align: center;
    font-style: italic;
    color: #7a6a50;
    font-size: 0.85rem;
}

.play-roll {
    padding: 8px 2px;
    border-top: 1px solid var(--mud-palette-lines-default);
}
.play-roll:first-of-type { border-top: none; }
.play-roll--mine { background: rgba(184,146,12,0.06); }

.play-roll__head {
    display: flex;
    align-items: center;
    gap: 6px;
}
.play-roll__roller {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: #5c3d00;
}
.play-roll__badge { color: #9b1b30; }
.play-roll__label {
    font-size: 0.72rem;
    color: #fdf8f0;
    background: #730000;
    border-radius: 9px;
    padding: 1px 8px;
}
.play-roll__time { margin-left: auto; font-size: 0.7rem; color: #a5947a; }

.play-roll__body {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 2px;
}
.play-roll__formula { font-size: 0.8rem; color: #1a1209; }
.play-roll__detail { flex: 1 1 auto; font-size: 0.72rem; color: #7a6a50; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.play-roll__total {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1209;
}

.play-roll--ghost {
    display: flex;
    align-items: center;
    gap: 8px;
}
.play-roll__ghost-text { font-style: italic; color: #7a6a50; font-size: 0.8rem; }

.play-roll--nat20 .play-roll__total,
.play-tray-last.play-roll--nat20 .play-tray-last__total { color: #8a6a1e; text-shadow: 0 0 6px rgba(184,146,12,0.45); }
.play-roll--nat1 .play-roll__total,
.play-tray-last.play-roll--nat1 .play-tray-last__total { color: #9b1b30; }

/* ── Combat section (4.5E) ── */
.play-tray-combat { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; }

.play-prompt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1.5px solid #9b1b30;
    background: rgba(155,27,48,0.07);
    color: #1a1209;
    font-size: 0.85rem;
}
.play-prompt .mud-icon-root { color: #9b1b30; }

.play-enc {
    border: 1px solid rgba(184,146,12,0.4);
    border-radius: 8px;
    background: #fbf5e8;
    overflow: hidden;
}
.play-enc--live { border-color: #9b1b30; }

.play-enc__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f0e8d4;
    border-bottom: 1px solid rgba(184,146,12,0.32);
}
.play-enc__head--click { cursor: pointer; }
.play-enc__live-icon { color: #9b1b30; }
.play-enc__name {
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 700;
    font-size: 0.88rem;
    color: #1a1209;
    flex: 1 1 auto;
}
.play-enc__round {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: #9b1b30;
    white-space: nowrap;
}
.play-enc__count { font-size: 0.72rem; color: #7a6a50; white-space: nowrap; }

.play-enc__rows { display: flex; flex-direction: column; padding: 4px 10px; }

.play-cmb {
    padding: 6px 2px;
    border-top: 1px solid var(--mud-palette-lines-default);
}
.play-cmb:first-of-type { border-top: none; }
.play-cmb--active { background: rgba(155,27,48,0.06); }
.play-cmb--removed { opacity: 0.45; text-decoration: line-through; }
.play-cmb--hidden .play-cmb__name { color: #7a6a50; font-style: italic; }
.play-cmb--mine { background: rgba(184,146,12,0.08); }

.play-cmb__main { display: flex; align-items: center; gap: 6px; }
.play-cmb__turn { width: 14px; color: #9b1b30; font-size: 0.8rem; flex: 0 0 auto; }
.play-cmb__name {
    font-family: 'Lora', Georgia, serif;
    font-size: 0.86rem;
    color: #1a1209;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.play-cmb__spacer { flex: 1 1 auto; }
.play-cmb__init { max-width: 56px; flex: 0 0 auto; }
.play-cmb__init input, .play-cmb__hp input { text-align: center; font-size: 0.82rem !important; padding: 4px 2px !important; }
.play-cmb__hp { max-width: 48px; flex: 0 0 auto; }
.play-cmb__hpmax { font-size: 0.74rem; color: #7a6a50; white-space: nowrap; }
.play-cmb__mod { font-size: 0.74rem; color: #7a6a50; }
.play-cmb__initval {
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 700;
    font-size: 0.84rem;
    color: #5c3d00;
    min-width: 26px;
    text-align: center;
}

.play-cmb__conds { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 0 20px; }
.play-cond {
    display: inline-block;
    padding: 0 7px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: default;
    line-height: 1.7;
}
.play-enc--live .play-cmb__conds .play-cond { cursor: pointer; }

.play-enc__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-top: 1px solid rgba(184,146,12,0.25);
}

.play-enc__addlink {
    padding: 6px 12px 10px;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8a6a1e;
    cursor: pointer;
}
.play-enc__addlink:hover { color: #5c3d00; }

.play-addform {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 12px 12px;
    border-top: 1px dashed rgba(184,146,12,0.35);
}
.play-addform__row { display: flex; align-items: center; gap: 8px; }
.play-addform__hp { max-width: 90px; }
.play-addform__mod { max-width: 90px; }

.play-newenc { display: flex; flex-direction: column; gap: 6px; }
.play-newenc__row { display: flex; align-items: flex-end; gap: 8px; }
.play-newenc__row .mud-input-control { flex: 1 1 auto; }

.play-enc__beatpick { padding: 0 10px 6px; }

/* Beat chip on an encounter head — deep-links to the planner. */
.play-enc__beat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 40%;
    padding: 1px 8px 1px 5px;
    border-radius: 999px;
    border: 1px solid rgba(184,146,12,0.55);
    background: rgba(184,146,12,0.14);
    color: #7a5c0a;
    font-size: 0.7rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
}
.play-enc__beat span { overflow: hidden; text-overflow: ellipsis; }
.play-enc__beat:hover { background: rgba(184,146,12,0.26); }
.play-enc__beat .mud-icon-root { font-size: 0.9rem; }

/* Collapsed combat strip — "R3 · Grukk" pill above the dock. */
.play-tray-strip {
    pointer-events: auto;
    padding: 5px 14px;
    border-radius: 999px;
    border: 1.5px solid #9b1b30;
    background: #fdf8f0;
    color: #9b1b30;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(26,18,9,0.25);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Initiative prompt: gentle dock pulse — a nudge, never a modal. */
@keyframes play-dock-pulse {
    0%, 100% { box-shadow: 0 3px 10px rgba(26,18,9,0.35); }
    50%      { box-shadow: 0 0 0 9px rgba(155,27,48,0.25); }
}
.play-tray-dock--pulse { animation: play-dock-pulse 1.6s ease-in-out infinite; }

/* Touch/mobile: the tray becomes a bottom sheet (4D standing constraint). */
@media (max-width: 600px) {
    .play-tray {
        right: 8px;
        bottom: 8px;
        left: 8px;
        align-items: stretch;
    }
    .play-tray-dock { align-self: flex-end; }
    .play-tray-strip { align-self: flex-end; }
    .play-tray-panel {
        width: 100%;
        max-height: 78vh;
    }
    /* Match the mobile panel cap (T-037) so the panels area scrolls, not the whole tray. */
    .play-tray-tabs .mud-tabs-panels {
        max-height: calc(78vh - 104px);
    }
}


/* ── Battlemap full-bleed (7P.1) ─────────────────────────────────────────────
   The battlemap page escapes the 1400px content column: maps are large images
   that should use every pixel the sidebar/app-bar leave. Scoped via :has() on
   the page's root marker so every other page keeps the comfortable column. */
/* The element selector (div.) out-specifies the scoped WasmMainLayout.razor.css rule
   (.app-body-container[b-…], 0-2-0) — the scoped bundle loads AFTER app.css, so a specificity
   tie would lose. */
/* Pin the page to the viewport: the battlemap must never introduce a page scrollbar.
   No hardcoded app-bar math — the main content becomes a 100dvh flex column (its own
   padding-top already equals the real app-bar height), and the body container takes
   whatever remains. */
div.mud-main-content:has(.bm-fullbleed) {
    height: 100dvh;
    display: flex;
    flex-direction: column;
}
div.app-body-container:has(.bm-fullbleed) {
    max-width: none;
    margin: 0;
    padding: 0; /* 7P.6: rail sits flush against the app spine, full height — bookmark-in-a-book */
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ── Battlemap shell (7P.6): icon rail → drawer → canvas + floating session strip ──
   Roast-verdict design: prep tools live in the collapsible drawer; per-few-minutes
   session tools (fog/darkness/overlay) float ON the canvas, one click from the map. */
.bm-rail {
    width: 52px; flex-shrink: 0;
    display: flex; flex-direction: column; align-items: center;
    gap: 6px; padding: 10px 0;
    background: linear-gradient(180deg, #4a0b0b, #310707);
    border-right: 1px solid rgba(201,162,39,0.25);
}
.bm-rail-btn { color: rgba(240,230,210,0.75) !important; }
.bm-rail-btn:hover { color: #f5e9c9 !important; background: rgba(255,255,255,0.08) !important; }
.bm-rail-btn--active { color: #e8c15a !important; background: rgba(232,193,90,0.15) !important; box-shadow: inset 3px 0 0 #e8c15a; border-radius: 6px; }
.bm-rail-spacer { flex: 1; }

/* The drawer is one dark instrument across all three tabs — the same material as the
   chrome floating on the canvas. Its shared kit lives in the pane block further down. */
.bm-drawer { width: 330px; flex-shrink: 0; overflow-y: auto; }

/* ── Scene tree ───────────────────────────────────────────────────────────── */
.bm-folder-row {
    display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none;
    padding: 5px 7px; margin-top: 6px; border-radius: 8px;
    color: var(--pn-gold); border: 1px solid transparent;
}
.bm-folder-row:hover { background: var(--pn-raise); border-color: var(--pn-line); }
.bm-folder-name {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: 'Cinzel', Georgia, serif; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em;
}
.bm-folder-count {
    flex: 0 0 auto; font-size: 0.66rem; color: var(--pn-faint);
    border: 1px solid var(--pn-line); border-radius: 7px; padding: 0 6px;
}

.bm-scene-row {
    display: flex; align-items: center; gap: 3px; padding: 5px 7px; margin-bottom: 2px;
    border: 1px solid transparent; border-radius: 8px;
    transition: background 0.14s ease, border-color 0.14s ease;
}
.bm-scene-row:hover { background: var(--pn-raise); }
.bm-scene-row--open {
    background: rgba(232, 193, 90, 0.09); border-color: rgba(201, 162, 74, 0.45);
}
.bm-scene-row--infolder { margin-left: 14px; }
.bm-scene-name {
    flex: 1 1 auto; min-width: 0; padding: 2px 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; text-align: left; cursor: pointer;
    background: none; border: 0; color: var(--pn-ink); font-family: inherit; font-size: 0.86rem;
}
.bm-scene-name:hover { color: var(--pn-lit); }
.bm-scene-row--open .bm-scene-name { color: var(--pn-lit); }
/* LIVE — the one state on this page a DM must never misread. */
.bm-scene-live {
    flex: 0 0 auto; padding: 1px 6px; border-radius: 5px;
    background: rgba(111, 191, 115, 0.16); border: 1px solid rgba(111, 191, 115, 0.55);
    color: #8fe0a8; font-family: 'Cinzel', Georgia, serif; font-size: 0.56rem;
    font-weight: 700; letter-spacing: 0.1em;
}

.bm-confirm-row {
    display: flex; align-items: center; gap: 8px; padding: 7px 9px; margin: 2px 0 6px;
    background: rgba(176, 48, 64, 0.12); border: 1px solid rgba(176, 48, 64, 0.45);
    border-radius: 8px; font-size: 0.78rem; color: #d59aa4;
}
.bm-confirm-row span { flex: 1; }
.bm-edit-card {
    padding: 11px; margin: 2px 0 8px;
    background: rgba(0, 0, 0, 0.25); border: 1px solid var(--pn-line);
    border-top: 2px solid var(--pn-gold); border-radius: 10px;
}

.bm-canvas-wrap { flex: 1; min-width: 0; position: relative; overflow: hidden; }
.bm-canvas-host { width: 100%; height: 100%; }
.bm-canvas-host canvas { display: block; }

.bm-strip {
    position: absolute; top: 10px; left: 10px; z-index: 5;
    display: flex; align-items: center; gap: 2px; padding: 4px 8px;
    background: rgba(30,10,10,0.82); border: 1px solid rgba(232,193,90,0.35);
    border-radius: 10px; backdrop-filter: blur(3px); box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
.bm-strip-label { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(240,230,210,0.6); margin-right: 4px; }
.bm-strip-btn { color: rgba(240,230,210,0.8) !important; }
.bm-strip-btn:hover { color: #fff !important; }
.bm-strip-btn--armed { color: #e8c15a !important; background: rgba(232,193,90,0.18) !important; }
.bm-strip-divider { width: 1px; height: 20px; background: rgba(240,230,210,0.25); margin: 0 6px; }
.bm-strip-armed-hint { font-size: 0.75rem; color: #e8c15a; margin-left: 8px; white-space: nowrap; }

/* 7A.4 — vertical tool rail on the canvas (all members): pointer modes (select / ruler /
   templates). */
.bm-toolbar {
    position: absolute; top: 60px; left: 10px; z-index: 5;
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px;
    background: rgba(30,10,10,0.82); border: 1px solid rgba(232,193,90,0.35);
    border-radius: 10px; backdrop-filter: blur(3px); box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
.bm-toolbar-divider { height: 1px; width: 20px; background: rgba(240,230,210,0.25); margin: 4px 0; }
.bm-tool-btn {
    display: flex; flex-direction: column; align-items: center; gap: 0;
    background: none; border: none; cursor: pointer;
    padding: 3px 7px; border-radius: 6px;
    color: rgba(240,230,210,0.8); line-height: 1;
}
.bm-tool-btn:hover { color: #fff; background: rgba(255,255,255,0.08); }
.bm-tool-btn--armed { color: #e8c15a; background: rgba(232,193,90,0.18); }
.bm-tool-num { font-size: 0.6rem; font-weight: 600; margin-top: 1px; }

/* 7P.6b — folder tree DnD + selection */
.bm-drop-target { outline: 1.5px dashed rgba(201, 162, 74, 0.6); outline-offset: -1.5px; }
.bm-scene-row[draggable="true"] { cursor: grab; }
.bm-scene-check { flex: 0 0 auto; width: 14px; height: 14px; margin: 0 3px 0 0; accent-color: var(--pn-gold); cursor: pointer; }
.bm-root-drop {
    display: flex; align-items: center; gap: 6px; justify-content: center;
    margin-top: 10px; padding: 11px;
    border: 1px dashed rgba(201, 162, 74, 0.45); border-radius: 10px;
    color: var(--pn-gold); font-size: 0.8rem; background: rgba(232, 193, 90, 0.05);
}

/* ── 7R token ring popups + panel image chips ─────────────────────────────── */
.bm-ring-popup {
    position: absolute; z-index: 40; max-width: 360px;
    background: linear-gradient(180deg, #23232e 0%, #1a1a22 100%);
    border: 1px solid rgba(232,193,90,0.5); border-top: 2px solid #e8c15a; border-radius: 12px;
    padding: 12px 14px; box-shadow: 0 10px 32px rgba(0,0,0,0.65); color: #ececf2;
}
.bm-ring-popup-title {
    font-size: 0.92rem; font-weight: 700; color: #e8c15a;
    letter-spacing: 0.03em; text-transform: uppercase;
}
/* MudIconButton defaults to `--mud-palette-action-default` (rgba(0,0,0,.54)) —
   invisible on this ground. Muted gold at rest, lit on hover, same language as
   the popup's other controls. */
.bm-ring-popup-x { color: #b7ab8d !important; transition: color 0.12s, background 0.12s; }
.bm-ring-popup-x:hover { color: #e8c15a !important; background: rgba(232, 193, 90, 0.14) !important; }
.bm-ring-popup-conditions { display: flex; flex-wrap: wrap; gap: 6px; max-width: 340px; }
.bm-cond-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px 4px 7px; border-radius: 14px; cursor: pointer;
    background: rgba(255,255,255,0.04); border: 1.5px solid var(--cond, #888);
    color: #e6e6ec; font-size: 0.8rem; font-weight: 600; line-height: 1.2;
    transition: background 0.12s, transform 0.06s;
}
.bm-cond-chip:hover { background: rgba(255,255,255,0.10); }
.bm-cond-chip:active { transform: scale(0.96); }
.bm-cond-chip--on {
    background: color-mix(in srgb, var(--cond, #888) 38%, #14141a);
    box-shadow: inset 0 0 0 1px var(--cond, #888), 0 0 6px color-mix(in srgb, var(--cond, #888) 55%, transparent);
    color: #ffffff;
}
.bm-cond-chip-icon { font-size: 0.95rem; line-height: 1; }
.bm-cond-chip-ico { width: 17px; height: 17px; object-fit: contain; }
.bm-hp-row { display: flex; align-items: center; gap: 6px; }
.bm-hp-btn {
    min-width: 42px; padding: 7px 10px; border-radius: 8px; cursor: pointer;
    background: rgba(255,255,255,0.05); border: 1.5px solid rgba(232,193,90,0.55);
    color: #f2e6c8; font-size: 0.92rem; font-weight: 700;
    transition: background 0.12s, transform 0.06s;
}
.bm-hp-btn:hover { background: rgba(232,193,90,0.16); }
.bm-hp-btn:active { transform: scale(0.95); }
.bm-hp-btn--dmg { border-color: rgba(220,53,69,0.65); color: #ff9daa; }
.bm-hp-btn--dmg:hover { background: rgba(220,53,69,0.18); }
.bm-hp-btn--heal { border-color: rgba(60,160,90,0.7); color: #8fe0a8; }
.bm-hp-btn--heal:hover { background: rgba(60,160,90,0.18); }
.bm-hp-btn--set { background: #7a1f28; border-color: #b03040; color: #fff; }
.bm-hp-btn--set:hover { background: #932934; }
.bm-hp-input {
    width: 72px; padding: 7px 6px; text-align: center; border-radius: 8px;
    background: #12121a; border: 1.5px solid rgba(232,193,90,0.5);
    color: #ffffff; font-size: 1.05rem; font-weight: 700;
}
.bm-hp-input:focus { outline: none; border-color: #e8c15a; }
.bm-hp-max { margin-top: 7px; font-size: 0.78rem; color: #9a9aa6; }
.bm-hp-max b { color: #d7d7e0; }
.bm-ring-popup-img {
    width: 56px; height: 56px; object-fit: cover; border-radius: 50%; cursor: pointer;
    border: 2px solid transparent;
}
.bm-ring-popup-img:hover { border-color: rgba(232,193,90,0.7); }
.bm-ring-popup-img--active { border-color: #e8c15a; }
/* ══ Drawer pane kit ════════════════════════════════════════════════════════
   One dark instrument for all three tabs — scene tree, scene creator, and the
   token muster roll. It is cut from the same material as the chrome already
   floating on the canvas (strip / toolbar / ring popup) because it is read
   beside a dark map in a dim room, sometimes for hours.

   Controls are native elements, not MudBlazor fields — the same reason the ring
   popups use raw <button>/<input>: the Mud theme is light-crimson and does not
   survive on this ground. `bm-pn-*` is the shared kit; `bm-tk-*` is what only
   the token roster needs. */
.bm-drawer {
    --pn-ink: #ede0c6;
    --pn-dim: #b6a488;
    --pn-faint: #8d7f6c;
    --pn-gold: #c9a24a;
    --pn-lit: #e8c15a;
    --pn-line: rgba(201, 162, 74, 0.20);
    --pn-raise: rgba(255, 255, 255, 0.045);
    --pn-sunk: rgba(0, 0, 0, 0.28);
    background: linear-gradient(180deg, #241519 0%, #1a1113 46%, #140d0f 100%);
    border-right: 1px solid var(--pn-line);
    box-shadow: 2px 0 14px rgba(0, 0, 0, 0.4);
    color: var(--pn-ink);
    font-family: 'Lora', Georgia, serif;
    scrollbar-width: thin;
    scrollbar-color: rgba(201, 162, 74, 0.35) transparent;
}
.bm-drawer ::-webkit-scrollbar { width: 8px; }
.bm-drawer ::-webkit-scrollbar-thumb { background: rgba(201, 162, 74, 0.3); border-radius: 4px; }
/* The app has no global border-box; these are native controls, so say it here or
   every padded full-width field overflows the 330px drawer. */
.bm-drawer input,
.bm-drawer select,
.bm-drawer button { box-sizing: border-box; }

/* Pane header — sticky, so a list scrolls under a fixed title line. */
.bm-pn-head {
    position: sticky; top: 0; z-index: 3;
    display: flex; align-items: center; gap: 8px; min-height: 46px;
    padding: 12px 14px 11px;
    background: linear-gradient(180deg, #241519 78%, rgba(36, 21, 25, 0.92));
    backdrop-filter: blur(2px);
}
.bm-pn-head::after {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 1px;
    background: linear-gradient(90deg, var(--pn-gold), rgba(201, 162, 74, 0));
}
.bm-pn-title {
    font-family: 'Cinzel', Georgia, serif; font-size: 0.95rem; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--pn-lit);
}
.bm-pn-count { margin-left: auto; font-size: 0.76rem; color: var(--pn-faint); font-style: italic; }

.bm-pn-body { padding: 6px 14px 18px; }

/* Prose that explains a control rather than labelling it. */
.bm-pn-note { margin: 0 0 10px; font-size: 0.78rem; line-height: 1.5; color: var(--pn-dim); }
/* Monospace here is literal: these are file extensions the user types or picks. */
.bm-pn-note code {
    padding: 0 4px; border-radius: 4px; background: var(--pn-sunk);
    font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.72rem; color: var(--pn-ink);
}

/* Filter — appears only once the roster is long enough to need it. */
.bm-pn-filter {
    width: 100%; margin: 6px 0 10px; padding: 7px 10px;
    background: var(--pn-sunk); border: 1px solid var(--pn-line); border-radius: 8px;
    color: var(--pn-ink); font-family: inherit; font-size: 0.84rem;
}
.bm-pn-filter::placeholder { color: var(--pn-faint); }
.bm-pn-filter:focus { outline: none; border-color: rgba(201, 162, 74, 0.6); }

/* Band label — small-caps rule, deliberately not another tracked eyebrow. */
.bm-pn-band {
    display: flex; align-items: center; gap: 8px;
    margin: 16px 0 6px; color: var(--pn-gold);
    font-family: 'Cinzel', Georgia, serif; font-size: 0.7rem;
    letter-spacing: 0.1em; text-transform: uppercase;
}
.bm-pn-band::after { content: ""; flex: 1; height: 1px; background: var(--pn-line); }
.bm-pn-band b { font-weight: 600; color: var(--pn-faint); }

/* ── Roster plate ─────────────────────────────────────────────────────────── */
.bm-tk-plate {
    border: 1px solid transparent; border-radius: 10px; margin-bottom: 3px;
    transition: background 0.14s ease, border-color 0.14s ease;
}
.bm-tk-plate:hover { background: var(--pn-raise); }
.bm-tk-plate--open {
    background: rgba(0, 0, 0, 0.22); border-color: var(--pn-line);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.bm-tk-plate--dimmed .bm-tk-av,
.bm-tk-plate--dimmed .bm-tk-name { opacity: 0.62; }

.bm-tk-row {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 7px 8px; background: none; border: 0; border-radius: 10px;
    color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.bm-tk-row:focus-visible { outline: 2px solid var(--pn-lit); outline-offset: -2px; }

/* Portrait: the token's own image when it has one, else its map colour with an
   initial — so a plate always reads as the thing standing on the board. */
.bm-tk-av {
    position: relative; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--av, #6b6b7a) center/cover no-repeat;
    border: 2px solid var(--ring, rgba(255, 255, 255, 0.25));
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    font-family: 'Cinzel', Georgia, serif; font-size: 0.9rem; font-weight: 700;
    color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.bm-tk-av--pc { --ring: var(--pn-lit); }
.bm-tk-av--gm { border-style: dashed; --ring: rgba(201, 162, 74, 0.45); }
.bm-tk-plate--open .bm-tk-av { box-shadow: 0 0 0 3px rgba(232, 193, 90, 0.16), 0 1px 4px rgba(0, 0, 0, 0.5); }
/* Footprint badge — a Huge creature says so on its own portrait. */
.bm-tk-av-sq {
    position: absolute; right: -3px; bottom: -3px; min-width: 15px; height: 15px; padding: 0 3px;
    display: flex; align-items: center; justify-content: center;
    background: #1a1113; border: 1px solid var(--pn-line); border-radius: 5px;
    font-family: 'Cinzel', Georgia, serif; font-size: 0.56rem; font-weight: 700;
    color: var(--pn-lit); letter-spacing: 0;
}

.bm-tk-main { flex: 1 1 auto; min-width: 0; }
.bm-tk-name {
    display: block; font-size: 0.9rem; color: var(--pn-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bm-tk-sub { display: flex; align-items: center; gap: 6px; margin-top: 4px; }

/* Vitality meter — real data, the DM's primary read, not a decorative bar. */
.bm-tk-hp { flex: 1 1 auto; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
/* Scaled, not widened: damage lands often and this must never touch layout. */
.bm-tk-hp i {
    display: block; height: 100%; width: 100%;
    transform: scaleX(var(--frac, 0)); transform-origin: left center;
    background: var(--hue, #6fbf73); transition: transform 0.25s ease;
}
.bm-tk-hp-num { flex: 0 0 auto; font-size: 0.68rem; line-height: 1; color: var(--pn-faint); font-variant-numeric: tabular-nums; }

/* State marks — typographic, and only when the value is off its default. */
.bm-tk-marks { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.bm-tk-mark {
    display: inline-flex; align-items: center; gap: 2px; padding: 1px 5px;
    border: 1px solid var(--pn-line); border-radius: 5px;
    font-size: 0.64rem; font-weight: 600; letter-spacing: 0.03em;
    color: var(--pn-dim); white-space: nowrap;
}
.bm-tk-mark--gold { color: var(--pn-lit); border-color: rgba(201, 162, 74, 0.4); }
.bm-tk-mark--hidden { color: #d59aa4; border-color: rgba(213, 154, 164, 0.35); }
.bm-tk-caret { flex: 0 0 auto; color: var(--pn-faint); transition: transform 0.2s ease; }
.bm-tk-plate--open .bm-tk-caret { transform: rotate(180deg); color: var(--pn-lit); }

/* ── Expanded editor ──────────────────────────────────────────────────────── */
.bm-tk-edit { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.22s cubic-bezier(0.16, 1, 0.3, 1); }
.bm-tk-edit > div { overflow: hidden; }
.bm-tk-plate--open .bm-tk-edit { grid-template-rows: 1fr; }
.bm-tk-edit-in { padding: 2px 10px 10px; }

.bm-pn-group { margin-top: 10px; }
.bm-pn-group > h4 {
    margin: 0 0 6px; font-family: 'Cinzel', Georgia, serif; font-size: 0.62rem; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--pn-faint);
}
.bm-pn-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.bm-pn-field { display: inline-flex; align-items: center; gap: 5px; }
.bm-pn-field > label { font-size: 0.72rem; color: var(--pn-dim); }
.bm-pn-num {
    width: 58px; padding: 5px 6px; text-align: center;
    background: var(--pn-sunk); border: 1px solid var(--pn-line); border-radius: 7px;
    color: var(--pn-ink); font-family: inherit; font-size: 0.82rem; font-variant-numeric: tabular-nums;
}
.bm-pn-num:focus { outline: none; border-color: rgba(201, 162, 74, 0.65); }
.bm-pn-num--wide { width: 74px; }
.bm-pn-num::-webkit-outer-spin-button, .bm-pn-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bm-pn-num[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* Stepper: −  value  + , used for footprint and elevation. */
.bm-pn-step { display: inline-flex; align-items: center; background: var(--pn-sunk); border: 1px solid var(--pn-line); border-radius: 7px; }
.bm-pn-step button {
    width: 24px; height: 26px; background: none; border: 0; cursor: pointer;
    color: var(--pn-dim); font-size: 0.95rem; line-height: 1;
}
.bm-pn-step button:hover:not(:disabled) { color: var(--pn-lit); background: rgba(232, 193, 90, 0.12); }
.bm-pn-step button:disabled { opacity: 0.3; cursor: default; }
.bm-pn-step span {
    min-width: 40px; text-align: center; font-size: 0.76rem; color: var(--pn-ink);
    font-variant-numeric: tabular-nums;
}

/* Small square icon toggle — the pane's only icon control. */
.bm-pn-tog {
    width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--pn-sunk); border: 1px solid var(--pn-line); border-radius: 7px;
    color: var(--pn-dim); cursor: pointer; transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.bm-pn-tog:hover { color: var(--pn-lit); border-color: rgba(201, 162, 74, 0.5); }
.bm-pn-tog--on { color: var(--pn-lit); background: rgba(232, 193, 90, 0.14); border-color: rgba(201, 162, 74, 0.55); }
.bm-pn-tog--warn { color: #d59aa4; border-color: rgba(213, 154, 164, 0.4); background: rgba(213, 154, 164, 0.1); }
/* Row-scale variant: list rows carry several actions and cannot afford 28px each. */
.bm-pn-tog--sm { width: 24px; height: 24px; background: none; border-color: transparent; }
.bm-pn-tog--sm:hover { background: rgba(232, 193, 90, 0.12); border-color: var(--pn-line); }
.bm-pn-tog--live { color: #8fe0a8; }
.bm-pn-tog--danger:hover { color: #ff9daa; border-color: rgba(255, 157, 170, 0.5); background: rgba(213, 154, 164, 0.12); }

.bm-pn-thumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 11px; }
.bm-pn-thumb { position: relative; width: 34px; height: 34px; }
.bm-pn-thumb img {
    width: 34px; height: 34px; object-fit: cover; border-radius: 8px;
    border: 1px solid var(--pn-line);
}
.bm-pn-thumb--active img { border-color: var(--pn-lit); box-shadow: 0 0 0 2px rgba(232, 193, 90, 0.2); }
/* A map is landscape; showing it as a 34px circle told you nothing. */
.bm-pn-thumb--map { width: 56px; height: 36px; }
.bm-pn-thumb--map img { width: 56px; height: 36px; border-radius: 6px; }
.bm-pn-thumb button {
    position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: #2a1a1d; border: 1px solid var(--pn-line); border-radius: 50%;
    color: var(--pn-dim); font-size: 0.6rem; line-height: 1; cursor: pointer;
}
.bm-pn-thumb button:hover { color: #ff9daa; border-color: rgba(255, 157, 170, 0.6); }

.bm-pn-danger {
    margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--pn-line);
    display: flex; align-items: center; gap: 8px;
}
.bm-pn-link {
    background: none; border: 0; padding: 2px 0; cursor: pointer;
    font-family: inherit; font-size: 0.76rem; color: var(--pn-faint); text-decoration: underline;
    text-underline-offset: 3px; text-decoration-color: rgba(141, 127, 108, 0.5);
}
.bm-pn-link:hover { color: #ff9daa; text-decoration-color: rgba(255, 157, 170, 0.6); }
.bm-pn-danger em { font-size: 0.74rem; line-height: 1.3; color: #d59aa4; font-style: normal; flex: 1; }
.bm-pn-confirm {
    padding: 3px 10px; border-radius: 7px; cursor: pointer;
    background: #7a1f28; border: 1px solid #b03040; color: #fff;
    font-family: inherit; font-size: 0.76rem; font-weight: 600;
}
.bm-pn-confirm:hover { background: #932934; }

/* ── Add token ────────────────────────────────────────────────────────────── */
.bm-pn-add {
    width: 100%; margin-top: 14px; padding: 9px;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    background: none; border: 1px dashed rgba(201, 162, 74, 0.4); border-radius: 10px;
    color: var(--pn-gold); cursor: pointer;
    font-family: 'Cinzel', Georgia, serif; font-size: 0.74rem; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    transition: background 0.14s, border-color 0.14s, color 0.14s;
}
.bm-pn-add:hover { background: rgba(232, 193, 90, 0.08); border-color: var(--pn-lit); color: var(--pn-lit); }
/* Inline variant: sits beside a preview thumb instead of leading a list. */
.bm-pn-add--inline { width: auto; margin: 0; padding: 7px 12px; font-size: 0.68rem; }
.bm-pn-add--busy { opacity: 0.55; cursor: progress; }

.bm-pn-sheet {
    margin-top: 14px; padding: 12px; border-radius: 10px;
    background: rgba(0, 0, 0, 0.25); border: 1px solid var(--pn-line);
    border-top: 2px solid var(--pn-gold);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.bm-pn-sheet-head {
    display: flex; align-items: center; margin-bottom: 10px;
    font-family: 'Cinzel', Georgia, serif; font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--pn-lit);
}
.bm-pn-text {
    width: 100%; padding: 8px 10px;
    background: var(--pn-sunk); border: 1px solid var(--pn-line); border-radius: 8px;
    color: var(--pn-ink); font-family: inherit; font-size: 0.88rem;
}
.bm-pn-text::placeholder { color: var(--pn-faint); }
.bm-pn-text:focus { outline: none; border-color: rgba(201, 162, 74, 0.65); }
.bm-pn-select {
    width: 100%; padding: 7px 9px;
    background: var(--pn-sunk); border: 1px solid var(--pn-line); border-radius: 8px;
    color: var(--pn-ink); font-family: inherit; font-size: 0.8rem;
}
.bm-pn-select:focus { outline: none; border-color: rgba(201, 162, 74, 0.65); }
.bm-pn-select option { background: #1a1113; color: var(--pn-ink); }

.bm-pn-label {
    display: block; margin: 11px 0 5px;
    font-family: 'Cinzel', Georgia, serif; font-size: 0.6rem; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--pn-faint);
}
.bm-pn-swatches { display: flex; gap: 7px; }
.bm-pn-swatch {
    width: 26px; height: 26px; padding: 0; border-radius: 50%; cursor: pointer;
    background: var(--sw); border: 2px solid transparent;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.25), 0 1px 3px rgba(0, 0, 0, 0.5);
    transition: transform 0.1s ease, border-color 0.12s ease;
}
.bm-pn-swatch:hover { transform: scale(1.12); }
.bm-pn-swatch--on { border-color: var(--pn-lit); box-shadow: 0 0 0 2px rgba(232, 193, 90, 0.25); }

/* Segmented choice — replaces the create form's Size / Layer dropdowns. */
.bm-pn-seg { display: flex; background: var(--pn-sunk); border: 1px solid var(--pn-line); border-radius: 8px; overflow: hidden; }
.bm-pn-seg button {
    flex: 1 1 0; min-width: 0; padding: 6px 1px; background: none; border: 0; cursor: pointer;
    color: var(--pn-dim); font-family: inherit; font-size: 0.7rem; line-height: 1.15;
    border-right: 1px solid var(--pn-line); overflow: hidden; text-overflow: ellipsis;
}
.bm-pn-seg button:last-child { border-right: 0; }
.bm-pn-seg button:hover { color: var(--pn-ink); background: rgba(255, 255, 255, 0.04); }
.bm-pn-seg button.on { background: rgba(232, 193, 90, 0.16); color: var(--pn-lit); font-weight: 600; }
.bm-pn-seg small { display: block; font-size: 0.58rem; opacity: 0.85; }

.bm-pn-check { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 0.8rem; color: var(--pn-dim); cursor: pointer; }
.bm-pn-check input { accent-color: var(--pn-gold); width: 15px; height: 15px; }

.bm-pn-sheet-foot { display: flex; gap: 8px; margin-top: 14px; }
.bm-pn-go {
    flex: 1; padding: 8px; border-radius: 8px; cursor: pointer;
    background: linear-gradient(180deg, #8a2530, #6d1a24); border: 1px solid #b03040; color: #fff;
    font-family: 'Cinzel', Georgia, serif; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em;
}
.bm-pn-go:hover:not(:disabled) { background: linear-gradient(180deg, #9c2b37, #7d1f2a); }
.bm-pn-go:disabled { opacity: 0.4; cursor: default; }
.bm-pn-go--block { display: block; width: 100%; flex: none; }
.bm-pn-cancel {
    padding: 8px 14px; border-radius: 8px; cursor: pointer;
    background: none; border: 1px solid var(--pn-line); color: var(--pn-dim);
    font-family: inherit; font-size: 0.78rem;
}
.bm-pn-cancel:hover { color: var(--pn-ink); border-color: rgba(201, 162, 74, 0.45); }

/* ── Empty states ─────────────────────────────────────────────────────────── */
.bm-pn-empty { padding: 30px 18px; text-align: center; }
.bm-pn-empty .mud-icon-root { color: rgba(201, 162, 74, 0.3); font-size: 2.4rem; }
.bm-pn-empty p { margin: 10px 0 0; font-size: 0.86rem; color: var(--pn-dim); }
.bm-pn-empty small { display: block; margin-top: 5px; font-size: 0.74rem; color: var(--pn-faint); font-style: italic; }

@media (prefers-reduced-motion: reduce) {
    .bm-tk-edit { transition: none; }
    .bm-tk-hp i, .bm-tk-caret, .bm-pn-swatch { transition: none; }
}