/* The site's components: layout, wells, alerts, buttons, forms, tables, tabs, pagers, sprite tiles, the navbar and the
   footer. Every page uses these; a page's own rules (pages.css) only place them. Only tokens (tokens.css).
   Some components answer to two class names: the community pages' Bootstrap-style name and the name the rest of the
   site's templates use (.btn for .button, .panel for .well, .field for .form-group). One rule styles both, so the two
   can never drift apart. */

/* ----- navbar, every page ----- */
.navbar { background: var(--c-bar); border-bottom: var(--line) solid var(--c-bar-rule); font: var(--t-body)/var(--lh) var(--c-font); color: var(--c-muted); }
.navbar .container { position: relative; display: flex; align-items: center; min-height: var(--bar-h); margin: 0 auto; padding: 0 var(--s-3); }
.navbar__collapse { display: flex; flex: 1; align-items: center; }
.navbar__brand { display: inline-flex; align-items: center; height: var(--bar-h); padding-right: var(--s-3); font-size: var(--t-brand); font-weight: var(--w-bold); color: var(--c-text); text-decoration: none; }
.navbar__brand:hover { color: var(--c-strong); text-decoration: none; }
.navbar__toggle { display: none; margin-left: auto; padding: var(--cell) var(--s-2); background: transparent; border: var(--line) solid var(--c-rule); border-radius: var(--radius); cursor: pointer; }
.navbar__toggle span { display: block; width: var(--bar-icon-w); height: var(--line-thick); margin: var(--caret) 0; background: var(--c-bar-icon); border-radius: var(--line); }
.navbar__toggle:hover { background: var(--c-rule); }
.navbar__nav { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.navbar__nav > li { position: relative; }
.navbar__nav > li > a,
.navbar__nav > li > button { display: inline-flex; align-items: center; gap: var(--caret); height: var(--bar-h); padding: 0 var(--ctl-pad-x); color: var(--c-muted); font: inherit; text-decoration: none; background: none; border: 0; cursor: pointer; }
.navbar__nav > li > a:hover,
.navbar__nav > li > button:hover,
.navbar__nav > li.is-open > button,
.navbar__nav > li > button:focus-visible { color: var(--c-text); background: var(--c-bar-rule); outline: none; }
.navbar__nav > li.is-on > a,
.navbar__nav > li.is-on > button { color: var(--c-input-text); background: var(--c-bar-rule); }
.navbar__nav .caret { display: inline-block; width: 0; height: 0; margin-left: var(--s-0); border-top: var(--caret) solid; border-left: var(--caret) solid transparent; border-right: var(--caret) solid transparent; }
.navbar__menu { display: none; position: absolute; left: 0; top: 100%; z-index: 1000; min-width: var(--menu-w); margin: 0; padding: var(--s-1) 0; list-style: none; background: var(--c-white); border: var(--line) solid var(--c-menu-rule); border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 var(--ctl-pad-y) var(--ctl-pad-x) var(--c-shadow-menu); }
/* a menu is open when its button says so; a pointer that can hover opens it too, unless the button just closed it */
.navbar__nav > li.is-open > .navbar__menu { display: block; }
@media (hover: hover) and (pointer: fine) {
    .navbar__nav > li:hover:not(.is-closed) > .navbar__menu { display: block; }
}
.navbar__nav .navbar__menu a,
.navbar__menu button { display: block; width: 100%; padding: var(--s-0) var(--s-4); color: var(--c-text); font: inherit; line-height: var(--lh); white-space: nowrap; text-align: left; text-decoration: none; background: none; border: 0; cursor: pointer; }
.navbar__nav .navbar__menu a:hover,
.navbar__nav .navbar__menu a:focus-visible,
.navbar__menu button:hover { color: var(--c-text); background: var(--c-surface); outline: none; }
.navbar__menu .is-head { padding: var(--s-0) var(--s-4); font-size: var(--t-small); color: var(--c-muted); white-space: nowrap; }
.navbar__menu .divider { height: var(--line); margin: var(--cell) 0; background: var(--c-bar-rule); }
.navbar__right { display: flex; align-items: center; gap: var(--cell); margin-left: auto; }
.navbar__right .navbar__menu { left: auto; right: 0; }
.navbar__form { display: contents; }
.navbar__search { display: none; }
.navbar__search.is-open { display: flex; }
.navbar__search input { width: var(--search-w); height: var(--ctl-h); padding: var(--ctl-pad-y) var(--ctl-pad-x); border: var(--line) solid var(--c-input); border-radius: var(--radius) 0 0 var(--radius); font: inherit; color: var(--c-input-text); background: var(--c-white); }
.navbar__search input:focus { outline: none; border-color: var(--c-focus); box-shadow: 0 0 var(--ctl-pad-y) var(--c-focus-glow); }
.navbar__search button { height: var(--ctl-h); padding: var(--ctl-pad-y) var(--ctl-pad-x); border: var(--line) solid var(--c-input); border-left: 0; border-radius: 0 var(--radius) var(--radius) 0; background: var(--c-white); font: inherit; color: var(--c-text); cursor: pointer; }

/* ----- buttons -----
   One button. Default is white; primary (blue) is the page's main action, whether it buys, downloads or logs in, so
   every page's main action looks the same; danger (red) is cancel. The rest of the site's templates name the same
   buttons .btn, .btn.buy and .btn.accept (both primary) and .btn.close (danger); .small and .wide size them. */
.button, .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1);
    min-height: var(--ctl-h); margin: 0; padding: var(--ctl-pad-y) var(--ctl-pad-x);
    font: var(--w-normal) var(--t-body)/var(--lh) var(--c-font); color: var(--c-text); white-space: nowrap; text-align: center;
    background: var(--c-white); border: var(--line) solid var(--c-input); border-radius: var(--radius);
    text-decoration: none; cursor: pointer;
}
.button:hover, .button:focus-visible,
.btn:hover, .btn:focus-visible { color: var(--c-text); background: var(--c-hover); border-color: var(--c-hover-rule); outline: none; text-decoration: none; }
.button--primary, .btn.buy, .btn.accept { color: var(--c-white); background: var(--c-link); border-color: var(--c-primary-rule); }
.button--primary:hover, .button--primary:focus-visible,
.btn.buy:hover, .btn.buy:focus-visible,
.btn.accept:hover, .btn.accept:focus-visible { color: var(--c-white); background: var(--c-primary-hover); border-color: var(--c-primary-hover-rule); }
.button--danger, .btn.close { color: var(--c-white); background: var(--c-danger); border-color: var(--c-danger-rule); }
.button--danger:hover, .button--danger:focus-visible,
.btn.close:hover, .btn.close:focus-visible { color: var(--c-white); background: var(--c-danger-hover); border-color: var(--c-danger-hover-rule); }
.button--lg { min-height: var(--ctl-h-lg); padding: var(--s-2) var(--ctl-pad-x-lg); font-size: var(--t-ctl-lg); }
.btn.small { min-height: var(--ctl-h-sm); padding: var(--s-1) var(--s-2); font-size: var(--t-small); }
.btn.wide { width: 100%; }
.button--icon { padding: var(--ctl-pad-y) var(--s-2); }
.button svg { width: var(--icon); height: var(--icon); fill: currentColor; }
/* a row of buttons */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: var(--s-4) 0 0; }

