/* the stylesheet for index.html. tokyo-night: periwinkle on polar-night blue,
   green = a kept answer; the crew fly the name space in aurora teal/cyan.
   IBM Plex Mono reads the prose, the DOS/V bitmap runs the terminal and code. */

/* the DOS/V bitmap, 8x16 cells, crisp at 16px native (so 32px is a clean 2x):
   re. PRC16 (CP437-remapped) for the repl and code, TWN16 as the body fallback
   if Plex fails. (c) VileR, int10h.org, CC BY-SA 4.0. */
@font-face {
  font-family: "Web437 DOS/V re. PRC16";
  src: url("fonts/Web437_DOS-V_re_PRC16.woff2") format("woff2"),
       url("fonts/Web437_DOS-V_re_PRC16.woff") format("woff");
  font-display: swap;
}
/* (c) IBM, SIL OFL 1.1. */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #04060e; color: #c0caf5;
  font-family: "IBM Plex Mono", monospace;
  font-size: 32px; line-height: 1.5;
  max-width: 54em; margin: 0 auto; padding: 2em 1em 5em;
}

/* --- text --- */
h1 { font-size: 2.2em; font-weight: bold; letter-spacing: .04em; }
h1#love_title { text-align: center; }
h2 { font-size: 1.15em; font-weight: bold; margin: 2.4em 0 .6em;
     border-bottom: 1px solid #3b4261; padding-bottom: .3em; }
h3, h4 { font-size: 1em; font-weight: bold; }
h3 { margin: 1.6em 0 .5em; }
h4 { margin: 1.2em 0 .3em; }
h2 a, h3 a, .glossary dt a { color: inherit; }
h2 a:hover, h3 a:hover, .glossary dt a:hover { text-decoration: none; }
h2 a:hover::after, h3 a:hover::after,
.glossary dt a:hover::after { content: " #"; color: #545c7e; }

a { color: #7aa2f7; text-decoration: none; }
a:hover { text-decoration: underline; }
strong { color: #c0caf5; font-weight: 600; }
em { color: #9aa5ce; }
hr { border: none; border-top: 1px solid #3b4261; margin: 2.4em 0; }

p { margin: .7em 0; }
ul, ol { margin: .7em 0 .7em 1.4em; }
li { margin: .35em 0; }
/* the reading copy: sentences in Plex at a size meant for a proportioned face,
   not for the body's 2x bitmap cell. code inside a sentence joins them -- at any
   size matching Plex it lands off the 16px cell and renders ragged. */
p, li, dd { font-family: "IBM Plex Mono", monospace; font-size: 24px;
            line-height: 1.65; text-align: justify; hyphens: auto; }
p code, li code, dd code { font-family: inherit; font-size: 1em; }

code { color: #a9b1d6; background: #1f2335; border: 1px solid #292e42;
       border-radius: 3px; padding: .05em .35em; white-space: pre-wrap;
       font-family: "Web437 DOS/V re. PRC16", monospace; }
pre { background: #16161e; border: 1px solid #3b4261; border-radius: 6px;
      padding: .9em 1em; margin: 1em 0; overflow-x: auto; line-height: 1.5; }
pre code { white-space: pre; color: #9aa5ce; }
pre code, td code, dd code { background: none; border: none; padding: 0; }

table { border-collapse: collapse; width: 100%; margin: 1.1em 0; font-size: .93em; }
th, td { border: 1px solid #3b4261; padding: .35em .6em; text-align: left;
         vertical-align: top; }
th { color: #737aa2; font-weight: normal; background: #1f2335; }

/* --- chrome --- */
.topnav { margin-bottom: 1.4em; text-align: center; hyphens: none; }
.topnav a { color: #7aa2f7; }
footer { margin-top: 3.5em; color: #414868; font-size: .85em;
         border-top: 1px solid #3b4261; padding-top: 1em; }
.blue { color: #7aa2f7; } .red { color: #f7768e; }

/* --- the terminal boxes: the live bao shell (#term) and the quay tty app
   screen (#app). same chrome; the id-level display:flex would out-specify the
   UA [hidden] rule, so hiding is restored at matching specificity. --- */
#term, #app {
  background: #000000; border: 1px solid #34406e; border-radius: 6px;
  box-shadow: 0 0 30px -4px rgba(122,162,247,.28), 0 0 90px -22px rgba(122,162,247,.22);
  padding: .8em; margin-top: 1em; display: flex; flex-direction: column;
  font-family: "Web437 DOS/V re. PRC16", monospace;
}
#term[hidden], #app[hidden] { display: none; }
#term { position: relative; color: #ffffff; cursor: text;
        height: 24em; font-size: 32px; line-height: 1; }
#app { outline: none; height: 80vh; }
#status { color: #565f89; font-size: .9em; margin-top: .2em; }
/* output and input share one scroll region, so the prompt flows directly under
   the last line of output (a real terminal) rather than pinned to the box floor. */
#scroll { flex: 1; overflow-y: auto; }
#out { white-space: pre-wrap; word-break: break-word; }
#clear { position: absolute; top: .5em; right: .5em; z-index: 1;
         background: #1f2335; border: 1px solid #3b4261; border-radius: 4px;
         color: #565f89; font: inherit; font-size: .8em; padding: .1em .5em; cursor: pointer; }
#clear:hover { border-color: #7aa2f7; color: #c0caf5; }
#row { display: flex; align-items: flex-start; }
.in { color: #aaaaaa; }
.in::before, #row::before { content: "> "; color: #555555; }
#row::before { white-space: pre; }
.ans { color: #55ff55; }
.cnd { color: #ff55ff; }
#cmd { flex: 1; background: none; border: none; outline: none; resize: none;
       color: #ffffff; font: inherit; line-height: inherit; overflow: hidden; }
/* #screen is a <pre>: flex:1 + min-height:0 give it a bounded box the driver
   measures and fills with a cell grid, and the resets undo the pre chrome. */
#screen { flex: 1; min-height: 0; overflow: hidden;
          background: none; border: none; border-radius: 0; padding: 0; margin: 0;
          color: #ffffff; font: inherit; line-height: 1; white-space: pre; }
#appbar { flex-shrink: 0; color: #565f89; font-size: .8em; margin-top: .6em; }
#appbar b { color: #7aa2f7; font-weight: normal; }

/* --- chips (runnable examples) + the crew roster + the glossary --- */
.chip { display: inline-block; background: #1f2335; border: 1px solid #3b4261;
        border-radius: 4px; padding: .15em .55em; margin: .18em .25em .18em 0;
        color: #a9b1d6; cursor: pointer; white-space: pre; }
.chip:hover { border-color: #7aa2f7; color: #c0caf5; }
.note { color: #565f89; font-size: .9em; margin-left: .4em; }
/* the inle crew, flying the name space: call-signs in cyan navigation-light,
   roles in aurora teal, the flavor left in the cold blue of distance. */
.crew { margin: .9em 0; }
.crew dt { margin-top: .7em; color: #7dcfff; }
.crew dt a { font-weight: 600; }
.crew dd { margin: 0 0 0 1.4em; color: #737aa2; }
.crew dt + dd { color: #73daca; }
.glossary dt { color: #c0caf5; font-weight: 600; margin-top: .85em; }
.glossary dt code { font-weight: normal; }
.glossary dd { margin: .1em 0 0 1.4em; }

/* a word wears its color */
.hi.red, .hi.red a, #g-red { color: #ff3b6b; }
.hi.green, .hi.green a, #g-green { color: #34ff9e; }
.hi.blue, .hi.blue a, #g-blue { color: #3a9dff; }
.hi.gray, .hi.gray a { color: #565f89; }

/* --- mobile --- 32px overflows a phone, so drop to the 16px native cell: a
   crisp 1x bitmap in the terminal, and the em-based sizes scale with it. */
@media (max-width: 768px) {
  body { font-size: 16px; padding: 1.4em .8em 4em; overflow-x: clip; }
  #term { font-size: 16px; }
  p, li, dd { font-size: 17px; }
  code { overflow-wrap: anywhere; }
  td { word-break: break-word; }
}