/* The Compendium in the front page's two editions. By day an old parchment,
   aged a little at the edges; by night a dark blue sheet, a night edition
   and not an inversion. Both are tokens on :root. The system's preference
   picks one, and the Night/Day button in the top links overrides it by
   setting data-theme="light" or "dark" on <html> (index.html saves the
   choice under the key the front page uses). Wording is untouched. */
:root {
  color-scheme: light;
  --paper:   #e8dcc0;
  --plate:   #f0e6cf;
  --ink:     #241a10;
  --ink-2:   #5b4a35;
  --ink-3:   #6b5a44;
  --rubric:  #962a1b;
  --rubric-text: #962a1b;   /* the red where it is read as text */
  --on-rubric:   #ffffff;
  --rule:    #a89878;
  --rule-2:  #d0c3a3;
  --term:    #0d1117;
  --term-ink:#e6edf3;
  --term-edge: transparent;
  --frame:   var(--ink);    /* the thin rule round a screen plate */

  /* Parchment ageing: a soft vignette toward the corners and a faint paper
     grain, multiplied over the paper. No image files. Both are off at night. */
  --vignette: radial-gradient(ellipse at center, transparent 55%, rgba(110, 80, 40, .18) 100%);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .23 0 0 0 0 .12 0 0 0 1.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");

  --display: 'IM Fell Double Pica', 'IM Fell English', Georgia, 'Times New Roman', serif;
  --caps:    'IM Fell Double Pica SC', 'IM Fell English SC', Georgia, serif;
  --reading: 'EB Garamond', Georgia, 'Times New Roman', serif;

  /* docsify-themeable */
  --theme-color:            var(--rubric);
  --mono-font:              'JetBrains Mono', 'Fira Code', Menlo, Consolas, monospace;
  --base-font-family:       var(--reading);
  --base-font-size:         19px;
  --base-line-height:       1.55;
  --base-background-color:  var(--paper);
  --base-color:             var(--ink);
  --content-max-width:      820px;
  --heading-color:          var(--ink);
  --heading-font-family:    var(--display);
  --heading-font-weight:    400;
  --strong-color:           var(--ink);
  --strong-font-weight:     600;
  --link-color:             var(--rubric-text);
  --link-color--hover:      var(--ink);
  --link-text-decoration:   underline;
  --hr-border:              1px solid var(--rule);
  --blockquote-background:  var(--plate);
  --blockquote-border-color: var(--rubric);
  --blockquote-color:       var(--ink-2);
  --code-font-family:       var(--mono-font);
  --code-inline-background: var(--plate);
  --code-inline-color:      var(--ink);
  --code-theme-background:  var(--term);
  --code-theme-text:        var(--term-ink);
  --code-theme-comment:     #8b949e;
  --code-theme-function:    #e3b341;
  --code-theme-keyword:     #ff9d8f;
  --code-theme-operator:    #c9d1d9;
  --code-theme-punctuation: #c9d1d9;
  --code-theme-selector:    #7ee0a0;
  --code-theme-tag:         #ff9d8f;
  --code-theme-variable:    #79c0ff;
  --code-block-border-radius: 2px;
  --table-head-background:  transparent;
  --table-row-odd-background: transparent;
  --table-row-even-background: transparent;
  --table-cell-border-color: var(--rule-2);
  --sidebar-background:     var(--plate);
  --sidebar-border-color:   var(--rule);
  --sidebar-name-color:     var(--rubric-text);
  --sidebar-nav-link-color:         var(--ink-2);
  --sidebar-nav-link-color--hover:  var(--rubric-text);
  --sidebar-nav-link-color--active: var(--rubric-text);
  --sidebar-nav-link-font-weight--active: 600;
  --sidebar-toggle-icon-color: var(--ink);
  --sidebar-toggle-background: var(--plate);
  --search-input-background-color: var(--paper);
  --search-input-border-color:     var(--ink-3);
  --search-input-color:            var(--ink);
  --search-input-placeholder-color: var(--ink-3);
  --search-result-heading-color:   var(--ink);
  --search-result-item-color:      var(--ink-2);
  --search-result-keyword-background: transparent;
  --search-result-keyword-color:   var(--rubric-text);
  --navbar-root-color:      var(--ink-2);
  --navbar-root-color--hover: var(--rubric-text);
  --copycode-background:    var(--rubric);
  --copycode-color:         var(--on-rubric);
}