/* the navbar folds into its menu button below the width its six menus, search, Play and Log In need on one row */
@media (max-width: 991px) {
    .navbar .container { flex-wrap: wrap; }
    .navbar__toggle { display: block; }
    .navbar__collapse { display: none; flex: none; flex-basis: 100%; padding-bottom: var(--cell); border-top: var(--line) solid var(--c-bar-rule); }
    .navbar__collapse.is-open { display: block; }
    .navbar__nav { flex-direction: column; align-items: stretch; }
    .navbar__nav > li > a,
    .navbar__nav > li > button { width: 100%; height: var(--s-5); padding: 0 var(--s-3); }
    .navbar__menu { position: static; padding-left: var(--s-3); background: transparent; border: 0; box-shadow: none; }
    .navbar__right { flex-wrap: wrap; margin: var(--cell) 0 0; padding: 0 var(--s-3); }
    .navbar__right .navbar__nav { flex-direction: row; }
    .navbar__search { display: flex; }
    .navbar__search input { width: 100%; }
    /* the search form is always shown in the phone menu, so the button that opens it on desktop has nothing to do */
    .navbar__search-toggle { display: none; }
}

/* ----- layout -----
   One container: the content column, the navbar's row and the footer's row all sit on the same edges. */
.content, .wrap, .navbar .container { width: 100%; margin-inline: auto; padding-inline: var(--s-3); }
@media (min-width: 768px) { .content, .wrap, .navbar .container { width: var(--container-sm); } }
@media (min-width: 992px) { .content, .wrap, .navbar .container { width: var(--container-md); } }
@media (min-width: 1200px) { .content, .wrap, .navbar .container { width: var(--container); } }
.content { flex: 1; padding-bottom: var(--s-5); }
/* every page ends the same distance above the footer: the page's own padding, never plus the last block's margin */
.content > :last-child,
.content > .row:last-child > * > :last-child { margin-bottom: 0; }

