/* The cockpit's handwriting, narrowed to one hand.
   Near-black ground, coral as the only accent, monospace, square corners.
   Structure from outlines and indentation, never from surfaces. */

:root {
  --grund: #0a0a0b;
  --schrift: #d4d4d4;
  --blass: #6b6b70;
  --linie: #232326;
  --koralle: #d97757;
  --gelb: #d9b757;
  --gruen: #6faa62;
  --rot: #c2564a;
  --kopf: 46px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--grund);
  color: var(--schrift);
  font: 15px/1.55 ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
  overscroll-behavior-y: none;
}

button, input, textarea {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid var(--linie);
  border-radius: 0;
  /* Under 16px iOS zooms the page on focus and never zooms back. */
  font-size: 16px;
}

button { cursor: pointer; }
button:active { border-color: var(--koralle); }

/* ---------------------------------------------------------------- head */

header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: calc(var(--kopf) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 12px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--grund);
  border-bottom: 1px solid var(--linie);
  z-index: 5;
}

header .zurueck {
  border: 0;
  padding: 6px 8px 6px 0;
  color: var(--blass);
  font-size: 18px;
}

header .titel {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

header .draht {
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--blass);
  white-space: nowrap;
}
header .draht.da { color: var(--gruen); }
header .draht.weg { color: var(--rot); }

/* ---------------------------------------------------------------- body */

main {
  padding: calc(var(--kopf) + env(safe-area-inset-top) + 8px) 12px
           calc(env(safe-area-inset-bottom) + 16px);
  min-height: 100%;
}

body.imGespraech main {
  padding-bottom: calc(var(--eingabeH, 60px) + env(safe-area-inset-bottom) + 20px);
}

/* ---------------------------------------------------------------- login */