/* The night edition. Written twice on purpose: once for a system that asks
   for dark (unless the reader chose Day), once for a reader who chose Night. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper:   #121822;
    --plate:   #1a2230;
    --ink:     #d9dee6;
    --ink-2:   #9aa6b8;
    --ink-3:   #8593a8;
    --rubric:  #e0574c;
    --rubric-text: #e65f54;
    --on-rubric:   #120503;
    --rule:    #3b475b;
    --rule-2:  #262f40;
    --term:    #0a0e14;
    --term-edge: #2d384a;
    --frame:   #4a5870;
    --vignette: none;
    --grain: none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:   #121822;
  --plate:   #1a2230;
  --ink:     #d9dee6;
  --ink-2:   #9aa6b8;
  --ink-3:   #8593a8;
  --rubric:  #e0574c;
  --rubric-text: #e65f54;
  --on-rubric:   #120503;
  --rule:    #3b475b;
  --rule-2:  #262f40;
  --term:    #0a0e14;
  --term-edge: #2d384a;
  --frame:   #4a5870;
  --vignette: none;
  --grain: none;
}

body {
  background-color: var(--paper);
  background-image: var(--vignette), var(--grain);
  background-blend-mode: normal, multiply;
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--reading);
  font-variant-numeric: oldstyle-nums;
}

/* The shelf */
.sidebar { background: var(--plate); border-right: 1px solid var(--rule) !important; }
.sidebar .app-name { margin: 6px 0 10px; }
.sidebar .app-name a,
.sidebar .app-name-link {
  font-family: var(--display);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--rubric-text);
  text-decoration: none;
}
.sidebar-nav { font-family: var(--reading); font-size: 1.02rem; }
.sidebar-nav > ul > li > strong,
.sidebar-nav > ul > li > p > strong {
  font-family: var(--caps);
  font-weight: 400;
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  color: var(--ink-3);
}
.sidebar-nav > ul > li { margin-top: 0.9em; }
.sidebar-nav a { text-decoration: none; }
.sidebar-nav li.active > a { border-right: 0; }

/* The top links */
.app-nav { font-family: var(--caps); letter-spacing: 0.12em; font-size: 0.9rem; }
.app-nav a { text-decoration: none; }

/* The Night/Day button, last among the top links (index.html puts it there).
   Small capitals in a square with a hairline inside the rule, like a plate. */
.theme-toggle {
  display: inline-block; margin: 0 0 0 0.2em; padding: 0.28em 0.7em 0.2em;
  font: inherit; font-family: var(--caps); letter-spacing: 0.12em; line-height: 1.2;
  color: var(--ink); background: var(--paper); cursor: pointer;
  border: 1px solid var(--ink); border-radius: 0;
  box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--ink);
  -webkit-appearance: none; appearance: none;
}
.theme-toggle:hover { color: var(--rubric-text); }
.theme-toggle:focus-visible { outline: 2px solid var(--rubric-text); outline-offset: 3px; }

/* Headings */
.markdown-section h1,
.markdown-section h2,
.markdown-section h3,
.markdown-section h4 { font-family: var(--display); font-weight: 400; letter-spacing: 0; text-wrap: balance; }
.markdown-section h1 { font-size: 2.9rem; line-height: 1; color: var(--ink); margin-bottom: 0.5em; }
.markdown-section h1 a { color: inherit; text-decoration: none; }
.markdown-section h2 {
  font-size: 1.9rem; line-height: 1.1; color: var(--ink);
  border-bottom: 0; border-top: 2px solid var(--ink);
  padding: 14px 0 0; margin-top: 2.4em;
}
.markdown-section h3 { font-size: 1.4rem; line-height: 1.15; color: var(--rubric-text); margin-top: 1.7em; }
.markdown-section h4 { font-family: var(--caps); font-size: 1rem; letter-spacing: 0.12em; color: var(--ink-2); }
.markdown-section h2 a, .markdown-section h3 a, .markdown-section h4 a { color: inherit; text-decoration: none; }

/* Reading text */
.markdown-section p, .markdown-section li { max-width: 40em; }
.markdown-section strong { font-weight: 600; }
.markdown-section hr { border: 0; border-top: 1px solid var(--rule); }

/* Code keeps the terminal's face */
.markdown-section code,
.markdown-section pre,
.markdown-section kbd { font-family: var(--mono-font) !important; font-variant-numeric: normal; }
.markdown-section code {
  font-size: 0.78em; color: var(--ink); background: var(--plate);
  border: 1px solid var(--rule-2); border-radius: 2px; padding: 0.08em 0.32em;
}
.markdown-section pre,
pre[class*="language-"] {
  background: var(--term) !important; color: var(--term-ink);
  border: 1px solid var(--term-edge); border-left: 3px solid var(--rubric); border-radius: 2px;
  overflow-x: auto !important; -webkit-overflow-scrolling: touch;
}
.markdown-section pre > code { background: none; border: 0; padding: 0; color: var(--term-ink); font-size: 0.8rem; }
p code, li code { word-break: break-word; }

/* Notes and tips */
.markdown-section blockquote {
  border-left: 3px solid var(--rubric);
  background: var(--plate);
  border-radius: 0;
  padding: 12px 20px;
  color: var(--ink-2);
  margin: 1.4em 0;
}
.markdown-section blockquote p { margin: 0.3em 0; }