/* a 12 column grid's three widths */
.row { display: flex; flex-wrap: wrap; margin: 0 calc(-1 * var(--s-3)); }
.col-3, .col-5, .col-6, .col-7, .col-9 { padding: 0 var(--s-3); }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
/* columns stack below 992 px, as the reference's (its col-md columns: the wiki's sidebar drops under the page at 768) */
@media (max-width: 991px) { .col-3, .col-5, .col-6, .col-7, .col-9 { flex-basis: 100%; max-width: 100%; } }

/* ----- wells and alerts ----- */
.well, .panel { min-height: var(--s-4); margin-bottom: var(--s-4); padding: calc(var(--s-4) - var(--line)); background: var(--c-surface); border: var(--line) solid var(--c-bar-rule); border-radius: var(--radius); box-shadow: inset 0 var(--line) var(--line) var(--c-shadow-well); }
.panel { max-width: var(--panel-w); }
.panel--wide { max-width: none; }
.panel--narrow { max-width: var(--panel-narrow); }
.panel > h2:first-child, .panel > h3:first-child { margin-top: 0; }
.panel > :last-child, .well > :last-child { margin-bottom: 0; }
.alert { max-width: none; margin-bottom: var(--s-4); padding: var(--s-3); border: var(--line) solid transparent; border-radius: var(--radius); }
.alert--ok { color: var(--c-ok-text); background: var(--c-ok-bg); border-color: var(--c-ok-rule); }
.alert--error { color: var(--c-bad-text); background: var(--c-bad-bg); border-color: var(--c-bad-rule); }
.alert--warn, .sandbox { color: var(--c-warn-text); background: var(--c-warn-bg); border-color: var(--c-warn-rule); }
/* the test-mode bar across the top of every page */
.sandbox { margin: 0; padding: var(--s-1) var(--s-3); text-align: center; border-bottom: var(--line) solid var(--c-warn-rule); }

/* tables: striped, 8 px cells, a 2 px rule under the head. A wide table scrolls sideways only on a narrow screen: on
   a wide one nothing clips the gear tooltips that open above a row. */
.table-wrap { max-width: none; margin-bottom: var(--s-4); overflow: visible; background: none; border: 0; border-radius: 0; }
@media (max-width: 991px) { .table-wrap { overflow-x: auto; scrollbar-color: var(--c-input) transparent; } }
/* as the reference: a table spans its column at every screen width, and the browser shares the spare width among the
   columns (realmeye.com's tables, measured 2026-11-07) */
