/* Turn of Freedom on the web: the TUI guidebook's rules (docs/ui-guidebook.md)
   on a page. Every page is a view: title row, context line, body sections
   under ── rules, a message line, and the key line last. The chrome stays put;
   the body scrolls. Colour by role only (section 7), the ANSI skin's colours:
   nothing is coloured for decoration. 80 columns of monospace. No scripts. */
:root {
  --bg: #0c0c0c;
  --text: #c6c6c6;    /* normal */
  --bright: #ffffff;  /* heading, selected */
  --title: #5fd7d7;   /* bold cyan: titles */
  --good: #5fd75f;    /* green */
  --caution: #d7af00; /* yellow */
  --danger: #d75f5f;  /* red */
  --hint: #808080;    /* gray: hints, footers, dimmed */
  --place: #d75fd7;   /* bold magenta: somewhere you can go: links */
  --key: #ffd75f;     /* bold yellow: the key letter in a label */
  --mono: ui-monospace, "DejaVu Sans Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.45 var(--mono);
}
.view { max-width: calc(80ch + 2rem); margin: 0 auto; padding: 0 1rem; }

/* 1: title row and context line, fixed at the top. */
.chrome-top { position: sticky; top: 0; background: var(--bg); padding-top: .75rem; }
.title-row { display: flex; justify-content: space-between; gap: 2ch; flex-wrap: wrap; }
.title { color: var(--title); font-weight: bold; }
.context { color: var(--hint); }

/* 3: sections. Headings are bold; their rule is ──. */
h1, h2, h3, p, ul, table, pre { margin: 0; font-size: 1em; }
h1 { display: inline; color: var(--title); font-weight: bold; }
h2 { color: var(--bright); font-weight: bold; margin-top: 1.45em; }
h2::before { content: "── "; color: var(--hint); font-weight: normal; }
section > p, section > table, section > pre, section > ul { margin-top: .4em; }
p + p { margin-top: .4em; }
ul { list-style: none; padding: 0; }
li { padding-left: 2ch; text-indent: -2ch; }
li::before { content: "· "; color: var(--hint); }

/* 4.9 tables: a fixed first column, like the help screen's. */
table { border-collapse: collapse; }
td, th { padding: 0 2ch 0 0; vertical-align: top; text-align: left; font-weight: normal; }
th { color: var(--bright); white-space: nowrap; }
td.num { text-align: right; color: var(--bright); }
.keys th { color: var(--key); font-weight: bold; }
td pre { margin: .4em 0; overflow-x: auto; color: var(--bright); }
sup { font-size: .7em; line-height: 0; }

/* The screen: a real 80x24 capture of the game, in its own roles, at
   full size: it scrolls sideways on a narrow screen rather than shrink. */
pre.screen { overflow-x: auto; color: var(--text); line-height: 1.25; padding: .5em 1ch; border: 1px solid #262626; width: calc(82ch + 2px); max-width: 100%; }
.b { color: var(--bright); font-weight: bold; }

/* Roles. */
.good { color: var(--good); }
.caution { color: var(--caution); }
.danger { color: var(--danger); }
.hint, .dim { color: var(--hint); }
.place, a { color: var(--place); font-weight: bold; text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; outline: none; }
code, .cmd { color: var(--bright); font-family: inherit; }
.k { color: var(--key); font-weight: bold; }
.bar { color: var(--good); }
.bar .rest { color: var(--hint); }

/* 5 and 6: the message line and the key line, fixed at the bottom. */
.chrome-bottom { position: sticky; bottom: 0; background: var(--bg); padding: .6em 0 .75rem; margin-top: 2.9em; }
.message { min-height: 1.45em; }
.keyline { display: flex; flex-wrap: wrap; gap: 0 3ch; color: var(--text); }
.keyline .here { color: var(--hint); font-weight: normal; } /* the page you're on: its slot stays, dimmed */

@media (max-width: 40rem) {
  body { font-size: 14px; }
}