/* The "?" explainers. Component CSS, kept out of tokens.css because that
   file is the palette and nothing else. Linked by index.html, book.html
   and archive.html; book.html carries its own copy of the palette, so
   every colour here comes from a var that all three define. */
.gq{font-family:'DM Mono',ui-monospace,monospace;font-size:9.5px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;margin-left:4px;vertical-align:1px;
  background:transparent;color:var(--text3);
  border:1px solid var(--br2);border-radius:50%;padding:0;cursor:pointer;
  transition:color .12s,border-color .12s}
.gq:hover,.gq:focus-visible{color:var(--teal);border-color:var(--teal-br)}
.gq[aria-expanded="true"]{color:#000;background:var(--teal);border-color:var(--teal)}
.gp[hidden]{display:none}
.gp{display:block;margin:8px 0 10px;padding:12px 14px;
  background:var(--bg3);border:1px solid var(--br);border-left:2px solid var(--teal);
  border-radius:0 8px 8px 0;max-width:46ch}
.gp-h{display:block;font-family:'DM Mono',ui-monospace,monospace;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:5px}
.gp-b{display:block;font-size:14.5px;line-height:1.65;color:var(--text3);font-weight:400}

/* The key under the record tiles: three terms a reader can open without
   having to find them inside a paragraph first. */
.ci-key{font-family:'DM Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text3);text-align:center;margin-top:14px}
.ci-key .gp{text-align:left;text-transform:none;letter-spacing:normal;margin:10px auto}