/* A CLI LOOK IN PLAIN CSS (ADR-015 D4). Dark monospace column, bottom-anchored prompt.
   There is no terminal engine behind it: this is ordinary text in ordinary elements, which
   is why it stays selectable, zoomable and reachable by a screen reader.

   NO WEBFONT. A font file is 20-90 KB of a 300 KB shell budget on a metered connection for
   a typeface nobody asked for; the system monospace stack is already on every target
   (Pi OS ships DejaVu Sans Mono, Android ships Roboto Mono).

   THE RATIOS BELOW ARE COMPUTED, NOT JUDGED, AND A TEST READS THEM (D5).
   `tools/theme.test.mjs` parses this block, recomputes every ratio from the hex itself and
   fails if a comment and its colour disagree by more than 0.05 - so a stale figure beside a
   retuned colour is red, which is the way this rule actually rots. It also fails any pair
   under its threshold and any font-size in this file under 11px.

   THRESHOLDS, and each traces to docs/UI_PRINCIPLES.md §1 rather than to taste:
     reading text        7.0:1  (WCAG AAA) - --text and --dim carry prose
     other text          4.5:1  (WCAG AA)  - labels, echo, verdicts, errors
     control boundary    3.0:1  (WCAG 1.4.11 non-text) - what tells a candidate where the
                                answer box and the option buttons ARE on a dim panel

   --line WAS #333846, which computes to 1.63:1 on --bg. That is the hairline §1 names
   outright: it reads on a laptop and vanishes on a cheap phone in sunlight, and it is the
   border of the option buttons and of the prompt input - the two things a candidate has to
   find. It is now #636A7A, and the test holds it there. */
:root {
  --bg: #0E1015;
  --surface: #181B23;  /* 1.11:1 on --bg - a FILL, not a boundary, and nothing depends on
                          seeing its edge: the 3:1 edge is --line. Listed so the pair is
                          declared rather than forgotten. */
  --line: #636A7A;     /* 3.51:1 on --bg, 3.18:1 on --surface - control boundary */
  --text: #F5F3EF;     /* 17.17:1 on --bg, 15.53:1 on --surface - reading text */
  --dim: #BFC4D2;      /* 10.91:1 on --bg, 9.87:1 on --surface - reading text */
  --faint: #949AAC;    /* 6.78:1 on --bg */
  --accent: #F3B96C;   /* 10.84:1 on --bg, 9.81:1 on --surface */
  --ok: #83CFA1;       /* 10.33:1 on --bg */
  --warn: #EE8E8E;     /* 8.06:1 on --bg */
  --column: 62ch;      /* ADR-029 D7 */
  --gutter: 16px;
  /* THE TEXT-SIZE FLOOR, declared once so the test has something to read rather than a
     number hard-coded in two places. No font-size in this file may fall below it (§1). */
  --text-size-floor: 11px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: ui-monospace, "DejaVu Sans Mono", "Roboto Mono", "Liberation Mono", Menlo, Consolas, monospace;
  font-size: 15px;
  line-height: 1.5;
}

body {
  display: flex;
  flex-direction: column;
}

header {
  display: flex;
  justify-content: space-between;
  gap: var(--gutter);
  padding: 8px var(--gutter);
  border-bottom: 1px solid var(--line);
  color: var(--faint);
  font-size: 12px;
}

main {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--gutter);
}

#transcript {
  max-width: var(--column);
  margin: 0 auto;
  overflow-wrap: anywhere;
}

#transcript > * { margin: 0 0 8px; }

.echo { color: var(--faint); }
.chrome { color: var(--dim); }
.notice { color: var(--accent); }
.error { color: var(--warn); }
/* An app's own output, visually distinct from the shell's own words so a candidate can
   tell who is speaking. It is rendered with textContent and never parsed. */
.app { color: var(--text); border-left: 2px solid var(--accent); padding-left: 0.5rem; }

.view-title {
  color: var(--faint);
  font-size: 12px;
  text-transform: lowercase;
  letter-spacing: 0.04em;
}

.block-text { margin-bottom: 6px; }
.block-fallback { color: var(--faint); }
.block-image { display: block; }
.block-image svg { max-width: 100%; height: auto; }

.item-prompt { margin-bottom: 8px; }

.options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* A tap does what typing the letter does. V1 is keyboard-first and will be clumsy on a
   phone - clumsy is not blocked (ADR-015 D2), so the targets are finger-sized. */
.option {
  display: flex;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  align-items: center;
  text-align: left;
  padding: 8px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 4px;
  font: inherit;
  cursor: pointer;
}

.option:hover, .option:focus-visible { border-color: var(--accent); outline: none; }
.option-label { color: var(--accent); }

.result { border-left: 2px solid var(--line); padding-left: 8px; }
.verdict { color: var(--accent); }
.explanation-title {
  color: var(--faint);
  font-size: 12px;
  text-transform: lowercase;
}

footer {
  border-top: 1px solid var(--line);
  padding: 8px var(--gutter);
  background: var(--bg);
}

#prompt-form {
  display: flex;
  gap: 8px;
  max-width: var(--column);
  margin: 0 auto;
  align-items: center;
}

#prompt-label { color: var(--accent); white-space: nowrap; }

#prompt-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font: inherit;
  padding: 4px 0;
}

#prompt-input:focus { outline: none; border-bottom-color: var(--accent); }

#prompt-send {
  min-height: 40px;
  min-width: 44px;
  background: var(--surface);
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: 4px;
  font: inherit;
  cursor: pointer;
}

/* U+23CE RETURN SYMBOL. A GLYPH, NOT A WORD: it belongs to no language, so it is drawn
   here rather than carried by the catalogue. The button's NAME - what a screen reader
   announces - is `action.send`, set as an aria-label in boot(). Writing a WORD in a
   `content:` property would be an untranslatable string in a stylesheet, which is the
   evasion tools/check-shell-i18n.mjs case `css-content` exists to catch. */
#prompt-send::before { content: "\23CE"; }

@media (max-width: 420px) {
  html, body { font-size: 14px; }
  header { font-size: 11px; }
}