table { width: 100%; margin-bottom: var(--s-4); border-collapse: collapse; background: transparent; }
.table-wrap > table { margin-bottom: 0; }
th, td { padding: var(--cell) var(--cell-x); font-size: var(--t-body); line-height: var(--lh); text-align: left; vertical-align: middle; white-space: nowrap; color: inherit; border-top: var(--line) solid var(--c-rule); }
thead th { font-weight: var(--w-bold); vertical-align: bottom; border-top: 0; border-bottom: var(--line-thick) solid var(--c-rule); }
tbody > tr:nth-of-type(odd) { background: var(--c-stripe); }
tbody > tr:hover { background: var(--c-surface); }
tbody > tr.yours { background: var(--c-yours); }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.center, th.center { text-align: center; }
/* free text (a killer, a date) may take two lines when the screen is too narrow for the table on one */
@media (max-width: 991px) { td.wraps, th.wraps { white-space: normal; } }
/* on a wide screen the table spans its column and the spare width is shared out evenly: every column gets the same
   extra room and its content sits centred in it, so the gaps between all columns are equal and so are the two outer
   edges. A narrow screen keeps the plain layout (names left, numbers right). */
@media (min-width: 992px) {
    thead th { width: 1%; }
    /* :not(#_) lifts this over the .num and .center alignments, which only apply to the narrow layout */
    table:has(thead) :is(thead th, tbody td):not(#_) { text-align: center; }
}


/* label and value tables: an item's facts, an account's facts */
/* these are as wide as their text: no spare-width cell */
.table--kv, .table--facts { width: auto; }
.table--kv {
    /* 20 px rows with no padding above or below, as the reference's item and enemy facts */
    th, td { padding-block: 0; }
    /* the labels start on the page's left edge, like every other block */
    th { width: 1%; padding-left: 0; padding-right: var(--s-4); vertical-align: top; border-top: 0; white-space: nowrap; }
    td { vertical-align: top; border-top: 0; white-space: normal; }
    tr, tr:nth-of-type(odd), tr:hover { background: transparent; }
}
.table--facts {
    width: auto;
    th, td { padding: 0 var(--s-3) 0 0; font-weight: var(--w-normal); border: 0; }
    tr, tr:nth-of-type(odd), tr:hover { background: transparent; }
}

/* tabs, pills, pagers */
.nav-tabs { display: flex; flex-wrap: wrap; margin: 0 0 var(--s-3); padding: 0; list-style: none; border-bottom: var(--line) solid var(--c-rule); }
.nav-tabs > li { margin-bottom: calc(-1 * var(--line)); }
.nav-tabs > li > a { display: block; margin-right: var(--s-0); padding: var(--s-2) var(--s-3); line-height: var(--lh); color: var(--c-link); border: var(--line) solid transparent; border-radius: var(--radius) var(--radius) 0 0; }
.nav-tabs > li > a:hover { background: var(--c-rule-light); border-color: var(--c-rule-light) var(--c-rule-light) var(--c-rule); text-decoration: none; }
.nav-tabs > li.is-on > a { color: var(--c-white); background: var(--c-link); border-color: var(--c-link); cursor: default; }
/* pills as the reference's: 40 px tall, 8 px below what is above them, 20 px above what follows */
.nav-pills { display: flex; flex-wrap: wrap; gap: var(--s-0); margin: var(--cell) 0 var(--s-4); padding: 0; list-style: none; }
.nav-pills > li > a { display: block; padding: var(--pill-pad-y) var(--pill-pad-x); line-height: var(--lh); color: var(--c-link); border-radius: var(--radius); }
.nav-pills > li > a:hover { background: var(--c-rule-light); text-decoration: none; }
.nav-pills > li.is-on > a { color: var(--c-white); background: var(--c-link); }
/* as the reference: a joined row of page links, centred, above the table and again below it */
.pager { display: flex; flex-wrap: wrap; justify-content: center; margin: var(--s-4) 0; }
/* the header text sits a cell's padding inside the table, so the table starts that much closer: the text then sits 20 px
   under the pager, the same as the bottom pager under the last row */
.pager:has(+ .table-wrap) { margin-bottom: 0; }
.pager + .table-wrap { margin-top: calc(var(--s-4) - var(--cell)); }
/* under a line of text the reference's pager keeps both gaps (its list is inline-block): the text's 10 px and its own 20 */
p + .pager { margin-top: calc(var(--s-4) + var(--s-2)); }
.pager > a { display: inline-block; margin-left: calc(-1 * var(--line)); padding: var(--ctl-pad-y) var(--ctl-pad-x); line-height: var(--lh); color: var(--c-link); background: var(--c-white); border: var(--line) solid var(--c-rule); text-decoration: none; }
.pager > :first-child { margin-left: 0; border-radius: var(--radius) 0 0 var(--radius); }
.pager > :last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.pager > a:hover { background: var(--c-rule-light); }
.pager > .is-on { color: var(--c-white); background: var(--c-link); border-color: var(--c-link); }

/* a joined group of filter buttons, as the reference's: rounded only at its two ends, the chosen one dimmed */
.btn-group { display: inline-flex; flex-wrap: wrap; max-width: 100%; vertical-align: middle; }
.btn-group > a { min-width: var(--ctl-h); margin: 0 0 calc(-1 * var(--line)) calc(-1 * var(--line)); padding: var(--ctl-pad-y) var(--ctl-pad-x); line-height: var(--lh); color: var(--c-text); text-align: center; white-space: nowrap; background: var(--c-white); border: var(--line) solid var(--c-input); text-decoration: none; }
.btn-group > a:first-child { margin-left: 0; border-radius: var(--radius) 0 0 var(--radius); }
.btn-group > a:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.btn-group > a:hover { background: var(--c-hover); border-color: var(--c-hover-rule); }
.btn-group > a.is-on { background: var(--c-selected); opacity: var(--dim); }
/* the class buttons above a board: fixed 76 x 79 cells, a sprite with the class name under it, the group centred and
   its rows filling from the left */
.class-grid { margin: 0 0 var(--s-4); text-align: center; }
.class-grid .btn-group > a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-0); width: var(--class-cell); height: var(--class-cell-h); }
.class-grid .label { font-size: var(--t-label); line-height: var(--lh-label); }
/* one filter line under the class buttons: a label, then its button group */
.filter { margin-bottom: var(--s-2); }
/* too narrow for one row: two even rows of equal buttons, never one button left alone */


