/* configuration: without js a table of contents beside every setting written out, with js a
list + inspector in one window-height pane. */
.cfg-content { min-width: 0; }
.inav { display: flex; gap: 6px; align-items: center; margin: 0 24px; padding: 14px 0 10px; border-bottom: 1px solid var(--paper-rule); }
/* with js the buttons take their space from the first paint, before the script fills them */
.inav[hidden] { visibility: hidden; }
:root:not([data-js]) .inav { display: none; }
.inav .grow { flex: 1; }
/* an empty button still gets a line, so the bar is its full height before the script names them */
.inav .btn:empty::before { content: "\200b"; }
.inav .btn { max-width: 48%; overflow: hidden; text-overflow: ellipsis; }
/* every setting, written out (this is all of it without js) */
.cfg-var { padding: 10px 0 12px; border-bottom: 1px solid var(--paper-rule); }
.cfg-var .cfg-name { margin: 0 0 2px; font-size: 14px; scroll-margin-top: 14px; }
.prose .cfg-var .cfg-name code { all: unset; font-family: var(--mono); font-weight: 600; overflow-wrap: anywhere; }
.cfg-default { margin: 0 0 6px; font-size: 12.5px; color: var(--muted); }
.cfg-desc { max-width: 80ch; }
.cfg-sum { display: none; }
/* list + inspector */
.cfg-pane .side { height: calc(100vh - var(--head-h) - var(--foot-h)); }
.cfg-pane .side > .list { flex: 1; }
:root[data-js] .cfg-pane .cfg-item { display: none; }
:root[data-js] .cfg-pane .cfg-item.cur { display: block; animation: swapin 0.14s ease-out; }
:root[data-js] .cfg-pane .cfg-var { padding: 0; border: 0; }
:root[data-js] .cfg-pane .cfg-var .cfg-name { font-size: 17px; margin-bottom: 4px; }
:root[data-js] .cfg-pane .cfg-desc { font-size: 13.5px; line-height: 1.6; }
:root[data-js] .cfg-pane .cfg-sec h2 { margin-top: 0; }
:root[data-js] .cfg-pane .cfg-sum { display: block; list-style: none; padding: 0; margin: 12px 0 0; max-width: none; border: 1px solid var(--paper-edge); border-radius: var(--r-box); background: var(--sheet); }
.cfg-sum li { margin: 0; border-bottom: 1px solid var(--sheet-rule); }
.cfg-sum li:last-child { border-bottom: 0; }
.prose .cfg-sum a { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; padding: 5px 10px 6px; color: var(--text); border: 0; }
.prose .cfg-sum a:hover { background: var(--hover); }
.prose .cfg-sum code { all: unset; font-family: var(--mono); font-size: 12px; }
.cfg-sum .d { justify-self: end; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--faint); }
.cfg-sum .first { grid-column: 1 / -1; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--text-3); }
@media (max-width: 760px) {
.inav { margin: 0 14px; }
}