/* Tables read as ruled tables, in lining figures */
.markdown-section table {
  display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%;
  border-collapse: collapse; margin: 1.3em 0; font-size: 0.95em;
  font-variant-numeric: lining-nums tabular-nums;
}
.markdown-section th {
  font-family: var(--caps); font-weight: 400; letter-spacing: 0.1em; font-size: 0.86em;
  text-align: left; color: var(--ink-2); background: transparent;
  border: 0; border-bottom: 2px solid var(--ink); padding: 8px 16px 8px 0; white-space: nowrap;
}
.markdown-section td {
  border: 0; border-bottom: 1px solid var(--rule-2); padding: 8px 16px 8px 0; vertical-align: top;
}
.markdown-section tr { background: transparent !important; }
.markdown-section tr:hover td { background: var(--plate); }

/* Search */
.search { border-bottom: 1px solid var(--rule) !important; }
.search input {
  background: var(--paper) !important; color: var(--ink) !important;
  border: 1px solid var(--ink-3) !important; border-radius: 2px !important;
  font-family: var(--reading); font-size: 1rem;
}
.search .matching-post { border-bottom: 1px solid var(--rule-2); }
.search .matching-post h2 { font-family: var(--display); font-size: 1.15rem; }

.docsify-copy-code-button { font-family: var(--caps); letter-spacing: 0.1em; border-radius: 0 2px 0 2px; }

/* Plates: real views of the game's screens, drawn as text by screens.js.
   The terminal in the game's own colors on the dark ground, a thin rule
   around it, the caption beneath in small capitals. A plate is set wider
   than the text, into the column's own margins, as plates are. */
.markdown-section figure.screen,
.markdown-section .screen-pair { margin: 1.8em -45px; }
.markdown-section .screen-pair figure.screen { margin: 0; min-width: 0; }
.screen-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 6px; align-items: start; }
.screen-plate {
  margin: 5px; background: var(--term);
  outline: 1px solid var(--frame); outline-offset: 4px;
}
.screen-scroll {
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  padding: 10px 12px; scrollbar-width: thin; scrollbar-color: #5d6880 transparent;
}
.markdown-section figure.screen:focus { outline: none; }
.markdown-section figure.screen:focus-visible .screen-plate { outline: 2px solid var(--rubric-text); }
.markdown-section pre.screen-term {
  position: relative; display: block; box-sizing: content-box;
  width: calc(var(--cols, 100) * 1ch); margin: 0 auto; padding: 0;
  border: 0; border-radius: 0; background: none !important; overflow: visible !important;
  color: #e6edf3; font-size: 11px; line-height: 1.15; font-weight: 400; letter-spacing: 0;
  font-variant-ligatures: none; font-variant-numeric: normal; white-space: pre;
  -webkit-text-size-adjust: none; text-size-adjust: none;
}
.screen-term .screen-row { display: block; height: 1.15em; }
.screen-term i {
  font-style: normal; display: inline-block; width: 1ch; height: 1.15em;
  overflow: hidden; text-align: center; vertical-align: top;
}
.screen-term .screen-probe { position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none; -webkit-user-select: none; user-select: none; }
.markdown-section figure.screen figcaption {
  font-family: var(--caps); font-size: 0.84rem; line-height: 1.4; letter-spacing: 0.07em;
  color: var(--ink-2); text-align: center; text-wrap: balance;
  max-width: 46em; margin: 0 auto; padding: 0 12px;
}
.markdown-section figure.screen-drawn figcaption { margin-top: 14px; }
.screen-scrolls figcaption::after { content: " Scroll sideways to see the rest."; color: var(--ink-3); }
/* Between the phone layout and a window wide enough to leave the column free
   on both sides, a plate keeps a gutter of its own. */
@media (min-width: 769px) and (max-width: 1180px) {
  .markdown-section figure.screen,
  .markdown-section .screen-pair { margin-left: -29px; margin-right: -29px; }
}
@media (max-width: 900px) {
  .screen-pair { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  body { --base-font-size: 18px; }
  .markdown-section h1 { font-size: 2.2rem; }
  .markdown-section h2 { font-size: 1.55rem; }
  .sidebar-toggle { width: 42px !important; height: 42px !important; }
  /* The top links and the Night/Day button keep to two rows, clear of the
     sidebar toggle on the left and the corner ribbon on the right. */
  .app-nav { left: 48px; right: 48px; font-size: 0.82rem; letter-spacing: 0.1em; }
  .app-nav li { margin: 0 0.45em; }
  .theme-toggle { padding: 0.26em 0.6em 0.18em; margin: 0; }
  .content { padding: 16px !important; }
  /* The theme pads the column 45px a side at every width; with the 16px
     above that left the text 253px of a 375px phone. On a phone the 16px
     gutter is the whole margin, and a plate is as wide as the text. */
  .markdown-section { padding-left: 0; padding-right: 0; }
  .markdown-section figure.screen,
  .markdown-section .screen-pair { margin-left: 0; margin-right: 0; }
  .markdown-section blockquote { padding: 10px 14px; }
  .markdown-section th, .markdown-section td { padding: 7px 10px 7px 0; }
  .screen-scroll { padding: 8px; }
}
.search input::placeholder { color: var(--ink-3); opacity: 1; }
/* On the narrowest phones the top links need a third row; leave room for it. */
@media (max-width: 380px) {
  .app-nav:not(:empty) ~ main .markdown-section { padding-top: 5rem; }
}