/* ===========================================================================
   BackpackOT Compendium
   ---------------------------------------------------------------------------
   One sheet for the Compendium page (Guides, Bestiary, Armory, Spells) and
   the catalogue pages that share its markup (monsters, monster record,
   equipment, spells).

   THE IDIOM is the site's own, as highscores.css and map.css set it out:
   parchment, brown Verdana, gold hairlines, keys you press, green stone
   caption bars with the Martel headline face, and the black-outline /
   gold-bevel plaque for the one thing on a page worth looking at. No rounded
   corners, no white cards, no drop shadows: Tibia's chrome is drawn with
   borders, and anything softer reads as a different website pasted in.

   Rewritten 2026-09-07 from a white "reference site" design; the frame,
   search and navigation were rebuilt 2026-09-08 as the theme's own parchment
   tables (parchment.css, loaded before this sheet): the page sits directly on
   the BoxContent scroll, and every part of it is a captioned table with rows
   on the two parchments, as the account and character pages are built.

   Constraints this sheet is written around:
   - The theme fixes #ContentColumn at 790px and renders in quirks mode (no
     DOCTYPE): percentage heights resolve against the viewport, so none are
     used. On the Compendium page the right rail is hidden so the surface is
     ~980px: a 200px navigation rail and a ~720px reading column.
   - Martel, the theme's display face, has blank glyphs for every digit and
     punctuation mark. It is used ONLY on runs that are letters by
     construction: the guide titles in their green caption bars. A guide title
     with a number in it would lose the number — keep them words.
   - mobile.css forces 13px onto every #ContentColumn div/span/a/p and
     inline-block onto labels, all !important. The media block at the foot
     disarms that inside each shell and restates only what changes; those are
     the only !important declarations here.
   - basic.css sets a global :focus { outline: dotted 1px } that fires on
     mouse click; the mouse case is switched off and a gold ring drawn for
     the keyboard.
   =========================================================================== */