/* sprites: every image on these pages is one, cut by the server at the size shown; never shrink one to fit a cell */
img { max-width: none; image-rendering: pixelated; }
.portrait { display: block; width: var(--sprite); height: var(--sprite); }
img.sprite { width: var(--sprite); height: var(--sprite); margin-right: var(--s-1); vertical-align: middle; }
.set { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: var(--s-1); vertical-align: middle; }
.tile { position: relative; display: inline-flex; flex: none; width: var(--sprite); height: var(--sprite); }
.tile img { display: block; width: var(--sprite); height: var(--sprite); }
/* the core applied to an item: its own sprite at half size in the bottom-right corner, as the game's tile draws it */
.tile img.tile__core { position: absolute; right: 0; bottom: 0; width: calc(var(--sprite) / 2); height: calc(var(--sprite) / 2); image-rendering: pixelated; }
/* an enchanted item: a band of violet light sweeps across the art, as the game's glint does. Screen blending leaves the
   white around the sprite white, so only the item's own pixels light up. Still for people who ask for less motion. */
.tile.is-enchanted::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, var(--c-glint) 45%, var(--c-glint-hi) 50%, var(--c-glint) 55%, transparent 65%) 0 0 / 300% 100%; mix-blend-mode: screen; pointer-events: none; animation: glint var(--glint-time) linear infinite; }
@keyframes glint { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .tile.is-enchanted::after { animation: none; background-position: 50% 0; } }
.item-name { margin-left: var(--s-1); font-weight: var(--w-bold); }

/* the game's rarity colours (client RarityUtils), darkened to read on white */
.item-name.r-lg, a.r-lg, .r-lg .name { color: var(--c-r-lg); }
.item-name.r-os, a.r-os, .r-os .name { color: var(--c-r-os); }
.item-name.r-ex, a.r-ex, .r-ex .name { color: var(--c-r-ex); }
.item-name.r-un, a.r-un, .r-un .name { color: var(--c-r-un); }
.item-name.r-ut, a.r-ut, .r-ut .name { color: var(--c-r-ut); }
.stats-ok { color: var(--c-ok); font-weight: var(--w-bold); }
/* the game's level colours (client GuiUtils.difficultyColor), darkened to read on white; lv-0 is no level */
.lv-0 { color: var(--c-muted); }
.lv-1 { color: var(--c-lv-1); } .lv-2 { color: var(--c-lv-2); } .lv-3 { color: var(--c-lv-3); } .lv-4 { color: var(--c-lv-4); } .lv-5 { color: var(--c-lv-5); } .lv-6 { color: var(--c-lv-6); }

