/*
  The manual: its contents, a category and a topic.
  Page rules only. The windows, the menu and the keys are the Hall's (hall.css, gump.css).
*/

.manual-wrap { padding-top: 1.6rem; padding-bottom: 1rem; }
.manual { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 2rem; align-items: start; }
.manual-wrap .manual { margin-top: 0; }
body.help .reach.manual { padding-top: 2.2rem; padding-bottom: 1rem; }
.manual-side { position: sticky; top: 1rem; min-width: 0; max-height: calc(100vh - 2rem); overflow: auto; }
.manual-main { min-width: 0; }

/* ------------------------------------------------------------------ the finder */

.finder { display: flex; align-items: center; gap: .5rem; margin: 0 0 .7rem; }
.finder .cmd-prompt { font: 400 16px/1 var(--pixel); color: var(--brass); }
.finder .input { flex: 1; min-width: 0; }
.finder-say { min-height: 1.4rem; margin: 0 0 .5rem; font: 400 14px/1.4 var(--pixel); color: var(--ink-dim); }
.menu-tight a { padding-block: .35rem; font-size: 16px; letter-spacing: .02em; text-transform: none; }
.menu-tight a::after { content: none; }

/* ------------------------------------------------------------------ topics */

.topics { margin: 0; padding: 0; list-style: none; columns: 2 20rem; column-gap: 2rem; }
.topics li { break-inside: avoid; border-top: 2px solid #1f1c18; }
.topics li:first-child { border-top: 0; }
.topics a { display: grid; gap: .1rem; padding: .55rem .5rem .6rem; text-decoration: none; }
.topics b { font: 400 16px/1.3 var(--pixel); letter-spacing: .03em; color: var(--brass-hi); }
.topics span { font: 400 .875rem/1.5 var(--read); color: var(--ink-dim); }
.topics a:hover b, .topics a:focus-visible b { color: var(--heat-4); text-decoration: underline; }
.topics a:hover, .topics a:focus-visible { background: #1d1409; }
.topics-long { columns: 1; }
.topics-long span { font-size: .9375rem; }
.gump-bar h2 a { color: inherit; text-decoration: none; }
.gump-bar h2 a:hover { color: var(--heat-4); text-decoration: underline; }
[data-topic][hidden], [data-category][hidden] { display: none; }

/* ------------------------------------------------------------------ a topic, as the game prints it */


@media (max-width: 1000px) {
  .manual { grid-template-columns: minmax(0, 1fr); }
  .manual-side { position: static; max-height: none; }
  body.help .manual-main { order: -1; }
  .topics { columns: 1; }
}
@media (prefers-contrast: more) {
  .screen::after { display: none; }
}