/* Option 3a — PHOSPHOR/CYAN. Mission-ops terminal per the kdb design handoff.
   Tokens are the handoff's, verbatim. Radius 0 is load-bearing. */
@font-face {
  font-family: "IBM Plex Mono";
  src: url(plexmono.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
}
:root {
  --ground: #04080a;
  --cy: #5ad0e6;
  --red: #d64a4a;
}
* { box-sizing: border-box; margin: 0; border-radius: 0;
    -webkit-tap-highlight-color: transparent; }
html { background: var(--ground); }
body {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 400;
  background: var(--ground); color: var(--cy);
  max-width: 640px; margin: 0 auto;
}
::selection { background: var(--cy); color: var(--ground); }
@keyframes blink { 50% { opacity: 0; } }
.caret { animation: blink 1.05s steps(1) infinite; }

/* status bar — fixed, content scrolls under it */
#statusbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  max-width: 640px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: baseline;
  padding: calc(18px + env(safe-area-inset-top)) 18px 8px;
  background: var(--ground);
  border-bottom: 1px dashed rgba(90, 208, 230, .3);
  font-size: 10px; line-height: 1.9; color: rgba(90, 208, 230, .6);
  letter-spacing: .12em;
}
#sb-badge { color: var(--red); }

#screen { padding: calc(58px + env(safe-area-inset-top)) 0
                   calc(120px + env(safe-area-inset-bottom)); }

/* command echo */
.echo { padding: 14px 18px 0; font-size: 11px; line-height: 1.75; }
.echo .e1 { color: rgba(90, 208, 230, .55); }
.echo .e2 { color: rgba(90, 208, 230, .4); }

/* manifest table */
.tblhead {
  display: flex; justify-content: space-between;
  margin: 16px 18px 0; padding-bottom: 5px;
  font-size: 10px; letter-spacing: .12em; color: rgba(90, 208, 230, .45);
  border-bottom: 1px solid rgba(90, 208, 230, .25);
  white-space: pre;
}
.row {
  display: flex; gap: 8px; align-items: baseline;
  margin: 0 18px; padding: 9px 0;
  border-bottom: 1px solid rgba(90, 208, 230, .12);
  font-size: 12px; line-height: 1.5;
}
.row:active { background: rgba(90, 208, 230, .10); }
.row .id { color: rgba(90, 208, 230, .5); }
.row .glyph { white-space: pre; }
.row .obj { flex: 1; overflow-wrap: anywhere; }
.row .eta { color: rgba(90, 208, 230, .65); }
.row.over { box-shadow: inset 2px 0 0 rgba(214, 74, 74, .8); }
.row.over .glyph, .row.over .eta { color: var(--red); }
.row.cleared { opacity: .42; }
.row.cleared .obj { text-decoration: line-through; }
/* group separators (adaptation: manifest carries week/later/backlog too) */
.grp {
  margin: 0 18px; padding: 14px 0 2px;
  font-size: 10px; line-height: 1.7; letter-spacing: .12em;
  color: rgba(90, 208, 230, .42);
}

/* tally */
.tally { padding: 18px 18px 0; font-size: 10px; line-height: 1.7;
         color: rgba(90, 208, 230, .42); }
.tally .red { color: var(--red); }

/* command dock — pinned bottom */
#dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 4;
  max-width: 640px; margin: 0 auto;
  padding: 12px 18px calc(24px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(90, 208, 230, .3);
  background: rgba(4, 8, 10, .9);
}
.promptline { display: flex; align-items: baseline; gap: 7px;
              font-size: 12px; line-height: 1.4; }
.opsp { color: rgba(90, 208, 230, .5); }
#cmd {
  flex: 1; font: inherit; color: var(--cy); background: none; border: 0;
  outline: none; padding: 0; caret-color: var(--cy); min-width: 0;
}
#chips { display: flex; gap: 6px; margin-top: 9px; }
#chips button, .keycell {
  font-family: inherit; background: none; cursor: pointer;
  border: 1px solid rgba(90, 208, 230, .28); color: rgba(90, 208, 230, .45);
  font-size: 9px; padding: 5px 7px; letter-spacing: .05em;
}
#chips button:active, .keycell:active { background: rgba(90, 208, 230, .10); }

/* capture screen */
.cap { padding: 16px 18px 0; font-size: 12px; line-height: 1.75; }
.cap .e1 { color: rgba(90, 208, 230, .55); }
.cap .help { font-size: 11px; color: rgba(90, 208, 230, .4); }
.objline { display: flex; align-items: baseline; gap: 7px; margin-top: 14px; }
.objline label { color: rgba(90, 208, 230, .5); }
#obj { flex: 1; font: inherit; color: var(--cy); background: none; border: 0;
       outline: none; padding: 0; caret-color: var(--cy); min-width: 0; }
.fields { margin-top: 10px; font-size: 11px; line-height: 1.6;
          color: rgba(90, 208, 230, .35); white-space: pre; }
.fields .set { color: rgba(90, 208, 230, .65); }
.parser {
  margin: 26px 18px 0; border: 1px solid rgba(90, 208, 230, .25);
  padding: 12px 14px; font-size: 10px; line-height: 1.8;
}
.parser .ph { letter-spacing: .14em; color: rgba(90, 208, 230, .4);
              margin-bottom: 6px; }
.parser .pb { color: rgba(90, 208, 230, .55); }
.parser .pt { color: var(--cy); margin-top: 8px; }
.parser:active { background: rgba(90, 208, 230, .10); }
.keyrow {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  max-width: 640px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  padding: 14px 18px calc(26px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(90, 208, 230, .3);
  background: rgba(4, 8, 10, .9);
}
.keycell { font-size: 10px; padding: 11px 0; text-align: center; }
.keycell.save { border-color: rgba(90, 208, 230, .5);
                background: rgba(90, 208, 230, .14); color: var(--cy); }

#toast {
  position: fixed; left: 50%; bottom: calc(110px + env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 10;
  background: var(--ground); color: var(--cy);
  border: 1px solid rgba(90, 208, 230, .28);
  padding: 6px 12px; font-size: 11px; max-width: 90vw;
}
.empty { padding: 40px 18px; font-size: 11px; text-align: center;
         color: rgba(90, 208, 230, .4); }