/* =====================================================================
   rules.html — the same phosphor, laid out to be read and printed.
   ===================================================================== */

body.page {
  padding: 1.25rem var(--pad) 4rem;
  font-size: 15px;
  line-height: 1.55;
  overflow-y: auto;
  height: auto;
  min-height: 100%;
  text-shadow: 0 0 5px var(--glow);
}

.page main { max-width: 62ch; margin: 0 auto; }

.page h2 {
  font-size: 1em;
  font-weight: normal;
  color: var(--bg);
  background: var(--hi);
  padding: 0.15em 0.5em;
  margin: 2.5rem 0 0.9rem;
}
/* The same ANSI header bar the terminal draws. */
.page h3 {
  font-size: 1em;
  font-weight: normal;
  color: var(--hi);
  margin: 1.6rem 0 0.5rem;
}
.page h3::before { content: '\u2593'; }
.page h3 > span { background: var(--hi); color: var(--bg); padding: 0 0.35em; }
.page h3::after  { content: ' \u2593\u2593\u2592\u2591'; }
.page h3 { display: block; }
.page p { margin: 0 0 0.9rem; }
.page b { color: var(--bright); font-weight: normal; }
.page i { color: var(--dim); font-style: normal; }
.page u { text-decoration: none; color: var(--hi); }

.page pre {
  white-space: pre;
  overflow-x: auto;
  margin: 0 0 0.9rem;
  font-size: 0.92em;
  line-height: 1.35;
  padding-bottom: 0.2em;
}
.page pre b { color: var(--bright); }
.page pre i { color: var(--dim); }

.page hr { border: 0; border-top: 1px solid var(--dim); margin: 1.2rem 0; }

.page nav ul { list-style: none; padding: 0; margin: 0 0 1rem; }
.page nav li::before { content: '▸ '; color: var(--dim); }

/* Block art only joins up at a line-height of exactly 1. */
.page .logo { font-size: 0.8em; line-height: 1; color: var(--bright); }
.page .sub { color: var(--dim); margin-bottom: 2rem; }
.page .back a { color: var(--dim); }
.page .choice { margin: 0 0 0.35rem; }
.page .choice a::before { content: '\u25B8  '; color: var(--hi); text-decoration: none; }

@media print {
  :root { --bg: #fff; --fg: #000; --dim: #555; --bright: #000; }
  body.page { text-shadow: none; }
  .page .back, .page nav { display: none; }
  .page h2 { background: none; color: #000; border-top: 2px solid #000; }
}

/* ---------------------------------------------------------------------
   The symbols and the reference sheets
   ------------------------------------------------------------------ */

.page .symgrid { margin: 0 0 1.2rem; max-width: 36rem; }
.page .tile { text-decoration: none; }
.page .tile .tname { font-size: 0.85em; }

.page .symtab { border-collapse: collapse; width: 100%; margin: 0 0 1rem; }
.page .symtab th,
.page .symtab td {
  text-align: left;
  vertical-align: top;
  padding: 0.5em 0.6em 0.5em 0;
  border-bottom: 1px solid var(--dim);
  font-weight: normal;
}
.page .symtab th { color: var(--bright); width: 7.5em; }
.page .symtab th i,
.page .sheet h2 i { display: block; font-size: 0.8em; }
.page .sheet h2 i { display: inline; color: inherit; opacity: 0.75; }
.page .symtab .sico { width: 2.2em; color: var(--hi); }
.page .symtab .sico svg { width: 1.7em; height: 1.7em; display: block; }
.page .symtab thead th { color: var(--hi); }

/* Side by side needs more than 62ch, so it steps out of the column to
   up to 120ch, centred. On a phone it scrolls sideways inside its own
   box rather than pushing the page wider. */
.page .wide {
  overflow-x: auto;
  width: min(calc(100vw - 2 * var(--pad)), 120ch);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.page .symtab.all { min-width: 40rem; }

@media print {
  .page .sheet { break-before: page; }
  .page .symtab .sico, .page .symtab thead th { color: #000; }
  .page .tile { color: #000; border-color: #000; }
  .page .tico { color: #000; }
  .page .symtab.all { min-width: 0; font-size: 0.85em; }
  .page .wide { width: auto; left: 0; transform: none; overflow: visible; }
}

/* The shared renderer's lists, terms and links (assets/markup.js). */
.page ul.items { list-style: none; margin: 0 0 0.9rem; padding: 0; }
.page ul.items li { display: grid; grid-template-columns: 2.4em minmax(0, 1fr); margin-bottom: 0.35rem; }
.page ul.items li p { margin: 0 0 0.3rem; }
.page .mk { color: var(--hi); }
.page .lead { color: var(--bright); }
.page .term { color: var(--bright); margin: 0.9rem 0 0.1rem; }
.page a.chip { color: var(--hi); text-decoration: none; }
.page .symtab i.joker { display: block; margin-top: 0.3em; font-size: 0.82em; }