/* The compendium (compendium-pages.ts, compendium.js). Linked only from its pages, and every rule
   but one sits under .cmp, so nothing else on the site changes. The rules come from the mockup the
   operator chose: the site's own layout with the search-first block, the tooltip cards and the
   release timeline set into it. The mockup's .tip and .ord are .ctip and .rn-ord here, because the
   site already uses those names for the armory's tooltip and the plugin order buttons. */

.cmp {
  --link: #e4d3a2; --linkhi: #fff3cf; --on-gold: #140f08;
  --tip: rgba(0, 0, 0, .86); --tip-edge: rgba(199, 179, 119, .25);
  --hover: rgba(199, 179, 119, .06); --mark: rgba(199, 179, 119, .26);
  --chg-bg: rgba(255, 163, 26, .07); --new-bg: rgba(143, 191, 106, .08); --gone-bg: rgba(232, 96, 79, .06);
  --cell: rgba(70, 59, 41, .62); --cell-bg: rgba(7, 6, 5, .8);
  --art: #9b8b6b;
  --f-display: "Exocet", Georgia, serif;
  --f-text: "Formal", Georgia, serif;
}
/* the directory's release counts (outside .cmp, on these pages only) */
.dir li a .n.chg { color: var(--warn); }

.cmp .sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.cmp p { margin: 0; }
.cmp ul { margin: 0; padding: 0; list-style: none; }
.cmp code { font-family: var(--f-display); font-size: 13px; letter-spacing: .02em; color: var(--ink2); }
.cmp .num { font-variant-numeric: lining-nums tabular-nums; }
.cmp .rng { font-variant-numeric: lining-nums; }
.cmp mark { background: var(--mark); color: inherit; padding: 0 1px; }
.cmp .t-red { color: var(--bad); }
.cmp .t-purple { color: #c77fe6; }
.cmp .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- the document: the site's blocks, with a body that takes the column for tables ---------- */
.cmp .cwide { padding: 22px 0 24px; border-bottom: 1px solid var(--rule); }
.cmp .cwide.lead { padding-top: 0; }
.cmp .lede .hi { color: var(--goldhi); font-weight: 400; }
.cmp .lede + .notice { margin-top: 14px; }
.cmp .cblk { display: grid; grid-template-columns: minmax(0, 1fr) 246px; gap: 34px; padding: 22px 0 24px; border-bottom: 1px solid var(--rule); align-items: start; }
.cmp .cblk.lead { padding-top: 0; }
.cmp .cblk .body, .cmp #cmp-rest { min-width: 0; display: grid; gap: 14px; align-content: start; }
.cmp .cslug { font-family: var(--f-display); font-size: 12.5px; letter-spacing: .05em; color: var(--ink3); display: flex; justify-content: space-between; gap: 6px 16px; align-items: baseline; flex-wrap: wrap; }
.cmp .cslug a { color: var(--ink2); }
.cmp .cx-head { display: flex; gap: 14px; align-items: center; min-width: 0; }
.cmp .cx-head > div { min-width: 0; }
.cmp .cx-head h1 { overflow-wrap: anywhere; }
.cmp .cx-head h1.long { font-size: 22px; line-height: 1.25; }
.cmp .cx-sub { font-family: var(--f-display); font-size: 13px; letter-spacing: .04em; color: var(--ink3); margin-top: 2px; }
.cmp .cx-find { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cmp .cx-field { display: flex; align-items: center; background: var(--well); border: 3px solid var(--rule2); border-image: url(/art/panel/field.png) 3 stretch; max-width: 100%; min-width: 0; }
.cmp .cx-field.grow { flex: 0 1 340px; }
.cmp .cx-field input { border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 14.5px; padding: 6px 8px; width: 100%; min-width: 0; }
.cmp .cx-field input::placeholder { color: var(--ink3); }
.cmp .cx-field input:focus { outline: none; }
.cmp .cx-field:focus-within { outline: 2px solid var(--golddim); }
.cmp .gut .big { font-size: 30px; }
.cmp .gut p + p { margin-top: 6px; }
.cmp .gut > * + .cap { margin-top: 16px; }
.cmp .gut code { font-size: 12.5px; }
.cmp .gut .hist { margin-top: 4px; color: var(--ink2); }
.cmp .gut .hist + .hist { margin-top: 10px; }
.cmp .rel-notes { white-space: pre-wrap; color: var(--ink2); font-size: 15.5px; padding: 10px 14px; background: var(--panel); border: 1px solid var(--rule2); max-width: 70ch; }

/* ---------- shared pieces ---------- */
.cmp .badge { display: inline-block; font-family: var(--f-display); font-size: 11.5px; letter-spacing: .05em; line-height: 1.5; padding: 0 7px; border: 1px solid currentColor; white-space: nowrap; vertical-align: middle; }
.cmp .badge.new { color: var(--ok); }
.cmp .badge.chg { color: var(--warn); }
.cmp .badge.gone { color: var(--bad); }
.cmp .was { font-family: var(--f-display); font-size: 12.5px; color: var(--warn); white-space: nowrap; }
.cmp .gone-name { color: var(--ink3); text-decoration: line-through; text-decoration-color: var(--rule2); }

.cmp .ctip { display: block; background: var(--tip); outline: 1px solid var(--tip-edge); padding: 10px 14px 12px; font-family: var(--f-display); font-size: 14px; line-height: 1.38; text-align: center; letter-spacing: .02em; overflow-wrap: anywhere; }
.cmp .ctip .l { display: block; }
.cmp .ctip .nm { font-size: 15.5px; }
.cmp .ctip .gap { display: block; height: 7px; }
.cmp .ctip .bk { font-size: 12.5px; letter-spacing: .05em; margin-top: 3px; }

.cmp .art { --w: 1; --h: 1; position: relative; display: grid; place-items: center; flex: none; width: calc(var(--w) * 28px + 1px); height: calc(var(--h) * 28px + 1px); max-width: 100%;
  background-color: var(--cell-bg); background-image: linear-gradient(var(--cell) 1px, transparent 1px), linear-gradient(90deg, var(--cell) 1px, transparent 1px);
  background-size: 28px 28px; color: var(--art); }
.cmp .art svg { width: 84%; height: 88%; display: block; }
.cmp .art img { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; }
.cmp .art:has(img) svg, .cmp .ic:has(img) svg { visibility: hidden; }

.cmp .chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.cmp .chip { margin: 0; font-family: var(--f-display); font-size: 13px; letter-spacing: .03em; line-height: 1.4; padding: 5px 11px; border: 1px solid var(--rule2); background: transparent; color: var(--ink2); cursor: pointer; white-space: nowrap; }
.cmp .chip:hover { color: var(--ink); border-color: var(--golddim); }
.cmp .chip[aria-pressed="true"] { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.cmp .chip .n { color: var(--ink3); margin-left: 6px; }
.cmp .chip[aria-pressed="true"] .n { color: var(--on-gold); }
.cmp .lvl { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-display); font-size: 13px; color: var(--ink3); }
.cmp .lvl input { width: 58px; background: var(--well); border: 1px solid var(--rule2); padding: 4px 6px; color: var(--ink); font: inherit; font-variant-numeric: tabular-nums; }

.cmp .cx-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin: 0; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.cmp .cx-kv > div { background: var(--panel); padding: 7px 10px 8px; min-width: 0; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.cmp .cx-kv dt { font-family: var(--f-display); font-size: 11.5px; letter-spacing: .05em; color: var(--ink3); }
.cmp .cx-kv dd { margin: 0; font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
.cmp .cx-bonus { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; padding: 10px 12px; margin: 0; background: var(--panel); border: 1px solid var(--rule2); }
.cmp .cx-bonus dt { font-family: var(--f-display); font-size: 12.5px; letter-spacing: .04em; color: var(--ink3); padding-top: 2px; }
.cmp .cx-bonus dd { margin: 0; color: var(--q-set); font-family: var(--f-display); font-size: 14.5px; }
.cmp .diff { padding: 9px 12px; border: 1px solid var(--warn); background: var(--chg-bg); display: grid; gap: 4px; justify-items: start; }
.cmp .diff.new { border-color: var(--ok); background: var(--new-bg); }
.cmp .diff p { color: var(--ink); font-size: 15px; }
.cmp .note { font-size: 14px; color: var(--ink3); }
.cmp .src { font-family: var(--f-display); font-size: 12px; letter-spacing: .04em; color: var(--ink3); }

.cmp .runes { display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; }
.cmp .runes .rn { display: grid; justify-items: center; gap: 2px; min-width: 58px; padding: 6px 8px 5px; background: var(--well); border: 1px solid var(--rule2); }
.cmp .runes .rn b { font-family: var(--f-display); font-weight: 400; font-size: 16px; color: var(--q-crafted); letter-spacing: .03em; }
.cmp .runes .rn b a { color: inherit; }
.cmp .runes .rn span { font-size: 12px; color: var(--ink3); font-family: var(--f-display); }
.cmp .runes .rn-ord { font-size: 11px; }

.cmp .ing { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 3px 9px 3px 3px; background: var(--tip); outline: 1px solid var(--tip-edge); font-family: var(--f-display); font-size: 13.5px; letter-spacing: .02em; color: var(--ink); vertical-align: middle; }
.cmp .ing .mini { position: relative; width: 26px; height: 26px; flex: none; display: grid; place-items: center; background: var(--cell-bg); border: 1px solid var(--cell); }
.cmp .ing .mini img { max-width: 24px; max-height: 24px; }
.cmp .ing .qty { color: var(--goldhi); }
.cmp .ing .t { min-width: 0; overflow-wrap: anywhere; }
.cmp .ing .mods { color: var(--ink3); font-size: 12px; }
.cmp .ing a { text-decoration-color: var(--rule2); }
.cmp .ing a:not([class]) { color: var(--ink); }
.cmp .arrow { font-family: var(--f-display); font-size: 20px; line-height: 1; color: var(--gold); padding: 0 2px; }
.cmp .flag { display: block; font-size: 13.5px; color: var(--warn); }

.cmp .tbl { width: 100%; min-width: 0; border-collapse: collapse; font-size: 15px; }
.cmp .tbl.w620 { min-width: 620px; }
.cmp .tbl.w560 { min-width: 560px; }
.cmp .tbl th { text-align: left; font-family: var(--f-display); font-weight: 400; font-size: 12.5px; letter-spacing: .04em; color: var(--ink3); padding: 0 10px 7px; border-bottom: 1px solid var(--rule2); white-space: nowrap; }
.cmp .tbl td { padding: 7px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.cmp .tbl th.r, .cmp .tbl td.r { text-align: right; }
.cmp .tbl td.num, .cmp .tbl td.r { font-variant-numeric: lining-nums tabular-nums; }
.cmp .tbl tbody tr:hover { background: var(--hover); }
.cmp .tbl tr.chg td { background: var(--chg-bg); }
.cmp .tbl tr.new td { background: var(--new-bg); }
.cmp .tbl tr.gone td { background: var(--gone-bg); }
.cmp .tbl tr.grp th { font-size: 13px; color: var(--goldhi); padding: 16px 10px 6px; border-bottom: 1px solid var(--rule2); }
.cmp .tbl tr.grp:first-child th { padding-top: 4px; }
.cmp .tbl td.arr { color: var(--gold); font-family: var(--f-display); width: 1%; white-space: nowrap; }
.cmp .tbl td.rowtext { font-family: var(--f-display); font-size: 13px; letter-spacing: .02em; color: var(--ink3); }
.cmp .tbl td.rowtext a { color: var(--ink2); }
.cmp .tbl td.kind { font-family: var(--f-display); font-size: 12.5px; color: var(--ink3); white-space: nowrap; }
.cmp .tbl a { text-decoration-color: var(--rule2); }
.cmp .tbl a:hover { text-decoration-color: currentColor; }
.cmp .tbl.dense { font-size: 14.5px; }
.cmp .tbl.dense td { padding: 5px 10px; }
.cmp .tbl td.nmcell { font-family: var(--f-display); font-size: 14.5px; letter-spacing: .02em; }
.cmp .tbl td.props { font-family: var(--f-display); font-size: 13px; letter-spacing: .02em; line-height: 1.45; }
.cmp .tbl .more { color: var(--ink3); white-space: nowrap; }

/* ---------- an entry opened: the tooltip card beside its facts ---------- */
.cmp .dt { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 14px; align-items: start; min-width: 0; }
.cmp .dt.one { grid-template-columns: minmax(0, 1fr); }
.cmp .dt-tip { display: grid; justify-items: center; gap: 12px; padding: 16px 12px; background-color: var(--dir); background-image: repeating-linear-gradient(45deg, rgba(70, 59, 41, .16) 0 1px, transparent 1px 8px); border: 1px solid var(--rule); }
.cmp .dt-tip .ctip { width: min(100%, 340px); }
.cmp .dt-meta { display: grid; gap: 12px; min-width: 0; align-content: start; }
.cmp .tc-set { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 196px), 1fr)); gap: 12px; padding: 14px; background-color: var(--dir); background-image: repeating-linear-gradient(45deg, rgba(70, 59, 41, .16) 0 1px, transparent 1px 8px); border: 1px solid var(--rule); }
.cmp .tc-set .piece { display: grid; justify-items: center; gap: 10px; align-content: start; min-width: 0; }
.cmp .tc-set .piece .ctip { width: 100%; }
.cmp .tc-set .bonus { grid-column: 1 / -1; }
.cmp .tc-set .bonus .ctip { max-width: 520px; margin: 0 auto; }
.cmp .rc { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 10px 12px; background: var(--well); border: 1px solid var(--rule); min-width: 0; }
.cmp .rc.chg { border-color: var(--warn); }
.cmp .rc.new { border-color: var(--ok); }
.cmp .rc .plus { color: var(--ink3); font-family: var(--f-display); }
.cmp .rc .desc { flex-basis: 100%; font-size: 13.5px; color: var(--ink3); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.cmp .rc .desc code { font-size: 12.5px; color: var(--ink3); }

/* ---------- the search block ---------- */
.cmp .sf-hero { margin-top: 16px; padding: clamp(16px, 3vw, 28px); background: var(--panel); border: 1px solid var(--rule2); display: grid; gap: 14px; }
.cmp .sf-hero label.big { font-family: var(--f-display); font-size: 13px; letter-spacing: .06em; color: var(--ink3); }
.cmp .sf-q { display: flex; align-items: center; gap: 12px; border: 2px solid var(--golddim); background: var(--well); padding: 0 14px; min-width: 0; }
.cmp .sf-q:focus-within { border-color: var(--goldhi); }
.cmp .sf-q svg { width: 22px; height: 22px; color: var(--gold); flex: none; }
.cmp .sf-q input { font-family: var(--f-display); font-size: clamp(19px, 2.6vw, 27px); letter-spacing: .02em; padding: 13px 0; flex: 1; min-width: 0; background: transparent; border: 0; color: var(--ink); }
.cmp .sf-q input:focus { outline: none; }
.cmp .sf-q input::placeholder { color: var(--ink3); }
.cmp .sf-q input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.cmp .sf-q .go { font-family: var(--f-display); font-size: 13px; letter-spacing: .04em; padding: 4px 10px; background: transparent; color: var(--ink); border: 1.5px solid var(--rule2); cursor: pointer; }
.cmp .sf-q .go:hover { border-color: var(--golddim); color: var(--goldhi); }
.cmp .sf-hero.js .go { display: none; }
.cmp .sf-q .clear { color: var(--ink3); font-family: var(--f-display); font-size: 13px; text-decoration: none; padding: 6px; }
.cmp .sf-q .clear:hover { color: var(--ink); }
.cmp .facets { display: grid; gap: 9px; }
.cmp .facet { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.cmp .facet .lbl { font-family: var(--f-display); font-size: 12.5px; color: var(--ink3); letter-spacing: .05em; }
.cmp .sf-more > summary, .cmp .tl-old > summary { cursor: pointer; list-style: none; font-family: var(--f-display); letter-spacing: .05em; width: max-content; max-width: 100%; }
.cmp .sf-more > summary { font-size: 12.5px; color: var(--ink3); }
.cmp .sf-more > summary::-webkit-details-marker, .cmp .tl-old > summary::-webkit-details-marker { display: none; }
.cmp .sf-more > summary::before, .cmp .tl-old > summary::before { content: "▸ "; }
.cmp .sf-more[open] > summary::before, .cmp .tl-old[open] > summary::before { content: "▾ "; }
.cmp .sf-more[open] > summary { margin-bottom: 9px; }
.cmp .sf-more > summary:hover, .cmp .tl-old > summary:hover { color: var(--ink); }

/* ---------- results, in place of the document's blocks ---------- */
.cmp .sf-results { min-width: 0; }
.cmp .sf-res-hd { display: flex; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; align-items: baseline; font-family: var(--f-display); color: var(--ink3); font-size: 13px; letter-spacing: .04em; }
.cmp .sf-res-hd b { font-weight: 400; color: var(--ink); }
.cmp .sf-group > h3 { font-size: 15px; color: var(--ink2); padding: 18px 0 6px; border-bottom: 1px solid var(--rule2); display: flex; justify-content: space-between; gap: 10px; }
.cmp .sf-group > h3 span { font-size: 12.5px; color: var(--ink3); }
.cmp .sf-sub { font-family: var(--f-display); font-size: 12px; letter-spacing: .05em; color: var(--ink3); padding: 10px 6px 2px 64px; }
.cmp .sf-more-hits { padding: 8px 6px 4px 64px; font-size: 14px; }
.cmp .sf-more-hits button { font-family: var(--f-text); font-size: 14px; }
.cmp .hit { border-bottom: 1px solid var(--rule); }
.cmp .hit.chg { box-shadow: inset 2px 0 0 var(--warn); }
.cmp .hit.new { box-shadow: inset 2px 0 0 var(--ok); }
.cmp .hit > .hb { width: 100%; display: grid; grid-template-columns: 42px minmax(0, 1fr) 16px; gap: 14px; align-items: center; padding: 9px 6px 9px 8px; background: transparent; border: 0; text-align: left; cursor: pointer; color: var(--ink2); font: inherit; text-decoration: none; }
.cmp .hit > .hb:hover { background: var(--hover); color: var(--ink2); }
.cmp .hit .ic { position: relative; width: 42px; height: 42px; display: grid; place-items: center; background: var(--cell-bg); border: 1px solid var(--cell); color: var(--art); }
.cmp .hit .ic svg { width: 32px; height: 32px; }
.cmp .hit .ic img { position: absolute; inset: 0; margin: auto; max-width: 38px; max-height: 38px; }
.cmp .hit .tx { min-width: 0; display: grid; gap: 1px; }
.cmp .hit .nm { font-family: var(--f-display); font-size: 17px; letter-spacing: .02em; line-height: 1.25; overflow-wrap: anywhere; }
.cmp .hit .sub { font-size: 14px; color: var(--ink3); }
.cmp .hit .snip { font-family: var(--f-display); font-size: 13.5px; color: var(--q-magic); overflow-wrap: anywhere; }
.cmp .hit .snip.q-set { color: var(--q-set); }
.cmp .hit .snip.q-white { color: var(--q-white); }
.cmp .hit .snip.plain { color: var(--ink2); }
.cmp .hit .snip.recipe { color: var(--ink2); font-family: var(--f-text); font-size: 14.5px; }
.cmp .hit .nmrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.cmp .hit .chev { font-family: var(--f-display); color: var(--ink3); font-size: 13px; width: 14px; text-align: center; }
.cmp .hit-body { padding: 4px 8px 20px 64px; }
.cmp .hit-body .open-link { font-size: 14px; }
.cmp .sf-empty { padding: 18px 6px; color: var(--ink3); }

/* ---------- the release timeline, in the gutter ---------- */
.cmp .tl { display: grid; gap: 12px; min-width: 0; }
.cmp .tl > h2 { font-size: 18px; margin-bottom: 4px; }
.cmp .tl > p { font-size: 14px; color: var(--ink3); margin-bottom: 10px; }
.cmp .tl-old > summary { font-size: 13px; color: var(--ink2); padding: 4px 0 10px 6px; }
.cmp .tl-rel { position: relative; padding: 0 0 16px 22px; margin-left: 6px; border-left: 2px solid var(--rule2); }
.cmp .tl-rel:last-child { border-left-color: transparent; }
.cmp .tl-rel::before { content: ""; position: absolute; left: -8px; top: 5px; width: 12px; height: 12px; background: var(--bg); border: 2px solid var(--golddim); transform: rotate(45deg); }
.cmp .tl-rel.cur::before { background: var(--gold); border-color: var(--goldhi); }
.cmp .tl-rel h3 { font-size: 18px; display: flex; gap: 4px 10px; align-items: baseline; flex-wrap: wrap; }
.cmp .tl-rel h3 a { color: inherit; text-decoration-color: var(--rule2); }
.cmp .tl-rel .when { font-family: var(--f-display); font-size: 12.5px; color: var(--ink3); letter-spacing: .03em; }
.cmp .tl-rel.cur { background: var(--panel); padding: 12px 12px 14px 22px; border-left-color: var(--gold); }
.cmp .tl-rel > .note { margin-top: 6px; }
.cmp .tl-notes { font-size: 14.5px; color: var(--ink2); margin: 6px 0 8px; display: grid; gap: 2px; }
.cmp .tl-list { display: grid; gap: 5px; }
.cmp .tl-list li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 14.5px; }
.cmp .tl-list a { font-family: var(--f-display); font-size: 14.5px; letter-spacing: .02em; text-decoration-color: var(--rule2); }
.cmp .tl-list a:hover { text-decoration-color: currentColor; }
.cmp .tl-list a.more { font-family: var(--f-text); color: var(--ink2); }
.cmp .tl-list .d { flex-basis: 100%; color: var(--ink3); font-size: 13.5px; padding-left: 2px; }

/* ---------- widths ---------- */
@media (max-width: 760px) {
  .cmp .cblk { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .cmp .gut { box-shadow: inset 0 1px 0 var(--rule); padding: 14px 0 0; }
  .cmp .dt { grid-template-columns: minmax(0, 1fr); }
  .cmp .hit-body { padding-left: 8px; }
  .cmp .sf-sub, .cmp .sf-more-hits { padding-left: 8px; }
  .cmp .facet { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .cmp .sf-q { padding: 0 10px; gap: 8px; }
}
@media (prefers-reduced-motion: no-preference) {
  .cmp .chip, .cmp .hit > .hb { transition: background-color .12s ease, border-color .12s ease, color .12s ease; }
}

/* A base's change shared by the items built on it (diffEntries' alsoOn). */
.cmp details.also { margin-top: 4px; font-size: 14px; color: var(--ink3); }
.cmp details.also > summary { cursor: pointer; width: max-content; max-width: 100%; }
.cmp details.also[open] > summary { margin-bottom: 3px; }

/* ---------- feature pages (features-pages.ts) ---------- */
.cmp .fx-doc { display: grid; gap: 14px; max-width: 100%; }
.cmp .fx-doc > p, .cmp .fx-doc > .fx-ul, .cmp .fx-doc > .fx-ol { max-width: 70ch; color: var(--ink2); font-size: 16.5px; }
.cmp .fx-doc > h2 { font-size: 21px; margin: 12px 0 0; }
.cmp .fx-doc > h3 { font-size: 17px; margin: 6px 0 0; color: var(--ink2); }
.cmp .fx-doc i { font-style: italic; }
.cmp .fx-doc b { color: var(--ink); font-weight: 600; }
.cmp .fx-ul { list-style: none; display: grid; gap: 4px; padding-left: 0; }
.cmp .fx-ul > li { position: relative; padding-left: 18px; }
.cmp .fx-ul > li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 6px; height: 6px; background: var(--golddim); transform: rotate(45deg); }
.cmp .fx-ol { margin: 0; padding-left: 24px; display: grid; gap: 4px; }
.cmp .fx-ol > li::marker { font-family: var(--f-display); color: var(--ink3); font-size: 13px; }
.cmp .fx-ref { font-family: var(--f-display); font-size: .92em; letter-spacing: .02em; text-decoration-color: var(--rule2); }
.cmp .fx-val { font-family: var(--f-display); font-size: .92em; letter-spacing: .02em; color: var(--goldhi); }
.cmp .fx-miss { font-family: var(--f-display); font-size: 12.5px; letter-spacing: .03em; color: var(--ink3); border: 1px dashed var(--rule2); padding: 0 5px; }
.cmp .fx-miss-b { display: block; width: max-content; max-width: 100%; padding: 5px 9px; }
.cmp .fx-img { max-width: 100%; height: auto; display: block; border: 1px solid var(--rule2); }
.cmp .fx-fig { margin: 0; display: grid; gap: 6px; justify-items: start; }
.cmp .fx-fig figcaption { font-size: 13.5px; color: var(--ink3); }
.cmp .fx-tbl { min-width: 0; max-width: 760px; }
.cmp .fx-tbl td.c, .cmp .fx-tbl th.c { text-align: center; }

.cmp .fx-entry { margin: 0; display: grid; justify-items: center; gap: 10px; width: min(100%, 360px); padding: 16px 12px 12px; background-color: var(--dir); background-image: repeating-linear-gradient(45deg, rgba(70, 59, 41, .16) 0 1px, transparent 1px 8px); border: 1px solid var(--rule); }
.cmp .fx-entry-a { display: grid; justify-items: center; gap: 12px; width: 100%; text-decoration: none; color: inherit; }
.cmp .fx-entry .ctip { width: 100%; }
.cmp .fx-entry figcaption { font-size: 13.5px; color: var(--ink3); }
.cmp .fx-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 0 18px; }
.cmp .fx-list li { display: grid; padding: 5px 2px; border-bottom: 1px solid var(--rule); min-width: 0; }
.cmp .fx-list a { font-family: var(--f-display); font-size: 14.5px; letter-spacing: .02em; text-decoration-color: var(--rule2); overflow-wrap: anywhere; }
.cmp .fx .sub { font-size: 13px; color: var(--ink3); }
.cmp .fx-recipe { display: grid; gap: 6px; }

.cmp .fx-card { display: grid; gap: 12px; padding: 14px; background: var(--panel); border: 1px solid var(--rule2); min-width: 0; }
.cmp .fx-hd { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
.cmp .fx-hd h3 { font-size: 19px; margin: 0; }
.cmp .fx-card .tbl tbody th { font-family: var(--f-display); font-size: 13px; color: var(--ink2); padding: 7px 10px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.cmp .fx-card .tbl td.imm { color: var(--q-crafted); font-family: var(--f-display); font-size: 13px; }
.cmp .fx-card .cap { font-family: var(--f-display); font-size: 12px; letter-spacing: .05em; color: var(--ink3); margin-right: 6px; }
.cmp .fx-where { font-size: 15px; color: var(--ink2); }
.cmp .fx-tc dd { font-family: var(--f-display); font-size: 13.5px; letter-spacing: .02em; }

.cmp .fx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.cmp .fx-cards a { display: grid; gap: 4px; height: 100%; padding: 12px 14px; background: var(--panel); border: 1px solid var(--rule2); text-decoration: none; color: var(--ink2); }
.cmp .fx-cards a:hover { border-color: var(--golddim); background: var(--hover); }
.cmp .fx-cards b { font-family: var(--f-display); font-weight: 400; font-size: 17px; color: var(--q-unique); letter-spacing: .02em; }
.cmp .fx-cards span { font-size: 14.5px; }
.cmp .fx-gl { display: grid; gap: 3px; }
.cmp .fx-gl a { font-family: var(--f-display); font-size: 13.5px; letter-spacing: .02em; text-decoration-color: var(--rule2); }

/* the hireling trees: branches in columns, tiers in rows, the focus branch apart */
.cmp .fx-mt { display: grid; gap: 14px; }
.cmp .fx-mt-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.cmp .fx-mt-tabs a { font-family: var(--f-display); font-size: 13px; letter-spacing: .03em; padding: 5px 11px; border: 1px solid var(--rule2); color: var(--ink2); text-decoration: none; }
.cmp .fx-mt-tabs a:hover { color: var(--ink); border-color: var(--golddim); }
.cmp .fx-mt-tabs a[aria-selected="true"] { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.cmp .fx-mt-class { display: grid; gap: 12px; padding: 14px; background: var(--panel); border: 1px solid var(--rule2); min-width: 0; scroll-margin-top: 16px; }
.cmp .fx-mt-class > h3 { font-size: 19px; margin: 0; color: var(--q-unique); }
.cmp .mt-wrap { min-width: 0; }
.cmp .mt-grid { display: grid; gap: 6px; }
.cmp .mt-row { display: grid; grid-template-columns: 62px repeat(var(--cols), minmax(0, 1fr)); gap: 6px; }
.cmp .mt-head { align-items: end; }
.cmp .mt-bh { font-family: var(--f-display); font-size: 14px; letter-spacing: .04em; color: var(--goldhi); padding: 0 6px 4px; border-bottom: 1px solid var(--rule2); }
.cmp .mt-tier { font-family: var(--f-display); font-size: 12px; letter-spacing: .04em; color: var(--ink3); padding-top: 10px; }
.cmp .mt-cell { display: grid; gap: 6px; align-content: start; min-width: 0; }
.cmp .mt-node { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: start; padding: 5px 7px 6px 5px; background: var(--tip); border: 1px solid var(--tip-edge); min-width: 0; }
.cmp .mt-ic { width: 34px; height: 34px; display: grid; place-items: center; background: var(--cell-bg); border: 1px solid var(--cell); }
.cmp .mt-ic img { width: 32px; height: 32px; display: block; image-rendering: pixelated; }
.cmp .mt-tx { display: grid; gap: 1px; min-width: 0; }
.cmp .mt-nm { font-family: var(--f-display); font-weight: 400; font-size: 14px; letter-spacing: .02em; color: var(--ink); overflow-wrap: anywhere; }
.cmp .mt-meta { font-family: var(--f-display); font-size: 11.5px; letter-spacing: .03em; color: var(--ink3); }
.cmp .mt-text { font-size: 13.5px; color: var(--q-magic); line-height: 1.3; }
.cmp .mt-node.k-synergy .mt-nm { color: var(--q-set); }
.cmp .mt-node.k-aura .mt-nm { color: var(--q-unique); }
.cmp .mt-node.k-passive .mt-nm { color: var(--q-magic); }
.cmp .mt-node.k-focus .mt-nm { color: var(--q-crafted); }
.cmp .mt-tac { display: grid; gap: 6px; }
.cmp .mt-tac h4 { font-size: 14px; letter-spacing: .04em; color: var(--goldhi); margin: 0; padding-bottom: 4px; border-bottom: 1px solid var(--rule2); }
.cmp .mt-focus { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 6px; }
/* Narrow: each branch under the one before, its tiers under its name (order from the markup). */
@media (max-width: 760px) {
  .cmp .mt-grid { grid-template-columns: minmax(0, 1fr); }
  .cmp .mt-row { display: contents; }
  .cmp .mt-tier { display: none; }
  .cmp .mt-bh, .cmp .mt-cell { order: var(--o); }
  .cmp .mt-bh { padding-top: 8px; }
  .cmp .mt-cell:empty { display: none; }
  .cmp .mt-cell::before { content: attr(data-tier); font-family: var(--f-display); font-size: 11.5px; letter-spacing: .04em; color: var(--ink3); }
  .cmp .fx-mt-class { padding: 10px; }
  .cmp .fx-doc > p, .cmp .fx-doc > .fx-ul, .cmp .fx-doc > .fx-ol { font-size: 15.5px; }
}