.anmeldung {
  max-width: 340px;
  margin: 18vh auto 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.anmeldung .marke { color: var(--koralle); letter-spacing: .18em; font-size: 12px; }
.anmeldung input { padding: 12px; width: 100%; }
.anmeldung button { padding: 12px; border-color: var(--koralle); color: var(--koralle); }
.anmeldung .fehler { color: var(--rot); font-size: 13px; min-height: 1.2em; }

/* ---------------------------------------------------------------- tiles */

.kachel {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px;
  margin-bottom: 8px;
  border: 1px solid var(--linie);
}
.kachel .kopfzeile { display: flex; align-items: baseline; gap: 8px; }
.kachel .mark { font-size: 13px; }
.kachel .name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kachel .ort {
  color: var(--blass);
  font-size: 12px;
  margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  direction: rtl; text-align: left;   /* a long path shows its end, not its start */
}
.kachel .letztes {
  color: var(--blass);
  font-size: 12px;
  margin-top: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mark.laeuft  { color: var(--koralle); }
.mark.fragt   { color: var(--gelb); }
.mark.fertig  { color: var(--gruen); }
.mark.ruht    { color: var(--blass); }

.leer { color: var(--blass); text-align: center; margin-top: 22vh; font-size: 13px; }

/* ---------------------------------------------------------------- turns */

.zug { border-left: 1px solid var(--linie); padding: 2px 0 10px 12px; margin-left: 4px; }
.zug.vonMir { border-left-color: var(--koralle); }

.text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 6px 0; }
.text.meins { color: var(--koralle); }
.text.schwebt { opacity: .45; }

.werkzeug {
  color: var(--blass);
  font-size: 13px;
  margin: 4px 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.werkzeug b { color: var(--schrift); font-weight: normal; }
.werkzeug.schlecht { color: var(--rot); }

.notiz { color: var(--blass); font-size: 12px; margin: 4px 0; opacity: .75; }

/* ---------------------------------------------------------------- ask */

.frage { border: 1px solid var(--gelb); padding: 12px; margin: 10px 0; }
.frage .was { margin-bottom: 10px; }
.frage button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px;
  margin-top: 6px;
}
.frage button .lab { color: var(--gelb); }
.frage button .erk { color: var(--blass); font-size: 12px; display: block; margin-top: 2px; }
.frage.beantwortet { opacity: .4; pointer-events: none; }

/* ---------------------------------------------------------------- composer */

.eingabe {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: var(--grund);
  border-top: 1px solid var(--linie);
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.eingabe textarea {
  flex: 1;
  resize: none;
  padding: 10px;
  max-height: 40vh;
  line-height: 1.4;
}
.eingabe button { padding: 10px 14px; border-color: var(--koralle); color: var(--koralle); }
.eingabe button.halt { border-color: var(--rot); color: var(--rot); }
.eingabe button:disabled { opacity: .35; border-color: var(--linie); color: var(--blass); }

/* ---------- Set text ----------

   The same handwriting as the transcript on the desktop, in the width a hand
   holds. Everything here is narrower than there and nothing is smaller than
   13px: a phone is read at arm's length in daylight. */
.text p { margin: 0 0 .7em; }
.text p:last-child { margin-bottom: 0; }
.text h3, .text h4 {
  margin: 1em 0 .4em;
  font-size: 14px;
  font-weight: 600;
  color: var(--schrift);
}
.text h3:first-child, .text h4:first-child { margin-top: 0; }
.text ul, .text ol { margin: 0 0 .7em; padding-left: 1.3em; }
.text li { margin: .2em 0; }
.text hr { border: 0; border-top: 1px solid var(--linie); margin: 1em 0; }
.text blockquote {
  margin: 0 0 .7em;
  padding-left: .8em;
  border-left: 2px solid var(--linie);
  color: var(--blass);
}
.text a { color: var(--koralle); }
.text code {
  font-size: .92em;
  padding: 1px 4px;
  background: #17171a;
  border-radius: 2px;
}
.text pre.code {
  margin: 0 0 .7em;
  padding: .6em .7em;
  background: #121215;
  border-left: 2px solid var(--linie);
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.45;
  /* Wrapped code is code one has to reassemble mentally. On a phone the
     lesser evil is a bar to push sideways. */
  white-space: pre;
  -webkit-overflow-scrolling: touch;
}

/* The answer as it is being written: plain, and marked as unfinished by the
   line under it rather than by a spinner. */
.text.tickt {
  white-space: pre-wrap;
  border-bottom: 1px solid var(--linie);
  padding-bottom: .5em;
}

/* ---------- Pictures ---------- */
figure.bild { margin: .6em 0; }
figure.bild img {
  display: block;
  max-width: 100%;
  height: auto;
  background: #17171a;
}
figure.bild figcaption {
  margin-top: .3em;
  font-size: 12px;
  color: var(--blass);
}
.bLaden, .bFehler {
  padding: .8em;
  font-size: 12px;
  color: var(--blass);
  background: #121215;
  border-left: 2px solid var(--linie);
}
.bFehler { color: var(--rot); }

/* Tapped, it fills the screen. */
.lupe {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(6, 6, 7, .96);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top) 8px env(safe-area-inset-bottom);
}
.lupe img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ---------- The numbers ---------- */
.abschluss {
  margin: .5em 0 .2em;
  font-size: 12px;
  color: var(--blass);
}
/* A second line in the header, and only inside a conversation - the list
   carries its numbers on the tiles. The header grows by exactly that line and
   the transcript is pushed down by the same amount, or the first turn would
   sit underneath it. */
.kopfMeta {
  flex-basis: 100%;
  order: 9;
  font-size: 11px;
  color: var(--blass);
  line-height: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kopfMeta.heiss { color: var(--gelb); }

body.imGespraech header {
  height: calc(var(--kopf) + 15px + env(safe-area-inset-top));
  flex-wrap: wrap;
  align-content: center;
}
body.imGespraech main {
  padding-top: calc(var(--kopf) + 15px + env(safe-area-inset-top) + 8px);
}
.kachel .zahlen {
  margin-top: 4px;
  font-size: 11px;
  color: var(--blass);
}
.kachel .zahlen.heiss { color: var(--gelb); }