@layer components {
  .book-page .editor-tabs { flex-wrap:wrap; }
  .book-catalogue-tools { display:block; min-width:0; margin:22px 0; padding:24px; border:1px solid #65523477; border-radius:6px; background:linear-gradient(120deg,#ad884313,transparent 65%),#171b18; }
  .catalogue-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:20px; }
  .catalogue-heading h2 { font:28px var(--serif); margin:7px 0 0; color:var(--gold-light); }
  .catalogue-heading p,.catalogue-actions p,.catalogue-properties>p { font-size:12px; color:var(--muted); }
  .catalogue-filter-grid,.catalogue-property-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:14px; }
  .catalogue-filter-grid>label:first-child { grid-column:span 2; }
  .book-catalogue-tools label,.catalogue-properties label { display:grid; gap:8px; color:#c7c2b5; font-size:12px; margin:0; }
  .book-catalogue-tools input,.book-catalogue-tools select,.catalogue-properties input,.catalogue-properties select { width:100%; min-width:0; padding:11px 12px; border:1px solid #4b4c41; border-radius:3px; background:#111613; color:#ece4d3; font:13px var(--sans); }
  .book-catalogue-tools :is(input,select):focus,.catalogue-properties :is(input,select):focus { outline:1px solid var(--gold); outline-offset:2px; }
  .catalogue-flags { margin-top:15px; display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:14px; }
  .catalogue-actions { margin-top:18px; display:flex; gap:10px; align-items:center; }
  .catalogue-actions p { margin:0 auto 0 0; }
  .catalogue-actions button { flex-shrink:0; }
  .catalogue-properties { border:1px solid #73613e77; border-radius:5px; padding:20px; margin:24px 0; min-width:0; }
  .catalogue-properties legend { color:var(--gold); padding:0 9px; }
  .spell-class-editor { grid-column:1/-1; margin:8px 0 0; padding:16px; min-width:0; border:1px solid #73613e77; border-radius:4px; }
  .spell-class-editor legend { color:var(--gold); font-size:13px; padding:0 7px; }
  .spell-class-options { display:grid; grid-template-columns:repeat(auto-fit,minmax(135px,1fr)); gap:12px; margin:16px 0; }
  .catalogue-properties .spell-class-editor :is(.checkbox-label,.spell-class-options label) { display:flex; align-items:center; gap:8px; }
  .catalogue-properties .spell-class-editor input[type=checkbox] { width:16px; height:16px; margin:0; padding:0; flex-shrink:0; accent-color:var(--gold); }
  .spell-class-editor p { color:var(--muted); font-size:12px; line-height:1.6; margin-bottom:0; }
  .catalogue-summary { display:flex; flex-wrap:wrap; gap:10px; margin:20px 0; }
  .catalogue-summary>div { padding:10px 15px; border:1px solid #6a573b66; border-radius:3px; background:#b1945910; max-width:100%; }
  .catalogue-summary dt { color:var(--muted); font-size:11px; margin-bottom:5px; }
  .catalogue-summary dd { margin:0; color:#e3d1ae; font-size:13px; overflow-wrap:anywhere; }
  .entry-link-row .catalogue-entry-label { display:flex; flex-direction:column; gap:5px; }
  .catalogue-entry-label small { color:var(--muted); font-size:10px; }
  @media(max-width:700px) {
    .book-catalogue-tools { padding:17px; }
    .catalogue-heading { display:block; }
    .catalogue-filter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .catalogue-property-grid,.catalogue-flags { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .catalogue-actions { flex-wrap:wrap; }
    .catalogue-actions p { flex-basis:100%; margin-bottom:6px; }
  }
  @media(max-width:420px) { .catalogue-property-grid,.catalogue-flags { grid-template-columns:minmax(0,1fr); } }
}
@layer responsive {
  @media(max-width:760px) {
    .book-page .editor-tabs { flex-wrap:wrap; }
    .book-page .editor-tabs button { flex:1 1 auto; }
  }
}

@layer components {
  .monster-suggest-field { display:grid; gap:8px; min-width:0; align-content:start; }
  .monster-suggest-field>label { display:block; margin:0; }
  .monster-combobox { position:relative; min-width:0; }
  .monster-combobox input { padding-right:42px; }
  .monster-suggest-toggle { position:absolute; top:1px; right:1px; bottom:1px; width:36px; border:0; border-left:1px solid #4b4c4166; background:transparent; color:var(--gold); font-size:20px; padding:0; border-radius:0 3px 3px 0; }
  .monster-suggest-toggle:hover { background:#ad884320; }
  .monster-suggestions { position:absolute; top:calc(100% + 5px); left:0; right:0; z-index:45; max-height:300px; overflow:auto; overscroll-behavior:contain; background:#1a201b; border:1px solid #8b7448; border-radius:4px; box-shadow:0 12px 28px #0009; padding:5px; }
  .monster-suggestions.suggest-up { top:auto; bottom:calc(100% + 5px); box-shadow:0 -10px 28px #0009; }
  .monster-suggestions [role=option] { padding:10px; border-radius:3px; font:13px/1.45 var(--sans); color:#e2d7c2; cursor:pointer; overflow-wrap:anywhere; }
  .monster-suggestions [role=option]:hover,.monster-suggestions [aria-selected=true] { background:#b79c6533; color:#f5dfb4; }
  .monster-suggest-message { padding:10px; color:var(--muted); font-size:12px; line-height:1.5; }
  .monster-suggest-pagination { display:flex; flex-wrap:wrap; gap:4px; }
  .monster-suggest-pagination:empty { display:none; }
  .monster-suggest-pagination button { flex:1; margin-top:5px; padding:9px; border:1px solid #84704066; border-radius:3px; background:#b59b6314; color:var(--gold-light); font-size:11px; }
}


/* Навигация остаётся рядом с длинным материалом; внутри списка есть собственная прокрутка. */
@media (min-width: 821px) {
  .content-workspace > .entry-index {
    position:sticky; top:16px; align-self:start; display:flex; flex-direction:column;
    max-height:calc(100dvh - 32px); min-height:0; overflow:hidden; z-index:8;
  }
  .entry-index .entry-links { overflow:auto; min-height:0; overscroll-behavior:contain; }
  .entry-index .entry-index-heading,.entry-index .entry-index-tools,.entry-index .entry-pagination { flex-shrink:0; }
}
.entry-index-tools { display:grid; gap:8px; margin:0 4px 13px; }
.entry-index-tools .button { padding:9px 8px; gap:7px; font-size:11px; min-width:0; justify-content:center; }
.entry-index-tools small { color:#b8ad96; font-size:10px; overflow-wrap:anywhere; }
.entry-index-tools small button { color:#d8bc82; background:none; border:0; text-decoration:underline; }
dialog.material-catalogue-dialog {
  width:min(1240px,calc(100vw - 36px)); max-width:none; max-height:calc(100dvh - 36px); padding:0;
}
dialog.material-catalogue-dialog[open] { display:flex; flex-direction:column; overflow:hidden; }
.material-catalogue-dialog > .dialog-header { flex-shrink:0; }
.material-browser { display:flex; flex-direction:column; min-height:0; padding:24px 28px 18px; overflow:hidden; }
.material-browser > header,.material-browser-tools { flex-shrink:0; }
.material-browser h2 { font:400 32px/1.2 var(--serif); color:#eee0c4; margin:0 0 8px; }
.material-browser header p { color:#b0ad9e; margin:0 0 15px; font-size:12px; }
#material-browser-search { display:flex; align-items:end; gap:12px; margin:0; }
#material-browser-search label { display:block; flex:1; min-width:0; color:#d5c19b; font-size:12px; }
#material-browser-search input { width:100%; margin-top:6px; }
#material-browser-search button { flex-shrink:0; height:42px; }
.material-browser-scopes { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.material-browser-scopes button { padding:7px 12px; font-size:11px; }
.material-browser-scopes button[aria-pressed=true] { border-color:#c5a16a; background:#b89c6420; color:#efd8ac; }
.material-filter-note { font-size:11px; color:#b7b19e; margin:9px 0; }
.material-filter-note button { color:#dfbd7e; background:none; border:0; text-decoration:underline; }
#material-browser-results { min-height:160px; overflow:auto; overscroll-behavior:contain; padding:18px 3px 8px; }
.material-card-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.material-card { min-width:0; border:1px solid #64543c; border-radius:5px; background:#171c18; overflow:hidden;
  transition:border-color .15s,box-shadow .15s; }
.material-card:hover,.material-card.selected { border-color:#ccaa6b; box-shadow:0 0 0 1px #c0a06444; }
.material-card-main { display:block; width:100%; padding:0; background:none; border:0; text-align:left; }
.material-card-main:focus-visible { outline:2px solid #ecd2a0; outline-offset:-3px; }
.material-card-art { position:relative; isolation:isolate; overflow:hidden; height:240px; background:#111813; }
.material-card-art img { position:absolute; inset:0; width:100%; height:100%; z-index:-2; }
.material-card-placeholder { position:absolute; inset:0; z-index:-2; display:grid; place-items:center; color:#8d7650;
  background:radial-gradient(ellipse at 50% 24%,#76624830,transparent 60%),linear-gradient(145deg,#222921,#111712); }
.material-card-placeholder > .icon { width:56px; height:56px; opacity:.55; }
.material-card-placeholder > span { position:absolute; top:30px; font-size:23px; color:#aa8d5b; }
.material-card-shade { position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,transparent 25%,#0a100c4d 50%,#0a100ce8 100%); }
.material-card-caption { position:absolute; inset:auto 16px 18px; color:#f1e1c4; display:grid; gap:7px; }
.material-card-caption strong { font:400 23px/1.18 var(--serif); overflow-wrap:anywhere; }
.material-card-caption small { color:#d4ba8d; font:11px/1.4 var(--sans); overflow-wrap:anywhere; }
.material-card-footer { padding:9px 11px; display:flex; flex-wrap:wrap; align-items:center; gap:7px; min-height:41px; }
.material-card-footer > span { flex:1; min-width:0; font-size:10px; color:#b3ad98; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.material-card-footer button { color:#d5b67d; background:none; border:0; padding:3px 0; font-size:10px; }
#material-browser-pagination { display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:14px 0 0; flex-shrink:0; border-top:1px solid #5e513a66; }
#material-browser-pagination span { color:#baa98a; font-size:11px; }
.material-browser-empty { padding:55px 20px; color:#c5bca9; text-align:center; font-size:13px; }
.card-display-editor { border:1px solid #62553c88; padding:13px 16px; border-radius:4px; margin:12px 0 22px; }
.card-display-editor summary { cursor:pointer; color:#d2b985; font-size:12px; }
.card-display-editor > p { color:#aeb09e; font-size:11px; line-height:1.7; }
.card-display-layout { display:grid; grid-template-columns:180px minmax(0,1fr); gap:22px; align-items:start; }
.card-display-preview { border:1px solid #917347; border-radius:4px; overflow:hidden; }
.card-display-preview .material-card-art { height:220px; }
.card-display-preview .material-card-caption strong { font-size:21px; }
.card-display-fields { display:grid; gap:11px; }
.card-display-fields label { display:block; margin:0; color:#bdb18e; font-size:11px; }
.card-display-fields input[type=range] { width:calc(100% - 48px); padding:0; height:30px; vertical-align:middle; }
.card-display-fields output { display:inline-block; width:43px; text-align:right; color:#e6ce9d; }
.card-display-fields select { width:100%; margin-top:6px; }
@media (max-width: 1050px) { .material-card-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width: 820px) {
  .content-workspace > .entry-index { position:static; max-height:none; }
  .entry-index .entry-links { max-height:220px; overflow:auto; }
  dialog.material-catalogue-dialog { width:calc(100vw - 16px); max-height:calc(100dvh - 16px); }
  .material-browser { padding:18px 14px 12px; }
  .material-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .material-card-art { height:210px; }
  .material-card-caption { inset:auto 11px 13px; }
  .material-card-caption strong { font-size:21px; }
}
@media (max-width: 440px) {
  .material-browser h2 { font-size:27px; }
  .material-card-art { height:190px; }
  .material-card-caption strong { font-size:19px; }
  #material-browser-search { gap:8px; }
  #material-browser-search button { padding-inline:11px; }
  .card-display-layout { grid-template-columns:1fr; }
  .card-display-preview { max-width:210px; }
  .material-card-footer { padding:8px; }
}

.material-card-caption strong { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }

.class-variants-heading { flex-wrap:wrap; }