/* forms */
.form-control,
.field input:not([type="checkbox"]):not([type="radio"]), .field select { display: block; width: 100%; height: var(--ctl-h); padding: var(--ctl-pad-y) var(--ctl-pad-x); font: inherit; color: var(--c-input-text); background: var(--c-white); border: var(--line) solid var(--c-input); border-radius: var(--radius); box-shadow: inset 0 var(--line) var(--line) var(--c-shadow-inset); }
textarea.form-control { height: auto; resize: vertical; }
.field input[type="checkbox"], .field input[type="radio"] { margin: 0 var(--s-1) 0 0; vertical-align: middle; }
.form-control:focus,
.field input:focus, .field select:focus { border-color: var(--c-focus); outline: 0; box-shadow: inset 0 var(--line) var(--line) var(--c-shadow-inset), 0 0 var(--cell) var(--c-focus-glow); }
.form-group, .field { margin-bottom: var(--s-3); }
.form-group label, .field > label { display: inline-block; margin-bottom: var(--s-1); font-weight: var(--w-bold); }
.checkbox label { font-weight: var(--w-normal); }
.form-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-2); margin-bottom: var(--s-3); }
/* filter rows: the fields share the row and shrink before the button wraps */
.form-inline .form-group { flex: 1 1 0; min-width: var(--field-min); margin-bottom: 0; }
.form-inline .form-control { width: 100%; min-width: 0; }
.form-inline .button { flex: none; }
.form-narrow { max-width: var(--field-w); margin-bottom: var(--s-3); }
.input-group { display: flex; max-width: var(--field-w); margin-bottom: var(--s-3); }
.input-group .form-control { border-radius: var(--radius) 0 0 var(--radius); }
.input-group .button { margin-left: calc(-1 * var(--line)); border-radius: 0 var(--radius) var(--radius) 0; }
/* "or" between two ways in */
.divider { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-4) 0; color: var(--c-muted); }
.divider::before, .divider::after { content: ""; flex: 1; border-top: var(--line) solid var(--c-rule); }
.edit { margin-top: var(--s-2); }
.edit summary { color: var(--c-link); cursor: pointer; }
.edit summary:hover { text-decoration: underline; }
.edit form { margin-top: var(--s-2); }


/* ----- footer ----- */
.foot { margin-top: auto; background: var(--c-bar); border-top: var(--line) solid var(--c-bar-rule); }
.foot__grid { display: grid; grid-template-columns: repeat(3, minmax(0, var(--menu-w))); gap: var(--s-4) var(--s-5); padding-block: var(--s-5) var(--s-4); }
.foot h2 { margin: 0 0 var(--ctl-pad-y); font: var(--w-bold) var(--t-side)/var(--lh-text) var(--c-font); color: var(--c-text); }
.foot ul { margin: 0; padding: 0; list-style: none; }
.foot li a { display: inline-block; padding: var(--s-0) 0; font-size: var(--t-side); color: var(--c-muted); }
.foot li a:hover { color: var(--c-text); }
.foot__legal { grid-column: 1 / -1; margin: var(--s-1) 0 0; font-size: var(--t-small); color: var(--c-muted); }
@media (max-width: 480px) { .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ----- lists of facts and steps ----- */
/* label and value pairs written as a definition list (the account and checkout pages) */
.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-0) var(--s-4); margin: 0 0 var(--s-3); }
.facts dt { color: var(--c-muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.steps { margin: 0 0 var(--s-3); padding-left: var(--s-4); }
.steps li { margin: var(--s-1) 0; }
.stack { display: grid; gap: 0; }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--panel-narrow)), 1fr)); gap: var(--s-4) var(--s-5); }
.back { margin: var(--s-4) 0 0; }
caption { padding: 0 0 var(--s-1); text-align: left; color: var(--c-muted); }