/* edgar -- presentation.
 *
 * The games on this site are framed as little windows because they are boards you look
 * at. edgar is not a board, he is a conversation, so he is framed as the thing he
 * actually was in 2001: a box with a transcript above it and a text field at the
 * bottom, sitting on a page that has a masthead and a left rail like every other page
 * here. No bubbles, no avatars, no typing indicator. A chat window that looks like
 * 2024 would be a lie about what this is.
 *
 * Three things carry it.
 *
 *   edgar is in capitals.        He speaks in ALL CAPS, which is how the adventure
 *                                game already writes him and how a terminal in 2001
 *                                talked. It is text-transform, not the stored text --
 *                                the source stays lowercase so the corpus in
 *                                tools/check_edgar.js is readable and comparable.
 *
 *   You are in the transcript    Both speakers are prefixed with a name rather than
 *   by name, not by side.        aligned left and right, because the name is the whole
 *                                point: a fact is filed under it.
 *
 *   What he knows is visible.    The panel underneath is not a debug view. Seeing "you
 *                                hate going to the movies" and "SlipKid hates going to
 *                                the movies" as two renderings of one row is the
 *                                clearest possible explanation of the trick.
 *
 * The site's --purple and --blue carry the two older skins. The modern skin is dark,
 * so the locals are redefined at the bottom rather than tinted -- a screen green that
 * reads as a terminal on cream is illegible on near-black.
 */

:root {
  --ed-frame: #630096;
  --ed-face: #fff;
  --ed-ink: #111;

  /* the transcript, which is the one part that gets to look like a machine */
  --ed-log-face: #f7f5fb;
  --ed-log-edge: #b9b3d6;
  --ed-him: #3301c3;
  --ed-you: #444;

  --ed-known-face: #fbfaff;
  --ed-known-edge: #ddd8ee;
  --ed-muted: #666;

  --ed-off-edge: #c8912a;
  --ed-off-face: #fffdf3;
  --ed-off-ink: #7a5502;
}

.ed-wrap { margin: 12px 0 18px; }

/* ---- the header strip: who you are, and the way out ---- */
.ed-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
  font: bold 10px/1.4 Verdana, Geneva, sans-serif;
  color: var(--ed-frame);
}
.ed-bar .ed-spacer { flex: 1 1 auto; }
#ed-who:empty::before {
  content: "not logged in";
  font-weight: normal;
  color: var(--ed-muted);
}
.ed-btn {
  font: 10px/1 Verdana, Geneva, sans-serif;
  padding: 4px 8px;
  border: 1px solid var(--ed-log-edge);
  background: var(--ed-face);
  color: var(--ed-you);
  cursor: pointer;
}
.ed-btn:hover { background: #f3ecf8; }

/* ---- the transcript ---- */
.ed-log {
  height: 300px;
  overflow-y: auto;
  padding: 10px;
  border: 2px solid var(--ed-frame);
  background: var(--ed-log-face);
  font: 12px/1.6 Verdana, Geneva, sans-serif;
  color: var(--ed-ink);
}
.ed-turn { margin: 0 0 7px; }
.ed-who {
  display: inline-block;
  min-width: 5.5em;
  /* padding, not min-width alone: a handle can be up to 24 characters, and one wider
     than the column ran straight into what it said -- "LiveChecki hate the movies". */
  padding-right: 10px;
  font-weight: bold;
  vertical-align: top;
}
.ed-said { display: inline-block; max-width: calc(100% - 7em); }
.ed-turn.him .ed-who,
.ed-turn.him .ed-said { color: var(--ed-him); }
/* He shouts. The stored text is lowercase; this is the only place it is not. */
.ed-turn.him .ed-said { text-transform: uppercase; }
.ed-turn.you .ed-who { color: var(--ed-you); }

/* ---- the input ---- */
.ed-say {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.ed-say input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--ed-log-edge);
  font: 12px/1.4 Verdana, Geneva, sans-serif;
}
.ed-say button {
  padding: 6px 16px;
  border: 1px solid var(--ed-frame);
  background: var(--ed-frame);
  color: #fff;
  font: bold 11px/1.4 Verdana, Geneva, sans-serif;
  cursor: pointer;
}
.ed-say button:hover { background: #7a11b3; }
.ed-say button:disabled,
.ed-say input:disabled { opacity: .5; cursor: default; }

/* ---- taken offline ----
   Article 96 asked twice. The adventure game already does this as a passage; here it
   is a state, and it lasts until you reload rather than forever, because a shared
   machine should not stay broken. */
.ed-brb {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--ed-off-edge);
  background: var(--ed-off-face);
  color: var(--ed-off-ink);
  font: 11px/1.5 Verdana, Geneva, sans-serif;
}
.ed-brb strong { letter-spacing: .05em; }
.ed-wrap.ed-offline .ed-log { border-color: var(--ed-off-edge); }