/* --- tokens ---------------------------------------------------------------- */
.cmp, .cmp-catalog, .cmp-spells, .cmp-monster-page {
	--ink: #5A2800;
	--ink-2: #5a4326;
	--muted: #7a6a4c;
	--faint: #8a7047;
	--line: #d8c49a;
	--line-2: #a8873a;
	--edge: #8a6f33;
	--fill: #f7edd6;
	--fill-2: #f2e6cb;
	--surface: #fbf4e2;
	--channel: #efe6cc;
	--row-a: #F1E0C6;
	--row-b: #D4C0A1;
	--green: #4a6b32;
	--green-2: #3d6826;
	--green-soft: #e3ebd3;
	--green-ink: #2b4520;
	--gold: #9c7c43;
	--gold-soft: #f7e7b8;
	--red: #a2402f;
	--link: #004294;
	--outline: #1c1409;
	--font: Verdana, Arial, sans-serif;
	--display: Martel, Georgia, serif;
	--key: linear-gradient(to bottom, #fdf6dc, #ecdcb6);
	--key-hover: linear-gradient(to bottom, #fffbe9, #f2e5c3);
	--key-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -1px 0 rgba(90, 66, 26, .12), 0 1px 1px rgba(90, 66, 26, .22);
	--field: #fcf7ea;
	--field-shadow: inset 0 1px 2px rgba(90, 66, 26, .16);
	--pressed: linear-gradient(to bottom, #d9b34e, #f7e08c);
	--pressed-shadow: inset 0 1px 3px rgba(90, 66, 26, .35);
	--well-shadow: inset 0 1px 3px rgba(90, 66, 26, .28);
	color: var(--ink);
	font: 10pt/1.5 var(--font);
}
.cmp *, .cmp *::before, .cmp *::after,
.cmp-catalog *, .cmp-spells *, .cmp-monster-page * { box-sizing: border-box; }
.cmp h1, .cmp h2, .cmp h3, .cmp h4, .cmp p, .cmp figure, .cmp ol, .cmp ul,
.cmp-catalog h1, .cmp-catalog h2, .cmp-catalog p, .cmp-spells h1, .cmp-spells h2, .cmp-spells p,
.cmp-monster-page h1, .cmp-monster-page h2, .cmp-monster-page h3, .cmp-monster-page p { margin: 0; }
.cmp img { max-width: 100%; }
.cmp a, .cmp-catalog a, .cmp-spells a, .cmp-monster-page a { color: var(--link); font-family: var(--font); font-weight: bold; text-decoration: none; }
.cmp a:hover, .cmp-catalog a:hover, .cmp-spells a:hover, .cmp-monster-page a:hover { color: #0063DC; text-decoration: underline; }
.cmp button, .cmp input, .cmp select,
.cmp-catalog button, .cmp-catalog input, .cmp-spells button, .cmp-spells input, .cmp-spells select { font-family: var(--font); color: inherit; }
.cmp button, .cmp-catalog button, .cmp-spells button { cursor: pointer; }
.cmp :focus-visible, .cmp-catalog :focus-visible, .cmp-spells :focus-visible, .cmp-monster-page :focus-visible { outline: 2px solid #d9b34e; outline-offset: 1px; }
.cmp :focus:not(:focus-visible),
.cmp-catalog :focus:not(:focus-visible),
.cmp-spells :focus:not(:focus-visible),
.cmp-monster-page :focus:not(:focus-visible) { outline: none; }
.cmp-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.cmp [hidden], .cmp-catalog [hidden], .cmp-spells [hidden] { display: none !important; }

/* --- the key ---------------------------------------------------------------
   Every control is the Highscores key: parchment face, gold edge, a lit top
   line and a soft drop. Pressed IN it goes gold with the highlight moved to
   the bottom. Listed once here; the sizes are set where each control lives. */
.cmp-key,
.cmp-back, .cmp-back-link, .cmp-more, .cmp-filters-reset, .cmp-filters select, .cmp-tool-sort select,
.cmp-catalog-filters button, .cmp-catalog-hero a, .cmp-tabs button,
.cmp-record-drops p button, .cmp-spell-tools form button {
	border: 1px solid var(--line-2);
	background: #f3e6c6;
	background: var(--key);
	box-shadow: var(--key-shadow);
	color: var(--ink);
	font-family: var(--font);
	font-size: 9pt;
	font-weight: bold;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color .12s ease, box-shadow .12s ease;
}
.cmp-key:hover,
.cmp-back:hover, .cmp-back-link:hover, .cmp-more:hover, .cmp-filters-reset:hover, .cmp-filters select:hover, .cmp-tool-sort select:hover,
.cmp-catalog-filters button:hover, .cmp-catalog-hero a:hover, .cmp-tabs button:hover,
.cmp-record-drops p button:hover {
	background: var(--key-hover);
	border-color: var(--edge);
	color: var(--ink);
	text-decoration: none;
}
.cmp-key:active, .cmp-back:active, .cmp-more:active, .cmp-filters-reset:active, .cmp-record-drops p button:active { box-shadow: inset 0 1px 3px rgba(90, 66, 26, .4); }
.cmp-catalog-filters button[aria-pressed="true"],
.cmp-tabs button[aria-selected="true"] {
	border-color: var(--edge);
	background: #e8c257;
	background: var(--pressed);
	box-shadow: var(--pressed-shadow);
	color: #4a3410;
}
.cmp-key { padding: 3px 8px 4px; }

/* The site's green button (sbutton_green), drawn in CSS: green stone, black
   edge, gold letters with the eight-way black outline .BigButtonText uses. */
.cmp-btn-green, .cmp-spell-tools form button {
	display: inline-flex; align-items: center; justify-content: center; gap: 5px;
	height: 28px; padding: 0 14px;
	border: 1px solid #14210f;
	background: #3f6a26;
	background: linear-gradient(to bottom, #7aa54a 0%, #4b7a2c 46%, #33591f 54%, #2a4a1b 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 1px 1px rgba(0, 0, 0, .35);
	color: #ffd18c; font-size: 11px; font-weight: bold; line-height: 1;
	text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000;
}
.cmp-btn-green:hover, .cmp-spell-tools form button:hover { background: linear-gradient(to bottom, #8cb85a 0%, #588c36 46%, #3d6826 54%, #325722 100%); color: #ffe0a8; border-color: #14210f; }

/* A chooser wears the key too: appearance:none so the OS widget never shows,
   with its own caret drawn inline (copied from .hs-nav-select). */
.cmp-filters select, .cmp-tool-sort select, .cmp-spell-tools select {
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	max-width: 100%; padding: 3px 21px 4px 9px;
	background-color: #f3e6c6;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M0 0h9L4.5 6z' fill='%235A2800'/%3E%3C/svg%3E"), var(--key);
	background-repeat: no-repeat, repeat;
	background-position: right 7px center, 0 0;
	outline: 0;
}
.cmp-filters select option, .cmp-tool-sort select option, .cmp-spell-tools select option { background: #fdf8ec; color: var(--ink); font-weight: normal; }

/* A text field is a channel cut INTO the parchment — the champion portrait's
   well and the Loyalty bar's track — so it reads as a place to type. */
.cmp-search-field, .cmp-tool-search input, .cmp-catalog-tools input, .cmp-spell-tools input {
	border: 1px solid var(--line-2);
	background: var(--field);
	box-shadow: var(--field-shadow);
	color: var(--ink);
	font-size: 10pt;
	transition: border-color .12s ease, box-shadow .12s ease;
}
.cmp-search-field:focus-within, .cmp-tool-search input:focus, .cmp-catalog-tools input:focus, .cmp-spell-tools input:focus { border-color: var(--edge); box-shadow: var(--field-shadow), 0 0 0 3px rgba(217, 179, 78, .35); outline: 0; }

/* A sprite well: the same channel, holding art. */
.cmp-sprite, .cmp-cell-art, .cmp-category-art, .cmp-feature-portrait, .cmp-creature-portrait, .cmp-monster-portrait, .cmp-example-item {
	display: grid; place-items: center;
	border: 1px solid var(--edge);
	background: var(--channel);
	box-shadow: var(--well-shadow);
}

/* A cell: one parchment tile with a hairline, the unit every list is made of. */
.cmp-cell,
.cmp-feature-facts > div, .cmp-sprite-row figure, .cmp-tile-list article, .cmp-steps li, .cmp-rarity-examples figure,
.cmp-dormancy-path article, .cmp-bonus-groups article, .cmp-grid > button, .cmp-record-facts section, .cmp-record-drops,
.cmp-monster-head dl div, .cmp-loot-list > div, .cmp-monster-facts > div, .cmp-monster-notes > div,
.cmp-monster-grid > a, .cmp-item-grid article {
	border: 1px solid var(--line);
	background: var(--fill);
}

/* A caption: the small brown capitals over a gold hairline that head every
   fact box on the site. */
.cmp-caption,
.cmp-rail-title > span, .cmp-feature-facts b, .cmp-search-group > span, .cmp-record h3, .cmp-filters label > span,
.cmp-monster-head dt, .cmp-monster-facts h3, .cmp-monster-notes h3, .cmp-catalog-tools label > span, .cmp-spell-tools label > span,
.cmp-monster-grid dt, .cmp-catalog-hero > div > span, .cmp-record-head span, .cmp-monster-head > div > span, .cmp-item-grid span {
	display: block; color: var(--faint); font-size: 8pt; font-weight: bold; letter-spacing: .6px; text-transform: uppercase;
}

/* --- page frame --------------------------------------------------------------
   The page IS the theme's parchment. The shell draws no surface of its own:
   the scroll.gif behind the BoxContent shows through, and every part of the
   page sits in one of the site's own tables (parchment.css — the caption bar
   in riveted strips, the blue-grey frame, the rows on the two parchments),
   exactly as the account, login and character pages are built. The
   Compendium hides the right rail on its own page only, so the surface is
   ~980px: a 214px navigation column and a ~750px reading column.
   The catalogue pages keep their gold hairline frame. */
body:has(.cmp-experience) #ThemeboxesColumn { display: none; }
body:has(.cmp-experience) #ContentColumn { margin-right: 15px; }
.cmp-experience { position: relative; margin: 0; padding: 0 2px; min-height: 400px; }
/* A caption's riveted caps overhang its body by 2px each side (as the theme's
   do); the columns are inset by that much so the sticky rail, which scrolls,
   never gains a horizontal scrollbar from the overhang. */
.cmp-catalog, .cmp-spells {
	position: relative;
	margin: -2px;
	border: 1px solid var(--gold);
	background: var(--surface);
	min-height: 400px;
}
/* A view's h2 lives in its caption bar: the caption's face, not a heading's. */
.cmp .pt-cap-text { margin: 0; font: bold 10pt/16px var(--font); }
.cmp .pt-cap small { font-family: var(--font); }

/* --- top: the search table ------------------------------------------------- */
.cmp-top { margin: 2px 2px 12px; }
.cmp-brand { display: none; }
.cmp-search { position: relative; padding: 6px 7px; }
.cmp-search-field { position: relative; display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 9px; }
.cmp-search-field svg { flex: 0 0 15px; width: 15px; height: 15px; color: var(--edge); }
.cmp-search-field input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 10pt; }
.cmp-search-field input::placeholder { color: #9a8660; opacity: 1; }
.cmp-search-field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.cmp-search-field kbd {
	display: inline-block; padding: 0 5px;
	border: 1px solid var(--line-2); background: var(--key); box-shadow: 0 1px 0 rgba(90, 66, 26, .3);
	color: var(--ink); font: bold 10px/16px var(--font);
}
.cmp-search-field:focus-within kbd { display: none; }
.cmp-search-results {
	position: absolute; top: calc(100% - 3px); right: 7px; left: 7px; z-index: 40;
	max-height: min(520px, 70vh); overflow-y: auto;
	border: 1px solid #5f4d41; background: #fdf8ec; box-shadow: 0 3px 8px rgba(40, 25, 5, .35);
}
.cmp-search-group + .cmp-search-group { border-top: 1px solid var(--line); }
.cmp-search-group > span { padding: 5px 9px 3px; background: var(--row-b); border-bottom: 1px solid var(--line); }
.cmp-search-hit {
	display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 8px;
	width: 100%; padding: 4px 8px; border: 0; border-bottom: 1px solid #ecdcb6; background: none; color: var(--ink); text-align: left;
}
.cmp-search-group .cmp-search-hit:last-child { border-bottom: 0; }
.cmp-search-hit:hover, .cmp-search-hit.is-active { background: #e8d9b4; }
.cmp-search-hit .cmp-cell-art { width: 34px; height: 34px; box-shadow: none; border-color: var(--line); }
.cmp-search-hit .cmp-cell-art img { max-width: 30px; max-height: 30px; }
.cmp-search-hit i { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); background: var(--green-soft); color: var(--green-ink); font: bold 9pt var(--font); font-style: normal; }
.cmp-search-hit b { display: block; font-size: 9pt; font-weight: bold; line-height: 1.25; }
.cmp-search-hit small { display: block; overflow: hidden; color: var(--muted); font-size: 8pt; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; }
.cmp-search-hit mark { background: transparent; color: var(--link); font-weight: bold; }
.cmp-search-empty { padding: 14px 10px; color: var(--muted); font-size: 9pt; text-align: center; }

/* --- body: rail + main -----------------------------------------------------
   Two tables in a 214px column: Sections, then the contents of the open
   section (the guide tree with the theme's own plus/minus expanders, or the
   classes, categories and types). Every row is a Tibia list row — Verdana
   bold in the site's link blue, on the two parchments, no hairlines — and
   the open row turns brown behind the theme's gold bullet, the way the site
   marks the page you are on. Nothing in the column looks like a button:
   the one action (Collapse all / Show all) is an underlined word in the
   caption bar, which is where Tibia puts "show all" and "hide". */
.cmp-body { display: grid; grid-template-columns: 218px minmax(0, 1fr); gap: 10px; align-items: start; }
.cmp-rail {
	position: sticky; top: 8px; align-self: start;
	max-height: calc(100vh - 16px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin;
	padding: 0 2px 4px;
}

/* Every row in the rail, at every depth. */
.cmp-views button, .cmp-views-link,
.cmp-tree a, .cmp-tree button {
	position: relative;
	display: flex; align-items: center; gap: 8px;
	width: 100%; min-height: 25px; margin: 0;
	padding: 3px 8px 4px 24px;
	border: 0; border-radius: 0; box-shadow: none; background: none;
	color: var(--link); font-family: var(--font); font-size: 10pt; font-weight: bold; line-height: 18px;
	text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.cmp-views button:hover, .cmp-views-link:hover,
.cmp-tree a:hover, .cmp-tree button:hover { color: #0063DC; text-decoration: underline; }
.cmp-views button > span, .cmp-tree a > span, .cmp-tree button > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Counts share one right-hand column: tabular so the digits line up. */
.cmp-views button small, .cmp-views-link small, .cmp-tree small {
	flex: 0 0 auto; margin-left: auto; color: #7a5a30; font-size: 8pt; font-weight: normal; font-variant-numeric: tabular-nums;
}
/* The open row: brown, and the gold bullet in the gutter. */
.cmp-views button[aria-selected="true"], .cmp-tree a[aria-current="true"], .cmp-tree button[aria-pressed="true"] {
	color: var(--ink); text-decoration: none; cursor: default;
	background: url(images/global/content/bullet.gif) no-repeat 6px center;
}
.cmp-views button[aria-selected="true"] small, .cmp-tree a[aria-current="true"] small, .cmp-tree button[aria-pressed="true"] small { color: var(--ink); }
.cmp .cmp-views-link { color: var(--link); }
.cmp .cmp-views-link small { color: var(--link); font-size: 10pt; font-weight: bold; }
.cmp .cmp-views-link:hover, .cmp .cmp-views-link:hover small { color: #0063DC; }

.cmp-rail-tree { margin: 0; padding: 0; }
.cmp-tree { list-style: none; margin: 0; padding: 0; }
.cmp-tree > li { margin: 0; }

/* A guide row: the theme's plus/minus, then the index and the title. The
   expander folds the guide itself (rail and reading column stay one state);
   a guide without sub-headings gets a blank of the same width so the titles
   line up. */
.cmp-tree-row { display: flex; align-items: center; padding-left: 8px; }
.cmp-tree-row > a { padding-left: 6px; white-space: normal; line-height: 16px; }
.cmp-tree-spacer { flex: 0 0 12px; width: 12px; height: 12px; }
/* The expander is a button inside .cmp-tree, so the row rule above reaches
   it; restate the 12px stone here or the gif tiles across a full row. */
.cmp-tree-row .pt-toggle { flex: 0 0 12px; width: 12px; min-height: 0; height: 12px; padding: 0; background: url(images/global/general/plus.gif) no-repeat 0 0; }
.cmp-tree-row .pt-toggle[aria-expanded="true"] { background-image: url(images/global/general/minus.gif); }
.cmp-tree-row .pt-toggle:hover { text-decoration: none; }
.cmp-tree[data-doc-nav-links] { counter-reset: guide; }
.cmp-tree[data-doc-nav-links] > li > .cmp-tree-row > a { gap: 7px; }
.cmp-tree[data-doc-nav-links] > li > .cmp-tree-row > a::after {
	counter-increment: guide; content: counter(guide, decimal-leading-zero);
	order: -1; flex: 0 0 auto;
	color: #7a5a30; font-size: 8pt; font-weight: bold; font-variant-numeric: tabular-nums;
}
.cmp-tree[data-doc-nav-links] > li > .cmp-tree-row > a[aria-current="true"] { background: none; }
.cmp-tree[data-doc-nav-links] > li > .cmp-tree-row > a[aria-current="true"]::after { color: var(--ink); }

/* Sub-headings hang under their guide, indented, a size smaller. */
.cmp-tree .cmp-tree-sub { list-style: none; margin: 0; padding: 0 0 3px; }
.cmp-tree .cmp-tree-sub a {
	min-height: 22px; padding: 2px 8px 2px 44px;
	color: var(--link); font-size: 9pt; font-weight: normal; line-height: 16px;
}
.cmp-tree .cmp-tree-sub a::before { content: "\2013"; position: absolute; left: 33px; color: #9a7d55; }
.cmp-tree .cmp-tree-sub a[aria-current="true"] { color: var(--ink); font-weight: bold; background-position: 20px center; }
.cmp-tree .cmp-tree-sub a[aria-current="true"]::before { color: transparent; }
.cmp-tree li.is-collapsed .cmp-tree-sub { display: none; }

/* --- main / views -----------------------------------------------------------
   One table per view. The caption names it; the first row is its one-line
   description; browsers get a tools row; then the content on parchment. */
.cmp-main { min-width: 0; padding: 0 2px; }
.cmp-main > .pt-box { margin-top: 2px; }
.cmp-view-head p { max-width: 660px; color: var(--ink-2); font-size: 9pt; line-height: 1.5; }
.cmp-view-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; }
.cmp-tools { display: flex; gap: 6px; flex: 0 0 auto; }
.cmp-tool-search { flex: 1 1 220px; min-width: 0; max-width: 360px; }
.cmp-tool-search input { width: 100%; height: 28px; padding: 0 9px; outline: 0; }
.cmp-tool-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.cmp-tool-sort select { height: 28px; padding-top: 0; padding-bottom: 0; }
.cmp-view-content { padding: 8px; }

/* --- guides: document sections ------------------------------------------
   Each guide is one of the site's own boxes: a green stone caption bar with
   the title in the Martel headline face, then the body on parchment. The bar
   is the toggle. (Martel: letters only — see the head of this file.) */
.cmp-doc { scroll-margin-top: 8px; margin-top: 12px; }
.cmp-doc:first-of-type { margin-top: 0; }
.cmp-doc-head h2 { font: inherit; }
.cmp-doc-toggle {
	display: grid; grid-template-columns: 26px minmax(0, auto) minmax(0, 1fr) 24px; align-items: center; gap: 0 8px;
	width: 100%; height: 30px; padding: 0 6px 0 8px;
	border: 1px solid #000; border-left-width: 2px; border-right-width: 2px; border-color: #000 #3a3738;
	background: #2f4a2a url(images/content/title-background-green.gif) repeat-x;
	color: #f0d1a4; text-align: left;
}
.cmp-doc-toggle:hover { filter: brightness(1.08); }
.cmp-doc-index { color: #cfe0b8; font: bold 8pt/1 var(--font); text-shadow: 1px 1px 0 #162619; }
.cmp-doc-title { color: #f0d1a4; font: 500 18px/24px var(--display); text-shadow: 1px 1px 0 #162619; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-doc-note { color: #cfe0b8; font-size: 8pt; text-shadow: 1px 1px 0 #162619; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-doc-chevron { display: grid; place-items: center; width: 24px; height: 24px; color: #f0d1a4; transition: transform .28s cubic-bezier(.4, 0, .2, 1); }
.cmp-doc-chevron::before { content: ""; width: 8px; height: 8px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); filter: drop-shadow(1px 1px 0 #162619); }
.cmp-doc.is-collapsed .cmp-doc-chevron { transform: rotate(-90deg); }
.cmp-doc.is-target .cmp-doc-toggle { box-shadow: 0 0 0 2px #d9b34e; }

/* Opening and closing animates on grid-template-rows, the one property that
   travels smoothly between content height and zero. visibility flips at the
   END of a collapse so a closed section's links leave the tab order. */
.cmp-doc-body {
	display: grid; grid-template-rows: 1fr; visibility: visible;
	border: 1px solid #793d03; border-top: 0; background: var(--fill);
	transition: grid-template-rows .28s cubic-bezier(.4, 0, .2, 1), visibility 0s;
}
.cmp-doc-body > * { min-height: 0; overflow: hidden; padding: 14px 16px 18px; }
.cmp-doc.is-collapsed .cmp-doc-body {
	grid-template-rows: 0fr; visibility: hidden; border-bottom: 0;
	transition: grid-template-rows .28s cubic-bezier(.4, 0, .2, 1), visibility 0s .28s;
}
.cmp-doc.is-collapsed .cmp-doc-body > * { padding-top: 0; padding-bottom: 0; }

/* --- guides: prose ---------------------------------------------------------- */
.cmp-doc-body > * > p, .cmp-doc-body .cmp-feature p { max-width: 660px; }
.cmp-doc-body p { color: var(--ink); font-size: 10pt; line-height: 1.55; }
.cmp-doc-body p + p { margin-top: 10px; }
.cmp-doc-body p b { color: #3d1b00; font-weight: bold; }
.cmp-doc-body p i { font-style: italic; }
.cmp-doc-body h3 { max-width: 660px; margin: 22px 0 8px; padding-bottom: 3px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 11pt; font-weight: bold; line-height: 1.3; scroll-margin-top: 8px; }
.cmp-doc-body h4 { margin: 16px 0 6px; color: var(--ink); font-size: 10pt; font-weight: bold; }
.cmp-doc-body > * > h3:first-child { margin-top: 0; }
[data-rail-tree="quests"] .cmp-tree-sub a { white-space: normal; overflow-wrap: anywhere; }
.cmp-lead, .cmp-doc-body .cmp-lead { color: #3d1b00; font-size: 11pt; line-height: 1.5; }
.cmp-doc-body .cmp-lead + p { margin-top: 10px; }
.cmp-note, .cmp-doc-body .cmp-note { margin-top: 10px; color: var(--muted); font-size: 9pt; }
.cmp-boundary, .cmp-doc-body .cmp-boundary {
	max-width: 660px; margin-top: 18px; padding: 8px 12px;
	border: 1px solid var(--line); border-left: 4px solid var(--gold); background: var(--fill-2);
	color: var(--ink-2); font-size: 9pt; line-height: 1.5;
}
.is-flash { animation: cmp-flash 1.6s ease-out; }
@keyframes cmp-flash { 0% { background: var(--gold-soft); } 100% { background: transparent; } }

/* Callouts: gate (what unlocks a system) and status (what is not live yet). */
.cmp-gate, .cmp-status { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; max-width: 660px; margin: 0 0 14px; padding: 9px 12px; border: 1px solid; }
.cmp-gate { border-color: #7f9a5a; border-left: 4px solid var(--green); background: var(--green-soft); }
.cmp-gate p, .cmp-doc-body .cmp-gate p { color: var(--green-ink); font-size: 9pt; line-height: 1.5; }
.cmp-gate-icon { position: relative; display: block; width: 16px; height: 16px; margin-top: 2px; border: 1px solid var(--green-ink); background: var(--green); }
.cmp-gate-icon::after { content: ""; position: absolute; left: 4px; top: 3px; width: 7px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.cmp-status { margin-top: 12px; border-color: #c9963a; border-left: 4px solid #c9963a; background: var(--gold-soft); }
.cmp-status p, .cmp-doc-body .cmp-status p { color: #5a3d10; font-size: 9pt; line-height: 1.5; }
.cmp-status-dot { display: block; width: 9px; height: 9px; margin: 6px 4px 0; border: 1px solid #7a4d0e; background: #d3892a; }

/* Feature cards (Bao, Bender): the portrait in a well, the facts as cells. */
.cmp-feature { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px 14px; align-items: start; }
.cmp-feature-portrait { width: 72px; height: 72px; }
.cmp-feature-portrait img { width: 64px; height: 64px; image-rendering: pixelated; }
.cmp-feature h3 { margin-top: 0; }
.cmp-feature-facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 6px; margin-top: 2px; }
.cmp-feature-facts > div { padding: 7px 10px 8px; }
.cmp-feature-facts b { margin-bottom: 2px; padding-bottom: 2px; border-bottom: 1px solid var(--line); }
.cmp-feature-facts span { color: var(--ink-2); font-size: 9pt; line-height: 1.45; }
.cmp-feature-facts i { color: var(--ink); font-style: normal; font-weight: bold; }

/* Sprites: one tile size everywhere. Game art is 32px or 64px; it is shown at
   its native pixel scale inside a well so nothing is blown up or shrunk. */
.cmp-sprite { flex: 0 0 56px; width: 56px; height: 56px; }
.cmp-sprite img { display: block; max-width: 48px; max-height: 48px; image-rendering: pixelated; }
.cmp-sprite.is-outfit { width: 72px; height: 72px; }
.cmp-sprite.is-outfit img { max-width: 64px; max-height: 64px; }

.cmp-sprite-row { display: flex; flex-wrap: wrap; gap: 6px; max-width: 700px; margin: 10px 0 0; }
.cmp-sprite-row figure { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 104px; padding: 8px 4px 7px; text-align: center; }
.cmp-sprite-row figcaption b { display: block; font-size: 9pt; font-weight: bold; line-height: 1.3; }
.cmp-sprite-row figcaption small { display: block; margin-top: 1px; color: var(--muted); font-size: 8pt; line-height: 1.35; }
.cmp-hireling-dresses figure { width: 118px; }

.cmp-tile-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; max-width: 700px; margin-top: 10px; }
.cmp-tile-list article { display: flex; gap: 10px; align-items: flex-start; padding: 8px; }
.cmp-tile-list .cmp-sprite { flex-basis: 44px; width: 44px; height: 44px; }
.cmp-tile-list .cmp-sprite img { max-width: 32px; max-height: 32px; }
.cmp-tile-list b { display: block; font-size: 9pt; font-weight: bold; line-height: 1.3; }
.cmp-tile-list p, .cmp-doc-body .cmp-tile-list p { margin-top: 2px; color: var(--muted); font-size: 8pt; line-height: 1.45; }

.cmp-steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-width: 700px; margin: 10px 0 12px; padding: 0; list-style: none; }
.cmp-steps li { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 8px; }
.cmp-steps li::before { counter-increment: step; content: counter(step); position: absolute; top: 6px; right: 8px; color: var(--faint); font: bold 8pt var(--font); }
.cmp-steps b { display: block; font-size: 9pt; font-weight: bold; line-height: 1.3; }
.cmp-steps small { display: block; margin-top: 1px; color: var(--muted); font-size: 8pt; line-height: 1.45; }

.cmp-chips { display: flex; flex-wrap: wrap; gap: 4px; max-width: 680px; margin-top: 8px; }
.cmp-chips span, .cmp-bonus-groups p span, .cmp-record-tags span, .cmp-record-facts p span, .cmp-monster-facts p span, .cmp-record-drops p span {
	display: inline-block; padding: 2px 8px 3px;
	border: 1px solid #c9b58a; background: var(--key); color: var(--ink); font-size: 8pt; line-height: 1.4;
}

.cmp .cmp-shot { max-width: 700px; margin: 16px 0 6px; }
.cmp-shot img { display: block; width: 100%; height: auto; border: 2px solid #55636c; outline: 1px solid #000; background: #101410; }
.cmp-shot figcaption { margin-top: 6px; color: var(--muted); font-size: 8pt; line-height: 1.5; }

/* The NPC card is a plaque: black outline, gold bevel, parchment face — the
   champion banner's frame, for the one person a guide points you to. */
.cmp-npc-card {
	display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 12px; align-items: center;
	max-width: 660px; margin: 12px 0; padding: 12px;
	border: 1px solid var(--edge); outline: 1px solid var(--outline); outline-offset: 3px;
	background: #f6ecd2; background: var(--key); box-shadow: var(--well-shadow), 0 0 0 3px #d0941c, 0 0 0 4px var(--outline);
}
.cmp-npc-card > img { width: 80px; height: 80px; border: 1px solid var(--edge); background: var(--channel); box-shadow: var(--well-shadow); image-rendering: pixelated; }
.cmp-npc-card b { display: block; font-size: 12pt; font-weight: bold; }
.cmp-npc-card small { display: block; margin-bottom: 4px; color: var(--muted); font-size: 8pt; }
.cmp-npc-card p, .cmp-doc-body .cmp-npc-card p { font-size: 9pt; }

/* Rarity guide. */
.cmp-rarity-examples { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; max-width: 700px; margin-top: 10px; }
.cmp-rarity-examples figure { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 6px 8px; text-align: center; }
.cmp-example-item { position: relative; width: 56px; height: 56px; overflow: hidden; }
.cmp-example-item i { position: absolute; top: 0; left: 0; width: 0; height: 0; border-top: 14px solid; border-right: 14px solid transparent; border-top-color: inherit; }
.cmp-example-item img { max-width: 40px; image-rendering: pixelated; }
.cmp-example-item em { position: absolute; right: 4px; bottom: 2px; color: var(--gold); font-size: 12px; font-style: normal; }
.cmp-rarity-examples figcaption b { display: block; font-size: 9pt; font-weight: bold; }
.cmp-rarity-examples figcaption span { display: block; margin-top: 1px; color: var(--muted); font-size: 8pt; }
.cmp-rarity-showcase > p:not(.cmp-lead) { margin-top: 10px; }
.cmp-dormancy-path { display: grid; gap: 6px; max-width: 700px; margin-top: 10px; }
.cmp-dormancy-path article { display: flex; gap: 12px; align-items: flex-start; padding: 10px; }
.cmp-dormancy-path b { display: block; font-size: 10pt; font-weight: bold; }
.cmp-dormancy-path small { display: block; margin: 0 0 4px; color: var(--muted); font-size: 8pt; }
.cmp-dormancy-path p, .cmp-doc-body .cmp-dormancy-path p { font-size: 9pt; line-height: 1.5; }
.cmp-bonus-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-width: 700px; margin-top: 10px; }
.cmp-bonus-groups article { padding: 10px; }
.cmp-bonus-groups b { display: block; margin-bottom: 7px; padding-bottom: 3px; border-bottom: 1px solid var(--line); font-size: 9pt; font-weight: bold; }
.cmp-bonus-groups p { display: flex; flex-wrap: wrap; gap: 4px; }
.cmp-signature-bonuses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; max-width: 700px; margin-top: 4px; }
.cmp-signature-bonuses article { padding: 8px 0; border-bottom: 1px solid var(--line); }
.cmp-signature-bonuses b { display: block; font-size: 9pt; font-weight: bold; }
.cmp-signature-bonuses p, .cmp-doc-body .cmp-signature-bonuses p { margin-top: 1px; color: var(--muted); font-size: 8pt; line-height: 1.45; }

/* --- browsers: Bestiary and Armory ----------------------------------------
   Category tiles are parchment cells, not keys: a light face with the thin
   brown edge the theme draws round every table, the name in link blue. */
.cmp-category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.cmp-category-grid button {
	display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 124px; padding: 10px;
	border: 1px solid #b9a07a; background: #f8ecd6; box-shadow: none;
	color: var(--ink); font-family: var(--font); font-size: 9pt; font-weight: bold; line-height: 1.3;
	text-align: left; white-space: normal; cursor: pointer;
	transition: border-color .12s ease, background .12s ease;
}
.cmp-category-grid button:hover { border-color: #5f4d41; background: #fdf4e2; }
.cmp-category-grid button:hover b { color: #0063DC; text-decoration: underline; }
.cmp-category-art { width: 52px; height: 52px; }
.cmp-category-art img { max-width: 44px; max-height: 44px; image-rendering: pixelated; }
.cmp-category-grid b { margin-top: auto; color: var(--link); font-size: 10pt; font-weight: bold; line-height: 1.25; }
.cmp-category-grid small { color: var(--muted); font-size: 8pt; font-weight: normal; }

.cmp-context { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.cmp-back, .cmp-back-link { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 11px 0 7px; }
.cmp-back svg { width: 14px; height: 14px; }
.cmp-back-link { margin-bottom: 12px; }
.cmp-context b { font-size: 12pt; font-weight: bold; }
.cmp-context small { color: var(--muted); font-size: 9pt; }

.cmp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 6px; }
.cmp-grid > button {
	display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 9px; row-gap: 0;
	align-items: center; min-height: 66px; padding: 7px 9px; text-align: left; white-space: normal;
}
.cmp-grid > button:hover { border-color: var(--line-2); background: #fdf6dc; }
.cmp-cell-art { grid-row: span 3; width: 48px; height: 48px; }
.cmp-cell-art img { max-width: 40px; max-height: 40px; image-rendering: pixelated; }
.cmp-grid b { font-size: 9pt; font-weight: bold; line-height: 1.3; }
.cmp-grid small { color: var(--muted); font-size: 8pt; line-height: 1.35; }
.cmp-grid .cmp-cell-meta { color: var(--edge); }
/* Filters and sorting, shown once you are inside a category. */
.cmp-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-bottom: 10px; padding: 8px 10px; border: 1px solid var(--line); background: var(--fill-2); }
.cmp-filters label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cmp-filters select { height: 28px; padding-top: 0; padding-bottom: 0; }
.cmp-filters-reset { margin-left: auto; height: 28px; padding: 0 12px; }

/* Spell rows: the Tibia table, deliberately — dark grey head is elsewhere, the
   rows alternate the theme's own two parchments a hairline apart. */
.cmp-spell-list { display: grid; gap: 1px; padding: 1px; border: 1px solid #5F4D41; background: #d4c0a1; }
.cmp-spell-list > article {
	display: grid; grid-template-columns: 44px minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
	align-items: center; gap: 10px; padding: 5px 10px; background: var(--row-a);
}
.cmp-spell-list > article:nth-child(even) { background: var(--row-b); }
.cmp-spell-list .cmp-cell-art { width: 40px; height: 40px; }
.cmp-spell-list .cmp-cell-art img { max-width: 32px; max-height: 32px; }
.cmp-spell-name b { display: block; font-size: 9pt; font-weight: bold; line-height: 1.3; }
.cmp-spell-name code, .cmp-spell-row code { display: inline-block; margin-top: 2px; padding: 0 5px; border: 1px solid #c9b58a; background: #fdf6dc; color: var(--ink-2); font: 8pt/1.5 var(--font); }
.cmp-spell-req b { display: block; font-size: 9pt; font-weight: bold; }
.cmp-spell-req small, .cmp-spell-voc small { color: var(--ink-2); font-size: 8pt; line-height: 1.4; }

.cmp-more { display: flex; align-items: center; width: max-content; height: 28px; margin: 12px auto 0; padding: 0 18px; }
.cmp-empty, .cmp-loading, .cmp-catalog-empty { padding: 24px 16px; background: var(--row-a); border: 1px solid var(--line); color: var(--ink); font-size: 10pt; text-align: center; }
.cmp-catalog-empty { margin-top: 12px; }

/* Inline record (a monster page fetched in, or an item card built here):
   mounted on the plaque. */
.cmp-detail { margin-bottom: 16px; }
.cmp-detail .cmp-back { margin-bottom: 10px; }
.cmp-detail-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cmp-detail-actions .cmp-back { margin-bottom: 0; }
.cmp-record, .cmp-detail .cmp-monster-page {
	padding: 12px;
	border: 1px solid var(--edge);
	background: #f6ecd2; background: var(--key);
	box-shadow: var(--well-shadow), 0 0 0 3px #d0941c, 0 0 0 4px var(--outline);
	margin: 4px;
}
.cmp-record-head { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; }
.cmp-record-head .cmp-sprite { width: 64px; height: 64px; }
.cmp-record-head .cmp-sprite img { max-width: 48px; max-height: 48px; }
.cmp-record-head span { color: var(--green); }
.cmp-record-head h2 { margin-top: 1px; font-size: 14pt; font-weight: bold; line-height: 1.2; }
.cmp-record-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.cmp-record-tags span.is-class { border-color: var(--edge); background: var(--pressed); color: #4a3410; font-weight: bold; }
.cmp-record-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.cmp-record-facts section, .cmp-record-drops { padding: 8px 10px 9px; }
.cmp-record h3 { margin-bottom: 6px; padding-bottom: 2px; border-bottom: 1px solid var(--line); }
.cmp-record-facts p, .cmp-record-drops p { display: flex; flex-wrap: wrap; gap: 4px; }
.cmp-record-facts strong { display: inline-block; margin-bottom: 4px; padding: 2px 8px 3px; border: 1px solid; font-size: 8pt; font-weight: bold; }
.cmp-record-facts strong.is-eligible { border-color: #7f9a5a; background: var(--green-soft); color: var(--green-ink); }
.cmp-record-facts strong.is-ineligible { border-color: var(--line); background: var(--fill-2); color: var(--muted); }
.cmp-record-facts .cmp-record-note { display: block; color: var(--muted); font-size: 8pt; line-height: 1.45; }
.cmp-record-drops { margin-top: 6px; }
.cmp-record-drops p button { padding: 2px 8px 3px; font-size: 8pt; }
.cmp-record-drops small { display: block; margin-top: 6px; color: var(--muted); font-size: 8pt; }

/* --- monster record (monster.html.twig; also fetched inline) --------------- */
.cmp-monster-page { margin: -2px; padding: 10px 12px 14px; border: 1px solid var(--gold); background: var(--surface); }
.cmp-monster-head { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 10px 14px; align-items: center; }
.cmp-creature-portrait { width: 80px; height: 80px; }
.cmp-creature-portrait img { max-width: 64px; max-height: 64px; image-rendering: pixelated; }
.cmp-monster-head > div > span { color: var(--green); }
.cmp-monster-head h1 { margin-top: 1px; font-size: 16pt; font-weight: bold; line-height: 1.2; }
.cmp-monster-head dl { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0; }
.cmp-monster-head dl div { padding: 6px 9px 7px; }
.cmp-monster-head dt { padding-bottom: 2px; border-bottom: 1px solid var(--line); }
.cmp-monster-head dd { margin: 3px 0 0; font-size: 12pt; font-weight: bold; }
.cmp-monster-section { margin-top: 16px; }
.cmp-monster-section h2 { margin-bottom: 8px; padding-bottom: 3px; border-bottom: 1px solid var(--line); font-size: 11pt; font-weight: bold; }
.cmp-monster-section p { color: var(--ink); font-size: 9pt; }
.cmp-loot-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.cmp-loot-list > div { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 8px; align-items: center; padding: 6px 8px; }
.cmp-loot-list img, .cmp-missing-sprite { grid-row: span 3; width: 40px; height: 40px; border: 1px solid var(--edge); background: var(--channel); box-shadow: var(--well-shadow); object-fit: contain; image-rendering: pixelated; }
.cmp-missing-sprite { display: block; }
.cmp-loot-list strong { font-size: 9pt; font-weight: bold; line-height: 1.3; }
.cmp-loot-list span, .cmp-loot-list small { color: var(--muted); font-size: 8pt; line-height: 1.35; }
.cmp-monster-facts, .cmp-monster-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cmp-monster-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cmp-monster-facts > div, .cmp-monster-notes > div { padding: 8px 10px 9px; }
.cmp-monster-facts h3, .cmp-monster-notes h3 { margin-bottom: 6px; padding-bottom: 2px; border-bottom: 1px solid var(--line); }
.cmp-monster-facts p { display: flex; flex-wrap: wrap; gap: 4px; }
.cmp-monster-facts p span b { font-weight: bold; }
.cmp-monster-notes p { font-size: 9pt; line-height: 1.5; }
.cmp-monster-notes p + p { margin-top: 3px; }

/* --- catalogue pages (monsters, equipment, spells) ---------------------------
   The contentbox headline above already names the page, so the hero's h1 is
   read by screen readers only; what shows is the way back, the one-line
   description and the count. */
.cmp-catalog-hero { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 9px; border-bottom: 2px solid var(--gold); }
.cmp-catalog-hero > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.cmp-catalog-hero a { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; }
.cmp-catalog-hero h1 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.cmp-catalog-hero > div > span { flex: 0 0 auto; color: var(--green); }
.cmp-catalog-hero p { flex: 1 1 260px; color: var(--muted); font-size: 8pt; line-height: 1.4; }
.cmp-catalog-hero > strong { flex: 0 0 auto; color: var(--faint); font-size: 8pt; font-weight: bold; letter-spacing: .5px; text-align: right; text-transform: uppercase; }
.cmp-catalog-hero > strong b { display: block; color: var(--ink); font-size: 16pt; font-weight: bold; line-height: 1.1; letter-spacing: 0; text-transform: none; }
.cmp-catalog-tools, .cmp-spell-tools { padding: 8px 9px; background: var(--fill-2); border-bottom: 1px solid var(--line); }
.cmp-catalog-tools label > span, .cmp-spell-tools label > span { margin-bottom: 3px; }
.cmp-catalog-tools input, .cmp-spell-tools input { width: 100%; height: 28px; padding: 0 9px; outline: 0; }
.cmp-catalog-filters { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.cmp-catalog-filters button { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; }
.cmp-monster-grid, .cmp-item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 6px; padding: 9px; }
.cmp-monster-grid > a { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 9px; align-items: center; padding: 7px 9px; color: var(--ink); font-weight: normal; }
.cmp-monster-grid > a:hover { border-color: var(--line-2); background: #fdf6dc; color: var(--ink); text-decoration: none; }
.cmp-monster-portrait { position: relative; width: 56px; height: 56px; }
.cmp-monster-portrait img { max-width: 48px; max-height: 48px; image-rendering: pixelated; }
.cmp-monster-portrait span { position: absolute; left: -3px; top: -3px; padding: 1px 4px; border: 1px solid #5c1f12; background: var(--red); color: #fff; font-size: 7pt; font-weight: bold; letter-spacing: .4px; text-transform: uppercase; }
.cmp-monster-grid h2, .cmp-item-grid h2 { font-size: 9pt; font-weight: bold; line-height: 1.3; }
.cmp-monster-grid p { color: var(--muted); font-size: 8pt; }
.cmp-monster-grid dl { display: flex; gap: 10px; margin: 3px 0 0; }
.cmp-monster-grid dt { font-size: 7pt; }
.cmp-monster-grid dd { margin: 0; font-size: 9pt; font-weight: bold; }
.cmp-item-grid article { display: flex; gap: 9px; align-items: center; min-height: 64px; padding: 7px 9px; }
.cmp-item-grid img { flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid var(--edge); background: var(--channel); box-shadow: var(--well-shadow); object-fit: contain; image-rendering: pixelated; }
.cmp-item-grid article > div { min-width: 0; }
.cmp-item-grid span { color: var(--green); font-size: 7pt; }
.cmp-item-grid p { margin-top: 1px; color: var(--muted); font-size: 8pt; }
.cmp-catalog .cmp-catalog-empty, .cmp-spells .cmp-catalog-empty { margin: 0 9px 9px; }
.cmp-catalog-note { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; margin: 0 9px 9px; padding: 8px 12px; border: 1px solid var(--line); border-left: 4px solid var(--gold); background: var(--fill-2); }
.cmp-catalog-note b { color: var(--ink); font-size: 9pt; font-weight: bold; }
.cmp-catalog-note p { color: var(--ink-2); font-size: 9pt; line-height: 1.5; }

.cmp-spell-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px; }
.cmp-spell-tools form { display: flex; align-items: flex-end; gap: 6px; }
.cmp-spell-tools form label { flex: 1; }
.cmp-spell-tools select { width: 100%; height: 28px; padding-top: 0; padding-bottom: 0; }
.cmp-tabs { display: flex; gap: 4px; padding: 8px 9px 0; }
.cmp-tabs button { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; }
.cmp-tabs button span { margin-left: 5px; color: var(--faint); font-weight: normal; }
.cmp-tabs button[aria-selected="true"] span { color: #6a5424; }
.cmp-tab-panel { padding: 8px 9px 9px; }
/* The spell table: `.Content th` exactly (#505050, white, 10pt) over the two
   parchments, a hairline apart — the board every other page on the site uses. */
.cmp-spell-table { display: grid; gap: 1px; padding: 1px; border: 1px solid #5F4D41; background: #d4c0a1; }
.cmp-spell-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) 72px; gap: 10px; align-items: center; padding: 5px 10px; background: var(--row-a); }
.cmp-spell-row:nth-child(odd) { background: var(--row-b); }
.cmp-spell-row.is-head { background: #505050; color: #fff; font-size: 9pt; font-weight: bold; }
.cmp-spell-row h2 { font-size: 9pt; font-weight: bold; }
.cmp-spell-row b { display: block; font-size: 9pt; font-weight: bold; }
.cmp-spell-row div > span { display: inline-block; margin: 2px 6px 0 0; color: var(--ink-2); font-size: 8pt; }
.cmp-spell-vocations { color: var(--ink); font-size: 8pt; line-height: 1.45; }
.cmp-spell-item { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 8pt; }
.cmp-spell-item img { width: 36px; height: 36px; border: 1px solid var(--edge); background: var(--channel); image-rendering: pixelated; }

/* A spell's icon, clipped out of the client's own 12-column spell sheet.
   Pixel art: never smoothed, never scaled off its 32px grid. */
.cmp-spell-icon {
	display: block; width: 32px; height: 32px;
	background-image: url(../../images/compendium/spell-icons.png);
	background-repeat: no-repeat;
	image-rendering: pixelated; image-rendering: crisp-edges;
}
.cmp-spell-list .cmp-cell-art .cmp-spell-icon { width: 32px; height: 32px; }
/* The standalone page has no art column, so the icon rides beside the name. */
.cmp-spell-title { display: flex; align-items: center; gap: 9px; }
.cmp-spell-title > span { min-width: 0; }
.cmp-spell-title .cmp-spell-icon { flex: 0 0 32px; }
.cmp-spell-art { flex: 0 0 32px; width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; }

/* --- shared with the World Map page ----------------------------------------- */
.wm-thumb { display: inline-block; background-repeat: no-repeat; }
.cmp-search-hit .wm-thumb { display: block; }

/* --- narrow screens ------------------------------------------------------- */
@media (max-width: 1100px) {
	.cmp-body { grid-template-columns: 180px minmax(0, 1fr); }
}
@media (max-width: 900px) {
	/* The mobile layer, disarmed inside each shell, then restated. */
	#ContentColumn .cmp-experience *, #ContentColumn .cmp-catalog *, #ContentColumn .cmp-spells *, #ContentColumn .cmp-monster-page * { font-size: inherit !important; line-height: inherit !important; }
	#ContentColumn .cmp-experience, #ContentColumn .cmp-catalog, #ContentColumn .cmp-spells, #ContentColumn .cmp-monster-page { font-size: 13px !important; line-height: 1.45 !important; }
	#ContentColumn .cmp-experience label, #ContentColumn .cmp-catalog label, #ContentColumn .cmp-spells label { display: flex !important; }
	#ContentColumn .cmp-experience input[type=search], #ContentColumn .cmp-experience input[type=text], #ContentColumn .cmp-catalog input[type=search], #ContentColumn .cmp-spells input[type=search] { width: 100% !important; padding: 0 8px !important; }
	#ContentColumn .cmp-search-field input { padding: 0 !important; }
	/* 16px stops iOS zooming the viewport when a chooser is focused. */
	#ContentColumn .cmp-filters select, #ContentColumn .cmp-tool-sort select, #ContentColumn .cmp-spell-tools select { font-size: 16px !important; }
	#ContentColumn .cmp-caption, #ContentColumn .cmp-feature-facts b, #ContentColumn .cmp-search-group > span, #ContentColumn .cmp-record h3, #ContentColumn .cmp-filters label > span,
	#ContentColumn .cmp-monster-head dt, #ContentColumn .cmp-monster-facts h3, #ContentColumn .cmp-monster-notes h3, #ContentColumn .cmp-catalog-tools label > span, #ContentColumn .cmp-spell-tools label > span,
	#ContentColumn .cmp-monster-grid dt, #ContentColumn .cmp-catalog-hero > div > span, #ContentColumn .cmp-record-head span, #ContentColumn .cmp-monster-head > div > span, #ContentColumn .cmp-item-grid span,
	#ContentColumn .cmp-catalog-hero > strong { font-size: 10px !important; }
	#ContentColumn .cmp-doc-index, #ContentColumn .cmp-doc-note, #ContentColumn .cmp-search-field kbd, #ContentColumn .cmp-steps li::before, #ContentColumn .cmp-monster-portrait span { font-size: 10px !important; }
	#ContentColumn .cmp-doc-title { font-size: 17px !important; line-height: 24px !important; }
	#ContentColumn .cmp-view-head h2, #ContentColumn .cmp-context b { font-size: 16px !important; line-height: 1.25 !important; }
	#ContentColumn .cmp-record-head h2, #ContentColumn .cmp-monster-head h1, #ContentColumn .cmp-npc-card b { font-size: 17px !important; line-height: 1.2 !important; }
	#ContentColumn .cmp-lead, #ContentColumn .cmp-doc-body .cmp-lead { font-size: 14px !important; }
	#ContentColumn .cmp-doc-body h3, #ContentColumn .cmp-monster-section h2 { font-size: 14px !important; line-height: 1.3 !important; }
	#ContentColumn .cmp-catalog-hero > strong b, #ContentColumn .cmp-monster-head dd { font-size: 17px !important; line-height: 1.1 !important; }
	#ContentColumn .cmp-experience small, #ContentColumn .cmp-catalog small, #ContentColumn .cmp-spells small, #ContentColumn .cmp-monster-page small,
	#ContentColumn .cmp-note, #ContentColumn .cmp-boundary, #ContentColumn .cmp-chips span, #ContentColumn .cmp-bonus-groups p span, #ContentColumn .cmp-record-tags span, #ContentColumn .cmp-record-facts p span,
	#ContentColumn .cmp-monster-facts p span, #ContentColumn .cmp-record-drops p span, #ContentColumn .cmp-record-drops p button, #ContentColumn .cmp-shot figcaption, #ContentColumn .cmp-spell-row div > span,
	#ContentColumn .cmp-spell-name code, #ContentColumn .cmp-spell-row code, #ContentColumn .cmp-search-hit small, #ContentColumn .cmp-loot-list span, #ContentColumn .cmp-monster-grid p, #ContentColumn .cmp-item-grid p,
	#ContentColumn .cmp-record-facts strong, #ContentColumn .cmp-record-note, #ContentColumn .cmp-catalog-hero p, #ContentColumn .cmp-tile-list p, #ContentColumn .cmp-signature-bonuses p { font-size: 11px !important; line-height: 1.4 !important; }
	#ContentColumn .cmp-spell-tools form button { font-size: 11px !important; line-height: 1 !important; }

	.cmp-top { margin: 2px 0 10px; }
	.cmp-search-field { height: 32px; }
	.cmp-search-field kbd { display: none; }
	.cmp-body { display: block; }
	/* Direct Compendium navigation. The redundant Sections/Contents caption
	   bars disappear on mobile; both useful bodies remain permanently open. */
	.cmp-rail { position: static; display: grid; gap: 7px; max-height: none; overflow: visible; margin-bottom: 12px; padding: 0 2px; }
	.cmp-rail-box { margin: 0; }
	.cmp-rail-box + .cmp-rail-box { margin-top: 0; }
	.cmp-rail-box > .pt-cap { display: none; }
	.cmp-rail-box > .pt-body,
	.cmp-rail-box.is-collapsed > .pt-body { display: block; padding: 3px; border-width: 1px; border-radius: 5px; }
	.cmp-rail-box > .pt-body > .pt-inner { border-radius: 3px; overflow: hidden; }
	.cmp-views { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #d4c0a1; }
	#ContentColumn .cmp-experience .cmp-views button,
	#ContentColumn .cmp-experience .cmp-views-link {
		justify-content: center; min-width: 0; min-height: 44px; padding: 5px 2px;
		font-size: 10px !important; line-height: 13px !important; text-align: center; white-space: normal;
	}
	.cmp-views button > span, .cmp-views-link > span { overflow: visible; text-overflow: clip; }
	.cmp-views button small, .cmp-views-link small { display: none; }
	.cmp-views button[aria-selected="true"] {
		background-color: #ead8b8; background-image: none; padding-top: 5px;
		box-shadow: inset 0 -3px #876b38;
	}
	.cmp-rail-tree > .cmp-tree { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: #f1e0c6; }
	.cmp-tree > li { min-width: 0; }
	.cmp-tree-row { padding-left: 0; }
	.cmp-tree-row .pt-toggle, .cmp-tree-spacer, .cmp-tree .cmp-tree-sub { display: none !important; }
	#ContentColumn .cmp-experience .cmp-tree-row > a,
	#ContentColumn .cmp-experience .cmp-tree-categories button {
		min-height: 38px; padding: 5px 8px 5px 18px; font-size: 11px !important; line-height: 14px !important; white-space: normal;
	}
	.cmp-tree[data-doc-nav-links] > li > .cmp-tree-row > a { gap: 5px; }
	.cmp-tree[data-doc-nav-links] > li > .cmp-tree-row > a::after { font-size: 9px; }
	.cmp-view-tools { padding: 6px; }
	.cmp-view-content { padding: 6px; }
	.cmp-tool-search { flex: 1 1 200px; max-width: none; }
	.cmp-tool-search input, .cmp-tool-sort select { height: 32px; }
	.cmp-tool-sort select { padding: 0 21px 0 9px; }
	.cmp-doc-toggle { grid-template-columns: 22px minmax(0, 1fr) 22px; height: 32px; padding: 0 4px 0 6px; }
	.cmp-doc-note { display: none; }
	.cmp-doc-body > * { padding: 10px 10px 14px; }
	.cmp-feature { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; }
	.cmp-feature-portrait { width: 64px; height: 64px; }
	.cmp-feature-portrait img { width: 56px; height: 56px; }
	.cmp-feature-facts { grid-template-columns: 1fr; }
	.cmp-steps, .cmp-bonus-groups { grid-template-columns: 1fr; }
	.cmp-rarity-examples { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cmp-signature-bonuses { grid-template-columns: 1fr; }
	.cmp-npc-card { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; }
	.cmp-npc-card > img { width: 64px; height: 64px; }
	.cmp-sprite-row figure { width: calc(33.333% - 4px); }
	.cmp-hireling-dresses figure { width: calc(50% - 3px); }
	.cmp-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
	.cmp-category-grid button { min-height: 104px; padding: 8px; gap: 6px; }
	.cmp-category-art { width: 44px; height: 44px; }
	.cmp-category-art img { max-width: 36px; max-height: 36px; }
	.cmp-grid { grid-template-columns: 1fr; gap: 5px; }
	.cmp-grid > button { min-height: 58px; padding: 6px 8px; column-gap: 8px; grid-template-columns: 44px minmax(0, 1fr); }
	.cmp-cell-art { width: 44px; height: 44px; }
	.cmp-cell-art img { max-width: 36px; max-height: 36px; }
	.cmp-spell-list > article { grid-template-columns: 40px minmax(0, 1fr); align-items: start; row-gap: 2px; padding: 6px 8px; }
	.cmp-spell-list .cmp-cell-art { grid-row: span 3; }
	.cmp-spell-req, .cmp-spell-voc { grid-column: 2; }
	.cmp-filters { gap: 6px; padding: 8px; }
	.cmp-filters label { flex: 1 1 calc(50% - 3px); }
	.cmp-filters select { width: 100%; height: 32px; padding: 0 21px 0 9px; }
	.cmp-filters-reset { margin-left: 0; height: 32px; }
	/* Back button, then title and count beneath it. */
	.cmp-context { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 4px 8px; margin-bottom: 8px; }
	.cmp-context .cmp-back { grid-column: 1 / -1; justify-self: start; }
	.cmp-back, .cmp-back-link { height: 32px; padding: 0 11px 0 7px; }
	.cmp-more { height: 32px; padding: 0 18px; }
	.cmp-record, .cmp-detail .cmp-monster-page { padding: 10px; }
	.cmp-record-head { grid-template-columns: 56px minmax(0, 1fr); gap: 10px; }
	.cmp-record-head .cmp-sprite { width: 56px; height: 56px; }
	.cmp-record-facts, .cmp-monster-facts, .cmp-monster-notes { grid-template-columns: 1fr; }
	.cmp-monster-head dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cmp-catalog-hero { flex-direction: column; align-items: stretch; padding: 8px; }
	.cmp-catalog-hero > strong { display: flex; align-items: baseline; gap: 6px; text-align: left; }
	.cmp-catalog-hero > strong b { display: inline; }
	.cmp-catalog-tools, .cmp-spell-tools { padding: 8px; }
	.cmp-catalog-tools input, .cmp-spell-tools input, .cmp-spell-tools select { height: 32px; }
	.cmp-spell-tools select { padding: 0 21px 0 9px; }
	.cmp-spell-tools form button { height: 32px; }
	.cmp-catalog-filters button { height: 32px; padding: 0 11px; }
	.cmp-monster-grid, .cmp-item-grid { padding: 8px; grid-template-columns: 1fr; }
	.cmp-spell-tools { grid-template-columns: 1fr; }
	.cmp-tabs button { height: 32px; padding: 0 12px; }
	.cmp-spell-row { grid-template-columns: 1fr; gap: 3px; }
	.cmp-spell-row.is-head { display: none; }
	.cmp-catalog-note { grid-template-columns: 1fr; gap: 4px; }
}

/* Phones. The 900px block above already reflows for one column; this only
   tightens the last of the spacing. */
@media (max-width: 560px) {
	.cmp-catalog, .cmp-spells, .cmp-monster-page { margin: -5px; }
	.cmp-feature { grid-template-columns: 56px minmax(0, 1fr); gap: 8px; }
	.cmp-feature-portrait { width: 56px; height: 56px; }
	.cmp-feature-portrait img { width: 48px; height: 48px; }
	.cmp-sprite-row { gap: 4px; }
	.cmp-sprite-row figure { width: calc(33.333% - 3px); padding: 6px 2px 5px; }
	.cmp-sprite { flex-basis: 48px; width: 48px; height: 48px; }
	.cmp-sprite img { max-width: 40px; max-height: 40px; }
	.cmp-sprite.is-outfit { width: 64px; height: 64px; }
	.cmp-sprite.is-outfit img { max-width: 56px; max-height: 56px; }
	.cmp-rarity-examples { gap: 4px; }
	.cmp-rarity-examples figure { padding: 8px 3px 6px; }
	.cmp-npc-card { padding: 10px; }
	.cmp-category-grid button { min-height: 96px; }
}

@media (prefers-reduced-motion: reduce) {
	.cmp *, .cmp *::before, .cmp *::after { transition: none; animation: none; }
}