/* The factory prototype's page, drawn as a terminal: black, one monospace font, bone text, amber for
   yours and what to do next, red for trouble. Rows: the status line, the map with the inspector beside it
   (under it on a phone), the log line, the command bar. Buttons are plain text: [K]ey. */
.tui { display: grid; grid-template-rows: auto 1fr auto auto; height: 100dvh; font: 500 14px/1.45 var(--mono); color: var(--bone); background: var(--void); }
.tui #main { display: grid; grid-template-columns: 1fr 38ch; min-height: 0; border-top: 1px solid var(--glass-line); border-bottom: 1px solid var(--glass-line); }
.tui #cv { position: static; width: 100%; height: 100%; min-width: 0; min-height: 0; cursor: crosshair; touch-action: none; }
.tui button { font: inherit; color: inherit; background: none; border: 0; padding: 0 .35ch; cursor: pointer; letter-spacing: 0; transition: none; white-space: pre; }
.tui button:hover:not(:disabled) { background: #1a1916; border: 0; }
.tui button.on { background: var(--amber); color: var(--void); border: 0; }
.tui button.on b, .tui button.on i { color: var(--void); }
.tui button:disabled { opacity: .35; }
.tui button b { color: var(--amber); font-weight: 600; }
.tui .amb { color: var(--amber); } .tui .red { color: var(--danger); } .tui .vio { color: var(--research); }
.tui .ok { color: var(--text); } .tui .dim { color: var(--muted); }

.line { display: flex; align-items: center; gap: 0 .2ch; padding: 2px 1ch; white-space: pre; overflow: hidden; min-height: 1.45em; }
#top { flex-wrap: wrap; }
#top .sep { color: #4a4842; padding: 0 .6ch; }
#top .grp { display: inline-flex; }
#top .meter { letter-spacing: -.05em; }
#log { color: var(--bone-dim); text-overflow: ellipsis; display: block; }
#log b { color: var(--amber); }

#insp { padding: 6px 1ch; overflow-y: auto; border-left: 1px solid var(--glass-line); font-size: 13px; }
#insp .h { color: var(--text); font-weight: 600; letter-spacing: .04em; margin: 4px 0 2px; display: flex; justify-content: space-between; }
#insp .h:first-child { margin-top: 0; }
#insp .kv { display: grid; grid-template-columns: 13ch 1fr; white-space: pre-wrap; }
#insp .kv .k { color: var(--muted); }
#insp .kv.amb .k { color: var(--amber); } #insp .kv.red .k { color: var(--danger); } #insp .kv.dim { color: var(--muted); }
#insp .tool { color: var(--amber); margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px dashed var(--glass-line); }
#insp .row { display: block; width: 100%; text-align: left; padding: 1px .5ch; }
#insp .row.can { color: var(--amber); }
#insp .row.got { color: var(--muted); opacity: 1; }
#insp .desc { color: var(--muted); padding-left: 4.5ch; font-size: 12px; }
#insp .x { color: var(--muted); }
#insp u, #insp b { text-decoration-thickness: 2px; }

#cmd { display: flex; flex-wrap: wrap; gap: 0 1ch; padding: 3px 1ch 5px; }
#cmd button { padding: 1px .4ch; }
#cmd button i { font-style: normal; color: var(--muted); margin-left: .6ch; }
#cmd button.locked { opacity: .35; }
#cmd button.ready { color: var(--amber); }

#over { position: fixed; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(46ch, calc(100vw - 16px)); padding: 14px 2ch; background: var(--void); border: 1px solid var(--bone); box-shadow: 0 0 0 4px var(--void), 0 0 0 5px var(--glass-line); display: flex; flex-direction: column; gap: 6px; }
#over .h { color: var(--amber); font-weight: 600; }
#over p { margin: 0; }
#over .kv { display: grid; grid-template-columns: 18ch 1fr; }
#over .kv .k { color: var(--muted); }
#over button { align-self: flex-start; margin-top: 6px; color: var(--amber); border: 1px solid var(--amber); padding: 4px 1ch; }

@media (max-width: 700px) {
  .tui { font-size: 13px; }
  .tui #main { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  #insp { border-left: 0; border-top: 1px solid var(--glass-line); max-height: 8.6em; font-size: 12px; }
  #top { padding: 0 4px; font-size: 12px; }
  #top .sep { padding: 0 .3ch; }
  #top button { min-height: 30px; min-width: 26px; padding: 0 .2ch; }
  #log { font-size: 12px; }
  #cmd { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; padding: 3px 4px 6px; }
  #cmd button { min-height: 40px; border: 1px solid var(--glass-line); text-align: center; font-size: 12px; }
  #insp .row { min-height: 30px; }
  #insp.tall { max-height: 45vh; }
}