/* ---- logging in ----
   Only ever shown when a Worker actually answered. It sits where the input would be,
   because until edgar knows who you are there is nothing useful to type: a fact has to
   be filed under a name for anybody, including you, to ask about it later. */
.ed-auth {
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--ed-log-edge);
  background: var(--ed-known-face);
}
.ed-auth-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.ed-auth input {
  flex: 1 1 8em;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--ed-log-edge);
  font: 12px/1.4 Verdana, Geneva, sans-serif;
}
.ed-auth button {
  padding: 6px 14px;
  border: 1px solid var(--ed-frame);
  background: var(--ed-frame);
  color: #fff;
  font: bold 11px/1.4 Verdana, Geneva, sans-serif;
  cursor: pointer;
}
.ed-auth button.ed-btn {
  background: var(--ed-face);
  color: var(--ed-you);
  border-color: var(--ed-log-edge);
  font-weight: normal;
}
.ed-auth .footnote { margin-top: 6px; }
.ed-auth-why {
  margin-top: 6px;
  color: var(--ed-off-ink);
  font: 11px/1.5 Verdana, Geneva, sans-serif;
}

/* ---- which memory he is using ----
   Stated plainly rather than implied. "shared" and "in this browser only" are very
   different promises about what happens to what you type, and the page should not
   make you guess which one is in force. */
.ed-mode {
  margin-top: 8px;
  font: 11px/1.5 Verdana, Geneva, sans-serif;
  color: var(--ed-muted);
}

/* ---- what he knows ---- */
.ed-known-hd {
  margin: 14px 0 5px;
  font: bold 10px/1.4 Verdana, Geneva, sans-serif;
  color: var(--ed-frame);
}
.ed-known-hd span { font-weight: normal; color: var(--ed-muted); }
.ed-known {
  border: 1px solid var(--ed-known-edge);
  background: var(--ed-known-face);
  padding: 8px 10px;
  font: 11px/1.5 Verdana, Geneva, sans-serif;
  max-height: 190px;
  overflow-y: auto;
}
.ed-known-row { padding: 3px 0; border-bottom: 1px dotted var(--ed-known-edge); }
.ed-known-row:last-child { border-bottom: 0; }
.ed-known-them { color: var(--ed-muted); font-size: 10px; padding-left: 10px; }
.ed-empty { color: var(--ed-muted); font-style: italic; }

/* ---- the two old skins ----
   Flat, boxy, and shadowed, the way everything else in 2001 and 2003 is here. */
[data-era="2001"] .ed-log,
[data-era="2003"] .ed-log { box-shadow: 2px 2px 0 rgba(0, 0, 0, .3); }
[data-era="2001"] .ed-log { font-family: "Courier New", Courier, monospace; }

/* ---- modern ----
   Dark, so every local is redefined rather than tinted. */
[data-era="modern"] {
  --ed-frame: #8b5cf6;
  --ed-face: rgba(255, 255, 255, .04);
  --ed-ink: #e6e1f5;
  --ed-log-face: rgba(255, 255, 255, .03);
  --ed-log-edge: rgba(255, 255, 255, .14);
  --ed-him: #c9a6ff;
  --ed-you: #a49dbb;
  --ed-known-face: rgba(255, 255, 255, .02);
  --ed-known-edge: rgba(255, 255, 255, .10);
  --ed-muted: #8e87a5;
  --ed-off-edge: #d9a63c;
  --ed-off-face: rgba(217, 166, 60, .10);
  --ed-off-ink: #f0c46a;
}
[data-era="modern"] .ed-log,
[data-era="modern"] .ed-known,
[data-era="modern"] .ed-brb { border-radius: 8px; }
[data-era="modern"] .ed-log { border-width: 1px; }
[data-era="modern"] .ed-say input[type="text"] {
  border-radius: 6px;
  background: var(--ed-face);
  color: var(--ed-ink);
}
[data-era="modern"] .ed-say button {
  border-radius: 6px;
  color: #17142b;
  background: #c9a6ff;
  border-color: #c9a6ff;
}
[data-era="modern"] .ed-say button:hover { background: #d9c0ff; }
[data-era="modern"] .ed-btn {
  border-radius: 6px;
  background: transparent;
  color: var(--ed-you);
}
[data-era="modern"] .ed-btn:hover { background: rgba(255, 255, 255, .06); }
[data-era="modern"] .ed-auth { border-radius: 8px; }
[data-era="modern"] .ed-auth input {
  border-radius: 6px;
  background: var(--ed-face);
  color: var(--ed-ink);
}
[data-era="modern"] .ed-auth button {
  border-radius: 6px;
  color: #17142b;
  background: #c9a6ff;
  border-color: #c9a6ff;
}
[data-era="modern"] .ed-auth button.ed-btn {
  background: transparent;
  color: var(--ed-you);
  border-color: var(--ed-log-edge);
}

/* ---- the label nobody sees ----
   The input has a real label because a bare text box next to a button is a guess for
   anyone using a screen reader. It is hidden visually because the page already says,
   in prose, what the box is for. */
.ed-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.ed-mug { float: left; margin: 0 8px 4px 0; }

/* ---- the evidence ----
   Deliberately the plainest thing on the page. It is a table because it is a table:
   a claim, the article it rests on, and why that article settles it. The second list
   below it is styled the same but reads as a log, because that is what it is. */
.ed-ev { margin-top: 20px; }
.ed-ev-hd {
  margin: 18px 0 6px;
  font: bold 12px/1.4 Verdana, Geneva, sans-serif;
  color: var(--ed-frame);
}
.ed-ev-tbl {
  width: 100%;
  border-collapse: collapse;
  font: 11px/1.5 Verdana, Geneva, sans-serif;
}
.ed-ev-tbl th {
  text-align: left;
  padding: 4px 8px 4px 0;
  border-bottom: 1px solid var(--ed-known-edge);
  color: var(--ed-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ed-ev-tbl td {
  padding: 7px 8px 7px 0;
  border-bottom: 1px dotted var(--ed-known-edge);
  vertical-align: top;
}
.ed-ev-q { font-style: italic; width: 26%; }
.ed-ev-src { width: 24%; }
.ed-ev-src span { color: var(--ed-muted); font-size: 10px; }

.ed-ev-obs {
  margin: 8px 0;
  padding: 8px 10px;
  border-left: 3px solid var(--ed-known-edge);
  font: 11px/1.5 Verdana, Geneva, sans-serif;
}
.ed-ev-obs-hd { font-weight: bold; color: var(--ed-frame); }
.ed-ev-obs-raw {
  margin: 6px 0 0;
  padding: 6px 8px;
  background: var(--ed-known-face);
  border: 1px solid var(--ed-known-edge);
  font: 10px/1.5 "Courier New", Courier, monospace;
  color: var(--ed-muted);
  overflow-x: auto;
}

/* ---- narrow screens ----
   The name column is the first thing to go; on a phone the transcript needs its
   width more than it needs the alignment. */
@media (max-width: 520px) {
  .ed-log { height: 260px; }
  .ed-who { display: block; min-width: 0; padding-right: 0; }
  .ed-said { max-width: 100%; }
  /* Three columns of prose in 375px is four columns of nothing. Stack them, and let
     the header row go -- each cell reads fine on its own. */
  .ed-ev-tbl, .ed-ev-tbl tbody, .ed-ev-tbl tr, .ed-ev-tbl td { display: block; width: auto; }
  .ed-ev-tbl thead { display: none; }
  .ed-ev-tbl tr { padding: 8px 0; border-bottom: 1px dotted var(--ed-known-edge); }
  .ed-ev-tbl td { border-bottom: 0; padding: 2px 0; }
}